/* Token desain DPP PERGUBI — sumber: spec/arsitektur.md §4
 *
 * TEMA: MERAH LOGO, PUTIH, HITAM.
 *
 * Nilai --brand-* TIDAK lagi placeholder. Seluruh tangga diturunkan dari satu
 * warna yang diambil langsung dari berkas logo resmi: piksel merah dominan
 * pada `public/logo-pergubi.png` adalah rgb(168, 8, 8) = #A80808, dan nilai
 * itu menempati slot 700 (primary). Sisanya hanya perubahan terang-gelap pada
 * rona yang sama, jadi seluruh situs bersaudara dengan lambangnya.
 *
 * Netralnya sengaja DINGIN, bukan krem. Situs rujukan yang diminta memakai
 * krem untuk bagian berselang-seling; itu ditolak di sini karena temanya
 * ditetapkan merah–putih–hitam, dan krem memperkenalkan rona keempat.
 *
 * KONTRAS TERUKUR, bukan diperkirakan:
 *   #A80808 di atas putih   -> 7,77:1  (AAA teks normal)
 *   #EB4C4C di atas #121212 -> 5,06:1  (AA teks normal, dipakai mode gelap)
 * Mengganti nilai mana pun WAJIB diikuti pengukuran ulang keduanya.
 */

