@import url('fonts/fonts.css');

/* ═══════════════════════════════════════════════════════════════
   tema-modern.css — tampilan modern & profesional + responsif
   Dimuat SETELAH <style> di index.html, jadi menimpa (override) gaya lama.
   Tema: terang (default) & gelap via <html data-tema="gelap">
   ═══════════════════════════════════════════════════════════════ */

:root{
  --dasar:#f5f7fb;
  --permukaan:#ffffff;
  --permukaan-2:#f8fafc;
  --garis:#e6e9f2;
  --garis-kuat:#d7dced;
  --teks:#0f172a;
  --teks-2:#475569;
  --redup:#6b7a90;
  --aksen:#4f46e5;
  --aksen-2:#06b6d4;
  --aksen-lembut:#eef0ff;
  --hijau:#0f9d58; --kuning:#e8a400; --merah:#e5484d; --ungu:#7c3aed; --jingga:#ea6c0b;
  --sidebar:linear-gradient(180deg,#101a33 0%,#0c1428 60%,#0a1122 100%);
  --sidebar-garis:rgba(255,255,255,.08);
  --sidebar-teks:rgba(255,255,255,.72);
  --radius:16px; --radius-kecil:11px;
  --bayang-1:0 1px 2px rgba(15,23,42,.06);
  --bayang-2:0 1px 2px rgba(15,23,42,.05), 0 12px 28px -16px rgba(15,23,42,.22);
  --bayang-3:0 18px 40px -22px rgba(15,23,42,.35);
  --transisi:.22s cubic-bezier(.4,0,.2,1);
}
html[data-tema="gelap"]{
  --dasar:#070b16;
  --permukaan:#0f1526;
  --permukaan-2:#141b30;
  --garis:#222c47;
  --garis-kuat:#2d3a5c;
  --teks:#e8edf9;
  --teks-2:#b3bed6;
  --redup:#8695b3;
  --aksen:#7c8cff;
  --aksen-2:#39d0e0;
  --aksen-lembut:#1b2340;
  --sidebar:linear-gradient(180deg,#0b1225 0%,#080e1d 100%);
  --sidebar-garis:rgba(255,255,255,.07);
  --sidebar-teks:rgba(226,232,248,.72);
  --bayang-2:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.7);
  --bayang-3:0 22px 44px -24px rgba(0,0,0,.8);
}

/* ── dasar ── */
html{background:var(--dasar);scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--aksen) 12%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, color-mix(in srgb, var(--aksen-2) 10%, transparent), transparent 55%),
    var(--dasar);
  color:var(--teks);
  font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;
  overflow-x:clip;               /* cegah garis tepi dari area gulir tak terpakai */
  transition:background-color var(--transisi), color var(--transisi);
}
h1,h2,h3,h4,.kpi .val,.resmi .v{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;letter-spacing:-.02em}
::selection{background:color-mix(in srgb, var(--aksen) 26%, transparent)}
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px;border-radius:8px}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--teks) 22%, transparent);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--teks) 34%, transparent)}
*::-webkit-scrollbar-track{background:transparent}

/* ── kerangka & sidebar ── */
.kerangka{position:relative}
aside{
  width:272px;flex:0 0 272px;background:var(--sidebar);border-right:1px solid var(--sidebar-garis);
  padding:16px 12px 28px;color:var(--sidebar-teks);box-shadow:var(--bayang-3);
  display:flex;flex-direction:column;gap:2px;
}
aside .merek{gap:11px;padding:6px 8px 16px;border-bottom:1px solid var(--sidebar-garis);margin-bottom:12px}
aside .logo{
  background:linear-gradient(135deg,var(--aksen),var(--aksen-2));width:38px;height:38px;border-radius:12px;
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--aksen-2) 70%, transparent);font-size:18px;
}
aside h1{font-size:15.5px;color:#fff;letter-spacing:-.015em}
aside .sub{color:var(--sidebar-teks);font-size:11px}
.menu-judul{
  color:rgba(255,255,255,.38);font-size:10px;letter-spacing:.14em;font-weight:700;
  padding:12px 12px 6px;text-transform:uppercase;
}
.menu-item{
  color:var(--sidebar-teks);border-radius:10px;padding:9px 11px;font-size:13.4px;font-weight:500;
  transition:background var(--transisi), color var(--transisi), transform var(--transisi);
  position:relative;
}
.menu-item:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.menu-item.aktif{
  background:linear-gradient(90deg, color-mix(in srgb, var(--aksen) 42%, transparent), color-mix(in srgb, var(--aksen-2) 22%, transparent));
  color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)
}
.menu-item.aktif::before{
  content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:3px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--aksen),var(--aksen-2))
}
.menu-item .ikon{width:20px;font-size:14px;opacity:.95}
.submenu{margin:2px 0 6px 28px;border-left:1px solid var(--sidebar-garis);padding-left:10px}
.submenu .menu-item{font-size:12.8px;padding:7px 10px;color:rgba(255,255,255,.62)}
.submenu .menu-item.aktif{color:#fff}
aside .kaki-sidebar{
  margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--sidebar-garis);
  font-size:11px;color:rgba(255,255,255,.45);line-height:1.6
}
aside .kaki-sidebar b{color:rgba(255,255,255,.85);font-weight:600;display:block;margin-bottom:2px;font-size:11.5px}

