/*
  YSMB design system v2: DASAR + KOMPONEN
  Butuh tokens-v2.css dimuat lebih dulu. Spesifikasi: _output/07b-design-system-v2.md
  Kelas memakai bahasa Indonesia, pola BEM sederhana (blok__elemen--varian).
  Kelas `js` pada <html> (diberi skrip kecil di <head>) membedakan keadaan dengan dan tanpa JavaScript.
*/

/* =========================================================
   1. Dasar
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%;            /* 18px, mengikuti pengaturan huruf peramban */
  -webkit-text-size-adjust: 100%;
  /* T-03: ruang yang tidak boleh ditutup header menempel (atas) dan bilah WA ponsel (bawah) saat elemen difokus atau
     dituju jangkar (WCAG 2.4.11). Nilai cadangan ini dalam rem supaya ikut membesar; situs.js menimpanya dengan tinggi terukur. */
  scroll-padding-top: calc(var(--tinggi-header-ponsel) + 1rem);
  scroll-padding-bottom: calc(var(--tinggi-bilah-wa-ponsel) + 1rem);
}

/* T-02: seluruh tata letak responsif memakai @container halaman, BUKAN @media. Satuan em pada @media mengikuti ukuran huruf
   awal peramban saja, sedangkan em pada query kontainer mengikuti ukuran huruf body (1rem). Jadi saat huruf diperbesar, lebar
   yang tersedia dalam "em" mengecil dan tata letak berpindah ke bentuk ponsel lebih awal, tanpa JavaScript.
   Kalau peramban tidak mengenal query kontainer, tampilan ponsel (satu kolom, menu Menu) dipakai di semua lebar: tetap berfungsi.
   Kontainer ini hanya membatasi lebar (inline-size), tidak membuat elemen position:fixed terjebak. */
body {
  container: halaman / inline-size;
  margin: 0;
  min-width: 320px;
  background: var(--warna-latar);
  color: var(--warna-teks);
  font-family: var(--huruf-isi);
  font-size: var(--teks-m);
  font-weight: var(--tebal-normal);
  line-height: var(--tinggi-baris-isi);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;  /* kata panjang tidak mendorong halaman melebar saat huruf diperbesar (T-02) */
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4 {
  margin: 0 0 var(--jarak-3);
  font-family: var(--huruf-judul);
  font-weight: var(--tebal-judul);
  line-height: var(--tinggi-baris-judul);
  color: var(--warna-teks);
  text-wrap: balance;
}
h1 { font-size: var(--teks-3xl); }
h2 { font-size: var(--teks-2xl); }
h3 { font-size: var(--teks-xl); }
h4 { font-size: var(--teks-l); }
@container halaman (max-width: 35.49em) {
  h1 { font-size: 1.778rem; }  /* 32px */
  h2 { font-size: 1.5rem; }    /* 27px */
  h3 { font-size: 1.278rem; }  /* 23px */
  h4 { font-size: 1.111rem; }  /* 20px */
}

p { margin: 0 0 var(--jarak-4); max-width: var(--lebar-baris-maks); }
.paragraf-pembuka { font-size: var(--teks-l); }
.teks-lembut { color: var(--warna-teks-lembut); }
.teks-kecil { font-size: var(--teks-s); }

a { color: var(--warna-teks-merek); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--warna-teks-merek-aktif); text-decoration-thickness: 3px; }
a.tautan-luar { color: var(--warna-teks-biru); }

/* Fokus: dua lapis, tidak pernah dimatikan */
:focus { outline: none; }
:focus-visible {
  outline: var(--fokus-lebar) solid var(--fokus-cincin);
  outline-offset: var(--fokus-jarak);
  box-shadow: 0 0 0 var(--fokus-halo-lebar) var(--fokus-halo);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lewati {
  position: absolute; left: var(--jarak-2); top: var(--jarak-2); z-index: 300;
  padding: var(--jarak-3) var(--jarak-5); min-height: var(--sentuh-min);
  display: inline-flex; align-items: center;
  background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat-putih);
  font-weight: var(--tebal-tegas); border-radius: var(--radius-sedang);
  transform: translateY(-200%);
  --fokus-cincin: var(--fokus-cincin-pekat); --fokus-halo: var(--fokus-halo-pekat);
}
.lewati:focus { transform: translateY(0); }

.wadah { width: 100%; max-width: calc(var(--lebar-isi-maks) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.bagian { padding-block: var(--jarak-8); }
@container halaman (min-width: 55.5em) { .bagian { padding-block: var(--jarak-10); } }
.bagian--tenang { background: var(--warna-latar-tenang); }
.bagian--tint { background: var(--warna-latar-tint); }
.blok-pekat { background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat); padding-block: var(--jarak-8); }
.blok-pekat :is(h1, h2, h3, h4) { color: var(--warna-teks-di-pekat-putih); }
.blok-pekat a { color: var(--warna-teks-di-pekat-putih); }

/* Ruang bawah supaya bilah WA melayang tidak menutup isi: ditaruh di footer (bagian 14), karena query kontainer tidak bisa menata body itu sendiri */

/* =========================================================
   2. Tombol
   ========================================================= */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jarak-2);
  min-height: var(--sentuh-besar); min-width: var(--sentuh-min);
  padding: var(--jarak-3) var(--jarak-5);
  border: var(--garis-tebal) solid transparent; border-radius: var(--radius-sedang);
  font-family: var(--huruf-isi); font-size: var(--teks-m); font-weight: var(--tebal-tegas); line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--transisi), color var(--transisi), border-color var(--transisi);
}
.tombol:hover { text-decoration: none; }

.tombol--utama { background: var(--warna-merek); color: var(--warna-teks-di-pekat-putih); }
.tombol--utama:hover { background: var(--warna-merek-hover); color: var(--warna-teks-di-pekat-putih); }
.tombol--utama:active { background: var(--warna-merek-active); }

/* Aksen limau: teks WAJIB hitam. Dipakai untuk "Gabung" */
.tombol--aksen { background: var(--warna-limau); color: var(--warna-teks-di-limau); border-color: var(--warna-limau); }
.tombol--aksen:hover { background: var(--warna-limau-hover); border-color: var(--warna-limau-hover); color: var(--warna-teks-di-limau); }
.tombol--aksen:active { background: var(--warna-limau-active); border-color: var(--warna-teks-di-limau); box-shadow: inset 0 0 0 2px var(--warna-teks-di-limau); }

.tombol--garis { background: var(--warna-latar-kartu); color: var(--warna-teks-merek); border-color: var(--warna-merek); }
.tombol--garis:hover { background: var(--warna-latar-tint); color: var(--warna-teks-merek-aktif); border-color: var(--warna-merek-hover); }
.tombol--garis:active { background: var(--warna-latar-muda); }

.tombol[disabled], .tombol[aria-disabled="true"] {
  background: var(--warna-latar-tenang); color: var(--warna-teks-lembut); border-color: var(--warna-garis); cursor: not-allowed;
}

/* =========================================================
   3. Bilah atas desktop dan bilah slogan ponsel
   ========================================================= */
