/* =======================================================
   🔐 PAGE LOGIN / INDEX
======================================================= */

.login-body{
  height:100vh;
  background:linear-gradient(135deg,#4b6cb7,#182848);
  display:flex;
  justify-content:center;
  align-items:center;
}

.login-container{
  width:100%;
  display:flex;
  justify-content:center;
  padding:20px;
}

.login-card{
  background:#fff;
  width:100%;
  max-width:420px;
  padding:32px;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
  animation:fadeIn .5s ease-out;
  text-align:center;
}

.logo-zone i{
  font-size:48px;
  color:#4b6cb7;
  margin-bottom:10px;
}

.subtitle{
  margin:0;
  color:#666;
}

.input-group{
  margin-top:18px;
  text-align:left;
}

.input-group label{
  font-weight:600;
  color:#333;
}

.input-group input{
  width:100%;
  margin-top:6px;
  padding:12px;
  border-radius:10px;
  border:1px solid #ccc;
}

.input-group input:focus{
  border-color:#4b6cb7;
  box-shadow:0 0 4px rgba(75,108,183,0.4);
}

.login-btn{
  margin-top:25px;
  width:100%;
  background:linear-gradient(135deg,#4b6cb7,#3553a3);
  color:#fff;
  padding:14px;
  border:none;
  border-radius:12px;
  font-size:16px;
  cursor:pointer;
}

.login-btn:hover{
  background:linear-gradient(135deg,#5c7fd4,#3d5db9);
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}