/*
 * Kop situs.
 *
 * Kelasnya bernama `.kop`, bukan `.header` seperti di situs lama. CSS Modules
 * dulu mengacak setiap nama kelas, sehingga `.header` di berkas ini dan
 * `.header` di page.module.css — blok judul halaman — tidak pernah bertemu.
 * Setelah keduanya jadi CSS biasa dan dimuat pada halaman yang sama, yang
 * belakangan menimpa yang duluan TANPA galat apa pun: judul halaman ikut
 * mendapat `position: sticky` dan menempel di atas layar saat digulir.
 *
 * Tabrakan seperti ini dicari oleh scripts/cek-bentrok-css.mjs.
 */
.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Garis merah tua tipis di paling atas — penanda identitas */
.accent {
  height: 3px;
  background: var(--primary);
}

.bar {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  /*
    LATARNYA SENDIRI, bukan mengandalkan latar kop.

    Bilah ini tidak punya latar apa pun sebelumnya, dan itu tidak kelihatan
    sampai menu seluler dibuka: tirai gelap tergambar di atas latar kop,
    lalu bilah yang bening ditumpuk di atasnya — sehingga yang terlihat
    justru tirainya. Terukur dengan mengambil warna pikselnya di titik yang
    sama: putih rgb(255,255,255) saat menu tertutup, kelabu rgb(128,128,128)
    saat terbuka — tepat hitam 50% di atas putih.

    Akibatnya logo dan pemilih bahasa tampak DIREDUPKAN, seolah tidak
    berlaku, padahal keduanya bekerja penuh.
  */
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}

/*
  Logo resmi PERGUBI.
*/
.mark {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

.brandText {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brandName {
  font-weight: 700;
  font-size: var(--t-isi);
  letter-spacing: -0.01em;
}

.brandSub {
  font-size: var(--t-mikro);
  color: var(--text-muted);
}

/* ---------- Tindakan utama di baris atas ---------- */

.aksi {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

@media (min-width: 60rem) {
  .aksi {
    display: flex;
  }
}

/* Ajakan mendaftar — satu-satunya tombol berbidang penuh di kepala situs. */
.gabung {
  padding: 0.6rem 1.25rem;
  border-radius: var(--r-kecil);
  background: var(--brand-700);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-mikro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.16s ease;
}

.gabung:hover {
  background: var(--brand-800);
}

.masuk {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-mikro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.masuk:hover {
  color: var(--primary);
}

/* ---------- Cip profil ---------- */

.profil {
  position: relative;
  flex: none;
}

.profilTombol {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.profilTombol:hover,
.profilTombol[aria-expanded='true'] {
  border-color: var(--brand-300);
  background: var(--bg-alt);
}

.profilInisial {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--primary-isi);
  color: #fff;
  font-family: var(--font-judul), Georgia, serif;
  font-size: var(--t-kecil);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/*
  Nama dipotong, bukan dibiarkan mendorong tata letak.

  Nama guru besar lengkap dengan gelarnya bisa melampaui lima puluh karakter.
  Dibiarkan utuh, ia menggeser pengalih bahasa keluar layar pada laptop kecil.
*/
.profilNama {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-kecil);
  font-weight: 600;
}

.profilPanah {
  flex: none;
  color: var(--text-muted);
  transition: transform 0.16s ease;
}

.profilTombol[aria-expanded='true'] .profilPanah {
  transform: rotate(180deg);
}

.profilMenu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 60;
  min-width: 12rem;
  padding: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-kartu);
  box-shadow: var(--naik-apung);
}

.profilItem,
.profilKeluar {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: var(--r-kartu);
  background: none;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-size: var(--t-dasar);
  min-height: auto;
  cursor: pointer;
}

.profilItem:hover,
.profilKeluar:hover {
  background: var(--bg-alt);
  color: var(--primary);
}

/* Keluar dipisahkan garis: ia satu-satunya butir yang mengakhiri sesi. */
.profilKeluar {
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-kartu) var(--r-kartu);
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- Sapaan di panel seluler ---------- */

.mobileSapa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: var(--t-dasar);
}

.mobileKeluar {
  width: 100%;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kecil);
  background: var(--bg);
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  font-size: var(--t-mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}

.mobileKeluar:hover {
  border-color: var(--brand-300);
  color: var(--primary);
}

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

  .profilTombol,
  .profilPanah {
    transition: none;
  }
}