/* Bilah slogan ponsel: 40px, ikut menggulung (G2, G3) */
.bilah-slogan {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tinggi-bilah-slogan-ponsel); padding: var(--jarak-1) var(--gutter);
  background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat);
  /* T-09: 18 px (--teks-m). Di layar sempit slogan membungkus jadi dua baris seimbang, bilah menjadi sekitar 56 px dan tidak menempel */
  font-size: var(--teks-m); font-weight: var(--tebal-sedang); line-height: 1.3; text-align: center;
}
.bilah-slogan p { margin: 0; max-width: none; text-wrap: balance; }

/* Bilah atas desktop: slogan di kiri/tengah, nomor admin di kanan. Tidak menempel (G2). */
.bilah-atas { display: none; }
@container halaman (min-width: 55.5em) {
  .bilah-slogan { display: none; }
  .bilah-atas {
    display: block;
    background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat);
    font-size: var(--teks-m);
  }
  .bilah-atas__dalam {
    display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-5);
    min-height: var(--tinggi-bilah-atas);
  }
  .bilah-atas__slogan { margin: 0; max-width: none; font-weight: var(--tebal-sedang); font-size: var(--teks-m); }
  .bilah-atas__admin { display: flex; align-items: center; gap: var(--jarak-3); margin: 0; max-width: none; }
  .bilah-atas__nomor {
    display: inline-flex; align-items: center; min-height: var(--sentuh-min); padding-inline: var(--jarak-3);
    color: var(--warna-teks-di-pekat-putih); font-weight: var(--tebal-tegas); font-size: var(--teks-m);
    text-decoration: underline; text-underline-offset: 4px;
  }
  .bilah-atas__nomor:hover { background: var(--warna-latar-pekat-3); color: var(--warna-teks-di-pekat-putih); }
}

/* =========================================================
   4. Header menempel, menu desktop, dropdown satu tingkat
   ========================================================= */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat-putih);
  box-shadow: 0 1px 0 var(--warna-latar-pekat-2);  /* garis tipis tanpa menambah tinggi: header tepat 64 / 80 px (G2) */
}
.header__dalam {
  display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-3);
  min-height: var(--tinggi-header-ponsel);
}
/* T-02: huruf sangat besar (lebar kurang dari 16 em, misalnya 320 px dengan huruf 200%): header tidak lagi menempel,
   merek memakai satu baris penuh dan tombol Menu satu baris penuh di bawahnya, jadi nama yayasan tidak pernah menimpa tombol
   dan header tidak memakan layar saat menggulir. Layar pendek (ponsel miring) juga tidak menempel. */
@container halaman (max-width: 16em) {
  .header { position: static; }
  .header__dalam { flex-wrap: wrap; padding-block: var(--jarak-3); row-gap: var(--jarak-3); }
  .header__merek { flex: 1 1 100%; }
  .header__nama { max-width: none; }
  .tombol-menu { flex: 1 1 100%; justify-content: center; }
}
@media (max-height: 30em) { .header { position: static; } }
.header__merek {
  flex: 1 1 auto; min-width: 0;  /* nama yayasan yang mengalah (membungkus), bukan tombol Menu */
  display: flex; align-items: center; gap: var(--jarak-3); min-height: var(--sentuh-min);
  color: var(--warna-teks-di-pekat-putih); text-decoration: none;
}
.header__merek:hover { color: var(--warna-teks-di-pekat-putih); text-decoration: none; }
/* Logo PNG transparan langsung di atas hijau, tanpa kotak putih */
/* Logo asli berwarna hijau tua di atas transparan: hilang di atas hijau header. Diberi piringan putih bundar (kontras logo terhadap latar putih terjaga). */
.header__logo, .footer__logo {
  flex: none; box-sizing: content-box; object-fit: contain;
  background: var(--warna-latar-kartu); border-radius: 50%; padding: 3px;
}
.header__logo { width: 48px; height: 48px; }
/* Nama yayasan: satu teks, dibungkus seimbang jadi dua baris (jangan elipsis). Huruf judul biasa, bukan kapital semua */
.header__nama {
  display: block; max-width: 12rem; min-width: 0; overflow-wrap: anywhere; font-family: var(--huruf-judul);
  font-size: var(--teks-s); font-weight: var(--tebal-tegas); line-height: 1.25; text-wrap: balance;
}
.header__nama small { font-size: var(--teks-s); font-weight: var(--tebal-normal); color: var(--warna-teks-di-pekat-lembut); }

/* Tombol Menu ponsel: kata + ikon, 56px */
.tombol-menu {
  flex: none;  /* jangan menyusut: "Tutup" lebih lebar dari "Menu" dan tidak boleh keluar dari tepi tombol */
  display: inline-flex; align-items: center; gap: var(--jarak-2);
  min-height: var(--sentuh-besar); min-width: var(--sentuh-besar); padding: 0 var(--jarak-4);
  background: transparent; color: var(--warna-teks-di-pekat-putih);
  border: var(--garis-tebal) solid var(--warna-teks-di-pekat-putih); border-radius: var(--radius-sedang);
  font-size: var(--teks-m); font-weight: var(--tebal-tegas); cursor: pointer;
  transition: background-color var(--transisi);
}
.tombol-menu:hover { background: var(--warna-latar-pekat-2); }
.tombol-menu:active { background: var(--warna-latar-pekat-3); }
/* T-11: ikon dibuat dari BORDER (bukan gradien atau latar), karena mode kontras tinggi menghapus gambar latar dan mengganti
   warna latar, tetapi tetap menggambar border dengan warna teks. Tertutup: tiga batang. Terbuka: huruf X dari dua batang miring. */
.tombol-menu__ikon { position: relative; flex: none; width: 22px; height: 16px; border-block: 3px solid currentColor; }
.tombol-menu__ikon::before, .tombol-menu__ikon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -1.5px; border-top: 3px solid currentColor;
}
.tombol-menu__ikon::after { display: none; }
.tombol-menu[aria-expanded="true"] .tombol-menu__ikon { border-block: 0; }
.tombol-menu[aria-expanded="true"] .tombol-menu__ikon::before { transform: rotate(45deg); }
.tombol-menu[aria-expanded="true"] .tombol-menu__ikon::after { display: block; transform: rotate(-45deg); }

/* Tanpa JS: tombol buka/tutup tidak dibuat, daftar menu tampil terbuka (08b 5.2) */
html:not(.js) .tombol-menu, html:not(.js) .menu__sub-tombol, html:not(.js) .akordeon__tombol { display: none; }
.tombol-menu__teks { min-width: 5ch; text-align: left; }

