:root {
  --color-primary: #8f1f0b;
  --color-primary-dark: #671607;
  --color-primary-deep: #2f140e;
  --color-accent: #b98f24;
  --color-accent-soft: #fbf2d8;
  --color-ink: #1d2730;
  --color-muted: #57646f;
  --color-line: #d9e0e7;
  --color-surface: #ffffff;
  --color-soft: #f5f7f6;
  --color-green: #1f5b4b;
  --color-blue: #244b6d;
  --page-padding: clamp(16px, 4vw, 64px);
  --radius: 8px;
  --radius-card: 12px;
  --shadow-card: 0 10px 26px rgba(29, 39, 48, 0.06);
  --shadow-soft: 0 18px 42px rgba(29, 39, 48, 0.1);
  --font-scale-adjust: 0rem;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', 'Trebuchet MS', sans-serif;

  /* --- Skala tipografi ---
     Sebelumnya halaman merender 37 ukuran font, 13 di antaranya berdesakan
     antara 8,96px dan 14,4px. Tiga belas langkah dalam rentang 5,4px tidak bisa
     berarti tiga belas hal berbeda, jadi tidak berarti apa-apa. Delapan langkah
     ini yang boleh dipakai komponen baru.

     Semuanya diturunkan dari --font-base, bukan dari rem mati, supaya kontrol
     "perbesar teks" di panel aksesibilitas ikut menskalakan seluruh halaman -
     bukan cuma teks isi. */
  --font-base: calc(1rem + var(--font-scale-adjust));
  /* Tiga langkah kecil ini bukan angka pilihan bebas: keduanya diturunkan dari
     tiga gerombolan yang benar-benar dipakai di antara 28 nilai lama di pita
     0,55-0,95rem. Menyanapkan ke sini menggeser teks paling jauh 1,6px. */
  --step--3: calc(var(--font-base) * 0.66);   /* 10,6px - label mikro */
  --step--2: calc(var(--font-base) * 0.76);   /* 12,2px - eyebrow, chip, meta */
  --step--1: calc(var(--font-base) * 0.88);   /* 14,1px - keterangan, tautan */
  --step-0: var(--font-base);                 /* 16px   - teks isi */
  --step-1: calc(var(--font-base) * 1.2);     /* 19,2px - lead, judul ancillary */
  --step-2: calc(var(--font-base) * 1.45);    /* 23,2px - h3 */
  --step-3: calc(var(--font-base) * 1.75);    /* 28px   - h2 standar */
  --step-4: calc(var(--font-base) * 2.15);    /* 34,4px - h2 feature */
  --step-5: calc(var(--font-base) * 3);       /* 48px   - display */

  /* --- Skala jarak ---
     Kelipatan 4px. Nilai di luar daftar ini (2, 3, 5, 7, 9, 14, 18, 22px yang
     sempat dipakai) adalah improvisasi, bukan keputusan. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Tingkat seksi ---
     Jarak antarseksi dulu seragam 40px, kelimanya, varians nol. Tidak ada satu
     pun sinyal spasial bahwa ada seksi yang lebih penting. Tiga tingkat ini yang
     membuat halaman punya argumen. */
  --section-gap-feature: 96px;
  --section-gap-standard: 56px;
  --section-gap-ancillary: 32px;
}

body {
  --showcase-active-bg: var(--color-accent-soft);
}

* {
  box-sizing: border-box;
}

/* Kontrol form tidak mewarisi huruf brand secara default, jadi tombol, input,
   dan select jatuh ke huruf UA - 32 string di beranda merender Arial, termasuk
   seluruh tab periode DIPA dan tombol Cari. Satu aturan menutup semuanya. */
button,
input,
select,
textarea,
optgroup {
  font: inherit;
  letter-spacing: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-ink);
  background:
    linear-gradient(180deg, #ffffff 0, var(--color-soft) 520px),
    var(--color-soft);
  font-family: var(--font-body);
  font-size: calc(1rem + var(--font-scale-adjust));
  line-height: 1.55;
}


body.is-dark {
  --color-ink: #edf2f7;
  --color-muted: #c7d0d9;
  --color-line: #46515a;
  --color-surface: #151c22;
  --color-soft: #0f151a;
  background: #0f151a;
}

body.is-dark {
  --showcase-active-bg: var(--dark-content-raised, #222d35);
}

a {
  color: var(--color-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 12px;
}

.skip-link:focus-visible {
  left: 12px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header,
.hero,
.quick-links,
.site-main,
.home-grid,
.home-juknis-layout,
.site-footer {
  width: 100%;
  background: var(--color-surface);
}

.topbar {
  /* Satu baris stabil. Container query di bawah mengurangi informasi duplikat
     saat zoom mempersempit ruang internal tanpa mengecilkan teks. */
  container: topbar / inline-size;
  height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--page-padding);
  background: var(--color-ink);
  color: #cdd4da;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.topbar .custom {
  width: 100%;
}

.topbar-info {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.topbar-group {
  display: flex;
  /* Tiap grup tetap satu baris; yang boleh membungkus hanya antar-grup di
     .topbar-info. Ini membatasi topbar pada maksimum dua baris, berapa pun
     metrik font yang sedang aktif. */
  flex-wrap: nowrap;
  gap: 24px;
  align-items: center;
}

.topbar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Teks item tidak boleh melipat: melipat menambah tinggi baris dan itulah
     yang menggeser halaman saat lebar teks berubah sesaat. */
  white-space: nowrap;
}

/* Di bawah 1440px, deskriptor situs dibuang dari topbar supaya baris kontak
   muat dalam satu baris berapa pun metrik fontnya. Isinya - "Website resmi
   Pengadilan Negeri Natuna Kelas II" - sudah dinyatakan h1 header tepat di
   bawahnya, jadi tidak ada informasi yang hilang. */
@media (max-width: 1440px) {
  .topbar-desc {
    display: none;
  }
}

/* Di bawah 1180px baris kontak butuh dua baris dan tidak muat di topbar yang
   tingginya dipatok. Alamat surel yang dilepas: masih tercantum di footer dan
   halaman Kontak, sedangkan telepon dan jam layanan tetap di sini. */
@media (max-width: 1180px) {
  .topbar-item:has(a[href^="mailto"]) {
    display: none;
  }
}

/* Placeholder server "08.00-16.30 WIB" (117px) diganti JS dengan salah satu
   dari tiga nilai; yang terpanjang, "Tutup (Libur Akhir Pekan)", 164px.
   Selisih itu cukup membalik keputusan wrap .topbar-info dan menggeser seluruh
   halaman. Lebar dikunci pada nilai terpanjang. */
#dynamic-service-hours {
  display: inline-block;
  min-width: 12.5em;
}


/* Media query viewport tidak selalu berubah saat browser zoom. Container query
   membaca ruang aktual topbar: 1254px pada 125%, sekitar 1045px pada 150%. */
@container topbar (max-width: 1440px) {
  .topbar-desc {
    display: none;
  }
}

@container topbar (max-width: 1180px) {
  .topbar-item:has(a[href^="mailto"]) {
    display: none;
  }
}

@container topbar (max-width: 900px) {
  #live-clock-date {
    display: none;
  }

  .topbar-clock #live-clock-time {
    border-left: 0;
    padding-left: 0;
  }
}
.topbar-item strong {
  color: #fff;
  font-weight: 700;
}

.accessibility-tools {
  display: none !important;
}

body.is-dark .topbar {
  background: #151c22;
  color: #d8e0e8;
}

body.is-dark .quick-links.app-strip {
  background: #0f151a;
}

body.is-dark .header-brand {
  background:
    radial-gradient(circle at 8% 0, rgba(185, 143, 36, .12), transparent 34%),
    linear-gradient(110deg, rgba(143, 31, 11, .12), transparent 58%),
    #151c22;
}

body.is-dark .brand-lockup .brand-title {
  color: #f3c96b;
  text-shadow: none;
}

body.is-dark .brand-lockup p:not(.brand-title) {
  color: #c7d0d9;
}

body.is-dark .court-brand-badges.header-brand-lockup {
  border-color: rgba(243, 201, 107, .34);
  background: #222d35;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
}

body.is-dark .asn-berakhlak-mark--light {
  display: none;
}

body.is-dark .asn-berakhlak-mark--dark {
  display: block;
}

body.is-dark .topbar-item strong {
  color: #f3c96b;
}

body.is-dark .topbar a {
  color: #f3c96b;
  border-bottom-color: rgba(243, 201, 107, 0.4);
}

body.is-dark .topbar a:hover {
  color: var(--color-accent);
}

body.is-dark .topbar-clock {
  color: #d8e0e8;
}

body.is-dark .topbar-clock #live-clock-time {
  border-left-color: rgba(255, 255, 255, 0.16);
}
._access-icon,
._access-menu {
  display: none !important;
}

.access-panel {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  font-family: var(--font-body);
}

.access-panel-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(185, 143, 36, 0.95);
  border-radius: 999px;
  padding: 0;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(145deg, var(--color-green), var(--color-primary-dark));
  box-shadow:
    0 0 0 4px rgba(251, 242, 216, 0.82),
    0 18px 36px rgba(47, 20, 14, 0.32);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.access-panel-toggle::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: inherit;
  pointer-events: none;
}

.access-panel-toggle:hover,
.access-panel-toggle:focus-visible,
.access-panel-toggle.is-active {
  border-color: #f5c542;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 5px rgba(251, 242, 216, 0.9),
    0 22px 42px rgba(47, 20, 14, 0.38);
}

.access-panel-toggle svg {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}

.access-panel-body {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: min(300px, calc(100vw - 32px));
  border: 1px solid rgba(143, 31, 11, 0.16);
  border-radius: 18px;
  padding: 14px;
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
}

.access-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.access-panel-heading strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.access-panel-close {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: var(--color-primary);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 800;
  cursor: pointer;
}

.access-panel-group {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.access-panel-stack {
  flex-direction: column;
}

.access-panel button,
.access-panel select {
  touch-action: manipulation;
}

.access-panel-action,
.access-panel-dark,
.access-panel-voice {
  min-height: 46px;
  border: 1px solid rgba(143, 31, 11, 0.14);
  border-radius: 14px;
  padding: 9px 12px;
  color: var(--color-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(245, 247, 246, 0.96)),
    var(--color-soft);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.access-panel-action {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.access-panel-action span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 28px;
  border-radius: 10px;
  color: var(--color-primary);
  background: var(--color-accent-soft);
  font-weight: 900;
}

.access-panel-action:hover,
.access-panel-dark:hover,
.access-panel-voice:hover {
  transform: translateY(-1px);
  border-color: rgba(185, 143, 36, 0.72);
  box-shadow: 0 10px 20px rgba(29, 39, 48, 0.08);
}

.access-panel-action[aria-pressed="true"],
.access-panel-dark[aria-pressed="true"],
.access-panel-voice[aria-pressed="true"],
.access-panel-voice.is-active {
  border-color: var(--color-accent);
  color: #fff;
  background: linear-gradient(145deg, var(--color-green), var(--color-primary-dark));
  box-shadow: 0 12px 24px rgba(31, 91, 75, 0.24);
}

.access-panel-voice-select-wrap {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: 700;
}
.access-panel-voice-select-wrap[hidden] {
  display: none;
}

.access-panel-voice-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 7px 9px;
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
}

.access-panel-voice-note {
  margin: 10px 0 0;
  color: var(--color-muted);
  font-size: var(--step--1);
}

body.access-links-highlight a {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

body.access-underline-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

/* Wrapped labels never receive per-line underline fragments. */
body.access-underline-links .main-menu a {
  display: flex;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
@media (min-width: 901px) {
  body.access-underline-links .main-menu #mod-menu1 > li > a,
  body.access-underline-links .main-menu #mod-menu1 > li.current > a,
  body.access-underline-links .main-menu #mod-menu1 > li.active > a,
  body.access-underline-links .main-menu #mod-menu1 > li > a[aria-current="page"],
  body.access-underline-links .main-menu #mod-menu1 > li > a * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }
  body.access-underline-links .main-menu #mod-menu1 > li > a { background-color: rgba(255, 255, 255, 0.16) !important; }
  body.access-underline-links .main-menu #mod-menu1 li ul a {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: inset 3px 0 var(--color-accent) !important;
    background-color: var(--color-accent-soft) !important;
  }
}
/* Top-level labels may wrap at desktop widths, but no state may underline line fragments. */
@media (min-width: 901px) {
  .main-menu #mod-menu1 > li > a,
  .main-menu #mod-menu1 > li > a:hover,
  .main-menu #mod-menu1 > li > a:focus-visible,
  .main-menu #mod-menu1 > li.current > a,
  .main-menu #mod-menu1 > li.active > a,
  .main-menu #mod-menu1 > li > a[aria-current="page"] {
    min-width: 0;
    white-space: normal !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: 0 !important;
    background-image: none !important;
  }
@media (min-width: 901px) and (max-width: 1180px) {
  .main-menu #mod-menu1 > li { flex: 1 1 0; min-width: 0; white-space: normal; }
  .main-menu #mod-menu1 > li > a,
  .main-menu #mod-menu1 > li > span {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 14px clamp(4px, .65vw, 8px);
    text-align: center;
    line-height: 1.28;
  }
  .main-menu #mod-menu1 > li.parent > a,
  .main-menu #mod-menu1 > li.deeper > a,
  .main-menu #mod-menu1 > li.parent > span,
  .main-menu #mod-menu1 > li.deeper > span { padding-right: 18px; }
}
}
@media (max-width: 900px) {
  body.access-underline-links .main-menu a,
  body.access-underline-links .main-menu li.current > a,
  body.access-underline-links .main-menu li.active > a,
  body.access-underline-links .main-menu a[aria-current="page"] {
    border-bottom: 0 !important;
    box-shadow: inset 3px 0 var(--color-accent) !important;
  }
}
body.access-underline-links .main-menu a:focus-visible {
  outline-width: 3px;
}
body.access-links-highlight .main-menu a:not(:focus-visible) {
  outline: none;
}

body.access-text-spacing {
  letter-spacing: var(--access-letter-spacing, normal);
  word-spacing: var(--access-word-spacing, normal);
}

html.access-invert,
html.access-grey {
  filter: var(--access-invert-filter, invert(0)) var(--access-grey-filter, grayscale(0));
}

html.access-invert {
  --access-invert-filter: invert(1) hue-rotate(180deg);
}

html.access-grey {
  --access-grey-filter: grayscale(1);
}

html.access-invert img,
html.access-invert video,
html.access-invert picture,
html.access-invert canvas,
html.access-invert iframe {
  filter: invert(1) hue-rotate(180deg);
}

html.access-big-cursor,
html.access-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M4 3v35l9-8 6 14 7-3-6-13h12z'/%3E%3C/svg%3E") 4 4, auto !important;
}

.access-reading-guide {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 12px;
  border: 3px solid #20ff69;
  border-radius: 999px;
  background: #000;
  pointer-events: none;
  z-index: 10000;
}

body.is-dark .access-panel-body {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--color-surface);
}

body.is-dark .access-panel-action,
body.is-dark .access-panel-dark,
body.is-dark .access-panel-voice {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(15, 21, 26, 0.96)),
    var(--color-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.is-dark .access-panel-action span:first-child {
  color: #f5c542;
  background: rgba(185, 143, 36, 0.18);
}

body.is-dark .access-panel-action[aria-pressed="true"],
body.is-dark .access-panel-dark[aria-pressed="true"],
body.is-dark .access-panel-voice[aria-pressed="true"],
body.is-dark .access-panel-voice.is-active {
  color: #fff;
  background: linear-gradient(145deg, var(--color-green), var(--color-primary-dark));
}

@media (max-width: 760px) {
  .access-panel {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .access-panel-body {
    max-height: calc(100dvh - 158px);
  }

  .access-panel-toggle {
    width: 52px;
    height: 52px;
    justify-content: center;
    padding: 0;
  }
}

.topbar a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.topbar a:hover,
.topbar a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.site-footer a {
  color: #fff;
}

.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
  color: #fff;
}

.floating-whatsapp svg {
  width: 32px;
  height: 32px;
}

.header-brand {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--page-padding) 30px;
  border-bottom: 1px solid rgba(185, 143, 36, 0.28);
  background:
    radial-gradient(circle at 0 0, rgba(185, 143, 36, 0.18), transparent 30%),
    linear-gradient(110deg, rgba(143, 31, 11, 0.1), rgba(255, 255, 255, 0) 55%),
    #fffdf7;
}

.header-brand::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-accent), var(--color-green));
}

.brand-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-width: min(720px, 100%);
}

.header-badges,
.court-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.court-brand-badges.header-brand-lockup {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.2vw, 16px);
  min-width: 0;
  border: 1px solid rgba(185, 143, 36, 0.28);
  border-radius: 14px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 32px rgba(29, 39, 48, 0.08);
}
.header-brand-lockup .ampuh-certified-link,
.header-brand-lockup .asn-berakhlak-link { display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 8px; padding: 3px; background: transparent; box-shadow: none; }
.header-brand-lockup .ampuh-certified-link { width: clamp(62px, 5.8vw, 80px); aspect-ratio: 1; }
.header-brand-lockup .ampuh-certified-mark { display: block; width: 100%; height: 100%; object-fit: contain; }
.header-brand-lockup .asn-berakhlak-mark { display: block; width: clamp(170px, 19vw, 280px); max-width: 100%; height: auto; object-fit: contain; }
.header-brand-lockup .asn-berakhlak-mark--dark { display: none; }
/* Pemisah dulu pseudo-element absolut dengan `left: clamp(78px, 7.2vw, 98px)`
   yang dihitung untuk logo AMPUH 62-80px. Override >=1024 mengecilkan logo itu
   jadi 46-58px tanpa ikut menggeser garisnya, sehingga garis emas mendarat di
   tengah wordmark BerAKHLAK. Pemisah kini menempel pada badge kedua, jadi ia
   selalu berada tepat di antara keduanya berapa pun ukuran logonya. Aturan ini
   wajib berada setelah reset `border: 0` di atas; spesifisitasnya sama. */
.header-brand-lockup .asn-berakhlak-link {
  border-left: 1px solid rgba(185, 143, 36, 0.3);
  border-radius: 0;
  padding-left: clamp(10px, 1.2vw, 16px);
}
.header-brand-lockup a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.brand-mark {
  width: clamp(96px, 8vw, 124px);
  height: clamp(96px, 8vw, 124px);
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.brand-copy {
  min-width: 0;
}

.brand-lockup strong {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 4px 10px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(.78rem, .9vw, .92rem);
  line-height: 1.2;
  background: linear-gradient(90deg, var(--color-green), #34725d);
  border-radius: 999px;
}

.brand-lockup .brand-title {
  margin: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: .98;
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-shadow: 0 10px 26px rgba(143, 31, 11, 0.12);
}

.brand-lockup p:not(.brand-title) {
  max-width: 820px;
  margin: 8px 0 0;
  color: #2f3b45;
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  line-height: 1.45;
}

.main-menu {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 var(--page-padding);
  border-bottom: 4px solid var(--color-accent);
  background: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
}

.main-menu-list {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
}


.menu-toggle {
  display: none;
  min-height: 42px;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-weight: 700;
}

.main-menu ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  justify-content: space-between;
}

.main-menu li {
  position: relative;
  white-space: nowrap;
}

.main-menu .mod-menu__toggle-sub {
  display: none;
}

.mobile-menu-heading {
  display: none;
}

.main-menu li.parent > a,
.main-menu li.deeper > a,
.main-menu li.parent > span,
.main-menu li.deeper > span {
  padding-right: 22px;
}

.main-menu li.parent > a::after,
.main-menu li.deeper > a::after,
.main-menu li.parent > span::after,
.main-menu li.deeper > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  opacity: 0.7;
}

.main-menu a,
.main-menu span {
  display: block;
  padding: 16px 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--step--1);
  text-transform: uppercase;
}

.main-menu a:hover,
.main-menu a:focus-visible,
.main-menu .current > a,
.main-menu .active > a {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.main-menu li ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 260px;
  background: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}

.main-menu li ul a,
.main-menu li ul span {
  color: #fff;
  text-transform: none;
  padding: 10px 18px;
  font-size: var(--step--1);
  font-weight: 500;
  display: block;
}

.main-menu li ul a:hover,
.main-menu li ul a:focus-visible,
.main-menu li ul .current > a,
.main-menu li ul .active > a {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.main-menu li:hover > ul,
.main-menu li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.main-menu li ul ul {
  left: 100%;
  top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid var(--color-accent);
}

.hero {
  min-height: 430px;
  padding: 58px var(--page-padding) 66px;
  background:
    radial-gradient(circle at 12% 20%, rgba(185, 143, 36, 0.14), transparent 34%),
    linear-gradient(135deg, #fff 0%, #fffaf0 48%, #f6f8f8 100%);
  border-bottom: 1px solid #eadbb5;
  color: var(--color-ink);
}

.home-slider {
  min-height: 310px;
  padding-block: 44px;
}

.home-slider .custom {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(280px, 420px) minmax(260px, 360px);
  gap: 24px;
  min-height: 220px;
  align-items: center;
}

.hero-copy {
  min-width: 0;
}

.hero-media {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.hero-media figcaption {
  padding: 10px 12px;
  color: #5b6670;
  font-size: var(--step--1);
}

.hero a {
  color: var(--color-primary);
}

.hero .custom {
  max-width: 100%;
}

.hero-kicker {
  display: inline-block;
  margin: 0 0 14px;
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 800;
  text-transform: uppercase;
}

.hero h2 {
  max-width: 820px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 4vw, 3.65rem);
  line-height: 1.04;
  color: var(--color-primary-deep);
  letter-spacing: 0;
}

.hero p {
  max-width: 760px;
  margin: 0 0 22px;
  color: #34414c;
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-actions a,
.service-links a,
.panel-link {
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.hero-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid #d9c78f;
  border-radius: var(--radius);
  padding: 9px 14px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 800;
}

.hero-actions a:first-child,
.hero-actions a.is-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.hero-news-list {
  display: grid;
  gap: 10px;
  border: 1px solid #e1d2a5;
  border-top: 5px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(47, 20, 14, 0.1);
}

.hero-news-kicker {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 900;
  text-transform: uppercase;
}

.hero-news-list h3 {
  margin: 0 0 4px;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: 1.28rem;
}

.hero-news-list a {
  display: grid;
  gap: 3px;
  border: 1px solid #efe2bd;
  border-radius: var(--radius);
  padding: 11px 12px;
  color: var(--color-ink);
  text-decoration: none;
  background: linear-gradient(180deg, #fff, #fffaf0);
}

.hero-news-list a strong {
  color: var(--color-primary);
  font-size: var(--step--1);
  line-height: 1.28;
}

.hero-news-list a span {
  color: var(--color-muted);
  font-size: var(--step--2);
}

.hero-news-list a:hover,
.hero-news-list a:focus-visible {
  border-color: var(--color-accent);
  background: #fff5df;
}

.hero-actions a:hover,
.hero-actions a:focus-visible,
.service-links a:hover,
.service-links a:focus-visible,
.panel-link:hover,
.panel-link:focus-visible {
  transform: translateY(-1px);
}

.quick-links,
.site-main,
.home-grid {
  padding: 28px var(--page-padding);
}

.quick-links {
  margin-top: -42px;
  padding-top: 0;
  padding-bottom: 24px;
  background: transparent;
  position: relative;
  z-index: 2;
}

.app-strip {
  margin-top: 0;
  padding-top: 22px;
  background: #fff;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  background: #fff;
}

.home-juknis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 22px;
  padding: 26px var(--page-padding) 34px;
}

.system-message-slot {
  grid-column: 1 / -1;
}

.home-juknis-main,
.home-juknis-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
}

.home-content-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 16px;
}

.home-briefing-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.quick-links {
  display: block;
}

.module-card {
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.home-juknis-main > .module-card,
.home-juknis-sidebar > .module-card {
  margin-bottom: 16px;
}

.module-card h2 {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}

.module-card h3,
.module-card h4 {
  margin-top: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0;
}

.service-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.today-grid,
.popular-service-grid,
.ptsp-online-grid,
.justice-access-grid,
.transparency-grid,
.reform-grid,
.integrity-grid,
.facility-grid,
.public-board-grid,
.priority-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.today-card,
.popular-service-card,
.ptsp-online-card,
.justice-access-card,
.transparency-card,
.reform-card,
.integrity-card,
.facility-card,
.public-board-card,
.priority-service-card {
  display: grid;
  gap: 7px;
  min-height: 126px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 14px;
  color: #26323b;
  text-decoration: none;
  background: linear-gradient(180deg, #fff, #fbfcfc);
}

.today-card strong,
.popular-service-card strong,
.ptsp-online-card strong,
.justice-access-card strong,
.transparency-card strong,
.reform-card strong,
.integrity-card strong,
.facility-card strong,
.public-board-card strong,
.priority-service-card strong {
  color: var(--color-primary);
  font-size: 1rem;
}

.today-card span,
.popular-service-card span,
.ptsp-online-card span,
.justice-access-card span,
.transparency-card span,
.reform-card span,
.integrity-card span,
.facility-card span,
.public-board-card span,
.priority-service-card span {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.today-card:hover,
.today-card:focus-visible,
.popular-service-card:hover,
.popular-service-card:focus-visible,
.ptsp-online-card:hover,
.ptsp-online-card:focus-visible,
.justice-access-card:hover,
.justice-access-card:focus-visible,
.transparency-card:hover,
.transparency-card:focus-visible,
.reform-card:hover,
.reform-card:focus-visible,
.integrity-card:hover,
.integrity-card:focus-visible,
.facility-card:hover,
.facility-card:focus-visible,
.public-board-card:hover,
.public-board-card:focus-visible,
.priority-service-card:hover,
.priority-service-card:focus-visible {
  border-color: #cfb46a;
  background: #fffaf0;
  transform: translateY(-1px);
}

.today-card {
  min-height: 104px;
  border-left: 5px solid var(--color-accent);
}

.today-card.is-alert {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, #fff7ed, #fff);
}

.important-strip {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.important-strip a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: #26323b;
  text-decoration: none;
  background: #fff7ed;
}

.important-strip b {
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff;
  background: var(--color-primary);
  font-size: var(--step--2);
  text-transform: uppercase;
}

.service-flow {
  display: grid;
  gap: 10px;
  counter-reset: service-step;
  margin-top: 14px;
}

.service-flow li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  list-style: none;
  color: var(--color-muted);
}

.service-flow li::before {
  counter-increment: service-step;
  content: counter(service-step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  background: var(--color-primary);
  font-weight: 900;
}

.official-badge {
  justify-self: start;
  border-radius: 999px;
  padding: 3px 8px;
  color: #fff;
  background: var(--color-green);
  font-size: var(--step--2);
  font-weight: 900;
  text-transform: uppercase;
}

.facility-card {
  min-height: 150px;
}

.facility-card::before {
  content: "";
  display: block;
  height: 74px;
  border-radius: calc(var(--radius) - 2px);
  background:
    linear-gradient(135deg, rgba(143, 31, 11, 0.76), rgba(31, 91, 75, 0.58)),
    url("/images/berita/2026-briefing-ptsp-1.jpeg") center/cover;
}

.office-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  margin-top: 12px;
}

.office-map span {
  border: 1px dashed #c9b16d;
  border-radius: var(--radius);
  padding: 10px;
  color: var(--color-primary);
  background: #fffaf0;
  font-weight: 800;
}

.public-note-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.public-note-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  list-style: none;
}

.public-note-list li::before {
  content: "OK";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--color-green);
  font-size: var(--step--3);
  font-weight: 900;
}

.portal-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 10px;
  margin-top: 14px;
}

.portal-stat {
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--color-ink);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.portal-stat strong {
  display: block;
  color: var(--color-primary);
  font-size: 1.12rem;
}

.portal-stat span {
  color: #5b6670;
}

.app-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1200px) {
  .app-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .app-links {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 8px;
    gap: 12px;
  }
  
  .app-links::-webkit-scrollbar {
    display: none;
  }

  .app-links li {
    flex: 0 0 calc(80% - 12px);
    scroll-snap-align: start;
  }
}

.app-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  border: 1px solid #ead8a7;
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--color-ink);
  text-decoration: none;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(29, 39, 48, 0.03);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.app-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.app-info strong {
  display: block;
  font-size: var(--step--1);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.25;
}

.app-info span {
  display: block;
  font-size: var(--step--2);
  color: var(--color-muted);
  line-height: 1.35;
  font-weight: 500;
}

.app-links img,
.app-default-icon-tag {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  object-fit: contain;
}

.app-default-icon-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  border: 1px solid rgba(185, 143, 36, 0.28);
  border-radius: 10px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.app-links a:hover,
.app-links a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  background: #fffdf7;
  box-shadow: 0 10px 24px rgba(29, 39, 48, 0.07);
}

.app-links a:hover .app-info strong {
  color: var(--color-primary-dark);
}

.service-links a {
  display: block;
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 14px 14px;
  color: #26323b;
  text-decoration: none;
  font-weight: 700;
  background: #fff;
  box-shadow: var(--shadow-subtle);
}

.service-links a:hover,
.service-links a:focus-visible {
  border-color: #cfb46a;
  background: #fffaf0;
  color: var(--color-primary);
}

.home-grid .module-card {
  min-height: 180px;
}

.home-juknis-sidebar .module-card {
  padding: 16px 18px;
}

.info-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.info-tab {
  display: block;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 14px;
  color: #26323b;
  text-decoration: none;
  background: #fffaf0;
}

.info-tab strong {
  display: block;
  color: var(--color-primary);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.news-tile {
  display: grid;
  align-content: start;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.news-tile:hover,
.news-tile:focus-within {
  border-color: #cfb46a;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(29, 39, 48, 0.1);
}

.news-tile:first-child {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr);
  min-height: 230px;
  background:
    linear-gradient(135deg, rgba(143, 31, 11, 0.05), rgba(185, 143, 36, 0.09)),
    #fff;
}

.news-tile img {
  width: 100%;
  height: 100%;
  min-height: 168px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.news-tile:first-child img {
  aspect-ratio: auto;
}

.news-tile a {
  display: block;
  padding: 12px 12px 4px;
  color: #26323b;
  text-decoration: none;
  font-weight: 800;
}

.news-tile:first-child a {
  align-self: end;
  padding: 18px 18px 4px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.24;
}

.news-tile time,
.news-tile span {
  display: block;
  padding: 0 12px 12px;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.news-tile:first-child span,
.news-tile:first-child time {
  padding-inline: 18px;
  font-size: var(--step--1);
}

.instagram-cache {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.module-card:has(> .custom > .instagram-cache) > .custom {
  width: 100%;
  min-width: 0;
}


.instagram-carousel-shell {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.instagram-carousel-viewport {
  min-width: 0;
  height: clamp(430px, 38vw, 520px);
  overflow: hidden;
  border-radius: var(--home-radius-control, 10px);
}

.instagram-carousel-track {
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.instagram-carousel-track,
.instagram-carousel-slide {
  height: 100%;
}

.instagram-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.instagram-cache-post {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  overflow: hidden;
  min-height: 0;
  border-radius: var(--home-radius-control, 10px);
  color: var(--color-ink);
  background: var(--color-soft);
  text-decoration: none;
  isolation: isolate;
  touch-action: pan-y;
}

.instagram-gallery-media {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  background: #eadfce;
}

.instagram-cache-post img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #eadfce;
}

.instagram-gallery-caption {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 10px 12px 12px;
  color: var(--color-ink);
  background: var(--color-surface);
}

.instagram-gallery-caption time {
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  text-transform: none;
  letter-spacing: .04em;
}

.instagram-gallery-caption strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--step--1);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.instagram-gallery-new {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  padding: 5px 8px;
  color: #fffaf2;
  background: rgba(143, 31, 11, .92);
  font-size: var(--step--3);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.instagram-carousel-controls {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 4px;
  align-items: center;
  border-top: 1px solid var(--home-rule, var(--color-line));
  padding: 8px 4px 4px;
}

.instagram-carousel-control {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.instagram-carousel-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 0;
  color: var(--color-primary);
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
}


.instagram-carousel-control:hover,
.instagram-carousel-control:focus-visible {
  color: var(--color-primary-dark);
}

.instagram-carousel-count {
  min-width: 3rem;
  color: var(--color-muted);
  font-size: var(--step--2);
  font-weight: 800;
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

.instagram-carousel-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


@media (max-width: 560px) {
  .instagram-carousel-viewport {
    height: 380px;
  }


  .instagram-carousel-controls {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .instagram-carousel-count {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
  }
}

body.is-dark .instagram-gallery-media,
body.is-dark .instagram-cache-post img {
  background: #101820;
}

body.is-dark .instagram-gallery-caption {
  color: var(--color-ink);
  background: var(--dark-content-raised);
}

body.is-dark .instagram-gallery-caption time {
  color: #f3c96b;
}

body.is-dark .instagram-carousel-control {
  color: #f3c96b;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .instagram-carousel-track {
    transition: none;
  }
}
.instagram-widget {
  display: grid;
  gap: 12px;
}

.instagram-phone-frame {
  max-width: 360px;
  margin-inline: auto;
  border: 1px solid #e6d8b0;
  border-radius: 26px;
  padding: 12px;
  background:
    linear-gradient(180deg, #ffffff, #fff8e8),
    #fff;
  box-shadow: 0 22px 54px rgba(47, 20, 14, 0.16);
}

.instagram-phone-top {
  display: grid;
  place-items: center;
  height: 14px;
}

.instagram-phone-top span {
  width: 76px;
  height: 5px;
  border-radius: 999px;
  background: #2f140e;
  opacity: 0.86;
}

.instagram-profile {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.instagram-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #8f1f0b, #b98f24);
  font-weight: 900;
}

.instagram-profile strong,
.instagram-profile span {
  display: block;
}

.instagram-profile span {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.instagram-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.instagram-post {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  background: var(--color-primary);
}

.instagram-post img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.95);
  transition: transform 180ms ease;
}

.instagram-post-featured img {
  aspect-ratio: 9 / 13;
}

.instagram-embed-shell {
  overflow: hidden;
  border: 1px solid #e6d8b0;
  border-radius: 18px;
  background: #fff;
}

.instagram-profile-embed {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

.instagram-profile-embed__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.instagram-profile-embed__head div {
  display: grid;
  gap: 3px;
}

.instagram-profile-embed__head span {
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.instagram-profile-embed__head strong {
  color: var(--color-ink);
  font-size: 1rem;
}

.instagram-profile-embed__head a {
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
}

.instagram-profile-embed__frame {
  height: 350px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-soft);
}

.instagram-profile-embed iframe {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
  color-scheme: light;
}

body.is-dark .instagram-profile-embed__frame {
  border-color: var(--dark-content-line);
  background: #19232b;
}

@media (max-width: 760px) {
  .instagram-profile-embed {
    flex: 0 0 min(94vw, 370px);
    width: min(94vw, 370px);
  }
  .instagram-profile-embed__head { align-items: flex-start; }
  .instagram-profile-embed__frame,
  .instagram-profile-embed iframe { height: 350px; }
}

.instagram-embed-shell iframe {
  display: block;
  width: 100%;
  min-height: 540px;
  border: 0;
  background: #fff;
}

.instagram-post-slider {
  display: grid;
  gap: 10px;
}

.instagram-slider-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-muted);
  font-size: var(--step--2);
  font-weight: 800;
}

.instagram-slide-count {
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--color-primary);
  background: #fff1df;
}

.instagram-slider-viewport {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  border: 1px solid #e6d8b0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fff, #fff8e8),
    #fff;
}

.instagram-post-slide {
  position: absolute;
  inset: 0;
  display: grid;
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px);
  transition: opacity 220ms ease, transform 220ms ease;
}

a.instagram-post-slide {
  color: inherit;
  text-decoration: none;
}

.instagram-post-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.instagram-post-slide iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 18px;
  background: #fff;
}

.instagram-native-slider .instagram-slider-viewport {
  min-height: 560px;
  height: 560px;
  max-height: 560px;
  overflow: hidden;
  border: 0;
  background: transparent;
  border-radius: 14px;
}

.instagram-native-slider .instagram-post-slide iframe {
  border-radius: 14px;
}
.instagram-native-slider .instagram-phone-top {
  display: none;
}

.instagram-native-slider.instagram-phone-frame {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.instagram-post-slide img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: contain;
  background:
    linear-gradient(180deg, #fff, #fff8e8),
    #fff;
}

.instagram-clean-slider {
  gap: 10px;
}

.instagram-clean-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #ecd9a9;
  border-radius: 999px;
  padding: 7px 8px 7px 14px;
  background: #fff;
}

.instagram-clean-header span {
  overflow: hidden;
  color: #2f140e;
  font-size: var(--step--1);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram-clean-header a {
  flex: none;
  border-radius: 999px;
  padding: 7px 11px;
  color: #fff;
  background: var(--color-primary);
  text-decoration: none;
  font-size: var(--step--2);
  font-weight: 900;
}

.instagram-slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.instagram-slider-dots button {
  width: 26px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #d2d8de;
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease;
}

.instagram-slider-dots button.is-active {
  width: 32px;
  background: var(--color-primary);
}

.instagram-post span {
  position: absolute;
  inset: auto 6px 6px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(47, 20, 14, 0.84);
  font-size: var(--step--3);
  font-weight: 900;
}

.instagram-post:hover img,
.instagram-post:focus-visible img {
  transform: scale(1.04);
}

.instagram-link-button {
  justify-self: stretch;
  border-radius: 999px;
  padding: 10px 12px;
  color: #fff;
  background: var(--color-primary);
  text-align: center;
}

.role-carousel {
  display: grid;
  gap: 10px;
  max-width: 360px;
  margin-inline: auto;
}

.role-carousel-viewport {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
}

.role-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.role-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.role-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

.role-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.role-carousel-dots button {
  width: 26px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #d2d8de;
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease;
}

.role-carousel-dots button.is-active {
  width: 32px;
  background: var(--color-primary);
}

.news-channel {
  display: grid;
  gap: 22px;
}

.news-channel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  border: 1px solid var(--color-line);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(143, 31, 11, 0.07), rgba(31, 91, 75, 0.07)),
    #fff;
}

.news-channel-header h1 {
  margin: 4px 0 8px;
  color: var(--color-primary);
  font-size: clamp(1.7rem, 4vw, 2.45rem);
  line-height: 1.08;
}

.news-channel-header p {
  max-width: 760px;
  margin-bottom: 0;
  color: #46525d;
}

.news-channel-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.news-channel-tabs a {
  min-height: 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: #26323b;
  text-decoration: none;
  font-weight: 800;
  background: #fff;
}

.news-channel-tabs a.is-active,
.news-channel-tabs a:hover,
.news-channel-tabs a:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.news-listing {
  display: grid;
  gap: 18px;
}

.news-listing--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.news-listing--announcement {
  grid-template-columns: 1fr;
}

.news-card,
.announcement-item {
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.news-card {
  overflow: hidden;
}

.news-card-media {
  display: block;
  background: #eef2f1;
}

.news-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

.news-card-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: 800;
  text-transform: uppercase;
}

.news-meta span {
  color: var(--color-primary);
}

.news-card h2,
.announcement-item h2 {
  margin: 0;
  color: #17232c;
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.28;
}

.news-card h2 a,
.announcement-item h2 a {
  color: inherit;
  text-decoration: none;
}

.news-card h2 a:hover,
.news-card h2 a:focus-visible,
.announcement-item h2 a:hover,
.announcement-item h2 a:focus-visible {
  color: var(--color-primary);
}

.news-card p,
.announcement-item p {
  margin: 0;
  color: #4d5963;
}

.announcement-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 16px;
}

.announcement-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #dfc474;
  border-radius: 50%;
  color: var(--color-primary);
  font-weight: 900;
  background: #fffaf0;
}

.news-channel-pagination {
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
}

.rss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
}

.rss-grid a {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: #26323b;
  text-decoration: none;
  font-weight: 700;
  background: #fbfcfc;
}

.schedule-frame,
.video-placeholder {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 14px;
  background: #fbfcfc;
}

.sipp-schedule-board {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.sipp-schedule-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-line);
  padding: 16px;
}

.sipp-schedule-head h2,
.sipp-schedule-head p {
  margin: 0;
}

.sipp-schedule-head h2 {
  color: var(--color-ink);
  font-size: 1.5rem;
  letter-spacing: 0;
}

.sipp-schedule-head span {
  display: inline-block;
  margin-top: 5px;
  color: var(--color-muted);
  font-size: var(--step--1);
}

.sipp-schedule-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.sipp-schedule-meta span {
  border: 1px solid #ead8a7;
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fff;
  color: var(--color-muted);
  font-size: var(--step--1);
}

.sipp-schedule-meta b {
  display: block;
  color: var(--color-primary);
}

.sipp-schedule-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}

.sipp-schedule-tools a {
  border: 1px solid #ead8a7;
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.sipp-schedule-tools a:hover,
.sipp-schedule-tools a:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  transform: translateY(-1px);
}

.sipp-table-wrap {
  overflow-x: auto;
  padding: 0 16px 16px;
}

.sipp-schedule-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
  font-size: var(--step--1);
}

.sipp-schedule-table th,
.sipp-schedule-table td {
  border: 1px solid #ead8a7;
  padding: 10px 12px;
  text-align: left;
}

.sipp-schedule-table th {
  background: var(--color-primary);
  color: #fff;
  font-size: var(--step--2);
  text-transform: uppercase;
}

.sipp-schedule-table tbody tr {
  transition: background 0.18s ease;
}

.sipp-schedule-table tbody tr:hover {
  background: #fff9eb;
}

.sipp-schedule-table td a {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--step--2);
  font-weight: 800;
  text-decoration: none;
}

.sipp-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  font-size: var(--step--2);
  font-weight: 800;
  border-radius: 999px;
}
.sipp-badge-gray {
  background: var(--color-line);
  color: #fff;
}
.sipp-badge-green {
  background: var(--color-green);
  color: #fff;
}

.sipp-schedule-table .sipp-empty-state {
  padding: 36px 16px;
  color: var(--color-muted);
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
}

.video-placeholder {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  text-align: center;
}

.banner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.banner-grid a {
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.banner-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

.content-note {
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  padding: 12px 14px;
  color: #54401b;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.staff-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
  box-shadow: var(--shadow-subtle);
}

.staff-card img {
  width: 132px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

.staff-card h2 {
  margin: 0 0 4px;
  font-size: 1.08rem;
  line-height: 1.25;
}

.staff-role {
  margin: 0 0 10px;
  color: var(--color-primary);
  font-weight: 800;
}

.staff-card dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  margin: 0;
  font-size: var(--step--1);
}

.staff-card dt {
  color: var(--color-muted);
}

.staff-card dd {
  margin: 0;
  font-weight: 700;
}

.roster-lead {
  max-width: 76ch;
  margin: 0 0 36px;
  font-size: 1.02rem;
  line-height: 1.75;
}

.roster-section {
  margin: 36px 0 44px;
}

.roster-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}

.roster-section-head h2 {
  position: relative;
  margin: 0;
  padding-left: 16px;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.roster-section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

.roster-count {
  flex-shrink: 0;
  padding: 4px 12px;
  background: var(--color-accent-soft);
  color: #54401b;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 700;
}

.roster-featured {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  overflow: hidden;
  background: linear-gradient(135deg, #fffdf6, #fbf2d8);
  border: 1px solid rgba(185, 143, 36, 0.4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.roster-featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent) 45%, #e9cd76 55%, var(--color-accent));
}

.roster-featured-photo {
  position: relative;
}

.roster-featured-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: top center;
}

.roster-featured-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 22px;
}

.roster-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.roster-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-accent);
}

.roster-featured-name {
  margin: 0;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.25;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.roster-card {
  display: flex;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.roster-card:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 143, 36, 0.5);
  box-shadow: 0 14px 28px rgba(29, 39, 48, 0.1);
}

.roster-photo {
  position: relative;
  width: 104px;
  flex-shrink: 0;
}

.roster-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
}

.roster-degree {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  background: rgba(143, 31, 11, 0.92);
  color: #fff;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .06em;
}

.roster-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 4px 6px 4px 0;
  min-width: 0;
}

.roster-name {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: .98rem;
  line-height: 1.3;
}

.roster-role {
  align-self: flex-start;
  max-width: 100%;
  padding: 7px 12px;
  background: var(--color-accent-soft);
  color: #54401b;
  border-radius: 8px;
  font-size: var(--step--2);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.roster-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.roster-role-row .roster-role {
  align-self: auto;
}

.roster-meta {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--color-line);
  font-size: var(--step--1);
}

.roster-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.roster-meta dt {
  color: var(--color-muted);
}

.roster-meta dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.roster-featured .roster-meta {
  max-width: 420px;
  margin-top: 14px;
  font-size: var(--step--1);
}

.roster-featured-body {
  justify-content: center;
}

.roster-vacant {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 22px 18px;
  background: #fffdf6;
  border: 2px dashed rgba(185, 143, 36, 0.5);
  border-radius: var(--radius-card);
  text-align: center;
}

.roster-vacant strong {
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.35;
}

.roster-vacant-badge {
  padding: 4px 12px;
  background: var(--color-accent-soft);
  color: #54401b;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.unit-scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}

.unit-scope-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unit-scope li {
  list-style: none;
  position: relative;
  min-height: 112px;
  padding: 18px 18px 18px 52px;
  background: #fffdf6;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  font-size: var(--step--1);
  line-height: 1.65;
  text-align: left !important;
  hyphens: none !important;
}

.unit-scope li::before {
  content: "\2713";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--color-accent-soft);
  color: #54401b;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 700;
}

.maklumat-doc.alur-frame img {
  aspect-ratio: auto;
  height: auto;
}

body.is-dark .unit-scope li {
  background: #19232b;
  border-color: #46515a;
}

@media (max-width: 860px) {
  .unit-scope,
  .unit-scope-2 {
    grid-template-columns: 1fr;
  }
}

body.is-dark .roster-card,
body.is-dark .roster-vacant {
  background: #19232b;
  border-color: #46515a;
}

body.is-dark .roster-featured {
  background: linear-gradient(135deg, #19232b, #101820);
  border-color: #46515a;
}

body.is-dark .roster-section-head h2,
body.is-dark .roster-featured-name,
body.is-dark .roster-name,
body.is-dark .roster-vacant strong {
  color: #f3c96b;
}

body.is-dark .roster-count,
body.is-dark .roster-role,
body.is-dark .roster-vacant-badge {
  background: rgba(243, 201, 107, 0.16);
  color: #f3c96b;
}

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

  .roster-card:hover {
    transform: none;
  }
}

@media (max-width: 860px) {
  .roster-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .roster-featured {
    grid-template-columns: 1fr;
  }

  .roster-featured-photo img {
    min-height: 0;
    aspect-ratio: 3 / 4;
    max-height: 380px;
  }
}

.contact-lines,
.sidebar-links,
.stat-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-lines li,
.sidebar-links li,
.stat-list li {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 8px;
}

.search-box {
  display: flex;
  gap: 8px;
}

.search-box input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 10px 14px;
  font: inherit;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(185, 143, 36, 0.25);
  background: #fffdf7;
}

.search-box button {
  border: 0;
  border-radius: var(--radius);
  padding: 10px 16px;
  color: #fff;
  background: var(--color-primary);
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-box button:hover,
.search-box button:focus-visible {
  background: var(--color-primary-dark);
}

.home-grid .module-card ul {
  padding-left: 1.1rem;
}

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

.content-list li {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 10px;
}

.content-list a {
  color: #26323b;
  text-decoration: none;
  font-weight: 700;
}

.content-list a:hover,
.content-list a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.content-list.compact {
  gap: 8px;
}

.content-list.compact li {
  padding-bottom: 8px;
}

.service-hours-card {
  display: grid;
  gap: 16px;
}

.service-hours-kicker {
  margin: -5px 0 -5px;
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.service-hours-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: -2px 0 0;
  border: 1px solid color-mix(in srgb, var(--color-line), var(--color-primary) 14%);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-soft), #fff 45%);
  font-size: var(--step--2);
  line-height: 1.25;
}

.service-hours-status > span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8c756d;
  box-shadow: 0 0 0 4px rgba(140, 117, 109, 0.12);
}

.service-hours-status.is-open > span {
  background: #24724f;
  box-shadow: 0 0 0 4px rgba(36, 114, 79, 0.14);
}

.service-hours {
  display: grid;
  gap: 10px;
  margin: 0;
}

.service-hours > div {
  display: grid;
  grid-template-columns: minmax(104px, 0.8fr) minmax(138px, 1.2fr);
  align-items: baseline;
  gap: 12px;
}

.service-hours dt {
  color: var(--color-muted);
  white-space: nowrap;
}

.service-hours dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.service-hours-break {
  display: grid;
  gap: 4px;
  margin: 0;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 9px 11px;
  color: var(--color-muted);
  background: color-mix(in srgb, var(--color-soft), #fff 55%);
  font-size: var(--step--1);
}

.service-hours-break strong {
  color: var(--color-text);
  font-size: var(--step--1);
  line-height: 1.4;
}

.service-hours-note {
  margin: -4px 0 0;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.panel-link {
  display: inline-flex;
  margin-top: 8px;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 800;
}

.service-hours-action {
  min-height: 44px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--color-primary), transparent 72%);
  border-radius: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-primary), transparent 95%);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.service-hours-action:hover,
.service-hours-action:focus-visible {
  border-color: var(--color-primary);
  color: #fff;
  background: var(--color-primary);
  transform: translateY(-1px);
}

body.is-dark .service-hours-status,
body.is-dark .service-hours-break,
body.is-dark .service-hours-action {
  background: rgba(255, 255, 255, 0.055);
}

@media (max-width: 390px) {
  .service-hours > div { grid-template-columns: minmax(96px, 0.8fr) minmax(132px, 1.2fr); gap: 8px; }
  .service-hours dd { font-size: var(--step--1); }
}

.empty-note {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
}

.content-layout.no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.content-primary {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}

.content-layout.no-sidebar .content-primary {
  width: 100%;
}

.content-primary h1,
.content-primary h2 {
  color: var(--color-primary);
  font-family: var(--font-display);
  letter-spacing: 0;
}

.content-primary h1 {
  margin-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
  font-size: clamp(1.65rem, 3vw, 2.3rem);
}

.content-primary h2 {
  margin-top: 1.6rem;
}

.content-primary p,
.content-primary li {
  max-width: 78ch;
  text-align: justify;
  hyphens: auto;
}

.content-primary .sejarah-foto {
  float: right;
  width: 340px;
  max-width: 48%;
  height: auto;
  margin: 4px 0 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-line);
  box-shadow: 0 8px 20px rgba(29, 39, 48, 0.1);
}

@media (max-width: 640px) {
  .content-primary .sejarah-foto {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;
  }
}

.content-primary blockquote {
  margin: 20px 0;
  border-left: 5px solid var(--color-accent);
  background: var(--color-accent-soft);
  padding: 14px 18px;
}

.content-primary img {
  border-radius: var(--radius);
}

.content-primary figure,
.content-primary p:has(> img:only-child) {
  margin: 22px 0;
}

.content-primary p:has(> img:only-child) {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  padding: 10px;
  box-shadow: var(--shadow-card);
}

.content-primary table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.96rem;
}

.content-primary th,
.content-primary td {
  border: 1px solid var(--color-line);
  padding: 10px 12px;
  vertical-align: top;
}

.content-primary th {
  background: #f8f2e1;
  color: var(--color-primary);
  text-align: left;
}

.content-primary a[target="_blank"]::after {
  content: " \2197";
  font-size: 0.82em;
}

.content-primary .service-links a[target="_blank"]::after,
.hero-actions a[target="_blank"]::after,
.panel-link[target="_blank"]::after {
  content: "";
}

.blog-items,
.items-row {
  display: grid;
  gap: 16px;
}

.blog-item,
.item,
.com-content-article {
  min-width: 0;
}

.blog-item {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 18px;
}

.is-home .content-primary {
  max-width: 980px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
  background:
    linear-gradient(90deg, rgba(143, 31, 11, 0.2), rgba(31, 91, 75, 0.16)),
    #243039;
  color: #fff;
  padding: 52px var(--page-padding);
}

.footer-bottom {
  grid-column: 1 / -1;
  order: 99;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--step--1);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}



.mobile-quick-actions {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 55;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 6px;
  background: rgba(41, 18, 12, 0.97);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.24);
}

.mobile-quick-actions a,
.mobile-quick-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 6px;
  color: #fff;
  background: transparent;
  text-align: center;
  text-decoration: none;
  font: inherit;
  font-size: var(--step--2);
  font-weight: 900;
}

.mobile-quick-actions a:hover,
.mobile-quick-actions a:focus-visible,
.mobile-quick-actions button:hover,
.mobile-quick-actions button:focus-visible {
  background: var(--color-primary);
}

.hero-editorial h2 {
  max-width: 760px;
  font-size: clamp(2.35rem, 6vw, 4.9rem);
  line-height: 0.96;
}

.hero-media-featured {
  transform: translateY(8px);
}

.hero-media-featured img {
  aspect-ratio: 4 / 3;
  object-position: center;
}

.hero-service-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 12px;
}

.hero-service-status span {
  border: 1px solid #e8dcb9;
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fffdf7;
  color: var(--color-muted);
  font-size: var(--step--2);
}

.hero-service-status b {
  display: block;
  color: var(--color-primary-deep);
  font-size: var(--step--1);
}

.first-viewport-actions a {
  min-height: 42px;
}

.notice-board {
  border-top: 4px solid var(--color-accent);
  box-shadow: 0 20px 46px rgba(47, 20, 14, 0.12);
}

.notice-board a {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
}

.notice-board a time {
  grid-row: span 2;
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.home-priority-rail {
  margin-bottom: 16px;
  border: 1px solid #ead8a7;
  border-radius: var(--radius);
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(143, 31, 11, 0.06), transparent 46%),
    #fffdf7;
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-heading-row h2,
.section-heading-row p {
  margin: 0;
}

.section-eyebrow {
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  text-transform: uppercase;
}

.section-action {
  flex: none;
  border: 1px solid #e5d3a1;
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff;
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 700;
  text-decoration: none;
}

.quick-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quick-path-card {
  display: grid;
  gap: 5px;
  min-height: 116px;
  border: 1px solid #ead8a7;
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.quick-path-card b {
  color: var(--color-primary);
  font-size: 1rem;
}

.quick-path-card span {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.quick-path-card.is-primary {
  background: var(--color-primary);
  color: #fff;
}

.quick-path-card.is-primary b,
.quick-path-card.is-primary span {
  color: #fff;
}

.quick-path-card:hover,
.quick-path-card:focus-visible,
.app-links-premium a:hover,
.app-links-premium a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 28px rgba(47, 20, 14, 0.1);
}

.app-links-premium {
  margin-top: 10px;
}

.app-links-premium a {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.service-segment-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.service-segment-tabs a {
  border: 1px solid #e7d8af;
  border-radius: 999px;
  padding: 7px 12px;
  background: #fffdf7;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}

.news-magazine {
  grid-template-columns: 1.25fr 0.85fr;
}

.news-magazine .news-tile-featured {
  grid-row: span 2;
}

.news-magazine .news-tile-featured img {
  aspect-ratio: 16 / 10;
}

.notice-list {
  gap: 8px;
}

.notice-list li {
  border: 1px solid #edd7a4;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 10px;
  background: #fffdf7;
}

.notice-list a {
  display: grid;
  gap: 3px;
  text-decoration: none;
}

.notice-list b {
  color: var(--color-primary);
  font-size: var(--step--2);
  text-transform: uppercase;
}

.facility-map-board {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #ead8a7;
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(90deg, rgba(185, 143, 36, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(185, 143, 36, 0.12) 1px, transparent 1px),
    #fffdf7;
  background-size: 34px 34px;
}

.facility-map-board span {
  border-style: solid;
  background: rgba(255, 255, 255, 0.88);
}

.role-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  text-decoration: none;
}

.instagram-fallback-card {
  display: grid;
  gap: 5px;
  border: 1px solid #ead8a7;
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fffdf7;
}

.instagram-fallback-card strong {
  color: var(--color-primary);
}

.instagram-fallback-card span {
  color: var(--color-muted);
  font-size: var(--step--2);
}

.instagram-fallback-card a {
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
}

.footer-column-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.footer-column-grid h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: var(--step--1);
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: 10vh 18px 18px;
  background: rgba(15, 23, 42, 0.62);
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay-panel {
  width: min(100%, 640px);
  border-top: 5px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--color-surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.search-overlay-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.search-overlay-close {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--color-primary);
  background: #fff;
  font-weight: 800;
}

.search-overlay form {
  display: grid;
  gap: 10px;
}

.search-overlay input {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 13px 14px;
  font: inherit;
}

.search-overlay form button[type="submit"] {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  color: #fff;
  background: var(--color-primary);
  font-weight: 900;
}

body.is-dark .module-card,
body.is-dark .app-links a,
body.is-dark .today-card,
body.is-dark .popular-service-card,
body.is-dark .ptsp-online-card,
body.is-dark .justice-access-card,
body.is-dark .priority-service-card,
body.is-dark .transparency-card,
body.is-dark .reform-card,
body.is-dark .integrity-card,
body.is-dark .facility-card,
body.is-dark .public-board-card,
body.is-dark .news-tile,
body.is-dark .instagram-post,
body.is-dark .rss-grid a,
body.is-dark .schedule-frame,
body.is-dark .banner-grid a,
body.is-dark .content-primary,
body.is-dark .search-overlay-panel {
  background: #19232b;
  color: var(--color-ink);
}

body.is-dark .instagram-phone-frame {
  background: #19232b;
  border-color: #46515a;
}

body.is-dark .instagram-embed-shell {
  border-color: #46515a;
}

body.is-dark .instagram-slider-viewport {
  border-color: #46515a;
  background: #101820;
}

body.is-dark .instagram-clean-header {
  border-color: #46515a;
  background: #101820;
}

body.is-dark .instagram-clean-header span {
  color: var(--color-ink);
}

body.is-dark .today-card strong,
body.is-dark .popular-service-card strong,
body.is-dark .ptsp-online-card strong,
body.is-dark .justice-access-card strong,
body.is-dark .priority-service-card strong,
body.is-dark .transparency-card strong,
body.is-dark .reform-card strong,
body.is-dark .integrity-card strong,
body.is-dark .facility-card strong,
body.is-dark .public-board-card strong,
body.is-dark .instagram-profile strong,
body.is-dark .module-card h2,
body.is-dark .module-card h3,
body.is-dark .module-card h4 {
  color: #f3c96b;
}

body.is-dark .today-card span,
body.is-dark .popular-service-card span,
body.is-dark .ptsp-online-card span,
body.is-dark .justice-access-card span,
body.is-dark .priority-service-card span,
body.is-dark .transparency-card span,
body.is-dark .reform-card span,
body.is-dark .integrity-card span,
body.is-dark .facility-card span,
body.is-dark .public-board-card span,
body.is-dark .instagram-profile span {
  color: var(--color-muted);
}

@media (max-width: 1180px) {
  .home-juknis-layout,
  .home-content-pair,
  .home-briefing-pair,
  .home-slider .custom {
    grid-template-columns: 1fr;
  }

  .quick-path-grid,
  .footer-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-magazine {
    grid-template-columns: 1fr;
  }

  .news-magazine .news-tile-featured {
    grid-row: auto;
  }
}


@media (min-width: 1101px) {
  .main-menu { padding-inline: clamp(16px, 2.5vw, 48px); }
  .main-menu-list,
  .main-menu ul { min-width: 0; }
  .main-menu a,
  .main-menu span {
    padding-block: 15px;
    padding-inline: clamp(7px, .65vw, 12px);
    font-size: clamp(.72rem, .42vw + .36rem, .86rem);
  }
  .main-menu li.parent > a,
  .main-menu li.deeper > a,
  .main-menu li.parent > span,
  .main-menu li.deeper > span { padding-right: clamp(17px, 1.3vw, 22px); }
  .mobile-menu-footer { margin-left: clamp(4px, .55vw, 10px); }
}
@media (min-width: 1101px) {
  .main-menu ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
  }
  .main-menu li { min-width: 0; white-space: normal; }
  .main-menu a,
  .main-menu span { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; line-height: 1.22; }
  .main-menu li ul { display: block; width: 260px; }
}

.mobile-menu-actions,
.mobile-menu-search,
.mobile-menu-contact,
.dark-toggle-copy {
  display: none;
}
.mobile-menu-footer .mobile-menu-contact,
.mobile-menu-footer .dark-toggle-copy {
  display: none;
}
.submenu-toggle {
  display: none;
}
.mobile-menu-scroll {
  display: contents;
}
.mobile-menu-footer {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 10px;
}
@media (max-width: 1100px) {
  :root {
    --nav-drawer-bg: #fffaf2;
    --nav-drawer-surface: #fffdf8;
    --nav-drawer-soft: #f8eee4;
    --nav-drawer-line: #eadfcf;
    --nav-drawer-text: #5b1815;
    --nav-drawer-muted: #786259;
    --nav-drawer-active: #f6e8d3;
    --nav-drawer-accent: #b98f24;
  }

  body.is-dark {
    --nav-drawer-bg: #2d1714;
    --nav-drawer-surface: #351b17;
    --nav-drawer-soft: #3c211c;
    --nav-drawer-line: #684039;
    --nav-drawer-text: #fff3e4;
    --nav-drawer-muted: #f0d9cb;
    --nav-drawer-active: #593027;
    --nav-drawer-accent: #f3c96b;
  }
}

@media (max-width: 1100px) {
  .menu-toggle { display: block; min-width: 48px; min-height: 48px; color: var(--color-primary); background: #f8ede3; touch-action: manipulation; }
  .main-menu { align-items: flex-start; justify-content: flex-start; flex-direction: column; padding-block: 12px; }
  .main-menu-list {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 150;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(90vw, 360px);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: #5b1815;
    background: #fffaf2;
    box-shadow: -18px 0 44px rgba(47, 20, 14, 0.28);
    transform: translateX(105%);
    transition: transform 180ms ease;
  }
  .main-menu-list.is-open { transform: translateX(0); }
  .menu-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(31, 16, 14, 0.62); }
  .mobile-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    border-bottom: 1px solid #eadfcf;
    color: #5b1815;
  }
  .mobile-menu-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .mobile-menu-brand img { flex: 0 0 36px; width: 36px; height: 36px; object-fit: contain; }
  .mobile-menu-brand span { display: grid; min-width: 0; }
  .mobile-menu-brand strong { color: #5b1815; font-family: var(--font-display); font-size: 1rem; line-height: 1.05; }
  .mobile-menu-brand small { margin-top: 2px; color: #6f554c; font-size: var(--step--3); line-height: 1.2; }
  .menu-close { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; border: 1px solid #c9a84f; border-radius: 50%; padding: 0; color: #5b1815; background: #fffdf8; font-size: 1.55rem; line-height: 1; touch-action: manipulation; }
  .mobile-menu-actions { display: grid; }
  .main-menu-list .menu-close > svg { width: 20px; height: 20px; color: #5b1815; }
  .mobile-menu-search { display: flex; }
  .mobile-menu-scroll { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 14px; }
  .mobile-menu-footer { display: flex; align-items: center; gap: 8px; margin-left: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #eadfcf; background: #f7ecdf; }
  .mobile-menu-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
  .mobile-menu-actions a { display: grid; place-items: center; gap: 3px; min-height: 54px; border: 1px solid #ead7bd; border-radius: 10px; color: #5b1815; background: #fffdf8; text-decoration: none; }
  .main-menu-list .mobile-menu-search > span { display: inline; min-height: 0; padding: 0; color: #5b1815; font-size: var(--step--2); line-height: 1.2; }
  .mobile-menu-actions a > span { color: #9b7015; font-size: 1rem; font-weight: 800; }
  .mobile-menu-actions small { font-size: var(--step--2); font-weight: 800; }
  .mobile-menu-search { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; margin: 0 0 10px; border: 1px solid #dcc8ad; border-radius: 10px; padding: 8px 12px; color: #5b1815; background: #f8eee4; font: inherit; font-size: var(--step--2); font-weight: 750; text-align: left; }
  .mobile-menu-actions a > svg { width: 18px; height: 18px; color: #9b7015; }
  .mobile-menu-footer .dark-toggle { display: flex; justify-content: flex-start; gap: 9px; flex: 1 1 auto; width: auto; padding: 6px 10px; border-color: #d8bd91; }
  .mobile-menu-footer .dark-toggle-copy { display: grid; gap: 1px; text-align: left; }
  .main-menu-list .dark-toggle-copy strong { color: #5b1815; font-size: var(--step--2); line-height: 1.2; }
  .main-menu-list .dark-toggle-copy small { display: block; min-height: 0; padding: 0; color: #786259; font-size: var(--step--3); line-height: 1.2; }
  .main-menu-list .dark-toggle-copy small > span { display: inline; min-height: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
  .mobile-menu-search svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .dark-toggle-copy strong { font-size: var(--step--2); }
  .dark-toggle-copy small { color: #786259; font-size: var(--step--3); }
  .dark-status-on { display: none; }
  .dark-toggle[aria-pressed="true"] .dark-status-off { display: none; }
  .dark-toggle[aria-pressed="true"] .dark-status-on { display: inline; }
  .mobile-menu-footer .mobile-menu-contact { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  .mobile-menu-contact a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; color: #5b1815; text-decoration: none; }
  .mobile-menu-contact svg { width: 18px; height: 18px; }
  .main-menu ul, .main-menu li ul, .main-menu li ul ul { position: static; display: block; width: 100%; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; }
  .mobile-menu-scroll > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: start;
    gap: 0;
    min-height: 0;
    height: auto;
  }
  .main-menu li { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: start; white-space: normal; }
  .main-menu li > a, .main-menu li > span { display: flex; align-items: center; min-width: 0; min-height: 46px; padding: 9px 11px; color: #5b1815; font-size: var(--step--2); line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
  .main-menu li > ul { grid-column: 1 / -1; margin: 0; padding: 3px 0 5px 11px; border-left: 2px solid #c9a84f; background: #f8eee4; }
  .main-menu li > ul > li > ul { margin-left: 7px; padding-left: 9px; border-left-color: #d7b96f; background: #f3e4d6; }
  .main-menu li ul a,
  .main-menu li ul span { min-height: 44px; padding-block: 8px; color: #5b1815; font-size: var(--step--2); }
  /* Lantai keterbacaan menu level tiga: --step--2 (12,16px) berada di bawah
     ambang .78rem yang sudah diputuskan, jadi level ini naik satu langkah. */
  .main-menu li ul li ul a { font-size: var(--step--1); }
  .main-menu li ul a:hover,
  .main-menu li ul a:focus-visible { color: #43110f; background: #eed9c1; }
  .main-menu li ul .current > a,
  .main-menu li ul .active > a { color: #43110f; background: #ead0ad; }
  .main-menu li > ul[hidden] { display: none; }
  .main-menu li.parent > a, .main-menu li.deeper > a, .main-menu li.parent > span, .main-menu li.deeper > span { padding-right: 8px; }
  .main-menu li.parent > a::after, .main-menu li.deeper > a::after, .main-menu li.parent > span::after, .main-menu li.deeper > span::after { display: none; }
  .submenu-toggle { position: relative; display: grid; place-items: center; width: 46px; min-height: 46px; margin: 0; border: 0; border-left: 1px solid rgba(185,143,36,.18); border-radius: 0; color: #5b1815; background: transparent; touch-action: manipulation; }
  .submenu-toggle::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease; }
  .submenu-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(225deg); }
  .main-menu li.submenu-open > a { color: #43110f; font-weight: 800; }
  .main-menu li.current > a, .main-menu li.active > a, .main-menu a[aria-current="page"] { border-left: 3px solid #b98f24; color: #43110f; background: #f6e8d3; font-weight: 800; }
  .main-menu-list .dark-toggle { min-height: 44px; margin: 0; }
  .main-menu-list :focus-visible { outline: 3px solid #8d5f00; outline-offset: 2px; }
  body.menu-drawer-open .mobile-quick-actions, body.menu-drawer-open .access-panel, body.menu-drawer-open .floating-whatsapp, body.menu-drawer-open .back-to-top { visibility: hidden !important; pointer-events: none !important; }
  body.is-dark .main-menu-list { color: #fff3e4; background: #2d1714; }
  body.is-dark .mobile-menu-heading, body.is-dark .mobile-menu-footer { color: #fff3e4; border-color: #684039; background: #351b17; }
  body.is-dark .mobile-menu-brand strong, body.is-dark .mobile-menu-brand small, body.is-dark .main-menu li > a, body.is-dark .main-menu li > span, body.is-dark .submenu-toggle { color: #fff3e4; }
  body.is-dark .main-menu li > ul { background: #3c211c; }
  body.is-dark .main-menu li > ul > li > ul { background: #462720; }
  body.is-dark .main-menu li.current > a,
  body.is-dark .main-menu li.active > a,
  body.is-dark .main-menu a[aria-current="page"] { color: #fff3e4; background: #593027; }
  body.is-dark .main-menu li ul a:hover,
  body.is-dark .main-menu li ul a:focus-visible { color: #fff3e4; background: #593027; }
  body.is-dark .main-menu li ul .current > a,
  body.is-dark .main-menu li ul .active > a { color: #fff3e4; background: #684039; }
  body.is-dark .main-menu-list .menu-close > svg,
  body.is-dark .main-menu-list .mobile-menu-search > span,
  body.is-dark .main-menu-list .dark-toggle-copy strong { color: #fff3e4; }
  body.is-dark .menu-close { color: #fff3e4; background: #45241e; }
  body.is-dark .mobile-menu-actions a { color: #fff3e4; border-color: #684039; background: #3c211c; }
  body.is-dark .mobile-menu-search { color: #fff3e4; border-color: #684039; background: #3c211c; }
  body.is-dark .dark-toggle-copy small,
  body.is-dark .mobile-menu-contact { color: #f0d9cb; }
  body.is-dark .mobile-menu-contact a { color: #f0d9cb; }
  .main-menu-list { color: var(--nav-drawer-text); background: var(--nav-drawer-bg); }
  .mobile-menu-heading { color: var(--nav-drawer-text); border-color: var(--nav-drawer-line); background: var(--nav-drawer-surface); }
  .mobile-menu-scroll { scrollbar-color: var(--nav-drawer-accent) transparent; }
  .mobile-menu-footer { min-height: 68px; padding-block: 6px calc(6px + env(safe-area-inset-bottom)); color: var(--nav-drawer-text); border-color: var(--nav-drawer-line); background: var(--nav-drawer-surface); }
  .mobile-menu-footer .dark-toggle { min-height: 48px; padding-block: 4px; }
  .main-menu-list .dark-status-on { display: none; }
  .main-menu-list .dark-status-off { display: inline; }
  .main-menu-list .dark-toggle[aria-pressed="true"] .dark-status-off { display: none; }
  .main-menu-list .dark-toggle[aria-pressed="true"] .dark-status-on { display: inline; }
  .main-menu li ul li ul a { font-size: var(--step--1); line-height: 1.4; }
  .main-menu li > ul > li > ul { margin-left: 3px; padding-left: 6px; }
  .mobile-menu-summary-item { display: grid; grid-template-columns: minmax(0, 1fr) !important; }
  .main-menu li ul .mobile-menu-summary-link { min-height: 44px; color: var(--nav-drawer-text); font-weight: 800; background: color-mix(in srgb, var(--nav-drawer-accent) 10%, transparent); }
  .mobile-menu-summary-link::before { content: "Ringkasan"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mobile-menu-footer .dark-toggle-copy { display: flex; align-items: baseline; gap: 5px; }
  .mobile-menu-footer .dark-toggle-copy strong { font-size: var(--step--2); }
  .mobile-menu-footer .dark-toggle-copy small::before { content: "· "; }
  .mobile-menu-footer .dark-toggle-copy small { font-size: var(--step--3); }
  .mobile-menu-footer .mobile-menu-contact { height: 48px; }
  .mobile-menu-group-label { display: block !important; grid-template-columns: 1fr !important; min-height: 0; margin: 8px 10px 3px; padding: 7px 2px 4px; border-bottom: 1px solid var(--nav-drawer-line); color: var(--nav-drawer-accent); font-size: var(--step--3); font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
  .main-menu-list .dark-toggle-copy [hidden] { display: none !important; }
  .mobile-menu-footer .dark-toggle {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 14px;
    white-space: nowrap;
  }
  .mobile-menu-footer .dark-toggle-copy {
    min-width: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-align: center;
  }
  .mobile-menu-footer .dark-toggle-copy strong,
  .mobile-menu-footer .dark-toggle-copy small { white-space: nowrap; }
  .mobile-menu-footer .dark-toggle-moon { color: var(--nav-drawer-text); }
  .mobile-menu-footer .dark-toggle-sun { color: var(--nav-drawer-accent); }
  body.is-dark .mobile-menu-footer .dark-toggle-moon,
  body.is-dark .mobile-menu-footer .dark-toggle-sun { color: var(--nav-drawer-accent); }
  .main-menu-list .mobile-menu-footer .dark-toggle-copy,
  .main-menu-list .mobile-menu-footer .dark-toggle-copy > strong,
  .main-menu-list .mobile-menu-footer .dark-toggle-copy > small,
  .main-menu-list .mobile-menu-footer .dark-toggle-copy small > span { min-height: 0; padding: 0; line-height: 1.2; }
  .main-menu-list .mobile-menu-footer .dark-toggle-copy { display: inline-flex; align-items: baseline; }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .main-menu-list, .submenu-toggle::before { transition: none; }
}

@media (max-width: 359px) {
  .mobile-menu-heading { min-height: 58px; padding-block: calc(6px + env(safe-area-inset-top)) 6px; }
  .mobile-menu-brand img { width: 32px; height: 32px; flex-basis: 32px; }
  .mobile-menu-brand small { display: none; }
  .mobile-menu-scroll { padding-inline: 9px; }
  .mobile-menu-actions { gap: 5px; }
  .mobile-menu-contact { padding-inline: 5px; font-size: var(--step--3); }
}

@media (max-width: 1100px) and (max-height: 500px) {
  .mobile-menu-heading { min-height: 56px; padding-block: calc(5px + env(safe-area-inset-top)) 5px; }
  .mobile-menu-brand small { display: none; }
  .mobile-menu-actions { display: none; }
  .mobile-menu-search { margin-bottom: 5px; }
  .mobile-menu-footer { position: static; padding-block: 5px calc(5px + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) {
  .main-menu li.parent > a::after,
  .main-menu li.deeper > a::after,
  .main-menu li.parent > span::after,
  .main-menu li.deeper > span::after {
    right: 4px;
  }

  .quick-links,
  .home-grid,
  .home-juknis-layout,
  .home-content-pair,
  .home-briefing-pair,
  .content-layout,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .service-links,
  .app-links,
  .staff-grid,
  .home-slider .custom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-service-status {
    grid-template-columns: 1fr;
  }

  .sipp-schedule-meta {
    grid-template-columns: 1fr;
  }

  .facility-map-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-tile:first-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }



  .mobile-quick-actions {
    display: grid;
  }

  body.is-home {
    padding-bottom: 74px;
  }
}

@media (max-width: 560px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 24px 16px;
    gap: 20px;
  }
  .hero-copy h2 {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
  }
  .hero-actions {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hero-actions a {
    min-height: 44px;
    font-size: var(--step--1);
    padding: 8px 12px;
  }
  .hero-kicker {
    margin-bottom: 8px;
  }
}


@media (max-width: 560px) {
  .topbar .custom,
  .topbar-info {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-lockup {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .header-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-mark {
    width: 76px;
    height: 76px;
    padding: 0;
  }

  .asn-berakhlak-mark {
    width: clamp(170px, 48vw, 250px);
  }

  .service-links,
  .app-links,
  .info-tabs,
  .banner-grid,
  .staff-grid,
  .home-slider .custom,
  .quick-path-grid,
  .facility-map-board,
  .footer-column-grid {
    grid-template-columns: 1fr;
  }

  .section-heading-row {
    align-items: start;
    flex-direction: column;
  }

  .sipp-schedule-head {
    align-items: start;
    flex-direction: column;
  }

  .home-priority-rail {
    padding: 14px;
  }

  .quick-path-card {
    min-height: auto;
  }

  .notice-board a {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .app-links-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-channel-header {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .news-channel-header h1 {
    font-size: 1.55rem;
  }

  .news-channel-tabs {
    justify-content: flex-start;
  }

  .staff-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .staff-card img {
    width: 96px;
  }

  .header-brand,
  .hero,
  .quick-links,
  .site-main,
  .home-grid,
  .home-juknis-layout,
  .site-footer {
    padding-inline: 16px;
  }
}

.maklumat-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 70%;
  margin-inline: auto;
}

.maklumat-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf6, #fbf4e2);
  border: 1px solid rgba(185, 143, 36, 0.35);
  border-radius: var(--radius-card);
}

.maklumat-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent) 45%, #e9cd76 55%, var(--color-accent));
}

.maklumat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.maklumat-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-accent);
}

.maklumat-panel-title {
  margin: 4px 0 0;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.6vw, 1.38rem);
  line-height: 1.25;
}

.maklumat-doc {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(185, 143, 36, 0.45);
  border-radius: 10px;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(185, 143, 36, 0.35), 0 10px 24px rgba(29, 39, 48, 0.1);
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}
.maklumat-duo .maklumat-doc {
  width: 49%;
  margin-inline: auto;
}


.maklumat-doc:hover,
.maklumat-doc:focus-visible {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(185, 143, 36, 0.55), 0 22px 44px rgba(29, 39, 48, 0.18);
}

.maklumat-doc img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 11;
  object-fit: contain;
  object-position: center;
  background: #fbf7ec;
  border-radius: 4px;
}

.maklumat-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(29, 39, 48, 0.85);
  color: #fff;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.maklumat-doc:hover .maklumat-zoom-hint,
.maklumat-doc:focus-visible .maklumat-zoom-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.maklumat-quote {
  flex: 1;
  margin: 0;
  padding: 2px 0 0 14px;
  border-left: 3px solid var(--color-accent);
}

.maklumat-quote p {
  margin: 0 0 8px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step--1);
  line-height: 1.55;
}

.maklumat-quote footer {
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.45;
}

.maklumat-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 18px;
  min-height: 44px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 700;
  transition: background .2s ease, gap .2s ease;
}

.maklumat-more::after {
  content: "\2192";
}

.maklumat-more:hover,
.maklumat-more:focus-visible {
  background: var(--color-primary-dark);
  gap: 12px;
}

.maklumat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(18, 12, 8, 0.86);
  backdrop-filter: blur(6px);
  animation: maklumat-lightbox-in .22s ease;
}

.maklumat-lightbox[hidden] {
  display: none;
}

@keyframes maklumat-lightbox-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.maklumat-lightbox figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  max-width: min(92vw, 820px);
  max-height: 100%;
}

.maklumat-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.maklumat-lightbox figcaption {
  color: #f3e9d2;
  text-align: center;
  font-size: var(--step--1);
}

.maklumat-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}

.maklumat-lightbox-close:hover,
.maklumat-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

body.maklumat-lightbox-open {
  overflow: hidden;
}

body.is-dark .maklumat-panel {
  background: #19232b;
  border-color: #46515a;
}

body.is-dark .maklumat-panel-title {
  color: #f3c96b;
}

body.is-dark .maklumat-doc {
  background: #101820;
  border-color: #46515a;
  box-shadow: inset 0 0 0 4px #101820, inset 0 0 0 5px rgba(243, 201, 107, 0.35), 0 10px 24px rgba(0, 0, 0, 0.35);
}

body.is-dark .maklumat-doc img {
  background: #101820;
}

@media (prefers-reduced-motion: reduce) {
  .maklumat-doc,
  .maklumat-more,
  .maklumat-zoom-hint {
    transition: none;
  }

  .maklumat-doc:hover,
  .maklumat-doc:focus-visible {
    transform: none;
  }

  .maklumat-lightbox {
    animation: none;
  }
}

@media (max-width: 760px) {
  .maklumat-duo {
    grid-template-columns: 1fr;
  }
  .maklumat-duo {
    width: 100%;
  }
}

.instansi-news-board {
  margin-bottom: 16px;
}

.instansi-news-board .pt-news-header {
  padding: 0 0 16px;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 24px;
}

.instansi-news-board .pt-news-header h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 800;
}

.instansi-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  background: transparent;
  padding: 0;
}

.instansi-news-column {
  display: flex;
  flex-direction: column;
  background: #fffdf7;
  border: 1px solid #ead8a7;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.instansi-ma .instansi-category-title {
  background: #154c3e;
  border-bottom: 3px solid #b98f24;
}
.instansi-ma .list-date {
  background: rgba(31, 91, 75, 0.08);
  border-color: rgba(31, 91, 75, 0.28);
  color: #1f5b4b;
}

.instansi-badilum .instansi-category-title {
  background: #17375c;
  border-bottom: 3px solid #2873c4;
}
.instansi-badilum .list-date {
  background: rgba(23, 55, 92, 0.08);
  border-color: rgba(23, 55, 92, 0.25);
  color: #17375c;
}

.instansi-pt .instansi-category-title {
  background: #6e4c09;
  border-bottom: 3px solid #b98f24;
}
.instansi-pt .list-date {
  background: rgba(110, 76, 9, 0.08);
  border-color: rgba(110, 76, 9, 0.28);
  color: #6e4c09;
}

.instansi-category-title {
  padding: 14px 20px;
  font-weight: 800;
  color: #fff;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-align: center;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instansi-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 20px;
  flex-grow: 1;
}

.instansi-sub-col {
  display: flex;
  flex-direction: column;
}

.instansi-sub-col h3 {
  margin: 0 0 12px;
  font-size: var(--step--2);
  font-weight: 800;
  color: var(--color-green);
  border-bottom: 2px solid var(--color-green);
  padding-bottom: 6px;
  letter-spacing: 0.06em;
  text-transform: none;
}

.instansi-sub-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.instansi-sub-col li {
  position: relative;
  border-bottom: 1px dashed rgba(29, 39, 48, 0.08);
  padding-bottom: 6px;
}

.instansi-sub-col li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.instansi-sub-col li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  transition: transform 0.18s ease, color 0.18s ease;
}

.instansi-sub-col li a:hover,
.instansi-sub-col li a:focus-visible {
  color: var(--color-primary);
  transform: translateX(3px);
}

.list-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 20px;
  background: var(--color-accent-soft);
  border: 1px solid rgba(185, 143, 36, 0.28);
  border-radius: 4px;
  color: var(--color-primary);
  font-size: var(--step--3);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 1px;
}

.list-title {
  flex-grow: 1;
}

@media (max-width: 1024px) {
  .instansi-news-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 760px) {
  .instansi-sub-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
}

.stats-card {
  background: #fff;
  border: 1px solid var(--color-line);
}

.stats-board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stats-board-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  border: 1px solid rgba(185, 143, 36, 0.18);
  border-radius: var(--radius);
  text-align: center;
}

.stats-num {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.stats-label {
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.home-map-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.home-map-heading {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--color-line);
  background: #fff;
}

.home-map-heading p,
.home-map-heading h2 {
  margin: 0;
}

.home-map-heading h2 {
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1.2;
}

.home-map-card iframe {
  display: block;
  width: 100%;
  min-height: clamp(180px, 24vw, 280px);
  border: 0;
}

.home-map-caption {
  display: grid;
  gap: 8px;
  padding: 16px 18px 18px;
  border-top: 1px solid #ead8a7;
  background: #fff;
}

.home-map-caption strong {
  color: var(--color-primary);
  font-size: 1.05rem;
}

.home-map-caption span {
  color: var(--color-ink);
  font-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

.footer-social h2 {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
}


.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
}

.social-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-instagram .social-icon {
  background: radial-gradient(circle at 30% 110%, #fdf497 0 18%, #fd5949 45%, #d6249f 70%, #285aeb 100%);
  color: #fff;
}

.social-facebook .social-icon {
  background: #1877f2;
  color: #fff;
}

.social-youtube .social-icon {
  background: #ff0033;
  color: #fff;
}

.social-youtube .youtube-play {
  fill: #fff;
}

.footer-social {
  order: 3;
}

.footer-social .social-link img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}
.footer-contact {
  order: 1;
}

.footer-links {
  order: 2;
}

.footer-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.footer-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.footer-brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.footer-brand-text address {
  font-style: normal;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step--1);
  line-height: 1.5;
  margin: 0 0 10px;
}

.footer-contact-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  margin: 7px 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}

.footer-contact-item .fc-icon {
  display: grid;
  place-items: start center;
  width: 22px;
  height: 22px;
  color: var(--color-accent);
}

.footer-contact-item .fc-icon svg {
  width: 17px;
  height: 17px;
}

.footer-contact-item a {
  color: #fff;
  text-decoration: none;
}

.footer-contact-item a:hover {
  text-decoration: underline;
  color: var(--color-accent);
}



.footer-col-title {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
}


.footer-links .service-links {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links .service-links a {
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  transition: color 180ms ease;
}


.footer-links .service-links a:hover,
.footer-links .service-links a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}


@media (max-width: 760px) {
  .footer-social {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .footer-social .social-link {
    min-height: 0;
    padding: 6px;
    border: 0;
    background: none;
  }
  .footer-social .social-link span {
    display: none;
  }
  .footer-social .social-link img {
    width: 30px;
    height: 30px;
  }
  .footer-social .social-links {
    justify-content: center;
    gap: 6px;
  }
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(185, 143, 36, 0.5);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(47, 20, 14, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms cubic-bezier(.16, 1, .3, 1), transform 180ms cubic-bezier(.16, 1, .3, 1);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  box-shadow: 0 14px 32px rgba(47, 20, 14, 0.5);
  outline: 3px solid rgba(185, 143, 36, 0.4);
  outline-offset: 2px;
}

.instansi-news-compact .pt-news-header {
  padding: 18px 20px 14px;
}

.instansi-news-compact .pt-news-header p:last-child {
  display: none;
}

.instansi-news-compact .instansi-news-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.instansi-news-compact .instansi-category-title {
  padding: 12px 14px;
  font-size: var(--step--1);
}

.instansi-compact-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 8px 12px 12px;
  list-style: none;
}

.instansi-compact-list li + li {
  border-top: 1px dashed rgba(29, 39, 48, 0.12);
}

.instansi-compact-list a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 750;
  line-height: 1.35;
}

.instansi-compact-list .list-date {
  width: 52px;
  height: 24px;
  font-size: var(--step--2);
}

@media (max-width: 980px) {
  .instansi-news-compact .instansi-news-grid {
    grid-template-columns: 1fr;
  }
}

.instansi-news-compact .instansi-sub-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px 14px;
}

.instansi-news-compact .instansi-sub-col h3 {
  margin-bottom: 6px;
  padding-bottom: 6px;
  font-size: var(--step--1);
}

.instansi-news-compact .instansi-compact-list {
  padding: 0;
}

.instansi-news-compact .instansi-news-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

.instansi-news-compact .instansi-news-column {
  max-width: none;
}

.instansi-category-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.instansi-category-title img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 0;
  border: 0;
}

.instansi-category-title {
  font-size: 1.22rem !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.instansi-category-title span {
  color: #ffffff !important;
}

.instansi-category-title img {
  width: 32px !important;
  height: 32px !important;
}

.instansi-news-compact {
  padding: 12px 14px !important;
}

.instansi-news-compact .instansi-news-grid {
  gap: 10px !important;
}

.instansi-news-compact .instansi-news-column {
  margin-bottom: 0 !important;
}

.instansi-news-compact .instansi-category-title {
  padding: 8px 12px !important;
  min-height: 40px !important;
  font-size: 1.05rem !important;
}

.instansi-news-compact .instansi-category-title img {
  width: 26px !important;
  height: 26px !important;
}

.instansi-news-compact .instansi-sub-grid {
  padding: 8px 12px 8px !important;
  gap: 12px !important;
}

.instansi-news-compact .instansi-sub-col h3 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-bottom: 4px !important;
  font-size: 0.82rem !important;
}

.instansi-news-compact .instansi-compact-list a {
  padding: 4px 0 !important;
  gap: 8px !important;
}

.instansi-news-compact .instansi-compact-list .list-date {
  width: 48px !important;
  height: 20px !important;
  font-size: 0.65rem !important;
}

/* === Compaction: instansi feed tighter (moderate) === */
.instansi-news-compact {
  padding: 10px 12px !important;
}

.instansi-news-compact .instansi-news-grid {
  gap: 8px !important;
}

.instansi-news-compact .instansi-category-title {
  padding: 5px 10px !important;
  min-height: 34px !important;
  margin-bottom: 4px !important;
}

.instansi-news-compact .instansi-sub-grid {
  padding: 6px 10px !important;
  gap: 10px !important;
}

.instansi-news-compact .instansi-sub-col h3 {
  margin-bottom: 2px !important;
  padding-bottom: 2px !important;
}

.instansi-news-compact .instansi-compact-list a {
  padding: 2px 0 !important;
  line-height: 1.38 !important;
}

/* === Realisasi Anggaran DIPA (donut) === */
.dipa-widget {
  display: grid;
  gap: 12px;
}

.dipa-period {
  text-align: center;
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dipa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dipa-item {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--color-soft);
}

.dipa-ring {
  --deg: calc(var(--pct, 0) * 3.6deg);
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: conic-gradient(var(--dipa-color, var(--color-primary)) 0deg var(--deg), #dde3e8 var(--deg) 360deg);
  display: grid;
  place-items: center;
}

.dipa-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}

.dipa-ring-pct {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--dipa-color, var(--color-primary));
}

.dipa-label {
  font-size: var(--step--2);
  font-weight: 800;
  color: var(--color-ink);
}

.dipa-amount {
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--color-muted);
}

.dipa-sub {
  font-size: var(--step--3);
  color: var(--color-muted);
}

.dipa-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dipa-link .dipa-item {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.dipa-link:hover .dipa-item,
.dipa-link:focus-visible .dipa-item {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(29, 39, 48, 0.12);
}

.dipa-link-hint {
  display: block;
  text-align: center;
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 4px;
}

/* --- Pemilih periode DIPA ---
   Panel teraktif dirender `is-active` dari server, jadi angkanya sudah benar
   sebelum JS jalan. Tanpa JS pemilihnya tidak berpindah, tapi tidak ada yang
   kosong - pola yang sama dengan tab Kabar Instansi. */
.dipa-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.dipa-tab {
  min-height: 30px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 4px 10px;
  background: #fff;
  color: var(--color-muted);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.dipa-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.dipa-tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.dipa-panel[hidden] {
  display: none;
}

/* --- Delta terhadap periode pembanding ---
   Satuannya poin persentase, bukan persen dari persen: serapan kumulatif naik
   dari 38,20% ke 54,96% adalah +16,76 poin. Menyebutnya "persen" akan salah. */
.dipa-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: var(--step--3);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.dipa-delta.is-up {
  background: rgba(31, 91, 75, 0.12);
  color: #1f5b4b;
}

.dipa-delta.is-down {
  background: rgba(143, 31, 11, 0.12);
  color: #8f1f0b;
}

.dipa-delta.is-flat {
  background: rgba(29, 39, 48, 0.08);
  color: var(--color-muted);
}

/* Periode paling awal tidak punya pembanding; dinyatakan, bukan dikosongkan. */
.dipa-delta.is-none {
  padding: 0;
  background: none;
  color: var(--color-muted);
  font-size: var(--step--3);
  font-weight: 600;
  font-style: italic;
}

body.is-dark .dipa-tab {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
  color: #d5dde4;
}

body.is-dark .dipa-tab.is-active {
  border-color: var(--dark-content-accent);
  background: #7a2518;
  color: #fff8ed;
}

body.is-dark .dipa-delta.is-up {
  background: rgba(120, 214, 173, 0.16);
  color: #78d6ad;
}

body.is-dark .dipa-delta.is-down {
  background: rgba(255, 154, 132, 0.16);
  color: #ff9a84;
}

/* === Hero slider (2 slide: selamat datang + berita/pengumuman) === */
.hero-slider {
  display: grid;
  gap: 14px;
}

.hero-slides {
  position: relative;
  display: grid;
}

.hero-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 12px;
}

.hero-tabs button {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 18px;
  background: #fff;
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--step--1);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.hero-tabs button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.hero-tabs button.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.hero-tab-panels {
  display: grid;
}

.hero-tab-list {
  grid-area: 1 / 1;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.hero-tab-list.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.hero-tab-list a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.hero-tab-list a:hover,
.hero-tab-list a:focus-visible,
.hero-tab-list a.is-preview {
  background: #fff;
  border-color: var(--color-line);
  box-shadow: var(--shadow-card);
  color: var(--color-primary);
}

.hero-tab-list time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font-size: var(--step--3);
  font-weight: 800;
}

.hero-tab-empty a {
  grid-template-columns: 1fr;
}

.hero-news-media img {
  transition: opacity 220ms ease;
}

.hero-news-media img.is-swapping {
  opacity: 0;
}

.hero-news-media figcaption {
  min-height: 42px;
}

.hero-slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.hero-slider-dots button {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.hero-slider-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: #d2d8de;
  transform: translate(-50%, -50%);
  transition: width 180ms ease, background-color 180ms ease;
}

.hero-slider-dots button.is-active::before {
  width: 32px;
  background: var(--color-primary);
}

@media (max-width: 900px) {
  .hero-slide {
    grid-template-columns: 1fr;
  }
}

/* Hover lift seragam untuk card interaktif */
.priority-service-card,
.quick-path-card,
.app-links a,
.news-tile {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.priority-service-card:hover,
.quick-path-card:hover,
.app-links a:hover,
.news-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(29, 39, 48, 0.1);
}

/* === Hero enhancements (arrows, progress, ken burns, overlay, status, badge, excerpt) === */
.hero-slider {
  position: relative;
}

.hero-nav {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  opacity: 0.55;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}

.hero-nav:hover,
.hero-nav:focus-visible {
  opacity: 1;
  transform: scale(1.06);
  background: #fff;
}


.hero-slider-dots button {
  position: relative;
  overflow: visible;
  background: transparent;
}

.hero-slider-dots button::before,
.hero-slider-dots button.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 6px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.hero-slider-dots button::before {
  background: rgba(255, 255, 255, 0.34);
}

.hero-slider-dots button.is-active::after {
  background: var(--color-accent);
  transform-origin: left center;
  transform: translate(-50%, -50%) scaleX(0);
}

.hero-slider-dots button.is-active::before,
.hero-slider-dots button.is-active::after {
  width: 32px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slider-dots button.is-active::after {
    animation: heroDotProgress var(--ci, 6000ms) linear forwards;
  }

  .hero-slider:hover .hero-slider-dots button.is-active::after {
    animation-play-state: paused;
  }

  .hero-slide.is-active .hero-media img {
    animation: heroKenBurns 9s ease-out forwards;
  }
}

@keyframes heroDotProgress {
  from { transform: translate(-50%, -50%) scaleX(0); }
  to { transform: translate(-50%, -50%) scaleX(1); }
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.hero-media {
  position: relative;
}

.hero-media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, rgba(29, 39, 48, 0), rgba(29, 39, 48, 0.78));
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
}

.hero-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.hero-status.is-open {
  background: rgba(31, 91, 75, 0.1);
  color: var(--color-green);
}

.hero-status.is-closed {
  background: rgba(143, 31, 11, 0.08);
  color: var(--color-primary);
}

.hero-badge-new {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--step--3);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-badge-new {
    animation: heroBadgePulse 2.2s ease-in-out infinite;
  }
}

@keyframes heroBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 31, 11, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(143, 31, 11, 0); }
}

.hero-tab-list a {
  align-items: start;
}

.hero-item-body {
  display: block;
  min-width: 0;
}

.hero-item-title {
  display: block;
}

.hero-item-excerpt {
  display: block;
  overflow: hidden;
  min-height: 34px;
  max-height: 34px;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: var(--step--2);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .hero-nav { opacity: 0.85; }
}

/* === Sejarah Pengadilan page === */
.sejarah-page {
  display: grid;
  gap: 24px;
}

.sejarah-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: stretch;
  margin-top: 4px;
}

.sejarah-hero-copy,
.sejarah-photo-card,
.sejarah-body-card,
.sejarah-timeline article {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.sejarah-hero-copy {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
}

.sejarah-hero-copy::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -88px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 143, 36, 0.16), rgba(185, 143, 36, 0));
  pointer-events: none;
}

.sejarah-kicker {
  display: inline-flex;
  margin: 0 0 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  padding: 6px 12px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .sejarah-hero-copy h2 {
  max-width: 760px;
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.08;
}

.sejarah-lead {
  max-width: 68ch;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.72;
}

.sejarah-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.sejarah-fact-grid div {
  border: 1px solid rgba(185, 143, 36, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0, #fff);
  padding: 12px;
}

.sejarah-fact-grid strong,
.sejarah-fact-grid span {
  display: block;
}

.sejarah-fact-grid strong {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.1;
}

.sejarah-fact-grid span {
  margin-top: 5px;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.sejarah-photo-card {
  overflow: hidden;
  margin: 0;
}

.sejarah-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.sejarah-photo-card figcaption {
  margin: 0;
  border-top: 1px solid var(--color-line);
  background: #fff;
  padding: 10px 14px;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.sejarah-story-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: 20px;
  align-items: start;
}

.sejarah-timeline {
  display: grid;
  gap: 12px;
}

.sejarah-timeline article {
  position: relative;
  padding: 18px 18px 18px 62px;
}

.sejarah-timeline article span {
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--step--2);
  font-weight: 800;
}

.sejarah-timeline h3 {
  margin: 0 0 6px;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.35;
}

.content-primary .sejarah-timeline p,
.content-primary .sejarah-body-card p,
.content-primary .sejarah-lead,
.content-primary .sejarah-source-box {
  text-align: left;
  hyphens: none;
}

.sejarah-timeline p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.62;
}

.sejarah-body-card {
  padding: clamp(20px, 3vw, 30px);
}

.sejarah-body-card p {
  margin: 0 0 15px;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.76;
}

.sejarah-source-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  border-radius: 14px;
  background: var(--color-accent-soft);
  padding: 14px;
}

.sejarah-source-box strong {
  color: var(--color-primary-dark);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sejarah-source-box a {
  border-radius: 999px;
  background: #fff;
  padding: 7px 12px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 800;
}

.sejarah-source-box a:hover,
.sejarah-source-box a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .sejarah-hero-card,
  .sejarah-story-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sejarah-fact-grid {
    grid-template-columns: 1fr;
  }

  .sejarah-photo-card img {
    min-height: 240px;
  }

  .sejarah-timeline article {
    padding-left: 56px;
  }
}

/* === Tugas Pokok dan Fungsi page === */
.tupoksi-page {
  display: grid;
  gap: 22px;
}

.tupoksi-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at top right, rgba(185, 143, 36, 0.16), transparent 34%),
    linear-gradient(135deg, #fff, #fffaf0);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}

.tupoksi-kicker {
  display: inline-flex;
  margin: 0 0 10px;
  border-radius: 999px;
  background: rgba(143, 31, 11, 0.08);
  padding: 6px 12px;
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .tupoksi-hero-card h2 {
  max-width: 780px;
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  line-height: 1.08;
}

.content-primary .tupoksi-hero-card p {
  max-width: 72ch;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.75;
  text-align: left;
  hyphens: none;
}

.tupoksi-summary-card {
  display: grid;
  align-content: center;
  gap: 10px;
  border-radius: 18px;
  background: var(--color-primary);
  padding: 20px;
  color: #fff;
  box-shadow: 0 18px 34px rgba(143, 31, 11, 0.2);
}

.tupoksi-summary-card strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.tupoksi-summary-card span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step--1);
  font-weight: 700;
}

.tupoksi-summary-card span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.tupoksi-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tupoksi-process article,
.tupoksi-panel,
.tupoksi-service-note {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.tupoksi-process article {
  padding: 18px;
}

.tupoksi-process span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font-weight: 900;
  font-size: var(--step--1);
}

.tupoksi-process h3 {
  margin: 12px 0 6px;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.35;
}

.content-primary .tupoksi-process p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.58;
  text-align: left;
  hyphens: none;
}

.tupoksi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.tupoksi-panel {
  padding: clamp(20px, 3vw, 28px);
}

.tupoksi-panel-primary {
  background: linear-gradient(180deg, #fff, #fffaf0);
}

.tupoksi-panel-label {
  display: inline-flex;
  margin: 0 0 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  padding: 5px 10px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .tupoksi-panel h3 {
  margin: 0 0 14px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.tupoksi-panel ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tupoksi-panel li {
  position: relative;
  padding-left: 24px;
  color: var(--color-ink);
  line-height: 1.62;
}

.tupoksi-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(143, 31, 11, 0.08);
}

.tupoksi-function-list {
  display: grid;
  gap: 10px;
}

.tupoksi-function-list div {
  border-top: 1px solid rgba(185, 143, 36, 0.28);
  padding: 13px 0;
}

.tupoksi-function-list strong,
.tupoksi-function-list span {
  display: block;
}

.tupoksi-function-list strong {
  color: var(--color-primary);
  font-size: 0.98rem;
}

.tupoksi-function-list span {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.55;
}

.tupoksi-service-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background: var(--color-primary);
  padding: 18px 22px;
  color: #fff;
}

.tupoksi-service-note strong {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  padding: 7px 12px;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.content-primary .tupoksi-service-note p {
  margin: 0;
  color: #fff;
  line-height: 1.62;
  text-align: left;
  hyphens: none;
}

@media (max-width: 980px) {
  .tupoksi-hero-card,
  .tupoksi-grid,
  .tupoksi-service-note {
    grid-template-columns: 1fr;
  }

  .tupoksi-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tupoksi-process {
    grid-template-columns: 1fr;
  }
}

/* === Content readability adjustments === */
.sejarah-page p,
.sejarah-page li,
.tupoksi-page p,
.tupoksi-page li,
.tupoksi-function-list span {
  text-align: start;
  hyphens: none;
}

.sejarah-kicker,
.tupoksi-kicker,
.sejarah-fact-grid span,
.sejarah-source-box,
.sejarah-source-box a,
.tupoksi-summary-card span,
.tupoksi-panel-label,
.tupoksi-service-note strong {
  text-align: left;
  hyphens: none;
}

.tupoksi-visual-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.tupoksi-illustration {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(185, 143, 36, 0.28);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(29, 39, 48, 0.08);
}

.tupoksi-illustration img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tupoksi-illustration figcaption {
  margin: 0;
  border-top: 1px solid var(--color-line);
  background: #fffaf0;
  padding: 10px 12px;
  color: var(--color-muted);
  font-size: var(--step--2);
  line-height: 1.45;
}

.tupoksi-visual-stack .tupoksi-summary-card {
  min-height: 0;
}

.content-primary .sejarah-page p,
.content-primary .sejarah-page li,
.content-primary .tupoksi-page p,
.content-primary .tupoksi-page li,
.content-primary .tupoksi-function-list span {
  text-align: start;
  hyphens: none;
}

.content-primary .sejarah-kicker,
.content-primary .tupoksi-kicker,
.content-primary .sejarah-fact-grid span,
.content-primary .sejarah-source-box,
.content-primary .sejarah-source-box a,
.content-primary .tupoksi-summary-card span,
.content-primary .tupoksi-panel-label,
.content-primary .tupoksi-service-note strong,
.content-primary .tupoksi-illustration figcaption {
  text-align: left;
  hyphens: none;
}

.tupoksi-next-steps {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(18px, 3vw, 30px);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: clamp(20px, 3vw, 28px) 0;
}

.content-primary .tupoksi-next-steps h3 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.tupoksi-next-steps ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tupoksi-next-steps li + li {
  border-top: 1px solid var(--color-line);
}

.tupoksi-next-steps a {
  display: grid;
  gap: 3px;
  padding: 12px 0;
  color: var(--color-ink);
  text-decoration: none;
}

.tupoksi-next-steps a:hover strong,
.tupoksi-next-steps a:focus-visible strong {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tupoksi-next-steps strong,
.tupoksi-next-steps span {
  display: block;
}

.tupoksi-next-steps strong {
  color: var(--color-primary);
}

.tupoksi-next-steps span {
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .tupoksi-next-steps {
    grid-template-columns: 1fr;
  }

  .content-primary .tupoksi-process p,
  .tupoksi-function-list span,
  .tupoksi-next-steps span {
    font-size: 0.95rem;
  }
}

/* === Visi dan Misi page === */
.visimisi-page {
  display: grid;
  gap: 22px;
}

.visimisi-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at top right, rgba(185, 143, 36, 0.2), transparent 35%),
    linear-gradient(135deg, #fff, #fffaf0);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}

.visimisi-kicker {
  display: inline-flex;
  margin: 0 0 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  padding: 6px 12px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .visimisi-hero-card h2 {
  max-width: 760px;
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.08;
}

.content-primary .visimisi-lead {
  max-width: 72ch;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}

.visimisi-illustration {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(185, 143, 36, 0.32);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(29, 39, 48, 0.1);
}

.visimisi-illustration img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.visimisi-illustration figcaption {
  margin: 0;
  border-top: 1px solid var(--color-line);
  background: #fffaf0;
  padding: 10px 12px;
  color: var(--color-muted);
  font-size: var(--step--2);
  line-height: 1.45;
}

.visimisi-vision-card,
.visimisi-mission-section,
.visimisi-values-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.visimisi-vision-card {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  background: linear-gradient(135deg, var(--color-primary), #6f160a);
  color: #fff;
}

.visimisi-vision-card::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.visimisi-vision-card span {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  font-size: var(--step--2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .visimisi-vision-card blockquote {
  margin: 16px 0 10px;
  border: 0;
  background: transparent;
  padding: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.16;
}

.content-primary .visimisi-vision-card p {
  max-width: 72ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.visimisi-mission-section {
  padding: clamp(20px, 3vw, 30px);
}

.visimisi-section-heading p {
  display: inline-flex;
  margin: 0 0 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  padding: 5px 11px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .visimisi-section-heading h3 {
  margin: 0 0 18px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
}

.visimisi-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.visimisi-mission-grid article {
  position: relative;
  min-height: 178px;
  border: 1px solid rgba(185, 143, 36, 0.26);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffaf0, #fff);
  padding: 18px 18px 18px 68px;
}

.visimisi-mission-grid article span {
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 900;
  font-size: var(--step--1);
}

.visimisi-mission-grid h4 {
  margin: 0 0 7px;
  color: var(--color-ink);
  font-size: 1.02rem;
  line-height: 1.35;
}

.content-primary .visimisi-mission-grid p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.64;
  text-align: justify;
  hyphens: auto;
}

.visimisi-values-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
}

.visimisi-values-card strong {
  border-radius: 999px;
  background: var(--color-primary);
  padding: 8px 13px;
  color: #fff;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.visimisi-values-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.visimisi-values-card span {
  border: 1px solid rgba(185, 143, 36, 0.38);
  border-radius: 999px;
  background: #fffaf0;
  padding: 8px 12px;
  color: var(--color-primary-dark);
  font-size: var(--step--1);
  font-weight: 800;
}

@media (max-width: 980px) {
  .visimisi-hero-card,
  .visimisi-values-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .visimisi-mission-grid {
    grid-template-columns: 1fr;
  }

  .visimisi-mission-grid article {
    min-height: 0;
  }
}

/* === Struktur Organisasi page === */
.struktur-page {
  display: grid;
  gap: 22px;
}

.struktur-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at top right, rgba(185, 143, 36, 0.16), transparent 34%),
    linear-gradient(135deg, #fff, #fffaf0);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}

.struktur-kicker {
  display: inline-flex;
  margin: 0 0 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  padding: 6px 12px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .struktur-hero-card h2 {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.content-primary .struktur-hero-card p {
  max-width: 76ch;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}

.struktur-focus-list {
  display: grid;
  gap: 10px;
  border-radius: 18px;
  background: var(--color-primary);
  padding: 18px;
  color: #fff;
  box-shadow: 0 18px 34px rgba(143, 31, 11, 0.2);
}

.struktur-focus-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--step--1);
  font-weight: 800;
}

.struktur-focus-list span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.struktur-chart-card,
.struktur-note-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.struktur-chart-card {
  overflow: hidden;
}

.struktur-chart-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg, #fffaf0, #fff);
  padding: 18px 20px;
}

.struktur-chart-heading p {
  margin: 0 0 4px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .struktur-chart-heading h3 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.struktur-chart-heading a {
  display: inline-flex;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--color-primary);
  padding: 8px 13px;
  color: #fff;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 800;
}

.struktur-chart-heading a:hover,
.struktur-chart-heading a:focus-visible {
  background: var(--color-primary-dark);
}

.struktur-chart-link {
  display: block;
  padding: clamp(12px, 2vw, 20px);
  background:
    linear-gradient(45deg, rgba(185, 143, 36, 0.05) 25%, transparent 25%, transparent 75%, rgba(185, 143, 36, 0.05) 75%),
    #fff;
  background-size: 18px 18px;
}

.struktur-chart-link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--color-line);
  box-shadow: 0 16px 34px rgba(29, 39, 48, 0.08);
}

.struktur-note-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background: var(--color-accent-soft);
  padding: 16px 20px;
}

.struktur-note-card strong {
  border-radius: 999px;
  background: #fff;
  padding: 7px 12px;
  color: var(--color-primary);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.content-primary .struktur-note-card p {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.62;
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 980px) {
  .struktur-hero-card,
  .struktur-note-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .struktur-chart-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === Kontak page === */
.kontak-page {
  display: grid;
  gap: 22px;
}

.kontak-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at top right, rgba(185, 143, 36, 0.18), transparent 34%),
    linear-gradient(135deg, #fff, #fffaf0);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}

.kontak-kicker,
.kontak-label {
  display: inline-flex;
  margin: 0 0 9px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  padding: 5px 11px;
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-primary .kontak-hero-card h2 {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.content-primary .kontak-hero-card p,
.content-primary .kontak-info-card p,
.content-primary .kontak-action-panel p {
  max-width: 72ch;
  margin: 0;
  color: var(--color-ink);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.kontak-status-card {
  display: grid;
  gap: 10px;
  border-radius: 18px;
  background: var(--color-primary);
  padding: 18px;
  color: #fff;
  box-shadow: 0 18px 34px rgba(143, 31, 11, 0.2);
}

.kontak-status-card strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.kontak-status-card span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--step--1);
  font-weight: 800;
}

.kontak-status-card span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.kontak-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.kontak-info-card,
.kontak-action-map {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.kontak-info-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.kontak-address-card {
  background: linear-gradient(180deg, #fffaf0, #fff);
}

.kontak-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--step--2);
  font-weight: 900;
}

.content-primary .kontak-info-card h3,
.content-primary .kontak-action-panel h3 {
  margin: 0 0 8px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
}

.kontak-info-card a {
  color: var(--color-primary);
  text-decoration: none;
}

.kontak-info-card a:hover,
.kontak-info-card a:focus-visible {
  text-decoration: underline;
}

.kontak-action-map {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  overflow: hidden;
}

.kontak-action-panel {
  padding: clamp(20px, 3vw, 30px);
}

.kontak-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.kontak-primary-link,
.kontak-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  padding: 9px 15px;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 900;
}

.kontak-primary-link {
  background: var(--color-primary);
  color: #fff;
}

.kontak-secondary-link {
  border: 1px solid rgba(143, 31, 11, 0.22);
  background: var(--color-accent-soft);
  color: var(--color-primary);
}

.kontak-map-card {
  min-height: 320px;
  background: #f8efe0;
}

.kontak-map-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

@media (max-width: 980px) {
  .kontak-hero-card,
  .kontak-action-map {
    grid-template-columns: 1fr;
  }

  .kontak-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kontak-info-card {
    grid-template-columns: 1fr;
  }

  .kontak-map-card,
  .kontak-map-card iframe {
    min-height: 260px;
  }
}

/* === Kontak social channel refinements === */
.kontak-status-card > img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px;
}

.kontak-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.kontak-social-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1.32fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #fff, #fffaf0);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-card);
}

.content-primary .kontak-social-panel h3 {
  margin: 0 0 8px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.content-primary .kontak-social-panel p:not(.kontak-label) {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.kontak-social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.kontak-social-link {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 112px;
  border: 1px solid rgba(185, 143, 36, 0.28);
  border-radius: 18px;
  background: #fff;
  padding: 14px 10px;
  color: var(--color-ink);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-subtle);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.kontak-social-link:hover,
.kontak-social-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(143, 31, 11, 0.32);
  box-shadow: 0 16px 30px rgba(29, 39, 48, 0.1);
}

.kontak-social-link img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.kontak-social-link span,
.kontak-social-link small {
  display: block;
}

.kontak-social-link span {
  color: var(--color-primary);
  font-weight: 900;
}

.kontak-social-link small {
  color: var(--color-muted);
  font-size: var(--step--2);
  line-height: 1.25;
}

.kontak-social-wa {
  background: linear-gradient(180deg, #f5fff8, #fff);
}

@media (max-width: 980px) {
  .kontak-social-panel {
    grid-template-columns: 1fr;
  }

  .kontak-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .kontak-social-grid {
    grid-template-columns: 1fr;
  }
}

/* === Kontak requested refinements === */
.content-primary:has(.kontak-page) .page-header {
  display: none;
}

.kontak-info-card .kontak-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(143, 31, 11, 0.14);
  background: #fffaf0;
  box-shadow: inset 0 0 0 6px rgba(185, 143, 36, 0.12), 0 10px 20px rgba(29, 39, 48, 0.08);
}

.kontak-info-card .kontak-icon img {
  width: 25px;
  height: 25px;
  display: block;
}

.kontak-info-card:hover .kontak-icon,
.kontak-info-card:focus-within .kontak-icon {
  border-color: rgba(143, 31, 11, 0.28);
  box-shadow: inset 0 0 0 6px rgba(185, 143, 36, 0.18), 0 14px 26px rgba(29, 39, 48, 0.12);
}

/* ============================================================
   UI POLISH 2026-07 — hero sinematik, band galeri, tab instansi,
   skor survei, role model card, sticky nav, reveal, mobile.
   ============================================================ */

/* --- Topbar: jam live pindah dari nav --- */
.topbar {
  gap: 24px;
}

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

.topbar-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}

.topbar-clock #live-clock-time {
  /* Lebar dikunci supaya detik berdetak tanpa memicu reflow tiap sekon. */
  min-width: 12ch;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Toggle mode gelap (navigasi utama, sebelah Hubungi Kami) --- */
.dark-toggle {
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.dark-toggle[aria-pressed="true"],
body.is-dark .dark-toggle {
  border-color: rgba(243, 201, 107, 0.72);
  color: #f3c96b;
  background: rgba(15, 21, 26, 0.34);
}

.dark-toggle:hover,
.dark-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.dark-toggle svg {
  width: 15px;
  height: 15px;
}

.dark-toggle .dark-toggle-sun,
body.is-dark .dark-toggle .dark-toggle-moon {
  display: none;
}

body.is-dark .dark-toggle .dark-toggle-sun {
  display: block;
}

/* --- Sticky nav --- */
body.nav-stuck {
  padding-top: var(--nav-height, 56px);
}

body.nav-stuck .main-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  animation: navSlideDown 0.26s ease;
}

@keyframes navSlideDown {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

/* --- Hero sinematik full-bleed --- */
.hero.home-slider {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  padding: 64px var(--page-padding) 112px;
  border-bottom: 4px solid var(--color-accent);
  background: var(--color-primary-deep);
  color: #fff;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24, 11, 7, 0) 55%, rgba(24, 11, 7, 0.66) 100%),
    linear-gradient(96deg, rgba(24, 11, 7, 0.94) 0%, rgba(41, 19, 12, 0.86) 34%, rgba(41, 19, 12, 0.52) 64%, rgba(24, 11, 7, 0.4) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-backdrop img {
    animation: heroBackdropZoom 24s ease-in-out infinite alternate;
    will-change: transform;
  }

  .hero.home-slider.is-offstage .hero-backdrop img {
    animation-play-state: paused;
  }
}

@keyframes heroBackdropZoom {
  from { transform: scale(1.01); }
  to { transform: scale(1.045); }
}

.home-slider .hero-slider {
  position: static;
}

.home-slider .hero-slides {
  position: relative;
  z-index: 1;
}

.home-slider .hero-slide:not(.hero-slide-news) {
  grid-template-columns: minmax(0, 1fr);
}

.home-slider .hero-slide:not(.hero-slide-news) .hero-copy {
  max-width: 820px;
}

.home-slider .hero-kicker {
  border-left-color: var(--color-accent);
  color: #f3c96b;
  letter-spacing: 0.08em;
}

/* Ukuran headline dimiliki blok .hero-welcome-copy di bawah supaya hanya ada
   satu sumber kebenaran; di sini cuma warna dan bayangan. */
.home-slider .hero-slide:not(.hero-slide-news) h2 {
  color: #fff;
  text-shadow: 0 3px 22px rgba(12, 6, 3, 0.55);
}

.home-slider .hero-slide:not(.hero-slide-news) p {
  color: rgba(255, 244, 230, 0.9);
  text-shadow: 0 1px 10px rgba(12, 6, 3, 0.5);
}

.home-slider .hero-actions a {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 999px;
  padding-inline: 18px;
}

.home-slider .hero-actions a:hover,
.home-slider .hero-actions a:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: #f3c96b;
}

.home-slider .hero-actions a:first-child,
.home-slider .hero-actions a.is-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #2b1608;
  box-shadow: 0 10px 26px rgba(185, 143, 36, 0.4);
}

.home-slider .hero-actions a.is-primary:hover,
.home-slider .hero-actions a.is-primary:focus-visible {
  background: #d3a836;
  border-color: #d3a836;
}

.home-slider .hero-status.is-open {
  background: rgba(38, 148, 111, 0.32);
  color: #8fe6c0;
}

.home-slider .hero-status.is-closed {
  background: rgba(143, 31, 11, 0.4);
  color: #ffb59f;
}

.hero-photo-chip {
  position: absolute;
  left: var(--page-padding);
  bottom: 64px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(24, 11, 7, 0.5);
  color: rgba(255, 244, 230, 0.85);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero-photo-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Slide 2 (berita) = panel terang di atas foto */
.hero-news-panel {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 30px 70px rgba(12, 6, 3, 0.45);
}

.hero-news-panel h2 {
  color: var(--color-primary-deep);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.home-slider .hero-slide-news .hero-actions a {
  border-color: #d9c78f;
  background: #fff;
  color: var(--color-primary);
}

.home-slider .hero-slide-news .hero-actions a.is-primary,
.home-slider .hero-slide-news .hero-actions a:first-child {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: none;
}

.home-slider .hero-slide-news .hero-media {
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 30px 70px rgba(12, 6, 3, 0.45);
}
@media (min-width: 901px) {
  .home-slider .hero-slide-news {
    grid-template-columns: minmax(0, 1.04fr) minmax(400px, .96fr);
    align-items: center;
  }

  .home-slider .hero-slide-news .hero-news-panel {
    align-self: center;
    height: fit-content;
    padding: 16px 18px;
  }

  .home-slider .hero-slide-news .hero-news-panel h2 {
    margin-bottom: 4px;
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
  }

  .home-slider .hero-slide-news .hero-tabs {
    margin-block: 6px;
  }

  .home-slider .hero-slide-news .hero-tab-list {
    gap: 2px;
  }

  .home-slider .hero-slide-news .hero-tab-list:not(.is-active) {
    display: none;
  }

  .home-slider .hero-slide-news .hero-tab-list a {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    min-height: 54px;
    padding: 5px 8px;
  }

  .home-slider .hero-slide-news .hero-item-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: .94rem;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-slider .hero-slide-news .hero-item-excerpt {
    display: none;
  }

  .home-slider .hero-slide-news .hero-actions {
    margin-top: 6px;
  }

  .home-slider .hero-slide-news .hero-actions a {
    min-height: 42px;
    padding-block: 8px;
  }

  .home-slider .hero-slide-news .hero-media {
    align-self: center;
    width: 100%;
    height: 397px;
    min-height: 0;
    aspect-ratio: auto;
  }

  .home-slider .hero-slide-news .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-slider .hero-slide-news .hero-media figcaption {
    display: -webkit-box;
    min-height: 58px;
    padding: 25px 14px 12px;
    overflow: hidden;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Kedua card berita tetap di antara nav dan kontrol slider. */
  .home-slider .hero-slide-news {
    position: relative;
    top: -32px;
  }

  .home-slider .hero-slide-integrity {
    position: relative;
    top: -64px;
  }
}

/* Label ini menjelaskan foto gedung pada slide sambutan. Pada slide berita,
   panel dan kontrol menempati area bawah sehingga label tidak punya ruang. */
.home-slider .hero-cinema:has(.hero-slide-news.is-active) .hero-photo-chip {
  visibility: hidden;
  opacity: 0;
}

/* Dots & panah di atas foto */
.home-slider .hero-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 3;
  transform: translateX(-50%);
}

.home-slider .hero-slider-dots button,
.home-slider .hero-slider-dots button.is-active {
  background: transparent;
}

.home-slider .hero-slider-dots button.is-active::after {
  background: var(--color-accent);
}

.home-slider .hero-nav {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(24, 11, 7, 0.58);
  color: #fff;
  opacity: 0.85;
}

.home-slider .hero-nav:hover,
.home-slider .hero-nav:focus-visible {
  background: rgba(24, 11, 7, 0.7);
  border-color: #f3c96b;
}


@media (max-width: 900px) {
  .hero.home-slider {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 104px;
  }


  .hero-actions {
    gap: 8px;
  }

  .home-slider .hero-actions a {
    min-height: 38px;
    padding: 7px 13px;
    font-size: var(--step--1);
  }

  .hero-photo-chip {
    display: none;
  }

}

/* --- Link Layanan Cepat: badge ikon seragam --- */
.app-links img,
.app-default-icon-tag {
  width: 52px;
  height: 52px;
  padding: 8px;
  border: 1px solid #eadfc2;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 3px 10px rgba(29, 39, 48, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.app-links a::after {
  content: "\2192";
  margin-left: auto;
  color: var(--color-accent);
  font-weight: 800;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-links a:hover::after,
.app-links a:focus-visible::after {
  opacity: 1;
  transform: none;
}

.app-links a:hover img,
.app-links a:focus-visible img {
  transform: scale(1.07);
  box-shadow: 0 6px 16px rgba(185, 143, 36, 0.28);
}

@media (max-width: 600px) {
  .app-links {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }

  .app-links li {
    flex: 0 0 calc(72% - 12px);
  }
}

/* --- Galeri Fasilitas: band gelap + foto asli per kartu --- */
.facility-card::before {
  content: none;
}

.module-card.facility-band {
  border: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(185, 143, 36, 0.28), transparent 42%),
    linear-gradient(120deg, #2f140e 0%, #3a1c12 52%, #1e332c 100%);
}

.module-card.facility-band h2 {
  color: #fff;
}

.facility-thumb {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  aspect-ratio: 3 / 2;
}

.facility-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.module-card.facility-band .facility-card {
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.module-card.facility-band .facility-card strong {
  color: #f3c96b;
}

.module-card.facility-band .facility-card span {
  color: rgba(255, 244, 230, 0.72);
}

.module-card.facility-band .facility-card:hover,
.module-card.facility-band .facility-card:focus-visible {
  border-color: rgba(243, 201, 107, 0.65);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.facility-card:hover .facility-thumb img,
.facility-card:focus-visible .facility-thumb img {
  transform: scale(1.07);
}

/* --- Judul modul: kicker emas otomatis --- */
.module-card > h2:first-child::before,
.module-card > .custom > h2:first-child::before,
.module-card > .module-title::before,
.instansi-board-head > h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), #ecd08a);
}

/* --- Scroll reveal --- */
.reveal-init {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.38s ease-out, transform 0.38s ease-out;
}

.reveal-init.is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Feed instansi: tab board --- */
.instansi-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.instansi-board-head h2 {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 700;
}

.instansi-updated {
  color: var(--color-muted);
  font-size: var(--step--2);
  font-weight: 600;
}

.instansi-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 12px;
}

.instansi-tabbar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 16px 7px 9px;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.instansi-tabbar button img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  padding: 2px;
  border: 1px solid rgba(29, 39, 48, 0.08);
}

.instansi-tabbar button:hover {
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.instansi-tabbar button.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.instansi-tabbar button.is-active img {
  border-color: transparent;
}

.instansi-panel {
  display: none;
}

.instansi-panel.is-active {
  display: block;
  animation: instansiPanelIn 0.3s ease;
}

@keyframes instansiPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.instansi-tab-board .instansi-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.instansi-tab-board .instansi-sub-col h3 {
  display: inline-block;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--color-accent);
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.instansi-tab-board .instansi-compact-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.instansi-tab-board .instansi-compact-list li {
  border-bottom: 1px dashed var(--color-line);
}

.instansi-tab-board .instansi-compact-list li:last-child {
  border-bottom: 0;
}

.instansi-tab-board .instansi-compact-list a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 8px;
  border-radius: 8px;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.16s ease, color 0.16s ease;
}

.instansi-tab-board .instansi-compact-list a:hover,
.instansi-tab-board .instansi-compact-list a:focus-visible {
  background: #fff7e6;
  color: var(--color-primary);
}

.instansi-tab-board .instansi-compact-list .list-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 800;
  white-space: nowrap;
}

.instansi-panel-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}

.instansi-panel-link:hover,
.instansi-panel-link:focus-visible {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .instansi-tab-board .instansi-sub-grid {
    grid-template-columns: 1fr;
  }

  .instansi-tabbar button span {
    font-size: var(--step--1);
  }
}

/* --- Indeks Pelayanan Publik: tile skor --- */
.survey-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.survey-score-tile {
  display: grid;
  gap: 7px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fbfcfc);
  text-align: left;
  font: inherit;
  cursor: zoom-in;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.survey-score-tile:hover,
.survey-score-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 10px 24px rgba(29, 39, 48, 0.1);
}

.survey-score-label {
  justify-self: start;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.survey-score-value {
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
}

.survey-score-value em {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 600;
}

.survey-score-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #ece7db;
  overflow: hidden;
}

.survey-score-bar i {
  display: block;
  width: var(--score-pct, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), #d8b254);
}

.survey-score-meta {
  color: var(--color-muted);
  font-size: var(--step--2);
  font-weight: 600;
}

.survey-scores-note {
  margin: 12px 0 0;
  color: var(--color-muted);
  font-size: var(--step--2);
}

/* --- Role Model: kartu foto + teks HTML --- */
.role-slide {
  z-index: 0;
}

.role-slide.is-active {
  z-index: 1;
}

.role-card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #1d2730;
}

.role-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.role-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--color-accent);
  color: #2b1608;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(12, 6, 3, 0.35);
}

.role-card-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 3px;
  padding: 56px 14px 14px;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0) 0%, rgba(20, 12, 8, 0.55) 38%, rgba(20, 12, 8, 0.92) 100%);
  color: #fff;
}

.role-card-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.15;
}

.role-card-title {
  color: #f3c96b;
  font-size: var(--step--1);
  font-weight: 700;
}

.role-card-nip {
  color: rgba(255, 244, 230, 0.72);
  font-size: var(--step--2);
  font-weight: 600;
}

.role-card-sk {
  color: rgba(255, 244, 230, 0.55);
  font-size: var(--step--3);
  line-height: 1.35;
}

/* --- Statistik pengunjung: tabular numbers --- */
.stats-num {
  font-variant-numeric: tabular-nums;
}

/* --- Slide non-aktif benar-benar disembunyikan (carousel hero/role) --- */
.hero-slide,
.role-slide {
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.hero-slide.is-active,
.role-slide.is-active {
  visibility: visible;
  transition: opacity 320ms ease;
}

/* --- Aksesibilitas plugin: jangan menimpa konten --- */
._access-icon,
.accessibility-button {
  top: auto !important;
  bottom: 92px !important;
  left: 14px !important;
}

/* --- Mobile polish --- */
@media (max-width: 760px) {
  .topbar {
    padding-block: 5px;
    gap: 12px;
  }

  .topbar-desc,
  .topbar-item:has(a[href^="mailto"]),
  .topbar-clock {
    display: none;
  }

  .topbar-group {
    gap: 12px;
  }

  .topbar-info {
    justify-content: flex-start;
  }

  .mobile-quick-actions {
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 5px;
  }

  .mobile-quick-actions a,
  .mobile-quick-actions button {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 7px 2px 5px;
    font-size: var(--step--3);
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .mobile-quick-actions svg {
    width: 19px;
    height: 19px;
  }

  ._access-icon,
  .accessibility-button {
    bottom: 84px !important;
    left: 10px !important;
  }

  .floating-whatsapp {
    bottom: 84px;
    right: 10px;
    width: 48px;
    height: 48px;
  }

  .floating-whatsapp svg {
    width: 24px;
    height: 24px;
  }

  /* Kontrak proyek: target sentuh minimum 44px, termasuk widget mengambang. */
  .back-to-top {
    right: 10px;
    bottom: 146px;
    width: 44px;
    height: 44px;
  }

  .maklumat-doc img {
    aspect-ratio: auto;
    max-height: 54vh;
  }
}

@media (min-width: 761px) {
  .mobile-quick-actions svg {
    display: none;
  }
}

/* --- Dark mode untuk komponen baru --- */
body.is-dark .hero-news-panel {
  background: rgba(21, 28, 34, 0.96);
  border-color: rgba(255, 255, 255, 0.14);
}

body.is-dark .hero-news-panel h2 {
  color: #f3c96b;
}

body.is-dark .home-slider .hero-slide-news .hero-actions a {
  background: #1d2730;
  border-color: #46515a;
  color: #f3c96b;
}

body.is-dark .instansi-tabbar button {
  background: #1a232b;
  border-color: #46515a;
  color: #edf2f7;
}

body.is-dark .instansi-tabbar button.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #2b1608;
}

body.is-dark .instansi-tab-board .instansi-compact-list a:hover,
body.is-dark .instansi-tab-board .instansi-compact-list a:focus-visible {
  background: #222d37;
  color: #f3c96b;
}

body.is-dark .survey-score-tile {
  background: #1a232b;
  border-color: #46515a;
}

body.is-dark .survey-score-value {
  color: #edf2f7;
}

body.is-dark .survey-score-bar {
  background: #2c3843;
}

body.is-dark .module-card.facility-band {
  background:
    radial-gradient(circle at 88% -10%, rgba(185, 143, 36, 0.22), transparent 42%),
    linear-gradient(120deg, #241009 0%, #2c150e 52%, #142420 100%);
}

/* ============================================================
   UI POLISH 2026-07 PUTARAN 2 — berita bergambar, jadwal kartu,
   instagram profil, kinerja gabungan, footer stats, kontras.
   ============================================================ */

/* --- Pengumuman & video terbaru --- */
.news-cards-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.news-cards-head h2 {
  margin: 0 0 12px;
}

.announcement-showcase__head {
  margin-bottom: 20px;
}

.announcement-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
}

.announcement-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.announcement-feature,
.youtube-showcase {
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.announcement-feature {
  display: grid;
  grid-template-rows: minmax(230px, 1fr) auto;
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.announcement-feature__media {
  position: relative;
  display: block;
  min-height: 230px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-soft);
}

.announcement-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.announcement-feature__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--step--3);
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.announcement-feature__copy {
  display: grid;
  gap: 9px;
  padding: clamp(18px, 2.4vw, 28px);
}

.announcement-feature time {
  color: var(--color-muted);
  font-size: var(--step--2);
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.announcement-feature strong {
  max-width: 28ch;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
}

.announcement-feature__excerpt {
  display: -webkit-box;
  max-width: 64ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--color-muted);
  font-size: var(--step--1);
}

.announcement-feature__cta {
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
}

.announcement-feature:hover,
.announcement-feature:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.announcement-feature:hover img,
.announcement-feature:focus-visible img {
  transform: scale(1.035);
}

.youtube-showcase {
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 12px;
}

.youtube-showcase-player {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--color-primary-deep);
  color: var(--color-surface);
}

.youtube-showcase-player > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-showcase-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.youtube-showcase-player.is-playing > img,
.youtube-showcase-player.is-playing .youtube-showcase-player__shade,
.youtube-showcase-player.is-playing .youtube-showcase-play,
.youtube-showcase-player.is-playing .youtube-showcase-player__copy {
  display: none;
  pointer-events: none;
}

.youtube-showcase-fallback-link {
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 800;
}

.youtube-showcase-player__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(47, 20, 14, 0.88));
  pointer-events: none;
}

.youtube-showcase-play {
  position: absolute;
  inset: 50% auto auto 50%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: var(--color-surface);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  z-index: 2;
  touch-action: manipulation;
}

.youtube-showcase-player__copy {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.youtube-showcase-player__copy strong {
  max-width: 38ch;
  font-family: var(--font-display);
  line-height: 1.25;
  color: var(--color-accent-soft);
  text-shadow: 0 1px 2px var(--color-primary-deep);
}

.youtube-showcase-player__copy a {
  flex: none;
  color: var(--color-accent-soft);
  font-size: var(--step--2);
  font-weight: 800;
  pointer-events: auto;
}

body.is-dark .youtube-showcase-player__copy strong,
body.is-dark .youtube-showcase-player__copy a {
  color: var(--color-accent-soft);
}

.youtube-showcase-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.youtube-showcase-rail > li {
  min-width: 0;
  list-style: none;
}

.youtube-showcase-item {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 6px;
  background: var(--color-soft);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.youtube-showcase-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  object-fit: cover;
}

.youtube-showcase-item__copy,
.youtube-showcase-item__copy strong,
.youtube-showcase-item__copy span {
  display: block;
}

.youtube-showcase-item__copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--step--2);
  line-height: 1.3;
}

.youtube-showcase-item__copy span {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: var(--step--3);
  font-weight: 800;
  text-transform: uppercase;
}

.youtube-showcase-item:hover,
.youtube-showcase-item:focus-visible,
.youtube-showcase-item.is-active,
.youtube-showcase-item[aria-current="true"] {
  border-color: var(--color-accent);
  background-color: var(--showcase-active-bg);
}

body.is-dark .announcement-feature,
body.is-dark .youtube-showcase {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
}

body.is-dark .announcement-feature strong,
body.is-dark .announcement-feature__cta,
body.is-dark .youtube-showcase-item__copy span {
  color: var(--dark-content-accent);
}

body.is-dark .announcement-feature time,
body.is-dark .announcement-feature__excerpt {
  color: var(--color-muted);
}

body.is-dark .youtube-showcase-item {
  border-color: var(--dark-content-line);
  background: var(--color-soft);
  color: var(--color-ink);
}


@media (max-width: 1180px) {
  .announcement-showcase__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .announcement-showcase {
    min-width: 0;
    overflow: hidden;
  }

  .announcement-showcase__actions {
    justify-content: flex-start;
  }

  .announcement-feature__media {
    min-height: 190px;
    aspect-ratio: 16 / 10;
  }

  .youtube-showcase-player__copy {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: flex-end;
    flex-direction: row;
    gap: 8px;
  }

  .youtube-showcase-player__copy strong {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--step--1);
  }

  .youtube-showcase-player__copy a {
    font-size: var(--step--2);
  }

  .youtube-showcase-rail {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
  }

  .youtube-showcase-rail > li {
    flex: 0 0 min(42vw, 180px);
  }

  .youtube-showcase-item {
    width: 100%;
    scroll-snap-align: start;
  }
}


/* EDITORIAL SHOWCASE POLISH 2026-07-18 */
.announcement-showcase__channel-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  text-decoration: none;
}

.announcement-showcase__channel-link:hover,
.announcement-showcase__channel-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.announcement-showcase__grid {
  align-items: start;
}


.announcement-feature {
  position: relative;
  grid-template-rows: auto auto auto;
}

.announcement-feature__eyebrow,
.youtube-showcase__eyebrow {
  display: block;
  color: var(--color-primary);
  font-size: var(--step--3);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.announcement-feature__eyebrow {
  padding: 14px 18px 0;
}

.announcement-feature__media {
  min-height: 0;
  margin: 12px 18px 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
}

.announcement-feature__media img {
  object-fit: cover;
  object-position: center top;
  transform: scale(1.12);
  transform-origin: center top;
}

.announcement-feature__copy {
  align-content: start;
  padding: 20px 22px 24px;
}

.announcement-feature strong {
  max-width: 24ch;
}

.announcement-feature__cta {
  margin-top: 6px;
}

.announcement-feature:hover img,
.announcement-feature:focus-visible img {
  transform: scale(1.15);
}

.youtube-showcase {
  grid-template-rows: auto auto auto;
  align-content: start;
  padding: 14px;
}

.youtube-showcase-player__shade {
  background: linear-gradient(180deg, rgba(47, 20, 14, 0.08) 28%, rgba(47, 20, 14, 0.82));
}

.youtube-showcase-play {
  width: 58px;
  height: 58px;
  min-height: 58px;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.75);
  padding: 0;
  box-shadow: 0 10px 24px rgba(47, 20, 14, 0.28);
}

.youtube-showcase-play__icon {
  margin-left: 3px;
  font-size: 1rem;
}

.youtube-showcase-play__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.youtube-showcase-player__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.youtube-showcase-player__meta {
  grid-column: 1 / -1;
  color: var(--color-accent-soft);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.youtube-showcase-player__copy a {
  min-height: 44px;
  display: inline-flex;
  align-items: flex-end;
  padding: 0 2px 3px 10px;
}

.youtube-showcase-rail__viewport {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
}

.youtube-showcase-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, calc((100% - 16px) / 3));
  grid-template-columns: none;
  overflow-x: auto;
  padding: 2px 20px 8px 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.youtube-showcase-rail > li {
  scroll-snap-align: start;
}

.youtube-showcase-item {
  height: 100%;
  border-color: transparent;
  background: transparent;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.youtube-showcase-item__media {
  position: relative;
  display: block;
}

.youtube-showcase-item__play {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(47, 20, 14, 0.82);
  color: var(--color-accent-soft);
  font-size: var(--step--3);
}

.youtube-showcase-item.is-active,
.youtube-showcase-item[aria-current="true"] {
  border-width: 2px;
  background-color: var(--showcase-active-bg);
  box-shadow: 0 5px 14px rgba(47, 20, 14, 0.12);
}

body.is-dark .youtube-showcase-item.is-active,
body.is-dark .youtube-showcase-item[aria-current="true"] {
  border-color: var(--dark-content-accent);
  background-color: var(--showcase-active-bg);
  box-shadow: none;
}

.youtube-showcase-item__state {
  color: var(--color-muted);
}

.youtube-showcase-item:is(.is-active, [aria-current="true"]) .youtube-showcase-item__state {
  color: var(--color-primary);
}

body.is-dark .youtube-showcase-item:is(.is-active, [aria-current="true"]) .youtube-showcase-item__state {
  color: var(--dark-content-accent);
}

@media (min-width: 1181px) {
  .announcement-showcase__grid {
    align-items: stretch;
  }

  .announcement-feature {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .announcement-feature__media {
    aspect-ratio: auto;
  }
}

@media (min-width: 761px) {
  .youtube-showcase-rail__viewport {
    container-type: inline-size;
  }
}

@media (max-width: 760px) {
  .announcement-showcase__grid .youtube-showcase {
    order: -1;
  }

  .announcement-feature__media {
    margin-inline: 12px;
  }

  .youtube-showcase-player__copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .youtube-showcase-player__copy a {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    min-height: 44px;
    align-items: center;
  }

  .youtube-showcase-rail__viewport {
    margin-top: 38px;
  }

  .youtube-showcase-rail > li {
    flex: none;
    width: min(62vw, 220px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-feature,
  .announcement-feature__media img {
    transition: none;
  }
}

.sipp-day-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px 0;
}

.sipp-day-tabs button {
  display: grid;
  gap: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #f7f9f9;
  color: var(--color-muted);
  text-align: left;
  cursor: pointer;
}

.sipp-day-tabs button[aria-selected="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.sipp-day-tabs strong { font-size: var(--step--1); }
.sipp-day-tabs span { font-size: var(--step--2); }
.sipp-day-tabs b { font-size: var(--step--2); }
.sipp-day-panel[hidden] { display: none; }

/* --- Jadwal Sidang: kartu --- */
.sipp-cards {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.sipp-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px 16px;
  border: 1px solid var(--color-line);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff, #fbfcfc);
}

.sipp-card-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(143, 31, 11, 0.2);
  border-radius: 50%;
  background: #ead395;
  color: var(--color-primary-dark);
  box-shadow: 0 3px 8px rgba(103, 22, 7, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  font-size: var(--step--1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sipp-card-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sipp-card-case {
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sipp-card-category {
  width: fit-content;
  margin-bottom: -4px;
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--case-ink, #44515c);
  background: var(--case-soft, #eef1f3);
  font-size: var(--step--3);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sipp-card--criminal {
  --case-ink: #8f1f0b;
  --case-soft: #f9e2dc;
  --case-line: #b33a24;
}

.sipp-card--civil {
  --case-ink: #176247;
  --case-soft: #dff1e9;
  --case-line: #27815f;
}

.sipp-card--execution,
.sipp-card--special-civil {
  --case-ink: #17558a;
  --case-soft: #dfeaf5;
  --case-line: #2c6da4;
}

.sipp-card--fishery {
  --case-ink: #12617a;
  --case-soft: #d9f1f7;
  --case-line: #39a7c4;
}

.sipp-card--other {
  --case-ink: #5d6670;
  --case-soft: #edf0f2;
  --case-line: #8a949d;
}

.sipp-card[class*="sipp-card--"] {
  border-left-color: var(--case-line);
}

.sipp-card[class*="sipp-card--"] .sipp-card-case {
  color: var(--case-ink);
}

.sipp-card[class*="sipp-card--"] .sipp-card-number {
  border-color: color-mix(in srgb, var(--case-line) 42%, transparent);
  background: var(--case-soft);
  color: var(--case-ink);
}

.sipp-card-party {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 700;
}

.sipp-card-party span {
  margin-right: 6px;
  color: var(--color-muted);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
}

.sipp-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  min-width: 0;
}

.sipp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sipp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 3px 10px;
  background: #fff;
  color: var(--color-ink);
  font-size: var(--step--2);
  font-weight: 700;
}

.sipp-chip svg {
  width: 12px;
  height: 12px;
  color: var(--color-accent);
}

.sipp-chip-room {
  border-color: rgba(185, 143, 36, 0.45);
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
}

.sipp-chip-circuit {
  border-color: rgba(31, 91, 75, 0.4);
  background: rgba(31, 91, 75, 0.08);
  color: var(--color-green);
}

.sipp-card-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--case-line, var(--color-primary)) 55%, transparent);
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: var(--case-ink, var(--color-primary));
  font-size: var(--step--1);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sipp-card-link:hover,
.sipp-card-link:focus-visible {
  background: var(--case-ink, var(--color-primary-dark));
  color: #fff;
  transform: translateY(-1px);
}

.sipp-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 34px 16px 38px;
  text-align: center;
}

.sipp-empty-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
}

.sipp-empty strong {
  color: var(--color-ink);
  font-size: 1.05rem;
}

.sipp-empty span {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.sipp-empty a {
  margin-top: 6px;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}

.sipp-empty a:hover,
.sipp-empty a:focus-visible {
  text-decoration: underline;
}

/* --- Instagram: profile embed --- */
.instagram-profile-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
}

.instagram-profile-card iframe {
  display: block;
  width: 100%;
  height: 470px;
  min-height: 470px;
  border: 0;
  background: #fff;
}

.instagram-follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--color-line);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 800;
  text-decoration: none;
  transition: background 0.16s ease;
}

.instagram-follow-btn:hover,
.instagram-follow-btn:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

a.instagram-follow-standalone {
  margin-top: 12px;
  border-top: 0;
  border-radius: 999px;
}

/* --- Kartu Kinerja & Akuntabilitas (survei + DIPA) --- */
.dipa-subhead {
  margin-bottom: 2px;
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 800;
}

.survey-scores-note + .dipa-widget,
.survey-scores ~ .dipa-widget {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-line);
}

/* --- Footer stats strip --- */
.footer-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px var(--page-padding) 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--step--2);
}

.footer-stats svg {
  opacity: 0.7;
}

.footer-stats strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Quick links: clamp deskripsi --- */
.app-info span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Tap target dots di layar sentuh --- */
@media (pointer: coarse) {
  .hero-slider-dots {
    gap: 4px;
  }
}

/* --- Kontras: teks di atas foto hero lebih pekat --- */
.hero-photo-chip {
  color: rgba(255, 248, 238, 0.95);
}

/* --- Dark mode putaran 2 --- */
body.is-dark .home-map-card,
body.is-dark .home-map-heading {
  background: #151c22;
  border-color: #46515a;
}

body.is-dark .home-map-heading h2 {
  color: #edf2f7;
}

body.is-dark .home-map-heading p {
  color: #f3c96b;
}

body.is-dark .home-map-card iframe {
  filter: invert(0.88) hue-rotate(180deg) saturate(0.85);
}

body.is-dark .news-card,
body.is-dark .sipp-card {
  background: #1a232b;
  border-color: #46515a;
}

body.is-dark .sipp-card {
  border-left-color: var(--color-accent);
}
body.is-dark .sipp-card--criminal {
  --case-ink: #ff9f8a;
  --case-soft: rgba(179, 58, 36, .22);
  --case-line: #e16d57;
}

body.is-dark .sipp-card--civil {
  --case-ink: #8ed8b8;
  --case-soft: rgba(39, 129, 95, .24);
  --case-line: #55b38e;
}

body.is-dark .sipp-card--execution,
body.is-dark .sipp-card--special-civil {
  --case-ink: #9bcaf1;
  --case-soft: rgba(44, 109, 164, .26);
  --case-line: #6aa6d7;
}

body.is-dark .sipp-card--fishery {
  --case-ink: #9adeef;
  --case-soft: rgba(57, 167, 196, .22);
  --case-line: #6ac4dc;
}

body.is-dark .sipp-card--other {
  --case-ink: #c5cdd3;
  --case-soft: rgba(138, 148, 157, .2);
  --case-line: #8a949d;
}


body.is-dark .news-card strong,
body.is-dark .sipp-card-case {
  color: #edf2f7;
}
body.is-dark .sipp-card[class*="sipp-card--"] {
  border-left-color: var(--case-line);
}

body.is-dark .sipp-card[class*="sipp-card--"] .sipp-card-case {
  color: var(--case-ink);
}

body.is-dark .news-card:hover strong {
  color: #f3c96b;
}

body.is-dark .sipp-chip {
  background: #10181f;
  border-color: #46515a;
  color: #edf2f7;
}

body.is-dark .sipp-chip-room {
  background: rgba(185, 143, 36, 0.16);
  border-color: rgba(243, 201, 107, 0.4);
  color: #f3c96b;
}

body.is-dark .sipp-chip-circuit {
  background: rgba(70, 170, 135, 0.14);
  border-color: rgba(70, 170, 135, 0.4);
  color: #8fe6c0;
}

body.is-dark .sipp-empty-icon {
  background: rgba(185, 143, 36, 0.16);
  color: #f3c96b;
}

body.is-dark .sipp-empty strong {
  color: #edf2f7;
}

body.is-dark .sipp-schedule-board {
  background: #151c22;
  border-color: #46515a;
}

body.is-dark .sipp-schedule-head {
  border-color: #46515a;
}

body.is-dark .sipp-schedule-head h2 {
  color: #edf2f7;
}

body.is-dark .instagram-profile-card {
  border-color: #46515a;
}

body.is-dark .dipa-subhead {
  color: #edf2f7;
}

/* ============================================================
   LAYANAN PUBLIK 2026-07 — hero topik, kartu hub, langkah,
   dokumen, CTA, subnav, ilustrasi
   ============================================================ */

.svc-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--color-line);
}

.svc-subnav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  padding: 6px 14px;
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.svc-subnav a:hover,
.svc-subnav a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.svc-subnav a[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.svc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  margin: 8px 0 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, var(--color-surface) 52%, var(--color-accent-soft));
  padding: clamp(18px, 3vw, 30px);
}

@media (prefers-reduced-motion: no-preference) {
  .svc-hero > div,
  .svc-illus {
    animation: svc-enter 0.55s ease both;
  }

  .svc-illus {
    animation-delay: 0.12s;
  }

  @keyframes svc-enter {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

body.is-dark .svc-hero {
  background: linear-gradient(120deg, var(--color-surface) 52%, rgba(185, 143, 36, 0.16));
}

.svc-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--color-accent);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.content-primary .svc-lead {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.65;
  text-align: left;
  hyphens: none;
}

.svc-illus {
  width: clamp(128px, 17vw, 182px);
  height: auto;
}

.svc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.content-primary .svc-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(185, 143, 36, 0.13);
  padding: 6px 13px;
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: left;
  hyphens: none;
}

body.is-dark .content-primary .svc-facts li {
  background: rgba(185, 143, 36, 0.2);
}

.svc-facts svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-accent);
}

.content-primary .svc-facts a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.content-primary .svc-facts a:hover,
.content-primary .svc-facts a:focus-visible {
  color: var(--color-primary);
}

body.is-dark .content-primary .svc-facts a:hover,
body.is-dark .content-primary .svc-facts a:focus-visible {
  color: var(--color-accent);
}

.svc-directory-group {
  margin-top: 32px;
  border-top: 1px solid var(--color-line);
  padding-top: 24px;
}

.svc-directory-group__head {
  max-width: 720px;
}

.content-primary .svc-directory-group__head h2 {
  margin: 0 0 6px;
  color: var(--color-ink);
  font-size: 1.35rem;
}

.content-primary .svc-directory-group__head p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
}

.svc-directory-group .svc-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}

.svc-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.content-primary .svc-card h2,
.content-primary .svc-card h3 {
  margin: 12px 0 8px;
  font-size: 1.06rem;
  color: var(--color-primary);
  font-family: var(--font-display);
}

.content-primary .svc-card p,
.content-primary .svc-card li {
  color: var(--color-muted);
  font-size: var(--step--1);
  text-align: left;
  hyphens: none;
}

.svc-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-primary);
}

body.is-dark .svc-icon {
  background: rgba(185, 143, 36, 0.18);
  color: var(--color-accent);
}

.svc-icon svg {
  width: 21px;
  height: 21px;
}
.svc-rupiah-icon {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: -0.55px;
}


a.svc-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.svc-card:hover,
a.svc-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.content-primary a.svc-card[target="_blank"]::after {
  content: "";
}

.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 700;
  align-self: end;
}

.svc-more svg {
  width: 14px;
  height: 14px;
}

.svc-steps {
  list-style: none;
  counter-reset: svcstep;
  margin: 18px 0;
  padding: 0;
}

.content-primary .svc-steps li {
  position: relative;
  counter-increment: svcstep;
  padding: 2px 0 24px 54px;
  text-align: left;
  hyphens: none;
}

.svc-steps li::before {
  content: counter(svcstep);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}

.svc-steps li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: 6px;
  width: 2px;
  background: var(--color-line);
}

.svc-steps li:last-child {
  padding-bottom: 0;
}

.svc-steps li:last-child::after {
  display: none;
}

.svc-steps strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink);
}

.svc-steps span {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.svc-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  padding: 14px 16px;
}

body.is-dark .svc-note {
  background: rgba(185, 143, 36, 0.12);
}

.svc-note svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--color-accent);
}

.content-primary .svc-note p {
  margin: 0;
  font-size: var(--step--1);
  text-align: left;
  hyphens: none;
}

.svc-docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.content-primary a.svc-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 14px;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.content-primary a.svc-doc::after {
  content: "";
}

a.svc-doc:hover,
a.svc-doc:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

.svc-doc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-primary);
}

body.is-dark .svc-doc-ic {
  background: rgba(185, 143, 36, 0.18);
  color: var(--color-accent);
}

.svc-doc-ic svg {
  width: 19px;
  height: 19px;
}

.svc-doc strong {
  display: block;
  color: var(--color-ink);
  font-size: var(--step--1);
  line-height: 1.4;
}

.svc-doc span {
  color: var(--color-muted);
  font-size: var(--step--2);
}

.svc-zoom {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 10px;
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
}

.svc-zoom img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.svc-zoom-hint {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(29, 39, 48, 0.78);
  color: #fff;
  padding: 5px 11px;
  font-size: var(--step--2);
  font-weight: 700;
}

.svc-zoom-hint svg {
  width: 13px;
  height: 13px;
}

/* Editorial spotlight for official Zona Integritas posters. */
.zi-spotlight {
  --zi-accent: var(--color-primary);
  --zi-accent-deep: var(--color-primary-dark);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  overflow: hidden;
  margin: clamp(32px, 5vw, 56px) 0 28px;
  border: 1px solid rgba(185, 143, 36, 0.38);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 34px);
  background: linear-gradient(135deg, #fffdf8 0%, #f8f1df 64%, #f1e1b8 100%);
  box-shadow: 0 24px 56px rgba(47, 20, 14, 0.13);
}

.zi-spotlight--agent {
  --zi-accent: #176a42;
  --zi-accent-deep: #0d4d2e;
}

.zi-spotlight::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -130px;
  z-index: -1;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--zi-accent) 14%, transparent);
}

.zi-spotlight__poster {
  align-self: center;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(29, 39, 48, 0.2);
  transform: rotate(-1.25deg);
}
.zi-spotlight--agent .zi-spotlight__poster {
  aspect-ratio: 1000 / 1414;
}

.zi-spotlight--role .zi-spotlight__poster {
  aspect-ratio: 1 / 2;
}


.zi-spotlight--role .zi-spotlight__poster {
  transform: rotate(1.25deg);
  justify-self: center;
  width: min(100%, 280px);
}

.zi-spotlight__poster img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
}

.zi-spotlight__copy {
  position: relative;
  align-self: center;
  min-width: 0;
  padding-block: 18px;
}

.zi-spotlight__mark {
  position: absolute;
  top: -22px;
  right: -8px;
  z-index: -1;
  color: color-mix(in srgb, var(--zi-accent) 9%, transparent);
  font-family: var(--font-display);
  font-size: clamp(7rem, 15vw, 12rem);
  font-weight: 850;
  line-height: 0.8;
}

.content-primary .zi-spotlight__eyebrow {
  margin: 0 0 10px;
  color: var(--zi-accent);
  font-size: var(--step--2);
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.content-primary .zi-spotlight h2 {
  margin: 0;
  color: var(--zi-accent-deep);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1;
}

.content-primary .zi-spotlight__copy > p:not(.zi-spotlight__eyebrow) {
  max-width: 56ch;
  margin: 16px 0 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.zi-spotlight__copy ul {
  display: grid;
  gap: 9px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

.zi-spotlight__copy li {
  position: relative;
  padding-left: 26px;
  color: var(--color-ink);
  font-weight: 700;
}

.zi-spotlight__copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--zi-accent);
  font-weight: 900;
}

.content-primary .zi-spotlight__copy > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--zi-accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--zi-accent) 24%, transparent);
}

.content-primary .zi-spotlight__copy > a:is(:hover, :focus-visible) {
  background: var(--zi-accent-deep);
  color: #fff;
  transform: translateY(-2px);
}

body.is-dark .zi-spotlight {
  border-color: rgba(243, 201, 107, 0.3);
  background: linear-gradient(135deg, var(--dark-content-raised), var(--dark-content-surface));
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
}

body.is-dark .zi-spotlight__poster {
  border-color: #2b3841;
  background: #2b3841;
}
body.is-dark .content-primary .zi-spotlight__copy > a,
body.is-dark .content-primary .zi-spotlight__copy > a:is(:hover, :focus-visible) {
  color: #fff;
}


body.is-dark .content-primary .zi-spotlight h2,
body.is-dark .content-primary .zi-spotlight__eyebrow {
  color: #f3c96b;
}

@media (max-width: 760px) {
  .zi-spotlight {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    border-radius: 18px;
    padding: 16px;
  }

  .zi-spotlight__poster,
  .zi-spotlight--role .zi-spotlight__poster {
    width: min(100%, 300px);
    margin-inline: auto;
    transform: none;
  }

  .zi-spotlight__poster img {
    max-height: none;
  }

  .zi-spotlight__copy {
    padding: 6px 4px 4px;
  }

  .zi-spotlight--agent .zi-spotlight__poster {
    width: min(100%, 240px);
  }

  .zi-spotlight--role .zi-spotlight__poster {
    width: min(100%, 220px);
  }

  .zi-spotlight__mark {
    top: -4px;
    right: 0;
    font-size: 7rem;
  }
}


.svc-zoom-caption {
  display: block;
  padding: 10px 4px 2px;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
}

.svc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 6px;
  border-radius: var(--radius-card);
  background: linear-gradient(115deg, var(--color-primary-deep), var(--color-primary));
  padding: clamp(18px, 3vw, 26px);
  color: #fff;
}

.content-primary .svc-cta h2 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.2rem;
}

.content-primary .svc-cta p {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--step--1);
  text-align: left;
  hyphens: none;
}

.svc-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-primary a.svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}

.content-primary a.svc-btn::after {
  content: "";
}

.svc-btn svg {
  width: 16px;
  height: 16px;
}

.svc-btn-gold {
  background: var(--color-accent);
  color: #2f140e;
}

.svc-btn-gold:hover,
.svc-btn-gold:focus-visible {
  background: #d1a83a;
  transform: translateY(-2px);
}

.svc-btn-line {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}

.svc-btn-line:hover,
.svc-btn-line:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* PUBLIC FACILITY DOCUMENTARY 2026-07-16 */
.facility-documentary {
  overflow: hidden;
  margin: clamp(24px, 4vw, 42px) 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-subtle);
}

.content-primary .facility-documentary__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: clamp(260px, 28vw, 320px);
  background: #e9e1d9;
  cursor: zoom-in;
}

.facility-documentary__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.facility-documentary__media:hover img,
.facility-documentary__media:focus-visible img {
  transform: scale(1.025);
}

.facility-documentary__media:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -5px;
}

.facility-documentary__caption {
  display: block;
  margin: 0;
  padding: 13px clamp(16px, 2.5vw, 24px) 15px;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.content-primary .facility-documentary--ptsp .facility-documentary__media {
  height: 380px;
}

.facility-documentary--ptsp .facility-documentary__media img {
  object-fit: contain;
  background: #17232c;
}
.content-primary .facility-documentary--disability .facility-documentary__media {
  height: 350px;
}

.facility-documentary--disability .facility-documentary__media img {
  object-fit: contain;
  background: #17232c;
}

.content-primary .facility-documentary--posbakum .facility-documentary__media {
  height: 360px;
}

.facility-documentary--posbakum .facility-documentary__media img {
  object-fit: contain;
  background: #17232c;
}

body.is-dark .facility-documentary {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
  box-shadow: none;
}

body.is-dark .facility-documentary__caption {
  color: #d5dde4;
}

@media (max-width: 760px) {
  .content-primary .facility-documentary__media {
    height: 200px;
  }


  .content-primary .facility-documentary--ptsp .facility-documentary__media {
    height: 230px;
  }

  .content-primary .facility-documentary--disability .facility-documentary__media,
  .content-primary .facility-documentary--posbakum .facility-documentary__media {
    height: 220px;
  }


  .facility-documentary__caption {
    padding: 11px 14px 13px;
    font-size: var(--step--1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .facility-documentary__media img {
    transition: none;
  }
}
/* END PUBLIC FACILITY DOCUMENTARY */

@media (max-width: 700px) {
  .svc-hero {
    grid-template-columns: 1fr;
  }

  .svc-illus {
    width: 132px;
    margin: 0 auto;
    order: -1;
  }

  .svc-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* FOOTER REDESIGN 2026-07 — small */
.site-footer {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(250px, 1.1fr) minmax(260px, .9fr) minmax(220px, .8fr);
  gap: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #15352f 0%, #2b1715 100%);
  padding-block: 20px 14px;
}

.site-footer::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.footer-signature,
.footer-link-section,
.footer-social-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.footer-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.footer-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.footer-brand-text strong {
  display: block;
  color: #fff;
  font-size: .98rem;
  line-height: 1.25;
}

.footer-brand-text p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--step--1);
  line-height: 1.35;
}

.footer-contact-grid {
  display: block;
  margin-top: 10px;
}

.footer-contact-item,
.footer-link-section a,
.footer-social-card > a,
.footer-bottom a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.footer-contact-item {
  display: block;
  min-height: 28px;
  margin: 0;
  white-space: normal;
  font-size: var(--step--1);
  line-height: 1.35;
}

.footer-contact-item .fc-icon {
  display: none;
}

.footer-contact-grid > joomla-hidden-mail {
  display: inline-flex;
}

.footer-contact-grid > joomla-hidden-mail .footer-contact-item {
  display: inline-flex;
}

.footer-contact-item:not(:last-child)::after {
  content: "•";
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.footer-link-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}

.footer-link-section a {
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 7px 11px;
  font-size: var(--step--1);
  font-weight: 700;
}

.footer-social-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.footer-social-card > span {
  width: 100%;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--step--2);
}

.footer-social .social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 10px;
  font-size: var(--step--1);
}

.footer-social .social-link img {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--step--2);
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.footer-bottom-inner > a,
.footer-bottom-inner > span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
}

.footer-bottom-inner > a:not(:last-child)::after,
.footer-bottom-inner > span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: rgba(255, 255, 255, 0.42);
}

.footer-bottom-inner .footer-copy {
  margin-right: auto;
}

.footer-contact-item:hover,
.footer-contact-item:focus-visible,
.footer-link-section a:hover,
.footer-link-section a:focus-visible,
.footer-social .social-link:hover,
.footer-social .social-link:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: #fff;
  border-color: rgba(223, 178, 73, 0.55);
  background: rgba(223, 178, 73, 0.1);
}

.footer-contact-item:focus-visible,
.footer-link-section a:focus-visible,
.footer-social .social-link:focus-visible,
.footer-bottom a:focus-visible {
  outline: 3px solid rgba(223, 178, 73, 0.95);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .footer-contact-item,
  .footer-link-section a,
  .social-link {
    transition: none;
  }
}

@media (max-width: 820px) {
  .site-footer {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 12px calc(20px + env(safe-area-inset-bottom));
  }

  .footer-logo {
    width: 34px;
    height: 34px;
  }

  .footer-brand {
    gap: 8px;
  }

  .footer-brand-text strong {
    font-size: var(--step--1);
    line-height: 1.25;
  }

  .footer-brand-text p,
  .footer-social-card > span {
    display: none;
  }

  .footer-contact-grid {
    display: block;
  }

  .footer-contact-item {
    min-height: 28px;
    white-space: normal;
    font-size: var(--step--2);
    line-height: 1.35;
  }

  .footer-contact-item:not(:last-child)::after {
    content: none;
  }

  .footer-link-section,
  .footer-social-card {
    gap: 8px;
  }

  .footer-link-section a,
  .footer-social .social-link,
  .footer-bottom-inner > a,
  .footer-bottom-inner > span {
    min-height: 28px;
  }

  .footer-social .social-link span {
    display: none;
  }

  .footer-social .social-link {
    width: 34px;
    min-height: 34px;
    justify-content: center;
    padding-inline: 0;
  }

  .footer-bottom-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 4px 22px;
    line-height: 1.35;
  }

  .footer-bottom-inner > a:not(:last-child)::after,
  .footer-bottom-inner > span:not(:last-child)::after {
    content: none;
  }

  .footer-bottom-inner .footer-copy {
    margin-right: 0;
  }
}

@media (max-width: 760px) {
  body.is-home .site-footer { padding-bottom: calc(85px + env(safe-area-inset-bottom)); }
}

/* --- Dark mode untuk Halaman Kontak --- */
body.is-dark .kontak-hero-card {
  border-color: #46515a;
  background:
    radial-gradient(circle at top right, rgba(185, 143, 36, 0.22), transparent 34%),
    linear-gradient(135deg, #19232b, #101820);
}

body.is-dark .kontak-info-card,
body.is-dark .kontak-social-panel,
body.is-dark .kontak-action-map {
  border-color: #46515a;
  background: #19232b;
}

body.is-dark .content-primary .kontak-hero-card h2,
body.is-dark .content-primary .kontak-info-card h3,
body.is-dark .content-primary .kontak-social-panel h3,
body.is-dark .content-primary .kontak-action-panel h3,
body.is-dark .kontak-info-card a,
body.is-dark .kontak-social-link span {
  color: #f3c96b;
}

body.is-dark .kontak-info-card a:hover,
body.is-dark .kontak-social-link:hover span {
  color: var(--color-accent);
}

body.is-dark .kontak-label {
  background: rgba(185, 143, 36, 0.2);
  color: #f3c96b;
}

body.is-dark .kontak-info-card .kontak-icon {
  border-color: rgba(243, 201, 107, 0.28);
  background: #101820;
  box-shadow: inset 0 0 0 6px rgba(185, 143, 36, 0.18), 0 10px 20px rgba(0, 0, 0, 0.25);
}

body.is-dark .kontak-info-card .kontak-icon img {
  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(345deg);
}

body.is-dark .kontak-social-link {
  border-color: rgba(243, 201, 107, 0.22);
  background: #19232b;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
  color: var(--color-ink);
}

body.is-dark .kontak-social-wa {
  background: linear-gradient(180deg, #122119, #19232b);
}

body.is-dark .kontak-social-link:hover,
body.is-dark .kontak-social-link:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

body.is-dark .kontak-secondary-link {
  border-color: rgba(243, 201, 107, 0.35);
  background: rgba(185, 143, 36, 0.16);
  color: #f3c96b;
}

body.is-dark .kontak-primary-link {
  background: var(--color-accent);
  color: #2b1608;
}

body.is-dark .kontak-map-card {
  background: #101820;
}

body.is-dark .kontak-map-card iframe {
  filter: invert(0.88) hue-rotate(180deg) saturate(0.85);
}

/* ============================================================
   TRANSPARANSI PORTAL 2026-07
   ============================================================ */
.trans-page {
  --trans-maroon: var(--color-primary);
  --trans-gold: var(--color-accent);
  min-width: 0;
}

.trans-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  overflow: hidden;
  margin: 8px 0 22px;
  border-radius: var(--radius-card);
  background: linear-gradient(125deg, var(--color-primary-deep), var(--trans-maroon));
  padding: clamp(24px, 5vw, 48px);
  color: #fffaf2;
}

.trans-kicker {
  display: block;
  margin-bottom: 8px;
  color: #f3c96b;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.content-primary .trans-hero h2 {
  margin: 0 0 12px;
  color: #fffaf2;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.08;
}

.content-primary .trans-hero p {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 250, 242, 0.84);
  text-align: left;
  hyphens: none;
}

.trans-illus {
  width: clamp(130px, 18vw, 210px);
  color: var(--trans-gold);
}

.trans-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(38px, 6vw, 64px);
  padding: 0;
}

.content-primary .trans-nav a {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  padding: 8px 15px;
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.content-primary .trans-nav a:hover,
.content-primary .trans-nav a:focus-visible {
  border-color: var(--trans-gold);
  background: var(--color-accent-soft);
  color: var(--trans-maroon);
}

.trans-section {
  scroll-margin-top: 110px;
  margin: 0 0 clamp(42px, 7vw, 72px);
}

.trans-section-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.trans-section-head > span {
  color: var(--trans-gold);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}

.content-primary .trans-section-head h2 {
  margin: 0 0 5px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}

.content-primary .trans-section-head p {
  margin: 0;
  color: var(--color-muted);
  text-align: left;
  hyphens: none;
}

.trans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.content-primary a.trans-card {
  display: flex;
  min-width: 0;
  min-height: 220px;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.content-primary a.trans-card::after {
  content: none;
}

.content-primary a.trans-card:hover,
.content-primary a.trans-card:focus-visible {
  border-color: var(--trans-gold);
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}

.trans-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--trans-maroon);
}

.trans-icon svg {
  width: 21px;
  height: 21px;
}

.content-primary .trans-card h3 {
  margin: 16px 0 8px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.3;
}

.content-primary .trans-card p {
  margin: 0 0 18px;
  color: var(--color-muted);
  font-size: var(--step--1);
  text-align: left;
  hyphens: none;
}

.trans-more {
  margin-top: auto;
  color: var(--trans-maroon);
  font-size: var(--step--1);
  font-weight: 800;
}

.trans-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 8px;
  border-radius: var(--radius-card);
  background: linear-gradient(115deg, var(--color-primary-deep), var(--trans-maroon));
  padding: clamp(24px, 4vw, 36px);
  color: #fffaf2;
}

.content-primary .trans-cta h2 {
  margin: 0 0 6px;
  color: #fffaf2;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.content-primary .trans-cta p {
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 250, 242, 0.82);
  text-align: left;
  hyphens: none;
}

.trans-cta-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 10px;
}

.content-primary .trans-cta-actions a {
  border: 1px solid rgba(255, 250, 242, 0.55);
  border-radius: 999px;
  padding: 10px 17px;
  color: #fffaf2;
  font-size: var(--step--1);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}

.content-primary .trans-cta-actions a::after {
  content: none;
}

.content-primary .trans-cta-actions a:first-child {
  border-color: var(--trans-gold);
  background: var(--trans-gold);
  color: #2f140e;
}

.content-primary .trans-cta-actions a:hover,
.content-primary .trans-cta-actions a:focus-visible {
  background: rgba(255, 250, 242, 0.12);
  transform: translateY(-2px);
}

.content-primary .trans-cta-actions a:first-child:hover,
.content-primary .trans-cta-actions a:first-child:focus-visible {
  background: #d1a83a;
}

.trans-nav a:focus-visible,
.trans-card:focus-visible,
.trans-cta a:focus-visible {
  outline: 3px solid var(--trans-gold);
  outline-offset: 3px;
}

body.is-dark .trans-icon {
  background: rgba(185, 143, 36, 0.18);
  color: #f3c96b;
}

body.is-dark .content-primary .trans-nav a:hover,
body.is-dark .content-primary .trans-nav a:focus-visible,
body.is-dark .trans-more {
  color: #f3c96b;
}

@media (max-width: 960px) {
  .trans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trans-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .trans-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .trans-illus {
    width: 120px;
    order: -1;
  }

  .trans-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-primary a.trans-card {
    min-height: 0;
  }

  .trans-cta-actions {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.trans-page) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trans-page *,
  .trans-page *::before,
  .trans-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Transparency family 2026-07 */
.transparency-page { min-width: 0; color: var(--color-ink); }
.transparency-page *, .transparency-page *::before, .transparency-page *::after { box-sizing: border-box; }
.transparency-hero, .transparency-header { overflow: hidden; border-radius: var(--radius-card); background: linear-gradient(125deg, var(--color-primary-deep), var(--color-primary)); padding: clamp(24px, 5vw, 52px); color: #fffaf2; }
.content-primary .transparency-hero h1, .content-primary .transparency-header h1 { max-width: 18ch; margin: 8px 0 12px; color: #fff; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.03; overflow-wrap: anywhere; }
.content-primary .transparency-hero p, .content-primary .transparency-header p { max-width: 68ch; margin: 0; color: rgba(255,250,242,.84); text-align: left; }
.transparency-chips, .transparency-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.transparency-chips span { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 12px; font-size: var(--step--1); font-weight: 750; }
.content-primary .transparency-actions a { min-height: 44px; border: 1px solid #e5bd55; border-radius: 999px; background: #e5bd55; padding: 11px 18px; color: #30150f; font-weight: 800; }
.content-primary .transparency-actions a:last-child { background: transparent; color: #fff; }
.transparency-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.content-primary a.transparency-card { min-width: 0; min-height: 190px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); padding: 22px; color: var(--color-ink); text-decoration: none; }
.content-primary .transparency-card span { color: var(--color-primary); font-size: var(--step--2); font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.content-primary .transparency-card h2 { margin: 28px 0 8px; color: var(--color-ink); font-size: 1.15rem; overflow-wrap: anywhere; }
.content-primary .transparency-card p { margin: 0; color: var(--color-muted); font-size: var(--step--1); text-align: left; }
.content-primary .transparency-back { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 12px; font-weight: 800; }
.transparency-local-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.transparency-local-nav > div { min-width: 0; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface); padding: 12px; }
.transparency-local-nav strong { display: block; margin-bottom: 7px; color: var(--color-muted); font-size: var(--step--2); text-transform: uppercase; }
.content-primary .transparency-local-nav a { display: flex; min-height: 44px; align-items: center; border-radius: 9px; padding: 8px; color: var(--color-ink); font-size: var(--step--1); overflow-wrap: anywhere; }
.content-primary .transparency-local-nav a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-primary); font-weight: 850; }
.transparency-archive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 1040px);
  margin-right: auto;
  margin-left: 0;
}

.content-primary a.transparency-document {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 105px;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--document-accent, var(--color-primary));
  border-radius: 14px;
  padding: 13px 14px;
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.transparency-archive[data-document-family="performance"] { --document-accent: #8f1f0b; }
.transparency-archive[data-document-family="finance"] { --document-accent: #b98f24; }
.transparency-archive[data-document-family="survey"] { --document-accent: #1f5b4b; }
.transparency-archive[data-document-family="information"] { --document-accent: #244b6d; }

.transparency-document__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--document-accent) 12%, transparent);
  color: var(--document-accent);
}

.transparency-document__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.content-primary a.transparency-document::after {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  content: "↗";
  font-size: var(--step--1);
  font-weight: 900;
}

.transparency-document span:first-child { min-width: 0; }
.transparency-document strong, .transparency-document small { display: block; overflow-wrap: anywhere; }
.transparency-document small { margin-top: 3px; color: var(--color-muted); }
.transparency-document > span:nth-child(2) {
  position: relative;
  min-width: 0;
  padding-right: 48px;
}

.transparency-document__meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 7px !important;
}

.transparency-document__meta span {
  color: var(--color-muted);
  font-size: var(--step--2);
}

.transparency-document__meta b {
  border: 1px solid color-mix(in srgb, var(--document-accent) 32%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--document-accent) 8%, transparent);
  color: var(--document-accent);
  font-size: var(--step--2);
  line-height: 1.35;
}

.transparency-document__year {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 7px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--document-accent) 10%, transparent);
  color: var(--document-accent);
  font-size: var(--step--2);
  font-style: normal;
  font-weight: 850;
}


.content-primary a.transparency-document {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.content-primary a.transparency-document:is(:hover, :focus-visible) {
  border-color: var(--document-accent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--document-accent) 13%, transparent);
  transform: translateY(-2px);
}

.content-primary a.transparency-document:is(:hover, :focus-visible)::after {
  background: var(--document-accent);
  color: #fff;
}

.transparency-archive__toggle {
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 44px;
  border: 1px solid rgba(185, 143, 36, 0.48);
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 850;
  cursor: pointer;
}

.transparency-archive__toggle:is(:hover, :focus-visible) {
  border-color: var(--color-accent);
  background: #f3dfaa;
}

.transparency-document[hidden] {
  display: none !important;
}

body.is-dark .transparency-document__icon,
body.is-dark .transparency-document__meta b,
body.is-dark .transparency-document__year {
  background: color-mix(in srgb, var(--document-accent) 22%, transparent);
  color: #f3c96b;
}


body.is-dark .transparency-archive__toggle {
  border-color: rgba(243, 201, 107, 0.42);
  background: rgba(243, 201, 107, 0.14);
  color: #f3c96b;
}

body.is-dark .content-primary a.transparency-document::after {
  background: rgba(243, 201, 107, 0.14);
  color: #f3c96b;
}

@media (max-width: 620px) {
  .transparency-archive {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .content-primary a.transparency-document {
    min-height: 96px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
  }

  .content-primary a.transparency-document::after {
    width: 30px;
    height: 30px;
  }

  .transparency-document > span:nth-child(2) {
    padding-right: 42px;
  }

  .transparency-document__icon {
    width: 34px;
    height: 34px;
  }

}

.transparency-note, .transparency-status { margin: 16px 0; border-left: 4px solid var(--color-accent); border-radius: 0 12px 12px 0; background: var(--color-accent-soft); padding: 16px; }
.transparency-status strong, .transparency-status span { display: block; }
.transparency-status span { margin-top: 4px; color: var(--color-muted); }
.transparency-status.is-missing { border-color: #b76b22; }
.transparency-page a:focus-visible { outline: 3px solid #e5bd55; outline-offset: 3px; }
.content-primary .transparency-card:hover, .content-primary .transparency-document:hover { border-color: var(--color-accent); box-shadow: var(--shadow-soft); }
body.is-dark .transparency-note, body.is-dark .transparency-status { background: rgba(229,189,85,.1); }
body.is-dark .content-primary .transparency-local-nav a[aria-current="page"] { background: rgba(229,189,85,.14); color: #f3c96b; }
@media (max-width: 900px) { .transparency-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .transparency-local-nav { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .transparency-grid, .transparency-local-nav { grid-template-columns: minmax(0,1fr); } .content-primary a.transparency-card { min-height: 0; } .transparency-local-nav > div { padding: 8px; } .content-primary a.transparency-document { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .transparency-page *, .transparency-page *::before, .transparency-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Central transparency document family; landing/navigation reuse svc-* components. */
.transparency-family { min-width: 0; }
.transparency-family__archive { min-width: 0; }
.transparency-family__archive .transparency-page { display: contents; }
.transparency-family a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
body.is-dark .transparency-family { color: var(--color-ink); }
/* === Cinematic courthouse hero === */
.hero-cinema {
  --hero-warm: rgba(92, 24, 18, 0.38);
  --hero-blue: rgba(20, 53, 78, 0.3);
  --hero-cream: #fff8ed;
  --hero-gold: #e2b94f;
}

 .hero-cinema .hero-backdrop {
  overflow: hidden;
  background-color: var(--color-primary-deep);
}

.hero-cinema .hero-backdrop-image {
  position: absolute;
  inset: 0 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 100%);
}

.hero-cinema .hero-backdrop-image > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: fill;
  filter: none;
}

.hero-cinema .hero-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 73% 35%, transparent 18%, rgba(24, 11, 8, 0.07) 70%, rgba(24, 11, 8, 0.2) 100%),
    linear-gradient(118deg, rgba(92, 24, 18, 0.3) 0%, rgba(92, 24, 18, 0.06) 40%, rgba(20, 53, 78, 0.1) 100%);
  mix-blend-mode: multiply;
}

.hero-cinema .hero-backdrop::after {
  z-index: 2;
  background:
    radial-gradient(ellipse at 76% 67%, rgba(255, 228, 180, 0.11) 0%, transparent 31%),
    repeating-linear-gradient(106deg, rgba(255, 248, 237, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(19, 10, 8, 0.01) 42%, rgba(19, 10, 8, 0.36) 100%),
    linear-gradient(92deg, rgba(28, 12, 10, 0.96) 0%, rgba(45, 18, 13, 0.76) 27%, rgba(37, 20, 18, 0.12) 48%, rgba(18, 31, 43, 0) 68%);
}

.hero-cinema::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -24%;
  z-index: 1;
  width: 22%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(226, 185, 79, 0.18), transparent);
}

/* Tinggi baris grid = slide tertinggi. Poster dibatasi 820px (820 x 941/1672 =
   461,5px) supaya rasio slide yang sedang tidak dilihat berhenti mendikte
   komposisi slide sambutan. */
.hero-cinema .hero-slides {
  min-height: 462px;
  align-items: end;
}

.hero-cinema .hero-slide {
  align-items: end;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 700ms;
}

.hero-cinema .hero-slide.is-active {
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cinema .hero-welcome-copy {
  position: relative;
  isolation: isolate;
  align-self: end;
  max-width: 620px;
  padding: var(--space-6);
}

/* Bidang tinta lokal mengunci latar di belakang seluruh copy. Scrim foto tetap
   menjadi transisi visual, tetapi bukan lagi satu-satunya penjaga kontras.
   Foto gedung di sisi kanan tetap terbuka; hanya kolom baca yang opak. */
.hero-cinema .hero-welcome-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #29130f;
}

.hero-cinema .hero-welcome-copy > * {
  position: relative;
  z-index: 1;
}

/* Sapaan adalah eyebrow, bukan headline. Dalam identitas kelembagaan - prasasti,
   segel, papan nama pengadilan - sapaan tidak pernah sederajat dengan nama.
   Emas #e2b94f di atas tinta #29130f = 9,45:1. */
.home-slider .hero-welcome-label {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--hero-gold);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-slider .hero-welcome-copy .hero-kicker {
  margin-bottom: 8px;
  border: 0;
  padding: 0;
  font-size: var(--step--2);
}

.home-slider .hero-welcome-copy h2 {
  max-width: 980px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 5.35vw, 5.6rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
}

/* Masthead editorial desktop: nama lembaga tetap menjadi puncak hierarki,
   tetapi tidak memenuhi seluruh bidang tinta seperti poster kampanye. Tablet
   dan mobile sudah memakai skala lebih tenang dan tidak ikut aturan ini. */
@media (min-width: 901px) {

  .home-slider .hero-welcome-copy h2 {
    max-width: 700px;
    font-size: clamp(3.25rem, 4.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
  }
}

.home-slider .hero-welcome-copy .hero-intro {
  max-width: 52ch;
  margin: 0 0 18px;
  font-size: var(--step-1);
  line-height: 1.55;
}

/* Ribbon hanya memuat status operasional yang membantu keputusan saat ini:
   PTSP buka/tutup dan kondisi jadwal SIPP. IKM/IPAK tetap hidup di modul
   Kinerja & Akuntabilitas, tidak diduplikasi di hero.

   Permukaannya sengaja opak. Sebelumnya alpha 52% berada di atas foto + empat
   gradient, sehingga kontras berubah mengikuti crop dan tak bisa dibuktikan
   dari CSS. Tiga token ini mengunci rasio minimum terhadap permukaan yang sama. */
.hero-service-ribbon {
  --hero-ribbon-bg: #29130f;
  --hero-ribbon-fg: #fff4e6;
  --hero-ribbon-muted: #e9cdbd;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  width: min(620px, 100%);
  max-width: 100%;
  margin: 0 0 17px;
  border-block: 1px solid rgba(255, 248, 237, 0.24);
  color: var(--hero-ribbon-fg);
  background: var(--hero-ribbon-bg);
}

.home-slider .hero-service-ribbon p {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 64px;
  margin: 0;
  padding: 9px 14px;
  border-right: 1px solid rgba(255, 248, 237, 0.18);
  color: var(--hero-ribbon-fg);
  text-shadow: none;
}

.hero-service-ribbon p:last-child {
  border-right: 0;
}

.hero-service-ribbon p span {
  color: var(--hero-ribbon-muted);
  font-size: var(--step--3);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-service-ribbon p strong {
  color: var(--hero-ribbon-fg);
  font-size: var(--step--1);
  line-height: 1.3;
  white-space: normal;
}

.hero-service-ribbon p small {
  color: var(--hero-ribbon-muted);
  font-size: var(--step--3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: normal;
}

.hero-service-ribbon .is-stale strong {
  color: #ffd6ca;
}

/* Status PTSP berdiri sendiri di atas headline, menggantikan eyebrow lama:
   satu penanda di posisi itu, tanpa menambah kata baru.
   Isinya ditulis JavaScript, jadi kotaknya dicadangkan sejak paint pertama dan
   chrome pill baru muncul setelah class state terpasang — nol geseran. */
.home-slider .hero-welcome-copy .hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 33px;
  margin: 0 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 15px 7px 12px;
  background: none;
  color: var(--hero-cream);
  font-size: var(--step--2);
  font-weight: 700;
  text-shadow: none;
}

.home-slider .hero-welcome-copy .hero-status::before {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.home-slider .hero-welcome-copy .hero-status:empty::before {
  display: none;
}

.home-slider .hero-welcome-copy .hero-status.is-open {
  border-color: rgba(120, 214, 173, 0.46);
  background: rgba(18, 58, 46, 0.5);
  color: #bdf3db;
}

.home-slider .hero-welcome-copy .hero-status.is-open::before {
  background: #57d6a4;
}

.home-slider .hero-welcome-copy .hero-status.is-closed {
  border-color: rgba(226, 138, 118, 0.42);
  background: rgba(84, 24, 16, 0.52);
  color: #ffd6ca;
}

.home-slider .hero-welcome-copy .hero-status.is-closed::before {
  background: #e87a5f;
}

.hero-actions-primary {
  margin-bottom: 12px;
}

/* Kedua tautan diatur bersama: sebelumnya hanya `.is-primary` yang menerima
   ukuran, sehingga tombol sekunder mewarisi 16px dan tampil 13,6% lebih besar
   daripada tombol utamanya. */
.home-slider .hero-actions-primary a {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: 750;
}

.home-slider .hero-actions-primary a:not(.is-primary) {
  border-color: rgba(255, 248, 237, 0.76);
  color: var(--hero-cream);
  background: rgba(35, 17, 14, 0.55);
  box-shadow: none;
}

/* .hero-actions-secondary dihapus 25 Jul 2026: baris Zona Integritas & SIPP
   dicabut dari hero. Keduanya tetap dapat diakses lewat navigasi utama. */

.hero-cinema .hero-photo-chip {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 248, 237, 0.82);
  font-size: var(--step--2);
  letter-spacing: 0.045em;
}
.hero-cinema .hero-nav {
  border-color: rgba(226, 185, 79, 0.52);
  background: rgba(35, 17, 14, 0.58);
  color: var(--hero-gold);
  font-size: 1.28rem;
}

.hero-cinema .hero-nav:hover,
.hero-cinema .hero-nav:focus-visible {
  border-color: var(--hero-gold);
  background: rgba(47, 20, 14, 0.88);
}

.hero-cinema .hero-backdrop::after {
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 248, 237, 0.018) 0 0.6px, transparent 0.8px 3px),
    radial-gradient(ellipse at 76% 67%, rgba(255, 228, 180, 0.13) 0%, transparent 29%),
    linear-gradient(180deg, rgba(19, 10, 8, 0.01) 42%, rgba(19, 10, 8, 0.34) 100%),
    linear-gradient(92deg, rgba(28, 12, 10, 0.96) 0%, rgba(45, 18, 13, 0.74) 27%, rgba(37, 20, 18, 0.1) 48%, rgba(18, 31, 43, 0) 68%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-cinema .hero-backdrop img {
    animation: heroCinemaPush 20s cubic-bezier(0.16, 1, 0.3, 1) alternate infinite;
    will-change: transform;
  }

  .hero.home-slider.is-offstage .hero-cinema .hero-backdrop img,
  .hero.home-slider.is-offstage .hero-cinema::after,
  .hero.home-slider.is-scroll-active .hero-cinema .hero-backdrop img,
  .hero.home-slider.is-scroll-active .hero-cinema::after {
    animation-play-state: paused;
  }

  .hero-cinema:has(.hero-slide.is-active:first-child)::after {
    animation: heroGoldSweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes heroCinemaPush {
  from { transform: scale(1.01); }
  to { transform: scale(1.035); }
}

/* Dulu menganimasikan `left` dari -24% ke 118%, yang memaksa layout tiap frame
   dan menghasilkan ratusan layout shift kecil - penyumbang CLS terbesar kedua
   setelah topbar. Sekarang lewat transform: jaraknya 142% lebar hero, dan
   karena elemen ini selebar 22% hero, itu setara 645% lebar elemen sendiri.
   Skew harus ikut dinyatakan; kalau tidak, transform dasar tertimpa. */
@keyframes heroGoldSweep {
  0% { transform: translateX(0) skewX(-16deg); opacity: 0; }
  22% { opacity: 0.7; }
  100% { transform: translateX(645%) skewX(-16deg); opacity: 0; }
}

@media (max-width: 1440px) {
  .hero-cinema .hero-backdrop img { object-position: 66% 42%; }
  .hero-cinema .hero-slides { min-height: 420px; }
  .home-slider .hero-welcome-copy h2 { font-size: clamp(2.7rem, 5.25vw, 4.9rem); }
}

@media (max-width: 900px) {
  .hero-cinema .hero-backdrop-image {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-cinema .hero-backdrop-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% 40%;
  }
  .hero-cinema .hero-backdrop::after {
    background:
      repeating-linear-gradient(106deg, rgba(255, 248, 237, 0.018) 0 1px, transparent 1px 4px),
      linear-gradient(180deg, rgba(24, 11, 8, 0.2) 12%, rgba(24, 11, 8, 0.9) 78%),
      linear-gradient(90deg, rgba(32, 14, 11, 0.86), rgba(32, 14, 11, 0.2));
  }
  .hero-cinema .hero-slides { min-height: 420px; }
  .hero-cinema .hero-welcome-copy { max-width: 680px; }
  .hero-service-ribbon { flex-wrap: wrap; width: min(620px, 100%); }
  .home-slider .hero-service-ribbon p { flex: 1 1 31%; }
}

@media (max-width: 560px) {
  .hero.home-slider { min-height: 0; padding: 24px 16px 76px; }
  .hero-cinema .hero-backdrop img { object-position: 68% 46%; }
  .hero-cinema .hero-slides { min-height: 0; }
  .hero-cinema .hero-slide:not(.is-active) {
    position: absolute;
    inset: 0;
    visibility: hidden;
    transition: opacity 220ms ease-out, visibility 0s linear 220ms;
  }

  .hero-cinema .hero-slide.is-active {
    position: relative;
    visibility: visible;
    transition: opacity 220ms ease-out;
  }
  .home-slider .hero-welcome-copy h2 { font-size: clamp(2.2rem, 10.6vw, 3rem); line-height: 0.96; }
  .home-slider .hero-welcome-copy .hero-intro { max-width: 34ch; font-size: var(--step--1); }
  .hero-service-ribbon { width: 100%; }
  .home-slider .hero-service-ribbon p { min-height: 64px; padding: 9px 10px; }
  .hero-service-ribbon p strong { font-size: var(--step--2); }
  .home-slider .hero-welcome-copy .hero-status { margin-bottom: 12px; font-size: var(--step--2); }
  .hero-actions-primary { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .home-slider .hero-actions-primary a { justify-content: center; padding: 7px 10px; text-align: center; font-size: var(--step--2); }
  .hero-cinema .hero-slide-news { align-self: start; }
}

@media (max-width: 400px) {
  .hero-cinema .hero-backdrop img { object-position: 70% 48%; }
  .hero-cinema .hero-slides { min-height: 0; }
  .home-slider .hero-welcome-copy h2 { font-size: 2.2rem; }
  .home-slider .hero-service-ribbon p { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cinema *,
  .hero-cinema *::before,
  .hero-cinema *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .hero-cinema .hero-backdrop img {
    transform: none !important;
    will-change: auto;
  }
}

/* Mobile civic-service homepage, isolated below desktop breakpoint. */
.mobile-start-here,
.hero-intro-mobile {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --mobile-surface: #fffaf2;
    --mobile-surface-raised: #fffdf8;
    --mobile-line: #eadfcf;
    --mobile-radius: 16px;
    --mobile-bar-height: 68px;
  }

  body.is-dark {
    --mobile-surface: #0f151a;
    --mobile-surface-raised: #151c22;
    --mobile-line: #46515a;
  }

  body.is-dark .site-header,
  body.is-dark .header-brand,
  body.is-dark.nav-stuck .site-header {
    background: var(--mobile-surface-raised);
    border-color: var(--mobile-line);
  }

  body.is-dark .brand-lockup .brand-title::before {
    color: #f3c96b;
  }

  body.is-dark .menu-toggle {
    border-color: var(--mobile-line);
    color: #f3c96b;
    background: #222d35;
  }

  html { scroll-padding-top: 64px; }
  body { overflow-x: clip; background: #f8f1e8; }
  body.is-home { padding-bottom: calc(var(--mobile-bar-height) + env(safe-area-inset-bottom)); }

  .site-header {
    position: relative;
    z-index: 50;
    height: 84px;
    border-bottom: 1px solid rgba(185, 143, 36, 0.28);
    background: var(--mobile-surface-raised);
  }
  .site-header .topbar { display: none; }
  .header-brand {
    height: 84px;
    min-height: 84px;
    padding: 10px 76px 10px 16px;
    border: 0;
    background: var(--mobile-surface-raised);
  }
  .header-brand::before { height: 3px; }
  .header-brand > .custom:first-child { min-width: 0; }
  .brand-lockup { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; min-width: 0; }
  .brand-mark { width: 48px; height: 48px; }
  .brand-lockup strong,
  .brand-lockup p:not(.brand-title),
  .header-brand > .custom:not(:first-child),
  .header-badges,
  .court-badges { display: none !important; }
  .brand-lockup .brand-title { font-size: 0; line-height: 1; text-shadow: none; }
  .brand-lockup .brand-title::before {
    content: "Pengadilan Negeri Natuna";
    display: block;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 1.34rem;
    font-weight: 760;
    letter-spacing: -0.025em;
  }
  .brand-lockup .brand-title::after {
    content: "Kelas II";
    display: block;
    margin-top: 5px;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.025em;
  }
  .main-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 84px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .menu-toggle { min-width: 48px; min-height: 48px; border: 1px solid var(--mobile-line); color: var(--color-primary); background: #f8ede3; }
  body.nav-stuck { padding-top: 56px; }
  body.nav-stuck .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    height: 56px;
    background: var(--mobile-surface-raised);
    box-shadow: 0 8px 24px rgba(47, 20, 14, 0.14);
  }
  /* Sticky hanya memadatkan tinggi header; identitas, logo, dan ukuran huruf
     tidak boleh berubah saat pengguna menggulir. Sebelumnya logo 42→38px,
     judul --step--1→1.08rem, dan subjudul --step--2→--step--3 sehingga lockup
     tampak berganti desain di tengah scroll. */
  body.nav-stuck .header-brand { height: 60px; min-height: 60px; padding-block: 4px; }
  body.nav-stuck .brand-lockup img { width: 42px; height: 42px; }
  body.nav-stuck .brand-lockup .brand-title::before { font-size: var(--step--1); line-height: 1.05; }
  body.nav-stuck .brand-lockup .brand-title::after { margin-top: 3px; font-size: var(--step--2); line-height: 1.15; }
  body.nav-stuck .main-menu { position: absolute; top: 0; right: 0; left: auto; width: 64px; height: 56px; background: transparent; box-shadow: none; animation: none; }

  .hero.home-slider { min-height: 0; padding: 20px 16px 64px; }
  .hero-cinema .hero-slides { min-height: 0; }
  .hero-cinema .hero-slide:not(.is-active) { position: absolute; inset: 0; visibility: hidden; }
  .hero-cinema .hero-slide.is-active { position: relative; visibility: visible; }
  .home-slider .hero-welcome-copy h2 { margin-bottom: 10px; font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 0.98; }
  .hero-cinema .hero-welcome-copy { padding: 18px 16px 20px; }
  .hero-intro-desktop { display: none !important; }
  .hero-intro-mobile { display: block; max-width: 34ch; font-size: var(--step--1); line-height: 1.55; }
  /* Dua status operasional, dua kolom setara. Tidak ada lagi pola 2+1 yang
     membuat data terakhir tampak lebih penting hanya karena posisinya. */
  .hero-service-ribbon { width: 100%; }
  .home-slider .hero-service-ribbon p { min-height: 64px; border-bottom: 0; }
  .hero-actions-primary { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
  .home-slider .hero-actions-primary a { justify-content: center; min-height: 48px; padding: 8px; text-align: center; font-size: var(--step--2); }
  .hero-cinema .hero-slide-news { align-self: start; }
  .hero-slide-news .hero-copy { min-width: 0; }
  .hero-tab-list li:nth-child(n+4) { display: none; }

  .quick-links { margin-top: -28px; padding-inline: 16px; }
  .mobile-start-here { display: block; padding: 48px 16px; background: var(--mobile-surface); }
  .mobile-section-heading { margin-bottom: 18px; }
  .mobile-section-heading p { margin: 0 0 4px; color: var(--color-primary); font-size: var(--step--2); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .mobile-section-heading h2 { margin: 0; color: var(--color-primary-deep); font-family: var(--font-display); font-size: 1.65rem; line-height: 1.08; }
  .mobile-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mobile-start-grid a { display: grid; align-content: start; gap: 12px; min-height: 132px; border: 1px solid var(--mobile-line); border-radius: var(--mobile-radius); padding: 16px 14px; color: var(--color-ink); background: var(--mobile-surface-raised); text-decoration: none; box-shadow: 0 8px 24px rgba(67, 38, 24, 0.06); }
  .mobile-start-grid a:first-child { color: #fff9ef; background: var(--color-primary); border-color: var(--color-primary); }
  .mobile-start-grid svg { width: 24px; height: 24px; color: var(--color-accent); }
  .mobile-start-grid span { display: grid; gap: 3px; }
  .mobile-start-grid strong { font-size: var(--step--1); line-height: 1.25; }
  .mobile-start-grid small { color: var(--color-muted); font-size: var(--step--2); line-height: 1.35; }
  .mobile-start-grid a:first-child small { color: #f5dfcc; }
  .home-juknis-layout { gap: 28px; padding: 40px 16px; background: #f8f1e8; }
  .home-juknis-main > :nth-child(n+8) { content-visibility: auto; contain-intrinsic-size: 520px; }
  .home-content-pair .module-card .content-list li:nth-child(n+5),
  .home-briefing-pair .module-card .content-list li:nth-child(n+5) { display: none; }
  .home-juknis-sidebar { display: flex; gap: 12px; width: calc(100vw - 16px); margin-right: -16px; padding: 4px 16px 18px 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .home-juknis-sidebar::-webkit-scrollbar { display: none; }
  .home-juknis-sidebar > .module-card { flex: 0 0 min(82vw, 310px); min-height: 180px; max-height: 420px; margin: 0; overflow: auto; scroll-snap-align: start; border-radius: var(--mobile-radius); }
  .home-juknis-sidebar .instagram-slider-viewport { min-height: 300px; height: 300px; }
  .home-juknis-sidebar .instagram-post-slide iframe { min-height: 300px; }
  .home-juknis-sidebar > .instagram-cache {
    flex: 0 0 min(82vw, 310px);
    width: min(82vw, 310px);
    margin: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--mobile-radius);
    padding: 16px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    scroll-snap-align: start;
  }

  .mobile-quick-actions { left: 0; right: 0; bottom: 0; z-index: 130; grid-template-columns: repeat(5, 1fr); gap: 0; min-height: var(--mobile-bar-height); border: 0; border-top: 1px solid rgba(185, 143, 36, 0.28); border-radius: 0; padding: 5px max(4px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); background: #321713; box-shadow: 0 -10px 30px rgba(47, 20, 14, 0.2); }
  .mobile-quick-actions a { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 44px; min-height: 56px; border-radius: 10px; padding: 4px 2px; color: #f0ded4; font-size: var(--step--3); font-weight: 750; }
  .mobile-quick-actions svg { display: block; width: 21px; height: 21px; }
  .mobile-quick-actions a.is-active { color: #f2c95d; background: rgba(242, 201, 93, 0.1); }
  body.is-home .access-panel { left: max(10px, env(safe-area-inset-left)); bottom: calc(var(--mobile-bar-height) + 10px + env(safe-area-inset-bottom)); }
  .access-panel-toggle { width: 46px; height: 46px; }
  body.is-home .floating-whatsapp { right: max(10px, env(safe-area-inset-right)); bottom: calc(var(--mobile-bar-height) + 10px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
  .floating-whatsapp svg { width: 26px; height: 26px; }
  body.is-home .back-to-top { right: max(10px, env(safe-area-inset-right)); bottom: calc(var(--mobile-bar-height) + 66px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  body.is-inner .access-panel,
  body.is-inner .floating-whatsapp { bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.is-inner .back-to-top { bottom: calc(70px + env(safe-area-inset-bottom)); }

  a:active, button:active, summary:active { transform: scale(0.97); }
  .site-header { height: 68px; }
  .header-brand { height: 68px; min-height: 68px; align-items: flex-start; justify-content: center; padding: 8px 68px 8px 12px; }
  .brand-lockup { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; align-items: center; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-lockup .brand-title::before { font-size: var(--step--1); line-height: 1.05; white-space: nowrap; }
  .brand-lockup .brand-title::after { margin-top: 3px; font-size: var(--step--2); line-height: 1.15; }
  .main-menu { width: 64px; height: 68px; padding: 0 8px; }
  .menu-toggle { display: grid; width: 48px; min-width: 48px; height: 48px; min-height: 48px; place-items: center; align-content: center; gap: 1px; border-radius: 12px; padding: 4px; font-size: var(--step--3); font-weight: 800; line-height: 1; }
  .menu-toggle__icon { display: block; width: 20px; height: 20px; }
  body.nav-stuck { padding-top: 60px; }
  .main-menu .menu-toggle > span { display: block; min-width: 0; min-height: 0; padding: 0; color: inherit; font: inherit; line-height: 1; }
  .main-menu .menu-toggle > svg { position: static; margin: 0; transform: none; }
  body.nav-stuck .site-header,
  body.nav-stuck .header-brand { height: 60px; min-height: 60px; }
  body.nav-stuck .main-menu { height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .site-header { position: relative; }
  .main-menu {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 60;
    width: 68px;
    height: 63px;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0 8px;
    background: transparent;
    box-shadow: none;
  }
  .menu-toggle { display: grid; width: 48px; min-width: 48px; height: 48px; min-height: 48px; place-items: center; align-content: center; gap: 1px; border-radius: 12px; padding: 4px; color: var(--color-primary); background: #f8ede3; font-size: var(--step--3); font-weight: 800; line-height: 1; }
  .menu-toggle__icon { display: block; width: 20px; height: 20px; }
  .main-menu .menu-toggle > span { display: block; min-width: 0; min-height: 0; padding: 0; color: inherit; font: inherit; line-height: 1; }
  .main-menu .menu-toggle > svg { position: static; margin: 0; transform: none; }
  body.nav-stuck .main-menu { position: fixed; top: 0; right: 0; left: auto; width: 64px; height: 60px; background: var(--mobile-surface-raised, #fffdf8); box-shadow: none; animation: none; }
}

@media (min-width: 761px) {
  .mobile-quick-actions {
    display: none;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .main-menu { overflow-x: clip; }
  .main-menu li:last-child > .mod-menu__sub { left: auto; right: 0; }
  .main-menu .mod-menu__sub .mod-menu__sub { left: auto; right: 100%; }
}

/* Editorial article details: isolated from category listings and core fallback. */
/* `--editorial-wide` dulu dipatok 860px tetap sementara `--editorial-measure` cair
   (clamp 640-760px). Dua perilaku berbeda pada satu halaman: selisih foto terhadap
   kolom teks berayun dari 10px per sisi di 768 sampai 110px di 1024, lalu menyusut
   lagi jadi 50px di 1440 - cukup besar untuk terlihat, terlalu kecil dan terlalu
   berubah-ubah untuk terbaca sebagai keputusan. Kini foto, blok berita terkait, kop,
   judul, meta, dan badan berbagi satu tepi di setiap lebar layar. Bleed penuh di
   ponsel tetap dipertahankan - di sana selisihnya mutlak, jadi jelas disengaja. */
.editorial-article { --editorial-ink: #271815; --editorial-muted: #715f58; --editorial-paper: #fffdf9; --editorial-rule: #dccdbd; --editorial-measure: clamp(640px, 54vw, 760px); --editorial-wide: var(--editorial-measure); width: min(100%, 1120px); min-width: 0; margin-inline: auto; padding: clamp(32px, 6vw, 88px) clamp(16px, 4vw, 52px) 72px; color: var(--editorial-ink); overflow-wrap: break-word; }
.editorial-article__header { width: min(100%, var(--editorial-measure)); margin-inline: auto; text-align: start; }
.editorial-article__back, .editorial-article__return { display: inline-flex; align-items: center; min-height: 44px; color: #731d26; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Judul, kop, dan meta harus mengalahkan `.content-primary h1/p` (0-1-1) yang
   memaksa 2,3rem, letter-spacing 0, garis dingin, dan teks rata kanan-kiri. */
/* Kop siaran: lambang dan nama satuan kerja di atas garis emas. Menggantikan kicker
   yang cuma mengulang teks tautan kembali persis di atasnya; kanalnya tidak diulang
   di sini karena tautan kembali dan baris meta sudah menyebutkannya. */
.editorial-article .editorial-article__masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: none; margin: 18px 0 14px; border-bottom: 2px solid #b98f24; padding-bottom: 12px; color: #7c5a12; font-size: var(--step--2); font-weight: 800; letter-spacing: .12em; text-align: start; text-transform: uppercase; }
/* Berkasnya 179x232 - potret. Kotak bujur sangkar 28px dulu meletterboxingnya jadi
   efektif 21px, terbaca sebagai cakram hijau, bukan lambang. Kotaknya kini mengikuti
   rasio aslinya pada tinggi 40px; sumber 232px masih cukup untuk layar 2x. */
.editorial-article__masthead img { flex: none; width: 31px; height: 40px; object-fit: contain; }
/* Dateline kedinasan: tempat dan tanggal peristiwa memimpin kalimat pembuka,
   terpisah dari "Terbit" di baris meta yang tanggalnya bisa berbeda. */
.editorial-article__dateline { font-weight: 800; letter-spacing: .04em; color: var(--editorial-ink); }
/* Fraunces bertinggi-x 0,45em - 20% lebih pendek daripada sans - jadi judul 46,4px
   bobot 650 terbaca lebih kecil daripada judul Medium 42px bobot 700 meski angkanya
   lebih besar. Ukurannya dinaikkan ke 48,8px dan bobotnya ke 700 supaya tinggi-x
   optiknya setara. Pembatas 22ch dilepas: judul memakai lebar kolom penuh, sehingga
   turun dari empat baris @27 karakter menjadi tiga baris yang benar-benar kepala berita. */
/* Judul memakai lebar kolom penuh, jadi tiap baris harus mengisi kolomnya. Diuji pada
   seluruh 84 judul di 1440: `balance` rata-rata mengisi 89% dan menyisakan 12 judul di
   bawah 80% - "Sosialisasi Layanan oleh BPJS Kesehatan" cuma 63%, menganga 280px di
   sebelah foto yang penuh. `pretty` masih menarik satu kata turun demi menghindari
   baris akhir pendek: judul yang sama 72%. Pembungkusan serakah mencapai 89% pada judul
   itu dan 91% rata-rata, dan yang penting: jumlah baris serta tinggi bloknya sama persis
   di ketiga mode - tidak ada yang ditukar. Kata yatim yang muncul karenanya ditangani di
   templat dengan spasi tanpa-putus, bukan dengan mengorbankan lebar baris. */
.editorial-article .editorial-article__title { max-width: none; margin: 0; padding-bottom: 0; border-bottom: 0; color: var(--editorial-ink); font-family: Fraunces, Georgia, serif; font-size: clamp(1.9rem, 3.6vw, 3.05rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-align: start; text-wrap: wrap; }
.editorial-article .editorial-article__meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; margin-top: 22px; border-top: 1px solid var(--editorial-rule); padding-top: 16px; color: var(--editorial-muted); font-size: var(--step--1); text-align: start; }
.editorial-article__meta > * + *::before { content: "·"; margin-right: 20px; color: #b98f24; }
/* Spesifisitas 0-2-0: `.content-primary figure` (0-1-1) memaksa `margin: 22px 0`
   sehingga hero berhenti terpusat begitu lebarnya dibatasi. */
.editorial-article .editorial-article__hero, .editorial-article .editorial-article__hero-fallback { width: min(100%, var(--editorial-wide)); margin: clamp(30px, 5vw, 58px) auto 0; }
.editorial-article .editorial-article__hero { overflow: hidden; border-radius: 4px; background: #ede6dc; box-shadow: 0 22px 60px rgba(55, 26, 20, .14); }
/* 3:2 mengikuti rasio kamera sumber: krop 0% untuk foto 3:2 dan 11% untuk 4:3,
   turun dari 15,7% dan 25% ketika hero dipaksa 16:9. */
.editorial-article__hero img { display: block; width: 100%; height: auto; max-height: 600px; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 38%; }
.editorial-article__hero figcaption { border-top: 1px solid var(--editorial-rule); padding: 10px 16px 12px; color: var(--editorial-muted); font-size: var(--step--1); line-height: 1.5; }
.editorial-article__hero--document { max-width: 760px; padding: 20px; background: #f5eee5; }
.editorial-article__hero--document img { object-fit: contain; }
.editorial-article__hero-fallback { display: grid; place-content: center; min-height: clamp(260px, 42vw, 500px); border: 1px solid rgba(185, 143, 36, .45); padding: 32px; text-align: center; color: #fff8e9; background: radial-gradient(circle at 70% 20%, rgba(215, 171, 57, .32), transparent 35%), linear-gradient(135deg, #681923, #321713); }
.editorial-article__hero-fallback span { width: 76px; height: 76px; margin: 0 auto 20px; border: 1px solid #d9b555; border-radius: 50%; padding-top: 23px; font-family: Fraunces, Georgia, serif; font-size: 1.4rem; }
.editorial-article__hero-fallback strong { font-family: Fraunces, Georgia, serif; font-size: clamp(1.45rem, 3vw, 2.5rem); }
.editorial-article__hero-fallback small { margin-top: 8px; color: #e9cc7c; letter-spacing: .12em; text-transform: uppercase; }
.editorial-article--announcement .editorial-article__hero-fallback { min-height: 220px; background: linear-gradient(120deg, #f4eadb, #fffdf9); color: #551822; }
/* Kolom teks ikut melebar bersama layar: 640px pada laptop kecil sampai 760px pada
   monitor lebar. Jeda antarparagraf 2em sengaja melampaui tinggi baris supaya
   pergantian paragraf terbaca. */
/* Lantai 1rem menahan ponsel dan tablet di 16px sampai 1,5vw melewatinya pada 1067px,
   sehingga kolom tablet 640px direntang jadi 70 karakter per baris - baris terpanjang
   di seluruh situs justru pada layar terkecil. Lantainya dinaikkan ke 17px dan kurvanya
   dipatok pada dua titik desktop yang sudah benar: 0,5rem + 5vw/6 menghasilkan tepat
   18px pada 1200 dan 20px pada 1440. `--editorial-measure` sengaja tidak diubah - 54vw
   itulah yang mengunci 648px pada 1200, jadi mengubahnya akan menggeser desktop. */
.editorial-article__body { width: min(100%, var(--editorial-measure)); min-width: 0; margin: clamp(38px, 6vw, 72px) auto; font-size: clamp(1.0625rem, 0.5rem + 5vw / 6, 1.25rem); line-height: 1.7; }
/* Aturan generik `.content-primary li` merata-kanan-kirikan setiap butir. Di rel
   selebar 200px itu memecah "Bukan Sekadar Pemeriksaan Berkas" jadi tiga baris
   bersungai putih, jadi seluruh artikel - bukan hanya badannya - dilepaskan. */
.editorial-article :is(p, li) { max-width: none; text-align: start; hyphens: manual; text-wrap: pretty; }
/* 2,15em = 43px pada isi 20px, menyamai jeda 42,8px milik Medium: 1,26x tinggi baris,
   cukup untuk menandai pergantian gagasan tanpa memutus alirannya. */
.editorial-article__body > p { margin: 0 0 2.15em; }
.editorial-article__body > p:first-of-type { color: #44322d; font-size: 1.16em; line-height: 1.6; }
.editorial-article__body h2, .editorial-article__body h3 { margin: 2.25em 0 .6em; font-family: Fraunces, Georgia, serif; line-height: 1.25; text-wrap: balance; scroll-margin-top: 88px; }
.editorial-article__body h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.editorial-article__body h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.editorial-article__body img, .editorial-article__body video, .editorial-article__body iframe { max-width: 100%; height: auto; }
.editorial-article__body figure { max-width: 100%; margin: 2em 0; }
/* Di dalam alur baca, foto tidak boleh lebih lebar daripada teksnya. Hanya hero
   pembuka dan blok "Berita terkait" yang memakai pita 860px. */
.editorial-article__body figure.editorial-article__figure { width: 100%; max-width: none; margin: clamp(34px, 4.5vw, 58px) 0; overflow: hidden; border-radius: 4px; background: #ede6dc; box-shadow: 0 18px 46px rgba(55, 26, 20, .14); }
.editorial-article__figure img { display: block; width: 100%; height: auto; }
.editorial-article__figure figcaption { border-top: 1px solid var(--editorial-rule); padding: 10px 16px 12px; color: var(--editorial-muted); font-size: var(--step--1); line-height: 1.5; }
/* Dua atau tiga foto satu momen yang berdampingan: satu pita, bukan tumpukan. */
.editorial-article__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: none; margin: clamp(34px, 4.5vw, 58px) 0; }
.editorial-article__gallery[data-photos="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editorial-article__body .editorial-article__gallery figure.editorial-article__figure { width: 100%; margin: 0; }
.editorial-article__body .editorial-article__gallery figure.editorial-article__figure figcaption { padding: 8px 12px 10px; font-size: var(--step--2); }
.editorial-article__body blockquote { margin: 2em 0; border-left: 4px solid #b98f24; padding: 4px 0 4px 24px; color: #5d423a; font-family: Fraunces, Georgia, serif; font-size: 1.16em; }
.editorial-article__body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.editorial-article__body th, .editorial-article__body td { border: 1px solid var(--editorial-rule); padding: 10px 12px; }
.editorial-article__body a { color: #7a1d27; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.editorial-article__footer { width: min(100%, var(--editorial-measure)); margin: 0 auto; border-block: 1px solid var(--editorial-rule); padding: 26px 0; }
.editorial-article__publication { display: grid; gap: 4px; color: var(--editorial-muted); }
.editorial-article__publication strong { color: var(--editorial-ink); }
.editorial-article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.editorial-article__share button, .editorial-article__share a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #8b4f49; border-radius: 3px; padding: 8px 15px; color: #681923; background: transparent; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
/* `hidden` disetel skrip saat `navigator.share` tidak ada, tetapi `display: inline-flex`
   di atas mengalahkan aturan `[hidden]` bawaan peramban sehingga tombol yang seharusnya
   mati tetap tampil 147x44 dan bisa diklik tanpa memberi umpan balik apa pun. */
.editorial-article__share button[hidden], .editorial-article__share a[hidden] { display: none; }
.editorial-article__share-status { flex-basis: 100%; min-height: 1.4em; color: var(--editorial-muted); font-size: var(--step--1); }
.editorial-article__related { width: min(100%, var(--editorial-wide)); margin: clamp(46px, 7vw, 82px) auto 0; }
.editorial-article__related h2 { margin-bottom: 18px; font-family: Fraunces, Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.6rem); }
.editorial-article__related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.editorial-article__related-card { display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--editorial-rule); color: var(--editorial-ink); background: var(--editorial-paper); text-decoration: none; transition: border-color 160ms cubic-bezier(.16, 1, .3, 1), transform 160ms cubic-bezier(.16, 1, .3, 1); }
.editorial-article__related-card:hover, .editorial-article__related-card:focus-within { border-color: #8b4f49; transform: translateY(-2px); }
body.is-dark .editorial-article__related-card:hover, body.is-dark .editorial-article__related-card:focus-within { border-color: #c8a45a; }
/* Satu bahasa foto untuk seluruh permukaan berita: kartu daftar sudah 3:2,
   maka kartu terkait ikut 3:2. Sebelumnya satu pembaca melewati tiga rasio
   dalam satu kunjungan - 3:2 di daftar, 16:9 di ekor artikel, 4:3 di ponsel. */
.editorial-article__related-card img, .editorial-article__related-fallback { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.editorial-article__related-fallback { display: grid; place-items: center; color: #e5c875; background: #541820; font-family: Fraunces, Georgia, serif; font-size: 2rem; }
.editorial-article__related-card time { padding: 15px 16px 0; color: var(--editorial-muted); font-size: var(--step--1); }
.editorial-article__related-card strong { display: block; overflow: hidden; padding: 7px 16px 18px; font-family: Fraunces, Georgia, serif; font-size: 1.16rem; line-height: 1.3; }
.editorial-article__related-card strong span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.editorial-article__return { margin-top: 30px; }
/* #d1a42f hanya 2,32:1 di atas kartu putih; SC 1.4.11 menuntut 3:1 untuk indikator
   non-teks. Inti cincin dibuat gelap, halo emasnya dipertahankan. */
.editorial-article :focus-visible { outline: 3px solid #7a4b00; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209, 164, 47, .35); }
body.is-dark .editorial-article :focus-visible { outline-color: #f0c55a; }
body.is-dark .editorial-article { --editorial-ink: #fff5ea; --editorial-muted: #cbb8ad; --editorial-paper: #281b18; --editorial-rule: #624640; }
body.is-dark .editorial-article__body > p:first-of-type, body.is-dark .editorial-article__body blockquote { color: #eadbd0; }
body.is-dark .editorial-article__back, body.is-dark .editorial-article__return, body.is-dark .editorial-article__body a { color: #efc96b; }
body.is-dark .editorial-article__hero--document { background: #352522; }
body.is-dark .editorial-article__hero, body.is-dark .editorial-article__figure { background: #352522; box-shadow: 0 18px 46px rgba(0, 0, 0, .42); }
body.is-dark .editorial-article__share button, body.is-dark .editorial-article__share a { border-color: #c8a45a; color: #f4d989; }
body.is-dark .editorial-article__masthead { border-bottom-color: #c8a45a; color: #e2bb63; }
/* Halaman artikel tidak memakai cangkang kartu generik: pada 1366 kartu selebar
   1.257px hanya membingkai kolom teks 640px, menyisakan 309px putih mati di tiap
   sisi dan 117px di atas tautan kembali. Artikel berdiri di atas kertas halaman. */
.content-primary:has(> .editorial-article), body.is-dark .content-primary:has(> .editorial-article) { border: 0; padding: 0; background: transparent; box-shadow: none; }
.content-primary > .editorial-article { width: min(100%, 1040px); padding: clamp(28px, 3vw, 52px) clamp(16px, 3vw, 40px) 64px; }
/* Daftar isi: disclosure di atas teks pada layar sempit, rel menggantung di margin
   kiri begitu lebarnya cukup. Hanya artikel dengan lebih dari satu subjudul. */
.editorial-article__rail { width: min(100%, var(--editorial-measure)); margin: clamp(28px, 4vw, 44px) auto -8px; }
.editorial-article__reading { width: min(100%, var(--editorial-measure)); margin-inline: auto; }
.editorial-article__toc { border: 1px solid var(--editorial-rule); border-radius: 4px; background: var(--editorial-paper); }
.editorial-article__toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 16px; color: var(--editorial-ink); font-weight: 800; cursor: pointer; }
.editorial-article__toc summary span { color: var(--editorial-muted); font-size: var(--step--1); font-weight: 650; }
.editorial-article__toc ol { display: grid; margin: 0; border-top: 1px solid var(--editorial-rule); padding: 6px 16px 12px; list-style: none; counter-reset: toc; }
.editorial-article__toc li { counter-increment: toc; }
.editorial-article__toc a { display: flex; gap: 10px; min-height: 44px; align-items: center; color: var(--editorial-muted); font-size: var(--step--1); line-height: 1.35; text-decoration: none; }
.editorial-article__toc a::before { content: counter(toc); color: #9a6b16; font-variant-numeric: tabular-nums; font-weight: 800; }
.editorial-article__toc a:hover, .editorial-article__toc a:focus-visible, .editorial-article__toc a[aria-current="true"] { color: var(--editorial-ink); text-decoration: underline; text-underline-offset: 3px; }
.editorial-article__toc a[aria-current="true"] { font-weight: 800; }
@media (min-width: 1200px) {
  /* Rel tidak boleh mendorong apa pun. Versi sebelumnya menjadikan artikel grid
     `200px + teks`, sehingga kolom baca bergeser 128px ke kanan dari pusat layar:
     artikel bersubjudul dan artikel biasa meletakkan teksnya di tempat berbeda.
     Sekarang seluruh blok tetap di tempat yang sama seperti artikel tanpa rel, dan
     relnya menggantung di margin kiri sebagai marginalia lewat margin negatif.
     Rel dan badan berbagi satu sel grid supaya `position: sticky` terkurung pada
     tinggi badan - Chrome mengurung sticky ke grid terdekat, bukan ke barisnya. */
  .editorial-article--railed > .editorial-article__reading { display: grid; grid-template-columns: minmax(0, 1fr); }
  .editorial-article--railed > .editorial-article__reading > .editorial-article__body { grid-area: 1 / 1; }
  .editorial-article--railed .editorial-article__rail { grid-area: 1 / 1; justify-self: start; align-self: start; position: sticky; top: 88px; width: 200px; margin: clamp(38px, 6vw, 72px) 0 0 calc((200px + clamp(32px, 3vw, 56px)) * -1); }
  .editorial-article--railed .editorial-article__toc { border: 0; border-left: 1px solid var(--editorial-rule); border-radius: 0; padding-left: 4px; background: transparent; }
  .editorial-article--railed .editorial-article__toc summary { padding: 0 12px 10px; font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; }
  .editorial-article--railed .editorial-article__toc ol { border-top: 0; padding: 0 12px; }
  .editorial-article--railed .editorial-article__toc a { min-height: 0; padding: 7px 0; }
  /* Figur sudah selebar kolom teks; aturan ini menjaga bila ada override lain. */
  .editorial-article--railed .editorial-article__body figure.editorial-article__figure { width: 100%; margin-inline: 0; }
}
@media (max-width: 760px) {
  /* Kartu halaman melepas padding-nya supaya kolom baca memakai lebar layar,
     bukan 284px dari 390px seperti sebelumnya. */
  .content-primary > .editorial-article { padding: 28px 0 72px; }
  /* Badan naik 16px -> 17px; jeda barisnya dirapatkan supaya iramanya tetap 27px.
     Kolom 358px hanya memuat 36 karakter - tidak perlu jeda selega kolom 66 karakter. */
  .editorial-article__body { line-height: 1.62; }
  .editorial-article .editorial-article__title { font-size: clamp(1.75rem, 7.5vw, 2.1rem); line-height: 1.14; }
  .editorial-article__meta { gap: 6px 12px; }
  .editorial-article__meta > * + *::before { margin-right: 12px; }
  .editorial-article .editorial-article__hero { width: calc(100% + 32px); margin-left: -16px; border-radius: 0; }
  .editorial-article__body figure.editorial-article__figure { width: calc(100% + 32px); max-width: none; margin-left: -16px; border-radius: 0; }
  .editorial-article__gallery { width: calc(100% + 32px); margin-left: -16px; gap: 8px; }
  .editorial-article__gallery[data-photos="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-article__gallery[data-photos="3"] .editorial-article__figure:first-child { grid-column: 1 / -1; }
  /* Aturan full-bleed di atas berspesifisitas lebih tinggi, jadi anak galeri dinetralkan. */
  .editorial-article__body .editorial-article__gallery figure.editorial-article__figure { width: 100%; margin: 0; border-radius: 0; }
  .editorial-article__hero figcaption, .editorial-article__figure figcaption { padding-inline: 16px; }
  .editorial-article__hero--document { width: 100%; margin-left: 0; }
  .editorial-article__hero-fallback { min-height: 250px; }
  .editorial-article__related-grid { grid-template-columns: 1fr; }
  /* Tinggi gambar tidak boleh lagi ditentukan tinggi judul yang membungkus. */
  .editorial-article__related-card { grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; }
  .editorial-article__related-card img, .editorial-article__related-fallback { grid-row: 1 / span 2; align-self: start; height: auto; aspect-ratio: 3 / 2; }
  /* Judul tanpa batas membuat tiga kartu menumpuk 693px - pada berita pendek ekornya
     jadi 42% halaman. Tiga baris cukup untuk mengenali judul, dan tinggi kartu di satu
     baris jadi seragam. Clamp dipasang pada <span> di dalamnya, bukan pada <strong>:
     <strong> adalah grid item, dan `display:-webkit-box` milik grid item diblokifikasi
     menjadi `flow-root` sehingga clamp-nya mati diam-diam. */
  .editorial-article__related-card strong { display: block; overflow: hidden; overflow-wrap: normal; word-break: keep-all; font-size: 1rem; line-height: 1.35; }
  .editorial-article__related-card strong span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .editorial-article__share > span:first-child { flex-basis: 100%; }
}
@media (max-width: 360px) {
  /* Di 320px kolom judul kartu tinggal 68px dan judul pecah 4-7 huruf per baris. */
  .editorial-article__related-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .editorial-article__related-card img, .editorial-article__related-fallback { grid-row: 1; aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) { .editorial-article *, .editorial-article *::before, .editorial-article *::after { scroll-behavior: auto; transition: none !important; animation: none !important; } }

/* NEWS PORTAL 2026-07-11 */
.news-portal { --portal-ink: #281816; --portal-muted: #705e58; --portal-paper: #fffdf9; --portal-rule: #dfd1c1; width: min(100%, 1180px); min-width: 0; margin-inline: auto; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) 72px; color: var(--portal-ink); overflow: clip; }
.news-portal__hero { position: relative; isolation: isolate; display: grid; min-height: clamp(260px, 25vw, 320px); overflow: hidden; color: #fff9f0; background: #521821; }
.news-portal__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(81, 20, 28, .68); }
.news-portal__hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.news-portal__hero-overlay { align-self: end; max-width: 780px; padding: clamp(24px, 4vw, 46px); }
.news-portal__hero-overlay p, .news-portal__heading p { margin: 0 0 9px; color: #f2cf76; font-size: var(--step--2); font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.news-portal__hero h1 { max-width: 16ch; margin: 0; color: #fff; font-family: Fraunces, Georgia, serif; font-size: clamp(2.15rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.news-portal__hero-overlay span { display: block; max-width: 62ch; margin-top: 14px; color: #f8e9dc; line-height: 1.55; }
.news-portal__channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 clamp(38px, 6vw, 72px); }
.news-portal__channels a, .news-portal__heading > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #8a4a45; color: #681923; background: var(--portal-paper); font-weight: 800; text-decoration: none; }
.news-portal__channels a:hover, .news-portal__channels a:focus-visible { color: #fff; background: #681923; }
.news-portal__section { min-width: 0; margin-top: clamp(34px, 5vw, 62px); }
.news-portal__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--portal-rule); padding-bottom: 15px; }
.news-portal__heading p { color: #9b6d16; }
.news-portal__heading h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(1.7rem, 3.5vw, 2.7rem); line-height: 1.1; }
.news-portal__heading > a { padding: 8px 14px; white-space: nowrap; }
.news-portal__news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.news-portal__news-card { min-width: 0; border: 1px solid var(--portal-rule); background: var(--portal-paper); }
.news-portal__news-card > a { display: grid; height: 100%; color: inherit; text-decoration: none; }
.news-portal__news-image { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; color: #ecd17d; background: #641c26; font-family: Fraunces, Georgia, serif; font-size: 2rem; }
.news-portal__news-image img { width: 100%; height: 100%; object-fit: cover; }
.news-portal__news-copy { display: grid; align-content: start; gap: 8px; padding: 16px; }
.news-portal time { color: var(--portal-muted); font-size: var(--step--1); }
.news-portal__news-copy strong { font-family: Fraunces, Georgia, serif; font-size: 1.18rem; line-height: 1.3; }
.news-portal__announcements { margin: 0; border-top: 1px solid var(--portal-rule); padding: 0; list-style: none; }
.news-portal__announcements li { border-bottom: 1px solid var(--portal-rule); }
.news-portal__announcements a { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; min-height: 62px; padding: 14px 0; color: inherit; text-decoration: none; }
.news-portal__announcements span { font-family: Fraunces, Georgia, serif; font-size: 1.13rem; line-height: 1.3; }
/* Sama seperti css:12384: #d5a530 hanya 2,25:1 di atas kertas kartu #fffdf9 dan gagal
   SC 1.4.11. Inti cincin digelapkan, halo emasnya dipertahankan. */
.news-portal a:focus-visible { outline: 3px solid #7a4b00; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209, 164, 47, .35); }
body.is-dark .news-portal a:focus-visible { outline-color: #f0c55a; }
body.is-dark .news-portal { --portal-ink: #fff4e8; --portal-muted: #d5c0b3; --portal-paper: #1d282f; --portal-rule: #4b5961; }
body.is-dark .news-portal__channels a, body.is-dark .news-portal__heading > a { border-color: #b79955; color: #f5d884; background: #172128; }
@media (max-width: 760px) { .news-portal { padding: 18px 16px 56px; } .news-portal__hero { height: clamp(210px, 58vw, 240px); min-height: 0; margin-inline: -16px; } .news-portal__hero-overlay { padding: 22px 16px; } .news-portal__hero h1 { font-size: clamp(2rem, 10vw, 3rem); } .news-portal__hero-overlay span { font-size: var(--step--1); } .news-portal__heading { align-items: start; } .news-portal__heading > a { padding-inline: 10px; font-size: var(--step--1); } .news-portal__news-grid { grid-template-columns: 1fr; gap: 10px; } .news-portal__news-card > a { grid-template-columns: 126px minmax(0, 1fr); } .news-portal__news-image { grid-row: 1; height: 100%; min-height: 104px; aspect-ratio: auto; } .news-portal__news-copy { padding: 13px; } .news-portal__announcements a { grid-template-columns: 1fr; gap: 5px; } }
@media (max-width: 760px) {
  .news-portal__news-card > a {
    min-height: 179px;
  }

  .news-portal__news-copy strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

}

@media (prefers-reduced-motion: reduce) { .news-portal *, .news-portal *::before, .news-portal *::after { scroll-behavior: auto; transition: none !important; animation: none !important; } }

/* NEWS CHANNEL CATEGORIES 2026-07-12 */
.news-channel { --channel-ink: #281816; --channel-muted: #705e58; --channel-paper: #fffdf9; --channel-rule: #dfd1c1; width: min(100%, 1180px); min-width: 0; margin-inline: auto; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) 72px; color: var(--channel-ink); overflow: clip; }
/* Kop kanal dulu 280px pada 1440 dan 220px pada 390 - satu layar penuh sebelum satu
   judul pun terbaca. Tingginya dipangkas separuh; warna maroon dan kickernya tetap. */
.news-channel-hero { position: relative; isolation: isolate; display: grid; min-height: clamp(112px, 8vw, 128px); overflow: hidden; color: #fff9f0; background: #521821; }
.news-channel-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(81, 20, 28, .68); }
.news-channel-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.news-channel-hero__overlay { align-self: end; max-width: 760px; padding: clamp(16px, 1.7vw, 25px); }
.news-channel .section-kicker { margin: 0 0 6px; color: #f2cf76; font-size: var(--step--2); font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.news-channel-hero h1 { max-width: 30ch; margin: 0; color: #fff; font-family: Fraunces, Georgia, serif; font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
/* Sembilan dari sembilan paragraf halaman kanal masih mewarisi `text-align: justify`
   dari `.content-primary p`. Di kolom kartu 313px tanpa kamus pemenggalan Indonesia,
   itu menghasilkan sungai putih yang sama seperti yang sudah dicabut dari artikel. */
.news-channel :is(p, li) { text-align: start; hyphens: manual; text-wrap: pretty; }
/* 72ch, bukan 62ch: pada 1440 lede 123 karakter jadi dua baris, bukan tiga, tanpa
   mengecilkan hurufnya. */
.news-channel-hero__overlay > p:last-child { max-width: 72ch; margin: 8px 0 0; color: #f8e9dc; line-height: 1.5; }
.news-channel-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 clamp(34px, 5vw, 56px); }
.news-channel-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #8a4a45; padding: 9px 12px; color: #681923; background: var(--channel-paper); font-weight: 800; text-align: center; text-decoration: none; }
.news-channel-tabs a:is(:hover, :focus-visible, .is-active) { color: #fff; background: #681923; }
/* Dua kolom, bukan tiga: kartu 349px dengan foto 347x217 terlalu sempit untuk judul
   peradilan yang panjang. Di 1440 kartunya menjadi 533px dengan foto 533x355 - sekelas
   halaman tag Medium (572px, rasio 1,5), dan judulnya berhenti pecah 5 baris. */
.news-listing--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.news-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border: 1px solid var(--channel-rule); background: var(--channel-paper); }
.news-card-media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #641c26; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 17px; }
.news-meta { display: flex; flex-wrap: wrap; gap: 6px 11px; color: var(--channel-muted); font-size: var(--step--2); font-weight: 700; }
.news-meta span { color: #9b6d16; text-transform: uppercase; letter-spacing: .07em; }
/* 23px Fraunces = tinggi-x 10,4px, setara judul kartu Medium 20px sans. */
.news-card h2, .announcement-item h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.44rem; line-height: 1.24; }
.news-card h2 a, .announcement-item h2 a { color: inherit; text-decoration: none; }
.news-card-body p { margin: 0; color: var(--channel-muted); font-size: var(--step--1); line-height: 1.55; }
.news-listing--announcement { display: grid; border-top: 1px solid var(--channel-rule); }
.announcement-item { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--channel-rule); padding: 20px 0; }
.announcement-item .news-card-body { gap: 8px; padding: 0; }
.announcement-item .news-meta { order: -1; }
.news-channel-description { max-width: 74ch; margin: 0 0 26px; color: var(--channel-muted); }
.news-channel-pagination { margin-top: 32px; }
/* Sama seperti css:12384: #d5a530 hanya 2,25:1 di atas kertas kartu #fffdf9 dan gagal
   SC 1.4.11. Inti cincin digelapkan, halo emasnya dipertahankan. */
.news-channel :focus-visible { outline: 3px solid #7a4b00; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209, 164, 47, .35); }
body.is-dark .news-channel :focus-visible { outline-color: #f0c55a; }
body.is-dark .news-channel { --channel-ink: #fff4e8; --channel-muted: #d5c0b3; --channel-paper: #1d282f; --channel-rule: #4b5961; }
body.is-dark .news-channel-tabs a { border-color: #b79955; color: #f5d884; background: #172128; }
body.is-dark .news-channel-tabs a:is(:hover, :focus-visible, .is-active) { color: #172128; background: #f5d884; }
body.is-dark .news-meta span { color: #f5d884; }
@media (max-width: 760px) {
  /* Kartu halaman melepas padding-nya persis seperti halaman artikel di css:12438:
     daftar berita memakai 358px penuh dari layar 390px, bukan 284px. */
  .content-primary:has(> .news-channel) { padding-inline: 0; }
  .news-channel { padding: 18px 0 56px; }
  /* Padding kanal sudah nol, jadi kop tidak perlu lagi ditarik keluar 16px. */
  .news-channel-hero { margin-inline: 0; }
  .news-channel-hero h1 { font-size: clamp(1.4rem, 6.2vw, 2rem); }
  .news-channel-hero__overlay > p:last-child { font-size: var(--step--1); }
  /* Satu kolom pada ponsel, dua kolom begitu lebarnya cukup: pada 700px satu kartu
     setinggi 617px dengan foto 640x427 hanya memuat 1,5 kartu per layar. */
  .news-listing--cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
  /* Foto 126px di samping kolom teks 156px memecah judul jadi satu-dua kata per baris
     dan merentang foto jadi bilah 126x448. Kartu ditumpuk: foto selebar kartu dengan
     potongan dokumenter 3:2 di atas teks selebar kartu. */
  .news-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: visible; }
  .news-card-media { grid-row: 1; width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  /* Kartu tanpa foto tidak perlu menyumbang 236px maroon kosong sebelum judulnya;
     pada layar sempit lambangnya cukup menjadi pita. */
  .news-card-media--fallback:not(:has(img)) { aspect-ratio: 3 / 1; font-size: 1.5rem; }
  .news-card-body { gap: 9px; padding: 14px 16px 16px; }
  /* Judul dibatasi tiga baris oleh line-clamp, bukan lagi oleh `overflow: hidden` kartu
     yang dulu memenggal "POSBAKUM" di tengah huruf. `anywhere` menjaga kata kapital
     panjang tetap patah pada batas kolom, bukan tumpah keluar. */
  /* Clamp harus dipasang pada <a>, bukan <h2>. `<h2>` adalah grid item di dalam
     .news-card-body, dan peramban memblokifikasi `display:-webkit-box` milik grid item
     menjadi `flow-root` - terukur langsung: computed display `flow-root`, clamp mati,
     lalu `overflow:hidden` memenggal judul di tengah baris tanpa elipsis. Tautannya
     bukan grid item, jadi di sana `-webkit-box` bertahan dan elipsisnya muncul. */
  .news-card h2, .announcement-item h2 { font-size: 1.18rem; line-height: 1.3; overflow-wrap: anywhere; }
  .news-card h2 a, .announcement-item h2 a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .news-card-body p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .announcement-item { padding: 17px 0; }
}
@media (prefers-reduced-motion: reduce) { .news-channel *, .news-channel *::before, .news-channel *::after { scroll-behavior: auto; transition: none !important; animation: none !important; } }

/* NEWS CHANNEL LISTING AND PAGINATION 2026-07-12 */
.news-card-media--fallback {
  display: grid;
  place-items: center;
  color: #ecd17d;
  font-family: Fraunces, Georgia, serif;
  font-size: 2rem;
}

.news-channel-more {
  margin-top: 32px;
  border-top: 1px solid var(--channel-rule);
  padding-top: 22px;
}

.news-channel-more h2 {
  margin: 0 0 14px;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.4rem;
}

.news-channel-more ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-channel-more a {
  display: block;
  min-height: 44px;
  border-bottom: 1px solid var(--channel-rule);
  padding: 10px 4px;
  color: inherit;
  text-decoration: none;
}

.news-channel-pagination .counter {
  margin: 0 0 12px;
  color: var(--channel-muted);
  font-size: var(--step--1);
}

.news-channel-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-channel-pagination .page-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-channel-pagination .page-item.disabled {
  display: none;
}

.news-channel-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--channel-rule);
  border-radius: 7px;
  padding: 8px 12px;
  color: #681923;
  background: var(--channel-paper);
  font-weight: 800;
  text-decoration: none;
}

.news-channel-pagination .page-item.active .page-link,
.news-channel-pagination .page-link:hover,
.news-channel-pagination .page-link:focus-visible {
  border-color: #681923;
  color: #fff;
  background: #681923;
}

.news-channel-pagination a[aria-label="Go to next page"]::after {
  content: "Berikutnya";
}

.news-channel-pagination a[aria-label="Go to last page"]::after {
  content: "Terakhir";
}

.news-channel-pagination a[aria-label="Go to previous page"]::after {
  content: "Sebelumnya";
}

.news-channel-pagination a[aria-label="Go to first page"]::after {
  content: "Pertama";
}

.news-channel-pagination a[aria-label*="page"] span[class^="icon-"] {
  display: none;
}

body.is-dark .news-channel-pagination .page-link {
  color: #f5d884;
}

body.is-dark .news-channel-pagination .page-item.active .page-link,
body.is-dark .news-channel-pagination .page-link:hover,
body.is-dark .news-channel-pagination .page-link:focus-visible {
  border-color: #f5d884;
  color: #172128;
  background: #f5d884;
}
/* END NEWS CHANNEL LISTING AND PAGINATION 2026-07-12 */

.transparency-service-group { margin-top: clamp(32px, 5vw, 56px); }
.content-primary .transparency-service-group > h2 { margin: 0 0 16px; color: var(--color-primary-deep); font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2rem); }
body.is-dark .content-primary .transparency-service-group > h2 { color: #f3c96b; }
/* Court profile detail/status components retained after landing moved to svc-*. */
.profile-status-page { display: grid; gap: clamp(18px, 3vw, 30px); min-width: 0; }
.profile-status-hero { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: clamp(28px, 6vw, 64px); color: #fff8ee; background: linear-gradient(125deg, #3f1518 0%, #6f2229 62%, #342318 100%); box-shadow: var(--shadow-card); }
.profile-status-hero::after { content: ""; position: absolute; right: -7%; bottom: -55%; width: 42%; aspect-ratio: 1; border: 1px solid rgba(240, 197, 92, .32); border-radius: 50%; box-shadow: 0 0 0 28px rgba(240, 197, 92, .06), 0 0 0 64px rgba(240, 197, 92, .04); }
.content-primary .profile-status-hero h2 { max-width: 18ch; margin: 0 0 14px; color: #fff; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; text-wrap: balance; }
.profile-status-hero p:last-child { position: relative; z-index: 1; max-width: 66ch; margin: 0; color: #f4ded5; line-height: 1.7; }
.leadership-welcome { display: grid; gap: clamp(22px, 4vw, 38px); }
.leadership-welcome__hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); align-items: end; min-height: 430px; overflow: hidden; border-radius: var(--radius-card); color: #fff8ed; background: linear-gradient(125deg, #4b1118 0%, #7d2025 55%, #b48124 100%); box-shadow: var(--shadow-card); }
.leadership-welcome__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 24% 18%, rgba(255,255,255,.15), transparent 35%), linear-gradient(90deg, rgba(26,5,8,.2), transparent 68%); }
.leadership-welcome__hero > div { align-self: center; padding: clamp(28px, 5vw, 58px); }
.leadership-welcome__eyebrow { margin: 0 0 12px; color: #f2cf77; font-size: var(--step--2); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.leadership-welcome__hero h2 { max-width: 10ch; margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.045em; }
.leadership-welcome__hero > div > p:last-child { max-width: 48ch; margin: 20px 0 0; color: #f4e5d5; font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 1.65; }
.leadership-welcome__hero figure { position: relative; align-self: stretch; min-height: 430px; margin: 0; background: rgba(24,5,8,.22); }
.leadership-welcome__hero figure::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(35,7,10,.88), transparent 55%); pointer-events: none; }
.leadership-welcome__hero img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; object-position: center top; }
.leadership-welcome__hero figcaption { position: absolute; inset: auto 18px 18px; z-index: 2; display: grid; gap: 3px; color: #fff; }
.leadership-welcome__hero figcaption strong { font-size: 1.05rem; }
.leadership-welcome__hero figcaption span { color: #f0dba9; font-size: var(--step--1); }
.leadership-welcome__message { width: min(100%, 74ch); margin-inline: auto; color: var(--color-ink); font-size: 1.02rem; line-height: 1.82; }
.leadership-welcome__message > p { margin: 0 0 1.2em; }
.leadership-welcome__greeting { color: var(--color-primary-dark); font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 700; }
.leadership-welcome__closing { font-style: italic; }
.leadership-welcome__message footer { display: grid; width: fit-content; min-width: min(100%, 330px); margin: 32px 0 0 auto; border-top: 2px solid var(--color-accent); padding-top: 14px; text-align: right; }
.leadership-welcome__message footer span, .leadership-welcome__message footer small { color: var(--color-muted); }
.leadership-welcome__message footer strong { margin-top: 8px; color: var(--color-primary-dark); font-family: var(--font-display); font-size: 1.22rem; }
body.is-dark .leadership-welcome__message { color: var(--color-ink); }
body.is-dark .leadership-welcome__greeting, body.is-dark .leadership-welcome__message footer strong { color: #f3c96b; }
@media (max-width: 760px) {
  .leadership-welcome__hero { grid-template-columns: 1fr; }
  .leadership-welcome__hero > div { padding: 30px 24px; }
  .leadership-welcome__hero h2 { max-width: none; font-size: clamp(2.2rem, 13vw, 3.6rem); }
  .leadership-welcome__hero figure, .leadership-welcome__hero img { min-height: 360px; }
  .leadership-welcome__hero figure { aspect-ratio: 4 / 5; }
  .leadership-welcome__message footer { margin-left: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .leadership-welcome * { scroll-behavior: auto; } }

.profile-status-card { min-width: 0; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 30px); background: #fff; box-shadow: var(--shadow-card); }
.profile-note { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 20px 0; border-left: 4px solid var(--color-accent); padding: 14px 16px; color: var(--color-ink); background: var(--color-accent-soft); }
.profile-note strong { color: var(--color-primary-dark); }
.profile-note span { flex: 1 1 32ch; min-width: 0; }
.profile-status-card { max-width: 760px; }
.profile-status-badge { display: inline-flex; margin-bottom: 12px; border-radius: 999px; padding: 6px 10px; color: #664500; background: #ffedb8; font-size: var(--step--2); font-weight: 850; text-transform: uppercase; }
.profile-contact-action { width: fit-content; margin-top: 8px; }
.sejarah-cinema { position: relative; isolation: isolate; min-height: 430px; background: #35161a; }
.sejarah-cinema::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(rgba(76, 20, 26, .32), rgba(30, 12, 13, .7)), url('/images/hero/gedung-pn-natuna-2026.webp') center / cover; filter: saturate(.76); transform: scale(1.035); animation: profile-cinema-drift 18s ease-in-out infinite alternate; }
.sejarah-cinema::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, transparent 42%, rgba(28, 10, 12, .52) 100%); pointer-events: none; }
.sejarah-photo-card.sejarah-cinema img { height: 100%; min-height: 430px; object-fit: contain; filter: sepia(.08) saturate(.82); }
.sejarah-cinema figcaption { position: absolute; inset: auto 12px 12px; border: 0; border-radius: 6px; color: #fff5e8; background: rgba(44, 16, 18, .9); }
@keyframes profile-cinema-drift { to { transform: scale(1.075) translate3d(-.7%, -.5%, 0); } }
.roster-name, .roster-featured-name, .roster-meta dd { overflow-wrap: anywhere; word-break: normal; }
body.is-dark .profile-status-card { border-color: #46515a; background: #19232b; }
body.is-dark .profile-note strong { color: #f3c96b; }
body.is-dark .profile-contact-action { border-color: #46515a; color: #f3d580; background: #101820; }
body.is-dark .profile-note { color: #e8e1d8; background: #252d30; }
.profile-contact-action:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 760px) { .sejarah-cinema, .sejarah-photo-card.sejarah-cinema img { min-height: 300px; } .roster-meta > div { align-items: flex-start; flex-wrap: wrap; } .roster-meta dd { width: 100%; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .sejarah-cinema::before { animation: none; transform: none; } }

/* PERF-MOTION 2026-07-11 */
/* #9 Shadow tokens: --shadow-card / --shadow-soft already on :root (line ~17).
   New tokens below consolidate the dominant "subtle card" and "overlay" families.
   Explicit body.is-dark box-shadow rules elsewhere are intentionally untouched. */
:root {
  --shadow-subtle: 0 8px 20px rgba(29, 39, 48, 0.05);
  --shadow-overlay: 0 22px 60px rgba(29, 39, 48, 0.2);
}

/* #7 Reveal: belt-and-suspenders reduced-motion guard (JS also skips setup). */
@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* #10 Below-fold homepage sections skip offscreen rendering. Never hero/nav.
   contain-intrinsic-size uses `auto` so the last rendered size is remembered
   and scroll position stays stable when scrolling back up. */
.home-juknis-main > .announcement-showcase,
.home-juknis-main > .instansi-news-board,
.home-juknis-main > .module-card:last-child,
.home-juknis-sidebar > .module-card:last-child {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.home-juknis-main > .instansi-news-board {
  contain-intrinsic-size: auto 660px;
}

.home-juknis-sidebar > .module-card:last-child {
  contain-intrinsic-size: auto 730px;
}
/* END PERF-MOTION 2026-07-11 */

/* EDITORIAL 2026-07-11 */
/* #1 Hirarki seksi beranda: kicker -> h2 -> deskripsi satu baris -> konten -> satu aksi.
   Markup datang dari template/chrome (card.php, sipp-schedule.php, hero-slider.php,
   instansi-feed.php); konten artikel/modul di database tidak diubah. */
.section-kicker {
  margin: 0 0 6px;
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), #ecd08a);
}

.section-desc {
  margin: 0;
  max-width: 62ch;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.section-head {
  min-width: 0;
}

.section-head h2 {
  margin: 0 0 4px;
}

/* Head kicker/desc di dalam sipp-schedule-head (p di sana di-reset margin:0). */
.sipp-schedule-head .section-kicker {
  margin-bottom: 6px;
}

.sipp-schedule-head .section-desc {
  margin-top: 4px;
}

/* Kicker yang diemit chrome di atas konten DB (showtitle=0). */
.module-card > .section-kicker {
  margin-bottom: 8px;
}

/* Kicker menggantikan garis emas otomatis pada judul konten. */
.module-card > .section-kicker + .custom > h2:first-child::before {
  display: none;
}

.module-card.facility-band > .section-kicker {
  color: #f3c96b;
}

body.is-dark .section-kicker {
  color: #f3c96b;
}

body.is-dark .section-desc {
  color: #a8b4be;
}

/* #2 Navigasi aktif berbasis rute (desktop, tanpa JS): mod_menu memberi
   li.current (persis) dan li.active (jejak rute) — keduanya digarisbawahi emas. */
@media (min-width: 1101px) {
  .main-menu .mod-menu > li.active > a,
  .main-menu .mod-menu > li.current > a {
    color: #ffe9b8;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #f3c96b;
    text-underline-offset: 8px;
  }

  body.is-dark .main-menu .mod-menu > li.active > a,
  body.is-dark .main-menu .mod-menu > li.current > a {
    color: #ffedc2;
    text-decoration-color: #e5bd55;
  }
}

/* #4 Irama seksi: latar selang-seling putih/krem + pembatas statis + padding bervariasi. */
.home-juknis-main > .sipp-schedule-board,
.home-juknis-main > .instansi-news-board {
  background: var(--color-soft);
}

body.is-dark .home-juknis-main > .sipp-schedule-board,
body.is-dark .home-juknis-main > .instansi-news-board {
  background: #19232b;
}

.home-section-divider {
  position: relative;
  height: 18px;
  margin: 6px 0;
}

/* Lindungi dari aturan mobile lama `.home-juknis-main > :nth-child(n+8)
   { contain-intrinsic-size: 520px }` yang memberi lebar intrinsik 520px
   pada elemen kosong ini (menyebabkan overflow horizontal di 390px). */
.home-juknis-main > .home-section-divider {
  min-width: 0;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.home-section-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background:
    linear-gradient(90deg, rgba(185, 143, 36, 0), #ddc98f) left center / calc(50% - 18px) 1px no-repeat,
    linear-gradient(90deg, #ddc98f, rgba(185, 143, 36, 0)) right center / calc(50% - 18px) 1px no-repeat;
}

.home-section-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--color-accent);
}

body.is-dark .home-section-divider::before {
  background:
    linear-gradient(90deg, rgba(243, 201, 107, 0), rgba(243, 201, 107, 0.38)) left center / calc(50% - 18px) 1px no-repeat,
    linear-gradient(90deg, rgba(243, 201, 107, 0.38), rgba(243, 201, 107, 0)) right center / calc(50% - 18px) 1px no-repeat;
}

body.is-dark .home-section-divider::after {
  background: #e5bd55;
}

@media (min-width: 761px) {
  .home-juknis-layout {
    padding: 32px var(--page-padding) 72px;
  }

  .home-juknis-main > .module-card {
    padding: 24px 26px;
  }

  /* Sekitar pembatas: 16 (gap) + 16 + 24 + 16 + 16 (margin-bottom kartu) ~= 72px. */
  .home-section-divider {
    height: 24px;
    margin: 16px 0;
  }
}

@media (max-width: 760px) {
  /* Mobile: 16 + 4 + 16 + 4 ~= 40-48px antar seksi besar. */
  .home-section-divider {
    height: 16px;
    margin: 4px 0;
  }
}
/* END EDITORIAL 2026-07-11 */

/* MAKLUMAT COMPACT ROW 2026-07-11 */
.maklumat-compact {
  display: block;
}

.maklumat-compact-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.maklumat-compact-doc {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.maklumat-compact .maklumat-doc,
.maklumat-duo .maklumat-compact .maklumat-doc {
  width: 100%;
  margin: 0;
}

.maklumat-compact .maklumat-doc img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.maklumat-compact-doc h3 {
  margin: 0 0 6px;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.2;
}

.maklumat-compact-doc p {
  margin: 0 0 10px;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.maklumat-compact-doc > div > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.is-dark .maklumat-compact-doc h3 {
  color: #f3c96b;
}

@media (max-width: 560px) {
  .maklumat-compact-docs {
    gap: 12px;
  }

  .maklumat-compact-doc {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .maklumat-compact-doc > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .maklumat-compact-doc > div > a {
    margin-top: auto;
  }
}



/* HOMEPAGE SECTION RHYTHM 2026-07-11 */
.home-juknis-main,
.home-juknis-sidebar {
  gap: 40px;
}

.home-juknis-main > .module-card,
.home-juknis-sidebar > .module-card {
  margin-bottom: 0;
}

.module-card:has(.app-links) {
  margin-bottom: 0;
}
/* Link layanan cepat mengikuti bahasa permukaan card utama: card putih di atas
   latar seksi krem; tiap link memakai tint tipis sebagai kontrol bersarang. */
body.is-home .quick-links.app-strip {
  background: #f8f1e8;
}

body.is-home .module-card:has(.app-links) {
  padding: 24px;
  border-color: rgba(103, 22, 7, 0.16);
  background: #fffdf9;
  box-shadow: none;
}

body.is-home .module-card:has(.app-links) .app-links {
  gap: 14px 16px;
}

body.is-home .module-card:has(.app-links) .app-links a {
  border-color: #e4d2a3;
  background: #fbf7ef;
  box-shadow: none;
}

body.is-home .module-card:has(.app-links) .app-links a:is(:hover, :focus-visible) {
  border-color: var(--color-accent);
  background: #fff;
  box-shadow: 0 7px 16px rgba(55, 36, 25, 0.065);
}

body.is-dark.is-home .quick-links.app-strip {
  background: #11191f;
}

body.is-dark.is-home .module-card:has(.app-links) {
  border-color: #46515a;
  background: #19232b;
}

body.is-dark.is-home .module-card:has(.app-links) .app-links a {
  border-color: #46515a;
  background: #202b34;
}

@media (max-width: 600px) {
  body.is-home .module-card:has(.app-links) {
    padding: 16px;
  }
}

@media (min-width: 761px) {
  .home-juknis-layout {
    padding-top: 24px;
  }
  body.is-home .home-juknis-layout {
    margin-top: -32px;
  }
}

/* Wrapper kosong tidak ikut flow; divider mempertahankan motif tanpa gap ganda. */
.home-juknis-main > .home-content-pair:not(:has(*)),
.home-juknis-main > .home-briefing-pair:not(:has(*)) {
  display: none;
}

.home-juknis-main > .home-section-divider {
  display: block;
  margin-block: -32px;
}

@media (max-width: 760px) {
  .home-juknis-layout {
    gap: 28px;
    padding-top: 28px;
  }

  .home-juknis-main,
  .home-juknis-sidebar {
    gap: 28px;
  }

}
/* END HOMEPAGE SECTION RHYTHM 2026-07-11 */
/* END MAKLUMAT COMPACT ROW 2026-07-11 */


/* Halaman galat. Ia menyambut warga yang mengklik tautan lama dari WhatsApp, jadi yang
   dibutuhkan bukan hiasan melainkan pengakuan yang jelas dan jalan keluar yang nyata.
   Kop berlambang dipakai supaya pembaca langsung tahu ia masih di situs pengadilan yang
   benar - bukan tersesat ke halaman asing. */
.error-page { display: grid; place-items: center; min-height: 100vh; padding: clamp(24px, 6vw, 72px) 16px; background: var(--color-soft); }
.error-page__inner { width: min(100%, 640px); }
.error-page__masthead { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 4vw, 32px); padding-bottom: 12px; border-bottom: 2px solid var(--color-accent); color: var(--color-primary-deep); font-size: var(--step--2); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.error-page__masthead img { width: 31px; height: 40px; object-fit: contain; }
.error-page__code { margin: 0; color: var(--color-primary); font-family: Fraunces, Georgia, serif; font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.error-page h1 { margin: 8px 0 0; color: var(--color-ink); font-family: Fraunces, Georgia, serif; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 650; line-height: 1.15; text-wrap: balance; }
.error-page__lead { margin: 14px 0 0; max-width: 54ch; color: var(--color-muted); font-size: var(--step-0); line-height: 1.6; }
.error-page__search { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(22px, 4vw, 30px) 0 0; }
.error-page__search label { flex-basis: 100%; color: var(--color-ink); font-size: var(--step--1); font-weight: 700; }
.error-page__search input { flex: 1 1 220px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-surface); color: var(--color-ink); font: inherit; }
.error-page__search input:focus-visible, .error-page a:focus-visible, .error-page button:focus-visible { outline: 3px solid #7a4b00; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209, 164, 47, .35); }
.error-page__search button { min-height: 44px; padding: 10px 22px; border: 1px solid var(--color-primary); border-radius: 3px; background: var(--color-primary); color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
.error-page__search button:hover { background: var(--color-primary-dark); }
.error-page h2 { margin: clamp(26px, 5vw, 36px) 0 12px; color: var(--color-ink); font-size: var(--step--1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.error-page__routes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.error-page__routes a { display: grid; gap: 2px; align-content: center; min-height: 44px; padding: 11px 15px; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; transition: border-color 160ms cubic-bezier(.16, 1, .3, 1); }
.error-page__routes a:hover { border-color: var(--color-primary); }
.error-page__routes strong { font-weight: 750; }
.error-page__routes span { color: var(--color-muted); font-size: var(--step--1); line-height: 1.45; }
.error-page__help { margin: clamp(22px, 4vw, 30px) 0 0; padding-top: 16px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--step--1); line-height: 1.6; }
.error-page__help a { color: var(--color-primary); }
.error-page__debug { margin-top: 28px; overflow-x: auto; font-size: var(--step--2); }
body.is-dark .error-page { background: #151c22; }
body.is-dark .error-page__masthead { color: #f5e7d4; }
body.is-dark .error-page__code { color: #f3c96b; }
body.is-dark .error-page h1, body.is-dark .error-page__routes strong { color: #fff4e8; }
body.is-dark .error-page__lead, body.is-dark .error-page__routes span, body.is-dark .error-page__help { color: #d5c0b3; }
body.is-dark .error-page__routes a, body.is-dark .error-page__search input { border-color: #4b5961; background: #1d282f; color: #fff4e8; }
body.is-dark .error-page__help a { color: #f3c96b; }

/* Halaman hasil pencarian. Ia memakai ukuran kolom baca yang sama dengan artikel -
   hasil pencarian adalah teks yang dibaca, bukan tabel data, dan 1.255px penuh membuat
   tiap cuplikan terentang jauh melewati batas nyaman. Sorotan kata kunci memakai emas
   lembut milik situs, bukan kuning bawaan peramban. Aturan generik `.content-primary`
   yang merata-kanan-kirikan paragraf juga dilepas di sini, sama seperti artikel dan
   halaman kanal: Chrome tidak punya kamus pemenggalan Indonesia, sehingga justify
   melebarkan spasi menjadi sungai putih. */
.site-search { width: min(100%, var(--editorial-measure, 760px)); margin-inline: auto; padding-block: clamp(8px, 2vw, 20px); }
.site-search :is(p, li) { text-align: start; hyphens: manual; }
.site-search__header h1 { margin: 0; color: var(--color-primary-deep); font-family: Fraunces, Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.site-search__lead { margin: 10px 0 0; color: var(--color-muted); font-size: var(--step--1); line-height: 1.6; }
.site-search__form { margin: clamp(20px, 3vw, 28px) 0 0; }
.site-search__form label { display: block; margin-bottom: 8px; color: var(--color-ink); font-size: var(--step--1); font-weight: 700; }
.site-search__field { display: flex; flex-wrap: wrap; gap: 8px; }
.site-search__field input { flex: 1 1 240px; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-surface); color: var(--color-ink); font: inherit; }
.site-search__field button { min-height: 44px; padding: 10px 24px; border: 1px solid var(--color-primary); border-radius: 3px; background: var(--color-primary); color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
.site-search__field button:hover { background: var(--color-primary-dark); }
.site-search :focus-visible { outline: 3px solid #7a4b00; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209, 164, 47, .35); }
.site-search__count { margin: clamp(22px, 4vw, 32px) 0 0; padding-bottom: 14px; border-bottom: 2px solid var(--color-accent); color: var(--color-muted); font-size: var(--step--1); }
.site-search__count strong { color: var(--color-ink); font-size: var(--step-0); }
.site-search__list { margin: 0; padding: 0; list-style: none; }
/* Judul dan cuplikan berasal dari isi apa adanya, termasuk kata sambung tanpa spasi
   hasil impor lama seperti "Layanan HukumPosbakum". Tanpa pemutus, satu kata sepanjang
   itu melebarkan halaman 17px di layar 390 dan memunculkan gulir mendatar. */
.site-search__item { min-width: 0; padding: clamp(18px, 3vw, 24px) 0; border-bottom: 1px solid var(--color-line); overflow-wrap: anywhere; }
.site-search__item-title { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; overflow-wrap: anywhere; }
.site-search__item-title a { color: var(--color-primary); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.site-search__item-title a:visited { color: #642a72; }
.site-search__item-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; color: var(--color-muted); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .07em; }
.site-search__item-text { margin: 10px 0 0; color: var(--color-ink); font-size: var(--step--1); line-height: 1.62; }
.site-search__item mark, .site-search mark, .site-search .highlight { padding: 0 2px; border-radius: 2px; background: var(--color-accent-soft); color: inherit; font-weight: 650; }
.site-search__empty { margin-top: clamp(22px, 4vw, 32px); padding-top: 20px; border-top: 2px solid var(--color-accent); }
.site-search__empty h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.25; }
.site-search__empty p { margin: 10px 0 14px; color: var(--color-muted); font-size: var(--step--1); line-height: 1.6; }
.site-search__suggestions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-search__suggestions a { display: flex; align-items: center; min-height: 44px; padding: 10px 15px; border: 1px solid var(--color-line); border-radius: 3px; color: var(--color-ink); text-decoration: none; }
.site-search__suggestions a:hover { border-color: var(--color-primary); }
.site-search__pagination { margin-top: clamp(24px, 4vw, 34px); }
.site-search__pagination ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.site-search__pagination a, .site-search__pagination span { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: 3px; color: var(--color-ink); text-decoration: none; }
.site-search__pagination a:hover { border-color: var(--color-primary); }
body.is-dark .site-search__header h1 { color: #fff4e8; }
body.is-dark .site-search__lead, body.is-dark .site-search__item-meta, body.is-dark .site-search__count, body.is-dark .site-search__empty p { color: #d5c0b3; }
body.is-dark .site-search__item-title a { color: #f3c96b; }
body.is-dark .site-search__item-title a:visited { color: #dcb8e6; }
body.is-dark .site-search__item-text, body.is-dark .site-search__count strong, body.is-dark .site-search__empty h2 { color: #edf2f7; }
body.is-dark .site-search__field input, body.is-dark .site-search__suggestions a { border-color: #4b5961; background: #1d282f; color: #fff4e8; }
body.is-dark .site-search__item, body.is-dark .site-search__pagination a, body.is-dark .site-search__pagination span { border-color: #3c4a52; }
body.is-dark .site-search__item mark, body.is-dark .site-search mark { background: #5a4415; color: #ffeec4; }


/* Rute perkara: penunjuk ke layanan otoritatif, bukan klaim hasil penelusuran. */
.site-search__case-route { min-width: 0; margin-top: clamp(22px, 4vw, 32px); padding: clamp(18px, 3vw, 24px); border: 1px solid var(--color-line); border-top: 3px solid var(--color-accent); background: var(--color-soft); overflow-wrap: anywhere; }
.site-search__case-route-kicker { margin: 0; color: var(--color-muted); font-size: var(--step--2); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-search__case-route h2 { margin: 6px 0 0; color: var(--color-primary-deep); font-family: Fraunces, Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.25; }
.site-search__case-route > p:not(.site-search__case-route-kicker) { margin: 10px 0 0; color: var(--color-ink); font-size: var(--step--1); line-height: 1.6; }
.site-search__case-route-links { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.site-search__case-route-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--color-line); border-radius: 3px; color: var(--color-primary); background: var(--color-surface); font-weight: 700; line-height: 1.35; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.site-search__case-route-links li > p { margin: 6px 0 0; color: var(--color-muted); font-size: var(--step--2); line-height: 1.5; }
.site-search__case-route-links a:hover { border-color: var(--color-primary); }
.site-search__case-route-secondary { font-size: var(--step--2) !important; }
.site-search__case-route-secondary a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body.is-dark .site-search__case-route h2, body.is-dark .site-search__case-route > p:not(.site-search__case-route-kicker) { color: #edf2f7; }
body.is-dark .site-search__case-route-links li > p { color: #d5c0b3; }
body.is-dark .site-search__case-route-kicker { color: #d5c0b3; }
body.is-dark .site-search__case-route-links a { border-color: #4b5961; color: #fff4e8; background: #172027; }
body.is-dark .site-search__case-route-secondary a { color: #fff4e8; }
/* AMPUH DIRECTORY 2026-07-13 */
.ampuh-directory { width: min(100%, 1180px); margin-inline: auto; color: var(--color-ink); background: var(--color-surface); font-family: var(--font-body); }
.ampuh-directory__header { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .72fr); min-height: 350px; overflow: clip; border-block: 1px solid var(--color-line); background: var(--color-soft); }
.ampuh-directory__header::after { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--color-ink) 9%, transparent) .6px, transparent .6px); background-size: 5px 5px; content: ""; opacity: .14; pointer-events: none; }
.ampuh-directory__hero-main { z-index: 1; display: grid; align-content: center; gap: 15px; padding: clamp(38px, 5vw, 64px) clamp(24px, 5vw, 68px); }
.ampuh-directory__hero-main > * { animation: ampuh-command-enter 420ms cubic-bezier(.16,1,.3,1) both; }
.ampuh-directory__hero-main > :nth-child(2) { animation-delay: 45ms; }
.ampuh-directory__hero-main > :nth-child(3) { animation-delay: 90ms; }
.ampuh-directory__hero-main > :nth-child(4) { animation-delay: 135ms; }
@keyframes ampuh-command-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ampuh-directory__kicker { margin: 0; color: var(--color-primary); font-size: var(--step--2); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.ampuh-directory__header h1 { max-width: 13ch; margin: 0; color: var(--color-primary-deep); font-family: var(--font-display); font-size: clamp(2.7rem, 5vw, 4.8rem); font-weight: 650; line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.content-primary .ampuh-directory__lede { max-width: 64ch; margin: 0; color: var(--color-muted); font-size: 1rem; line-height: 1.6; text-align: start; text-wrap: pretty; }
.ampuh-directory__hero-secondary { z-index: 1; position: relative; display: grid; align-content: end; gap: 5px; padding: 36px 40px; border-inline-start: 1px solid var(--color-line); color: var(--color-primary-deep); }
.ampuh-directory__hero-secondary p { margin: 0; color: var(--color-muted); font-size: var(--step--2); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ampuh-directory__hero-secondary strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.ampuh-directory__watermark { position: absolute; inset: 26px 28px auto auto; color: color-mix(in srgb, var(--color-primary) 10%, transparent); font-family: var(--font-display); font-size: clamp(4.8rem, 8.8vw, 7.5rem); font-weight: 700; line-height: 1; }
.ampuh-directory__drive, .ampuh-directory__tools button, .ampuh-directory [data-ampuh-toggle] { min-height: 44px; font: inherit; }
.ampuh-directory select { min-height: 44px; font: inherit; }
.ampuh-directory__hero-main > .ampuh-directory__drive { justify-self: start; display: inline-flex; align-items: center; padding: 12px 20px; border: 1px solid var(--color-primary); border-radius: var(--radius); color: var(--color-surface); background: var(--color-primary); font-weight: 800; text-decoration: none; transition: transform 180ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory__summary { display: grid; grid-template-columns: minmax(145px,auto) minmax(0,1fr); align-items: stretch; padding-inline: clamp(20px,5vw,64px); border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.ampuh-directory__summary h2 { align-self: center; margin: 0; padding-inline-end: 28px; color: var(--color-muted); font-size: var(--step--2); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.ampuh-directory__summary dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; }
.ampuh-directory__summary dl > div { position: relative; display: grid; align-content: center; gap: 2px; min-height: 74px; padding: 12px 22px; }
.ampuh-directory__summary dl > div::before { position: absolute; inset: 18px auto 18px 0; width: 1px; background: var(--color-line); content: ""; }
.ampuh-directory__summary dt { color: var(--color-muted); font-size: var(--step--3); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.ampuh-directory__summary dd { order: -1; margin: 0; color: var(--color-primary); font-family: var(--font-display); font-size: 1.55rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.ampuh-directory__tools { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: minmax(240px,1fr) auto; gap: 10px 14px; max-height: 220px; padding: 16px clamp(20px,5vw,64px); border-bottom: 1px solid var(--color-line); background: var(--color-surface); box-shadow: 0 8px 22px color-mix(in srgb, var(--color-ink) 7%, transparent); }
body.nav-stuck .ampuh-directory__tools { top: var(--nav-height, 56px); }
.ampuh-directory__search { display: grid; gap: 5px; }
.ampuh-directory__tools label { color: var(--color-primary-deep); font-size: var(--step--2); font-weight: 850; }
.ampuh-directory__tools input, .ampuh-directory__tools select { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--color-line); border-radius: 8px; padding: 9px 14px; color: var(--color-ink); background: var(--color-soft); }
.ampuh-directory__filter-nav { grid-column: 1/-1; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 8px; }
.ampuh-directory__filter-window { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.ampuh-directory__filter-rail { display: flex; gap: 7px; overflow-x: auto; padding-inline: 18px; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x proximity; }
.ampuh-directory__filter-rail::-webkit-scrollbar { display: none; }
.ampuh-directory__filter-rail button { flex: 0 0 auto; scroll-snap-align: start; }
.ampuh-directory__tools button { border: 1px solid var(--color-line); border-radius: 8px; padding: 7px 12px; color: var(--color-ink); background: var(--color-surface); cursor: pointer; transition: opacity 160ms cubic-bezier(.16,1,.3,1), transform 160ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory__tools button[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-surface); background: var(--color-primary); transform: translateY(-1px); }
.ampuh-directory__filter-arrow { display: grid; place-items: center; width: 44px; min-height: 44px !important; padding: 0 !important; color: var(--color-primary) !important; font-family: var(--font-display) !important; font-size: 1.4rem !important; }
.ampuh-directory__tools > [data-ampuh-close-all] { align-self: end; min-height: 46px; }
.ampuh-directory__result-bar { grid-column: 1/-1; display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 12px; }
.ampuh-directory__tools [data-ampuh-results] { min-height: 1.2em; margin: 0; color: var(--color-muted); font-size: var(--step--2); font-weight: 700; }
.ampuh-directory__tools [data-ampuh-clear-search] { min-height: 36px; padding: 4px 10px; color: var(--color-primary); font-size: var(--step--2); font-weight: 800; }
.ampuh-directory__gobi-select { display: none; }
.ampuh-directory__tree { padding: 16px clamp(20px,5vw,64px) 48px; background: var(--color-surface); }
.ampuh-directory [hidden] { display: none !important; }
.ampuh-directory [data-ampuh-panel].is-revealing { opacity: 0; transform: translateY(6px); transition: opacity 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory__gobi { overflow: clip; border: 1px solid var(--color-line); border-radius: 10px; margin-bottom: 10px; background: var(--color-surface); box-shadow: none; transition: opacity 200ms cubic-bezier(.16,1,.3,1), transform 200ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory__gobi:nth-child(even) { background: var(--color-soft); }
.ampuh-directory__gobi.is-expanded { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-line)); }
.ampuh-directory h2, .ampuh-directory h3, .ampuh-directory h4, .ampuh-directory h5 { margin: 0; }
.ampuh-directory [data-ampuh-toggle] { position: relative; width: 100%; border: 0; padding: 12px 48px 12px 16px; color: var(--color-ink); background: transparent; text-align: start; cursor: pointer; transition: transform 120ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory [data-ampuh-toggle]::before, .ampuh-directory [data-ampuh-toggle]::after { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 14px; height: 2px; border-radius: 999px; background: var(--color-primary); transform-origin: center; transition: opacity 180ms cubic-bezier(.16,1,.3,1), transform 180ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory [data-ampuh-toggle]::before { transform: translateY(-50%) rotate(90deg); }
.ampuh-directory [data-ampuh-toggle]::after { transform: translateY(-50%); }
.ampuh-directory [data-ampuh-toggle][aria-expanded="true"]::before { opacity: 0; transform: translateY(-50%) rotate(0deg); }
.ampuh-directory [data-ampuh-toggle]:active { transform: scale(.985); }
.ampuh-directory__gobi > h2 [data-ampuh-toggle] { display: grid; grid-template-columns: 78px minmax(0,1fr); align-items: center; min-height: 88px; padding-block: 14px; color: var(--color-primary-deep); font-weight: 850; }
.ampuh-directory__gobi-number { display: grid; place-items: center; align-self: stretch; border-inline-end: 1px solid var(--color-line); color: var(--color-primary); font-family: var(--font-display); font-size: 2.55rem; font-weight: 750; line-height: .8; }
.ampuh-directory__gobi-number small { font-family: var(--font-body); font-size: var(--step--3); font-weight: 900; letter-spacing: .16em; }
.ampuh-directory__gobi-number { transition: opacity 180ms cubic-bezier(.16,1,.3,1), transform 180ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory__gobi.is-expanded .ampuh-directory__gobi-number { transform: translateY(-2px); }
.ampuh-directory__gobi-title { padding-inline-start: 8px; font-size: 1.5rem; line-height: 1.18; letter-spacing: -.02em; }
.ampuh-directory__gobi > [data-ampuh-panel] { padding: 4px 18px 18px; background: var(--color-soft); }
.ampuh-directory__checklist { display: grid; grid-template-columns: 72px minmax(0,1fr) 190px; align-items: start; border-top: 1px solid var(--color-line); }
.ampuh-directory__subchecklist { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: start; border-top: 1px solid var(--color-line); }
.ampuh-directory__check-number, .ampuh-directory__sub-number { margin: 12px 10px 12px 0; padding: 8px 6px; border-radius: 6px; color: var(--color-primary); background: var(--color-accent-soft); font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; line-height: 1.2; text-align: center; transition: opacity 180ms cubic-bezier(.16,1,.3,1), transform 180ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory__checklist > h3, .ampuh-directory__subchecklist > h4 { min-width: 0; }
.ampuh-directory__checklist > h3 [data-ampuh-toggle], .ampuh-directory__subchecklist > h4 [data-ampuh-toggle] { min-height: 0; padding: 16px 48px 17px 4px; }
.ampuh-directory__check-title, .ampuh-directory__sub-title { display: block; max-width: 72ch; }
.ampuh-directory__check-title { font-size: 1.12rem; font-weight: 800; line-height: 1.45; }
.ampuh-directory__sub-title { font-size: 1rem; font-weight: 700; line-height: 1.52; }
.ampuh-directory__checklist > .ampuh-directory__drive, .ampuh-directory__checklist > .ampuh-directory__drive-unavailable { justify-self: end; margin: 14px 12px 0 0; padding: 8px; color: var(--color-primary); font-size: var(--step--1); font-weight: 800; line-height: 1.45; }
.ampuh-directory__sub-drive { grid-column: 2; justify-self: start; margin: -8px 0 12px 4px; }
.ampuh-directory__sub-drive .ampuh-directory__drive { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 8px; color: var(--color-primary); font-size: var(--step--1); font-weight: 800; }
.ampuh-directory__drive-unavailable { color: var(--color-muted); }
.ampuh-directory__checklist > [data-ampuh-panel], .ampuh-directory__subchecklist > [data-ampuh-panel] { grid-column: 1/-1; padding: 0 12px 14px; }
.ampuh-directory__files-heading { margin: 0; padding: 9px 12px; color: var(--color-muted); font-size: var(--step--2); font-weight: 800; }
.ampuh-directory__files { margin: 0; padding: 0; list-style: none; background: var(--color-surface); }
.ampuh-directory__subchecklist li { display: grid; grid-template-columns: 4.5rem minmax(0,1fr); min-width: 0; align-items: baseline; padding: 11px 12px; border-top: 1px solid var(--color-line); color: var(--color-ink); font-size: var(--step--1); line-height: 1.5; overflow-wrap: anywhere; transition: opacity 180ms cubic-bezier(.16,1,.3,1), transform 180ms cubic-bezier(.16,1,.3,1); }
.ampuh-directory__subchecklist li:hover, .ampuh-directory__subchecklist li:focus-within { background: var(--color-accent-soft); transform: translateX(2px); }
.ampuh-directory__file-name { min-width: 0; font-weight: 650; }
.ampuh-directory__meta { display: block; margin-top: 7px; color: var(--color-muted); font-size: var(--step--2); font-weight: 600; line-height: 1.45; }
.ampuh-directory__file-icon { display: inline-flex; width: max-content; min-width: 3.5rem; padding: 2px 6px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-primary); background: var(--color-soft); font-size: var(--step--3); font-weight: 900; letter-spacing: .04em; }
.ampuh-directory__match { border-radius: 3px; padding-inline: 2px; color: inherit; background: var(--color-accent-soft); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 45%, transparent); }
.ampuh-directory__empty { color: var(--color-muted); }
.ampuh-directory a:focus-visible, .ampuh-directory button:focus-visible, .ampuh-directory input:focus-visible, .ampuh-directory select:focus-visible { z-index: 2; outline: 3px solid var(--color-accent); outline-offset: 2px; }
.ampuh-directory__hero-main > .ampuh-directory__drive:hover, .ampuh-directory__hero-main > .ampuh-directory__drive:focus-visible { color: var(--color-surface); background: var(--color-primary-dark); transform: translateY(-2px); }
.ampuh-directory [data-ampuh-toggle]:hover { background: var(--color-accent-soft); }
.ampuh-directory__checklist > .ampuh-directory__drive:hover, .ampuh-directory__checklist > .ampuh-directory__drive:focus-visible { color: var(--color-primary-dark); background: var(--color-accent-soft); }
.ampuh-directory__sub-drive .ampuh-directory__drive:hover, .ampuh-directory__sub-drive .ampuh-directory__drive:focus-visible { color: var(--color-primary-dark); background: var(--color-accent-soft); }
body.is-dark .ampuh-directory { color: var(--color-ink); }
body.is-dark .ampuh-directory__header, body.is-dark .ampuh-directory__tools, body.is-dark .ampuh-directory__summary, body.is-dark .ampuh-directory__tree, body.is-dark .ampuh-directory__gobi, body.is-dark .ampuh-directory__files { background: var(--color-surface); }
body.is-dark .ampuh-directory__header h1 { color: var(--color-ink); }
body.is-dark .ampuh-directory__hero-main > .ampuh-directory__drive { color: var(--color-ink); }
body.is-dark .ampuh-directory__hero-main > .ampuh-directory__drive:hover, body.is-dark .ampuh-directory__hero-main > .ampuh-directory__drive:focus-visible { color: var(--color-ink); background: var(--color-primary-dark); }
@media (max-width: 760px) {
  .ampuh-directory { width: 100%; overflow: clip; }
  .ampuh-directory__header { grid-template-columns: minmax(0,1fr); min-height: 300px; max-height: none; }
  .ampuh-directory__hero-main { padding: 26px 20px; }
  .ampuh-directory__header h1 { font-size: clamp(2.55rem, 13vw, 3.65rem); }
  .content-primary .ampuh-directory__lede { max-width: 32ch; font-size: var(--step--1); line-height: 1.5; }
  .ampuh-directory__hero-main > .ampuh-directory__drive { width: 100%; justify-content: center; padding-inline: 14px; line-height: 1.35; text-align: center; }
  .ampuh-directory__hero-secondary { position: absolute; inset: 0; border: 0; padding: 16px; pointer-events: none; }
  .ampuh-directory__hero-secondary p, .ampuh-directory__hero-secondary strong { display: none; }
  .ampuh-directory__summary { grid-template-columns: 1fr; padding: 10px 16px; }
  .ampuh-directory__summary h2 { padding: 0 0 7px; }
  .ampuh-directory__summary dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ampuh-directory__summary dl > div { min-height: 58px; padding: 7px 10px; }
  .ampuh-directory__tools { top: 0; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; max-height: 220px; padding: 8px 16px; }
  body.nav-stuck .ampuh-directory__tools { top: 56px; }
  .ampuh-directory__filter-nav { display: none; }
  .ampuh-directory__gobi-select { grid-column: 1/-1; display: grid; gap: 4px; }
  .ampuh-directory__tools [data-ampuh-results] { min-height: 0; }
  .ampuh-directory__result-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .ampuh-directory__tools [data-ampuh-clear-search] { white-space: nowrap; }
  .ampuh-directory__gobi, .ampuh-directory__checklist, .ampuh-directory__subchecklist { scroll-margin-top: 280px; }
  .ampuh-directory__tree { padding: 8px 12px 32px; }
  .ampuh-directory__gobi > h2 [data-ampuh-toggle] { grid-template-columns: 60px minmax(0,1fr); min-height: 80px; max-height: none; padding: 10px 42px 10px 8px; }
  .ampuh-directory__gobi-number { font-size: 2rem; }
  .ampuh-directory__gobi-title { font-size: 1.22rem; line-height: 1.22; letter-spacing: -.012em; }
  .ampuh-directory__checklist { grid-template-columns: 56px minmax(0,1fr); }
  .ampuh-directory__subchecklist { grid-template-columns: 52px minmax(0,1fr); }
  .ampuh-directory__check-number, .ampuh-directory__sub-number { margin: 10px 8px 10px 0; padding: 7px 4px; font-size: .96rem; }
  .ampuh-directory__checklist > .ampuh-directory__drive, .ampuh-directory__checklist > .ampuh-directory__drive-unavailable { grid-column: 2; justify-self: start; margin: 0 0 12px 4px; font-size: var(--step--1); }
  .ampuh-directory [data-ampuh-toggle], .ampuh-directory__subchecklist li { overflow-wrap: anywhere; word-break: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .ampuh-directory *,
  .ampuh-directory *::before,
  .ampuh-directory *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .ampuh-directory__hero-main > * { animation: none !important; }
  .ampuh-directory [data-ampuh-panel].is-revealing { opacity: 1; transform: none; }
  .ampuh-directory__hero-main > .ampuh-directory__drive:hover,
  .ampuh-directory__hero-main > .ampuh-directory__drive:focus-visible { transform: none; }
}
/* END AMPUH DIRECTORY 2026-07-13 */

/* === Unified inner-page dark mode, 2026-07-15 === */
body.is-dark {
  --dark-content-surface: #19232b;
  --dark-content-raised: #222d35;
  --dark-content-warm: #302923;
  --dark-content-line: #46515a;
  --dark-content-accent: #f3c96b;
}

body.is-dark .content-primary :is(h1, h2, h3, h4) {
  color: var(--dark-content-accent);
}

body.is-dark .content-primary :is(a, .svc-more) {
  color: var(--dark-content-accent);
}

body.is-dark .content-primary :is(p, li, dd, figcaption, label) {
  color: var(--color-ink);
}
body.is-dark .content-primary .svc-cta :is(h2, p) {
  color: #fff8ed;
}

body.is-dark .content-primary .svc-cta a.svc-btn-gold,
body.is-dark .content-primary .svc-cta a.svc-btn-gold:hover,
body.is-dark .content-primary .svc-cta a.svc-btn-gold:focus-visible {
  background: #d9ad3e;
  color: #2f140e;
}

body.is-dark .content-primary .svc-cta a.svc-btn-line,
body.is-dark .content-primary .svc-cta a.svc-btn-line:hover,
body.is-dark .content-primary .svc-cta a.svc-btn-line:focus-visible {
  border-color: rgba(255, 248, 237, 0.72);
  color: #fff8ed;
}


body.is-dark .content-primary :is(input, select, textarea) {
  border-color: var(--dark-content-line);
  color: var(--color-ink);
  background: #101820;
  color-scheme: dark;
}

body.is-dark :is(.sejarah-page, .tupoksi-page, .visimisi-page, .struktur-page) {
  color: var(--color-ink);
}

body.is-dark :is(.sejarah-hero-copy, .sejarah-timeline article, .sejarah-body-card, .sejarah-source-box,
  .visimisi-hero-card, .visimisi-illustration, .visimisi-mission-section, .visimisi-values-card,
  .struktur-chart-card, .struktur-chart-link) {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
  color: var(--color-ink);
}

body.is-dark :is(.tupoksi-hero-card, .tupoksi-process article, .tupoksi-panel,
  .tupoksi-panel-primary, .tupoksi-function-list div, .tupoksi-illustration) {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
  color: var(--color-ink);
}

body.is-dark :is(.tupoksi-kicker, .tupoksi-panel-label, .tupoksi-process > article > span,
  .sejarah-kicker, .visimisi-kicker, .struktur-kicker, .content-note) {
  border-color: rgba(243, 201, 107, 0.34);
  background: rgba(243, 201, 107, 0.14);
  color: var(--dark-content-accent);
}

body.is-dark :is(.tupoksi-illustration figcaption, .visimisi-illustration figcaption) {
  border-color: var(--dark-content-line);
  background: var(--dark-content-warm);
  color: #d5dde4;
}

body.is-dark .content-primary :is(.tupoksi-hero-card h2, .tupoksi-panel h3,
  .tupoksi-function-list strong, .sejarah-page h2, .visimisi-page h2,
  .visimisi-page h3, .struktur-page h2, .struktur-page h3) {
  color: var(--dark-content-accent);
}

body.is-dark .ampuh-directory {
  --ampuh-paper: var(--dark-content-surface);
  --ampuh-paper-raised: var(--dark-content-raised);
  --ampuh-ink: var(--color-ink);
  --ampuh-muted: #c7d0d9;
}

body.is-dark .ampuh-directory :is(.ampuh-directory__kicker, .ampuh-directory__summary dd,
  .ampuh-directory__gobi-number, .ampuh-directory__filter-arrow) {
  color: var(--dark-content-accent);
}

body.is-dark .ampuh-directory :is(.ampuh-directory__hero-secondary strong,
  .ampuh-directory__tools label) {
  color: var(--color-ink);
}
body.is-dark .content-primary .ampuh-directory .ampuh-directory__filter-arrow {
  color: var(--dark-content-accent) !important;
}

body.is-dark .sejarah-page :is(.sejarah-fact-grid strong, .sejarah-source-box strong) {
  color: var(--dark-content-accent);
}

body.is-dark .sejarah-page .sejarah-source-box a {
  border-color: var(--dark-content-line);
  background: var(--dark-content-surface);
  color: var(--dark-content-accent);
}

body.is-dark .visimisi-page .visimisi-section-heading p,
body.is-dark .visimisi-page .visimisi-values-card span {
  border-color: rgba(243, 201, 107, 0.34);
  background: rgba(243, 201, 107, 0.14);
  color: var(--dark-content-accent);
}

body.is-dark .content-primary .com-content-article__body blockquote {
  border-color: rgba(243, 201, 107, 0.38);
  background: var(--dark-content-warm);
  color: var(--color-ink);
}

body.is-dark .content-primary .com-content-article__body > p:has(> img:only-child) {
  background: transparent;
}
body.is-dark .struktur-hero-card {
  background:
    radial-gradient(circle at top right, rgba(243, 201, 107, 0.1), transparent 36%),
    linear-gradient(135deg, var(--dark-content-raised), var(--dark-content-surface));
}

body.is-dark .struktur-chart-heading {
  border-color: var(--dark-content-line);
  background: linear-gradient(180deg, var(--dark-content-warm), var(--dark-content-raised));
}

body.is-dark .struktur-chart-heading p {
  color: var(--dark-content-accent);
}

body.is-dark .struktur-chart-link {
  background:
    linear-gradient(45deg, rgba(243, 201, 107, 0.035) 25%, transparent 25%, transparent 75%, rgba(243, 201, 107, 0.035) 75%),
    var(--dark-content-surface);
  background-size: 18px 18px;
}
body.is-dark .sejarah-fact-grid > div,
body.is-dark .visimisi-mission-grid article {
  border-color: var(--dark-content-line);
  background: linear-gradient(180deg, var(--dark-content-warm), var(--dark-content-raised));
  color: var(--color-ink);
}

body.is-dark .app-links a {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
  color: var(--color-ink);
  box-shadow: none;
}

body.is-dark .app-links .app-info strong,
body.is-dark .app-links a:hover .app-info strong,
body.is-dark .app-links a:focus-visible .app-info strong {
  color: var(--dark-content-accent);
}

body.is-dark .app-links .app-info span {
  color: #d5dde4;
}

body.is-dark .app-links a:hover,
body.is-dark .app-links a:focus-visible {
  border-color: rgba(243, 201, 107, 0.72);
  background: #29353e;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}


/* INTEGRITY HERO SLIDE 2026-07-18 */
.home-slider .hero-slide-integrity {
  width: 100%;
  max-width: none;
  align-self: center;
}

.hero-slide-integrity__link {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 16px;
  background: #123629;
  box-shadow: 0 30px 70px rgba(12, 6, 3, 0.42);
}

.hero-slide-integrity__link:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.hero-slide-integrity__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  background: #f2f0eb;
}

@media (min-width: 761px) {
  .home-slider .hero-slide-integrity {
    width: min(680px, 100%);
    margin-inline: auto;
  }
}

@media (min-width: 1201px) {
  .home-slider .hero-slide-integrity {
    top: -24px;
  }
}

@media (max-width: 760px) {
  .home-slider .hero-slide-integrity {
    align-self: start;
  }

  .hero-slide-integrity__link {
    border-radius: 12px;
  }

  .hero-slide-integrity__image {
    height: auto;
    aspect-ratio: 1672 / 941;
  }
}
body.is-dark .hero-news-panel .hero-tabs button {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
  color: #d5dde4;
}

body.is-dark .hero-news-panel .hero-tabs button.is-active {
  border-color: var(--dark-content-accent);
  background: #7a2518;
  color: #fff8ed;
}

body.is-dark .hero-news-panel .hero-tab-list a,
body.is-dark .hero-news-panel .hero-tab-list a.is-preview {
  border-color: transparent;
  background: transparent;
  color: var(--color-ink);
}

body.is-dark .hero-news-panel .hero-tab-list a:is(:hover, :focus-visible, .is-preview) {
  border-color: var(--dark-content-line);
  background: var(--dark-content-raised);
}

body.is-dark .hero-news-panel .hero-tab-list time {
  background: rgba(243, 201, 107, 0.14);
  color: var(--dark-content-accent);
}

body.is-dark .hero-news-panel :is(.hero-item-title, .hero-item-body) {
  color: var(--color-ink);
}
@media (min-width: 1101px) {
  .main-menu li > ul {
    display: none;
  }

  .main-menu li:hover > ul,
  .main-menu li:focus-within > ul,
  .main-menu li.submenu-open > ul {
    display: block;
  }
}
/* END unified inner-page dark mode */

/* Ultra-wide containment: preserve composition under extreme zoom-out. */
@media (min-width: 1921px) {
  body {
    background: #e9e3da;
  }

  .site-header,
  .hero,
  .quick-links,
  .site-main,
  .home-grid,
  .home-juknis-layout,
  .site-footer {
    max-width: 1920px;
    margin-inline: auto;
  }

  .site-header,
  .hero,
  .site-main,
  .home-juknis-layout,
  .site-footer {
    box-shadow: 0 0 48px rgba(38, 24, 19, 0.08);
  }

  body.nav-stuck .main-menu {
    right: auto;
    left: 50%;
    width: 1920px;
    margin-left: -960px;
  }
}

/* COMPREHENSIVE MOBILE POLISH 2026-07-18 */
.mobile-menu-filter-wrap,
.mobile-rail-status,
.hero-slide-integrity__cta { display: none; }

@media (max-width: 760px) {
  .quick-links { display: none; }
  body.is-home .floating-whatsapp { display: none; }

  .hero-cinema .hero-slide { min-height: 330px; align-content: center; }
  .hero-cinema .hero-slide-integrity { min-height: 330px; align-content: center; }
  .hero-cinema .hero-slides { min-height: 540px; }
  .hero-cinema .hero-slide { height: 100%; }
  .hero-slide-integrity__link { position: relative; }
  .hero-slide-integrity__cta { position: absolute; right: 10px; bottom: 10px; display: inline-flex; min-height: 44px; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 12px; background: rgba(47, 20, 14, .88); color: #fff8ed; font-size: var(--step--2); font-weight: 800; }
  .hero-nav { display: none; }

  .mobile-menu-filter-wrap { display: grid; gap: 5px; margin-bottom: 10px; }
  .mobile-menu-filter-wrap > label { color: var(--nav-drawer-text); font-size: var(--step--2); font-weight: 800; }
  .mobile-menu-filter-control { display: grid; grid-template-columns: minmax(0, 1fr) 44px; overflow: hidden; border: 1px solid var(--nav-drawer-line); border-radius: 10px; background: var(--nav-drawer-surface); }
  .mobile-menu-filter-control input { width: 100%; min-height: 44px; border: 0; padding: 8px 11px; color: var(--nav-drawer-text); background: transparent; font: inherit; font-size: var(--step--2); }
  .mobile-menu-filter-control button { min-width: 44px; min-height: 44px; border: 0; color: var(--nav-drawer-text); background: transparent; font-size: 1.25rem; }
  .mobile-menu-empty { margin: 4px 0 8px; padding: 14px; border-radius: 10px; color: var(--nav-drawer-muted); background: var(--nav-drawer-soft); font-size: var(--step--2); text-align: center; }
  .mobile-menu-scroll > ul > li[hidden] { display: none !important; }

  .youtube-showcase-rail,
  .home-juknis-sidebar { scrollbar-width: none; }
  .youtube-showcase-rail::-webkit-scrollbar,
  .home-juknis-sidebar::-webkit-scrollbar { display: none; }
  .youtube-showcase-rail > li { width: min(68vw, 230px); }
  .youtube-showcase-rail { display: flex; grid-auto-flow: initial; grid-auto-columns: initial; grid-template-columns: none; gap: 10px; }
  .youtube-showcase-rail > li { flex: 0 0 calc(100% - 34px); width: auto; min-width: 0; }
  .youtube-showcase-rail > li[hidden] { display: none !important; }
  .youtube-showcase-item { width: 100%; min-width: 0; }
  .announcement-feature__excerpt { -webkit-line-clamp: 1; }
  .announcement-feature__copy { padding-block: 16px 18px; }

  .mobile-rail-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--color-muted); font-size: var(--step--2); }
  .mobile-rail-status output { flex: none; color: var(--color-primary); font-weight: 850; }
  .home-juknis-sidebar > .mobile-rail-status { position: sticky; left: 0; flex: 0 0 calc(100vw - 32px); order: -1; min-height: 28px; padding-right: 16px; scroll-snap-align: start; }
  .home-juknis-sidebar { position: relative; align-items: flex-start; padding-top: 38px; }
  .home-juknis-sidebar > .module-card,
  .home-juknis-sidebar > .instagram-cache { align-self: flex-start; height: auto; min-height: 0; }
  .home-juknis-sidebar > .mobile-rail-status { position: absolute; top: 4px; left: 0; width: calc(100vw - 32px); min-height: 28px; padding-right: 16px; pointer-events: none; }
  body.is-home .back-to-top { right: max(12px, env(safe-area-inset-right)); bottom: calc(var(--mobile-bar-height) + 14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .youtube-showcase-count { margin-top: -2px; }
  .mobile-rail-hint { min-width: 0; color: inherit; font-size: inherit; }

  .main-menu li > a, .main-menu li > span,
  .main-menu li ul a, .main-menu li ul span { font-size: var(--step--2); }
  .youtube-showcase-item__copy strong,
  .youtube-showcase-item__copy span,
  .announcement-feature time { font-size: var(--step--2); }
  .mobile-quick-actions a { font-size: var(--step--2); }

  .announcement-showcase__actions { justify-content: center; width: 100%; text-align: center; }
  .announcement-showcase__channel-link { justify-content: center; }
  .section-action { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 10px 16px; line-height: 1.2; text-align: center; }
  .hero-tabs,
  .instansi-tabbar { display: flex; flex-wrap: wrap; justify-content: center; }
  .instansi-tabbar { width: max-content; max-width: 100%; margin-inline: auto; }
  .hero-slider-dots,
  .role-carousel-dots,
  .instagram-slider-dots { justify-content: center; }

  @media (hover: none) {
    a:active, button:active { transform: scale(.985); }
  }

  @media (prefers-reduced-motion: reduce) {
    a:active, button:active { transform: none; }
  }

  @supports (font-size: 200%) {
    .main-menu-list { width: min(96vw, 400px); }
    .mobile-menu-footer { position: static; }
    .main-menu li > a, .main-menu li > span { overflow-wrap: anywhere; }
  }
  .footer-link-section a,
  .footer-social .social-link,
  .footer-contact-item a { min-height: 44px; }
}

/* HOMEPAGE VISUAL CONSISTENCY 2026-07-18 */
:root {
  --home-radius-control: 8px;
  --home-radius-card: 12px;
  --home-radius-overlay: 16px;
  --home-shadow-interactive: 0 8px 24px rgba(47, 20, 14, .07);
  --home-shadow-overlay: 0 24px 64px rgba(35, 16, 12, .22);
  --home-section-gap: clamp(28px, 3vw, 40px);
  --home-rule: rgba(103, 22, 7, .16);
  --home-paper: #fffdf9;
  --home-wash: #f8f1e8;
}

body.is-home .home-juknis-layout {
  gap: var(--home-section-gap);
  background: var(--home-wash);
}

body.is-home .home-juknis-main,
body.is-home .home-juknis-sidebar {
  gap: var(--home-section-gap);
}

body.is-home .home-juknis-main > .module-card {
  border-block: 1px solid var(--home-rule);
  border-inline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.is-home .home-juknis-main > :is(.sipp-schedule-board, .instansi-news-board) {
  border: 1px solid var(--home-rule);
  border-radius: var(--home-radius-card);
  background: var(--home-paper);
}

body.is-home .home-juknis-sidebar > .module-card,
body.is-home .home-juknis-sidebar > .instagram-cache {
  border: 1px solid var(--home-rule);
  border-radius: var(--home-radius-card);
  background: var(--home-paper);
  box-shadow: var(--home-shadow-interactive);
}

body.is-home :is(.module-card, .facility-card, .announcement-feature, .youtube-showcase, .instagram-cache) {
  --radius-card: var(--home-radius-card);
}

body.is-home :is(.search-overlay-panel, .maklumat-lightbox figure, .access-panel-body, .main-menu-list) {
  border-radius: var(--home-radius-overlay);
  box-shadow: var(--home-shadow-overlay);
}

body.is-home :is(input, select, textarea, .section-action, .hero-actions a, .announcement-showcase__channel-link) {
  border-radius: var(--home-radius-control);
}

body.is-home .section-kicker {
  margin-bottom: 7px;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .08em;
}

body.is-home .section-kicker::before {
  width: 16px;
  height: 1px;
}

body.is-home .section-head h2,
body.is-home .module-card h2 {
  text-wrap: balance;
}

body.is-home .section-desc {
  max-width: 68ch;
  color: var(--color-muted);
  line-height: 1.65;
  text-wrap: pretty;
}

body.is-home .module-card > h2:first-child::before,
body.is-home .module-card > .custom > h2:first-child::before,
body.is-home .module-card > .module-title::before {
  display: none;
}

body.is-home .module-card.facility-band {
  border: 0;
  border-radius: var(--home-radius-card);
  background: #331b16;
  box-shadow: none;
}

body.is-home .module-card.facility-band .facility-card {
  border-color: rgba(255, 248, 238, .2);
  border-radius: var(--home-radius-control);
  background: rgba(255, 248, 238, .055);
  box-shadow: none;
}

body.is-home .module-card.facility-band .facility-card:is(:hover, :focus-visible) {
  border-color: rgba(243, 201, 107, .58);
  background: rgba(255, 248, 238, .1);
}

body.is-home .home-section-divider {
  display: none;
}

body.is-home .mobile-start-grid a {
  border-radius: var(--home-radius-card);
  box-shadow: none;
}

body.is-home .mobile-start-grid a:first-child {
  background: var(--color-primary);
}

body.is-dark.is-home .mobile-start-grid a:not(:first-child) {
  border-color: var(--home-rule);
  color: var(--color-ink);
  background: var(--home-paper);
}

body.is-dark.is-home .mobile-start-grid a:not(:first-child) small {
  color: var(--color-muted);
}

body.is-dark.is-home {
  --home-rule: rgba(243, 201, 107, .18);
  --home-paper: #172027;
  --home-wash: #0f151a;
  --home-shadow-interactive: none;
}

body.is-dark.is-home :is(.announcement-feature__eyebrow, .youtube-showcase__eyebrow, .youtube-showcase-count output) {
  color: #f3c96b;
}

body.is-dark.is-home .mobile-section-heading :is(p, h2),
body.is-dark.is-home .announcement-showcase .section-kicker,
body.is-dark.is-home .announcement-showcase__actions > :is(.section-action, .announcement-showcase__channel-link) {
  color: #f3c96b;
}

body.is-dark.is-home .module-card.facility-band {
  background: #251511;
}

body.is-dark.is-home .home-juknis-layout a:not(.section-action):not(.is-primary) {
  color: #f3c96b;
  text-decoration-color: rgba(243, 201, 107, .5);
}

body.is-dark.is-home .home-juknis-layout a:not(.section-action):not(.is-primary):is(:hover, :focus-visible) {
  color: #ffe29a;
  text-decoration-color: currentColor;
}




body.is-home .announcement-showcase__actions > :is(.section-action, .announcement-showcase__channel-link) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--home-rule);
  border-radius: var(--home-radius-control);
  padding: 10px 16px;
  background: var(--home-paper);
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

body.is-home .announcement-showcase__actions > :is(.section-action, .announcement-showcase__channel-link):is(:hover, :focus-visible) {
  border-color: var(--color-accent);
  background: var(--home-paper-raised);
  text-decoration: none;
}

body.is-home .announcement-showcase__channel-link > span {
  display: inline-grid;
  width: 1em;
  place-items: center;
  line-height: 1;
}
body.is-home .home-juknis-main > .announcement-showcase {
  border: 1px solid var(--home-rule);
  border-radius: var(--home-radius-card);
  background: var(--home-paper);
  box-shadow: none;
}

body.is-home .announcement-showcase :is(.announcement-feature, .youtube-showcase) {
  border: 0;
  border-radius: var(--home-radius-control);
  background: transparent;
}

body.is-home .announcement-showcase .announcement-feature {
  border-right: 1px solid var(--home-rule);
  border-radius: 0;
  padding-right: 20px;
}

body.is-home .announcement-showcase .youtube-showcase {
  border-radius: 0;
  padding-left: 20px;
}

body.is-dark.is-home .home-juknis-main > .announcement-showcase {
  background: var(--home-paper);
}

@media (max-width: 1180px) {
  body.is-home .announcement-showcase .announcement-feature {
    border-right: 0;
    border-bottom: 1px solid var(--home-rule);
    padding-right: 14px;
    padding-bottom: 24px;
  }

  body.is-home .announcement-showcase .youtube-showcase {
    padding-top: 24px;
    padding-left: 14px;
  }
}
body.is-home .announcement-feature,
body.is-home .youtube-showcase {
  height: 100%;
  padding: 14px;
  border: 1px solid var(--home-rule);
  border-radius: var(--home-radius-card);
  background: var(--home-paper);
  box-shadow: none;
}

body.is-home .announcement-feature {
  grid-template-rows: auto auto 1fr;
}

body.is-home .announcement-feature__eyebrow {
  padding: 0;
}

body.is-home .announcement-feature__media {
  min-height: 0;
  margin: 8px 0 0;
  margin-inline: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--home-radius-control);
}

body.is-home .announcement-feature__media img {
  object-fit: contain;
  object-position: center top;
  transform: none;
}

body.is-dark.is-home .announcement-feature__media {
  background: #cfd3d6;
}

body.is-dark.is-home .announcement-feature__media img {
  filter: brightness(.82) contrast(.96);
}

body.is-home .announcement-feature__copy {
  gap: 8px;
  padding: 16px 2px 4px;
}

body.is-home .announcement-feature strong {
  max-width: 30ch;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.25;
}

body.is-home .announcement-feature:is(:hover, :focus-visible) {
  transform: none;
  border-color: var(--color-accent);
  box-shadow: var(--home-shadow-interactive);
}

body.is-home .announcement-feature:is(:hover, :focus-visible) img {
  transform: none;
}


body.is-home .home-juknis-main > .module-card:has(.maklumat-compact) {
  border: 1px solid var(--home-rule);
  border-radius: var(--home-radius-card);
  background: var(--home-paper);
  box-shadow: none;
}

body.is-home .module-card:has(.maklumat-compact) > .section-kicker {
  margin-bottom: 18px;
}

body.is-home .maklumat-compact-docs {
  gap: clamp(20px, 3vw, 32px);
}

body.is-home .maklumat-compact-doc {
  grid-template-columns: minmax(112px, 128px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

body.is-home .maklumat-compact .maklumat-doc {
  align-self: start;
}

body.is-home .maklumat-compact-doc h3 {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.25;
}

@media (max-width: 760px) {
  body.is-home .maklumat-compact-docs {
    grid-template-columns: 1fr;
  }

  body.is-home .maklumat-compact-doc {
    grid-template-columns: minmax(104px, 120px) minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  body.is-home .maklumat-compact-doc {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }
}
@media (min-width: 1181px) {
  body.is-home .announcement-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}
@media (min-width: 761px) {
  body.is-home .home-juknis-main > .module-card {
    padding-block: clamp(24px, 2vw, 30px);
  }

  body.is-home .home-juknis-main > :is(.module-card, .sipp-schedule-board, .instansi-news-board) {
    width: 100%;
    padding-inline: 24px;
  }

  body.is-home .home-map-card {
    width: calc(100% + 48px);
    max-width: none;
    margin-inline: -24px;
  }
}

@media (max-width: 760px) {
  body.is-home .home-juknis-layout {
    gap: 22px;
    padding-block: 24px 40px;
  }

  body.is-home .mobile-start-here {
    padding-bottom: 24px;
  }

  body.is-home .home-juknis-main {
    gap: 22px;
  }

  body.is-home .home-juknis-sidebar {
    gap: 20px;
  }

  body.is-home :is(.section-desc, .mobile-start-grid small, .mobile-rail-status, .youtube-showcase-item__state, .instansi-updated) {
    font-size: max(.78rem, 14px);
    line-height: 1.5;
  }

  body.is-home .module-card h2 {
    font-size: clamp(1.3rem, 6vw, 1.65rem);
    line-height: 1.15;
  }


  body.is-home .home-juknis-main > :is(.module-card, .sipp-schedule-board, .instansi-news-board) {
    width: 100%;
    padding-inline: 16px;
  }

  body.is-home .home-juknis-main > .module-card {
    padding-block: 18px;
  }



  body.is-home .announcement-showcase .youtube-showcase {
    border-bottom: 1px solid var(--home-rule);
    padding: 14px 14px 24px;
  }

  body.is-home .announcement-showcase .announcement-feature {
    border-bottom: 0;
    padding: 24px 14px 14px;
  }
  body.is-home .home-juknis-sidebar > .module-card,
  body.is-home .home-juknis-sidebar > .instagram-cache {
    box-shadow: none;
  }

  body.is-home .mobile-quick-actions a {
    min-width: 0;
    overflow: hidden;
  }

  body.is-home .mobile-quick-actions a > span {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.15;
  }
}


/* TRANSPARENCY SUBMENU HIERARCHY 2026-07-18 */
@media (min-width: 1101px) {
  .main-menu > .main-menu-list .mobile-menu-scroll > ul > li > ul {
    width: 280px;
  }

  .main-menu > .main-menu-list .mobile-menu-scroll > ul > li > ul > li > a {
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px;
    text-align: left;
    line-height: 1.35;
    white-space: normal;
  }

  .main-menu > .main-menu-list .mobile-menu-scroll > ul > li > ul > .mobile-menu-summary-item > a {
    background: rgba(255, 255, 255, .08);
    font-weight: 750;
  }

  .main-menu > .main-menu-list .mobile-menu-scroll > ul > li > ul > .mobile-menu-group-label {
    display: block;
    margin: 8px 14px 2px;
    padding: 10px 6px 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    color: #f3dca6;
    font-size: var(--step--2);
    font-weight: 850;
    letter-spacing: .075em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .main-menu li ul a {
    justify-content: flex-start;
    padding-inline: 14px 12px;
    text-align: left;
  }

  .main-menu li ul .mobile-menu-summary-link {
    justify-content: flex-start;
    text-align: left;
  }

  .mobile-menu-group-label {
    color: var(--nav-drawer-accent);
    text-align: left;
  }
}

@media (max-width: 760px) {
  body.is-home .instansi-tabbar {
    justify-content: flex-start;
  }
}


/* END TRANSPARENCY SUBMENU HIERARCHY 2026-07-18 */
/* END HOMEPAGE VISUAL CONSISTENCY 2026-07-18 */

/* === HERO UI POLISH 2026-07-25 =============================================
   Sembilan perbaikan pada slider tiga slide, tanpa mengubah strukturnya.     */

/* --- Hierarki kartu berita ---
   Sebelumnya nama section 36px sementara judul berita yang diklik cuma 14px,
   dan kutipan 12px - selisih judul-kutipan hanya 2px, jadi mata tidak
   menemukan mana yang harus dibaca lebih dulu. Kicker "Informasi Terkini"
   dibuang dari markup karena h2 di bawahnya mengatakan hal yang sama.        */
.home-slider .hero-news-panel h2 {
  margin-bottom: 2px;
  font-size: clamp(1.35rem, 1.9vw, 1.72rem);
  line-height: 1.14;
}

.home-slider .hero-tab-list .hero-item-title {
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
}

.home-slider .hero-tab-list .hero-item-excerpt {
  color: rgba(47, 40, 36, 0.62);
  font-size: var(--step--2);
  font-weight: 400;
}

/* Target sentuh tab dinaikkan dari 35px. */
.home-slider .hero-tabs button {
  min-height: 44px;
  padding-inline: 20px;
}

/* --- Thumbnail per item, hanya mobile ---
   Di bawah 900px panel pratinjau besar disembunyikan, jadi daftarnya jadi teks
   polos tanpa satu gambar pun. Di desktop thumbnail tidak perlu: pratinjau
   besar di kanan sudah menampilkan foto item yang sedang disorot.            */
.hero-item-thumb {
  display: none;
}

@media (max-width: 900px) {
  .home-slider .hero-tab-list a {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-items: start;
  }

  .home-slider .hero-tab-list .hero-item-thumb {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: rgba(47, 40, 36, 0.08);
  }

  .home-slider .hero-tab-list .hero-item-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-slider .hero-tab-list time {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  .home-slider .hero-tab-list .hero-item-body {
    grid-column: 2;
    grid-row: 2;
  }

  /* Thumbnail menambah tinggi tiap baris, dan dengan kutipan dua baris kartunya
     tumbuh sampai menabrak kontrol slider di bawahnya. Judul sudah 16px dan
     jelas dominan, jadi kutipan cukup satu baris sebagai penunjang. */
  .home-slider .hero-tab-list .hero-item-excerpt {
    min-height: 0;
    max-height: 1.4em;
  }
}

/* --- Poster Zona Integritas: dipajang, bukan ditempel --- */
.home-slider .hero-slide-integrity__link {
  border-color: rgba(226, 185, 79, 0.55);
  box-shadow: 0 26px 64px rgba(10, 5, 3, 0.52), 0 0 0 1px rgba(12, 6, 3, 0.35);
}

/* Petunjuk bahwa poster bisa dibuka. Di desktop CTA-nya `display:none`,
   jadi tidak ada afordansi sama sekali; sekarang muncul saat hover atau
   fokus keyboard. */
@media (min-width: 761px) {
  .home-slider .hero-slide-integrity__link {
    position: relative;
  }

  .home-slider .hero-slide-integrity__cta {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 9px 15px;
    background: rgba(28, 12, 9, 0.9);
    color: var(--hero-cream);
    font-size: var(--step--2);
    font-weight: 800;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .home-slider .hero-slide-integrity__link:hover .hero-slide-integrity__cta,
  .home-slider .hero-slide-integrity__link:focus-visible .hero-slide-integrity__cta {
    opacity: 1;
    transform: none;
  }
}

/* --- Kontrol slider: dot dan tombol jeda sebaris --- */
.home-slider .hero-slider-controls {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 3;
  display: flex;
  align-items: center;
  /* Dot punya area sentuh 44px sementara batang visualnya ~26px, jadi sudah ada
     ~9px ruang mati di tepinya. Gap tambahan bikin tombol jeda terlihat lepas. */
  gap: 0;
  transform: translateX(-50%);
}

.home-slider .hero-slider-controls .hero-slider-dots {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
}

/* WCAG 2.2.2: konten yang bergerak otomatis lebih dari 5 detik wajib punya
   kontrol jeda. Jeda saat hover dan prefers-reduced-motion sudah ada, tapi
   keduanya bukan pengganti kendali yang terlihat. */
.home-slider .hero-pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(226, 185, 79, 0.5);
  border-radius: 999px;
  background: rgba(35, 17, 14, 0.58);
  color: var(--hero-gold);
  cursor: pointer;
}

.home-slider .hero-pause:hover,
.home-slider .hero-pause:focus-visible {
  border-color: var(--hero-gold);
  background: rgba(35, 17, 14, 0.82);
}

.home-slider .hero-pause__glyph {
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.home-slider .hero-pause[aria-pressed="true"] .hero-pause__glyph {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 11px solid currentColor;
  border-right: 0;
  margin-left: 3px;
}
/* === END HERO UI POLISH 2026-07-25 === */

/* Harus setelah aturan dasar `.hero-slider-controls` di atas: spesifisitasnya
   sama, jadi yang menang adalah yang terakhir. Kartu berita mobile lebih tinggi
   karena thumbnail, dan tombol jeda 44px yang terlihat mulai menabrak tepi
   bawah kartu. Dot lolos karena batang visualnya jauh lebih kecil dari area
   sentuhnya; tombol jeda tidak. */
@media (max-width: 900px) {
  .home-slider .hero-slider-controls {
    bottom: 10px;
  }
}

/* Panah slider 38px, sekelas dengan tab yang baru dinaikkan. Dinaikkan ke 44px
   supaya seluruh kendali hero memenuhi ambang target sentuh yang sama. */
.home-slider .hero-cinema .hero-nav {
  width: 44px;
  height: 44px;
}

/* === BERANDA: PERBAIKAN EDITORIAL 2026-07-26 ==============================
   Hasil audit beranda. Saran "Sidang Keliling jadi seksi sendiri" ditunda atas
   permintaan pemilik sampai ketersediaan datanya dipastikan. Struktur DOM tidak
   diubah dan menu wajib Badilum tidak disentuh - seluruh perbaikan di bawah ini
   bekerja pada markup yang sudah ada.
   ========================================================================= */

/* --- Irama seksi seragam -------------------------------------------------
   Semua blok utama memakai jarak yang sama. Konsistensi ini menjaga transisi
   Layanan Publik ke Jadwal Sidang setara dengan pasangan seksi lainnya. */
body.is-home .home-juknis-main {
  gap: var(--section-gap-standard);
}

body.is-home .home-juknis-main > :is(
  .sipp-schedule-board,
  .announcement-showcase,
  .instansi-news-board
) {
  margin-top: 0;
}

/* Jadwal Sidang adalah tugas nomor satu pengguna utama, jadi judulnya naik satu
   langkah dan sisanya turun. Sebelumnya semua h2 seukuran, termasuk widget
   sidebar Kinerja & Akuntabilitas. */
body.is-home .sipp-schedule-board h2 {
  font-size: var(--step-4);
  line-height: 1.08;
}

body.is-home .announcement-showcase h2,
body.is-home .instansi-news-board h2 {
  font-size: var(--step-3);
  line-height: 1.15;
}

body.is-home .home-juknis-sidebar h2 {
  font-size: var(--step-1);
  line-height: 1.25;
}

/* Eyebrow di atas setiap seksi bukan sistem, itu tata bahasa yang tidak dipilih
   siapa pun - sembilan di antaranya identik. Sisakan hanya di dua tingkat atas. */
body.is-home .home-juknis-sidebar .section-kicker {
  display: none;
}

/* --- Jadwal basi dinyatakan, bukan disamarkan -----------------------------
   sipp-schedule.php sekarang menandai tab yang tanggalnya tidak cocok dengan
   hari ini di Asia/Jakarta. Tandanya harus terlihat, bukan cuma ada di DOM. */
.sipp-day-tabs button.sipp-tab-stale {
  border-color: rgba(146, 88, 12, 0.45);
  background: rgba(244, 214, 154, 0.22);
}

.sipp-day-tabs button.sipp-tab-stale strong {
  color: #7a4a08;
}

body.is-dark .sipp-day-tabs button.sipp-tab-stale {
  border-color: rgba(243, 201, 107, 0.42);
  background: rgba(243, 201, 107, 0.12);
}

body.is-dark .sipp-day-tabs button.sipp-tab-stale strong {
  color: #f3c96b;
}

.sipp-stale-notice {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 16px var(--space-3);
  border-radius: 7px;
  padding: 6px 10px;
  background: rgba(244, 214, 154, 0.16);
  color: #6b4207;
  font-size: var(--step--2);
  font-weight: 700;
  line-height: 1.35;
}

body.is-dark .sipp-stale-notice {
  border-color: rgba(243, 201, 107, 0.34);
  background: rgba(243, 201, 107, 0.1);
  color: #f6d79a;
}

/* --- Kontras status buka/tutup -------------------------------------------
   Kalimat dengan kecemasan tertinggi di halaman - "apakah pengadilan buka?" -
   sebelumnya 2,35:1 di terang dan 1,86:1 di gelap. Gagal di kedua tema. Latar
   dipadatkan dan teksnya ditarik dari rona yang sama, bukan dari abu-abu. */
.home-slider .hero-welcome-copy .hero-status.is-closed {
  border-color: rgba(232, 122, 95, 0.58);
  background: rgba(56, 15, 9, 0.92);
  color: #ffe3da;
}

.home-slider .hero-welcome-copy .hero-status.is-open {
  border-color: rgba(87, 214, 164, 0.5);
  background: rgba(9, 40, 30, 0.92);
  color: #d6f8e8;
}

/* Tab hari yang tidak aktif mewarisi warna redam ke atas permukaan bertint,
   jadi di mode gelap "Besok" turun ke 1,48:1. Beri warna depan eksplisit per
   tema alih-alih membiarkannya diwariskan. */
.sipp-day-tabs button[aria-selected="false"] strong,
.sipp-day-tabs button[aria-selected="false"] span,
.sipp-day-tabs button[aria-selected="false"] b {
  color: #44515c;
}

body.is-dark .sipp-day-tabs button[aria-selected="false"] strong,
body.is-dark .sipp-day-tabs button[aria-selected="false"] span,
body.is-dark .sipp-day-tabs button[aria-selected="false"] b {
  color: #c3cfd9;
}

/* --- Layar pertama desktop ------------------------------------------------
   295px chrome memakan 38,4% viewport 768px sebelum ada konten, dan kedua CTA
   hero jatuh 62px di bawah lipatan. Judul hero sudah dipangkas jadi dua baris
   di hero-slider.php; sisanya tinggi blok brand. Nama lembaga tetap terbaca -
   ia muncul di topbar, di h1 ini, dan tercat di gedung pada fotonya. */
@media (min-width: 1024px) {
  .header-brand {
    gap: var(--space-5);
    padding-block: var(--space-3) var(--space-4);
  }

  .brand-mark {
    width: clamp(72px, 6vw, 88px);
    height: clamp(72px, 6vw, 88px);
  }

  .brand-lockup strong {
    margin-bottom: var(--space-1);
    padding: 2px var(--space-2);
  }

  .header-brand-lockup .ampuh-certified-link {
    width: clamp(46px, 3.8vw, 58px);
  }

  .header-brand-lockup .asn-berakhlak-mark {
    width: clamp(130px, 13vw, 190px);
  }
}

/* --- Foto hero dibiarkan terlihat ----------------------------------------
   Scrim lama 96% pekat di tepi kiri dan masih 74% di 27%, sehingga gedungnya
   terbaca sebagai tekstur, bukan bangunan. Scrim dipersempit dan diringankan:
   cukup untuk menjaga kontras teks di kolom kiri, tidak lebih. */
.hero-cinema .hero-backdrop::after {
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 248, 237, 0.018) 0 0.6px, transparent 0.8px 3px),
    radial-gradient(ellipse at 76% 67%, rgba(255, 228, 180, 0.13) 0%, transparent 29%),
    linear-gradient(180deg, rgba(19, 10, 8, 0.01) 42%, rgba(19, 10, 8, 0.3) 100%),
    linear-gradient(92deg, rgba(28, 12, 10, 0.9) 0%, rgba(45, 18, 13, 0.6) 21%, rgba(37, 20, 18, 0.09) 41%, rgba(18, 31, 43, 0) 57%);
}

/* --- Kartu jadwal di mobile ----------------------------------------------
   Footer turun vertikal agar aksi tidak menutupi identitas perkara. */
@media (max-width: 760px) {
  .sipp-card {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .sipp-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .sipp-card-link {
    width: 100%;
    min-width: 0;
    padding: var(--space-2) var(--space-4);
    text-align: center;
  }
}

/* Chip agenda bisa sampai enam baris; radius 999px pada blok setinggi itu
   melengkung menembus tulisannya sendiri. Chip ruang dan Sidang Keliling selalu
   satu baris, jadi keduanya tetap pil. */
.sipp-chip:not(.sipp-chip-room):not(.sipp-chip-circuit) {
  border-radius: 10px;
}

/* --- Rail kanan tidak mati di tengah jalan --------------------------------
   Sidebar habis di y=3.739 sementara kolom utama lanjut ke y=6.000, menyisakan
   2.261px rail kosong - 36% tinggi halaman. Kartu terakhir mengikuti pembaca
   melewati rongga itu alih-alih meninggalkannya kosong. */
@media (min-width: 1024px) {
  body.is-home .home-juknis-sidebar > :last-child {
    position: sticky;
    top: 84px;
  }
}

/* Jam Layanan menjawab "jam buka PTSP", tugas utama yang disebut di PRODUCT.md,
   tapi di mobile ia kartu keempat dalam rail geser. Jadikan yang pertama. */
@media (max-width: 760px) {
  body.is-home .home-juknis-sidebar > .module-card:has(.service-hours),
  body.is-home .home-juknis-sidebar > .module-card:has(#dynamic-service-hours) {
    order: -1;
  }
}

/* --- Target sentuh 44px ---------------------------------------------------
   Kontrak pemilik, bukan ambang WCAG 2.5.8 yang 24px. Empat kelompok masih di
   bawahnya; tab periode DIPA di antaranya, dan itu ditambahkan pada sesi ini
   tanpa diperiksa terhadap kontrak. */
.dark-toggle {
  width: 44px;
  height: 44px;
}

.skip-link:focus-visible {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.dipa-tab {
  min-height: 44px;
}

@media (min-width: 761px) {
  .sipp-card-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* --- Tumpukan hero dirapatkan ke lipatan ----------------------------------
   Setelah judul turun jadi dua baris, kedua CTA masih 50px di bawah lipatan
   1366x768. Sisanya ruang yang tidak memutuskan apa pun: padding atas 64px,
   satu paragraf .hero-intro yang kosong tapi tetap menagih margin 18px, dan
   lima margin bawah dengan nilai berbeda-beda (14/14/18/17/12) yang tidak
   berasal dari skala mana pun. */
@media (min-width: 1024px) {
  .hero.home-slider {
    padding-top: var(--space-7);
    padding-bottom: var(--space-8);
  }

  .home-slider .hero-welcome-copy .hero-status {
    margin-bottom: var(--space-3);
  }

  .home-slider .hero-welcome-copy h2 {
    margin-bottom: var(--space-2);
  }

  .home-slider .hero-welcome-copy .hero-intro {
    margin-bottom: var(--space-3);
  }

  .home-slider .hero-service-ribbon {
    margin-bottom: var(--space-3);
  }
}

/* Paragraf pengantar kedua kosong saat slide tidak memasok teks kedua, tapi
   margin-nya tetap ditagih. Elemen tanpa isi tidak boleh menagih ruang. */
.home-slider .hero-welcome-copy .hero-intro:empty,
.home-slider .hero-welcome-copy .hero-intro:blank {
  display: none;
}

/* Ribbon berdiri di antara pengantar dan kedua tombol, jadi yang jatuh di bawah
   lipatan justru satu-satunya hal yang bisa ditindaklanjuti. Ribbon itu
   informasi, tombolnya tindakan - tindakan naik. Urutan DOM tidak diubah supaya
   urutan baca dan urutan fokus tetap: status, judul, pengantar, ribbon, aksi. */
@media (min-width: 1024px) {
  .home-slider .hero-welcome-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .home-slider .hero-welcome-copy .hero-service-ribbon {
    order: 1;
    margin-top: var(--space-3);
    margin-bottom: 0;
  }
}

/* Tab terpilih mewarisi --color-primary-dark, yang benar di atas permukaan
   krem terang tapi jatuh ke ~1,2:1 begitu mode gelap mengganti latarnya jadi
   amber transparan di atas papan gelap. Barisan kedua dan ketiga - "bukan hari
   ini" dan jumlah perkara - praktis hilang. Warna depan dinyatakan per tema. */
body.is-dark .sipp-day-tabs button[aria-selected="true"] strong {
  color: #f6d79a;
}

body.is-dark .sipp-day-tabs button[aria-selected="true"] span,
body.is-dark .sipp-day-tabs button[aria-selected="true"] b {
  color: #e8d7bd;
}

/* --- Sisa target sentuh -------------------------------------------------
   Kontrol berdiri sendiri wajib 44px penuh. Tautan yang berada di tengah
   kalimat dikecualikan WCAG 2.5.8 dan sengaja dibiarkan: alamat surel di
   topbar dan tautan di dalam <strong> pada ribbon. */
.section-action,
.instansi-panel-link,
.instagram-profile-embed__head a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.instansi-tabbar button {
  min-height: 44px;
}

.footer-link-section a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Tombol sosial footer diatur lewat `.footer-social .social-link` di beberapa
   media query, jadi selektor satu kelas kalah spesifisitas. Di mobile labelnya
   disembunyikan dan lebarnya dikunci 34px, sehingga lebar minimum juga perlu
   dinyatakan - bukan hanya tingginya. */
.footer-social .social-link {
  min-width: 44px;
  min-height: 44px;
}

/* Skip-link hanya terlihat saat fokus, tapi tingginya tetap harus memenuhi
   kontrak begitu ia muncul - bukan hanya di state fokus. */
.skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Dot carousel role model: batang visualnya 6px, jadi area sentuhnya harus
   dibentangkan lewat pseudo-element seperti dot hero. */
.role-carousel-dots button {
  position: relative;
}

.role-carousel-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Rasio antartingkat tetap, angkanya mengecil. Di layar 390px, jeda 96px
   menghabiskan seperempat layar untuk ruang kosong; yang dibutuhkan cuma cukup
   beda supaya mata tahu satu seksi sudah selesai. */
@media (max-width: 760px) {
  :root {
    --section-gap-feature: 56px;
    --section-gap-standard: 34px;
    --section-gap-ancillary: 22px;
  }
}

/* Final cascade owner: aturan responsif hero lama tersebar di beberapa blok dan
   salah satunya (max-width:1440px) berada setelah skala dasar. Putusan editorial
   desktop hidup di ujung berkas supaya tidak ada breakpoint lama yang diam-diam
   mengembalikan headline 71,7px. */
@media (min-width: 901px) {

  .home-slider .hero-welcome-copy h2 {
    max-width: 100%;
    font-size: clamp(3.25rem, 4.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
  }
}

/* ===== HERO EDITORIAL KELEMBAGAAN 2026-07-26 =====
   Pemilik komposisi hero terakhir. Blok ini menutup enam temuan audit; setiap
   aturan menyebut angka yang diperbaikinya supaya tidak ada yang dicabut tanpa
   tahu apa yang dijaganya. Tambalan `translateY(-32px)` sengaja dihapus: begitu
   poster berhenti merampas 97,6px, copy tidak perlu digeser dari posisi
   layoutnya sendiri. */

/* Reflow SC 1.4.10. `clamp(3.25rem, ...)` memakai batas bawah berbasis rem,
   jadi pada zoom teks 200% batas bawah (104px) justru mengalahkan batas atas
   64px: headline membengkak jadi lima baris dan halaman meluber 32px. `min()`
   memasang langit-langit absolut yang tidak ikut membesar bersama root. */
@media (min-width: 901px) {
  .home-slider .hero-welcome-copy h2 {
    font-size: clamp(3.25rem, 4.5vw, 4rem);
    overflow-wrap: break-word;
  }
}

@media (max-width: 900px) {
  .home-slider .hero-welcome-copy h2 {
    font-size: clamp(2.2rem, 10.6vw, 3rem);
    overflow-wrap: break-word;
  }
}

/* Kendali rotasi jadi satu rumpun. Sebelumnya panah berdiri sendiri di tepi
   kanan (x 1215-1311) sementara dot dan jeda di tengah (x 589-733), sehingga
   urutan fokus melompat 1215px ke kanan lalu balik ke tengah. */
.home-slider .hero-slider-controls {
  bottom: 18px;
  gap: var(--space-2);
}

.home-slider .hero-cinema .hero-slider-controls .hero-nav {
  position: static;
  inset: auto;
  transform: none;
}

.home-slider .hero-slider-count {
  margin: 0;
  color: var(--hero-cream);
  font-size: var(--step--2);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(19, 10, 8, 0.85);
}

/* SC 1.4.11. Cincin fokus digambar di luar tombol, langsung di atas foto:
   terukur 1,13-1,73:1 di belakang dot dan panah kanan, dan hanya lolos di
   belakang tombol jeda karena crop di titik itu kebetulan gelap. Pelat tinta
   6px mengunci rasio 9,45:1 apa pun crop fotonya. */
.home-slider .hero-cinema :is(.hero-nav, .hero-pause, .hero-slider-dots button):focus-visible {
  outline: 3px solid var(--hero-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #29130f;
}

/* `pauseButton.hidden = reducedMotion` dikalahkan `.hero-pause{display:grid}`,
   sehingga pada reduced-motion tombolnya tetap tampil, berganti label jadi
   "Lanjutkan", lalu tidak melakukan apa pun karena `start()` return dini. */
.home-slider .hero-pause[hidden] {
  display: none;
}

/* Placeholder status juga mengabaikan `hidden` karena `p{display:grid}`. Kotak
   tetap dicadangkan (CLS 0,020 dipegang), tapi teks "Memuat status layanan..."
   berhenti tercat sebelum JS menggantinya. */
.home-slider .hero-service-ribbon p[hidden] {
  visibility: hidden;
}

/* Bar bawah tetap 68px menutupi 63% CTA primer pada 320x568. Ruang bebasnya
   dinyatakan lewat tinggi viewport, bukan lebar, supaya zoom halaman 200% -
   yang menghasilkan viewport pendek pada lebar desktop - ikut tertangani. */
@media (max-width: 760px) {
  .hero.home-slider {
    padding-bottom: calc(var(--mobile-bar-height) + var(--space-6));
  }
}

/* Pada layar 568px tinggi, bar tetap 68px berdiri di y=498 sementara blok copy
   berakhir di y=583: CTA primer tertutup 63%. Padding hero tidak bisa
   menolongnya karena bar mengambang di atas viewport, bukan di alur dokumen -
   yang harus mengecil adalah bloknya. Pernyataan misi adalah baris paling tidak
   berkonsekuensi di sana; ribbon status dan tombol tindakan tetap utuh. */
@media (max-width: 760px) and (max-height: 640px) {
  .home-slider .hero-welcome-copy .hero-intro {
    display: none !important;
  }

  body.is-home .hero-cinema .hero-welcome-copy {
    padding-block: var(--space-4);
  }
}

/* Zoom halaman 200% memberi viewport pendek pada lebar desktop, jadi ruang
   bebas bar dinyatakan lewat tinggi, bukan lebar. */
@media (max-height: 620px) {
  body.is-home .hero.home-slider {
    padding-bottom: calc(var(--mobile-bar-height) + var(--space-4));
  }
}

/* Aturan 7781 menetapkan `.hero-copy` 820px dengan empat kelas, jadi bidang
   tinta mengabaikan max-width 620px di aturan dasarnya dan menyisakan 162px
   tinta mati di kanan anak terlebar. 620px adalah lebar ribbon itu sendiri,
   sehingga tepi kanan akhirnya punya alasan. */
.home-slider .hero-slide:not(.hero-slide-news) .hero-welcome-copy {
  max-width: 620px;
}

/* Panel pratinjau besar seharusnya menghilang di bawah 900px - thumbnail per
   item mengambil alih di breakpoint itu (13920). Aturan penyembunyiannya
   terlanjur ditulis di blok max-width:760px, sehingga pada 761-900px keduanya
   tampil sekaligus dan slide berita menumpuk setinggi 1089px. Karena tinggi
   baris grid sama dengan slide tertinggi, angka itulah yang mendorong copy
   sambutan keluar dari viewport pertama pada tablet. */
@media (max-width: 900px) {
  .hero-slide-news .hero-news-media {
    display: none;
  }
}

/* Anggaran vertikal desktop. Header sudah memakan 237px, jadi padding hero
   yang lebih ramping adalah satu-satunya cara rumpun kendali ikut masuk
   lipatan 768 tanpa memotong isi slide. */
@media (min-width: 1024px) {
  .hero.home-slider {
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
  }
}

/* `align-items: end` memaku copy sambutan ke dasar track, dan tinggi track
   ditentukan slide tertinggi - bukan slide yang sedang dilihat. Di 1024 itu
   menyisakan 95px kosong di atas copy dan mendorong ribbon 44px keluar
   lipatan. Memusatkan copy di dalam track membagi selisih itu alih-alih
   menimpakan seluruhnya ke bawah, tanpa transform dan tanpa memindahkan
   elemen dari posisi layoutnya. */
@media (min-width: 901px) {
  .hero-cinema .hero-slide-welcome {
    align-self: center;
  }
}

/* Track mobile mencadangkan 540px demi tinggi yang stabil, tetapi pada layar
   568px tinggi angka itu sendiri yang mendorong CTA ke belakang bar tetap.
   420px tetap mencadangkan ruang - tidak ada pengukuran runtime, tidak ada
   geseran - sambil mengembalikan tombol ke atas bar. */
@media (max-width: 760px) and (max-height: 640px) {
  .hero-cinema .hero-slides {
    min-height: 420px;
  }
}

/* Caption gedung duduk di y=746 sementara dasar bidang tinta ada di y=777, jadi
   teksnya berada di dalam panel dan tepi panel memotongnya tepat di bawah
   baseline. Ia bukan bagian dari kolom baca - ia keterangan foto - jadi
   tempatnya di bawah panel, bukan di atasnya. */
@media (min-width: 901px) {
  .hero-cinema .hero-photo-chip {
    bottom: 26px;
    font-size: var(--step--3);
    letter-spacing: 0.01em;
  }
}

/* Rumpun kendali berada di tengah, caption di kiri. Di 901-1150px keduanya
   bertemu: pada 1024 tepi kanan caption (353) menembus tepi kiri kendali (335)
   sebesar 18px dan pitanya juga bertumpuk vertikal. Caption sudah tidak tampil
   di bawah 900px, jadi ambang itu hanya melebar sampai kendali punya ruang. */
@media (min-width: 901px) and (max-width: 1150px) {
  .hero-cinema .hero-photo-chip {
    display: none;
  }
}

/* --- Panel sambutan: bidang baca, bukan dinding warna ---------------------
   Pada browser zoom, panel 620px dan headline 4rem berubah menjadi massa tinta
   yang menutup foto. Komposisi desktop ini tetap terbaca tanpa mendominasi hero. */
@media (min-width: 901px) {
  .home-slider .hero-slide:not(.hero-slide-news) .hero-welcome-copy {
    max-width: 560px;
    padding: var(--space-5);
  }

  .hero-cinema .hero-welcome-copy::before {
    display: none;
  }

  .home-slider .hero-welcome-copy h2 {
    max-width: 520px;
    font-size: clamp(2.75rem, 4vw, 3.5rem);
    line-height: 0.98;
  }

  .home-slider .hero-welcome-copy .hero-intro {
    max-width: 48ch;
    margin-bottom: var(--space-3);
    font-size: var(--step-0);
    line-height: 1.48;
  }

  .home-slider .hero-actions-primary {
    margin-bottom: var(--space-2);
  }

  .home-slider .hero-actions-primary a {
    min-height: 44px;
    padding-inline: var(--space-4);
    font-size: var(--step--1);
  }

  .home-slider .hero-service-ribbon {
    --hero-ribbon-bg: rgba(20, 25, 30, 0.9);
    width: 100%;
    margin-bottom: 0;
    border-color: rgba(226, 185, 79, 0.28);
  }

  .home-slider .hero-service-ribbon p {
    min-height: 60px;
    padding: var(--space-2) var(--space-3);
  }

  .home-slider .hero-photo-chip {
    left: var(--page-padding);
    bottom: 24px;
  }

  .home-slider .hero-slider-controls {
    bottom: 18px;
  }
  .hero-cinema .hero-slides {
    min-height: 410px;
  }

  .hero-cinema .hero-slide-welcome {
    align-self: start;
  }

  .home-slider .hero-welcome-label {
    margin-bottom: var(--space-2);
  }

  .home-slider .hero-slide-welcome .hero-welcome-label {
    text-shadow: 0 1px 3px rgba(12, 8, 6, 0.96), 0 2px 10px rgba(12, 8, 6, 0.82);
  }

  .home-slider .hero-slide-welcome .hero-welcome-copy h2 {
    text-shadow: 0 2px 3px rgba(12, 8, 6, 0.98), 0 5px 18px rgba(12, 8, 6, 0.9);
  }

  .home-slider .hero-slide-welcome .hero-welcome-copy .hero-intro {
    color: #fff;
    text-shadow: 0 1px 2px rgba(12, 8, 6, 1), 0 3px 10px rgba(12, 8, 6, 0.95);
  }

  .home-slider .hero-welcome-copy .hero-status {
    margin-bottom: var(--space-2);
  }

}

@media (min-width: 901px) and (max-width: 1200px) {
  body.is-home .hero.home-slider {
    padding-top: var(--space-4);
    padding-bottom: 76px;
  }

  .hero-cinema .hero-slides {
    min-height: 462px;
  }
  .home-slider .hero-slide-integrity {
    top: 0;
    width: min(660px, 100%);
  }


  .home-slider .hero-slide:not(.hero-slide-news) .hero-welcome-copy {
    max-width: 480px;
    padding: 20px;
  }

  .hero-cinema .hero-welcome-copy::before {
    display: none;
  }

  .home-slider .hero-welcome-label {
    margin-bottom: 7px;
    font-size: 12px;
  }

  .home-slider .hero-welcome-copy h2 {
    max-width: 440px;
    margin-bottom: 8px;
    font-size: 42px;
    line-height: .98;
  }

  .home-slider .hero-welcome-copy .hero-intro {
    max-width: 440px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.42;
  }

  .home-slider .hero-actions-primary {
    margin-bottom: 8px;
  }

  .home-slider .hero-actions-primary a {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .home-slider .hero-service-ribbon {
    width: 100%;
  }

  .home-slider .hero-service-ribbon p {
    min-height: 54px;
    padding: 7px 10px;
  }

  .home-slider .hero-service-ribbon p span,
  .home-slider .hero-service-ribbon p small {
    font-size: 10px;
  }

  .home-slider .hero-service-ribbon p strong {
    font-size: 12px;
  }

  .home-slider .hero-photo-chip {
    display: none;
  }

  .home-slider .hero-slider-controls {
    bottom: 14px;
  }
}


/* --- Kejujuran sumber feed instansi 2026-07-26 ---------------------------
   Cron mencatat `_status` per sumber sejak awal, tetapi renderer tidak pernah
   membacanya: arsip terkurasi tayang di bawah stempel "Diperbarui <jam cron>"
   seolah baru ditarik. Prinsip Produk 3 menuntut pembaruan otomatis gagal
   dengan jujur, jadi keadaan itu sekarang dinyatakan. Nadanya peringatan yang
   tenang, bukan galat: datanya tetap sahih, hanya bukan yang terbaru. */
.instansi-source-note {
  margin: 0 0 var(--space-4);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: var(--step--1);
  line-height: 1.55;
}


.instansi-source-note strong {
  font-weight: 800;
}

/* Kesegaran cache dinyatakan dengan kosakata yang sama dengan ribbon SIPP
   ("Perlu diperbarui") supaya pembaca menemukan satu bahasa, bukan dua. */
.instansi-updated.is-stale {
  color: var(--color-primary);
  font-weight: 800;
}

body.is-dark .instansi-source-note {
  border-left-color: #f2c95d;
  background: rgba(242, 201, 93, 0.1);
  color: var(--dark-content-text);
}

body.is-dark .instansi-updated.is-stale {
  color: #f5d884;
}

/* TYPOGRAPHY WEIGHT INTEGRITY 2026-07-27
   Plus Jakarta Sans lokal tersedia sampai 800. Batasi label UI sans agar
   browser tidak menyintesis bobot 850/900 yang berbeda antarplatform. */
:is(
  .section-kicker,
  .editorial-article__masthead,
  .news-portal__hero-overlay > p,
  .news-portal__heading > p,
  .news-channel .section-kicker,
  .mobile-menu-group-label,
  .profile-status-badge,
  .ampuh-directory__kicker,
  .ampuh-directory__summary h2,
  .ampuh-directory__summary dt,
  .ampuh-directory__tools label,
  .ampuh-directory__file-icon
) {
  font-weight: 800;
}

/* KARTU SATU TAUTAN DAN JEJAK KUNJUNGAN 2026-08-02
   Kartu daftar kini hanya menyisakan satu jangkar, yaitu judulnya. Lapisan
   ::after membentangkan jangkar itu ke seluruh kartu sehingga foto dan
   ringkasan tetap bisa ditekan, tetapi enam kartu hanya memakai enam
   perhentian tab - bukan delapan belas - dan pembaca layar menyebut satu
   judul satu kali. */
.news-card { position: relative; }
.news-card h2 a::after { content: ""; position: absolute; inset: 0; }
/* Cincin fokus harus sebangun dengan daerah yang bisa ditekan. Kalau dibiarkan
   melekat pada jangkarnya, cincin hanya melingkari kotak teks judul dan pecah
   antarbaris; jadi cincinnya dipindahkan ke kartu, dengan geometri yang sama
   seperti css:12590. */
.news-card h2 a:focus-visible { outline: none; box-shadow: none; }
.news-card:has(h2 a:focus-visible) { outline: 3px solid #7a4b00; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209, 164, 47, .35); }
body.is-dark .news-card:has(h2 a:focus-visible) { outline-color: #f0c55a; }
/* Pada ponsel padding sisi kanal nol, jadi kartu menempel persis pada tepi
   kotak klip kanal dan cincin 7px di luarnya terpotong kiri-kanan. Margin klip
   memberi ruang cat tanpa memulihkan gulir mendatar: luapan visual tidak pernah
   menumbuhkan bilah gulir, dan luapan tata letak tetap dipotong. */
@media (max-width: 760px) { .news-channel { overflow-clip-margin: 10px; } }
/* Seluruh kartu kini permukaan tekan, jadi tepinya ikut menanggapi kursor
   seperti kartu berita terkait di ekor artikel. */
.news-card:has(h2 a:hover) { border-color: #8b4f49; }
body.is-dark .news-card:has(h2 a:hover) { border-color: #c8a45a; }
.news-card h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Delapan puluh empat berita di empat belas halaman tanpa satu pun jejak
   kunjungan: pembaca yang kembali dari sebuah berita tidak tahu mana yang
   sudah dibukanya. Peramban hanya menghormati color, background-color,
   border-color dan outline-color pada :visited, jadi jejaknya murni warna.
   Ungu terung, bukan abu-abu, supaya terbaca "sudah dibaca" dan bukan "mati":
   #642a72 = 9,77:1 di atas kertas kartu #fffdf9, #dcb8e6 = 9,13:1 di atas
   kartu gelap #1a232b dan 9,56:1 di atas kartu terkait gelap #281b18. */
.news-card h2 a:visited { color: #642a72; }
.editorial-article__related-card:visited { color: #642a72; }
body.is-dark .news-card h2 a:visited { color: #dcb8e6; }
body.is-dark .editorial-article__related-card:visited { color: #dcb8e6; }

/* INDEKS TAHUN ARSIP KANAL 2026-08-02
   Delapan puluh empat berita di empat belas halaman: tanpa indeks tahun,
   mencari berita 2023 berarti menekan "Berikutnya" sebelas kali. Satu baris
   teks, bukan kartu dan bukan tombol - tab kanal di atasnya harus tetap yang
   paling kuat. */
.news-channel-tabs:has(+ .news-channel-archive) { margin-bottom: 10px; }
.news-channel-archive { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 0 0 clamp(30px, 4.5vw, 48px); }
.news-channel-archive__label { color: var(--channel-muted); font-size: var(--step--1); font-weight: 700; }
.news-channel-archive ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.news-channel-archive li { margin: 0; padding: 0; }
.news-channel-archive li::marker { content: none; }
/* Tinggi sentuh 44px penuh: ini tautan navigasi, bukan tautan di dalam kalimat,
   jadi pengecualian SC 2.5.8 tidak berlaku. Padding, bukan tinggi tetap, supaya
   sasarannya ikut tumbuh saat ukuran huruf peramban dinaikkan. Angka jumlah
   dibuat inline-block agar garis bawah tahun tidak ikut menyeberang ke bawahnya
   - garis dekorasi teks tidak merambat ke kotak inline atomik. */
.news-channel-archive a { display: inline-block; min-height: 44px; padding-block: 12px; color: #681923; font-size: var(--step--1); font-weight: 700; line-height: 1.45; text-decoration: none; }
.news-channel-archive a span { display: inline-block; margin-left: 7px; color: var(--channel-muted); font-size: var(--step--2); font-weight: 650; font-variant-numeric: tabular-nums; }
.news-channel-archive a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Tahun yang sedang tampil dibedakan oleh tiga hal sekaligus - bobot, warna
   tinta penuh, dan garis emas di bawahnya - sehingga tidak bergantung pada
   warna saja. Emas hanya menjadi garis: #9b6d16 = 4,57:1 di atas kertas putih,
   jauh di atas 3:1 yang dituntut SC 1.4.11 untuk penanda bukan-teks. */
.news-channel-archive a[aria-current="true"] { color: var(--channel-ink); font-weight: 800; text-decoration: underline; text-decoration-color: #9b6d16; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
/* Tahun biasa di mode gelap tidak diwarnai di sini: aksen tautan gelap situs
   (#f3c96b, 10,16:1) sudah berlaku dan harus tetap satu suara dengan sisa
   kanal. Yang perlu dibalik hanya tahun yang sedang tampil. */
body.is-dark .news-channel-archive a[aria-current="true"] { color: var(--channel-ink); text-decoration-color: #f0c55a; }

/* === KOTAK PENCARIAN BERANDA 2026-08-02 ===================================
   Kartu pencarian keluar dari `<aside class="home-juknis-sidebar">` dan kini
   menjadi anak langsung `.home-juknis-layout` (lihat templates/.../index.php).
   Alasannya soal jangkauan, bukan gaya: di ponsel rel samping ditumpuk sesudah
   seluruh isi utama lalu diubah menjadi korsel gulir mendatar, sehingga kartu
   pencarian berdiri di 8.872px dari halaman setinggi 9.763px - 91% ke bawah,
   praktis tidak pernah ditemukan. Sebuah medan isian juga bukan penghuni yang
   aman di dalam korsel scroll-snap mendatar.

   Urutan DOM sekarang menaruhnya paling awal - itulah yang dipakai ponsel,
   tablet, pembaca layar, dan urutan Tab - sementara pada layar lebar penempatan
   grid di bawah mengembalikannya ke puncak kolom rel, persis di posisi lamanya.
   Modul tetap satu, urutan rel (layanan, role model, survei, DIPA) utuh, dan
   `aria-label` `<aside>` tetap menaungi isi rel yang sebenarnya. */

.home-search-slot {
  min-width: 0;
}

/* Modul bisa saja tidak diterbitkan; jangan sisakan baris grid dan jarak kosong. */
.home-search-slot:not(:has(*)) {
  display: none;
}

/* Kartu ini dulu anak rel, jadi ia membawa sendiri perlakuan kartu rel
   (bandingkan `body.is-home .home-juknis-sidebar > .module-card`). Seluruhnya
   memakai token `--home-*` yang sudah punya nilai mode gelap. */
body.is-home .home-search-slot > .module-card {
  margin-bottom: 0;
  border: 1px solid var(--home-rule);
  border-radius: var(--home-radius-card);
  padding: 16px 18px;
  background: var(--home-paper);
  box-shadow: var(--home-shadow-interactive);
}

body.is-home .home-search-slot h2 {
  font-size: var(--step-1);
  line-height: 1.25;
}

/* Sembilan kicker identik di rel lama tidak menolong siapa pun; kartu ini
   mengikuti keputusan yang sama seperti sesama kartu rel. */
body.is-home .home-search-slot .section-kicker {
  display: none;
}

@media (max-width: 760px) {
  body.is-home .home-search-slot > .module-card {
    box-shadow: none;
  }
}

/* >=1181px adalah satu-satunya rentang dengan tata letak dua kolom; di bawah itu
   `.home-juknis-layout` sudah runtuh menjadi satu kolom (css:4137) dan urutan
   DOM saja sudah benar. Baris ketiga `1fr` menyerap sisa tinggi kolom utama:
   tanpa itu kolom utama yang membentang dua baris akan membagi kelebihan
   tingginya rata ke baris 2 dan 3, dan lubang setinggi ribuan piksel muncul di
   antara kartu pencarian dan kartu Jam Layanan di bawahnya. */
@media (min-width: 1181px) {
  .home-juknis-layout {
    grid-template-rows: auto auto 1fr;
  }

  .home-juknis-layout > .system-message-slot {
    grid-row: 1;
  }

  .home-juknis-layout > .home-search-slot {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
  }

  .home-juknis-layout > .home-juknis-main {
    grid-row: 2 / span 2;
    grid-column: 1;
  }

  .home-juknis-layout > .home-juknis-sidebar {
    grid-row: 3;
    grid-column: 2;
  }
}

/* Formulirnya sendiri. `.search-box` hanya dipakai modul 807, tetapi aturan di
   bawah tetap dilingkupi `.home-search-slot` supaya tidak ada efek samping.
   Aturan lama (css:3278) mematok `background: #ffffff` - di mode gelap itu
   kotak putih menyilaukan di atas kertas kartu #172027. Token `--color-surface`
   dan `--color-ink` sudah punya pasangan gelapnya. */
.home-search-slot .search-box {
  gap: 8px;
}

.home-search-slot .search-box input {
  min-height: 44px;
  border: 1px solid var(--home-field-line);
  background: var(--color-surface);
  color: var(--color-ink);
}

/* Halo emas ditulis di sini dan di aturan `:focus-visible` di bawah dengan nilai
   yang sama persis. Keduanya cocok bersamaan pada medan teks dan specificity-nya
   seri, jadi menyamakan nilainya menghapus perlombaan kaskade dengan
   `box-shadow` bawaan `.search-box input:focus` (css:3295) alih-alih
   mengandalkan urutan sumber. Latar isian sengaja tidak diubah saat fokus: di
   mode gelap itu memunculkan kilatan putih. */
.home-search-slot .search-box input:focus {
  border-color: var(--home-field-line);
  background: var(--color-surface);
  box-shadow: 0 0 0 5px rgba(209, 164, 47, .35);
}

.home-search-slot .search-box input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/* Tinggi sentuh 44px penuh: tombol kirim, bukan tautan di dalam kalimat, jadi
   pengecualian SC 2.5.8 tidak berlaku. Garis 1px transparan menjaga geometri
   tetap sama saat mode gelap menyalakan garis emasnya. */
.home-search-slot .search-box button {
  min-height: 44px;
  border: 1px solid transparent;
  padding: 10px 20px;
}

/* Cincin fokus situs: inti gelap 3px + halo emas, sama seperti .site-search
   (css:13267), karena emas murni di atas kertas terang hanya 2,3:1. */
.home-search-slot .search-box :is(input, button):focus-visible {
  outline: 3px solid #7a4b00;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(209, 164, 47, .35);
}

/* Garis medan isian. Bawaan `--color-line` (#d9e0e7) hanya 1,31:1 di atas
   kertas kartu #fffdf9 - batas komponennya praktis tidak terlihat, jauh di
   bawah 3:1 SC 1.4.11. #8a7b74 = 4,00:1 di atas kertas dan 4,07:1 di atas isian
   putih; #7d8b95 = 4,71:1 di atas kertas gelap dan 4,91:1 di atas isian gelap. */
body.is-home {
  --home-field-line: #8a7b74;
}

body.is-dark.is-home {
  --home-field-line: #7d8b95;
}

/* Isian maroon #8f1f0b hanya 1,86:1 di atas kertas kartu gelap: bentuk tombolnya
   hilang walau labelnya kontras 8,87:1. Emas dipakai persis sebagai garis, bukan
   teks - #c8a45a = 7,01:1 di atas kertas gelap dan 3,76:1 di atas isian maroon. */
body.is-dark .home-search-slot .search-box button {
  border-color: #c8a45a;
}

body.is-dark .home-search-slot .search-box :is(input, button):focus-visible {
  outline-color: #f0c55a;
}
/* === AKHIR KOTAK PENCARIAN BERANDA ======================================== */

/* Maklumat and information-request reading flow */
.content-primary:has(.svc-hero--maklumat),
.content-primary:has(.svc-hero--information) { --service-reading-measure: 76ch; }
.content-primary :is(.svc-hero--maklumat, .svc-hero--information) { min-height: 190px; border-radius: 8px; padding: clamp(24px, 3.5vw, 38px); box-shadow: 0 14px 34px rgba(61, 35, 27, .06); }
.content-primary :is(.svc-hero--maklumat, .svc-hero--information) > div { max-width: var(--service-reading-measure); }
.content-primary :is(.svc-hero--maklumat, .svc-hero--information) .svc-lead { font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.72; }
.content-primary .svc-statement { max-width: 920px; margin: clamp(28px, 4vw, 44px) auto; border: 0; border-block: 1px solid var(--color-line); padding: clamp(22px, 3vw, 32px) clamp(4px, 2vw, 20px); color: var(--color-ink); background: transparent; font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.65; }
.content-primary .svc-statement p:last-child { margin-bottom: 0; color: var(--color-primary); font-family: var(--font-body); font-size: var(--step--1); font-weight: 750; }
.content-primary .svc-document-preview { width: min(100%, 720px); margin: 16px auto 24px; border-radius: 8px; padding: clamp(14px, 2vw, 22px); background: #f3eee5; box-shadow: 0 16px 38px rgba(50, 30, 24, .1); }
.content-primary .svc-document-preview img { width: min(100%, 420px); aspect-ratio: 226 / 320; margin-inline: auto; object-fit: contain; background: #fff; box-shadow: 0 10px 28px rgba(45, 27, 22, .13); }
.content-primary .svc-document-preview .svc-zoom-hint { right: 24px; bottom: 24px; }
.content-primary:has(.svc-hero--information) > h2 { margin-top: clamp(32px, 4vw, 48px); }
.content-primary:has(.svc-hero--information) .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.content-primary:has(.svc-hero--information) .svc-card { border-radius: 8px; padding: clamp(20px, 2.5vw, 28px); box-shadow: 0 10px 28px rgba(61, 35, 27, .06); }
.content-primary:has(.svc-hero--information) .svc-steps { max-width: 920px; }
.content-primary:has(.svc-hero--information) .svc-steps li { padding-bottom: 30px; }
body.is-dark .content-primary .svc-statement { border-color: var(--color-line); color: var(--color-ink); background: transparent; }
body.is-dark .content-primary .svc-document-preview { background: #202a30; }
@media (max-width: 760px) {
  .content-primary :is(.svc-hero--maklumat, .svc-hero--information) { min-height: 0; padding: 24px 20px; }
  .content-primary .svc-statement { margin-block: 26px; padding-inline: 0; }
  .content-primary:has(.svc-hero--information) .svc-grid { grid-template-columns: 1fr; }
  .content-primary .svc-document-preview { padding: 12px; }
  .content-primary .svc-document-preview .svc-zoom-hint { right: 18px; bottom: 18px; }
}

/* Institutional commemorative lockup: rendered server-side only during August. */
.header-brand:has(.august-lockup) { gap: 20px; padding-block: 12px 16px; }
.header-brand:has(.august-lockup) > .custom:first-child { flex: 1 1 auto; min-width: 0; }
.header-brand:has(.august-lockup) .brand-lockup { min-width: 0; }
.header-brand:has(.august-lockup) .brand-mark { width: 88px; height: 88px; }
.header-brand:has(.august-lockup) .brand-lockup .brand-title { max-width: 100%; font-size: clamp(1.55rem, 2.75vw, 2.7rem); white-space: normal; text-wrap: balance; }
.header-brand:has(.august-lockup) .brand-lockup p:not(.brand-title) { max-width: 100%; font-size: clamp(.78rem, .9vw, .96rem); white-space: normal; }

.august-lockup {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 0 1 286px;
  gap: 5px;
  min-width: 230px;
  max-width: 286px;
  align-self: stretch;
  align-content: center;
  border-inline: 0;
  padding-inline: clamp(12px, 1.4vw, 20px);
}
.august-lockup::before { content: ""; position: absolute; inset: 13% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(208, 29, 31, .08), transparent 70%); }
.august-lockup__flag {
  position: absolute;
  inset: 10px 8px 8px;
  z-index: 0;
  width: calc(100% - 16px);
  height: calc(100% - 18px);
  overflow: hidden;
  opacity: .27;
  filter: drop-shadow(0 4px 5px rgba(115, 23, 20, .13));
  pointer-events: none;
}
.august-lockup__flag-red { fill: #d71920; }
.august-lockup__flag-white { fill: #fff; }
.august-lockup__marks { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(72px, .9fr) minmax(102px, 1.25fr); gap: 10px; height: 62px; align-items: center; }
.august-lockup__mark { display: flex; min-width: 0; height: 52px; align-items: center; justify-content: center; overflow: visible; }
.august-lockup__mark img { display: block; width: auto; max-width: 100%; object-fit: contain; object-position: center; }
.august-lockup__mark--ri img { height: 46px; }
.august-lockup__mark--ma img { height: 42px; }
.august-lockup__divider { display: none; }
body.is-dark .august-lockup { border-color: rgba(243, 201, 107, .2); }
body.is-dark .august-lockup__edition { color: #f3c96b; }
body.is-dark .august-lockup__divider { background: linear-gradient(transparent, rgba(243, 201, 107, .4), transparent); }

@media (max-width: 1500px) and (min-width: 1261px) {
  .header-brand:has(.august-lockup) .court-brand-badges.header-brand-lockup { display: none !important; }
  .header-brand:has(.august-lockup) > .custom:first-child { flex: 1 1 0; }
  .header-brand:has(.august-lockup) .brand-lockup .brand-title { font-size: clamp(1.75rem, 3vw, 2.35rem); }
  .august-lockup { flex-basis: 260px; }
}

@media (max-width: 1260px) and (min-width: 901px) {
  .header-brand:has(.august-lockup) { gap: 16px; }
  .header-brand:has(.august-lockup) .brand-lockup .brand-title { font-size: clamp(1.65rem, 3vw, 2.15rem); }
  .august-lockup__marks { grid-template-columns: minmax(62px, .9fr) minmax(88px, 1.25fr); gap: 8px; }
  .court-brand-badges.header-brand-lockup { display: none; }
}

@media (max-width: 900px) {
  .header-brand:has(.august-lockup) { gap: 28px; padding: 10px 146px 10px 12px; }
  .header-brand:has(.august-lockup) .brand-lockup .brand-title,
  .header-brand:has(.august-lockup) .brand-lockup p:not(.brand-title) { white-space: normal; }
  .header-brand:has(.august-lockup) .brand-lockup { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; }
  .header-brand:has(.august-lockup) .brand-mark { width: 42px; height: 42px; }
  .header-brand:has(.august-lockup) .brand-lockup .brand-title { font-size: 0; line-height: 1; white-space: normal; }
  .header-brand:has(.august-lockup) .brand-lockup p:not(.brand-title) { display: none; }
  .header-brand:has(.august-lockup) > .august-lockup { position: absolute; inset: 10px 68px 10px auto; display: block !important; width: 70px; min-width: 70px; max-width: 70px; height: 48px; margin: 0; overflow: hidden; border: 0; padding: 0; transform: none; }
  .header-brand:has(.august-lockup) .court-brand-badges.header-brand-lockup { display: none !important; }
  .august-lockup::before, .august-lockup__divider { display: none; }
  .august-lockup__flag { inset: 7px 2px; width: calc(100% - 4px); height: calc(100% - 14px); opacity: .24; }
  .august-lockup__marks { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3px; width: 100%; height: 100%; align-items: center; }
  .august-lockup__mark { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; overflow: visible; }
  .august-lockup__mark--ri img { width: auto; max-width: 100%; height: 30px; }
  .august-lockup__mark--ma { display: flex; }
  .august-lockup__mark--ma img { width: auto; max-width: 100%; height: 26px; }
}
@media (max-width: 360px) {
  .header-brand:has(.august-lockup) { padding-right: 138px; }
  .header-brand:has(.august-lockup) .brand-lockup .brand-title::before { font-size: .78rem; white-space: normal; }
  .header-brand:has(.august-lockup) .brand-lockup .brand-title::after { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .august-lockup__flag animate { display: none; }
}


/* === Apparatus dossier system: judges, registry, secretariat, and unit desks === */
.apparatus-editorial {
  --dossier-paper: #fffdf8;
  --dossier-line: rgba(143, 31, 11, 0.16);
  --dossier-rule: rgba(185, 143, 36, 0.45);
  --dossier-ink: #46180d;
  --dossier-plate: linear-gradient(168deg, #8f1f0b, #5c1206);
}

.apparatus-editorial .roster-lead {
  max-width: 66ch;
  margin: 0 0 clamp(30px, 4.5vw, 54px);
  border-left: 1px solid var(--color-primary);
  padding-left: clamp(16px, 2.5vw, 28px);
  color: var(--color-ink);
  font-size: clamp(1.04rem, 1.4vw, 1.2rem);
  line-height: 1.75;
  text-align: start;
  hyphens: none;
}

.apparatus-editorial .roster-section {
  margin: 0 0 clamp(38px, 5.5vw, 66px);
}

.apparatus-editorial .roster-section-head {
  align-items: end;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dossier-rule);
}

.apparatus-editorial .roster-section-head h2 {
  padding-left: 0;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  letter-spacing: -0.015em;
}

.apparatus-editorial .roster-section-head h2::before {
  display: none;
}

.apparatus-editorial .roster-count {
  border: 1px solid var(--dossier-rule);
  border-radius: 999px;
  background: transparent;
  padding: 4px 11px;
  color: #6b4c17;
  font-variant-numeric: tabular-nums;
}

.apparatus-editorial .roster-featured {
  grid-template-columns: minmax(168px, 196px) minmax(0, 1fr);
  gap: clamp(18px, 2.8vw, 38px);
  align-items: center;
  border: 1px solid rgba(70, 16, 8, 0.4);
  border-radius: 20px;
  background:
    radial-gradient(120% 150% at 86% -25%, rgba(243, 201, 107, 0.22), transparent 58%),
    var(--dossier-plate);
  padding: clamp(16px, 2.2vw, 26px);
  box-shadow: 0 22px 44px rgba(70, 16, 8, 0.22);
  color: #fff;
}

.apparatus-editorial .roster-featured::before {
  display: none;
}

.apparatus-editorial .roster-featured-photo {
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 14px 28px rgba(20, 6, 2, 0.32);
}

.apparatus-editorial .roster-featured-photo img {
  min-height: 0;
  height: auto;
  border-radius: 9px;
  aspect-ratio: 3 / 4;
  object-position: top center;
}

.apparatus-editorial .roster-featured-body {
  gap: 11px;
  padding: clamp(4px, 1.4vw, 16px) clamp(2px, 1.2vw, 12px);
}

.apparatus-editorial .roster-eyebrow {
  color: #f6d489;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
}

.apparatus-editorial .roster-eyebrow::before {
  width: 18px;
  height: 1px;
  background: #f6d489;
}

.apparatus-editorial .roster-featured-name {
  max-width: 24ch;
  color: #fff;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.apparatus-editorial .roster-degree {
  top: auto;
  right: 12px;
  bottom: 12px;
  border-radius: 6px;
  background: #f3c96b;
  padding: 3px 8px;
  color: #46180d;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(20, 6, 2, 0.28);
}

.apparatus-editorial .roster-featured .roster-role {
  border: 1px solid rgba(243, 201, 107, 0.5);
  background: rgba(255, 255, 255, 0.09);
  color: #fbe6b6;
}

.apparatus-editorial .roster-featured .roster-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(243, 201, 107, 0.34);
  border-top-style: solid;
}

.apparatus-editorial .roster-featured .roster-meta > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  border: 0;
  padding: 0;
}
.apparatus-editorial .roster-featured .roster-meta dt {
  color: #e9c987;
}

.apparatus-editorial .roster-featured .roster-meta dd {
  color: #fff;
  font-size: 0.92rem;
}

.apparatus-editorial .roster-grid {
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.apparatus-editorial .roster-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  overflow: visible;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--dossier-paper);
  padding: 15px;
  box-shadow: 0 10px 22px rgba(29, 39, 48, 0.07);
  cursor: pointer;
}

.apparatus-editorial .roster-card:hover {
  transform: translateY(-2px);
  border-color: var(--dossier-rule);
  box-shadow: 0 18px 32px rgba(29, 39, 48, 0.13);
}

.apparatus-editorial .roster-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.apparatus-editorial .roster-photo {
  position: relative;
  overflow: hidden;
  width: auto;
  border-radius: 10px;
  background: var(--dossier-plate);
  box-shadow: 0 8px 18px rgba(29, 39, 48, 0.16);
}

.apparatus-editorial .roster-photo img {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  object-fit: cover;
  object-position: top center;
}

.apparatus-editorial .roster-body {
  gap: 9px;
  padding: 1px 0 0;
}

.apparatus-editorial .roster-name {
  color: var(--dossier-ink);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.28;
}

.apparatus-editorial .roster-role-row {
  gap: 6px;
}

.apparatus-editorial .roster-role {
  border-radius: 999px;
  background: var(--color-primary);
  padding: 5px 11px;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.apparatus-editorial .roster-role-row .roster-role ~ .roster-role {
  border: 1px solid rgba(185, 143, 36, 0.45);
  background: rgba(185, 143, 36, 0.14);
  color: #54401b;
}

.apparatus-editorial .roster-featured .roster-role-row .roster-role ~ .roster-role {
  border-color: rgba(243, 201, 107, 0.5);
  background: rgba(255, 255, 255, 0.09);
  color: #fbe6b6;
}

.apparatus-editorial .roster-card .roster-body > .roster-role,
.apparatus-editorial .roster-card .roster-role-row > .roster-role:not(.roster-role-status) {
  align-self: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--color-primary);
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: none;
}

.apparatus-editorial .roster-card .roster-role-row {
  gap: 5px 8px;
  align-items: baseline;
}

.apparatus-editorial .roster-card .roster-role-row > .roster-role-status,
.apparatus-editorial .roster-card .roster-role-row > .roster-role:not(.roster-role-status) ~ .roster-role:not(.roster-role-status) {
  align-self: baseline;
  border: 1px solid rgba(185, 143, 36, 0.45);
  border-radius: 999px;
  background: rgba(185, 143, 36, 0.16);
  padding: 3px 9px;
  color: #54401b;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: none;
}

body.is-dark .apparatus-editorial .roster-card .roster-body > .roster-role,
body.is-dark .apparatus-editorial .roster-card .roster-role-row > .roster-role:not(.roster-role-status) {
  background: transparent;
  color: #e3cfa4;
}

body.is-dark .apparatus-editorial .roster-card .roster-role-row > .roster-role-status,
body.is-dark .apparatus-editorial .roster-card .roster-role-row > .roster-role:not(.roster-role-status) ~ .roster-role:not(.roster-role-status) {
  border-color: rgba(243, 201, 107, 0.42);
  background: rgba(243, 201, 107, 0.14);
  color: #f3c96b;
}

.dossier-roles li:not(.dossier-role-status) {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--color-primary);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.4;
}

.dossier-roles li.dossier-role-status,
.dossier-roles li:not(.dossier-role-status) ~ li:not(.dossier-role-status) {
  border: 1px solid rgba(185, 143, 36, 0.45);
  border-radius: 999px;
  background: rgba(185, 143, 36, 0.15);
  padding: 5px 11px;
  color: #54401b;
  font-size: 0.76rem;
  font-weight: 700;
}

body.is-dark .dossier-roles li:not(.dossier-role-status) {
  background: transparent;
  color: #f3c96b;
}

body.is-dark .dossier-roles li.dossier-role-status,
body.is-dark .dossier-roles li:not(.dossier-role-status) ~ li:not(.dossier-role-status) {
  border-color: rgba(243, 201, 107, 0.42);
  background: rgba(243, 201, 107, 0.14);
  color: #f3c96b;
}

.dossier-roles {
  align-items: baseline;
}

.apparatus-editorial .roster-meta {
  gap: 0;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--dossier-line);
  border-top-style: solid;
  font-size: 0.79rem;
}

.apparatus-editorial .roster-meta > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  justify-content: initial;
  padding: 5px 0;
}

.apparatus-editorial .roster-meta > div + div {
  border-top: 1px dotted var(--color-line);
}

.apparatus-editorial .roster-meta dt {
  color: var(--color-muted);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.apparatus-editorial .roster-meta dd {
  color: var(--color-ink);
  text-align: start;
  font-variant-numeric: tabular-nums;
}

/* NIP selalu satu identitas utuh dan memakai garis kolom yang sama dengan
   Pangkat/Gol. pada seluruh dossier aparatur. */
.apparatus-editorial .roster-meta > div:first-child dd {
  min-width: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(0.68rem, 0.72vw, 0.79rem);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.apparatus-directory .roster-section-staff .roster-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.apparatus-directory .roster-section-staff .roster-card {
  grid-template-columns: 104px minmax(0, 1fr);
}

.apparatus-directory .roster-section-staff .roster-meta > div,
.apparatus-unit .roster-section-staff .roster-meta > div {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 4px 10px;
}

.apparatus-unit .roster-section-staff .roster-card {
  grid-template-columns: 104px minmax(0, 1fr);
}

.apparatus-unit {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  grid-auto-flow: row dense;
  gap: 0 clamp(28px, 4.5vw, 60px);
  align-items: start;
}

.apparatus-unit > .roster-lead {
  grid-column: 1 / -1;
}

.apparatus-unit > .roster-section:has(.roster-card) {
  grid-column: 1;
}

.apparatus-unit > .roster-section:has(.unit-scope) {
  grid-column: 2;
  grid-row: 2;
}

.apparatus-unit > .roster-section:not(:has(.roster-card)):not(:has(.unit-scope)),
.apparatus-unit > .content-note {
  grid-column: 1 / -1;
}

.apparatus-unit .roster-grid {
  grid-template-columns: 1fr;
}

.apparatus-unit .unit-scope,
.apparatus-unit .unit-scope-2 {
  grid-template-columns: 1fr;
  gap: 10px;
}

.apparatus-unit .unit-scope li {
  min-height: 0;
  border-color: var(--color-line);
  border-radius: 12px;
  background: var(--dossier-paper);
  padding: 15px 16px 15px 50px;
}

.apparatus-unit .unit-scope li::before {
  left: 15px;
  top: 15px;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
}

body.is-dark .apparatus-editorial {
  --dossier-paper: #19232b;
  --dossier-line: rgba(243, 201, 107, 0.2);
  --dossier-rule: rgba(243, 201, 107, 0.36);
  --dossier-ink: #f3c96b;
}

body.is-dark .apparatus-editorial .roster-card,
body.is-dark .apparatus-unit .unit-scope li {
  border-color: #46515a;
  background: var(--dossier-paper);
}

body.is-dark .apparatus-editorial .roster-count {
  background: transparent;
  color: #f3c96b;
}

body.is-dark .apparatus-editorial .roster-meta dd {
  color: #edf2f7;
}

body.is-dark .apparatus-editorial .roster-role {
  background: #f3c96b;
  color: #2b1206;
}

body.is-dark .apparatus-editorial .roster-role-row .roster-role ~ .roster-role {
  border-color: rgba(243, 201, 107, 0.42);
  background: rgba(243, 201, 107, 0.14);
  color: #f3c96b;
}

@media (max-width: 980px) {
  .apparatus-unit {
    grid-template-columns: 1fr;
  }

  .apparatus-unit > .roster-section:has(.unit-scope) {
    grid-column: 1;
    grid-row: 2;
  }

  .apparatus-unit > .roster-section:has(.roster-card) {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  .apparatus-editorial .roster-featured {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 14px;
  }

  .apparatus-editorial .roster-featured-photo img {
    aspect-ratio: 3 / 4;
    max-height: none;
  }

  .apparatus-editorial .roster-featured-body {
    padding: 2px 2px 4px;
  }

  .apparatus-editorial .roster-featured-name {
    font-size: 1.26rem;
  }

  .apparatus-editorial .roster-featured .roster-meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .apparatus-editorial .roster-grid,
  .apparatus-directory .roster-section-staff .roster-grid {
    grid-template-columns: 1fr;
  }

  .apparatus-editorial .roster-card,
  .apparatus-directory .roster-section-staff .roster-card {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .apparatus-editorial .roster-meta > div,
  .apparatus-directory .roster-section-staff .roster-meta > div {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .apparatus-editorial .roster-section-head h2 {
    font-size: 1.22rem;
  }
}

@media (max-width: 560px) {
  .apparatus-editorial .roster-featured {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .apparatus-editorial .roster-featured-photo {
    width: 152px;
  }

  .apparatus-editorial .roster-featured-name {
    max-width: none;
    font-size: 1.4rem;
  }

  .apparatus-editorial .roster-card,
  .apparatus-directory .roster-section-staff .roster-card {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 13px;
    padding: 13px;
  }


  .apparatus-editorial .roster-name {
    font-size: 0.98rem;
  }

  .apparatus-editorial .roster-role {
    padding: 4px 9px;
    font-size: 0.66rem;
  }

  .apparatus-editorial .roster-body {
    gap: 8px;
    padding: 0;
  }
}
@media (max-width: 430px) {
  .apparatus-editorial .roster-card,
  .apparatus-directory .roster-section-staff .roster-card,
  .apparatus-unit .roster-section-staff .roster-card {
    grid-template-columns: 1fr;
  }
  .apparatus-editorial .roster-card .roster-photo,
  .apparatus-directory .roster-section-staff .roster-card .roster-photo,
  .apparatus-unit .roster-section-staff .roster-card .roster-photo {
    width: 118px;
  }
  .apparatus-editorial .roster-meta > div:first-child dd {
    font-size: 0.76rem;
  }
}

@media (max-width: 700px) {
  .apparatus-editorial .roster-featured .roster-meta > div:first-child {
    grid-column: 1 / -1;
  }
}

.apparatus-editorial .roster-open-hint {
  position: absolute;
  right: 6px;
  top: 6px;
  display: grid;
  place-items: center;

  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(70, 16, 8, 0.82);
  color: #f6d489;
  opacity: 0;
  transition: opacity 0.18s ease;
}
@media (max-width: 360px) {
  .apparatus-editorial .roster-featured .roster-meta > div {
    grid-template-columns: 72px minmax(0, 1fr);
    gap-inline: 8px;
  }
}

.apparatus-editorial .roster-card:hover .roster-open-hint,
.apparatus-editorial .roster-card:focus-visible .roster-open-hint,
.apparatus-editorial .roster-featured:hover .roster-open-hint,
.apparatus-editorial .roster-featured:focus-visible .roster-open-hint {
  opacity: 1;
}

.apparatus-editorial .roster-featured {
  cursor: pointer;
}

.apparatus-editorial .roster-featured:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

body.is-dark .apparatus-editorial .roster-featured {
  border-color: rgba(243, 201, 107, 0.32);
  background:
    radial-gradient(120% 150% at 86% -25%, rgba(243, 201, 107, 0.2), transparent 58%),
    var(--dossier-plate);
}

body.is-dark .apparatus-editorial .roster-featured-name,
body.is-dark .apparatus-editorial .roster-featured .roster-meta dd {
  color: #fff;
}

body.is-dark .apparatus-editorial .roster-featured .roster-role {
  border-color: rgba(243, 201, 107, 0.5);
  background: rgba(255, 255, 255, 0.1);
  color: #fbe6b6;
}

/* Personnel dossier detail overlay */
.dossier-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(24, 8, 3, 0.82);
  padding: clamp(14px, 4vw, 40px);
  animation: dossier-fade 0.22s ease-out;
}

.dossier-lightbox[hidden] {
  display: none;
}

@keyframes dossier-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dossier-card {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid rgba(185, 143, 36, 0.4);
  border-radius: 20px;
  background: var(--color-surface, #fff);
  padding: clamp(18px, 2.6vw, 30px);
  box-shadow: 0 30px 60px rgba(12, 4, 1, 0.45);
}

.dossier-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--dossier-plate, #8f1f0b);
  box-shadow: 0 14px 28px rgba(29, 39, 48, 0.2);
}

.dossier-card figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}

.dossier-card .dossier-degree {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 6px;
  background: #f3c96b;
  padding: 4px 9px;
  color: #46180d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dossier-body {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.content-primary .dossier-body h2 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-align: start;
}

.dossier-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dossier-roles li {
  border-radius: 999px;
  background: var(--color-primary);
  padding: 6px 12px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}

.dossier-roles li + li {
  border: 1px solid rgba(185, 143, 36, 0.45);
  background: rgba(185, 143, 36, 0.15);
  color: #54401b;
}

.dossier-meta {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.88rem;
}

.dossier-meta > div {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dotted var(--color-line);
}

.dossier-meta dt {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dossier-meta dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dossier-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.dossier-close:hover,
.dossier-close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

body.dossier-lightbox-open {
  overflow: hidden;
}

body.is-dark .dossier-card {
  border-color: #46515a;
  background: #19232b;
}

body.is-dark .content-primary .dossier-body h2 {
  color: #f3c96b;
}

body.is-dark .dossier-meta dd {
  color: #edf2f7;
}

body.is-dark .dossier-roles li {
  background: #f3c96b;
  color: #2b1206;
}

body.is-dark .dossier-roles li + li {
  border-color: rgba(243, 201, 107, 0.42);
  background: rgba(243, 201, 107, 0.14);
  color: #f3c96b;
}

@media (max-width: 620px) {
  .dossier-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dossier-card figure {
    width: min(200px, 60%);
  }
}

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

  .apparatus-editorial .roster-open-hint {
    transition: none;
  }
}

body.is-dark .apparatus-editorial .roster-featured .roster-role-row .roster-role ~ .roster-role {
  border-color: rgba(243, 201, 107, 0.5);
  background: rgba(255, 255, 255, 0.1);
  color: #fbe6b6;
}

/* Second navigation tier: the units that belong to the open branch */
.svc-subnav--unit {
  align-items: center;
  margin-top: -6px;
  border-top: 1px solid rgba(185, 143, 36, 0.3);
  padding-top: 12px;
}

.svc-subnav__label {
  color: var(--color-primary);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.svc-subnav--unit a {
  border-color: rgba(185, 143, 36, 0.42);
  background: rgba(185, 143, 36, 0.08);
}

body.is-dark .svc-subnav--unit {
  border-top-color: rgba(243, 201, 107, 0.28);
}

body.is-dark .svc-subnav__label {
  color: #f3c96b;
}

/* Unit index on a parent profile page */
.unit-index {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.unit-index li {
  border-bottom: 1px solid var(--color-line);
}

.unit-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px clamp(14px, 2vw, 26px);
  align-items: baseline;
  padding: 15px 2px;
  color: var(--color-ink);
  text-decoration: none;
}

.unit-index strong {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.3;
}

.unit-index .unit-index__lead {
  grid-column: 1;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.55;
}

.unit-index .unit-index__officer {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border: 1px solid rgba(185, 143, 36, 0.4);
  border-radius: 999px;
  background: rgba(185, 143, 36, 0.12);
  padding: 5px 11px;
  color: #54401b;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.unit-index a:hover strong,
.unit-index a:focus-visible strong {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.is-dark .unit-index,
body.is-dark .unit-index li {
  border-color: #46515a;
}

body.is-dark .unit-index strong {
  color: #f3c96b;
}

body.is-dark .unit-index .unit-index__officer {
  border-color: rgba(243, 201, 107, 0.42);
  background: rgba(243, 201, 107, 0.14);
  color: #f3c96b;
}

@media (max-width: 620px) {
  .unit-index a {
    grid-template-columns: 1fr;
    padding: 13px 2px;
  }

  .unit-index .unit-index__officer {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 5px;
    white-space: normal;
  }
}