/* ---------- Bilah menu hitam (baris kedua) ---------- */

/*
  Warnanya TETAP hitam di kedua mode, seperti kaki situs, dan karena itu
  seluruh warna di dalamnya memakai token lokal. Memakai `--text` di sini
  menghasilkan tulisan hitam di atas hitam saat mode terang.
*/
.bilah {
  --bilah-teks: #e6e6e7;
  --bilah-redup: #9c9c9f;

  display: none;
  position: relative;
  background: #101010;
  border-top: 1px solid #262626;
}

@media (min-width: 60rem) {
  .bilah {
    display: block;
  }
}

/*
  Isi bilah dibatasi selebar pembungkus halaman, sama seperti baris atas.

  Sebelumnya bilah ini hanya diberi padding, sehingga isinya menempel ke tepi
  layar sementara logo di baris atasnya mulai jauh ke dalam — dua baris pada
  kepala situs yang sama tidak sejajar. Latarnya tetap selebar layar; yang
  dibatasi hanya isinya.
*/
.bilahIsi {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

/*
  Menu tematik dipusatkan pada ruang yang tersisa setelah tombol.

  `margin-inline: auto` — bukan `justify-content: center` pada induknya, yang
  akan ikut menyeret tombol "Semua Menu" ke tengah dan mencabutnya dari tepi
  kiri. Tombol itu pintu ke struktur resmi situs dan harus tetap ditemukan
  lebih dulu.
*/
.bilahMenu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline: auto;
}

/* Pintasan ke halaman yang paling sering dituju */
.shortcut {
  padding: 0.9rem 0.9rem;
  color: var(--bilah-teks);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-dasar);
  min-height: auto;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.shortcut:hover {
  color: #fff;
  background: rgb(255 255 255 / 0.06);
  border-bottom-color: var(--brand-400);
}

/*
  Bagian yang sedang dibuka.

  Sebelum ini bilah navigasi TIDAK PERNAH menandai halaman aktif — tidak ada
  kelas semacam ini di berkas, padahal `.shortcut` sudah menyediakan slotnya
  lewat `border-bottom: 3px solid transparent`.

  Tandanya BERLAPIS TIGA, dengan sengaja. Garis merahnya saja tidak cukup:
  `:hover` memakai warna yang sama, sehingga saat kursor melewati menu lain
  akan tampak dua garis merah sekaligus. Huruf yang ditebalkan tidak pernah
  muncul pada hover, jadi itulah pembeda yang tetap bertahan.

  `display` DITULIS ULANG karena elemennya `<span>`, bukan `<a>`. Aturan global
  memberi `display: inline-flex` hanya kepada `a`, `button`, dan
  `[role='button']`; tanpa baris ini satu-satunya item span di dalam baris flex
  akan memakai metrik kotak yang berbeda dari tetangganya, dan padding serta
  garis bawahnya tidak sejajar.
*/
.shortcutAktif {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
  border-bottom-color: var(--brand-400);
  cursor: default;
}

/*
  Tombol seluruh 14 menu, di UJUNG KIRI bilah — sebelum menu tematik.

  Letaknya disengaja: ia bukan pelengkap di ujung kanan, melainkan pintu ke
  struktur resmi situs. Tujuh menu di sebelahnya hanya jalan pintas, dan
  pengunjung yang mencari sesuatu yang tidak ada di antara tujuh itu harus
  menemukan pintu ini lebih dulu, bukan terakhir.

  Diberi bidang merah penuh agar terbaca sebagai tombol, bukan menu kedelapan.
*/
.megaButton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.75rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--r-kecil);
  background: var(--brand-700);
  font: inherit;
  font-weight: 700;
  font-size: var(--t-kecil);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease;
}

