/* Gaya bersama halaman publik/auth (index, login, register, reset-password, 404) — basis Bootstrap */
:root {
  --brand: #1d4ed8; --brand-2: #38bdf8; --link: #1d4ed8;
  --ink: #0f172a; --muted: #64748b;
  --page: #eff6ff; --card: #ffffff; --line: #e2e8f0; --field: #f8fafc;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Blok @media (prefers-color-scheme: dark) SUDAH DIHAPUS agar selalu terang */

body {
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(800px 500px at 100% 110%, rgba(56,189,248,.22), transparent 60%),
    var(--page);
  background-attachment: fixed;
}

/* Kartu */
.auth-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: 0 20px 50px -20px rgba(15,23,42,.35);
}
.auth-card-sm { max-width: 440px; }
.auth-card-md { max-width: 480px; }

/* Brand & judul */
.brand { text-align: center; margin-bottom: 1.25rem; }
.brand img { height: 60px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: .6rem; }
.brand .brand-name { font-weight: 700; letter-spacing: .2px; font-size: 1.05rem; }
.auth-title { font-weight: 800; font-size: 1.5rem; text-align: center; margin-bottom: .25rem; }
.auth-sub { color: var(--muted); text-align: center; font-size: .9rem; margin-bottom: 1.5rem; }
.text-subtle { color: var(--muted); }

/* Form */
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.form-text { color: var(--muted); }
.input-group-text, .form-control {
  background: var(--field); border-color: var(--line); color: var(--ink);
}
.input-group-text { color: var(--muted); border-radius: 12px 0 0 12px; }
.form-control { padding: .7rem .9rem; border-radius: 0 12px 12px 0; }
.form-control::placeholder { color: var(--muted); opacity: .7; }
.form-control:focus {
  background: var(--field); color: var(--ink);
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(37,99,235,.18);
}
.input-group:focus-within .input-group-text { border-color: var(--brand); color: var(--brand); }
.input-group .btn-eye {
  background: var(--field); border: 1px solid var(--line); border-left: 0;
  color: var(--muted); border-radius: 0 12px 12px 0;
}
.input-group .has-eye { border-radius: 0; }

/* Tombol */
.btn-brand {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #38bdf8 100%); border: 0; color: #fff;
  border-radius: 12px; padding: .75rem 1rem; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-brand:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(37,99,235,.7); color: #fff; }
.btn-brand:disabled { opacity: .55; cursor: not-allowed; }
.btn-outline-brand {
  background: transparent; border: 1px solid var(--brand); color: var(--link);
  border-radius: 12px; padding: .75rem 1rem; font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
a.link-brand, .btn-link.link-brand { color: var(--link); text-decoration: none; font-weight: 600; }
.link-muted, .btn-link.link-muted { color: var(--muted); text-decoration: none; }

/* Alert, animasi, Turnstile */
.alert { border-radius: 12px; font-size: .9rem; }
.fade-in { animation: fadeIn .3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.turnstile-wrap { display: flex; justify-content: center; }

/* Checklist & strength (register) */
.strength { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: .6rem; }
.strength > span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s ease, background .25s ease; }
.check-item { transition: color .2s ease; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.check-item i { font-size: .9rem; }
.check-item.valid { color: #16a34a; }

/* OTP (register) */
.otp-input {
  letter-spacing: .6em; font-size: 1.75rem; text-align: center; font-weight: 700;
  font-family: 'Courier New', monospace; border-radius: 12px !important; padding-left: 1.2em;
}
.verify-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; display: grid; place-items: center;
  background: rgba(37,99,235,.12); color: var(--brand); font-size: 1.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  .btn-brand, .btn-outline-brand, .strength > span, .check-item { transition: none; }
}