/* ============================================================
   Tema Nusantara — navy & putih, elegan, ikon provinsi
   Dipakai bersama oleh index, login dan dashboard
   ============================================================ */
:root{
  --navy:#0f2347;          /* navy utama */
  --navy-2:#1b3566;        /* navy terang (hover) */
  --navy-3:#0a1833;        /* navy tergelap */
  --ice:#dfe8f6;           /* biru-es untuk teks/garis di atas navy */
  --white:#ffffff;

  --paper:#f6f8fc;
  --card:#ffffff;
  --ink:#0f1b33;
  --muted:#5b6a84;
  --line:rgba(15,35,71,.13);
  --soft:#eef3fa;
  --accent:#2a4f8f;        /* aksen garis & sorotan di atas putih */
  --on-primary:#ffffff;
  --primary:var(--navy);
  --primary-2:var(--navy-2);
  --danger:#b42318;
  --ok:#1f7a5a;
  --shadow:0 1px 2px rgba(15,35,71,.04), 0 18px 40px -26px rgba(15,35,71,.32);
  --radius:14px;
  --serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* nama lama tetap dipetakan agar gaya halaman yang ada ikut navy-putih */
  --nila:var(--navy); --nila-2:var(--navy-3);
  --sogan:var(--navy); --sogan-2:var(--navy-2);
  --gold:var(--accent); --gold-2:var(--ice); --gold-ink:var(--navy);
  --maroon:var(--danger); --jade:var(--ok);

  --kawung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%230f2347' stroke-width='1' opacity='.045'%3E%3Cellipse cx='14' cy='14' rx='6' ry='11' transform='rotate(-45 14 14)'/%3E%3Cellipse cx='42' cy='14' rx='6' ry='11' transform='rotate(45 42 14)'/%3E%3Cellipse cx='14' cy='42' rx='6' ry='11' transform='rotate(45 14 42)'/%3E%3Cellipse cx='42' cy='42' rx='6' ry='11' transform='rotate(-45 42 42)'/%3E%3Ccircle cx='28' cy='28' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --kawung-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='.13'%3E%3Cellipse cx='14' cy='14' rx='6' ry='11' transform='rotate(-45 14 14)'/%3E%3Cellipse cx='42' cy='14' rx='6' ry='11' transform='rotate(45 42 14)'/%3E%3Cellipse cx='14' cy='42' rx='6' ry='11' transform='rotate(45 14 42)'/%3E%3Cellipse cx='42' cy='42' rx='6' ry='11' transform='rotate(-45 42 42)'/%3E%3Ccircle cx='28' cy='28' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --parang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1' opacity='.7'%3E%3Cpath d='M-2 12 Q4 6 6 0 M10 12 Q16 6 18 0 M22 12 Q28 6 30 0'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.7'%3E%3Ccircle cx='12' cy='6' r='1.1'/%3E%3Ccircle cx='0' cy='6' r='1.1'/%3E%3Ccircle cx='24' cy='6' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#081329; --card:#0f1d3a; --ink:#eef3fb; --muted:#9aaac6; --line:rgba(223,232,246,.12); --soft:#16284b;
    --accent:#9db8e6; --primary:#eef3fb; --primary-2:#ffffff; --on-primary:#0f2347;
    --sogan:var(--primary); --sogan-2:var(--primary-2);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 16px 36px -18px rgba(0,0,0,.8);
    --kawung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='.05'%3E%3Cellipse cx='14' cy='14' rx='6' ry='11' transform='rotate(-45 14 14)'/%3E%3Cellipse cx='42' cy='14' rx='6' ry='11' transform='rotate(45 42 14)'/%3E%3Cellipse cx='14' cy='42' rx='6' ry='11' transform='rotate(45 14 42)'/%3E%3Cellipse cx='42' cy='42' rx='6' ry='11' transform='rotate(-45 42 42)'/%3E%3Ccircle cx='28' cy='28' r='2'/%3E%3C/g%3E%3C/svg%3E");
  }
}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{
  background-color:var(--paper);
  background-image:radial-gradient(ellipse at top, transparent 0%, var(--paper) 72%), var(--kawung);
  background-attachment:fixed;
  color:var(--ink); font:15px/1.6 var(--sans); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--navy);color:#fff}
a{color:var(--accent)}
.wrap{position:relative;z-index:1}

/* pita parang navy di atas halaman */
.band{height:8px;background:var(--navy) var(--parang) repeat-x center;background-size:auto 8px}

/* ---------- merek ---------- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.mascot{width:46px;height:46px;flex:none;border-radius:50%}
.brand h1{font:500 28px/1 var(--serif);margin:0;letter-spacing:.1px}
.brand h1 .r{color:var(--ink)}
.brand h1 .y{color:var(--accent);font-style:italic;margin-left:7px}
.brand small{display:block;font:600 10.5px var(--sans);letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ---------- ornamen pembatas ---------- */
.orn{display:flex;align-items:center;gap:10px;color:var(--accent);margin:4px 0 14px}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}
.orn i{width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg);display:block}

/* ---------- tombol ---------- */
button,.btn{
  font:600 13.5px var(--sans);letter-spacing:.2px;
  border:1px solid var(--line);border-radius:10px;padding:9px 15px;cursor:pointer;
  background:var(--card);color:var(--ink);display:inline-flex;align-items:center;gap:7px;
  transition:background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  white-space:nowrap;text-decoration:none
}
button:hover,.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
button:active{transform:none}
button:disabled{opacity:.6;cursor:wait}
button:focus-visible,.btn:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.red,.btn.red,button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
button.red:hover,.btn.red:hover{background:var(--primary-2);border-color:var(--primary-2);color:var(--on-primary);box-shadow:0 8px 18px -10px rgba(15,35,71,.7)}
button.ghost{border-color:transparent;background:transparent}
button.ghost:hover{background:var(--soft)}

