/* =====================================================================
   StreamNusa — tampilan Komik biru untuk halaman Masuk (login.html)
   Hanya menimpa tampilan; struktur & skrip login (Clerk) tidak diubah.
   Dimuat SETELAH <style> bawaan login.html, jadi selektor yang sama menang.
   ===================================================================== */
:root {
  --bg: #0a1658; --surface: #1a3bc2; --fg: #ffffff; --muted: #cfdcff; --dim: #9fb2ee;
  --accent: #ffc531; --on-accent: #2b1600; --accent-text: #ffe066; --bad: #ff8a8e;
  --sn-ink: #071036; --sn-panel-a: #2652e6; --sn-panel-b: #1a3bc2; --sn-well: #0f2489; --sn-acc-hi: #ffe066;
  --sn-disp: "Bangers", "Plus Jakarta Sans", sans-serif;
}
html, body { background: linear-gradient(180deg, #1a35c0 0%, #0e1f80 38%, #0a1658 100%) fixed, #0a1658 !important; }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; color: #fff; }
.bg-grid { display: none !important; }

/* latar siluet bergerak (dibuat site.js) */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-dots { position: absolute; inset: 0; opacity: .07; background-image: radial-gradient(#fff 1px, transparent 1.4px); background-size: 22px 22px; }
.bg-rows { position: absolute; inset: 0; opacity: .10; transform: rotate(-10deg) scale(1.3); }
.bg-row { position: absolute; left: 0; display: flex; }
.bg-g { display: flex; align-items: center; gap: 72px; padding-right: 72px; animation: snScroll 90s linear infinite; }
.bg-g img { width: 64px; height: 64px; object-fit: contain; flex: none; filter: brightness(0) invert(1); }
@media (min-width: 768px) { .bg-g img { width: 80px; height: 80px; } }
@keyframes snScroll { to { transform: translateX(-100%); } }
.bg-parts i { position: absolute; border-radius: 50%; background: rgba(255, 197, 49, .35); animation: snRise linear infinite; }
@keyframes snRise { 0% { opacity: 0; transform: translate(0, 0); } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translate(50px, -100vh); } }

/* kepala */
header.lh { background: transparent !important; border: 0 !important; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand .brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: 400 20px var(--sn-disp); letter-spacing: .04em;
  background: linear-gradient(180deg, var(--sn-acc-hi), var(--accent)); color: var(--on-accent); border: 3px solid var(--sn-ink); box-shadow: 0 4px 0 var(--sn-ink); transform: rotate(-4deg); }
.brand .brand-name { font: 400 26px/1 var(--sn-disp); letter-spacing: .04em; -webkit-text-stroke: 1px var(--sn-ink); paint-order: stroke fill; filter: drop-shadow(0 3px 0 var(--sn-ink)); }
.brand .brand-name b { font-weight: 400; color: var(--accent); }
.lgsw { padding: 4px !important; border-radius: 12px !important; background: rgba(15, 36, 137, .6) !important; border: 3px solid var(--sn-ink) !important; box-shadow: 0 4px 0 var(--sn-ink); }
.lgsw button { font: 400 16px var(--sn-disp) !important; letter-spacing: .06em; color: var(--muted) !important; border-radius: 8px !important; }
.lgsw button.on { background: linear-gradient(180deg, var(--sn-acc-hi), var(--accent)) !important; color: var(--on-accent) !important; }
.back { font: 400 18px var(--sn-disp) !important; letter-spacing: .05em; color: #fff !important; padding: 8px 14px !important; border-radius: 12px !important; background: var(--sn-well) !important; border: 3px solid var(--sn-ink) !important; box-shadow: 0 4px 0 var(--sn-ink); }
.back:hover { transform: translateY(-2px); }

/* kolom kiri */
.eyebrow { display: inline-block; padding: 4px 14px !important; border-radius: 999px; font: 400 17px var(--sn-disp) !important; letter-spacing: .1em !important; text-transform: uppercase;
  background: var(--sn-well); color: var(--accent) !important; border: 2.5px solid var(--sn-ink); box-shadow: 0 3px 0 var(--sn-ink); transform: rotate(-2deg); }
h1.px-h { font: 400 clamp(46px, 6vw, 76px)/1 var(--sn-disp) !important; letter-spacing: .04em !important; color: #fff !important; -webkit-text-stroke: 2.5px var(--sn-ink); paint-order: stroke fill; filter: drop-shadow(4px 5px 0 var(--sn-ink)); text-transform: none; }
h1.px-h .hl { color: var(--accent) !important; }
.lead { color: var(--muted) !important; }
.pts li { color: #fff; font-weight: 700; }
.pts svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #2ee6a6; color: var(--sn-ink) !important; border: 2px solid var(--sn-ink); }

/* kolom kanan: tab Masuk/Daftar, kartu Clerk, form */
.seg { padding: 5px !important; border-radius: 14px !important; background: var(--sn-well) !important; border: 3px solid var(--sn-ink) !important; }
.seg button { font: 400 19px var(--sn-disp) !important; letter-spacing: .07em; color: var(--muted) !important; border-radius: 10px !important; }
.seg button[aria-selected="true"] { background: linear-gradient(180deg, var(--sn-acc-hi), var(--accent)) !important; color: var(--on-accent) !important; box-shadow: 0 3px 0 var(--sn-ink) !important; }
#mount .cl-card, .card, .rs { background: linear-gradient(180deg, var(--sn-panel-a), var(--sn-panel-b)) !important; border: 4px solid var(--sn-ink) !important; border-radius: 24px !important; box-shadow: 0 8px 0 var(--sn-ink) !important; }
#mount .cl-footer { background: var(--sn-well) !important; border-top: 3px solid var(--sn-ink) !important; }
#mount .cl-headerTitle, .card h2, .rs h2 { font: 400 30px var(--sn-disp) !important; letter-spacing: .04em; color: #fff !important; }
#mount .cl-headerSubtitle, .card p { color: var(--muted) !important; }
#mount .cl-socialButtonsBlockButton, #mount .cl-socialButtonsIconButton { background: var(--sn-well) !important; border: 3px solid var(--sn-ink) !important; box-shadow: 0 4px 0 var(--sn-ink) !important; border-radius: 14px !important; color: #fff !important; }
#mount .cl-formFieldInput, .rs input { background: var(--sn-well) !important; border: 3px solid var(--sn-ink) !important; border-radius: 12px !important; color: #fff !important; }
#mount .cl-formFieldInput:focus, .rs input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(255, 197, 49, .35) !important; }
#mount .cl-formFieldLabel, .rs label { color: var(--muted) !important; font-weight: 800 !important; }
#mount .cl-formButtonPrimary, .btn-p, .rs .rs-go { background: linear-gradient(180deg, var(--sn-acc-hi), var(--accent)) !important; color: var(--on-accent) !important; border: 3px solid var(--sn-ink) !important; box-shadow: 0 5px 0 var(--sn-ink) !important; border-radius: 14px !important; font: 400 20px var(--sn-disp) !important; letter-spacing: .05em; text-transform: none !important; }
#mount .cl-formButtonPrimary:hover, .btn-p:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--sn-ink) !important; }
#mount .cl-formButtonPrimary:active, .btn-p:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sn-ink) !important; }
.btn-g { background: var(--sn-well) !important; color: #fff !important; border: 3px solid var(--sn-ink) !important; box-shadow: 0 5px 0 var(--sn-ink) !important; border-radius: 14px !important; font: 400 20px var(--sn-disp) !important; letter-spacing: .05em; }
#mount .cl-footerActionLink, .rs-link, .forgot a { color: var(--accent) !important; font-weight: 800 !important; }
.spinner { border-color: rgba(255, 255, 255, .2) !important; border-top-color: var(--accent) !important; }
.err, .rs-msg.bad { color: #ffd0d2 !important; background: rgba(255, 90, 95, .18); border: 2px solid var(--sn-ink); border-radius: 12px; padding: 8px 12px; }

footer.lfoot { border-top: 4px solid var(--sn-ink) !important; }
footer.lfoot a { color: var(--muted) !important; font-weight: 700; }
footer.lfoot a:hover { color: var(--accent) !important; }