/* ==========================================================================
   SATPOL PP KOTA PADANG — DESIGN SYSTEM HALAMAN PUBLIK
   --------------------------------------------------------------------------
   Satu-satunya stylesheet halaman publik. Berdiri 100% mandiri:
   tidak memuat Bootstrap, tidak memuat style.css Wowdash, tidak ada CDN.

   FASE LIQUID GLASS — material kaca berlapis ala iOS dengan disiplin
   "Seimbang": kaca tebal (glass-blur) hanya pada elemen yang tumpang
   tindih imagery/gradient/konten (kerangka halaman), sedangkan kartu
   konten memakai permukaan translusi tenang (glass-tint) agar nyaman
   dibaca semua kalangan usia.

   ARSITEKTUR SSOT (wajib dijaga):
   1. Semua nilai material hidup sebagai token di :root dan
      [data-theme="dark"] — nol angka kaca di tempat lain.
   3. View memanggil kelas material secara bebas dan tidak pernah
      menulis nilai kaca sendiri; ganti tema = token dibalik, seluruh
      kaca menyesuaikan otomatis di mana pun ia dipanggil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — sumber kebenaran tunggal seluruh nilai desain
   --------------------------------------------------------------------------
   Palet identitas Satpol PP Kota Padang: khaki tua kehijauan #7E805D
   sebagai warna utama, kuning #D9A424 sebagai aksen aksi, dan merah
   #851713 sebagai warna tegas/darurat.
   ========================================================================== */
:root {
    color-scheme: light;

    /* Khaki — skala utama (tint 50 → shade 900) */
    --sp-primary-50: #F5F6EF;
    --sp-primary-100: #E9EBDD;
    --sp-primary-soft: #EEF0E6;
    --sp-primary-200: #D4D6C4;
    --sp-primary-light: #A8AA8C;
    --sp-primary: #7E805D;
    --sp-primary-dark: #5C5E43;
    --sp-primary-darker: #3E3F2E;
    --sp-primary-deep: #2A2B1F;
    --sp-primary-deepest: #22241A;
    --sp-primary-ink: #1B1D14;
    /* Gelap halus ala mode gelap — dipakai latar seksi pimpinan dan
       menjadi sumber nilai --sp-bg tema gelap agar keduanya identik */
    --sp-night: #171912;
    /* Orb cahaya kanvas mode gelap — dipakai seksi pimpinan agar karakter
       cahayanya identik dengan halaman saat tema gelap aktif */
    --sp-night-orb-1: rgba(126, 128, 93, 0.14);
    --sp-night-orb-2: rgba(217, 164, 36, 0.05);
    /* Warna tetap seksi pimpinan: satu nada gelap yang sama persis di
       tema terang maupun gelap — bukan adaptif, memang konstan */
    --sp-night-tint: #1D1F16;
    --sp-night-surface: #20231A;

    /* Aksen — kuning identitas */
    --sp-accent: #D9A424;
    --sp-accent-dark: #BF9020;
    --sp-accent-deep: #A57C1B;

    /* Tegas / darurat */
    --sp-danger: #851713;

    /* Permukaan kontrol aktif (filter, paginasi, hover tombol) — kontras
       teks putih teruji 6.69:1; sengaja konstan di kedua tema. */
    --sp-active-bg: #5C5E43;

    /* Netral */
    --sp-ink: #1F2417;
    --sp-heading: #2A2B1F;
    --sp-muted: #565A48;
    --sp-faint: #8A8D7C;
    --sp-bg: #FAFAF7;
    --sp-bg-tint: #F3F4EC;
    --sp-surface: #FFFFFF;
    --sp-line: #E4E6DA;
    --sp-line-soft: #EEF0E4;

    /* Teks & garis di atas latar gelap — satu skala, nol nilai liar */
    --sp-on-dark: rgba(255, 255, 255, 0.88);
    --sp-on-dark-soft: rgba(255, 255, 255, 0.78);
    --sp-on-dark-faint: rgba(255, 255, 255, 0.6);
    --sp-on-dark-muted: rgba(255, 255, 255, 0.55);
    --sp-dark-veil: rgba(255, 255, 255, 0.08);
    --sp-line-dark: rgba(255, 255, 255, 0.10);

    /* ---- MATERIAL LIQUID GLASS — token tingkat 1 (nilai) ---- */
    /* Kaca tebal untuk kerangka (header/nav/footer) */
    /* Kaca panel untuk kartu yang mengapung di atas latar kaya */
    /* Glass-tint: permukaan translusi tenang tanpa blur untuk kartu baca */
    --sp-tint-bg: rgba(255, 255, 255, 0.72);
    --sp-tint-bg-strong: rgba(255, 255, 255, 0.86);
    --sp-tint-line: rgba(126, 128, 93, 0.14);

    /* Tekstur noise halus (SVG data-URI internal, tanpa aset eksternal) */
    --sp-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    --sp-noise-opacity: 0.05;

    /* Status semantik flash */
    --sp-accent-soft: #FAF0DA;
    --sp-ok-bg: #F0FDF4;
    --sp-ok-line: #86EFAC;
    --sp-ok-ink: #166534;
    --sp-err-bg: #FEF2F2;
    --sp-err-line: #FCA5A5;
    --sp-err-ink: #991B1B;
    --sp-inf-bg: #EFF6FF;
    --sp-inf-line: #93C5FD;
    --sp-inf-ink: #1D4ED8;
    --sp-warn-ink: #857008;

    /* Efek khas berulang */
    --sp-focus-ring: rgba(126, 128, 93, 0.45);
    --sp-glow-primary: 0 8px 20px rgba(126, 128, 93, 0.32);
    --sp-shadow-hero-text: 0 2px 14px rgba(15, 16, 10, 0.55), 0 1px 3px rgba(15, 16, 10, 0.45);
    --sp-accent-wash: rgba(217, 164, 36, 0.16);
    --sp-empty-bg: #FBFCF8;

    /* Ornamen latar halaman — bola cahaya lembut di balik kaca */
    --sp-bg-orb-1: rgba(126, 128, 93, 0.07);
    --sp-bg-orb-2: rgba(217, 164, 36, 0.05);

    /* Tipografi — display berkarakter + body nyaman baca */
    --sp-font: 'Plus Jakarta Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    --sp-font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    --sp-fz-xs: 0.75rem;
    --sp-fz-sm: 0.875rem;
    --sp-fz-md: 1rem;
    --sp-fz-lg: 1.125rem;
    --sp-fz-xl: 1.375rem;
    --sp-fz-2xl: clamp(1.5rem, 3vw, 2.1rem);
    --sp-fz-display: clamp(2.1rem, 4.8vw, 3.6rem);

    /* Bentuk — radius presisi, lengkung besar untuk komposisi organik */
    --sp-radius-sm: 12px;
    --sp-radius-md: 18px;
    --sp-radius-lg: 26px;
    --sp-radius-xl: 34px;
    --sp-radius-pill: 999px;

    /* Bayangan berlapis lembut — depth modern berbasis elevasi */
    --sp-shadow-sm: 0 1px 2px rgba(31, 36, 23, 0.05), 0 2px 10px rgba(31, 36, 23, 0.06);
    --sp-shadow-md: 0 2px 6px rgba(31, 36, 23, 0.05), 0 14px 32px rgba(31, 36, 23, 0.1);
    --sp-shadow-lg: 0 4px 12px rgba(31, 36, 23, 0.06), 0 26px 60px rgba(31, 36, 23, 0.15);
    --sp-glow-accent: 0 10px 28px rgba(217, 164, 36, 0.38);

    /* Motion — spring tenang ala iOS, terarah, tidak lebay */
    --sp-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --sp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sp-spring: cubic-bezier(0.34, 1.36, 0.34, 1);
    --sp-t-fast: 0.22s;
    --sp-t-med: 0.38s;
    --sp-t-slow: 0.65s;

    /* Tata letak */
    --sp-container: 1200px;
    --sp-gutter: clamp(1rem, 4vw, 2rem);
    --sp-header-h-base: 76px;
    --sp-header-h: var(--sp-header-h-base);
    --sp-header-h-scrolled: 62px;
    --sp-announce-h: 44px;
    --sp-section-gap: clamp(3.5rem, 8vw, 6.5rem);
}

/* --------------------------------------------------------------------------
   2. DARK THEME — pembalikan token; seluruh kaca menyesuaikan otomatis
   ========================================================================== */
[data-theme="dark"] {
    color-scheme: dark;

    --sp-ink: #E9EBDD;
    --sp-heading: #E9EBDD;
    --sp-muted: #B4B7A4;
    --sp-faint: #8A8D7C;
    /* Nada teks interaktif ikut membalik: peran "gelap terbaca" menjadi
       "terang terbaca" di atas permukaan gelap. */
    --sp-primary-dark: #C6C9AE;
    --sp-bg: var(--sp-night);
    --sp-bg-tint: var(--sp-night-tint);
    --sp-surface: var(--sp-night-surface);
    --sp-line: rgba(233, 235, 221, 0.14);
    --sp-line-soft: rgba(233, 235, 221, 0.09);
    --sp-primary-50: rgba(126, 128, 93, 0.14);
    --sp-primary-100: rgba(126, 128, 93, 0.22);
    --sp-primary-soft: rgba(126, 128, 93, 0.16);

    /* Kaca gelap: cahaya masuk dari dalam, bukan dari luar */

    --sp-tint-bg: rgba(32, 35, 26, 0.66);
    --sp-tint-bg-strong: rgba(32, 35, 26, 0.85);
    --sp-tint-line: rgba(233, 235, 221, 0.1);

    --sp-noise-opacity: 0.07;
    --sp-empty-bg: #1B1E15;
    --sp-bg-orb-1: var(--sp-night-orb-1);
    --sp-bg-orb-2: var(--sp-night-orb-2);

    --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.28);
    --sp-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.36);
    --sp-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.32), 0 26px 60px rgba(0, 0, 0, 0.44);
}

