/* SIGAP — mobile-first. Kontras tinggi, tombol besar, huruf 16px.
   Sasaran: Android kelas bawah, jaringan 3G, layar 5 inci. */
:root{
  /* Biru diturunkan dari #1d4ed8 ke #1e40af: warna lama terlalu "elektrik" untuk
     sistem internal pemerintahan, dan tidak senada dengan lambang aplikasi. */
  --biru:#1e40af; --biru-t:#1e3a8a; --biru-m:#eef2ff; --biru-g:#172d7a;
  --hijau:#15803d; --hijau-m:#f0fdf4;
  --merah:#b91c1c; --merah-m:#fef2f2;
  --kuning:#a16207; --kuning-m:#fefce8;
  --abu:#475569; --abu-t:#0f172a; --abu-m:#f1f5f9; --garis:#d3dae4;
  --putih:#fff; --latar:#f6f7f9;
  --r:10px;
  /* Bayangan dibuat lebih tipis dan berlapis — kartu terangkat tanpa terlihat "mengambang" */
  --bayang:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--latar);color:var(--abu-t);line-height:1.5;font-size:1rem;
  padding-bottom:76px}
a{color:var(--biru);text-decoration:none}
h1,h2,h3{margin:0 0 .5rem;line-height:1.22;letter-spacing:-.012em;font-weight:700}
h1{font-size:1.3rem}h2{font-size:1.1rem}h3{font-size:.98rem}
p{margin:0 0 .75rem}
img{max-width:100%;height:auto}

/* ---- kepala ---- */
.kepala{position:sticky;top:0;z-index:40;background:var(--biru-t);color:#fff;
  padding:.72rem .9rem;display:flex;align-items:center;gap:.6rem;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 1px 3px rgba(15,23,42,.18)}
.kepala a{color:#fff}
.kepala .merek{font-weight:650;font-size:1.02rem;letter-spacing:-.008em}
.kepala .sisa{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.lonceng{position:relative;display:inline-flex;font-size:1.25rem}
.lonceng .titik{position:absolute;top:-2px;right:-6px;background:#f59e0b;color:#111;
  font-size:.65rem;font-weight:700;border-radius:9px;padding:0 5px;min-width:17px;text-align:center}

/* ---- wadah ---- */
.wadah{max-width:900px;margin:0 auto;padding:.85rem}
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);
  padding:.9rem;margin-bottom:.75rem;box-shadow:var(--bayang)}
.kartu.rapat{padding:.65rem}
.kartu-judul{font-weight:650;font-size:.9rem;margin-bottom:.65rem;display:flex;align-items:center;gap:.42rem;
  letter-spacing:-.005em;color:var(--abu-t)}
.kartu-judul .kanan{margin-left:auto;font-weight:400;font-size:.8rem;color:var(--abu)}

/* ---- tombol: minimal 48x48 ---- */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:48px;padding:.7rem 1.1rem;border-radius:8px;border:1px solid transparent;
  font-size:.98rem;font-weight:600;cursor:pointer;background:var(--biru);color:#fff;
  text-align:center;font-family:inherit;letter-spacing:-.004em;
  transition:filter .12s ease}
.tbl:hover{filter:brightness(1.06)}
.tbl:active{transform:translateY(1px)}
.tbl:disabled{opacity:.45;cursor:not-allowed}
.tbl.lebar{width:100%}
.tbl.besar{min-height:64px;font-size:1.15rem}
.tbl.putih{background:var(--putih);color:var(--abu-t);border-color:var(--garis)}
.tbl.hijau{background:var(--hijau)}
.tbl.merah{background:var(--merah)}
.tbl.kuning{background:var(--kuning)}
.tbl.kecil{min-height:38px;padding:.35rem .7rem;font-size:.85rem}

