/* ============================================================================
   Sistem tampilan bersama — gaya portal PST BPS (pst.bps.go.id)
   Dipakai index.html, konsultasi.html, sahabat.html, admin.html
   Nama kelas dipertahankan agar seluruh skrip tetap bekerja.
   ========================================================================== */

:root {
  /* palet BPS: biru utama, biru tua, aksen oranye & hijau dari logo */
  --biru:      #1D5FAD;
  --biru-2:    #2E7BD6;
  --biru-tua:  #0F3B6E;
  --biru-wash: #E9F1FB;
  --oranye:    #F0932B;
  --hijau:     #2E9E5B;
  --teal:      #1897A6;

  --bg:      #F4F7FB;
  --panel:   #FFFFFF;
  --sunk:    #EEF3F9;
  --line:    #E1E8F0;
  --line-2:  #C9D5E3;

  --ink:   #1B2A3F;
  --ink-2: #4A5A70;
  --ink-3: #5F6E85;        /* teks redup: ≥ 4,5:1 di panel & latar */

  --link:      var(--biru);
  --link-wash: var(--biru-wash);
  /* warna merek sebagai TEKS (bukan latar): di mode gelap menjadi terang supaya terbaca */
  --biru-teks:   #0F3B6E;
  --oranye-teks: #B5470A;
  --hijau-teks:  #1E7A44;
  --peringatan-teks: #8A5208;
  /* gradasi hero: ujung paling terang tetap ≥ 5:1 terhadap teks putih */
  --hero-a: #0F3B6E; --hero-b: #1D5FAD; --hero-c: #2A6FC4;

  --s-ada:      #1A6F3F; --s-ada-bg:   #E3F5EA;
  --s-mohon:    #7F4B07; --s-mohon-bg: #FFF1DD;
  --s-tidak:    #9E2A2A; --s-tidak-bg: #FDE8E8;
  --s-lain:     #4E5B6B; --s-lain-bg:  #EDF1F5;
  --s-prov:     #1D5FAD; --s-prov-bg:  #E9F1FB;

  --r:   14px;           /* radius kartu */
  --r-s: 8px;            /* radius kendali */
  --bayang:   0 2px 12px rgba(15,59,110,.08);
  --bayang-2: 0 8px 28px rgba(15,59,110,.14);

  --f-disp: "Poppins", "Inter", system-ui, sans-serif;
  --f-ui:   "Inter", "Poppins", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0F1A2A; --panel:#172436; --sunk:#1E2D42; --line:#2A3B52; --line-2:#3A4F6B;
  --ink:#E8EEF6; --ink-2:#C3CEDD; --ink-3:#9AA9BE;
  --biru:#2F6FC2; --biru-2:#2A66B5; --biru-tua:#0B1E36; --biru-wash:#1B2E48;   /* --biru = latar tombol/aktif (teks putih ≥ 5:1) */
  --link:#8FC1F7; --link-wash:#1B2E48;
  --biru-teks:#C5DCF8; --oranye-teks:#F5B36F; --hijau-teks:#7EDCA6; --peringatan-teks:#F5C270;
  --hero-a:#0B1E36; --hero-b:#14365F; --hero-c:#1D4F8A;
  --s-ada:#7EDCA6; --s-ada-bg:#173626; --s-mohon:#F5C270; --s-mohon-bg:#3A2A10;
  --s-tidak:#F4A0A0; --s-tidak-bg:#3A1C1C; --s-lain:#B9C4D3; --s-lain-bg:#25334A;
  --s-prov:#8FC1F7; --s-prov-bg:#1B2E48;
  --bayang:0 2px 12px rgba(0,0,0,.35); --bayang-2:0 8px 28px rgba(0,0,0,.5);
} }
:root[data-theme="dark"] {
  --bg:#0F1A2A; --panel:#172436; --sunk:#1E2D42; --line:#2A3B52; --line-2:#3A4F6B;
  --ink:#E8EEF6; --ink-2:#C3CEDD; --ink-3:#9AA9BE;
  --biru:#2F6FC2; --biru-2:#2A66B5; --biru-tua:#0B1E36; --biru-wash:#1B2E48;   /* --biru = latar tombol/aktif (teks putih ≥ 5:1) */
  --link:#8FC1F7; --link-wash:#1B2E48;
  --biru-teks:#C5DCF8; --oranye-teks:#F5B36F; --hijau-teks:#7EDCA6; --peringatan-teks:#F5C270;
  --hero-a:#0B1E36; --hero-b:#14365F; --hero-c:#1D4F8A;
  --s-ada:#7EDCA6; --s-ada-bg:#173626; --s-mohon:#F5C270; --s-mohon-bg:#3A2A10;
  --s-tidak:#F4A0A0; --s-tidak-bg:#3A1C1C; --s-lain:#B9C4D3; --s-lain-bg:#25334A;
  --s-prov:#8FC1F7; --s-prov-bg:#1B2E48;
  --bayang:0 2px 12px rgba(0,0,0,.35); --bayang-2:0 8px 28px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
body {
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-ui);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1100px; margin-inline:auto; padding-inline:22px; }
.wrap--wide { max-width:1240px; }
a { color:var(--link); }