/* --------------------------------------------------------------------------
   3. FONT FACE — Bricolage Grotesque (display) + Plus Jakarta Sans (body).
   Keduanya self-hosted di public/assets/fonts dengan lisensi OFL disertakan.
   ========================================================================== */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/BricolageGrotesque-600.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/BricolageGrotesque-700.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/BricolageGrotesque-800.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   4. RESET & DASAR
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sp-header-h) + 24px); }

body {
    margin: 0;
    font-family: var(--sp-font);
    font-size: var(--sp-fz-md);
    line-height: 1.65;
    color: var(--sp-ink);
    background-color: var(--sp-bg);
    background-image:
        radial-gradient(60rem 30rem at 110% -8%, var(--sp-bg-orb-1), transparent 60%),
        radial-gradient(50rem 26rem at -12% 22%, var(--sp-bg-orb-2), transparent 55%);
    background-repeat: no-repeat;
    overflow-x: clip;
    transition: background-color var(--sp-t-med) var(--sp-ease), color var(--sp-t-med) var(--sp-ease);
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--sp-primary-dark); text-decoration: none; transition: color var(--sp-t-fast) var(--sp-ease); }
a:hover { color: var(--sp-primary); }

h1, h2, h3, h4, h5, h6 { color: var(--sp-heading); line-height: 1.18; margin: 0 0 0.6em; font-weight: 700; }
h1, h2, h3, h4 { font-family: var(--sp-font-display); letter-spacing: -0.015em; }
h1 { font-size: var(--sp-fz-display); font-weight: 800; }
h2 { font-size: var(--sp-fz-2xl); font-weight: 800; }
h3 { font-size: var(--sp-fz-xl); }
h4 { font-size: var(--sp-fz-lg); }
h5 { font-size: var(--sp-fz-md); }
h6 { font-size: var(--sp-fz-sm); }
p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

/* Container & seksi */
.container-sp { max-width: var(--sp-container); margin-inline: auto; padding-inline: var(--sp-gutter); }
.section-sp { padding-block: var(--sp-section-gap); }
/* Seksi pertama tepat setelah hero + pengumuman: padding atas ramping
   agar sisa viewport terisi konten nyata, bukan pita kosong */
.section-sp--flush-top { padding-top: clamp(2rem, 4vw, 3.5rem); }
.section-tint {
    background: linear-gradient(180deg, var(--sp-bg-tint), transparent 90%);
}
/* Varian tint penuh: untuk seksi yang berada tepat di atas seksi tint lain
   (berita di atas galeri) sehingga warna mengalir mulus tanpa memulai
   ulang gradasi — satu zona tint kontinu lalu memudar di seksi akhir */
.section-tint--penuh { background: var(--sp-bg-tint); }

/* Ikon remix dalam alur teks */
.ri-inline { font-size: 1.1em; vertical-align: -0.15em; }

/* --------------------------------------------------------------------------
   5. TEKSTUR & KILAU — utilitas dekoratif untuk panel art
   ========================================================================== */

/* Tekstur noise — lapisan grain halus untuk kedalaman panel art */
.noise { position: relative; }
.noise::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--sp-noise);
    opacity: var(--sp-noise-opacity);
    pointer-events: none;
}

/* Kilau sweep — microinteraksi cahaya menyapu material kaca/gelap */
.sweep { position: relative; overflow: hidden; }
.sweep::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -75%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-18deg);
    transition: left 0.65s var(--sp-ease-out);
    pointer-events: none;
}
.sweep:hover::before, .sweep:focus-visible::before { left: 135%; }

/* --------------------------------------------------------------------------
   6. TOMBOL — aksen kuning solid untuk aksi utama, kaca gelap untuk sekunder
   ========================================================================== */
.btn-sp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.9rem;
    border: 0;
    border-radius: var(--sp-radius-pill);
    font: 700 var(--sp-fz-sm) var(--sp-font);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform var(--sp-t-fast) var(--sp-spring), box-shadow var(--sp-t-med) var(--sp-ease), background-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease);
}
.btn-sp i { transition: transform var(--sp-t-fast) var(--sp-ease); }
.btn-sp:hover { transform: translateY(-2px); }
.btn-sp:hover i { transform: translateX(3px); }
.btn-sp:active { transform: translateY(0) scale(0.98); }

.btn-sp--accent { background: var(--sp-accent); color: var(--sp-primary-ink); }
.btn-sp--accent:hover { background: var(--sp-accent-dark); color: var(--sp-primary-ink); box-shadow: var(--sp-glow-accent); }

.btn-sp--ghost {
    background: var(--sp-primary-deep);
    color: #fff;
    border: 1px solid var(--sp-line-dark);
    
}
.btn-sp--ghost:hover { background: var(--sp-dark-veil); border-color: var(--sp-accent); color: var(--sp-accent); }

.btn-sp--outline { background: transparent; color: var(--sp-primary-dark); border: 1.5px solid var(--sp-primary-200); }
.btn-sp--outline:hover { background: var(--sp-active-bg); border-color: var(--sp-active-bg); color: #fff; }

/* --------------------------------------------------------------------------
   7. HEADER SITUS — kaca bar sticky yang menyusut dan menguat saat scroll
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--sp-primary-deepest);
    border-bottom: 1px solid var(--sp-line-dark);
    box-shadow: var(--sp-shadow-md);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--sp-header-h);
    transition: min-height var(--sp-t-med) var(--sp-ease);
}

/* Menyusut saat scroll: ringkas seperti dynamic island iOS */
body.scrolled { --sp-header-h: var(--sp-header-h-scrolled); }
body.scrolled .site-header { background: var(--sp-primary-ink); }

.brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.brand img { height: 46px; width: auto; transition: height var(--sp-t-med) var(--sp-ease); }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__text strong { color: #fff; font-size: var(--sp-fz-sm); font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.brand__text span { color: var(--sp-accent); font-size: var(--sp-fz-xs); font-weight: 600; letter-spacing: 0.18em; white-space: nowrap; }

/* Navigasi desktop — pill hover + underline aksen presisi */
.site-nav { display: flex; align-items: center; gap: 0.15rem; margin: 0; padding: 0; }
.site-nav > li { list-style: none; position: relative; }
.nav-link-sp {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    margin-block: 0.35rem;
    border-radius: var(--sp-radius-pill);
    color: var(--sp-on-dark);
    font-size: var(--sp-fz-sm);
    font-weight: 600;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--sp-t-fast) var(--sp-ease), background-color var(--sp-t-fast) var(--sp-ease);
}
.site-nav > li.active .nav-link-sp { color: var(--sp-accent); }
.nav-link-sp:hover { color: #fff; background: var(--sp-dark-veil); }
.nav-link-sp::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.1rem;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--sp-accent);
    transform: translateX(-50%);
    transition: width var(--sp-t-med) var(--sp-ease-out);
}
.nav-link-sp:hover::after, .site-nav > li.active .nav-link-sp::after { width: 55%; }
.nav-link-sp .caret { font-size: 0.7em; transition: transform var(--sp-t-fast) var(--sp-ease); }
.has-drop:hover .nav-link-sp .caret,
.has-drop.open .nav-link-sp .caret { transform: rotate(180deg); }

/* Dropdown — kaca chip gelap membulat dengan gerak halus */
.drop-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 262px;
    background: var(--sp-primary-deepest);
    border: 1px solid var(--sp-line-dark);
    box-shadow: var(--sp-shadow-md);
    margin: 0;
    padding: 0.7rem;
    list-style: none;
    border-radius: var(--sp-radius-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.97);
    transform-origin: top left;
    transition: opacity var(--sp-t-med) var(--sp-ease), transform var(--sp-t-med) var(--sp-ease-out), visibility var(--sp-t-med);
}
.has-drop:hover > .drop-menu,
.has-drop:focus-within > .drop-menu,
.has-drop.open > .drop-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.drop-menu a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.95rem;
    border-radius: var(--sp-radius-sm);
    color: var(--sp-on-dark);
    font-size: var(--sp-fz-sm);
    font-weight: 500;
    transition: background-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), padding-left var(--sp-t-fast) var(--sp-ease);
}
.drop-menu a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sp-primary-light);
    flex-shrink: 0;
    transition: background-color var(--sp-t-fast) var(--sp-ease), transform var(--sp-t-fast) var(--sp-ease);
}
.drop-menu a:hover {
    background: linear-gradient(90deg, var(--sp-accent-wash), transparent);
    color: var(--sp-accent);
    padding-left: 1.25rem;
}
.drop-menu a:hover::before { background: var(--sp-accent); transform: scale(1.3); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

/* Toggle tema terang/gelap — satu tombol, dua ikon, CSS memilih */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sp-dark-veil);
    border: 1px solid var(--sp-line-dark);
    color: var(--sp-on-dark);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease), transform var(--sp-t-fast) var(--sp-spring);
}
.theme-toggle:hover { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-primary-ink); transform: translateY(-1px); }
.theme-toggle .ri-moon-line { display: none; }
[data-theme="dark"] .theme-toggle .ri-moon-line { display: inline-block; }
[data-theme="dark"] .theme-toggle .ri-sun-line { display: none; }

