/* =========================
   Base & Variables
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --glass-bg: rgba(17,24,39,.55);      /* kaca gelap biar kebaca di atas foto */
  --glass-bd: rgba(255,255,255,.14);   /* border tipis */
  --radius: 24px;
  --focus1: #06b6d4;
  --focus2: #6366f1;
  --txt-dim: rgba(255,255,255,.8);
  --header-h: 56px;                    /* tinggi header/footer fixed */
  --footer-h: 56px;
}

/* =========================
   BODY — FOTO sebagai background (tanpa gradient)
   ========================= */
html{ height:100%; background:transparent; }
body{
  height:100%;
  display:block;                       /* jangan flex; biar header/footer fixed gak ngedorong */
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height:1.6;
  color:#fff;

  /* Foto satu-satunya layer */
  background: #0b1020 url("/src/img/mas_sampurnation.webp")
              center center / cover no-repeat fixed;
}

/* iOS/mobile: hindari janky scroll dgn fixed */
@media (max-width:820px){
  body{ background-attachment:scroll; }
}

/* =========================
   CENTERING WRAPPER (di halaman login)
   ========================= */
.auth-center{
  min-height: calc(100svh - (var(--header-h) + var(--footer-h)));
  min-height: calc(100vh  - (var(--header-h) + var(--footer-h)));
  display: grid;
  place-items: center;
  padding: 20px;
  padding-top: calc(var(--header-h) + 12px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--footer-h) + 12px + env(safe-area-inset-bottom, 0px));
}

/* kalau ada overlay/animasi lama, matikan biar foto gak ketutup */
.auth-bg, .aurora, .orb, .gridlines{ display:none !important; }

/* =========================
   Container & Card
   ========================= */
.login-container{ width:100%; max-width:420px; perspective:1000px; margin-inline:auto; position:relative; z-index:2;perspective: none ! }

/* Card (tetap ukurannya; style web3 halus) */
.login-card{
  background: var(--glass-bg);
  border:1px solid var(--glass-bd);
  border-radius:var(--radius);
  padding:40px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  transform: none !important;              /* tidak ada transform awal */
  transform-style: flat !important; 
}
.login-card:hover{ transform: translateY(-5px) rotateX(2deg) rotateY(-2deg); box-shadow:0 12px 40px rgba(0,0,0,.24);transform: none !important;              /* matikan rotasi/geser saat hover */
  /* tetap boleh naikin shadow biar ada feedback */
  box-shadow: 0 12px 40px rgba(0,0,0,.24); }

/* efek neon conic glow (berputar halus) */
.login-card::after{
  content:"";
  position:absolute; inset:1px; border-radius:22px;
  background:
    conic-gradient(from 0deg,
      rgba(99,102,241,.0) 0%,
      rgba(99,102,241,.18) 12%,
      rgba(6,182,212,.18) 25%,
      rgba(34,197,94,.14) 37%,
      rgba(6,182,212,.18) 50%,
      rgba(99,102,241,.18) 62%,
      rgba(6,182,212,.18) 75%,
      rgba(34,197,94,.14) 87%,
      rgba(99,102,241,.0) 100%);
  filter: blur(18px);
  animation: cardGlow 10s linear infinite;
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:-1;
}

/* highlight menyapu tipis di atas kartu */
.login-card::before{
  content:"";
  position:absolute; inset:0; border-radius:24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  opacity:.35;
  transform: translateZ(1px);
  animation: sweep 3.6s ease-in-out infinite;
  pointer-events:none;
}

