/*
 * sijamu.css: sistem gaya SIJAMU.
 * Urutan: font, token, dasar, utilitas, loader, kerangka aplikasi, kepala halaman,
 * komponen, grafik, lemari ordner, halaman masuk, halaman publik, dashboard,
 * gerak, responsif, gerak dikurangi, dan cetak.
 */

/* =========================================================================
 * 1. Font
 * ======================================================================= */
@font-face { font-family: "SIJAMU Bonum"; src: url("../fonts/bonum-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SIJAMU Bonum"; src: url("../fonts/bonum-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SIJAMU Inter"; src: url("../fonts/inter-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SIJAMU Inter"; src: url("../fonts/inter-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SIJAMU Inter"; src: url("../fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SIJAMU Inter"; src: url("../fonts/inter-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* =========================================================================
 * 2. Token
 * ======================================================================= */
:root {
  --merek: #1F3B7A;
  --merek-tua: #192F62;
  --merek-lembut: #EBEDF3;
  --merek-garis: #C0C8DA;
  --aksen: #C99A2E;
  --tinta: #182234;
  --tinta-2: #4B5568;
  --tinta-3: #677185;
  --garis: #E2E6EC;
  --garis-kuat: #CBD2DC;
  --kertas: #F3F5F8;
  --permukaan: #FFFFFF;
  --permukaan-2: #F8F9FB;
  --stempel: #5B3FA0;
  --baik: #0B7A3B; --baik-lembut: #E6F4EC;
  --waspada: #8F5600; --waspada-lembut: #FDF2DD;
  --kritis: #B42318; --kritis-lembut: #FBE9E7;
  --info: #1F5FAD; --info-lembut: #E8F0FB;

  --font-judul: "SIJAMU Bonum", "Bookman Old Style", Georgia, serif;
  --font-isi: "SIJAMU Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --durasi-cepat: 120ms;
  --durasi: 200ms;
  --durasi-lambat: 320ms;
  --kurva: cubic-bezier(.2, .8, .2, 1);

  --bayangan: 0 8px 24px rgba(24, 34, 52, .12);
  --lebar-sidebar: 272px;
  --lebar-isi: 1280px;
  --celah: 24px;
  --tinggi-topbar: 60px;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --merek-tua: color-mix(in srgb, var(--merek) 80%, #000);
    --merek-lembut: color-mix(in srgb, var(--merek) 9%, #fff);
    --merek-garis: color-mix(in srgb, var(--merek) 28%, #fff);
  }
}

/* =========================================================================
 * 3. Dasar
 * ======================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tinggi-topbar) + 16px); }
body {
  margin: 0;
  font: 400 15px/24px var(--font-isi);
  color: var(--tinta);
  background: var(--kertas);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { vertical-align: middle; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--tinta); margin: 0; }
h1 { font: 700 30px/36px var(--font-judul); letter-spacing: -.005em; }
h2 { font: 700 20px/28px var(--font-judul); }
h3 { font: 600 15px/22px var(--font-isi); }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
a { color: var(--merek); text-decoration: underline; text-decoration-color: var(--merek-garis); text-underline-offset: 3px; transition: color var(--durasi-cepat), text-decoration-color var(--durasi-cepat); }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }
[hidden] { display: none !important; }
table { font-variant-numeric: tabular-nums; }
::selection { background: var(--merek-garis); }

/* =========================================================================
 * 4. Utilitas
 * ======================================================================= */
.tersembunyi { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cetak-saja { display: none; }
.redup { color: var(--tinta-3); font-weight: 400; }
.teks-2 { color: var(--tinta-2); }
.teks-3 { color: var(--tinta-3); }
.teks-kecil { font-size: 13px; line-height: 20px; }
.teks-mikro { font-size: 12px; line-height: 16px; }
.tebal { font-weight: 600; }
.angka { font-variant-numeric: tabular-nums; }
.kode { font-size: 12.5px; font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.paragraf { max-width: 68ch; }
.tanpa-bungkus { white-space: nowrap; }
.potong-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.potong-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tumpuk { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tumpuk-16 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tumpuk-12 { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tumpuk-8 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.baris-antara { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.kisi-2, .kisi-grafik, .kisi-3, .kisi-auto { display: grid; gap: var(--celah); grid-template-columns: minmax(0, 1fr); }
.kisi-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.tautan-panah { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 14px; }
.daftar-poin { margin: 0; padding-left: 20px; }
.daftar-poin li { margin: 4px 0; }
.daftar-poin li::marker { color: var(--tinta-3); }
.daftar-bernomor { margin: 0; padding-left: 22px; }
.daftar-bernomor li { margin: 6px 0; padding-left: 2px; }
.daftar-bernomor li::marker { color: var(--tinta-3); font-weight: 600; font-variant-numeric: tabular-nums; }
mark, .sorot-teks { background: #F6EBCF; color: inherit; padding: 0 2px; border-radius: 3px; }
@supports (color: color-mix(in srgb, red 50%, blue)) { mark, .sorot-teks { background: color-mix(in srgb, var(--aksen) 26%, #fff); } }
.catatan { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--tinta-2); background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: 8px; padding: 8px 12px; }
.catatan > svg { flex: none; color: var(--tinta-3); margin-top: 2px; }
.kotak-peringatan, .kotak-info, .kotak-kritis, .kotak-baik { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 8px; border-left: 4px solid; font-size: 14px; line-height: 22px; }
.kotak-peringatan { background: var(--waspada-lembut); border-color: var(--waspada); }
.kotak-peringatan > svg { color: var(--waspada); }
.kotak-info { background: var(--info-lembut); border-color: var(--info); }
.kotak-info > svg { color: var(--info); }
.kotak-kritis { background: var(--kritis-lembut); border-color: var(--kritis); }
.kotak-kritis > svg { color: var(--kritis); }
.kotak-baik { background: var(--baik-lembut); border-color: var(--baik); }
.kotak-baik > svg { color: var(--baik); }
.kotak-peringatan > svg, .kotak-info > svg, .kotak-kritis > svg, .kotak-baik > svg { flex: none; margin-top: 2px; }
.lewati { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--merek); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: top var(--durasi); }
.lewati:focus { top: 12px; color: #fff; }

/* =========================================================================
 * 5. Loader
 * ======================================================================= */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--kertas); opacity: 1; animation: loader-muncul 200ms linear 150ms backwards; }
.loader.selesai { opacity: 0; animation: none; transition: opacity var(--durasi) ease; pointer-events: none; }
.loader-isi { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--tinta-2); font-size: 14px; font-weight: 500; }
.loader-isi p { margin: 0; }
.cincin-ppepp { position: relative; width: 96px; height: 96px; }
.cincin-ppepp span { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background-color: var(--garis-kuat); animation: titik-nyala 600ms linear infinite; }
.cincin-ppepp span:nth-of-type(1) { transform: rotate(-90deg) translate(42px); animation-delay: 0ms; }
.cincin-ppepp span:nth-of-type(2) { transform: rotate(-18deg) translate(42px); animation-delay: 120ms; }
.cincin-ppepp span:nth-of-type(3) { transform: rotate(54deg) translate(42px); animation-delay: 240ms; }
.cincin-ppepp span:nth-of-type(4) { transform: rotate(126deg) translate(42px); animation-delay: 360ms; }
.cincin-ppepp span:nth-of-type(5) { transform: rotate(198deg) translate(42px); animation-delay: 480ms; }
.loader-logo { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; object-fit: contain; }
.galat-data { max-width: 640px; margin: 15vh auto; padding: 0 16px; }

/* =========================================================================
 * 6. Kerangka aplikasi
 * ======================================================================= */
.kerangka { display: grid; grid-template-columns: var(--lebar-sidebar) minmax(0, 1fr); min-height: 100vh; }
.utama { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* Sidebar */
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--permukaan); border-right: 1px solid var(--garis); padding: 18px 14px 24px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; }
.sidebar-identitas { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--garis); }
.sidebar-identitas .logo, .publik-merek .logo { width: 40px; height: 40px; object-fit: contain; flex: none; }
.si-teks { display: flex; flex-direction: column; min-width: 0; }
.si-nama { font: 700 20px/24px var(--font-judul); letter-spacing: .01em; }
.si-pt { font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.sidebar-nav { display: flex; flex-direction: column; gap: 16px; }
.menu-grup-judul { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta-3); padding: 0 10px 6px; }
.menu-daftar, .rel, .rel-menu { list-style: none; margin: 0; padding: 0; }
.menu-tautan { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; border-radius: 8px; color: var(--tinta-2); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color var(--durasi-cepat), color var(--durasi-cepat); }
.menu-tautan svg { flex: none; color: var(--tinta-3); transition: color var(--durasi-cepat); }
.menu-tautan:hover { background: var(--permukaan-2); color: var(--tinta); }
.menu-tautan[aria-current="page"] { background: var(--merek-lembut); color: var(--merek); box-shadow: inset 3px 0 0 var(--merek); }
.menu-tautan[aria-current="page"] svg { color: var(--merek); }

/* Rel PPEPP */
.rel { position: relative; }
.rel-tahap { position: relative; padding-left: 34px; padding-bottom: 6px; }
.rel-tahap::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: -2px; width: 2px; background: var(--garis-kuat); }
.rel-kepala { position: relative; display: flex; align-items: center; min-height: 26px; }
.rel-nomor { position: absolute; left: -34px; top: 1px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--garis-kuat); background: var(--permukaan); color: var(--tinta-2); font-size: 12px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.rel-tahap.aktif .rel-nomor { background: var(--merek); border-color: var(--merek); color: #fff; }
.rel-nama { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--tinta); }
.rel-menu { margin: 2px 0 2px -10px; }
.rel-ujung { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; padding: 6px 10px; font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.rel-ujung svg { flex: none; margin-top: -1px; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--tinggi-topbar); display: flex; align-items: center; gap: 12px; padding: 0 32px; padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--garis); }
@supports (backdrop-filter: blur(8px)) { .topbar, .publik-kepala { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(10px); } }
.tombol-menu { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-2); transition: background-color var(--durasi-cepat), color var(--durasi-cepat); }
.tombol-menu:hover { background: var(--permukaan-2); color: var(--tinta); }
.remah { min-width: 0; flex: 1; }
.remah ol { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 20px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; }
.remah li { overflow: hidden; text-overflow: ellipsis; }
.remah li + li::before { content: "/"; margin-right: 6px; color: var(--garis-kuat); }
.remah li[aria-current="page"] { color: var(--tinta); font-weight: 500; }
.judul-pendek { display: none; }
.topbar-kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.pilih-periode { display: flex; align-items: center; gap: 8px; }
.pilih-periode label { font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.pilih-periode select, select.isian-kendali {
  appearance: none; -webkit-appearance: none;
  background: var(--permukaan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23677185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right: 34px;
}
.pilih-periode select { height: 36px; padding-left: 12px; border: 1px solid var(--merek-garis); border-radius: 18px; background-color: var(--merek-lembut); color: var(--merek); font-weight: 600; font-size: 14px; cursor: pointer; }
.pengguna-wadah { position: relative; }
.tombol-pengguna { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 22px; background: transparent; text-align: left; color: var(--tinta-2); transition: background-color var(--durasi-cepat), border-color var(--durasi-cepat); }
.tombol-pengguna:hover, .tombol-pengguna[aria-expanded="true"] { background: var(--permukaan-2); border-color: var(--garis); }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--merek); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.tp-teks { display: flex; flex-direction: column; line-height: 16px; min-width: 0; }
.tp-nama { font-size: 13px; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.tp-peran { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.menu-pengguna { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 240px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; box-shadow: var(--bayangan); padding: 6px; animation: menu-muncul var(--durasi-cepat) var(--kurva); }
.mp-info { padding: 10px 12px 12px; border-bottom: 1px solid var(--garis); margin-bottom: 6px; }
.mp-nama { font-weight: 600; font-size: 14px; }
.mp-peran, .mp-unit { font-size: 13px; color: var(--tinta-2); line-height: 20px; }
.menu-pengguna-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta); font-size: 14px; font-weight: 500; text-align: left; }
.menu-pengguna-item:hover { background: var(--kritis-lembut); color: var(--kritis); }

/* Banner data contoh */
.banner-contoh { display: flex; gap: 10px; align-items: flex-start; width: calc(100% - 64px); max-width: var(--lebar-isi); margin: 16px auto 0; padding: 10px 14px; background: var(--waspada-lembut); border-left: 4px solid var(--waspada); border-radius: 6px; font-size: 13px; line-height: 20px; color: var(--tinta); }
.banner-contoh > svg { flex: none; color: var(--waspada); margin-top: 0; }
.banner-contoh p { margin: 0; }

/* Isi dan kaki */
.konten { flex: 1; width: 100%; max-width: calc(var(--lebar-isi) + 64px); margin: 0 auto; padding: 28px 32px 48px; outline: none; }
.isi-halaman { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kaki { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px 32px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--garis); background: var(--permukaan); font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.kaki::before { content: ""; position: absolute; left: 32px; top: -1px; width: 56px; height: 2px; background: var(--aksen); }
.label-versi { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--garis-kuat); border-radius: 14px; background: var(--permukaan); color: var(--tinta-2); font-size: 12px; font-weight: 600; transition: border-color var(--durasi-cepat), color var(--durasi-cepat); }
.label-versi:hover { border-color: var(--merek); color: var(--merek); }
.kepala-cetak, .kaki-cetak { display: none; }

/* Menu diciutkan (≥ 1024 px) */
html.sidebar-ciut .kerangka { grid-template-columns: minmax(0, 1fr); }
html.sidebar-ciut .sidebar { display: none; }
.laci-latar { display: none; }

/* =========================================================================
 * 7. Kepala halaman dan strip kendali dokumen
 * ======================================================================= */
.kepala-halaman { margin-bottom: 24px; }
.kh-baris { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.kh-deskripsi { margin: 6px 0 16px; color: var(--tinta-2); max-width: 68ch; }
.kh-baris + .strip-kendali { margin-top: 16px; }
.strip-kendali { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, .9fr) minmax(0, 1.3fr); margin: 0; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); overflow: hidden; }
.sk-sel { padding: 10px 16px; border-left: 1px solid var(--garis); min-width: 0; }
.sk-sel:first-child { border-left: 0; }
.sk-sel dt { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta-3); }
.sk-sel dd { margin: 3px 0 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--tinta); }
.sk-tahap { display: inline-flex; align-items: center; gap: 8px; }
.sk-tahap > svg { color: var(--merek); }
.sk-nomor { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--merek); color: #fff; font-size: 11px; font-weight: 700; }

/* =========================================================================
 * 8. Komponen
 * ======================================================================= */
/* Tombol */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font: 500 14px/1 var(--font-isi); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--durasi-cepat), color var(--durasi-cepat), border-color var(--durasi-cepat), transform var(--durasi-cepat); }
.tombol svg { flex: none; }
.tombol-utama { background: var(--merek); color: #fff; }
.tombol-utama:hover { background: var(--merek-tua); color: #fff; }
.tombol-utama:active { transform: translateY(1px); }
.tombol-kedua { background: var(--permukaan); color: var(--tinta); border-color: var(--garis-kuat); }
.tombol-kedua:hover { background: var(--permukaan-2); border-color: var(--tinta-3); color: var(--tinta); }
.tombol-hantu { background: transparent; color: var(--merek); padding: 0 10px; }
.tombol-hantu:hover { background: var(--merek-lembut); }
.tombol-kecil { height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
.tombol-ikon { width: 40px; padding: 0; }
.tombol-kecil.tombol-ikon { width: 32px; }
.tombol-penuh { width: 100%; }
.tombol-nonaktif, .tombol-nonaktif:hover { color: var(--tinta-3); background: var(--permukaan-2); border-color: transparent; cursor: not-allowed; }
.tombol-nonaktif:active { transform: none; }

/* Lencana dan nada */
.nada-baik { --nada: var(--baik); --nada-lembut: var(--baik-lembut); }
.nada-waspada { --nada: var(--waspada); --nada-lembut: var(--waspada-lembut); }
.nada-kritis { --nada: var(--kritis); --nada-lembut: var(--kritis-lembut); }
.nada-info { --nada: var(--info); --nada-lembut: var(--info-lembut); }
.nada-netral { --nada: var(--tinta-2); --nada-lembut: var(--permukaan-2); }
.nada-merek { --nada: var(--merek); --nada-lembut: var(--merek-lembut); }
.nada-aksen { --nada: #6B4F12; --nada-lembut: #F6EBCF; }
.lencana { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--nada-lembut, var(--permukaan-2)); color: var(--nada, var(--tinta-2)); font: 500 12px/1 var(--font-isi); white-space: nowrap; vertical-align: middle; }
.lencana svg { flex: none; }
.lencana.nada-netral { box-shadow: inset 0 0 0 1px var(--garis); }
.lencana-stempel { background: var(--permukaan); color: var(--stempel); box-shadow: inset 0 0 0 1.5px var(--stempel); font-weight: 600; }

/* Isian */
.isian { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.isian > label, .isian-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tinta-2); }
.isian-kendali { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); color: var(--tinta); font: 400 14px/1.2 var(--font-isi); transition: border-color var(--durasi-cepat); }
.isian-kendali:hover { border-color: var(--tinta-3); }
.isian-kendali::placeholder { color: var(--tinta-3); }
.isian-ikon { position: relative; }
.isian-ikon > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.isian-ikon > input { padding-left: 36px; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.saklar { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); min-height: 40px; }
.saklar input { width: 18px; height: 18px; margin: 0; accent-color: var(--merek); cursor: pointer; }
.saklar label { cursor: pointer; }
.segmen { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--garis-kuat); border-radius: 10px; background: var(--permukaan-2); }
.segmen-tombol { height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--tinta-2); font-size: 13px; font-weight: 500; transition: background-color var(--durasi-cepat), color var(--durasi-cepat); }
.segmen-tombol:hover { color: var(--tinta); }
.segmen-tombol[aria-pressed="true"] { background: var(--permukaan); color: var(--merek); box-shadow: 0 1px 2px rgba(24, 34, 52, .14); }
.baris-saring { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.baris-saring > .isian { flex: 1 1 170px; max-width: 280px; }
.baris-saring > .isian-cari { flex: 2 1 260px; max-width: 380px; }
.baris-saring > .saklar { align-self: flex-end; }

/* Panel dan bagian */
.panel { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; padding: 20px 24px; min-width: 0; }
.panel-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-kepala > div:first-child { min-width: 0; flex: 1 1 220px; }
.panel-judul { margin: 0; font: 600 15px/22px var(--font-isi); }
.panel-deskripsi { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--tinta-2); max-width: 68ch; }
.panel-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bagian { min-width: 0; }
.bagian-kepala { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.bagian-kepala > div:first-child { min-width: 0; flex: 1 1 260px; }
.bagian-judul { margin: 0; font: 700 20px/28px var(--font-judul); }
.bagian-deskripsi { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--tinta-2); max-width: 68ch; }
.bagian-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-galat, .panel-terlarang { display: flex; gap: 14px; align-items: flex-start; }
.panel-galat > svg { color: var(--kritis); flex: none; }
.panel-terlarang > svg { color: var(--tinta-3); flex: none; }
.panel-galat h2, .panel-terlarang h2 { font: 600 16px/24px var(--font-isi); margin-bottom: 4px; }
.panel-galat p, .panel-terlarang p { color: var(--tinta-2); }
.panel-terlarang .tombol { margin-top: 12px; }

/* Angka ringkas */
.angka-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); row-gap: 16px; margin-left: -20px; overflow: hidden; }
.ar-item { padding: 2px 16px 2px 20px; box-shadow: -1px 0 0 var(--garis); min-width: 0; }
.ar-label { font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.ar-nilai { margin-top: 2px; font: 600 24px/30px var(--font-isi); color: var(--tinta); }
.ar-nilai .redup { font-size: 15px; font-weight: 500; }
.ar-catatan { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--tinta-3); }

/* Daftar fakta */
.daftar-fakta { margin: 0; display: flex; flex-direction: column; }
.df-baris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px 16px; padding: 11px 0; border-top: 1px solid var(--garis); }
.df-baris:first-child { border-top: 0; padding-top: 2px; }
.df-baris dt { font-size: 14px; line-height: 22px; color: var(--tinta-2); }
.df-baris dd { margin: 0; min-width: 0; }
.df-nilai { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--tinta); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.df-catatan { font-size: 12px; line-height: 18px; color: var(--tinta-3); margin-top: 2px; }

/* Meter */
.meter { display: flex; align-items: center; gap: 8px; min-width: 96px; }
.meter-jalur { flex: 1; height: 8px; border-radius: 4px; background: var(--nada-lembut, var(--permukaan-2)); overflow: hidden; }
.meter-isi { height: 100%; border-radius: 4px; background: var(--nada, var(--merek)); }
.meter-angka { font-size: 12px; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }

/* Keadaan kosong */
.kosong { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 16px; text-align: center; color: var(--tinta-2); }
.kosong > svg { color: var(--tinta-3); }
.kosong-teks { margin: 0; max-width: 52ch; font-size: 14px; line-height: 22px; }
.kosong-ringkas { padding: 18px 12px; }
.kosong-petunjuk { margin: 0; max-width: 52ch; font-size: 12px; line-height: 18px; color: var(--tinta-3); }

/* Tab */
.tab-gulir { overflow-x: auto; overflow-y: hidden; margin-bottom: 20px; border-bottom: 1px solid var(--garis); scrollbar-width: thin; }
.tab-daftar { position: relative; display: flex; gap: 2px; min-width: max-content; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--tinta-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color var(--durasi-cepat), background-color var(--durasi-cepat); }
.tab:hover { color: var(--tinta); background: var(--permukaan-2); }
.tab[aria-selected="true"] { color: var(--merek); }
.tab-jumlah { display: inline-block; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--permukaan-2); color: var(--tinta-2); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--garis); }
.tab[aria-selected="true"] .tab-jumlah { background: var(--merek-lembut); color: var(--merek); box-shadow: none; }
.tab-garis { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: var(--merek); transition: transform var(--durasi) var(--kurva), width var(--durasi) var(--kurva); }
.tab-panel { outline: none; min-width: 0; }
.tab-panel:focus-visible { outline: 2px solid var(--merek); outline-offset: 4px; border-radius: 6px; }
.tab-panel.tab-masuk { animation: pudar-masuk var(--durasi) var(--kurva); }