/* Hamburger */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.burger span { display: block; height: 3px; width: 100%; background: #fff; border-radius: 3px; transition: transform 0.3s var(--sp-ease), opacity 0.3s; }
body.nav-open .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Panel navigasi mobile — kaca bar penuh layar */
.nav-panel {
    position: fixed;
    inset: var(--sp-header-h) 0 0;
    background: var(--sp-primary-deepest);
    z-index: 1020;
    padding: 1.25rem var(--sp-gutter) 2rem;
    overflow-y: auto;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    border-width: 0;
    transform: translateY(-102%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.38s var(--sp-ease-out), opacity 0.3s, visibility 0.3s;
}
body.nav-open .nav-panel { transform: translateY(0); opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

.nav-panel__group { border-bottom: 1px solid var(--sp-line-dark); }
.nav-panel__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0.25rem;
    background: none;
    border: 0;
    color: #fff;
    font: 600 var(--sp-fz-md) var(--sp-font);
    cursor: pointer;
    text-align: left;
}
.nav-panel__toggle .caret { color: var(--sp-accent); transition: transform 0.25s var(--sp-ease); }
.nav-panel__group.open .nav-panel__toggle .caret { transform: rotate(180deg); }
.nav-panel__list { max-height: 0; overflow: hidden; margin: 0; padding: 0 0 0 0.75rem; list-style: none; transition: max-height 0.38s var(--sp-ease); }
.nav-panel__group.open .nav-panel__list { max-height: 480px; }
.nav-panel__list a { display: block; padding: 0.65rem 0.25rem; color: var(--sp-on-dark-soft); font-size: var(--sp-fz-sm); }
.nav-panel__list a:hover { color: var(--sp-accent); }
.nav-panel > .theme-toggle { margin-top: 0.9rem; width: 100%; height: 46px; border-radius: var(--sp-radius-pill); font-size: var(--sp-fz-sm); font-weight: 700; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   8. BAR NOMOR DARURAT — kaca chip bertanda merah tegas mengambang di hero.
   Tidak mengonsumsi alur layout sehingga hero tetap memenuhi viewport.
   ========================================================================== */
/* Bar terpadu: kontak darurat statis kiri + pengumuman marquee kanan.
   Satu rumah dua fungsi — duduk di flow normal setelah hero, nol overlay,
   nol z-index konflik. Hilang jujur bila keduanya kosong.
   Warna halus ter-scope bar ini saja — token global tak tersentuh. */
.notice-bar {
    height: var(--sp-announce-h);
    width: 100%;
    max-width: 100vw;
    display: flex;
    align-items: stretch;
    background: var(--sp-accent);
    color: var(--sp-primary-ink);
    overflow: hidden;
}
/* Zone kiri: kontak darurat statis — merah lembut dengan tepi diagonal /
   Arah /: lebar penuh di atas, menyempit 20px di bawah. Merah duduk di atas
   (z-index) sehingga teks marquee yang melorot ke belakangnya lenyap mulus
   di balik diagonal — menyatu, bukan berhenti di gap kuning. */
.notice-bar__darurat {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding-inline: var(--sp-gutter) 2.75rem;
    flex-shrink: 0;
    background: var(--sp-danger);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.notice-bar__darurat a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff;
    font-size: var(--sp-fz-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
}
.notice-bar__darurat a strong { font-size: var(--sp-fz-sm); }
.notice-bar__darurat a:hover { text-decoration: underline; }
.notice-bar__darurat i { font-size: 1rem; flex-shrink: 0; }
/* Zone kanan: pengumuman marquee kontinu — melorot 20px ke kiri sehingga
   teks berjalan menembus di belakang diagonal merah lalu lenyap mulus */
.notice-bar__marquee {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: -20px;
}
.notice-bar__track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    animation: noticeScroll linear infinite;
    /* Durasi dihitung public.js dari lebar nyata trek sehingga kecepatan
       piksel per detik konstan berapapun jumlah pengumuman (SSOT);
       fallback 80s hanya sekejap sebelum JS menimpanya. */
    animation-duration: var(--durasi-marquee, 80s);
    will-change: transform;
}
.notice-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--sp-fz-sm);
    font-weight: 600;
    white-space: nowrap;
    margin-right: 3rem;
    flex-shrink: 0;
}
.notice-bar__item i { font-size: 1rem; flex-shrink: 0; }
/* Isi pengumuman: teks reguler setelah judul tebal — jujur lengkap */
.notice-bar__item strong { font-weight: 800; }
.notice-bar__isi { font-weight: 500; opacity: 0.9; }
.notice-bar__marquee:hover .notice-bar__track { animation-play-state: paused; }
@keyframes noticeScroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .notice-bar__track { animation: none; }
}
/* Bar terpadu proporsional di mobile — terukur, tidak besar tidak kecil */
@media (max-width: 575px) {
    .notice-bar__darurat { gap: 0.75rem; padding-inline: 0.75rem 1.75rem; }
    .notice-bar__darurat a { font-size: 0.625rem; gap: 0.25rem; }
    .notice-bar__darurat a strong { font-size: var(--sp-fz-xs); }
    .notice-bar__darurat i { font-size: 0.875rem; }
    .notice-bar__item { margin-right: 2rem; gap: 0.375rem; }
    .notice-bar__item i { font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   9. HERO — sinematik penuh viewport, kaca chip badge, kurva bawah organik
   ========================================================================== */
/* Hero: slide menentukan tinggi sendiri dari viewport — tidak bergantung
   pada height chain yang dapat ditimpa inline styles slick.js */
.hero {
    position: relative;
    background: var(--sp-primary-ink);
    overflow: hidden;
}

.hero__track { position: relative; }

/* Slide hero — basis bersama; tinggi diatur per varian di bawah */
.hero .hero__slide {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: clamp(3.5rem, 7vh, 5.5rem);
    overflow: hidden;
}
/* Lapisan artwork poster — presisi 2:1 di dalam kotak slide 2:1.
   Tak bisa diklik — interaksi tetap pada link overlay. */
.hero__artwork {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
/* Tinggi banner mengikuti referensi padang.go.id — piksel tetap 550px,
   lapisan artwork memotong sisi atas/bawah via background cover */
.hero .hero__slide:not(.hero__slide--flat) {
    min-height: 550px;
}
/* Layar sempit: poster tampil utuh tanpa crop seperti perilaku asli —
   tinggi mengikuti lebar (2:1) sehingga seluruh teks banner terbaca */
@media (max-width: 991px) {
    .hero .hero__slide:not(.hero__slide--flat) {
        min-height: 0;
        aspect-ratio: 2 / 1;
    }
}
/* Fallback gradient: tetap memenuhi viewport */
.hero .hero__slide--flat {
    min-height: calc(100vh - var(--sp-header-h-base));
    min-height: calc(100svh - var(--sp-header-h-base));
}
/* Fallback dikompak saat ada bar pengumuman */
.hero--compact .hero__slide--flat {
    min-height: calc(100vh - var(--sp-header-h-base) - var(--sp-announce-h));
    min-height: calc(100svh - var(--sp-header-h-base) - var(--sp-announce-h));
}
/* Layar sangat pendek: konten tetap utuh dengan scroll internal */
@media (max-height: 520px) {
    .hero .hero__slide { padding-block: 3.5rem; }
    .hero__caption h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
}
/* Keterbacaan H1 di atas foto dijaga bayangan huruf */
.hero .hero__caption h1 {
    text-shadow: var(--sp-shadow-hero-text);
}
/* Pastikan display:flex (perataan tengah vertikal) tidak tertimpa
   ".slick-initialized .slick-slide { display:block }" dari slick.css. */
.hero .slick-initialized .hero__slide { display: flex; }
/* Pada slide flex, container wajib mengisi 100% lebar; tepi kiri teks sejajar presisi dengan navbar. */
.hero .hero__slide > .container-sp { width: 100%; }
.hero__slide--flat { background-image:
    radial-gradient(52rem 32rem at 86% 12%, rgba(126, 128, 93, 0.5), transparent 62%),
    radial-gradient(40rem 28rem at 8% 92%, rgba(217, 164, 36, 0.14), transparent 58%),
    linear-gradient(128deg, var(--sp-primary-ink), var(--sp-primary-deep) 55%, var(--sp-primary-dark));
}
/* Caption H1 + CTA: kiri-bawah dengan padding lega — foto menjadi bintang utama */
.hero__caption {
    position: relative;
    max-width: 680px;
    margin-right: auto;
    margin-top: auto;
    padding-bottom: clamp(1.5rem, 5vh, 3rem);
    text-align: left;
}
.hero__caption h1 {
    margin: 0;
    color: #fff;
    font-family: var(--sp-font-display);
    font-size: clamp(1.4rem, 4.2vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-break: break-word;
    text-wrap: balance;
    text-shadow: var(--sp-shadow-hero-text);
}
.hero__caption .hero__cta-btn {
    margin-top: 1.5rem;
    box-shadow: var(--sp-shadow-hero-text);
}

/* Overlay link: seluruh slide clickable — z-index 1, CTA button z-index 2 */
.hero__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    cursor: pointer;
}
/* Container teks TIDAK menghalangi sentuhan — biarkan klik tembus ke
   overlay link di bawahnya. CTA button tetap menerima klik sendiri. */
.hero .container-sp {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.hero .hero__cta-btn {
    pointer-events: auto;
}

/* Seksi pimpinan — satu warna tetap var(--sp-night-tint) di kedua tema:
   terang maupun gelap memakai nada gelap yang sama persis sehingga tampilan
   identik tanpa bergantung mode aktif. Potret resmi 3:4 dengan pelat nama
   menyatu; kartu memakai surface gelap konstan dari keluarga night. */
.leader-section {
    background: var(--sp-night-tint);
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.leader-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 440px);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* Komposisi seimbang saat hanya satu zona terisi: kartu video terpusat
   dengan lebar terkunci, identitas mengisi baris penuh secara alami */
.leader-grid > .leader-video:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 440px;
}
.leader-grid > .leader-identitas:only-child { grid-column: 1 / -1; }
.leader-identitas {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    min-width: 0;
    background: var(--sp-night-surface);
    border: 1px solid var(--sp-line-dark);
    border-radius: var(--sp-radius-lg);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}
/* Bingkai potret resmi: foto 3:4 dengan pelat nama menyatu di bawahnya
   sehingga terbaca sebagai satu bingkai utuh, bukan elemen terpisah */
.leader-potret {
    flex-shrink: 0;
    width: clamp(150px, 18vw, 230px);
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sp-line-dark);
    background: var(--sp-night-surface);
    box-shadow: var(--sp-shadow-lg);
}
.leader-potret img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.leader-potret__caption {
    padding: 0.9rem 1rem 1.1rem;
    text-align: center;
    border-top: 1px solid var(--sp-line-dark);
}
.leader-potret__caption h2 {
    margin: 0 0 0.5rem;
    color: var(--sp-on-dark);
    font-family: var(--sp-font-display);
    font-size: var(--sp-fz-lg);
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
}
.leader-potret__caption .chip-sp {
    background: var(--sp-accent);
    color: var(--sp-primary-ink);
}
/* Varian tint: kartu potret berwajah kaca adaptif tema (terang kaca terang,
   gelap kaca gelap) — dipakai halaman pejabat struktural agar konsisten
   dengan panel-sp dan seluruh kartu design system */
.leader-potret--tint {
    background: var(--sp-tint-bg-strong);
    border-color: var(--sp-tint-line);
    box-shadow: var(--sp-shadow-sm);
}
.leader-potret--tint .leader-potret__caption { border-top-color: var(--sp-tint-line); }
.leader-potret--tint .leader-potret__caption h2 { color: var(--sp-heading); }
/* Kartu dalam grid halaman pejabat: mengisi sel dengan lebar wajar terpusat */
.people-grid .leader-potret {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    flex-shrink: initial;
}
.leader-deskripsi {
    margin: 0;
    min-width: 0;
    color: var(--sp-on-dark-soft);
    font-size: var(--sp-fz-md);
    line-height: 1.75;
    max-width: 46ch;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Kartu video pengenalan — objek mandiri sejajar panel identitas;
   tinggi-lebar 100% mengikuti konten: rasio native 16:9 thumbnail */
.leader-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sp-line-dark);
    background: var(--sp-night-surface);
    box-shadow: var(--sp-shadow-lg);
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
/* Thumbnail murni 100% aslinya — tanpa overlay warna atau penggelapan;
   keterbacaan label dijaga bayangan teksnya sendiri, bukan menggelapkan aset.
   Berada di atas skeleton hingga termuat */
.leader-video img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.leader-video:hover img { transform: scale(1.03); transition: transform var(--sp-t-med) var(--sp-ease); }
.leader-video__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-accent);
    color: var(--sp-primary-ink);
    font-size: 2rem;
    box-shadow: var(--sp-glow-accent);
    transition: transform var(--sp-t-med) var(--sp-ease-out);
}
.leader-video:hover .leader-video__play { transform: scale(1.08); }
.leader-video__label {
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--sp-on-dark);
    font-size: var(--sp-fz-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
/* Skeleton kartu video: kilau lembut identik Instagram di balik thumbnail
   lazy — tertutup otomatis begitu gambar termuat, berlaku pada seluruh
   kartu video di mana pun ia tampil (satu wajah) */
.leader-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            var(--sp-primary-soft) 30%,
            var(--sp-bg-tint) 50%,
            var(--sp-primary-soft) 70%);
    background-size: 220% 100%;
    animation: igShimmer 1.5s linear infinite;
}
.leader-video__play { z-index: 2; }
.leader-video__label { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .leader-video::before { animation: none; }
}