.megaButton:hover,
.megaButton[aria-expanded='true'] {
  background: var(--brand-600);
}

/* Panel berisi seluruh 14 menu sekaligus */
/*
  Diposisikan terhadap `.kop` (sticky = elemen terposisi), bukan terhadap
  `.nav`. left+right+max-width+margin-inline:auto membuatnya selebar bilah
  header dan tetap di tengah pada layar lebar.
*/
.mega {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 1.5rem;
  left: 1.5rem;
  max-width: 76rem;
  margin-inline: auto;
  max-height: min(75vh, 42rem);
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-kartu);
  box-shadow: var(--naik-apung);
  z-index: 60;
}

/* Penanda pada menu yang halamannya belum dibangun */
.soonBadge {
  flex: none;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
}

/* ---------- Pengalih bahasa ---------- */

.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}

/*
  ID/EN terukur 39x37 dan 42x37 — di bawah 44px, dan karena pemilih ini ada di
  kepala SETIAP halaman, kekurangan itu terulang di seluruh situs. `min-height:
  auto` di sini dulu menonaktifkan aturan target sentuh global secara diam-diam.

  Sekarang tingginya dipatok ke token yang sama dengan tombol kecil, dan
  lebarnya diberi batas agar "ID" yang hanya dua huruf tetap cukup luas untuk
  ibu jari.
*/
.langOption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tombol-h-kecil);
  min-height: var(--tombol-h-kecil);
  padding: 0 0.75rem;
  font-size: var(--t-kecil);
  font-weight: 700;
  text-decoration: none;
  color: var(--text-muted);
}

.langOption:hover {
  background: var(--bg-alt);
}

.langActive {
  background: var(--primary-isi);
  color: #fff;
}

.langActive:hover {
  background: var(--primary-isi-hover);
}

/* ---------- Tombol menu seluler ---------- */

.toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  cursor: pointer;
  color: var(--text);
}

/*
  Di layar lebar tombol ini disembunyikan, karena panel yang dikendalikannya
  (`.mobilePanel`) juga disembunyikan di sana — dan seluruh 14 menu sudah
  tersedia lewat tombol "Semua Menu".

  Membiarkannya tampil bukan sekadar cacat tampilan: tombolnya tetap dapat
  diklik, `aria-expanded` berubah menjadi `true`, dan pembaca layar
  mengumumkan menu terbuka padahal tidak ada apa pun yang muncul.

  HARUS berada SESUDAH aturan dasar di atas. Lihat catatan di media query
  pertama berkas ini.
*/
@media (min-width: 60rem) {
  .toggle {
    display: none;
  }
}

/*
  TIRAI DI BELAKANG PANEL MENU.

  Panel ini dibatasi 70vh supaya menu yang panjang tetap dapat digulir tanpa
  menutupi seluruh layar. Yang terlewat: sisa layar di bawahnya dibiarkan
  memperlihatkan isi halaman.

  TERUKUR pada iPhone 390x844, menu terbuka di /kepengurusan:
    tinggi layar   844px
    panel          72..663  (591px)
    sisa           181px  <- foto dan nama pengurus menyembul di bawah menu

  Yang terlihat pengguna: menu yang seolah setengah jadi, dengan potongan
  halaman lain menempel di bawahnya. Tirai gelap ini menutupnya, sekaligus
  memberi isyarat yang sudah dikenal semua orang — ketuk di luar untuk
  menutup.

  `z-index` 40 menaruhnya DI BAWAH kepala situs (50), sehingga panel dan
  tombol tutup tetap berada di atas tirai.
*/
.mobileTirai {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.5);
  animation: mobilePudar 0.18s ease-out;
}

@keyframes mobilePudar {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobileTirai {
    animation: none;
  }
}

@media (min-width: 60rem) {
  .mobileTirai {
    display: none;
  }
}