/* ---------------- bilah navigasi (putih, logo kiri, tombol pil) ---------------- */
.nav { background:var(--panel); box-shadow:0 1px 0 var(--line), 0 2px 10px rgba(15,59,110,.05); position:sticky; top:var(--pintar-h, 0px); z-index:40; }
.nav__in {
  max-width:1240px; margin-inline:auto; padding:0 22px;
  display:flex; align-items:center; gap:6px; min-height:64px; flex-wrap:wrap;
}
.nav__brand {
  display:flex; align-items:center; gap:10px; margin-right:18px; text-decoration:none; color:var(--ink);
}
.nav__brand img { height:36px; width:auto; display:block; }
.nav__brand b { font-family:var(--f-disp); font-weight:600; font-size:14px; letter-spacing:-.01em; line-height:1.15; display:block; color:var(--biru-teks); }
.nav__brand span { font-size:11px; color:var(--ink-3); display:block; line-height:1.2; }
.nav a:not(.nav__brand) {
  font-family:var(--f-disp); font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:8px 13px; border-radius:999px; white-space:nowrap; transition:.15s;
}
.nav a:not(.nav__brand):hover { color:var(--link); background:var(--biru-wash); }
.nav a[aria-current="page"] { background:var(--biru); color:#fff; }
.nav__right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav__who { font-size:12.5px; color:var(--ink-3); }

/* ---------------- hero portal (gradasi biru) ---------------- */
.hero {
  background:linear-gradient(120deg, var(--hero-a) 0%, var(--hero-b) 55%, var(--hero-c) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.hero::after {
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 65%);
  pointer-events:none;
}
.hero__in { max-width:1100px; margin-inline:auto; padding:52px 22px 56px; position:relative; }
.hero .head__kicker, .hero .head .head__kicker { color:rgba(255,255,255,.92); }
.hero h1, .hero .head h1 { color:#fff; }
.hero p, .hero .head p { color:rgba(255,255,255,.95); }
.hero .head b { color:#fff; }
.hero--tipis .hero__in { padding:34px 22px 66px; }

/* ---------------- kepala halaman ---------------- */
.head { padding:42px 0 26px; }
.head__kicker {
  font-family:var(--f-disp); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--link); margin-bottom:10px;
}
.head h1 {
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1.8rem,4.2vw,2.5rem);
  line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance;
}
.head p { margin:0; max-width:66ch; color:var(--ink-2); font-size:15.5px; }

h2.sec { font-family:var(--f-disp); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; margin:0 0 4px; }
.sec__note { color:var(--ink-3); font-size:13.5px; margin:0 0 18px; max-width:70ch; }

/* ---------------- kartu & panel ---------------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--bayang); }
.card + .card { margin-top:14px; }
.card__title {
  font-family:var(--f-disp); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--link); margin-bottom:14px;
}
.grid { display:grid; gap:14px; }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); }

/* kartu layanan ala portal PST */
.layanan { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.layanan a {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px 18px 18px;
  text-decoration:none; color:var(--ink); box-shadow:var(--bayang); display:block; transition:.18s;
}
.layanan a:hover { transform:translateY(-3px); box-shadow:var(--bayang-2); border-color:var(--biru-wash); }
.layanan__ikon {
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:12px;
  background:var(--biru-wash); color:var(--link);
}
.layanan__ikon svg { width:22px; height:22px; }
.layanan__ikon.oranye { background:var(--s-mohon-bg); color:var(--oranye-teks); }
.layanan__ikon.hijau  { background:var(--s-ada-bg); color:var(--hijau-teks); }
.layanan__ikon.teal   { background:#E0F4F6; color:var(--teal); }
.layanan b { font-family:var(--f-disp); font-weight:600; font-size:15px; display:block; margin-bottom:4px; }
.layanan span { font-size:13px; color:var(--ink-2); line-height:1.5; display:block; }

/* ---------------- angka ringkas (kartu-kartu terpisah) ---------------- */
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.summary > div {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  box-shadow:var(--bayang); border-top:4px solid var(--biru);
}
.summary > div:nth-child(2) { border-top-color:var(--hijau); }
.summary > div:nth-child(3) { border-top-color:var(--oranye); }
.summary > div:nth-child(4) { border-top-color:var(--teal); }
.summary .n {
  font-family:var(--f-disp); font-size:2rem; font-weight:700; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--biru-teks);
}
.summary .l { font-size:12.5px; color:var(--ink-3); margin-top:6px; line-height:1.35; }
.summary .n.ada{color:var(--s-ada)} .summary .n.mohon{color:var(--s-mohon)}
.summary .n.tidak{color:var(--s-tidak)} .summary .n.prov{color:var(--s-prov)}

/* ---------------- kendali form ---------------- */
label.fl {
  display:block; font-family:var(--f-disp); font-size:12px; font-weight:500; color:var(--ink-2); margin:0 0 6px;
}
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search], input[type=date], input[type=number], input[type=url], select, textarea {
  width:100%; padding:10px 13px; font-family:var(--f-ui); font-size:14px;
  color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-s);
  transition:border-color .15s, box-shadow .15s;
}
textarea { min-height:84px; resize:vertical; line-height:1.55; }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--biru); box-shadow:0 0 0 3px var(--biru-wash); }
input::placeholder, textarea::placeholder { color:var(--ink-3); }
.field { margin-bottom:14px; }
.field__hint { font-size:12px; color:var(--ink-3); margin-top:5px; line-height:1.45; }
.checks { display:flex; flex-wrap:wrap; gap:6px; }
.checks label {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; cursor:pointer; user-select:none; background:var(--panel);
}
.checks label:has(input:checked) { border-color:var(--biru); background:var(--biru-wash); color:var(--biru-teks); font-weight:500; }
.checks input { accent-color:var(--biru); margin:0; }

