/* =============================================================================
   publik.css — sistem tampilan situs publik DPMPTSP Mahakam Ulu
   =============================================================================
   Dimuat PALING AKHIR di <head> (lihat tlandingpage/partials/head.blade.php)
   supaya menang atas CSS tema tanpa menyunting berkas temanya sendiri.
   Sejajar dengan public/assets/style.css yang dipakai panel admin.

   Kenapa berkas terpisah, bukan menyunting sass/style.css atau design.css:
   keduanya milik template pihak ketiga (wpo-*) dan dipakai SELURUH halaman.
   Menyuntingnya berarti setiap perbaikan satu halaman berisiko menggeser
   halaman lain, dan tidak ada cara memisahkan mana yang "punya kita".

   -----------------------------------------------------------------------------
   Kenapa dirombak (diukur di produksi, 30 Agustus 2026)
   -----------------------------------------------------------------------------
   160 warna berbeda dipakai di permukaan publik, 15 di antaranya hijau. Tidak
   ada satu pun token; warna ditulis langsung di 68 atribut `style="..."` dan
   di 24 nilai border-radius yang berbeda. Yang membuat sebuah situs terbaca
   "template gratisan" bukan warnanya jelek satu per satu — melainkan tidak ada
   satu pun keputusan yang berlaku di lebih dari satu tempat.

   Kontras juga tidak pernah diukur: 12 dari 73 elemen teks di beranda gagal
   ambang WCAG AA 4,5:1. Tombol utamanya sendiri (putih di atas gradien
   #46A477 -> #258E41) hanya mencapai 3,07-4,33:1, dan teks badan #777 di atas
   putih 4,48:1 — lolos tinjauan mata selama bertahun-tahun, gagal saat diukur.

   ATURAN: jangan menambah warna, radius, atau bayangan baru di Blade. Kalau
   sebuah nilai belum ada tokennya, tambahkan tokennya di sini.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKEN
   -----------------------------------------------------------------------------
   Satu hijau, tiga kepekatan, satu aksen amber. Bukan selera: warna yang
   cukup gelap untuk terbaca di atas kertas akan lenyap di atas tinta, dan
   sebaliknya — jadi latar terang dan latar gelap memang butuh nilai berbeda.
   Hijau tema yang lama (#46A477) dipakai untuk dua-duanya, dan itu sebabnya
   teks putih di atasnya tidak pernah lolos ambang.

   Rasio kontras di bawah ini dihitung dengan rumus luminansi WCAG dan
   diverifikasi ulang lewat Playwright di halaman yang sudah jadi.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   0. FUTURA PT BOBOT 700
   -----------------------------------------------------------------------------
   Tema hanya menyediakan face 300/450/500/600/900 — TIDAK ADA 700. Padahal
   hampir semua judul situs ini meminta `font-weight: 700` (±44 elemen per
   halaman), dan tanpa face-nya peramban memilih tetangga TERBERAT: semuanya
   dirender Futura HEAVY 900. Terbukti lewat pengukuran lebar canvas:
   permintaan w700 menghasilkan lebar yang identik dengan w900 (358,1px),
   bukan w600 (337,8px).

   Heavy pada 13-15px menggumpal secara optis, dan ketika SEMUA judul seberat
   itu tidak ada yang menonjol. Deklarasi ini memetakan 700 -> Demi; Heavy
   disisakan eksplisit hanya untuk angka display (lihat bagian 42). */
@font-face {
    font-family: "Futura PT";
    src: url("../tlandingpage/assets/fonts/FuturaPT-Demi.woff2") format("woff2"),
         url("../tlandingpage/assets/fonts/FuturaPT-Demi.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Hijau Mahakam: pekat, sedikit condong ke biru — warna air sungai di
       bawah tudung hutan, bukan hijau daun. Sengaja BUKAN #0F5132: itu nilai
       bawaan Bootstrap ($green-800) yang muncul di ribuan situs tanpa pernah
       dipilih siapa pun. Putih di atasnya 10,3:1 (AAA). */
    --mhu-hijau: #0b4a33;
    --mhu-hijau-tua: #07321f;    /* tekan/hover */
    --mhu-hijau-samar: #e8f1ec;  /* isian tipis, pita seksi */
    /* Hijau muda HANYA untuk sorot kecil di atas tinta (mis. tautan yang
       sedang disentuh). Jangan di atas putih: 2,2:1, tidak terbaca. */
    --mhu-hijau-terang: #34c77b;

    /* Aksen amber — satu-satunya warna hangat di situs ini, dan satu-satunya
       hiasan yang dibiarkan. Dua nilai karena satu warna tidak bisa melayani
       dua latar:
         --mhu-amber      di atas tinta  8,0:1  (garis, label, ikon)
         --mhu-amber-tua  di atas kertas 4,8:1  (lolos AA, jadi boleh untuk teks)
       Memakai yang terang di atas kertas hanya mencapai 2,2:1 — itulah
       kesalahan yang membuat aksen emas terlihat murah di kebanyakan situs. */
    --mhu-amber: #d9a441;
    --mhu-amber-tua: #96692a;

    --mhu-tinta: #10171c;        /* bilah atas, kaki halaman */
    /* Teks badan: abu sangat gelap (10,4:1), bukan #777 (4,48:1) dan bukan
       hitam murni + opacity — transparansi diwarisi seluruh anak, sehingga
       <strong> dan tautan ikut pudar justru di tempat yang ingin ditegaskan. */
    --mhu-teks: #37414a;
    --mhu-teks-lemah: #66727c;   /* 4,9:1 — masih lolos AA */
    --mhu-garis: #e1e7e3;
    --mhu-kertas: #ffffff;
    --mhu-kertas-lembut: #f6f8f7;

    /* Satu radius, bukan 24. Pil 999px hanya untuk tombol dan cip. */
    --mhu-radius: 14px;
    --mhu-radius-kecil: 10px;

    /* Bayangan berjenjang: makin tinggi elemennya, makin lembut sebarannya.
       Berwarna hijau-dingin, bukan hitam netral, supaya menyatu dengan palet. */
    --mhu-bayang: 0 1px 2px rgba(16, 40, 28, .05), 0 2px 8px rgba(16, 40, 28, .05);
    --mhu-bayang-naik: 0 6px 24px rgba(16, 40, 28, .1);

    /* Lebar wadah 1280px, bukan 1180 dan bukan 100%.
       Dua batas yang berbeda dan sama-sama nyata:
         - Terlalu sempit di layar 1440px+ membuat halaman terlihat seperti
           kolom yang tersisa setelah sesuatu dihapus.
         - Selebar layar membuat baris teks mencapai 180 karakter di monitor
           27 inci; mata kehilangan awal baris berikutnya jauh sebelum itu.
       Jalan keluarnya bukan memilih salah satu, melainkan MEMISAHKAN
       keduanya: kisi kartu dan seksi memakai lebar wadah, sementara badan
       tulisan tetap dijepit --mhu-lebar-baca berapa pun lebar layarnya. */
    --mhu-wadah: 1280px;
    --mhu-lebar-baca: 68ch;

    --mhu-huruf-judul: 'Futura PT', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mhu-huruf: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mhu-huruf-baca: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* -----------------------------------------------------------------------------
   2. DASAR
   -------------------------------------------------------------------------- */

body {
    font-family: var(--mhu-huruf);
    color: var(--mhu-teks);
    background: var(--mhu-kertas-lembut);
}

/* Tema menetapkan #777 untuk seluruh paragraf (4,48:1 — di bawah ambang).
   Diperbaiki di sumbernya, bukan per halaman. */
body p,
.wpo-blog-content p,
.blog-sidebar p {
    color: var(--mhu-teks);
}

.text-muted {
    color: var(--mhu-teks-lemah) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mhu-huruf-judul);
    color: var(--mhu-tinta);
    letter-spacing: -.015em;
}

/* Fokus papan ketik harus TERLIHAT. Tema tidak memberi gaya fokus sama sekali,
   sehingga menelusuri situs dengan Tab berarti menebak posisi sendiri. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mhu-hijau);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Lompat-ke-isi untuk pengguna papan ketik dan pembaca layar: bilah atas situs
   ini punya belasan tautan menu yang harus dilewati satu per satu tanpa ini. */
.mhu-lompat {
    position: absolute;
    left: -9999px;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--mhu-tinta);
    color: #fff;
    border-radius: 0 0 var(--mhu-radius-kecil) 0;
    text-decoration: none;
}

.mhu-lompat:focus {
    left: 0;
    top: 0;
    color: #fff;
}

/* -----------------------------------------------------------------------------
   3. PRIMITIF TATA LETAK
   -----------------------------------------------------------------------------
   Dipakai bersama seluruh halaman supaya satu situs terasa satu situs.
   -------------------------------------------------------------------------- */

.mhu-wadah {
    width: 100%;
    max-width: var(--mhu-wadah);
    margin-inline: auto;
    padding-inline: 20px;
}

/* Ritme vertikal dirapatkan 30 Agustus 2026. Nilai sebelumnya
   (clamp 40-76px) membuat setiap seksi berdiri sendiri-sendiri dengan ruang
   selebar setengah layar di antaranya — pengunjung harus menggulir tiga kali
   untuk melewati beranda yang isinya sebenarnya sedikit. Situs layanan publik
   dinilai dari seberapa cepat orang menemukan yang dicarinya, bukan dari
   seberapa lapang halamannya. */
.mhu-seksi {
    padding-block: clamp(28px, 3.5vw, 48px);
}

.mhu-seksi--lembut {
    background: var(--mhu-kertas-lembut);
}

.mhu-seksi--samar {
    background: var(--mhu-hijau-samar);
}

/* Kepala seksi — lihat components/kepala-halaman.blade.php */
.mhu-kepala {
    max-width: 720px;
    margin-bottom: clamp(18px, 2.5vw, 26px);
}

.mhu-kepala--tengah {
    margin-inline: auto;
    text-align: center;
}

.mhu-kepala__eyebrow {
    font-family: var(--mhu-huruf);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mhu-hijau);
    margin: 0 0 10px;
}

.mhu-kepala__judul {
    font-family: var(--mhu-huruf-judul);
    font-weight: 700;
    /* Plafon 2,4rem (36px), bukan 1,75rem. Sebelumnya teks hidup terbesar di
       seluruh situs hanya 26px — sama besar dengan brand footer — sehingga
       halaman terbaca rapi tapi kecil nyali. Tangga 45/36/26/16 punya
       lompatan yang terasa; 26/21/16 tidak. */
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    line-height: 1.18;
    color: var(--mhu-tinta);
    margin: 0;
}

/* Garis amber pendek di bawah judul. Satu-satunya hiasan di kepala seksi —
   menggantikan garis hijau ganda bawaan tema yang panjangnya berbeda-beda
   di tiap halaman. */
.mhu-kepala__judul::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--mhu-amber-tua);
}

.mhu-kepala--tengah .mhu-kepala__judul::after {
    margin-inline: auto;
}

.mhu-kepala__lead {
    margin: 10px 0 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--mhu-teks-lemah);
    max-width: var(--mhu-lebar-baca);
}

.mhu-kepala--tengah .mhu-kepala__lead {
    margin-inline: auto;
}

/* Kisi kartu. Jumlah kolom DITENTUKAN, bukan diserahkan ke auto-fill: dengan
   1/2/3 kolom yang pasti, jumlah kartu per halaman tinggal dipilih kelipatan 6
   dan baris terakhir tidak pernah menyisakan satu kartu sendirian. */
.mhu-kisi {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .mhu-kisi { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .mhu-kisi { grid-template-columns: repeat(3, 1fr); }
    .mhu-kisi--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -----------------------------------------------------------------------------
   4. TOMBOL
   -------------------------------------------------------------------------- */

.mhu-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--mhu-huruf);
    font-size: .9375rem;
    font-weight: 600;
    /* Tinggi minimum 44px: ambang sasaran sentuh iOS/Android. Tombol tema
       tingginya 36px dan tautan sosial 24px — terukur meleset saat ditekan
       dengan jempol. */
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid var(--mhu-garis);
    background: var(--mhu-kertas);
    color: var(--mhu-tinta);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.mhu-tombol:hover {
    border-color: var(--mhu-hijau);
    color: var(--mhu-hijau-tua);
    background: var(--mhu-hijau-samar);
}

.mhu-tombol--utama,
.mhu-tombol--utama:visited {
    background: var(--mhu-hijau);
    border-color: var(--mhu-hijau);
    color: #fff;
}

.mhu-tombol--utama:hover {
    background: var(--mhu-hijau-tua);
    border-color: var(--mhu-hijau-tua);
    color: #fff;
}

.mhu-tombol--kecil {
    min-height: 38px;
    padding: 8px 16px;
    font-size: .875rem;
}

/* -----------------------------------------------------------------------------
   5. KARTU
   -------------------------------------------------------------------------- */

.mhu-kartu {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    overflow: hidden;
    box-shadow: var(--mhu-bayang);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mhu-kartu:hover {
    transform: translateY(-3px);
    box-shadow: var(--mhu-bayang-naik);
    border-color: #cdd9d2;
}

.mhu-kartu__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--mhu-kertas-lembut);
    overflow: hidden;
}

.mhu-kartu__media img,
.mhu-kartu__media .mhu-gambar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mhu-kartu--potret .mhu-kartu__media {
    aspect-ratio: 4 / 5;
}

.mhu-kartu__isi {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.mhu-kartu__meta {
    font-size: .8125rem;
    color: var(--mhu-teks-lemah);
    margin: 0 0 8px;
}

.mhu-kartu__judul {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px;
}

.mhu-kartu__judul a {
    color: var(--mhu-tinta);
    text-decoration: none;
}

.mhu-kartu__judul a:hover {
    color: var(--mhu-hijau);
}

.mhu-kartu__cuplikan {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--mhu-teks-lemah);
    margin: 0;
    /* Rata kiri, JANGAN justify: tanpa hyphenation ia membentuk sungai spasi
       yang justru memperlambat baca. Sepuluh tempat memakai justify. */
    text-align: left;
}

.mhu-kartu__kaki {
    margin-top: auto;
    padding-top: 16px;
}

/* Penanda ditaruh DI ATAS GAMBAR, bukan di badan kartu: penanda yang hanya
   dimiliki sebagian kartu menambah satu baris pada kartu itu saja, dan
   judulnya turun ~30px sementara tetangganya tidak. */
.mhu-kartu__penanda {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(16, 23, 28, .82);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* Kartu yang seluruhnya bisa diklik dirender sebagai <button>, bukan <div>
   dengan handler. Peramban memberi gratis: bisa dijangkau Tab, bisa ditekan
   Spasi/Enter, dan diumumkan sebagai tombol oleh pembaca layar. Yang perlu
   dinetralkan hanya gaya bawaan tombolnya. */
.mhu-kartu--tombol {
    padding: 0;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   5b. SOROT (dialog foto — personalia, prestasi, galeri)
   -------------------------------------------------------------------------- */

.mhu-sorot {
    border: 0;
    padding: 0;
    max-width: min(860px, calc(100vw - 32px));
    width: 100%;
    background: transparent;
    overflow: visible;
}

.mhu-sorot::backdrop {
    background: rgba(10, 18, 14, .72);
    backdrop-filter: blur(3px);
}

.mhu-sorot__isi {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--mhu-kertas);
    border-radius: var(--mhu-radius);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

@media (min-width: 768px) {
    .mhu-sorot__isi {
        grid-template-columns: 5fr 7fr;
    }
}

.mhu-sorot__gambar {
    width: 100%;
    height: 100%;
    /* Di ponsel kotaknya menumpuk ke atas, jadi tingginya dibatasi supaya
       foto potret tidak mendorong nama dan jabatan keluar layar. */
    max-height: 46vh;
    object-fit: cover;
    background: var(--mhu-kertas-lembut);
    display: block;
}

@media (min-width: 768px) {
    .mhu-sorot__gambar {
        max-height: 70vh;
    }
}

.mhu-sorot__teks {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mhu-sorot__nama {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--mhu-tinta);
}

.mhu-sorot__keterangan {
    margin: 0;
    color: var(--mhu-teks-lemah) !important;
    line-height: 1.6;
}

.mhu-sorot__tutup {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 23, 28, .6);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.mhu-sorot__tutup:hover {
    background: rgba(16, 23, 28, .85);
}

/* -----------------------------------------------------------------------------
   6. KEADAAN KOSONG
   -----------------------------------------------------------------------------
   Lihat components/kosong.blade.php untuk alasannya.
   -------------------------------------------------------------------------- */

.mhu-kosong {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    padding: clamp(40px, 7vw, 72px) 24px;
    background: var(--mhu-kertas);
    border: 1px dashed var(--mhu-garis);
    border-radius: var(--mhu-radius);
}

.mhu-kosong__ikon {
    display: block;
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 18px;
    color: var(--mhu-hijau);
    opacity: .55;
}

.mhu-kosong__judul {
    font-family: var(--mhu-huruf-judul);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--mhu-tinta);
    margin: 0 0 8px;
}

.mhu-kosong__pesan {
    max-width: 46ch;
    margin: 0 auto;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--mhu-teks-lemah) !important;
}

.mhu-kosong__aksi {
    margin-top: 22px;
}

/* -----------------------------------------------------------------------------
   7. PITA ATAS (pengumuman + pengunjung + sosial)
   -----------------------------------------------------------------------------
   Sebelumnya #2F7C47 — hijau menengah yang tidak sama dengan hijau mana pun
   di halaman, dan teks putih di atasnya hanya 4,0:1.
   -------------------------------------------------------------------------- */

.mhu-pita {
    /* Hijau brand, bukan tinta. Riset banding 7 situs DPMPTSP: penutup dan
       bingkai berwarna BRAND (footer hijau Jabar, oranye Jakarta) terbaca
       sebagai identitas; yang hitam terbaca sebagai kegelapan. Tinta kini
       hanya untuk pita judul subhalaman. */
    background: var(--mhu-hijau);
    color: rgba(255, 255, 255, .85);
    font-size: .8125rem;
}

.mhu-pita a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.mhu-pita a:hover,
.mhu-pita a:focus-visible {
    color: var(--mhu-amber);
}

/* Satu baris: kabar di kiri, alat di kanan. Di ponsel keduanya menurun dan
   pengumumannya didahulukan. */
.mhu-pita__baris {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    min-height: 44px;
    padding-block: 6px;
}

.mhu-pita__kabar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    /* min-width:0 WAJIB agar elipsis pada anaknya bekerja: butir flex menolak
       menyusut di bawah lebar isinya tanpa ini, dan judul panjang mendorong
       blok kanan keluar dari layar alih-alih terpotong. */
    min-width: 0;
    flex: 1 1 320px;
}

