/* login.css – tampilan login baru yang modern & ergonomis */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
  font-family:'Outfit',system-ui,sans-serif;
  overflow-x:hidden;
}

.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  position:relative;
  background:#020617;
}

/* background: gradient mesh + orbs */
.login-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.login-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(249,115,22,.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(14,165,233,.12) 0%, transparent 45%),
    radial-gradient(ellipse 50% 30% at 50% 90%, rgba(34,197,94,.08) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(15,23,42,.95) 0%, #020617 100%);
  z-index:0;
}
.login-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:48px 48px;
  z-index:0;
  opacity:.5;
}

/* floating orbs animation */
.login-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.5;
  animation:login-float 15s ease-in-out infinite;
}
.login-orb-1{
  width:300px;height:300px;
  background:rgba(249,115,22,.25);
  top:10%;left:15%;
  animation-delay:0s;
}
.login-orb-2{
  width:200px;height:200px;
  background:rgba(14,165,233,.2);
  top:60%;right:20%;
  animation-delay:-5s;
}
.login-orb-3{
  width:180px;height:180px;
  background:rgba(34,197,94,.15);
  bottom:20%;left:25%;
  animation-delay:-8s;
}
@keyframes login-float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-20px) scale(1.05);}
  66%{transform:translate(-20px,25px) scale(.95);}
}

/* card utama */
.login-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:400px;
  animation:login-card-in .5s cubic-bezier(.22,1,.36,1) forwards;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:1.25rem;
  padding:2.25rem 2rem;
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 1px 0 rgba(255,255,255,.04);
  animation:login-card-in .5s cubic-bezier(.22,1,.36,1) forwards;
}

/* logo & judul */
.login-header{
  text-align:center;
  margin-bottom:2rem;
}
.login-logo,
.login-logo-img{
  display:block;
  margin:0 auto 1rem;
}
.login-logo{
  width:56px;
  height:56px;
  border-radius:1rem;
  background:linear-gradient(135deg,#f97316,#ea580c);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:800;
  color:#fff;
  box-shadow:0 8px 24px rgba(249,115,22,.35);
  letter-spacing:-.02em;
}
.login-title{
  font-size:1.5rem;
  font-weight:700;
  color:#f8fafc;
  letter-spacing:-.02em;
  margin-bottom:.35rem;
}
.login-subtitle{
  font-size:.875rem;
  color:#94a3b8;
  font-weight:400;
}

/* form */
.login-form{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.login-field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.login-label{
  font-size:.8rem;
  font-weight:500;
  color:#94a3b8;
  letter-spacing:.02em;
}
.login-input{
  width:100%;
  padding:.75rem 1rem;
  background:rgba(2,6,23,.6);
  border:1px solid rgba(148,163,184,.2);
  border-radius:.65rem;
  color:#f1f5f9;
  font-size:.95rem;
  font-family:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.login-input::placeholder{
  color:#64748b;
}
.login-input:hover{
  border-color:rgba(148,163,184,.35);
}
.login-input:focus{
  outline:none;
  border-color:#f97316;
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
  background:rgba(2,6,23,.8);
}

/* error message */
.login-error{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
  border-radius:.65rem;
  color:#fca5a5;
  font-size:.875rem;
  animation:login-shake .4s ease;
}
.login-error i{
  font-size:1rem;
  flex-shrink:0;
}
@keyframes login-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}

/* submit button */
.login-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  padding:.9rem 1.25rem;
  margin-top:.5rem;
  background:linear-gradient(135deg,#f97316,#ea580c);
  border:none;
  border-radius:.65rem;
  color:#fff;
  font-size:1rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:transform .15s, box-shadow .2s, filter .2s;
  box-shadow:0 4px 14px rgba(249,115,22,.4);
}
.login-submit:hover{
  filter:brightness(1.08);
  box-shadow:0 6px 20px rgba(249,115,22,.45);
  transform:translateY(-1px);
}
.login-submit:active{
  transform:translateY(0);
}

/* footer hint */
.login-footer{
  margin-top:1.75rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.75rem;
  color:#64748b;
  text-align:center;
  line-height:1.5;
}
.login-footer strong{
  color:#94a3b8;
  font-weight:500;
}

@keyframes login-card-in{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* responsive */
@media (max-width:420px){
  .login-card{
    padding:1.75rem 1.25rem;
  }
  .login-title{
    font-size:1.35rem;
  }
}