/* ----- Menu desktop ----- */
.menu { display: none; }
.menu__daftar { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--jarak-1); }
.menu__item { position: relative; display: flex; align-items: stretch; }
.menu__tautan, .menu__sub-tombol {
  display: inline-flex; align-items: center; min-height: var(--sentuh-besar);
  padding: 0 var(--jarak-3); background: transparent; border: 0; border-radius: 0;
  color: var(--warna-teks-di-pekat-putih); font-family: var(--huruf-isi); font-size: var(--teks-m); font-weight: var(--tebal-sedang);
  text-decoration: none; cursor: pointer; border-bottom: 4px solid transparent;
  transition: background-color var(--transisi), border-color var(--transisi);
}
.menu__tautan:hover, .menu__sub-tombol:hover { background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat-putih); text-decoration: none; border-bottom-color: var(--warna-limau); }
.menu__tautan:active, .menu__sub-tombol:active { background: var(--warna-latar-pekat-3); }
/* Aktif: garis limau 4px + tebal (tidak bergantung pada warna saja) */
.menu__tautan[aria-current="page"], .menu__item--aktif > .menu__tautan { border-bottom-color: var(--warna-limau); font-weight: var(--tebal-judul); }
.menu__sub-tombol { padding-inline: var(--jarak-2); min-width: var(--sentuh-min); justify-content: center; }
/* T-10: panah dibuat dari dua border currentColor yang diputar (bukan segitiga dari border transparan, yang menjadi balok di mode kontras tinggi) */
.menu__panah { width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--transisi); }
.menu__sub-tombol[aria-expanded="true"] .menu__panah { transform: rotate(-135deg) translateY(-3px); }

/* Lebar 1024 sampai 1200: rapatkan jarak sisi item agar enam induk + tombol Gabung muat tanpa meluap */
@container halaman (min-width: 55.5em) and (max-width: 66.5em) {
  .menu__tautan { padding-inline: var(--jarak-2); }
  .menu__daftar { gap: 0; }
  .header__dalam { gap: var(--jarak-2); }
  .header__gabung { padding-inline: var(--jarak-4); }
}

/* Dropdown: panel putih, satu tingkat, item >= 48px */
.dropdown {
  list-style: none; margin: 0; padding: var(--jarak-2) 0;
  position: absolute; top: 100%; left: 0; min-width: 260px; z-index: var(--z-dropdown);
  background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-radius: 0 0 var(--radius-sedang) var(--radius-sedang);
  box-shadow: var(--bayang-panel);
  visibility: hidden; opacity: 0;
  /* Tutup dengan jeda 300ms supaya tidak lepas karena jari/kursor goyang. Buka seketika. */
  transition: opacity var(--transisi) var(--jeda-tutup-dropdown), visibility 0s linear var(--jeda-tutup-dropdown);
}
.dropdown__tautan {
  display: flex; align-items: center; min-height: var(--sentuh-min); padding: var(--jarak-2) var(--jarak-5);
  color: var(--warna-teks-merek); font-size: var(--teks-m); font-weight: var(--tebal-sedang); text-decoration: none;
  border-left: 4px solid transparent;
  --fokus-cincin: var(--fokus-cincin-terang); --fokus-halo: var(--fokus-halo-terang);
}
.dropdown__tautan:hover { background: var(--warna-latar-tint); color: var(--warna-teks-merek-aktif); border-left-color: var(--warna-merek); text-decoration: none; }
.dropdown__tautan[aria-current="page"] { border-left-color: var(--warna-merek); font-weight: var(--tebal-judul); }
.dropdown :focus-visible { outline-offset: -3px; box-shadow: none; }

/* Tanpa JS: hover dan fokus-dalam. Dengan JS: kelas .terbuka / aria-expanded */
html:not(.js) .menu__item.punya-sub:hover > .dropdown,
html:not(.js) .menu__item.punya-sub:focus-within > .dropdown,
.menu__item.punya-sub.terbuka > .dropdown {
  visibility: visible; opacity: 1;
  transition: opacity var(--transisi), visibility 0s;
}
/* Dengan JS jeda 150ms buka dan 300ms tutup diatur skrip (menu.js), jadi transisi CSS tanpa tunda */
.js .dropdown { transition: opacity var(--transisi), visibility 0s linear var(--transisi); }
/* Dropdown item terakhir rata kanan agar tidak keluar dari layar */
.menu__item:nth-last-child(-n+2) > .dropdown { left: auto; right: 0; }
.dropdown__pemisah { margin: var(--jarak-2) var(--jarak-5); border: 0; border-top: 1px solid var(--warna-garis-halus); height: 0; list-style: none; padding: 0; }

/* Tombol "Gabung" di header desktop */
.header__gabung { display: none; }

@container halaman (min-width: 55.5em) {
  .header__dalam { min-height: var(--tinggi-header-desktop); }
  .header__logo { width: 60px; height: 60px; }
  .menu { display: block; }
  .tombol-menu { display: none; }
  .header__gabung { display: inline-flex; }
}

/* =========================================================
   5. Panel menu ponsel + akordeon
   ========================================================= */
.panel-menu {
  background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat-putih);
  padding: var(--jarak-3) var(--gutter) var(--jarak-6);
}
/* Dengan JS: panel penuh layar di bawah header, hidden sampai dibuka. Tanpa JS: daftar terbuka biasa di bawah header. */
.js .panel-menu {
  display: none;
  position: fixed; top: var(--panel-atas, var(--tinggi-header-ponsel)); right: 0; bottom: 0; left: 0; z-index: var(--z-panel-menu);
  overflow-y: auto; overscroll-behavior: contain;
}
.js .panel-menu.terbuka { display: block; }
body.menu-terbuka { overflow: hidden; }
@container halaman (min-width: 55.5em) { .panel-menu, .js .panel-menu { display: none; } }

.panel-menu__gabung { width: 100%; margin-top: var(--jarak-5); }

/* T-12: tanpa JavaScript panel menu tidak boleh menutupi isi. Ia menjadi satu deretan tautan ringkas (induk saja, sub-menu
   disembunyikan; semua halaman tetap terjangkau lewat halaman induk dan daftar "Jelajahi" di footer), tinggi sekitar 3 baris. */
html:not(.js) .panel-menu { padding-block: var(--jarak-2) var(--jarak-3); }
html:not(.js) .akordeon { display: flex; flex-wrap: wrap; gap: var(--jarak-2); }
html:not(.js) .akordeon__item { border: 0; }
html:not(.js) .akordeon__panel { display: none; }
html:not(.js) .akordeon__tautan { flex: none; min-height: var(--sentuh-min); padding: 0 var(--jarak-4); border: 2px solid var(--warna-teks-di-pekat-putih); border-radius: var(--radius-sedang); }
html:not(.js) .akordeon__tautan[aria-current="page"] { box-shadow: none; padding-left: var(--jarak-4); background: var(--warna-latar-pekat-3); }
html:not(.js) .panel-menu__gabung { width: auto; margin-top: var(--jarak-2); }