/* Responsif: satu sumbu terpusat di layar sempit — potret, nama, jabatan,
   deskripsi, dan kartu video segaris visual sehingga mata membaca satu alur */
@media (max-width: 991px) {
    .leader-grid { grid-template-columns: 1fr; }
    .leader-video { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 575px) {
    .leader-identitas { flex-direction: column; align-items: center; gap: 1rem; padding: 1.25rem; }
    /* Potret tunduk pada hero: lebar 48vw menjaga luas visual sekitar 60%
       dari poster hero 2:1 sehingga hirarki atas-bawah konsisten */
    .leader-potret { width: min(48vw, 210px); }
    .leader-potret__caption h2 { font-size: var(--sp-fz-md); }
    .leader-potret__caption { padding: 0.75rem 0.75rem 0.9rem; }
    .leader-deskripsi { text-align: center; max-width: 40ch; }
}
/* Layar sangat sempit: tombol putar ramping proporsional */
@media (max-width: 400px) {
    .leader-video__play { width: 56px; height: 56px; font-size: 1.7rem; }
}
/* Layar pendek lanskap: ruang napas seksi dirapatkan agar muat tanpa gulir panjang */
@media (max-height: 520px) {
    .leader-section { padding-block: 2rem; }
}
/* Modal video — overlay gelap pekat, dialog bingkai 16:9, iframe
   di-inject saat dibuka dan dihapus saat ditutup agar putaran berhenti.
   Dialog hadir dengan angkat halus; lebar turut tunduk pada tinggi layar
   sehingga selalu muat di lanskap mobile. */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-gutter);
}
.video-modal[hidden] { display: none; }
.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 7, 0.88);
    opacity: 0;
    transition: opacity var(--sp-t-med) var(--sp-ease);
}
.video-modal__dialog {
    position: relative;
    width: min(1024px, 100%, calc((100svh - 120px) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    box-shadow: var(--sp-shadow-lg);
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity var(--sp-t-med) var(--sp-ease-out), transform var(--sp-t-med) var(--sp-ease-out);
}
.video-modal.terbuka .video-modal__dialog,
.video-modal.terbuka .video-modal__backdrop { opacity: 1; }
.video-modal.terbuka .video-modal__dialog { transform: translateY(0) scale(1); }
.video-modal__frame { width: 100%; height: 100%; }
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close {
    position: absolute;
    top: -52px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--sp-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    color: var(--sp-on-dark);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background var(--sp-t-fast) var(--sp-ease);
}
.video-modal__close:hover { background: var(--sp-accent); color: var(--sp-primary-ink); }
@media (max-width: 575px) {
    .video-modal__close { top: -48px; width: 36px; height: 36px; }
}

/* Mobile notice-bar height token (pola lama dipertahankan) */
@media (max-width: 575px) {
    :root { --sp-announce-h: 38px; }
}

/* Titik navigasi slick — pil di atas foto; responsif presisi per breakpoint */
.hero .slick-dots {
    position: absolute;
    bottom: clamp(36px, 6vh, 60px);
    display: flex !important;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;
}
.hero .slick-dots li { margin: 0; }
.hero .slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-primary-light);
    text-indent: -9999px;
    cursor: pointer;
    transition: width var(--sp-t-med) var(--sp-ease-out), background-color var(--sp-t-med);
}
.hero .slick-dots button:hover { background: var(--sp-surface); }
.hero .slick-dots li.slick-active button { width: 36px; background: var(--sp-accent); }

/* Responsif: mobile — dot kecil, pill ramping */
@media (max-width: 575px) {
    .hero .slick-dots { bottom: 20px; gap: 6px; }
    .hero .slick-dots button { width: 7px; height: 7px; }
    .hero .slick-dots li.slick-active button { width: 24px; }
}

/* Responsif: tablet — dot medium */
@media (min-width: 576px) and (max-width: 991px) {
    .hero .slick-dots { bottom: 28px; gap: 8px; }
    .hero .slick-dots button { width: 9px; height: 9px; }
    .hero .slick-dots li.slick-active button { width: 30px; }
}

/* Touch target: area sentuh luas via padding li — visual dot tetap kecil */
@media (pointer: coarse) {
    .hero .slick-dots li { padding: 12px 8px; margin: -12px -8px; }
}

/* Animasi keterangan — hadir dengan tenang (carousel mode) */
.hero__slide.slick-active .hero__caption > * { animation: heroRise 0.75s var(--sp-ease-out) both; }
@keyframes heroRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   10. STRIP LAYANAN CEPAT — kartu kaca panel mengapung menyusuri kurva hero
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. SECTION BERITA — panel gelap berkubah kurva + video kaca terang kanan
   ========================================================================== */



/* --------------------------------------------------------------------------
   12. KEPALA SECTION, FILTER & GALERI
   ========================================================================== */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.1rem; }
.section-head h2 { margin: 0; position: relative; padding-left: 1.05rem; }
.section-head h2::before { content: ''; position: absolute; left: 0; top: 0.14em; bottom: 0.14em; width: 7px; border-radius: 4px; background: linear-gradient(180deg, var(--sp-accent), var(--sp-accent-dark)); }
.section-head .view-all { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: var(--sp-fz-sm); white-space: nowrap; }
.section-head .view-all:hover { color: var(--sp-accent-dark); }
.section-head .view-all:hover i { transform: translateX(4px); }
.section-head .view-all i { transition: transform var(--sp-t-fast) var(--sp-ease); }

.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.9rem; }
.filter-tab {
    padding: 0.55rem 1.35rem;
    border: 1px solid var(--sp-tint-line);
    border-radius: var(--sp-radius-pill);
    background: var(--sp-tint-bg);
    box-shadow: var(--sp-shadow-sm);
    color: var(--sp-muted);
    font: 600 var(--sp-fz-sm) var(--sp-font);
    cursor: pointer;
    transition: background-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease), box-shadow var(--sp-t-med) var(--sp-ease), transform var(--sp-t-fast) var(--sp-spring);
}
.filter-tab:hover { border-color: var(--sp-primary-light); color: var(--sp-primary-dark); transform: translateY(-1px); }
.filter-tab.active { background: var(--sp-active-bg); border-color: var(--sp-active-bg); color: #fff; box-shadow: var(--sp-glow-primary); }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
/* Arsip paginasi foto galeri: 2 kolom genap 2x5 seperti arsip berita */
.gallery-grid--arsip { grid-template-columns: repeat(2, 1fr); }
/* Varian tiga kolom: panel Galeri beranda (9 kartu terbaru, rapi 3x3)
   dan koleksi galeri lain berkelipatan tiga */
@media (min-width: 992px) {
    .gallery-grid--tiga { grid-template-columns: repeat(3, 1fr); }
}
/* Grid embed Instagram media-murni resmi: 3 post berdampingan, iframe
   malas dimuat. Tinggi kartu terkunci rasio 4:5 pada bingkai media — tak
   bergantung panjang keterangan mana pun
   ditambah kerangka, bar komentar, dan ruang napas — keterangan tampil utuh
   sampai titik akhir dengan jeda nyaman dari dasar kartu; sisa ruang putih
   adalah milik Instagram, seragam dan rapi di seluruh kartu */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
/* Arsip paginasi: 2 kolom — sepuluh item per halaman terisi genap 2x5
   konsisten dengan arsip berita galeri dan infografis */
.ig-grid--arsip { grid-template-columns: repeat(2, 1fr); }
.ig-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sp-line);
    background: var(--sp-surface);
    min-width: 0;
}
/* Skeleton saat embed masih memuat: kilau lembut brand di belakang iframe —
   begitu Instagram selesai melukis, iframe menutupinya otomatis; nol deteksi
   JavaScript, dan tinggi kartu dikunci rasio 4:5 sehingga tak pernah melompat */