/* ── isi utama ── */
main{padding:20px 24px 70px;max-width:1440px}
header.bar{
  background:color-mix(in srgb, var(--permukaan) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--garis);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--bayang-2);
  position:sticky;top:12px;z-index:30;
}
header.bar h2{font-size:19px}
header.bar .ket{color:var(--redup);font-size:12.5px;line-height:1.5}
.chip{
  background:var(--aksen-lembut);color:var(--aksen);border:1px solid color-mix(in srgb, var(--aksen) 22%, transparent);
  padding:6px 12px;font-weight:600;font-size:11.5px;letter-spacing:.01em
}
.chip.netral{background:var(--permukaan-2);color:var(--redup);border-color:var(--garis)}

/* tombol ikon (menu & tema) */
.ikon-tombol{
  display:none;appearance:none;cursor:pointer;border:1px solid var(--garis);background:var(--permukaan);
  color:var(--teks);width:40px;height:40px;border-radius:12px;font-size:17px;line-height:1;
  align-items:center;justify-content:center;transition:background var(--transisi), transform var(--transisi)
}
.ikon-tombol:hover{background:var(--permukaan-2);transform:translateY(-1px)}
#tombol-tema{display:inline-flex;margin-left:auto}

/* ── KPI ── */
.kpi-grid{gap:14px;margin-bottom:18px}
.kpi{
  border:1px solid var(--garis);border-radius:var(--radius);padding:16px 17px 15px;background:var(--permukaan);
  box-shadow:var(--bayang-2);position:relative;overflow:hidden;
  transition:transform var(--transisi), box-shadow var(--transisi), border-color var(--transisi)
}
.kpi::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--aksen),var(--aksen-2));opacity:.9
}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--bayang-3);border-color:var(--garis-kuat)}
.kpi .lbl{color:var(--redup);font-size:10.5px;letter-spacing:.09em;font-weight:700}
.kpi .val{font-size:26px;color:var(--teks);font-weight:700;margin:8px 0 3px;font-variant-numeric:tabular-nums}
.kpi .val.sm{font-size:18px;line-height:1.35}
.kpi .note{color:var(--redup);font-size:11.8px;line-height:1.5}

/* ── kartu & grid ── */
.grid{gap:16px}
.kotak{
  border:1px solid var(--garis);border-radius:var(--radius);padding:16px 18px 10px;background:var(--permukaan);
  box-shadow:var(--bayang-2);transition:border-color var(--transisi), box-shadow var(--transisi)
}
.kotak:hover{border-color:var(--garis-kuat)}
.kotak h3{font-size:14.5px;font-weight:650;margin:0 0 3px}
.kotak p.hint{color:var(--redup);font-size:11.5px;line-height:1.55;margin:0 0 10px}
.kanvas{height:clamp(240px,42vh,300px)}
.kanvas.pendek{height:clamp(200px,34vh,240px)}
.kanvas.tinggi{height:clamp(300px,58vh,440px)}

/* ── kotak penjelasan ── */
.insight{
  border:1px solid color-mix(in srgb, var(--kuning) 26%, var(--garis));
  background:linear-gradient(180deg, color-mix(in srgb, var(--kuning) 9%, var(--permukaan)), var(--permukaan));
  border-left:4px solid var(--kuning);border-radius:var(--radius);padding:15px 17px;font-size:13px;
  box-shadow:var(--bayang-2);line-height:1.65;color:var(--teks-2)
}
.insight.biru{
  border-color:color-mix(in srgb, var(--aksen) 24%, var(--garis));
  background:linear-gradient(180deg, color-mix(in srgb, var(--aksen) 8%, var(--permukaan)), var(--permukaan));
  border-left-color:var(--aksen)
}
.insight b{color:var(--teks);font-weight:650}
.insight li::marker{color:var(--aksen)}

/* ── tabel ── */
.scroll{
  border:1px solid var(--garis);border-radius:var(--radius-kecil);background:var(--permukaan);
  box-shadow:inset -16px 0 16px -18px rgba(15,23,42,.28)
}
table{font-size:12.6px}
th{
  background:color-mix(in srgb, var(--permukaan-2) 92%, transparent);
  backdrop-filter:blur(6px);color:var(--redup);font-size:10.5px;letter-spacing:.07em;
  border-bottom:1px solid var(--garis);white-space:nowrap
}
td{border-bottom:1px solid color-mix(in srgb, var(--garis) 70%, transparent);color:var(--teks-2)}
td b,td strong{color:var(--teks)}
tr:hover td{background:color-mix(in srgb, var(--aksen) 6%, transparent)}
tbody tr:last-child td{border-bottom:0}

