/* =====================================================================
   auth.css — tampilan halaman Login & Registrasi (Vault Holographic)
   Dipakai bersama premium.css (untuk variabel warna, font, & latar).
   ===================================================================== */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;z-index:1;
}
.auth-card{
  width:100%;max-width:420px;
  background:linear-gradient(160deg, rgba(26,34,56,.9), rgba(14,20,36,.9));
  border:1px solid var(--line);border-radius:22px;padding:38px 32px;
  backdrop-filter:blur(16px);box-shadow:0 30px 70px rgba(5,8,18,.6);position:relative;overflow:hidden;
}
.auth-card::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--holo);opacity:.7}
.auth-brand{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.auth-brand .logo-element{width:34px;height:34px;border-radius:11px;background:var(--holo);
  background-size:200% 200%;animation:foil 6s linear infinite;position:relative;flex:0 0 auto;
  box-shadow:0 8px 26px rgba(124,92,255,.45)}
.auth-brand .logo-element::after{content:"";position:absolute;inset:5px;border-radius:7px;background:var(--ink-2)}
.auth-brand b{font-family:"Space Grotesk";font-weight:700;letter-spacing:.5px;font-size:1.05rem}
.auth-brand small{display:block;font-size:.58rem;letter-spacing:3px;color:var(--muted);text-transform:uppercase;font-weight:500}

.auth-card h1{font-family:"Space Grotesk";font-size:1.5rem;margin:0 0 5px;letter-spacing:-.4px}
.auth-card .sub{color:var(--muted);font-size:.86rem;margin:0 0 24px;line-height:1.5}

.field{margin-bottom:16px}
.field label{display:block;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px}
.field input{width:100%;padding:13px 15px;border-radius:12px;background:var(--ink-2);
  border:1px solid var(--line-strong);color:var(--text);font-family:inherit;font-size:.92rem;outline:none;transition:.2s}
.field input::placeholder{color:var(--muted-2)}
.field input:focus{border-color:var(--holo-1);box-shadow:0 0 0 4px rgba(56,232,255,.12)}

.auth-btn{width:100%;margin-top:6px;padding:14px;border:0;border-radius:12px;cursor:pointer;
  font-family:"Space Grotesk";font-weight:600;font-size:.95rem;letter-spacing:.3px;color:#0A0E1A;
  background:var(--holo);background-size:160% 160%;transition:transform .2s, filter .2s}
.auth-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.auth-btn:active{transform:translateY(0)}

.auth-alt{text-align:center;margin-top:20px;font-size:.85rem;color:var(--muted)}
.auth-alt a{color:var(--holo-1);text-decoration:none;font-weight:600}
.auth-alt a:hover{text-decoration:underline}

.auth-error{background:rgba(255,92,170,.1);border:1px solid rgba(255,92,170,.3);
  color:#ffb3d4;border-radius:12px;padding:12px 15px;font-size:.84rem;margin-bottom:20px;line-height:1.5}
.auth-error ul{margin:0;padding-left:18px}

.auth-foot{text-align:center;margin-top:24px;font-size:.72rem;color:var(--muted-2)}
@media(prefers-reduced-motion:reduce){.auth-brand .logo-element{animation:none}}