.mhu-pita__label {
    flex-shrink: 0;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--mhu-amber);
    color: var(--mhu-tinta);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Satu baris, dipotong elipsis. Judul pengumuman dinas bisa sangat panjang
   ("Pengawasan dan Pemantauan Perusahaan Perkebunan Kelapa Sawit yang
   Beroperasi di Kabupaten Mahakam Ulu"); membiarkannya membungkus akan
   menggandakan tinggi pita di halaman mana pun. */
.mhu-pita__judul {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff !important;
    font-weight: 600;
}

.mhu-pita__judul:hover {
    color: var(--mhu-amber) !important;
    text-decoration: underline;
}

.mhu-pita__semua {
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--mhu-amber) !important;
}

.mhu-pita__alat {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mhu-pita__pengunjung {
    margin-right: 8px;
    white-space: nowrap;
}

.mhu-pita__pengunjung i {
    color: var(--mhu-amber);
    margin-right: 4px;
}

.mhu-pita__pengunjung strong {
    color: #fff;
}

.mhu-pita__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Sasaran sentuh 36px di pita (bukan 44) supaya pita tidak menebal;
       ikonnya bukan aksi utama halaman dan selalu punya padanan di kaki
       halaman yang memakai 44px penuh. */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: .9375rem;
    transition: background .18s ease, color .18s ease;
}

.mhu-pita__ikon:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--mhu-amber);
}

@media (max-width: 575.98px) {
    /* Angka pengunjung dibuang di layar sempit: ia paling tidak penting di
       antara isi pita, dan mempertahankannya memaksa judul pengumuman
       menyusut sampai tinggal dua kata. */
    .mhu-pita__pengunjung {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   8. BILAH NAVIGASI
   -----------------------------------------------------------------------------
   Bilah menu tema memakai `.bg-success` Bootstrap (#198754) di dalam kotak
   putih. Diganti hijau institusional, dan tautan aktifnya ditandai dengan
   permukaan sendiri — bukan hanya `fw-bold`, yang praktis tidak terlihat.
   -------------------------------------------------------------------------- */

/* Hijau HANYA di desktop. Di bawah 992px `.navigation-holder` bukan lagi
   bilah — tema mengubahnya jadi laci melayang setinggi layar dengan latarnya
   sendiri; mewarnainya hijau di sana membuat laci sewarna dengan bilah dan
   batas antara keduanya hilang. */
@media (min-width: 992px) {
    .wpo-site-header .navigation-holder {
        background: transparent !important;
        border-radius: var(--mhu-radius-kecil);
    }
}

/* Pemisah tipis sebelum kelompok survei di bilah menu. */
@media (min-width: 992px) {
    .navigation-holder > ul > li.mhu-nav__pisah {
        margin-left: 10px;
        padding-left: 12px;
        border-left: 1px solid rgba(255, 255, 255, .18);
    }
}

.navigation-holder > ul > li > a {
    color: rgba(255, 255, 255, .88) !important;
    font-family: var(--mhu-huruf);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .01em;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease;
}

.navigation-holder > ul > li > a:hover,
.navigation-holder > ul > li > a:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
}

.navigation-holder > ul > li.active > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .16);
}

/* Dropdown desktop: kartu putih dengan bayangan, bukan kotak siku. */
@media (min-width: 992px) {
    .navigation-holder .sub-menu {
        border: 1px solid var(--mhu-garis);
        border-radius: var(--mhu-radius-kecil);
        box-shadow: var(--mhu-bayang-naik);

        /* JANGAN pasang `overflow: hidden` di sini.
           Pernah ada, untuk merapikan latar hover pada sudut membulat, dan
           akibatnya seluruh sub menu tingkat 3 hilang dari situs — 23 menu.
           Sub menu tingkat 3 duduk di `left: 100%`, artinya SEPENUHNYA di luar
           kotak induknya, jadi klip induk memotongnya habis. Gejalanya menipu:
           menunya tetap `visibility: visible`, `opacity: 1`, dan punya kotak
           berukuran penuh — hanya tidak pernah tergambar. Semua pengukuran
           lewat JS bilang menunya terbuka.
           Sudutnya sekarang dirapikan dengan cara yang tidak memotong apa pun:
           butirnya diberi jarak 6px dari tepi kartu dan radiusnya sendiri,
           sehingga latar hover tidak pernah menyentuh sudut membulat itu. */
        padding: 6px;
    }

    /* Latar hover berupa pil yang masuk ke dalam, bukan pita selebar kartu.
       Inilah yang menggantikan tugas `overflow: hidden` di atas. */
    .navigation-holder .sub-menu li a {
        border-radius: 6px;
    }

    .navigation-holder .sub-menu li a {
        color: var(--mhu-teks) !important;
        font-size: .875rem;
        /* Tema memaksa HURUF BESAR SEMUA pada sub menu. Nama layanan perizinan
           di sini panjang-panjang; huruf besar semua melebarkan barisnya dan
           menghapus bentuk kata yang justru dipakai mata untuk memindai. */
        text-transform: none !important;
    }

    .navigation-holder .sub-menu li a:hover,
    .navigation-holder .sub-menu li a:focus-visible {
        background: var(--mhu-hijau-samar);
        color: var(--mhu-hijau-tua) !important;
    }

    /* Butir sub menu yang sedang dibuka.
       Tema memberinya latar #026436 — hijau pekat, salah satu dari 15 hijau
       yang beredar di situs ini — dengan asumsi teksnya putih. Aturan warna
       teks di atas (yang menyeragamkan seluruh sub menu jadi abu gelap)
       menimpanya, sehingga hasilnya abu gelap di atas hijau pekat: 1,43:1.
       Praktis tidak terbaca.
       Diganti isian tipis + teks hijau tua (8,7:1) dan rel amber di kiri —
       penanda yang sama dengan yang dipakai laci ponsel, jadi kedua ragam
       memakai bahasa yang sama. */
    .wpo-site-header .navigation-holder .sub-menu li.active > a {
        background: var(--mhu-hijau-samar) !important;
        color: var(--mhu-hijau-tua) !important;
        /* !important: tema menetapkan font-weight pada selektor yang lebih
           spesifik, sehingga deklarasi polos di sini terhitung 500 dan
           penebalannya tidak pernah terlihat. */
        font-weight: 700 !important;
        box-shadow: inset 3px 0 0 var(--mhu-amber-tua);
    }
}

/* ── Keterbacaan sub menu di laci ponsel ──────────────────────
   Tema menetapkan `.menu-item-has-children ul li a { color: black !important }`.
   Itu benar untuk dropdown desktop yang latarnya putih, tetapi di ponsel sub
   menu tidak punya latar sendiri dan duduk di atas laci gelap. Hasilnya hitam
   di atas arang — 1,6:1, praktis tidak terlihat.

   Dibatasi ke lebar yang sama dengan ambang JS tema (991px), supaya dropdown
   desktop tidak ikut berubah. */
@media (max-width: 991.98px) {

    .navigation-holder .sub-menu li a {
        color: rgba(255, 255, 255, .85) !important;
        padding-left: 1.75rem !important;
        /* Rel tipis sebagai penanda "ini milik menu di atasnya" — hierarki
           tetap terlihat bagi yang sulit membedakan warna. */
        border-left: 2px solid rgba(255, 255, 255, .18);
        /* Sasaran sentuh yang nyaman ditekan jempol. */
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navigation-holder .sub-menu li a:hover,
    .navigation-holder .sub-menu li a:focus-visible,
    .navigation-holder .sub-menu li.active > a {
        color: #fff !important;
        border-left-color: var(--mhu-hijau-terang);
        background: rgba(255, 255, 255, .06);
    }

    .navigation-holder .sub-menu li a:focus-visible {
        outline: 2px solid var(--mhu-hijau-terang);
        outline-offset: -2px;
    }

    /* Menu induk juga diberi sasaran sentuh yang sama supaya laci terasa
       konsisten saat digulir dengan jempol. */
    .navigation-holder > ul > li > a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* -----------------------------------------------------------------------------
   9. HERO BERANDA
   -----------------------------------------------------------------------------
   `design.css` memasang foto hutan (bg-web2.jpg) sebagai latar tetap di 8
   tempat, dan teks halaman duduk langsung di atasnya. Foto berdaun-daun di
   belakang paragraf membuat teks tidak terbaca dan tidak ada nilai kontras
   yang bisa dijamin, karena latarnya berbeda di setiap piksel.

   Fotonya dipertahankan — ia memang identitas Mahakam Ulu — tetapi hanya
   sebagai pita hero di bagian paling atas, dan setiap teks di atasnya diberi
   lapis gelap. Sisa halaman berlatar polos.
   -------------------------------------------------------------------------- */

.bg-web-home {
    /* Tinggi dipangkas dari 100vh: sebagai latar di belakang isi ia hanya
       perlu menutupi pita hero, bukan seluruh layar. */
    height: 420px !important;
    background-attachment: scroll !important;
}

.bg-web-home::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(10, 34, 22, .58) 0%,
                rgba(10, 34, 22, .34) 45%,
                var(--mhu-kertas-lembut) 100%);
}

/* Foto yang sama dipakai ulang sebagai tekstur seksi (item1-img .. item5-img)
   pada opacity .2 + grayscale. Di belakang kartu putih ia hanya menambah noise;
   di belakang teks ia merusak kontras. Dimatikan; permukaan seksi memakai
   token warna. */
.item1-img::after,
.item2-img::after,
.item3-img::after,
.item4-img::after,
.item5-img::after {
    background-image: none !important;
}

/* -----------------------------------------------------------------------------
   10. REMAH / KEPALA HALAMAN DALAM
   -------------------------------------------------------------------------- */

.wpo-breadcumb-area {
    position: relative;
    isolation: isolate;
    background: var(--mhu-tinta) !important;
    min-height: 0;
    padding-block: clamp(26px, 3.5vw, 44px);
}

/* FOTO DIHAPUS SAMA SEKALI.

   Pita ini dulu memasang bg-top2.jpeg — foto kerumunan orang berpakaian adat —
   sebagai latar di BELAKANG JUDUL SETIAP HALAMAN. Foto yang sama muncul di
   halaman "RENSTRA", "Kontak", "Berkas Informasi", dan "Profil Kepala Dinas".
   Sebuah gambar yang dipakai di mana-mana berhenti berarti apa pun; yang
   tersisa hanya derau di belakang teks yang sedang dibaca orang, dan kontras
   yang tidak bisa dijamin karena latarnya berbeda di setiap piksel.

   Penggantinya digambar CSS, bukan berkas: garis-garis halus sejajar seperti
   garis kontur peta. Mahakam Ulu adalah kabupaten hulu sungai berbukit yang
   sebagian besar wilayahnya hanya terjangkau lewat air — garis kontur adalah
   satu-satunya hiasan di situs ini yang benar-benar mengatakan sesuatu tentang
   tempatnya. Nol permintaan jaringan, dan kontrasnya tetap terhitung karena
   latar dasarnya satu warna padat.

   Kadarnya sengaja nyaris tak terlihat. Ia harus terbaca sebagai TEKSTUR
   kertas, bukan sebagai pola. */
.wpo-breadcumb-area::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(
            114deg,
            rgba(52, 199, 123, .05) 0 1px,
            transparent 1px 34px
        ),
        repeating-linear-gradient(
            114deg,
            rgba(52, 199, 123, .028) 0 1px,
            transparent 1px 11px
        );
}

/* Cahaya lembut dari kiri atas: memberi pita ini kedalaman tanpa menambah satu
   elemen pun, dan menjaga judul (yang rata kiri) duduk di bagian paling
   terang. */
.wpo-breadcumb-area::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        120% 140% at 12% 0%,
        rgba(52, 199, 123, .1) 0%,
        transparent 58%
    );
}

/* Garis amber tipis menutup pita — pengulangan aksen yang sama dengan garis di
   bawah judul seksi dan di kaki halaman, sehingga ketiganya terbaca sebagai
   satu bahasa, bukan tiga hiasan lepas. */
.wpo-breadcumb-area {
    border-bottom: 2px solid var(--mhu-amber);
}

.wpo-breadcumb-area h1,
.wpo-breadcumb-area h2,
.wpo-breadcumb-area .mhu-kepala__judul {
    color: #fff;
}

.wpo-breadcumb-area .mhu-kepala__eyebrow {
    color: var(--mhu-hijau-terang);
}

.wpo-breadcumb-area .mhu-kepala__lead {
    color: rgba(255, 255, 255, .78);
}

.wpo-breadcumb-area .mhu-kepala__judul::after {
    background: var(--mhu-amber);
}

/* -----------------------------------------------------------------------------
   11. WIDGET SISI
   -----------------------------------------------------------------------------
   Tiga widget ajakan memakai `bg-primary` (biru Bootstrap) dan `bg-danger`
   (merah). Merah "bahaya" untuk formulir pengaduan mengirim sinyal yang salah:
   mengadu bukan keadaan darurat, dan warna sistem seharusnya disimpan untuk
   pesan sistem. Ketiganya kini satu keluarga, dibedakan kepekatan.
   -------------------------------------------------------------------------- */

.wpo-contact-widget,
.wpo-contact-widget.bg-primary,
.wpo-contact-widget.bg-danger {
    background: var(--mhu-hijau) !important;
    border-radius: var(--mhu-radius);
    padding: 26px 24px;
}

.wpo-contact-widget--tinta,
.wpo-contact-widget.bg-danger {
    background: var(--mhu-tinta) !important;
}

.wpo-contact-widget h2,
.wpo-contact-widget h3,
.wpo-contact-widget h4 {
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.35;
}

.wpo-contact-widget p {
    color: rgba(255, 255, 255, .82) !important;
    font-size: .9375rem;
}

.wpo-contact-widget a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    margin-top: 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--mhu-hijau-tua);
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
}

.wpo-contact-widget a:hover {
    background: var(--mhu-hijau-samar);
    color: var(--mhu-hijau-tua);
}

/* Kartu profil kepala dinas di sisi kanan. */
.blog-sidebar .about-widget {
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   12. JADWAL PELAYANAN
   -----------------------------------------------------------------------------
   Tema memberi tiap butir gradien hitam 95% — dua baris jam kantor di atas
   balok hitam pekat, tanpa alasan.
   -------------------------------------------------------------------------- */

.jadwal-pelayanan {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.jadwal-pelayanan li {
    background: var(--mhu-hijau-samar) !important;
    border: 1px solid var(--mhu-garis);
    border-left: 3px solid var(--mhu-hijau);
    border-radius: var(--mhu-radius-kecil);
    padding: 14px 18px;
}

.jadwal-pelayanan li h5 {
    color: var(--mhu-hijau-tua) !important;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.jadwal-pelayanan li p {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mhu-tinta);
}

/* -----------------------------------------------------------------------------
   13. ISI BERITA
   -----------------------------------------------------------------------------
   Huruf berkait untuk teks panjang, lebar baca dibatasi, dan jarak
   antar-paragraf dibuat lebih besar daripada tinggi baris — tanpa itu 30
   paragraf menempel menjadi satu tembok.
   -------------------------------------------------------------------------- */

.isi-berita {
    font-family: var(--mhu-huruf-baca);
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--mhu-teks);
    max-width: var(--mhu-lebar-baca);
    /* Rata kiri, bukan justify (lihat .mhu-kartu__cuplikan). */
    text-align: left !important;
}

.isi-berita p {
    margin: 0 0 1.35em;
}

.isi-berita h2,
.isi-berita h3,
.isi-berita h4 {
    font-family: var(--mhu-huruf-judul);
    margin: 2em 0 .6em;
    line-height: 1.3;
}

.isi-berita h2 { font-size: 1.5rem; }
.isi-berita h3 { font-size: 1.25rem; }

.isi-berita a {
    color: var(--mhu-hijau);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.isi-berita img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mhu-radius-kecil);
    margin-block: .5em 1.35em;
}

.isi-berita blockquote {
    margin: 1.75em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--mhu-amber);
    font-style: italic;
    color: var(--mhu-teks-lemah);
}

/* Tabel di dalam isi berita ikut bisa digulir sendiri, supaya tabel lebar
   tidak memaksa seluruh halaman bergeser mendatar di ponsel. */
.isi-berita table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* -----------------------------------------------------------------------------
   14. KAKI HALAMAN
   -------------------------------------------------------------------------- */

.wpo-site-footer {
    /* Hijau brand — lihat catatan .mhu-pita. */
    background: var(--mhu-hijau) !important;
    color: rgba(255, 255, 255, .8);
}

.wpo-site-footer .widget-title h3,
.wpo-site-footer h3 {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
}

/* Garis amber tipis di bawah judul kolom — pengulangan aksen yang sama
   dengan kepala seksi, supaya kaki halaman terbaca sebagai bagian situs yang
   sama, bukan blok yang ditempel. */
.wpo-site-footer .widget-title h3::after {
    content: '';
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--mhu-amber);
}

.wpo-site-footer p,
.wpo-site-footer li,
.wpo-site-footer a {
    color: rgba(255, 255, 255, .74) !important;
    font-size: .9375rem;
}

.wpo-site-footer a:hover,
.wpo-site-footer a:focus-visible {
    color: var(--mhu-hijau-terang) !important;
}

/* Tautan media sosial: 24px tinggi, di bawah ambang sentuh. */
.wpo-site-footer .social-widget li a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.wpo-lower-footer {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.wpo-lower-footer .copyright {
    color: rgba(255, 255, 255, .6) !important;
    font-size: .875rem;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   15. MENJINAKKAN KELAS BOOTSTRAP TEMA
   -----------------------------------------------------------------------------
   Tombol di situs ini memakai lima kelas berbeda untuk maksud yang sama
   (`btn-success`, `btn-primary`, `theme-btn`, `btn-outline-primary`,
   `btn-outline-secondary`). Semuanya diarahkan ke satu keluarga warna, jadi
   markup lama tidak perlu diubah baris per baris untuk ikut rapi.
   -------------------------------------------------------------------------- */

.btn-success,
.btn-primary,
.theme-btn,
a.theme-btn {
    background: var(--mhu-hijau) !important;
    border-color: var(--mhu-hijau) !important;
    color: #fff !important;
    border-radius: 999px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-weight: 600;
    box-shadow: none !important;
}

.btn-success:hover,
.btn-primary:hover,
.theme-btn:hover,
a.theme-btn:hover {
    background: var(--mhu-hijau-tua) !important;
    border-color: var(--mhu-hijau-tua) !important;
    color: #fff !important;
}

.btn-sm {
    min-height: 38px;
    padding: 7px 16px;
    font-size: .875rem;
}

.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--mhu-garis) !important;
    color: var(--mhu-tinta) !important;
    background: transparent !important;
    border-radius: 999px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    border-color: var(--mhu-hijau) !important;
    color: var(--mhu-hijau-tua) !important;
    background: var(--mhu-hijau-samar) !important;
}

.btn-secondary {
    background: var(--mhu-kertas-lembut) !important;
    border-color: var(--mhu-garis) !important;
    color: var(--mhu-tinta) !important;
    border-radius: 999px;
    min-height: 44px;
}

