/* Dashboard Admin HALLO SAMPAH — desktop-first, tetap bisa dipakai di HP. */
:root {
  --hijau: #0E9F4F;
  --hijau-tua: #0B6B3A;
  --hijau-gelap: #08532D;
  --hijau-muda: #E7F5EC;
  --hijau-garis: #BCE2CA;
  --kuning: #FFB81C;
  --kuning-muda: #FFF5DB;
  --kuning-teks: #7A4F00;
  --merah: #B42318;
  --merah-muda: #FDEDEB;
  --biru: #1D5FA8;
  --biru-muda: #EAF1FA;
  --teks: #1F2933;
  --teks-2: #3E4A57;
  --teks-3: #5B6673;
  --latar: #F5F7F4;
  --kartu: #FFFFFF;
  --garis: #E0E6DF;
  --garis-2: #C9D2C8;
  --baris: #EDF1EC;
  --sorot: #F6FAF5;
  --r: 8px;
  --r-besar: 12px;
  --sidebar: 256px;
  --bayang: 0 1px 2px rgba(16, 24, 40, .05);
  --bayang-angkat: 0 12px 32px rgba(16, 24, 40, .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: system-ui, Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--hijau-tua); }
a:hover { color: var(--hijau-gelap); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; }
img { max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--hijau); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.angka, .num { font-variant-numeric: tabular-nums; }
.redup { color: var(--teks-3); }
.kecil { font-size: 13px; }
.tebal { font-weight: 600; }
.nowrap { white-space: nowrap; }
.boot { padding: 48px 24px; text-align: center; color: var(--teks-3); }

/* ---------- ikon ---------- */
.ikon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.ikon svg { width: 100%; height: 100%; }
.ikon.besar { width: 22px; height: 22px; }
.ikon.kecil { width: 15px; height: 15px; }