.ig-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.ig-card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            var(--sp-primary-soft) 30%,
            var(--sp-bg-tint) 50%,
            var(--sp-primary-soft) 70%);
    background-size: 220% 100%;
    animation: igShimmer 1.5s linear infinite;
}
@keyframes igShimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ig-card__media::before { animation: none; }
}
.ig-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ig-card__isi { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.9rem 1rem 1.05rem; }
.ig-card__deskripsi {
    margin: 0;
    color: var(--sp-muted);
    font-size: var(--sp-fz-sm);
    line-height: 1.55;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-card__lihat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--sp-primary);
    font-size: var(--sp-fz-sm);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--sp-t-fast) var(--sp-ease);
}
.ig-card__lihat:hover { color: var(--sp-accent); }
.g-card {
    position: relative;
    background: var(--sp-tint-bg);
    border: 1px solid var(--sp-tint-line);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-sm);
    overflow: hidden;
    transition: transform 0.34s var(--sp-spring), box-shadow 0.34s var(--sp-ease), opacity 0.3s, border-color 0.34s var(--sp-ease), background-color var(--sp-t-med) var(--sp-ease);
}
.g-card:hover { transform: translateY(-6px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-primary-200); }
/* Item tersaring chip: semua anak grid tersembunyi setara — kartu galeri
   maupun kartu video — satu perilaku penyembunyian */
.gallery-grid > .hidden { display: none; }
.g-card.hidden { display: none; }
/* Media kartu galeri menampilkan aset 100% utuh: kotak mengikuti rasio asli
   foto, bukan memotongnya ke rasio tetap — seluruh sudut aset resmi terlihat.
   Media video memakai rasio 16:9 bawaannya sendiri */
.g-card__media { position: relative; background: var(--sp-primary-soft); overflow: hidden; }
.g-card__media--video { aspect-ratio: 16 / 9; }
/* Foto belum tersedia: media tetap punya wadah proporsional */
.g-card__media--kosong { aspect-ratio: 16 / 10; }
.g-card__media img { width: 100%; height: auto; object-fit: contain; transition: transform 0.6s var(--sp-ease-out); }
.g-card:hover .g-card__media img { transform: scale(1.06); }
.g-card__media video { width: 100%; height: 100%; object-fit: contain; background: var(--sp-primary-ink); }
/* Penampu jujur saat berkas fisik hilang: kartu tetap informatif */
.g-card__ph {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(135deg, var(--sp-primary-soft) 0 14px, var(--sp-primary-50) 14px 28px);
    color: var(--sp-primary-light);
    font-size: 1.8rem;
}
/* Kategori kartu dokumentasi: teks kecil di atas judul — identik pola
   news-card__cat berita (bukan badge/chip overlay) */
.g-card__cat {
    display: block;
    font-size: var(--sp-fz-xs);
    font-weight: 700;
    color: var(--sp-accent-deep);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    overflow-wrap: anywhere;
    margin-bottom: 0.3rem;
}
.g-card__body { padding: 0.95rem 1.15rem 1.15rem; }
.g-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: var(--sp-fz-sm); font-weight: 600; color: var(--sp-heading); line-height: 1.5; overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   13. KEPALA HALAMAN & PANEL KONTEN
   ========================================================================== */
.page-hero {
    position: relative;
    background:
        radial-gradient(46rem 24rem at 90% 0%, var(--sp-focus-ring), transparent 62%),
        linear-gradient(128deg, var(--sp-primary-ink), var(--sp-primary-deep) 62%, var(--sp-primary-darker));
    overflow: hidden;
    border-radius: 0 0 var(--sp-radius-xl) var(--sp-radius-xl);
    
}
.page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sp-accent), transparent 70%);
}
/* Eyebrow kategori — label kecil di atas judul, diturunkan otomatis dari
   route oleh partial _page-head sehingga seluruh halaman konsisten. */
.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.95rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-dark-veil);
    border: 1px solid var(--sp-line-dark);
    color: var(--sp-accent);
    font-size: var(--sp-fz-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.page-hero__inner { padding-block: clamp(2.6rem, 5vw, 4rem); max-width: 760px; }
.page-hero h1 { margin: 0 0 0.45rem; color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.page-hero p { margin: 0; color: var(--sp-on-dark-soft); font-size: var(--sp-fz-lg); overflow-wrap: break-word; }

.panel-sp {
    background: var(--sp-tint-bg-strong);
    border: 1px solid var(--sp-tint-line);
    border-radius: var(--sp-radius-xl);
    box-shadow: var(--sp-shadow-sm);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 1.5rem;
    scroll-margin-top: calc(var(--sp-header-h) + 20px);
    transition: box-shadow var(--sp-t-med) var(--sp-ease), transform var(--sp-t-med) var(--sp-spring);
}
.panel-sp:hover { box-shadow: var(--sp-shadow-md); }
.panel-sp > h2:first-child { display: flex; align-items: center; gap: 0.7rem; margin-top: 0; }
.panel-sp .anchor-bar { flex-shrink: 0; width: 7px; height: 1.05em; border-radius: 4px; background: linear-gradient(180deg, var(--sp-accent), var(--sp-accent-dark)); }

.prose { color: var(--sp-ink); line-height: 1.85; overflow-wrap: break-word; max-width: 75ch; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
/* Tautan bergaya tombol di dalam wadah prosa tetap tombol — garis bawah
   hanya untuk tautan teks, bukan aksi berbentuk tombol */
.prose .btn-sp { text-decoration: none; }

/* Teks konten mengalir langsung di dalam prosa — tanpa kotak, pemisah
   baris penulis tetap dipertahankan seperti halaman artikel berita */
.teks-alami {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Tabel bersih — kepala tabel solid gelap di atas panel translusi */
.table-sp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--sp-fz-sm); }
.table-sp th {
    padding: 0.85rem 1rem;
    text-align: left;
    color: #fff;
    background: var(--sp-primary-deep);
    font-weight: 600;
    white-space: nowrap;
}
.table-sp th:first-child { border-radius: var(--sp-radius-sm) 0 0 0; }
.table-sp th:last-child { border-radius: 0 var(--sp-radius-sm) 0 0; }
.table-sp td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--sp-line); vertical-align: top; overflow-wrap: anywhere; }
.table-sp tr:hover td { background: var(--sp-primary-50); }
.table-sp tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   14. KOMPONEN KONTEN (kartu orang, unit, agenda, daftar)
   ========================================================================== */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* Kartu pejabat dalam grid: leader-potret komponen beranda, mengisi sel
   dengan lebar wajar terpusat — bukan clamp sempit milik konteks flex */
.people-grid .leader-potret {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    flex-shrink: initial;
}

.chip-sp {
    display: inline-block;
    padding: 0.35rem 0.95rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-primary-soft);
    color: var(--sp-primary-dark);
    font-size: var(--sp-fz-xs);
    font-weight: 700;
    overflow-wrap: break-word;
}

.unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.unit-card { position: relative; display: flex; gap: 1rem; align-items: flex-start; transition: transform var(--sp-t-med) var(--sp-spring), box-shadow var(--sp-t-med) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease); }
.unit-card__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(135deg, var(--sp-primary-soft), var(--sp-primary-100)); color: var(--sp-primary-dark); font-size: 1.3rem; }
.unit-card h3 a { color: inherit; text-decoration: none; transition: color var(--sp-t-fast) var(--sp-ease); }
/* Overlay tautan membentang menutupi seluruh kartu — pola yang sama
   dengan news-card, sehingga klik di mana pun membuka halaman detail */
.unit-card h3 a::after { content: ''; position: absolute; inset: 0; }
.unit-card h3 a:hover { color: var(--sp-primary); }
.unit-card:hover { transform: translateY(-5px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-primary-200); }
.unit-card h3 { margin: 0 0 0.3rem; font-size: var(--sp-fz-md); overflow-wrap: break-word; }
.unit-card p { margin: 0; color: var(--sp-muted); font-size: var(--sp-fz-sm); overflow-wrap: break-word; }

.timeline-list { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.timeline-list__item { position: relative; border-left: 3px solid var(--sp-accent); padding: 0.15rem 0 0.15rem 1.15rem; }
.timeline-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.3rem; }
.timeline-list__meta .place { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sp-faint); font-size: var(--sp-fz-xs); }
.timeline-list__item h3 { margin: 0 0 0.2rem; font-size: var(--sp-fz-md); overflow-wrap: break-word; }
.timeline-list__item p { margin: 0; color: var(--sp-muted); font-size: var(--sp-fz-sm); }

.notice-list { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.notice-list__item { border-left: 3px solid var(--sp-danger); padding: 0.15rem 0 0.15rem 1.15rem; }
.notice-list__item h3 { margin: 0.35rem 0 0.25rem; font-size: var(--sp-fz-md); overflow-wrap: break-word; }
.notice-list__item p { margin: 0; color: var(--sp-muted); font-size: var(--sp-fz-sm); overflow-wrap: break-word; }
.notice-list__pengirim { display: block; margin-top: 0.3rem; color: var(--sp-muted); font-size: var(--sp-fz-xs); font-weight: 600; }

.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 0; border-bottom: 1px solid var(--sp-line-soft); transition: padding-left var(--sp-t-fast) var(--sp-ease); }
.link-list li:hover { padding-left: 0.3rem; }
.link-list li:last-child { border-bottom: 0; }
.link-list i { color: var(--sp-primary); margin-top: 0.2rem; flex-shrink: 0; }
.link-list a { font-weight: 600; overflow-wrap: break-word; }