/* `text-success` / `text-primary` dipakai sebagai warna judul di kartu survei;
   biru Bootstrap di sana adalah satu-satunya biru di seluruh halaman. */
.text-success { color: var(--mhu-hijau) !important; }
.text-primary { color: var(--mhu-hijau) !important; }
.text-warning { color: var(--mhu-amber) !important; }
.text-info    { color: var(--mhu-amber) !important; }

.bg-light { background: var(--mhu-kertas-lembut) !important; }

/* Radius kartu Bootstrap disamakan dengan token. */
.card,
.rounded,
.rounded-3,
.rounded-4 {
    border-radius: var(--mhu-radius) !important;
}

.card {
    border-color: var(--mhu-garis) !important;
}

.shadow-sm { box-shadow: var(--mhu-bayang) !important; }
.shadow    { box-shadow: var(--mhu-bayang-naik) !important; }

/* Pagination */
.page-link {
    color: var(--mhu-tinta);
    border-color: var(--mhu-garis);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-item.active .page-link {
    background: var(--mhu-hijau);
    border-color: var(--mhu-hijau);
    color: #fff;
}

.page-link:hover {
    background: var(--mhu-hijau-samar);
    color: var(--mhu-hijau-tua);
    border-color: var(--mhu-garis);
}

/* -----------------------------------------------------------------------------
   16. PELAYANAN KAMI (carousel)
   -------------------------------------------------------------------------- */

.wpo-breacking-news {
    background: var(--mhu-tinta) !important;
}

.wpo-breacking-news .b-title span {
    background: var(--mhu-amber) !important;
    color: var(--mhu-tinta) !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .75rem;
    padding: 7px 14px;
    border-radius: 999px;
}

.wpo-breacking-item {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--mhu-radius);
    padding: 16px;
    height: 100%;
}

.wpo-breacking-item h3 {
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
}

.wpo-breacking-item p {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .875rem;
    /* Tanpa batas ini deskripsi layanan sepanjang satu paragraf memaksa kartu
       carousel tumbuh berbeda-beda tinggi. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   17. TABEL
   -----------------------------------------------------------------------------
   Dua tabel publik (kontak, penilaian SIPP) tidak dibungkus .table-responsive
   dan memaksa halaman bergeser mendatar di ponsel. Pembungkusnya ditambahkan
   di Blade; gaya isinya di sini.
   -------------------------------------------------------------------------- */

.mhu-tabel {
    width: 100%;
    border-collapse: collapse;
    background: var(--mhu-kertas);
    border-radius: var(--mhu-radius);
    overflow: hidden;
}

.mhu-tabel th,
.mhu-tabel td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mhu-garis);
    text-align: left;
    vertical-align: top;
    font-size: .9375rem;
}

.mhu-tabel thead th {
    background: var(--mhu-hijau-samar);
    color: var(--mhu-hijau-tua);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom-color: var(--mhu-garis);
}

.mhu-tabel tbody tr:last-child td {
    border-bottom: 0;
}

.table-responsive {
    border-radius: var(--mhu-radius);
}

/* -----------------------------------------------------------------------------
   18. GERAK
   -----------------------------------------------------------------------------
   AOS dipakai dengan enam arah berbeda dan `delay` bertingkat sampai ~1,1 detik
   pada kartu terakhir — isi baru muncul lama setelah halaman siap, dan pada
   koneksi lambat pengunjung sempat melihat halaman kosong dua kali.

   Arahnya diseragamkan (satu arah, naik) lewat markup; di sini yang dijamin
   adalah batas atasnya, dan penghormatan pada prefers-reduced-motion —
   animasi bergerak bisa memicu mual dan migrain, dan AOS tidak memeriksanya
   sendiri.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* AOS menyembunyikan elemen dengan opacity:0 sampai animasinya jalan.
       Kalau animasinya dimatikan tanpa ini, isinya tidak pernah muncul. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    .mhu-jalan__isi {
        animation: none;
        padding-left: 0;
    }
}

/* -----------------------------------------------------------------------------
   19. RESPONSIF
   -------------------------------------------------------------------------- */

/* Gambar tidak boleh melebihi wadahnya, apa pun atribut width/height-nya. */
img {
    max-width: 100%;
    height: auto;
}

/* Kecuali yang memang diisi penuh ke dalam kotak berukuran tetap. */
.mhu-kartu__media img,
.mhu-kartu__media .mhu-gambar {
    height: 100%;
}

@media (max-width: 767.98px) {

    .mhu-kepala__judul {
        font-size: clamp(1.4rem, 1.1rem + 2vw, 1.9rem);
    }

    .isi-berita {
        font-size: 1.0625rem;
    }

    /* Navigasi berita sebelum/sesudah: dua kolom 50% berdampingan memaksa
       judul panjang menjadi tiang satu kata per baris di layar sempit. */
    .more-posts {
        flex-direction: column;
    }

    .more-posts .previous-post,
    .more-posts .next-post {
        width: 100% !important;
        text-align: left !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .more-posts .next-post {
        padding-top: 16px !important;
        border-top: 1px solid var(--mhu-garis) !important;
    }
}

/* -----------------------------------------------------------------------------
   20. BERANDA
   -----------------------------------------------------------------------------
   Kelas khusus beranda. Semuanya menarik nilai dari token di bagian 1; tidak
   ada satu pun warna atau radius baru di sini.
   -------------------------------------------------------------------------- */

.mhu-hero__panel {
    background: var(--mhu-kertas);
    border-radius: var(--mhu-radius);
    padding: 14px;
    box-shadow: var(--mhu-bayang-naik);
}

.mhu-hero__panel .wpo-hero-slider,
.mhu-hero__panel .swiper-container,
.mhu-hero__panel .slide-inner {
    border-radius: var(--mhu-radius-kecil);
    overflow: hidden;
}

/* ── Baris aksi ──────────────────────────────────────────────
   Empat hal yang benar-benar bisa DIKERJAKAN pengunjung. Menggantikan tiga
   widget berwarna di sidebar yang dulu terkubur di bawah lipatan. */
.mhu-aksi {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
}

@media (min-width: 576px) {
    .mhu-aksi { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .mhu-aksi { grid-template-columns: repeat(4, 1fr); }
}

.mhu-aksi__butir {
    display: block;
    padding: 20px 22px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    box-shadow: var(--mhu-bayang);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mhu-aksi__butir:hover,
.mhu-aksi__butir:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--mhu-bayang-naik);
    border-color: var(--mhu-hijau);
}

.mhu-aksi__butir > i {
    display: block;
    font-size: 1.375rem;
    color: var(--mhu-hijau);
    margin-bottom: 12px;
}

.mhu-aksi__judul {
    display: block;
    font-family: var(--mhu-huruf-judul);
    font-weight: 700;
    font-size: 1rem;
    color: var(--mhu-tinta);
    margin-bottom: 4px;
}

.mhu-aksi__ket {
    display: block;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mhu-teks-lemah);
}

/* ── Kartu layanan ─────────────────────────────────────────── */
.mhu-kartu--layanan .mhu-kartu__lambang {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: var(--mhu-radius-kecil);
    background: var(--mhu-hijau-samar);
    overflow: hidden;
}

.mhu-kartu--layanan .mhu-kartu__lambang img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* Tautan bergaya "lanjut" di kaki kartu — bukan tombol, supaya tidak bersaing
   dengan aksi utama halaman. */
.mhu-tautan {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--mhu-hijau);
}

.mhu-kartu:hover .mhu-tautan i {
    transform: translateX(3px);
}

.mhu-tautan i {
    transition: transform .18s ease;
}

.mhu-seksi__lanjut {
    margin: clamp(24px, 4vw, 36px) 0 0;
    text-align: center;
}

/* ── Jadwal pelayanan ──────────────────────────────────────── */
.mhu-jadwal {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 44px);
    align-items: center;
}

@media (min-width: 992px) {
    .mhu-jadwal { grid-template-columns: 5fr 6fr; }
}

.mhu-jadwal__gambar img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--mhu-radius);
    box-shadow: var(--mhu-bayang-naik);
}

.mhu-jadwal__teks .mhu-kepala__lead {
    margin-bottom: 22px;
}

.mhu-jadwal__alamat {
    display: flex;
    gap: 10px;
    margin: 18px 0 22px;
    font-size: .9375rem;
    color: var(--mhu-teks) !important;
}

.mhu-jadwal__alamat i {
    color: var(--mhu-hijau);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Judul di dalam butir jadwal dulu <h5>; kini <h3> supaya tingkat judul
   halaman tidak melompat (h2 -> h5), yang membuat daftar judul pembaca layar
   tampak berlubang. Ukurannya tetap kecil, diatur di sini. */
.jadwal-pelayanan li h3 {
    color: var(--mhu-hijau-tua);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 4px;
}

/* ── Kartu nilai survei ────────────────────────────────────── */
.mhu-nilai {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 760px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .mhu-nilai { grid-template-columns: repeat(2, 1fr); }
}

.mhu-nilai__kartu {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 30px 26px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    box-shadow: var(--mhu-bayang);
}

.mhu-nilai__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mhu-teks-lemah) !important;
    margin: 0 0 10px;
}

/* Huruf mutu sebagai angka besar. Satu-satunya tempat di situs ini yang
   memakai ukuran sebesar ini — itulah yang membuatnya terbaca sebagai nilai,
   bukan sebagai judul. */
.mhu-nilai__angka {
    font-family: var(--mhu-huruf-judul);
    font-size: clamp(3rem, 2rem + 4vw, 4.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--mhu-hijau);
    margin: 0 0 12px;
}

.mhu-nilai__ket {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--mhu-tinta) !important;
}

.mhu-nilai__periode {
    margin: 0;
    font-size: .875rem;
    color: var(--mhu-teks-lemah) !important;
}

.mhu-nilai__periode a {
    color: var(--mhu-hijau);
}

.mhu-nilai__aksi {
    margin-top: 22px;
    align-self: center;
}

/* ── Seksi bertinta ────────────────────────────────────────── */
.mhu-seksi--tinta {
    background: var(--mhu-tinta);
    color: rgba(255, 255, 255, .8);
}

.mhu-seksi--tinta .mhu-kepala__judul,
.mhu-seksi--tinta h2,
.mhu-seksi--tinta h3 {
    color: #fff;
}

.mhu-seksi--tinta .mhu-kepala__eyebrow {
    color: var(--mhu-amber);
}

.mhu-seksi--tinta .mhu-kepala__judul::after {
    background: var(--mhu-amber);
}

.mhu-seksi--tinta p,
.mhu-seksi--tinta li {
    color: rgba(255, 255, 255, .8) !important;
}

.mhu-seksi--tinta .mhu-tombol {
    background: transparent;
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.mhu-seksi--tinta .mhu-tombol:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* ── Profil & kepala dinas ─────────────────────────────────── */
.mhu-profil {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

@media (min-width: 768px) {
    .mhu-profil { grid-template-columns: minmax(190px, 260px) 1fr; }
}

.mhu-profil__kadis {
    margin: 0;
    text-align: center;
}

.mhu-profil__kadis img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--mhu-radius);
    /* Cincin amber tipis: satu-satunya hiasan di seksi ini, dan pengulangan
       aksen yang sama dengan garis di bawah judul seksi. */
    outline: 1px solid rgba(217, 164, 65, .45);
    outline-offset: 6px;
}

.mhu-profil__kadis figcaption {
    margin-top: 22px;
    line-height: 1.5;
}

.mhu-profil__kadis strong {
    display: block;
    color: #fff;
    font-family: var(--mhu-huruf-judul);
    font-size: 1.0625rem;
}

.mhu-profil__kadis span {
    display: block;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .62);
}

.mhu-profil__isi {
    margin-top: 18px;
    max-width: var(--mhu-lebar-baca);
    line-height: 1.7;
}

.mhu-profil__tautan {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* ── Tautan cepat ──────────────────────────────────────────── */
.mhu-tautan-cepat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 4vw, 44px);
}

.mhu-tautan-cepat a {
    display: block;
    /* Ukuran dibatasi: logo mitra datang dengan lebar apa saja, dan tanpa
       batas ini satu berkas besar mendominasi barisnya sendirian. */
    max-width: 170px;
    /* Abu-abu sampai disentuh — deretan logo berwarna-warni menarik perhatian
       lebih besar daripada perannya di halaman ini. */
    filter: grayscale(1);
    opacity: .72;
    transition: filter .2s ease, opacity .2s ease;
}

.mhu-tautan-cepat a:hover,
.mhu-tautan-cepat a:focus-visible {
    filter: none;
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   21. HALAMAN BACA (detail berita & pengumuman)
   -------------------------------------------------------------------------- */

.mhu-baca {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
}

@media (min-width: 992px) {
    .mhu-baca { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

.mhu-baca__utama {
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    padding: clamp(20px, 3vw, 34px);
    box-shadow: var(--mhu-bayang);
    /* minmax(0,...) di atas + ini: tanpa keduanya, satu <pre> atau tabel lebar
       di dalam isi berita melebarkan kolom kisi dan mendorong sidebar keluar
       layar, bukannya menggulir di dalam kotaknya sendiri. */
    min-width: 0;
}

.mhu-baca__gambar {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--mhu-radius-kecil);
    margin-bottom: 20px;
}

.mhu-baca__sisi {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.mhu-panel {
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    padding: 20px 22px;
    box-shadow: var(--mhu-bayang);
}

.mhu-panel__judul {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mhu-garis);
}

.mhu-panel__kosong {
    margin: 0;
    font-size: .875rem;
    color: var(--mhu-teks-lemah) !important;
}

/* Butir ringkas di panel samping. */
.mhu-ringkas {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--mhu-garis);
    text-decoration: none;
    color: var(--mhu-tinta);
    font-size: .875rem;
    line-height: 1.45;
    font-weight: 600;
    /* Sasaran sentuh: butir ini dulu setinggi 50px gambar saja. */
    min-height: 44px;
}

.mhu-ringkas:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mhu-ringkas:hover {
    color: var(--mhu-hijau);
}

.mhu-ringkas__gambar {
    width: 68px;
    height: 50px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    background: var(--mhu-kertas-lembut);
}

.mhu-ringkas small {
    display: block;
    font-weight: 400;
    color: var(--mhu-teks-lemah);
    margin-bottom: 2px;
}

/* Remah roti di pita gelap. */
.mhu-remah {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .58);
}

.mhu-remah a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.mhu-remah a:hover {
    color: var(--mhu-amber);
}

/* Navigasi berita sebelum/sesudah. */
.more-posts {
    display: flex;
    gap: 20px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--mhu-garis);
}

.more-posts > div {
    flex: 1;
    min-width: 0;
}

.more-posts .next-post {
    text-align: right;
}

.more-posts a {
    text-decoration: none;
    color: var(--mhu-tinta);
    display: block;
}

.more-posts a:hover strong {
    color: var(--mhu-hijau);
}

.more-posts strong {
    display: block;
    font-size: .9375rem;
    line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   22. PENCARIAN
   -------------------------------------------------------------------------- */

.mhu-cari {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: 999px;
    padding: 5px 6px 5px 18px;
}

.mhu-cari:focus-within {
    border-color: var(--mhu-hijau);
    box-shadow: 0 0 0 3px rgba(11, 74, 51, .12);
}

.mhu-cari--lebar {
    max-width: 460px;
    margin: 0 0 26px;
}

.mhu-cari input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--mhu-huruf);
    font-size: .9375rem;
    color: var(--mhu-tinta);
    padding: 9px 0;
}

.mhu-cari input::placeholder {
    color: var(--mhu-teks-lemah);
}

.mhu-cari button {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--mhu-hijau);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.mhu-cari button:hover {
    background: var(--mhu-hijau-tua);
}

.mhu-hasil {
    margin: 0 0 22px;
    font-size: .9375rem;
    color: var(--mhu-teks-lemah) !important;
}

.mhu-hasil a {
    color: var(--mhu-hijau);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   23. KONTAK
   -------------------------------------------------------------------------- */

.mhu-kontak {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
}

@media (min-width: 992px) {
    .mhu-kontak { grid-template-columns: 1fr 1fr; }
}

.mhu-kontak__daftar {
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--mhu-bayang);
}

/* Daftar fakta sebagai <dl>, bukan <table>. Ini pasangan istilah-dan-nilai,
   bukan data dua dimensi — dan sebagai tabel ia memaksa lebar kolom tetap
   (`width="150"`) yang memotong label di layar sempit. */
.mhu-fakta {
    margin: 0 0 26px;
}

.mhu-fakta__baris {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mhu-garis);
}

@media (min-width: 576px) {
    .mhu-fakta__baris {
        grid-template-columns: 170px 1fr;
        gap: 16px;
    }
}

.mhu-fakta__baris:first-child { padding-top: 0; }
.mhu-fakta__baris:last-child { border-bottom: 0; padding-bottom: 0; }

.mhu-fakta dt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: .875rem;
    color: var(--mhu-tinta);
}

/* Satu warna untuk semua ikon. Sebelumnya tiap baris memakai warna Bootstrap
   berbeda (merah, biru, hijau, kuning, abu) tanpa arti apa pun — tujuh warna
   dalam satu daftar tujuh baris. */
.mhu-fakta dt i {
    color: var(--mhu-hijau);
    font-size: 1rem;
}

.mhu-fakta dd {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--mhu-teks);
}

.mhu-fakta dd a {
    color: var(--mhu-hijau);
    font-weight: 600;
}

.mhu-fakta__ket {
    color: var(--mhu-teks-lemah);
    font-size: .8125rem;
}

.mhu-kontak__peta {
    border-radius: var(--mhu-radius);
    overflow: hidden;
    box-shadow: var(--mhu-bayang);
    background: var(--mhu-kertas);
}

.mhu-kontak__peta iframe {
    display: block;
    width: 100%;
    /* Rasio, bukan tinggi tetap: peta setinggi 400px di layar 360px lebar
       memakan seluruh layar, dan di layar lebar ia jadi pita tipis. */
    aspect-ratio: 4 / 3;
    border: 0;
}

/* -----------------------------------------------------------------------------
   24. TABEL DOKUMEN & PENILAIAN
   -------------------------------------------------------------------------- */

.mhu-tabel__nowrap { white-space: nowrap; }

.mhu-tabel__kosong {
    font-size: .875rem;
    color: var(--mhu-teks-lemah);
}

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

/* Huruf mutu sebagai lencana — nilai, bukan sekadar sel teks. */
.mhu-mutu {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mhu-hijau-samar);
    color: var(--mhu-hijau-tua);
    font-weight: 700;
    font-size: .875rem;
}

.mhu-catatan {
    margin: 22px 0 0;
    font-size: .875rem;
    color: var(--mhu-teks-lemah) !important;
}