.mobilePanel {
  position: relative;
  z-index: 51;
  border-top: 1px solid var(--border);
  background: var(--bg);
  /*
    Nilai cadangan bagi peramban yang tidak mengenal tata letak di bawah.
    Lihat `.kop.menuTerbuka` untuk perilaku yang sebenarnya dipakai.
  */
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.75rem 1.5rem 1.5rem;
}

/*
  PANEL MENU MEMENUHI LAYAR SAMPAI KE DASAR.

  Bentuk sebelumnya membatasi panel pada `max-height: 70vh`, dan sisanya
  dibiarkan memperlihatkan isi halaman yang digelapkan tirai. Terukur pada
  tiga tinggi layar, dengan bilah kop 72px di atasnya:

    layar 664px   panel berhenti di 537px   tersisa 127px isi halaman
    layar 740px   panel berhenti di 590px   tersisa 150px
    layar 844px   panel berhenti di 663px   tersisa 181px

  Yang terlihat bukan "menu yang ringkas", melainkan menu yang TERPOTONG:
  daftarnya terpenggal di tengah butir, dan di bawahnya muncul separuh judul
  berita yang meredup — cukup terbaca untuk mengganggu, tidak cukup untuk
  dipakai. Isi panelnya sendiri 2078px, jadi tidak ada satu tinggi pun yang
  membuatnya "pas"; yang ada hanyalah lebih banyak atau lebih sedikit ruang
  untuk menggulir.

  TIDAK DIPERBAIKI DENGAN ANGKA MATI seperti `calc(100dvh - 4,5rem)`. Tinggi
  bilah kop tidak tetap: pada layar sempit, "Persatuan Guru Besar Indonesia"
  di bawah logo membungkus menjadi dua baris dan bilahnya bertambah tinggi.
  Angka yang dikira-kira justru meleset pada perangkat paling sempit.

  Sebagai gantinya kop dijadikan kolom lentur setinggi layar, dan panelnya
  mengambil SISA ruang berapa pun tinggi bilahnya. Tidak ada ukuran yang
  perlu diketahui siapa pun.
*/
.kop.menuTerbuka {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  /* `dvh` mengikuti bilah alamat ponsel yang menyusut saat digulir; `vh`
     tidak, dan menyisakan panel yang menjorok di bawah tepi layar. */
  max-height: 100dvh;
}

/*
  ANAK-ANAK KOP TETAP SELEBAR PENUH.

  `.bar` memakai `margin: 0 auto` untuk memusatkan dirinya di layar lebar.
  Pada wadah flex, margin otomatis MEMATIKAN peregangan bawaan `stretch`,
  sehingga begitu kop menjadi kolom lentur bilahnya menyusut ke lebar isinya.

  Terukur di layar 320px: bilahnya melar dari 320px menjadi 346px begitu menu
  dibuka — meluber 26px, dan peramban ponsel menjawab luberan itu dengan
  memperkecil seluruh halaman. Itu sebabnya angkanya sempat membingungkan:
  tinggi layar terbaca 615px pada perangkat setinggi 568px.

  `max-width: 76rem` pada `.bar` tetap berlaku, jadi pemusatan di layar lebar
  tidak berubah.
*/
.kop.menuTerbuka > * {
  width: 100%;
  /* Garis aksen dan bilah tidak boleh ikut memampat saat panelnya memanjang. */
  flex-shrink: 0;
}

.kop.menuTerbuka .mobilePanel {
  flex: 1 1 auto;
  /* Tanpa ini, isi yang panjang memaksa panelnya melar melewati dasar layar
     alih-alih bergulir di dalam ruang yang tersisa. */
  min-height: 0;
  max-height: none;
}

@media (min-width: 60rem) {
  .mobilePanel {
    display: none;
  }
}