/* Daftar rute titik rawan — simpul bulat khaki pada jalur vertikal,
   peta jalanan sederhana yang tenang dan mudah diikuti mata. */
.titik-list { position: relative; margin: 0; padding: 0; list-style: none; }
.titik-list li {
    position: relative;
    padding: 1rem 0.9rem 1rem 2.6rem;
    border-radius: var(--sp-radius-md);
    transition: background-color var(--sp-t-fast) var(--sp-ease), transform var(--sp-t-fast) var(--sp-ease);
}
.titik-list li:hover { background: var(--sp-primary-50); transform: translateX(4px); }
.titik-list li::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sp-primary-200);
}
.titik-list li:first-child::before { top: 1.9rem; }
.titik-list li:last-child::before { bottom: auto; height: 1.9rem; }
.titik-list li::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 1.5rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sp-surface);
    border: 3px solid var(--sp-primary);
    transition: background-color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease);
}
.titik-list li:hover::after { background: var(--sp-accent); border-color: var(--sp-accent); }
.titik-list strong { display: block; color: var(--sp-heading); font-size: var(--sp-fz-md); line-height: 1.4; }

/* --------------------------------------------------------------------------
   15. FLASH MESSAGE — status tegas terbaca
   ========================================================================== */
.flash {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.3rem;
    border-radius: var(--sp-radius-md);
    font-weight: 600;
    font-size: var(--sp-fz-sm);
    border: 1px solid;
    box-shadow: var(--sp-shadow-sm);
}
.flash i { margin-top: 0.15rem; font-size: 1.15rem; }
.flash--success { background: var(--sp-ok-bg); border-color: var(--sp-ok-line); color: var(--sp-ok-ink); }
.flash--error { background: var(--sp-err-bg); border-color: var(--sp-err-line); color: var(--sp-err-ink); }
.flash--warning { background: var(--sp-accent-soft); border-color: var(--sp-accent); color: var(--sp-warn-ink); }
.flash--info { background: var(--sp-inf-bg); border-color: var(--sp-inf-line); color: var(--sp-inf-ink); }

/* --------------------------------------------------------------------------
   16. EMPTY STATE JUJUR
   ========================================================================== */
.empty-sp {
    padding: clamp(2.25rem, 5vw, 3.5rem) 1.5rem;
    text-align: center;
    border: 1px dashed var(--sp-primary-200);
    border-radius: var(--sp-radius-xl);
    background:
        radial-gradient(28rem 12rem at 50% 0%, var(--sp-primary-50), transparent 70%),
        var(--sp-empty-bg);
}
.empty-sp i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 0.9rem;
    border-radius: 24px;
    background: var(--sp-primary-soft);
    border: 1px solid var(--sp-line-soft);
    font-size: 2rem;
    color: var(--sp-primary-light);
}
.empty-sp h3 { margin: 0 0 0.3rem; font-size: var(--sp-fz-md); }
.empty-sp p { margin: 0 auto; max-width: 460px; color: var(--sp-muted); font-size: var(--sp-fz-sm); overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   17. FOOTER — kaca bar gelap dengan kubah kurva dan mesh halus
   ========================================================================== */
.site-footer {
    position: relative;
    background-color: var(--sp-primary-deepest);
    color: var(--sp-on-dark-soft);
    margin-top: var(--sp-section-gap);
    border-radius: var(--sp-radius-xl) var(--sp-radius-xl) 0 0;
    border-width: 0;
    background-image:
        radial-gradient(48rem 22rem at 8% 0%, rgba(126, 128, 93, 0.3), transparent 60%),
        radial-gradient(40rem 20rem at 95% 10%, rgba(217, 164, 36, 0.07), transparent 55%);
    box-shadow: 0 -14px 40px rgba(31, 36, 23, 0.14);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1.1fr; gap: clamp(1.75rem, 4vw, 3rem); padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
/* Peta lokasi kantor pada widget kontak footer — koordinat nyata dari
   pengaturan instansi; hadir hanya bila terisi */
.footer-map {
    width: 100%;
    height: 180px;
    margin-top: 1.1rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-md);
    display: block;
}
.footer-brand img { height: 44px; width: auto; }
.footer-brand strong { color: #fff; font-size: var(--sp-fz-sm); letter-spacing: 0.04em; }
.footer-brand span { display: block; color: var(--sp-accent); font-size: var(--sp-fz-xs); letter-spacing: 0.18em; }
.footer-widget h4 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.05rem; color: #fff; font-size: var(--sp-fz-md); }
.footer-widget h4::before { content: ''; width: 6px; height: 1em; border-radius: 4px; background: linear-gradient(180deg, var(--sp-accent), var(--sp-accent-dark)); }
.footer-widget ul { margin: 0; padding: 0; list-style: none; font-size: var(--sp-fz-sm); }
.footer-widget li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.65rem; overflow-wrap: break-word; }
.footer-widget li > i { color: var(--sp-accent); margin-top: 0.25rem; }
.footer-widget a { color: var(--sp-on-dark-soft); }
.footer-widget a:hover { color: var(--sp-accent); }
.social-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; }
.social-row a, .social-row span.hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--sp-line-dark);
    border-radius: 50%;
    background: var(--sp-dark-veil);
    color: #fff;
    font-size: 1.1rem;
    transition: background-color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), transform var(--sp-t-fast) var(--sp-spring);
}
.social-row a:hover { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-primary-ink); transform: translateY(-3px); }
.social-row span.hint { border-style: dashed; font-size: var(--sp-fz-xs); color: var(--sp-on-dark-muted); width: auto; padding: 0 1rem; border-radius: var(--sp-radius-pill); }
.footer-bottom { border-top: 1px solid var(--sp-line-dark); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1.25rem; font-size: var(--sp-fz-xs); color: var(--sp-on-dark-faint); }
.footer-bottom strong { color: #fff; }

/* --------------------------------------------------------------------------
   18. TOMBOL SCROLL KE ATAS (progress ring kaca gelap)
   ========================================================================== */
.scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sp-primary-deep);
    border: 1px solid var(--sp-line-dark);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--sp-spring);
    color: #fff;
}
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--sp-primary-deep); }
.scroll-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-top circle { fill: none; stroke: var(--sp-accent); stroke-width: 3; stroke-linecap: round; }
.scroll-top i { position: relative; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   19. HALAMAN PER SUB-BAGIAN (sidebar, hub, indeks berita, paginasi)
   ========================================================================== */
.layout-with-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 1.75rem; align-items: start; }
/* Item grid boleh menyusut di bawah lebar konten (tabel lebar, URL panjang)
   agar overflow ditahan scroll internal, bukan melebarkan halaman di layar kecil */
.layout-with-sidebar > * { min-width: 0; }

.sidebar-sp { position: sticky; top: calc(var(--sp-header-h) + 24px); display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-sp__widget {
    background: var(--sp-tint-bg-strong);
    border: 1px solid var(--sp-tint-line);
    border-radius: var(--sp-radius-lg);
    padding: 1.3rem;
    box-shadow: var(--sp-shadow-sm);
}
.sidebar-sp__widget h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem; font-size: var(--sp-fz-md); }
.sidebar-sp__widget h3::before { content: ''; width: 6px; height: 1em; border-radius: 4px; background: linear-gradient(180deg, var(--sp-accent), var(--sp-accent-dark)); flex-shrink: 0; }

.sidebar-news { display: flex; flex-direction: column; }
.sidebar-news__item { display: flex; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--sp-line-soft); }
.sidebar-news__item:last-child { border-bottom: 0; padding-bottom: 0; }
.sidebar-news__item img { width: 72px; height: auto; flex-shrink: 0; border-radius: var(--sp-radius-sm); }
.sidebar-news__item h4 { margin: 0; font-size: var(--sp-fz-xs); font-weight: 600; line-height: 1.5; color: var(--sp-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.sidebar-news__item h4:hover { color: var(--sp-primary); }
.sidebar-news__item time { display: block; margin-top: 0.25rem; color: var(--sp-faint); font-size: var(--sp-fz-xs); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-cloud a {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-pill);
    background: var(--sp-primary-50);
    color: var(--sp-primary-dark);
    font-size: var(--sp-fz-xs);
    font-weight: 600;
    transition: background-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease);
    overflow-wrap: anywhere;
}
.tag-cloud a:hover { background: var(--sp-active-bg); border-color: var(--sp-active-bg); color: #fff; }

/* Kartu hub — tile besar dengan ikon squircle dan panah bergeser */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
/* Grid kartu kanal media sosial — ikon besar dengan nama kanal,
   wajah kaca tint adaptif tema konsisten kartu design system */
.kanal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.kanal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1.25rem;
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-tint-line);
    background: var(--sp-tint-bg-strong);
    box-shadow: var(--sp-shadow-sm);
    color: var(--sp-heading);
    font-size: var(--sp-fz-md);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--sp-t-med) var(--sp-spring), box-shadow var(--sp-t-med) var(--sp-ease), border-color var(--sp-t-med) var(--sp-ease);
}
.kanal-card i { font-size: 3rem; color: var(--sp-primary); }
.kanal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sp-shadow-lg);
    border-color: var(--sp-accent);
    color: var(--sp-heading);
}
.kanal-card:hover i { color: var(--sp-accent); }
@media (max-width: 767px) {
    .kanal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .kanal-grid { grid-template-columns: 1fr; }
    .kanal-card { flex-direction: row; padding: 1.25rem 1.5rem; }
    .kanal-card i { font-size: 2.25rem; }
}

.hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.6rem;
    background: var(--sp-tint-bg);
    border: 1px solid var(--sp-tint-line);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-sm);
    transition: transform 0.34s var(--sp-spring), box-shadow 0.34s var(--sp-ease), border-color 0.34s var(--sp-ease), background-color var(--sp-t-med) var(--sp-ease);
}
.hub-card:hover { transform: translateY(-5px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-primary-200); }
.hub-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--sp-primary-soft), var(--sp-primary-100));
    color: var(--sp-primary-dark);
    font-size: 1.4rem;
    transition: background-color var(--sp-t-med) var(--sp-ease), color var(--sp-t-med) var(--sp-ease), border-radius 0.45s var(--sp-ease-out);
}
.hub-card:hover .hub-card__icon { background: var(--sp-accent); color: var(--sp-primary-ink); border-radius: 50%; }
.hub-card h3 { margin: 0; font-size: var(--sp-fz-md); }
.hub-card p { margin: 0; color: var(--sp-muted); font-size: var(--sp-fz-sm); overflow-wrap: break-word; }
.hub-card .hub-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.55rem; color: var(--sp-primary-dark); font-size: var(--sp-fz-xs); font-weight: 700; }
.hub-card .hub-card__more i { transition: transform var(--sp-t-fast) var(--sp-ease); }
.hub-card:hover .hub-card__more { color: var(--sp-accent-deep); }
.hub-card:hover .hub-card__more i { transform: translateX(4px); }

/* Indeks berita — kartu image-forward dengan zoom halus */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* Arsip paginasi: 2 kolom — sepuluh item per halaman terisi genap
   2x5 tanpa slot yatim; hanya untuk halaman yang memakai paginasi */
.news-grid--arsip { grid-template-columns: repeat(2, 1fr); }
.news-card {
    position: relative;
    background: var(--sp-tint-bg);
    border: 1px solid var(--sp-tint-line);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-sm);
    overflow: hidden;
    transition: transform 0.34s var(--sp-spring), box-shadow 0.34s var(--sp-ease), border-color 0.34s var(--sp-ease), background-color var(--sp-t-med) var(--sp-ease);
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-primary-200); }
/* Media kartu menampilkan aset 100% utuh: kotak mengikuti rasio asli foto,
   bukan memotongnya ke rasio tetap — seluruh sudut aset resmi terlihat.
   Latar media transparan: hanya permukaan kartu adaptif tema yang tampak,
   tanpa blok warna mandiri di area kosong kolom media */
.news-card__media { display: block; overflow: hidden; }
.news-card__media img { width: 100%; height: auto; object-fit: contain; transition: transform 0.6s var(--sp-ease-out); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
.news-card__cat { font-size: var(--sp-fz-xs); font-weight: 700; color: var(--sp-accent-deep); text-transform: uppercase; letter-spacing: 0.07em; overflow-wrap: anywhere; }
.news-card__title { margin: 0; font-family: var(--sp-font-display); font-size: var(--sp-fz-lg); font-weight: 700; line-height: 1.4; color: var(--sp-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
/* Area klik dibebaskan: tautan judul meregang meliputi seluruh kartu
   sehingga klik di mana pun pada kartu menuju detail yang sama */
.news-card__title::after { content: ''; position: absolute; inset: 0; }
.news-card__title:hover { color: var(--sp-primary); }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: auto; color: var(--sp-faint); font-size: var(--sp-fz-xs); }
.news-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.news-card__excerpt { margin: 0; color: var(--sp-muted); font-size: var(--sp-fz-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }

/* Varian kartu fitur horizontal — program kerja: media kiri, isi kanan.
   Tanpa foto, isi mengisi kartu penuh secara alami (flex, tanpa :has). */
.news-card--fitur { display: flex; flex-wrap: wrap; align-items: stretch; }
/* Duo cermin beranda: dua kartu unggulan bersebelahan saling bercermin —
   kiri media-then-teks, kanan teks-then-media. Kartu memakai varian fitur
   yang sama dengan halaman Program sehingga seluruh sistem identik */
.news-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.news-card--fitur--balik { flex-direction: row-reverse; }
.news-card--fitur .news-card__media { flex: 0 0 260px; min-height: 180px; display: flex; align-items: center; }
.news-card--fitur .news-card__body { flex: 1 1 260px; min-width: 0; justify-content: center; }
@media (max-width: 575px) {
    .news-card--fitur .news-card__media { flex-basis: 100%; min-height: 0; }
}

/* Paginasi publik — pil translusi */
.pagination-sp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 2.25rem 0 0; }
.pagination-sp a, .pagination-sp span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.85rem;
    border: 1px solid var(--sp-tint-line);
    border-radius: var(--sp-radius-pill);
    background: var(--sp-tint-bg);
    
    color: var(--sp-muted);
    font-size: var(--sp-fz-sm);
    font-weight: 600;
    transition: background-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease);
}
.pagination-sp a:hover { border-color: var(--sp-primary-light); color: var(--sp-primary-dark); background: var(--sp-primary-50); }
.pagination-sp .active { background: var(--sp-active-bg); border-color: var(--sp-active-bg); color: #fff; }
.pagination-sp .disabled { opacity: 0.45; pointer-events: none; }
.pagination-info { margin: 1.25rem 0 0; text-align: center; color: var(--sp-faint); font-size: var(--sp-fz-xs); }

/* Peta lokasi kantor */
.map-frame { border: 0; border-radius: var(--sp-radius-lg); width: 100%; height: 380px; box-shadow: var(--sp-shadow-sm); }

/* Meta detail berita */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; color: var(--sp-muted); font-size: var(--sp-fz-sm); }
.article-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--sp-line); }

/* Konten editor Quill pada detail berita publik */
.prose .ql-code-block-container {
  background: #23241f;
  color: #f8f8f2;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 1rem 0;
  overflow-x: auto;
}

.prose .ql-code-block {
  font-family: monospace, monospace;
  white-space: pre-wrap;
}