.mhu-catatan a {
    color: var(--mhu-hijau);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   25. FORMULIR PUBLIK (pengaduan & SIPP)
   -----------------------------------------------------------------------------
   Gaya isian ditata lewat SELEKTOR TIPE di dalam .mhu-formulir__kotak, bukan
   kelas per kolom. Sebelumnya tiap kolom membawa kelasnya sendiri (`fs-09`,
   `bd-035`, `py-2`) dan yang lupa memakainya jadi kolom bertinggi berbeda di
   dalam satu baris yang sama.
   -------------------------------------------------------------------------- */

.mhu-formulir {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
    align-items: start;
}

@media (min-width: 992px) {
    .mhu-formulir { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

.mhu-formulir__kotak {
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    padding: clamp(22px, 3.5vw, 38px);
    box-shadow: var(--mhu-bayang);
    min-width: 0;
}

.mhu-formulir--tunggal {
    max-width: 860px;
    margin-inline: auto;
}

.mhu-formulir__sisi {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.mhu-formulir__baris {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media (min-width: 640px) {
    .mhu-formulir__baris--dua { grid-template-columns: repeat(2, 1fr); }
    .mhu-formulir__baris--tiga { grid-template-columns: repeat(3, 1fr); }
}

.mhu-formulir__kirim {
    width: 100%;
    margin-top: 8px;
}

.mhu-formulir__janji {
    margin: 14px 0 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--mhu-teks-lemah) !important;
}

/* ── Satu kolom isian ─────────────────────────────────────── */
.mhu-bidang {
    min-width: 0;
}

.mhu-bidang__label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--mhu-tinta);
    margin-bottom: 6px;
}

.mhu-bidang__wajib {
    color: #b42318;
    margin-left: 2px;
}

.mhu-bidang__opsional {
    margin-left: 6px;
    font-weight: 400;
    font-size: .75rem;
    color: var(--mhu-teks-lemah);
}

.mhu-bidang__petunjuk {
    margin: 0 0 8px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mhu-teks-lemah) !important;
}

.mhu-formulir__kotak input[type="text"],
.mhu-formulir__kotak input[type="tel"],
.mhu-formulir__kotak input[type="email"],
.mhu-formulir__kotak input[type="number"],
.mhu-formulir__kotak input[type="date"],
.mhu-formulir__kotak input[type="search"],
.mhu-formulir__kotak input[type="file"],
.mhu-formulir__kotak select,
.mhu-formulir__kotak textarea {
    display: block;
    width: 100%;
    /* 16px minimum. Di bawah itu Safari iOS MEMBESARKAN seluruh halaman saat
       kolom disentuh, dan tata letaknya tidak pernah kembali. */
    font-size: 1rem;
    font-family: var(--mhu-huruf);
    color: var(--mhu-tinta);
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    padding: 11px 14px;
    min-height: 46px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.mhu-formulir__kotak textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.6;
}

.mhu-formulir__kotak input:focus,
.mhu-formulir__kotak select:focus,
.mhu-formulir__kotak textarea:focus {
    outline: 0;
    border-color: var(--mhu-hijau);
    box-shadow: 0 0 0 3px rgba(11, 74, 51, .12);
}

.mhu-formulir__kotak input[readonly] {
    background: var(--mhu-kertas-lembut);
    color: var(--mhu-teks-lemah);
}

.mhu-formulir__kotak ::placeholder {
    color: var(--mhu-teks-lemah);
}

.mhu-bidang--ralat input,
.mhu-bidang--ralat select,
.mhu-bidang--ralat textarea {
    border-color: #b42318;
}

.mhu-bidang__ralat {
    margin: 6px 0 0;
    font-size: .8125rem;
    font-weight: 600;
    color: #b42318 !important;
}

/* ── Rangkuman kesalahan ──────────────────────────────────── */
.mhu-ralat {
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid #f3c4bf;
    border-left: 3px solid #b42318;
    border-radius: var(--mhu-radius-kecil);
    background: #fef4f3;
}

.mhu-ralat:focus {
    outline: 2px solid #b42318;
    outline-offset: 2px;
}

.mhu-ralat__judul {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-weight: 700;
    color: #912018 !important;
}

.mhu-ralat ul {
    margin: 0;
    padding-left: 20px;
    font-size: .875rem;
    color: #912018;
}

/* ── Kelompok isian ───────────────────────────────────────── */
.mhu-set {
    border: 0;
    padding: 0;
    margin: 0 0 34px;
}

.mhu-set__judul {
    float: none;
    width: 100%;
    font-family: var(--mhu-huruf-judul);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mhu-tinta);
    padding: 0 0 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--mhu-garis);
}

.mhu-nilai-set {
    border: 0;
    padding: 0;
    margin: 0 0 24px;
}

.mhu-nilai-set__tanya {
    float: none;
    width: 100%;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mhu-teks);
    padding: 0;
    margin-bottom: 10px;
}

