/* =========================================================
   Halaman masuk, daftar, demo, verifikasi, dan reset kata sandi
   (member dan admin). Berkas mandiri — tidak bergantung legacy.css.
   ========================================================= */
.auth-body {
  --primary: #0B5D3E; --primary-600: #084C31; --primary-50: #E8F5EE; --accent: #F5B800; --accent-ink: #3A2C00;
  --text: #0E2219; --text-2: #4b6357; --muted: #73877c; --line: #dbe7e0; --card: #fff; --red: #c62d22; --red-bg: #fdebe9; --green: #138a52; --green-bg: #e3f4ea;
  --hero: linear-gradient(135deg, #1a8a5b 0%, #0b6545 48%, #084c36 100%);
  margin: 0; min-height: 100vh; color: var(--text); background: #f1f7f3;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
.auth-body *, .auth-body *::before, .auth-body *::after { box-sizing: border-box; }
.auth-body a { color: inherit; }

.auth-layout { min-height: 100vh; display: block; }

/* ---------- Ponsel: zona hijau di atas, kartu putih menimpa ---------- */
.auth-brand { display: none; }
.auth-screen { position: relative; min-height: 100vh; padding: 0 16px 28px; background: #f1f7f3; }
.auth-screen::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 290px; background: radial-gradient(420px 220px at 90% 0%, rgba(245, 184, 0, .3), transparent 70%), radial-gradient(320px 200px at 0% 100%, rgba(255, 255, 255, .14), transparent 70%), var(--hero); border-radius: 0 0 36px 36px; }
.login-inner { position: relative; max-width: 440px; margin: 0 auto; padding-top: max(34px, env(safe-area-inset-top)); text-align: center; }
.login-logo-wrap { display: inline-grid; place-items: center; width: 82px; height: 82px; margin-bottom: 14px; padding: 7px; border-radius: 26px; background: #fff; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .5); text-decoration: none; }
.login-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 18px; }
.login-title { margin: 0 0 4px; color: #fff; font-size: 23px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.login-sub { max-width: 320px; margin: 0 auto 22px; color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.55; }

.auth-card { margin-top: 0; padding: 24px 20px 8px; border: 1px solid rgba(11, 101, 69, .08); border-radius: 26px; background: var(--card); text-align: left; box-shadow: 0 2px 4px rgba(8, 76, 54, .05), 0 28px 50px -26px rgba(8, 76, 54, .45); }

/* ---------- Formulir ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { color: #46604f; font-size: 12.5px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid #d3e1d9; border-radius: 15px; background: #f8fbf9; color: var(--text); font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s, background .15s; }
.field input::placeholder { color: #9bb0a4; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(11, 101, 69, .14); }
.field .hint, .hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.field-row { display: grid; gap: 0 12px; }
.field-row--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; transition: transform .12s, filter .15s, box-shadow .15s; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--hero); color: #fff; box-shadow: 0 16px 26px -14px rgba(8, 76, 54, .9); }
.btn--primary:hover { filter: brightness(1.07); }
.btn--ghost { border: 1.5px solid #cfe0d6; background: #fff; color: var(--primary); }
.btn--ghost:hover { background: var(--primary-50); }
.auth-card .btn--primary { margin: 4px 0 16px; }
.auth-card .btn--ghost { margin-bottom: 16px; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.auth-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 16px; color: var(--text-2); font-size: 13px; line-height: 1.45; cursor: pointer; }
.auth-row .auth-check { align-items: center; margin: 0; }
.auth-check input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--primary); }
.auth-check a, .link-btn { color: var(--primary); font-weight: 700; text-decoration: none; }
.link-btn { font-size: 13px; }
.auth-check a:hover, .link-btn:hover { text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-alert { margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: var(--red-bg); color: var(--red); font-size: 13px; font-weight: 700; line-height: 1.5; }
.auth-alert--ok { background: var(--green-bg); color: var(--green); }
.auth-points { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.auth-points li { position: relative; padding-left: 34px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.auth-points li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9px; background: var(--hero); color: #fff; font-size: 12px; font-weight: 900; }

.auth-links { display: grid; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 13.5px; text-align: center; }
.auth-links a, .auth-links button { border: 0; background: none; color: var(--primary); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.auth-links a:hover { text-decoration: underline; }
.auth-legal { margin: 14px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Desktop: panel merek di kiri, formulir di kanan ---------- */
@media (min-width: 960px) {
  .auth-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .auth-brand { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 56px clamp(44px, 6vw, 100px); color: #fff; background: radial-gradient(520px 340px at 92% 8%, rgba(245, 184, 0, .3), transparent 70%), radial-gradient(460px 360px at 4% 96%, rgba(108, 194, 74, .26), transparent 70%), linear-gradient(160deg, #0f7a4f 0%, #0b5d3e 45%, #063d28 100%); }
  .auth-brand::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); }
  .auth-brand > * { position: relative; z-index: 1; }
  .auth-brand__logo img { display: block; width: 92px; height: 92px; border-radius: 28px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
  .auth-brand__title { max-width: 540px; margin: 32px 0 14px; font-size: clamp(30px, 2.8vw, 42px); font-weight: 800; letter-spacing: -.9px; line-height: 1.15; }
  .auth-brand__text { max-width: 480px; margin: 0; color: rgba(255, 255, 255, .84); font-size: 16px; line-height: 1.7; }
  .auth-brand__list { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
  .auth-brand__list li { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 700; }
  .auth-brand__list li::before { content: "✓"; display: grid; flex: 0 0 28px; place-items: center; height: 28px; border-radius: 10px; background: linear-gradient(135deg, #FFD23F, var(--accent)); color: var(--accent-ink); font-size: 13px; font-weight: 900; box-shadow: 0 10px 18px -10px rgba(245, 184, 0, .8); }
  .auth-brand__art { position: absolute !important; right: -10px; bottom: 0; width: min(330px, 46%); height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .3)); pointer-events: none; opacity: .96; }

  .auth-screen { display: grid; place-items: center; padding: 40px; background: radial-gradient(520px 320px at 100% 0%, rgba(245, 184, 0, .12), transparent 70%), #f1f7f3; }
  .auth-screen::before { display: none; }
  .login-inner { width: 100%; max-width: 440px; padding-top: 0; }
  .login-logo-wrap { display: none; }
  .login-title { color: var(--text); font-size: 28px; }
  .login-sub { max-width: 360px; margin-bottom: 24px; color: var(--muted); font-size: 14px; }
  .auth-card { padding: 30px 28px 10px; }
}

@media (max-width: 380px) { .field-row--equal { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .auth-body * { transition: none !important; } }