:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1c2430; --muted:#6b7686; --line:#e2e6ec;
  --accent:#12518f; --accent-ink:#fff; --ok:#1a7f4b; --warn:#9a6700; --err:#b3261e;
  --radius:10px;

  /* Permukaan bertingkat. Dipisahkan dari warna pekat supaya tema gelap cukup
     mengganti token, bukan memburu warna satu per satu di 400 baris. */
  --sur-2:#fafbfc;        /* baris berselang, kotak acuan */
  --sur-3:#f0f2f5;        /* tajuk tabel */
  --sur-sorot:#f1f5fb;    /* baris yang disentuh tetikus */
  /* Isian bilah capaian. Terpisah dari token teks: warna teks dipilih untuk
     kontras di atas latar, sedangkan ini dilihat sebagai bidang penuh. */
  --bar-penuh:#2f8f57;--bar-sedang:#b58a12;--bar-awal:#c2681f;
  --sisi-bg:#fff;         /* menu samping */
  --sisi-sorot:#f4f7fb;
  --sisi-on:#eef4fb;
  --isian-bg:#fff;        /* kotak isian */
  --isian-line:#ccd3dc;
  --line-2:#e2e8f0;       /* garis pada naskah panjang */
  --ink-2:#2b3442;
  --ink-3:#445061;
  --ink-4:#5a6472;
  --kode-bg:#eef0f3;
  --jalur:#eceff3;        /* alur batang persentase */
  --chip-bg:#22303f;
  --tautan:#12518f;       /* warna teks tautan; di tema gelap dipisah dari --accent */

  /* Warna tingkat risiko menurut Lampiran Perbup h.12. Dijadikan token supaya
     satu set aturan melayani tema terang dan gelap sekaligus - kalau ditulis
     dua kali, cepat atau lambat keduanya berbeda diam-diam. Nilai di bawah ini
     SAMA PERSIS dengan yang sudah dipakai sebelumnya, jadi tampilan terang
     tidak berubah sedikit pun. Akhiran `blok` dipakai untuk sel matriks yang
     terisi penuh warna, yang memang lebih pekat daripada lencana. */
  --m-bg:#fbe3e1; --m-ink:#8f1e18; --m-line:#f0b6b1; --m-blok:#f3b4ae; --m-blok-ink:#6d1712;
  --o-bg:#fdece0; --o-ink:#9a4a06; --o-line:#f5c9a8; --o-blok:#f8cfae; --o-blok-ink:#7a3a05;
  --k-bg:#fdf6d5; --k-ink:#7a5c00; --k-line:#eedc94; --k-blok:#fbeead; --k-blok-ink:#6b5000;
  --h-bg:#e2f2e8; --h-ink:#12603a; --h-line:#b3ddc4; --h-blok:#c6e6d3; --h-blok-ink:#0e4c2e;
  --b-bg:#e0ecfa; --b-ink:#12518f; --b-line:#b6d0ec; --b-blok:#c3d9f2; --b-blok-ink:#0e4176;
  --a-bg:#eef1f4; --a-ink:#5a6472; --a-line:#dde2e8;
  /* Lencana dan tag memakai abu yang SEDIKIT berbeda dari pill.abu.
     Dibiarkan berbeda dengan sengaja: menyatukannya akan mengubah
     tampilan terang yang sudah dipakai, dan itu bukan perbaikan. */
  --a2-bg:#e8eaee; --a2-ink:#445061;

  /* Bayangan disusun bertingkat supaya kedalaman terbaca konsisten. */
  --bayang-1:0 1px 2px rgba(16,24,40,.04);
  --bayang-2:0 4px 12px rgba(16,24,40,.08);
  --bayang-3:0 12px 32px rgba(16,24,40,.16);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 12px}
.small{font-size:13px;color:var(--muted)}

