/* Halaman Masuk / Daftar / Lupa password: tema "Benang Emas" yang sama dengan landing page.
   Selalu gelap-hangat (identitas brand), token lokal menimpa token aplikasi supaya .input/.btn/.notice ikut selaras.
   Semua animasi berada di dalam .sv-orbit (overflow hidden + contain) → tidak keluar bingkai / menimpa teks di HP. */
.sv-auth {
  --bg: #0b0a08; --bg-deep: #070605; --surface: #15130f; --surface-2: #1c1914; --surface-3: #25211a;
  --line: rgba(239, 227, 200, .14); --line-soft: rgba(239, 227, 200, .08);
  --ink: #f3efe6; --ink-2: #c9c0ad; --ink-3: #8f8676;
  --accent: #d4af6a; --accent-2: #d4af6a; --accent-ink: #e8c98a; --accent-soft: rgba(212, 175, 106, .12); --accent-line: rgba(212, 175, 106, .45);
  --gold: #d4af6a; --gold-hi: #f2d79b; --bronze: #9a7440;
  position: relative; isolation: isolate; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); color-scheme: dark; overflow-x: hidden;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sv-auth-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 55% at 22% 38%, rgba(212, 175, 106, .16), transparent 70%),
    radial-gradient(40% 40% at 85% 90%, rgba(154, 116, 64, .14), transparent 70%),
    linear-gradient(180deg, #0d0b09, #0b0a08 60%, #090807); }
.sv-auth-bg::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(rgba(239, 227, 200, .12) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%); }

.sv-auth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px clamp(16px, 4vw, 40px); }
.sv-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; min-width: 0; }
.sv-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-brand img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; }
.sv-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); flex: none; }
.sv-switch a { padding: 7px 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600; line-height: 1; }
.sv-switch a[aria-current="page"] { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1408; }

.sv-auth-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 440px);
  gap: clamp(24px, 5vw, 72px); align-items: center; padding: 8px clamp(16px, 4vw, 40px) 32px; }
.sv-auth.is-single .sv-auth-main { grid-template-columns: minmax(0, 440px); justify-content: center; }

/* Panggung kiri */
.sv-auth-story { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px); min-width: 0; }
.sv-orbit { position: relative; width: clamp(180px, 22vw, 260px); aspect-ratio: 1; flex: none; overflow: hidden; contain: layout paint; border-radius: 50%; }
.sv-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(212, 175, 106, .22); }
.sv-ring.r1 { width: 100%; height: 100%; border-style: dashed; border-color: rgba(212, 175, 106, .16); animation: sv-rot 38s linear infinite; }
.sv-ring.r2 { width: 76%; height: 76%; animation: sv-rot 26s linear infinite reverse; }
.sv-ring.r3 { width: 52%; height: 52%; background: radial-gradient(circle, rgba(212, 175, 106, .16), transparent 70%); border-color: rgba(212, 175, 106, .3); }
.sv-dot { position: absolute; inset: 0; margin: auto; border-radius: 50%; pointer-events: none; }
.sv-dot::before { content: ""; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px rgba(242, 215, 155, .8); }
.sv-dot.d1 { width: 98%; height: 98%; animation: sv-rot 14s linear infinite; }
.sv-dot.d2 { width: 74%; height: 74%; animation: sv-rot 10s linear infinite reverse; }
.sv-dot.d3 { width: 74%; height: 74%; animation: sv-rot 10s linear infinite reverse; animation-delay: -5s; }
.sv-dot.d3::before { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--bronze); box-shadow: none; }
.sv-orbit-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.sv-orbit-mark .suvi-mark { width: 46%; height: 46%; filter: drop-shadow(0 10px 30px rgba(212, 175, 106, .35)); }
.sv-orbit-mark .suvi-mark.is-active .sm-spin { animation-duration: 6s; }
.sv-orbit-mark .suvi-mark.is-active .sm-top, .sv-orbit-mark .suvi-mark.is-active .sm-bottom, .sv-orbit-mark .suvi-mark.is-active .sm-glow { animation-duration: 3s; }
@keyframes sv-rot { to { transform: rotate(360deg); } }