/*
  Baris tindakan, HANYA ada di panel ini.

  "Gabung Sekarang" dan "Masuk" tinggal di baris atas yang disembunyikan di
  bawah 60rem (lihat `.aksi`). Tanpa salinannya di sini, keduanya tidak dapat
  dicapai sama sekali dari ponsel — dan mendaftar adalah hal yang paling
  sering dicari pengunjung baru.
*/
.mobileAksi {
  display: grid;
  gap: 0.5rem;
}

/*
  `justify-content`, BUKAN `text-align`.

  Aturan global di global.css memberi setiap tautan yang berdiri sendiri
  `display: inline-flex` demi target sentuh 44px — dan menyetel
  `align-items: center` tanpa menyetel `justify-content`. Pada wadah flex,
  `text-align: center` TIDAK memusatkan apa pun: teksnya menjadi item flex
  yang diletakkan di pangkal baris.

  Tidak terlihat selama tombolnya sepas isinya, seperti di kepala layar
  lebar. Baru terbaca begitu tombolnya dibuat selebar bidang di menu seluler.
  Terukur di lebar 375px: teks "Gabung Sekarang" menyisakan 0px di kiri dan
  182px di kanan, sementara tombol "Masuk" tepat di bawahnya — yang memang
  memakai `justify-content: center` — menyisakan 129px seimbang di kedua sisi.

  `text-align` dibiarkan sebagai jaring pengaman bila kelak tombolnya kembali
  menjadi blok biasa.
*/
.mobileAksi .gabung {
  justify-content: center;
  text-align: center;
  padding: 0.75rem 1rem;
}

.mobileTombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kecil);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  min-height: auto;
}

.mobileTombol:hover {
  border-color: var(--brand-300);
  color: var(--primary);
}

.mobileBagian {
  margin: 1.25rem 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.mobileJudul {
  margin: 0 0 0.6rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/*
  Ketujuh pintasan tampil sebagai kelompok kecil, bukan daftar bertumpuk.

  Di layar lebar ketujuhnya satu baris pada bilah hitam; bentuk ringkas ini
  gema terdekatnya di layar sempit, dan menjaga panel tetap pendek sehingga
  keempat klaster di bawahnya masih terjangkau tanpa banyak menggulir.
*/
.mobilePintasan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mobileChip {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--t-kecil);
  font-weight: 600;
  /*
    2,6rem, BUKAN `auto`.

    `min-height: auto` sebelumnya membatalkan aturan global 44px demi pil yang
    ringkas, dan hasilnya terukur 39px — lima piksel di bawah target sentuh
    terkecil yang dianjurkan. Pil-pil ini berderet rapat dalam baris yang
    membungkus, jadi justru di sinilah salah tekan paling mudah terjadi.
  */
  min-height: 2.6rem;
}

/*
  KEGAGALAN AKSESIBILITAS, bukan sekadar ketidakrapian.

  Aturan ini memakai `--brand-50` — nilai khusus tema terang — TANPA pasangan
  gelap, di dalam komponen yang sisanya sadar tema (`.mobileChip` memakai
  `--border` dan `--text`). Akibatnya di tema gelap: menyentuh chip memunculkan
  bidang hampir putih di tengah panel gelap, dengan tulisan `--brand-400` di
  atasnya.

  KONTRAS TERUKUR:
    #a80808 di atas #fef1f1 -> 7,05:1  (terang — selalu benar)
    #eb4c4c di atas #fef1f1 -> 3,36:1  (gelap — GAGAL AA, ambangnya 4,50)
    #f48b8b di atas #3e0404 -> 7,28:1  (gelap — setelah diperbaiki)

  Teks chip berukuran 0,84rem, jadi ia teks normal dan ambangnya memang 4,5:1.
  Cacat ini lolos dari perhitungan cacat tema karena ia TIDAK berupa media
  query — ia hanya lupa punya pasangan, dan pencarian `@media` tidak
  menemukannya.
*/
.mobileChip:hover {
  background: var(--brand-wash);
  border-color: var(--brand-300);
  color: var(--brand-ink);
}

/* ---------- Panel "Semua Menu": empat klaster ---------- */

.megaKlaster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  /*
    Tiap kotak setinggi isinya sendiri. Memaksa keempatnya sama tinggi
    menghasilkan bidang kosong pada dua kotak yang berisi tiga menu.
  */
  align-items: start;
}