.akordeon { list-style: none; margin: 0; padding: 0; }
.akordeon__item { border-bottom: 1px solid var(--warna-garis-pekat); }
.akordeon__baris { display: flex; align-items: stretch; gap: var(--jarak-2); }
/* Induk dengan halaman sendiri: dua target terpisah, tautan + tombol buka */
.akordeon__tautan {
  flex: 1; display: flex; align-items: center; min-height: var(--sentuh-besar); padding: 0 var(--jarak-2);
  color: var(--warna-teks-di-pekat-putih); font-size: var(--teks-m); font-weight: var(--tebal-tegas); text-decoration: none;
}
.akordeon__tautan:hover { background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat-putih); }
.akordeon__tautan[aria-current="page"] { box-shadow: inset 6px 0 0 var(--warna-limau); padding-left: var(--jarak-4); font-weight: var(--tebal-judul); }
.akordeon__tombol {
  display: flex; align-items: center; justify-content: center; gap: var(--jarak-2);
  min-height: var(--sentuh-besar); min-width: var(--sentuh-besar); padding: 0 var(--jarak-3);
  background: transparent; border: 0; color: var(--warna-teks-di-pekat-putih);
  font-size: var(--teks-s); font-weight: var(--tebal-tegas); cursor: pointer;
}
.akordeon__tombol:hover { background: var(--warna-latar-pekat-2); }
.akordeon__tombol:active { background: var(--warna-latar-pekat-3); }
.akordeon__tombol::after {
  content: ""; width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform var(--transisi);
}
.akordeon__tombol[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-3px); }
.akordeon__panel { list-style: none; margin: 0 0 var(--jarak-3); padding: 0; background: var(--warna-latar-pekat-2); border-radius: var(--radius-sedang); }
.akordeon__panel[hidden] { display: none; }
.akordeon__panel a {
  display: flex; align-items: center; min-height: var(--sentuh-besar); padding: 0 var(--jarak-4);
  color: var(--warna-teks-di-pekat); text-decoration: none; font-size: var(--teks-m);
}
.akordeon__panel li + li { border-top: 1px solid var(--warna-garis-pekat); }
.akordeon__panel a:hover { background: var(--warna-latar-pekat-3); color: var(--warna-teks-di-pekat-putih); }

/* =========================================================
   6. Running text dengan tombol Jeda
   ========================================================= */
.teks-berjalan {
  display: flex; align-items: center; gap: var(--jarak-3);
  min-height: var(--tinggi-running-ponsel); padding-inline: var(--gutter);
  background: var(--warna-latar-tenang); color: var(--warna-teks);
  box-shadow: inset 0 -1px 0 var(--warna-garis-halus);  /* garis bawah tanpa menambah tinggi (G2: 44 px) */
  font-size: var(--teks-m);
}
@container halaman (min-width: 55.5em) { .teks-berjalan { min-height: var(--tinggi-running-desktop); } }
.teks-berjalan__jeda {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--jarak-2);
  min-height: var(--sentuh-min); padding: 0 var(--jarak-3);  /* T-08: 48 px, tanpa trik area sentuh tersembunyi */
  background: var(--warna-latar-kartu); color: var(--warna-teks-merek);
  border: var(--garis-tebal) solid var(--warna-merek); border-radius: var(--radius-sedang);
  font-size: var(--teks-s); font-weight: var(--tebal-tegas); cursor: pointer;
}
.teks-berjalan__jeda:hover { background: var(--warna-latar-tint); }
.teks-berjalan__jeda:active { background: var(--warna-latar-muda); }
.teks-berjalan__jeda[aria-pressed="true"] { background: var(--warna-merek); color: var(--warna-teks-di-pekat-putih); }
.teks-berjalan__jendela { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.teks-berjalan__jalur {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: berjalan var(--durasi-berjalan, var(--durasi-berjalan-bawaan)) linear infinite;
}
.teks-berjalan__kalimat { padding-right: 4rem; }
/* Dua salinan di dalam jalur, geser separuh lebar */
@keyframes berjalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Berhenti: tombol Jeda, hover, sentuh, atau fokus di dalam bilah */
.teks-berjalan[data-jeda="true"] .teks-berjalan__jalur,
.teks-berjalan[data-sentuh="true"] .teks-berjalan__jalur,
.teks-berjalan:focus-within .teks-berjalan__jalur { animation-play-state: paused; }
@media (hover: hover) { .teks-berjalan:hover .teks-berjalan__jalur { animation-play-state: paused; } }
/* Kalimat tunggal yang muat di bilah: diam di tengah, tanpa tombol Jeda */
.teks-berjalan--diam .teks-berjalan__jeda { display: none; }
.teks-berjalan--diam .teks-berjalan__jendela { text-align: center; }
.teks-berjalan--diam .teks-berjalan__jalur { animation: none; transform: none; display: block; }
.teks-berjalan--diam .teks-berjalan__kalimat { padding-right: 0; }
.teks-berjalan--diam .teks-berjalan__kalimat[aria-hidden="true"] { display: none; }
/* Tempat bilah: tinggi dipesan agar halaman tidak melompat saat bilah dipasang JS. Tanpa JS tidak dirender (G9) */
.teks-berjalan-tempat { display: none; }
.js .teks-berjalan-tempat { display: block; min-height: var(--tinggi-running-ponsel); background: var(--warna-latar-tenang); }
@container halaman (min-width: 55.5em) { .js .teks-berjalan-tempat { min-height: var(--tinggi-running-desktop); } }
.teks-berjalan-tempat[hidden] { display: none !important; }

/* Tanpa gerak: satu kalimat diam, boleh membungkus, tombol Jeda disembunyikan, Sebelumnya/Berikutnya muncul */
.teks-berjalan__nav { display: none; }
.teks-berjalan__nav[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .teks-berjalan { padding-block: var(--jarak-2); }
  .teks-berjalan__jeda { display: none; }
  .teks-berjalan__jendela { white-space: normal; }
  .teks-berjalan__jalur { animation: none; display: block; white-space: normal; transform: none; }
  .teks-berjalan__kalimat { padding-right: 0; }
  .teks-berjalan__kalimat[aria-hidden="true"] { display: none; }
  .teks-berjalan__nav { display: inline-flex; gap: var(--jarak-2); flex: none; }
  .teks-berjalan__nav button {
    min-height: var(--sentuh-min); min-width: var(--sentuh-min); padding: 0 var(--jarak-3);
    background: var(--warna-latar-kartu); color: var(--warna-teks-merek); border: var(--garis-tebal) solid var(--warna-merek);
    border-radius: var(--radius-sedang); font-size: var(--teks-s); font-weight: var(--tebal-tegas); cursor: pointer;
  }
}

/* =========================================================
   7. Slider (judul di bidang solid di bawah foto, kontrol di bawah)
   ========================================================= */
.slider { background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat); }
.slider__bingkai { position: relative; aspect-ratio: 4 / 3; background: var(--warna-latar-tenang); overflow: hidden; }
@container halaman (min-width: 35.5em) { .slider__bingkai { aspect-ratio: 21 / 9; max-height: 520px; } }
.slider__slide { display: none; margin: 0; position: absolute; inset: 0; }
/* Tanpa JS: hanya slide pertama. JS memberi kelas .diatur pada .slider__bingkai lalu memakai .aktif */
.slider__slide.aktif, .slider__bingkai:not(.diatur) .slider__slide:first-child { display: block; }
.slider__slide.aktif { animation: pudar var(--transisi-fade) both; }
@keyframes pudar { from { opacity: 0; } to { opacity: 1; } }
.slider__foto { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus-foto, 50% 50%); }
.slider__bingkai .slider__slide .slider__foto { position: absolute; inset: 0; }
/* Judul: bidang SOLID di bawah foto, bukan di atas foto. Krem di #14401F = AAA */
.slider__judul-bidang { padding: var(--jarak-4) var(--gutter); min-height: 4.5rem; background: var(--warna-latar-pekat-2); }
.slider__judul { margin: 0; font-family: var(--huruf-judul); font-size: var(--teks-l); font-weight: var(--tebal-tegas); line-height: 1.3; color: var(--warna-teks-di-pekat-putih); }
.slider__keterangan { margin: var(--jarak-1) 0 0; font-size: var(--teks-m); color: var(--warna-teks-di-pekat-lembut); }