/* ── Skala penilaian 1–5 ──────────────────────────────────── */
.mhu-skala {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.mhu-skala__butir input {
    /* Disembunyikan secara visual, TIDAK dengan display:none — kolom yang
       di-display:none tidak bisa difokus papan ketik dan tidak ikut divalidasi
       peramban. */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.mhu-skala__butir label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    /* Sasaran sentuh penuh. */
    min-height: 72px;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    background: var(--mhu-kertas);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.mhu-skala__butir label:hover {
    border-color: var(--mhu-hijau);
    background: var(--mhu-hijau-samar);
}

.mhu-skala__butir input:checked + label {
    border-color: var(--mhu-hijau);
    background: var(--mhu-hijau);
    color: #fff;
}

/* Fokus papan ketik harus terlihat meski input-nya disembunyikan. */
.mhu-skala__butir input:focus-visible + label {
    outline: 2px solid var(--mhu-hijau);
    outline-offset: 2px;
}

.mhu-skala__angka {
    font-family: var(--mhu-huruf-judul);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.mhu-skala__label {
    font-size: .625rem;
    line-height: 1.25;
    letter-spacing: .01em;
}

@media (max-width: 575.98px) {
    /* Di layar sempit lima kolom menyisakan ~60px per tombol; kata "Sangat
       baik" pecah jadi tiga baris. Skala dibuat menurun sebagai daftar. */
    .mhu-skala {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mhu-skala__butir label {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-height: 48px;
        text-align: left;
    }

    .mhu-skala__label {
        font-size: .875rem;
    }
}

/* ── Captcha ──────────────────────────────────────────────── */
.mhu-captcha {
    margin-bottom: 22px;
}

.mhu-captcha__gambar {
    margin-bottom: 10px;
}

.mhu-captcha__gambar img {
    border-radius: var(--mhu-radius-kecil);
    border: 1px solid var(--mhu-garis);
}

.mhu-captcha input {
    margin-top: 10px;
    max-width: 260px;
}

/* -----------------------------------------------------------------------------
   26. KAKI HALAMAN — TATA LETAK
   -------------------------------------------------------------------------- */

.wpo-upper-footer {
    padding-block: clamp(40px, 6vw, 68px);
}

.mhu-kaki {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
    /* Kolom pendek TIDAK diregangkan setinggi kolom terpanjang. Daftar tautan
       terkait dikelola admin dan panjangnya bisa berubah kapan saja; tanpa
       baris ini, tiga kolom lain ikut memanjang mengikutinya dan menyisakan
       ruang kosong di bawah isinya. */
    align-items: start;
}

@media (min-width: 640px) {
    .mhu-kaki { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    /* Kolom merek dua kali lebih lebar: ia memuat lambang, semboyan, dan ikon
       sosial, sementara kolom lain hanya daftar tautan pendek.

       JUMLAH KOLOM DI SINI HARUS SAMA DENGAN JUMLAH BLOK di footer.blade.php.
       Ini pernah salah: kisi disetel empat kolom sementara blok ada lima,
       sehingga blok kelima terlempar ke baris kedua dan menyisakan lubang
       selebar tiga kolom di sebelahnya. Lubang itu baru muncul setelah kolom
       "Tautan terkait" terisi — sebelumnya blok itu tidak dirender sama
       sekali karena tabelnya kosong, sehingga jumlahnya kebetulan pas. */
    /* Jumlah kolom datang dari Blade lewat --mhu-kaki-kolom, karena blok
       "Tautan terkait" hanya dirender kalau tabelnya berisi. Angka tetap di
       sini adalah yang dulu membuat lubangnya. Nilai cadangan 3 dipakai
       kalau properti itu hilang. */
    .mhu-kaki { grid-template-columns: 1.7fr repeat(var(--mhu-kaki-kolom, 3), 1fr); }
}

.mhu-kaki__logo {
    display: inline-block;
    margin-bottom: 16px;
}

.mhu-kaki__logo img {
    height: 72px;
    width: auto;
}

.mhu-kaki__slogan {
    margin: 0 0 20px;
    max-width: 34ch;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74) !important;
}

.mhu-kaki__sosial {
    display: flex;
    gap: 10px;
}

.mhu-kaki__sosial a {
    display: grid;
    place-items: center;
    /* 44px: sasaran sentuh. Ikon sosial di kaki halaman lama tingginya 24px. */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .8) !important;
    font-size: 1rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.mhu-kaki__sosial a:hover,
.mhu-kaki__sosial a:focus-visible {
    background: var(--mhu-hijau);
    border-color: var(--mhu-hijau);
    color: #fff !important;
}

.mhu-kaki__kolom h2 {
    font-family: var(--mhu-huruf-judul);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.mhu-kaki__kolom h2::after {
    content: '';
    display: block;
    width: 34px;
    height: 2px;
    margin: 10px 0 16px;
    border-radius: 999px;
    background: var(--mhu-amber);
}

.mhu-kaki__kolom ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mhu-kaki__kolom li {
    margin-bottom: 4px;
}

.mhu-kaki__kolom a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Sasaran sentuh; tautan kaki halaman lama setinggi 20px. */
    min-height: 40px;
    text-decoration: none;
}

.mhu-kaki__alamat {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74) !important;
}

.mhu-kaki__alamat i {
    margin-top: 4px;
    flex-shrink: 0;
    color: var(--mhu-amber);
}

.wpo-lower-footer {
    padding-block: 18px;
}

/* -----------------------------------------------------------------------------
   27. PERBAIKAN SESUDAH TINJAUAN VISUAL
   -------------------------------------------------------------------------- */

/* Foto kepala dinas adalah PNG berlatar TRANSPARAN — potongan sosok tanpa
   latar. Di atas seksi bertinta ia lenyap sama sekali; yang terlihat hanya
   cincin amber mengelilingi kotak kosong. Diberi permukaan terang sendiri,
   sekaligus membuatnya terbaca sebagai potret resmi, bukan tempelan. */
.mhu-profil__kadis img {
    background: linear-gradient(180deg, var(--mhu-kertas-lembut), #e6ece8);
}

/* Kartu layanan tanpa `link` tidak punya baris "Buka layanan", sehingga
   tingginya berbeda dari tetangganya di baris yang sama. Kaki kartu diberi
   ruang tetap supaya alas seluruh kartu sejajar. */
.mhu-kartu--layanan .mhu-kartu__isi {
    min-height: 178px;
}

/* Teks lemah dirancang untuk latar PUTIH (4,9:1). Di atas pita hijau samar
   #E8F1EC ia turun ke 4,28:1 — di bawah ambang. Di permukaan bertint, teks
   sekunder memakai warna teks penuh. */
.mhu-seksi--samar .mhu-kepala__lead,
.mhu-seksi--samar .text-muted,
.mhu-seksi--samar .mhu-kartu__cuplikan {
    color: var(--mhu-teks) !important;
}

/* -----------------------------------------------------------------------------
   28. MUNCUL SAAT TERGULIR
   -----------------------------------------------------------------------------
   Pengganti AOS. Kelas `.mhu-muncul` dipasang oleh JS, BUKAN ditulis di markup:
   dengan begitu, kalau skripnya gagal dimuat atau IntersectionObserver tidak
   ada, elemennya tetap terlihat apa adanya. AOS melakukan kebalikannya —
   `opacity: 0` datang dari CSS-nya, sehingga CDN yang gagal berarti halaman
   kosong.

   Satu arah dan satu durasi untuk seluruh situs. Enam arah berbeda dengan jeda
   bertingkat membuat halaman terasa gelisah, dan pada koneksi lambat isi baru
   muncul lebih dari satu detik setelah halaman sebenarnya siap.
   -------------------------------------------------------------------------- */

.mhu-muncul {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.mhu-muncul--tampil {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mhu-muncul {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
   28. MUNCUL SAAT TERGULIR
   -----------------------------------------------------------------------------
   Pengganti AOS. Kelas `.mhu-muncul` dipasang oleh JS, BUKAN ditulis di markup:
   dengan begitu, kalau skripnya gagal dimuat atau IntersectionObserver tidak
   ada, elemennya tetap terlihat apa adanya. AOS melakukan kebalikannya —
   `opacity: 0` datang dari CSS-nya, sehingga CDN yang gagal berarti halaman
   kosong.

   Satu arah dan satu durasi untuk seluruh situs. Enam arah berbeda dengan jeda
   bertingkat membuat halaman terasa gelisah, dan pada koneksi lambat isi baru
   muncul lebih dari satu detik setelah halaman sebenarnya siap.
   -------------------------------------------------------------------------- */

.mhu-muncul {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.mhu-muncul--tampil {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mhu-muncul {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
   28. MUNCUL SAAT TERGULIR
   -----------------------------------------------------------------------------
   Pengganti AOS. Kelas `.mhu-muncul` dipasang oleh JS, BUKAN ditulis di markup:
   dengan begitu, kalau skripnya gagal dimuat atau IntersectionObserver tidak
   ada, elemennya tetap terlihat apa adanya. AOS melakukan kebalikannya —
   `opacity: 0` datang dari CSS-nya, sehingga CDN yang gagal berarti halaman
   kosong.

   Satu arah dan satu durasi untuk seluruh situs. Enam arah berbeda dengan jeda
   bertingkat membuat halaman terasa gelisah, dan pada koneksi lambat isi baru
   muncul lebih dari satu detik setelah halaman sebenarnya siap.
   -------------------------------------------------------------------------- */

.mhu-muncul {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.mhu-muncul--tampil {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mhu-muncul {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
   28. MUNCUL SAAT TERGULIR
   -----------------------------------------------------------------------------
   Pengganti AOS. Kelas `.mhu-muncul` dipasang oleh JS, BUKAN ditulis di markup:
   dengan begitu, kalau skripnya gagal dimuat atau IntersectionObserver tidak
   ada, elemennya tetap terlihat apa adanya. AOS melakukan kebalikannya —
   `opacity: 0` datang dari CSS-nya, sehingga CDN yang gagal berarti halaman
   kosong.

   Satu arah dan satu durasi untuk seluruh situs. Enam arah berbeda dengan jeda
   bertingkat membuat halaman terasa gelisah, dan pada koneksi lambat isi baru
   muncul lebih dari satu detik setelah halaman sebenarnya siap.
   -------------------------------------------------------------------------- */

.mhu-muncul {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.mhu-muncul--tampil {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mhu-muncul {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* -----------------------------------------------------------------------------
   28. MUNCUL SAAT TERGULIR
   -----------------------------------------------------------------------------
   Pengganti AOS. Kelas `.mhu-muncul` dipasang oleh JS, BUKAN ditulis di markup:
   dengan begitu, kalau skripnya gagal dimuat atau IntersectionObserver tidak
   ada, elemennya tetap terlihat apa adanya. AOS melakukan kebalikannya —
   `opacity: 0` datang dari CSS-nya, sehingga CDN yang gagal berarti halaman
   kosong.

   Satu arah dan satu durasi untuk seluruh situs. Enam arah berbeda dengan jeda
   bertingkat membuat halaman terasa gelisah, dan pada koneksi lambat isi baru
   muncul lebih dari satu detik setelah halaman sebenarnya siap.
   -------------------------------------------------------------------------- */

.mhu-muncul {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.mhu-muncul--tampil {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mhu-muncul {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Kepala situs menempel, lalu MENGGULUNG jadi bilah tipis.

   Dua hal yang harus diselesaikan bersamaan:

   1. `position: sticky` hanya berlaku selama KOTAK INDUKNYA masih terlihat.
      Memasangnya pada pita navigasi saja tidak pernah bekerja: induknya adalah
      <nav> yang tingginya hanya setinggi bilah itu sendiri, jadi ia langsung
      ikut tergulir hilang. Terukur: pitanya di top -670px pada gulir 800px.
      Yang harus lengket adalah <header>-nya.

   2. Tapi seluruh kepala situs setinggi ~180px — memakukan itu di puncak layar
      berarti membuang seperlima layar sepanjang halaman. Karena itu pita
      pengumuman dan pita identitas DIGULUNG begitu halaman digulir, menyisakan
      bilah navigasi setinggi 44px. Di puncak halaman semuanya kembali utuh.

   Kelas penanda dipasang IntersectionObserver lewat sentinel 1px (lihat
   partials/scripts.blade.php), bukan penangan scroll — penangan scroll
   berjalan puluhan kali per detik dan itulah yang membuat bilah lengket
   terasa tersendat di perangkat lambat.

   Hanya desktop: di ponsel navigasinya laci melayang, dan mengunci wadahnya
   akan mengunci laci itu juga. */
/* ⛔ Bekas eksperimen "kepala situs lengket lalu menggulung" DIBUANG dari
   sini (pembukanya sempat tertinggal saat pembersihan, sehingga ~1.500 baris
   sesudah titik ini terperangkap di dalam @media min-width:992px — seluruh
   aturan ponsel di bawahnya mati, dan .wpo-site-header ikut menjadi sticky).
   Mekanisme lengket yang berlaku sekarang ada di AKHIR berkas ini, pada
   .mhu-pita-nav saja. */


/* -----------------------------------------------------------------------------
   28. MUNCUL SAAT TERGULIR
   -----------------------------------------------------------------------------
   Pengganti AOS. Kelas `.mhu-muncul` dipasang oleh JS, BUKAN ditulis di markup:
   dengan begitu, kalau skripnya gagal dimuat atau IntersectionObserver tidak
   ada, elemennya tetap terlihat apa adanya. AOS melakukan kebalikannya —
   `opacity: 0` datang dari CSS-nya, sehingga CDN yang gagal berarti halaman
   kosong.

   Satu arah dan satu durasi untuk seluruh situs. Enam arah berbeda dengan jeda
   bertingkat membuat halaman terasa gelisah, dan pada koneksi lambat isi baru
   muncul lebih dari satu detik setelah halaman sebenarnya siap.
   -------------------------------------------------------------------------- */

.mhu-muncul {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.mhu-muncul--tampil {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mhu-muncul {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
   29. PROFIL KEPALA DINAS
   -------------------------------------------------------------------------- */

.mhu-kadis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    overflow: hidden;
    box-shadow: var(--mhu-bayang);
}

@media (min-width: 768px) {
    .mhu-kadis { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.mhu-kadis__potret {
    position: relative;
    background: var(--mhu-hijau);
}

.mhu-kadis__potret img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Nama dan jabatan sebagai pita di kaki foto, bukan kotak melayang berlatar
   hitam 30% dengan text-shadow. Bayangan teks di atas foto adalah cara menutupi
   kontras yang tidak terukur; pita padat memberi angka yang bisa dipastikan. */
.mhu-kadis__nama {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px 22px 18px;
    background: linear-gradient(180deg, rgba(7, 50, 31, 0), rgba(7, 50, 31, .92) 55%);
    color: #fff;
}

.mhu-kadis__nama strong {
    display: block;
    font-family: var(--mhu-huruf-judul);
    font-size: 1.1875rem;
    line-height: 1.3;
}

.mhu-kadis__nama span {
    display: block;
    margin-top: 4px;
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
}

.mhu-kadis__biodata {
    padding: clamp(22px, 3.5vw, 36px);
    min-width: 0;
}

/* Isi riwayat datang dari editor: daftar <ul>/<ol> panjang di dalam kartu. */
.mhu-riwayat ul,
.mhu-riwayat ol {
    margin: 0;
    padding-left: 20px;
}

.mhu-riwayat li {
    margin-bottom: 6px;
}

.mhu-riwayat p:last-child {
    margin-bottom: 0;
}

/* Ikon di dalam lambang kartu (kartu riwayat memakai ikon, bukan gambar). */
.mhu-kartu__lambang i {
    font-size: 1.25rem;
    color: var(--mhu-hijau);
}

.mhu-lampiran {
    margin: 28px 0 0;
}

/* -----------------------------------------------------------------------------
   30. HALAMAN DOKUMEN (halaman_menu)
   -----------------------------------------------------------------------------
   Kartu baca tunggal, dibatasi lebar baca. Menggantikan ~190 baris CSS yang
   ditanam di dalam Blade halaman itu sendiri, lengkap dengan hijau keenam dan
   ketujuh milik situs ini.
   -------------------------------------------------------------------------- */

.mhu-dokumen {
    max-width: 860px;
    margin-inline: auto;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    padding: clamp(24px, 4vw, 52px);
    box-shadow: var(--mhu-bayang);
}

/* Badan tulisan dibatasi lebar baca, tapi gambar dan lampiran boleh selebar
   kartunya — gambar sempit di tengah kartu lebar terlihat seperti salah muat. */
.mhu-dokumen .isi-berita {
    max-width: none;
}

.mhu-dokumen .isi-berita > p,
.mhu-dokumen .isi-berita > ul,
.mhu-dokumen .isi-berita > ol,
.mhu-dokumen .isi-berita > h2,
.mhu-dokumen .isi-berita > h3,
.mhu-dokumen .isi-berita > h4,
.mhu-dokumen .isi-berita > blockquote {
    max-width: var(--mhu-lebar-baca);
}

.mhu-dokumen__gambar {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--mhu-radius-kecil);
    margin-bottom: 32px;
}

/* Tabel di dalam isi dari editor. Tanpa gaya, tabel keluaran TinyMCE muncul
   tanpa garis sama sekali dan kolomnya tidak bisa dibedakan. */
.isi-berita table {
    border-collapse: collapse;
    margin: 1.75em 0;
    font-size: .9375rem;
    font-family: var(--mhu-huruf);
}

.isi-berita th,
.isi-berita td {
    border: 1px solid var(--mhu-garis);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.isi-berita th {
    background: var(--mhu-hijau-samar);
    color: var(--mhu-hijau-tua);
    font-weight: 700;
}

/* ── Kotak ajakan (bagan organisasi, tautan luar) ──────────── */
.mhu-ajakan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 32px 0 0;
    padding: 22px 24px;
    background: var(--mhu-hijau-samar);
    border: 1px solid var(--mhu-garis);
    border-left: 3px solid var(--mhu-hijau);
    border-radius: var(--mhu-radius-kecil);
}

.mhu-ajakan__judul {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mhu-tinta);
}

.mhu-ajakan__ket {
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
    /* Di atas pita bertint, teks lemah hanya 4,28:1 — pakai teks penuh. */
    color: var(--mhu-teks) !important;
    max-width: 52ch;
}

/* Modal bagan memakai token yang sama dengan kartu situs. */
.modal-content {
    border: 0;
    border-radius: var(--mhu-radius);
}

.modal-header,
.modal-footer {
    border-color: var(--mhu-garis);
}

.modal-footer {
    gap: 10px;
}

/* -----------------------------------------------------------------------------
   31. PENAMPIL PDF
   -----------------------------------------------------------------------------
   Komponen <x-dokumen-pdf> memakai kelas .dokumen-pdf__* yang TIDAK PERNAH
   punya CSS di mana pun — jadi <object>-nya dirender apa adanya oleh peramban,
   lengkap dengan bingkai bawaan, dan kartu ponselnya tampil sebagai teks lepas.
   -------------------------------------------------------------------------- */

.dokumen-pdf {
    margin-top: 32px;
}

.dokumen-pdf__pratinjau {
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    overflow: hidden;
    background: var(--mhu-kertas-lembut);
    /* resize:vertical + tinggi awal: dokumen 60 halaman butuh ruang, tapi
       memaksanya setinggi layar mengubur sisa halaman. */
    resize: vertical;
    height: 70vh;
    min-height: 320px;
}

.dokumen-pdf__pratinjau object {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.dokumen-pdf__gagal {
    display: grid;
    place-items: center;
    gap: 6px;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
    color: var(--mhu-teks-lemah);
}

.dokumen-pdf__gagal i {
    font-size: 2rem;
    color: var(--mhu-hijau);
    opacity: .6;
}

.dokumen-pdf__petunjuk {
    margin: 10px 0 0;
    font-size: .8125rem;
    color: var(--mhu-teks-lemah) !important;
}

.dokumen-pdf__kartu {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    background: var(--mhu-hijau-samar);
    border: 1px solid var(--mhu-garis);
    border-left: 3px solid var(--mhu-hijau);
    border-radius: var(--mhu-radius-kecil);
}

.dokumen-pdf__kartu > i {
    font-size: 1.5rem;
    color: var(--mhu-hijau);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Kepala di dalam pita gelap tidak butuh margin bawah: pita itu sendiri sudah
   punya padding. Keduanya bertumpuk menyisakan ~100px ruang kosong di bawah
   kalimat pengantar, dan pitanya terlihat seperti gagal memuat sesuatu. */
.wpo-breadcumb-area .mhu-kepala {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   32. SATU GUTTER UNTUK SELURUH HALAMAN
   -----------------------------------------------------------------------------
   Sebelum 30 Agustus 2026 ada TIGA lebar berbeda dalam satu halaman:

       kartu bilah atas ..... 1140px  (.container milik tema)
       pita judul ........... selebar layar
       isi halaman .......... 1280px  (.mhu-wadah)

   Akibatnya tepi kiri navigasi tidak pernah sejajar dengan tepi kiri judul
   maupun kartu isi — mata langsung menangkapnya sebagai "ada yang bergeser",
   bahkan tanpa tahu apa yang salah. Markupnya sudah disamakan ke .mhu-wadah;
   yang tersisa di sini adalah padding 10px milik tema pada <header>, yang
   membuat pita gelap berhenti 10px sebelum tepi layar dan melayang alih-alih
   menempel. */
.wpo-site-header {
    padding-inline: 0;
}


/* -----------------------------------------------------------------------------
   33. KEPALA SITUS (identitas + pencarian + navigasi)
   -----------------------------------------------------------------------------
   Disusun ulang 30 Agustus 2026. Yang diperbaiki, semuanya terukur di layar
   1440px sebelum perubahan:

     * Daftar menu mulai di x=247 sementara bilah hijaunya mulai di x=127 —
       120px hijau kosong di sebelah kiri "BERANDA", karena tema memasang
       `justify-content: center` pada daftarnya. Akibatnya tepi kiri navigasi
       tidak pernah sejajar dengan logo di atasnya maupun judul di bawahnya.
     * Kotak cari memakai 380px lebar untuk menampilkan SATU ikon kaca
       pembesar; kolom isiannya baru muncul setelah satu klik tambahan.
     * Lambang dirender 260x35px — gambarnya terentang melebar karena diberi
       lebar tanpa batas tinggi.
   -------------------------------------------------------------------------- */

/* Pita identitas: selebar layar, isinya dijepit .mhu-wadah.

   ⛔ JANGAN mengembalikan `border-radius` + `overflow: hidden` di sini.
   Keduanya dipakai sebelumnya untuk membuat kepala situs tampak seperti kartu,
   dan menimbulkan dua masalah sekaligus:

     1. Kartu putih bersudut membulat yang terjepit di antara pita pengumuman
        gelap dan pita judul gelap terbaca sebagai pulau yang lepas dari
        halaman, bukan sebagai kepala situs.
     2. `overflow: hidden` MEMOTONG dropdown menu — sub menu adalah
        `position: absolute` di dalam kotak ini. Terukur: sub menu "Profil"
        benar-benar dirender (220x291px, 7 butir, opacity 1) tetapi tidak
        terlihat sedikit pun di layar. */
.mhu-pita-identitas {
    background: var(--mhu-kertas);
    border-bottom: 1px solid var(--mhu-garis);
}

.mhu-pita-nav {
    position: relative;
    /* Dropdown menggantung keluar dari pita ini dan harus menang atas isi
       halaman di bawahnya, termasuk pita hero beranda. */
    z-index: 40;
    background: var(--mhu-hijau);
    /* Bilah ini kini <nav> yang berdiri sendiri, bukan <div> di dalam <nav>;
       margin dan padding bawaan navbar Bootstrap harus dinolkan. */
    padding: 0;
    margin: 0;
    display: block;
}

.mhu-nav {
    padding: 0;
    margin: 0;
    display: block;
}

.mhu-kepala-situs__atas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 14px;
}

/* ── Identitas ── */
.mhu-merek {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}

/* Tinggi yang dijaga, lebar mengikuti rasio aslinya (794x250 = 3,18:1).
   Memberinya lebar DAN tinggi tetap akan menggepengkan lockup-nya. */
.mhu-merek__lambang {
    height: 52px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .mhu-merek__lambang {
        height: 42px;
    }
}

/* ── Pencarian ── */
.mhu-kepala-situs__cari {
    flex: 0 1 320px;
    min-width: 0;
}

@media (max-width: 991.98px) {
    /* Di ponsel kotak cari turun ke barisnya sendiri: berdampingan dengan
       lambang dan tombol laci, ketiganya tinggal ~90px masing-masing. */
    .mhu-kepala-situs__atas {
        flex-wrap: wrap;
    }

    .mhu-kepala-situs__cari {
        order: 3;
        flex: 1 0 100%;
    }
}

.mhu-kepala-situs__laci {
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    background: var(--mhu-kertas);
    padding: 10px 12px;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}

.mhu-kepala-situs__laci .icon-bar {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: var(--mhu-tinta);
    border-radius: 2px;
}

/* ── Navigasi ── */
@media (min-width: 992px) {
    .wpo-site-header .navigation-holder {
        /* Warnanya kini milik .mhu-pita-nav yang selebar layar; di sini cukup
           transparan supaya daftar menunya sejajar dengan .mhu-wadah. */
        background: transparent !important;
        border-radius: 0;
        padding-inline: 0;
    }

    /* Rata KIRI, bukan tengah. Ini yang membuat "Beranda" sejajar dengan
       lambang di atasnya dan judul halaman di bawahnya. */
    .wpo-site-header #navbar .navbar-nav,
    .wpo-site-header .navigation-holder > ul {
        justify-content: flex-start !important;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .navigation-holder > ul > li > a {
        padding: 13px 12px;
        font-size: .8125rem;
        letter-spacing: .02em;
    }
}

@media (min-width: 1200px) {
    .navigation-holder > ul > li > a {
        padding: 13px 14px;
        font-size: .875rem;
    }
}


/* Penengah daftar menu ada di `#navbar` (wadah flex-nya), BUKAN di
   `.navbar-nav`. Menimpa yang salah tidak berefek apa pun — itu sebabnya
   percobaan pertama menyisakan 150px hijau kosong di kiri "Beranda". */
@media (min-width: 992px) {
    .wpo-site-header #navbar {
        justify-content: flex-start !important;
    }
}


/* -----------------------------------------------------------------------------
   34. SUB MENU DESKTOP
   -----------------------------------------------------------------------------
   Dropdown menggantung di luar kartu kepala situs, jadi ia butuh lapisan
   tumpuk sendiri di atas isi halaman — termasuk di atas pita hero beranda.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .navigation-holder .sub-menu {
        z-index: 60;
        min-width: 230px;
        background: var(--mhu-kertas);
    }

    /* Sub menu tingkat kedua muncul ke samping, bukan menimpa induknya. */
    .navigation-holder .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }

    /* ── Arah buka sub menu tingkat dalam ──────────────────────────────
       Ini yang membuat "boleh bertingkat sebebasnya" jadi aman. Tiap tingkat
       menggeser ~230px ke kanan, jadi tanpa pembalik, cukup empat atau lima
       tingkat — atau satu menu bersub menu yang kebetulan berada di kanan
       bilah — untuk melempar sub menunya ke luar layar, tempat ia tidak bisa
       diraih maupun digulir. Dinas mengatur kedalaman menu sendiri lewat
       panel, jadi batas itu tidak boleh berupa kejutan.

       TEMA SUDAH PUNYA PEMBALIK, DAN ITU MASALAHNYA. sass/style.css membalik
       seluruh sub menu ke kiri pada 992–1300px dan mengembalikannya ke kanan
       di atas 1300px — keputusan berdasarkan LEBAR JENDELA, bukan ruang yang
       benar-benar tersisa di sebelah menunya. Akibatnya dua-duanya bisa salah:
       di 1200px menu yang induknya di kiri dibalik ke kiri lalu keluar lewat
       tepi kiri, dan di atas 1300px menu yang induknya di kanan tetap dibuka
       ke kanan lalu keluar lewat tepi kanan.

       Jadi arahnya ditentukan JS (partials/scripts) yang mengukur ruang nyata,
       lalu menuliskan salah satu dari dua kelas di bawah. KEDUANYA diperlukan:
       `mhu-kanan` bukan sekadar nilai bawaan, melainkan penimpa yang membatalkan
       pembalikan tema di rentang 992–1300px.

       Selektornya sengaja memakai `#navbar` supaya bisa menang. Aturan tema
       yang dilawan berbunyi `.wpo-site-header #navbar .sub-menu > li:hover >
       .sub-menu` — mengandung ID, sehingga aturan berbasis kelas saja akan
       kalah berapa pun urutannya. Bentuk `:hover` ikut dituliskan karena aturan
       tema yang menang itu memang bentuk `:hover`-nya. */
    .wpo-site-header #navbar .sub-menu > li.mhu-balik > .sub-menu,
    .wpo-site-header #navbar .sub-menu > li.mhu-balik:hover > .sub-menu {
        left: auto;
        right: 100%;
    }

    .wpo-site-header #navbar .sub-menu > li.mhu-kanan > .sub-menu,
    .wpo-site-header #navbar .sub-menu > li.mhu-kanan:hover > .sub-menu {
        left: 100%;
        right: auto;
    }

    .navigation-holder .sub-menu li a {
        padding: 10px 16px;
        line-height: 1.4;
        /* Nama layanan perizinan panjang-panjang; membiarkannya membungkus
           lebih baik daripada memotongnya dengan elipsis di menu. */
        white-space: normal;
    }
}

/* -----------------------------------------------------------------------------
   35. BERANDA — KISI DUA KOLOM
   -----------------------------------------------------------------------------
   Isi yang dibaca berurutan di kiri; yang dirujuk sewaktu-waktu di kanan.
   Menggantikan tujuh seksi selebar layar yang ditumpuk vertikal.
   -------------------------------------------------------------------------- */

.mhu-beranda {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 36px);
    align-items: start;
}

@media (min-width: 992px) {
    .mhu-beranda { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

.mhu-beranda__utama {
    min-width: 0;
    display: grid;
    gap: clamp(28px, 3.5vw, 44px);
}

.mhu-beranda__sisi {
    min-width: 0;
    display: grid;
    gap: 16px;
}

@media (min-width: 992px) {
    /* Menempel saat digulir: kolom kiri jauh lebih panjang, dan tanpa ini
       separuh layar kanan kosong sepanjang sisa halaman. `top` disisakan
       ruang untuk bilah navigasi. */
    .mhu-beranda__sisi {
        position: sticky;
        top: 16px;
    }
}

/* ── Blok di dalam kolom kiri ── */
.mhu-blok__kepala {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mhu-garis);
}

.mhu-blok__judul {
    margin: 0;
    font-family: var(--mhu-huruf-judul);
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mhu-tinta);
}

.mhu-blok__kepala .mhu-kepala__eyebrow {
    margin-bottom: 4px;
}

.mhu-blok__kepala .mhu-tautan {
    flex-shrink: 0;
    white-space: nowrap;
}

.mhu-kisi--dua {
    gap: 16px;
}

@media (min-width: 992px) {
    /* Dua kolom, bukan tiga: kolom kiri hanya selebar 8/12, dan tiga kartu di
       dalamnya menyisakan ~200px per kartu — judul berita jadi tiang. */
    .mhu-kisi--dua { grid-template-columns: repeat(2, 1fr); }
}

/* ── Kartu layanan: baris, bukan kotak ──
   Lima layanan sebagai kotak bergambar memakan tinggi tiga baris kisi untuk
   informasi yang sebenarnya satu baris: nama layanan dan ke mana ia menuju. */
.mhu-layanan__kisi {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 640px) {
    .mhu-layanan__kisi { grid-template-columns: repeat(2, 1fr); }
}

.mhu-layanan {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.mhu-layanan:hover {
    border-color: var(--mhu-hijau);
    box-shadow: var(--mhu-bayang);
}

.mhu-layanan__lambang {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--mhu-hijau-samar);
    overflow: hidden;
}

.mhu-layanan__lambang img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mhu-layanan__teks {
    min-width: 0;
}

.mhu-layanan__judul {
    margin: 0 0 3px;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mhu-tinta);
}

.mhu-layanan__judul a {
    color: inherit;
    text-decoration: none;
}

.mhu-layanan__judul a:hover {
    color: var(--mhu-hijau);
}

.mhu-layanan__judul i {
    font-size: .6875rem;
    color: var(--mhu-teks-lemah);
    margin-left: 3px;
}

.mhu-layanan__teks p {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mhu-teks-lemah) !important;
}

/* ── Panel kolom kanan ── */
.mhu-panel__alamat {
    display: flex;
    gap: 8px;
    margin: 14px 0 16px;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--mhu-teks) !important;
}

.mhu-panel__alamat i {
    color: var(--mhu-hijau);
    margin-top: 2px;
    flex-shrink: 0;
}

.mhu-panel .jadwal-pelayanan li {
    padding: 10px 14px;
}

.mhu-panel .jadwal-pelayanan li p {
    font-size: .9375rem;
}

/* ── Kepala dinas ringkas ── */
.mhu-kadis-ringkas {
    text-align: center;
}

.mhu-kadis-ringkas img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: block;
    background: var(--mhu-kertas-lembut);
    outline: 1px solid var(--mhu-garis);
    outline-offset: 4px;
}

.mhu-kadis-ringkas h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px;
    padding: 0;
    border: 0;
}

.mhu-kadis-ringkas__jabatan {
    margin: 0 0 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mhu-teks-lemah) !important;
}

.mhu-kadis-ringkas__slogan {
    margin: 0 0 16px;
    font-size: .8125rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--mhu-teks-lemah) !important;
}

/* ── Nilai survei ringkas ── */
.mhu-nilai-ringkas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.mhu-nilai-ringkas > div {
    text-align: center;
    padding: 14px 8px;
    background: var(--mhu-hijau-samar);
    border-radius: var(--mhu-radius-kecil);
}

.mhu-nilai-ringkas__angka {
    display: block;
    font-family: var(--mhu-huruf-judul);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mhu-hijau);
    margin-bottom: 6px;
}

.mhu-nilai-ringkas__label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--mhu-tinta);
}

.mhu-nilai-ringkas__ket {
    display: block;
    margin-top: 2px;
    font-size: .6875rem;
    line-height: 1.35;
    /* Di atas pita bertint, teks lemah hanya 4,28:1 — pakai teks penuh. */
    color: var(--mhu-teks);
}

/* ── Daftar tautan cepat ── */
.mhu-daftar-tautan {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mhu-daftar-tautan li + li {
    border-top: 1px solid var(--mhu-garis);
}

.mhu-daftar-tautan a {
    display: flex;
    align-items: center;
    gap: 11px;
    /* Sasaran sentuh penuh. */
    min-height: 44px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mhu-tinta);
    text-decoration: none;
}

.mhu-daftar-tautan a:hover {
    color: var(--mhu-hijau);
}

.mhu-daftar-tautan i {
    color: var(--mhu-hijau);
    font-size: .9375rem;
    flex-shrink: 0;
}

/* ── Tentang ── */
.mhu-tentang {
    max-width: var(--mhu-lebar-baca);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--mhu-teks);
}

.mhu-tentang p:last-child {
    margin-bottom: 0;
}

/* `overflow-x: clip`, BUKAN `hidden`.

   Tema memasang `overflow: hidden` pada `.page-wrapper` untuk menahan elemen
   dekoratif yang meluber. Masalahnya, `overflow: hidden` menjadikan elemen itu
   WADAH GULIR — dan `position: sticky` selalu diukur terhadap wadah gulir
   terdekat. Akibatnya bilah navigasi yang seharusnya menempel di puncak layar
   justru menempel di puncak `.page-wrapper`, yaitu ikut tergulir hilang.
   Terukur: pitanya berada di top -1070px saat halaman digulir.

   `clip` memotong isi yang meluber persis sama, tetapi TIDAK membuat wadah
   gulir, sehingga sticky kembali mengacu ke viewport.

   Berlaku untuk <body> JUGA, bukan hanya .page-wrapper — tema memasangnya di
   kedua tempat, dan satu saja yang tersisa sudah cukup untuk mematikan
   sticky. */
body,
.page-wrapper {
    overflow: visible;
    overflow-x: clip;
}

/* -----------------------------------------------------------------------------
   36. BAGAN STRUKTUR ORGANISASI
   -----------------------------------------------------------------------------
   Dipindahkan ke sini dari @push('styles') di dalam partial-nya. Gaya yang
   ditanam di dalam Blade membawa paletnya sendiri: bagan ini memakai
   #b45309 / #059669 / #2563eb / #7c3aed sebagai aksen per tingkat — empat hue
   berbeda dalam satu bagan, plus belasan abu-abu Tailwind yang tidak dipakai
   di tempat lain mana pun di situs ini.

   Tingkatan sekarang dibedakan KEPEKATAN, bukan hue. Sebuah bagan organisasi
   menyatakan satu hierarki; empat warna berbeda menyatakan empat hal berbeda.
   -------------------------------------------------------------------------- */

.org-chart {
    --org-garis: #d3ddd7;
    --org-aksen: var(--mhu-hijau);
}

.org-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.org-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: .8125rem;
    color: var(--mhu-teks-lemah) !important;
}

.org-alat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.org-zoom {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--mhu-garis);
    border-radius: 999px;
    padding: 3px;
    background: var(--mhu-kertas);
}

.org-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 38px: cukup untuk jempol tanpa membuat bilah alat setebal kartu. */
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mhu-tinta);
    font-family: var(--mhu-huruf);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.org-btn:hover {
    background: var(--mhu-hijau-samar);
    color: var(--mhu-hijau-tua);
}

.org-btn--teks {
    border: 1px solid var(--mhu-garis);
    background: var(--mhu-kertas);
}

.org-zoom__nilai {
    min-width: 52px;
    text-align: center;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--mhu-teks-lemah);
    font-variant-numeric: tabular-nums;
}

/* ── Kotak geser ── */
.org-scroll {
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 10px;
    background: var(--mhu-kertas-lembut);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    /* Tinggi dibatasi supaya bagan tidak mendorong tombol modal keluar layar,
       dan supaya gulir vertikalnya terjadi DI DALAM bagan. */
    max-height: min(70vh, 620px);
    cursor: grab;
}

.org-scroll--menarik {
    cursor: grabbing;
    /* Cegah teks tersorot saat bagan ditarik. */
    user-select: none;
}

.org-scroll:focus-visible {
    outline: 2px solid var(--mhu-hijau);
    outline-offset: 2px;
}

/* Bingkai ini yang ukurannya disetel JS mengikuti skala — lihat catatan di
   org-chart.blade.php. Tanpa itu, memperbesar bagan hanya memotongnya.

   `overflow: hidden` WAJIB di sini. `transform: scale()` mengubah tampilan
   tetapi TIDAK mengubah kotak tata letak: pada skala 0,4 bagan terlihat
   selebar 1808px sementara kotaknya tetap 4520px, dan kotak gulir di luarnya
   ikut mengira isinya 4530px — jadi muncul ruang kosong sepanjang 2700px di
   kanan yang bisa digeser walau tidak ada apa-apa di sana. Bingkai memotongnya
   tepat di ukuran visual, dan karena ukurannya persis hasil kali skala, tidak
   ada bagian bagan yang ikut terpotong. */
.org-tree__bingkai {
    position: relative;
    overflow: hidden;
}

.org-tree {
    display: inline-block;
    /* Tanpa min-width: lebar bingkai ditentukan JS dari lebar pohon ini, jadi
       `min-width: 100%` membuat keduanya saling mengacu. */
    transform-origin: 0 0;
    transition: transform .16s ease;
}

.org-tree ul {
    display: flex;
    justify-content: center;
    gap: 14px;
    position: relative;
    padding: 26px 0 0;
    margin: 0;
    list-style: none;
}

.org-tree > ul { padding-top: 0; }

.org-tree li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 7px 0;
    list-style: none;
}

.org-tree > ul > li { padding-top: 0; }

/* ── Garis penghubung ── */
.org-tree li::before,
.org-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 26px;
    border-top: 2px solid var(--org-garis);
}

.org-tree li::before { right: 50%; }

.org-tree li::after {
    left: 50%;
    border-left: 2px solid var(--org-garis);
}

.org-tree li:only-child::before,
.org-tree li:only-child::after { display: none; }

.org-tree li:only-child { padding-top: 26px; }

.org-tree li:first-child::before,
.org-tree li:last-child::after { border: 0 none; }

.org-tree li:last-child::before {
    border-right: 2px solid var(--org-garis);
    border-radius: 0 6px 0 0;
}

.org-tree li:first-child::after { border-radius: 6px 0 0 0; }

.org-tree ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 26px;
    border-left: 2px solid var(--org-garis);
}