.pill{border-radius:8px;font-size:10.5px;letter-spacing:.02em;padding:3px 9px}
.p-hijau{background:color-mix(in srgb, var(--hijau) 14%, transparent);color:var(--hijau)}
.p-kuning{background:color-mix(in srgb, var(--kuning) 18%, transparent);color:color-mix(in srgb, var(--kuning) 82%, var(--teks))}
.p-merah{background:color-mix(in srgb, var(--merah) 14%, transparent);color:var(--merah)}
.p-biru{background:color-mix(in srgb, var(--aksen) 14%, transparent);color:var(--aksen)}
.p-abu{background:var(--permukaan-2);color:var(--redup)}
.p-ungu{background:color-mix(in srgb, var(--ungu) 16%, transparent);color:var(--ungu)}
.ya{color:var(--hijau)}
.tidak{color:color-mix(in srgb, var(--redup) 45%, transparent)}

/* ── kartu angka resmi & isu ── */
.resmi{
  background:var(--permukaan);border:1px solid var(--garis);border-left:4px solid var(--aksen);
  border-radius:var(--radius);padding:15px 16px;box-shadow:var(--bayang-2);
  transition:transform var(--transisi), box-shadow var(--transisi)
}
.resmi:hover{transform:translateY(-2px);box-shadow:var(--bayang-3)}
.resmi .v{font-size:21px;color:var(--teks)}
.resmi .d{color:var(--teks-2);line-height:1.6}
.resmi .s{color:var(--redup)}
.isu{
  background:var(--permukaan);border:1px solid var(--garis);border-left:4px solid var(--jingga);
  border-radius:var(--radius);padding:15px 17px;box-shadow:var(--bayang-2)
}
.isu h4{font-size:14px;font-weight:650}
.isu .peluang{background:color-mix(in srgb, var(--hijau) 12%, transparent);color:var(--hijau);
  border-radius:9px;padding:8px 10px;font-weight:500}

footer.kaki{
  background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);
  box-shadow:var(--bayang-2);padding:16px 18px;color:var(--redup);line-height:1.7;margin-top:20px
}
.sumber-list a{color:var(--aksen);word-break:break-word}

/* ── animasi masuk halaman ── */
.view.aktif{animation:masuk .32s cubic-bezier(.22,1,.36,1) both}
@keyframes masuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── tirai (overlay menu mobile) ── */
.tirai{
  position:fixed;inset:0;background:rgba(4,8,20,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity var(--transisi);z-index:55
}
body.menu-terbuka .tirai{opacity:1;pointer-events:auto}

/* ═══════════ MOBILE & TABLET ═══════════ */
@media (max-width:1024px){
  .kerangka{display:block}
  aside{
    position:fixed;top:0;left:0;height:100dvh;width:min(84vw,300px);flex:none;z-index:60;
    transform:translateX(-104%);transition:transform .28s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;padding-bottom:34px
  }
  body.menu-terbuka aside{transform:none}
  aside .merek{position:sticky;top:0;background:transparent}
  aside .gulir{display:block}
  .menu-judul{padding-top:10px}
  .submenu{margin-left:22px}
  #tombol-menu{display:inline-flex}
  main{padding:12px 14px 60px}
  header.bar{top:8px;padding:12px 14px;gap:10px}
  header.bar h2{font-size:17px}
  header.bar .ket{font-size:12px}
  .g2{grid-template-columns:1fr}
}

@media (max-width:640px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:13px 13px 12px}
  .kpi .val{font-size:20px}
  .kpi .val.sm{font-size:15px}
  .kpi .lbl{font-size:9.5px;letter-spacing:.06em}
  .kpi .note{font-size:10.8px}
  header.bar{border-radius:14px}
  header.bar h2{font-size:16px}
  header.bar .ket{font-size:11.5px;max-height:3.2em;overflow:hidden}
  .chip{font-size:10.5px;padding:5px 9px}
  .kotak{padding:14px 14px 8px}
  .kotak h3{font-size:13.5px}
  .kanvas,.kanvas.tinggi,.kanvas.pendek{height:clamp(230px,58vw,290px)}
  /* tabel: kolom pertama menempel + gulir mendatar */
  .scroll{overflow-x:auto;max-height:none}
  table{font-size:11.8px;min-width:640px}
  th,td{padding:8px 10px}
  table th:first-child, table td:first-child{
    position:sticky;left:0;z-index:2;
    background:var(--permukaan);
    box-shadow:1px 0 0 var(--garis)
  }
  th:first-child{background:color-mix(in srgb, var(--permukaan-2) 96%, transparent)}
  .insight{font-size:12.4px;padding:13px 14px}
  footer.kaki{font-size:11.5px}
  .resmi .v{font-size:19px}
}

@media (max-width:400px){
  .kpi-grid{grid-template-columns:1fr}
  main{padding:10px 10px 50px}
}

/* halaman siap cetak / PDF */
@media print{
  aside,#tombol-tema,#tombol-menu,.tirai{display:none!important}
  body{background:#fff}
  .kotak,.kpi,.insight,.resmi,.isu{box-shadow:none;break-inside:avoid}
  header.bar{position:static}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