/* Header kartu */
.login-header{ text-align:center; margin-bottom:32px; }
.login-header h2{
  color:#fff; font-size:2rem; font-weight:700; margin-bottom:8px;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.login-header p{ color:var(--txt-dim); font-size:1rem; }

/* =========================
   Form Controls
   ========================= */
.form-group{ margin-bottom:24px; position:relative; }
.input-wrapper{ position:relative; display:flex; flex-direction:column; }
.input-wrapper input{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  padding:16px 16px 10px 16px;
  color:#fff; font-size:16px; transition:all .25s cubic-bezier(.4,0,.2,1);
  width:100%; outline:none; backdrop-filter: blur(10px);
}
.input-wrapper input::placeholder{ color:transparent; }
.input-wrapper label{
  position:absolute; left:16px; top:14px; color:rgba(255,255,255,.75);
  font-size:15px; transition:all .2s cubic-bezier(.4,0,.2,1); pointer-events:none; transform-origin:left top;
}
.input-wrapper input:focus,
.input-wrapper input:valid{
  border-color:var(--focus1); background: rgba(255,255,255,.12); transform:translateY(0);
  box-shadow:0 10px 28px rgba(6,182,212,.22);
}
.input-wrapper input:focus + label,
.input-wrapper input:valid + label{ transform:translateY(-10px) scale(.86); color:var(--focus1); font-weight:600; }
.focus-border{ position:absolute; bottom:0; left:50%; width:0; height:2px; background:linear-gradient(90deg,var(--focus1),var(--focus2)); transition:width .25s cubic-bezier(.4,0,.2,1); transform:translateX(-50%); border-radius:2px;}
.input-wrapper input:focus ~ .focus-border{ width:100%; }

/* Password toggle */
.password-wrapper{ position:relative; }
.password-wrapper input{ padding-right:48px; }
.password-toggle{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:8px; color:rgba(255,255,255,.7); transition:color .2s cubic-bezier(.4,0,.2,1); z-index:2;
}
.password-toggle:hover{ color:#fff; }
.eye-icon{ display:block; width:20px; height:20px; background-size:contain; background-repeat:no-repeat; background-position:center; }
.eye-icon{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.7)' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3e%3c/svg%3e"); }
.eye-icon.show-password{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.7)' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 11-4.243-4.243m4.242 4.242L9.88 9.88'/%3e%3c/svg%3e"); }

/* Errors */
.error-message{ display:block; color:#ef4444; font-size:12px; font-weight:600; margin-top:6px; margin-left:4px; opacity:0; transform:translateY(-10px); transition:all .25s cubic-bezier(.4,0,.2,1); background:rgba(239,68,68,.08); padding:6px 10px; border-radius:8px; backdrop-filter: blur(8px); }
.error-message.show{ opacity:1; transform:translateY(0); }
.form-group.error .input-wrapper input{ border-color:#ef4444; background:rgba(239,68,68,.08); animation:shake .45s ease-in-out; }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-5px);} 75%{ transform:translateX(5px);} }

/* =========================
   Buttons
   ========================= */
.btn{
  background: linear-gradient(135deg,#6366f1 0%, #06b6d4 100%);
  border:1px solid rgba(255,255,255,.32);
  border-radius:12px; padding:16px 24px; color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; transform:translateY(0);
  box-shadow:0 6px 22px rgba(99,102,241,.45);
}
.btn::before{ content:""; position:absolute; top:0; left:-110%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transition:left .5s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(99,102,241,.6); }
.btn:hover::before{ left:110%; }
.btn:active{ transform:translateY(0); }
.btn.loading{ pointer-events:none; }
.btn-text{ transition:opacity .25s ease; }
.btn-loader{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; border:2px solid transparent; border-top:2px solid #fff; border-radius:50%; opacity:0; animation:spin 1s linear infinite; transition:opacity .25s ease; }
.btn.loading .btn-text{ opacity:0; }
.btn.loading .btn-loader{ opacity:1; }
.login-btn{ width:100%; margin-bottom:24px; }
@keyframes spin{ 0%{ transform:translate(-50%,-50%) rotate(0deg);} 100%{ transform:translate(-50%,-50%) rotate(360deg);} }

/* =========================
   Checkbox & Success
   ========================= */
.remember-wrapper{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.remember-wrapper input[type="checkbox"]{ display:none; }
.checkbox-label{ color:var(--txt-dim); font-size:14px; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.checkmark{
  width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-radius:4px; display:flex; align-items:center; justify-content:center;
  transition:all .2s cubic-bezier(.4,0,.2,1); background:rgba(255,255,255,.08); backdrop-filter: blur(10px); flex-shrink:0;
}
.remember-wrapper input[type="checkbox"]:checked ~ .checkbox-label .checkmark{ background:#06b6d4; border-color:#06b6d4; transform:scale(1.08); }
.remember-wrapper input[type="checkbox"]:checked ~ .checkbox-label .checkmark::after{ content:'✓'; color:#fff; font-size:11px; font-weight:800; animation:checkmarkPop .3s cubic-bezier(.68,-.55,.265,1.55); }
@keyframes checkmarkPop{ 0%{ transform:scale(0);} 50%{ transform:scale(1.25);} 100%{ transform:scale(1);} }

.success-message{ display:none; text-align:center; padding:28px 16px; opacity:0; transform:translateY(12px); transition:all .4s cubic-bezier(.4,0,.2,1); }
.success-message.show{ display:block; opacity:1; transform:translateY(0); }
.success-icon{ width:60px; height:60px; background:#22c55e; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin:0 auto 16px; }

/* =========================
   Links
   ========================= */
.signup-link{ text-align:center; }
.signup-link p{ color:var(--txt-dim); font-size:14px; }
.signup-link a{ color:#06b6d4; text-decoration:none; font-weight:600; transition:color .2s; }
.signup-link a:hover{ color:#fff; }

/* =========================
   Header/Footer (biar transparan di atas foto)
   ========================= */
.auth-header, .auth-footer{ background:transparent !important; color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.25); }

/* =========================
   Mobile
   ========================= */
@media (max-width:480px){
  .login-card{ padding:24px; border-radius:20px; }
  .login-header h2{ font-size:1.75rem; }
  .password-wrapper input{ padding-right:44px; }
  .form-options{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
}

/* Animations reused */
@keyframes cardGlow { to { transform: rotate(360deg); } }
@keyframes sweep {
  0%,100% { clip-path: inset(0 100% 0 0); }
  50%     { clip-path: inset(0 0 0 0); }
}