:root {
  /* Merah logo — warna utama merek */
  --brand-50: #fef1f1;
  --brand-100: #fde3e3;
  --brand-200: #fac2c2;
  --brand-300: #f48b8b; /* hover mode gelap — 7,95:1 di atas #121212 */
  --brand-400: #eb4c4c; /* primary mode gelap — 5,06:1 di atas #121212 (AA) */
  --brand-500: #df1111;
  --brand-600: #c20a0a;
  --brand-700: #a80808; /* primary — warna logo, 7,77:1 di atas putih (AAA) */
  --brand-800: #880606;
  --brand-900: #6b0606;
  --brand-950: #3e0404;

  /* Netral: putih dan hitam, tanpa rona ketiga */
  --ink: #121212;
  --ink-muted: #4a4a4a;
  --surface: #ffffff;
  --surface-2: #f6f6f7;

  /*
    Bidang di belakang pasfoto.

    Foto pengurus disimpan TANPA latar, jadi warna ini benar-benar terlihat di
    belakang setiap orang. Ia sengaja TIDAK mengikuti mode gelap sepenuhnya:
    sebagian besar pengurus mengenakan jas hitam, dan di atas latar gelap bahu
    mereka melebur sehingga kepalanya tampak melayang. Direktori yang gunanya
    mengenali orang tidak boleh menyembunyikan separuh orangnya.

    Di mode gelap nilainya diturunkan menjadi abu terang, bukan putih — cukup
    untuk memisahkan sosoknya, tanpa menjadi kotak menyilaukan.
  */
  --foto-well: #f2f2f4;
  --border: #e3e3e6;

  /*
    Bidang bernuansa merah yang sangat samar — latar ikon, lencana, dan cakram
    kecil.

    Ia ADA sebagai token, bukan dipilih di tiap berkas, karena pasangan
    terangnya (`--brand-50`) dan gelapnya (`--brand-950`) selalu muncul
    bersamaan. Berkas gaya yang memilih sendiri harus menulis
    `@media (prefers-color-scheme: dark)`, dan media query itu TIDAK MENGENAL
    toggle tema: pengguna yang sistemnya gelap tetapi memilih tema terang akan
    mendapat latar gelap di atas kartu terang. Token menyelesaikannya sekali,
    di tempat yang memang sudah menangani ketiga keadaan tema.
  */
  --brand-wash: var(--brand-50);

  /*
    Angka romawi bidang — dan versi yang menguat saat ubinnya disentuh.

    ALASANNYA SAMA PERSIS dengan `--brand-wash` di atas: warnanya semula
    dipilih di dalam berkas gaya komponen lewat
    `@media (prefers-color-scheme: dark)`, dan media query itu TIDAK MENGENAL
    toggle tema. Pengguna bersistem gelap yang memilih tema terang mendapat
    angka romawi gelap di atas ubin terang.

    NILAINYA TIDAK BERUBAH sedikit pun — masih `--brand-200` di terang dan
    `--brand-800` di gelap, persis seperti sebelumnya. Yang berubah hanya
    tempat pemilihannya: di sini, di satu-satunya blok yang menangani ketiga
    keadaan tema.

    Pasangan `-kuat` bergerak SATU anak tangga pada tangga merah yang sama,
    ke arah yang lebih terbaca di masing-masing tema: 200 → 300 saat terang,
    800 → 700 saat gelap. Tidak ada rona baru yang diperkenalkan.
  */
  --roman: var(--brand-200);
  --roman-kuat: var(--brand-300);

  /*
    Tinta merah DI ATAS `--brand-wash` — lencana angka, pil kecil, cakram ikon.

    Pasangan ini ada karena `--primary` TIDAK bisa dipakai di sini. Di tema
    gelap `--primary` bernilai `--brand-400`, dan di atas `--brand-950` ia
    hanya mencapai 4,63:1 — lolos AA untuk teks normal, tetapi lencana ini
    berukuran 0,7rem dan nilai sekarang jauh lebih baik. `--primary-hover`
    juga ditolak: namanya menjanjikan keadaan hover, sementara lencana ini
    statis.

    KONTRAS TERUKUR, bukan diperkirakan:
      #a80808 di atas #fef1f1 -> 7,05:1  (AAA, dipakai tema terang)
      #f48b8b di atas #3e0404 -> 7,28:1  (AAA, dipakai tema gelap)

    Kedua nilainya SAMA PERSIS dengan yang sudah tayang sebelumnya. Token ini
    tidak mengubah satu piksel pun — ia hanya memindahkan pemilihannya keluar
    dari media query yang tidak mengenal toggle tema.
  */
  --brand-ink: var(--brand-700);

  /*
    Basuhan merah SATU TINGKAT lebih kuat — halo cincin fokus dan glif hias.

    Dipakai tiga tempat yang nilainya sama persis: cincin fokus medan isian di
    auth.module.css dan status.module.css (keduanya menyalin aturan yang sama),
    serta tanda kutip raksasa di blockquote pada prose.module.css.

    Bedanya dengan `--brand-wash` hanya di tema terang: `--brand-100` bukan
    `--brand-50`. Untuk halo cincin fokus selisih itu berarti — `--brand-50`
    terlalu pucat untuk terlihat sebagai halo. Di tema gelap keduanya memang
    bertemu di `--brand-950`, dan itu bukan kelalaian: tangga merah memampat di
    ujung gelap, dan nilai itulah yang sudah tayang.

    Halo ini BUKAN penanda fokus utamanya. Penanda utamanya `border-color:
    var(--primary)` (7,77:1 di atas putih); halo hanya memperlebar jangkauan
    visualnya. Itu sebabnya nilai serendah ini dapat diterima.
  */
  --brand-wash-kuat: var(--brand-100);

  /*
    JARI-JARI: dua langkah, ditambah dua bentuk.

    Sebelumnya ada tiga belas nilai berbeda di berkas gaya komponen: 8px 49
    kali, 10px 33 kali, 3px 18 kali, 12px 14 kali, lalu 6px, 5px, 4px, dan 2px
    masing-masing sekali sampai enam kali. Selisih dua piksel tidak terbaca
    sebagai pilihan, hanya sebagai ketidakrapian, dan aturan proyek menuntut
    jari-jari yang konsisten dengan sistem yang ditetapkan.

    Dua langkah cukup, dan pembagiannya membawa arti: tanda kecil memakai
    sudut yang hampir tegas, bidang yang dapat dipegang mata memakai sudut yang
    lebih lunak.

    `50%` (cakram) dan `999px` (pil) TIDAK ikut tangga ini. Keduanya bentuk,
    bukan tingkatan, dan tetap ditulis apa adanya.
  */
  --r-kecil: 3px;
  --r-kartu: 8px;

  /*
    JARAK BERHENTI SAAT MELOMPAT KE JANGKAR (#misi, #nilai-nilai, dan
    seterusnya).

    Kop situs ini LENGKET, jadi lompatan jangkar yang berhenti tepat di tajuk
    menaruh tajuk itu di balik kop. Terukur pada halaman Visi & Misi: kop
    setinggi 131px, sementara `scroll-margin-top` bernilai 7rem = 119px —
    tajuk "Misi" berhenti 11px DI BAWAH tepi kop, sehingga baris pertamanya
    tertutup dan pengunjung mengira ia melompat ke tempat yang salah.

    Ditulis sebagai token karena sebelumnya angkanya tersebar: prose.css
    memakai 7rem dan kepengurusan.css memakai 8rem, dan tidak ada yang
    menghubungkan keduanya dengan tinggi kop yang sebenarnya. Satu nilai di
    sini berarti keduanya berubah bersama-sama saat kopnya berubah.

    9rem = 153px: 131px tinggi kop, ditambah 22px kelegaan supaya tajuknya
    tidak menempel persis di garis bawah kop.
  */
  --jangkar-atas: 9rem;

  /*
    TANGGA TINGGI TOMBOL — TIGA TINGKAT, SATU RADIUS.

    Sebelum disatukan, tombol utama situs ini terukur dalam LIMA tinggi, TIGA
    radius dan TIGA ukuran huruf yang berbeda:

      hero  .tombolUtama    64px   radius 8px   huruf 17,85px
      masuk/daftar .submit  56px   radius 8px   huruf 15,64px
      cari  .cariTombol     53px   radius 8px   huruf 13,94px
      status/kontak .submit 51px   radius 8px   huruf 15,64px
      ajakan .ajakanTombol  48px   radius 3px   huruf 13,94px

    Dua di antaranya bahkan memakai nama kelas yang sama, `.submit`, untuk
    peran yang sama — mengirim formulir — namun berbeda 5px karena bantalan
    tegaknya ditulis ulang di tiap berkas. Selisih sekecil itu tidak terbaca
    sebagai pilihan; ia terbaca sebagai halaman yang dikerjakan orang lain.

    Dua tingkat di bawah ini adalah peran yang benar-benar ada, dan tingginya
    dipatok lewat `min-height` supaya ukuran huruf yang berbeda tidak lagi
    menggeser tingginya.

    BATASNYA: `min-height` hanya memusatkan isi pada elemen `inline-flex` atau
    `flex`. Pada elemen `display: block` ia sekadar memanjangkan kotak ke
    bawah, dan labelnya terjepit ke tepi atas. Tombol hero (`.tombolUtama` di
    beranda) justru `display: block` — supaya label panjang boleh mengalir
    membawa panahnya — sehingga tingginya HARUS tetap berasal dari bantalan
    simetris. Sempat saya paksakan ke token dan hasilnya terukur rusak: udara
    2px di atas, 37px di bawah. Karena itu tidak ada tingkat "besar" di sini;
    satu-satunya tombol sebesar itu mengatur dirinya sendiri, dengan alasan
    yang tertulis di berkasnya.

    RADIUSNYA TIDAK DISERAGAMKAN, dan itu disengaja. Penelusuran menunjukkan
    dua radius itu bukan kelalaian melainkan dua kosakata yang konsisten:
    `--r-kecil` (3px) dipakai 23 kali untuk aksi ringkas berhuruf besar dan
    untuk lencana — termasuk "Gabung Sekarang" di kepala situs, yang memang
    sengaja dikembarkan dengan tombol ajakan — sedangkan `--r-kartu` (8px)
    milik kolom isian dan bidang kartu. Menyamakannya justru akan memutus
    pasangan yang sudah dirancang. Yang tidak pernah dirancang hanyalah
    tingginya.
  */
  --tombol-h: 3.1rem; /*     53px — baku: kirim formulir, ajakan, aksi utama */
  --tombol-h-kecil: 2.6rem; /* 44px — aksi sekunder, sekaligus batas sentuh */

  /*
    BAYANGAN: tiga peran, bukan sepuluh nilai.

    Berkas gaya sempat memuat sepuluh bayangan berbeda yang selisihnya beberapa
    piksel dan beberapa persen alfa. Setelah ditelusuri, ketiga peran di bawah
    inilah yang sebenarnya dikerjakan, dan sisanya salinan yang bergeser.

    Aturan proyek: bayangan harus MENOPANG HIERARKI, bukan membuat setiap
    elemen mengapung. Karena itu hanya tiga, dan masing-masing punya tugas yang
    dapat disebutkan dalam satu baris.

    Nilainya sengaja TIDAK berubah menurut tema. Alfa 0,08 di atas #121212
    memang nyaris tak terlihat, tetapi itu keadaan yang sudah tayang hari ini;
    memperkuatnya di mode gelap adalah perubahan tampilan tersendiri, bukan
    bagian dari penyatuan ini.
  */
  --naik-angkat: 0 8px 20px rgb(0 0 0 / 0.08);
  --naik-panel: 0 10px 30px rgb(0 0 0 / 0.05);
  --naik-apung: 0 16px 40px rgb(0 0 0 / 0.14);

  /*
    TANGGA UKURAN HURUF.

    Berkas gaya sempat memuat 61 ukuran berbeda di 310 deklarasi, dan 26 di
    antaranya dipakai satu kali saja. Kerumunan terbesarnya: 95 deklarasi
    tersebar di sebelas nilai antara 0,87rem dan 0,98rem, yaitu rentang selebar
    1,9 piksel. Tidak ada mata yang membedakan 0,88rem dari 0,90rem; yang
    terbaca hanyalah bahwa tidak ada yang jatuh pada garis yang sama.

    Pusat tiap langkah DIPILIH UNTUK MEMINIMALKAN PERGESERAN, bukan karena
    angkanya bulat. Nilai yang paling sering dipakai di setiap kerumunan yang
    menentukan pusatnya, sehingga sebagian besar elemen bergerak kurang dari
    satu piksel.

    Akar dokumen 17px, jadi ukuran pikselnya dicantumkan untuk dibaca manusia.
  */
  --t-mikro: 0.72rem; /* 12,2px  label kapital, lencana, penanda */
  --t-kecil: 0.82rem; /* 13,9px  meta, keterangan, petunjuk */
  --t-dasar: 0.92rem; /* 15,6px  teks di dalam kartu, prosa penunjang */
  --t-isi: 1.05rem; /*   17,9px  teks bacaan utama */
  --t-sedang: 1.18rem; /* 20,1px judul kartu, h4, h5 */
  --t-besar: 1.38rem; /*  23,5px judul blok */
  --t-xl: 1.55rem; /*     26,4px judul besar di dalam halaman */

  /*
    Tiga tingkat judul yang melentur. Sembilan `clamp` berbeda sempat dipakai
    untuk pekerjaan yang sama, beberapa hanya berbeda 0,1vw satu sama lain.
  */
  --t-h3: clamp(1.25rem, 2.5vw, 1.6rem);
  --t-h2: clamp(1.5rem, 3.5vw, 2.1rem);
  --t-h1: clamp(1.9rem, 4vw, 2.7rem);

  /* Peran semantik */
  --primary: var(--brand-700);
  --primary-hover: var(--brand-800);
  /*
    BIDANG MEREK TEMPAT TEKS PUTIH DUDUK — peran yang berbeda dari `--primary`.

    `--primary` menanggung dua tugas yang saling bertentangan: ia warna TEKS
    merah di atas latar halaman, dan sekaligus warna LATAR tempat teks putih
    berdiri. Di tema terang satu nilai bisa memenuhi keduanya. Di tema gelap
    tidak bisa, dan itu terukur:

      --brand-400 #eb4c4c  teks putih di atasnya   3,70:1  GAGAL (perlu 4,5)
                           sebagai teks di #121212  5,06:1  lolos
      --brand-500 #df1111  teks putih di atasnya   4,97:1  lolos
                           sebagai teks di #121212  3,77:1  GAGAL

    Tidak ada satu nilai yang memenuhi keduanya, jadi perannya yang dipisah.
    `--primary` tetap untuk teks dan garis; `--primary-isi` untuk bidang penuh.
    Di tema terang keduanya bernilai SAMA PERSIS, sehingga tidak ada satu
    piksel pun yang berubah di sana.
  */
  --primary-isi: var(--brand-700);
  --primary-isi-hover: var(--brand-800);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --bg: var(--surface);
  --bg-alt: var(--surface-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --foto-well: #d7d7dc;
    --primary: var(--brand-400); /* sebagai TEKS: 5,06:1 di atas #121212 (AA) */
    --primary-hover: var(--brand-300);
    /* Sebagai BIDANG: teks putih 4,97:1 (AA), dan 3,77:1 terhadap latar
       halaman sehingga tombolnya sendiri tetap terpisah dari bidangnya. */
    --primary-isi: var(--brand-500);
    --primary-isi-hover: var(--brand-600); /* teks putih 6,28:1 */
    /*
      `--surface` DIDEFINISIKAN ULANG DI SINI. Sebelumnya tidak, dan blok gelap
      menyetel `--bg` langsung ke #121212 — sehingga setiap komponen yang
      memakai `var(--surface)` sebagai latarnya tetap PUTIH di tema gelap.
      Terukur: kolom pencarian beranda, lencana `.badge`, dan keping kepakaran
      di direktori semuanya menyala putih di atas halaman gelap.
    */
    --surface: #121212;
    --surface-2: #1c1c1e;
    --text: #f2f2f3;
    --text-muted: #b0b0b4;
    --bg: #121212;
    --bg-alt: #1c1c1e;
    --border: #34343a;
    --brand-wash: var(--brand-950);
    --roman: var(--brand-800);
    --roman-kuat: var(--brand-700);
    --brand-ink: var(--brand-300);
    --brand-wash-kuat: var(--brand-950);
  }
}

