/* ==========================================================================
   SIKATIN.ID — gaya halaman akun (login, daftar, reset, onboarding)
   Memakai variabel palet yang sudah ada. Catatan: situs ini TIDAK punya
   --bg-1; panel memakai --surface dan kolom isian --bg-2. Nilai cadangan
   disertakan agar tetap terbaca bila variabel hilang.
   ========================================================================== */
.auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px 64px;
}
.auth-box {
  width: 100%; max-width: 420px;
  background: var(--surface, #111D2E);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 26px;
}
@media (max-width: 420px) { .auth-box { padding: 22px 18px; } }

.auth-box h1 { font-size: 1.35rem; margin: 0 0 6px; }
.auth-sub { color: var(--muted); font-size: .88rem; line-height: 1.65; margin: 0 0 22px; }

.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block; font-size: .82rem; font-weight: 600; margin: 0 0 6px; color: var(--text);
}
.auth-field input, .auth-field select {
  width: 100%; box-sizing: border-box;
  background: var(--bg-2, #0b1626); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 11px 12px; font-size: .92rem;
  min-height: 44px;                      /* target sentuh nyaman di ponsel */
}
.auth-field input:focus, .auth-field select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.auth-field input[aria-invalid="true"] { border-color: var(--danger-text); }

/* Galat ditempatkan tepat di bawah field-nya, bukan menumpuk di atas form */
.auth-err {
  display: none; color: var(--on-err); font-size: .78rem; line-height: 1.5; margin: 6px 0 0;
}
.auth-err.tampil { display: block; }

/* Tombol lihat/sembunyikan kata sandi */
.auth-pass { position: relative; }
.auth-pass input { padding-right: 46px; }
.auth-pass button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.auth-pass button:hover { color: var(--text); }
.auth-pass button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.auth-aksi { margin-top: 22px; }
.auth-aksi .dk-btn, .auth-aksi .btn { width: 100%; min-height: 46px; }
.auth-aksi button[disabled] { opacity: .6; cursor: not-allowed; }

.auth-alt { text-align: center; font-size: .86rem; color: var(--muted); margin: 18px 0 0; }
.auth-alt a { color: var(--primary-2); }

.auth-pisah {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--muted); font-size: .78rem;
}
.auth-pisah::before, .auth-pisah::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Pesan status di atas form (berhasil / gagal / info) */
.auth-pesan {
  display: none; border-radius: 10px; padding: 11px 13px;
  font-size: .85rem; line-height: 1.6; margin: 0 0 18px;
}
.auth-pesan.tampil { display: block; }
.auth-pesan.ok   { border: 1px solid #22c55e55; background: #22c55e12; color: var(--on-ok); }
.auth-pesan.err  { border: 1px solid #ef444455; background: #ef444412; color: var(--on-err); }
.auth-pesan.info { border: 1px solid var(--border); background: var(--bg-2, #0b1626); color: var(--muted); }

/* Layar tunggu saat sesi diperiksa — mencegah kedipan UI login pada
   pengguna yang sebenarnya sudah masuk */
.auth-memuat {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 60px 20px; color: var(--muted); font-size: .9rem;
}
.auth-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: authSpin .7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spin { animation-duration: 2s; } }

.auth-syarat { font-size: .78rem; color: var(--muted); line-height: 1.6; margin: 14px 0 0; }
.auth-syarat input { margin-right: 6px; }