/* Tabel */
.tabel-blok { min-width: 0; }
.tabel-wadah { overflow-x: auto; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tabel th, .tabel td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--garis); }
.tabel thead th { border-top: 0; background: var(--permukaan-2); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; vertical-align: bottom; }
.tabel tbody th { font-weight: 500; color: var(--tinta); }
.tabel .rata-kanan { text-align: right; font-variant-numeric: tabular-nums; }
.tabel .rata-tengah { text-align: center; }
.tabel .sel-sempit { white-space: nowrap; width: 1%; }
.tabel .sel-sorot { background: var(--merek-lembut); }
.tabel-ringkas th, .tabel-ringkas td { padding: 7px 10px; font-size: 13px; }
.baris-klik { cursor: pointer; transition: background-color var(--durasi-cepat); }
.baris-klik:hover { background: var(--permukaan-2); }
.baris-klik:focus-visible { outline: 2px solid var(--merek); outline-offset: -2px; background: var(--merek-lembut); }
.baris-terpilih { background: var(--merek-lembut); }
.disorot { animation: sorot 1.8s ease; }
.tabel-info { margin: 10px 0 0; font-size: 13px; color: var(--tinta-3); }
.daftar-kartu { display: none; list-style: none; margin: 0; padding: 0; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); overflow: hidden; }
.kartu-baris { padding: 14px 16px; border-top: 1px solid var(--garis); }
.kartu-baris:first-child { border-top: 0; }
.kartu-baris.baris-klik:hover { background: var(--permukaan-2); }
.kb-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kb-judul { min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.kb-lencana { flex: none; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.kb-sub { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.kb-atribut { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0 0; }
.kb-atribut dt { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.kb-atribut dd { margin: 2px 0 0; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.kb-aksi { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.halamanan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.hal-info { margin: 0; font-size: 13px; line-height: 20px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.hal-tombol { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.hal-nomor, .hal-arah { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); color: var(--tinta); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--durasi-cepat), border-color var(--durasi-cepat); }
.hal-nomor:hover, .hal-arah:hover:not(:disabled) { border-color: var(--merek); color: var(--merek); }
.hal-nomor[aria-current="page"] { background: var(--merek); border-color: var(--merek); color: #fff; }
.hal-arah:disabled { color: var(--tinta-3); background: var(--permukaan-2); border-color: var(--garis); cursor: not-allowed; }
.hal-elipsis { padding: 0 4px; color: var(--tinta-3); }

/* Dialog, panel samping, penampil PDF */
dialog.dialog { padding: 0; border: 0; border-radius: 12px; width: calc(100% - 32px); max-width: 560px; max-height: calc(100dvh - 48px); color: var(--tinta); background: var(--permukaan); box-shadow: 0 20px 48px rgba(24, 34, 52, .24); overflow: hidden; }
dialog.dialog[open] { display: flex; flex-direction: column; animation: dialog-masuk var(--durasi) var(--kurva); }
dialog.dialog::backdrop { background: rgba(24, 34, 52, .48); }
dialog.dialog[open]::backdrop { animation: pudar-masuk var(--durasi) linear; }
dialog.dialog.menutup { animation: dialog-keluar 140ms ease forwards; }
dialog.dialog.menutup::backdrop { animation: pudar-keluar 140ms linear forwards; }
.dialog-bingkai { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dialog-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--garis); }
.dialog-kepala-teks { min-width: 0; padding-top: 4px; }
.dialog-judul { margin: 0; font: 600 17px/24px var(--font-isi); overflow-wrap: anywhere; }
.dialog-subjudul { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--tinta-3); }
.dialog-kepala-aksi { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; flex: none; }
.dialog-tutup { color: var(--tinta-2); }
.dialog-isi { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 20px; overscroll-behavior: contain; }
.dialog-kaki { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--garis); }
dialog.dialog-pdf { width: 90vw; max-width: 90vw; height: 90vh; height: 90dvh; max-height: 90dvh; }
.dialog-pdf .dialog-isi { display: flex; padding: 0; overflow: hidden; }
.pdf-wadah { position: relative; flex: 1; display: flex; background: #525659; }
.pdf-bingkai { flex: 1; width: 100%; height: 100%; border: 0; background: #525659; }
.pdf-memuat { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #525659; color: #fff; font-size: 14px; }
.putaran { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: putar 800ms linear infinite; }
dialog.panel-samping { inset: 0 0 0 auto; margin: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; }
dialog.panel-samping[open] { animation: geser-masuk 240ms var(--kurva); }
dialog.panel-samping.menutup { animation: geser-keluar 140ms ease forwards; }

/* Toast dan tooltip */
.wadah-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 150; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 8px; border-left: 4px solid var(--nada, var(--tinta-3)); background: var(--tinta); color: #fff; font-size: 14px; line-height: 20px; box-shadow: var(--bayangan); animation: toast-masuk var(--durasi) var(--kurva); }
.toast.menghilang { animation: toast-keluar var(--durasi) ease forwards; }
.tooltip { position: absolute; z-index: 160; max-width: 260px; padding: 6px 9px; border-radius: 6px; background: var(--tinta); color: #fff; font-size: 12px; line-height: 16px; pointer-events: none; box-shadow: 0 4px 12px rgba(24, 34, 52, .18); }

/* Aksi dokumen dan daftar berkas */
.aksi-dokumen { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.aksi-dokumen .tombol-hantu { padding: 0 8px; }
.daftar-berkas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.berkas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--garis); }
.berkas:first-child { border-top: 0; padding-top: 0; }
.berkas-teks { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 260px; }
.berkas-teks > svg { flex: none; margin-top: 2px; color: var(--tinta-3); }
.berkas-judul { font-size: 14px; line-height: 20px; font-weight: 500; }
.berkas-ket { font-size: 12px; line-height: 18px; color: var(--tinta-3); }

/* Garis waktu */
.garis-waktu { position: relative; list-style: none; margin: 0; padding: 0; }
.gw-item { position: relative; padding: 0 0 18px 28px; }
.gw-item:last-child { padding-bottom: 0; }
.gw-item::before { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--garis-kuat); }
.gw-item:last-child::before { display: none; }
.gw-titik { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--garis-kuat); background: var(--permukaan); }
.gw-status-selesai .gw-titik { border-color: var(--baik); background: var(--baik); }
.gw-status-berjalan .gw-titik { border-color: var(--info); background: var(--info-lembut); box-shadow: 0 0 0 3px var(--info-lembut); }
.gw-status-akan-datang .gw-titik { border-style: dashed; }
.gw-aktif .gw-titik { border-color: var(--merek); box-shadow: 0 0 0 3px var(--merek-lembut); }
.gw-isi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.gw-judul { font-size: 14px; line-height: 20px; font-weight: 600; }
.gw-tombol { padding: 0; border: 0; background: none; color: var(--merek); font-size: 14px; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: var(--merek-garis); text-underline-offset: 3px; }
.gw-tombol[aria-pressed="true"] { color: var(--tinta); text-decoration-color: var(--merek); text-decoration-thickness: 2px; }
.gw-tanggal { font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.gw-ket { font-size: 13px; line-height: 20px; color: var(--tinta-2); max-width: 68ch; }

/* =========================================================================
 * 9. Grafik
 * ======================================================================= */
.grafik { position: relative; margin: 0; min-width: 0; }
.grafik-kanvas { position: relative; width: 100%; border-radius: 6px; outline: none; }
.grafik-kanvas:focus-visible { box-shadow: 0 0 0 2px var(--permukaan), 0 0 0 4px var(--merek); }
.grafik-kanvas > svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafik text { font-family: var(--font-isi); font-size: 12px; fill: var(--tinta-2); }
.grafik .sumbu text { fill: var(--tinta-3); font-variant-numeric: tabular-nums; }
.grafik .kisi line { stroke: var(--garis); stroke-width: 1; shape-rendering: crispEdges; }
.grafik text.label { font-size: 13px; font-weight: 500; fill: var(--tinta-2); }
.grafik-kolom text.label, .grafik-kolomTumpuk text.label, .grafik-kecil text.label { font-size: 12px; font-weight: 400; }
.grafik text.label-sorot { fill: var(--tinta); font-weight: 600; }
.grafik text.nilai { fill: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.grafik text.nilai-dalam { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafik text.redup { fill: var(--tinta-3); }
.grafik text.label-acuan { fill: var(--tinta-2); font-size: 11px; font-weight: 500; }
.grafik text.nilai-dalam.di-gelap { fill: #fff; }
.grafik text.nilai-dalam.di-terang { fill: var(--tinta); }
.grafik-batangH text.nilai, .grafik text.label-acuan { paint-order: stroke; stroke: var(--permukaan); stroke-width: 3px; stroke-linejoin: round; }
.grafik .garis-target, .grafik .garis-acuan { stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafik .garis-acuan { stroke: var(--tinta-2); }
.grafik .pita-sorot { fill: var(--merek-lembut); }
.grafik-pita { position: absolute; z-index: 0; border-radius: 6px; background: rgba(31, 59, 122, .06); pointer-events: none; }
.grafik-kanvas svg { position: relative; z-index: 1; }
.grafik-tooltip { position: absolute; z-index: 5; min-width: 140px; max-width: 260px; padding: 8px 10px; border-radius: 6px; background: var(--tinta); color: #fff; font-size: 12px; line-height: 17px; pointer-events: none; box-shadow: 0 4px 14px rgba(24, 34, 52, .2); }
.gt-judul { font-weight: 600; margin-bottom: 3px; }
.gt-baris { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.gt-warna { flex: none; width: 9px; height: 9px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.grafik-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.grafik-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.gl-contoh { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.gl-garis { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--tinta); }
.gl-ikon { display: inline-flex; margin-right: -2px; }
.gl-ikon + .gl-contoh { display: none; }
.grafik-kaki { display: flex; justify-content: flex-end; margin-top: 4px; }
.grafik-tabel { margin-top: 8px; }
.garis-mini { display: block; overflow: visible; }
.garis-mini path { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.garis-mini circle { fill: #2a78d6; }

/* Grafik kecil */
.grafik-kecil { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 10px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); transition: border-color var(--durasi-cepat), box-shadow var(--durasi-cepat); }
.grafik-kecil.kecil-terpilih { border-color: var(--merek); box-shadow: inset 0 0 0 1px var(--merek); }
.kecil-kepala { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.kecil-pilih { cursor: pointer; border-radius: 6px; }
.kecil-pilih:hover .kecil-judul { color: var(--merek); }
.kecil-judul { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tinta-2); transition: color var(--durasi-cepat); }
.kecil-nilai { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.kecil-angka { font: 600 24px/30px var(--font-isi); color: var(--tinta); }
.kecil-selisih { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kecil-selisih.naik { color: var(--baik); }
.kecil-selisih.turun { color: var(--kritis); }
.kecil-selisih.tetap { color: var(--tinta-3); }
.kecil-ket { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.kecil-kosong { padding: 14px 0 8px; font-size: 13px; }
.grafik-kecil .grafik-kanvas { margin-top: 4px; }
.grafik-kecil .grafik-kaki { margin-top: 0; }
.grafik .kecil-dasar { stroke: var(--garis); stroke-width: 1; }
.grafik .kecil-garis { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafik .kecil-titik { fill: var(--permukaan); stroke: #2a78d6; stroke-width: 2; }
.grafik .kecil-cincin { fill: none; stroke: #2a78d6; stroke-width: 2; opacity: .35; }
.grafik .kecil-titik-sorot { fill: #2a78d6; }

/* =========================================================================
 * 10. Lemari ordner
 * ======================================================================= */
.lemari { position: relative; min-width: 0; }
.lemari-isi { height: 340px; display: flex; align-items: flex-end; overflow-x: auto; overflow-y: hidden; padding: 16px 12px 0; scrollbar-width: thin; }
.lemari-deret { display: flex; align-items: flex-end; gap: 6px; height: 100%; margin: 0 auto; padding-top: 8px; }
.ordner { --ordner-c: var(--merek); position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: var(--lebar, 72px); height: var(--tinggi, 100%); border-radius: 6px 6px 2px 2px; background: var(--ordner-c); color: var(--tinta); text-decoration: none; box-shadow: inset 4px 0 0 rgba(255, 255, 255, .12), inset -4px 0 0 rgba(0, 0, 0, .16); transition: transform 160ms var(--kurva), box-shadow 160ms var(--kurva); animation: ordner-naik 420ms var(--kurva) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.ordner-nada-0 { --ordner-c: var(--ordner-0, var(--merek)); }
.ordner-nada-1 { --ordner-c: var(--ordner-1, #182E5F); }
.ordner-nada-2 { --ordner-c: var(--ordner-2, #3B4B70); }
.ordner-nada-3 { --ordner-c: var(--ordner-3, #415892); }
a.ordner:hover, a.ordner:focus-visible { transform: translateY(-6px); box-shadow: var(--bayangan), inset 4px 0 0 rgba(255, 255, 255, .12), inset -4px 0 0 rgba(0, 0, 0, .16); }
a.ordner:focus-visible { outline: 2px solid var(--aksen); outline-offset: 3px; }
.ordner-pelat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: calc(100% - 18px); height: 44%; margin-top: 16%; padding: 6px 2px 8px; border-radius: 4px; background: #fff; overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.ordner-kode { font-size: 10px; line-height: 12px; font-weight: 600; color: var(--tinta-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ordner-judul { flex: 1; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 15px/1.05 var(--font-judul); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ordner-kunci { position: absolute; top: 7px; right: 7px; color: rgba(255, 255, 255, .85); line-height: 0; }
.ordner-lubang { position: absolute; left: 50%; bottom: 18%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .14); }
.lemari-rak { height: 12px; border-radius: 2px; background: var(--rak, #8E7A47); box-shadow: 0 3px 0 rgba(0, 0, 0, .1); }
.lemari-mini .lemari-isi { height: 250px; padding: 12px 4px 0; }
.lemari-mini .lemari-deret { gap: 5px; }
.lemari-mini .ordner { width: calc(var(--lebar, 72px) * .8); }
.lemari-mini .ordner-pelat { height: 66%; margin-top: 10%; padding: 5px 1px 6px; gap: 4px; }
.lemari-mini .ordner-judul { font-size: 10.5px; line-height: 1.05; }
.lemari-mini .ordner-lubang { width: 16px; height: 16px; margin-left: -8px; bottom: 9%; }
.lemari-keterangan { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--tinta-2); }

/* =========================================================================
 * 11. Halaman masuk
 * ======================================================================= */
.halaman-masuk { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--kertas); }
.masuk-kiri { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 32px; padding: 48px 56px 40px; background: var(--merek-tua); color: #fff; overflow: hidden; }
.masuk-kiri .masuk-tahap { margin-top: auto; }
.masuk-kiri .lemari-mini { max-width: 560px; }
.masuk-kiri .ordner { --ordner-c: rgba(255, 255, 255, .14); box-shadow: inset 4px 0 0 rgba(255, 255, 255, .08), inset -4px 0 0 rgba(0, 0, 0, .14); }
.masuk-kiri .ordner-nada-1 { --ordner-c: rgba(255, 255, 255, .2); }
.masuk-kiri .ordner-nada-2 { --ordner-c: rgba(255, 255, 255, .1); }
.masuk-kiri .ordner-nada-3 { --ordner-c: rgba(255, 255, 255, .26); }
.masuk-kiri .ordner-pelat { background: rgba(255, 255, 255, .94); }
.masuk-merek { display: flex; flex-direction: column; gap: 6px; }
.masuk-merek .mm-nama { font: 700 44px/52px var(--font-judul); color: #fff; letter-spacing: .01em; }
.masuk-merek .mm-kepanjangan { font-size: 17px; line-height: 26px; color: rgba(255, 255, 255, .9); }
.masuk-merek .mm-pt { font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .72); }
.masuk-tahap { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.masuk-tahap li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 4px; border-radius: 16px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.masuk-tahap .mt-nomor { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--merek-tua); font-size: 12px; font-weight: 700; }
.masuk-kanan { display: flex; align-items: center; justify-content: center; padding: 40px 24px; padding-top: max(40px, env(safe-area-inset-top)); outline: none; }
.masuk-kotak { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.masuk-kotak h1 { font: 700 30px/36px var(--font-judul); }
.masuk-logo { width: 64px; height: 64px; object-fit: contain; }
.form-masuk { display: flex; flex-direction: column; gap: 16px; }
.isian-sandi { position: relative; }
.isian-sandi .isian-kendali { padding-right: 48px; }
.tombol-tampil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--tinta-2); }
.tombol-tampil:hover { background: var(--permukaan-2); color: var(--tinta); }
.form-masuk .isian-kendali { height: 44px; font-size: 15px; }
.form-masuk .tombol-utama { height: 44px; font-size: 15px; }
.pesan-galat { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--kritis); font-weight: 500; }
.pesan-galat:empty { display: none; }
.pesan-galat:not(:empty) { animation: pudar-masuk var(--durasi) ease; }
.pesan-galat > svg { flex: none; margin-top: 2px; }
.pesan-info { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--info-lembut); color: var(--info); font-size: 14px; line-height: 20px; font-weight: 500; }
.pesan-info > svg { flex: none; margin-top: 2px; }
.pesan-info.nada-waspada { background: var(--waspada-lembut); color: var(--waspada); }
.goyang { animation: goyang 240ms ease; }
.memeriksa .putaran { width: 16px; height: 16px; border-width: 2px; }
.catatan-masuk { margin: 0; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.masuk-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--garis); }
.masuk-kaki a { font-size: 14px; font-weight: 500; }
.masuk-kaki:empty { display: none; }

/* =========================================================================
 * 12. Halaman publik (mode beranda)
 * ======================================================================= */
.publik-kepala { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--garis); }
.publik-kepala-isi { position: relative; display: flex; align-items: center; gap: 24px; max-width: 1200px; height: 64px; margin: 0 auto; padding: 0 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.publik-merek { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; flex: none; }
.publik-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.publik-nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--tinta-2); text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color var(--durasi-cepat), color var(--durasi-cepat); }
.publik-nav a:hover { background: var(--permukaan-2); color: var(--tinta); }
.publik-nav a[aria-current="page"] { background: var(--merek-lembut); color: var(--merek); }
.publik-aksi { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tombol-lipat { display: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); color: var(--tinta-2); }
body > .banner-contoh { width: calc(100% - 48px); max-width: 1152px; }
.publik-konten { max-width: 1200px; margin: 0 auto; padding: 32px 24px 56px; outline: none; }
.publik-isi { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.publik-kaki { position: relative; background: var(--permukaan); border-top: 1px solid var(--garis); }
.publik-kaki::before { content: ""; position: absolute; left: 0; top: -1px; width: 72px; height: 2px; background: var(--aksen); }
.publik-kaki-isi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 24px 40px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 32px 24px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.pk-identitas { display: flex; align-items: center; gap: 12px; }
.pk-identitas .logo { width: 48px; height: 48px; object-fit: contain; }
.pk-unit { font: 700 17px/24px var(--font-judul); }
.pk-pt { font-size: 13px; color: var(--tinta-2); }
.pk-kontak { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 22px; color: var(--tinta-2); }
.pk-kontak li { display: flex; align-items: flex-start; gap: 8px; }
.pk-kontak svg { flex: none; margin-top: 3px; color: var(--tinta-3); }

/* =========================================================================
 * 13. Dashboard
 * ======================================================================= */
.dash-ringkas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--celah); }
.angka-utama { display: flex; flex-direction: column; gap: 6px; }
.au-label { font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.au-baris { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.au-nilai { font: 600 56px/60px var(--font-isi); color: var(--tinta); letter-spacing: -.02em; }
.au-nilai.au-kosong { font-size: 28px; line-height: 36px; letter-spacing: 0; color: var(--tinta-3); font-weight: 500; }
.au-selisih { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.au-selisih.naik { color: var(--baik); }
.au-selisih.turun { color: var(--kritis); }
.au-selisih.tetap { color: var(--tinta-3); }
.au-kalimat { margin: 0; color: var(--tinta-2); font-size: 14px; line-height: 22px; max-width: 52ch; }
.strip-ppepp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); overflow: hidden; }
.sp-segmen { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 16px 20px; min-width: 0; border-left: 1px solid var(--garis); }
.sp-segmen:first-child { border-left: 0; }
.sp-segmen::after { content: ""; position: absolute; right: -7px; top: 50%; z-index: 1; width: 12px; height: 12px; margin-top: -6px; border-top: 1px solid var(--garis); border-right: 1px solid var(--garis); background: var(--permukaan); transform: rotate(45deg); }
.sp-segmen:last-child::after { display: none; }
.sp-kepala { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.sp-nomor { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--merek); color: #fff; font-size: 12px; font-weight: 700; }
.sp-angka { font: 600 24px/30px var(--font-isi); color: var(--tinta); margin-top: 4px; }
.sp-angka .redup { font-size: 15px; font-weight: 500; }
.sp-ket { font-size: 13px; line-height: 18px; color: var(--tinta-2); flex: 1; }
.sp-tautan { margin-top: 6px; font-size: 13px; }
.sp-kembali { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 0 4px; font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.sp-kembali::before, .sp-kembali::after { content: ""; flex: 1; border-top: 1px dashed var(--garis-kuat); }
.sp-kembali span { display: inline-flex; align-items: center; gap: 6px; }
ol.strip-ppepp { list-style: none; margin: 0; padding: 0; }
.kisi-kecil { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.masuk-kotak .banner-contoh { width: auto; margin: 0; }
.unit-saya { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.unit-saya .us-nama { font: 700 18px/26px var(--font-judul); }
.unit-saya .us-lencana { display: flex; flex-wrap: wrap; gap: 6px; }

/* =========================================================================
 * 14. Gerak
 * ======================================================================= */
@keyframes loader-muncul { from { opacity: 0; } to { opacity: 1; } }
@keyframes titik-nyala { 0%, 19.99% { background-color: var(--merek); } 20%, 100% { background-color: var(--garis-kuat); } }
@keyframes masuk-blok { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pudar-masuk { from { opacity: 0; } to { opacity: 1; } }
@keyframes pudar-keluar { from { opacity: 1; } to { opacity: 0; } }
@keyframes dialog-masuk { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dialog-keluar { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.98); } }
@keyframes geser-masuk { from { transform: translateX(100%); } to { transform: none; } }
@keyframes geser-keluar { from { transform: none; } to { transform: translateX(100%); } }
@keyframes menu-muncul { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes toast-masuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-keluar { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes goyang { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes ordner-naik { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sorot { 0%, 35% { background-color: #F6EBCF; } 100% { background-color: transparent; } }
@keyframes tumbuh-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tumbuh-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gambar-garis { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes muncul { from { opacity: 0; } to { opacity: 1; } }

.blok-masuk { animation: masuk-blok 240ms var(--kurva) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.grafik svg.animasi .tumbuh-x { transform-box: fill-box; transform-origin: left center; animation: tumbuh-x 600ms var(--kurva) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.grafik svg.animasi .tumbuh-y { transform-box: fill-box; transform-origin: center bottom; animation: tumbuh-y 600ms var(--kurva) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.grafik svg.animasi .garis-gambar { stroke-dasharray: 1; animation: gambar-garis 700ms var(--kurva) backwards; }
.grafik svg.animasi .titik-muncul { animation: muncul 200ms ease 700ms backwards; }
.grafik svg.animasi .nilai-muncul { animation: muncul 200ms ease backwards; animation-delay: calc(420ms + var(--i, 0) * 30ms); }

/* Transisi antarhalaman (@view-transition) sengaja tidak dipakai: transisi yang batal saat
 * pengalihan memicu galat konsol. Pergantian periode tetap memakai document.startViewTransition. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--durasi); }

/* =========================================================================
 * 15. Responsif
 * ======================================================================= */
@media (min-width: 768px) {
  .kisi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garis-waktu-datar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
  .garis-waktu-datar .gw-item { padding: 28px 0 0 0; }
  .garis-waktu-datar .gw-item::before { display: block; left: 20px; right: -16px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .garis-waktu-datar .gw-item:last-child::before { display: none; }
  .garis-waktu-datar .gw-titik { top: 0; }
}
@media (min-width: 900px) {
  .kisi-grafik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-ringkas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* Tablet dan HP: sidebar menjadi laci */
@media (max-width: 1023.98px) {
  .kerangka { grid-template-columns: minmax(0, 1fr); }
  html.sidebar-ciut .sidebar { display: flex; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; box-shadow: var(--bayangan); padding-top: max(18px, env(safe-area-inset-top)); padding-left: max(14px, env(safe-area-inset-left)); transition: transform 240ms var(--kurva), visibility 0s linear 240ms; }
  html.laci-terbuka .sidebar { transform: none; visibility: visible; transition: transform 240ms var(--kurva), visibility 0s; }
  .laci-latar { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(24, 34, 52, .42); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
  html.laci-terbuka .laci-latar { opacity: 1; pointer-events: auto; }
  html.laci-terbuka { overflow: hidden; }
  .topbar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .konten { padding: 24px 24px 40px; }
  .kaki { padding-left: 24px; padding-right: 24px; }
  .kaki::before { left: 24px; }
  .banner-contoh { width: calc(100% - 48px); }
  .publik-kepala-isi { gap: 12px; }
  /* Topbar tablet: nama pengguna dan teks Cetak disembunyikan agar remah roti tidak terpotong. */
  .tp-teks, .tombol-pengguna > svg { display: none; }
  .tombol-pengguna { padding: 0 4px; }
  .tombol-cetak { width: 40px; padding: 0; }
  .tombol-cetak span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 899.98px) {
  .tombol-lipat { display: inline-grid; }
  .publik-nav { position: absolute; left: 0; right: 0; top: 64px; display: none; background: var(--permukaan); border-bottom: 1px solid var(--garis); box-shadow: var(--bayangan); }
  .publik-nav.terbuka { display: block; animation: menu-muncul var(--durasi-cepat) var(--kurva); }
  .publik-nav ul { flex-direction: column; padding: 8px 16px 16px; }
  .publik-nav a { padding: 12px; }
  .strip-ppepp { grid-template-columns: minmax(0, 1fr); }
  .sp-segmen { border-left: 0; border-top: 1px solid var(--garis); flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 14px 16px; }
  .sp-segmen:first-child { border-top: 0; }
  .sp-segmen::after { right: auto; left: 28px; top: auto; bottom: -7px; margin-top: 0; transform: rotate(135deg); }
  .sp-kepala { flex: 1 1 100%; }
  .sp-angka { margin-top: 0; }
  .sp-ket { flex: 1 1 auto; }
  .sp-tautan { margin-top: 0; flex: 1 1 100%; }
}

/* HP */
@media (max-width: 767.98px) {
  h1, .kh-baris h1, .masuk-kotak h1 { font-size: 24px; line-height: 30px; }
  .topbar { gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .tombol-menu { margin-left: -4px; }
  .remah { display: none; }
  .judul-pendek { display: block; flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tombol-cetak { display: none; }
  .tp-teks, .tombol-pengguna > svg { display: none; }
  .tombol-pengguna { padding: 0 4px; }
  .pilih-periode label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pilih-periode select { height: 34px; font-size: 13px; padding-left: 10px; padding-right: 28px; background-position: right 6px center; }
  .konten { padding: 20px 16px 32px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .isi-halaman { gap: 16px; }
  .panel { padding: 16px; }
  .banner-contoh { width: calc(100% - 32px); margin-top: 12px; }
  .kaki { flex-direction: column; align-items: flex-start; padding-left: 16px; padding-right: 16px; }
  .kaki::before { left: 16px; }
  .strip-kendali { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-sel { padding: 10px 12px; }
  .sk-sel:nth-child(3) { border-left: 0; }
  .sk-sel:nth-child(n+3) { border-top: 1px solid var(--garis); }
  .tabel-responsif .tabel-wadah { display: none; }
  .tabel-responsif .daftar-kartu { display: block; }
  .angka-ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-kecil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .grafik-kecil { padding: 12px 12px 8px; }
  .kecil-angka { font-size: 20px; line-height: 26px; }
  .ar-nilai { font-size: 22px; line-height: 28px; }
  .au-nilai { font-size: 44px; line-height: 48px; }
  .df-baris { grid-template-columns: minmax(0, 1fr); }
  .baris-saring > .isian, .baris-saring > .isian-cari { max-width: none; flex-basis: 100%; }
  .bagian-judul { font-size: 18px; line-height: 26px; }
  .dialog-kepala { padding: 14px 12px 12px 16px; }
  .dialog-isi { padding: 16px; }
  .lemari-isi { height: 240px; }
  .halaman-masuk { grid-template-columns: minmax(0, 1fr); }
  .masuk-kiri { display: none; }
  .masuk-kanan { align-items: flex-start; padding: 32px 20px; }
  .publik-kepala-isi { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .publik-merek .si-pt { display: none; }
  .publik-konten { padding: 24px 16px 40px; }
  .publik-isi { gap: 32px; }
  .publik-kaki-isi { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; }
  body > .banner-contoh { width: calc(100% - 32px); }
  .halamanan { flex-direction: column; align-items: stretch; }
  .hal-tombol { justify-content: center; }
}
@media (max-width: 380px) {
  .publik-aksi .tombol-utama span { display: none; }
  .publik-aksi .tombol-utama { width: 40px; padding: 0; }
}

/* Layar sentuh: target minimal 44 px */
@media (pointer: coarse) {
  .tombol, .tombol-kecil, .isian-kendali, .segmen-tombol, .hal-nomor, .hal-arah, .menu-tautan, .tab, .menu-pengguna-item, .pilih-periode select { min-height: 44px; }
  .tombol-kecil.tombol-ikon, .tombol-ikon { min-width: 44px; }
  .label-versi { min-height: 36px; }
  .gw-tombol { min-height: 32px; }
}

/* =========================================================================
 * 16. Gerak dikurangi dan animasi dimatikan
 * ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .loader { animation-delay: 150ms !important; }
  /* Transisi antarhalaman tetap aktif (tidak dibatalkan di tengah jalan), tetapi tanpa animasi. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html.tanpa-animasi *, html.tanpa-animasi *::before, html.tanpa-animasi *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html.tanpa-animasi .loader { animation-delay: 150ms !important; }
html.tanpa-animasi::view-transition-group(*), html.tanpa-animasi::view-transition-old(*), html.tanpa-animasi::view-transition-new(*) { animation: none !important; }

/* =========================================================================
 * 17. Cetak
 * ======================================================================= */
@media print {
  @page { margin: 16mm 14mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html, body { background: #fff !important; font-size: 10.5pt; line-height: 1.45; }
  .sidebar, .topbar, .laci-latar, .kaki, .lewati, .loader, .tooltip, .wadah-toast, .grafik-kaki, .grafik-tooltip, .grafik-pita,
  .tombol, .baris-saring, .hal-tombol, .publik-kepala, .publik-kaki, dialog, .label-versi, .tombol-tampil { display: none !important; }
  .cetak-saja { display: inline !important; font-size: 9pt; color: #333; }
  .tautan-panah, .sp-tautan, .sp-kembali, .grafik-legenda + .grafik-kaki { display: none !important; }
  .tabel { font-size: 8.5pt; line-height: 1.3; table-layout: auto; }
  .tabel th, .tabel td { padding: 4px 5px; min-width: 0 !important; max-width: none !important; }
  .tabel thead th, .tanpa-bungkus, .kode { white-space: normal !important; }
  .tabel .lencana { height: auto; padding: 2px 5px; white-space: normal; }
  .kerangka { display: block; }
  .utama { min-height: 0; }
  .konten { max-width: none; padding: 0; }
  .banner-contoh { display: flex !important; width: auto; margin: 0 0 12px; }
  .kepala-cetak { display: flex !important; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1.5px solid var(--tinta); }
  .kepala-cetak .logo-cetak { width: 44px; height: 44px; object-fit: contain; }
  .kc-pt { font: 700 13pt/1.2 var(--font-judul); }
  .kc-unit { font-size: 10pt; color: #333; }
  .kc-judul { font-size: 10pt; font-weight: 600; }
  .kc-tanggal { margin-left: auto; font-size: 9pt; color: #444; }
  .kaki-cetak { display: block !important; margin-top: 18px; padding-top: 6px; border-top: 1px solid #bbb; font-size: 9pt; color: #444; }
  .kepala-halaman { margin-bottom: 14px; }
  .kepala-halaman h1 { font-size: 18pt; line-height: 1.2; }
  .panel, .grafik, .grafik-kecil, .tabel tr, .kartu-baris, .df-baris, .blok-standar, .berkas, .gw-item, .sp-segmen { break-inside: avoid; page-break-inside: avoid; }
  .panel { border-color: #ccc; }
  .tabel-responsif .tabel-wadah { display: block !important; }
  .tabel-responsif .daftar-kartu { display: none !important; }
  .tabel-wadah { overflow: visible; border-color: #ccc; }
  .tabel thead { display: table-header-group; }
  .blok-masuk { opacity: 1 !important; transform: none !important; }
  .tab-gulir { border-bottom-color: #ccc; }
  .strip-kendali { border-color: #ccc; }
  a { color: inherit; text-decoration: none; }
}

/* === Halaman: akreditasi, pelaporan === */
/* Akreditasi: panel perguruan tinggi */
.ak-pt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; align-items: stretch; }
.ak-pt-status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-width: 0; padding: 18px 20px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan-2); }
.ak-pt-ikon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--merek-lembut); color: var(--merek); }
.ak-pt-label { font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.ak-pt-lencana .lencana { height: 32px; padding: 0 12px; gap: 6px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.ak-pt-lembaga { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--tinta); }
.ak-pt-sisa { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ak-pt .daftar-fakta { align-self: start; }
/* Akreditasi: tabel prodi dan kotak peringatan */
.ak-sk { font-variant-numeric: tabular-nums; }
.ak-sisa { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ak-prodi-nama { font-weight: 600; color: var(--tinta); }
.ak-ket { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.ak-angka .ar-nilai .redup { display: inline-block; padding-top: 4px; line-height: 22px; }
/* Delapan kolom prodi (lebar diukur dari wadah tabel) */
.ak-tabel { container-type: inline-size; }
.ak-tabel .tabel th, .ak-tabel .tabel td { padding-left: 10px; padding-right: 10px; }
.ak-tabel .ak-kolom-prodi { min-width: 168px; }
.ak-tabel .ak-kolom-sk { min-width: 116px; }
.ak-tabel .ak-kolom-status .lencana { white-space: normal; height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; line-height: 16px; }
.ak-tabel .ak-kolom-berlaku .redup, .ak-tabel .ak-kolom-sisa .redup { white-space: nowrap; }
.ak-tabel .kb-kepala { flex-wrap: wrap; }
.ak-fakultas-dalam { display: none; margin-bottom: 2px; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
/* Wadah di bawah 1080 px (laptop kecil, tablet): kepala, teks kosong, dan tombol nonaktif boleh terlipat */
@container (max-width: 1079.98px) {
  .ak-tabel .tabel thead th { white-space: normal; }
  .ak-tabel .ak-kolom-berlaku .redup, .ak-tabel .ak-kolom-sisa .redup { white-space: normal; }
  .ak-tabel .ak-kolom-sertifikat .tombol-nonaktif { white-space: normal; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; line-height: 16px; text-align: left; }
}
/* Wadah di bawah 900 px (tablet): nama fakultas pindah ke atas nama prodi agar semua kolom terlihat */
@container (max-width: 899.98px) {
  .ak-tabel .ak-kolom-fakultas { display: none; }
  .ak-tabel .ak-fakultas-dalam { display: block; }
  .ak-tabel .ak-kolom-prodi { min-width: 150px; }
}
.ak-segera { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ak-segera li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ak-tombol-prodi { padding: 0; border: 0; background: none; color: var(--merek); font-size: 14px; line-height: 22px; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: var(--merek-garis); text-underline-offset: 3px; transition: text-decoration-color var(--durasi-cepat); }
.ak-tombol-prodi:hover { text-decoration-color: currentColor; }
.ak-kartu-aksi, .pl-kartu-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
/* Pelaporan: tabel pelaporan SPMI, grafik, dan tabel indikator (lebar diukur dari wadah tabel) */
.pl-tabel-spmi, .pl-tabel-ik { container-type: inline-size; }
.pl-tabel-spmi .pl-kolom-tanggal .redup { white-space: nowrap; }
.pl-tabel-spmi .pl-kolom-ket { min-width: 200px; }
.pl-tabel-spmi .pl-kolom-bukti .aksi-dokumen { flex-wrap: nowrap; }
.pl-tabel-spmi td .lencana, .pl-tabel-ik td .lencana { white-space: normal; height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; line-height: 16px; }
.pl-ket-grafik { margin: 0; max-width: 92ch; font-size: 12px; line-height: 18px; color: var(--tinta-3); }
.pl-tc { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pl-tc > div { display: flex; align-items: baseline; gap: 8px; }
.pl-tc dt { flex: none; min-width: 52px; font-size: 12px; line-height: 18px; color: var(--tinta-3); }
.pl-tc dd { margin: 0; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.pl-tc .redup, .pl-tabel-ik .pl-kolom-tahun > .redup, .pl-tabel-ik .pl-kolom-status > .redup { white-space: nowrap; }
.pl-arah { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.pl-tabel-ik .pl-kolom-uraian { min-width: 200px; }
.pl-tabel-ik .pl-kolom-satuan { min-width: 84px; }
.kb-atribut .pl-kartu-sorot { display: inline-block; margin: -2px -6px; padding: 2px 6px; border-radius: 6px; background: var(--merek-lembut); }
/* Wadah sempit (tablet, laptop kecil): label Target/Capaian di atas nilai, kolom dirapatkan */
@container (max-width: 1039.98px) {
  .pl-tabel-ik .tabel th, .pl-tabel-ik .tabel td { padding-left: 8px; padding-right: 8px; }
  .pl-tabel-ik .tabel thead th { white-space: normal; }
  .pl-tabel-ik .pl-kolom-uraian { min-width: 130px; }
  .pl-tabel-ik .pl-kolom-satuan { min-width: 0; }
  .pl-tabel-ik .pl-kolom-status > .redup { white-space: normal; }
  .pl-tc { gap: 4px; }
  .pl-tc > div { flex-direction: column; gap: 0; }
}
@container (max-width: 799.98px) {
  .pl-tabel-spmi .tabel th, .pl-tabel-spmi .tabel td { padding-left: 10px; padding-right: 10px; }
  .pl-tabel-spmi .tabel thead th, .pl-tabel-spmi .pl-kolom-tanggal .redup { white-space: normal; }
  .pl-tabel-spmi .pl-kolom-ket { min-width: 160px; }
  .pl-tabel-spmi .pl-kolom-bukti .tombol-nonaktif { white-space: normal; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; line-height: 16px; text-align: left; }
}
@media (min-width: 768px) {
  .ak-pt { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .ak-pt-status { padding: 14px 16px; }
  .ak-segera li { gap: 2px 8px; }
}
@media (pointer: coarse) {
  .ak-tombol-prodi { min-height: 44px; }
}
@media print {
  .ak-pt-status { background: #fff; border-color: #ccc; }
  .ak-tombol-prodi { color: inherit; text-decoration: none; }
}
/* === Akhir halaman: akreditasi, pelaporan === */

/* === Halaman: survei === */
.svy-tab { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.svy-kisi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.svy-kecil { min-width: 0; display: flex; }
.svy-kecil > .grafik { flex: 1; min-width: 0; }
.svy-kecil .grafik-kanvas { cursor: pointer; }
.svy-kecil .kecil-angka.svy-angka-kosong { font-size: 15px; font-weight: 500; color: var(--tinta-3); }
.svy-subjudul { margin: 0; font: 600 13px/20px var(--font-isi); color: var(--tinta-2); }
.svy-selisih { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.svy-selisih.naik { color: var(--baik); }
.svy-selisih.turun { color: var(--kritis); }
.svy-selisih.tetap { color: var(--tinta-3); }
.svy-label { display: block; font-size: 12px; line-height: 16px; color: var(--tinta-3); }
/* Rekap tracer: kepala kolom boleh dua baris; menjadi daftar kartu bila wadahnya terlalu sempit. */
.svy-tracer-tabel { container-type: inline-size; }
.svy-tracer-tabel .tabel thead th { white-space: normal; }
.svy-tracer-tabel .kb-atribut { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
@container (max-width: 759.98px) {
  .svy-tracer-tabel > .tabel-wadah { display: none; }
  .svy-tracer-tabel > .daftar-kartu { display: block; }
}
/* Kartu aspek pengguna lulusan: empat penilaian sebaris, kolom selebar labelnya. */
.svy-pl-tabel .kb-atribut { grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
.svy-kartu-indeks { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 20px; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svy-kartu-indeks-nilai { font-weight: 600; color: var(--tinta); }
/* Tabel tindak lanjut berisi teks panjang: daftar kartu di bawah 1200 px, tabel penuh di atasnya. */
@media (max-width: 1199.98px) {
  .svy-tl.tabel-responsif .tabel-wadah { display: none; }
  .svy-tl.tabel-responsif .daftar-kartu { display: block; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .svy-tl .kb-atribut { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .svy-tab { gap: 16px; }
  .svy-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .svy-kecil .kecil-selisih { align-items: flex-start; }
  .svy-kecil .kecil-selisih > svg { flex: none; margin-top: 2px; }
  .svy-tracer-tabel .kb-atribut { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359.98px) {
  .svy-pl-tabel .kb-atribut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .svy-kecil .grafik-kanvas { cursor: auto; }
  .svy-tab .grafik text.label-acuan { stroke: #fff; }
}
/* === Akhir halaman: survei === */

/* === Halaman: ami === */
.ami-siklus-bagian + .ami-siklus-bagian { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--garis); }
.ami-subjudul { margin: 0 0 12px; font: 600 13px/18px var(--font-isi); color: var(--tinta-2); }
.ami-catatan-grafik { margin: 10px 0 0; }
/* Grafik per unit diberi ruang lebih agar label unit muat di kiri batang (lebar grafik di atas 520 px) */
@media (min-width: 1200px) {
  .ami-tahun > .kisi-grafik { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}
.ami-saring > .ami-saring-unit { flex: 1.4 1 220px; max-width: 320px; }
.ami-rekap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 32px; }
.ami-rekap-kiri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.ami-jumlah { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ami-lencana { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Tabel temuan: muat tanpa gulir mulai sekitar 1366 px; layar lebih sempit menggulir di dalam wadahnya */
.ami-tabel-temuan .tabel th, .ami-tabel-temuan .tabel td { padding-left: 10px; padding-right: 10px; }
.ami-tabel-temuan .ami-k-id, .ami-tabel-temuan .ami-k-kategori, .ami-tabel-temuan .ami-k-tenggat, .ami-tabel-temuan .ami-k-status { width: 1%; }
.ami-tabel-temuan .ami-k-unit { min-width: 92px; }
.ami-tabel-temuan .ami-k-standar { min-width: 100px; max-width: 150px; }
.ami-tabel-temuan .ami-k-uraian { min-width: 164px; }
.ami-tabel-temuan .ami-k-tindakan { min-width: 144px; }
.ami-tabel-temuan .ami-k-pic { min-width: 92px; max-width: 150px; }
.ami-tabel-temuan .ami-k-uraian, .ami-tabel-temuan .ami-k-tindakan, .ami-tabel-temuan .ami-k-pic { overflow-wrap: anywhere; }
.ami-id { white-space: normal; }
.ami-id > span { white-space: nowrap; }
.ami-standar, .ami-status { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ami-status { gap: 4px; }
.ami-status .teks-mikro { white-space: nowrap; }
.ami-tabel-tim .ami-k-tim { width: 1%; white-space: nowrap; }
.ami-tabel-tim .ami-k-auditor { width: 50%; }
.ami-nama { list-style: none; margin: 0; padding: 0; }
.ami-nama li + li { margin-top: 2px; }
.ami-rr-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ami-rr-label { min-width: 150px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--tinta-2); }
/* Panel rincian temuan */
.ami-rincian .df-baris { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ami-rincian .df-baris dt { font-size: 13px; line-height: 20px; color: var(--tinta-3); }
.ami-teks-panjang { margin: 0; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--tinta); white-space: pre-line; }
.ami-rincian-blok { padding-top: 16px; border-top: 1px solid var(--garis); }
.ami-rincian-judul { margin: 0 0 10px; font: 600 14px/20px var(--font-isi); color: var(--tinta); }
.ami-rincian-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ami-rincian-daftar li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ami-rincian-daftar .baris-antara { width: 100%; }
@media (max-width: 767.98px) {
  .ami-saring > .isian { flex: 1 1 calc(50% - 8px); }
  .ami-saring > .ami-saring-unit, .ami-saring > .isian-cari { flex-basis: 100%; max-width: none; }
  .ami-rr-label { min-width: 0; flex-basis: 100%; }
  .ami-tab .ami-tab-awalan { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ami-tabel-tim .tabel { font-size: 13px; line-height: 18px; }
  .ami-tabel-tim .tabel th, .ami-tabel-tim .tabel td { padding-left: 8px; padding-right: 8px; }
  .ami-tabel-tim .ami-k-auditor { width: 62%; }
  .ami-nama li + li { margin-top: 6px; }
}
@media print {
  .ami-temuan .bagian-aksi, .ami-rekap .tombol { display: none !important; }
  .ami-tabel-temuan .tabel th, .ami-tabel-temuan .tabel td { min-width: 0; }
}
/* === Akhir halaman: ami === */

/* === Halaman: rtm === */
/* Lini masa dan rincian RTM */
.rtm-atas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--celah); align-items: start; }
.rtm-lini .gw-item { padding-bottom: 22px; }
.rtm-lini .gw-item:last-child { padding-bottom: 0; }
.rtm-lini .gw-isi { gap: 2px; }
.rtm-lini .gw-tombol { font-size: 15px; line-height: 22px; }
.rtm-lini .gw-ket { font-size: 12px; line-height: 18px; color: var(--tinta-3); }
.rtm-rincian { container-type: inline-size; }
.rtm-rincian-isi { display: flex; flex-direction: column; gap: 20px; }
.rtm-blok { min-width: 0; }
.rtm-garis { padding-top: 20px; border-top: 1px solid var(--garis); }
.rtm-subjudul { margin: 0 0 8px; font: 600 14px/20px var(--font-isi); color: var(--tinta); }
.rtm-dua { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; }
@container (min-width: 620px) { .rtm-dua { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.rtm-dua .daftar-bernomor li:first-child { margin-top: 0; }
.rtm-keterangan { margin-top: 12px; }
.rtm-keterangan p { max-width: 72ch; }
.rtm-catatan { margin: 12px 0 0; max-width: 68ch; }
.rtm-ganti { animation: pudar-masuk var(--durasi) var(--kurva); }

/* Tabel RTL */
.rtm-tabel-rtl .rtm-sel-uraian { min-width: 200px; }
.rtm-tabel-rtl .rtm-sel-sumber { min-width: 150px; }
.rtm-tabel-rtl .rtm-sel-pic { min-width: 120px; }
.rtm-sumber { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rtm-sumber-jenis { display: block; font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.rtm-sumber a.kode, .rtm-strip a.rtm-id { color: var(--merek); }
.rtm-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rtm-tabel-rtl .kb-lencana .rtm-status { align-items: flex-end; gap: 2px; text-align: right; }
.rtm-tabel-rtl .kb-atribut > div:first-child { grid-column: 1 / -1; }
.rtm-tabel-rtl > .kosong { border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }

/* Siklus tertutup: strip tiga segmen bersambung */
.rtm-strip-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rtm-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.rtm-strip-terpilih { border-color: var(--merek-garis); box-shadow: inset 3px 0 0 var(--merek); }
.rtm-segmen { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 22px 14px 24px; border-left: 1px solid var(--garis); }
.rtm-segmen:first-child { border-left: 0; }
.rtm-segmen::after { content: ""; position: absolute; right: -7px; top: 50%; z-index: 1; width: 12px; height: 12px; margin-top: -6px; border-top: 1px solid var(--garis); border-right: 1px solid var(--garis); background: var(--permukaan); transform: rotate(45deg); }
.rtm-segmen:last-child::after { display: none; }
.rtm-segmen-label { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.rtm-segmen-judul { font-size: 14px; line-height: 20px; font-weight: 600; }
.rtm-segmen-nilai { font: 600 20px/26px var(--font-isi); color: var(--tinta); font-variant-numeric: tabular-nums; }
.rtm-segmen-nilai .redup { font-size: 14px; font-weight: 500; }
.rtm-segmen-ket { font-size: 12px; line-height: 18px; color: var(--tinta-2); }
.rtm-lencana-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.rtm-id { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rtm-temuan { display: flex; flex-direction: column; gap: 2px; }
.rtm-temuan + .rtm-temuan { margin-top: 6px; }
.rtm-progres { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 240px; margin-top: 4px; }
.rtm-progres .meter { width: 100%; }
.rtm-kelompok .rtm-subjudul { margin-bottom: 10px; }

/* Daftar panjang yang dilipat (sumber RTL, temuan per rantai, rantai per RTM) */
.rtm-lainnya > summary { width: max-content; max-width: 100%; margin-top: 6px; color: var(--merek); font-size: 13px; line-height: 20px; font-weight: 500; cursor: pointer; }
.rtm-lainnya > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.rtm-lainnya[open] > summary { margin-bottom: 6px; }
.rtm-lipat > .rtm-strip-daftar + .rtm-lainnya > summary { margin-top: 12px; }
.rtm-lainnya > .rtm-strip-daftar { margin-top: 12px; }
@media (pointer: coarse) {
  .rtm-lainnya > summary { padding: 8px 0; }
}

/* HP */
@media (max-width: 767.98px) {
  .rtm-lini .gw-item { padding-bottom: 18px; }
  .rtm-strip { grid-template-columns: minmax(0, 1fr); }
  .rtm-segmen { border-left: 0; border-top: 1px solid var(--garis); padding: 12px 16px 14px; }
  .rtm-segmen:first-child { border-top: 0; }
  .rtm-segmen::after { right: auto; left: 22px; top: auto; bottom: -7px; margin-top: 0; transform: rotate(135deg); }
  .rtm-segmen-nilai { font-size: 18px; line-height: 24px; }
}
/* Tablet dan laptop kecil: lini masa mendatar di atas rincian */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .rtm-lini .garis-waktu { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
  .rtm-lini .gw-item { padding: 28px 0 0; }
  .rtm-lini .gw-item::before { display: block; left: 20px; right: -16px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .rtm-lini .gw-item:last-child::before { display: none; }
  .rtm-lini .gw-titik { top: 0; }
}
/* Tablet dan laptop di bawah 1280 px: tabel RTL dirapatkan agar Status dan Progres tetap terlihat */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .rtm-tabel-rtl .tabel th, .rtm-tabel-rtl .tabel td { padding-left: 8px; padding-right: 8px; }
  .rtm-tabel-rtl .rtm-sel-uraian { min-width: 150px; }
  .rtm-tabel-rtl .rtm-sel-sumber { min-width: 110px; }
  .rtm-tabel-rtl .rtm-sel-pic { min-width: 90px; }
  .rtm-tabel-rtl .meter { min-width: 72px; }
}
/* Layar lebar: lini masa di kolom kiri dan tetap terlihat saat digulir */
@media (min-width: 1200px) {
  .rtm-atas { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
  .rtm-lini { position: sticky; top: calc(var(--tinggi-topbar) + 16px); }
  .rtm-atas.rtm-memuat .rtm-lini { position: static; }
}
@media (min-width: 1280px) {
  .rtm-tabel-rtl .rtm-sel-progres .redup { white-space: nowrap; }
}
@media print {
  .rtm-rtl .bagian-aksi { display: none !important; }
  .rtm-atas { display: block; }
  .rtm-atas > .panel + .panel { margin-top: 12px; }
  .rtm-lini { position: static; }
  /* Panel panjang boleh terbagi antarhalaman; blok di dalamnya tetap utuh dan judul tidak terpisah dari isinya. */
  .rtm-rincian, .rtm-panel-rantai { break-inside: auto; page-break-inside: auto; }
  .rtm-dua > div, .rtm-keterangan, .rtm-rincian .angka-ringkas { break-inside: avoid; page-break-inside: avoid; }
  .rtm-subjudul, .rtm-rincian > .panel-kepala, .rtm-rtl > .bagian-kepala, .rtm-siklus > .bagian-kepala, .rtm-panel-rantai > .panel-kepala { break-after: avoid; page-break-after: avoid; }
  /* Lebar kertas di bawah 768 px: strip rantai dikembalikan ke tiga segmen mendatar seperti di layar lebar. */
  .rtm-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); break-inside: avoid; page-break-inside: avoid; }
  .rtm-segmen { border-top: 0; border-left: 1px solid var(--garis); padding: 10px 16px 10px 18px; }
  .rtm-segmen:first-child { border-left: 0; }
  .rtm-segmen::after { left: auto; right: -7px; top: 50%; bottom: auto; margin-top: -6px; transform: rotate(45deg); }
  .rtm-segmen-nilai { font-size: 16px; line-height: 22px; }
  /* Isi yang dilipat ikut tercetak; browser lama tetap mencetak ringkasan "N ... lainnya". */
  @supports selector(::details-content) {
    .rtm-lainnya > summary { display: none; }
    .rtm-lainnya::details-content { content-visibility: visible; }
  }
}
/* === Akhir halaman: rtm === */

/* === Halaman: lembaga === */
/* Profil Penjaminan Mutu, Berita Kegiatan, Saran dan Pengaduan, Pengguna dan Hak Akses. */

/* Ubin kontak dan kanal (profil, pengaduan) */
.lbg-ubin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.lbg-ubin-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan-2); }
.lbg-ubin-ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--merek-lembut); color: var(--merek); }
.lbg-ubin-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lbg-ubin-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta-3); }
.lbg-ubin-nilai { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; }
.lbg-ubin-nilai .redup { font-weight: 400; }

/* Profil */
.prof-sub-judul { margin: 0 0 8px; font: 600 13px/20px var(--font-isi); color: var(--tinta-2); }
.prof-sub .kosong { border: 1px dashed var(--garis-kuat); border-radius: 8px; background: var(--permukaan-2); }
.prof-vmt-kosong { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.prof-vmt-kosong > .prof-sub { display: flex; flex-direction: column; min-width: 0; }
.prof-vmt-kosong .kosong { flex: 1; }
.prof-visi { margin: 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--merek); max-width: 62ch; }
.prof-visi p { margin: 0; font: 400 20px/30px var(--font-judul); color: var(--tinta); }
.prof-kisi-dasar { align-items: start; }
.prof-daftar li { max-width: 72ch; }
.prof-info { margin: 0; }
.prof-cetak { display: none; }

/* Bagan struktur: bercabang di layar lebar, daftar berjenjang di HP */
.prof-bagan { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.pb-pohon, .pb-anak, .pb-mutu-daftar { list-style: none; margin: 0; padding: 0; }
.pb-pohon { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pb-simpul { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.pb-anak { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 24px; }
.pb-anak::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 24px; margin-left: -1px; background: var(--garis-kuat); }
.pb-tanpa-puncak > .pb-anak:first-child { margin-top: 0; }
.pb-tanpa-puncak > .pb-anak:first-child::before { display: none; }
.pb-kotak { display: flex; flex-direction: column; gap: 2px; width: min(100%, 340px); padding: 10px 16px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); text-align: center; }
.pb-jabatan { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta-3); }
.pb-nama { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta); }
.pb-kotak-pimpinan { background: var(--permukaan-2); }
.pb-kotak-utama { border-color: var(--merek); box-shadow: inset 0 3px 0 var(--merek); }
.pb-kotak-utama .pb-jabatan { color: var(--merek); }
.pb-kelompok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 12px; padding: 16px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan-2); }
.pb-kelompok.pb-kolom-1 { grid-template-columns: minmax(0, 1fr); width: min(100%, 372px); }
.pb-kelompok.pb-kolom-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 720px); }
.pb-kelompok.pb-kolom-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-kelompok > .pb-simpul { align-items: stretch; }
.pb-kelompok .pb-kotak { width: 100%; height: 100%; text-align: left; }
.pb-unit { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tinta); }
.pb-kepala { font-size: 13px; line-height: 18px; color: var(--tinta-2); }
.pb-mutu { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 28px; }
.pb-mutu::before { content: ""; position: absolute; left: 50%; top: -28px; height: 26px; margin-left: -1px; border-left: 2px dashed var(--garis-kuat); }
.pb-mutu:first-child { margin-top: 0; }
.pb-mutu:first-child::before { display: none; }
.pb-mutu-judul { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta-3); text-align: center; }
.pb-mutu-daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 720px); }
.pb-mutu-daftar > li { display: flex; min-width: 0; }
.pb-kotak-garis { width: 100%; border-style: dashed; text-align: left; }
.pb-teks { font-size: 13px; line-height: 20px; color: var(--tinta); }

/* Berita */
.ber-alat { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.ber-saring { flex: 0 1 320px; }
.ber-info { margin: 0; }
.ber-kisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--celah); }
.ber-kartu { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 20px 24px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); overflow: hidden; transition: border-color var(--durasi-cepat); }
.ber-kartu:hover { border-color: var(--garis-kuat); }
.ber-foto { display: block; width: calc(100% + 48px); max-width: none; margin: -20px -24px 4px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--permukaan-2); }
.ber-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.ber-tanggal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ber-tanggal > svg { color: var(--tinta-3); }
.ber-judul { margin: 0; font: 600 16px/24px var(--font-isi); }
.ber-judul a { color: var(--tinta); text-decoration: none; }
.ber-judul a:hover { color: var(--merek); text-decoration: underline; text-decoration-color: var(--merek-garis); }
.ber-ringkasan { margin: 0; max-width: 68ch; font-size: 14px; line-height: 22px; color: var(--tinta-2); }
.ber-lanjut { margin-top: auto; padding-top: 4px; }
.ber-kembali { font-size: 14px; }
.ber-artikel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 32px; }
.ber-artikel-judul { margin: 0; max-width: 34em; font: 700 24px/32px var(--font-judul); }
.ber-artikel-lead { margin: 0; max-width: 68ch; font-size: 16px; line-height: 26px; color: var(--tinta-2); }
.ber-artikel-foto { width: 100%; margin: 4px 0; }
.ber-artikel-foto img { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: 8px; background: var(--permukaan-2); }
.ber-artikel-isi { max-width: 68ch; padding-top: 14px; border-top: 1px solid var(--garis); }
.ber-artikel-isi p { margin: 0 0 14px; line-height: 26px; }
.ber-artikel-isi p:last-child { margin-bottom: 0; }
.ber-lain { list-style: none; margin: 0; padding: 0; }
.ber-lain li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--garis); }
.ber-lain li:first-child { border-top: 0; padding-top: 0; }
.ber-lain li:last-child { padding-bottom: 0; }
.ber-lain a { font-weight: 500; }
.ber-tidak-ada { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 16px; }

/* Saran dan pengaduan */
.pgd-info { margin: 0; }

/* Pengguna dan hak akses */
.pgn-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.pgn-ya { color: var(--baik); }
.pgn-tidak { color: var(--tinta-3); }
.pgn-kepala { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.pgn-jumlah { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta-3); }
.pgn-halaman { display: flex; flex-direction: column; gap: 2px; }
.pgn-matriks .tabel thead th { white-space: normal; min-width: 104px; }
.pgn-matriks .tabel tbody th { min-width: 200px; background: var(--permukaan); }
.pgn-matriks .tabel td { vertical-align: middle; }
.pgn-matriks .tabel thead th:first-child, .pgn-matriks .tabel tbody th { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--garis); }
.pgn-geser { display: none; }
.prof-auditor .tabel td > .redup { white-space: nowrap; }
.prof-auditor .tabel tbody th, .prof-auditor .tabel tbody td { vertical-align: middle; }

@media (min-width: 768px) {
  .lbg-ubin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prof-vmt-kosong { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Sekretaris sebagai jabatan staf: kotak di samping garis yang turun dari ketua ke bagian */
  .pb-anak.pb-staf { align-items: flex-start; margin-top: 0; padding: 16px 0 16px calc(50% + 32px); }
  .pb-anak.pb-staf::before { top: 0; height: 100%; }
  .pb-staf > .pb-simpul { position: relative; align-items: flex-start; }
  .pb-staf > .pb-simpul::before { content: ""; position: absolute; left: -32px; top: 50%; width: 32px; height: 2px; margin-top: -1px; background: var(--garis-kuat); }
  .pb-staf .pb-kotak { width: min(100%, 300px); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pb-kelompok.pb-kolom-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ber-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .lbg-ubin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lbg-ubin.lbg-kolom-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .prof-visi { padding-left: 14px; }
  .prof-visi p { font-size: 18px; line-height: 27px; }
  /* Keadaan kosong visi, misi, dan tujuan mendatar agar tidak memanjang di HP */
  .prof-sub .kosong { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; column-gap: 10px; row-gap: 2px; padding: 12px 14px; text-align: left; }
  .prof-sub .kosong-teks { flex: 1 1 0; min-width: 0; }
  .prof-sub .kosong-petunjuk { flex-basis: 100%; padding-left: 34px; }
  .prof-bagan, .pb-pohon, .pb-simpul, .pb-anak, .pb-mutu { align-items: stretch; }
  .pb-anak { width: auto; margin: 8px 0 0 10px; padding-left: 14px; border-left: 2px solid var(--garis); }
  .pb-anak::before { display: none; }
  .pb-anak > .pb-simpul { position: relative; }
  .pb-anak > .pb-simpul::before { content: ""; position: absolute; left: -14px; top: 19px; width: 10px; height: 2px; background: var(--garis); }
  .pb-kotak { width: 100%; padding: 8px 12px; text-align: left; }
  .pb-kelompok, .pb-kelompok.pb-kolom-1, .pb-kelompok.pb-kolom-2, .pb-kelompok.pb-kolom-4 { display: flex; flex-direction: column; gap: 8px; width: auto; padding: 0 0 0 14px; border: 0; border-left: 2px solid var(--garis); border-radius: 0; background: none; }
  .pb-kelompok .pb-kotak { height: auto; }
  .pb-mutu { gap: 8px; margin-top: 16px; }
  .pb-mutu::before { display: none; }
  .pb-mutu-judul { text-align: left; }
  .pb-mutu-daftar { grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
  .ber-saring { flex-basis: 100%; }
  .ber-kartu { padding: 16px; }
  .ber-foto { width: calc(100% + 32px); margin: -16px -16px 4px; }
  .ber-artikel { padding: 20px 16px; }
  .ber-artikel-judul { font-size: 20px; line-height: 28px; }
  .pgn-matriks .tabel th, .pgn-matriks .tabel td { padding-left: 8px; padding-right: 8px; }
  .pgn-matriks .tabel thead th { min-width: 84px; }
  .pgn-matriks .tabel thead th:first-child, .pgn-matriks .tabel tbody th { min-width: 128px; max-width: 128px; }
  .pgn-geser { display: flex; align-items: center; gap: 6px; margin: 0; }
}
@media (pointer: coarse) {
  .ber-lanjut, .ber-kembali { min-height: 44px; }
}
@media print {
  .pb-kotak, .lbg-ubin-item, .ber-kartu, .ber-artikel { break-inside: avoid; page-break-inside: avoid; }
  .ber-kartu { border-color: #ccc; }
  .pgn-matriks .tabel thead th:first-child, .pgn-matriks .tabel tbody th { position: static; box-shadow: none; }
  .prof-saklar, .ber-saring, .ber-lanjut, .ber-kembali, .ber-kembali-baris, .ber-panel-lain, .pgn-geser { display: none !important; }
  .prof-cetak { display: inline !important; }
}
/* === Akhir halaman: lembaga === */

/* === Halaman: standar === */
/* Dokumen SPMI (.dsp-), Monitoring Standar (.mon-), Peningkatan Standar (.pnk-) */
@keyframes std-sorot { 0%, 40% { box-shadow: 0 0 0 3px var(--merek-garis); } 100% { box-shadow: 0 0 0 3px rgba(192, 200, 218, 0); } }
.blok-standar.disorot, .pnk-kartu.disorot { animation: std-sorot 1.8s ease; }

/* Dokumen SPMI */
.dsp-saring { align-items: flex-end; }
.dsp-info { margin: 0; padding-bottom: 10px; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.dsp-dok { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dsp-judul { font-weight: 500; color: var(--tinta); }
.tabel .dsp-kol-dok { min-width: 240px; }
.tabel .dsp-kol-sk { min-width: 150px; }
.dsp-sk { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.dsp-sk-tanggal { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.dsp-revisi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dsp-tombol-riwayat { margin-left: -10px; }
.dsp-kelompok { columns: 2 440px; column-gap: var(--celah); margin-bottom: calc(-1 * var(--celah)); }
.dsp-kelompok > .panel { break-inside: avoid; page-break-inside: avoid; margin: 0 0 var(--celah); }
.dsp-lingkup { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 2px; font: 600 13px/20px var(--font-isi); color: var(--tinta-2); }
.panel-kepala + .dsp-lingkup { margin-top: 0; }
.dsp-lingkup-jumlah { font-size: 12px; font-weight: 400; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.dsp-std-daftar { list-style: none; margin: 0; padding: 0; }
.dsp-std { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--garis); }
.dsp-std-kode { line-height: 20px; }
.dsp-std-nama { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinta); }
.dsp-std-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.dsp-std-meta .tautan-panah { font-size: 13px; }

/* Monitoring Standar */
.mon-kode { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; margin-right: 8px; border-radius: 6px; background: var(--merek-lembut); color: var(--merek); font-size: 12px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.mon-ind { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mon-uraian { font-weight: 400; color: var(--tinta); }
.kb-judul .mon-uraian { font-weight: 500; }
.tabel .mon-kol-ind { min-width: 280px; }
.tabel .mon-kol-target { min-width: 96px; }
.tabel thead th.sel-sorot { color: var(--merek); }
.mon-th-tahun { display: block; font-size: 12px; line-height: 16px; font-weight: 500; }
.tabel td.mon-gabung { color: var(--tinta-3); font-size: 13px; }
.mon-tren { display: inline-flex; align-items: center; min-height: 24px; }
.mon-catatan { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 18px; font-weight: 400; color: var(--tinta-2); }
.mon-catatan li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; align-items: start; }
.mon-catatan li > svg { color: var(--tinta-3); margin-top: 2px; }
.mon-catatan-teks { min-width: 0; }
.mon-catatan-standar { margin: 0 0 14px; font-size: 13px; line-height: 20px; }
.mon-catatan-standar li > svg { margin-top: 3px; }
.kartu-baris .mon-catatan { margin-top: 10px; }
.mon-grafik-catatan { margin: 8px 0 0; }
.kb-atribut .mon-kartu-sorot { margin: -2px -6px; padding: 2px 6px; border-radius: 6px; background: var(--merek-lembut); }

/* Peningkatan Standar */
.pnk-kalimat { margin: 0; max-width: 68ch; font-size: 14px; line-height: 22px; color: var(--tinta-2); }
.pnk-daftar { display: flex; flex-direction: column; gap: 16px; }
.pnk-kartu { display: flex; flex-direction: column; gap: 14px; }
.pnk-kepala { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.pnk-kepala-teks { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.pnk-judul-baris { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pnk-id { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--merek-lembut); color: var(--merek); font-size: 12px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.pnk-judul { margin: 0; font: 600 16px/24px var(--font-isi); min-width: 0; }
.pnk-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.pnk-pisah { color: var(--tinta-3); }
.pnk-banding { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.pnk-sisi { min-width: 0; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 8px; font-size: 14px; line-height: 22px; }
.pnk-sisi p { margin: 0; }
.pnk-sebelum { background: var(--permukaan-2); color: var(--tinta-2); }
.pnk-sesudah { background: var(--permukaan); color: var(--tinta); border-color: var(--merek-garis); box-shadow: inset 3px 0 0 var(--merek); }
.pnk-label { margin: 0 0 4px; font: 600 12px/16px var(--font-isi); color: var(--tinta-3); }
.pnk-sesudah .pnk-label { color: var(--merek); }
.pnk-panah { display: flex; align-items: center; justify-content: center; color: var(--tinta-3); }
.pnk-meta { margin: 0; border-top: 1px solid var(--garis); }
.pnk-meta-baris { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--garis); }
.pnk-meta-baris:last-child { border-bottom: 0; padding-bottom: 0; }
.pnk-meta dt { font-size: 13px; line-height: 22px; color: var(--tinta-2); }
.pnk-meta dd { margin: 0; min-width: 0; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.pnk-meta .aksi-dokumen { margin-left: -8px; }
.pnk-sk-tanggal { display: block; font-size: 12px; line-height: 18px; color: var(--tinta-3); }
.pnk-bench .kb-atribut { grid-template-columns: minmax(0, 1fr); }
.tabel .pnk-kol-mitra { min-width: 170px; }
.tabel .pnk-kol-teks { min-width: 200px; }

/* Layar lebar: kolom angka monitoring selebar sama di semua blok standar agar sejajar */
@media (min-width: 1280px) {
  .mon-tabel th.mon-kol-target { width: 112px; }
  .mon-tabel th.mon-kol-ts { width: 84px; }
  .mon-tabel th.mon-kol-status { width: 132px; }
  .mon-tabel th.mon-kol-tren { width: 96px; }
  .tabel .dsp-kol-aksi .aksi-dokumen, .tabel .pnk-kol-aksi .aksi-dokumen { flex-wrap: nowrap; }
  .dsp-sk > span:first-child { white-space: nowrap; }
}
/* Tablet dan laptop kecil: tabel dirapatkan agar kolom aksi dan tahun terpilih tetap terlihat */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .dsp-tabel .tabel th, .dsp-tabel .tabel td, .mon-tabel th, .mon-tabel td, .pnk-bench .tabel th, .pnk-bench .tabel td { padding-left: 8px; padding-right: 8px; }
  .dsp-tabel .tabel thead th.dsp-kol-sk { white-space: normal; }
  .dsp-tombol-riwayat { height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; white-space: normal; text-align: left; line-height: 18px; }
  .tabel .dsp-kol-dok { min-width: 180px; }
  .tabel .dsp-kol-sk { min-width: 130px; }
  .tabel .mon-kol-ind { min-width: 180px; }
  .tabel .mon-kol-target { min-width: 0; }
  .mon-tabel thead th { white-space: normal; }
  .mon-tren .garis-mini { width: 60px; height: 20px; }
  .tabel .pnk-kol-mitra { min-width: 140px; }
  .tabel .pnk-kol-teks { min-width: 150px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tabel .dsp-kol-dok { min-width: 170px; }
  .pnk-meta-baris { grid-template-columns: 140px minmax(0, 1fr); }
}
/* HP */
@media (max-width: 767.98px) {
  .dsp-info { padding-bottom: 0; }
  .dsp-std { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; }
  .pnk-banding { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pnk-panah { height: 20px; transform: rotate(90deg); }
  .pnk-meta-baris { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pnk-judul { font-size: 15px; line-height: 22px; }
  .pnk-sub { flex-direction: column; align-items: flex-start; gap: 0; }
  .pnk-pisah { display: none; }
}
@media print {
  .dsp-kelompok { columns: 1; margin-bottom: 0; }
  .pnk-kartu, .dsp-kelompok > .panel { break-inside: avoid; page-break-inside: avoid; }
  .blok-standar.disorot, .pnk-kartu.disorot { animation: none; }
  .pnk-sesudah mark { background: #F6EBCF; }
  .tabel .dsp-kol-aksi, .tabel .pnk-kol-aksi { display: none; }
}
/* === Akhir halaman: standar === */

/* === Halaman: publik === */
/* Beranda (PUB-01), Berita (PUB-02), Dokumen SPMI publik (PUB-03), Saran dan Pengaduan (PUB-04). */

/* Kaki tetap di dasar layar pada halaman publik yang pendek */
body[data-jenis="publik"]:not([data-halaman="login"]) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body[data-jenis="publik"] > .publik-konten { flex: 1 0 auto; width: 100%; }

/* Kepala halaman, alat saring, dan keadaan kosong */
.pub-kepala { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.publik-isi > .pub-kepala { margin-bottom: -12px; }
.pub-kepala-deskripsi { margin: 0; max-width: 68ch; font-size: 16px; line-height: 26px; color: var(--tinta-2); }
.pub-alat { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.pub-alat > .isian-cari { flex: 1 1 280px; max-width: 420px; }
.pub-alat > .pub-saring { min-width: 0; }
.pub-info { margin: 0; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.pub-alat > .pub-info { padding-bottom: 8px; }
.pub-kembali { font-size: 14px; }
.pub-kosong .kosong { padding: 24px 16px; }
.pub-catatan { max-width: 72ch; }

/* Hero beranda dan lemari ordner */
.pub-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.pub-hero-teks { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.pub-hero-judul { font: 700 44px/52px var(--font-judul); letter-spacing: -.01em; max-width: 13em; }
.pub-hero-kalimat { margin: 0; max-width: 46ch; font-size: 17px; line-height: 28px; color: var(--tinta-2); }
.pub-hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pub-hero-aksi .tombol { height: 44px; padding: 0 20px; font-size: 15px; }
.pub-hero-lemari { min-width: 0; padding: 4px 16px 14px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); }
.pub-hero-lemari .lemari-isi { padding-left: 0; padding-right: 0; }
.pub-hero-lemari .lemari-keterangan { margin-top: 12px; }
/* Pelat label diperpanjang agar judul ordner terbaca utuh; ikon kunci di punggung, di atas pelat. */
.pub-hero-lemari .ordner-pelat { height: 64%; margin-top: 26px; }
.pub-hero-lemari .ordner-kunci { top: 6px; right: auto; left: 50%; transform: translateX(-50%); }
.pub-hero-lemari .ordner-lubang { bottom: 7%; }

/* Fakta mutu: satu baris bergaris */
.pub-fakta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); overflow: hidden; }
.pub-fakta-sel { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 20px; border-left: 1px solid var(--garis); }
.pub-fakta-sel:first-child { border-left: 0; }
.pub-fakta-sel dt { font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.pub-fakta-sel dd { margin: 0; }
.pub-fakta-nilai { font: 600 22px/28px var(--font-isi); color: var(--tinta); }
.pub-fakta-nilai .redup { font-size: 15px; font-weight: 500; }
.pub-fakta-catatan { font-size: 12px; line-height: 18px; color: var(--tinta-3); }

/* Lima langkah PPEPP */
.pub-ppepp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.pub-langkah { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pub-langkah::after { content: ""; position: absolute; top: 15px; left: 44px; right: -16px; height: 2px; background: var(--garis-kuat); }
.pub-langkah:last-child::after { display: none; }
.pub-langkah-nomor { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--merek); color: #fff; font-size: 14px; font-weight: 700; }
.pub-langkah-nama { margin: 4px 0 0; font: 700 18px/26px var(--font-judul); }
.pub-langkah-kalimat { margin: 0; font-size: 14px; line-height: 22px; color: var(--tinta-2); }
.pub-langkah-bukti { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--garis); font-size: 13px; line-height: 20px; color: var(--tinta); }
.pub-langkah-bukti-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tinta-3); }
.pub-ppepp-panel .sp-kembali { margin-top: 20px; }

/* Kartu berita */
.pub-berita-kisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--celah); }
.pub-kartu-berita { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 20px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); overflow: hidden; transition: border-color var(--durasi-cepat); }
.pub-kartu-berita:hover { border-color: var(--garis-kuat); }
.pub-berita-foto { display: block; width: calc(100% + 40px); max-width: none; margin: -20px -20px 4px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--permukaan-2); }
.pub-berita-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.pub-berita-tanggal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pub-berita-tanggal > svg { color: var(--tinta-3); }
.pub-berita-judul { margin: 0; font: 600 16px/24px var(--font-isi); }
.pub-berita-judul a { color: var(--tinta); text-decoration: none; }
.pub-berita-judul a:hover { color: var(--merek); text-decoration: underline; text-decoration-color: var(--merek-garis); }
.pub-berita-ringkasan { margin: 0; max-width: 68ch; font-size: 14px; line-height: 22px; color: var(--tinta-2); }
.pub-berita-lanjut { margin-top: auto; padding-top: 4px; }

/* Rincian berita */
.pub-artikel-tata { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--celah); align-items: start; }
.pub-artikel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px 40px; }
.pub-artikel-judul { margin: 0; max-width: 30em; font: 700 30px/38px var(--font-judul); }
.pub-artikel-lead { margin: 0; max-width: 68ch; font-size: 17px; line-height: 28px; color: var(--tinta-2); }
.pub-artikel-foto { width: 100%; margin: 4px 0; }
.pub-artikel-foto img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 8px; background: var(--permukaan-2); }
.pub-artikel-isi { max-width: 68ch; padding-top: 16px; border-top: 1px solid var(--garis); }
.pub-artikel-isi p { margin: 0 0 14px; font-size: 16px; line-height: 27px; }
.pub-artikel-isi p:last-child { margin-bottom: 0; }
.pub-berita-lain { list-style: none; margin: 0 0 14px; padding: 0; }
.pub-berita-lain li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--garis); }
.pub-berita-lain li:first-child { border-top: 0; padding-top: 0; }
.pub-berita-lain a { font-size: 14px; line-height: 20px; font-weight: 500; }

/* Agenda mutu */
.pub-agenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.pub-agenda-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 14px 18px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); box-shadow: inset 3px 0 0 var(--merek); }
.pub-agenda-tanggal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--merek); }
.pub-agenda-kegiatan { font-size: 14px; line-height: 21px; font-weight: 600; color: var(--tinta); }
.pub-agenda-tempat { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 20px; color: var(--tinta-2); }
.pub-agenda-tempat > svg { flex: none; margin-top: 3px; color: var(--tinta-3); }

/* Dokumen SPMI di beranda */
.pub-dok-kisi { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.pub-dok-grup { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 24px; border-top: 1px solid var(--garis); }
.pub-dok-grup:first-child { border-top: 0; }
.pub-dok-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pub-dok-judul { margin: 0; font: 700 17px/24px var(--font-judul); }
.pub-dok-jumlah { font-size: 12px; line-height: 16px; color: var(--tinta-3); white-space: nowrap; }
.pub-dok-grup .berkas-judul { overflow-wrap: anywhere; }
.pub-dok-kaki { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--garis); }

/* Tabel dokumen publik */
.pub-dok-sel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-dok-nama { font-weight: 500; color: var(--tinta); }
.tabel .pub-kol-dok { min-width: 220px; }
.tabel .pub-kol-sk { min-width: 170px; }
.tabel .pub-kol-aksi { width: 1%; white-space: nowrap; }
.tabel .pub-kol-aksi .aksi-dokumen { flex-wrap: nowrap; }
.tabel .pub-sk > :first-child { white-space: nowrap; }
.pub-sk { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.pub-sk-tanggal { font-size: 12px; line-height: 16px; color: var(--tinta-3); }

/* Ajakan ke saran dan pengaduan */
.pub-ajakan { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px 28px; border: 1px solid var(--merek-garis); border-radius: 12px; background: var(--merek-lembut); }
.pub-ajakan-ikon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--permukaan); color: var(--merek); }
.pub-ajakan-teks { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pub-ajakan-judul { margin: 0; font: 700 20px/28px var(--font-judul); }
.pub-ajakan-teks p { margin: 0; max-width: 64ch; color: var(--tinta-2); }

/* Kanal dan rekap saran dan pengaduan */
.pub-kanal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.pub-kanal-item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 16px 18px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.pub-kanal-ikon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--merek-lembut); color: var(--merek); }
.pub-kanal-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.pub-kanal-jenis { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tinta-3); }
.pub-kanal-nilai { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
a.pub-kanal-nilai { color: var(--merek); }
.pub-rekap-rentang { margin-top: 14px; }

/* Tablet ke atas */
@media (min-width: 768px) {
  .pub-berita-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-berita-tiga { grid-template-columns: minmax(0, 1fr); }
  .pub-agenda, .pub-kanal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Laptop ke atas */
@media (min-width: 1024px) {
  .pub-berita-kisi, .pub-berita-tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub-agenda { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Dokumen beranda: judul kategori di kiri, daftar dokumen di kanan */
  .pub-dok-grup { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 10px; padding: 22px 24px; }
  .pub-dok-grup > .pub-dok-kepala { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .pub-dok-grup > .daftar-berkas, .pub-dok-grup > .kosong { grid-column: 2; grid-row: 1 / span 2; }
  .pub-dok-grup > .pub-dok-kaki { grid-column: 1; grid-row: 2; align-self: start; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 0; padding-top: 0; border-top: 0; }
  .pub-artikel-tata { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
@media (min-width: 1200px) {
  .pub-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 680px); gap: 48px; }
  .pub-dok-grup .daftar-berkas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .pub-dok-grup .berkas:nth-child(2) { border-top: 0; padding-top: 0; }
}
/* Di bawah 1024 px: fakta 3 + 2, langkah PPEPP menjadi rel tegak */
@media (max-width: 1023.98px) {
  .pub-fakta { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pub-fakta-sel { grid-column: span 2; }
  .pub-fakta-sel:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--garis); }
  .pub-fakta-sel:nth-child(4) { border-left: 0; }
  .pub-ppepp { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pub-langkah { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding-bottom: 22px; }
  .pub-langkah:last-child { padding-bottom: 0; }
  .pub-langkah::after { top: 38px; bottom: 6px; left: 15px; right: auto; width: 2px; height: auto; }
  .pub-langkah-nomor { grid-row: 1 / span 3; }
  .pub-langkah > :not(.pub-langkah-nomor) { grid-column: 2; }
  .pub-langkah-nama { margin-top: 2px; }
  .pub-langkah-bukti { margin-top: 2px; padding-top: 0; border-top: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
}
/* HP */
@media (max-width: 767.98px) {
  .pub-kepala-deskripsi { font-size: 15px; line-height: 24px; }
  .pub-alat > .isian-cari, .pub-alat > .pub-saring { flex-basis: 100%; max-width: none; }
  .pub-saring .segmen { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .pub-saring .segmen-tombol { flex: none; white-space: nowrap; }
  .pub-alat > .pub-info { padding-bottom: 0; }
  .pub-hero { gap: 24px; }
  .pub-hero-judul { font-size: 32px; line-height: 40px; }
  .pub-hero-kalimat { font-size: 16px; line-height: 26px; }
  .pub-hero-aksi { width: 100%; }
  .pub-hero-aksi .tombol { flex: 1 1 auto; }
  .pub-hero-lemari { padding: 2px 12px 12px; }
  .pub-hero-lemari .ordner-pelat { height: 70%; margin-top: 20px; padding: 4px 2px 6px; gap: 4px; }
  .pub-hero-lemari .ordner-kode { font-size: 9px; line-height: 11px; }
  .pub-hero-lemari .ordner-judul { font-size: 11px; }
  .pub-hero-lemari .ordner-kunci { top: 4px; }
  .pub-hero-lemari .ordner-kunci svg { width: 12px; height: 12px; }
  .pub-hero-lemari .ordner-lubang { bottom: 5%; width: 16px; height: 16px; margin-left: -8px; }
  .pub-fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-fakta-sel, .pub-fakta-sel:nth-child(n+4) { grid-column: auto; padding: 12px 14px; border-top: 1px solid var(--garis); border-left: 1px solid var(--garis); }
  .pub-fakta-sel:first-child { grid-column: 1 / -1; border-top: 0; border-left: 0; }
  .pub-fakta-sel:nth-child(even) { border-left: 0; }
  .pub-fakta-nilai { font-size: 18px; line-height: 24px; }
  .pub-kartu-berita { padding: 16px; }
  .pub-berita-foto { width: calc(100% + 32px); margin: -16px -16px 4px; }
  .pub-artikel { padding: 20px 16px; }
  .pub-artikel-judul { font-size: 24px; line-height: 30px; }
  .pub-artikel-lead { font-size: 16px; line-height: 26px; }
  .pub-dok-grup { padding: 16px; }
  .pub-ajakan { padding: 20px 16px; }
  .pub-ajakan .tombol { width: 100%; }
}
/* Layar sentuh: target minimal 44 px */
@media (pointer: coarse) {
  .pub-berita-lanjut, .pub-kembali, .pub-dok-kaki .tautan-panah { min-height: 44px; }
}
@media print {
  .pub-hero-lemari, .pub-ajakan, .pub-saring, .pub-alat .isian-cari { display: none !important; }
  .pub-kartu-berita, .pub-agenda-item, .pub-kanal-item, .pub-langkah, .pub-dok-grup, .pub-fakta-sel, .pub-artikel { break-inside: avoid; page-break-inside: avoid; }
  .pub-kartu-berita, .pub-fakta, .pub-agenda-item, .pub-kanal-item { border-color: #ccc; }
}
/* === Akhir halaman: publik === */