/* ---- borang ---- */
label{display:block;font-weight:600;font-size:.85rem;margin:.6rem 0 .25rem;color:var(--abu)}
input,select,textarea{width:100%;min-height:48px;padding:.6rem .7rem;font-size:1rem;
  border:1px solid var(--garis);border-radius:8px;background:#fff;font-family:inherit;color:var(--abu-t)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--biru);outline-offset:1px;border-color:var(--biru)}
textarea{min-height:96px;resize:vertical}
input[type=checkbox],input[type=radio]{width:24px;height:24px;min-height:24px;vertical-align:middle}
.baris{display:flex;gap:.6rem;flex-wrap:wrap}
.baris>*{flex:1 1 160px;min-width:0}
/* Tombol memakai lebar secukupnya, bukan meregang mengisi baris.
   Pakai .tbl.lebar bila memang ingin selebar penuh. */
.baris > .tbl:not(.lebar),.baris > form:not(.lebar){flex:0 1 auto}
.baris > form > .tbl:not(.lebar){width:auto}
.bantu{font-size:.78rem;color:var(--abu);margin-top:.2rem}

/* ---- lencana ---- */
.lcn{display:inline-block;padding:.16rem .5rem;border-radius:6px;font-size:.7rem;
  font-weight:650;letter-spacing:.01em;white-space:nowrap}
.lcn.biru{background:var(--biru-m);color:var(--biru-t)}
.lcn.hijau{background:var(--hijau-m);color:var(--hijau)}
.lcn.merah{background:var(--merah-m);color:var(--merah)}
.lcn.kuning{background:var(--kuning-m);color:var(--kuning)}
.lcn.abu{background:var(--abu-m);color:var(--abu)}

/* ---- daftar ---- */
.daftar{list-style:none;margin:0;padding:0}
.daftar li{padding:.65rem 0;border-bottom:1px solid var(--garis);display:flex;gap:.6rem;align-items:flex-start}
.daftar li:last-child{border-bottom:0}
.daftar .isi{flex:1;min-width:0}
.daftar .judul{font-weight:600}
.daftar .ket{font-size:.8rem;color:var(--abu)}

/* ---- tabel: selalu bisa digulir ---- */
.gulir{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.25rem}
table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:520px}
th,td{padding:.5rem .55rem;text-align:left;border-bottom:1px solid var(--garis);vertical-align:top}
th{background:var(--abu-m);font-weight:650;font-size:.72rem;text-transform:uppercase;letter-spacing:.045em;
  color:var(--abu);position:sticky;top:0}
tr:last-child td{border-bottom:0}
td.angka,th.angka{text-align:right;font-variant-numeric:tabular-nums}