/* Toggle tema eksplisit harus menang di kedua arah */
:root[data-theme='light'] {
  --foto-well: #f2f2f4;
  --primary: var(--brand-700);
  --primary-hover: var(--brand-800);
  --primary-isi: var(--brand-700);
  --primary-isi-hover: var(--brand-800);
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --bg: var(--surface);
  --bg-alt: var(--surface-2);
  --border: #e3e3e6;
  --brand-wash: var(--brand-50);
  --roman: var(--brand-200);
  --roman-kuat: var(--brand-300);
  --brand-ink: var(--brand-700);
  --brand-wash-kuat: var(--brand-100);
}

:root[data-theme='dark'] {
  --foto-well: #d7d7dc;
  --primary: var(--brand-400);
  --primary-hover: var(--brand-300);
  --primary-isi: var(--brand-500);
  --primary-isi-hover: var(--brand-600);
  --surface: #121212;
  --surface-2: #1c1c1e;
  --text: #f2f2f3;
  --text-muted: #b0b0b4;
  --bg: #121212;
  --bg-alt: #1c1c1e;
  --border: #34343a;
  --brand-wash: var(--brand-950);
  --roman: var(--brand-800);
  --roman-kuat: var(--brand-700);
  --brand-ink: var(--brand-300);
  --brand-wash-kuat: var(--brand-950);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Audiens utamanya profesor senior — teks isi minimal 17px, bukan 16px.
   * Lihat spec/standar-mutu.md §3. */
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

/*
  Gulir halus saat melompat ke jangkar, HANYA bila pengunjung tidak meminta
  gerak dikurangi.

  Lompatan seketika dari daftar isi tidak memberi petunjuk apa pun tentang ke
  mana halaman berpindah — isinya berganti dalam satu bingkai, dan pembaca
  harus mencari sendiri di mana ia sekarang. Gulir yang bergerak
  memperlihatkan jaraknya.

  Ditulis sebagai `no-preference`, bukan sebagai `smooth` yang lalu dibatalkan
  di `reduce`. Bedanya berarti: peramban lama yang tidak mengenal media query
  ini tidak mendapat gerak sama sekali, dan itu sisi yang aman — gerak yang
  tidak diminta dapat memicu rasa mual pada sebagian orang.
*/
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /*
    `--font-isi` disuntikkan next/font di layout; rantai cadangannya tetap
    nyata. Sebelumnya baris ini dimulai dari `system-ui`, yang berarti situs
    ini meminjam huruf antarmuka sistem operasi pengunjung dan tampil berbeda
    di setiap mesin. Alasan lengkap pemilihan Source Sans 3 ada di layout.tsx.
  */
  font-family:
    var(--font-isi, system-ui),
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/*
  Seluruh judul memakai serif; teks kerja tetap sans.

  Ini pembeda tunggal terbesar antara situs ini dan rujukan yang diminta:
  di sana judul berserif dan badan teks bersans, sementara di sini semuanya
  memakai font bawaan sistem — itulah yang membuatnya terasa datar.

  `--font-judul` disuntikkan next/font di layout. Rantai cadangannya nyata,
  bukan sekadar kata `serif`: bila fontnya gagal dimuat, Georgia sudah cukup
  dekat bentuknya sehingga tata letak tidak berubah mencolok.
*/
h1,
h2,
h3 {
  font-family: var(--font-judul, Georgia), Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}

h4,
h5 {
  font-family: var(--font-judul, Georgia), Georgia, 'Times New Roman', serif;
  font-weight: 600;
  text-wrap: balance;
}

a {
  color: var(--primary);
  text-underline-offset: 0.2em;
}

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

/* Focus indicator wajib terlihat jelas — syarat WCAG 2.2 */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/*
  TARGET SENTUH 44×44px — UNTUK KENDALI, BUKAN UNTUK SETIAP TAUTAN.

  Aturan ini semula berlaku bagi SEMUA `a`, dan itu keliru dalam dua arah
  sekaligus.

  Merusak di satu sisi. `display: inline-flex` menjadikan tautan sebuah kotak
  sebaris yang utuh, dan teks di dalam kotak semacam itu TIDAK BISA pindah
  baris. Sebuah tautan di tengah kalimat karena itu berhenti mengalir bersama
  kalimatnya. TERUKUR di /faq pada lebar 360px, dengan tautan sepanjang yang
  wajar ditulis Sekretariat lewat CMS:

    lebar tautan  309px  — sama persis dengan lebar paragrafnya
    tinggi tautan  69px  — memaksa kalimat pecah menjadi tiga bagian

  Kalimatnya terputus: kata sebelum tautan, lalu balok selebar kolom, lalu
  sisa kalimatnya. Halaman sekarang belum menampakkannya hanya karena isi
  prosanya kebetulan belum memuat tautan panjang.

  Tidak berbuat apa-apa di sisi lain. `min-height` tidak berlaku bagi elemen
  `display: inline`, sehingga begitu sebuah modul menulis `display: inline`
  untuk menyelamatkan tata letaknya — lima modul melakukannya — janji 44px itu
  ikut hilang tanpa jejak. Tiga modul lain bahkan menulis `min-height: auto`
  secara terang-terangan. Aturan yang dielakkan di delapan tempat bukan lagi
  aturan.

  WCAG 2.5.8 sendiri mengecualikan hal ini lewat pengecualian "Inline": target
  yang berada di dalam kalimat, yang tingginya memang ditentukan oleh tinggi
  baris teks di sekitarnya, tidak dihitung. Jadi pengecualian di bawah ini
  bukan pelonggaran syarat, melainkan pembacaan yang benar atasnya.

  Tautan di dalam `.prose` ditangani di prose.module.css, karena nama kelas
  modul sudah teracak dan tidak dapat disebut dari berkas global ini.
*/
button,
[role='button'],
input[type='submit'],
input[type='button'],
a:not(:where(p, td, th, dd, dt, blockquote, figcaption, label) a) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/*
  ATRIBUT `hidden` HARUS TETAP MENYEMBUNYIKAN — dan aturan di atas inilah yang
  membuatnya tidak.

  Peramban menyembunyikan elemen ber-`hidden` lewat `[hidden] { display: none }`
  di lembar gaya BAWAANNYA. Gaya penulis selalu menang atas gaya bawaan
  peramban, apa pun kekhususannya — jadi begitu aturan di atas memberi
  `display: inline-flex` kepada setiap `button` dan `a`, atribut `hidden` pada
  keduanya berhenti berarti apa-apa di seluruh situs.

  Tidak ada galat, tidak ada peringatan, dan pemeriksaan lewat DOM pun ikut
  tertipu: `el.hidden` menjawab `true` dengan yakin sementara elemennya
  tergambar utuh di layar.

  DUA TEMPAT TERBUKTI TERDAMPAK, dan keduanya sempat terlihat di tangkapan
  layar tanpa disadari:

    - Formulir pendaftaran menampilkan "Kembali", "Lanjut", dan "Kirim
      Pengajuan" SEKALIGUS di langkah pertama, padahal dua di antaranya
      disembunyikan skripnya.
    - Tombol "kembali ke atas" tergambar di puncak halaman naskah, padahal ia
      baru pantas muncul sesudah satu layar digulir.

  `!important` di sini bukan jalan pintas melainkan satu-satunya cara yang
  benar: sifat `hidden` memang harus mengalahkan gaya tampilan apa pun, dan
  itulah sebabnya idiom ini dipakai hampir semua lembar gaya penyetel ulang.
*/
[hidden] {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Lewati ke konten utama — untuk pengguna keyboard */
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 2px solid var(--primary);
  border-radius: 6px;
}