/* ---------- kerangka ---------- */
.tata { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sisi { background: var(--kartu); border-right: 1px solid var(--garis); min-width: 0; }
.sisi-dalam { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.sisi-logo { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.sisi-logo img { height: 46px; width: auto; display: block; }
.sisi-logo .tutup-sisi { display: none; }
.sisi-peran { margin: 4px 18px 6px; font-size: 12.5px; color: var(--teks-3); }
.sisi-peran b { color: var(--hijau-tua); font-weight: 700; }
.nav { padding: 0 10px 12px; flex: 1 1 auto; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.nav h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teks-3); margin: 14px 10px 3px;
}
.nav a {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px;
  border-radius: var(--r); color: var(--teks-2); text-decoration: none; font-weight: 500; font-size: 14.5px;
}
.nav a .ikon { color: var(--teks-3); }
.nav a:hover { background: var(--sorot); color: var(--teks); }
.nav a[aria-current="page"] { background: var(--hijau-muda); color: var(--hijau-gelap); font-weight: 650; box-shadow: inset 3px 0 0 var(--hijau); }
.nav a[aria-current="page"] .ikon { color: var(--hijau-tua); }
.lencana {
  margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--kuning); color: #1F2933; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.sisi-akun { flex: 0 0 auto; border-top: 1px solid var(--garis); padding: 10px 14px 12px; background: var(--kartu); }
.sisi-akun .nama { font-weight: 650; font-size: 14px; overflow-wrap: anywhere; }
.sisi-akun .jabatan { font-size: 12.5px; color: var(--teks-3); margin-bottom: 8px; }
.sisi-akun .baris-aksi { flex-wrap: nowrap; gap: 6px; }
.sisi-akun .tombol { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }

.kolom-utama { min-width: 0; display: flex; flex-direction: column; }
.atas-hp { display: none; }
.isi { padding: 22px 28px 48px; max-width: 1480px; width: 100%; }
.latar-gelap { display: none; }

/* ---------- kepala halaman ---------- */
.kepala-hal { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.kepala-hal h1 { font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
.kepala-hal .ket { color: var(--teks-3); margin-top: 3px; font-size: 14px; }
.kepala-hal .aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.balik { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; text-decoration: none; color: var(--teks-3); margin-bottom: 6px; }
.balik:hover { color: var(--hijau-tua); }
.judul-baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- kartu & grid ---------- */
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r-besar); padding: 18px 20px; box-shadow: var(--bayang); min-width: 0; }
.kartu + .kartu { margin-top: 16px; }
.grid-sama > .kartu + .kartu, .grid-2 > .kartu + .kartu { margin-top: 0; }
.kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.kartu-kepala h2, .kartu-kepala h3 { font-size: 15.5px; font-weight: 700; }
.kartu-kepala .ket { font-size: 13px; color: var(--teks-3); }
.kartu.rapat { padding: 0; overflow: hidden; }
.kartu.rapat > .kartu-kepala { padding: 14px 18px 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.grid-sama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tumpuk > * + * { margin-top: 16px; }
.jarak-atas { margin-top: 18px; }

/* daftar definisi */
.dl { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 14px; }
.dl dt { color: var(--teks-3); }
.dl dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 7px 14px; border-radius: var(--r);
  border: 1px solid var(--garis-2); background: var(--kartu); color: var(--teks);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tombol:hover { background: var(--sorot); color: var(--teks); }
.tombol.utama { background: var(--hijau-tua); border-color: var(--hijau-tua); color: #fff; }
.tombol.utama:hover { background: var(--hijau-gelap); border-color: var(--hijau-gelap); color: #fff; }
.tombol.bahaya { color: var(--merah); border-color: #E9B8B2; }
.tombol.bahaya:hover { background: var(--merah-muda); color: var(--merah); }
.tombol.bahaya.penuh { background: var(--merah); border-color: var(--merah); color: #fff; }
.tombol.bahaya.penuh:hover { background: #8F1C13; }
.tombol.hantu { border-color: transparent; background: transparent; }
.tombol.hantu:hover { background: var(--baris); }
.tombol.kecil { min-height: 32px; padding: 4px 10px; font-size: 13.5px; }
.tombol.lebar { width: 100%; }
.tombol:disabled, .tombol[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.tombol .putar { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: putar .7s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
.baris-aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.baris-aksi.kanan { justify-content: flex-end; }

/* ---------- chip status ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; white-space: nowrap; line-height: 20px; background: var(--baris); color: var(--teks-2);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip.polos::before { display: none; }
.chip.hijau { background: var(--hijau-muda); color: var(--hijau-gelap); }
.chip.kuning { background: var(--kuning-muda); color: var(--kuning-teks); }
.chip.merah { background: var(--merah-muda); color: var(--merah); }
.chip.biru { background: var(--biru-muda); color: var(--biru); }
.chip.abu { background: #EEF1ED; color: #4A5562; }
.chip.tua { background: var(--hijau-tua); color: #fff; }
.contoh {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--kuning-teks); background: var(--kuning-muda); border: 1px dashed #E3B13E; border-radius: 4px; padding: 0 5px; line-height: 16px; vertical-align: 1px;
}
.kunci { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; color: var(--teks-2); }

/* ---------- tabel ---------- */
.tabel-wadah { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r-besar); background: var(--kartu); box-shadow: var(--bayang); }
.kartu .tabel-wadah, .kartu.rapat .tabel-wadah { border: 0; border-radius: 0; box-shadow: none; }
.kartu.rapat .tabel-wadah { border-top: 1px solid var(--garis); margin-top: 12px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-weight: 650; color: var(--teks-3); font-size: 12.5px; letter-spacing: .01em;
  padding: 9px 10px; background: #FAFBF9; border-bottom: 1px solid var(--garis); vertical-align: bottom;
}
.tbl td { padding: 10px 10px; border-bottom: 1px solid var(--baris); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.klik { cursor: pointer; }
.tbl tr.klik:hover td { background: var(--sorot); }
.tbl .kanan, .tbl th.kanan { text-align: right; }
.tbl td.kanan { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .kode { font-weight: 650; white-space: nowrap; }
.tbl .sub { display: block; color: var(--teks-3); font-size: 12.5px; }
.tbl td .baris-aksi { flex-wrap: nowrap; }
.tbl .potong { max-width: 240px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tbl tr.sorot td { background: #FFFBEF; }
.tbl input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--hijau-tua); }

/* ---------- formulir ---------- */
.isian { display: grid; gap: 5px; margin-bottom: 14px; min-width: 0; }
.isian > label, .isian > .label, .isian .label-baris label { font-weight: 600; font-size: 13.5px; color: var(--teks-2); }
.isian .bantu { font-size: 12.5px; color: var(--teks-3); }
.isian .wajib { color: var(--merah); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font: inherit; font-size: 14.5px; width: 100%; min-height: 38px; padding: 7px 10px;
  border: 1px solid var(--garis-2); border-radius: var(--r); background: #fff; color: var(--teks);
}
textarea { min-height: 76px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--hijau); outline-offset: 0; border-color: var(--hijau); }
input[readonly] { background: var(--latar); }
.isian.salah input, .isian.salah select, .isian.salah textarea { border-color: var(--merah); background: #FFFBFA; }
.pesan-salah { color: var(--merah); font-size: 13px; }
.cek { display: flex; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; min-height: 32px; }
.cek input { width: 18px; height: 18px; accent-color: var(--hijau-tua); }
.baris-isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; }
.saring { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.saring .isian { margin: 0; }
.saring input, .saring select { min-width: 140px; }
.saring .cari { min-width: 240px; }
.foto-isian { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.foto-isian img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--garis); }

.form-set .isian > input, .form-set .isian > select { max-width: 340px; }
.form-set .baris-isian { max-width: 760px; }

/* ---------- tab ---------- */
.tab { display: flex; gap: 2px; border-bottom: 1px solid var(--garis); margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; }
.tab button {
  border: 0; background: none; padding: 9px 12px; color: var(--teks-3); font-weight: 600; font-size: 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
}
.tab button:hover { color: var(--teks); }
.tab button[aria-selected="true"] { color: var(--hijau-gelap); border-bottom-color: var(--hijau); }
.tab .jml { font-size: 12px; background: var(--baris); border-radius: 999px; padding: 0 7px; color: var(--teks-2); }

/* ---------- keadaan ---------- */
.memuat { padding: 28px; color: var(--teks-3); display: flex; align-items: center; gap: 10px; }
.memuat::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--hijau); border-right-color: transparent; border-radius: 50%; animation: putar .7s linear infinite; }
.kerangka-baris { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #EEF1ED, #F6F8F5, #EEF1ED); background-size: 200% 100%; animation: kilau 1.2s ease-in-out infinite; margin: 10px 0; }
@keyframes kilau { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.kosong { padding: 22px 20px; text-align: center; color: var(--teks-3); }
.kartu.rapat > .kosong { padding: 14px 18px 20px; }
.kosong .ikon { width: 24px; height: 24px; color: var(--garis-2); margin-bottom: 4px; }
.kosong p { margin: 4px 0 0; }
.kotak-galat { border: 1px solid #F1C0BA; background: var(--merah-muda); color: #7A1C14; border-radius: var(--r-besar); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.kotak-galat .ikon { color: var(--merah); margin-top: 2px; }
.kotak-galat p { margin: 2px 0 8px; }
.info { border-radius: var(--r); padding: 10px 12px; font-size: 13.5px; display: flex; gap: 9px; align-items: flex-start; background: var(--biru-muda); color: #163F6E; }
.info.kuning { background: var(--kuning-muda); color: #5E3D00; }
.info.merah { background: var(--merah-muda); color: #7A1C14; }
.info.hijau { background: var(--hijau-muda); color: var(--hijau-gelap); }
.info .ikon { margin-top: 1px; }
.info + .info { margin-top: 8px; }

/* ---------- dashboard ---------- */
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r-besar); box-shadow: var(--bayang); margin-bottom: 18px; }
.strip > div { padding: 14px 18px; border-left: 1px solid var(--baris); min-width: 0; }
.strip > div:first-child { border-left: 0; }
.strip .lbl { font-size: 12.5px; color: var(--teks-3); font-weight: 600; }
.strip .nil { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; overflow-wrap: anywhere; }
.strip .nil small { font-size: 14px; font-weight: 600; color: var(--teks-3); }
.tindakan { list-style: none; margin: 0; padding: 0; }
.tindakan li + li { border-top: 1px solid var(--baris); }
.tindakan a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 6px; text-decoration: none; color: var(--teks); border-radius: 8px; }
.tindakan a:hover { background: var(--sorot); }
.tindakan .jml { font-size: 22px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--hijau-tua); border-radius: 8px; background: var(--hijau-muda); line-height: 40px; }
.tindakan .kuning .jml { background: var(--kuning); color: #1F2933; }
.tindakan .merah .jml { background: var(--merah-muda); color: var(--merah); }
.tindakan .pantau .jml { background: var(--baris); color: var(--teks-2); }
.tindakan .lbl { font-weight: 650; font-size: 14.5px; }
.tindakan .ket { font-size: 13px; color: var(--teks-3); }
.tindakan .siapa { font-size: 12px; font-weight: 650; color: var(--teks-3); white-space: nowrap; }
.tindakan .kuning .siapa, .tindakan .bisa .siapa { color: var(--hijau-tua); }
.alert-otw { border: 1px solid #F3CF73; background: #FFF9E8; border-radius: var(--r-besar); padding: 12px 16px; display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.alert-otw .ikon { color: #A46A00; width: 22px; height: 22px; }
.alert-otw b { font-weight: 700; }
.daftar-kecil { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.daftar-kecil li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--baris); }
.daftar-kecil li:first-child { border-top: 0; }
.progres { height: 6px; border-radius: 999px; background: var(--baris); overflow: hidden; min-width: 60px; }
.progres > span { display: block; height: 100%; background: var(--hijau); border-radius: inherit; }
.progres.lewat > span { background: var(--merah); }
.progres-teks { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* ---------- langkah TRIP ---------- */
.langkah { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.langkah li { position: relative; padding: 0 6px; text-align: center; min-width: 0; }
.langkah li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: var(--garis); z-index: 0; }
.langkah li:first-child::before { display: none; }
.langkah li.lewat::before, .langkah li.kini::before { background: var(--hijau); }
.langkah li.kunci-zona::before { background-image: repeating-linear-gradient(90deg, var(--hijau) 0 6px, transparent 6px 9px); background-color: transparent; }
.langkah .titik {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--garis-2); color: var(--teks-3); font-size: 12px; font-weight: 700;
}
.langkah li.lewat .titik { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.langkah li.kini .titik { background: #fff; border-color: var(--hijau-tua); color: var(--hijau-tua); box-shadow: 0 0 0 4px var(--hijau-muda); }
.langkah .titik .ikon { width: 14px; height: 14px; }
.langkah .nama { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--teks-2); overflow-wrap: anywhere; }
.langkah li.kini .nama { color: var(--hijau-gelap); }
.langkah .arti { font-size: 12px; color: var(--teks-3); }
.langkah .wkt { font-size: 11.5px; color: var(--teks-3); font-variant-numeric: tabular-nums; }
.langkah.batal { opacity: .55; }
.langkah-mini { display: inline-flex; gap: 3px; vertical-align: middle; }
.langkah-mini i { width: 14px; height: 5px; border-radius: 3px; background: var(--garis); display: block; }
.langkah-mini i.on { background: var(--hijau); }

/* ---------- rekonsiliasi ---------- */
.timbang-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.timbang-angka > div { border: 1px solid var(--garis); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.timbang-angka .lbl { font-size: 12.5px; color: var(--teks-3); font-weight: 600; }
.timbang-angka .nil { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.timbang-angka .merah { border-color: #F1C0BA; background: #FFF8F7; }
.timbang-angka .merah .nil { color: var(--merah); }
.timbang-angka .kuning { border-color: #F3CF73; background: #FFFBEF; }
.batang-banding { display: grid; gap: 6px; margin: 12px 0 4px; font-size: 13px; }
.batang-banding > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 84px; gap: 10px; align-items: center; }
.batang-banding .bt { height: 10px; border-radius: 999px; background: var(--baris); overflow: hidden; }
.batang-banding .bt span { display: block; height: 100%; background: var(--hijau); border-radius: inherit; }
.batang-banding .bt.fas span { background: var(--hijau-tua); }
.batang-banding .k { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pratinjau { border: 1px dashed var(--garis-2); border-radius: var(--r); padding: 10px 12px; font-size: 13.5px; background: #FBFCFA; margin-bottom: 12px; }

/* ---------- maker-checker ---------- */
.mc { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; vertical-align: middle; }
.mc .orang { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px; background: var(--baris); font-weight: 600; }
.mc .orang.penyetuju { background: var(--hijau-muda); color: var(--hijau-gelap); }
.mc .orang.tunggu { background: var(--kuning-muda); color: var(--kuning-teks); }
.mc .orang.tolak { background: var(--merah-muda); color: var(--merah); }
.mc .panah { color: var(--teks-3); }
.usulan { border: 1px solid #F3CF73; background: #FFFCF2; border-radius: var(--r-besar); padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; }
.usulan + .usulan { margin-top: 10px; }
.usulan .judul { font-weight: 700; font-size: 15px; }
.usulan .harga-ubah { font-variant-numeric: tabular-nums; font-size: 14px; margin-top: 2px; }
.usulan .harga-ubah del { color: var(--teks-3); }

/* ---------- foto & peta ---------- */
.foto-baris { display: flex; gap: 8px; flex-wrap: wrap; }
.foto-kecil { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--garis); cursor: zoom-in; background: var(--baris); display: block; }
button.foto-tombol { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.peta { height: 260px; border-radius: var(--r); border: 1px solid var(--garis); background: #EEF1ED; overflow: hidden; }
.peta.tinggi { height: 380px; }
.peta-gagal { height: 100%; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--teks-3); font-size: 13.5px; }
.penanda { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--hijau-tua); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); display: grid; place-items: center; }
.penanda span { transform: rotate(45deg); color: #fff; font-size: 11px; font-weight: 700; }
.penanda.kuning { background: #C98A00; }
.penanda.fasilitas { background: #1F2933; }

/* ---------- linimasa ---------- */
.lini { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.lini li { position: relative; padding: 0 0 12px 20px; }
.lini li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--hijau); }
.lini li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--baris); }
.lini li:last-child::after { display: none; }
.lini .wkt { color: var(--teks-3); font-size: 12.5px; }

/* ---------- pilih kartu (bentuk TRIP) ---------- */
.pilihan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pilihan { position: relative; display: block; border: 1px solid var(--garis-2); border-radius: var(--r-besar); padding: 11px 12px 11px 40px; cursor: pointer; background: #fff; min-width: 0; }
.pilihan input { position: absolute; left: 13px; top: 14px; width: 18px; height: 18px; accent-color: var(--hijau-tua); }
.pilihan:hover { border-color: var(--hijau); }
.pilihan:has(input:checked) { border-color: var(--hijau-tua); background: var(--hijau-muda); box-shadow: 0 0 0 1px var(--hijau-tua) inset; }
.pilihan:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.pilihan .nm { font-weight: 650; overflow-wrap: anywhere; }
.pilihan .sub { font-size: 12.5px; color: var(--teks-3); }
.lengket { position: sticky; top: 16px; }
.muatan { margin: 10px 0 4px; }
.muatan .progres { height: 10px; }

/* ---------- modal ---------- */
dialog.modal { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--bayang-angkat); color: var(--teks); }
dialog.modal.lebar { width: min(880px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: rgba(17, 24, 39, .48); }
.modal-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 4px; }
.modal-kepala h2 { font-size: 17px; font-weight: 700; }
.modal-isi { padding: 10px 20px 4px; }
.modal-isi > p:first-child { margin-top: 0; }
.modal-kaki { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; flex-wrap: wrap; }
.modal-foto img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 8px; }

/* ---------- toast ---------- */
.toast-wadah { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 36px)); }
.toast { background: #1F2933; color: #fff; padding: 11px 14px; border-radius: 10px; box-shadow: var(--bayang-angkat); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.toast.galat { background: #8F1C13; }
.toast.sukses .ikon { color: #7EE2A8; }

/* ---------- masuk ---------- */
.masuk { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.masuk-form { display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 88px); background: #fff; }
.masuk-form .logo { height: 72px; width: auto; align-self: flex-start; margin-bottom: 28px; }
.masuk-form h1 { font-size: 24px; margin-bottom: 4px; }
.masuk-form .ket { color: var(--teks-3); margin: 0 0 22px; }
.masuk-form form { max-width: 380px; }
.masuk-form .tombol.utama { width: 100%; min-height: 44px; margin-top: 4px; }
.masuk-alur { background: var(--hijau-tua); color: #fff; padding: 40px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.masuk-alur h2 { font-size: 15px; font-weight: 650; color: #CDEBD8; margin-bottom: 18px; }
.masuk-alur ol { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.masuk-alur li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; position: relative; }
.masuk-alur li::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 2px; background: rgba(255,255,255,.22); }
.masuk-alur li:last-child::after { display: none; }
.masuk-alur .no { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.masuk-alur li.dikunci .no { background: var(--kuning); color: #1F2933; border-color: var(--kuning); }
.masuk-alur b { display: block; font-size: 14.5px; letter-spacing: .02em; }
.masuk-alur span { font-size: 13.5px; color: #D5ECDD; }
.masuk-alur .catatan { margin-top: 10px; font-size: 13px; color: #BFE0CB; max-width: 460px; }

/* ---------- responsif ---------- */
@media (max-width: 1180px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .lengket { position: static; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip > div:nth-child(4) { border-left: 0; }
  .strip > div:nth-child(n+4) { border-top: 1px solid var(--baris); }
}
@media (max-width: 960px) {
  .tata { grid-template-columns: minmax(0, 1fr); }
  .sisi { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .2s ease, visibility .2s; box-shadow: var(--bayang-angkat); visibility: hidden; }
  .sisi-dalam { position: static; height: 100%; }
  .tata.sisi-buka .sisi { visibility: visible; }
  .tata.sisi-buka .sisi { transform: none; }
  .tata.sisi-buka .latar-gelap { display: block; position: fixed; inset: 0; background: rgba(17,24,39,.4); z-index: 40; }
  .sisi-logo .tutup-sisi { display: inline-flex; }
  .atas-hp {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--garis); padding: 8px 12px; min-height: 56px;
  }
  .atas-hp img { height: 30px; width: auto; }
  .atas-hp .judul-hp { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
  .atas-hp .tombol { min-height: 44px; min-width: 44px; padding: 6px; }
  .isi { padding: 16px 16px 40px; }
  .grid-sama { grid-template-columns: minmax(0, 1fr); }
  .masuk { grid-template-columns: minmax(0, 1fr); }
  .masuk-alur { padding: 28px 24px 36px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; min-height: 44px; }
  .tombol { min-height: 44px; font-size: 15px; }
  .tombol.kecil { min-height: 40px; }
  .nav a { min-height: 44px; font-size: 15.5px; }
  .kepala-hal h1 { font-size: 21px; }
  .kepala-hal .aksi { width: 100%; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > div { border-left: 0; border-top: 1px solid var(--baris); }
  .strip > div:nth-child(-n+2) { border-top: 0; }
  .strip > div:nth-child(even) { border-left: 1px solid var(--baris); }
  .strip > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .strip .nil { font-size: 21px; }
  .kartu { padding: 16px; }
  .kartu.rapat > .kartu-kepala { padding: 14px 16px 0; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dl dt { margin-top: 8px; font-size: 13px; }
  .tindakan a { grid-template-columns: 48px minmax(0, 1fr); }
  .tindakan .siapa { grid-column: 2; }
  .saring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .saring > * { min-width: 0; }
  .saring input, .saring select, .saring .cari { min-width: 0; width: 100%; }
  .saring .penuh-hp { grid-column: 1 / -1; }
  .saring .spasi { display: none; }
  .timbang-angka { grid-template-columns: minmax(0, 1fr); }
  .batang-banding > div { grid-template-columns: 84px minmax(0, 1fr) 76px; }
  .usulan { grid-template-columns: minmax(0, 1fr); }
  .langkah .arti, .langkah .wkt { display: none; }
  .langkah li { padding: 0 1px; }
  .langkah .nama { font-size: 9.5px; letter-spacing: 0; overflow-wrap: normal; }
  /* tabel jadi kartu */
  .tbl.kartu-hp thead { display: none; }
  .tbl.kartu-hp, .tbl.kartu-hp tbody, .tbl.kartu-hp tr, .tbl.kartu-hp td { display: block; width: 100%; }
  .tbl.kartu-hp tr { padding: 10px 14px; border-bottom: 1px solid var(--garis); }
  .tbl.kartu-hp tbody tr:last-child { border-bottom: 0; }
  .tbl.kartu-hp td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; text-align: right; }
  .tbl.kartu-hp td::before { content: attr(data-label); flex: 0 0 38%; text-align: left; color: var(--teks-3); font-size: 13.5px; font-weight: 600; }
  .tbl.kartu-hp td.utama-hp { display: block; text-align: left; font-size: 16px; padding-bottom: 6px; }
  .tbl.kartu-hp td.utama-hp::before { display: none; }
  .tbl.kartu-hp td:empty, .tbl.kartu-hp td.kosong-hp { display: none; }
  .tbl.kartu-hp .potong { max-width: none; }
  .tbl.kartu-hp td.kanan { white-space: normal; }
  .tbl.kartu-hp td > .sub { display: inline; }
  .toast-wadah { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .modal-kaki .tombol { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.modal-isi .modal-kaki.dalam { padding: 12px 0 16px; }