.slider__kontrol {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jarak-2) var(--jarak-4);
  padding: var(--jarak-3) var(--gutter); background: var(--warna-latar-pekat);
  border-top: 1px solid var(--warna-garis-pekat);
}
.slider__panah, .slider__jeda {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jarak-2);
  min-height: var(--sentuh-besar); min-width: var(--sentuh-besar); padding: 0 var(--jarak-3);
  background: var(--warna-latar-kartu); color: var(--warna-teks-merek);
  border: var(--garis-tebal) solid var(--warna-latar-kartu); border-radius: var(--radius-sedang);
  font-size: var(--teks-m); font-weight: var(--tebal-tegas); cursor: pointer;
  --fokus-cincin: var(--fokus-cincin-pekat); --fokus-halo: var(--fokus-halo-pekat);
}
.slider__panah:hover, .slider__jeda:hover { background: var(--warna-latar-muda); }
.slider__panah:active, .slider__jeda:active { background: var(--warna-limau); color: var(--warna-teks-di-limau); border-color: var(--warna-teks-di-limau); }
.slider__panah-ikon { width: 12px; height: 12px; border-left: 4px solid currentColor; border-bottom: 4px solid currentColor; transform: rotate(45deg); }
.slider__panah--maju .slider__panah-ikon { transform: rotate(-135deg); }
.slider__panah-teks { display: none; }
@container halaman (min-width: 35.5em) { .slider__panah-teks { display: inline; } }
.slider__hitung { margin: 0; max-width: none; font-size: var(--teks-m); font-weight: var(--tebal-tegas); color: var(--warna-teks-di-pekat-putih); }
.slider__titik-daftar { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0; }
/* Titik: tampak 16px, area sentuh 48x48 */
.slider__titik {
  position: relative; width: var(--sentuh-min); height: var(--sentuh-min); padding: 0; background: transparent; border: 0; cursor: pointer;
}
.slider__titik::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 3px solid var(--warna-teks-di-pekat-putih); background: transparent;
  transition: background-color var(--transisi), transform var(--transisi);
}
.slider__titik:hover::before { background: var(--warna-limau-hover); border-color: var(--warna-limau-hover); }
/* Aktif: terisi limau + sedikit lebih besar (bukan warna saja) */
.slider__titik[aria-current="true"]::before { background: var(--warna-limau); border-color: var(--warna-limau); transform: scale(1.35); }
.slider--satu .slider__kontrol { display: none; }
@media (prefers-reduced-motion: reduce) {
  .slider__jeda { display: none; }
  .slider__slide.aktif { animation: none; }
}

/* =========================================================
   8. Kartu kegiatan dan berita
   ========================================================= */
.kisi-kartu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-5); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 35.5em) { .kisi-kartu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container halaman (min-width: 55.5em) { .kisi-kartu--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Satu warna kartu untuk semua. Pembeda lewat judul dan foto (08a rek. 13) */
.kartu {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius-besar);
  box-shadow: var(--bayang-kartu); overflow: hidden;
  transition: border-color var(--transisi), box-shadow var(--transisi);
}
.kartu:hover { border-color: var(--warna-merek); }
.kartu:active { border-color: var(--warna-merek-active); }
.kartu__foto-bingkai { position: relative; aspect-ratio: 4 / 3; background: var(--warna-latar-tenang); }
.kartu__foto { width: 100%; height: 100%; object-fit: cover; }
.kartu__isi { display: flex; flex-direction: column; flex: 1; gap: var(--jarak-2); padding: var(--jarak-4) var(--jarak-4) var(--jarak-5); }
.kartu__tanggal { margin: 0; font-size: var(--teks-m); font-weight: var(--tebal-tegas); color: var(--warna-teks-lembut); }
.kartu__judul { margin: 0; font-size: var(--teks-l); line-height: 1.3; }
.kartu__ringkas { margin: 0; color: var(--warna-teks); }
/* Tautan membentang menutup seluruh kartu: target sentuh besar */
.kartu__tautan { color: var(--warna-teks-merek); text-decoration: none; }
.kartu__tautan::after { content: ""; position: absolute; inset: 0; }
.kartu__tautan:hover { text-decoration: underline; }
@supports selector(:has(*)) {
.kartu__tautan:focus-visible { outline: none; box-shadow: none; }
}
.kartu:has(.kartu__tautan:focus-visible) { outline: var(--fokus-lebar) solid var(--fokus-cincin); outline-offset: var(--fokus-jarak); box-shadow: 0 0 0 var(--fokus-halo-lebar) var(--fokus-halo); }
.kartu__lanjut { margin-top: auto; padding-top: var(--jarak-2); font-weight: var(--tebal-tegas); color: var(--warna-teks-merek); text-decoration: underline; text-underline-offset: 4px; }
/* Lencana status kegiatan: teks + bentuk, bukan warna saja */
.lencana { display: inline-flex; align-items: center; align-self: flex-start; min-height: 32px; padding: 0 var(--jarak-3); border-radius: var(--radius-kecil); font-size: var(--teks-s); font-weight: var(--tebal-tegas); }
.lencana--akan { background: var(--warna-limau); color: var(--warna-teks-di-limau); }
.lencana--sedang { background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat-putih); }
.lencana--sudah { background: var(--warna-latar-tenang); color: var(--warna-teks); border: 1px solid var(--warna-garis); }

/* =========================================================
   9. Tab (Sudah / Sedang / Akan)
   ========================================================= */
.tab__daftar { display: flex; gap: 0; border-bottom: 4px solid var(--warna-merek); }
.tab__tombol {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--sentuh-besar); padding: var(--jarak-2) var(--jarak-1);
  background: var(--warna-latar-kartu); color: var(--warna-teks);
  border: 1px solid var(--warna-garis); border-bottom: 0; border-radius: var(--radius-sedang) var(--radius-sedang) 0 0;
  font-size: var(--teks-m); font-weight: var(--tebal-tegas); cursor: pointer;
  transition: background-color var(--transisi);
}
.tab__tombol + .tab__tombol { margin-left: -1px; }
.tab__tombol:hover { background: var(--warna-latar-tint); }
.tab__tombol:active { background: var(--warna-latar-muda); }
/* Aktif: hijau pekat + teks putih + garis limau di atas (bukan warna saja) */
.tab__tombol[aria-selected="true"] { background: var(--warna-merek); color: var(--warna-teks-di-pekat-putih); border-color: var(--warna-merek); box-shadow: inset 0 5px 0 var(--warna-limau); }
.tab__tombol:focus-visible { z-index: 1; position: relative; }
.tab__panel { padding-top: var(--jarak-5); }
.tab__panel[hidden] { display: none; }