.klasterKotak {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-700);
  border-radius: var(--r-kartu);
}

.klasterJudul {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--brand-700);
}

/*
  Angka romawi klaster: gema dari penomoran delapan bidang kepengurusan yang
  sudah dipakai di seluruh situs. Ia unsur grafis, bukan informasi — karena
  itu `aria-hidden` di markup, dan ukurannya jauh lebih besar dari judulnya.
*/
.klasterRomawi {
  flex: none;
  font-family: var(--font-judul), Georgia, serif;
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1;
  /*
    Token, bukan media query.

    Angka romawi klaster ini persis kasus yang sama dengan angka romawi bidang
    di beranda: `--brand-200` saat terang, `--brand-800` saat gelap. Pilihan
    itu dulu ditulis di sini lewat media query tema gelap — yang tidak mengenal
    `[data-theme]`, sehingga pengguna bersistem gelap yang memilih tema terang
    mendapat angka romawi gelap di atas kartu terang.

    Menyakitkan berlipat di berkas INI, karena header muncul di seluruh 32 rute
    halaman: satu cacat terlihat di setiap halaman situs.

    Nilainya tidak berubah — `--roman` memang dibuat untuk pasangan ini.
  */
  color: var(--roman);
}

.klasterNama {
  flex: 1;
  min-width: 0;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.3;
}

.klasterJumlah {
  flex: none;
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-kecil);
  /*
    Dua token menggantikan satu media query.

    `--brand-wash` sudah tepat menjadi pasangan latarnya (`--brand-50` terang,
    `--brand-950` gelap), dan `--brand-ink` pasangan tintanya (`--brand-700`
    terang, `--brand-300` gelap). Keempat nilainya SAMA PERSIS dengan
    sebelumnya; kontrasnya 7,05:1 dan 7,28:1, terukur dan tercatat di
    globals.css.

    `--primary` sengaja TIDAK dipakai di sini: di tema gelap nilainya
    `--brand-400`, yang di atas `--brand-950` hanya mencapai 4,63:1 — turun
    dari 7,28:1 untuk lencana berukuran 0,7rem.
  */
  background: var(--brand-wash);
  color: var(--brand-ink);
  font-size: var(--t-mikro);
  font-variant-numeric: tabular-nums;
}

/*
  Kartu setinggi ISINYA saja — tidak diregangkan.

  Versi sebelumnya memakai `grid-auto-rows: 1fr` agar kolom berisi tiga menu
  tidak menyisakan bidang kosong di bawahnya. Itu memindahkan masalahnya, bukan
  menyelesaikannya: ruang lebih berpindah ke DALAM setiap kartu, dan pada dua
  kartu berlatar merah muda ia berubah jadi bidang kosong yang mencolok —
  justru lebih terlihat daripada yang hendak disembunyikan.

  Sekarang kartu mengikuti isinya, dan kotak klasternya sendiri yang boleh
  berbeda tinggi (lihat `align-items` pada .megaKlaster). Tidak ada ruang mati
  di mana pun.
*/
.klasterDaftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

/*
  Kartu menu: nomor + nama + keterangan satu baris.

  Nomornya DIPERTAHANKAN meski menunya sudah dikelompokkan. Empat belas menu
  itu struktur resmi yang disahkan; nomor adalah caranya dirujuk dalam rapat
  dan dokumen. Mengelompokkan tanpa menghilangkan nomor menjaga keduanya:
  panel yang mudah dipindai, dan struktur yang tetap dapat dirujuk.
*/
.menuKartu {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1.5rem 0.75rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-kartu);
  text-decoration: none;
  min-height: auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}

a.menuKartu:hover {
  background: var(--bg-alt);
  border-color: var(--brand-300);
}