.org-tree > ul::before { display: none; }

/* ── Kartu jabatan ── */
.org-card {
    position: relative;
    width: 220px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-top: 3px solid var(--org-aksen);
    border-radius: var(--mhu-radius-kecil);
    padding: 14px 12px 12px;
    text-align: center;
    box-shadow: var(--mhu-bayang);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.org-card:hover {
    box-shadow: var(--mhu-bayang-naik);
    border-color: #c3d2ca;
}

.org-avatar {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mhu-hijau-samar);
    color: var(--org-aksen);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mhu-huruf-judul);
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #d6e4dc;
}

.org-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Jabatan adalah informasi utama sebuah bagan, jadi dibuat paling tegas. */
.org-jabatan {
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mhu-tinta);
    margin-bottom: 5px;
}

.org-nama {
    font-weight: 600;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--mhu-teks);
}

.org-nip {
    font-size: .6875rem;
    color: var(--mhu-teks-lemah);
    margin-top: 4px;
}

.org-divisi {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 9px;
    background: var(--mhu-kertas-lembut);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--mhu-teks-lemah);
}

/* ── Tingkatan: satu hue, kepekatan menurun ──
   Tingkat teratas paling pekat; makin ke bawah makin muda. Hierarki terbaca
   sebagai satu keluarga, bukan empat warna yang tidak berhubungan. */
.org-level-0 { --org-aksen: var(--mhu-hijau-tua); }
.org-level-1 { --org-aksen: var(--mhu-hijau); }
.org-level-2 { --org-aksen: #3f7d5f; }
.org-level-3 { --org-aksen: #7aa892; }

/* Puncak bagan diberi satu-satunya aksen hangat di sini — menandai "ini
   kepalanya" tanpa menambah hue baru ke tingkat-tingkat di bawahnya. */
.org-level-0 .org-avatar {
    border-color: var(--mhu-amber);
}

.org-empty {
    text-align: center;
    padding: 44px 16px;
    color: var(--mhu-teks-lemah);
    background: var(--mhu-kertas);
    border: 1px dashed var(--mhu-garis);
    border-radius: var(--mhu-radius);
}

.org-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    color: var(--mhu-hijau);
    opacity: .55;
}

/* ── Layar penuh ── */
.org-chart--penuh {
    background: var(--mhu-kertas);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.org-chart--penuh .org-scroll {
    flex: 1;
    max-height: none;
}

@media (max-width: 575.98px) {
    .org-card { width: 180px; }
    .org-scroll { padding: 14px 6px; max-height: 68vh; }
    .org-hint { display: none; }
    .org-alat { width: 100%; justify-content: space-between; }
}

@media print {
    .org-toolbar { display: none !important; }

    .org-scroll {
        overflow: visible;
        max-height: none;
        border: 0;
        background: none;
    }
}

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

/* Wadah lebar untuk isi yang memang butuh ruang mendatar (bagan organisasi).
   Bukan `container-fluid`: tanpa batas sama sekali, bilah alat bagan terlempar
   ke dua ujung layar 27 inci yang berjauhan dan pasangan tombolnya jadi sulit
   dihubungkan secara visual. */
.mhu-wadah--lebar {
    max-width: 1560px;
}

/* -----------------------------------------------------------------------------
   37. PITA ANGKA
   -----------------------------------------------------------------------------
   Satu bidang tinta di antara seksi-seksi terang. Yang membuat beranda terasa
   "sepi" bukan kurangnya warna melainkan kurangnya IRAMA: sebelum ini seluruh
   halaman bernilai terang serupa — kartu putih di atas abu muda dari atas
   sampai bawah. Pergantian gelap-terang menyelesaikannya tanpa satu pun hue
   baru masuk ke sistem.
   -------------------------------------------------------------------------- */

.mhu-angka__kisi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 32px);
    margin: 0;
}

@media (min-width: 768px) {
    .mhu-angka__kisi { grid-template-columns: repeat(4, 1fr); }
}

.mhu-angka__kisi > div {
    position: relative;
    padding-left: 18px;
}

/* Garis amber tipis di kiri setiap angka — pengulangan aksen yang sama dengan
   garis di bawah judul seksi dan di kaki halaman. */
.mhu-angka__kisi > div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 999px;
    background: var(--mhu-amber);
}

.mhu-angka dt {
    font-family: var(--mhu-huruf-judul);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    /* Angka rata lebar: tanpa ini "5" dan "10.332" bergeser-geser ketika
       penghitung pengunjung berubah, dan kolomnya terlihat goyah. */
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.mhu-angka dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff !important;
}

.mhu-angka dd span {
    display: block;
    margin-top: 2px;
    font-size: .8125rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .66) !important;
}

/* -----------------------------------------------------------------------------
   38. AMBER DIPAKAI LEBIH LUAS
   -----------------------------------------------------------------------------
   Amber sebelumnya hanya muncul di tiga tempat kecil, jadi ia terbaca sebagai
   kebetulan, bukan bagian dari sistem. Ditambahkan ke tiga tempat lagi — semua
   sebagai AKSEN, tidak satu pun sebagai bidang luas. Warna berjenuh tinggi di
   area lebar persis yang membuat versi lama situs ini terasa murah.
   -------------------------------------------------------------------------- */

/* Menu yang sedang dibuka ditandai garis amber, bukan hanya latar sedikit
   lebih terang — perbedaan latar 4% praktis tidak terlihat di bilah hijau. */
@media (min-width: 992px) {
    .navigation-holder > ul > li.active > a {
        position: relative;
    }

    /* Induk yang salah satu turunannya sedang dibuka ikut ditandai — dengan
       garis yang sedikit lebih redup, supaya "halaman ini" dan "cabang ini"
       tetap bisa dibedakan. */
    .navigation-holder > ul > li.active > a,
    .navigation-holder > ul > li.mengandung-aktif > a {
        position: relative;
        color: #fff !important;
    }

    .navigation-holder > ul > li.active > a::after,
    .navigation-holder > ul > li.mengandung-aktif > a::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 2px;
        border-radius: 999px;
        background: var(--mhu-amber);
    }

    .navigation-holder > ul > li.mengandung-aktif > a::after {
        opacity: .5;
    }

    .navigation-holder > ul > li.mengandung-aktif > a {
        background: rgba(255, 255, 255, .08);
    }
}

/* Kartu yang disentuh mendapat garis amber di tepi atas: penanda "ini yang
   sedang Anda tuju" yang tidak bergantung pada warna hijau yang sudah dipakai
   untuk hal lain. */
.mhu-kartu,
.mhu-aksi__butir {
    position: relative;
}

.mhu-kartu::before,
.mhu-aksi__butir::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: var(--mhu-radius) var(--mhu-radius) 0 0;
    background: var(--mhu-amber);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.mhu-kartu:hover::before,
.mhu-aksi__butir:hover::before,
.mhu-aksi__butir:focus-visible::before {
    opacity: 1;
}

/* Eyebrow seksi memakai amber gelap, bukan hijau: hijau sudah menandai
   tautan, tombol, dan ikon — satu peran lagi membuatnya kehilangan arti. */
.mhu-kepala__eyebrow {
    color: var(--mhu-amber-tua);
}

/* Kecuali di atas tinta, tempat amber terang yang terbaca. */
.mhu-seksi--tinta .mhu-kepala__eyebrow,
.wpo-breadcumb-area .mhu-kepala__eyebrow {
    color: var(--mhu-amber);
}

/* Bilah navigasi menempel di puncak layar saat digulir.

   Satu baris CSS, tanpa JavaScript dan tanpa elemen kloning. Perjalanan
   menuju ke sini melewati tiga jebakan yang semuanya terukur:

     1. Tema membangun bilah lengket dengan MENGKLONING seluruh <nav>. Klon itu
        menggandakan setiap id di dalamnya; membuang id-nya justru merusak
        klonnya (CSS tema menatanya lewat `#navbar ...`) sehingga seluruh
        dropdown terbuka serentak memenuhi layar. Klonnya dibuang seluruhnya.

     2. `overflow: hidden` pada <body> dan .page-wrapper menjadikan keduanya
        WADAH GULIR, dan sticky selalu mengacu ke wadah gulir terdekat —
        bukan ke viewport. Diganti `overflow-x: clip`, yang memotong sama
        persis tanpa membuat wadah gulir. Ditambah `position-relative`
        (utilitas Bootstrap, `!important`) pada <header> yang menimpa
        `position: sticky` diam-diam.

     3. Membuat SELURUH kepala situs lengket lalu menggulungnya dari 173px
        jadi 44px. Elemen sticky tetap ikut alur tata letak, jadi tinggi yang
        berubah memendekkan dokumen 129px dan seluruh isi halaman melompat
        naik begitu pengunjung mulai menggulir — dan di dekat ambang
        pemicunya, lompatan itu berosilasi: gulir turun, kepala menggulung,
        isi naik, ambang terlewati lagi, kepala membuka, isi turun.

   Jalan keluarnya struktural, bukan CSS: pita navigasi dipindah KELUAR dari
   <header> menjadi saudaranya, langsung di bawah .page-wrapper. Induknya kini
   membentang sepanjang halaman, tidak ada tinggi yang berubah, dan tidak ada
   satu baris JavaScript pun yang terlibat.

   Hanya desktop: di ponsel navigasinya laci melayang, dan mengunci wadahnya
   akan mengunci laci itu juga. */
@media (min-width: 992px) {
    .mhu-pita-nav {
        position: sticky;
        top: 0;
        z-index: 40;
    }
}

/* Pembungkus pita navigasi membawa kelas `wpo-site-header` demi selektor tema
   (lihat partials/navigasi.blade.php), jadi ia ikut menerima gaya kepala situs.
   Yang perlu dinolkan hanya itu — warnanya sendiri sudah diatur .mhu-pita-nav. */
.mhu-pita-nav.wpo-site-header {
    padding: 0;
    margin: 0;
    border: 0;
}

/* -----------------------------------------------------------------------------
   39. SASARAN SENTUH PADA PERANGKAT SENTUH
   -----------------------------------------------------------------------------
   `pointer: coarse` = jari, bukan kursor. Di desktop, tautan setinggi teksnya
   memang wajar; di layar sentuh, sasaran di bawah ~44px terukur sering meleset.
   Aturan di sini menebalkan AREA KETUK tanpa mengubah tampilan desktop —
   diukur di beranda 390px: 16 tautan berada di 19-38px sebelum ini.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {

    /* Tautan "Semua →" di kepala blok (20px). */
    .mhu-tautan {
        min-height: 44px;
        padding-block: 10px;
    }

    /* Tombol kecil (38px). Tingginya dinaikkan hanya di perangkat sentuh
       supaya kerapatan panel samping di desktop tidak berubah. */
    .mhu-tombol--kecil {
        min-height: 44px;
    }

    /* Judul-tautan di kartu berita/investasi (21px) dan baris layanan (28px):
       area ketuk diperluas lewat padding negatif-margin supaya tata letak
       kartunya tidak bergeser. */
    .mhu-kartu__judul a,
    .mhu-layanan__judul a {
        display: inline-block;
        padding-block: 8px;
        margin-block: -8px;
    }

    /* Judul pengumuman di pita atas (29px). */
    .mhu-pita__judul {
        padding-block: 8px;
        margin-block: -8px;
    }

    /* Tautan kaki halaman dan tautan di panel bacaan. */
    .wpo-site-footer a,
    .mhu-hasil a,
    .mhu-catatan a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Tautan skm.go.id di teks redup (/skm): warna redupnya hanya 4,3:1. Tautan di
   dalam paragraf redup tetap memakai hijau penuh — ia justru harus lebih
   menonjol daripada teks di sekitarnya, bukan ikut memudar. */