/* =========================================================
   10. Lightbox
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: flex; flex-direction: column; background: var(--warna-latar-lightbox); color: var(--warna-teks-di-pekat-putih);
}
.lightbox[hidden] { display: none; }
.lightbox__atas { display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-3); padding: var(--jarak-3) var(--gutter); }
.lightbox__hitung { margin: 0; font-size: var(--teks-m); font-weight: var(--tebal-tegas); }
.lightbox__tutup, .lightbox__panah {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jarak-2);
  min-height: var(--sentuh-besar); min-width: var(--sentuh-besar); padding: 0 var(--jarak-4);
  background: var(--warna-teks-di-pekat-putih); color: var(--warna-teks); border: var(--garis-tebal) solid var(--warna-teks-di-pekat-putih);
  border-radius: var(--radius-sedang); font-size: var(--teks-m); font-weight: var(--tebal-judul); cursor: pointer;
}
.lightbox__tutup:hover, .lightbox__panah:hover { background: var(--warna-limau); border-color: var(--warna-limau); }
.lightbox__tutup:active, .lightbox__panah:active { background: var(--warna-limau-active); border-color: var(--warna-teks); }
.lightbox__panggung { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); }
.lightbox__gambar { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__bawah { display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-3); padding: var(--jarak-3) var(--gutter) var(--jarak-4); }
.lightbox__keterangan { flex: 1; margin: 0; max-width: none; font-size: var(--teks-m); color: var(--warna-teks-di-pekat); text-align: center; }
body.lightbox-terbuka { overflow: hidden; }
/* Tombol WA melayang disembunyikan saat lightbox terbuka */
body.lightbox-terbuka .wa-melayang { display: none; }

/* =========================================================
   11. Tombol salin
   ========================================================= */
.salin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-3); }
.salin__nilai { font-family: var(--huruf-judul); font-size: var(--teks-xl); font-weight: var(--tebal-judul); letter-spacing: .02em; word-break: break-all; }
.tombol-salin {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jarak-2);
  min-height: var(--sentuh-besar); min-width: 9rem; padding: var(--jarak-2) var(--jarak-5);
  background: var(--warna-merek); color: var(--warna-teks-di-pekat-putih); border: var(--garis-tebal) solid var(--warna-merek);
  border-radius: var(--radius-sedang); font-size: var(--teks-m); font-weight: var(--tebal-tegas); cursor: pointer;
  transition: background-color var(--transisi);
}
.tombol-salin:hover { background: var(--warna-merek-hover); }
.tombol-salin:active { background: var(--warna-merek-active); }
/* Berhasil: teks berubah "Tersalin" + tanda centang, latar hijau muda (bukan warna saja) */
.tombol-salin[data-status="tersalin"] { background: var(--warna-latar-muda); color: var(--warna-sukses-teks); border-color: var(--warna-merek); }
.tombol-salin[data-status="tersalin"]::before { content: ""; width: 7px; height: 14px; border-right: 4px solid currentColor; border-bottom: 4px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.tombol-salin[data-status="gagal"] { background: var(--warna-bahaya-latar); color: var(--warna-bahaya); border-color: var(--warna-bahaya); }
.salin__status { margin: 0; font-weight: var(--tebal-tegas); min-height: 1.5em; }

/* =========================================================
   12. Tombol WA melayang berlabel (hijau merek, bukan #25D366)
   ========================================================= */
.wa-melayang {
  position: fixed; z-index: var(--z-wa); right: var(--jarak-4); bottom: var(--jarak-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jarak-3);
  min-height: var(--sentuh-besar); padding: var(--jarak-2) var(--jarak-5) var(--jarak-2) var(--jarak-4);
  background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat-putih);
  /* Tepi putih: terpisah dari footer hijau (G10) */
  border: 3px solid var(--warna-teks-di-pekat-putih); border-radius: var(--radius-pil);
  box-shadow: var(--bayang-wa);
  font-size: var(--teks-s); font-weight: var(--tebal-judul); line-height: 1.25; text-decoration: none;
  transition: background-color var(--transisi);
  --fokus-cincin: var(--fokus-cincin-terang); --fokus-halo: var(--fokus-halo-terang);
}
.wa-melayang:hover { background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat-putih); text-decoration: none; }
.wa-melayang:active { background: var(--warna-latar-pekat-3); }
.wa-melayang__ikon { flex: none; width: 28px; height: 28px; }
.wa-melayang__teks { display: flex; flex-direction: column; text-align: left; }
.wa-melayang__nomor { font-weight: var(--tebal-normal); font-size: var(--teks-m); }  /* T-09: nomor admin 18 px */
/* Ponsel: bilah penuh lebar di dasar. Nomor admin tampil di sini (G2) */
@container halaman (max-width: 55.49em) {
  .wa-melayang { left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 3px 0 0 0; padding-bottom: calc(var(--jarak-2) + env(safe-area-inset-bottom, 0px)); justify-content: flex-start; padding-left: var(--gutter); padding-right: var(--gutter); gap: var(--jarak-3); box-shadow: var(--bayang-bilah-bawah); }
  .wa-melayang__teks { flex: 1; min-width: 0; }
}

/* =========================================================
   13. Label "Foto contoh" dan penanda BELUM-ADA
   ========================================================= */
.bingkai-foto { position: relative; }
/* Pojok kiri bawah, kecil: tidak menutup wajah di tengah foto */
.foto-contoh {
  position: absolute; left: var(--jarak-2); bottom: var(--jarak-2); z-index: 2;
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--jarak-3);
  background: var(--warna-lencana-contoh); color: var(--warna-teks-di-pekat-putih);
  border: 1px solid var(--warna-teks-di-pekat-putih); border-radius: var(--radius-kecil);
  font-size: var(--teks-s); font-weight: var(--tebal-tegas); line-height: 1; pointer-events: none;
}

/* BELUM-ADA: mencolok, tidak mungkin dikira isi sungguhan. Bingkai tebal putus-putus, latar kuning, teks hitam */
.belum-ada {
  display: block; margin: var(--jarak-3) 0; padding: var(--jarak-3) var(--jarak-4);
  background: var(--warna-belum-ada-latar); color: var(--warna-belum-ada-teks);
  border: 4px dashed var(--warna-belum-ada-garis); border-radius: var(--radius-sedang);
  font-size: var(--teks-m); font-weight: var(--tebal-tegas); line-height: 1.4;
}
.belum-ada::before {
  content: "BELUM-ADA"; display: inline-block; margin-right: var(--jarak-2); padding: 0 var(--jarak-2);
  background: var(--warna-belum-ada-teks); color: var(--warna-belum-ada-latar); border-radius: var(--radius-kecil);
  font-family: var(--huruf-judul); font-weight: var(--tebal-judul); letter-spacing: .06em;
}
.belum-ada--sebaris { display: inline-block; margin: 0; padding: 0 var(--jarak-2); border-width: 3px; }