.sv-story-copy { min-width: 0; }
.sv-eyebrow { margin: 0 0 12px; color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sv-story-copy h2 { margin: 0 0 22px; font-family: inherit; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.sv-story-copy h2 span { background: linear-gradient(100deg, var(--gold-hi), var(--gold) 55%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sv-feats li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.35; }
.sv-feat-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--gold); background: var(--accent-soft); border: 1px solid rgba(212, 175, 106, .2); }
.sv-feat-ic svg { width: 16px; height: 16px; }

/* Kartu formulir */
.sv-auth-entry { min-width: 0; }
.sv-auth-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 22px;
  background: linear-gradient(180deg, rgba(28, 25, 20, .92), rgba(18, 16, 13, .92)); border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(10px); }
.sv-auth-card h1 { margin: 0; font-family: inherit; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.sv-auth-card .sub { margin: -6px 0 2px; color: var(--ink-2); font-size: 14.5px; }
.sv-auth-card .field label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.sv-auth-card .field .help { color: var(--ink-3); font-size: 12.5px; margin-top: 6px; }
.sv-auth-card .field .err { color: #f0a08f; font-size: 12.5px; margin-top: 6px; }
.sv-auth-card .input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); color: var(--ink); font-size: 15px; box-shadow: none; }
.sv-auth-card .input:hover { border-color: rgba(239, 227, 200, .24); }
.sv-auth-card .input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px rgba(212, 175, 106, .14); outline: none; background: rgba(255, 255, 255, .05); }
.sv-auth-card .input::placeholder { color: var(--ink-3); }
.sv-auth-card .input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 40px #1d1a15 inset; caret-color: var(--ink); }
.sv-auth-card a { color: var(--accent-ink); }
.sv-auth-card a.spacer { margin-left: auto; color: var(--ink-3); }
.sv-auth-card a.spacer:hover { color: var(--accent-ink); }
.sv-auth-card .auth-password { position: relative; }
.sv-auth-card .auth-password .input { padding-right: 110px; }
.sv-auth-card .auth-password-toggle { position: absolute; right: 6px; top: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sv-auth-card .auth-password-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.sv-auth-card .btn { height: 48px; border-radius: 12px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.sv-auth-card .btn.primary { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #c39a52); color: #1a1408; border: 0; box-shadow: 0 12px 30px -12px rgba(212, 175, 106, .65), inset 0 1px 0 rgba(255, 255, 255, .45); }
.sv-auth-card .btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
.sv-auth-card .btn.primary:disabled { opacity: .65; }
.sv-auth-card .btn.outline { background: rgba(255, 255, 255, .03); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.sv-auth-card .btn.outline:hover { border-color: var(--accent-line); background: rgba(212, 175, 106, .06); }
.sv-auth-card .btn.ghost { background: transparent; color: var(--ink-2); border: 0; }
.sv-auth-card .or-line { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12.5px; }
.sv-auth-card .or-line::before, .sv-auth-card .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sv-auth-card .muted { color: var(--ink-3); font-size: 14px; }
.sv-auth-card .notice { border-radius: 12px; }

.sv-auth-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px clamp(16px, 4vw, 40px) 22px; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--line-soft); }

/* Tablet: panggung di atas, ringkas */
@media (max-width: 960px) {
  .sv-auth-main { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 22px; padding-top: 0; }
  .sv-auth-story { grid-template-columns: auto minmax(0, 1fr); gap: 18px; }
  .sv-orbit { width: 128px; }
  .sv-story-copy h2 { font-size: clamp(22px, 5vw, 30px); margin-bottom: 0; }
  .sv-feats { display: none; }
}
/* HP: orbit kecil di sebelah judul, tidak ada elemen bertumpuk */
@media (max-width: 520px) {
  .sv-auth-head { padding: 14px 16px; }
  .sv-brand { font-size: 16px; }
  .sv-switch a { padding: 7px 11px; font-size: 13px; }
  .sv-auth-main { padding: 0 16px 24px; gap: 18px; }
  .sv-auth-story { gap: 14px; }
  .sv-orbit { width: 88px; }
  .sv-ring.r1, .sv-dot.d3 { display: none; }
  .sv-eyebrow { font-size: 11px; margin-bottom: 6px; }
  .sv-story-copy h2 { font-size: 21px; line-height: 1.15; }
  .sv-auth-card { padding: 20px 18px; border-radius: 18px; gap: 14px; }
  .sv-auth-foot { justify-content: center; text-align: center; padding: 14px 16px 18px; }
}
@media (max-width: 340px) { .sv-orbit { display: none; } .sv-auth-story { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .sv-ring, .sv-dot { animation: none !important; }
}