/* ==========================================================================
   Sewa Lahan Caturtunggal - gaya antarmuka admin
   Tanpa build step: seluruh gaya ditulis langsung sebagai CSS biasa.
   ========================================================================== */

:root {
    --biru-900: #0c2d5e;
    --biru-800: #123a76;
    --biru-700: #1a4b91;
    --biru-600: #1d4ed8;
    --biru-500: #3b82f6;
    --biru-50: #eff6ff;

    --hijau-600: #16a34a;
    --hijau-400: #4ade80;
    --hijau-50: #f0fdf4;
    --kuning-600: #d97706;
    --kuning-50: #fffbeb;
    --merah-600: #dc2626;
    --merah-50: #fef2f2;
    --ungu-700: #6d28d9;
    --ungu-600: #7c3aed;
    --ungu-50: #f5f3ff;

    --abu-900: #0f172a;
    --abu-800: #1e293b;
    --abu-700: #334155;
    --abu-600: #475569;
    --abu-500: #64748b;
    --abu-400: #94a3b8;
    --abu-300: #cbd5e1;
    --abu-200: #e2e8f0;
    --abu-100: #f1f5f9;
    --abu-50: #f8fafc;

    --radius: 10px;
    --radius-sm: 6px;
    --bayang: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1);
    --bayang-lg: 0 10px 30px rgba(15, 23, 42, .12);
    --lebar-sidebar: 264px;
    --tinggi-topbar: 60px;
    --font: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--abu-800);
    background: var(--abu-100);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--biru-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .35em; color: var(--abu-900); font-weight: 650; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 13.5px; }
p { margin: 0 0 .8em; }

/* ---------------------------------------------------------------- Kerangka */

.kerangka { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--lebar-sidebar);
    flex: 0 0 var(--lebar-sidebar);
    background: linear-gradient(178deg, var(--biru-900), #0a2450);
    color: #cbd9ee;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    overflow-y: auto;
}

.sidebar__merek {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    position: sticky;
    top: 0;
    background: var(--biru-900);
    z-index: 1;
}
/* Lambang Kabupaten Sleman. Bentuknya tegak, jadi tingginya yang dikunci -
   memaksakan kotak bujur sangkar akan memipihkan lambang resmi. */
.sidebar__logo {
    width: auto; height: 40px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}
.sidebar__judul { color: #fff; font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.sidebar__sub { font-size: 11.5px; color: #93b1d8; }

.sidebar__nav { padding: 10px 10px 24px; }
.sidebar__grup { margin-top: 14px; }
.sidebar__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7f9dc6;
    padding: 0 10px 6px;
    font-weight: 700;
}
.sidebar__tautan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: #cbd9ee;
    font-size: 13.5px;
    margin-bottom: 2px;
}
.sidebar__tautan:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.sidebar__tautan--aktif { background: var(--biru-600); color: #fff; font-weight: 600; }
.sidebar__tautan--aktif:hover { background: var(--biru-600); }
.sidebar__ikon { width: 18px; text-align: center; flex: 0 0 18px; }
.sidebar__lencana {
    margin-left: auto;
    background: rgba(255, 255, 255, .16);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 11px;
}

/* Lencana yang menuntut tindakan - tunggakan sewa - diberi warna sendiri.
   Yang putih transparan terbaca sebagai penghitung biasa, dan angka yang
   sebenarnya berarti "ada yang harus ditagih hari ini" ikut tenggelam. */
.sidebar__lencana--bahaya { background: var(--merah-600); color: #fff; font-weight: 700; }

.utama {
    flex: 1;
    min-width: 0;
    margin-left: var(--lebar-sidebar);
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------- Sidebar dilipat

   Tombol ☰ pada bilah atas dahulu hanya bekerja di layar sempit; pada layar
   lebar kelasnya tidak punya aturan apa pun sehingga tombolnya seolah mati.

   Saat dilipat, sidebar menyusut menjadi rel ikon - bukan menghilang. Menu
   yang lenyap sepenuhnya memaksa pengguna membukanya kembali hanya untuk tahu
   ada apa saja; rel ikon menyisakan jalan pintas ke setiap halaman sambil
   tetap memberi ruang lebih untuk peta dan tabel lebar.

   Kelasnya ditempel pada <html> - bukan <body> - supaya dapat dipasang skrip
   kecil di dalam <head> sebelum halaman tergambar, sehingga lebar sidebar
   tidak sempat berkedip setiap kali berpindah halaman.                      */

.sidebar { transition: width .22s ease, flex-basis .22s ease, transform .22s ease; }
.utama { transition: margin-left .22s ease; }

html.sidebar-tutup { --lebar-sidebar: 68px; }
html.sidebar-tutup .sidebar { overflow-x: hidden; }

html.sidebar-tutup .sidebar__merek { justify-content: center; padding: 16px 8px; }
html.sidebar-tutup .sidebar__merek-teks,
html.sidebar-tutup .sidebar__label,
html.sidebar-tutup .sidebar__teks,
html.sidebar-tutup .sidebar__lencana { display: none; }

html.sidebar-tutup .sidebar__nav { padding: 8px 8px 24px; }
html.sidebar-tutup .sidebar__tautan {
    justify-content: center;
    gap: 0;
    padding: 11px 0;
    margin-bottom: 4px;
}
html.sidebar-tutup .sidebar__ikon { font-size: 17px; flex-basis: auto; }

/* Kelompok menu kehilangan judulnya saat dilipat, jadi pemisahnya dipakai
   garis tipis supaya susunannya tetap terbaca. */
html.sidebar-tutup .sidebar__grup {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .utama { transition: none; }
}

.topbar {
    height: var(--tinggi-topbar);
    background: #fff;
    border-bottom: 1px solid var(--abu-200);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 30;
}
/* Judul halaman pada bilah atas kini digantikan remah roti; kelasnya
   dipertahankan agar sisa markup lama tidak kehilangan gayanya. */
.topbar__judul { font-weight: 650; font-size: 15px; color: var(--abu-900); }
.topbar__kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.isi { padding: 20px; flex: 1; }
.isi--rapat { padding: 0; }

/* ------------------------------------------------------------ Menu akun

   Sudut kanan bilah atas. Dahulu berupa lencana peran, nama, dan tombol
   keluar yang berjajar polos. Kini satu pemicu berpotret inisial yang
   membuka menu: identitas lengkap di kepalanya, lalu pintasan halaman
   pribadi dan tombol keluar. Warna potret mengikuti peran, sama dengan
   sampul di halaman Profil Saya, supaya pengguna mengenali dirinya dari
   warna yang konsisten.                                                  */

.akun { position: relative; }

.akun__pemicu {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 9px 4px 4px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    color: var(--abu-800);
    transition: background .14s, border-color .14s, box-shadow .14s;
}
.akun__pemicu:hover { background: var(--abu-50); border-color: var(--abu-200); }
.akun__pemicu:focus-visible { outline: none; border-color: var(--biru-500); box-shadow: 0 0 0 3px var(--biru-50); }
.akun--buka .akun__pemicu { background: var(--abu-50); border-color: var(--abu-300); }

.akun__avatar {
    position: relative;
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--biru-800), var(--biru-600));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.akun__avatar--ungu { background: linear-gradient(135deg, #4c1d95, var(--ungu-600)); }
.akun__avatar--hijau { background: linear-gradient(135deg, #14532d, var(--hijau-600)); }
.akun__avatar--biru { background: linear-gradient(135deg, var(--biru-800), var(--biru-600)); }
.akun__avatar--besar { width: 44px; height: 44px; flex-basis: 44px; font-size: 15.5px; }

/* Titik status: hijau bila akun aktif. Kecil saja - sekadar penegas. */
.akun__titik {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--hijau-600);
    border: 2px solid #fff;
}
.akun__titik--mati { background: var(--abu-400); }
.akun__avatar--besar .akun__titik { width: 12px; height: 12px; }

.akun__teks { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }
.akun__nama { font-size: 13px; font-weight: 650; color: var(--abu-900); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akun__peran { font-size: 11px; color: var(--abu-500); }
.akun__panah { font-size: 10px; color: var(--abu-400); transition: transform .16s; }
.akun--buka .akun__panah { transform: rotate(180deg); }

.akun__menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: 268px;
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: 12px;
    box-shadow: var(--bayang-lg);
    z-index: 70;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.akun--buka .akun__menu { opacity: 1; visibility: visible; transform: none; }

.akun__kepala {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    background: linear-gradient(160deg, var(--abu-50), #fff);
    border-bottom: 1px solid var(--abu-200);
}
.akun__kepala-teks { min-width: 0; }
.akun__nama-besar { font-size: 13.5px; font-weight: 700; color: var(--abu-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akun__email { font-size: 11.5px; color: var(--abu-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; }

.akun__grup { padding: 6px; border-bottom: 1px solid var(--abu-100); }
.akun__grup:last-child { border-bottom: 0; }

.akun__butir {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--abu-700);
    text-align: left;
    cursor: pointer;
}
.akun__butir:hover { background: var(--abu-50); color: var(--abu-900); text-decoration: none; }
.akun__butir:focus-visible { outline: 2px solid var(--biru-500); outline-offset: -2px; }
.akun__butir-ikon { width: 17px; flex: 0 0 17px; text-align: center; }
.akun__butir--bahaya { color: var(--merah-600); font-weight: 600; }
.akun__butir--bahaya:hover { background: var(--merah-50); color: #b91c1c; }

@media (max-width: 620px) {
    /* Di layar sempit potret sudah cukup mewakili; nama pindah ke dalam menu. */
    .akun__teks, .akun__panah { display: none; }
    .akun__pemicu { padding: 4px; }
}

/* ------------------------------------------------------------------ Lonceng

   Menumpang kerangka menu akun: pembungkusnya tetap .akun sehingga perilaku
   buka/tutup, Escape, dan klik di luar sudah ditangani skrip yang sama.
   Yang ditambahkan di sini hanya rupa pemicunya dan daftar isinya.        */

.lonceng__pemicu {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}
.lonceng__pemicu:hover { background: var(--abu-100); }
.lonceng__pemicu:focus-visible { outline: 2px solid var(--biru-500); outline-offset: 2px; }

/* Lencana jumlah. Diletakkan menempel tepi kanan atas ikon dan tidak ikut
   melebarkan pemicunya, supaya bilah atas tidak bergeser saat angkanya
   berubah dari satu digit menjadi dua. */
.lonceng__hitung {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--merah-600);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.lonceng__menu { width: 330px; }

.lonceng__daftar { max-height: 340px; overflow-y: auto; }

.lonceng__butir {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--abu-100);
    text-decoration: none;
    color: inherit;
}
.lonceng__butir:last-child { border-bottom: 0; }
.lonceng__butir:hover { background: var(--abu-50); text-decoration: none; }

/* Yang belum dibaca ditandai pita di tepi kiri, bukan warna latar penuh:
   daftar yang seluruhnya berlatar biru justru membuat mana yang baru sulit
   dibedakan begitu notifikasi menumpuk. */
.lonceng__butir--baru { box-shadow: inset 3px 0 0 var(--biru-600); background: var(--biru-50); }

.lonceng__judul { font-size: 13px; font-weight: 650; color: var(--abu-900); }
.lonceng__pesan {
    font-size: 12px;
    color: var(--abu-600);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lonceng__waktu { font-size: 11px; color: var(--abu-400); }

.lonceng__kosong,
.lonceng__memuat { padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--abu-500); }

@media (max-width: 620px) {
    .lonceng__menu { width: calc(100vw - 24px); }
}

/* --------------------------------------------------------------- Pencarian */

/* ------------------------------------------------------------- Remah roti

   Menggantikan kotak pencarian pada bilah atas. Menunjukkan posisi halaman
   sekaligus memberi jalan kembali ke daftar induknya.                      */

.remah {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
}
.remah__rumah { flex: 0 0 auto; font-size: 14px; text-decoration: none; opacity: .75; }
.remah__rumah:hover { opacity: 1; text-decoration: none; }
.remah__pisah { color: var(--abu-300); flex: 0 0 auto; }
.remah__butir { color: var(--abu-500); white-space: nowrap; }
a.remah__butir:hover { color: var(--biru-600); text-decoration: none; }
.remah__butir--grup { color: var(--abu-400); }
.remah__butir--kini {
    color: var(--abu-900);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    /* Di layar sempit cukup halaman yang sedang dibuka. */
    .remah__butir--grup, .remah__rumah { display: none; }
    .remah__pisah:first-of-type { display: none; }
}

.cari-global { position: relative; flex: 1; max-width: 420px; }
.cari-global input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--abu-300);
    border-radius: 20px;
    font-size: 13.5px;
    background: var(--abu-50);
}
.cari-global input:focus { outline: none; border-color: var(--biru-500); background: #fff; box-shadow: 0 0 0 3px var(--biru-50); }
.cari-global__ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--abu-400); }

/* Pembungkus kotak cari di dalam formulir biasa.

   .cari-hasil di bawah ini diposisikan absolut, jadi ia menuntut induk yang
   berposisi. Pada bilah atas tugas itu dipegang .cari-global, tetapi gaya itu
   sekaligus membentuk inputnya menjadi pil berikon - tidak cocok dipakai
   sebagai bidang formulir. Kelas ini hanya menyediakan kerangka posisinya
   saja; tanpa itu daftar hasil melayang ke sudut halaman selebar layar. */
.cari-bidang { position: relative; }

.cari-hasil {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius);
    box-shadow: var(--bayang-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 60;
    display: none;
}
.cari-hasil--tampil { display: block; }
.cari-hasil__item { display: block; padding: 9px 13px; border-bottom: 1px solid var(--abu-100); color: inherit; }
.cari-hasil__item:last-child { border-bottom: 0; }
.cari-hasil__item:hover, .cari-hasil__item--fokus { background: var(--biru-50); text-decoration: none; }
.cari-hasil__kode { font-weight: 650; color: var(--biru-700); font-size: 13px; }
.cari-hasil__meta { font-size: 12px; color: var(--abu-500); }
.cari-hasil__kosong { padding: 14px; color: var(--abu-500); text-align: center; font-size: 13px; }

/* Butir hasil pada kotak cari formulir berupa <button>, bukan <a> seperti di
   bilah atas - memilihnya mengisi bidang, bukan berpindah halaman. Tombol
   membawa gaya bawaan peramban yang harus dilucuti dulu. */
button.cari-hasil__item {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--abu-100);
    background: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
button.cari-hasil__item:last-child { border-bottom: 0; }

/* Tombol pembersih di ujung kanan kotak cari. Muncul hanya setelah ada aset
   terpilih; tanpa itu ia menjadi tombol yang tidak pernah berguna. */
.cari-bidang__hapus {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--abu-200);
    color: var(--abu-600);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.cari-bidang__hapus:hover { background: var(--abu-300); color: var(--abu-800); }

/* ------------------------------------------------------------------- Kartu */

.kartu {
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius);
    box-shadow: var(--bayang);
    margin-bottom: 16px;
}
.kartu__kepala {
    padding: 13px 16px;
    border-bottom: 1px solid var(--abu-200);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Judul boleh menyusut sampai terpotong elipsis; tombol di sebelahnya tidak
   pernah ikut menyusut, sebab tombol setengah lebar tidak lagi dapat ditekan
   dengan yakin. Dengan begitu kepala kartu tetap sebaris pada kolom sempit
   tanpa perlu aturan tersendiri per kartu. */
.kartu__judul {
    font-weight: 650;
    font-size: 14.5px;
    color: var(--abu-900);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kartu__aksi { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }

.kartu__isi { padding: 16px; }
.kartu__isi--rapat { padding: 0; }
.kartu__kaki { padding: 11px 16px; border-top: 1px solid var(--abu-200); background: var(--abu-50); border-radius: 0 0 var(--radius) var(--radius); }

/* --------------------------------------------------------------- Statistik */

.grid-statistik {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.statistik {
    background: #fff;
    border: 1px solid var(--abu-200);
    border-left: 4px solid var(--biru-600);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--bayang);
}
.statistik--hijau { border-left-color: var(--hijau-600); }
.statistik--kuning { border-left-color: var(--kuning-600); }
.statistik--ungu { border-left-color: var(--ungu-600); }
.statistik__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--abu-500); font-weight: 700; }
.statistik__nilai { font-size: 26px; font-weight: 700; color: var(--abu-900); line-height: 1.15; margin-top: 4px; }
.statistik__satuan { font-size: 13px; font-weight: 500; color: var(--abu-500); }
.statistik__kaki { font-size: 12px; color: var(--abu-500); margin-top: 3px; }

/* ------------------------------------------------------------------ Tabel */

.tabel-bungkus { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th, .tabel td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--abu-200); vertical-align: top; }
.tabel thead th {
    background: var(--abu-50);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--abu-600);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--abu-200);
}
.tabel tbody tr:hover { background: var(--abu-50); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel td.angka, .tabel th.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel tfoot td { background: var(--abu-50); font-weight: 650; border-top: 2px solid var(--abu-300); }
.tabel--rapat th, .tabel--rapat td { padding: 6px 10px; }

/* Catatan asal data di bawah tabel - dipakai untuk menerangkan kolom yang
   angkanya masih perkiraan. Dibuat cukup terbaca, bukan cetakan kecil yang
   tersembunyi, sebab justru catatan inilah yang membuat tabelnya jujur. */
.catatan-batas {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--abu-300);
    border-radius: 0 8px 8px 0;
    background: var(--abu-50);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--abu-600);
}
.catatan-batas__tanda { font-weight: 700; color: var(--abu-700); }

/* Penanda di popup peta wilayah - sengaja lebih redup dari angkanya supaya
   membatasi bacaan, bukan merebut perhatian dari angkanya sendiri. */
.popup-perkiraan { color: var(--abu-500); font-size: .9em; }

.kosong { padding: 40px 20px; text-align: center; color: var(--abu-500); }
.kosong__ikon { font-size: 34px; opacity: .35; display: block; margin-bottom: 8px; }
/* Untuk kartu sempit: keadaan kosong yang tetap memakan 40px atas-bawah
   membuat kartunya menjulang tanpa isi. */
.kosong--rapat { padding: 22px 16px; font-size: 12.5px; }
.kosong--rapat .kosong__ikon { font-size: 24px; margin-bottom: 5px; }

/* ------------------------------------------------- Jejak aktivitas ringkas

   Wujud padat dari .jejak pada halaman Log Aktivitas: dipakai di dalam kartu
   sempit, jadi tanpa kolom waktu tersendiri dan tanpa alamat IP. */
.jejak-ringkas {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--abu-100);
}
.jejak-ringkas:last-child { border-bottom: 0; }
.jejak-ringkas:hover { background: var(--abu-50); }
.jejak-ringkas__ikon {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--abu-100);
    font-size: 13px;
}
.jejak-ringkas__isi { min-width: 0; }
.jejak-ringkas__teks {
    font-size: 13px;
    font-weight: 600;
    color: var(--abu-800);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.jejak-ringkas__meta { font-size: 11.5px; color: var(--abu-500); margin-top: 2px; }
.jejak-ringkas__meta strong { color: var(--abu-700); font-weight: 650; }

/* -------------------------------------------------- Rincian perubahan log

   Nilai sebelum/sesudah pada log aktivitas. Dibungkus <details> supaya
   daftarnya tetap dapat dipindai: yang dicari saat halaman dibuka hampir
   selalu "siapa dan kapan", sedangkan rinciannya baru dibutuhkan pada satu
   baris tertentu.                                                          */

.jejak-ubah { margin-top: 6px; }
.jejak-ubah__pemicu {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--biru-600);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.jejak-ubah__pemicu::-webkit-details-marker { display: none; }
.jejak-ubah__pemicu::before { content: '▸ '; }
.jejak-ubah[open] .jejak-ubah__pemicu::before { content: '▾ '; }
.jejak-ubah__pemicu:hover { text-decoration: underline; }

.jejak-ubah__isi {
    margin-top: 7px;
    padding: 9px 11px;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius-sm);
    background: var(--abu-50);
}

.jejak-ubah__tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.jejak-ubah__tabel th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--abu-500);
    padding: 0 8px 4px 0;
    font-weight: 700;
}
.jejak-ubah__tabel td { padding: 3px 8px 3px 0; vertical-align: top; overflow-wrap: anywhere; }
.jejak-ubah__lama { color: var(--abu-500); text-decoration: line-through; }
.jejak-ubah__baru { color: var(--abu-900); font-weight: 650; }

/* Kolom yang nilainya tidak berubah tetap ditampilkan sebagai pembanding,
   tetapi diredupkan dan coretannya dilepas - mencoret nilai yang tidak
   berubah membaca seolah kolom itu ikut dihapus. */
.jejak-ubah__baris--sama td { color: var(--abu-400); }
.jejak-ubah__baris--sama .jejak-ubah__lama { text-decoration: none; }
.jejak-ubah__baris--sama .jejak-ubah__baru { font-weight: 400; }

.jejak-ubah__daftar {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: 2px 10px;
    margin: 8px 0 0;
    font-size: 12px;
}
.jejak-ubah__daftar dt { color: var(--abu-500); }
.jejak-ubah__daftar dd { margin: 0; color: var(--abu-800); overflow-wrap: anywhere; }

.jejak-ubah__peringatan { margin-top: 8px; font-size: 11.5px; color: #b45309; }
.jejak-ubah__peringatan ul { margin: 3px 0 0; padding-left: 17px; }

/* ==========================================================================
   GRAFIK

   Seluruh grafik memakai satu warna - biru tua - sebab yang diwakili panjang
   batang maupun tinggi garis selalu besaran, bukan identitas. Identitas
   dibawa titik warna kecil di sebelah nama, warna yang sama dengan poligon
   di peta.

   Warna master data tidak dipakai sebagai warna batang dengan sengaja: nilai
   bawaannya gagal uji keterbedaan warna (ungu #7c3aed dan biru #2563eb hanya
   terpaut ΔE 0,4 pada mata deuteranopia; hijau #16a34a dan #65a30d terpaut
   5,7 bahkan pada penglihatan penuh), sehingga deretan batang berwarna-warni
   justru menyamarkan datanya. Sebagai titik kecil di samping tulisan warna
   itu aman dan tetap menyambung dengan peta.

   Warna cerah pada kartu ikhtisar murni hiasan kartu, tidak mewakili nilai
   apa pun - karena itu boleh berbeda-beda.
   ========================================================================== */

.grafik {
    --grafik-tinta: #1d4ed8;
    --grafik-alur: #e6edf9;
    --grafik-redup: #94a3b8;
}

.grafik-kosong {
    padding: 26px 16px;
    text-align: center;
    color: var(--abu-500);
    font-size: 13px;
}

/* --------------------------------------------------- Peta sebaran (dasbor)

   Peta pilihan warna: pekat-tipis warnanya mewakili luas aset padukuhan.
   Satu rona dari muda ke tua, bukan pelangi - yang disandikan besaran, dan
   ramp pelangi tidak punya urutan yang terbaca mata.                        */

.peta-sebaran { display: flex; flex-direction: column; gap: 9px; height: 100%; }
.peta-sebaran__kanvas {
    flex: 1;
    /* Tinggi mengikuti layar, dengan lantai dan langit-langit.
       Peta ini selalu memaskan seluruh batas kalurahan ke dalam wadahnya,
       jadi tingginya yang menentukan seberapa besar wilayahnya tergambar -
       wadah pendek memaksa zoom mundur sampai nama padukuhan berdesakan.
       Langit-langitnya menahan agar pada layar tinggi kartu ini tidak
       mendorong seluruh isi dasbor turun melewati satu layar. */
    min-height: clamp(460px, 64vh, 760px);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--abu-200);
    background: var(--abu-100);

    /* Leaflet menyusun lapisannya sendiri sampai z-index 1000 - jauh di atas
       bilah atas yang lengket. Tanpa kurungan ini, tombol zoom dan tanda nama
       padukuhan melayang menutupi bilah atas begitu halaman digulir. Membuat
       stacking context sendiri membuat seluruh angka z-index Leaflet hanya
       berlaku di dalam kotak peta, sehingga urusannya selesai tanpa perlu
       menaikkan z-index bilah atas melebihi angka Leaflet - cara yang selalu
       pecah lagi begitu ada komponen baru. */
    isolation: isolate;
    position: relative;
    z-index: 0;
}
.peta-sebaran__petunjuk { font-size: 11.5px; color: var(--abu-500); line-height: 1.5; }
.peta-sebaran__kosong { padding: 40px 20px; text-align: center; color: var(--abu-500); font-size: 13px; }

/* Nama padukuhan ditempel tetap; garis luar putih tipis menjaganya terbaca
   di atas warna wilayah yang tua maupun muda. */
.peta-sebaran__nama { pointer-events: none; }
/* Disembunyikan dengan visibility, bukan display, supaya lebar tulisannya
   tetap dapat diukur saat memutuskan muat atau tidak. */
.peta-sebaran__nama--sembunyi { visibility: hidden; }
/* Wilayah yang sedang ditunjuk tetap dikenali walau namanya tadi dilepas
   karena berdesakan. */