/* =========================================================
   14. Footer dua lapis
   ========================================================= */
.footer { background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat); font-size: var(--teks-m); }
.footer__atas { padding-block: var(--jarak-8); }
.footer__kisi { display: grid; gap: var(--jarak-6); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 35.5em) {
  .footer__kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__kisi > nav { grid-column: 1 / -1; order: 3; }
  .footer__daftar--dua { columns: 3 8.5rem; }
}
@container halaman (min-width: 55.5em) {
  .footer__kisi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); }
  .footer__kisi > nav { grid-column: auto; order: 0; }
  .footer__daftar--dua { columns: 2 8.5rem; }
}
.footer h2, .footer h3 { color: var(--warna-teks-di-pekat-putih); font-size: var(--teks-l); margin-bottom: var(--jarak-3); }
.footer__logo { width: 72px; height: 72px; margin-bottom: var(--jarak-3); }
.footer p { color: var(--warna-teks-di-pekat); }
.footer__slogan { font-family: var(--huruf-judul); font-weight: var(--tebal-tegas); font-size: var(--teks-l); color: var(--warna-teks-di-pekat-putih); }
.footer__daftar { list-style: none; margin: 0; padding: 0; }
.footer a { color: var(--warna-teks-di-pekat-putih); text-decoration: underline; text-underline-offset: 4px; }
.footer a:hover { color: var(--warna-teks-di-pekat-putih); background: var(--warna-latar-pekat-2); }
.footer__daftar a { display: flex; align-items: center; min-height: var(--sentuh-min); padding-inline: var(--jarak-1); }
.footer__bawah { background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat); padding-block: var(--jarak-5); font-size: var(--teks-s); }
.footer__bawah p { margin: 0 0 var(--jarak-2); max-width: none; }
/* Ruang untuk bilah WA di ponsel */
@container halaman (max-width: 55.49em) { .footer__bawah { padding-bottom: calc(var(--jarak-5) + var(--tinggi-bilah-wa-ponsel)); } }

/* =========================================================
   14b. Judul halaman, jejak halaman, galat, noscript
   (dipakai kerangka US-07 di setiap halaman)
   ========================================================= */
main:focus { outline: none; }

/* T-14: pita judul hijau penuh lebar di setiap halaman dalam. Permintaan klien: warna dominan hijau.
   Teks di atas #1E5631 (--warna-latar-pekat): putih 8,64:1, krem 8,20:1, dan krem muda (--warna-teks-di-pekat-lembut) 7,30:1, keduanya AAA.
   Garis limau 6 px di dasar pita mengulang garis limau menu aktif, jadi hijau dan limau terbaca satu keluarga. */
.judul-halaman {
  background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat);
  border-bottom: 6px solid var(--warna-limau);
  padding-block: var(--jarak-3) var(--jarak-6);
}
@container halaman (min-width: 55.5em) { .judul-halaman { padding-block: var(--jarak-3) var(--jarak-6); } }
.judul-halaman h1 { margin: 0; color: var(--warna-teks-di-pekat-putih); }
.judul-halaman__pembuka { margin: var(--jarak-3) 0 0; max-width: 46rem; font-size: var(--teks-l); color: var(--warna-teks-di-pekat); }
.judul-halaman :is(.jejak, .judul-halaman__pembuka) a { color: var(--warna-teks-di-pekat-putih); }
.judul-halaman :is(.jejak, .judul-halaman__pembuka) a:hover { color: var(--warna-teks-di-pekat-putih); background: var(--warna-latar-pekat-2); }
/* Tombol di dalam pita (tombol Bagikan di halaman artikel): tombol hijau di atas hijau tidak terlihat, jadi dibalik: putih berhuruf hijau */
.judul-halaman .tombol--utama { background: var(--warna-latar-kartu); color: var(--warna-teks-merek); border-color: var(--warna-latar-kartu); }
.judul-halaman .tombol--utama:hover { background: var(--warna-latar-muda); color: var(--warna-teks-merek-aktif); }
.judul-halaman .tombol--utama:active { background: var(--warna-limau); color: var(--warna-teks-di-limau); }
/* Judul bagian di halaman dalam ikut hijau merek (AAA di krem, putih, tint). :where() menjaga kekhususan serendah mungkin supaya blok pekat tetap putih */
:where(.bagian) h2 { color: var(--warna-teks-merek); }

.jejak { margin-bottom: var(--jarak-3); font-size: var(--teks-m); }
.jejak ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--jarak-2); }
.jejak li { display: inline-flex; align-items: center; min-height: var(--sentuh-min); gap: var(--jarak-2); }
.jejak li + li::before { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-right: var(--jarak-1); }
.jejak a { display: inline-flex; align-items: center; min-height: var(--sentuh-min); }
.jejak li > span { color: var(--warna-teks-di-pekat-lembut); }
.jejak [aria-current="page"] { font-weight: var(--tebal-tegas); color: var(--warna-teks-di-pekat-putih); }

/* BELUM-ADA bertingkat (templat 3 baris, 09 bagian 5.2) */
.belum-ada p { margin: var(--jarak-2) 0 0; max-width: none; font-weight: var(--tebal-normal); }
.belum-ada p:first-of-type { font-weight: var(--tebal-tegas); }
.belum-ada--melayang { position: fixed; z-index: var(--z-wa); left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; border-width: 4px 0 0; box-shadow: var(--bayang-bilah-bawah); }
.belum-ada--melayang p { display: none; }
@container halaman (min-width: 55.5em) { .belum-ada--melayang { left: auto; right: var(--jarak-4); bottom: var(--jarak-4); max-width: 22rem; border-width: 4px; border-radius: var(--radius-sedang); } }

/* Galat per bagian: "Isi tidak dapat dimuat." + tombol Muat ulang (08b kasus tepi) */
.galat { padding: var(--jarak-4); background: var(--warna-bahaya-latar); color: var(--warna-bahaya); border: 2px solid var(--warna-bahaya); border-radius: var(--radius-sedang); }
.galat p { margin: 0 0 var(--jarak-3); font-weight: var(--tebal-tegas); }
.galat .tombol { background: var(--warna-latar-kartu); }
[aria-busy="true"] { cursor: progress; }

/* Teks bila JavaScript mati */
.catatan-noscript { margin: 0; padding: var(--jarak-4) var(--gutter); background: var(--warna-latar-tenang); border-bottom: 1px solid var(--warna-garis); font-weight: var(--tebal-tegas); }
.catatan-noscript p { margin: 0 auto; max-width: var(--lebar-isi-maks); }

/* Footer: tautan Jelajahi dua kolom di lebar besar, daftar kontak */
/* Tautan Jelajahi: 2 kolom (3 di tablet), tidak terpotong di tengah butir */
.footer__daftar--dua { columns: 2 8.5rem; column-gap: var(--jarak-4); }
.footer__daftar--dua li { break-inside: avoid; }
.footer__daftar--kontak a { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: var(--jarak-2); }
.footer__kontak-label { display: block; font-size: var(--teks-m); color: var(--warna-teks-di-pekat-lembut); }

