/* Panel PPID Kepulauan Selayar — gaya panel pengelola.
   Tinta navy untuk navigasi, kertas terang untuk kerja, oranye hanya untuk aksi & peringatan. */

@font-face { font-family: "Plex"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --tinta: #0f2133; --tinta-2: #17304a; --tinta-teks: #c9d6e3; --tinta-redup: #7f95ab;
  --kertas: #f3f5f7; --permukaan: #ffffff; --permukaan-2: #f7f9fb;
  --teks: #18242f; --redup: #586878; --garis: #dbe1e7; --garis-kuat: #c3ccd5;
  --aksen: #c25b00; --aksen-tekan: #a24b00; --aksen-terang: #f08a24; --aksen-latar: #fff3e6;
  --hijau: #1e7a4c; --hijau-latar: #e5f4ec; --merah: #b3261e; --merah-latar: #fbe9e7;
  --biru: #24609e; --biru-latar: #e6eff8; --ungu: #5e4da0; --ungu-latar: #eeebf8; --abu: #586878; --abu-latar: #eceff2;
  --fokus: #2b7fd4;
  --huruf: "Plex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "PlexMono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-kecil: 6px; --r: 10px;
  --bayang: 0 1px 2px rgb(15 33 51 / .06), 0 1px 1px rgb(15 33 51 / .04);
  color-scheme: light;
}
:root[data-tema="gelap"] {
  --kertas: #0b141d; --permukaan: #121e2a; --permukaan-2: #172533;
  --teks: #e4ebf1; --redup: #93a4b5; --garis: #223241; --garis-kuat: #30475a;
  --aksen: #f08a24; --aksen-tekan: #ffa04a; --aksen-latar: #3a2510;
  --hijau: #5cc795; --hijau-latar: #12301f; --merah: #ff8a80; --merah-latar: #3b1714;
  --biru: #7db3eb; --biru-latar: #13283d; --ungu: #b4a7f0; --ungu-latar: #251f40; --abu: #93a4b5; --abu-latar: #1c2a37;
  --tinta: #08111a; --tinta-2: #12202e;
  --bayang: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.55 var(--huruf); color: var(--teks); background: var(--kertas); }