.peta-sebaran__nama--paksa { visibility: visible; z-index: 500; }
.peta-sebaran__nama--paksa span { font-size: 11.5px; color: #0b1220; }
/* inline-block, bukan block: induknya berlebar nol (iconSize 0), sehingga
   span block ikut berlebar nol dan lebarnya tak dapat diukur. */
.peta-sebaran__nama span {
    display: inline-block;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 700;
    color: #0f172a;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* Rincian padukuhan dipasang sebagai popup, bukan tooltip: tooltip Leaflet
   menolak kursor sehingga tombol di dalamnya tidak dapat diklik.

   Susunannya bertingkat - kepala berpita warna, satu angka utama, lalu
   rincian - sebab delapan baris seragam membuat mata tidak tahu harus mulai
   dari mana.                                                               */

.leaflet-popup.peta-popup .leaflet-popup-content-wrapper {
    background: #101a2c;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(2, 10, 26, .45);
    padding: 0;
    overflow: hidden;
}
.leaflet-popup.peta-popup .leaflet-popup-content { margin: 0; font-family: var(--font); font-size: 12px; line-height: 1.5; }
.leaflet-popup.peta-popup .leaflet-popup-tip { background: #101a2c; }
.leaflet-popup.peta-popup a.leaflet-popup-close-button {
    color: rgba(255, 255, 255, .55);
    width: 26px; height: 26px;
    padding: 5px 0 0 0;
    font-size: 17px;
}
.leaflet-popup.peta-popup a.leaflet-popup-close-button:hover { color: #fff; background: rgba(255, 255, 255, .1); border-radius: 0 12px 0 8px; }

/* Kepala: pita warna sesuai wilayahnya di peta, jadi popup dan poligonnya
   terbaca sebagai satu hal yang sama. */
.peta-popup__kepala {
    position: relative;
    padding: 11px 34px 11px 15px;
    background: linear-gradient(120deg, rgba(255, 255, 255, .07), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.peta-popup__kepala::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--pita, var(--biru-500));
}
.peta-popup__judul { font-weight: 700; font-size: 14.5px; letter-spacing: .01em; }
.peta-popup__anak { color: #93a4bd; font-size: 11px; margin-top: 1px; }

/* Angka utama: besaran yang justru diwakili warna peta. */
.peta-popup__utama { padding: 11px 15px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.peta-popup__label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7f93b0;
}
.peta-popup__angka { font-size: 21px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.peta-popup__angka span { font-size: 12px; font-weight: 600; color: #93a4bd; margin-left: 2px; }
.peta-popup__bagian { font-size: 10.5px; color: #93a4bd; margin-top: 3px; }

.peta-popup__tabel { width: 100%; border-collapse: collapse; margin: 4px 0; }
.peta-popup__tabel td { padding: 3px 15px; vertical-align: top; }
.peta-popup__tabel td:first-child { color: #a9b8ce; padding-right: 12px; white-space: nowrap; }
.peta-popup__tabel td:last-child { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.peta-popup__sisi { font-weight: 400; color: #7f93b0; font-size: 10.5px; }

/* Kaki: tombol kecil di sudut kanan. Tombol selebar isi popup berebut
   perhatian dengan angka yang justru jadi alasan popup ini dibuka. */
.peta-popup__kaki {
    display: flex;
    justify-content: flex-end;
    padding: 9px 15px 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 5px;
}

/* Warna tulisan ditulis !important sebab aturan global "a { color: biru }"
   membuat tulisan biru di atas tombol biru - praktis tak terbaca. */
.leaflet-popup.peta-popup a.peta-popup__tombol {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px 6px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2f74e0, var(--biru-600));
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(29, 78, 216, .5);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.leaflet-popup.peta-popup a.peta-popup__tombol:hover {
    background: linear-gradient(135deg, #4a8bf0, var(--biru-500));
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(59, 130, 246, .55);
}
.peta-popup__ikon { font-size: 12.5px; line-height: 1; }
.peta-popup__teks { color: #fff; }
.peta-popup__panah { font-size: 15px; line-height: 1; transition: transform .14s ease; }
.leaflet-popup.peta-popup a.peta-popup__tombol:hover .peta-popup__panah { transform: translateX(3px); }

/* Ekor menyesuaikan letak akhir popup terhadap acuannya. */
.leaflet-popup.peta-popup--bawah .leaflet-popup-tip-container {
    top: -19px;
    bottom: auto;
    transform: rotate(180deg);
}
.leaflet-popup.peta-popup--tanpa-ekor .leaflet-popup-tip-container { display: none; }

/* Wilayah yang sedang ditunjuk diangkat dari tetangganya. */
.peta-sebaran__wilayah--sorot { filter: drop-shadow(0 3px 7px rgba(2, 10, 26, .5)); }

.peta-legenda {
    background: rgba(255, 255, 255, .94);
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    box-shadow: var(--bayang);
    font-family: var(--font);
}
.peta-legenda__judul { font-size: 10.5px; font-weight: 700; color: var(--abu-700); margin-bottom: 4px; }
.peta-legenda__skala { display: flex; }
.peta-legenda__kotak { width: 22px; height: 9px; }
.peta-legenda__kotak:first-child { border-radius: 2px 0 0 2px; }
.peta-legenda__kotak:last-child { border-radius: 0 2px 2px 0; }
.peta-legenda__tera {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: var(--abu-500);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Legenda keadaan pembayaran sewa. Berbeda dari legenda skala di atasnya:
   yang itu satu batang gradien dengan tera di kedua ujungnya, yang ini
   deretan keterangan warna yang masing-masing berdiri sendiri.

   Mengambang di sudut kanan atas panggung peta - bukan mengalir sesudah
   kanvasnya - supaya tidak menggeser peta saat dinyalakan, dan tetap terbaca
   sambil menggeser peta di bawahnya. */
.peta-legenda--kunci {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 600;
    min-width: 172px;
}
.peta-legenda__baris {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--abu-700);
    padding: 2px 0;
}
.peta-legenda__tanda {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .12);
}

/* -------------------------------------------------------- Statistik ringkas */

.statistik-ringkas { display: flex; flex-direction: column; }
.statistik-ringkas__baris {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--abu-100);
}
.statistik-ringkas__baris:last-child { border-bottom: 0; }
.statistik-ringkas__ikon {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--biru-50);
    font-size: 14px;
}
.statistik-ringkas__teks { min-width: 0; flex: 1; }
.statistik-ringkas__label { font-size: 12px; color: var(--abu-500); }
.statistik-ringkas__nilai { font-size: 15px; font-weight: 700; color: var(--abu-900); font-variant-numeric: tabular-nums; }
.statistik-ringkas__nilai small { font-size: 11.5px; font-weight: 500; color: var(--abu-500); }
.statistik-ringkas__catatan { font-size: 11px; color: var(--abu-500); margin-top: 1px; }

/* ----------------------------------------------------------------- Donat */

/* Berposisi relatif supaya tip di dalamnya berpatokan pada grafik ini,
   bukan pada kartu di luarnya. Cincin di atas, tabel rincian di bawahnya. */
.grafik-donat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.grafik-donat__gambar { position: relative; width: 176px; flex: 0 0 auto; }
.grafik-donat__gambar svg { display: block; width: 100%; height: auto; }

/* Sela sewarna alas yang memisahkan juring dibuat oleh stroke-dasharray,
   bukan garis tepi - garis tepi menambah tinta yang bukan data. */
.grafik-donat__juring { fill: none; stroke-width: 30; cursor: pointer; transition: opacity .12s, stroke-width .12s; }

/* Saat satu juring ditunjuk, sisanya diredupkan supaya yang dibicarakan
   tip benar-benar jelas yang mana. */
.grafik-donat--sorot .grafik-donat__juring { opacity: .28; }
.grafik-donat--sorot .grafik-donat__juring--aktif { opacity: 1; stroke-width: 34; }

.grafik-donat__pusat {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}
.grafik-donat__total { font-size: 27px; font-weight: 700; color: var(--abu-900); line-height: 1.1; }
.grafik-donat__satuan { font-size: 11.5px; color: var(--abu-500); }

/* ---- Tabel rincian, dua kolom ---- */

.grafik-donat__tabel {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
    border-top: 1px solid var(--abu-200);
    padding-top: 12px;
}
.grafik-donat__daftar { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }

.grafik-donat__baris { cursor: pointer; transition: background .12s; }
/* Baris tabel ikut menyala saat juringnya ditunjuk, dan sebaliknya -
   mencocokkan warna juring dengan daftarnya bagian yang paling melelahkan. */
.grafik-donat__baris--aktif { background: var(--abu-100); }
.grafik-donat__baris--aktif .grafik-donat__nama { color: var(--abu-900); font-weight: 600; }

.grafik-donat__daftar td { padding: 3.5px 3px; border-bottom: 1px solid var(--abu-100); vertical-align: middle; }
.grafik-donat__daftar tr:last-child td { border-bottom: 0; }
.grafik-donat__daftar td:first-child { border-radius: 4px 0 0 4px; padding-left: 6px; }
.grafik-donat__daftar td:last-child { border-radius: 0 4px 4px 0; padding-right: 6px; }

.grafik-donat__sel-tanda { width: 17px; }
.grafik-donat__tanda { display: block; width: 11px; height: 11px; border-radius: 3px; }

.grafik-donat__nama { color: var(--abu-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafik-donat__nilai { width: 38px; text-align: right; font-weight: 650; color: var(--abu-900); font-variant-numeric: tabular-nums; }
.grafik-donat__persen { width: 42px; text-align: right; color: var(--abu-500); font-variant-numeric: tabular-nums; }

/* ---- Tip ---- */

.grafik-donat__tip {
    position: absolute;
    z-index: 6;
    min-width: 158px;
    max-width: 250px;
    padding: 8px 11px;
    background: var(--abu-900);
    color: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--bayang-lg);
    font-size: 12px;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity .1s;
}
.grafik-donat__tip--tampil { opacity: 1; }
.grafik-donat__tip-judul { font-weight: 700; margin-bottom: 2px; }
.grafik-donat__tip-baris { display: flex; justify-content: space-between; gap: 14px; color: #cbd5e1; }
.grafik-donat__tip-baris strong { color: #fff; font-variant-numeric: tabular-nums; }
.grafik-donat__tip-rinci {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 420px) {
    /* Pada layar sesempit ini dua kolom membuat namanya terpotong semua. */
    .grafik-donat__tabel { grid-template-columns: minmax(0, 1fr); }
}

/* Keterangan bawah grafik. Deret tunggal tidak memakai kotak legenda, jadi
   baris inilah yang menyebutkan apa yang digambar. */
.grafik-kaki {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--abu-100);
    font-size: 12px;
    color: var(--abu-500);
}
.grafik-kunci { display: inline-flex; align-items: center; gap: 7px; color: var(--abu-700); font-weight: 600; }
.grafik-kunci__tanda { width: 15px; height: 3px; border-radius: 2px; background: #1d4ed8; }

/* ==========================================================================
   DASBOR

   Halaman pertama yang dilihat setelah masuk, jadi urutannya sengaja dari
   yang paling besar ke yang paling rinci: satu angka utama, empat angka
   pokok, lalu grafik, lalu tabel.
   ========================================================================== */

/* ------------------------------------------------------------- Panji atas

   Kepala dasbor. Angka utamanya luas wilayah menurut dokumen resmi; garis
   kaki di bawahnya berisi apa yang sudah terdata di sistem. Keduanya sengaja
   dipisah bidang - yang satu kenyataan administratif, yang lain kemajuan
   pendataan - supaya tidak tertukar dibaca sebagai satu angka yang sama.   */

.panji {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(122deg, #071c3f 0%, var(--biru-900) 38%, #17539c 100%);
    color: #dbe6f7;
    box-shadow: 0 10px 30px rgba(8, 30, 66, .22);
}

/* Lingkaran samar dan sapuan terang memberi kedalaman pada bidang warna
   yang lebar tanpa menambah gambar apa pun. */
.panji::before,
.panji::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.panji::before {
    width: 420px; height: 420px;
    top: -230px; right: 4%;
    background: radial-gradient(circle, rgba(96, 165, 250, .28), transparent 68%);
}
.panji::after {
    width: 260px; height: 260px;
    bottom: -150px; right: 26%;
    background: rgba(255, 255, 255, .05);
}

/* Dua kolom berdampingan: identitas di kiri, angka luas di kanan. Keduanya
   melipat menjadi satu lajur pada layar sempit lewat flex-wrap, jadi tidak
   ada media query tersendiri untuk itu. */
.panji__isi {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px 30px;
    flex-wrap: wrap;
    padding: 18px 24px;
}

.panji__kiri {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Garis pemisah tipis menandai dua kolom itu memang dua kelompok keterangan,
   tanpa menambah kotak atau latar baru. Ikut hilang saat keduanya melipat -
   sebagai garis kiri pada lajur tunggal, ia hanya membuat teksnya menjorok
   tanpa memisahkan apa pun. */
.panji__kanan {
    flex: 1 1 330px;
    min-width: 0;
    padding-left: 26px;
    border-left: 1px solid rgba(255, 255, 255, .13);
}

@media (max-width: 900px) {
    .panji__kanan { padding-left: 0; border-left: 0; }
}

.panji__lambang {
    width: auto; height: 62px;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .35));
}

.panji__utama { flex: 1 1 auto; min-width: 0; }

.panji__salam { font-size: 13px; color: #9dbbe4; margin: 0 0 4px; }
.panji__salam strong { color: #fff; font-weight: 650; }

.panji__judul {
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.01em;
}
.panji__alamat { font-size: 12.5px; color: #9dbbe4; margin: 3px 0 0; }

.panji__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8fb0dd;
    margin-bottom: 3px;
}

/* Angka utama halaman - satu saja, memakai huruf yang sama dengan sisa
   antarmuka. Angka proporsional, bukan tabular: pada ukuran sebesar ini
   lebar digit yang diseragamkan membuat angkanya tampak renggang. */
.panji__angka {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 9px;
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.panji__angka span { font-size: 18px; font-weight: 600; color: #9dbbe4; }
.panji__setara {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: #bcd3f2;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
}

.panji__cip { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.panji__cip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .17);
    font-size: 12px;
    color: #e6eefb;
}
.panji__cip strong { font-weight: 700; color: #fff; font-size: 13.5px; }
.panji__cip--samar { color: #9dbbe4 !important; background: transparent !important; border-style: dashed !important; }

/* Penjelas di bawah angka besar: apa yang diukur angka itu, dan berapa angka
   pembandingnya. Tanpa ini pembaca tidak punya cara tahu bahwa 889 ha dan
   1.104 ha sama-sama resmi. */
.panji__banding {
    max-width: 46em;
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #a8c3e6;
}
.panji__banding strong { color: #e6eefb; font-weight: 700; }

.panji__sumber { font-size: 11px; color: #8fb0dd; margin: 8px 0 0; }
.panji__sumber a { color: #bcd3f2; text-decoration: underline; }
.panji__sumber a:hover { color: #fff; }

/* Garis kaki: angka yang benar-benar tercatat di sistem. */
.panji__kaki {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    padding: 9px 24px;
    background: rgba(2, 12, 32, .34);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 12px;
    color: #a9c3e6;
}
.panji__kaki strong { color: #fff; font-weight: 700; font-size: 13px; }
.panji__kaki-judul {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7f9dc6;
}

@media (max-width: 700px) {
    .panji__isi { padding: 20px 18px 16px; gap: 15px; }
    .panji__lambang { height: 54px; }
    .panji__judul { font-size: 19px; }
    .panji__angka { font-size: 32px; }
    .panji__kaki { padding: 10px 18px; }
}

@media (max-width: 480px) {
    .panji__isi { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------- Tabel aset terbaru

   Daftar pendek di kaki dasbor. Kolomnya banyak, jadi yang membuatnya mudah
   dibaca bukan hiasan melainkan penataan: nomor urut berupa cakram kecil
   sebagai jangkar mata, nama aset tebal sebagai satu-satunya titik berat,
   sisanya sengaja dibiarkan tenang.                                        */

/* Dua belas kolom harus muat dalam satu layar tanpa digulir mendatar. Yang
   dipangkas bukan datanya melainkan ruang di sekelilingnya: bantalan sel,
   ukuran huruf kepala kolom, dan lebar tulisan bergaya mesin ketik. Hanya
   dua kolom berisi kalimat yang boleh membungkus. */
.tabel-baru { width: 100%; table-layout: auto; }
.tabel-baru th, .tabel-baru td { white-space: nowrap; padding: 6px 6px; }
.tabel-baru thead th { font-size: 10px; letter-spacing: .02em; }
.tabel-baru .mono { font-size: 11px; }

.tabel-baru__sel-nama { white-space: normal; min-width: 172px; }
.tabel-baru__sel-manfaat { white-space: normal; min-width: 124px; }

.tabel-baru__no { width: 46px; text-align: center; }
.tabel-baru__urut {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--biru-50);
    color: var(--biru-700);
    font-size: 11.5px;
    font-weight: 700;
}

.tabel-baru__nama { color: var(--abu-900); font-weight: 650; }
.tabel-baru__waktu { font-size: 11.5px; color: var(--abu-500); white-space: nowrap; margin-top: 1px; }
.tabel-baru__nama:hover { color: var(--biru-600); }

/* Penanda baris teratas - satu-satunya yang benar-benar baru masuk. */
.tabel-baru__cap {
    display: table;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--hijau-50);
    color: #15803d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: middle;
}

.tabel-baru tbody tr { transition: background .12s; }
.tabel-baru tbody tr:hover { background: var(--biru-50); }
.tabel-baru tbody tr:hover .tabel-baru__urut { background: var(--biru-600); color: #fff; }

/* ---------------------------------------------------------- Kartu ikhtisar */

.ikhtisar { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 14px; margin-bottom: 16px; }

.ikhtisar__kartu {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px 16px 14px;
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: 14px;
    box-shadow: var(--bayang);
    overflow: hidden;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.ikhtisar__kartu:hover {
    transform: translateY(-2px);
    box-shadow: var(--bayang-lg);
    border-color: var(--pita, var(--biru-600));
}

/* Pita warna di tepi atas dan sapuan lembut di pojok kanan: hiasan pembeda
   kartu, bukan penyandi nilai - yang menyandikan nilai hanya meter di bawah.
   Pitanya memudar ke kanan supaya tidak terbaca sebagai bilah terisi penuh
   dan tertukar dengan meter itu. */
.ikhtisar__kartu::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pita, var(--biru-600)), transparent 92%);
}
.ikhtisar__kartu::after {
    content: '';
    position: absolute;
    top: -52px; right: -52px;
    width: 138px; height: 138px;
    border-radius: 50%;
    background: var(--pita-lembut, var(--biru-50));
    pointer-events: none;
}

/* Seluruh isi diangkat di atas sapuan pojok itu. */
.ikhtisar__kepala,
.ikhtisar__nilai,
.ikhtisar__meter,
.ikhtisar__kaki { position: relative; z-index: 1; }

.ikhtisar__kepala { display: flex; align-items: center; gap: 9px; }
.ikhtisar__ikon {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--pita-lembut, var(--biru-50));
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
    font-size: 16px;
}
.ikhtisar__label { font-size: 12px; color: var(--abu-600); font-weight: 650; min-width: 0; }

.ikhtisar__nilai {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 11px;
    font-size: 30px;
    font-weight: 750;
    color: var(--abu-900);
    line-height: 1.1;
    letter-spacing: -.02em;
}
.ikhtisar__nilai small { font-size: 13px; font-weight: 600; color: var(--abu-400); }

/* Persentase dipisahkan ke ujung kanan, bukan diselipkan di belakang angka:
   ia besaran lain - bagian dari keseluruhan - dan berdempetan dengan angka
   pokoknya membuat keduanya terbaca sebagai satu bilangan panjang. */
.ikhtisar__persen {
    margin-left: auto;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--pita, var(--biru-600));
    background: var(--pita-lembut, var(--biru-50));
    border-radius: 20px;
    padding: 2px 9px;
    align-self: center;
}

.ikhtisar__meter {
    height: 6px;
    border-radius: 20px;
    background: var(--abu-100);
    overflow: hidden;
    margin-top: 11px;
}
.ikhtisar__meter span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: var(--pita, var(--biru-600));
}

/* Didorong ke dasar kartu supaya seluruh kaki sejajar walau kartu tanpa meter
   menyisakan ruang lebih. */
.ikhtisar__kaki { font-size: 11.5px; color: var(--abu-500); margin-top: auto; padding-top: 9px; }

/* ---------------------------------------------------------------- Lencana */

.lencana {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 650;
    background: var(--abu-100);
    color: var(--abu-700);
    white-space: nowrap;
}
.lencana--biru { background: var(--biru-50); color: var(--biru-700); }
.lencana--hijau { background: var(--hijau-50); color: #15803d; }
.lencana--kuning { background: var(--kuning-50); color: #b45309; }
.lencana--merah { background: var(--merah-50); color: #b91c1c; }
.lencana--ungu { background: var(--ungu-50); color: var(--ungu-700); }
.lencana--warna { color: #fff; }

.titik-warna { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }

/* ---------------------------------------------------------------- Tombol */

/* Tombol biasa berdiri di atas kartu putih, dan putih di atas putih dengan
   bingkai setipis satu piksel abu tidak terbaca sebagai tombol - ia terbaca
   sebagai keterangan yang kebetulan berkotak. Tiga hal kecil memperbaikinya
   tanpa menambah satu piksel pun ukurannya: landaian tipis yang memberi
   permukaannya arah cahaya, bingkai yang lebih tegas, dan bayangan sejauh
   satu piksel yang mengangkatnya dari kartu.

   Ukurannya sengaja tidak diubah: tombol ini dipakai di seluruh aplikasi,
   termasuk pada baris tabel yang tingginya sudah dihitung. */
.tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--abu-300);
    background: linear-gradient(180deg, #fff, var(--abu-50));
    color: var(--abu-800);
    font-size: 13.5px;
    font-family: inherit;
    /* Tulisan tombol tidak ditebalkan. Yang membedakannya dari teks biasa
       sudah bidang warna dan bingkainya; menebalkannya sekalian membuat
       sederet tombol berteriak lebih keras daripada judul di sebelahnya.
       Tombol berbidang penuh - utama, hijau, bahaya - dikecualikan: ia satu
       per layar, dan memang harus ditemukan lebih dulu daripada yang lain. */
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .07);
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .12s;
}

/* Sentuhan tetikus membawanya ke warna biru tautan: yang dicari mata saat
   ragu bukan bidang yang lebih terang, melainkan tanda bahwa benda ini
   memang dapat ditekan. */
.tombol:hover {
    background: linear-gradient(180deg, #fff, var(--biru-50));
    border-color: var(--biru-500);
    color: var(--biru-700);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
    text-decoration: none;
}
.tombol:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.tombol:focus-visible { outline: 2px solid var(--biru-500); outline-offset: 2px; }
.tombol:disabled, .tombol[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Tombol berbidang penuh: landaian dari warna terang ke warna pokoknya, plus
   bayangan sewarna. Bayangan berwarna inilah yang membuatnya terlihat lebih
   dulu daripada apa pun di sekelilingnya, bukan ukurannya. */
.tombol--utama {
    background: linear-gradient(180deg, var(--biru-500), var(--biru-600));
    border-color: var(--biru-600);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(29, 78, 216, .32);
}
.tombol--utama:hover {
    background: linear-gradient(180deg, #5b9bff, var(--biru-600));
    border-color: var(--biru-700);
    color: #fff;
    box-shadow: 0 6px 16px rgba(29, 78, 216, .42);
}
.tombol--hijau {
    background: linear-gradient(180deg, #22c55e, var(--hijau-600));
    border-color: var(--hijau-600);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(22, 163, 74, .3);
}
.tombol--hijau:hover {
    background: linear-gradient(180deg, #34d76e, #15803d);
    border-color: #15803d;
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, .4);
}
.tombol--bahaya {
    background: linear-gradient(180deg, #ef4444, var(--merah-600));
    border-color: var(--merah-600);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(220, 38, 38, .3);
}
.tombol--bahaya:hover {
    background: linear-gradient(180deg, #f45b5b, #b91c1c);
    border-color: #b91c1c;
    color: #fff;
    box-shadow: 0 6px 16px rgba(220, 38, 38, .4);
}
.tombol--garis-bahaya { color: var(--merah-600); border-color: #fecaca; }
.tombol--garis-bahaya:hover {
    background: linear-gradient(180deg, #fff, var(--merah-50));
    border-color: var(--merah-600);
    color: var(--merah-600);
}
.tombol--kecil { padding: 5px 10px; font-size: 12.5px; }
.tombol--blok { width: 100%; }

/* Tombol tindakan di kepala kartu - "Buka Peta Wilayah", "Lihat Semua",
   sepasang ikon laporan - adalah jalan keluar dari kartu menuju halaman yang
   lebih rinci. Bidangnya dibiru-mudakan sejak diam, tidak menunggu disentuh:
   di kepala kartu tidak ada apa pun selain judul, sehingga tombol yang
   sewarna kartunya praktis tidak pernah ditemukan orang yang belum tahu ia
   ada di situ. Tombol yang sudah berbidang warna tidak diganggu. */
.kartu__aksi .tombol:not(.tombol--utama):not(.tombol--hijau):not(.tombol--bahaya):not(.tombol--garis-bahaya) {
    background: linear-gradient(180deg, var(--biru-50), #dbeafe);
    border-color: color-mix(in srgb, var(--biru-600) 38%, var(--abu-200));
    color: var(--biru-700);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(29, 78, 216, .15);
}

/* Disentuh, ia terisi penuh. Perubahan dari bidang muda ke bidang pekat jauh
   lebih terasa daripada bidang muda yang sekadar menjadi sedikit lebih tua -
   dan itulah tanda paling murah bahwa tekanan tetikus akan sampai. */
.kartu__aksi .tombol:not(.tombol--utama):not(.tombol--hijau):not(.tombol--bahaya):not(.tombol--garis-bahaya):hover {
    background: linear-gradient(180deg, var(--biru-500), var(--biru-600));
    border-color: var(--biru-600);
    color: #fff;
    box-shadow: 0 6px 14px rgba(29, 78, 216, .35);
}

/* Tombol aksi baris tabel didorong ke ujung kanan sel. Kolomnya selalu yang
   terakhir, dan tombol yang menggantung di tepi kiri sel lebar menyisakan
   jarak kosong yang membuatnya tampak tidak berhubungan dengan barisnya. */
/* Deret tombol tindakan pada satu baris tabel.

   Sengaja TIDAK melipat. Tombol yang jatuh ke baris kedua menaikkan tinggi
   barisnya sendiri, sehingga satu baris terlihat lebih tinggi daripada
   tetangganya dan tabel kehilangan irama bacanya. Bila ruangnya memang
   kurang, yang benar adalah melebarkan kolomnya atau meringkas tombolnya
   menjadi ikon - bukan membiarkannya melipat.

   flex-shrink dimatikan supaya tulisan di dalam tombol tidak ikut terjepit
   menjadi dua baris ketika kolomnya sempit. */
.aksi-baris { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; }
.aksi-baris > * { flex: 0 0 auto; }

/* Tombol berikon saja: persegi, tanpa tulisan. Maknanya dititipkan pada
   title dan aria-label - bukan dihilangkan - sehingga tetap terbaca pembaca
   layar maupun kursor yang berhenti sejenak di atasnya. */
.tombol--ikon {
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 30px;
}
.tombol--ikon .ikon { display: block; }
.tombol--ikon.tombol--kecil { width: 28px; height: 28px; flex-basis: 28px; }

/* ---------------------------------------------------------------- Formulir */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kolom-penuh { grid-column: 1 / -1; }

.bidang { margin-bottom: 2px; }
.bidang__label { display: block; font-size: 12.5px; font-weight: 650; color: var(--abu-700); margin-bottom: 5px; }
.bidang__wajib { color: var(--merah-600); }
.bidang__petunjuk { font-size: 12px; color: var(--abu-500); margin-top: 4px; }
.bidang__galat { font-size: 12px; color: var(--merah-600); margin-top: 4px; font-weight: 600; }

/* Kendali yang bersanding dengan tombol pendampingnya (mis. pilihan penyewa
   dengan tombol "Penyewa Baru"). Tombolnya sengaja tidak boleh menyusut supaya
   labelnya tidak terpotong ketika nama pada pilihan di sebelahnya panjang. */
.bidang__sanding { display: flex; align-items: center; gap: 8px; }
.bidang__sanding > .kendali { flex: 1 1 auto; min-width: 0; }
/* Kotak cari yang berpendamping tombol dibungkus .cari-bidang, bukan berdiri
   sebagai .kendali sendiri; tanpa aturan ini bungkusnya menyusut selebar
   isinya dan tombol di sebelahnya melompat ke tengah baris. */
.bidang__sanding > .cari-bidang { flex: 1 1 auto; min-width: 0; }
.bidang__sanding > .tombol { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 520px) {
    .bidang__sanding { flex-wrap: wrap; }
    .bidang__sanding > .kendali,
    .bidang__sanding > .cari-bidang { flex: 1 1 100%; }
}

.kendali {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--abu-300);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--abu-800);
    background: #fff;
}
.kendali:focus { outline: none; border-color: var(--biru-500); box-shadow: 0 0 0 3px var(--biru-50); }
.kendali:disabled, .kendali[readonly] { background: var(--abu-100); color: var(--abu-600); }
.kendali--galat { border-color: var(--merah-600); }

/* Sepasang bidang luas - manual dan peta - yang harus selalu bersebelahan.
   Mengambil satu baris penuh apa pun grid pembungkusnya, sebab keduanya
   hanya berguna bila terbaca berdampingan. Di layar sempit tetap menumpuk,
   dan itu wajar: di sana tidak ada baris untuk dibagi dua. */
.pasangan-luas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 16px;
}

/* Bidang baca-saja: angkanya turunan sistem, bukan isian. Dibedakan tegas
   dari bidang biasa supaya tidak ada yang mencoba mengetik di sana, tetapi
   tetap cukup terbaca - gunanya memang untuk dibaca sambil mengisi bidang
   di sebelahnya. */
.kendali--mati {
    background: var(--abu-100);
    color: var(--abu-600);
    border-style: dashed;
    cursor: default;
    font-variant-numeric: tabular-nums;
}
textarea.kendali { min-height: 78px; resize: vertical; }
select.kendali { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
input[type="color"].kendali { padding: 3px; height: 38px; cursor: pointer; }

.centang { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.centang input { width: 16px; height: 16px; accent-color: var(--biru-600); cursor: pointer; }

/* ------------------------------------------------------------ Bilah saring

   Kartu penyaring dibedakan dari kartu isi di bawahnya: ia alat, bukan data.
   Bedanya dibuat dari permukaan - latar bergradasi tipis dan pita aksen di
   tepi kiri - bukan dari bingkai tebal, supaya tetap sebaris dengan kartu
   lain dan tidak berebut perhatian dengan tabelnya. */

.kartu--saring {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, var(--abu-50) 100%);
}
.kartu--saring::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--biru-600), var(--ungu-600));
}
.kartu--saring > .kartu__isi { padding: 14px 16px 14px 19px; }

.saring {
    display: flex;
    gap: 11px 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.saring .bidang { min-width: 156px; flex: 1 1 156px; margin-bottom: 0; }
.saring .bidang--lebar { flex: 2.4 1 260px; }

/* Label penyaring dibuat setingkat lebih kecil daripada label formulir biasa.
   Di sini yang dibaca isian dan tombolnya; nama kolomnya cukup jadi penanda,
   dan bila sama tebalnya, sederet label justru menutupi isian yang dicari. */
.saring .bidang__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--abu-500);
    margin-bottom: 5px;
}

.saring .kendali {
    height: 38px;
    border-radius: 9px;
    border-color: var(--abu-200);
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .14s, box-shadow .14s;
}
.saring .kendali:hover { border-color: var(--abu-300); }
.saring .kendali:focus { border-color: var(--biru-500); box-shadow: 0 0 0 3px var(--biru-50); }

/* Kaca pembesar digambar sebagai latar isiannya sendiri, bukan sebagai elemen
   tambahan: kotak cari tersebar di lima belas halaman, dan menyisipkan satu
   ikon pada masing-masingnya berarti lima belas tempat yang bisa lupa
   diperbarui. */
.saring input[type="search"] {
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 11px center;
}

/* Kelompok tombol didorong ke ujung kanan dan dipisah garis tipis: ia
   perintah, bukan isian, dan berbaur di antara kotak-kotak isian membuatnya
   terlewat. */
.saring > .bidang:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid var(--abu-200);
}
.saring .tombol { height: 38px; border-radius: 9px; }

/* Di layar sempit seluruhnya menumpuk, jadi garis pemisah dan dorongan ke
   kanan tidak lagi berarti apa-apa - keduanya dilepas supaya tombolnya tidak
   tampak menjorok sendirian. */
@media (max-width: 700px) {
    .saring > .bidang:last-child {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        width: 100%;
    }
    .saring .tombol { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------- Bilah & modal saring (JS)

   Dengan JavaScript menyala, kartu penyaring digantikan bilah ramping ini dan
   isiannya pindah ke modal. Yang tinggal di halaman hanyalah dua hal yang
   memang perlu terbaca terus-menerus: jalan membuka penyaring, dan saringan
   apa saja yang sedang berlaku. Deretan kotak isian yang hampir selalu kosong
   tidak perlu memakan satu blok penuh di atas tiap tabel. */

/* Rata flat: bidang warna padat, garis tegas, tanpa bayangan maupun gradasi.
   Yang membedakan bagian-bagiannya adalah warna dan jarak, bukan kedalaman. */
.bilah-saring {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: 10px;
}

/* Corong sebagai lambang tetap bilah ini. Kotaknya kelabu selagi tidak ada
   saringan dan menyala biru begitu ada - keadaan halaman terbaca dari satu
   bidang warna, sebelum satu kata pun dibaca. */
.bilah-saring__lambang {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: var(--abu-100);
    color: var(--abu-500);
}
.bilah-saring--aktif .bilah-saring__lambang { background: var(--biru-600); color: #fff; }

.bilah-saring__isi {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 220px;
    min-width: 0;
}

.bilah-saring__kosong { font-size: 12.5px; color: var(--abu-500); }

.bilah-saring__hitung {
    font-size: 12px;
    font-weight: 700;
    color: var(--abu-700);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bilah-saring__ulang {
    font-size: 12px;
    font-weight: 650;
    color: var(--merah-600);
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--merah-50);
    text-decoration: none;
}
.bilah-saring__ulang:hover { background: var(--merah-600); color: #fff; text-decoration: none; }

/* Tombol didorong ke ujung kanan: ia perintah, dan perintah berdiri di akhir
   baris - sesudah keadaan yang dibacanya, bukan sebelum. */
.bilah-saring__pemicu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-left: auto;
    border-radius: 8px;
}
.bilah-saring__pemicu svg { flex: 0 0 auto; }

/* Jumlah saringan aktif menempel pada tombolnya sendiri: itulah tempat mata
   jatuh lebih dulu, dan angka di sana menjawab "ada berapa" tanpa perlu
   menghitung cip satu per satu. */
.bilah-saring__jumlah {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .25);
    font-size: 11.5px;
    font-weight: 700;
}

/* Cip flat: satu bidang warna padat tanpa garis tepi, sudut kecil. */
.cip-saring {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 4px 4px 9px;
    border-radius: 6px;
    background: var(--biru-50);
    font-size: 12px;
    line-height: 1.5;
}
.cip-saring__label { color: var(--biru-600); font-weight: 600; }
.cip-saring__label::after { content: ':'; }
.cip-saring__nilai {
    color: var(--biru-900);
    font-weight: 700;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cip-saring__lepas {
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    flex: 0 0 18px;
    border-radius: 4px;
    color: var(--biru-600);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}
.cip-saring__lepas:hover { background: var(--merah-600); color: #fff; text-decoration: none; }

/* Di layar sempit tombolnya turun ke baris sendiri dan melebar penuh -
   dorongan ke kanan tidak lagi berarti apa-apa pada satu lajur. */
@media (max-width: 620px) {
    .bilah-saring__pemicu { margin-left: 0; width: 100%; }
}

/* Di dalam modal, isiannya kembali menjadi kisi - bukan sebaris memanjang -
   sebab lebarnya kini ditentukan kotak modal, bukan lebar halaman.

   Kisinya auto-fit, bukan dua kolom pasti: jumlah penyaring berbeda-beda tiap
   halaman (satu kotak cari di Pengguna, lima di Laporan Aset), dan kolom yang
   dipatok dua membuat halaman berisian ganjil selalu menyisakan setengah baris
   kosong. Kolom pencarian tetap mengambil baris penuh - isinya kata bebas, dan
   setengah baris memotongnya justru di tengah ketikan. */
.saring--modal { display: block; }
.saring-kisi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 15px 16px;
}
.saring-kisi > .bidang { min-width: 0; }
.saring-kisi > .bidang--lebar { grid-column: 1 / -1; }

/* Kepala modal saring: lambang corong, judul, dan baris keterangan berapa
   penyaring sedang dipakai dari berapa yang tersedia. */
.modal__kepala--saring { align-items: flex-start; gap: 12px; padding: 15px 18px; }
.modal__lambang {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--biru-600);
    color: #fff;
}
.modal__kepala-teks { display: flex; flex-direction: column; min-width: 0; }
.modal__sub { font-size: 12px; color: var(--abu-500); font-weight: 500; margin-top: 1px; }
.modal--ramping { max-width: 440px; }

/* Isian yang sedang membawa nilai. Labelnya membiru dan diberi titik, jadi
   pada halaman berisian banyak tidak perlu memeriksa satu per satu untuk tahu
   mana yang sedang menyaring. */
.bidang--terisi .bidang__label { color: var(--biru-700); }
.bidang--terisi .bidang__label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--biru-600);
    vertical-align: middle;
}
.bidang--terisi .kendali { border-color: var(--biru-500); }

/* Kaki: "Atur Ulang" berdiri sendiri di kiri - ia membuang seluruh saringan,
   bukan saudara sejajar tombol kirim - dan pasangan Batal + Terapkan di
   kanan. */
.modal__kaki--saring { gap: 8px; }
.modal__kaki-ulang { margin-right: auto; }
.saring--modal .modal__kaki .tombol { height: 38px; }

/* -------------------------------------------------------- Formulir berseksi

   Formulir isian panjang dahulu memakai .form-grid biasa: kolomnya melar
   mengikuti lebar layar sampai tujuh bidang berjajar dalam satu baris.
   Di layar lebar mata harus melompat jauh ke kanan, dan bidang sependek
   "Urutan" mendapat ruang yang sama dengan "Nama Dusun".

   Susunan berikut memecahnya menjadi seksi bertema. Judul dan penjelasan
   seksi duduk di rel kiri, bidangnya di kanan pada kisi 12 kolom sehingga
   tiap bidang memperoleh lebar yang sepadan dengan isinya. Hasilnya
   dibaca atas ke bawah per kelompok - hanya dua sampai tiga bidang per
   baris - tanpa memanjang seperti bila satu bidang satu baris.            */

.kartu__isi--seksi { padding: 0; }

/* Bilah pengenal di kepala formulir panjang: menjawab "sedang mengubah yang
   mana" tanpa harus menggulir balik. Nilainya ringkasan baca-saja - yang
   dapat disunting semuanya ada di bawah - jadi tampilannya sengaja tenang,
   bukan kartu bernomor besar yang bersaing perhatian dengan isiannya. */
.kartu--kepala-aset { border-left: 3px solid var(--biru-600); }

.pengenal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 14px 18px;
}
.pengenal__utama { min-width: 0; }
.pengenal__kode { font-size: 12px; color: var(--abu-500); letter-spacing: .02em; }
.pengenal__nama { font-size: 16px; font-weight: 650; color: var(--abu-900); line-height: 1.3; }

.pengenal__rincian { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.pengenal__rincian dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--abu-500); }
.pengenal__rincian dd {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--abu-800);
    font-variant-numeric: tabular-nums;
}

.form-seksi {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--abu-100);
}
.form-seksi:last-child { border-bottom: 0; }

.form-seksi__rail { padding-top: 1px; }
.form-seksi__judul {
    font-size: 13px;
    font-weight: 700;
    color: var(--abu-900);
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.form-seksi__ikon {
    width: 24px; height: 24px; flex: 0 0 24px;
    display: grid; place-items: center;
    border-radius: 7px;
    background: var(--biru-50);
    font-size: 12.5px;
}
.form-seksi__catatan { font-size: 12px; color: var(--abu-500); margin: 0; line-height: 1.5; }
.form-seksi__isi { min-width: 0; }

@media (max-width: 900px) {
    .form-seksi { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
}

/* Kisi 12 kolom: lebar bidang ditentukan isinya, bukan sisa ruang layar. */
.form-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }

@media (max-width: 1180px) {
    /* Enam kolom. Bawaannya: bidang sempit setengah baris, bidang lebar satu
       baris penuh. Kelas .md-* menimpa bawaan itu bila sebuah bidang perlu
       tetap berdampingan dengan tetangganya - ditulis belakangan agar menang. */
    .form-grid--12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .span-2, .span-3, .span-4 { grid-column: span 3; }
    .span-5, .span-6, .span-7, .span-8, .span-9, .span-12 { grid-column: span 6; }
    .md-2 { grid-column: span 2; }
    .md-3 { grid-column: span 3; }
    .md-4 { grid-column: span 4; }
    .md-6 { grid-column: span 6; }
}
@media (max-width: 640px) {
    .form-grid--12 { grid-template-columns: 1fr; }
    .span-2, .span-3, .span-4, .span-5, .span-6,
    .span-7, .span-8, .span-9, .span-12,
    .md-2, .md-3, .md-4, .md-6 { grid-column: 1 / -1; }
}

/* Bidang wajib ditandai di labelnya; yang opsional diberi keterangan halus
   supaya pengisi tahu boleh dilewati tanpa harus mencoba menyimpan dulu. */
.bidang__opsional { font-weight: 500; color: var(--abu-400); font-size: 11.5px; }

/* Pratinjau hasil isian. Beberapa bidang baru bermakna setelah digabung -
   dusun, nomor RT, dan nomor RW menjadi satu nama wilayah. Menampilkan
   gabungannya sambil diketik mencegah salah isi yang baru ketahuan setelah
   data tersimpan. */
.form-pratinjau {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    padding: 9px 13px;
    border: 1px dashed var(--abu-300);
    border-radius: var(--radius-sm);
    background: var(--abu-50);
}
.form-pratinjau__label { font-size: 11.5px; font-weight: 650; color: var(--abu-500); text-transform: uppercase; letter-spacing: .04em; }
.form-pratinjau__nilai { font-size: 14px; font-weight: 700; color: var(--abu-900); }
.form-pratinjau__meta { font-size: 12.5px; color: var(--abu-500); }

/* Awalan tetap di dalam kotak isian, mis. "RT" pada nomor RT. Angkanya
   jadi jelas maksudnya tanpa menambah baris petunjuk. */
.kendali-gabung { display: flex; align-items: stretch; }
.kendali-gabung__awalan {
    display: grid; place-items: center;
    padding: 0 10px;
    border: 1px solid var(--abu-300);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--abu-50);
    color: var(--abu-500);
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
}
.kendali-gabung .kendali { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.kendali-gabung .kendali:focus { position: relative; z-index: 1; }

/* ======================================================================
   DASBOR SEWA

   Berawalan dsb- supaya tidak berebut nama dengan komponen umum. Bentuk
   dasarnya menumpang yang sudah ada - panji, ikhtisar, kartu - dan yang
   ditambahkan di sini hanya yang memang belum punya wujud: cincin kemajuan,
   donat komposisi, grafik bidang, serta dua bentuk daftar berperingkat.
   ====================================================================== */

/* ------------------------------------------------------ Panji ikhtisar */

.dsb-panji__kanan { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.dsb-panji__angka { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 4px; }
.dsb-panji__label {
    display: block;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(219, 230, 247, .62);
}
.dsb-panji__nilai {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.dsb-panji__nilai--samar { color: rgba(219, 230, 247, .72); font-weight: 700; font-size: 18px; }

.dsb-panji__cip--awas {
    background: rgba(248, 113, 113, .18) !important;
    border-color: rgba(248, 113, 113, .45) !important;
    color: #fecaca !important;
}
.dsb-panji__sisa { margin: 0; font-size: 12.5px; color: rgba(219, 230, 247, .8); text-align: center; }
.dsb-panji__sisa strong { color: #fff; }
.dsb-panji__awas { color: #fca5a5 !important; }

/* Cincin kemajuan. Guratnya diputar seperempat lingkaran supaya mulai dari
   pukul dua belas - tanpa itu, bagian terisi dibaca mulai dari sisi kanan
   dan persentasenya terasa tidak cocok dengan gambarnya. */
.dsb-cincin { position: relative; width: 128px; height: 128px; flex: 0 0 128px; }
.dsb-cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dsb-cincin circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.dsb-cincin__alas { stroke: rgba(255, 255, 255, .14); }
.dsb-cincin__isi {
    stroke: #4ade80;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, .45));
    transition: stroke-dashoffset .8s cubic-bezier(.22, .61, .36, 1);
}
.dsb-cincin__teks {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.15;
}
.dsb-cincin__persen { display: block; font-size: 26px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dsb-cincin__ket { display: block; font-size: 11px; color: rgba(219, 230, 247, .7); }

/* ---------------------------------------------------- Donat komposisi */

.dsb-donat { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.dsb-donat__cincin { position: relative; width: 168px; height: 168px; flex: 0 0 168px; }
.dsb-donat__cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dsb-donat__cincin circle {
    fill: none;
    stroke-width: 20;
    transition: stroke-width .15s;
}
.dsb-donat__cincin circle:hover { stroke-width: 24; }
.dsb-donat__pusat { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dsb-donat__angka { display: block; font-size: 27px; font-weight: 800; color: var(--abu-900); font-variant-numeric: tabular-nums; }
.dsb-donat__satuan { display: block; font-size: 11.5px; color: var(--abu-500); }

.dsb-donat__kunci { flex: 1; min-width: 190px; list-style: none; margin: 0; padding: 0; }
.dsb-donat__kunci li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid var(--abu-100);
    font-size: 12.5px;
}
.dsb-donat__kunci li:last-child { border-bottom: 0; }
.dsb-donat__tanda { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 3px; }
.dsb-donat__nama { flex: 1; color: var(--abu-700); }
.dsb-donat__nilai { font-weight: 700; color: var(--abu-900); font-variant-numeric: tabular-nums; }
.dsb-donat__persen {
    min-width: 40px;
    text-align: right;
    color: var(--abu-500);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ Grafik bidang */

.dsb-area svg { display: block; width: 100%; height: 190px; overflow: visible; }
.dsb-area__bantu { stroke: var(--abu-200); stroke-width: 1; stroke-dasharray: 3 4; }
.dsb-area__bidang { fill: url(#dsb-area-warna); }
.dsb-area__garis {
    fill: none;
    stroke: var(--biru-600);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.dsb-area__titik { fill: #fff; stroke: var(--biru-600); stroke-width: 2.5; transition: r .12s; }
.dsb-area__titik:hover { r: 6; }
/* Bulan tanpa setoran tetap digambar, tetapi diredupkan - jeda penerimaan
   adalah kabar tersendiri, jadi tidak boleh dihilangkan dari garisnya. */
.dsb-area__titik--nol { stroke: var(--abu-300); }

.dsb-area__sumbu {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--abu-400);
}
.dsb-area__kaki {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--abu-100);
    font-size: 12px;
    color: var(--abu-500);
}

/* --------------------------------------------------- Daftar peringkat */

.dsb-peringkat {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--abu-100);
    text-decoration: none;
    color: inherit;
}
.dsb-peringkat:last-child { border-bottom: 0; }
a.dsb-peringkat:hover { background: var(--abu-50); text-decoration: none; }
.dsb-peringkat--diam { cursor: default; }

.dsb-peringkat__no {
    flex: 0 0 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--abu-100);
    color: var(--abu-600);
    font-size: 11.5px;
    font-weight: 700;
}
.dsb-peringkat:first-child .dsb-peringkat__no { background: var(--merah-50); color: var(--merah-600); }

.dsb-peringkat__isi { flex: 1; min-width: 0; }
.dsb-peringkat__kepala { display: flex; align-items: baseline; gap: 10px; }
.dsb-peringkat__nama {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 650;
    color: var(--abu-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsb-peringkat__nilai { font-size: 12.5px; font-weight: 700; color: var(--abu-800); font-variant-numeric: tabular-nums; }

.dsb-peringkat__bar {
    display: block;
    height: 6px;
    margin: 6px 0 5px;
    border-radius: 20px;
    background: var(--abu-100);
    overflow: hidden;
}
.dsb-peringkat__bar > span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #f87171, var(--merah-600));
}
.dsb-peringkat__bar--hijau > span { background: linear-gradient(90deg, #4ade80, var(--hijau-600)); }

.dsb-peringkat__meta { font-size: 11.5px; color: var(--abu-500); }

.dsb-jumlah { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--abu-600); }
.dsb-jumlah span:last-child { margin-left: auto; color: var(--abu-900); }

/* ------------------------------------------------ Daftar hitung mundur */

.dsb-tempo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--abu-100);
    text-decoration: none;
    color: inherit;
}
.dsb-tempo:last-child { border-bottom: 0; }
.dsb-tempo:hover { background: var(--abu-50); text-decoration: none; }

/* Hitungan hari dibuat sebagai kotak, bukan kalimat: yang dicari mata saat
   menyisir daftar ini adalah "berapa lama lagi", dan angka yang berdiri
   sendiri terbaca jauh lebih cepat daripada angka di tengah kalimat. */
.dsb-tempo__hitung {
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    padding: 5px 0;
    border-radius: 10px;
    background: var(--biru-50);
    color: var(--biru-700);
    line-height: 1.05;
}
.dsb-tempo__hitung strong { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Kata "Hari" jelas lebih panjang daripada dua digit angka; ukurannya
   diturunkan supaya kotaknya tidak melebar sendiri di antara barisan
   yang lain. */
.dsb-tempo__kini { font-size: 12px !important; letter-spacing: -.01em; }
.dsb-tempo__hitung em { font-size: 10px; font-style: normal; opacity: .75; }
.dsb-tempo__hitung--dekat { background: var(--kuning-50); color: #b45309; }
.dsb-tempo__hitung--ungu { background: var(--ungu-50); color: var(--ungu-700); }

.dsb-tempo__isi { flex: 1; min-width: 0; }
.dsb-tempo__nama {
    display: block;
    font-size: 13px;
    font-weight: 650;
    color: var(--abu-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsb-tempo__meta { display: block; font-size: 11.5px; color: var(--abu-500); }
.dsb-tempo__nilai { font-size: 12.5px; font-weight: 700; color: var(--abu-800); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 620px) {
    .dsb-donat { justify-content: center; }
    .dsb-panji__angka { gap: 8px 18px; }
}

/* ------------------------------------------------- Kaki pemilihan kirim

   Baris tindakan di bawah tabel yang barisnya dapat dicentang. Menempel di
   kaki kartu, bukan mengambang di kepala halaman: yang dipilih ada di tabel
   itu, dan tombolnya harus berada di tempat mata berhenti setelah selesai
   mencentang.                                                             */

.pilih-kirim {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-top: 1px solid var(--abu-200);
    background: var(--abu-50);
}
.pilih-kirim__ket { flex: 1; min-width: 200px; font-size: 12.5px; color: var(--abu-600); }

/* Tombol yang berlaku sebagai tautan di dalam baris petunjuk - mis. "Pakai
   luas peta". Berupa <button> supaya papan ketik memperlakukannya sebagai
   tindakan, bukan sebagai perpindahan halaman yang tidak pernah terjadi. */
.taut-semu {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--biru-600);
    font-weight: 650;
    cursor: pointer;
}
.taut-semu:hover { text-decoration: underline; }

/* ------------------------------------------------- Pratinjau jadwal termin

   Memperlihatkan termin yang akan terbit sebelum perjanjian disimpan. Dibuat
   ringkas dan bergulir sendiri: sewa bulanan dua puluh tahun menghasilkan
   240 baris, dan daftar sepanjang itu akan mengubur tombol simpan.        */

.jadwal-pratinjau {
    border: 1px dashed var(--abu-300);
    border-radius: var(--radius-sm);
    background: var(--abu-50);
    max-height: 260px;
    overflow-y: auto;
}
.jadwal-pratinjau__kosong,
.jadwal-pratinjau__memuat { padding: 16px; text-align: center; font-size: 12.5px; color: var(--abu-500); }

.jadwal-pratinjau__baris {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 13px;
    border-bottom: 1px solid var(--abu-200);
    font-size: 12.5px;
}
.jadwal-pratinjau__baris:last-child { border-bottom: 0; }
.jadwal-pratinjau__no {
    flex: 0 0 22px;
    color: var(--abu-400);
    font-variant-numeric: tabular-nums;
}
.jadwal-pratinjau__label { font-weight: 650; color: var(--abu-800); flex: 0 0 auto; }
.jadwal-pratinjau__tempo { color: var(--abu-500); }
.jadwal-pratinjau__nilai {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--abu-800);
    white-space: nowrap;
}
.jadwal-pratinjau__kaki {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 8px 13px;
    border-top: 1px solid var(--abu-200);
    background: #fff;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--abu-800);
}
.jadwal-pratinjau__kaki span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Pilih warna

   input[type=color] selebar satu kolom terlihat seperti bidang isian yang
   rusak dan tidak memberi tahu warna apa yang sedang terpilih. Pemilih ini
   menampilkan contoh warna, kode heksanya, dan sederet warna siap pakai
   yang dipakai peta - satu klik selesai.                                  */

.pilih-warna { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pilih-warna__kotak { position: relative; width: 40px; height: 38px; flex: 0 0 40px; }
.pilih-warna__kotak input[type="color"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    padding: 3px;
    border: 1px solid var(--abu-300);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
}
.pilih-warna__kotak input[type="color"]:focus-visible { outline: none; border-color: var(--biru-500); box-shadow: 0 0 0 3px var(--biru-50); }
.pilih-warna__nilai {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--abu-600);
    text-transform: uppercase;
    min-width: 66px;
}
.pilih-warna__cepat { display: flex; gap: 6px; flex-wrap: wrap; }
.pilih-warna__cip {
    width: 22px; height: 22px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 6px;
    background: var(--cip);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.pilih-warna__cip:hover { transform: scale(1.14); }
.pilih-warna__cip:focus-visible { outline: 2px solid var(--biru-500); outline-offset: 2px; }
.pilih-warna__cip[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--abu-800); }

/* --------------------------------------------------------- Bilah simpan

   Formulir wilayah selalu diakhiri peta boundary yang tinggi. Bila tombol
   simpan ikut di dasar halaman, pengisi harus menggulir jauh melewati peta
   setiap kali hendak menyimpan. Bilah ini menempel di bawah layar sehingga
   Batal dan Simpan selalu terjangkau.                                     */

.form-aksi {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(6px);
    border: 1px solid var(--abu-200);
    border-radius: var(--radius);
    box-shadow: 0 -2px 14px rgba(15, 23, 42, .07);
}
.form-aksi__catatan { font-size: 12.5px; color: var(--abu-500); margin-right: auto; }

/* ------------------------------------------------------------------ Notif */

.notif {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    margin-bottom: 14px;
    font-size: 13.5px;
}
.notif__ikon { flex: 0 0 auto; }
.notif--sukses { background: var(--hijau-50); border-color: #bbf7d0; color: #14532d; }
.notif--gagal { background: var(--merah-50); border-color: #fecaca; color: #7f1d1d; }
.notif--info { background: var(--biru-50); border-color: #bfdbfe; color: #1e3a8a; }
.notif--peringatan { background: var(--kuning-50); border-color: #fde68a; color: #78350f; }
.notif ul { margin: 5px 0 0; padding-left: 18px; }

/* ----------------------------------------------------------------- Pemuat

   Tirai "sedang memuat" beserta kartu keterangannya, disusun seperti latar
   modal: yang di belakangnya meredup, dan perhatian jatuh ke satu titik di
   tengah.

   Tirainya menempel pada panggung peta, bukan pada seluruh layar, sebab
   yang sedang diganti memang hanya isi peta. Panel wilayah di kiri tetap
   terang - dan itu penting, karena di sanalah pengguna baru saja mengklik
   dan ke sanalah ia akan kembali mengklik berikutnya.

   Tangga lapisannya: di atas seluruh panel mengambang peta (500-900) supaya
   benar-benar meredupkan semuanya, tetapi di bawah modal (1500) dan toast
   (2000) - formulir yang sedang dibuka dan pemberitahuan galat, termasuk
   pesan koneksi terputus, tidak boleh ikut tertutup.                     */

.pemuat {
    position: absolute;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Meredupkan sampai peta tinggal sekitar 0,7 - masih cukup terbaca
       sebagai patokan tempat, tidak lagi cukup untuk dikira siap dipakai. */
    background: rgba(15, 23, 42, .3);

    opacity: 0;
    /* Selagi tersembunyi tirainya harus tembus klik sepenuhnya; barulah saat
       tampil ia menahan klik, persis seperti latar modal. Tanpa penahan itu
       pengguna dapat menumpuk permintaan baru di atas yang belum selesai. */
    pointer-events: none;
    transition: opacity .2s ease;
}
.pemuat--tampil { opacity: 1; pointer-events: auto; }

/* Halaman tanpa panggung peta tidak punya kotak induk untuk dijadikan
   patokan, jadi tirainya berpatokan pada jendela peramban. */
.pemuat--layar { position: fixed; }

/* ---- Kartu keterangan */

.pemuat__keping {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 208px;
    padding: 24px 26px 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
    color: var(--abu-800);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;

    /* Melenting sedikit saat masuk, secukupnya untuk menarik mata sekali.
       Gerak yang berlebihan pada penanda yang muncul berkali-kali sehari
       akan cepat menjemukan. */
    transform: scale(.9);
    transition: transform .26s cubic-bezier(.34, 1.56, .64, 1);
}
.pemuat--tampil .pemuat__keping { transform: scale(1); }

.pemuat__teks { line-height: 1.35; }

/* ---- Garis kemajuan di kaki kartu */

.pemuat__garis {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--abu-200);
}
.pemuat__garis::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent, var(--biru-500) 30%, var(--ungu-600) 70%, transparent);

    /* Digerakkan dengan transform, bukan left. Garis ini berjalan terus
       selagi peta menggambar ulang ratusan polygon, dan hanya transform yang
       dapat diserahkan ke GPU tanpa memaksa perhitungan tata letak ulang di
       setiap bingkai. */
    animation: pemuat-sapu 1.2s ease-in-out infinite;
}
@keyframes pemuat-sapu {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* ---- Jam pasir

   Satu putaran penuh = pasir habis mengalir, lalu jamnya dibalik. Pembalikan
   itu sengaja diselesaikan tepat di akhir daur: saat animasi mengulang ke
   nol, jam kembali tegak dengan pasir penuh di atas - dan itu wujud yang
   sama persis dengan jam terbalik yang pasirnya penuh di bawah. Pergantian
   daurnya karena itu tidak terlihat sebagai lompatan.                     */

.pemuat__jam {
    width: 38px;
    height: 49px;
    display: block;
    transform-origin: 50% 50%;
    animation: pemuat-balik 2.4s ease-in-out infinite;
}
@keyframes pemuat-balik {
    0%, 80% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

.pemuat__kaca {
    fill: none;
    stroke: var(--abu-400);
    stroke-width: 1.6;
    stroke-linejoin: round;
}
.pemuat__tutup {
    fill: none;
    stroke: var(--abu-600);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.pemuat__pasir { fill: var(--kuning-600); }
/* Permukaan pasir di ruang atas turun; di ruang bawah naik. Keduanya persegi
   biasa yang digeser di balik kerucut pengerat, jadi bentuk yang terlihat
   selalu mengikuti dinding kaca tanpa satu pun titik dihitung ulang. */
.pemuat__pasir--atas { animation: pemuat-pasir-turun 2.4s linear infinite; }
.pemuat__pasir--bawah { animation: pemuat-pasir-naik 2.4s linear infinite; }
@keyframes pemuat-pasir-turun {
    0% { transform: translateY(0); }
    78%, 100% { transform: translateY(13px); }
}
@keyframes pemuat-pasir-naik {
    0% { transform: translateY(13px); }
    78%, 100% { transform: translateY(0); }
}

.pemuat__tetes {
    stroke: var(--kuning-600);
    stroke-width: 1.4;
    stroke-linecap: round;
    animation: pemuat-tetes 2.4s linear infinite;
}
/* Butirannya berhenti sesaat sebelum pasir habis, lalu diam selama jamnya
   dibalik - aliran yang tetap jatuh dari ruang yang sudah kosong akan
   langsung terbaca keliru. */
@keyframes pemuat-tetes {
    0%, 74% { opacity: .9; }
    76%, 100% { opacity: 0; }
}

/* Menghormati setelan "kurangi gerak" pada sistem pengguna. Penandanya tetap
   ada dan tetap terbaca sebagai "sedang berjalan", hanya saja diam: pasirnya
   berhenti di tengah jalan dan yang tersisa cuma kedipan lembut. */
@media (prefers-reduced-motion: reduce) {
    .pemuat__keping { transition: none; transform: none; }
    .pemuat--tampil .pemuat__keping { transform: none; }
    .pemuat__garis::before { animation: none; transform: none; }
    .pemuat__jam { animation: pemuat-kedip 1.4s ease-in-out infinite; }
    .pemuat__pasir--atas { animation: none; transform: translateY(6px); }
    .pemuat__pasir--bawah { animation: none; transform: translateY(6px); }
    .pemuat__tetes { animation: none; }
    @keyframes pemuat-kedip { 50% { opacity: .45; } }
}

/* ------------------------------------------------------------------ Toast */

#toast-wadah {
    position: fixed;
    top: 16px; right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
}
.toast {
    background: var(--abu-900);
    color: #fff;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    box-shadow: var(--bayang-lg);
    font-size: 13.5px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    animation: toast-masuk .18s ease-out;
}
.toast--sukses { background: #15803d; }
.toast--gagal { background: #b91c1c; }
.toast--peringatan { background: #b45309; }
.toast__tutup { margin-left: auto; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
@keyframes toast-masuk { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------- Laci

   Panel geser di sisi kanan untuk formulir pendek. Data master dan pengguna
   hanya berisi segelintir isian, sehingga berpindah halaman penuh untuk
   mengisinya terasa berlebihan: daftar hilang dari pandangan, dan setelah
   simpan halaman harus dimuat dari awal. Laci membiarkan daftar tetap
   terlihat di belakangnya.

   Dua kelas dipakai bergantian: --buka menampilkan elemennya, --tampil
   menjalankan animasi. Keduanya dipisah supaya transisi sempat berjalan
   setelah display berubah dari none.                                      */

.laci { position: fixed; inset: 0; z-index: 90; display: none; }
.laci--buka { display: block; }

.laci__latar {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .22s ease;
}
.laci--tampil .laci__latar { opacity: 1; }

.laci__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(460px, 100vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -14px 0 38px rgba(15, 23, 42, .2);
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}
.laci--tampil .laci__panel { transform: none; }
.laci__panel--lebar { width: min(580px, 100vw); }

.laci__kepala {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--abu-200);
    background: linear-gradient(160deg, var(--abu-50), #fff);
}
.laci__kepala-teks { min-width: 0; }
.laci__judul { font-size: 16px; font-weight: 700; color: var(--abu-900); margin: 0; }
.laci__sub { font-size: 12.5px; color: var(--abu-500); margin: 2px 0 0; }

.laci__tutup {
    margin-left: auto;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--abu-200);
    border-radius: 50%;
    background: #fff;
    color: var(--abu-500);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.laci__tutup:hover { background: var(--abu-100); color: var(--abu-800); }
.laci__tutup:focus-visible { outline: none; border-color: var(--biru-500); box-shadow: 0 0 0 3px var(--biru-50); }

/* Badan laci menggulir sendiri. Sebelumnya hanya .laci-form__isi yang
   menggulir, jadi isi laci yang bukan formulir - susunan bagian aset -
   terpotong begitu melebihi tinggi layar tanpa cara apa pun untuk melihat
   sisanya. Formulir tidak terpengaruh: bagian dalamnya mengisi badan persis
   setinggi ruang yang ada, sehingga badan tidak pernah ikut meluap. */
.laci__badan {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.laci__memuat { padding: 26px 18px; color: var(--abu-500); font-size: 13px; text-align: center; }

/* Isi laci dikunci penuh: hanya bidangnya yang menggulir, bilah tombol
   tetap menempel di dasar panel. */
.laci .laci-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.laci .laci-form__isi { flex: 1; min-height: 0; overflow-y: auto; }
.laci .laci-form__kaki { flex: 0 0 auto; }

body.laci-terkunci { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .laci__panel, .laci__latar { transition: none; }
}

/* ==========================================================================
   SUSUNAN BAGIAN ASET

   Bagian aset boleh dibagi lagi tanpa batas tingkat, jadi yang digambar
   adalah pohon, bukan daftar rata. Dua hal yang membuatnya terbaca:

   1. Batang penghubung. Indentasi saja membuat tingkat tiga dan tingkat dua
      sulit dibedakan begitu daftarnya panjang; garis yang menyambung ke
      induknya menjawabnya tanpa perlu dihitung.

   2. Bilah proporsi terhadap induk LANGSUNG, bukan terhadap aset akar.
      Pertanyaan yang dibawa orang ke layar ini adalah "induk ini masih
      menyisakan berapa", dan proporsi terhadap akar tidak menjawabnya.
   ========================================================================== */

.susunan { display: flex; flex-direction: column; gap: 14px; padding: 16px; }

/* Kartu aset akar: pangkal pohon, jadi tampil paling tegas. */
.susunan__induk {
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--abu-200);
    border-left: 4px solid var(--warna-bagian, var(--biru-600));
    background: linear-gradient(160deg, var(--abu-50), #fff);
}
.susunan__kepala { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.susunan__kode { font-size: 11.5px; color: var(--abu-500); letter-spacing: .02em; }
.susunan__nama { font-size: 15px; font-weight: 700; color: var(--abu-900); }
.susunan__wilayah { font-size: 12px; color: var(--abu-500); margin-top: 2px; }

.susunan__ukur { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.susunan__bar { flex: 1; height: 7px; border-radius: 20px; background: var(--abu-200); overflow: hidden; }
.susunan__bar-isi { display: block; height: 100%; border-radius: 20px; background: var(--biru-600); }
.susunan__bar-teks {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--abu-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Empat angka pokok. Ditaruh sebelum pohonnya sebab pertanyaan pertama
   biasanya "sisa berapa", bukan "apa saja isinya". */
.susunan__angka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    margin: 0;
}
.susunan__angka > div {
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--abu-50);
    border: 1px solid var(--abu-200);
}
.susunan__angka dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--abu-500);
}
.susunan__angka dd {
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--abu-900);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.susunan__angka dd span { font-size: 11px; font-weight: 600; color: var(--abu-500); }
/* Sisa negatif berarti bagiannya melebihi induk - keadaan yang harus
   menonjol, bukan sekadar angka lain di deretan yang sama. */
.susunan__minus { color: var(--merah-600) !important; }

.susunan__kaki { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------ Pohon */

.bagan__daftar { list-style: none; margin: 0; padding: 0; }
.bagan .bagan__daftar .bagan__daftar { margin-left: 15px; }

.bagan__simpul { position: relative; }
/* Batang penghubung hanya digambar pada tingkat kedua ke bawah; tingkat
   pertama tidak punya simpul induk yang perlu disambung. */
.bagan .bagan__daftar .bagan__daftar > .bagan__simpul { padding-left: 17px; }
.bagan .bagan__daftar .bagan__daftar > .bagan__simpul::before,
.bagan .bagan__daftar .bagan__daftar > .bagan__simpul::after {
    content: '';
    position: absolute;
    left: 0;
    background: var(--abu-300);
}
/* Batang tegak: menerus untuk simpul tengah, berhenti di tikungan pada
   simpul terakhir supaya tidak menggantung ke ruang kosong. */
.bagan .bagan__daftar .bagan__daftar > .bagan__simpul::before {
    top: 0;
    bottom: 0;
    width: 1.5px;
}
.bagan .bagan__daftar .bagan__daftar > .bagan__simpul:last-child::before { bottom: auto; height: 21px; }
/* Batang mendatar menuju kartunya. */
.bagan .bagan__daftar .bagan__daftar > .bagan__simpul::after {
    top: 21px;
    width: 13px;
    height: 1.5px;
}

.bagan__kartu {
    position: relative;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--abu-200);
    border-left: 3px solid var(--warna-bagian, var(--abu-400));
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* Sorotan saat kursor melewati sebuah simpul.

   Pada pohon, kartu yang bersebelahan tampak serupa dan berdempetan, jadi
   bayangan tipis saja tidak cukup menandai mana yang sedang dibaca - apalagi
   sambil menelusuri kolom angka ke bawah. Cincin biru menandainya tegas.

   Yang diwarnai hanya tiga sisi; garis tebal di kiri tetap memakai warna
   jenis asetnya, sebab garis itu penanda identitas - kalau ikut membiru,
   petunjuk jenisnya justru hilang tepat saat simpulnya sedang diperiksa. */
.bagan__kartu:hover {
    border-top-color: var(--biru-600);
    border-right-color: var(--biru-600);
    border-bottom-color: var(--biru-600);
    background: var(--biru-50);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .14);
    transform: translateX(1px);
}
/* Kode dan label ikut menegas supaya sorotannya terasa satu kesatuan,
   bukan sekadar kotak yang berubah warna. */
.bagan__kartu:hover .bagan__kode { color: var(--biru-700); }
.bagan__kartu:hover .bagan__sel dt { color: var(--biru-600); }
.bagan__kartu:hover .bagan__rinci { border-top-color: rgba(29, 78, 216, .25); }

@media (prefers-reduced-motion: reduce) {
    .bagan__kartu { transition: none; }
    .bagan__kartu:hover { transform: none; }
}

.bagan__kepala { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; }
.bagan__kode { font-size: 11px; color: var(--abu-500); letter-spacing: .02em; }
.bagan__nama { font-size: 13.5px; font-weight: 650; color: var(--abu-900); }
.bagan__lencana {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--biru-50, #eff6ff);
    color: var(--biru-600);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.bagan__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.bagan__cip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--abu-100);
    font-size: 11px;
    color: var(--abu-700);
}
.bagan__cip--samar { background: transparent; border: 1px dashed var(--abu-300); color: var(--abu-500); }
.bagan__titik { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.bagan__ukur { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.bagan__bar { flex: 1; height: 5px; border-radius: 20px; background: var(--abu-100); overflow: hidden; }
.bagan__bar-isi { display: block; height: 100%; border-radius: 20px; background: var(--warna-bagian, var(--abu-400)); }
.bagan__luas,
.bagan__persen { font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bagan__luas { color: var(--abu-600); }
.bagan__persen { font-weight: 700; color: var(--abu-800); min-width: 44px; text-align: right; }

/* --------------------------------------------- Hasil pencarian panel wilayah

   Menggantikan pohon selama kotak cari terisi. Dibuat sebagai daftar datar
   berkelompok, bukan pohon yang disaring: hasilnya memuat empat tingkat
   sekaligus - padukuhan, RT, aset, bagian - dan memaksakannya ke bentuk pohon
   berarti menggambar cabang yang isinya cuma satu simpul. */

.hasil-cari { padding: 4px 0 10px; }
.hasil-cari__kepala {
    padding: 6px 12px 8px;
    font-size: 11.5px;
    color: var(--abu-500);
}
.hasil-cari__kelompok {
    padding: 9px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--abu-400);
}
.hasil-cari__butir {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    padding: 7px 12px;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.hasil-cari__butir:hover { background: var(--biru-50); }
.hasil-cari__butir:focus-visible { outline: 2px solid var(--biru-500); outline-offset: -2px; }
.hasil-cari__ikon {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 7px;
    background: var(--abu-100);
    font-size: 12.5px;
}
.hasil-cari__teks { min-width: 0; display: flex; flex-direction: column; }
.hasil-cari__judul {
    font-size: 13px;
    font-weight: 650;
    color: var(--abu-900);
    overflow-wrap: anywhere;
}
.hasil-cari__meta { font-size: 11.5px; color: var(--abu-500); overflow-wrap: anywhere; }

/* ------------------------------------------------------ Panji detail aset

   Kepala halaman detail aset. Kode dan nama bidang adalah dua hal yang
   dicari pertama kali di halaman ini, jadi keduanya diangkat ke bidang
   berwarna alih-alih dititipkan pada judul halaman biasa.

   Warna aksennya mengikuti jenis aset - ditumpangkan sebagai sapuan di atas
   dasar biru tua, bukan mengganti seluruh dasarnya. Jenis aset bisa berwarna
   apa saja termasuk kuning muda, dan teks putih di atasnya akan hilang. */

.panji-aset {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(122deg, #071c3f 0%, var(--biru-900) 42%, #17539c 100%);
    color: #dbe6f7;
    box-shadow: 0 10px 30px rgba(8, 30, 66, .22);
}

.panji-aset::before {
    content: '';
    position: absolute;
    width: 460px; height: 460px;
    top: -260px; right: 2%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--aksen, #60a5fa) 0%, transparent 68%);
    opacity: .38;
    pointer-events: none;
}

.panji-aset__isi {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 24px 18px;
}

.panji-aset__utama { flex: 1 1 340px; min-width: 0; }

.panji-aset__kode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #cfe0f8;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    padding: 3px 11px;
}
.panji-aset__kode i { width: 9px; height: 9px; border-radius: 3px; background: var(--aksen, #60a5fa); }

.panji-aset__nama {
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    margin: 9px 0 0;
    line-height: 1.2;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.panji-aset__lokasi { font-size: 12.5px; color: #9dbbe4; margin: 5px 0 0; }

.panji-aset__cip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.panji-aset__cip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #e8f0fb;
    background: rgba(255, 255, 255, .11);
    border-radius: 20px;
    padding: 3px 11px;
}
.panji-aset__cip i { width: 8px; height: 8px; border-radius: 50%; }
.panji-aset__cip .panji-aset__cip--ya { background: rgba(74, 222, 128, .2); color: #bbf7d0; }
.panji-aset__cip .panji-aset__cip--belum { background: rgba(251, 191, 36, .18); color: #fde68a; }

.panji-aset__aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.panji-aset__aksi form { margin: 0; }

/* Deret angka pokok menempel sebagai kaki panji, bukan berdiri sebagai kartu
   sendiri: ketiganya menerangkan bidang yang namanya baru saja disebut di
   atasnya, dan memisahkannya memutus hubungan itu. */
.panji-aset__kaki {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
    padding: 13px 24px 15px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(3, 16, 38, .3);
}
.panji-aset__angka { min-width: 0; }
.panji-aset__angka-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8fb0dd;
}
.panji-aset__angka-nilai { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.25; }
.panji-aset__angka-nilai small { font-size: 11.5px; font-weight: 600; color: #9dbbe4; margin-left: 3px; }

/* ------------------------------------------------- Daftar bagian pada detail

   Tiap baris membawa bilah proporsinya sendiri. Yang diukur selalu terhadap
   induk LANGSUNG, bukan terhadap aset akar: bagian tingkat tiga yang kecil
   diukur dari asetnya bisa saja memenuhi hampir seluruh induknya, dan itulah
   angka yang berguna saat memeriksa sisa ruang. */

.rinci-bagian { display: flex; flex-direction: column; }
.rinci-bagian__baris {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--abu-100);
}
.rinci-bagian__baris:last-child { border-bottom: 0; }
.rinci-bagian__baris:hover { background: var(--abu-50); }

.rinci-bagian__nama { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; color: var(--abu-900); }
.rinci-bagian__nama i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; background: var(--warna-bagian, var(--abu-400)); }
.rinci-bagian__kode { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11.5px; color: var(--abu-500); font-weight: 600; }
.rinci-bagian__luas { font-size: 13px; font-weight: 650; color: var(--abu-800); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

.rinci-bagian__ukur { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.rinci-bagian__bar { flex: 1; height: 5px; border-radius: 20px; background: var(--abu-100); overflow: hidden; }
.rinci-bagian__bar span { display: block; height: 100%; border-radius: 20px; background: var(--warna-bagian, var(--abu-400)); }
.rinci-bagian__persen { font-size: 11.5px; font-weight: 700; color: var(--abu-600); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.rinci-bagian__ket { font-size: 11.5px; color: var(--abu-500); }

/* Rincian angka di bawah bilah, sebagai sel berlabel.

   Kisinya auto-fit dan sel yang tidak berlaku tidak digambar, jadi simpul
   tanpa anak - yang tidak punya "terbagi lagi" - hanya menempati sel lebih
   sedikit, bukan meninggalkan lubang. Tiap sel bertumpuk tiga: label kecil
   huruf besar, angka tebal, lalu keterangan kecil di bawahnya. Susunan itu
   membuat angkanya dapat dipindai menurun tanpa membaca labelnya lagi. */
.bagan__rinci {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 9px 12px;
    margin: 9px 0 0;
    padding: 9px 0 0;
    border-top: 1px dashed var(--abu-200);
}
.bagan__sel { min-width: 0; }
.bagan__sel dt {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--abu-500);
}
.bagan__sel dd {
    margin: 2px 0 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--abu-900);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.bagan__sel dd em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--abu-500); }
/* Tanggal bukan besaran yang dibandingkan, jadi tidak perlu setebal angka
   luas di sebelahnya - kalau sama tebal, mata ikut berhenti di sana. */
.bagan__sel--teks { font-size: 12px !important; font-weight: 600 !important; color: var(--abu-700) !important; }
.bagan__sel p {
    margin: 1px 0 0;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--abu-500);
    overflow-wrap: anywhere;
}

/* Sisa negatif berarti bagian-bagiannya melebihi luas induk - keadaan yang
   harus tertangkap sekilas, bukan angka biasa di deretan yang sama. */
.bagan__sel--minus dt,
.bagan__sel--minus dd,
.bagan__sel--minus p { color: var(--merah-600) !important; }

.bagan__catatan {
    margin: 7px 0 0;
    padding-left: 9px;
    border-left: 2px solid var(--abu-200);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--abu-600);
}

/* ------------------------------------ Pemicu pada kolom Bagian daftar aset */

.cip-bagian {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 20px;
    border: 1px solid var(--abu-300);
    background: var(--abu-50);
    color: var(--abu-700) !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background .15s, border-color .15s, color .15s;
}
.cip-bagian:hover {
    background: var(--biru-600);
    border-color: var(--biru-600);
    color: #fff !important;
}
.cip-bagian__ikon { font-size: 12px; opacity: .7; }
.cip-bagian:hover .cip-bagian__ikon { opacity: 1; }

/* Kerangka formulir laci. Ditulis netral agar berkas yang sama dapat dipakai
   sebagai isi halaman penuh - jalur cadangan bila alamatnya dibuka langsung
   atau JavaScript tidak berjalan. */
.laci-form__isi { padding: 16px; }
.laci-form__kaki {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--abu-200);
    background: var(--abu-50);
    border-radius: 0 0 var(--radius) var(--radius);
}
.laci-form__catatan { font-size: 12.5px; color: var(--abu-500); margin-right: auto; }

/* Sekat antar kelompok isian di dalam laci; menggantikan rel kiri yang tidak
   muat pada panel sesempit ini. */
.laci-seksi { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--abu-100); }
.laci-seksi__judul {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--abu-500);
    margin: 0 0 10px;
}

/* ------------------------------------------------------------------ Modal */

.modal-latar {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 20px;
}
.modal-latar--tampil { display: flex; }
.modal {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--bayang-lg);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    animation: modal-masuk .16s ease-out;
}
.modal--lebar { max-width: 780px; }
@keyframes modal-masuk { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.modal__kepala { padding: 14px 18px; border-bottom: 1px solid var(--abu-200); display: flex; align-items: center; gap: 10px; }
.modal__judul { font-weight: 650; font-size: 15.5px; }
.modal__tutup { margin-left: auto; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--abu-500); cursor: pointer; padding: 0 4px; }
.modal__isi { padding: 18px; overflow-y: auto; }
.modal__kaki { padding: 13px 18px; border-top: 1px solid var(--abu-200); display: flex; gap: 8px; justify-content: flex-end; background: var(--abu-50); border-radius: 0 0 var(--radius) var(--radius); }

/* --------------------------------------------------------- Halaman peta */

.peta-kerangka {
    display: flex;
    height: calc(100vh - var(--tinggi-topbar));
    overflow: hidden;

    /* Seluruh halaman peta dikurung dalam satu stacking context sendiri.

       Isinya memakai angka z-index yang tinggi - Leaflet menyusun lapisannya
       sampai 1000, panel wilayah dan panel detail 500-800 - dan tanpa
       kurungan angka-angka itu ikut bersaing di tingkat halaman. Akibatnya
       menu akun pada bilah atas (z-index 70) tertimpa peta begitu dibuka,
       terbaca samar seperti gagal muat padahal memang tertutup.

       Menaikkan z-index menu akun melewati 1000 bukan jalan keluar: laci
       kanan dan modal juga harus tetap berada di atasnya, jadi seluruh
       tangganya ikut naik dan pecah lagi begitu ada komponen baru. Mengurung
       petanya menyelesaikan sumbernya, dan susunan lapisan DI DALAM halaman
       peta tetap persis seperti semula. */
    isolation: isolate;
    position: relative;
    z-index: 0;
}

.panel-wilayah {
    width: 290px;
    flex: 0 0 290px;
    background: #fff;
    border-right: 1px solid var(--abu-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Tangga takik pohon wilayah, dipakai bersama seluruh tingkatnya. */
    --langkah: 16px;
    --takik-aset: 44px;

    /* Lebar kolom panah pada baris aset (panah kecil 11px + gap 6px). Baris
       bagian tidak punya panah, jadi tanpa dihitung di sini takik pertamanya
       habis terpakai mengejar kolom itu dan bagian berdiri sejajar - malah
       satu piksel di kiri - titik warna aset induknya. */
    --takik-panah: 17px;
}
.panel-wilayah--tutup { display: none; }
.panel-wilayah__kepala { padding: 12px 14px; border-bottom: 1px solid var(--abu-200); }
.panel-wilayah__judul { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--abu-500); font-weight: 700; }
.panel-wilayah__nama { font-weight: 650; font-size: 14.5px; color: var(--abu-900); margin-top: 2px; }
.panel-wilayah__cari { padding: 10px 12px; border-bottom: 1px solid var(--abu-200); }
/* Pembagian yang dalam mendorong barisnya makin ke kanan. Daripada nama
   kodenya dipangkas jadi "AST-0001-A-..." , daftarnya dibuat dapat digeser
   mendatar - kode bagian harus terbaca utuh. */
.panel-wilayah__daftar { flex: 1; overflow: auto; padding: 6px 0 16px; }

/* Baris paling dalam menentukan lebar isi; baris lain ikut selebar itu agar
   latar dan sorotannya tetap penuh saat digeser ke kanan. */
.panel-wilayah__daftar > * { min-width: max-content; }
.pohon__dusun-kepala,
.pohon__rt,
.pohon__aset,
.pohon__bagian { min-width: 100%; }
.pohon__bagian .pohon__nama { overflow: visible; text-overflow: clip; }

.pohon__dusun { border-bottom: 1px solid var(--abu-100); }
.pohon__dusun-kepala {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--abu-800);
    user-select: none;
}
.pohon__dusun-kepala:hover { background: var(--abu-50); }
.pohon__dusun-kepala--aktif { background: var(--biru-50); color: var(--biru-800); }
.pohon__panah { width: 14px; font-size: 10px; color: var(--abu-400); transition: transform .15s; flex: 0 0 14px; }
.pohon__panah--buka { transform: rotate(90deg); }
.pohon__nama { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pohon__jumlah { font-size: 11px; color: var(--abu-500); background: var(--abu-100); border-radius: 20px; padding: 1px 7px; font-weight: 600; }
.pohon__rt-daftar { display: none; padding-bottom: 4px; }
.pohon__rt-daftar--buka { display: block; }
.pohon__rt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 26px;
    font-size: 13px;
    cursor: pointer;
    color: var(--abu-600);
}
.pohon__rt:hover { background: var(--abu-50); color: var(--abu-900); }
.pohon__rt--aktif { background: var(--biru-600); color: #fff; }
.pohon__rt--aktif .pohon__jumlah { background: rgba(255, 255, 255, .22); color: #fff; }
.pohon__tanpa-batas { color: var(--kuning-600); font-size: 11px; }

/* ------------------------- Tingkat 3 & 4: aset dan bagian aset ----------- */

.pohon__aset-daftar,
.pohon__bagian-daftar { display: none; }
.pohon__aset-daftar--buka,
.pohon__bagian-daftar--buka { display: block; }

/* Tangga takik pohon wilayah. Tiap tingkat menjorok --langkah lebih jauh
   dari induknya sehingga susunannya terbaca sekali lihat:

     Ambarukmo
       RT 01 / RW 01
         AST-0001
           AST-0001-A
             AST-0001-A-C                                                  */

.pohon__aset,
.pohon__bagian {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--abu-600);
    border-left: 2px solid transparent;
}
.pohon__aset { padding: 4px 12px 4px calc(var(--takik-aset)); }

.pohon__bagian {
    /* --takik diisi JS: 0 untuk bagian langsung aset, 1 untuk bagian dari
       bagian, dan seterusnya tanpa batas. */
    padding: 3px 12px 3px calc(
        var(--takik-aset) + var(--takik-panah) + var(--langkah) + var(--takik, 0) * var(--langkah)
    );
    font-size: 12px;
    color: var(--abu-500);

    /* Garis panduan tegak sebanyak tingkat di atasnya, supaya pada pembagian
       yang dalam masih jelas bagian ini menempel pada induk yang mana.

       Garis pertama dipasang tepat di tengah titik warna aset - 5px ke dalam
       kolomnya - sehingga tiap garis berikutnya, yang otomatis maju satu
       --langkah, juga jatuh di tengah titik warna induknya masing-masing. */
    background-image: repeating-linear-gradient(
        to right, var(--abu-200) 0 1px, transparent 1px var(--langkah)
    );
    background-repeat: no-repeat;
    background-position: calc(var(--takik-aset) + var(--takik-panah) + 5px) 0;
    background-size: calc((var(--takik, 0) + 1) * var(--langkah)) 100%;
}

/* Saat barisnya tersorot, garis panduannya ikut lenyap agar warnanya rata. */
.pohon__bagian:hover,
.pohon__bagian--aktif { background-image: none; }

.pohon__aset:hover,
.pohon__bagian:hover { background: var(--biru-50); color: var(--abu-900); }

.pohon__aset--aktif {
    background: var(--hijau-50);
    border-left-color: var(--hijau-600);
    color: #14532d;
    font-weight: 600;
}
.pohon__bagian--aktif {
    background: var(--kuning-50);
    border-left-color: var(--kuning-600);
    color: #78350f;
    font-weight: 600;
}

.pohon__kode { font-weight: 600; letter-spacing: .01em; }
.pohon__luas {
    margin-left: auto;
    font-size: 11px;
    color: var(--abu-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pohon__aset--aktif .pohon__luas,
.pohon__bagian--aktif .pohon__luas { color: inherit; opacity: .75; }

.pohon__panah--kecil { font-size: 8px; width: 11px; flex: 0 0 11px; }
.pohon__panah--kosong { visibility: hidden; }

.pohon__memuat { padding: 6px 12px 6px var(--takik-aset); font-size: 12px; color: var(--abu-400); font-style: italic; }
.pohon__kosong-cabang { padding: 5px 12px 5px var(--takik-aset); font-size: 12px; color: var(--abu-400); }

.peta-wadah { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Patokan seluruh panel mengambang. Sengaja hanya seluas petanya, tidak
   termasuk bilah alat di bawah - kalau tidak, panel detail yang menjulur
   sampai bawah akan menutupi tombol "Selesai" saat menggambar. */
.peta-panggung { flex: 1; position: relative; min-height: 0; display: flex; }
/* Warna dasar disamakan dengan selubung abu-abu di luar batas kelurahan,
   sehingga area tanpa ubin peta menyatu dan tidak terlihat sebagai lubang. */
#peta { flex: 1; width: 100%; background: #e5e7eb; }

.peta-bilah {
    background: #fff;
    border-top: 1px solid var(--abu-200);
    padding: 8px 12px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}
.peta-bilah__pemisah { width: 1px; height: 22px; background: var(--abu-200); margin: 0 3px; }
.peta-bilah__info { margin-left: auto; font-size: 12.5px; color: var(--abu-500); font-variant-numeric: tabular-nums; }

.alat { position: relative; }
.alat--aktif { background: var(--biru-600) !important; border-color: var(--biru-600) !important; color: #fff !important; }

.peta-kendali {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.panel-mengambang {
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius);
    box-shadow: var(--bayang-lg);
    width: 232px;
    overflow: hidden;
}
.panel-mengambang__kepala {
    padding: 9px 12px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--abu-500);
    border-bottom: 1px solid var(--abu-200);
    background: var(--abu-50);
}
.panel-mengambang__isi { padding: 9px 12px; max-height: 300px; overflow-y: auto; }
.panel-mengambang__isi .centang { padding: 3px 0; }

.petunjuk-gambar {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    background: var(--abu-900);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
    box-shadow: var(--bayang-lg);
    display: none;
    max-width: min(560px, 90%);
    text-align: center;
}
.petunjuk-gambar--tampil { display: block; }
.petunjuk-gambar kbd {
    background: rgba(255, 255, 255, .18);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: inherit;
    font-size: 11.5px;
    margin: 0 1px;
}

.panel-detail {
    position: absolute;
    top: 12px; right: 12px;
    bottom: 12px;
    width: 330px;
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius);
    box-shadow: var(--bayang-lg);
    z-index: 700;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.panel-detail--tampil { display: flex; }
.panel-detail__kepala { padding: 12px 14px; border-bottom: 1px solid var(--abu-200); display: flex; align-items: flex-start; gap: 8px; }
/* Kode dan nama aset berdiri sebaris. Dibungkus flex yang boleh melipat,
   bukan satu baris kaku: nama aset panjang harus turun ke bawah kodenya
   sendiri, bukan memotong tombol tutup di sebelahnya. */
.panel-detail__judul { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; min-width: 0; }
.panel-detail__kode { font-size: 14.5px; font-weight: 700; color: var(--biru-700); letter-spacing: .03em; }
.panel-detail__nama { font-weight: 550; font-size: 14.5px; color: var(--abu-700); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.panel-detail__nama:empty { display: none; }
.panel-detail__isi { flex: 1; overflow-y: auto; padding: 13px 14px; }
.panel-detail__kaki { padding: 11px 14px; border-top: 1px solid var(--abu-200); background: var(--abu-50); display: flex; gap: 7px; flex-wrap: wrap; }

.rincian { display: grid; grid-template-columns: 108px 1fr; gap: 5px 10px; font-size: 13px; }
.rincian dt { color: var(--abu-500); }
.rincian dd { margin: 0; color: var(--abu-800); font-weight: 550; word-break: break-word; }

.judul-bagian {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--abu-500);
    font-weight: 700;
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--abu-200);
}
.judul-bagian:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.bagian-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 13px;
    cursor: pointer;
}
.bagian-item:hover { border-color: var(--biru-500); background: var(--biru-50); }
.bagian-item__warna { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.bagian-item__nama { font-weight: 600; }
.bagian-item__luas { margin-left: auto; color: var(--abu-500); font-variant-numeric: tabular-nums; }

/* Baris perjanjian sewa pada panel detail peta. Sepupu .bagian-item, tetapi
   isinya bertumpuk tiga baris - penyewa, objek beserta masanya, lalu keadaan
   pembayarannya - sehingga tidak dapat memakai tata letak sebaris yang sama. */
.sewa-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 9px;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
}
.sewa-item:hover { border-color: var(--biru-500); background: var(--biru-50); text-decoration: none; }
.sewa-item__warna { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; margin-top: 3px; }
.sewa-item__isi { display: grid; gap: 1px; min-width: 0; }
.sewa-item__nama { font-weight: 650; color: var(--abu-900); }
.sewa-item__meta { font-size: 11.5px; color: var(--abu-500); line-height: 1.45; }

/* Tombol ubah pada tiap baris bagian. Baru muncul saat barisnya disentuh
   kursor supaya deretan bagian tetap terbaca sebagai daftar, bukan sebagai
   deretan tombol - tetapi tetap ada bagi papan ketik, yang tidak punya
   "sentuhan kursor" dan karenanya menampakkannya lewat :focus-visible. */
.bagian-item__ubah {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--abu-500);
    font-size: 12.5px;
    line-height: 1.5;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, color .12s, border-color .12s;
}
.bagian-item:hover .bagian-item__ubah { opacity: 1; }
.bagian-item__ubah:hover { color: var(--biru-700); border-color: var(--biru-500); background: #fff; }
.bagian-item__ubah:focus-visible { opacity: 1; outline: 2px solid var(--biru-500); outline-offset: 1px; }

/* --------------------------------------------------- Keterangan sumber peta

   Lisensi data OpenStreetMap mewajibkan atribusi tetap dapat dibaca, jadi
   teksnya tidak dihapus - hanya diciutkan menjadi lencana "i" seukuran ikon.
   Teks lengkapnya terbuka saat disentuh kursor, ditekan, atau difokuskan
   lewat papan ketik.

   Penyusutan dikerjakan dengan font-size, bukan display, karena Leaflet
   menulis ulang isi kotaknya sebagai teks lepas (bukan elemen) setiap kali
   base map berganti - tidak ada elemen yang dapat disembunyikan.

   Posisinya diatur ke kiri bawah dari PetaAset._siapkanPeta(); sudut kanan
   bawah ditempati panel detail yang melayang di atas peta.                 */

.leaflet-control-attribution {
    font-size: 0;
    line-height: 17px;
    height: 17px;
    padding: 0 5px;
    background: rgba(255, 255, 255, .7);
    color: var(--abu-400);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: help;
    outline: none;
    transition: background .15s ease;
}
.leaflet-control-attribution::before {
    content: 'ⓘ';
    font-size: 11px;
    color: var(--abu-400);
}
.leaflet-control-attribution:hover,
.leaflet-control-attribution:focus,
.leaflet-control-attribution:focus-within {
    font-size: 10px;
    background: rgba(255, 255, 255, .95);
}
.leaflet-control-attribution:hover::before,
.leaflet-control-attribution:focus::before,
.leaflet-control-attribution:focus-within::before { content: 'ⓘ '; }

.leaflet-control-attribution a { color: var(--abu-500); }

.label-peta {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 650;
    color: var(--abu-800);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.leaflet-tooltip.label-peta::before { display: none; }

/* ------------------------------------------------------------ Label wilayah

   Nama dusun dan RT yang melayang di tengah wilayahnya masing-masing.
   Dibuat sebagai marker divIcon (bukan tooltip) agar posisinya persis pada
   titik tengah geometri dan tidak pernah menghalangi klik ke peta.

   Label sengaja tanpa kotak latar; keterbacaan di atas citra satelit
   diperoleh dari halo putih pada bayangan teksnya, sehingga peta di bawah
   label tetap terlihat.                                                    */

.label-wilayah-jangkar {
    width: 0;
    height: 0;
    margin: 0;
    overflow: visible;
    pointer-events: none;
}

.label-wilayah {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
    line-height: 1.15;
    text-align: center;
    color: var(--warna-batas, #334155);
}

.label-wilayah__nama {
    font-weight: 700;
    text-shadow:
        0 0 4px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff,
        1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.label-wilayah__meta {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--abu-500);
    text-shadow: 0 0 4px #fff, 0 0 3px #fff, 0 0 2px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff;
}

.label-wilayah--dusun .label-wilayah__nama {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.label-wilayah--rt .label-wilayah__nama {
    font-size: 11px;
    letter-spacing: .02em;
}

.label-wilayah--bagian .label-wilayah__nama {
    font-size: 10.5px;
    letter-spacing: .02em;
}

/* Label mana yang tampil ditentukan PetaAset._perbaruiLabel(): mengikuti
   kedekatan pandangan, atau mengikuti simpul yang dipilih saat mode fokus
   aktif. */

.label-wilayah-jangkar--sembunyi { display: none; }

.label-wilayah__meta { display: none; }
.peta--label-lengkap .label-wilayah__meta { display: block; }

/* Wilayah yang sedang dipilih pada panel navigasi. */
.label-wilayah-jangkar--aktif .label-wilayah {
    background: rgba(255, 255, 255, .93);
    border: 1px solid var(--warna-batas, var(--abu-300));
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.label-wilayah-jangkar--aktif .label-wilayah__nama,
.label-wilayah-jangkar--aktif .label-wilayah__meta { text-shadow: none; }

.simpul-sunting {
    background: #fff;
    border: 2px solid var(--biru-600);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    cursor: move;
}
.simpul-tengah {
    background: rgba(255, 255, 255, .8);
    border: 2px dashed var(--biru-600);
    border-radius: 50%;
    cursor: copy;
    opacity: .75;
}

/* --------------------------------------------------------- Mode menggambar

   Saat menggambar/menyunting polygon, seluruh layer data dinonaktifkan dari
   penerimaan klik.

   Alasannya: Leaflet menghentikan perambatan klik (DomEvent.stop) begitu
   sebuah layer membuka popup-nya. Karena polygon dusun menutupi seluruh
   wilayah kelurahan, tanpa aturan ini setiap klik akan ditelan popup dusun
   dan titik polygon tidak pernah bertambah.

   Simpul penyunting berupa marker (berada di marker pane, bukan SVG),
   sehingga tetap dapat diklik dan ditarik.                                  */

.peta--menggambar .leaflet-pane > svg path.leaflet-interactive {
    pointer-events: none;
}

/* Geometry milik penyunting sendiri tetap aktif - dibutuhkan mode Pindah
   yang menyeret badan polygon. */
.peta--menggambar .leaflet-pane > svg path.editor-geometri {
    pointer-events: auto;
}

/* ------------------------------------------------------- Peta pada formulir */

/* Dikurung sebab alasan yang sama dengan peta sebaran di dasbor: di sini
   yang tertutupi adalah bilah Simpan yang lengket di bawah. */
.peta-boundary {
    height: 380px;
    border: 1px solid var(--abu-300);
    border-radius: var(--radius-sm);
    overflow: hidden;
    isolation: isolate;
    position: relative;
    z-index: 0;
}
.peta-boundary__bilah { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; align-items: center; }

/* ------------------------------------------------------------------ Bantu */

.baris { display: flex; gap: 14px; flex-wrap: wrap; }
.kolom { flex: 1 1 320px; min-width: 0; }

/* Sebaris kartu yang ujung bawahnya dirapikan sejajar: kartu terpendek
   ditarik setinggi yang tertinggi, ruang lebihnya jatuh di bawah isinya.
   Margin bawah kartu tetap dipertahankan supaya jaraknya ke baris
   berikutnya sama dengan jarak antar kartu di halaman lain. */
/* Baris dua kolom dengan pembagian tetap 80/20 - dipakai peta sebaran dan
   statistik ringkas pada dasbor. Lebarnya dipatok lewat basis, bukan lewat
   flex-grow: grow hanya membagi sisa ruang, sehingga perbandingannya berubah
   mengikuti lebar layar dan tidak pernah benar-benar 80/20.

   Tujuh piksel dipotong dari tiap kolom karena gap 14px berada di antaranya;
   tanpa itu keduanya menjumlah lebih dari 100% dan kolom kanan terlempar ke
   baris berikutnya. */
.baris--80-20 > .kolom:first-child { flex: 0 1 calc(80% - 7px); }
.baris--80-20 > .kolom:last-child { flex: 0 1 calc(20% - 7px); }

/* Pembagian yang lebih lapang untuk halaman yang sisi kanannya berisi daftar
   rincian, bukan sekadar angka: nama penyewa, nama pejabat penerbit SK, dan
   alamat objek sewa semuanya berupa kalimat, dan pada kolom 20% ketiganya
   melipat tiap dua kata sampai tak terbaca. */
.baris--70-30 > .kolom:first-child { flex: 0 1 calc(69% - 7px); }
.baris--70-30 > .kolom:last-child { flex: 0 1 calc(31% - 7px); }

@media (max-width: 1180px) {
    .baris--70-30 > .kolom:first-child,
    .baris--70-30 > .kolom:last-child { flex: 1 1 100%; }
}

/* Di bawah lebar ini 20% tinggal seperempat kartu statistik - angkanya
   terpotong dan labelnya melipat tiap dua kata - jadi keduanya ditumpuk. */
@media (max-width: 1180px) {
    .baris--80-20 > .kolom:first-child,
    .baris--80-20 > .kolom:last-child { flex: 1 1 100%; }
}

.baris--rata > .kolom { display: flex; flex-direction: column; }
.baris--rata > .kolom > .kartu { flex: 1; display: flex; flex-direction: column; }
.baris--rata > .kolom > .kartu > .kartu__isi { flex: 1; }
.antara { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dorong-kanan { margin-left: auto; }
.teks-kecil { font-size: 12.5px; }
.teks-redup { color: var(--abu-500); }
.teks-tebal { font-weight: 650; }
.teks-kanan { text-align: right; }
.angka-rapi { font-variant-numeric: tabular-nums; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.sembunyi { display: none !important; }

/* Remah roti dalam halaman sudah dilepas - jejaknya kini dipasang sekali di
   bilah atas untuk seluruh halaman. Gayanya ada di bagian "Remah roti". */

.halaman-kepala { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.halaman-kepala__aksi { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.halaman-kepala p { margin: 2px 0 0; color: var(--abu-500); font-size: 13px; }

.bilah-progres { height: 6px; background: var(--abu-200); border-radius: 20px; overflow: hidden; min-width: 70px; }
.bilah-progres__isi { height: 100%; background: var(--biru-600); border-radius: 20px; }

/* --------------------------------------------------------------- Paginasi */

/* Paginasi: keterangan jumlah di kiri, tombol halaman di kanan - susunan yang
   sama dengan bilah penyaring di atas tabelnya. Bidangnya rata tanpa bayangan;
   yang membedakan tombol aktif hanyalah warna padat. */
.paginasi {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding: 0;
}

.paginasi__info { font-size: 12.5px; color: var(--abu-500); }
.paginasi__info strong { color: var(--abu-800); font-weight: 700; font-variant-numeric: tabular-nums; }

.paginasi__nomor { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }

.paginasi__tautan {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--abu-200);
    border-radius: 8px;
    background: #fff;
    color: var(--abu-700);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
a.paginasi__tautan:hover {
    background: var(--biru-50);
    border-color: var(--biru-500);
    color: var(--biru-700);
    text-decoration: none;
}

/* Halaman yang sedang dibuka: satu-satunya bidang warna padat di deret ini,
   jadi posisi pembaca terbaca sekali lihat tanpa membandingkan bingkai. */
.paginasi__tautan--kini {
    background: var(--biru-600);
    border-color: var(--biru-600);
    color: #fff;
    font-weight: 700;
}

/* Tombol arah dibedakan dari nomor: yang satu langkah, yang lain tujuan.
   Dulu keduanya sama persis sehingga "Berikutnya" terbaca seperti nomor
   halaman yang kebetulan panjang. */
.paginasi__tautan--arah { padding: 0; color: var(--abu-600); }
.paginasi__tautan--mati { color: var(--abu-300); background: var(--abu-50); border-color: var(--abu-200); cursor: default; }

.paginasi__lompat {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 34px;
    color: var(--abu-400);
    font-weight: 700;
    letter-spacing: 1px;
}

/* Pada layar sempit keterangan dan tombol menumpuk, keduanya di tengah -
   dorongan ke kanan tidak berarti apa-apa pada satu lajur. */
@media (max-width: 620px) {
    .paginasi { justify-content: center; }
    .paginasi__nomor { margin-left: 0; justify-content: center; }
}

/* --------------------------------------------------------- Jendela kemajuan

   Penunjuk kemajuan untuk proses yang lama dan bertahap. Isinya diperbarui
   sambil berjalan dari aliran NDJSON peladen, bukan setelah selesai.       */

.kemajuan-latar {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 20, 42, .55);
    backdrop-filter: blur(2px);
}

.kemajuan {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--bayang-lg);
    overflow: hidden;
}

.kemajuan__kepala { display: flex; align-items: center; gap: 13px; padding: 17px 20px 14px; }
.kemajuan__judul { font-size: 15px; font-weight: 650; color: var(--abu-900); }
.kemajuan__tahap { font-size: 12.5px; color: var(--abu-500); margin-top: 2px; }
.kemajuan__persen {
    margin-left: auto;
    font-size: 17px; font-weight: 700; color: var(--biru-600);
    font-variant-numeric: tabular-nums;
}

.kemajuan__putar {
    width: 26px; height: 26px; flex: 0 0 26px;
    border: 3px solid var(--biru-50);
    border-top-color: var(--biru-600);
    border-radius: 50%;
    animation: kemajuan-putar .8s linear infinite;
}
.kemajuan__putar--diam { animation: none; border-top-color: var(--hijau-600); }
@keyframes kemajuan-putar { to { transform: rotate(360deg); } }

.kemajuan__bilah { height: 5px; background: var(--abu-100); }
.kemajuan__bilah-isi {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--biru-500), var(--biru-600));
    transition: width .3s ease;
}

.kemajuan__catatan {
    max-height: 250px;
    overflow-y: auto;
    padding: 6px 0;
    border-bottom: 1px solid var(--abu-200);
}
.kemajuan__baris {
    display: flex; align-items: baseline; gap: 9px;
    padding: 5px 20px;
    font-size: 12.5px;
}
.kemajuan__tanda { color: var(--hijau-600); font-weight: 700; flex: 0 0 auto; }
.kemajuan__baris--gagal .kemajuan__tanda { color: var(--merah-600); }
.kemajuan__nama { font-weight: 600; color: var(--abu-800); }
.kemajuan__ket { margin-left: auto; color: var(--abu-500); font-variant-numeric: tabular-nums; }
.kemajuan__baris--gagal .kemajuan__ket { color: var(--merah-600); }

.kemajuan__kaki {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 20px;
    background: var(--abu-50);
}

.kemajuan-latar--gagal .kemajuan__persen { color: var(--merah-600); }
.kemajuan-latar--gagal .kemajuan__bilah-isi { background: var(--merah-600); }
.kemajuan-latar--gagal .kemajuan__putar { border-top-color: var(--merah-600); }

@media (prefers-reduced-motion: reduce) {
    .kemajuan__putar { animation: none; }
    .kemajuan__bilah-isi { transition: none; }
}

/* ---------------------------------------------------------------- Profil

   Kepala berwarna dengan potret berinisial, disusul sebaris ringkasan akun.
   Warnanya mengikuti peran pengguna supaya sekali lihat sudah ketahuan
   sedang masuk sebagai siapa.                                              */

/* Sampul memakai biru yang sama dengan sidebar, bukan warna peran: ia kepala
   halaman, bukan penanda golongan, dan warna senada dengan menu di sebelahnya
   membuat keduanya terbaca sebagai satu bidang aplikasi. */
.profil-sampul {
    position: relative;
    border-radius: var(--radius);
    padding: 24px 28px 0;
    margin-bottom: 14px;
    overflow: hidden;
    color: #fff;
    box-shadow: var(--bayang);
    background: linear-gradient(178deg, var(--biru-900), #0a2450);
}

/* Lingkaran samar di sudut, sekadar memberi kedalaman pada bidang warna. */
.profil-sampul::after {
    content: '';
    position: absolute;
    right: -60px; top: -90px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.profil-sampul__isi { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; }
.profil-sampul__teks { min-width: 0; }
.profil-sampul__nama { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 3px; }
.profil-sampul__jabatan { font-size: 13.5px; color: rgba(255, 255, 255, .78); margin: 0 0 11px; }
.profil-sampul__tanda { display: flex; flex-wrap: wrap; gap: 7px; }

.profil-avatar {
    width: 84px; height: 84px; flex: 0 0 84px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 2px solid rgba(255, 255, 255, .3);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .02em;
}

.tanda {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
}
.tanda--hijau { background: rgba(74, 222, 128, .22); border-color: rgba(74, 222, 128, .45); }
.tanda--merah { background: rgba(248, 113, 113, .22); border-color: rgba(248, 113, 113, .45); }

/* Keterangan kontak di kaki sampul. Dulu berdiri sebagai jalur kartu putih
   tersendiri di bawah sampul; ditarik masuk ke sini karena seluruhnya
   menerangkan orang yang namanya baru saja disebut tepat di atasnya - dan
   sebagai blok terpisah ia memakan satu jalur penuh di layar pertama.

   Latar tiap butir sedikit lebih gelap daripada sampulnya, dengan celah 1px
   di antaranya sebagai garis pemisah. */
.profil-sampul__kaki {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin: 22px -28px 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .1);
}
.profil-kaki__butir { padding: 12px 28px 14px; background: #0a2450; min-width: 0; }
.profil-kaki__label {
    display: block;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    margin-bottom: 3px;
}
.profil-kaki__nilai {
    display: block;
    font-size: 13.5px; font-weight: 600; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bilah simpan formulir profil: keterangannya di kiri, tombol di kanan. */
.profil-simpan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profil-simpan .tombol { margin-left: auto; }

.daftar-hak { list-style: none; margin: 0; padding: 0; }
.daftar-hak li {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--abu-100);
}
.daftar-hak li:last-child { border-bottom: 0; }
.daftar-hak__tanda {
    width: 19px; height: 19px; flex: 0 0 19px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 11px; font-weight: 700;
}
.daftar-hak--ya .daftar-hak__tanda { background: var(--hijau-50); color: #15803d; }
.daftar-hak--tidak { color: var(--abu-400); }
.daftar-hak--tidak .daftar-hak__tanda { background: var(--abu-100); color: var(--abu-400); }

@media (max-width: 560px) {
    .profil-sampul__isi { flex-direction: column; align-items: flex-start; gap: 15px; }
    .profil-sampul__nama { font-size: 20px; }
}

/* ------------------------------------------------------------ Log aktivitas

   Satu baris jejak: ikon berwarna menurut kelompok aksinya, keterangan, lalu
   waktu yang dirata-kanankan. Warnanya membuat baris yang dicari ketemu dari
   sekilas pandang, tanpa harus membaca satu per satu.                       */

.jejak {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--abu-100);
}
.jejak:last-child { border-bottom: 0; }
.jejak:hover { background: var(--abu-50); }

.jejak__ikon {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: grid; place-items: center;
    border-radius: 9px;
    font-size: 15px;
    background: var(--abu-100);
}
.jejak__ikon--biru { background: var(--biru-50); }
.jejak__ikon--hijau { background: var(--hijau-50); }
.jejak__ikon--kuning { background: var(--kuning-50); }
.jejak__ikon--merah { background: var(--merah-50); }
.jejak__ikon--ungu { background: #f5f3ff; }
.jejak__ikon--abu { background: var(--abu-100); }

.jejak__isi { flex: 1; min-width: 0; }
.jejak__deskripsi { font-size: 13.5px; font-weight: 600; color: var(--abu-800); }
.jejak__meta { font-size: 12px; color: var(--abu-500); margin-top: 2px; }
.jejak__aksi {
    font-size: 11px;
    background: var(--abu-100);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--abu-600);
}

.jejak__waktu {
    flex: 0 0 auto;
    text-align: right;
    font-size: 12px;
    color: var(--abu-600);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .jejak__waktu { display: none; }
}

/* Catatan keluaran perintah artisan yang dijalankan dari antarmuka. */
.keluaran-perintah {
    margin: 0;
    padding: 13px 16px;
    background: var(--abu-900);
    color: #cbd5e1;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ------------------------------------------------------------------ Masuk

   Halaman masuk terbagi dua: 60% keterangan kalurahan di kiri, 40% formulir
   masuk di kanan. Perbandingannya dipakai mulai lebar 960px; di bawah itu
   keduanya ditumpuk dengan formulir di urutan pertama, sebab di layar kecil
   yang dicari pengguna adalah kolom masuknya, bukan bacaannya.             */

.masuk-halaman {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 65fr 35fr;
    background: linear-gradient(150deg, var(--biru-900) 0%, #14315f 45%, #0b6b52 100%);
}

/* ------------------------------------------------------- Panel keterangan */

.masuk-info {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Ruang kanan dilebihkan: tepi lembar putih di sebelahnya menaiki panel
       ini sejauh 46px, dan tanpa kelonggaran itu tulisan slide tertimbun di
       bawahnya. */
    padding: 34px 96px 26px 42px;
    color: #fff;
    overflow: hidden;
    background: var(--biru-900) var(--latar-kalurahan, none) center/cover no-repeat;
}

/* Tirai gelap di atas foto gedung kalurahan. Tanpa ini teks putih di atas
   langit cerah pada foto tidak terbaca sama sekali. */
.masuk-info__tirai {
    position: absolute;
    inset: 0;
    background:
        /* Cahaya aksen tepat di belakang tempat isi salindia berdiri.
           Tanpa ini panel gelap merata dari ujung ke ujung, dan mata tidak
           punya alasan berhenti di bagian yang justru harus dibaca -
           terbaca sebagai latar belakang, bukan sebagai isi. */
        radial-gradient(62% 46% at 26% 52%, rgba(16, 185, 129, .2) 0%, transparent 72%),
        radial-gradient(45% 34% at 8% 74%, rgba(37, 99, 235, .18) 0%, transparent 76%),
        linear-gradient(160deg, rgba(8, 25, 54, .9) 0%, rgba(9, 30, 62, .78) 45%, rgba(6, 60, 48, .88) 100%),
        radial-gradient(120% 80% at 20% 20%, transparent 0%, rgba(4, 14, 34, .45) 100%);
}
.masuk-info > *:not(.masuk-info__tirai) { position: relative; z-index: 1; }

.masuk-info__kepala { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.masuk-info__lambang {
    width: auto; height: 48px; flex: 0 0 auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.masuk-info__nama { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.masuk-info__anak { font-size: 12px; color: rgba(255, 255, 255, .62); }

/* Panggung salindia. Tingginya dikunci pada tinggi slide tertinggi supaya
   deretan titik di bawahnya tidak melompat setiap kali slide berganti. */
.masuk-info__panggung { position: relative; flex: 1; min-height: 0; }

.salindia {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
    visibility: hidden;
}
.salindia--tampil { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

/* Pembungkus isi salindia - tanpa hiasan.

   Sempat diberi bidang kaca berbatas, lalu dilepas: kotak di dalam kotak
   membuat panel terasa sesak, dan tirai gelap di atas fotonya sudah cukup
   menjaga keterbacaan tanpa bantuan bidang tambahan. Pembungkusnya tetap ada
   karena masih dipakai mengatur tinggi dan menahan slide terpadat - delapan
   aparatur beserta pendidikannya - supaya menggulir sendiri alih-alih
   terpotong.

   min-height 70% membuat isi berdiri di bidang yang tinggi dan tetap, bukan
   mengambang di tengah ruang kosong yang berubah-ubah tiap slide. */
.salindia__isi {
    display: flex;
    flex-direction: column;
    min-height: 70%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Label dijadikan pil bergaris, bukan sekadar teks kecil kapital. Pada foto
   gedung yang ramai, teks tipis melebur dengan latarnya; pil punya bidang
   sendiri sehingga terbaca sebagai penanda topik, bukan bagian dari gambar. */
.salindia__label {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(52, 211, 153, .45);
    background: rgba(52, 211, 153, .14);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hijau-400);
    margin-bottom: 12px;
}
/* Titik berdenyut: penanda kecil bahwa panel ini hidup dan akan berganti. */
.salindia__label::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hijau-400);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .7);
    animation: salindia-denyut 2.4s ease-out infinite;
}
@keyframes salindia-denyut {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .65); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .salindia__label::before { animation: none; }
}
/* Warna dinyatakan tegas: aturan umum h1-h4 mewarnainya abu tua, yang di
   atas panel gelap ini praktis tidak terbaca. */
.salindia__judul {
    font-size: 38px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -.015em;
    margin: 0 0 16px;
    color: #fff;
    text-shadow: 0 2px 14px rgba(4, 14, 34, .55);
}
.salindia__subjudul {
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55); margin: 18px 0 9px;
}
.salindia__teks {
    font-size: 16.5px; line-height: 1.7; color: rgba(255, 255, 255, .82);
    margin: 0 0 11px;
}
.salindia__sisa { font-size: 13.5px; color: rgba(255, 255, 255, .5); margin-top: 9px; }

/* -------------------------------------------------------- Slide per jenis */

.salindia__tokoh { display: flex; align-items: center; gap: 22px; }
.salindia__potret {
    width: 168px; height: 205px; flex: 0 0 168px;
    object-fit: cover; object-position: top center;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, .2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
    background: rgba(255, 255, 255, .08);
}
.salindia__potret--kecil { width: 92px; height: 112px; flex: 0 0 92px; border-radius: 10px; }
.salindia__tokoh-nama { font-size: 24px; font-weight: 700; line-height: 1.3; }
.salindia__tokoh-jabatan { font-size: 16px; color: var(--hijau-400); margin-top: 5px; }

.salindia__visi { display: flex; align-items: flex-start; gap: 18px; }
.salindia__kutipan {
    font-size: 18px; line-height: 1.6; font-style: italic;
    color: rgba(255, 255, 255, .9);
    border-left: 3px solid var(--hijau-400);
    padding-left: 15px;
}

.salindia__nomor {
    margin: 0; padding-left: 19px;
    font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .82);
}
.salindia__nomor li { margin-bottom: 5px; }

.salindia__orang {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 24px;
}
.salindia__orang li {
    border-left: 2px solid rgba(255, 255, 255, .18);
    padding-left: 11px;
    min-width: 0;
}
.salindia__orang-jabatan {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.salindia__orang-nama {
    display: block; font-size: 15px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.salindia__orang-tambahan { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .45); }

.salindia__berita { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }

/* Seluruh baris berita menjadi satu sasaran klik menuju artikelnya. */
.salindia__berita-tautan {
    display: flex;
    gap: 13px;
    align-items: center;
    /* Rata kiri tanpa margin negatif.

       Dulu baris ini ditarik keluar 8px (margin: 0 -8px) supaya latar
       hovernya melebihi teks di kedua sisi. Itu muat selama isi salindia
       masih terkurung kartu ber-padding; begitu kartunya dilepas, tarikan
       itu menonjol keluar dari panel dan memunculkan bilah gulir mendatar
       di dasarnya. Latar hover sekarang mulai persis di tepi teks - selisih
       yang tidak terlihat, sementara gulirnya hilang sama sekali. */
    padding: 7px 8px 7px 0;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}
.salindia__berita-tautan:hover,
.salindia__berita-tautan:focus-visible {
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
}
.salindia__berita-tautan:focus-visible { outline: 2px solid var(--hijau-400); outline-offset: 1px; }

/* Kotak judul+tanggal harus boleh menyusut di bawah lebar isinya.
   Bawaan min-width sebuah flex item adalah auto - artinya "jangan menyusut
   lebih sempit dari isi", dan judul berita yang panjang lalu memaksa seluruh
   baris melebar melewati panel. Itulah asal bilah gulir mendatar yang
   muncul di dasar panel. */
.salindia__berita-tautan > div { min-width: 0; }
.salindia__berita-tautan:hover .salindia__berita-judul { color: var(--hijau-400); }

.salindia__berita-panah { opacity: 0; transition: opacity .15s ease; }
.salindia__berita-tautan:hover .salindia__berita-panah,
.salindia__berita-tautan:focus-visible .salindia__berita-panah { opacity: .8; }
.salindia__berita img {
    width: 86px; height: 62px; flex: 0 0 86px;
    object-fit: cover; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
}
.salindia__berita-kosong {
    width: 86px; height: 62px; flex: 0 0 86px;
    display: grid; place-items: center; font-size: 20px;
    border-radius: 8px; background: rgba(255, 255, 255, .1);
}
.salindia__berita-judul {
    font-size: 15.5px; font-weight: 600; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .15s ease;
}
.salindia__berita-tanggal { font-size: 12.5px; color: rgba(255, 255, 255, .5); margin-top: 3px; }

/* --------------------------------------------------------- Kaki & navigasi */

.masuk-info__kaki {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Navigasi salindia: panah, tab bernama, dan bilah kemajuan.

   Menggantikan deretan titik 9px tanpa nama. Titik memberi tahu ada slide
   lain tetapi tidak memberi alasan untuk menunggunya - orang tidak tahu apa
   isinya. Nama pada tab sekaligus menjadi daftar isi panel ini. */

.salindia-nav { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* Panah senada dengan bantalan tab: bidang tembus pandang tanpa garis tepi,
   sudut sama, tinggi sama. Sebelumnya lingkaran bergaris di samping deretan
   pil bergaris - tiga bentuk berbeda bersebelahan, dan garis di mana-mana. */
.salindia-nav__panah {
    flex: 0 0 auto;
    width: 34px; height: 34px; padding: 0;
    display: grid; place-items: center;
    border-radius: 11px;
    border: 0;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .75);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.salindia-nav__panah:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.salindia-nav__panah:focus-visible { outline: 2px solid var(--hijau-400); outline-offset: 2px; }

/* Tab duduk di atas satu bantalan bersama, bukan berdiri sendiri-sendiri.
   Dengan satu bidang di belakangnya, deretan ini terbaca sebagai satu alat
   pemilih - dan yang menyala cukup dibedakan warna isian, tanpa perlu garis
   tepi pada tiap pilnya.

   Tidak melipat ke baris kedua melainkan menggeser mendatar: baris kedua
   yang isinya satu-dua pil membuat kaki panel tampak patah, sedangkan
   geserannya sendiri tak terlihat karena tab yang menyala selalu ditarik ke
   tengah pandangan oleh salindia.js. */
.salindia-tab {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    padding: 4px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .07);
}
.salindia-tab::-webkit-scrollbar { display: none; }

.salindia-tab__butir {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 6px 14px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .66);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.salindia-tab__butir:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.salindia-tab__butir:focus-visible { outline: 2px solid var(--hijau-400); outline-offset: -2px; }

/* Yang menyala diisi penuh warna mint dengan tulisan hijau tua. Dulu isiannya
   hanya hijau samar bergaris tipis - pada latar hijau tua panel, bedanya
   dengan tab lain nyaris tak terbaca. Warna terbalik seperti ini satu-satunya
   bidang terang di kaki panel, jadi posisi pembaca terlihat sekali pandang. */
.salindia-tab__butir--aktif {
    background: var(--hijau-400);
    color: #063a29;
    font-weight: 700;
}
.salindia-tab__butir--aktif:hover { background: #6ee7a0; color: #063a29; }

/* --------------------------------------- Cincin hitung mundur di kanan atas

   Menggantikan bilah 2px di dasar tab. Yang lama benar secara fungsi tetapi
   salah letak: berada di ujung bawah panel, jauh dari tempat mata membaca,
   dan setipis itu tidak pernah benar-benar tertangkap. Di kanan atas cincin
   ini satu-satunya benda yang bergerak, jadi terlihat tanpa perlu dicari.

   Keliling lingkaran r=17 adalah 2*pi*17 = 106,81. Nilai itu dipakai apa
   adanya sebagai dasharray sehingga satu putaran penuh sama dengan satu
   periode jeda - tidak perlu perhitungan apa pun di JavaScript. */
.salindia-loader {
    position: relative;
    margin-left: auto;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
}
.salindia-loader__cincin { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.salindia-loader__cincin circle { fill: none; stroke-width: 2.5; }
.salindia-loader__alur { stroke: rgba(255, 255, 255, .16); }
.salindia-loader__isi {
    stroke: var(--hijau-400);
    stroke-linecap: round;
    stroke-dasharray: 106.81;
    stroke-dashoffset: 106.81;
    filter: drop-shadow(0 0 4px rgba(52, 211, 153, .55));
    animation: salindia-hitung var(--jeda, 2.5s) linear forwards;
    transition: opacity .2s ease;
}
/* Kursor sedang membaca panel: hitungan ditahan, cincinnya ikut berhenti.

   Diredupkan sedikit supaya berhentinya terbaca sebagai ditahan, bukan macet.
   Cincin yang diam pada warna penuh tidak bisa dibedakan dari cincin yang
   rusak, dan pengguna lalu menggerakkan kursor untuk mengujinya - justru
   membatalkan penahanan yang tadi ia inginkan. */
.masuk-info--tahan .salindia-loader__isi {
    animation-play-state: paused;
    opacity: .5;
}

.salindia-loader__angka {
    position: relative;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.salindia-loader__angka i { font-style: normal; color: rgba(255, 255, 255, .45); }

@keyframes salindia-hitung {
    from { stroke-dashoffset: 106.81; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .salindia-loader__isi { animation: none; stroke-dashoffset: 0; }
}

.masuk-info__sumber { font-size: 11.5px; color: rgba(255, 255, 255, .5); }
.masuk-info__sumber:hover { color: rgba(255, 255, 255, .85); text-decoration: none; }

/* ---------------------------------------------------------------- Formulir */

/* Latar gerbang tidak lagi rata abu. Dua sapuan warna samar - biru di atas,
   hijau di bawah - membuat bidang seluas ini punya kedalaman tanpa menambah
   satu gambar pun, dan menyambung dengan panel kiri yang memang berwarna. */
/* Panel kanan berupa lembar putih yang tepi kirinya membulat dan menaiki
   panel kiri sedikit. Lengkung inilah yang menggantikan garis lurus di antara
   dua warna - halaman jadi terbaca sebagai satu lembar yang menutupi
   pemandangan di belakangnya, bukan dua bidang yang ditempel bersebelahan.

   Bayangan ke arah kiri menegaskan bahwa ia memang berada di atas, bukan
   sekadar berwarna beda. */
.masuk-gerbang {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    margin-left: -46px;
    padding: 24px 30px;
    border-radius: 46px 0 0 46px;
    background: #fff;
    box-shadow: -28px 0 64px rgba(3, 16, 40, .26);
}

/* Semburat warna sangat samar di kedua sudut - biru di atas, hijau di bawah -
   supaya lembar seputih ini tidak jatuh menjadi kertas kosong. */
.masuk-gerbang::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(460px 300px at 92% -6%, rgba(37, 99, 235, .12), transparent 66%),
        radial-gradient(420px 320px at 4% 104%, rgba(16, 185, 129, .1), transparent 66%);
    pointer-events: none;
}

/* Kisi peta samar. Motifnya bukan hiasan asal pilih: yang dijaga halaman ini
   aplikasi pemetaan, dan kertas berkisi adalah gambar pertama yang muncul di
   kepala saat orang membayangkan peta. Digambar dari dua gradien berulang -
   nol berkas gambar, nol permintaan tambahan.

   Tengahnya dilubangi topeng melingkar sehingga kisinya memudar habis tepat
   di tempat isian berdiri; motif yang menerus sampai ke belakang tulisan
   mengganggu justru pada saat orang mengetik kata sandi. */
.masuk-gerbang::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(29, 78, 216, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 78, 216, .05) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(circle at 50% 48%, transparent 40%, #000 86%);
    mask-image: radial-gradient(circle at 50% 48%, transparent 40%, #000 86%);
    pointer-events: none;
}

/* Isian mengalir langsung di atas panel - tanpa kartu, tanpa bingkai, tanpa
   bayangan. Yang membatasinya cukup lebar bacanya sendiri. */
.masuk-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 372px;
    animation: masuk-naik .5s ease both;
}

/* Naik perlahan sekali saat halaman terbuka - cukup untuk membuat halaman
   terasa hidup, cukup singkat untuk tidak menahan orang yang sudah hafal
   letak isiannya. */
@keyframes masuk-naik {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .masuk-panel { animation: none; }
}

.masuk-kepala { text-align: center; margin-bottom: 26px; }

/* Lambang dikelilingi cincin gradasi memutar - biru, hijau, ungu, kembali ke
   biru. Cincinnya latar span-nya sendiri dan cakram putihnya latar gambar di
   dalamnya, jadi tidak ada elemen tambahan yang perlu dipasang di markup.
   Tanpa kartu di belakangnya, lambang perlu sesuatu yang mendudukkannya. */
.masuk-lambang {
    display: block;
    width: 88px; height: 88px;
    margin: 0 auto 14px;
    padding: 4px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, var(--biru-600), var(--hijau-600), #7c3aed, var(--biru-600));
    box-shadow: 0 12px 30px rgba(3, 16, 40, .18);
}
.masuk-lambang img {
    display: block;
    width: 100%; height: 100%;
    padding: 14px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
}

.masuk-judul { font-size: 23px; color: var(--biru-900); margin-bottom: 4px; letter-spacing: -.015em; }

/* Judul diwarnai gradasi yang sama dengan cincin lambangnya. Dibungkus
   @supports sebab tanpa background-clip: text, color: transparent membuat
   judulnya lenyap sama sekali - bukan sekadar tidak bergradasi. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .masuk-judul {
        background: linear-gradient(96deg, var(--biru-800) 8%, var(--hijau-600) 94%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* Garis pendek biru-ke-hijau di bawah judul: warna aplikasi bertemu warna
   panel kalurahan di sebelahnya, jadi kedua sisi halaman terikat satu sama
   lain alih-alih sekadar berdampingan. */
.masuk-judul::after {
    content: '';
    display: block;
    width: 54px; height: 3px;
    margin: 10px auto 11px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--biru-600), var(--hijau-600));
}

.masuk-anak { margin: 0; font-size: 12.5px; color: var(--abu-500); }

.masuk-isi { padding: 0; }

/* Sapaan diberi garis biru pendek di kiri - satu-satunya penanda tegak di
   halaman ini, sekaligus tempat mata berhenti sebelum turun ke isian. */
.masuk-sapa {
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid var(--biru-600);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--abu-900);
}
.masuk-sapa__anak { margin: 4px 0 20px; padding-left: 15px; font-size: 12.5px; color: var(--abu-500); }

/* Isian berikon. Ikonnya duduk di dalam lencana persegi membulat di ujung
   kiri kolom - bukan menempel telanjang pada garis tepinya - sehingga kolom
   ketikan punya benda yang mengawali bidangnya, dan bukan sekadar kotak
   kosong sepanjang 300 piksel.

   Lencananya membiru bersama seluruh kolom saat difokuskan; tiga hal berubah
   serentak (garis, lencana, cincin), jadi kolom mana yang sedang dipakai
   terbaca tanpa dicari. */
.masuk-bidang { position: relative; margin-bottom: 16px; }
.masuk-bidang__ikon {
    position: absolute;
    left: 7px; bottom: 7px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--abu-100);
    color: var(--abu-500);
    pointer-events: none;
    transition: background .16s, color .16s;
}
.masuk-bidang:focus-within .masuk-bidang__ikon { background: var(--biru-600); color: #fff; }

.masuk-bidang .kendali {
    height: 48px;
    padding-left: 50px;
    border: 2px solid var(--abu-200);
    border-radius: 13px;
    font-size: 14px;
    background: #fff;
    transition: border-color .16s, box-shadow .16s;
}
.masuk-bidang .kendali::placeholder { color: var(--abu-400); }
.masuk-bidang .kendali:hover { border-color: var(--abu-300); }
.masuk-bidang .kendali:focus {
    border-color: var(--biru-600);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}
.masuk-bidang:focus-within .bidang__label { color: var(--biru-700); }

.masuk-bidang__lihat {
    position: absolute;
    right: 8px; bottom: 11px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--abu-400);
    cursor: pointer;
}
.masuk-bidang__lihat:hover { background: var(--abu-100); color: var(--abu-700); }
.masuk-bidang__lihat--nyala { color: var(--biru-600); }
.masuk-bidang:has(.masuk-bidang__lihat:not(.sembunyi)) .kendali { padding-right: 44px; }

/* Tombol masuk: satu-satunya bidang pekat di lembar seputih ini, dengan
   bayangan sewarna dirinya sehingga tampak menyala. */
.masuk-tombol {
    height: 48px;
    font-size: 14.5px;
    font-weight: 650;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(96deg, var(--biru-600), #4f46e5);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
    transition: box-shadow .16s, transform .16s;
}
.masuk-tombol:hover {
    background: linear-gradient(96deg, var(--biru-700), #4338ca);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .38);
    transform: translateY(-1px);
}
.masuk-tombol:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .masuk-tombol:hover { transform: none; }
}

/* Kaki tinggal barisan teks kecil di dasar panel: latar abu dan garis atasnya
   ikut hilang bersama kartunya - keduanya dulu hanya menandai batas kartu,
   bukan batas isi. */
.masuk-kaki {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--abu-200);
    font-size: 12px;
    color: var(--abu-500);
    text-align: center;
}

/* ------------------------------------------------------------- Layar sempit */

@media (max-width: 960px) {
    .masuk-halaman { grid-template-columns: 1fr; }
    /* Pada satu lajur kedua panel bertumpuk atas-bawah; lengkung di tepi kiri
       tidak lagi memisahkan apa pun, dan sudut membulatnya justru menyisakan
       dua celah kosong di sisi halaman. */
    .masuk-gerbang {
        order: -1;
        margin-left: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 32px 20px;
    }
    .masuk-info { padding: 28px 24px 22px; }
    .masuk-info__panggung { min-height: 330px; }
    .salindia { position: relative; }
    .salindia:not(.salindia--tampil) { display: none; }
    /* Di sini slide mengalir mengikuti isinya, bukan dikunci pada tinggi
       panggung - 70% dari tinggi yang menyesuaikan isi tidak berarti apa-apa
       dan hanya menyisakan ruang kosong di bawah tiap slide. */
    .salindia__isi { min-height: 0; }
    .salindia__judul { font-size: 26px; }
    .salindia__teks { font-size: 15.5px; }
    .salindia__kutipan { font-size: 16px; }
    .salindia__orang { grid-template-columns: 1fr; }
    .salindia__tokoh { gap: 16px; }
    .salindia__potret { width: 124px; height: 152px; flex-basis: 124px; }
}

@media (prefers-reduced-motion: reduce) {
    .salindia { transition: none; transform: none; }
}

/* ------------------------------------------------------------------ Cetak */

@media print {
    .sidebar, .topbar, .halaman-kepala__aksi, .saring, .paginasi, .form-aksi, .tanpa-cetak { display: none !important; }
    .utama { margin-left: 0; }
    .isi { padding: 0; }
    .kartu { border: 0; box-shadow: none; margin-bottom: 10px; }
    .kartu__kepala { padding-left: 0; padding-right: 0; }
    .kartu__isi { padding: 0; }
    body { background: #fff; font-size: 11px; }
    .tabel th, .tabel td { padding: 4px 6px; font-size: 11px; }

    /* Potret sebagai bawaan. Dulu di sini tertulis landscape, dan itu benar
       untuk laporan rincian yang memang berkolom banyak - tetapi aturan ini
       berlaku bagi SELURUH halaman cetak. Lembar yang memang mendatar sudah
       menyatakan @page-nya sendiri, sedangkan surat pengingat tidak: ia
       tercetak di atas kertas mendatar sehingga isinya yang setinggi satu
       halaman potret tumpah menjadi dua halaman. */
    @page { margin: 12mm; size: A4 portrait; }
}

/* ======================================================================
   LEMBAR CETAK

   Dokumen cetak tersendiri, bukan halaman web yang dipaksa masuk kertas.
   Antarmuka layar dibuat untuk menelusuri data - kartu, bayangan, tombol,
   kolom yang melar mengikuti lebar layar - dan tak satu pun berguna di atas
   kertas. Lembar ini menggantinya dengan bentuk surat resmi: kop instansi,
   judul di tengah, tabel bergaris, dan ruang tanda tangan.

   Ukurannya ditulis dalam mm dan pt supaya hasil cetaknya sama di layar
   mana pun - px pada media cetak bergantung pada DPI peramban.
   ====================================================================== */

/* Di dalam halaman aplikasi lembar hanya muncul saat dicetak; pada
   halaman pratinjau cetak ia justru satu-satunya isi. */
.lembar { display: none; }
.badan-cetak .lembar { display: block; }

@media print {
    .lembar { display: block; }
}


.lembar,
.lembar * {
    /* Latar gelap pada kepala tabel dan batang proporsi wajib ikut
       tercetak; tanpa ini peramban membuangnya demi menghemat tinta. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.lembar {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 9.5pt;
    line-height: 1.35;
    color: #10151f;
}

.lembar-halaman + .lembar-halaman { break-before: page; }

/* ------------------------------------------------------------- Kop */

.lembar-kop { display: flex; align-items: center; gap: 4.5mm; }
.lembar-kop__lambang { width: auto; height: 15mm; flex: 0 0 auto; }
.lembar-kop__teks { flex: 1; text-align: center; }
.lembar-kop__instansi { font-size: 10.5pt; font-weight: 700; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.lembar-kop__nama { font-size: 13pt; font-weight: 700; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.lembar-kop__alamat { font-size: 7.8pt; margin: .8mm 0 0; color: #38404f; }

/* Garis rangkap khas kop surat: satu tebal, satu tipis di bawahnya. */
.lembar-kop__garis { border-top: .9mm solid #0c2d5e; margin-top: 2mm; }
.lembar-kop__garis::after {
    content: '';
    display: block;
    border-top: .3mm solid #0c2d5e;
    margin-top: .8mm;
}

/* ----------------------------------------------------------- Tajuk */

.lembar-tajuk { text-align: center; margin: 3mm 0 2.5mm; }
.lembar-tajuk__judul {
    font-size: 12pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
    color: #0c2d5e;
}
.lembar-tajuk__anak { font-size: 8.8pt; margin: .8mm 0 0; color: #38404f; }
.lembar-tajuk__garis { width: 42mm; height: .6mm; background: #0c2d5e; margin: 2mm auto 0; }

/* Keterangan cakupan & waktu cetak, sejajar kiri-kanan. */
.lembar-meta {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    font-size: 8pt;
    color: #38404f;
    padding: 1.4mm 0;
    border-top: .2mm solid #c9d2e0;
    border-bottom: .2mm solid #c9d2e0;
    margin-bottom: 3mm;
}
.lembar-meta__nilai { font-weight: 700; color: #10151f; }

/* -------------------------------------------------------- Ikhtisar */

.lembar-angka {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5mm;
    margin-bottom: 3.5mm;
}
.lembar-angka__kotak {
    border: .25mm solid #c3cddd;
    border-top: 1.4mm solid #0c2d5e;
    background: #f7f9fc;
    padding: 2.2mm 3mm;
    text-align: center;
}
.lembar-angka__label {
    font-size: 7.2pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4a5568;
    margin-bottom: 1mm;
}
.lembar-angka__nilai {
    font-size: 14.5pt;
    font-weight: 700;
    line-height: 1.05;
    color: #0c2d5e;
    font-variant-numeric: tabular-nums;
}
.lembar-angka__satuan { font-size: 8pt; font-weight: 400; color: #4a5568; }
.lembar-angka__kaki { font-size: 7.4pt; color: #4a5568; margin-top: .7mm; }

/* ----------------------------------------------------------- Seksi */

.lembar-seksi { margin-bottom: 3mm; break-inside: avoid; }
.lembar-seksi--panjang { break-inside: auto; }
.lembar-seksi__judul {
    display: flex;
    align-items: center;
    gap: 2.5mm;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #0c2d5e;
    margin: 0 0 1.8mm;
}
.lembar-seksi__judul::before {
    content: '';
    width: 1.4mm;
    height: 4mm;
    background: #0c2d5e;
    flex: 0 0 auto;
}
.lembar-seksi__jumlah { margin-left: auto; font-size: 7.4pt; font-weight: 400; color: #4a5568; letter-spacing: 0; }

/* ----------------------------------------------------------- Tabel */

.lembar-tabel { width: 100%; border-collapse: collapse; font-size: 8pt; line-height: 1.25; }
.lembar-tabel thead { display: table-header-group; }
.lembar-tabel thead th {
    background: #0c2d5e;
    color: #fff;
    font-size: 6.9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    padding: 1mm 2mm;
}
.lembar-tabel tbody td { padding: .75mm 2mm; border-bottom: .2mm solid #dde3ec; }
.lembar-tabel tbody tr:nth-child(even) td { background: #f4f7fb; }
.lembar-tabel tbody tr { break-inside: avoid; }
.lembar-tabel tfoot td {
    padding: 1.1mm 2mm;
    font-weight: 700;
    background: #e8eef7;
    border-top: .5mm solid #0c2d5e;
}
.lembar-tabel .angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lembar-tabel .urut { text-align: right; width: 8mm; color: #4a5568; }
.lembar-tabel__kosong { text-align: center; padding: 4mm; color: #4a5568; font-style: italic; }

.lembar-catatan {
    margin: 2.5mm 0 0;
    padding: 1.8mm 2.5mm;
    border-left: .8mm solid #b9c5d8;
    background: #f4f7fb;
    font-size: 7.6pt;
    color: #38404f;
}

/* Titik warna master data - penanda yang sama dengan di peta. */
.lembar-titik {
    display: inline-block;
    width: 2.2mm; height: 2.2mm;
    border-radius: 50%;
    margin-right: 1.4mm;
    vertical-align: middle;
    border: .2mm solid rgba(0, 0, 0, .18);
}

/* Batang proporsi. Angka saja sulit dibandingkan sekilas; batangnya
   memberi bentuk yang langsung terbaca, dan tetap jelas bila dicetak
   hitam putih karena isiannya pekat. */
.lembar-bar { display: flex; align-items: center; justify-content: flex-end; gap: 1.8mm; }
.lembar-bar__alur {
    width: 22mm;
    height: 2.2mm;
    background: #dbe2ec;
    flex: 0 0 22mm;
    overflow: hidden;
}
.lembar-bar__isi { display: block; height: 100%; background: #0c2d5e; }
.lembar-bar__teks { min-width: 10mm; text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------- Tanda tangan & kaki */

.lembar-ttd { display: flex; justify-content: flex-end; margin-top: 8mm; break-inside: avoid; }
.lembar-ttd__blok { width: 66mm; text-align: center; font-size: 9.5pt; }
.lembar-ttd__ruang { height: 19mm; }
.lembar-ttd__nama { font-weight: 700; text-decoration: underline; }
/* Titik-titik pengganti nama sudah berfungsi sebagai garis tanda tangan. */
.lembar-ttd__nama--kosong { font-weight: 400; text-decoration: none; letter-spacing: .05em; }
.lembar-ttd__jabatan { font-size: 8.5pt; color: #38404f; }

/* Penutup lembar: catatan asal batas di kiri, tanda tangan di kanan. Ruang
   di sebelah kiri tanda tangan selama ini menganggur, jadi catatan yang
   ditaruh di sana tidak memakan tinggi tambahan - dan rekap per dusun tetap
   selesai dalam satu halaman. */
.lembar-penutup {
    display: flex;
    align-items: flex-start;
    gap: 6mm;
    margin-top: 3mm;
    break-inside: avoid;
}
/* Ditulis lebih khusus agar menang atas ragam mendatar yang memberi
   .lembar-ttd jarak atas sendiri; di dalam penutup jaraknya sudah diatur
   pembungkusnya, dan jarak ganda memakan sisa halaman yang tinggal sedikit. */
.lembar .lembar-penutup .lembar-catatan { flex: 1; margin-top: 0; }
.lembar .lembar-penutup .lembar-ttd { flex: none; margin-top: 0; }

/* Catatan asal batas wilayah untuk kolom yang angkanya masih perkiraan. */
.lembar-catatan {
    display: flex;
    gap: 1.4mm;
    margin: 2.5mm 0 0;
    padding: 1.6mm 2.4mm;
    border-left: .7mm solid #c9d2e0;
    background: #f4f6fa;
    font-size: 7.4pt;
    line-height: 1.45;
    color: #38404f;
    break-inside: avoid;
}
.lembar-catatan .catatan-batas__tanda { font-weight: 700; color: #0c2d5e; }

/* Ragam alinea: catatan yang isinya kalimat biasa, bukan tanda diikuti
   keterangannya. Susunan flex di atas menjadikan tiap anak sebuah kotak
   tersendiri - satu <strong> di tengah kalimat cukup untuk memecah
   alineanya menjadi dua tumpukan kata yang urutannya tidak lagi terbaca. */
.lembar-catatan--alinea { display: block; }

.lembar-kaki {
    margin-top: 3mm;
    padding-top: 1.5mm;
    border-top: .2mm solid #c9d2e0;
    font-size: 7.5pt;
    color: #4a5568;
    display: flex;
    justify-content: space-between;
    gap: 5mm;
}

/* ------------------------------------------------------- Ragam mendatar

   Kertas mendatar jauh lebih lebar, jadi ikhtisar angka boleh berjajar empat
   dan tabel rinciannya diberi huruf lebih kecil agar seluruh kolom muat. */

.lembar--lanskap .lembar-angka { grid-template-columns: repeat(4, 1fr); }
.lembar--lanskap .lembar-tabel { font-size: 7.4pt; }
.lembar--lanskap .lembar-tabel thead th { font-size: 6.4pt; padding: 1mm 1.6mm; }
.lembar--lanskap .lembar-tabel tbody td { padding: .35mm 1.6mm; }
.lembar--lanskap .lembar-tabel tfoot td { padding: 1mm 1.6mm; }

/* --------------------------------------- Susunan berkolom pada lembar cetak

   Laporan papan kendali memuat belasan tabel pendek. Ditumpuk satu per satu
   ke bawah, seluruhnya menjadi sembilan lembar yang isinya separuh kosong di
   sisi kanan; dijajarkan dua atau tiga per baris, yang sama muat dalam empat
   lembar dan tiap perbandingan berdiri berdampingan dengan pembandingnya. */

/* Sejajar tinggi, bukan sekadar berdampingan. align-items bawaan grid
   memang stretch, tetapi panelnya harus ikut menuntutnya lewat height:100% -
   tanpa itu tiap kotak berhenti setinggi isinya sendiri dan sebaris panel
   berakhir bergerigi seperti tumpukan kertas yang tidak dirapikan. */
.lembar-kolom { display: grid; gap: 3.5mm; align-items: stretch; margin-bottom: 3.5mm; }
.lembar-kolom--2 { grid-template-columns: 1fr 1fr; }
.lembar-kolom--3 { grid-template-columns: repeat(3, 1fr); }
.lembar-kolom > * { min-width: 0; }

/* ------------------------------------------------------- Panel lembar cetak

   Tiap tabel dikurung kotak bertepi dengan kepala berlatar. Pada lembar yang
   memuat belasan tabel, garis tepi itulah yang memberi tahu mata di mana satu
   pokok berakhir dan pokok berikutnya mulai - tanpa kotak, dua tabel yang
   bersebelahan terbaca seperti satu tabel berkolom banyak. */

.lembar-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: .2mm solid #b9c5d8;
    background: #fff;
    break-inside: avoid;
}
/* Panel berisi belasan baris memang tidak muat sehalaman. Dibiarkan terbelah
   apa adanya lebih baik daripada dilempar utuh ke halaman berikutnya dan
   meninggalkan setengah halaman kosong di belakangnya. */
.lembar-panel--panjang { break-inside: auto; }

.lembar-panel__kepala {
    display: flex;
    align-items: baseline;
    gap: 3mm;
    padding: 1.3mm 2.4mm;
    background: #eaeff7;
    border-bottom: .2mm solid #b9c5d8;
}
.lembar-panel__judul {
    margin: 0;
    font-size: 8.4pt;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #0c2d5e;
}
.lembar-panel__jumlah {
    margin-left: auto;
    font-size: 7pt;
    color: #4a5568;
    text-align: right;
    white-space: nowrap;
}

/* Isi memuai memenuhi sisa kotak, sehingga panel pendek pada baris yang sama
   tetap berakhir di garis bawah yang sejajar. */
.lembar-panel__isi { flex: 1; }
.lembar-panel__isi .lembar-tabel tbody tr:last-child td { border-bottom: 0; }

/* Keterangan penutup panel menempel di dasar kotak, bukan mengambang di
   tengah ruang sisa. */
.lembar-panel__catatan {
    margin: 0;
    padding: 1.6mm 2.4mm;
    border-top: .2mm solid #dde3ec;
    background: #f6f8fc;
    font-size: 7.2pt;
    line-height: 1.45;
    color: #38404f;
}
.lembar-panel__catatan strong { color: #10151f; }

/* Dua tabel dalam satu panel - misalnya keadaan termin lalu cara setorannya -
   dipisah garis, bukan jarak: keduanya masih satu pokok. */
.lembar-panel__isi + .lembar-panel__isi { border-top: .5mm solid #eaeff7; }

.lembar-angka--5 { grid-template-columns: repeat(5, 1fr) !important; }

/* Kotak angka yang membawa kabar buruk diberi tepi merah tipis. Bukan latar
   penuh: pada cetakan hitam putih latar pekat justru menelan angkanya. */
.lembar-angka__kotak--awas { border-color: #b91c1c; }
.lembar-angka__kotak--awas .lembar-angka__nilai { color: #b91c1c; }

/* Nilai rupiah berdigit sepuluh tidak muat pada ukuran angka bawaan; yang
   dikecilkan hanya yang berupa uang, sedangkan angka bersatuan - hektare,
   jumlah - tetap besar supaya bandingannya antar kotak tidak hilang. */
.lembar-angka__nilai--uang { font-size: 12.5pt; }

/* Garis kemajuan penerimaan pada lembar ikhtisar. */
.lembar-kemajuan { display: flex; align-items: center; gap: 3mm; margin: 2.5mm 0 3mm; }
.lembar-kemajuan__alur {
    flex: 1;
    height: 3.4mm;
    background: #dbe2ec;
    border: .2mm solid #c9d2e0;
    overflow: hidden;
}
.lembar-kemajuan__isi { display: block; height: 100%; background: #15803d; }
.lembar-kemajuan__teks { font-size: 8pt; color: #38404f; white-space: nowrap; }
.lembar-kemajuan__teks strong { color: #10151f; }

/* Tajuk pada lembar lanjutan: tanpa kop instansi, karena kop hanya sah
   sekali di lembar pertama - lembar berikutnya cukup menyebut isinya. */
.lembar-tajuk--lanjutan { margin-top: 0; }

/* ------------------------------------------------- Lembar bertinggi tetap

   A4 mendatar dikurangi margin 10mm menyisakan tepat 190mm ruang cetak.
   Dibiarkan mengalir, isi yang kelebihan sedikit saja mendorong kaki lembar
   ke halaman berikutnya - dan yang tercetak adalah selembar penuh kertas
   berisi satu baris kaki, persis yang membuat berkas ini terlihat tidak
   terurus. Dengan tinggi yang dipatok, tiap bagian mendapat satu halaman
   utuh dan kakinya selalu duduk di dasar halamannya sendiri.

   Lampiran sengaja tidak memakainya: daftar perjanjian memang harus bebas
   mengalir sepanjang berapa pun halaman yang dibutuhkannya. */
.lembar-halaman--tetap {
    height: 190mm;
    display: flex;
    flex-direction: column;
}
/* Ditulis lebih khusus agar menang atas ragam mendatar, yang memberi kaki
   lembar margin tetap 2mm - dan margin tetap itulah yang membuat kakinya
   berhenti tepat di bawah isi, bukan turun ke dasar halaman. */
.lembar--lanskap .lembar-halaman--tetap .lembar-kaki { margin-top: auto; }

/* Baris data yang bernilai nol - padukuhan tanpa sewa - tetap tercetak
   tetapi diredupkan, sehingga mata mencari yang berisi lebih dulu. */
.lembar-baris--sepi td { color: #6b7688; }

.lembar-samar { font-size: 6.6pt; color: #6b7688; line-height: 1.2; }

/* Sel berisi kode, nomor, atau tanggal. Peramban memenggal kata pada tanda
   hubung, sehingga SWA-2026-0032 pada kolom sempit patah menjadi tiga baris
   dan tinggi seluruh barisnya ikut naik - padahal bentuk utuh kode itulah
   yang dicocokkan dengan map berkas di kantor. */
.lembar-kode, .lembar-kode .lembar-samar { white-space: nowrap; }

.lembar-tabel--rapat { margin-top: 2mm; }
.lembar-tabel--rapat tbody td { padding: .5mm 2mm; }

/* ------------------------------------------ Keterbacaan lembar papan kendali

   Laporan ini dibaca di rapat, kerap dari salinan fotokopi, jadi hurufnya
   dinaikkan dan barisnya dilapangkan dari ukuran bawaan lembar mendatar.
   Ditulis sebagai ragam tersendiri supaya lembar aset, bagian, per-dusun,
   per-RT, dan rincian sewa tetap seperti sedia kala. */

.lembar--papan .lembar-tabel { font-size: 7.9pt; }
.lembar--papan .lembar-tabel thead th { font-size: 6.8pt; padding: 1.1mm 2mm; letter-spacing: .03em; }
.lembar--papan .lembar-tabel tbody td { padding: .85mm 2mm; }
.lembar--papan .lembar-tabel tfoot td { padding: 1.1mm 2mm; }
.lembar--papan .lembar-tabel .urut { width: 7mm; }

/* Batang proporsi dipendekkan: pada kolom panel yang selebar sepertiga
   halaman, batang 22mm menyisakan terlalu sedikit ruang bagi angkanya. */
.lembar--papan .lembar-bar__alur { width: 14mm; flex-basis: 14mm; height: 1.9mm; }

/* Kertas mendatar hanya setinggi 210mm - jauh lebih pendek daripada potret -
   sehingga kepala, ikhtisar, dan ruang tanda tangan perlu dipadatkan agar
   rekap sepanjang sembilan belas padukuhan tetap muat dalam satu lembar. */
.lembar--lanskap .lembar-kop__lambang { height: 12mm; }
.lembar--lanskap .lembar-kop__instansi { font-size: 9pt; }
.lembar--lanskap .lembar-kop__nama { font-size: 11.5pt; }
.lembar--lanskap .lembar-kop__garis { margin-top: 1.5mm; }
.lembar--lanskap .lembar-tajuk { margin: 1.5mm 0 1.2mm; }
.lembar--lanskap .lembar-tajuk__judul { font-size: 11pt; }
.lembar--lanskap .lembar-tajuk__garis { margin-top: 1.2mm; }
.lembar--lanskap .lembar-tajuk__anak { font-size: 8pt; }
.lembar--lanskap .lembar-meta { padding: .8mm 0; margin-bottom: 2mm; }
.lembar--lanskap .lembar-angka { gap: 3mm; margin-bottom: 2.5mm; }
.lembar--lanskap .lembar-seksi { margin-bottom: 2mm; }
.lembar--lanskap .lembar-angka__kotak { padding: 1.4mm 2.5mm; border-top-width: 1mm; }
.lembar--lanskap .lembar-angka__label { font-size: 6.8pt; margin-bottom: .7mm; }
.lembar--lanskap .lembar-angka__nilai { font-size: 12pt; }
.lembar--lanskap .lembar-angka__kaki { font-size: 7pt; }
.lembar--lanskap .lembar-seksi__judul { margin-bottom: 1.4mm; }
.lembar--lanskap .lembar-ttd { margin-top: 2.5mm; }
.lembar--lanskap .lembar-ttd__ruang { height: 9mm; }
.lembar--lanskap .lembar-kaki { margin-top: 2mm; padding-top: 1.2mm; }

/* Kolom yang menempel pada rombongannya - nomor RT di bawah dusun yang sama -
   dipisah garis tipis tiap kali dusunnya berganti. */
.lembar-tabel tbody tr.lembar-grup td { border-top: .4mm solid #b9c5d8; }

/* ------------------------------------------- Pratinjau lembar cetak

   Halaman tersendiri yang hanya berisi lembar cetak: yang tampak di layar
   sudah persis yang keluar di kertas, lengkap dengan lebar dan marginnya,
   jadi tidak ada kejutan saat dialog cetak dibuka. */

body.badan-cetak { background: #55606f; margin: 0; }

.pratinjau { --kertas: 186mm; --sisi: 12mm; --atas: 13mm; }
.pratinjau--lanskap { --kertas: 273mm; --sisi: 12mm; --atas: 10mm; }

.pratinjau__bilah {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: var(--abu-900);
    color: #cbd5e1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.pratinjau__ket { flex: 1; min-width: 220px; font-size: 12.5px; font-family: var(--font); }
.pratinjau__ket strong { color: #fff; }

.pratinjau__kertas {
    width: calc(var(--kertas) + var(--sisi) * 2);
    max-width: 100%;
    margin: 22px auto;
    padding: var(--atas) var(--sisi);
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

@media print {
    body.badan-cetak { background: #fff; }
    .pratinjau__kertas { width: auto; margin: 0; padding: 0; box-shadow: none; }
}

/* ------------------------------------------------------------------ Responsif */

@media (max-width: 1100px) {
    .panel-wilayah { width: 240px; flex-basis: 240px; }
    .panel-detail { width: 300px; }
}

@media (max-width: 860px) {
    :root { --lebar-sidebar: 0px; }
    .sidebar { transform: translateX(-100%); transition: transform .2s; width: 264px; flex-basis: 264px; }
    .sidebar--buka { transform: none; }
    /* Rel ikon milik layar lebar tidak berlaku di sini: pada layar sempit
       sidebar tetap muncul utuh sebagai lapisan, bukan menyusut. */
    html.sidebar-tutup { --lebar-sidebar: 0px; }
    html.sidebar-tutup .sidebar { width: 264px; flex-basis: 264px; }
    html.sidebar-tutup .sidebar__merek { justify-content: flex-start; padding: 16px 18px; }
    html.sidebar-tutup .sidebar__merek-teks,
    html.sidebar-tutup .sidebar__label,
    html.sidebar-tutup .sidebar__teks { display: revert; }
    html.sidebar-tutup .sidebar__lencana { display: block; }
    html.sidebar-tutup .sidebar__nav { padding: 10px 10px 24px; }
    html.sidebar-tutup .sidebar__tautan { justify-content: flex-start; gap: 10px; padding: 8px 10px; margin-bottom: 2px; }
    html.sidebar-tutup .sidebar__grup { margin-top: 14px; padding-top: 0; border-top: 0; }
    .utama { margin-left: 0; }
    .panel-wilayah { position: absolute; inset: 0 auto 0 0; z-index: 800; box-shadow: var(--bayang-lg); }
    .panel-detail { width: auto; left: 12px; }
    .form-grid--2 { grid-template-columns: 1fr; }
    .cari-global { max-width: none; }
}

/* ==========================================================================
   Pemilih lahan di atas peta

   Modal yang dipanggil dari isian "Aset Tanah" pada formulir. Bentuknya
   sengaja meniru halaman peta - pohon wilayah di kiri, peta di tengah,
   keterangan bidang melayang di kanan - supaya orang yang sudah terbiasa
   dengan peta utama tidak perlu belajar tata letak kedua.
   ========================================================================== */

.modal--peta {
    max-width: 1180px;
    height: calc(100vh - 40px);
    max-height: none;
}

/* Peta harus mengisi kotaknya sampai tepi: padding bawaan modal justru
   menyisakan bingkai putih yang membuatnya tampak seperti gambar tertempel. */
.modal--peta .modal__isi {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
}

.pemilih {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.pemilih__sub {
    font-size: 12px;
    color: var(--abu-500);
    font-weight: 500;
}

/* Panel wilayah memakai kelas .panel-wilayah apa adanya; yang diubah hanya
   tepinya, sebab di sini ia berdiri di dalam modal, bukan di bawah topbar. */
.pemilih__panel {
    border-right: 1px solid var(--abu-200);
    border-radius: 0 0 0 var(--radius);
}

/* Patokan seluruh yang melayang di atas peta. Dikurung sebagai stacking
   context sendiri - Leaflet menyusun panenya sampai z-index 700, dan tanpa
   kurungan angka-angka itu bersaing dengan kaki modal di bawahnya. */
.pemilih__panggung {
    position: relative;
    flex: 1;
    min-width: 0;
    isolation: isolate;
    z-index: 0;
}

.pemilih__kanvas {
    position: absolute;
    inset: 0;
    background: #e5e7eb;
}

/* Kabar singkat "sedang memuat" / "tidak ada bidang". Sengaja bukan tirai
   peredup: petanya tetap boleh digeser dan dibaca selagi bidang dimuat. */
.pemilih__kabar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 720;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 20px;
    pointer-events: none;
}

.pemilih__detail { z-index: 730; }

/* --------------------------------------------------- Daftar petak yang disewa

   Aset utuh berdiri sebagai baris pertama, petak-petaknya menyusul dengan
   takik sesuai kedalaman pembagian - bentuknya sama dengan pohon wilayah,
   sehingga "AST-0001-A-C berada di dalam AST-0001-A" terbaca sekali lihat. */

.petak {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 7px 9px;
    margin-bottom: 5px;
    border: 1px solid var(--abu-200);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;

    /* Takik pembagian: petak dari petak menjorok satu langkah lagi ke kanan,
       sama seperti pohon wilayah di panel kiri. */
    margin-left: calc(var(--takik, 0) * 14px);
    width: calc(100% - var(--takik, 0) * 14px);
}
.petak:hover { border-color: var(--biru-500); background: var(--biru-50); }

.petak--aktif {
    border-color: var(--kuning-600);
    background: var(--kuning-50);
    box-shadow: inset 0 0 0 1px var(--kuning-600);
}

.petak__tanda { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; margin-top: 3px; }
.petak__isi { display: grid; gap: 1px; min-width: 0; }
.petak__judul { font-weight: 600; font-size: 12.5px; color: var(--abu-800); overflow-wrap: anywhere; }
.petak__meta { font-size: 11.5px; color: var(--abu-500); }
.petak--aktif .petak__judul { color: #78350f; }

/* Perjanjian yang sudah berjalan hanya dibacakan di sini, tidak dapat
   ditekan - yang sedang dikerjakan orang adalah memilih lahan, bukan
   berpindah ke perjanjian lain dan meninggalkan formulirnya. */
.sewa-item--diam { cursor: default; }
.sewa-item--diam:hover { border-color: var(--abu-200); background: transparent; }

/* Penanda jenis pada hasil pencarian: padukuhan, RT, aset, atau bagian. */
.cari-hasil__jenis {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 20px;
    background: var(--abu-100);
    color: var(--abu-500);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: 1px;
}

/* ------------------------------------------------------------ Kaki pemilih */

.pemilih__kaki {
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.pemilih__ringkas {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
    min-width: 0;
}
.pemilih__ringkas-label {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--abu-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pemilih__ringkas-nilai { font-weight: 650; font-size: 13.5px; color: var(--abu-900); }
.pemilih__ringkas-meta { font-size: 12px; color: var(--abu-500); }

/* ---------------------------------------------------------------- Responsif */

@media (max-width: 1024px) {
    /* Panel wilayah menjadi lapisan di atas peta, bukan kolom di sebelahnya:
       di bawah lebar ini, dua kolom berarti peta tinggal sejengkal. */
    .pemilih__panel {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 900;
        box-shadow: var(--bayang-lg);
    }
    .pemilih { position: relative; }
    .pemilih__detail { width: 280px; }
}

@media (max-width: 640px) {
    .modal--peta { height: calc(100vh - 20px); }
    .pemilih__detail { inset: auto 8px 8px 8px; width: auto; max-height: 55%; }
    .pemilih__kaki { flex-wrap: wrap; }
}

/* ==========================================================================
   Papan kendali sewa lahan  (.pk-*)

   Papan ini sengaja pendek. Versi sebelumnya memuat dua puluh enam kartu dan
   satu tabel tujuh belas kolom - lengkap, tetapi tidak ada satu pun orang
   yang membacanya sampai habis. Yang tersisa di sini hanya yang menentukan
   keputusan minggu ini: berapa uang yang seharusnya masuk dan sudah masuk,
   siapa yang harus ditagih, dan di mana tanahnya. Sisanya tetap ada - di
   halaman rinciannya masing-masing dan di berkas PDF.

   Karena kartunya sedikit, tiap kartu boleh besar: grafiknya diberi sumbu
   bernilai, batangnya diberi warna, dan angka pokoknya dicetak sebesar
   judul. Papan yang jarang dibaca biasanya bukan papan yang kurang datanya,
   melainkan papan yang datanya harus dieja satu per satu.
   ========================================================================== */

/* -------------------------------------------------------------- Panji utama */

.pk-panji {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    margin-bottom: 18px;
    color: #eaf1fd;
    background:
        radial-gradient(1100px 380px at 88% -30%, rgba(56, 189, 248, .3), transparent 62%),
        radial-gradient(680px 320px at 8% 120%, rgba(129, 140, 248, .28), transparent 60%),
        linear-gradient(135deg, #0b1f45 0%, #12336d 46%, #0d2a5c 100%);
    box-shadow: 0 18px 44px rgba(12, 45, 94, .3);
}

/* Kisi tipis di latar. Memberi kedalaman tanpa menambah satu berkas gambar
   pun - seluruhnya gradien berulang. */
.pk-panji__rona {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 46px);
    mask-image: radial-gradient(closest-side at 70% 40%, #000 30%, transparent 100%);
    pointer-events: none;
}

.pk-panji__isi {
    position: relative;
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
    padding: 26px 28px 24px;
}

.pk-panji__kiri { flex: 1 1 460px; min-width: 0; }

.pk-panji__kanan {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pk-panji__tanda {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 12.5px;
    color: #9dbbe4;
    letter-spacing: .01em;
}

/* Titik berdenyut: penanda bahwa angkanya dihitung saat halaman dibuka,
   bukan salinan laporan bulan lalu. */
.pk-panji__titik {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: pk-denyut 2.4s ease-out infinite;
}

@keyframes pk-denyut {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.pk-panji__judul {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1.15;
}

.pk-panji__anak {
    margin: 6px 0 0;
    font-size: 13px;
    color: #9dbbe4;
    max-width: 56ch;
    line-height: 1.5;
}

.pk-panji__uang {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

.pk-panji__butir {
    flex: 1 1 190px;
    min-width: 0;
    padding: 12px 15px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
}
.pk-panji__butir--terang { background: rgba(74, 222, 128, .14); border-color: rgba(74, 222, 128, .3); }
.pk-panji__butir--awas { background: rgba(248, 113, 113, .15); border-color: rgba(248, 113, 113, .33); }

.pk-panji__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: #9dbbe4;
}
.pk-panji__nilai {
    display: block;
    margin-top: 3px;
    font-size: 23px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.pk-panji__ket { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(219, 230, 247, .8); }
.pk-panji__butir--awas .pk-panji__nilai { color: #fecaca; }

.pk-panji__kaki {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    padding: 12px 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(4, 15, 36, .32);
    font-size: 12.5px;
}
.pk-panji__kaki a,
.pk-panji__kaki span { color: #b9cff0; text-decoration: none; }
.pk-panji__kaki a:hover { color: #fff; text-decoration: none; }
.pk-panji__kaki strong { color: #fff; font-weight: 700; font-size: 13.5px; margin-right: 3px; }
.pk-panji__kaki--awas strong { color: #fca5a5; }
.pk-panji__kaki-aksi { margin-left: auto; display: flex; gap: 7px; }

/* Tombol di bilah ini berdiri di atas bidang gelap.

   Gaya bawaan .tombol - bidang putih berteks abu - tidak dapat dipakai apa
   adanya: warna teks bilah ini (.pk-panji__kaki a) lebih kuat daripada warna
   teks tombol, sehingga tulisannya berubah menjadi biru pucat di atas putih
   dan tombolnya terbaca sebagai kotak kosong. Diperbaiki di sini, bukan pada
   .tombol: yang keliru bukan tombolnya, melainkan latar tempatnya berdiri. */
.pk-panji__kaki .tombol {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
    font-weight: 600;
}
.pk-panji__kaki .tombol:hover {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
.pk-panji__kaki .tombol--utama {
    background: var(--biru-600);
    border-color: color-mix(in srgb, #fff 30%, var(--biru-600));
    color: #fff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, .5);
}
.pk-panji__kaki .tombol--utama:hover {
    background: var(--biru-500);
    border-color: color-mix(in srgb, #fff 45%, var(--biru-500));
}

/* --------------------------------------------------------- Cincin & sparkline */

.pk-cincin { position: relative; width: 152px; height: 152px; flex: 0 0 152px; }
.pk-cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pk-cincin__alas { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 13; }
.pk-cincin__isi {
    fill: none;
    stroke: #4ade80;
    stroke-width: 13;
    stroke-linecap: round;
    transition: stroke-dashoffset .8s cubic-bezier(.22, .8, .3, 1);
    filter: drop-shadow(0 0 7px rgba(74, 222, 128, .5));
}
.pk-cincin__teks { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pk-cincin__persen {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.pk-cincin__persen em { font-size: 16px; font-style: normal; opacity: .75; }
.pk-cincin__ket { display: block; font-size: 11px; color: #9dbbe4; }

.pk-spark { width: 190px; text-align: center; }
.pk-spark svg { width: 100%; height: 32px; display: block; overflow: visible; }
.pk-spark polyline {
    fill: none;
    stroke: #7dd3fc;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.pk-spark__ket { display: block; margin-top: 5px; font-size: 11px; color: #9dbbe4; }
.pk-spark__ket strong { color: #fff; }

/* ------------------------------------------------------------------ Saringan */

.pk-saring-kabar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: -6px 0 16px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--biru-500);
    background: var(--biru-50);
    font-size: 12.5px;
    color: var(--abu-600);
}
.pk-saring-kabar strong { color: var(--biru-700); }

/* --------------------------------------------------------------- Tegel angka

   Empat tegel, empat kolom. Tegel kelima dan seterusnya dulu ada - tarif
   setara, luas, jumlah penyewa - dan tiap satu di antaranya menuntut jeda
   sepersekian detik untuk dibaca padahal tak satu pun mengubah keputusan
   hari itu. Yang tersisa menjawab satu pertanyaan berurutan: berapa nilai
   seluruh kontraknya, berapa yang sudah masuk, berapa yang macet, dan
   berapa yang masih berjalan. */

.pk-tegel-kisi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.pk-tegel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 17px 18px 16px;
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: 16px;
    box-shadow: var(--bayang);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pk-tegel:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
    border-color: color-mix(in srgb, var(--rona) 40%, var(--abu-200));
}

/* Pita warna di puncak kartu, dan noda warna samar di sudutnya. Keduanya
   memakai --rona yang sama sehingga menambah kartu baru cukup dengan satu
   nilai warna. */
.pk-tegel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--rona), color-mix(in srgb, var(--rona) 35%, #fff));
}
.pk-tegel::after {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rona) 10%, transparent);
    pointer-events: none;
}

.pk-tegel > * { position: relative; z-index: 1; }

.pk-tegel__kepala { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pk-tegel__ikon {
    width: 36px; height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-content: center;
    border-radius: 11px;
    font-size: 18px;
    background: color-mix(in srgb, var(--rona) 13%, #fff);
}
.pk-tegel__label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--abu-600);
    letter-spacing: .01em;
    min-width: 0;
}

.pk-tegel__nilai {
    font-size: 29px;
    font-weight: 800;
    color: var(--abu-900);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.pk-tegel__meter {
    height: 7px;
    margin-top: 11px;
    border-radius: 99px;
    background: var(--abu-100);
    overflow: hidden;
}
.pk-tegel__meter span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rona) 55%, #fff), var(--rona));
    transition: width .6s cubic-bezier(.22, .8, .3, 1);
}

.pk-tegel__kaki {
    margin-top: auto;
    padding-top: 9px;
    font-size: 11.5px;
    color: var(--abu-500);
    line-height: 1.45;
}

/* --------------------------------------------------------- Kepala tiap seksi */

.pk-bagian {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 14px;
    padding-left: 13px;
    border-left: 4px solid var(--rona, var(--biru-600));
}
.pk-bagian__ikon {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-content: center;
    font-size: 20px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rona, var(--biru-600)) 12%, #fff);
}
.pk-bagian__judul {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
    color: var(--abu-900);
    letter-spacing: -.01em;
}
.pk-bagian__ket { margin: 1px 0 0; font-size: 12.5px; color: var(--abu-500); }

/* ------------------------------------------------------------ Grafik gabungan

   Batang untuk tagihan yang terbit, garis berbayang untuk uang yang masuk.
   Dua garis pada satu sumbu - bentuk lamanya - menuntut pembacanya mengingat
   garis mana yang mana; batang lawan garis terbaca tanpa melihat kunci warna
   sama sekali, sebab keduanya berbeda wujud, bukan sekadar berbeda warna.

   Sumbu tegaknya kini diberi nilai. Papan sebelumnya hanya menyebut puncaknya
   pada catatan kaki, dan tinggi tiap titik harus dikira-kira sendiri. */

.pk-grafik { --tinggi-plot: 236px; }

.pk-grafik__bidang { position: relative; padding-left: 58px; }

.pk-grafik__y { position: absolute; left: 0; top: 0; bottom: 0; width: 52px; }
.pk-grafik__y span {
    position: absolute;
    right: 9px;
    transform: translateY(50%);
    font-size: 10.5px;
    color: var(--abu-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tinggi dipatok dalam piksel supaya label sumbu tegak di sebelahnya - yang
   ditempatkan memakai persentase - jatuh persis pada gurat bantunya. */
.pk-grafik__svg { display: block; width: 100%; height: var(--tinggi-plot); overflow: visible; }

.pk-grafik__bantu { stroke: var(--abu-200); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.pk-grafik__dasar { stroke: var(--abu-300); stroke-width: 1; vector-effect: non-scaling-stroke; }

.pk-grafik__batang { fill: url(#pk-batang-warna); transition: fill .12s; }
.pk-grafik__isi { fill: url(#pk-arus-warna); }
.pk-grafik__garis {
    fill: none;
    stroke: #16a34a;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.pk-grafik__titik { fill: #fff; stroke: #16a34a; stroke-width: 2.5; transition: r .12s; }

/* Sasaran tetikus selebar satu bulan penuh, bukan setitik berjari-jari empat
   piksel: keterangan bulan itu muncul di mana pun kursor berada di kolomnya. */
.pk-grafik__latar { fill: transparent; }
.pk-grafik__kolom:hover .pk-grafik__latar { fill: rgba(15, 23, 42, .045); }
.pk-grafik__kolom:hover .pk-grafik__titik { r: 6; }
.pk-grafik__kolom:hover .pk-grafik__batang { fill: #94a3b8; }

.pk-grafik__x {
    display: flex;
    padding-left: 58px;
    margin-top: 9px;
    font-size: 10.5px;
    color: var(--abu-500);
}
.pk-grafik__x span { flex: 1; text-align: center; min-width: 0; }
.pk-grafik__x .pk-grafik__kini { color: var(--abu-900); font-weight: 750; }

.pk-kunci {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--abu-100);
    font-size: 12px;
    color: var(--abu-600);
}
.pk-kunci__butir { display: inline-flex; align-items: center; gap: 6px; }
.pk-kunci__butir strong { color: var(--abu-900); font-variant-numeric: tabular-nums; }
.pk-kunci__butir--kanan { margin-left: auto; color: var(--abu-500); }
.pk-kunci i { width: 14px; height: 4px; border-radius: 99px; flex: 0 0 14px; }
.pk-kunci__kotak { height: 12px !important; border-radius: 3px !important; }

/* ------------------------------------------------------------------- Donat */

.pk-donat { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.pk-donat__cincin { position: relative; width: 168px; height: 168px; flex: 0 0 168px; margin: 0 auto; }
.pk-donat__cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pk-donat__cincin circle {
    fill: none;
    stroke-width: 22;
    transition: stroke-width .12s;
}
.pk-donat__cincin circle:hover { stroke-width: 26; }
.pk-donat__pusat { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pk-donat__angka {
    display: block;
    font-size: 31px;
    font-weight: 800;
    color: var(--abu-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.pk-donat__satuan { display: block; font-size: 11.5px; color: var(--abu-500); }

/* ------------------------------------------------------ Daftar kunci warna */

.pk-daftar-kunci { flex: 1 1 190px; min-width: 175px; list-style: none; margin: 0; padding: 0; }
.pk-daftar-kunci li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid var(--abu-100);
    font-size: 12.5px;
}
.pk-daftar-kunci li:last-child { border-bottom: 0; }
.pk-daftar-kunci__nama { flex: 1; min-width: 0; color: var(--abu-700); }
.pk-daftar-kunci__anak { display: block; font-size: 11px; color: var(--abu-400); font-style: normal; }
.pk-daftar-kunci__nilai { font-weight: 700; color: var(--abu-900); font-variant-numeric: tabular-nums; }
.pk-daftar-kunci__persen {
    min-width: 42px;
    text-align: right;
    font-size: 11.5px;
    color: var(--abu-500);
    font-variant-numeric: tabular-nums;
}

.pk-tanda { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 3px; display: inline-block; }

/* --------------------------------------------------- Batang mendatar (ember) */

.pk-ember { display: grid; gap: 13px; }
.pk-ember__baris {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nama nilai" "bar bar" "jumlah jumlah";
    gap: 3px 10px;
    align-items: center;
}
.pk-ember__nama { grid-area: nama; font-size: 12.5px; color: var(--abu-700); font-weight: 600; }
.pk-ember__nilai {
    grid-area: nilai;
    font-size: 13px;
    font-weight: 750;
    color: var(--abu-900);
    font-variant-numeric: tabular-nums;
}
.pk-ember__bar {
    grid-area: bar;
    display: block;
    height: 11px;
    border-radius: 99px;
    background: var(--abu-100);
    overflow: hidden;
}
.pk-ember__bar > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    transition: width .6s cubic-bezier(.22, .8, .3, 1);
}
.pk-ember__jumlah { grid-area: jumlah; font-size: 11px; color: var(--abu-500); }

.pk-catatan {
    margin: 14px 0 0;
    padding-top: 11px;
    border-top: 1px dashed var(--abu-200);
    font-size: 11.5px;
    color: var(--abu-500);
    line-height: 1.55;
}
.pk-catatan strong { color: var(--abu-700); }

.pk-merah { color: var(--merah-600) !important; }

/* ------------------------------------------------------------ Batang tegak */

.pk-batang {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 232px;
    padding-top: 6px;
}
.pk-batang__kolom {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 4px;
}
.pk-batang__nilai {
    font-size: 10px;
    color: var(--abu-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pk-batang__isi {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* Batangnya sendiri: gradien dari bawah supaya puncaknya terbaca lebih terang
   daripada pangkalnya, dan sudut atasnya dibulatkan. */
.pk-batang__isi > span {
    display: block;
    width: 100%;
    max-width: 44px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #fbbf24, #d97706);
    transition: height .6s cubic-bezier(.22, .8, .3, 1), filter .12s;
}
/* Bulan berjalan diberi warna sendiri: itu batang yang harus ditagih minggu
   ini, bukan yang masih punya waktu berbulan-bulan. */
.pk-batang__kolom--kini .pk-batang__isi > span { background: linear-gradient(180deg, #f87171, #dc2626); }
.pk-batang__kolom--kini .pk-batang__label { color: var(--merah-600); font-weight: 750; }
.pk-batang__kolom:hover .pk-batang__isi > span { filter: brightness(1.12); }
.pk-batang__label { font-size: 11px; color: var(--abu-600); font-weight: 600; }
.pk-batang__ket {
    font-size: 10px;
    color: var(--abu-400);
    font-variant-numeric: tabular-nums;
    min-height: 12px;
}

/* -------------------------------------------------------------- Peringkat */

.pk-peringkat {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--abu-100);
    color: inherit;
    text-decoration: none;
    transition: background .12s;
}
.pk-peringkat:last-child { border-bottom: 0; }
a.pk-peringkat:hover { background: var(--biru-50); text-decoration: none; }
.pk-peringkat--diam { cursor: default; }

.pk-peringkat__no {
    width: 26px; height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-content: center;
    border-radius: 9px;
    background: var(--abu-100);
    color: var(--abu-600);
    font-size: 11.5px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.pk-peringkat__no--awas { background: var(--merah-50); color: var(--merah-600); }

.pk-peringkat__isi { flex: 1; min-width: 0; }
.pk-peringkat__kepala { display: flex; align-items: baseline; gap: 10px; }
.pk-peringkat__nama {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 650;
    color: var(--abu-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-peringkat__nilai {
    font-size: 12.5px;
    font-weight: 750;
    color: var(--abu-800);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pk-peringkat__bar {
    display: block;
    height: 9px;
    margin: 7px 0 5px;
    border-radius: 99px;
    background: var(--abu-100);
    overflow: hidden;
}
.pk-peringkat__bar > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #93c5fd, var(--biru-600));
    transition: width .6s cubic-bezier(.22, .8, .3, 1);
}
.pk-peringkat__bar--merah > span { background: linear-gradient(90deg, #fca5a5, var(--merah-600)); }
.pk-peringkat__bar--sian > span { background: linear-gradient(90deg, #67e8f9, #0891b2); }
.pk-peringkat__meta { font-size: 11.5px; color: var(--abu-500); }

/* ------------------------------------------------------- Hitungan mundur */

.pk-tempo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--abu-100);
    color: inherit;
    text-decoration: none;
    transition: background .12s;
}
.pk-tempo:last-child { border-bottom: 0; }
.pk-tempo:hover { background: var(--abu-50); text-decoration: none; }

.pk-tempo__hitung {
    width: 48px; height: 44px;
    flex: 0 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--abu-100);
    color: var(--abu-700);
    line-height: 1.05;
}
.pk-tempo__hitung strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-tempo__kini { font-size: 12px !important; letter-spacing: -.01em; }
.pk-tempo__hitung em { font-size: 10px; font-style: normal; opacity: .75; }
.pk-tempo__hitung--dekat { background: var(--kuning-50); color: #b45309; }
.pk-tempo__hitung--awas { background: var(--merah-50); color: var(--merah-600); }
.pk-tempo__hitung--ungu { background: var(--ungu-50); color: var(--ungu-700); }

.pk-tempo__isi { flex: 1; min-width: 0; }
.pk-tempo__nama {
    display: block;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--abu-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-tempo__meta {
    display: block;
    font-size: 11.5px;
    color: var(--abu-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-tempo__nilai {
    font-size: 12.5px;
    font-weight: 750;
    color: var(--abu-800);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ------------------------------------------------------ Kartu papan kendali

   Tiap kartu membawa warna seksinya sendiri lewat --rona yang diwarisi dari
   baris tempatnya berdiri. Dengan begitu, mata yang menggulir cepat tetap
   tahu ia sedang berada di seksi mana tanpa harus kembali ke kepala seksi. */

.pk-kartu {
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .16s, border-color .16s;
}
.pk-kartu:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
    border-color: color-mix(in srgb, var(--rona, var(--biru-600)) 32%, var(--abu-200));
}

.pk-kartu > .kartu__kepala {
    background: linear-gradient(90deg, color-mix(in srgb, var(--rona, var(--biru-600)) 10%, #fff), #fff 62%);
    border-bottom-color: color-mix(in srgb, var(--rona, var(--biru-600)) 20%, var(--abu-200));
}

/* Bulatan kecil sewarna seksi di depan judul - penanda paling murah yang
   masih terbaca pada sekilas pandang. */
.pk-kartu > .kartu__kepala .kartu__judul::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 3px;
    background: var(--rona, var(--biru-600));
    vertical-align: 1px;
}

/* Daftar di dalam kartu dibatasi tingginya lalu digulirkan sendiri, supaya
   sebaris kartu berdiri sama tinggi apa pun panjang isinya, dan yang tidak
   muat tetap terjangkau dengan menggulir. */
.pk-kartu > .kartu__isi--rapat {
    max-height: 348px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--abu-300) transparent;
}
.pk-kartu > .kartu__isi--rapat::-webkit-scrollbar { width: 8px; }
.pk-kartu > .kartu__isi--rapat::-webkit-scrollbar-thumb {
    background: var(--abu-300);
    border: 2px solid #fff;
    border-radius: 99px;
}
.pk-kartu > .kartu__isi--rapat::-webkit-scrollbar-thumb:hover { background: var(--abu-400); }

/* Kartu bertinggi sama kerap menyisakan ruang di bawah daftar yang pendek.
   Keadaan kosong ditaruh di tengah ruang itu, bukan menempel di puncak
   dengan lubang menganga di bawahnya. */
.baris--rata .kartu__isi:has(> .kosong:only-child) {
    display: grid;
    place-content: center;
}

/* ------------------------------------------------------------- Pintasan

   Lima kartu tautan tepat di bawah panji. Dulu deret ini berdiri di kaki
   halaman - tempat yang secara teknis benar dan secara praktis tak pernah
   terlihat, sebab yang membuka papan kendali untuk bekerja berhenti membaca
   jauh sebelum sampai ke sana.

   Tiap kartu memakai warna halaman tujuannya lewat --rona: pita di tepi
   kiri, noda warna di sudut, dan lambang sewarna. Yang sering dituju
   ditemukan dari warnanya setelah sekali dua kali dipakai, tanpa membaca
   judulnya lagi. */

/* Kisi berkolom pasti, bukan flex yang membungkus sendiri: pada lebar layar
   tertentu lima kartu menyisakan satu kartu sebatang kara di baris kedua,
   melar selebar halaman - dan kartu selebar itu terbaca sebagai panji yang
   salah pasang, bukan sebagai satu pintasan di antara lima. */
.pk-tautan {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.pk-tautan a {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px 13px 17px;
    background: #fff;
    border: 1px solid var(--abu-200);
    border-radius: 14px;
    box-shadow: var(--bayang);
    color: var(--abu-800);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

/* Pita sewarna tujuan di tepi kiri. */
.pk-tautan a::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--rona), color-mix(in srgb, var(--rona) 45%, #fff));
}

/* Noda warna di sudut yang mekar saat disentuh - satu-satunya gerak pada
   kartu ini selain terangkatnya bayangan. */
.pk-tautan a::after {
    content: "";
    position: absolute;
    top: -42px; right: -42px;
    width: 116px; height: 116px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rona) 9%, transparent);
    transition: transform .28s cubic-bezier(.22, .8, .3, 1);
    pointer-events: none;
}

.pk-tautan a:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--rona) 18%, rgba(15, 23, 42, .12));
    border-color: color-mix(in srgb, var(--rona) 45%, var(--abu-200));
    text-decoration: none;
}
.pk-tautan a:hover::after { transform: scale(1.5); }

.pk-tautan a > * { position: relative; z-index: 1; }

.pk-tautan i {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rona) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--rona) 22%, #fff);
    font-size: 17px;
    font-style: normal;
    line-height: 1;
}

.pk-tautan span { min-width: 0; }
.pk-tautan strong {
    display: block;
    font-size: 13px;
    font-weight: 750;
    color: var(--abu-900);
    letter-spacing: -.01em;
}
.pk-tautan em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--abu-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-tautan__panah {
    margin-left: auto;
    font-size: 21px;
    line-height: 1;
    font-weight: 700;
    color: var(--rona);
    opacity: .35;
    transition: transform .15s, opacity .15s;
}
.pk-tautan a:hover .pk-tautan__panah { opacity: 1; transform: translateX(3px); }

/* Lencana angka menggantikan panah pada pintasan yang membawa pekerjaan
   tertunggak: yang menarik tangan ke sana bukan nama halamannya, melainkan
   jumlah yang menunggu di dalamnya. */
.pk-tautan__lencana {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--merah-50);
    color: var(--merah-600);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border: 1px solid color-mix(in srgb, var(--merah-600) 22%, #fff);
}

/* ---------------------------------------------------------------- Responsif */

/* Lima kolom hanya muat pada layar lebar; di bawah ini keterangan tiap kartu
   mulai terpangkas di tengah kata. */
@media (max-width: 1460px) {
    .pk-tautan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .pk-tegel-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-tautan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pk-panji__isi { padding: 20px 18px 18px; }
    .pk-panji__judul { font-size: 22px; }
    .pk-panji__kanan { flex-direction: row; align-items: center; gap: 18px; width: 100%; }
    .pk-panji__kaki { padding: 11px 18px; gap: 8px 14px; }
    .pk-panji__kaki-aksi { margin-left: 0; width: 100%; }
    .pk-spark { flex: 1; width: auto; }
    .pk-batang { height: 180px; }
    .pk-batang__nilai { display: none; }
    .pk-grafik { --tinggi-plot: 200px; }
}

@media (max-width: 640px) {
    .pk-tegel-kisi { grid-template-columns: 1fr; gap: 11px; }
    .pk-tautan { grid-template-columns: 1fr; }
    .pk-tegel__nilai { font-size: 25px; }
    .pk-cincin { width: 118px; height: 118px; flex-basis: 118px; }
    .pk-cincin__persen { font-size: 24px; }
    .pk-bagian__judul { font-size: 16px; }
    .pk-grafik__bidang, .pk-grafik__x { padding-left: 44px; }
    .pk-grafik__y { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .tombol:hover, .tombol:active { transform: none; }
}

/* Gerak hanya boleh menjadi bumbu. Yang menyetel sistemnya menolak animasi
   biasanya memang terganggu olehnya, bukan sekadar berhemat daya. */
@media (prefers-reduced-motion: reduce) {
    .pk-panji__titik { animation: none; }
    .pk-cincin__isi,
    .pk-tegel__meter span,
    .pk-ember__bar > span,
    .pk-peringkat__bar > span,
    .pk-batang__isi > span { transition: none; }
    .pk-tegel:hover,
    .pk-tautan a:hover { transform: none; }
    .pk-tautan a::after,
    .pk-tautan__panah { transition: none; }
}

@media print {
    .pk-panji { box-shadow: none; }
    .pk-tegel:hover { transform: none; box-shadow: none; }

    /* Di kertas tidak ada yang dapat digulir: pembatas tinggi dilepas supaya
       daftarnya tercetak utuh, bukan terpotong pada baris keempat tanpa
       penjelasan. */
    .pk-kartu > .kartu__isi--rapat { max-height: none; overflow: visible; }
}