/* Halaman pengalih (profil.html, pengurus.html lama) */
.pengalih { min-height: 100vh; display: flex; align-items: center; padding-block: var(--jarak-8); }
.pengalih .wadah { max-width: 40rem; }
.pengalih h1 { color: var(--warna-teks-merek); }

/* =========================================================
   15. Gerak: aturan menyeluruh
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Halaman aktif di dalam panel akordeon: bilah limau kiri + tebal (bukan warna saja), 08b 5.2 */
.akordeon__panel a[aria-current="page"] { box-shadow: inset 6px 0 0 var(--warna-limau); font-weight: var(--tebal-judul); color: var(--warna-teks-di-pekat-putih); }
.header__merek[aria-current="page"] .header__nama { text-decoration: none; }
.header__gabung[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--warna-teks-di-limau); }

/* =========================================================
   16. Polesan kerangka ponsel (US-08)
   ========================================================= */
/* Header di layar sempit (<= 400px): tombol Menu/Tutup utuh di tepi kanan, nama yayasan membungkus dua baris */
@container halaman (max-width: 22em) {
  .header__dalam { gap: var(--jarak-2); }
  .header__merek { gap: var(--jarak-2); }
  .header__logo { width: 40px; height: 40px; }
  .tombol-menu { padding-inline: var(--jarak-3); gap: var(--jarak-2); }
}

/* Bilah WA ponsel: paling tinggi sekitar 64px (label satu baris + nomor satu baris).
   Layar <= 344px: ikon dilepas supaya label "Hubungi Admin untuk Pendaftaran" tidak membungkus jadi dua baris (tinggi 81px) */
@container halaman (max-width: 55.49em) {
  .wa-melayang { padding-top: var(--jarak-2); padding-left: var(--gutter); }
  .wa-melayang__teks { line-height: 1.25; }
}
@container halaman (max-width: 19em) {
  .wa-melayang__ikon { display: none; }
  .wa-melayang { padding-inline: var(--jarak-3); }
}

/* =========================================================
   17. Perbaikan QA (US-14b)
   ========================================================= */
/* T-02: huruf sangat besar (lebar kurang dari 16 em). Bilah WA tetap menempel di dasar tetapi satu baris: label dibaca pembaca
   layar (sr-only), yang terlihat ikon + nomor, supaya bilah tidak memakan lebih dari sekitar 12% layar (sebelumnya 22%). */
@container halaman (max-width: 16em) {
  .wa-melayang { padding-block: var(--jarak-2); }
  .wa-melayang__teks > span:first-child {
    position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .wa-melayang__nomor { font-size: var(--teks-s); font-weight: var(--tebal-judul); white-space: nowrap; }
  .footer__bawah { padding-bottom: calc(var(--jarak-5) + 4.5rem); }
}
/* Judul dan teks panjang tidak boleh memaksa lebar halaman saat huruf besar */
h1, h2, h3, h4, .kartu__judul { overflow-wrap: anywhere; }
.tombol { overflow-wrap: break-word; }
.tombol { max-width: 100%; }

/* T-10 dan T-11: mode kontras tinggi (Windows High Contrast, forced-colors). Warna sendiri dipaksa menjadi warna sistem dan
   gambar latar dihapus, jadi bentuk yang membawa makna harus berasal dari border atau teks, bukan dari latar atau bayangan. */
@media (forced-colors: active) {
  /* Garis bawah menu: hanya pada item aktif (border transparan akan dipaksa tampak di semua item) */
  .menu__tautan, .menu__sub-tombol { border-bottom: 0; }
  .menu__tautan[aria-current="page"], .menu__item--aktif > .menu__tautan { border-bottom: 4px solid CanvasText; }
  .menu__tautan:hover, .menu__sub-tombol:hover { border-bottom: 4px solid Highlight; }
  .dropdown__tautan { border-left: 0; }
  .dropdown__tautan[aria-current="page"], .dropdown__tautan:hover { border-left: 4px solid Highlight; }
  /* Penanda aktif yang tadinya hanya warna latar */
  .tab__tombol[aria-selected="true"] { border: 4px solid Highlight; border-bottom-width: 0; font-weight: var(--tebal-judul); text-decoration: underline; text-underline-offset: 6px; }
  .slider__titik[aria-current="true"]::before { background: Highlight; border-color: Highlight; }
  .akordeon__tautan[aria-current="page"], .akordeon__panel a[aria-current="page"] { border-left: 6px solid Highlight; box-shadow: none; }
  .tombol--aksen, .tombol--utama { border-color: ButtonText; }
  .lencana, .foto-contoh, .belum-ada { border: 2px solid CanvasText; }
  /* Tombol WA melayang: bingkai sudah dari border, tetapi bayangan hilang */
  .wa-melayang { border-color: ButtonText; }
  .judul-halaman { border-bottom: 6px solid CanvasText; }
}

/* T-02: grid satu kolom tanpa batas bawah 0 melebar mengikuti isi terpanjang (min-content) dan mendorong halaman keluar layar
   saat huruf besar. :where() berkekhususan nol, jadi templat kolom khusus di tiap halaman tetap menang. */
:where(.kontak, .kontak-wa, .kontak-wa__aksi, .medsos, .rekening-daftar, .rekening__badan, .rekening__atas-nama, .laporan-daftar, .laporan--baru,
  .laporan__badan, .kegiatan-kartu__rincian, .jadwal__sesi, .profil-misi, .profil-jabatan, .profil-lain ul, .memuat, .qris) {
  grid-template-columns: minmax(0, 1fr);
}

/* T-02: huruf sangat besar (lebar kurang dari 16 em). Skala judul dirapatkan (tetap jauh di atas teks isi pada ukuran normal)
   supaya satu kata panjang seperti "pembelajaran" tidak harus dipotong di tengah. Token ukuran ditimpa pada anak langsung body,
   jadi semua aturan yang memakai var(--teks-...) ikut. */
@container halaman (max-width: 16em) {
  body > * { --teks-3xl: 1.6rem; --teks-2xl: 1.4rem; --teks-xl: 1.25rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }
  .belum-ada { max-width: 100%; }
}

/* T-01: lonjakan tata letak (CLS). Isi dari JSON masuk belakangan, jadi apa pun yang berada di BAWAH wadah isi (kerangka footer,
   tautan "Halaman Profil lainnya", panel Bergabung) tadinya naik-turun di layar. Dua lapis jaminan:
   1) <main> tidak pernah lebih pendek dari sisa tinggi layar, jadi footer selalu mulai di bawah lipatan pertama dan tidak ikut
      bergeser saat isi tiba. (100svh dikurangi tinggi bilah slogan + header + running text, sekitar 6 rem.)
   2) wadah isi yang diikuti elemen lain memiliki tinggi minimum yang sama (lihat halaman-profil.css, halaman-beranda.css).
   Hanya dengan JavaScript aktif: tanpa JS tidak ada isi yang ditunggu dan tinggi dibiarkan alami. */
.js main { min-height: calc(100svh - 6rem); }