/* ---- angka besar ---- */
.angka-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.5rem}
.angka-kotak{background:var(--abu-m);border-radius:var(--r);padding:.65rem .5rem;text-align:center}
.angka-kotak .n{font-size:1.55rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.angka-kotak .l{font-size:.7rem;color:var(--abu);font-weight:550;margin-top:.18rem;letter-spacing:.005em}
.angka-kotak.hijau{background:var(--hijau-m)}.angka-kotak.hijau .n{color:var(--hijau)}
.angka-kotak.merah{background:var(--merah-m)}.angka-kotak.merah .n{color:var(--merah)}
.angka-kotak.kuning{background:var(--kuning-m)}.angka-kotak.kuning .n{color:var(--kuning)}
.angka-kotak.biru{background:var(--biru-m)}.angka-kotak.biru .n{color:var(--biru-t)}

/* ---- peringatan ---- */
.pesan{padding:.7rem .85rem;border-radius:var(--r);margin-bottom:.75rem;font-size:.9rem;border:1px solid}
.pesan.merah{background:var(--merah-m);border-color:#fecaca;color:var(--merah)}
.pesan.hijau{background:var(--hijau-m);border-color:#bbf7d0;color:var(--hijau)}
.pesan.kuning{background:var(--kuning-m);border-color:#fde68a;color:var(--kuning)}
.pesan.biru{background:var(--biru-m);border-color:#bfdbfe;color:var(--biru-t)}

/* ---- bilah bawah ---- */
.bilah{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--garis);
  display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom)}
.bilah a{flex:1;padding:.5rem .2rem;text-align:center;color:var(--abu);font-size:.68rem;font-weight:600;
  min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}
.bilah a.aktif{color:var(--biru)}
.bilah a.aktif .ikon{position:relative}
.bilah .ikon{font-size:1.35rem;line-height:1}

/* ---- menu penuh ---- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem}
.menu-grid a{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:.85rem .5rem;
  text-align:center;color:var(--abu-t);font-weight:600;font-size:.82rem;box-shadow:var(--bayang);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:88px;justify-content:center}
.menu-grid .ikon{font-size:1.6rem}

/* ---- ceklis ---- */
.ceklis-butir{display:flex;gap:.7rem;padding:.75rem .2rem;border-bottom:1px solid var(--garis);align-items:flex-start}
.ceklis-butir .kotak{width:30px;height:30px;min-width:30px;border:2px solid var(--garis);border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;background:#fff;margin-top:2px}
.ceklis-butir.selesai .kotak{background:var(--hijau);border-color:var(--hijau);color:#fff}
.ceklis-butir.tidak .kotak{background:var(--merah);border-color:var(--merah);color:#fff}
.ceklis-butir.na{opacity:.55}
.ceklis-butir .teks{flex:1}

/* ---- lain ---- */
.pisah{height:1px;background:var(--garis);margin:.85rem 0}
.kecil{font-size:.8rem;color:var(--abu)}
.tebal{font-weight:700}
.kanan{text-align:right}.tengah{text-align:center}
.bar{height:8px;background:var(--abu-m);border-radius:4px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--hijau)}
.bar.merah span{background:var(--merah)}.bar.kuning span{background:var(--kuning)}
.sembunyi{display:none}
.tab{display:flex;gap:.35rem;overflow-x:auto;margin-bottom:.75rem;padding-bottom:.2rem}
.tab a{padding:.5rem .85rem;border-radius:999px;background:#fff;border:1px solid var(--garis);
  font-size:.85rem;font-weight:600;color:var(--abu);white-space:nowrap;min-height:40px;display:flex;align-items:center}
.tab a.aktif{background:var(--biru);color:#fff;border-color:var(--biru)}
.kosong{text-align:center;padding:1.75rem .75rem;color:var(--abu);font-size:.9rem}
.kosong .ikon{font-size:2.25rem;display:block;margin-bottom:.4rem;opacity:.45}
@media(min-width:700px){ .wadah{padding:1.25rem} h1{font-size:1.6rem} }
@media print{ .kepala,.bilah,.tbl,.tab{display:none!important} body{padding:0;background:#fff} }

/* ---- pagar kontras tombol ----
   `.kecil` adalah utilitas ukuran teks yang juga dipakai sebagai pengubah ukuran
   tombol (`.tbl.kecil`). Kekhususannya sama dengan `.tbl` dan letaknya lebih
   belakang, sehingga `color:var(--abu)` miliknya menimpa warna teks tombol —
   "Baca sekarang" jadi abu di atas kuning tua, rasio 1,54 (minimum 4,5).
   Blok ini ditaruh paling akhir supaya warna teks tombol selalu menang. */
.tbl{color:#fff}
.tbl.hijau,.tbl.merah,.tbl.kuning{color:#fff}
.tbl.putih{color:var(--abu-t)}
.tbl:disabled{color:#fff}
.tbl.putih:disabled{color:var(--abu-t)}

/* ---- ikon garis ----
   Emoji diganti SVG sebaris. `currentColor` membuatnya mewarisi warna teks,
   sehingga satu ikon dipakai ulang di lencana merah, tombol putih, dan bilah biru
   tanpa perlu berkas terpisah. */
.ikon-svg{flex:0 0 auto;vertical-align:-.18em;display:inline-block}
.kartu-judul .ikon-svg{margin-right:.1rem;opacity:.85}
.tbl .ikon-svg{margin-right:-.1rem}
.bilah .ikon{display:flex;align-items:center;justify-content:center;height:22px}
.menu-grid .ikon{display:flex;align-items:center;justify-content:center;color:var(--biru);height:26px}
.menu-grid .ikon .ikon-svg{width:24px;height:24px}
.daftar li > .ikon-svg{margin-top:.15rem;color:var(--abu)}

/* lingkaran ikon untuk daftar "butuh perhatian" */
.ikon-lingkar{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--abu-m);color:var(--abu);margin-top:1px}
.ikon-lingkar.merah{background:var(--merah-m);color:var(--merah)}
.ikon-lingkar.kuning{background:var(--kuning-m);color:var(--kuning)}
.ikon-lingkar.hijau{background:var(--hijau-m);color:var(--hijau)}
.ikon-lingkar.biru{background:var(--biru-m);color:var(--biru-t)}

/* Panel identitas di beranda pegawai. Dulu gradien biru penuh — terbaca sebagai
   aplikasi konsumen. Sekarang panel putih dengan aksen garis kiri: tenang,
   dan namanya tetap jadi hal pertama yang terbaca. */
.panel-utama{border-left:3px solid var(--biru);padding-left:.85rem}
.panel-utama h2{color:var(--abu-t)}

/* Latar halaman masuk: gradasi tenang, bukan biru datar */
body.masuk{background:linear-gradient(170deg,var(--biru-t) 0%,var(--biru-g) 100%)}

/* Navigasi mendatar di kepala — disembunyikan dulu, dinyalakan di layar besar */
.kepala .nav-laptop{display:none;gap:.15rem;margin-left:1.2rem}

/* =====================================================================
   PERBAIKAN HASIL AUDIT UI — 30 Agustus 2026
   Diukur dengan Chrome sungguhan pada 1440px dan 390px.
   ===================================================================== */

/* ---- 1. Layar laptop: dulu hanya 63% lebar terpakai ----
   Mobile-first bukan berarti kolom sempit di layar besar. Wadah melebar,
   dan tumpukan kartu di beranda menjadi dua kolom. */
@media (min-width: 1000px) {
  .wadah{max-width:1180px;padding:1.4rem 1.5rem 2rem}
  .papan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;align-items:start}
  .papan > .kartu{margin-bottom:0}
  .papan > .lebar-penuh{grid-column:1/-1}
  /* Baris teks borang jangan terlalu panjang untuk dibaca */
  .borang-sempit{max-width:780px}
  /* Tab tidak perlu digulir kalau layarnya cukup */
  .tab{flex-wrap:wrap;overflow-x:visible}
  h1{font-size:1.5rem}
  body{padding-bottom:1rem}
  .bilah{display:none}            /* bilah bawah adalah pola ponsel */
  .kepala .nav-laptop{display:flex}
}
@media (min-width: 1400px) { .wadah{max-width:1320px} }

/* Navigasi mendatar di kepala (aturan dasarnya ada di atas media query,
   kalau ditulis di bawah ia menang dan menyembunyikan navigasinya selamanya) */
.kepala .nav-laptop a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .7rem;
  border-radius:7px;font-size:.88rem;font-weight:550;color:rgba(255,255,255,.82);min-height:38px}
.kepala .nav-laptop a:hover{background:rgba(255,255,255,.12);color:#fff}
.kepala .nav-laptop a.aktif{background:rgba(255,255,255,.16);color:#fff;font-weight:650}

/* ---- 2. Sasaran ketuk ----
   Audit menemukan 423 sasaran di bawah 32px: ikon kepala 20x20, panah kembali 9x22,
   dan 112 kotak centang 24x24 yang hanya bisa diketuk tepat di kotaknya. */
.kepala a.tombol-ikon,.kepala .lonceng{width:40px;height:40px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.kepala a.tombol-ikon:hover,.kepala .lonceng:hover{background:rgba(255,255,255,.14)}
.kepala .lonceng .titik{position:absolute;top:3px;right:3px;background:#f59e0b;color:#111;
  font-size:.62rem;font-weight:700;border-radius:9px;padding:0 4px;min-width:16px;
  text-align:center;line-height:15px}

/* Baris pilihan: seluruh baris bisa diketuk, bukan hanya kotak 24px */
.pilih{display:flex;gap:.6rem;align-items:center;min-height:44px;padding:.3rem .35rem;
  margin:0;font-weight:400;border-radius:7px;cursor:pointer}
.pilih:hover{background:var(--abu-m)}
.pilih input[type=checkbox],.pilih input[type=radio]{flex:0 0 auto}
.pilih > span{flex:1;min-width:0}

/* ---- 3. Bilah aksi borang ----
   34 borang tidak punya jalan keluar sama sekali. Sekarang setiap borang besar
   memakai pola yang sama: aksi utama di kiri, Batal di sebelahnya, menempel di
   bawah layar pada ponsel supaya tidak perlu menggulir jauh untuk menyimpan. */
.aksi{display:flex;gap:.6rem;align-items:center;margin-top:1.1rem;
  padding-top:.9rem;border-top:1px solid var(--garis)}
.aksi .tbl{min-height:48px}
.aksi .utama{flex:1 1 auto}
.aksi .batal{flex:0 0 auto;min-width:110px}
.aksi .kanan{margin-left:auto}
@media (max-width: 999px){
  .aksi.tempel{position:sticky;bottom:60px;background:#fff;z-index:20;
    margin:1.1rem -.9rem -.9rem;padding:.75rem .9rem;
    border-top:1px solid var(--garis);box-shadow:0 -2px 8px rgba(15,23,42,.06)}
}

/* ---- 4. Tinggi tombol bertetangga diseragamkan ---- */
.baris > .tbl,.baris > form > .tbl{min-height:48px}
.baris.rapat > .tbl,.baris.rapat > form > .tbl{min-height:40px;font-size:.88rem;padding:.4rem .8rem}

/* ---- 5. Panel yang dulu tersembunyi di <details> ----
   12 borang penting hanya bisa ditemukan dengan menebak. Sekarang ringkasannya
   terlihat sebagai tombol yang jelas, dan terbuka sendiri di layar laptop. */
details.panel{border:1px solid var(--garis);border-radius:var(--r);background:#fff;
  box-shadow:var(--bayang);margin-bottom:.75rem;overflow:hidden}
details.panel > summary{list-style:none;cursor:pointer;padding:.85rem .9rem;
  font-weight:650;font-size:.9rem;display:flex;align-items:center;gap:.45rem;min-height:48px}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary::after{content:"";margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--abu);border-bottom:2px solid var(--abu);
  transform:rotate(45deg);transition:transform .15s ease;flex:0 0 auto}
details.panel[open] > summary::after{transform:rotate(-135deg)}
details.panel > summary:hover{background:var(--abu-m)}
details.panel .isi-panel{padding:0 .9rem .9rem}
details.panel[open] > summary{border-bottom:1px solid var(--garis);margin-bottom:.85rem}

/* Kepala halaman: judul + tindakan sebaris, hanya berguna di layar lebar */
.kepala-halaman{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.kepala-halaman h1{margin:0 0 .15rem}

/* =====================================================================
   KARTU YANG BISA DIGESER — dipakai langkah SOP dan keadaan khusus.
   Nomor langkah TIDAK pernah diketik pengguna: nomornya hanya tampilan,
   diturunkan dari urutan kartu, dan ditulis ulang setelah digeser.
   ===================================================================== */
.tumpuk{display:flex;flex-direction:column;gap:.55rem}
.kartu-geser{display:flex;gap:.6rem;align-items:flex-start;background:#fff;
  border:1px solid var(--garis);border-radius:var(--r);padding:.7rem .75rem;
  box-shadow:var(--bayang);position:relative;touch-action:manipulation}
.kartu-geser.sedang-digeser{opacity:.45;border-style:dashed}
.kartu-geser.sasaran{border-color:var(--biru);box-shadow:0 0 0 2px var(--biru-m)}
.kartu-geser .pegangan{flex:0 0 auto;width:34px;height:34px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;cursor:grab;color:var(--abu);background:var(--abu-m);
  touch-action:none;-webkit-user-select:none;user-select:none}
.kartu-geser .pegangan:active{cursor:grabbing}
.kartu-geser .pegangan svg{pointer-events:none}
.kartu-geser .nomor{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--biru-m);
  color:var(--biru-t);font-size:.78rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:4px}
.kartu-geser .badan{flex:1;min-width:0}
.kartu-geser .badan .judul-langkah{font-size:.94rem;line-height:1.45}
.kartu-geser .alat{display:flex;gap:.3rem;flex:0 0 auto}
.kartu-geser .alat button{width:36px;height:36px;padding:0;min-height:36px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--abu);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.kartu-geser .alat button:hover{background:var(--abu-m);color:var(--abu-t)}
.kartu-geser .alat button.hapus:hover{background:var(--merah-m);color:var(--merah)}
.kartu-geser .sunting{display:none;width:100%}
.kartu-geser.mode-sunting .tampilan{display:none}
.kartu-geser.mode-sunting .sunting{display:block}
.kartu-geser.mode-sunting{border-color:var(--biru);box-shadow:0 0 0 2px var(--biru-m)}
.kartu-geser .sunting textarea{min-height:76px}
.kartu-geser .sunting .baris{margin-top:.5rem}
.tambah-kartu{border:1.5px dashed var(--garis);background:transparent;border-radius:var(--r);
  padding:.85rem;width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;
  gap:.45rem;color:var(--biru);font-weight:600;font-size:.92rem;cursor:pointer;font-family:inherit}
.tambah-kartu:hover{background:var(--biru-m);border-color:var(--biru)}
.petunjuk-geser{font-size:.78rem;color:var(--abu);display:flex;align-items:center;gap:.35rem;margin-bottom:.5rem}
/* Pada layar sempit, empat tombol tindakan di samping teks menyisakan lebar
   kolom yang membuat kalimat pecah satu kata per baris. Tombolnya turun ke
   baris sendiri di bawah teks. */
@media (max-width: 720px){
  .kartu-geser{flex-wrap:wrap;padding:.7rem}
  .kartu-geser .nomor{display:none}
  .kartu-geser .badan{flex:1 1 100%;order:1;min-width:0}
  /* Pegangan ikut turun ke baris tombol supaya tidak menyita satu baris sendiri */
  .kartu-geser .pegangan{order:2;margin-right:auto}
  .kartu-geser .alat{order:3;justify-content:flex-end}
  .kartu-geser > .pegangan,.kartu-geser > .alat{margin-top:.55rem;padding-top:.5rem;
    border-top:1px solid var(--garis)}
  .kartu-geser > .pegangan{border-top-color:transparent;padding-top:0;margin-top:.75rem}
  .kartu-geser .alat button{width:42px;height:40px}
  .kartu-geser.mode-sunting .alat{display:none}
}

/* Kabar singkat setelah menyimpan tanpa memuat ulang halaman */
.kabar{position:fixed;left:50%;bottom:80px;transform:translate(-50%,14px);z-index:200;
  padding:.6rem 1rem;border-radius:8px;font-size:.88rem;font-weight:600;color:#fff;
  background:var(--abu-t);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  box-shadow:0 6px 20px rgba(15,23,42,.25);max-width:88vw;text-align:center}
.kabar.tampil{opacity:1;transform:translate(-50%,0)}
.kabar.baik{background:var(--hijau)}
.kabar.buruk{background:var(--merah)}
@media (min-width:1000px){ .kabar{bottom:24px} }

/* Di layar laptop tidak ada alasan menyembunyikan borang di balik panel tertutup.
   Audit menemukan 12 borang penting yang hanya bisa ditemukan dengan menebak. */
@media (min-width: 1000px){
  details.panel > summary{font-size:.95rem}
}

/* ---- Bilah tindakan halaman ----
   Audit menemukan tombol bertetangga dengan tinggi 71px dan 48px berdampingan
   karena teksnya membungkus. Bilah ini menyeragamkan tinggi dan membiarkan
   tombol membungkus ke baris berikutnya, bukan meninggi sendiri-sendiri. */
.alat-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem;align-items:stretch}
.alat-bar > .tbl,.alat-bar > form > .tbl{min-height:44px;height:44px;padding:0 .95rem;
  font-size:.9rem;white-space:nowrap;flex:0 0 auto}
.alat-bar > form{display:flex}
@media (max-width:420px){
  .alat-bar > .tbl,.alat-bar > form > .tbl{flex:1 1 calc(50% - .25rem);padding:0 .5rem;font-size:.85rem}
  .alat-bar > .tbl.pokok{flex:1 1 100%}
}

/* Baris pemilihan peran: kotak centang dan penanda "utama" masing-masing
   punya sasaran ketuk sendiri yang cukup lebar. */
.baris-peran{display:flex;gap:.4rem;align-items:center}
.baris-peran .utama-pilih{flex:0 0 auto;min-width:78px;justify-content:center;
  border:1px solid var(--garis);border-radius:7px}
.baris-peran .utama-pilih:has(input:checked){background:var(--biru-m);border-color:var(--biru);color:var(--biru-t)}

/* Pranala tindakan di kepala kartu dan di dalam daftar adalah CTA, bukan teks
   biasa — audit menemukan sasaran ketuknya hanya setinggi baris (15px). */
.kartu-judul .kanan a,.kartu-judul > a{display:inline-flex;align-items:center;min-height:32px;
  padding:.2rem .5rem;margin:-.2rem -.5rem;border-radius:6px;font-weight:600;font-size:.85rem}
.kartu-judul .kanan a:hover,.kartu-judul > a:hover{background:var(--biru-m)}
.daftar .isi > a{display:block;min-height:38px;padding:.15rem 0}
.tab a{min-height:40px}

/* ---- Tabel responsif ----
   Satu sumber markup: di laptop tampil sebagai tabel yang mudah dipindai,
   di ponsel tiap baris melipat jadi kartu dengan label dari data-label.
   Menghindari dua salinan markup yang gampang jadi tidak sinkron. */
.tabel-responsif{width:100%;border-collapse:collapse;font-size:.88rem;min-width:0}
.tabel-responsif th{background:var(--abu-m);font-weight:650;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.045em;color:var(--abu);text-align:left;padding:.55rem .6rem;position:sticky;top:0;z-index:1}
.tabel-responsif td{padding:.6rem;border-bottom:1px solid var(--garis);vertical-align:middle}
.tabel-responsif tbody tr:hover{background:var(--abu-m)}
.tabel-responsif .lencana-baris{display:flex;gap:.3rem;flex-wrap:wrap}

@media (max-width: 760px){
  .tabel-responsif thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabel-responsif,.tabel-responsif tbody,.tabel-responsif tr,.tabel-responsif td{display:block;width:100%}
  .tabel-responsif tr{border:1px solid var(--garis);border-radius:var(--r);background:#fff;
    margin-bottom:.55rem;padding:.7rem .8rem;box-shadow:var(--bayang)}
  .tabel-responsif tr:hover{background:#fff}
  .tabel-responsif td{border:0;padding:.15rem 0;display:flex;gap:.6rem;align-items:baseline}
  .tabel-responsif td::before{content:attr(data-label);flex:0 0 96px;font-size:.72rem;
    text-transform:uppercase;letter-spacing:.04em;color:var(--abu);font-weight:650}
  .tabel-responsif td[data-label=""]::before,.tabel-responsif td.utama::before{display:none}
  .tabel-responsif td.utama{display:block;font-size:1rem;font-weight:650;margin-bottom:.15rem}
}