.text-muted a:not(.btn) {
    color: var(--mhu-hijau);
    font-weight: 600;
}

/* Eyebrow di atas permukaan bertint (mhu-seksi--samar): amber-tua dirancang
   untuk latar PUTIH (4,8:1). Di atas #E8F1EC ia jatuh ke ±4,2:1 — di bawah
   ambang untuk teks 11px. Satu tingkat lebih pekat: #7D571F = 5,3:1. */
.mhu-seksi--samar .mhu-kepala__eyebrow {
    color: #7d571f;
}

/* Sisa sasaran sentuh yang terbukti di konteks sentuh nyata (hasTouch):
   tombol kecil Bootstrap 38px, tautan kontak 19px, judul kartu 35-38px. */
@media (pointer: coarse) {
    .list-group-item {
        min-height: 44px;
    }

    /* "Isi Survei" x56 di /skm memakai .btn-sm (38px). */
    .btn-sm {
        min-height: 44px;
    }

    /* Tautan telepon/surel/sosial di daftar fakta halaman Kontak (19px). */
    .mhu-fakta dd a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Padding 8px menyisakan 35-38px; 13px menembus 44. Margin negatif yang
       sama menjaga tata letak kartunya tidak bergeser. */
    .mhu-kartu__judul a,
    .mhu-layanan__judul a,
    .mhu-pita__judul {
        padding-block: 13px;
        margin-block: -13px;
    }
}

/* -----------------------------------------------------------------------------
   40. SEKSI "CARA MENGURUS IZIN" (beranda)
   -----------------------------------------------------------------------------
   Konten paling berharga situs ini, jadi diberi perlakuan paling berani:
   pita tinta dengan angka langkah raksasa. Keberanian dibelanjakan DI SINI —
   satu seksi — bukan disebar tipis ke semua tempat.
   -------------------------------------------------------------------------- */

.mhu-langkah__kisi {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0 0 28px;
    padding: 0;
    counter-reset: langkah;
}

@media (min-width: 640px) {
    .mhu-langkah__kisi { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .mhu-langkah__kisi { grid-template-columns: repeat(4, 1fr); }
}

.mhu-langkah__kisi > li {
    position: relative;
    padding: 22px 20px 20px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--mhu-radius);
    min-width: 0;
}

/* Angka besar sebagai elemen grafis — bukan dekorasi: urutannya memang
   informasi intinya di seksi ini. */
.mhu-langkah__nomor {
    display: block;
    font-family: var(--mhu-huruf-judul);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mhu-amber);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}

.mhu-langkah__kisi h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.mhu-langkah__kisi p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78) !important;
}

.mhu-langkah__kisi strong {
    color: #fff;
}

/* Panah penghubung antar langkah di desktop — menegaskan ini SATU alur,
   bukan empat kartu lepas. */
@media (min-width: 992px) {
    .mhu-langkah__kisi > li:not(:last-child)::after {
        content: '\2192';
        position: absolute;
        top: 24px;
        right: -15px;
        z-index: 1;
        font-size: 1.125rem;
        color: var(--mhu-amber);
        opacity: .6;
    }
}

.mhu-langkah__kaki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.mhu-langkah__kaki p {
    margin: 0;
    max-width: 56ch;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82) !important;
}

.mhu-langkah__kaki strong { color: #fff; }

.mhu-langkah__aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Tombol OSS di pita tinta: amber pekat, bukan hijau — di atas tinta hijau
   pekat kehilangan dirinya. */
.mhu-langkah .mhu-tombol--utama {
    background: var(--mhu-amber);
    border-color: var(--mhu-amber);
    color: var(--mhu-tinta);
    font-weight: 700;
}

.mhu-langkah .mhu-tombol--utama:hover {
    background: #e6b455;
    border-color: #e6b455;
    color: var(--mhu-tinta);
}

/* ── Butir aksi utama di baris aksi ── */
.mhu-aksi__butir--utama {
    background: var(--mhu-hijau);
    border-color: var(--mhu-hijau);
}

.mhu-aksi__butir--utama > i,
.mhu-aksi__butir--utama .mhu-aksi__judul {
    color: #fff;
}

.mhu-aksi__butir--utama .mhu-aksi__ket {
    color: rgba(255, 255, 255, .75);
}

.mhu-aksi__butir--utama:hover,
.mhu-aksi__butir--utama:focus-visible {
    border-color: var(--mhu-hijau-tua);
    background: var(--mhu-hijau-tua);
}

/* ── Tautan di pita angka ── */
.mhu-angka__tautan {
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
}

.mhu-angka__tautan:hover,
.mhu-angka__tautan:focus-visible {
    color: var(--mhu-amber) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   41. INDEKS DOKUMEN & INFORMASI (/informasi)
   -------------------------------------------------------------------------- */

.mhu-indeks__kelompok + .mhu-indeks__kelompok {
    margin-top: clamp(26px, 3.5vw, 40px);
}

.mhu-indeks__jumlah {
    flex-shrink: 0;
    font-size: .8125rem;
    color: var(--mhu-teks-lemah);
}

.mhu-indeks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 768px) {
    .mhu-indeks { grid-template-columns: repeat(2, 1fr); }
}

.mhu-indeks a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    color: var(--mhu-tinta);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.mhu-indeks a:hover,
.mhu-indeks a:focus-visible {
    border-color: var(--mhu-hijau);
    box-shadow: var(--mhu-bayang);
}

.mhu-indeks a > i {
    color: var(--mhu-hijau);
    flex-shrink: 0;
}

.mhu-indeks__judul {
    flex: 1;
    min-width: 0;
}

.mhu-indeks__jenis {
    flex-shrink: 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--mhu-hijau-samar);
    color: var(--mhu-hijau-tua);
}

/* Dua sisa terakhir dari verifikasi hasTouch: tautan "Halaman informasi" di
   pita angka (19px) dan tautan sebaris di teks bantu /skm (16px). */
@media (pointer: coarse) {
    .mhu-angka__tautan,
    .text-muted a:not(.btn) {
        display: inline-block;
        padding-block: 13px;
        margin-block: -13px;
    }
}

/* -----------------------------------------------------------------------------
   42. EKSEKUSI KRITIK DESAIN (30 Agu 2026)
   -----------------------------------------------------------------------------
   Tiga temuan besar + delapan kecil, semuanya terukur. Rinciannya di pesan
   commit; komentar per blok di bawah menyebut angkanya.
   -------------------------------------------------------------------------- */

/* ── Heavy 900 eksplisit — HANYA untuk angka display ──
   Di angka besar Heavy justru tepat; yang salah adalah semua judul kecil ikut
   Heavy karena face 700 tidak ada (kini dipetakan ke Demi di bagian 0). */
.mhu-langkah__nomor,
.mhu-angka dt {
    font-weight: 900;
}

/* ── Hero: rasio banner diikuti, bukan dipotong ──
   Banner unggahan 1280×343 dipaksa cover ke kotak 300px sehingga ±25px bawah
   terpangkas — persis strip nama keempat pejabat di banner produksi. */
.mhu-hero__panel .swiper-container,
.mhu-hero__panel .slide-inner {
    aspect-ratio: 1280 / 343;
    height: auto !important;
    min-height: 0 !important;
}

/* Di bawah 768px cover hanya memperlihatkan 29% lebar banner — teks
   "Selamat Datang" hilang, tersisa 1,5 wajah. Panel gambarnya disembunyikan
   (lihat markup: d-none d-md-block) dan digantikan hero teks hidup ini. */
.mhu-hero-teks {
    padding: clamp(28px, 6vw, 44px) 0 6px;
}

.mhu-hero-teks h1 {
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 10px;
    max-width: 22ch;
}

.mhu-hero-teks p {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85) !important;
    margin: 0;
    max-width: 46ch;
}

@media (min-width: 768px) {
    /* Di desktop banner-lah heronya; judul teks kembali ke mode tersembunyi-
       visual (tetap satu-satunya h1 dan tetap terbaca pembaca layar). */
    .mhu-hero-teks {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Foto dedaunan bawaan tema di belakang hero: hanya terlihat ±114px di tiap
   tepi — dekorasi yatim di luar palet. Diganti tinta yang memudar ke kertas
   (lapisan ::after yang sudah ada), nol permintaan jaringan. */
.bg-web-home {
    background-image: none !important;
    background-color: #0e2a1d;
}

/* ── Separuh bawah beranda keluar dari kerangka blog ──
   Terukur sebelum perbaikan: kartu berita ±391×435 = 6× luas kartu layanan
   396×72; kisi 2 kolom berisi 3 kartu selalu menyisakan satu lubang
   ±391×435; seksi Tentang menyisakan 44% lebar kosong setinggi 341px. */

/* Layanan sebagai pita penuh (markupnya dipindah keluar kolom blog). */
.mhu-layanan__kisi--penuh {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 14px;
}

.mhu-layanan__kisi--penuh .mhu-layanan {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 120px;
    padding: 18px;
}

.mhu-layanan__kisi--penuh .mhu-layanan__judul {
    font-size: 1.0625rem;
}

/* Tiga kolom untuk potensi & berita di kolom utama: 3 kartu = 1 baris penuh,
   lubangnya hilang, dan kartu berita menyusut ke proporsi yang jujur. */
@media (min-width: 992px) {
    .mhu-kisi--tiga {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) and (max-width: 991.98px) {
    .mhu-kisi--tiga {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tentang: teks dijepit lebar-baca, sisi kanan diisi kartu ajakan — bukan
   560px udara. */
.mhu-tentang-kisi {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

@media (min-width: 992px) {
    .mhu-tentang-kisi {
        grid-template-columns: minmax(0, 68ch) minmax(260px, 1fr);
    }
}

/* ── Butir kecil dari kritik ── */

/* 1. Tombol back-to-top bawaan tema masih BIRU rgba(55,86,247,.7) — satu-
      satunya biru di seluruh situs. */
a.back-to-top {
    background: var(--mhu-hijau) !important;
    color: #fff !important;
    border-radius: 50%;
}

a.back-to-top:hover {
    background: var(--mhu-hijau-tua) !important;
}

/* 2. Dropdown nav masih membawa bayangan indigo tema rgba(62,65,159,.09) dan
      radius 10px, berbeda dari kartu situs (14px, bayangan hijau-dingin). */
@media (min-width: 992px) {
    .navigation-holder .sub-menu {
        border-radius: var(--mhu-radius) !important;
        box-shadow: var(--mhu-bayang-naik) !important;
    }
}

/* 6. Judul widget ajakan menyimpang dari pola judul panel (16,9px w500 vs
      16px w700). */
.wpo-contact-widget h2,
.wpo-contact-widget h3,
.wpo-contact-widget h4 {
    font-size: 1rem;
    font-weight: 700;
}

/* 7. Kepala situs ponsel memakan 194px (23% layar) karena kolom cari selalu
      terbuka. Di bawah 768px kolomnya dilipat ke balik tombol ikon (native
      <details>, tanpa JavaScript). */
.mhu-cari-lipat > summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    background: var(--mhu-kertas);
    color: var(--mhu-tinta);
    cursor: pointer;
}

.mhu-cari-lipat > summary::-webkit-details-marker { display: none; }

.mhu-cari-lipat[open] > summary {
    border-color: var(--mhu-hijau);
    color: var(--mhu-hijau);
}

/* Formulirnya melebar ke satu baris penuh di bawah baris kepala. */
.mhu-cari-lipat .mhu-cari {
    margin-top: 10px;
    width: 100%;
}

.mhu-cari-lipat[open] {
    flex: 1 0 100%;
    order: 4;
}

/* Di ponsel laci navigasi tertutup, sehingga pita nav hanyalah STRIP HIJAU
   KOSONG ±36px di bawah kepala — bidang mati tanpa isi. Latarnya ditiadakan;
   lacinya sendiri (position: fixed milik tema) tidak terpengaruh. */
@media (max-width: 991.98px) {
    .mhu-pita-nav {
        background: transparent;
    }
}

/* -----------------------------------------------------------------------------
   43. BERANDA TANPA PITA GELAP (keputusan pemilik, 31 Agu 2026)
   -----------------------------------------------------------------------------
   Dua pita tinta di beranda dirasakan "menabrak" — dan pemiliknya benar
   soal LETAKNYA: pita gelap pertama jatuh persis di bawah baris aksi tanpa
   satu piksel napas, menumpuk dengan latar hero yang juga gelap. Keduanya
   dikonversi ke permukaan hijau-samar; keberanian dipikul UKURAN angka, bukan
   kegelapan latar. Tinta tetap dipakai di tempat yang tidak dikeluhkan dan
   memang bekerja: pita judul subhalaman dan kaki halaman.
   -------------------------------------------------------------------------- */

/* Latar di belakang hero ikut diterangkan — sebelumnya tinta 420px yang
   menyumbang kesan bertumpuknya bidang gelap di paruh atas. */
.bg-web-home {
    background-color: var(--mhu-hijau-samar);
}

.bg-web-home::after {
    background: linear-gradient(180deg,
                rgba(232, 241, 236, 0) 0%,
                var(--mhu-kertas-lembut) 100%);
}

/* Hero teks (ponsel) kini duduk di latar terang. */
.mhu-hero-teks h1 { color: var(--mhu-tinta); }
.mhu-hero-teks p { color: var(--mhu-teks) !important; }

/* ── Langkah, versi terang ── */
.mhu-langkah--terang .mhu-kepala__judul { color: var(--mhu-tinta); }
.mhu-langkah--terang .mhu-kepala__eyebrow { color: #7d571f; }
.mhu-langkah--terang .mhu-kepala__lead { color: var(--mhu-teks) !important; }

.mhu-langkah--terang .mhu-langkah__kisi > li {
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    box-shadow: var(--mhu-bayang);
}

/* Angka besar: hijau di atas kertas (10,3:1). Amber terang di latar terang
   hanya ±2:1 — itulah kenapa versi gelap memakai amber dan versi terang TIDAK
   BISA sekadar menukar latarnya. */
.mhu-langkah--terang .mhu-langkah__nomor { color: var(--mhu-hijau); }

.mhu-langkah--terang .mhu-langkah__kisi h3 { color: var(--mhu-tinta); }
.mhu-langkah--terang .mhu-langkah__kisi p { color: var(--mhu-teks) !important; }
.mhu-langkah--terang .mhu-langkah__kisi strong { color: var(--mhu-tinta); }

.mhu-langkah--terang .mhu-langkah__kisi > li:not(:last-child)::after {
    color: var(--mhu-amber-tua);
    opacity: 1;
}

.mhu-langkah--terang .mhu-langkah__kaki {
    border-top-color: var(--mhu-garis);
}

.mhu-langkah--terang .mhu-langkah__kaki p { color: var(--mhu-teks) !important; }
.mhu-langkah--terang .mhu-langkah__kaki strong { color: var(--mhu-tinta); }

/* Tombol OSS kembali ke hijau tombol utama; amber-di-tinta tidak berlaku
   lagi di sini. */
.mhu-langkah--terang .mhu-tombol--utama {
    background: var(--mhu-hijau);
    border-color: var(--mhu-hijau);
    color: #fff;
}

.mhu-langkah--terang .mhu-tombol--utama:hover {
    background: var(--mhu-hijau-tua);
    border-color: var(--mhu-hijau-tua);
    color: #fff;
}

/* ── Pita angka, versi terang ── */
.mhu-angka--terang .mhu-angka__kisi dt { color: var(--mhu-hijau); }

.mhu-angka--terang .mhu-angka__kisi > div::before { background: var(--mhu-amber-tua); }

.mhu-angka--terang dd { color: var(--mhu-tinta) !important; }
.mhu-angka--terang dd span { color: var(--mhu-teks) !important; }

.mhu-angka--terang .mhu-angka__tautan { color: var(--mhu-tinta) !important; }

.mhu-angka--terang .mhu-angka__tautan:hover,
.mhu-angka--terang .mhu-angka__tautan:focus-visible {
    color: var(--mhu-hijau) !important;
}

/* ── Napas ("mepet bgt") ──
   Baris aksi menempel langsung ke seksi berikutnya, dan area hero tidak punya
   jarak bawah sama sekali. */
.wpo-blog-hero-area {
    padding-bottom: clamp(28px, 4vw, 48px);
}

.mhu-aksi {
    margin-top: 22px;
}

/* Pita bermukaan (samar) diberi padding lebih lega daripada seksi polos —
   bidang berwarna yang sempit terbaca seperti selotip, bukan seksi. */
.mhu-langkah,
.mhu-angka {
    padding-block: clamp(44px, 6vw, 72px);
}

/* -----------------------------------------------------------------------------
   44. HASIL RISET BANDING DPMPTSP (31 Agu 2026)
   -------------------------------------------------------------------------- */

/* Strip anti-penipuan OSS. Ide dari Semarang (satu-satunya situs yang
   mengedukasi soal ini) dengan eksekusi diperbaiki: strip kecil di dalam
   seksi, BUKAN popup yang memblokir mendarat. */
.mhu-waspada {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-left: 3px solid var(--mhu-amber-tua);
    border-radius: var(--mhu-radius-kecil);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--mhu-teks);
}

.mhu-waspada > i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--mhu-amber-tua);
}

.mhu-waspada strong { color: var(--mhu-tinta); }

/* Baris aksi kini ENAM pintu (pola DKI: fokus, bahasa tugas) — 3×2 di
   desktop, bukan 4 memanjang. */
@media (min-width: 992px) {
    .mhu-aksi { grid-template-columns: repeat(3, 1fr); }
}

/* Bungkus video sambutan (kolom profil_website.video). */
.mhu-tentang-sisi {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.mhu-video {
    border-radius: var(--mhu-radius-kecil);
    overflow: hidden;
    background: var(--mhu-kertas-lembut);
}

.mhu-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* -----------------------------------------------------------------------------
   45. GERBANG BERBAHASA INGGRIS (/en)
   -----------------------------------------------------------------------------
   Riset banding: versi EN hanya ada di situs provinsi, tidak satu pun di
   tingkat kabupaten. Yang dibangun di sini bukan situs kembar melainkan SATU
   halaman untuk calon penanam modal, jadi gaya barunya pun hanya dua: pengalih
   bahasa di pita atas, dan baris nota sumber di bawah pita angka.
   -------------------------------------------------------------------------- */

/* Pengalih bahasa di pita atas.

   Bentuknya tautan berlabel, bukan tombol "ID | EN" yang menyala salah
   satunya: bentuk itu menjanjikan situs kembar, padahal /en satu halaman.
   Tingginya disamakan dengan .mhu-pita__ikon (36px) supaya pita tidak
   menebal — pita ini bukan tempat aksi utama. */
.mhu-pita__bahasa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.mhu-pita__bahasa:hover,
.mhu-pita__bahasa:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: var(--mhu-amber);
    color: var(--mhu-amber);
}

.mhu-pita__bahasa i {
    font-size: .875rem;
    color: var(--mhu-amber);
}

.mhu-pita__bahasa:hover i,
.mhu-pita__bahasa:focus-visible i {
    color: inherit;
}

/* Di layar sempit label teksnya dibuang dan hanya ikon globe yang tinggal:
   judul pengumuman di sebelahnya jauh lebih penting daripada kata "English",
   dan ikon globe sudah dikenal luas sebagai pemilih bahasa. `aria-label`
   tidak diperlukan — teksnya masih ada di DOM, hanya disembunyikan visual. */
@media (max-width: 575.98px) {
    .mhu-pita__bahasa {
        padding: 0;
        width: 36px;
        justify-content: center;
        border-color: transparent;
        font-size: 0;
    }

    .mhu-pita__bahasa i {
        font-size: 1rem;
    }
}

/* Nota sumber di bawah pita angka.

   Angka pada halaman promosi investasi milik pemerintah harus bisa
   ditelusuri, dan tanggalnya harus terlihat: proyek 300 MW yang benar hari
   ini akan tetap tertulis di sini tiga tahun lagi. */
.mhu-angka__nota {
    margin: 18px 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--mhu-teks-lemah);
}

/* Kartu sektor pada gerbang investor: daftar fakta bersumber di dalam kartu.

   `.mhu-fakta` dirancang untuk halaman Kontak yang lapang, jadi di dalam kartu
   ia perlu jarak dari paragraf di atasnya. Tautan sumbernya juga harus memakai
   warna token — tanpa aturan ini peramban memberi biru bawaannya, satu-satunya
   warna di seluruh halaman yang bukan milik sistem warna situs. */
.mhu-kartu__isi > .mhu-fakta {
    margin-top: 16px;
    margin-bottom: 0;
}

.mhu-kartu__isi > .mhu-fakta dt,
.mhu-kartu__isi > .mhu-fakta dd {
    font-size: .8125rem;
}

.mhu-kartu__kaki a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mhu-amber-tua);
}