/* ---------------- tombol (pil biru) ---------------- */
.btn {
  font-family:var(--f-disp); font-size:13.5px; font-weight:600; padding:10px 20px; border-radius:999px;
  background:var(--biru); color:#fff; border:1px solid var(--biru); cursor:pointer;
  transition:.15s; text-decoration:none; display:inline-block; text-align:center;
}
.btn:hover { background:var(--biru-2); border-color:var(--biru-2); color:#fff; box-shadow:0 4px 14px rgba(29,95,173,.28); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn--ghost { background:var(--panel); color:var(--link); border-color:var(--line-2); }
.btn--ghost:hover { background:var(--biru-wash); color:var(--biru-teks); border-color:var(--biru); box-shadow:none; }
.btn--sm { font-size:12.5px; padding:6px 14px; font-weight:500; }
.btn--danger { background:var(--panel); color:var(--s-tidak); border-color:var(--s-tidak); }
.btn--danger:hover { background:var(--s-tidak-bg); color:var(--s-tidak); border-color:var(--s-tidak); box-shadow:none; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------------- lencana ---------------- */
.pill { display:inline-block; font-family:var(--f-disp); font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.pill.ada{background:var(--s-ada-bg);color:var(--s-ada)}
.pill.mohon{background:var(--s-mohon-bg);color:var(--s-mohon)}
.pill.tidak{background:var(--s-tidak-bg);color:var(--s-tidak)}
.pill.lain{background:var(--s-lain-bg);color:var(--s-lain)}
.pill.prov{background:var(--s-prov-bg);color:var(--s-prov)}
.tag {
  display:inline-block; font-size:11px; color:var(--ink-3); border:1px solid var(--line-2); border-radius:999px; padding:1px 8px; margin-right:4px;
}
.kode {
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.03em; font-weight:500;
  background:var(--biru-wash); border:1px solid transparent; border-radius:6px; padding:2px 8px; color:var(--biru-teks);
}

/* ---------------- tabel ---------------- */
.tbl-scroll { overflow-x:auto; border-radius:var(--r-s); }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th {
  text-align:left; font-family:var(--f-disp); font-size:11.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600; background:var(--sunk);
  padding:10px 12px; white-space:nowrap;
}
table.tbl th:first-child { border-radius:var(--r-s) 0 0 0; } table.tbl th:last-child { border-radius:0 var(--r-s) 0 0; }
table.tbl td { border-bottom:1px solid var(--line); padding:11px 12px; vertical-align:top; color:var(--ink-2); }
table.tbl tr:hover td { background:var(--sunk); }
table.tbl td b { color:var(--ink); font-weight:600; }

/* ---------------- pesan ---------------- */
.msg { padding:11px 14px; font-size:13.5px; border:1px solid var(--line-2); border-radius:var(--r-s); margin-bottom:14px; line-height:1.5; }
.msg--ok { border-color:#BFE6CD; background:var(--s-ada-bg); color:var(--s-ada); }
.msg--err { border-color:#F3C1C1; background:var(--s-tidak-bg); color:var(--s-tidak); }
.msg--warn { border-color:#F5D9A8; background:var(--s-mohon-bg); color:var(--s-mohon); }
.msg--info { border-color:#BFD6F2; background:var(--link-wash); color:var(--biru-teks); }
.empty { padding:40px 20px; text-align:center; color:var(--ink-3); font-size:14.5px; }

/* ---------------- kaki halaman (biru tua, selebar layar) ---------------- */
.colophon {
  margin-top:56px; width:100vw; margin-left:calc(50% - 50vw); background:var(--biru-tua); color:rgba(255,255,255,.78);
  padding:36px 0 44px; font-size:13px; line-height:1.7;
}
.colophon > p { max-width:1100px; margin:0 auto 10px; padding-inline:22px; }
.colophon b { color:#fff; font-weight:600; }
.colophon a, .colophon a:visited { color:#fff; text-underline-offset:2px; }
a.lnk, table.tbl td a, .msg a, .jwb a, .qa__b a, .riw a { color:var(--link); text-underline-offset:2px; word-break:break-all; }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:780px){
  .summary { grid-template-columns:repeat(2,1fr); }
  .nav__in { min-height:56px; padding-top:8px; padding-bottom:8px; }
  .nav__brand { flex-basis:100%; margin-right:0; min-height:28px; }
  .nav__brand > span > span { display:none; }
  .nav a:not(.nav__brand) { font-size:12.5px; padding:6px 11px; }
}
@media (prefers-reduced-motion: reduce){ * { transition-duration:.01ms !important; } }

/* ---------------- asisten PST (chatbot) ---------------- */
/* Gaya widget Asisten PST ada di assets/asisten.css (dipakai bersama tiga situs). */