/* Chip kategori pada detail berita */
.chip-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.95rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-primary-soft);
    color: var(--sp-primary-dark);
    font-size: var(--sp-fz-xs);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.chip-cat:hover { background: var(--sp-active-bg); color: #fff; }

/* --------------------------------------------------------------------------
   20. PITA AJAKAN PENUTUP (CTA band)
   ========================================================================== */

/* --------------------------------------------------------------------------
   21. MOTION — reveal on scroll, tenang dan terarah
   --------------------------------------------------------------------------
   Kelas .reveal diberikan oleh public.js secara otomatis pada kartu dan
   panel sehingga view tetap bersih tanpa markup animasi manual.
   ========================================================================== */
.reveal { opacity: 0; }
.reveal.reveal-in {
    opacity: 1;
    animation: reveal-naik var(--sp-t-slow) var(--sp-ease-out) backwards;
}
@keyframes reveal-naik {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE — mobile-first guarantee
   ========================================================================== */
@media (max-width: 1200px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid--arsip { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-duo { grid-template-columns: repeat(2, 1fr); }
    .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Tablet: duo berita menjadi satu kolom — kartu unggulan lebar penuh
   sehingga cermin tidak dipaksa di ruang sempit */
@media (max-width: 991px) {
    .news-duo { grid-template-columns: 1fr; }
    .ig-grid, .ig-grid--arsip { grid-template-columns: 1fr; justify-items: center; }
    .ig-card { max-width: 540px; width: 100%; }
}
@media (max-width: 991px) {
    .site-nav { display: none; }
    .header-actions { gap: 0.4rem; }
    .burger { display: flex; }
    .nav-panel { display: block; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .people-grid, .unit-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid .footer-widget:first-child { grid-column: 1 / -1; }

    .layout-with-sidebar { grid-template-columns: 1fr; }
    .sidebar-sp { position: static; }
}

@media (max-width: 767px) {
    .brand__text { display: none; }
    .brand img { height: 40px; }
    .section-sp { padding-block: clamp(2.75rem, 10vw, 4.5rem); }
    body.scrolled .brand img { height: 36px; }
}

@media (max-width: 575px) {
    .gallery-grid, .people-grid, .unit-grid, .grid-2 { grid-template-columns: 1fr; }
    .news-grid, .hub-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hub-grid--dua, .people-grid--dua, .unit-grid--dua { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   23. POLES AKHIR — konsistensi, mikrointeraksi, aksesibilitas, kenyamanan
   ========================================================================== */

/* Seleksi teks identitas kuning */
::selection { background: var(--sp-accent); color: var(--sp-primary-ink); }


/* Scrollbar ramping berwarna khaki (Firefox + WebKit) */
* { scrollbar-width: thin; scrollbar-color: var(--sp-primary-light) var(--sp-primary-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sp-primary-soft); }
::-webkit-scrollbar-thumb { background: var(--sp-primary-light); border-radius: 999px; border: 2px solid var(--sp-primary-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--sp-primary); }

/* Fokus keyboard jelas dengan aksen kuning (kontras di terang dan gelap) */
:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 2px; border-radius: 4px; }

/* Placeholder tenang untuk gambar kartu yang termuat / gagal termuat */
.g-card__media > img, .g-card__media > video { position: relative; z-index: 1; }

.g-video { position: relative; height: 100%; }
.g-video video { width: 100%; height: 100%; object-fit: contain; background: var(--sp-primary-ink); }
.g-video__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    background: var(--sp-primary-deep);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.35s var(--sp-ease);
}
.g-video__play i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sp-primary-deep);
    border: 1px solid var(--sp-line-dark);
    
    font-size: 1.6rem;
    transition: transform 0.3s var(--sp-spring), background-color 0.3s var(--sp-ease), color 0.3s;
}
.g-video__play:hover i { transform: scale(1.14); background: var(--sp-accent); color: var(--sp-primary-ink); }
.g-video__play span { font-size: var(--sp-fz-xs); font-weight: 700; letter-spacing: 0.04em; }
.g-video.sedang-putar .g-video__play { opacity: 0; pointer-events: none; }

/* Artikel: lebar baca nyaman + tipografi kaya namun tenang */
.prose h2 { margin-top: 1.6em; }
.prose h3, .prose h4 { margin-top: 1.45em; }
.prose ul li + li, .prose ol li + li { margin-top: 0.4em; }
.prose blockquote {
    margin: 1.4em 0;
    padding: 1.05rem 1.35rem;
    border: 0;
    border-left: 5px solid var(--sp-accent);
    border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0;
    background: var(--sp-primary-50);
    color: var(--sp-heading);
    font-weight: 600;
}
.prose img { border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); }

/* Layar pendek (laptop 13 inci): hero tetap penuh mengikuti viewport */
@media (max-height: 720px) {
}

/* Aset foto tampil murni 100% asli di kedua tema — tanpa filter peredup,
   konsisten dengan standar kemurnian aset di hero, video, dan berita */

/* Kilau juga patuh penghemat energi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. HIGIENE STYLING — satu-satunya sumber jarak, warna, dan varian
   --------------------------------------------------------------------------
   View tidak menulis style="..." tata letak; semuanya hidup di sini agar
   media query tidak pernah tertimpa dan tidak ada duplikasi nilai.
   ========================================================================== */

/* Varian --dua: grid dua kolom yang aman turun ke satu kolom di ponsel */
.hub-grid--dua { grid-template-columns: repeat(2, 1fr); }
.people-grid--dua { grid-template-columns: repeat(2, 1fr); }
.unit-grid--dua { grid-template-columns: repeat(2, 1fr); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 575px) { .grid-2 { grid-template-columns: 1fr; } }

/* Peta lokasi lebih ringkas di ponsel agar tidak memakan seluruh layar */
@media (max-width: 575px) {
    .map-frame { height: 260px; }
}

/* Panel terakhir kolom utama tidak berjarak bawah */
.layout-with-sidebar .panel-sp:last-child { margin-bottom: 0; }

/* Catatan teks redup yang jujur untuk state belum terisi */
.muted-note { margin: 0; color: var(--sp-muted); font-size: var(--sp-fz-sm); overflow-wrap: break-word; }
.muted-note--rapat { margin-top: 0.2rem; }

/* Baris sosial varian terang (sidebar) dan rapat (tanpa jarak atas) */
.social-row--flush { margin-top: 0; }
.social-row--terang a { border-color: var(--sp-line); color: var(--sp-primary-dark); background: var(--sp-primary-50); }
.social-row--terang a:hover { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-primary-ink); }
.social-row--terang .hint--terang {
    border-style: dashed;
    width: auto;
    padding: 0 1rem;
    border-radius: var(--sp-radius-pill);
    display: inline-flex;
    align-items: center;
    font-size: var(--sp-fz-xs);
    color: var(--sp-faint);
}

/* Wadah flash di bagian atas main */
.site-main-flash { padding-top: 1.25rem; }

/* Blok aksi formulir: baris tombol yang rapi dan lentur */
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.form-actions--terpisah { margin-top: 2rem; }

/* Perataan kolom tabel: rata tengah dan rata kanan */
.table-sp .ta-center { text-align: center; }
.table-sp .ta-right { text-align: right; }

/* Target sentuh nyaman di perangkat layar sentuh — dots di atas sudah
   ditangani via padding li, bukan min-width yang merusak visual */
@media (pointer: coarse) {
    .filter-tab, .scroll-top, .theme-toggle, .a11y-fab { min-height: 44px; min-width: 44px; }
    .filter-tab { padding: 0.7rem 1.4rem; }
}

/* Kelas pengganti sisa inline tata letak terakhir */
.g-card--flush { margin: 0; }
.prose--flush { margin: 0; }
.judul-artikel { margin-bottom: 1rem; }
.sampul-artikel { margin-bottom: 1.75rem; }
/* Gambar artikel yang mengikuti teks konten bernapas seperti ritme berita */
.prose .teks-alami + .sampul-artikel { margin-top: 1.75rem; }
.table-scroll { overflow-x: auto; }
.teks-legap { min-width: 0; }
.table-sp .kol-no { width: 56px; }
.table-sp .kol-tahun { width: 110px; text-align: center; }
.table-sp .kol-anggaran { width: 190px; text-align: right; }
.table-sp .kol-aksi { width: 120px; text-align: center; }
.clamp-3 { -webkit-line-clamp: 3; }

/* --------------------------------------------------------------------------
   25. KEAMANAN LINTAS UKURAN — 320px hingga ultra-wide
   ========================================================================== */

/* Ultra-wide (≥1920px): konten tetap terkapsul 1200px, latar menyatu */
@media (min-width: 1920px) {
    html { font-size: 17px; }
}

/* Ponsel lanskap (tinggi < 500px): header tak makan seluruh layar */
@media (max-height: 500px) and (orientation: landscape) {
    :root { --sp-header-h-base: 56px; --sp-header-h-scrolled: 52px; }
    .brand img { height: 36px; }
    .nav-panel { inset: 56px 0 0; }
}

/* Ketajaman layar ekstra-tinggi (2x/3x DPR): pastikan font ikon tajam */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* Pastikan gambar yang gagal termuat tidak tampak seperti ikon broken */
img { color: transparent; font-size: 0; }
.g-card__media img, .news-card__media img, .sidebar-news__item img { min-height: 1px; }
.hero__slide[style*="background-image"] { background-color: var(--sp-primary-deep); }


/* --------------------------------------------------------------------------
   26. AKSESIBILITAS — FAB, panel kontrol, dan mode tampilan disabilitas
   ========================================================================== */
.a11y-fab {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 90;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sp-primary-deep);
    border: 1px solid var(--sp-line-dark);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: background-color var(--sp-t-fast) var(--sp-ease), transform var(--sp-t-fast) var(--sp-ease);
}
.a11y-fab:hover,
.a11y-fab[aria-expanded="true"] { background: var(--sp-primary-deep); transform: translateY(-2px); }

.a11y-panel {
    position: fixed;
    left: 1rem;
    bottom: calc(20px + 46px + 12px);
    z-index: 91;
    width: min(320px, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    border: 1px solid var(--sp-line-dark);
    border-radius: var(--sp-radius-md);
    background: var(--sp-primary-ink);
    color: var(--sp-on-dark);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel__judul { margin: 0 0 0.75rem; font-size: var(--sp-fz-md); font-weight: 800; color: var(--sp-accent); }
.a11y-panel__baris { margin-bottom: 0.85rem; }
.a11y-panel__label { display: block; margin-bottom: 0.4rem; font-size: var(--sp-fz-xs); font-weight: 700; color: var(--sp-on-dark-soft); }
.a11y-panel__grup { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.a11y-btn {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--sp-line-dark);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--sp-on-dark);
    font: 700 var(--sp-fz-sm) var(--sp-font);
    cursor: pointer;
    transition: background-color var(--sp-t-fast) var(--sp-ease), color var(--sp-t-fast) var(--sp-ease), border-color var(--sp-t-fast) var(--sp-ease);
}
.a11y-btn:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.a11y-btn[aria-pressed="true"] { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-primary-ink); }
.a11y-btn--reset { width: 100%; margin-top: 0.25rem; }

/* Mode tampilan difilter pada header/main/footer — FAB, panel, dan
   scroll-top berada di luar tiga wadah itu sehingga tetap terpasang
   kaku di viewport serta bebas dari filter. */
html.a11y-abu .site-header, html.a11y-abu main, html.a11y-abu .site-footer { filter: grayscale(1); }
html.a11y-terbalik .site-header, html.a11y-terbalik main, html.a11y-terbalik .site-footer { filter: invert(1) hue-rotate(180deg); }
html.a11y-garis .site-header a, html.a11y-garis main a, html.a11y-garis .site-footer a { text-decoration: underline !important; }
html.a11y-kontras .site-header, html.a11y-kontras main, html.a11y-kontras .site-footer,
html.a11y-kontras main section, html.a11y-kontras main article, html.a11y-kontras main .panel-sp,
html.a11y-kontras main .hub-card, html.a11y-kontras main .notice-bar,
html.a11y-kontras .site-header .nav-panel { background: #000 !important; background-image: none !important; color: #fff !important; }
html.a11y-kontras main :is(h1, h2, h3, h4, h5, h6, p, li, td, th, figcaption, span, label, strong, em, small) { color: #fff !important; }
html.a11y-kontras main a, html.a11y-kontras .site-header a, html.a11y-kontras .site-footer a { color: #ffd400 !important; text-decoration: underline; }
html.a11y-kontras main :is(div, section, article, li, img, table, iframe) { border-color: #fff; }
html.a11y-kontras main img { filter: contrast(1.15); outline: 1px solid #fff; }
html.a11y-kontras main :is(button, .btn-sp) { background: #ffd400 !important; color: #000 !important; border-color: #ffd400 !important; }
html.a11y-kontras main .flash { background: #000 !important; color: #fff !important; border: 1px solid #ffd400 !important; }

/* Indikator tahap ukuran huruf: Normal, Besar 1-5, atau Kecil 1-5. */
.a11y-level { margin-left: auto; align-self: center; font-size: var(--sp-fz-xs); font-weight: 800; color: var(--sp-accent); }
.a11y-btn:disabled { opacity: 0.45; cursor: not-allowed; }

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


/* Skip-link: tersembunyi di atas layar, muncul saat menerima fokus keyboard. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3.25rem;
    z-index: 100;
    padding: 0.6rem 1.1rem;
    border-radius: 0 0 var(--sp-radius-md) var(--sp-radius-md);
    background: var(--sp-accent);
    color: var(--sp-primary-ink);
    font-weight: 700;
    transition: top var(--sp-t-fast) var(--sp-ease);
}
.skip-link:focus { top: 0; }
#konten-utama:focus { outline: none; }

/* FAB proporsional di layar sempit — tidak menutupi konten utama. */
@media (max-width: 575px) {
    .a11y-panel { width: calc(100vw - 72px); }
}