/*
  Panah muncul saat disentuh, tidak selalu terlihat.

  Empat belas panah yang tampil bersamaan menambah kerapatan tanpa menambah
  arti. Ia hanya perlu hadir pada kartu yang sedang dituju mata.
*/
.menuPanah {
  position: absolute;
  right: 0.6rem;
  top: 0.78rem;
  font-size: var(--t-dasar);
  color: var(--primary);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

a.menuKartu:hover .menuPanah,
a.menuKartu:focus-visible .menuPanah {
  opacity: 1;
  transform: none;
}

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

  .menuKartu,
  .menuPanah {
    transition: none;
  }

  a.menuKartu:hover .menuPanah {
    transform: none;
  }
}

.menuNo {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--r-kartu);
  background: var(--brand-700);
  color: #fff;
  font-size: var(--t-mikro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.menuTeks {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.menuNama {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: var(--t-kecil);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.menuKet {
  font-size: var(--t-mikro);
  line-height: 1.45;
  color: var(--text-muted);
}

/* Menu yang halamannya belum ada: teredam, dan tidak dapat diklik. */
.menuBelum {
  cursor: default;
}

.menuBelum .menuNo {
  background: var(--border);
  color: var(--text-muted);
}

.menuBelum .menuNama {
  color: var(--text-muted);
}
/*
  Penukaran ikon menu seluler: garis saat tertutup, silang saat terbuka.

  Aturan ini ADA di sini, bukan lewat atribut `hidden` pada <path>, karena
  aturan bawaan peramban `[hidden] { display: none }` tidak menjangkau elemen
  SVG. Lihat catatan panjangnya di public/js/kop.js.
*/
.toggle .ikonSilang {
  display: none;
}

.toggle.terbuka .ikonGaris {
  display: none;
}

.toggle.terbuka .ikonSilang {
  display: inline;
}

/*
  Tombol buka/tutup menu harus berada DI ATAS tirai.

  Cacat ini terbawa dari situs lama dan tidak pernah terlihat di sana. Tirai
  memakai `position: fixed` dengan `z-index: 40`, sementara tombolnya tidak
  punya z-index sama sekali. Di dalam konteks susun milik kop, elemen
  berposisi dengan z-index selalu menang atas elemen yang tidak — jadi tirai
  menutupi tombol silangnya sendiri.

  Akibatnya persis kebalikan dari yang dijanjikan tombol itu: pengunjung
  membuka menu, menekan X di pojok, dan tidak terjadi apa-apa. Satu-satunya
  jalan keluar tinggal mengetuk tirai, dan itu tidak diketahui semua orang.

  Ditemukan oleh Playwright yang menolak mengeklik tombolnya dengan
  keterangan "tirai-menu intercepts pointer events" — bukan dengan membaca
  CSS-nya.

  52 dipilih supaya tombolnya juga di atas panel (51).
*/
.toggle {
  position: relative;
  z-index: 52;
}

/*
  SELURUH BILAH, BUKAN HANYA TOMBOL SILANGNYA.

  Perbaikan di atas menaikkan tombol X saja, dengan anggapan ia satu-satunya
  bagian kop yang perlu ditekan selagi menu terbuka. Anggapan itu keliru:
  bilahnya masih memperlihatkan LOGO dan pemilih bahasa ID/EN, keduanya
  tergambar utuh dan tampak dapat ditekan — tetapi tirai di atasnya menelan
  setiap ketukan.

  Yang terjadi bagi pengunjung: ia menekan "EN", menu tertutup, dan
  halamannya tetap berbahasa Indonesia. Diuji: menekan pemilih bahasa
  selagi menu terbuka tidak mengubah alamat sama sekali, dan menekan logo
  mengenai `.mobileTirai`, bukan logonya.

  Pada situs dwibahasa resmi, pemilih bahasa adalah salah satu tombol yang
  paling dicari. Tombol yang terlihat tetapi diam-diam tidak bekerja lebih
  buruk daripada tombol yang tidak ada.
*/
.bar {
  position: relative;
  z-index: 51;
}