.mhu-kartu__kaki a:hover,
.mhu-kartu__kaki a:focus-visible {
    color: var(--mhu-hijau);
    text-decoration: underline;
}

/* Panel "Access, logistics and conditions" memakai .mhu-panel, yang aslinya
   kartu samping sempit. Di kisi dua kolom ia menampung paragraf penuh, jadi
   badannya perlu ukuran baca yang wajar. */
.mhu-panel > p {
    margin-bottom: 0;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--mhu-teks);
}

.mhu-panel > p + .mhu-kartu__kaki {
    padding-top: 12px;
}

/* -----------------------------------------------------------------------------
   46. SAMPUL POTENSI INVESTASI
   -----------------------------------------------------------------------------
   Wikimedia Commons hanya memuat dua foto modern Kabupaten Mahakam Ulu, jadi
   delapan sektor tidak mungkin difoto semua secara jujur. Yang tak berfoto
   memakai sampul ini: jelas bukan foto, jelas disengaja, dan sewarna dengan
   situsnya. Bandingkan dua kemungkinan lain — kotak "Gambar tidak tersedia"
   yang membuat kisi terbaca sebagai galeri rusak, atau foto pinjaman yang
   isinya bukan yang dijanjikan judulnya.

   Raster garis diagonal 135 derajat DICABUT 8 September 2026: pada kisi berisi
   banyak ubin, kemiringan yang sama berulang di setiap ubin membuat seluruh
   kisi terbaca miring. Pemiliknya menyebutnya persis begitu. Tint rata sudah
   cukup untuk membedakan bidang ini dari gambar yang gagal dimuat.
   -------------------------------------------------------------------------- */

.mhu-sampul {
    display: grid;
    place-items: center;
    background: var(--mhu-hijau-samar);
    /* Garis diagonal amat samar supaya bidangnya punya tekstur dan tidak
       terbaca sebagai gambar yang gagal dimuat. */
    border-bottom: 1px solid var(--mhu-garis);
}

.mhu-sampul i {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--mhu-hijau);
    opacity: .5;
    transition: opacity .18s ease, transform .18s ease;
}

.mhu-kartu:hover .mhu-sampul i {
    opacity: .72;
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .mhu-sampul i { transition: none; }
    .mhu-kartu:hover .mhu-sampul i { transform: none; }
}

/* Kredit lisensi foto di badan halaman detail. CC BY-SA mewajibkan nama
   pemotret tercantum; ukurannya kecil tetapi kontrasnya tetap harus terbaca,
   jadi memakai --mhu-teks-lemah (4,9:1), bukan abu yang lebih muda. */
.mhu-baca small {
    display: block;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--mhu-teks-lemah);
}

/* Inisial pada kartu orang yang belum berfoto.

   Seluruh pegawai dinas belum punya potret, jadi kisi /personalia sepenuhnya
   terisi kotak "Gambar tidak tersedia" — sama seperti yang baru dibereskan di
   potensi investasi. Inisial memberi bidang gambar isi yang benar-benar
   informatif, dan bagan organisasi di situs ini sudah lebih dulu memakainya
   untuk keadaan yang sama. */
.mhu-inisial {
    display: grid;
    place-items: center;
    background: var(--mhu-hijau-samar);
}

.mhu-inisial > span {
    font-family: var(--mhu-huruf-judul);
    font-size: clamp(2rem, 1.2rem + 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--mhu-hijau);
    opacity: .55;
}

.mhu-kartu--tombol:hover .mhu-inisial > span,
.mhu-kartu--tombol:focus-visible .mhu-inisial > span {
    opacity: .75;
}

/* -----------------------------------------------------------------------------
   47. DAFTAR PEGAWAI (/personalia)
   -----------------------------------------------------------------------------
   Menggantikan kisi kartu potret. Alasan lengkapnya di personalia.blade.php;
   ringkasnya: kartu potret menjawab "orang ini seperti apa", sedangkan yang
   dibawa pengunjung adalah "siapa yang menangani urusan saya". Jadi jabatan
   memimpin, nama menjadi jawabannya, dan presisi datang dari satu tepi kiri
   yang dibagi seluruh baris — bukan dari kotak, bayangan, atau raster miring.
   -------------------------------------------------------------------------- */

/* Kolom cetak, BUKAN kisi.

   Unit di dinas ini berukuran sangat timpang: 1, 6, 4, 6, dan 5 orang. Dengan
   `grid-template-columns: 1fr 1fr`, unit satu orang berdampingan dengan unit
   enam orang dan menyisakan sekitar 500px ruang kosong di bawahnya — lubang
   yang terbaca sebagai kesalahan, bukan sebagai napas.

   `columns` membuat unit berikutnya mengalir tepat di bawah yang sebelumnya
   tanpa peduli tingginya, dan urutan bacanya tetap benar untuk sebuah
   direktori: atas ke bawah, lalu pindah kolom. `break-inside: avoid` menjaga
   satu unit tidak terbelah dua kolom. */
.mhu-daftar-orang {
    column-gap: 44px;
}

@media (min-width: 992px) {
    .mhu-daftar-orang {
        columns: 2;
    }
}

.mhu-unit {
    break-inside: avoid;
    /* Jarak antarunit dipikul margin-bottom, bukan `gap`: elemen di dalam
       konteks multi-kolom tidak mengenal gap baris. */
    margin-bottom: 34px;
}

.mhu-unit:last-child { margin-bottom: 0; }

/* ── Pimpinan ──────────────────────────────────────────────────────────────
   Berdiri sendiri di atas, membentang penuh. Kedudukannya memang berbeda dari
   anggota unit, dan halaman ini sebaiknya mengatakan itu lewat susunan, bukan
   lewat warna atau lencana tambahan. */
.mhu-daftar-orang__pimpinan {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--mhu-garis);
}

/* ── Unit ─────────────────────────────────────────────────────────────────── */

.mhu-unit__judul {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--mhu-hijau);
    font-family: var(--mhu-huruf-judul);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mhu-tinta);
}

/* Jumlah anggota unit — bukan hiasan: ia memberi tahu seberapa besar unitnya
   sebelum daftarnya dibaca, dan membuat unit satu orang terbaca sebagai
   memang satu orang, bukan daftar yang terpotong. */
.mhu-unit__jumlah {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--mhu-huruf);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mhu-teks-lemah);
}

.mhu-unit__daftar {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Baris orang ──────────────────────────────────────────────────────────── */

.mhu-orang {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mhu-garis);
}

.mhu-unit__daftar > .mhu-orang:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mhu-orang__potret {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mhu-hijau-samar);
    font-family: var(--mhu-huruf-judul);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--mhu-hijau);
}

.mhu-orang__potret img,
.mhu-orang__potret .mhu-gambar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mhu-orang__teks { min-width: 0; }

/* Jabatan MEMIMPIN baris. Itu kunci pencarian orang di situs dinas; namanya
   adalah jawaban, bukan pertanyaan. */
.mhu-orang__jabatan {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mhu-teks-lemah);
}

.mhu-orang__nama {
    margin: 2px 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mhu-tinta);
}

/* NIP: satu-satunya keterangan yang hanya ada di direktori pegawai negeri, dan
   memang dipakai saat berkorespondensi resmi. Angka rata memakai tabular-nums
   supaya kolomnya sejajar dari baris ke baris. */
.mhu-orang__nip {
    margin: 3px 0 0;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: var(--mhu-teks-lemah);
}

/* ── Pimpinan: proporsi lebih besar pada anatomi yang sama ─────────────────── */

.mhu-orang--utama {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
    padding: 0;
    border-bottom: 0;
    align-items: center;
}

.mhu-orang--utama .mhu-orang__potret {
    width: 76px;
    height: 76px;
    font-size: 1.5rem;
}

.mhu-orang--utama .mhu-orang__jabatan { font-size: .875rem; }

.mhu-orang--utama .mhu-orang__nama {
    font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
    line-height: 1.25;
}

.mhu-daftar-orang__nota {
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--mhu-garis);
    font-size: .875rem;
    color: var(--mhu-teks-lemah);
}


/* -----------------------------------------------------------------------------
   48. ISI KELOMPOK PADA HALAMAN ISI (.mhu-subdaftar)
   -----------------------------------------------------------------------------
   Halaman yang punya turunan mendaftarnya di badan halaman, bukan hanya di
   dropdown. Alasannya ada di komentar resources/views/tlandingpage/halaman-isi:
   sebelum ini 23 halaman hanya bisa dicapai dengan menahan kursor di sub menu
   tingkat tiga.

   Bentuknya sengaja daftar bertepi kiri satu garis, bukan kisi kartu. Isinya
   nama dokumen yang panjang-panjang dan tidak bergambar; kartu hanya akan
   menghasilkan kotak-kotak tinggi berbeda berisi teks rata tengah — bentuk
   yang sama yang sudah dibongkar di halaman Personalia karena alasan itu.
   -------------------------------------------------------------------------- */

.mhu-subdaftar {
    max-width: 68ch;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--mhu-garis);
}

.mhu-subdaftar__judul {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mhu-hijau-tua);
    margin: 0 0 4px;
}

.mhu-subdaftar__ket {
    font-size: .875rem;
    color: var(--mhu-teks-lemah);
    margin: 0 0 16px;
}

.mhu-subdaftar__daftar {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mhu-garis);
}

.mhu-subdaftar__daftar > li {
    border-bottom: 1px solid var(--mhu-garis);
}

.mhu-subdaftar__tautan {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    /* Sasaran sentuh penuh: seluruh baris, bukan hanya hurufnya. */
    padding: 14px 12px 14px 14px;
    /* Rel kiri yang tumbuh saat disentuh — penanda yang sama dengan sub menu
       aktif dan laci ponsel, jadi ketiganya berbicara dengan bahasa yang sama. */
    box-shadow: inset 0 0 0 0 var(--mhu-amber-tua);
    color: var(--mhu-teks);
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

a.mhu-subdaftar__tautan:hover,
a.mhu-subdaftar__tautan:focus-visible {
    background: var(--mhu-hijau-samar);
    box-shadow: inset 3px 0 0 0 var(--mhu-amber-tua);
    color: var(--mhu-hijau-tua);
}

a.mhu-subdaftar__tautan:focus-visible {
    outline: 2px solid var(--mhu-hijau-tua);
    outline-offset: -2px;
}

.mhu-subdaftar__nama {
    font-weight: 600;
    line-height: 1.45;
}

/* Jumlah turunan ditulis, bukan digambar sebagai panah.
   Panah menjanjikan "terbuka di sini"; yang terjadi adalah pindah halaman. */
.mhu-subdaftar__jumlah {
    flex: none;
    font-size: .75rem;
    color: var(--mhu-teks-lemah);
    white-space: nowrap;
}

/* Butir yang belum punya tujuan sendiri tapi masih menaungi halaman lain:
   tampil sebagai keterangan, bukan tautan yang diklik tidak melakukan apa-apa. */
.mhu-subdaftar__tautan--mati {
    color: var(--mhu-teks-lemah);
    cursor: default;
}

@media (max-width: 575.98px) {
    .mhu-subdaftar__tautan {
        /* Nama dokumen di sini panjang; di layar sempit jumlahnya turun ke
           baris sendiri daripada memeras namanya jadi kolom sempit. */
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}


/* -----------------------------------------------------------------------------
   49. DOKUMEN PENTING SELEBAR HALAMAN (beranda)
   -----------------------------------------------------------------------------
   Dipindah dari bilah sisi kanan; alasan lengkapnya di komentar beranda.
   Ringkasnya: bilah sisi memuat lima panel setinggi 1439px di samping kolom
   utama setinggi 866px, menyisakan 573px ruang kosong. Dokumen dipindah keluar
   karena ia yang paling tidak cocok berada di sana — 32 halaman isi adalah
   aset terbesar situs ini, dan kotak selebar 401px memaksanya jadi satu lajur
   panjang.

   Kisi mengalir, bukan jumlah kolom tetap: jumlah dokumen di sini ditentukan
   controller dan bisa berubah. `auto-fill` + `minmax` membuat barisnya
   menyesuaikan sendiri tanpa perlu ada yang mengubah angka kolom setiap kali
   daftarnya bertambah — kesalahan yang persis pernah terjadi di kaki halaman.
   -------------------------------------------------------------------------- */

.mhu-dokumen-kisi {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.mhu-dokumen-kisi > li {
    min-width: 0;
}

.mhu-dokumen-kisi a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 16px 18px;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius-kecil);
    color: var(--mhu-teks);
    text-decoration: none;
    line-height: 1.45;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.mhu-dokumen-kisi a:hover,
.mhu-dokumen-kisi a:focus-visible {
    background: var(--mhu-hijau-samar);
    border-color: var(--mhu-hijau);
    color: var(--mhu-hijau-tua);
}

.mhu-dokumen-kisi a:focus-visible {
    outline: 2px solid var(--mhu-hijau-tua);
    outline-offset: 2px;
}

.mhu-dokumen-kisi i {
    flex: none;
    margin-top: 2px;
    color: var(--mhu-amber-tua);
}

/* Logo mitra, kalau dinas mengunggahnya. Tanpa logo, butirnya tetap memakai
   ikon dan judul — lihat komentar panel Tautan mitra di beranda. */
.mhu-daftar-tautan__logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
}


/* -----------------------------------------------------------------------------
   50. PENAMPIL DOKUMEN (.mhu-dokumen-berkas)
   -----------------------------------------------------------------------------
   Menggantikan gaya yang dulu ditanam di dalam komponennya lewat
   @push('styles'). Gaya lama membawa dua hijau sendiri (#10b981, #059669) —
   pasangan kelima dan keenam dari 15 hijau yang dulu beredar di situs ini —
   plus radius dan bayangan yang tidak cocok dengan kartu lain.

   Sematan hanya dipakai untuk PDF; alasannya ada di komentar komponennya.
   -------------------------------------------------------------------------- */

.mhu-dokumen-berkas {
    margin-block: 24px 32px;
}

.mhu-dokumen-berkas__pratinjau {
    border: 1px solid var(--mhu-garis);
    border-radius: var(--mhu-radius);
    overflow: hidden;
    background: var(--mhu-kertas);
    /* Tinggi bisa disesuaikan pembaca; sengaja hanya vertikal supaya lebarnya
       tetap penuh dan kolom di sekitarnya tidak ikut bergeser. */
    resize: vertical;
    height: 85vh;
    height: 85dvh;
    min-height: 30rem;
}

.mhu-dokumen-berkas__pratinjau > object {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.mhu-dokumen-berkas__gagal {
    background: var(--mhu-kertas);
    padding: 48px 24px;
    text-align: center;
}

.mhu-dokumen-berkas__gagal i {
    font-size: 2rem;
    color: var(--mhu-amber-tua);
    display: block;
    margin-bottom: 12px;
}

.mhu-dokumen-berkas__gagal p {
    margin: 0 0 16px;
    color: var(--mhu-teks-lemah);
}

.mhu-dokumen-berkas__petunjuk {
    margin: 8px 0 0;
    font-size: .75rem;
    color: var(--mhu-teks-lemah);
    text-align: right;
}

.mhu-dokumen-berkas__kartu {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--mhu-kertas);
    border: 1px solid var(--mhu-garis);
    /* Rel amber di kiri — penanda yang sama dengan sub menu aktif, laci ponsel,
       dan daftar isi kelompok. Empat tempat, satu bahasa. */
    border-left: 3px solid var(--mhu-amber-tua);
    border-radius: var(--mhu-radius-kecil);
    padding: 20px;
}

.mhu-dokumen-berkas__kartu > i {
    font-size: 1.5rem;
    color: var(--mhu-amber-tua);
    flex: none;
    margin-top: 2px;
}

.mhu-dokumen-berkas__teks {
    min-width: 0;
}

.mhu-dokumen-berkas__judul {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--mhu-hijau-tua);
    line-height: 1.35;
}

.mhu-dokumen-berkas__ket {
    margin: 0 0 16px;
    font-size: .875rem;
    color: var(--mhu-teks-lemah);
    max-width: 60ch;
}

/* Jenis dan ukuran berkas menempel pada tombolnya, bukan berdiri sendiri:
   keduanya menjawab "apa yang terjadi kalau saya menekan ini". */
.mhu-dokumen-berkas__meta {
    opacity: .75;
    font-weight: 400;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .mhu-dokumen-berkas__kartu {
        padding: 16px;
        gap: 12px;
    }

    /* Di layar sempit tombolnya memenuhi lebar — sasaran sentuh yang jelas,
       dan jenis/ukuran tidak memeras nama tombolnya. */
    .mhu-dokumen-berkas__kartu .mhu-tombol {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}