/* ---- kerangka ---- */
.top{background:var(--accent);color:var(--accent-ink);padding:0 20px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.top .brand{font-weight:700;letter-spacing:.2px;padding:13px 0;font-size:16px}
.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.top nav a{color:#dbe7f5;padding:13px 12px;border-bottom:3px solid transparent}
.top nav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.08)}
.top nav a.on{color:#fff;border-bottom-color:#ffc857;font-weight:600}
.top .me{font-size:13px;color:#dbe7f5;display:flex;align-items:center;gap:10px}
.top .me a{color:#fff;text-decoration:underline}
.wrap{max-width:1140px;margin:22px auto;padding:0 20px}

/* ---- kartu & tabel ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:18px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* Panduan: naskah panjang perlu lebar baca yang terbatas. Baris sepanjang
   layar lebar membuat mata kehilangan barisnya saat kembali ke kiri. */
.naskah{max-width:78ch;line-height:1.65}
.naskah h2{margin:1.4em 0 .5em;font-size:19px}
.naskah h3{margin:1.2em 0 .4em;font-size:16px}
.naskah h4{margin:1em 0 .3em;font-size:14px}
.naskah p{margin:.7em 0}
.naskah ul,.naskah ol{margin:.7em 0 .7em 1.3em;padding:0}
.naskah li{margin:.3em 0}
.naskah blockquote{margin:.9em 0;padding:.5em .9em;border-left:3px solid #cbd5e1;
  background:#f8fafc;color:#475569}
.naskah hr{margin:1.6em 0;border:0;border-top:1px solid #e2e8f0}
.naskah pre.kode{background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:8px;
  overflow-x:auto;font-size:12.5px;line-height:1.5}
.naskah table{font-size:13px}
.naskah .tablewrap{max-width:100%;margin:.9em 0}

.faq{border:1px solid var(--line-2);border-radius:8px;margin:8px 0;background:var(--card)}
.faq summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\25B8 ";color:#64748b}
.faq[open] summary::before{content:"\25BE ";color:#64748b}
.faq-isi{padding:0 14px 12px;border-top:1px solid #f1f5f9}

/* Penanda halaman. Sasaran sentuh dibuat cukup besar (36px) - daftar risiko
   dibuka juga dari telepon, dan tautan sekecil teks biasa sulit ditekan tepat. */
.halaman{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:12px 0 0}
.hal-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--accent);font-size:13px;font-weight:600}
.hal-btn:hover{background:#f1f5fb;text-decoration:none}
.hal-btn.kini{background:var(--accent);border-color:var(--accent);color:#fff}
.hal-btn.mati{color:#b6bcc6;background:#fafbfc;cursor:default}
.hal-elipsis{padding:0 4px;color:var(--muted)}
@media print{ .halaman{display:none} }

/* Tajuk tabel yang tetap terlihat saat menggulir.
   Register risiko berisi ratusan baris. Begitu tajuknya lewat ke atas layar,
   pembaca tidak lagi tahu kolom mana yang sedang dibacanya - dan kolom-kolom
   di sini berisi angka yang mirip satu sama lain (kemungkinan, dampak,
   besaran, besaran sesudah penanganan). Salah membaca kolom pada tabel risiko
   bukan kesalahan kecil. */
table thead th,table tr:first-child th{position:sticky;top:0;z-index:2;
  background:var(--sur-3);box-shadow:inset 0 -1px 0 var(--line)}
@media print{ table thead th,table tr:first-child th{position:static;box-shadow:none} }

/* Kartu diberi bayangan yang sangat tipis supaya batasnya terbaca tanpa garis
   yang berat - layar kantor sering diatur terang, dan garis tipis saja hilang. */
.card{box-shadow:var(--bayang-1)}

/* Baris tabel berselang-seling: mata mudah melompat baris pada tabel lebar. */
table tbody tr:nth-child(even){background:var(--sur-2)}
table tbody tr:hover{background:var(--sur-sorot)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--bayang-1)}
.stat b{display:block;font-size:30px;line-height:1.15;font-weight:700}
.stat span{color:var(--muted);font-size:13px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--sur-3);font-weight:600;font-size:13px;color:var(--ink-3)}
tr:last-child td{border-bottom:0}
/* Tabel panjang menggulir DI DALAM kotaknya sendiri, sehingga tajuknya yang
   melekat benar-benar bertahan di layar. Tabel pendek tidak pernah mencapai
   batas ini, jadi tampilannya tidak berubah. */
.tablewrap{overflow:auto;max-height:72vh}

/* ---- kendali ---- */
label{display:block;font-size:13px;font-weight:600;margin:0 0 5px;color:var(--ink-3)}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--isian-line);border-radius:7px;
  font:inherit;background:var(--isian-bg);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #a9c6e8;outline-offset:0;border-color:var(--accent)}

/* Cincin fokus untuk tautan dan tombol.
   Sebelumnya hanya kotak isian yang punya penanda fokus, sehingga siapa pun
   yang menelusuri halaman dengan papan ketik tidak dapat melihat di mana
   dirinya berada - dan menu samping berisi 18 butir. :focus-visible dipakai
   supaya cincinnya muncul untuk papan ketik, tidak untuk klik tetikus. */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,
details:focus-visible{outline:3px solid #ffc857;outline-offset:2px;border-radius:4px}

/* Tautan lewati: tersembunyi sampai difokuskan papan ketik.
   Tanpa ini, setiap perpindahan halaman memaksa pengguna papan ketik menelusuri
   seluruh menu lebih dulu sebelum sampai ke isi yang dicarinya. */
.lewati{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:#fff;padding:10px 16px;border-radius:0 0 var(--radius) 0;font-weight:600}
.lewati:focus{left:0;text-decoration:none}
.isi:focus{outline:none}
textarea{min-height:78px;resize:vertical}
.field{margin-bottom:14px}
.btn{display:inline-block;padding:9px 16px;border:1px solid var(--accent);border-radius:7px;
  background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:#0e4176;text-decoration:none}
.btn.sec{background:var(--card);color:var(--accent)}
.btn.sec:hover{background:#eef3f9}
.btn.danger{background:var(--err);border-color:var(--err)}
.btn.danger:hover{background:#8f1e18}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.right{margin-left:auto}

/* ---- status ---- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;
  background:#e8eaee;color:#445061}
.badge.b{background:#dce9f7;color:#12518f}
.badge.y{background:#fdf0d5;color:#9a6700}
.badge.r{background:#fbe3e1;color:#b3261e}
.badge.gr{background:#dcf0e4;color:#1a7f4b}

.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;border:1px solid;font-size:14px}
.flash.ok{background:#e8f6ee;border-color:#a8d8bd;color:#12603a}
.flash.err{background:#fdecea;border-color:#f2b8b3;color:#8f1e18}
.flash.warn{background:#fff6e5;border-color:#f0d9a8;color:#7a5410}
.empty{padding:34px;text-align:center;color:var(--muted)}

/* ---- login ---- */
.login{max-width:380px;margin:9vh auto;padding:0 20px}
.login .card{padding:26px}
.login h1{text-align:center;margin-bottom:2px}
.login .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:20px}

/* ---- riwayat ---- */
.hist{font-size:13px;border-left:2px solid var(--line);padding-left:14px;margin:0}
.hist li{margin-bottom:9px;list-style:none;position:relative}
.hist li:before{content:"";position:absolute;left:-19px;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--accent)}
code{background:var(--kode-bg);padding:1px 5px;border-radius:4px;font-size:12.5px}
.mono{font-family:Consolas,"Courier New",monospace;font-size:12.5px}
@media(max-width:640px){.top{gap:8px}.top .brand{padding:11px 0}.wrap{margin:14px auto}}

/* ---- level risiko (warna sesuai Lampiran Perbup h.12) ---- */
.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600;
  border:1px solid transparent}
.pill.merah {background:#fbe3e1;color:#8f1e18;border-color:#f0b6b1}
.pill.oranye{background:#fdece0;color:#9a4a06;border-color:#f5c9a8}
.pill.kuning{background:#fdf6d5;color:#7a5c00;border-color:#eedc94}
.pill.biru  {background:#e0ecfa;color:#12518f;border-color:#b6d0ec}
.pill.hijau {background:#e2f2e8;color:#12603a;border-color:#b3ddc4}

.tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;
  background:#e8eaee;color:#445061;margin-left:4px}
.tag.fraud{background:#fbe3e1;color:#8f1e18}
.tag.mitra{background:#e8e4f7;color:#4a3a8f}

/* ---- matriks analisis risiko ---- */
table.matrix td.cell{text-align:center;font-weight:700;font-size:15px;width:15%;
  border:1px solid var(--card)}
table.matrix td.cell.merah {background:#f3b4ae;color:#6d1712}
table.matrix td.cell.oranye{background:#f8cfae;color:#7a3a05}
table.matrix td.cell.kuning{background:#fbeead;color:#6b5000}
table.matrix td.cell.biru  {background:#c3d9f2;color:#0e4176}
table.matrix td.cell.hijau {background:#c6e6d3;color:#0e4c2e}
table.matrix th{background:#f0f2f5;text-align:center}

.nilai-box{display:flex;align-items:center;gap:14px;background:#f0f3f7;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;margin-top:6px}
.nilai-box .angka{font-size:34px;font-weight:700;line-height:1;color:var(--accent)}

/* ---------- dashboard: pengukur, ubin, batang ---------- */
.gauge{text-align:center}
.gauge svg{max-width:280px;margin:4px auto 0;display:block;height:auto}
.gauge-ket{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* Ubin jenis risiko. Satu baris pada layar lebar, membungkus pada layar sempit,
   sehingga tetap terbaca di ponsel tanpa aturan media tersendiri. */
.ubin{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.ubin-item{display:block;padding:12px 12px 10px;border-radius:10px;border:1px solid;
  text-align:center;color:#2b3442;transition:transform .08s ease}
.ubin-item:hover{transform:translateY(-2px);text-decoration:none}
.ubin-item b{display:block;font-size:26px;line-height:1.15;font-weight:700}
.ubin-kode{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.75}
.ubin-nama{display:block;font-size:11px;line-height:1.3;margin-top:3px;opacity:.85}
.ubin-item.kosong{opacity:.5}
.ubin-item.merah {background:#fbe3e1;border-color:#f0b6b1;color:#8f1e18}
.ubin-item.oranye{background:#fdece0;border-color:#f5c9a8;color:#9a4a06}
.ubin-item.kuning{background:#fdf6d5;border-color:#eedc94;color:#7a5c00}
.ubin-item.hijau {background:#dcf0e4;border-color:#a8d8bd;color:#12603a}
.ubin-item.biru  {background:#dce9f7;border-color:#a9c6e8;color:#12518f}

/* Batang persentase pada tabel rincian. */
.bar{height:9px;border-radius:5px;background:var(--jalur);overflow:hidden}
.bar span{display:block;height:100%;border-radius:5px}
table.rinci{width:100%}
table.rinci td{border:0;padding:7px 8px;vertical-align:middle}
table.rinci tr+tr td{border-top:1px solid var(--line)}
.muted{color:var(--muted)}

/* ---------- baris saringan dan pencarian ---------- */
.saring{padding-bottom:14px}
.saring-baris{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.saring-baris input[type=search]{flex:1 1 260px;min-width:180px}
.saring-baris select{flex:0 1 190px}

/* ---------- cetak ---------- */
/* Halaman daftar sering dicetak untuk rapat. Yang dicetak hanya isinya:
   menu, tombol, dan kotak saringan tidak ikut supaya kertas tidak terbuang. */
@media print{
  .top,.saring,.btn,.tabs,nav{display:none !important}
  .card{border:0;box-shadow:none;padding:0;margin:0 0 10px}
  body{background:#fff}
  table{font-size:11px}
  a{color:#000;text-decoration:none}
  /* Saat dicetak, batas tinggi HARUS dilepas - kalau tidak, tabel terpotong
     pada kertas dan yang tercetak bukan seluruh isinya. */
  .tablewrap{overflow:visible;max-height:none}
}

/* ---------- acuan kriteria skala ---------- */
.acuan{margin:10px 0 4px;border:1px solid var(--line);border-radius:8px;background:var(--sur-2)}
.acuan summary{padding:9px 12px;cursor:pointer;font-size:13px;font-weight:600;color:var(--accent)}
.acuan[open] summary{border-bottom:1px solid var(--line)}
.acuan-tabel{width:100%;font-size:12px}
.acuan-tabel td,.acuan-tabel th{padding:6px 10px;vertical-align:top}
.acuan p{padding:0 12px 10px;margin:6px 0 0}

/* ---------- tata letak menyamping: menu di kiri, isi melebar ---------- */
/* Dengan sebelas butir menu, satu baris mendatar menjadi sempit dan terpotong.
   Menu di samping membuat area isi melebar, sehingga tabel lebar (kode, K, D,
   nilai, level, RTP, realisasi) terbaca tanpa digulung ke samping. */
.tata{display:flex;align-items:flex-start;gap:0;min-height:calc(100vh - 56px)}
.sisi{flex:0 0 232px;background:var(--sisi-bg);border-right:1px solid var(--line);
  padding:14px 0 20px;position:sticky;top:0;align-self:stretch}
.sisi-judul{padding:14px 18px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.sisi-butir{display:flex;gap:10px;align-items:flex-start;padding:9px 18px;
  color:var(--ink-2);border-left:3px solid transparent}
.sisi-butir:hover{background:var(--sisi-sorot);text-decoration:none}
.sisi-butir.on{background:var(--sisi-on);border-left-color:var(--accent);color:var(--accent)}
.sisi-no{flex:0 0 20px;height:20px;border-radius:50%;background:#e3e8ef;color:#5a6472;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin-top:1px}
.sisi-butir.on .sisi-no{background:var(--accent);color:#fff}
.sisi-teks{display:block;min-width:0}
.sisi-l{display:block;font-size:14px;font-weight:600;line-height:1.3}
.sisi-ket{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:1px}
.sisi-butir.on .sisi-ket{color:#4a7ab5}
.sisi-kaki{margin:16px 18px 0;font-size:11px;line-height:1.45;color:var(--muted)}
.isi{flex:1 1 auto;min-width:0;padding:22px 24px 0}
.kaki{margin:26px 0 30px;font-size:12px;color:var(--muted)}

/* Pada layar sempit, menu kembali menumpuk di atas isi. */
@media (max-width:900px){
  .tata{flex-direction:column}
  /* Menu dibatasi tingginya dan menggulir sendiri. Tanpa batas ini, 18 butir
     menu menjadi dinding setinggi layar DI ATAS isi halaman - dan pemakai
     telepon harus menggulir melewati seluruhnya pada setiap halaman. */
  .sisi{flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line);position:static;
    max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sisi-butir{border-left:0;border-bottom:3px solid transparent}
  .sisi-butir.on{border-left:0;border-bottom-color:var(--accent)}
  .isi{padding:16px 16px 0;width:100%}
}
@media print{ .sisi{display:none !important} .isi{padding:0} .kaki{display:none} }

/* ---------- sel triwulan pada Realisasi Penanganan ---------- */
.sel-tw{display:inline-block;min-width:52px;padding:5px 8px;border-radius:6px;
  border:1px dashed var(--line);background:#fafbfc;color:var(--muted);
  font-size:12px;font-weight:600}
.sel-tw:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.sel-tw.terisi{border-style:solid;background:#dcf0e4;border-color:#a8d8bd;color:#12603a}

/* ---------- kartu progres per tahapan ---------- */
.tahap{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-bottom:18px}
.tahap-kartu{display:block;padding:14px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2)}
.tahap-kartu:hover{text-decoration:none;border-color:var(--accent)}
.tahap-atas{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tahap-nama{font-size:13px;font-weight:700}
.tahap-form{font-size:11px;color:var(--muted);white-space:nowrap}
.tahap-angka{margin:6px 0 8px;display:flex;align-items:baseline;gap:6px}
.tahap-angka b{font-size:26px;font-weight:700;line-height:1}
.tahap-persen{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.tahap-ket{display:block;margin-top:7px;font-size:11px;color:var(--muted);line-height:1.4}
.tahap-kartu.biru   .bar span{background:#4a90d9}
.tahap-kartu.kuning .bar span{background:#e9c245}
.tahap-kartu.oranye .bar span{background:#ef9a4a}
.tahap-kartu.hijau  .bar span{background:#4aa96c}

/* ---------- pemetaan risiko pada matriks ---------- */
.peta-matriks{border-collapse:separate;border-spacing:3px;width:auto}
.peta-matriks td{width:82px;height:62px;text-align:center;vertical-align:middle;
  border-radius:6px;border:0;position:relative;padding:4px}
.peta-matriks .sel-nilai{display:block;font-size:15px;font-weight:700;opacity:.55}
.peta-matriks .sel-merah {background:#fbe3e1;color:#8f1e18}
.peta-matriks .sel-oranye{background:#fdece0;color:#9a4a06}
.peta-matriks .sel-kuning{background:#fdf6d5;color:#7a5c00}
.peta-matriks .sel-hijau {background:#dcf0e4;color:#12603a}
.peta-matriks .sel-biru  {background:#dce9f7;color:#12518f}
.sel-titik{display:flex;gap:4px;justify-content:center;margin-top:2px}
.titik{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:10px;font-size:11px;font-weight:700;color:#fff}
.titik.I{background:#12518f}
.titik.R{background:#12603a}
.peta-matriks .sumbu-lab{font-size:12px;color:var(--muted);border:0;background:none;
  text-align:center;font-weight:600}
.peta-matriks .sumbu-x{font-size:12px;color:var(--muted);border:0;background:none;
  text-align:center;padding-top:2px}
.peta-matriks .sumbu-y{border:0;background:none;vertical-align:middle;width:26px}
.peta-matriks .sumbu-y span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:12px;color:var(--muted)}

/* ---------- pemantauan aktivitas pada Jejak Audit ---------- */
.saring{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.saring label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.saring input,.saring select{padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  font:inherit;min-width:150px}
.dua-kolom{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- bukti dukung ---------- */
tr.pudar td{opacity:.62}
tr.pudar b{font-weight:600;text-decoration:line-through}

/* ---------- Monitoring Aktivitas ---------- */
/* Penanda tahap: centang bila tahapnya sudah ada datanya, titik bila belum.
   Sengaja bukan hanya warna - pembaca yang sulit membedakan warna tetap dapat
   membaca bentuknya. */
.jejak-titik{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;
  border:1px solid var(--line);background:#f4f6f8;color:#9aa3ad}
.jejak-titik.ada{background:#e2f2e8;border-color:#b3ddc4;color:#12603a}
.jejak-titik.kosong{background:var(--card);border-style:dashed}

/* Skor sebagai tiga kotak: kemungkinan, dampak, dan hasilnya. Bentuk ini
   dipakai aplikasi pembanding dan memang terbaca cepat. */
.skor{display:inline-flex;gap:3px;align-items:center}
.skor i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:5px;background:#eef1f4;color:#5a6472;font-style:normal;font-size:11.5px;
  font-weight:600}
.skor b.pill{min-width:26px;text-align:center;border-radius:5px;padding:2px 6px}

table.aktivitas th.tegak{writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;padding:8px 2px;font-weight:600;font-size:11.5px;color:var(--muted)}
table.aktivitas td{vertical-align:top}
table.aktivitas tr.keadaan-belum td:first-child{box-shadow:inset 3px 0 0 #e0a800}
table.aktivitas tr.keadaan-tuntas td:first-child{box-shadow:inset 3px 0 0 #2f9e63}

/* Kartu angka yang dapat diklik untuk menyaring. */
a.stat{text-decoration:none;color:inherit;display:block}
a.stat:hover{border-color:var(--accent)}
a.stat.terpilih{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,109,189,.14)}

/* Chip pada judul halaman: kode risiko dan ringkasan peristiwanya. */
.chip{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:600;
  background:#22303f;color:#fff;vertical-align:middle;margin-left:6px}
.chip.mono{font-family:Consolas,"Courier New",monospace}

.pill.abu{background:#eef1f4;color:#5a6472;border-color:#dde2e8}

/* ---------- Strategi penanganan risiko (acuan SIMENTARI) ---------- */
.strategi{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.strategi-kartu{border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  background:var(--card)}
.strategi-kartu b{display:block;font-size:28px;line-height:1.15}
.strategi-kartu .nama{font-weight:600;margin-bottom:4px}
.strategi-kartu .arti{color:var(--muted);font-size:12.5px}
.strategi-kartu.accept   {border-left:4px solid #2f9e63}
.strategi-kartu.treatment{border-left:4px solid #1f6dbd}
.strategi-kartu.transfer {border-left:4px solid #9a4a06}
.strategi-kartu.avoid    {border-left:4px solid #8f1e18}

@media print{
  .sisi,.top,.saring,.btn{display:none!important}
  .wrap{margin:0}
  table.aktivitas th.tegak{writing-mode:horizontal-tb;transform:none}
}

/* Sel peta risiko yang berisi risiko dapat diklik untuk membuka daftarnya. */
.sel-tautan{text-decoration:none;color:inherit;display:inline-block}
.sel-tautan:hover .sel-nilai{text-decoration:underline}

/* =======================================================================
   LAPISAN KENYAMANAN
   Ditambahkan sebagai lapisan, bukan tulis ulang: seluruh aturan di atas
   tetap berlaku apa adanya, sehingga tampilan terang yang sudah dipakai dan
   diuji tidak berubah perilakunya. Aturan di bawah ini menimpa yang di atas
   karena urutannya, bukan karena kekhususan selektor yang dinaikkan - dengan
   begitu satu pun aturan lama tidak perlu dibongkar.
   ======================================================================= */

/* ---------- 1. Gerak yang dapat dimatikan ---------- */
/* Sebagian orang pusing oleh gerak di layar, dan sistemnya sudah menyatakan
   itu. Menghormati pernyataan yang sudah ada lebih tepat daripada menambah
   satu saklar lagi yang harus dicari sendiri. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- 2. Tombol menu untuk layar sempit ---------- */
/* Sebelumnya 19 butir menu menumpuk DI ATAS isi halaman pada telepon: satu
   dinding yang harus dilewati setiap kali berpindah halaman. Sekarang menu itu
   terlipat dan isi yang dibuka pengguna langsung terlihat. Tanpa JavaScript,
   menu tampil terbuka seperti sebelumnya - tidak ada yang hilang. */
.sisi-tombol{display:none}
@media (max-width:900px){
  .sisi-tombol{display:flex;align-items:center;gap:10px;width:100%;
    padding:12px 16px;border:0;border-bottom:1px solid var(--line);
    background:var(--sisi-bg);color:var(--ink);font:inherit;font-weight:600;
    cursor:pointer;text-align:left}
  .sisi-tombol:hover{background:var(--sisi-sorot)}
  .sisi-tombol .garis{display:inline-flex;flex-direction:column;gap:3px;width:18px}
  .sisi-tombol .garis i{display:block;height:2px;background:currentColor;border-radius:2px}
  .sisi-tombol .kini{margin-left:auto;font-weight:400;font-size:12px;color:var(--muted);
    max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tata.menu-lipat .sisi{display:none}
}

/* ---------- 3. Lompat cepat antar menu ---------- */
/* Dengan 19 butir menu, mencari satu halaman berarti membaca seluruh daftar.
   Ctrl+K membuka kotak ketik yang menyaring menu sambil diketik. Ini tambahan,
   bukan pengganti: menu samping tetap ada dan tetap dapat diklik. */
.lompat-tirai{position:fixed;inset:0;background:rgba(10,16,24,.45);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.lompat-kotak{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--bayang-3);overflow:hidden}
.lompat-kotak input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:15px 18px;font-size:15px;background:var(--card);color:var(--ink)}
.lompat-kotak input:focus{outline:none}
.lompat-daftar{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.lompat-daftar li{margin:0}
.lompat-daftar a{display:flex;align-items:baseline;gap:10px;padding:10px 12px;
  border-radius:8px;color:var(--ink)}
.lompat-daftar a:hover,.lompat-daftar a.sorot{background:var(--sisi-on);text-decoration:none}
.lompat-daftar .l{font-weight:600;font-size:14px}
.lompat-daftar .k{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}
.lompat-kosong{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.lompat-kaki{padding:9px 14px;border-top:1px solid var(--line);font-size:11.5px;
  color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;background:var(--sur-2)}
kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;background:var(--card);font-family:inherit;font-size:11px;font-weight:600}

/* ---------- 4. Saklar tema ---------- */
.tema-tombol{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.10);
  color:inherit;font:inherit;font-size:12px;cursor:pointer;line-height:1.4}
.tema-tombol:hover{background:rgba(255,255,255,.2)}

/* ---------- 5. Tanda bahwa tabel berlanjut ke samping ---------- */
/* Tabel register lebih lebar daripada layar telepon. Tanpa penanda, kolom di
   sebelah kanan tidak diketahui ada - pengguna menyimpulkan datanya tidak ada,
   padahal hanya belum tergulir. Tepi meredup hanya ke arah yang masih
   menyembunyikan isi, dan pulih begitu sampai ujung. */
.tablewrap{position:relative}
.tablewrap.geser-kanan{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
.tablewrap.geser-dua{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.tablewrap.geser-kiri{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px);
  mask-image:linear-gradient(to right,transparent,#000 34px)}
@media print{
  .tablewrap.geser-kanan,.tablewrap.geser-kiri,.tablewrap.geser-dua{
    -webkit-mask-image:none;mask-image:none}
}

/* ---------- 6. Pesan hasil tindakan ---------- */
.flash{position:relative;padding-right:42px;box-shadow:var(--bayang-1)}
.flash-tutup{position:absolute;top:6px;right:8px;width:28px;height:28px;border:0;
  border-radius:6px;background:transparent;color:inherit;font-size:17px;line-height:1;
  cursor:pointer;opacity:.6}
.flash-tutup:hover{opacity:1;background:rgba(0,0,0,.06)}

/* ---------- 7. Tombol yang sedang mengirim ---------- */
/* Menekan Simpan dua kali karena halaman terasa diam adalah kejadian biasa.
   Pengiriman kedua memang sudah ditolak di sisi server, tetapi pengguna tidak
   melihat penolakan itu - yang dilihatnya hanya layar yang tidak menjawab.
   Karena itu tombolnya sendiri yang menyatakan sedang bekerja. */
.btn.sibuk{opacity:.75;cursor:progress;pointer-events:none}
.btn.sibuk::after{content:"";display:inline-block;width:11px;height:11px;margin-left:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-1px;animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}

/* ---------- 8. Sasaran sentuh pada layar sempit ---------- */
@media (max-width:640px){
  .btn{padding:11px 18px}
  .sisi-butir{padding:12px 18px}
  .saring-baris input[type=search],.saring-baris select{min-height:42px}
}

/* ---------- 9. Baris yang baru saja dituju ---------- */
:target{scroll-margin-top:14px}
tr:target td{background:var(--sisi-on);box-shadow:inset 3px 0 0 var(--accent)}

/* ---------- 10. Kedalaman yang konsisten ---------- */
.tahap-kartu,.strategi-kartu,.ubin-item{box-shadow:var(--bayang-1)}
.tahap-kartu:hover,a.stat:hover{box-shadow:var(--bayang-2)}
.card{border-radius:12px}

/* =======================================================================
   TEMA GELAP
   Dinyalakan oleh setelan sistem, dan dapat ditimpa sendiri lewat saklar di
   kepala halaman. Warna status TIDAK dibalik melainkan disesuaikan: artinya
   harus tetap sama, sebab warna-warna itu mengikuti Lampiran Perbup h.12 -
   merah tetap berarti paling berbahaya, hijau tetap paling ringan. Yang
   berubah hanya terangnya, supaya tetap terbaca di atas latar pekat.
   ======================================================================= */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="terang"]){
    --bg:#111720; --card:#19202a; --ink:#e6ecf4; --muted:#8fa0b4; --line:#2b3644;
    --accent:#2f6fb5; --tautan:#7ab5f5;
    --sur-2:#1e2631; --sur-3:#222b37; --sur-sorot:#273241;
    --bar-penuh:#4aa96c; --bar-sedang:#e9c245; --bar-awal:#ef9a4a;
    --sisi-bg:#161d26; --sisi-sorot:#1f2836; --sisi-on:#1d2c3f;
    --isian-bg:#131a23; --isian-line:#3a4757; --line-2:#2b3644;
    --ink-2:#dae2ec; --ink-3:#aebbca; --ink-4:#9aa8b8;
    --kode-bg:#232c38; --jalur:#26303d; --chip-bg:#33414f;
    --bayang-1:0 1px 2px rgba(0,0,0,.4);
    --bayang-2:0 4px 12px rgba(0,0,0,.5);
    --bayang-3:0 12px 32px rgba(0,0,0,.6);
    --m-bg:#3a1e1c; --m-ink:#ffb3aa; --m-line:#5b2b27; --m-blok:#7d2e27; --m-blok-ink:#ffd9d4;
    --o-bg:#3a2718; --o-ink:#ffc79a; --o-line:#5c3e23; --o-blok:#8a4d18; --o-blok-ink:#ffe3c9;
    --k-bg:#38331a; --k-ink:#f0dc8e; --k-line:#574f27; --k-blok:#7a6a1c; --k-blok-ink:#fdf3c8;
    --h-bg:#17301f; --h-ink:#8ed7a9; --h-line:#234a31; --h-blok:#1f6b41; --h-blok-ink:#cdeeda;
    --b-bg:#17293d; --b-ink:#9ac8fb; --b-line:#24405e; --b-blok:#1f5490; --b-blok-ink:#d4e6fb;
    --a-bg:#242d38; --a-ink:#aebbca; --a-line:#333e4b;
    --a2-bg:#2a3441; --a2-ink:#c2ccd9;
  }
}
:root[data-tema="gelap"]{
  --bg:#111720; --card:#19202a; --ink:#e6ecf4; --muted:#8fa0b4; --line:#2b3644;
  --accent:#2f6fb5; --tautan:#7ab5f5;
  --sur-2:#1e2631; --sur-3:#222b37; --sur-sorot:#273241;
  --sisi-bg:#161d26; --sisi-sorot:#1f2836; --sisi-on:#1d2c3f;
  --isian-bg:#131a23; --isian-line:#3a4757; --line-2:#2b3644;
  --ink-2:#dae2ec; --ink-3:#aebbca; --ink-4:#9aa8b8;
  --kode-bg:#232c38; --jalur:#26303d; --chip-bg:#33414f;
  --bayang-1:0 1px 2px rgba(0,0,0,.4);
  --bayang-2:0 4px 12px rgba(0,0,0,.5);
  --bayang-3:0 12px 32px rgba(0,0,0,.6);
  --m-bg:#3a1e1c; --m-ink:#ffb3aa; --m-line:#5b2b27; --m-blok:#7d2e27; --m-blok-ink:#ffd9d4;
  --o-bg:#3a2718; --o-ink:#ffc79a; --o-line:#5c3e23; --o-blok:#8a4d18; --o-blok-ink:#ffe3c9;
  --k-bg:#38331a; --k-ink:#f0dc8e; --k-line:#574f27; --k-blok:#7a6a1c; --k-blok-ink:#fdf3c8;
  --h-bg:#17301f; --h-ink:#8ed7a9; --h-line:#234a31; --h-blok:#1f6b41; --h-blok-ink:#cdeeda;
  --b-bg:#17293d; --b-ink:#9ac8fb; --b-line:#24405e; --b-blok:#1f5490; --b-blok-ink:#d4e6fb;
  --a-bg:#242d38; --a-ink:#aebbca; --a-line:#333e4b;
  --a2-bg:#2a3441; --a2-ink:#c2ccd9;
}

/* ---------- Warna status dipasang lewat token ---------- */
/* Satu set aturan melayani kedua tema. Tanpa ini, setiap warna harus ditulis
   dua kali dan cepat atau lambat keduanya berbeda diam-diam. */
.pill.merah {background:var(--m-bg);color:var(--m-ink);border-color:var(--m-line)}
.pill.oranye{background:var(--o-bg);color:var(--o-ink);border-color:var(--o-line)}
.pill.kuning{background:var(--k-bg);color:var(--k-ink);border-color:var(--k-line)}
.pill.hijau {background:var(--h-bg);color:var(--h-ink);border-color:var(--h-line)}
.pill.biru  {background:var(--b-bg);color:var(--b-ink);border-color:var(--b-line)}
.pill.abu   {background:var(--a-bg);color:var(--a-ink);border-color:var(--a-line)}

.badge   {background:var(--a2-bg);color:var(--a2-ink)}
.badge.b {background:var(--b-bg);color:var(--b-ink)}
.badge.y {background:var(--k-bg);color:var(--k-ink)}
.badge.r {background:var(--m-bg);color:var(--m-ink)}
.badge.gr{background:var(--h-bg);color:var(--h-ink)}

.tag      {background:var(--a2-bg);color:var(--a2-ink)}
.tag.fraud{background:var(--m-bg);color:var(--m-ink)}

.ubin-item.merah {background:var(--m-bg);border-color:var(--m-line);color:var(--m-ink)}
.ubin-item.oranye{background:var(--o-bg);border-color:var(--o-line);color:var(--o-ink)}
.ubin-item.kuning{background:var(--k-bg);border-color:var(--k-line);color:var(--k-ink)}
.ubin-item.hijau {background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.ubin-item.biru  {background:var(--b-bg);border-color:var(--b-line);color:var(--b-ink)}

table.matrix td.cell.merah {background:var(--m-blok);color:var(--m-blok-ink)}
table.matrix td.cell.oranye{background:var(--o-blok);color:var(--o-blok-ink)}
table.matrix td.cell.kuning{background:var(--k-blok);color:var(--k-blok-ink)}
table.matrix td.cell.hijau {background:var(--h-blok);color:var(--h-blok-ink)}
table.matrix td.cell.biru  {background:var(--b-blok);color:var(--b-blok-ink)}
table.matrix th{background:var(--sur-3)}

.peta-matriks .sel-merah {background:var(--m-bg);color:var(--m-ink)}
.peta-matriks .sel-oranye{background:var(--o-bg);color:var(--o-ink)}
.peta-matriks .sel-kuning{background:var(--k-bg);color:var(--k-ink)}
.peta-matriks .sel-hijau {background:var(--h-bg);color:var(--h-ink)}
.peta-matriks .sel-biru  {background:var(--b-bg);color:var(--b-ink)}

.flash.ok  {background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.flash.err {background:var(--m-bg);border-color:var(--m-line);color:var(--m-ink)}
.flash.warn{background:var(--k-bg);border-color:var(--k-line);color:var(--k-ink)}

.jejak-titik{background:var(--sur-2);border-color:var(--line);color:var(--muted)}
.jejak-titik.ada{background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.sel-tw{background:var(--sur-2);border-color:var(--line);color:var(--muted)}
.sel-tw.terisi{background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.skor i{background:var(--sur-3);color:var(--ink-4)}
.nilai-box{background:var(--sur-2);border-color:var(--line)}
.chip{background:var(--chip-bg,#22303f)}

.naskah blockquote{background:var(--sur-2);border-left-color:var(--line-2);color:var(--ink-3)}
.naskah hr{border-top-color:var(--line-2)}
.faq-isi{border-top-color:var(--line-2)}
.faq summary::before,.faq[open] summary::before{color:var(--muted)}

/* ---------- Warna tautan ---------- */
/* Di tema terang, warna tautan sama dengan warna lembaga. Di tema gelap, warna
   itu terlalu pekat untuk dibaca di atas latar gelap, sehingga dipisahkan
   menjadi token tersendiri - biru yang lebih terang untuk teks, biru pekat
   tetap dipakai sebagai LATAR tombol supaya tulisan putih di atasnya tetap
   berkontras cukup. Nilai terangnya ditetapkan bersama token lain di :root. */
a{color:var(--tautan)}
.hal-btn{color:var(--tautan)}
.btn.sec{color:var(--tautan)}
.acuan summary{color:var(--tautan)}
.sisi-butir.on{color:var(--tautan)}
.sisi-butir.on .sisi-ket{color:var(--tautan);opacity:.8}
.nilai-box .angka{color:var(--tautan)}
tr.pudar td{opacity:.62}

/* ---------- Cetak selalu terang ---------- */
/* Kertas tidak punya tema gelap. Tanpa pengembalian ini, mencetak dari tema
   gelap menghasilkan halaman dengan tulisan pucat di atas putih. */
@media print{
  :root,:root[data-tema="gelap"]{
    --bg:#fff; --card:#fff; --ink:#111; --muted:#555; --line:#bbb;
    --sur-2:#fff; --sur-3:#f2f2f2; --sur-sorot:#fff; --sisi-bg:#fff;
    --isian-bg:#fff; --line-2:#ccc; --ink-2:#111; --ink-3:#333; --ink-4:#444;
    --kode-bg:#f2f2f2; --jalur:#eee; --tautan:#000;
    --m-bg:#fbe3e1; --m-ink:#8f1e18; --o-bg:#fdece0; --o-ink:#9a4a06;
    --k-bg:#fdf6d5; --k-ink:#7a5c00; --h-bg:#e2f2e8; --h-ink:#12603a;
    --b-bg:#e0ecfa; --b-ink:#12518f; --a-bg:#eef1f4; --a-ink:#5a6472;
    --bayang-1:none; --bayang-2:none; --bayang-3:none;
  }
  .sisi-tombol,.lompat-tirai,.tema-tombol,.flash-tutup{display:none !important}
}

/* =======================================================================
   PENGHALUS VISUAL
   Ditambahkan sesudah lapisan kenyamanan, jadi ia menimpa yang perlu saja.
   Tidak ada markup yang berubah - seluruhnya gaya. Arahnya tetap aplikasi
   kerja pemerintahan: tenang, padat informasi, dan tidak menarik perhatian
   ke dirinya sendiri. Yang dinaikkan adalah hal-hal yang benar-benar dibaca
   orang setiap hari - angka, tajuk, dan jarak antar-bagian.
   ======================================================================= */

/* ---------- Angka yang berbaris rapi ---------- */
/* Aplikasi ini penuh angka yang dibandingkan menurun: skor, jumlah baris,
   persentase. Dengan angka proporsional, "11" lebih sempit daripada "88"
   sehingga kolom bergoyang dan mata kehilangan barisnya. Angka bertabulasi
   membuat setiap digit selebar sama, sehingga kolom benar-benar lurus. */
table,.stat b,.tahap-angka b,.ubin-item b,.nilai-box .angka,.skor,.mono,
.strategi-kartu b,.hal-btn{font-variant-numeric:tabular-nums}

/* ---------- Tajuk halaman ---------- */
/* Sebelumnya h1 hanya sedikit lebih besar daripada teks biasa, sehingga awal
   halaman tidak punya titik masuk yang jelas. Ukurannya dinaikkan dan
   spasinya dirapatkan - itulah yang membuat tajuk terbaca sebagai tajuk,
   bukan sekadar baris tebal. */
h1{font-size:23px;letter-spacing:-.015em;font-weight:700;line-height:1.25}
h2{font-size:15.5px;letter-spacing:-.005em;color:var(--ink);font-weight:700}
.isi > h1:first-child,.isi > .flash + h1{margin-top:2px}
.isi > h1 + .small,.isi > h1 + p.small{margin-top:0;margin-bottom:16px}

/* ---------- Kepala halaman ---------- */
/* Warna rata dibuat sedikit bergradasi ke bawah supaya batas antara kepala
   dan isi terbaca tanpa garis tambahan, dan nama aplikasi diberi ruang. */
.top{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 88%,#000));
  box-shadow:0 1px 3px rgba(16,24,40,.22)}
.top .brand{font-size:15.5px;letter-spacing:.01em}
.top .me{gap:12px}

/* ---------- Kartu angka ---------- */
/* Angka besar diberi warna lembaga: pada halaman penuh teks abu, angka itulah
   yang dicari lebih dulu. Kartunya diberi tanda di tepi kiri supaya deretnya
   terbaca sebagai satu kelompok. */
.stat{position:relative;overflow:hidden}
.stat b{color:var(--tautan);letter-spacing:-.02em}
.stat span{display:block;margin-top:2px}
a.stat{transition:box-shadow .12s ease,border-color .12s ease}

/* ---------- Tombol ---------- */
/* Keadaan ditekan diberi umpan balik. Tanpa itu, pada sambungan lambat
   pengguna tidak yakin tekanannya masuk - dan tekanan kedua adalah persoalan
   yang justru sedang kita hindari. */
.btn{transition:background .12s ease,box-shadow .12s ease,transform .06s ease;
  box-shadow:0 1px 1px rgba(16,24,40,.06)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.sec:hover{border-color:var(--accent)}

/* ---------- Tabel ---------- */
/* Tajuk dibuat lebih tenang: huruf kecil dengan jarak antarhuruf sedikit
   dilebarkan terbaca sebagai label kolom, bukan sebagai isi. */
th{letter-spacing:.03em;text-transform:none;font-size:12.5px;
  padding-top:10px;padding-bottom:10px}
td{padding-top:10px;padding-bottom:10px}
table tbody tr{transition:background .1s ease}

/* ---------- Menu samping ---------- */
.sisi-butir{transition:background .1s ease,border-color .1s ease}
.sisi-butir.on{font-weight:600}
.sisi-judul{margin-top:4px}

/* ---------- Keadaan kosong ---------- */
/* Halaman kosong adalah tempat pengguna paling sering tersesat. Ruangnya
   dilonggarkan supaya kalimat penjelasnya terbaca sebagai penjelasan, bukan
   sebagai galat. */
.empty{padding:44px 24px;font-size:14px;line-height:1.6}

/* ---------- Lencana dan pil ---------- */
.pill,.badge{letter-spacing:.01em;line-height:1.6;white-space:nowrap}

/* ---------- Jarak antar-bagian ---------- */
.card{padding:20px}
.card + .card{margin-top:0}
.isi{padding-top:20px}
@media (max-width:640px){ .card{padding:16px} }

/* ---------- Naskah panjang ---------- */
.naskah{font-size:15px}
.naskah h2{letter-spacing:-.01em}

/* ---------- Cetak tidak ikut dihias ---------- */
@media print{
  .top{background:none !important;box-shadow:none !important}
  .btn{box-shadow:none !important}
  .card{padding:0}
}

/* ---------- Pengukur mengikuti tema ---------- */
/* Jarum dan angka pengukur dulu diberi warna langsung di markup. Di atas
   kartu gelap, #2b3442 nyaris lenyap - angka rata-rata risiko, yaitu satu
   hal yang paling dicari orang di halaman Beranda, menjadi hampir tak
   terbaca. Atributnya dibiarkan sebagai cadangan bila berkas gaya gagal
   dimuat; aturan di sini yang menang selama gaya ada. */
.gauge svg .nilai,.gauge svg .poros{fill:var(--ink-2)}
.gauge svg .jarum{stroke:var(--ink-2)}
.gauge svg .kosong,.gauge svg .sumbu{fill:var(--muted)}

/* =======================================================================
   PENINGKATAN VISUAL & KENYAMANAN PENGGUNA (UX)
   ======================================================================= */

/* Header atas yang lebih modern */
.top{justify-content:space-between;min-height:56px;padding:0 24px}
.top .brand{display:inline-flex;align-items:center;gap:8px;font-size:17px;letter-spacing:-.01em}
.top .brand .brand-ikon{font-size:19px;line-height:1}
.top .brand-teks{font-weight:700}

/* Tombol pemicu pencarian Ctrl+K di kepala halaman */
.cari-pemicu{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:20px;
  color:#fff;font:inherit;font-size:12.5px;cursor:pointer;transition:all .15s ease}
.cari-pemicu:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4)}
.cari-pemicu .cari-pemicu-ikon{opacity:.85;font-size:12px}
.cari-pemicu .cari-pemicu-teks{opacity:.95;font-size:12px}
.cari-pemicu kbd{background:rgba(0,0,0,.25);border:0;color:#fff;font-size:10px;padding:2px 5px;border-radius:4px}
@media (max-width:800px){.cari-pemicu .cari-pemicu-teks{display:none}}
@media (max-width:560px){.cari-pemicu{display:none}}

/* Lencana pengguna dan tombol keluar */
.me-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:18px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.me-nama{font-weight:600;color:#fff;font-size:12.5px}
.me-peran{font-size:10.5px;padding:1px 6px;border-radius:10px;background:rgba(255,255,255,.2);color:#fff;font-weight:700;letter-spacing:.04em}
.me-keluar{color:#ffd9d4;text-decoration:none;font-weight:600;font-size:12.5px;padding:4px 8px;border-radius:6px;transition:background .15s}
.me-keluar:hover{background:rgba(255,255,255,.15);text-decoration:none;color:#fff}

/* Panduan awal saat register risiko masih kosong */
.card-panduan-awal{border-left:4px solid var(--accent);background:var(--card);box-shadow:var(--bayang-2)}
.panduan-awal-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.panduan-awal-ikon{font-size:26px;line-height:1}
.panduan-langkah-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:12px}
.langkah-item{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--sur-2)}
.langkah-no{flex:0 0 24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.langkah-isi{flex:1 1 auto}
.langkah-isi b{display:block;font-size:13.5px;margin-bottom:4px;color:var(--ink-2)}
.langkah-isi p{margin:0 0 10px;line-height:1.45}

/* Tombol kembali ke atas mengambang */
.kembali-atas{position:fixed;bottom:24px;right:24px;z-index:50;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--accent);
  box-shadow:var(--bayang-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.kembali-atas.tampil{opacity:1;pointer-events:auto}
.kembali-atas:hover{transform:translateY(-3px);background:var(--accent);color:var(--accent-ink)}

/* Keadaan gelap untuk komponen baru */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="terang"]) .cari-pemicu{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  :root:not([data-tema="terang"]) .cari-pemicu:hover{background:rgba(255,255,255,.15)}
  :root:not([data-tema="terang"]) .langkah-item{background:var(--sur-2);border-color:var(--line)}
  :root:not([data-tema="terang"]) .kembali-atas{background:var(--card);border-color:var(--line);color:var(--tautan)}
  :root:not([data-tema="terang"]) .kembali-atas:hover{background:var(--accent);color:var(--accent-ink)}
}
:root[data-tema="gelap"] .cari-pemicu{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
:root[data-tema="gelap"] .cari-pemicu:hover{background:rgba(255,255,255,.15)}
:root[data-tema="gelap"] .langkah-item{background:var(--sur-2);border-color:var(--line)}
:root[data-tema="gelap"] .kembali-atas{background:var(--card);border-color:var(--line);color:var(--tautan)}
:root[data-tema="gelap"] .kembali-atas:hover{background:var(--accent);color:var(--accent-ink)}