/* ---------- kartu ---------- */
.box{position:relative}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative}
.card::after{display:none}

/* ---------- input ---------- */
.inp{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;transition:border-color .15s, box-shadow .15s}
.inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,143,.14)}
.inp input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:11px 13px;font:500 15px var(--sans);color:var(--ink)}

/* ---------- lain-lain ---------- */
.empty{text-align:center;padding:36px 12px;color:var(--muted);font:italic 500 18px/1.5 var(--serif)}
.empty .big{width:46px;height:46px;display:block;margin:0 auto 10px;opacity:.55}
.empty small{font:500 12.5px var(--sans);font-style:normal}
.tag{display:inline-block;font:600 11px var(--sans);letter-spacing:.4px;padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.tag.ok{background:rgba(31,122,90,.1);color:var(--ok);border-color:rgba(31,122,90,.3)}
.tag.off{background:var(--soft);color:var(--muted)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(90px);opacity:0;visibility:hidden;background:var(--navy);color:#fff;padding:11px 18px;border-radius:10px;font:500 14px var(--sans);transition:.25s;z-index:30;border:1px solid rgba(223,232,246,.3);box-shadow:0 14px 30px -10px rgba(15,35,71,.6)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

footer{margin-top:36px;text-align:center;font:italic 500 16px var(--serif);color:var(--muted)}
footer a{color:inherit}

/* ============================================================
   Ikon provinsi, langit navy, cakrawala, sorotan & pita provinsi
   ============================================================ */
.lm{width:100%;height:100%;display:block;stroke-width:1.8px}

/* langit malam navy dengan cahaya bulan */
.sky{background:
    radial-gradient(circle at var(--moon-x,56%) var(--moon-y,20%), rgba(255,255,255,.95) 0 14px, rgba(255,255,255,.22) 16px, rgba(255,255,255,.07) 60px, transparent 140px),
    radial-gradient(ellipse at 50% 120%, rgba(110,150,220,.35), transparent 60%),
    linear-gradient(175deg, #0a1833 0%, #0f2347 45%, #1b3566 100%);
  color:#fff}
.sky .kawung-layer{position:absolute;inset:0;background:var(--kawung-gold);pointer-events:none;mask-image:linear-gradient(180deg,#000 0%,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}
.sky::after{border-color:rgba(255,255,255,.22) !important}

.skyline{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;color:rgba(255,255,255,.92)}
.skyline .sk{flex:1;max-width:76px;aspect-ratio:1;opacity:0;transform:translateY(8px);animation:rise .6s ease forwards;animation-delay:calc(var(--i) * 70ms)}
.skyline .sk:nth-child(odd){max-width:64px}
.skyline .sk:nth-child(4){max-width:92px}
.skyline .sk:hover{color:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
@keyframes rise{to{opacity:1;transform:none}}

.avatar{--c:var(--navy);display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;
  background:color-mix(in srgb, var(--c) 9%, var(--card));color:var(--c);border:1px solid color-mix(in srgb, var(--c) 22%, transparent)}
.avatar .lm{width:64%;height:64%}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .avatar{background:color-mix(in srgb, #9db8e6 12%, var(--card));color:#cfdcf3;border-color:rgba(223,232,246,.18)}
}

.spot{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff}
.spot .avatar{width:32px;height:32px;background:#fff;color:var(--navy);border-color:transparent}
.spot b{display:block;font:600 13px/1.2 var(--sans)}
.spot small{display:block;font:500 10.5px/1.3 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--ice)}
.spot.in > *{animation:spotin .45s ease}
@keyframes spotin{from{opacity:0;transform:translateY(6px)}}

.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:26px;width:max-content;animation:mq 90s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font:italic 500 17px var(--serif);color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:26px}
.mq-track span::after{content:"";width:5px;height:5px;transform:rotate(45deg);border:1px solid var(--accent)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .mq-track,.skyline .sk{animation:none;opacity:1;transform:none} }

/* mode gelap: ikon provinsi berwarna navy diganti biru-es agar terbaca */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .prov,
  :root:not([data-theme="light"]) .stat,
  :root:not([data-theme="light"]) .welcome{--c:#9db8e6 !important}
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .spot .avatar{background:#fff;color:#0f2347;border-color:transparent}
}
/* layar kecil: tanpa piringan bulan agar tidak menutupi judul */
@media (max-width:800px){
  .sky{background:
    radial-gradient(ellipse at 80% 0%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(110,150,220,.35), transparent 60%),
    linear-gradient(175deg, #0a1833 0%, #0f2347 45%, #1b3566 100%)}
}

/* ---------- jam & tanggal ---------- */
.clock{text-align:right;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.clock .ck-t{display:flex;align-items:flex-start;justify-content:flex-end;gap:6px}
.clock .ck-hm{font:300 58px/1 var(--serif);letter-spacing:.5px}
.clock .ck-s{font:500 15px/1 var(--sans);color:var(--ice);opacity:.75;margin-top:9px;min-width:18px;text-align:left}
.clock .ck-d{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
.clock .ck-date{font:500 12.5px var(--sans);letter-spacing:.4px;color:rgba(255,255,255,.85)}
.clock .ck-z{font:500 9.5px var(--sans);letter-spacing:2px;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
.clock.sm .ck-hm{font-size:38px}
.clock.sm .ck-s{font-size:13px;margin-top:6px}
.clock.sm .ck-d{margin-top:8px;padding-top:8px}

/* merek NUSABOX: kapital serif renggang */
.brand h1 .y.tight{margin-left:0}
.brand h1.caps{font-weight:500;letter-spacing:4px;font-size:27px}
.brand h1.caps .y{font-style:normal;font-weight:600}