a { color: var(--biru); text-underline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
p { margin: 0 0 .75em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.redup { color: var(--redup); }
.angka { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lewati { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--permukaan); padding: 8px 12px; }
.lewati:focus { left: 8px; }
.ph { font-size: 1.15em; vertical-align: -.15em; }

/* ------------------------------------------------------------ kerangka */
.panel { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.samping { background: var(--tinta); color: var(--tinta-teks); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px; }
.merek { display: flex; gap: 10px; align-items: center; color: #fff; text-decoration: none; padding: 4px 8px 18px; border-bottom: 1px solid rgb(255 255 255 / .08); margin-bottom: 10px; }
.merek strong { display: block; font-size: 15px; }
.merek small { color: var(--tinta-redup); font-size: 12.5px; }
.nav-grup { color: var(--tinta-redup); font-size: 12px; font-weight: 500; margin: 18px 10px 6px; }
.samping ul { list-style: none; margin: 0; padding: 0; }
.samping nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-kecil); color: var(--tinta-teks); text-decoration: none; font-size: 14.5px; }
.samping nav a:hover { background: var(--tinta-2); color: #fff; }
.samping nav a[aria-current] { background: var(--tinta-2); color: #fff; box-shadow: inset 3px 0 0 var(--aksen-terang); }
.samping nav a .ph { font-size: 18px; opacity: .85; }
.hitung { margin-left: auto; background: var(--aksen-terang); color: #1c1006; font-size: 12px; min-width: 22px; text-align: center; border-radius: 11px; padding: 0 6px; font-weight: 700; }
.ke-situs { margin-top: auto; display: flex; gap: 8px; align-items: center; color: var(--tinta-redup); text-decoration: none; font-size: 13.5px; padding: 14px 10px 0; border-top: 1px solid rgb(255 255 255 / .08); }
.ke-situs:hover { color: #fff; }

.utama { display: flex; flex-direction: column; min-width: 0; }
.atas { display: flex; align-items: center; gap: 14px; padding: 18px 32px 6px; }
.atas h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.atas-kanan { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tombol-menu { display: none; }
main { padding: 12px 32px 40px; flex: 1; width: 100%; }
main:focus { outline: none; }
.kaki { padding: 16px 32px 24px; color: var(--redup); font-size: 13px; }

/* Pita siaga — satu-satunya elemen yang "berteriak" */
.pita-siaga { display: flex; align-items: center; gap: 10px; background: var(--aksen-terang); color: #1c1006; padding: 9px 32px; text-decoration: none; font-size: 14.5px; }
.pita-siaga:hover .pita-aksi { text-decoration: underline; }
.pita-aksi { margin-left: auto; font-weight: 600; }
.denyut { width: 10px; height: 10px; border-radius: 50%; background: #1c1006; position: relative; flex: none; }
.denyut::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #1c1006; animation: denyut 1.8s ease-out infinite; }
@keyframes denyut { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .denyut::after { animation: none; opacity: .4; } }

/* Akun */
.menu-akun { position: relative; }
.menu-akun summary { list-style: none; display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; }
.menu-akun summary::-webkit-details-marker { display: none; }
.menu-akun summary:hover { background: var(--permukaan); }
.avatar { border: 1px solid var(--garis-kuat); width: 34px; height: 34px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-weight: 600; }
.nama-akun { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; font-weight: 500; }
.nama-akun small { color: var(--redup); font-weight: 400; font-size: 12.5px; }
.menu-akun-isi, .menu-baris > div { position: absolute; right: 0; top: calc(100% + 6px); background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); box-shadow: 0 8px 28px rgb(15 33 51 / .14); min-width: 220px; padding: 6px; z-index: 20; }
.menu-akun-isi a, .menu-akun-isi button, .menu-baris > div a, .menu-baris > div button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; background: none; font: inherit; color: var(--teks); text-decoration: none; border-radius: var(--r-kecil); cursor: pointer; text-align: left; }
.menu-akun-isi a:hover, .menu-akun-isi button:hover, .menu-baris > div a:hover, .menu-baris > div button:hover { background: var(--permukaan-2); }
.menu-baris { position: relative; display: inline-block; }
.menu-baris summary { list-style: none; }
.menu-baris summary::-webkit-details-marker { display: none; }
.menu-baris form { margin: 0; }
.teks-bahaya, .teks-bahaya .ph { color: var(--merah) !important; }

/* ------------------------------------------------------------ tombol */
.tombol, .tombol-hantu, .tombol-ikon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 14.5px/1 var(--huruf); border-radius: var(--r-kecil); cursor: pointer; text-decoration: none; white-space: nowrap; }
.tombol { background: var(--aksen); color: #fff; border: 1px solid var(--aksen); padding: 10px 16px; }
:root[data-tema="gelap"] .tombol { color: #1c1006; }
.tombol:hover { background: var(--aksen-tekan); border-color: var(--aksen-tekan); }
.tombol-hantu { background: var(--permukaan); color: var(--teks); border: 1px solid var(--garis-kuat); padding: 9px 14px; }
.tombol-hantu:hover { border-color: var(--teks); }
.tombol-ikon { width: 36px; height: 36px; border: 1px solid transparent; background: none; color: var(--redup); padding: 0; }
.tombol-ikon:hover { background: var(--permukaan); border-color: var(--garis); color: var(--teks); }
.tombol-ikon > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tombol-ikon-bahaya:hover { color: var(--merah); border-color: var(--merah); }
.tombol-bahaya { background: var(--merah); border-color: var(--merah); color: #fff; }
.tombol-teks-bahaya { color: var(--merah); }
.tombol-penuh { width: 100%; }
.form-sebaris { display: inline; margin: 0; }
.tautan-kecil { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }

/* ------------------------------------------------------------ pesan */
.pesan-wadah:empty { display: none; }
.pesan { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-kecil); margin-bottom: 14px; border: 1px solid; font-size: 14.5px; }
.pesan .ph { font-size: 20px; flex: none; }
.pesan span { flex: 1; }
.pesan-ok { background: var(--hijau-latar); border-color: color-mix(in srgb, var(--hijau) 35%, transparent); color: var(--hijau); }
.pesan-galat { background: var(--merah-latar); border-color: color-mix(in srgb, var(--merah) 35%, transparent); color: var(--merah); }
.pesan-info { background: var(--biru-latar); border-color: color-mix(in srgb, var(--biru) 35%, transparent); color: var(--biru); }
.tutup { border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }

.lencana { display: inline-block; font-size: 12.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.lencana-hijau { background: var(--hijau-latar); color: var(--hijau); }
.lencana-merah { background: var(--merah-latar); color: var(--merah); }
.lencana-biru { background: var(--biru-latar); color: var(--biru); }
.lencana-ungu { background: var(--ungu-latar); color: var(--ungu); }
.lencana-oranye { background: var(--aksen-latar); color: var(--aksen); }
.lencana-abu { background: var(--abu-latar); color: var(--abu); }

/* ------------------------------------------------------------ lembar & tata letak */
.lembar { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--bayang); }
.lembar-judul { font-size: 16px; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.lembar-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lembar-kepala h2 { font-size: 16px; }
.dua-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dua-kolom > .lembar { margin-bottom: 20px; }
.remah { margin-bottom: 14px; }
.remah a { color: var(--redup); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.remah a:hover { color: var(--teks); }

.sambutan { margin-bottom: 18px; }
.sambutan p { margin: 0; }

/* Papan situasi: satu bidang dengan sekat, bukan kartu-kartu terpisah */
.papan { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); margin-bottom: 20px; overflow: hidden; box-shadow: var(--bayang); }
.papan-sel { padding: 18px 22px; text-decoration: none; color: var(--teks); border-left: 1px solid var(--garis); display: flex; flex-direction: column; gap: 4px; }
.papan-sel:first-child { border-left: 0; }
.papan-sel:hover { background: var(--permukaan-2); }
.papan-angka { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.papan-ket { color: var(--redup); font-size: 14px; }
.papan-siaga { background: var(--aksen-latar); box-shadow: inset 0 4px 0 var(--aksen-terang); }
.papan-siaga .papan-angka { color: var(--aksen); }
.papan-siaga:hover { background: var(--aksen-latar); }

.daftar-kejadian, .daftar-ringkas, .linimasa, .daftar-ip { list-style: none; margin: 0; padding: 0; }
.daftar-kejadian li + li, .daftar-ringkas li + li { border-top: 1px solid var(--garis); }
.daftar-kejadian a { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; text-decoration: none; color: var(--teks); }
.daftar-kejadian a:hover .kejadian-judul { text-decoration: underline; }
.kejadian-judul { font-weight: 600; }
.kejadian-dampak { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; margin-top: 2px; }
.dampak-merah { color: var(--merah); font-weight: 600; }
.daftar-ringkas a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--teks); text-decoration: none; justify-content: space-between; }
.daftar-ringkas a > span:first-of-type { flex: 1; }
.daftar-ringkas a:hover { color: var(--biru); }
.linimasa li { padding: 6px 0 6px 18px; position: relative; font-size: 14px; }
.linimasa li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--garis-kuat); }
.linimasa time { font-variant-numeric: tabular-nums; margin-right: 6px; }
.kosong-kecil { padding: 10px 0; }
.daftar-ip li { padding: 4px 0; display: flex; gap: 12px; }

.grafik { width: 100%; height: auto; display: block; }
.grafik .batang { fill: color-mix(in srgb, var(--biru) 55%, var(--permukaan)); }
.grafik .batang:hover { fill: var(--biru); }
.grafik .batang-kini { fill: var(--aksen-terang); }
.grafik text { fill: var(--redup); font: 11px var(--huruf); }

/* ------------------------------------------------------------ daftar & tabel */
.bilah { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bilah-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.saring { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cari { position: relative; display: flex; align-items: center; }
.cari .ph { position: absolute; left: 11px; color: var(--redup); }
.cari input { padding-left: 34px; width: 280px; }
.ringkasan-jumlah { color: var(--redup); font-size: 13.5px; margin: 8px 0 10px; }
.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 16px; overflow-x: auto; }
.tab a { padding: 9px 14px; text-decoration: none; color: var(--redup); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-size: 14.5px; }
.tab a span { font-variant-numeric: tabular-nums; font-size: 12.5px; background: var(--abu-latar); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.tab a[aria-current] { color: var(--teks); border-color: var(--aksen-terang); font-weight: 500; }

.tabel-gulir { overflow-x: auto; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); box-shadow: var(--bayang); margin-bottom: 16px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabel th { text-align: left; font-weight: 500; color: var(--redup); font-size: 13px; padding: 10px 14px; border-bottom: 1px solid var(--garis); background: var(--permukaan-2); white-space: nowrap; }
.tabel td { padding: 10px 14px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--permukaan-2); }
.tabel-padat td { padding: 7px 14px; font-size: 13.5px; }
.kol-mini { width: 72px; }
.kol-aksi { width: 1%; white-space: nowrap; text-align: right; }
.tautan-baris { color: inherit; text-decoration: none; display: block; }
.tautan-baris:hover .judul-baris, a.tautan-baris.mono:hover { text-decoration: underline; color: var(--biru); }
.judul-baris { font-weight: 500; display: block; }
.sub { display: block; color: var(--redup); font-size: 13px; }
.baris-baru td:first-child { box-shadow: inset 3px 0 0 var(--aksen-terang); }
.baris-redup { opacity: .6; }
.mini { width: 56px; height: 40px; object-fit: cover; border-radius: 4px; display: block; background: var(--abu-latar); }
.mini-lebar { width: 72px; }
.mini-kosong { display: grid; place-items: center; color: var(--redup); }
.chip-berkas { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; font-family: var(--mono); border: 1px solid var(--garis-kuat); padding: 3px 8px; border-radius: 4px; text-decoration: none; color: var(--teks); }
.kapasitas { display: inline-flex; gap: 10px; align-items: center; }
.kapasitas meter { width: 80px; }

.galeri { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.galeri li { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden; }
.galeri-gambar img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--abu-latar); }
.galeri-kaki { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; }
.dorong { flex: 1; }

.kosong { text-align: center; padding: 56px 20px; background: var(--permukaan); border: 1px dashed var(--garis-kuat); border-radius: var(--r); }
.kosong-ikon { font-size: 44px; color: var(--garis-kuat); display: block; margin: 0 auto 10px; }
.kosong h2 { margin-bottom: 6px; }

.paginasi { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.paginasi a, .paginasi span { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: var(--r-kecil); text-decoration: none; color: var(--teks); font-variant-numeric: tabular-nums; }
.paginasi a:hover { background: var(--permukaan); }
.paginasi [aria-current] { background: var(--tinta); color: #fff; }
.paginasi .elipsis { color: var(--redup); }

/* ------------------------------------------------------------ formulir */
input, select, textarea { font: inherit; color: var(--teks); background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); padding: 9px 11px; width: 100%; min-height: 40px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fokus); outline-offset: -1px; border-color: var(--fokus); }
input[readonly] { background: var(--permukaan-2); color: var(--redup); }
input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--aksen); }
.saring select { width: auto; }
textarea { resize: vertical; line-height: 1.5; }
.formulir { max-width: none; }
.formulir-sempit { max-width: 560px; }
.isian { margin-bottom: 18px; }
.isian > label, .isian > .label { display: block; font-weight: 500; font-size: 14.5px; margin-bottom: 6px; }
.isian-kecil { max-width: 260px; }
.wajib { color: var(--aksen); }
.bantuan { color: var(--redup); font-size: 13.5px; margin: 6px 0 0; }
.pesan-galat { color: var(--merah); font-size: 13.5px; margin: 6px 0 0; display: flex; gap: 6px; align-items: center; }
p.pesan-galat { background: none; border: 0; padding: 0; }
.ada-galat input, .ada-galat select, .ada-galat textarea, .ada-galat .editor { border-color: var(--merah); }
.kisi-angka { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 16px; }
.kisi-angka .isian-teksarea { grid-column: 1 / -1; }
.kisi-angka .isian-kecil { max-width: none; }
.formulir-kaki { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; background: color-mix(in srgb, var(--kertas) 92%, transparent); backdrop-filter: blur(6px); padding: 14px 0; border-top: 1px solid var(--garis); z-index: 5; }
.zona-bahaya { max-width: none; margin-top: 28px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--merah) 30%, transparent); border-radius: var(--r); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.zona-bahaya p { margin: 0; color: var(--redup); }
.sebaris { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sebaris .isian { flex: 1; min-width: 200px; margin-bottom: 14px; }
.sebaris > button { margin-bottom: 14px; }
.sebaris-tombol { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cek { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.jebakan { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sakelar { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.sakelar input { position: absolute; opacity: 0; }
.sakelar-jalur { width: 42px; height: 24px; border-radius: 12px; background: var(--garis-kuat); position: relative; transition: background .15s; flex: none; }
.sakelar-jalur::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.sakelar input:checked + .sakelar-jalur { background: var(--hijau); }
.sakelar input:checked + .sakelar-jalur::after { transform: translateX(18px); }
.sakelar input:focus-visible + .sakelar-jalur { outline: 3px solid var(--fokus); outline-offset: 2px; }

.unggah { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.unggah-kini { max-height: 140px; max-width: 260px; border-radius: var(--r-kecil); border: 1px solid var(--garis); }
.unggah-zona { display: inline-flex; gap: 10px; align-items: center; padding: 12px 16px; border: 1.5px dashed var(--garis-kuat); border-radius: var(--r); cursor: pointer; color: var(--redup); position: relative; }
.unggah-zona:hover, .unggah-zona:focus-within { border-color: var(--aksen); color: var(--teks); }
.unggah-zona input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.unggah-nama { font-size: 13.5px; color: var(--teks); }
.unggah-pratinjau { max-height: 140px; border-radius: var(--r-kecil); }
.berkas-kini { display: inline-flex; gap: 8px; align-items: center; }
.pratinjau-yt img { margin-top: 10px; width: 240px; border-radius: var(--r-kecil); display: block; }

.input-sandi { position: relative; }
.input-sandi input { padding-right: 46px; }
.input-sandi .tombol-ikon { position: absolute; right: 2px; top: 2px; }
.meter-sandi { height: 5px; background: var(--abu-latar); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.meter-sandi span { display: block; height: 100%; width: 0; background: var(--merah); transition: width .2s, background .2s; }
.input-kode { font-family: var(--mono); font-size: 24px; letter-spacing: .3em; text-align: center; }

/* editor */
.editor { border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); background: var(--permukaan); }
.editor-alat { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--garis); position: sticky; top: 0; background: var(--permukaan); z-index: 2; border-radius: var(--r-kecil) var(--r-kecil) 0 0; }
.editor-alat button { border: 0; background: none; min-width: 34px; height: 32px; border-radius: 4px; cursor: pointer; color: var(--teks); font: 500 13px var(--huruf); padding: 0 8px; }
.editor-alat button:hover, .editor-alat button[aria-pressed="true"] { background: var(--abu-latar); }
.editor-alat .pemisah { width: 1px; background: var(--garis); margin: 4px 4px; }
.editor-isi { min-height: 280px; max-height: 70vh; overflow-y: auto; padding: 14px 18px; line-height: 1.65; font-size: 15.5px; }
.editor-isi:focus { outline: none; }
.editor:focus-within { border-color: var(--fokus); box-shadow: 0 0 0 1px var(--fokus); }
.editor-isi img { max-width: 100%; height: auto; }
.editor-isi blockquote { border-left: 3px solid var(--garis-kuat); margin: 0 0 1em; padding-left: 14px; color: var(--redup); }
.editor-sumber { display: none; border: 0; border-radius: 0 0 var(--r-kecil) var(--r-kecil); font-family: var(--mono); font-size: 13px; min-height: 280px; }
.editor.mode-sumber .editor-isi { display: none; }
.editor.mode-sumber .editor-sumber { display: block; }
.editor.tanpa-js .editor-sumber { display: block; }
.editor.tanpa-js .editor-alat, .editor.tanpa-js .editor-isi { display: none; }

/* peta */
.peta { height: 300px; border-radius: var(--r-kecil); border: 1px solid var(--garis-kuat); z-index: 0; }
.peta-statis { height: 240px; margin-bottom: 8px; }
.koordinat { display: flex; gap: 10px; margin-top: 10px; align-items: flex-end; flex-wrap: wrap; }
.koordinat label { flex: 1; min-width: 140px; font-size: 13px; color: var(--redup); }
.koordinat input { font-family: var(--mono); margin-top: 4px; }

/* laporan */
.laporan { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.laporan-kepala { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.laporan-kepala h2 { font-size: 22px; margin: 2px 0 6px; }
.laporan-kepala p { margin: 0; }
.laporan-isi h3 { font-size: 14.5px; color: var(--redup); font-weight: 500; margin: 22px 0 8px; }
.kronologi { white-space: normal; font-size: 15.5px; max-width: 68ch; }
.foto-laporan { max-height: 420px; border-radius: var(--r-kecil); border: 1px solid var(--garis); }
.rincian { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 20px; margin: 0 0 8px; }
.rincian dt { color: var(--redup); font-size: 13px; }
.rincian dd { margin: 2px 0 0; }
.laporan-tindak .lembar { margin-bottom: 16px; }

/* akun & 2FA */
.langkah-2fa { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; }
.urutan { padding-left: 20px; margin: 0 0 16px; }
.urutan li { margin-bottom: 6px; }
.qr { width: 220px; height: 220px; padding: 12px; background: #fff; border-radius: var(--r); border: 1px solid var(--garis); margin-bottom: 12px; }
.qr img, .qr svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.salin { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.salin code { background: var(--permukaan-2); border: 1px solid var(--garis); padding: 8px 12px; border-radius: var(--r-kecil); font-size: 15px; letter-spacing: .04em; user-select: all; }
.lipat summary { cursor: pointer; color: var(--biru); font-size: 14px; margin-top: 8px; }
.lipat[open] summary { margin-bottom: 12px; }
.tumpuk .isian { margin-bottom: 12px; }
.sandi-sekali { border: 2px solid var(--aksen-terang); background: var(--aksen-latar); border-radius: var(--r); padding: 18px 22px; margin-bottom: 20px; }
.sandi-sekali h2 { font-size: 17px; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.kode-cadangan { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 32px; font-size: 17px; }
.keterangan-peran dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.keterangan-peran dt { font-weight: 600; }
.keterangan-peran dd { margin: 2px 0 0; color: var(--redup); font-size: 14px; }

/* dialog konfirmasi */
.dialog-latar { position: fixed; inset: 0; background: rgb(8 17 26 / .55); display: grid; place-items: center; z-index: 100; padding: 20px; }
.dialog-latar[hidden] { display: none; }
.dialog { background: var(--permukaan); border-radius: var(--r); padding: 22px 24px; max-width: 440px; width: 100%; box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.dialog p { font-size: 16px; margin-bottom: 18px; }
.dialog-aksi { display: flex; justify-content: flex-end; gap: 10px; }

/* ------------------------------------------------------------ halaman masuk */
.polos { background: var(--kertas); }
.masuk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.masuk-sisi { background: var(--tinta) url("../img/keterbukaan.svg") center / cover no-repeat; color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.masuk-merek { display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: 16px; line-height: 1.3; }
.masuk-moto { font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; max-width: 18ch; margin: 0; }
.masuk-form { display: grid; place-items: center; padding: 40px 24px; }
.masuk-kotak { width: 100%; max-width: 380px; }
.masuk-kotak h1 { font-size: 26px; margin-bottom: 6px; }
.masuk-kotak > p.redup { margin-bottom: 24px; }
.masuk-kembali { margin-top: 18px; font-size: 14px; }
.masuk-kembali a { display: inline-flex; gap: 6px; align-items: center; }
.halaman-galat { max-width: 560px; margin: 12vh auto; padding: 24px; }

/* ------------------------------------------------------------ responsif */
@media (max-width: 1100px) {
  .papan { grid-template-columns: repeat(2, 1fr); }
  .papan-sel:nth-child(3) { border-left: 0; }
  .papan-sel:nth-child(n+3) { border-top: 1px solid var(--garis); }
  .laporan { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; }
  .samping { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .samping.terbuka { transform: none; box-shadow: 0 0 0 100vmax rgb(8 17 26 / .5); }
  .tombol-menu { display: inline-flex; width: 40px; height: 40px; border: 1px solid var(--garis); background: var(--permukaan); border-radius: var(--r-kecil); align-items: center; justify-content: center; cursor: pointer; color: var(--teks); }
  .atas, main, .kaki { padding-left: 16px; padding-right: 16px; }
  .pita-siaga { padding-left: 16px; padding-right: 16px; }
  .pita-aksi { display: none; }
  .atas h1 { font-size: 20px; }
  .nama-akun { display: none; }
  .dua-kolom, .langkah-2fa { grid-template-columns: 1fr; }
  .masuk { grid-template-columns: 1fr; }
  .masuk-sisi { padding: 24px; min-height: 150px; }
  .masuk-moto { font-size: 22px; margin-top: 18px; }
  .cari input { width: 100%; }
  .saring, .cari { width: 100%; }
}
@media (max-width: 640px) {
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { border-bottom: 1px solid var(--garis); padding: 8px 4px; }
  .tabel td { border: 0; padding: 4px 12px; }
  .tabel td[data-label]:empty { display: none; }
  .kol-aksi { text-align: left; }
  .papan-angka { font-size: 28px; }
  .kode-cadangan { grid-template-columns: 1fr; }
}
@media print {
  .samping, .atas, .kaki, .pita-siaga, .sebaris-tombol { display: none !important; }
  .panel { display: block; }
}

/* SKM */
.grafik-unsur text { font-size: 12.5px; fill: var(--teks); }
.sub-judul { font-size: 13px; font-weight: 500; margin: 12px 0 4px; }
.judul-bagian { font-size: 16px; margin: 8px 0 12px; }
.daftar-ip li { justify-content: space-between; border-bottom: 1px solid var(--garis); }

/* ---------------------------------------------------------------- Select2 (mengikuti tema panel) */
.select2-container { width: 100%; font: inherit; }
.saring .select2-container { width: auto !important; min-width: 190px; }
.select2-container--default .select2-selection--single { height: 40px; background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--teks); line-height: 38px; padding-left: 11px; padding-right: 32px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--redup); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 6px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--redup) transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--redup) transparent; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--fokus); outline: 2px solid color-mix(in srgb, var(--fokus) 30%, transparent); }
.select2-container--default.select2-container--disabled .select2-selection--single { background: var(--permukaan-2); opacity: .7; }
.select2-container--default .select2-selection--single .select2-selection__clear { color: var(--redup); margin-right: 4px; }
.select2-dropdown { background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); box-shadow: 0 10px 30px rgb(0 0 0 / .18); color: var(--teks); overflow: hidden; z-index: 1100; }
.select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--permukaan); color: var(--teks); border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); min-height: 36px; padding: 6px 10px; }
.select2-results__option { padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--aksen); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--permukaan-2); color: var(--teks); font-weight: 600; }
.select2-container--default .select2-results__option--highlighted[aria-selected=true] { background: var(--aksen); color: #fff; }
.select2-container--default .select2-results__option[aria-disabled=true] { color: var(--redup); }
.select2-container--default .select2-results__option { color: var(--teks); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { color: #fff; }
.ada-galat .select2-container--default .select2-selection--single { border-color: var(--merah); }
:root[data-tema="gelap"] .select2-container--default .select2-results__option--highlighted[aria-selected] { color: #1c1006; }

/* ---------------------------------------------------------------- Urut kolom, bilah tabel */
.tabel th a.urut { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.tabel th a.urut:hover { color: var(--teks); }
.tabel th a.urut i { font-size: 12px; opacity: .45; }
.tabel th a.urut.aktif { color: var(--teks); font-weight: 600; }
.tabel th a.urut.aktif i { opacity: 1; color: var(--aksen); }
.bilah-atas-tabel, .bilah-bawah-tabel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.bilah-atas-tabel { margin: 0 0 10px; }
.bilah-bawah-tabel { margin: 4px 0 16px; }
.bilah-atas-tabel .dorong, .bilah-bawah-tabel .dorong { flex: 1; }
.per-halaman { display: flex; align-items: center; gap: 8px; margin: 0; }
.per-halaman label { color: var(--redup); }
.per-halaman select, .per-halaman .select2-container { width: 80px !important; min-width: 80px; }
.tombol-ekspor { display: flex; gap: 8px; }
.tombol-ekspor .tombol-hantu { display: inline-flex; align-items: center; gap: 6px; }
.bilah-bawah-tabel .paginasi { gap: 0; }
.paginasi a, .paginasi span { border-radius: 0; border: 1px solid var(--garis-kuat); margin-left: -1px; background: var(--permukaan); height: 34px; font-size: 13.5px; }
.paginasi > :first-child { border-radius: var(--r-kecil) 0 0 var(--r-kecil); margin-left: 0; }
.paginasi > :last-child { border-radius: 0 var(--r-kecil) var(--r-kecil) 0; }
.paginasi a:hover { background: var(--permukaan-2); }
.paginasi [aria-current] { background: var(--tinta); border-color: var(--tinta); color: #fff; position: relative; z-index: 1; }
.paginasi .nonaktif, .paginasi .elipsis { color: var(--redup); background: var(--permukaan-2); }

/* ---------------------------------------------------------------- Formulir: penuh lebar, dua kolom di desktop (setara col-md-6) */
.formulir .lembar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.formulir .lembar > * { grid-column: span 12; }
.formulir .lembar > .isian, .formulir .lembar > .blok-dep { grid-column: span 6; }
.formulir .lembar > .isian-penuh { grid-column: 1 / -1; }
.formulir .lembar > .blok-dep > .isian { margin-bottom: 18px; }
.formulir .isian-kecil { max-width: none; }
@media (max-width: 900px) { .formulir .lembar > .isian, .formulir .lembar > .blok-dep { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- Sinkron OPD */
.ringkas-sinkron { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ringkas-sinkron > div { background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: var(--r-kecil); padding: 12px 14px; }
.ringkas-sinkron strong { display: block; font-size: 26px; line-height: 1.1; }
.ringkas-sinkron span { color: var(--redup); font-size: 13.5px; }
.daftar-biasa { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }
.bilah-atas-tabel .cari { max-width: 320px; }

.teks-ok { color: var(--hijau); }
.teks-gagal { color: var(--merah); }

.tabel select[name^="padan"], .tabel select[name^="padan"] + .select2-container { min-width: 460px; max-width: 100%; }

.kode-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; white-space: nowrap; }

/* Sakelar di dalam .isian: aturan ".isian > label" tidak boleh menimpa tata letak sakelar */
.isian > label.sakelar { display: inline-flex; margin-bottom: 0; position: relative; }
.opsi-berinfo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opsi-label { min-width: 0; }
.opsi-info { flex: none; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--garis, #e5e7eb); color: var(--teks-redup, #5b6470); }
.opsi-info-ya { background: #dcf3e4; color: #17653a; }
.select2-results__option--highlighted .opsi-info { background: rgb(255 255 255 / .25); color: #fff; }
.select2-selection__rendered .opsi-info { display: none; }

.pindah-data { margin-top: 4px; padding: 12px 14px; border: 1px dashed var(--garis-kuat); border-radius: 10px; }
.pindah-data .cek { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; }

/* Tab gaya lencana (pil berwarna sesuai status) */
.tab { gap: 8px; border-bottom: 0; padding: 2px 2px 6px; margin-bottom: 10px; }
.tab a { --n: var(--abu); --nl: var(--abu-latar); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--nl); color: var(--n); font-weight: 600; font-size: 14px; margin-bottom: 0; transition: box-shadow .12s, filter .12s; }
.tab a[data-nada="oranye"] { --n: var(--aksen); --nl: var(--aksen-latar); }
.tab a[data-nada="biru"] { --n: var(--biru); --nl: var(--biru-latar); }
.tab a[data-nada="hijau"] { --n: var(--hijau); --nl: var(--hijau-latar); }
.tab a[data-nada="merah"] { --n: var(--merah); --nl: var(--merah-latar); }
.tab a[data-nada="ungu"] { --n: var(--ungu); --nl: var(--ungu-latar); }
.tab a .ph { font-size: 17px; }
.tab a:hover { filter: brightness(.96); }
.tab a span { margin: 0; padding: 0 8px; min-width: 22px; text-align: center; border-radius: 999px; background: var(--n); color: var(--permukaan); font-size: 12px; font-weight: 700; }
.tab a[aria-current] { box-shadow: 0 0 0 2px var(--n); background: var(--permukaan); color: var(--n); }
.tab a[aria-current] span { background: var(--n); color: var(--permukaan); }

/* Modal form */
dialog.modal { border: 0; padding: 0; border-radius: var(--r); background: var(--permukaan); color: var(--teks); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgb(0 0 0 / .35); overflow: visible; }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal::backdrop { background: rgb(8 17 26 / .55); }
.modal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--garis); }
.modal-kepala h2 { font-size: 18px; margin: 0; }
.modal-isi { padding: 18px 20px 20px; overflow-y: auto; }
.modal-isi .formulir .lembar { display: block; padding: 0; border: 0; box-shadow: none; background: none; }
.modal-isi .formulir .lembar > .isian, .modal-isi .formulir .lembar > .blok-dep { grid-column: auto; }
.modal-isi .formulir-kaki { position: static; margin-top: 8px; padding: 14px 0 0; border-top: 1px solid var(--garis); background: none; }
.modal-isi .formulir-kaki [name="_lanjut"] { display: none; }

.modal-kepala { border-radius: var(--r) var(--r) 0 0; }
.modal-isi { border-radius: 0 0 var(--r) var(--r); }
dialog.modal .select2-container--open .select2-dropdown { z-index: 1000; }

.status-unit { color: var(--redup); }
.muat-ulang { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.muat-ulang { color: var(--biru); text-decoration: underline; }
.mini-logo { object-fit: contain; width: 40px; padding: 2px; border: 1px solid var(--garis); background: #fff; }

/* Modal kata sandi sementara */
.modal-sandi .sandi-besar { font-size: 22px; letter-spacing: .06em; padding: 10px 14px; }
.sandi-pesan-label { display: block; margin: 16px 0 6px; font-weight: 500; font-size: 14px; }
.sandi-pesan { width: 100%; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.modal-aksi { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Isian "atau tempel tautan" di bawah zona unggah */
.atau-tautan { margin-top: 10px; }
.atau-pemisah { display: block; font-size: .8125rem; color: var(--redup); margin-bottom: 6px; }
.atau-tautan input { width: 100%; }

/* Galeri foto per kegiatan */
.galeri-album .galeri-gambar, .galeri-isi .galeri-gambar { position: relative; display: block; }
.galeri-kosong { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--abu-latar); color: var(--redup); font-size: 2rem; }
.galeri-jumlah { position: absolute; left: 8px; bottom: 8px; display: inline-flex; gap: 5px; align-items: center; padding: 3px 9px; border-radius: 99px; background: rgb(15 23 42 / .78); color: #fff; font-size: .75rem; font-weight: 600; }
.galeri-sampul { background: rgb(180 83 9 / .92); }
.galeri-kaki-album { padding: 10px 12px; }
.galeri-judul { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; min-width: 0; }
.galeri-judul small { color: var(--redup); }
.galeri-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.galeri-nama { margin: 0 0 4px; font-size: 1.25rem; }
.galeri-ket { margin: 8px 0 0; max-width: 70ch; }
.galeri-unggah { margin-bottom: 20px; }
.form-unggah-banyak { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.galeri-ket-form { display: flex; gap: 4px; padding: 8px 8px 0; }
.galeri-ket-form input { flex: 1; min-width: 0; }
.galeri-lepas summary { cursor: pointer; font-weight: 600; }
.galeri-pilih { margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pilih-foto { display: block; position: relative; cursor: pointer; }
.pilih-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pilih-foto span { display: block; padding: 4px 6px; font-size: .75rem; color: var(--redup); }
.pilih-foto input { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; z-index: 1; }
.pilih-foto input:checked + img { outline: 3px solid var(--aksen); outline-offset: -3px; }