/*
 * Halaman publik lembaga SISPENDIS.
 * Token sama dengan dasbor (frontend-dashboard/src/shared/styles/tokens.css); warna tema lembaga
 * menimpa --color-* lewat atribut style di <html> (App\Support\TemaLembaga).
 * Header mengikuti gaya dasbor yang mengadopsi nu.or.id (keputusan pemilik 17-09-2026).
 */

:root {
  --color-primary: #0e4b44;
  --color-primary-hover: #0b3a35;
  --color-primary-soft: #e2f1ec;
  --color-primary-ink: #ffffff;
  --color-accent: #c9973f;
  --color-accent-soft: #f2e8d5;
  --color-ink: #161f1c;
  --color-muted: #556058;
  --color-border: #dbe2de;
  --color-bg: #f4f6f5;
  --color-surface: #ffffff;
  --color-surface-2: #eaeeec;
  --color-success: #1c7a46;
  --color-success-soft: #e3f3e7;
  --color-warning: #8a5a00;
  --color-warning-soft: #fbeed4;
  --color-danger: #a3271d;
  --color-danger-soft: #fbe8e5;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(22, 31, 28, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(22, 31, 28, 0.14);
  --tinggi-kepala: 64px;
  --tepi: 24px;
  --color-info: #33566b;
  --color-info-soft: #e4edf2;
}

/*
 * Gaya "timbul lembut" (keputusan pemilik 21-09-2026) - token SAMA dengan dasbor
 * (frontend-dashboard/src/shared/styles/tokens.css). Latar, kartu, dan permukaan satu
 * warna turunan warna lembaga; bentuk dari bayangan terang (kiri-atas) + gelap
 * (kanan-bawah) + garis tipis. Halaman lembaga menimpa --nm-latar/--nm-gelap/--nm-garis
 * & --color-surface lewat atribut style (App\Support\TemaLembaga) dengan rumus yang sama.
 *
 * Aturan: kartu & panel -> --nm-timbul; tombol -> --nm-timbul-kecil (ditekan tenggelam);
 * kotak isian -> --nm-tekan-kecil; baris daftar/tabel TANPA bayangan; isi artikel polos.
 */
:root,
[data-tema-lokal] {
  --nm-latar: #e9ecea;
  --nm-latar: color-mix(in srgb, var(--color-primary) 5%, #eceeed);
  --nm-terang: rgba(255, 255, 255, 0.9);
  --nm-gelap: #bcc5c1;
  --nm-gelap: color-mix(in srgb, var(--color-primary) 22%, #b4bab7);
  --nm-garis: #d3dbd7;
  --nm-garis: color-mix(in srgb, var(--color-primary) 12%, #d6dad8);
  --nm-timbul: 10px 10px 24px var(--nm-gelap), -10px -10px 24px var(--nm-terang);
  --nm-timbul-kecil: 4px 4px 10px var(--nm-gelap), -4px -4px 10px var(--nm-terang);
  --nm-tekan: inset 5px 5px 10px var(--nm-gelap), inset -5px -5px 10px var(--nm-terang);
  --nm-tekan-kecil: inset 3px 3px 6px var(--nm-gelap), inset -3px -3px 6px var(--nm-terang);
  --nm-radius: 18px;
  --nm-belang: rgba(255, 255, 255, 0.45);
  --color-bg: var(--nm-latar);
  --color-surface: var(--nm-latar);
  --color-surface-2: #dfe3e1;
  --color-surface-2: color-mix(in srgb, var(--nm-gelap) 30%, var(--nm-latar));
  --color-border: var(--nm-garis);
}
@media (max-width: 640px) {
  :root,
  [data-tema-lokal] {
    --nm-timbul: 6px 6px 14px var(--nm-gelap), -6px -6px 14px var(--nm-terang);
    --nm-timbul-kecil: 3px 3px 7px var(--nm-gelap), -3px -3px 7px var(--nm-terang);
    --nm-radius: 16px;
  }
}

/* Semua kotak isian "tertekan ke dalam"; :where() = spesifisitas nol. */
:where(input:not([type='checkbox'], [type='radio'], [type='file'], [type='hidden'], [type='color'], [type='range']), select, textarea) {
  box-shadow: var(--nm-tekan-kecil);
}
/* Tabel: belang tipis, tanpa bayangan per baris. */
:where(tbody tr:nth-child(even)) > :where(td) {
  background: var(--nm-belang);
}

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

html {
  scroll-padding-top: calc(var(--tinggi-kepala) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.kunci-gulir {
  overflow: hidden;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.25;
  text-wrap: balance;
}

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

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.lompat {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 60;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.lompat:focus {
  top: 8px;
}

.wadah {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* --- Kepala (menempel) ------------------------------------------------------------ */
.kepala {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nm-latar);
  border-bottom: 1px solid var(--nm-garis);
  box-shadow: 0 6px 14px -8px var(--nm-gelap);
}
.kepala__baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--tinggi-kepala);
  padding-inline: var(--tepi);
}
.merek {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--color-primary);
  text-decoration: none;
}
.merek__logo {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-primary-hover);
  font-size: 14px;
  font-weight: 800;
}
.merek__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.merek__teks {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.merek__nama {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.merek__sub {
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 500;
}
.kepala__kanan {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
/* Tombol kembali ke direktori sispendis.id - sengaja lebih tenang daripada "Masuk"
   supaya tidak bersaing dengan tindakan utama halaman lembaga. */
.kepala__aksi {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.tombol-sispendis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.tombol-sispendis:hover {
  background: var(--color-surface-2);
  color: var(--color-primary);
}
.tombol-sispendis:focus-visible,
.menu-hp__sispendis:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.menu-hp__sispendis {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.tombol-masuk,
.tombol-garis,
.tombol-utama {
  box-shadow: var(--nm-timbul-kecil);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.tombol-masuk,
.tombol-utama {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.tombol-masuk:hover,
.tombol-utama:hover {
  background: var(--color-primary-hover);
}
.tombol-garis {
  border: 1px solid var(--nm-garis);
  background: var(--nm-latar);
  color: var(--color-primary);
}
.tombol-masuk:active,
.tombol-garis:active,
.tombol-utama:active,
.tombol-kecil:active,
.kategori-baris__item:active,
.paginasi__nomor:active,
.cari__kotak button:active {
  box-shadow: var(--nm-tekan-kecil);
}
.tombol-keluar {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-danger);
  box-shadow: var(--nm-timbul-kecil);
}
.label-pendek {
  display: none;
}

/* Menu HP (details): tersembunyi di layar lebar */
.menu-hp {
  display: none;
}
.menu-hp > summary {
  list-style: none;
}
.menu-hp > summary::-webkit-details-marker {
  display: none;
}
.kepala__menu {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
}
.kepala__menu .ikon-tutup,
.menu-hp[open] .kepala__menu .ikon-buka {
  display: none;
}
.menu-hp[open] .kepala__menu .ikon-tutup {
  display: block;
}
.menu-hp__panel {
  position: fixed;
  top: calc(var(--tinggi-kepala) + 1px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 0 var(--tepi) 32px;
  background: var(--color-surface);
}
.menu-hp__akun {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-block: 16px;
}
.menu-hp__catatan {
  font-size: 13px;
  color: var(--color-muted);
}
.menu-hp__induk,
.menu-hp nav > a {
  border-bottom: 1px solid var(--color-border);
}
.menu-hp__induk > summary {
  list-style: none;
}
.menu-hp__induk > summary::-webkit-details-marker {
  display: none;
}
.menu-hp__judul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.menu-hp__judul.aktif,
.menu-hp__tautan-anak.aktif {
  color: var(--color-primary);
  font-weight: 700;
}
.menu-hp__panah {
  flex: none;
  color: var(--color-muted);
  transition: transform 0.2s ease;
}
.menu-hp__induk[open] .menu-hp__panah {
  transform: rotate(180deg);
}
.menu-hp__anak {
  display: flex;
  flex-direction: column;
  margin-top: -8px;
  padding-bottom: 12px;
}
.menu-hp__tautan-anak {
  padding: 8px 0 8px 16px;
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.redup {
  opacity: 0.55;
}

.lencana {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary-hover);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  vertical-align: 1px;
}

/* --- Pita menu induk (layar lebar) --------------------------------------------------- */
.pita {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 22px;
  margin-inline: var(--tepi);
  padding-inline: 16px;
  background: var(--color-primary);
  border-radius: 0 0 8px 8px;
}
.pita__induk {
  position: relative;
}
.pita__tautan {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
}
.pita__tautan.aktif {
  box-shadow: inset 0 -3px 0 var(--color-accent);
}
.pita__tautan:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pita__tautan:focus-visible {
  outline-color: var(--color-primary-ink);
  outline-offset: -2px;
}
.pita__tautan.redup {
  opacity: 0.7;
}
.pita__anak {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 30;
  display: none;
  flex-direction: column;
  min-width: 230px;
  padding-bottom: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-md);
}
.pita__induk:hover .pita__anak,
.pita__induk:focus-within .pita__anak {
  display: flex;
}
.pita__tautan-anak {
  margin-top: 12px;
  padding: 4px 16px;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pita__tautan-anak:hover,
.pita__tautan-anak:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}
.pita__tautan-anak.aktif {
  color: var(--color-primary);
  font-weight: 700;
}

.sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 8px var(--tepi) 0;
}
.sub__daftar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  min-width: 0;
}
.sub__tautan {
  padding-block: 4px;
  color: var(--color-muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.sub__tautan:hover {
  color: var(--color-ink);
}
.sub__tautan.aktif {
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
.sub__tanggal {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  color: var(--color-muted);
}

/* --- Isi ------------------------------------------------------------------------------ */
.latar {
  background: var(--latar, transparent);
}
.konten {
  padding: 24px var(--tepi) 48px;
  min-height: 50vh;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow > span {
  width: 18px;
  height: 2px;
  background: var(--color-accent);
}
.petunjuk {
  color: var(--color-muted);
  font-size: 14px;
}
.kosong {
  padding: 16px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 14px;
}

.halaman {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-timbul);
}
.halaman__kepala {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.halaman__kepala h1 {
  font-size: clamp(24px, 3vw, 32px);
  color: var(--color-ink);
}
.nomenklatur,
.halaman__tanggal {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 600;
}
.halaman--pesan h1 {
  font-size: 24px;
}
.kembali {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* Teks kaya (kelas rt-* sama dengan app lama App.jsx:15314-15323) */
.kaya {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.kaya > * + * {
  margin-top: 0.8em;
}
.kaya h3 {
  font-size: 20px;
}
.kaya h4 {
  font-size: 17px;
}
.kaya ul,
.kaya ol {
  padding-left: 1.4em;
}
.kaya blockquote {
  margin-inline: 0;
  padding-left: 14px;
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
}
.rt-align-left { text-align: left; }
.rt-align-center { text-align: center; }
.rt-align-right { text-align: right; }
.rt-align-justify { text-align: justify; }
.rt-line-compact { line-height: 1.35; }
.rt-line-relaxed { line-height: 1.6; }
.rt-line-loose { line-height: 1.9; }
.rt-paragraph-tight { margin-bottom: 0.45rem; }
.rt-paragraph-roomy { margin-bottom: 1rem; }
.rt-paragraph-spacious { margin-bottom: 1.45rem; }

.belum-tersedia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
}
.belum-tersedia__judul {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 700;
}

/* --- Beranda --------------------------------------------------------------------------- */
.beranda {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.beranda--tanpa-foto {
  grid-template-columns: minmax(0, 760px);
}
.beranda__teks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}
.beranda__judul {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.01em;
}
.beranda__pengantar {
  max-width: 56ch;
  color: var(--color-muted);
  font-size: 17px;
}

.cari {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.cari__label {
  font-size: 13px;
  font-weight: 700;
}
.cari__kotak {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--nm-tekan-kecil);
  color: var(--color-muted);
}
.cari__kotak:focus-within {
  border-color: var(--color-primary);
}
.cari__kotak input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: 16px;
  outline: none;
  box-shadow: none;
}
.cari__kotak button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--nm-timbul-kecil);
}
.cari__petunjuk {
  font-size: 12px;
  color: var(--color-muted);
}
.cari__saran {
  position: absolute;
  top: calc(100% - 18px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.cari__saran p {
  padding: 10px;
  color: var(--color-muted);
  font-size: 14px;
}
/* Jalan pintas Kehadiran Harian di beranda (permintaan pemilik 28-09-2026) - tombol
   lebar supaya mudah ditekan di HP, warna tema supaya terlihat sebagai ajakan utama. */
.tombol-kehadiran {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--color-primary);
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}
.tombol-kehadiran:hover,
.tombol-kehadiran:focus-visible {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.tombol-kehadiran__ikon {
  display: flex;
  flex: 0 0 auto;
}
.tombol-kehadiran__teks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}
.tombol-kehadiran__teks strong {
  font-size: 15px;
  font-weight: 700;
}
.tombol-kehadiran__teks small {
  font-size: 12.5px;
  opacity: 0.85;
}
.tombol-kehadiran__panah {
  flex: 0 0 auto;
  font-size: 18px;
}
@media (max-width: 560px) {
  .tombol-kehadiran {
    padding: 12px 14px;
  }
  .tombol-kehadiran__teks small {
    display: none;
  }
}
.hasil-cari {
  margin-top: 4px;
}
.hasil-cari__kosong {
  color: var(--color-muted);
  font-size: 14px;
}
.daftar-santri {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.daftar-santri a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
}
.daftar-santri a:hover,
.daftar-santri a:focus-visible {
  background: var(--color-primary-soft);
}
.daftar-santri__ikon {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-muted);
}
.daftar-santri__nama {
  font-weight: 600;
}
.daftar-santri__sub {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 13px;
}

.beranda__foto figure {
  margin: 0;
}
.foto-tunggal img,
.slide__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.foto-tunggal figcaption,
.slide__item figcaption {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 14px;
}
.slide {
  position: relative;
}
.slide__jalur {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.slide__jalur::-webkit-scrollbar {
  display: none;
}
.slide__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.slide__tombol {
  position: absolute;
  top: calc(50% - 32px);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); /* warna-tetap: tombol di atas foto */
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.slide__tombol--kiri {
  left: 10px;
}
.slide__tombol--kanan {
  right: 10px;
}
.slide__titik {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.slide__titik button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-border);
  cursor: pointer;
}
.slide__titik button[aria-current='true'] {
  width: 22px;
  background: var(--color-primary);
}

/* --- Profil santri --------------------------------------------------------------------- */
.remah {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--color-muted);
  font-size: 14px;
}
.remah a {
  text-decoration: none;
}
.profil {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-timbul);
}
.profil__kepala {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profil__foto {
  flex: none;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-muted);
  display: grid;
  place-items: center;
}
.profil__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profil__identitas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.profil__identitas h1 {
  font-size: clamp(22px, 3vw, 28px);
}
.profil__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--color-muted);
  font-size: 14px;
}
.pil {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--color-success);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pil--keluar {
  background: var(--color-danger);
  color: #fff;
}
.pil--lulus {
  background: var(--color-info);
  color: #fff;
}
.profil__bagian {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profil__bagian h2,
.navigasi-periode h2,
.libur-khusus h2,
.perubahan-biaya h2,
.vmts__bagian h2 {
  font-size: 17px;
}

.navigasi-periode {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.navigasi-periode__sub {
  color: var(--color-muted);
  font-size: 13px;
}
.navigasi-periode__tombol {
  display: flex;
  gap: 6px;
}
.tombol-kecil {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--nm-timbul-kecil);
}
.tombol-kecil:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.tombol-kecil--mati,
.tombol-kecil--mati:hover {
  border-color: var(--color-border);
  color: var(--color-muted);
  opacity: 0.55;
}

.minggu__hari {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.hari {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: 12px;
}
.hari__nama {
  font-weight: 700;
}
.hari__tanggal,
.hari__sumber {
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
.hari__status {
  font-weight: 700;
}
.hari--hadir {
  background: var(--color-success-soft);
  border-color: transparent;
}
.hari--hadir .hari__status {
  color: var(--color-success);
}
.hari--tidak-hadir {
  background: var(--color-danger-soft);
  border-color: transparent;
}
.hari--tidak-hadir .hari__status {
  color: var(--color-danger);
}
.hari--belum-berjalan,
.hari--tidak-dihitung {
  background: var(--color-surface);
  border-style: dashed;
}

.kartu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--nm-timbul);
}
.kartu--kegiatan {
  border-left: 3px solid var(--color-accent);
}
.kartu__tanggal {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
}
.kartu__baris {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px 16px;
}
.kartu__baris div {
  min-width: 0;
}
.kartu__baris .kartu__lebar {
  grid-column: 1 / -1;
}
.kartu__baris dt {
  color: var(--color-muted);
  font-size: 12px;
}
.kartu__baris dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.kartu__pengajar {
  color: var(--color-muted);
  font-size: 12px;
}
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge--baik {
  background: var(--color-success);
  color: #fff;
}
.badge--ulangi {
  background: var(--color-danger);
  color: #fff;
}
.badge--netral {
  background: var(--color-surface-2);
  color: var(--color-muted);
}
.riwayat__sebelumnya > summary {
  width: fit-content;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.riwayat__kartu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.tabel-gulir {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tabel th,
.tabel td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
.tabel th {
  background: var(--color-surface-2);
  font-size: 12px;
}
.tabel tr:last-child td {
  border-bottom: 0;
}
.cari-lagi {
  max-width: 560px;
  margin-top: 24px;
}

/* --- Menu halaman ---------------------------------------------------------------------- */
.struktur {
  margin: 0;
}
.struktur img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.struktur figcaption {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 13px;
}
.vmts {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vmts__bagian {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--color-accent);
}

.blok {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blok__sub {
  font-size: 15px;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.materi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.materi__kartu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--nm-timbul);
}
.materi__kartu h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-primary);
}
.materi__lingkup {
  color: var(--color-muted);
  font-size: 14px;
}
.materi__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ubudiyah {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ubudiyah__materi {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
.skala {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.skala__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.skala__angka {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 800;
}
.daftar-poin {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.daftar-poin--nomor {
  padding-left: 1.4em;
}
.chip-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
}
.chip--kecil {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
}
.chip__catatan {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 12px;
}

.jadwal-kelas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.jadwal-kelas li {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.jadwal-kelas__label {
  font-size: 13px;
  color: var(--color-muted);
}
.jadwal-kelas__jam {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Kegiatan Tarbiyah punya hari sendiri & peserta terbatas (keputusan pemilik 27-09-2026). */
.jadwal-kelas__hari::before {
  content: ' · ';
}
.jadwal-kelas__catatan {
  display: block;
  font-size: 12px;
  font-style: italic;
}
.kalender__kepala,
.kalender__isi {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.kalender__kepala span {
  padding: 4px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.kalender__sel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 72px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: 11px;
}
.kalender__sel--kosong {
  background: transparent;
}
.kalender__sel--active {
  background: var(--color-primary-soft);
}
.kalender__sel--praktik-ubudiyah {
  background: var(--color-accent-soft);
}
.kalender__sel--special-holiday {
  background: var(--color-danger-soft);
}
.kalender__tgl {
  font-size: 14px;
  font-weight: 800;
}
.kalender__label {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.kalender__catatan {
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
.libur-khusus {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.libur-khusus ul,
.daftar-pengumuman,
.biaya,
.perubahan-biaya ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.libur-khusus li {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.libur-khusus__tanggal {
  font-weight: 700;
  font-size: 14px;
}

.daftar-hadir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.daftar-hadir__baris {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.daftar-hadir__no {
  width: 28px;
  flex: none;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.daftar-hadir__nama {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
.daftar-hadir__nama:hover span:first-child {
  color: var(--color-primary);
  text-decoration: underline;
}
.daftar-hadir__sub {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
}

.daftar-pengumuman li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
  text-decoration: none;
}
.daftar-pengumuman__judul {
  font-weight: 700;
}
.daftar-pengumuman li a:hover .daftar-pengumuman__judul {
  color: var(--color-primary);
}
.daftar-pengumuman__tanggal {
  color: var(--color-muted);
  font-size: 13px;
}

.biaya {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.biaya__kartu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}
.biaya__label {
  color: var(--color-muted);
  font-size: 13px;
}
.biaya__nilai {
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Pengumuman tarif yang belum berlaku (permintaan pemilik 29-09-2026): wali santri harus
   tahu tarif baru SEBELUM tagihannya berubah, bukan sesudahnya. */
.biaya__mendatang {
  display: block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: 13px;
}
.biaya__mendatang strong {
  font-variant-numeric: tabular-nums;
}
.perubahan-biaya {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perubahan-biaya__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.perubahan-biaya__judul {
  font-weight: 700;
}
.perubahan-biaya__isi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-variant-numeric: tabular-nums;
}
.perubahan-biaya__selisih--naik {
  color: var(--color-danger);
  font-weight: 700;
}
.perubahan-biaya__selisih--turun {
  color: var(--color-success);
  font-weight: 700;
}
.perubahan-biaya__berlaku {
  color: var(--color-muted);
  font-size: 13px;
}

/* --- Kaki & WhatsApp ------------------------------------------------------------------- */
/* Desain ulang 22-09-2026 (permintaan pemilik): warna latar kaki TETAP (--color-primary-hover,
   pita bawah tetap digelapkan). Yang berubah hanya bentuk: sudut atas membulat dengan aksen
   emas di tengah, tiga kolom menjadi panel lembut transparan, judul kolom bergaris, tautan
   berpenanda, dan pita bawah memberi ruang untuk tombol WhatsApp. */
.kaki {
  position: relative;
  margin-top: 40px;
  border-radius: 32px 32px 0 0;
  background: var(--color-primary-hover);
  color: rgba(255, 255, 255, 0.92);
}
.kaki::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 96px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--color-accent);
  transform: translateX(-50%);
}
.kaki a {
  color: #ffffff;
}
.kaki__utama {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
  gap: 20px;
  padding: 48px var(--tepi) 36px;
}
.kaki__kolom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--nm-radius);
  background: rgba(255, 255, 255, 0.05); /* warna-tetap: panel tembus pandang di atas kaki gelap */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* warna-tetap: kilau tepi atas panel di atas kaki gelap */
}
.kaki__merek {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.kaki__merek .merek__logo {
  width: 52px;
  height: 52px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 0 0 6px rgba(255, 255, 255, 0.05); /* warna-tetap: cincin logo di atas kaki gelap */
}
.kaki__nama {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.kaki__sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.5;
}
.kaki__judul {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kaki__judul::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14); /* warna-tetap: garis judul di atas kaki gelap */
}
.kaki__alamat {
  max-width: none;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.65;
}
.kaki__alamat a {
  text-decoration: underline;
}
.kaki__peta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 38px;
  margin-top: auto;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kaki__peta:hover {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.1); /* warna-tetap: di atas kaki gelap */
}
.kaki__peta svg {
  color: var(--color-accent);
}
.kaki__tautan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
}
.kaki__tautan a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  text-decoration: none;
  transition: transform 0.15s ease, color 0.15s ease;
}
.kaki__tautan a::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent);
}
.kaki__tautan a:hover {
  color: var(--color-accent);
  transform: translateX(3px);
}
.kaki :focus-visible {
  outline-color: #ffffff;
}
.sosmed {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.sosmed__ikon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); /* warna-tetap: di atas kaki gelap */
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sosmed__ikon:hover {
  background: var(--color-accent);
  color: var(--color-primary-hover);
  transform: translateY(-2px);
}
.kaki__sispendis {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22); /* warna-tetap: di atas kaki gelap */
  font-size: 13px;
}
.kaki__sispendis-isi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  /* Ruang kanan untuk tombol WhatsApp yang melayang - tulisan tidak lagi tertutup. */
  padding: 16px calc(var(--tepi) + 72px) 16px var(--tepi);
  color: rgba(255, 255, 255, 0.75);
}
.kaki__platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.kaki__platform b {
  letter-spacing: 0.04em;
}
.kaki__platform-logo {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-primary-hover);
  font-size: 12px;
  font-weight: 900;
}
@media (prefers-reduced-motion: reduce) {
  .kaki__tautan a,
  .kaki__peta,
  .sosmed__ikon {
    transition: none;
  }
  .kaki__tautan a:hover,
  .sosmed__ikon:hover {
    transform: none;
  }
}
.wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #1faa59; /* warna-tetap: warna merek WhatsApp */
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); /* warna-tetap: tombol WhatsApp mengambang */
}

/* --- Halaman tunggal ------------------------------------------------------------------- */
.tunggal {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.tunggal__kartu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--nm-radius);
  text-align: left;
  box-shadow: var(--nm-timbul);
}
.tunggal__kartu h1 {
  font-size: 26px;
}

/* --- Beranda pusat sispendis.id (direktori lembaga) ------------------------------------ */
/* Susunan RootLanding app lama (docs/AUDIT_SUPER_ADMIN_APP_LAMA.md §1), dirapikan atas
   permintaan pemilik 21-09-2026: pencarian besar di bawah merek, kartu lembaga yang
   seluruhnya bisa diklik dengan pita warna tema lembaganya sendiri dan logo bundar
   yang menumpang di tepi pita. Warna tiap kartu datang dari atribut style-nya. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pub--pusat {
  background:
    radial-gradient(1200px 420px at 50% -120px, var(--color-primary-soft), transparent 70%),
    var(--color-bg);
}
.pusat {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 16px 104px;
  display: grid;
  gap: 40px;
}
.pusat__merek {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.pusat__eyebrow {
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pusat__logo {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid var(--color-surface);
  box-shadow: var(--nm-timbul);
  background: var(--color-surface);
}
.pusat__merek h1 {
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}
.pusat__tagline {
  font-size: 18px;
  font-weight: 700;
  text-wrap: balance;
}
.pusat__sub {
  max-width: 56ch;
  color: var(--color-muted);
  font-size: 15px;
  text-wrap: balance;
}
.pusat__cari {
  position: relative;
  display: flex;
  width: min(100%, 560px);
  margin-top: 14px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--nm-tekan);
}
.pusat__cari:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--nm-tekan), 0 0 0 4px var(--color-primary-soft);
}
.pusat__cariIkon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}
.pusat__cari input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px 10px 46px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: inherit;
}
.pusat__cari input:focus {
  outline: none;
}
.pusat__cari button {
  flex: none;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pusat__cari button:hover {
  background: var(--color-primary-hover);
}
.pusat__cari button:focus-visible,
.pusat__gembok:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Saat pencarian langsung aktif (pusat.js), tombol Cari tidak diperlukan lagi. */
.pusat__cari--langsung button {
  display: none;
}
.pusat__daftar {
  display: grid;
  gap: 20px;
}
.pusat__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.pusat__kepala h2 {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}
.pusat__petunjuk {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 13.5px;
}
.pusat__hitung {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pusat__hasil {
  display: grid;
  gap: 20px;
  transition: opacity 0.15s ease;
}
.pusat__hasil[aria-busy='true'] {
  opacity: 0.55;
}
.pusat__saring {
  color: var(--color-muted);
  font-size: 14px;
}
.pusat__saring a {
  color: var(--color-primary);
}
.pusat__kosong {
  padding: 28px 20px;
  border: 1px dashed var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-muted);
  text-align: center;
}
.pusat__kisi {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.kartu-lembaga {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: var(--nm-timbul);
}
.kartu-lembaga:hover,
.kartu-lembaga:focus-within {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: 14px 14px 30px var(--nm-gelap), -12px -12px 28px var(--nm-terang);
}
.kartu-lembaga__pita {
  display: flex;
  justify-content: flex-end;
  height: 64px;
  padding: 12px;
  background:
    radial-gradient(160px 80px at 85% 0%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); /* warna-tetap: kilau pita kartu lembaga */
}
.kartu-lembaga__status {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); /* warna-tetap: di atas pita berwarna kartu lembaga */
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kartu-lembaga__logo {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 800;
  box-shadow: var(--nm-timbul-kecil);
}
.kartu-lembaga__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kartu-lembaga__isi {
  display: grid;
  gap: 4px;
  padding: 12px 20px 16px;
}
.kartu-lembaga__nama {
  font-size: 17px;
  line-height: 1.35;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.kartu-lembaga__kode {
  color: var(--color-muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.kartu-lembaga__kontak {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  color: var(--color-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.kartu-lembaga__kontak li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 8px;
}
.kartu-lembaga__kontak svg {
  margin-top: 3px;
  color: var(--color-primary);
}
.kartu-lembaga__alamat {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kartu-lembaga__buka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: auto 20px 0;
  padding: 14px 0 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
/* Satu tautan menutup seluruh kartu - seluruh kartu bisa diklik. */
.kartu-lembaga__buka::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}
.kartu-lembaga__buka svg {
  transition: transform 0.18s ease;
}
.kartu-lembaga:hover .kartu-lembaga__buka svg {
  transform: translateX(4px);
}
.kartu-lembaga__buka:focus-visible {
  outline: none;
}
.kartu-lembaga:has(.kartu-lembaga__buka:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}
.pusat__kaki {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 8px;
  color: var(--color-muted);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.pusat__gembok {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
  .kartu-lembaga,
  .kartu-lembaga__buka svg,
  .pusat__hasil {
    transition: none;
  }
  .kartu-lembaga:hover,
  .kartu-lembaga:focus-within {
    transform: none;
  }
}
@media (max-width: 640px) {
  .pusat {
    padding-top: 32px;
    gap: 28px;
  }
  .pusat__kisi {
    grid-template-columns: 1fr;
  }
  .pusat__cari button {
    padding-inline: 16px;
  }
}

/* Di HP kepala halaman sudah sesak (menu, nama lembaga, Masuk); tombol kembali ke
   SISPENDIS pindah ke dalam panel menu (.menu-hp__sispendis). */
@media (max-width: 639px) {
  .tombol-sispendis {
    display: none;
  }
}

/* --- Layar sempit ---------------------------------------------------------------------- */
@media (max-width: 1099px) {
  :root {
    --tinggi-kepala: 56px;
  }
  .kepala__baris {
    gap: 8px;
  }
  .menu-hp {
    display: block;
  }
  /* Logo & nama lembaga rata kiri, diberi jarak dari tombol menu (permintaan pemilik 18-09-2026). */
  .merek {
    flex: 1;
    justify-content: flex-start;
    margin-left: 6px;
    gap: 10px;
  }
  .merek__logo {
    width: 32px;
    height: 32px;
  }
  .merek__nama {
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .merek__sub {
    display: none;
  }
  .kepala__kanan .tombol-masuk span:not(.label-pendek) {
    display: none;
  }
  .kepala__kanan .label-pendek {
    display: inline;
  }
  .kepala__kanan .tombol-keluar {
    display: none;
  }
  .kepala__kanan .tombol-masuk {
    padding: 6px 10px;
  }
  .pita {
    display: none;
  }
  .sub {
    min-height: 0;
    padding-top: 12px;
  }
  .sub--kosong {
    display: none;
  }
  .sub__daftar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .sub__tanggal {
    display: none;
  }
  .beranda,
  .beranda--tanpa-foto {
    grid-template-columns: minmax(0, 1fr);
  }
  .kaki__utama {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .kaki__lembaga {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  :root {
    --tepi: 16px;
  }
  .halaman,
  .profil {
    padding: 18px;
  }
  .profil__kepala {
    align-items: flex-start;
  }
  .profil__foto {
    width: 72px;
    height: 72px;
  }
  .minggu__hari {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .kalender__sel {
    min-height: 48px;
    padding: 4px;
  }
  .kalender__catatan {
    display: none;
  }
  .kalender__label {
    font-size: 10px;
  }
  .wa {
    right: 14px;
    bottom: 14px;
  }
  .kaki {
    border-radius: 24px 24px 0 0;
  }
  .kaki__utama {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-top: 36px;
    padding-bottom: 24px;
  }
  .kaki__kolom {
    padding: 18px;
  }
  .kaki__sispendis-isi {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 84px 20px var(--tepi);
  }
}

/* ============================================================
   ARTIKEL - susunan merujuk nu.or.id (permintaan pemilik 20-09-2026)
   ============================================================
   Pembagian bentuk mengikuti rujukan:
   - halaman DAFTAR  -> baris (gambar kiri + teks kanan, garis putus-putus)
   - BERANDA         -> kartu bergambar di atas
   Warna label memakai warna tema lembaga, bukan hijau NU.
   ------------------------------------------------------------ */

/* Judul halaman bergaris, seperti judul kanal nu.or.id */
.judul-kanal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color-primary);
  margin-bottom: 18px;
}
.judul-kanal h1,
.judul-kanal h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}
.judul-kanal--kecil {
  border-bottom-width: 2px;
  margin-top: 40px;
}
.judul-kanal--kecil h2 {
  font-size: 20px;
}
.judul-kanal__jumlah {
  color: var(--color-muted);
  font-size: 13px;
}
.judul-kanal__tautan {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* Label kategori: kotak berwarna tema, sudut tegas (pola chip kanal nu.or.id) */
.label-kategori {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.label-kategori:hover {
  background: var(--color-primary-hover);
}

/* Baris kategori penyaring: Semua + kategori urut abjad */
.kategori-baris {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.kategori-baris__item {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--nm-timbul-kecil);
}
.kategori-baris__item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.kategori-baris__item--aktif,
.kategori-baris__item--aktif:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

/* --- Daftar artikel: baris --------------------------------------------------- */
.daftar-artikel {
  display: flex;
  flex-direction: column;
}
.baris-artikel {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 2px dashed var(--color-border);
}
.baris-artikel:first-child {
  padding-top: 0;
}
.baris-artikel:last-child {
  border-bottom: 0;
}
.baris-artikel__gambar {
  flex: none;
  display: block;
  width: 160px;
  height: 120px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-surface-2);
}
.baris-artikel__gambar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.baris-artikel__gambar--kosong {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-border));
}
.baris-artikel__isi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.baris-artikel__judul {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
.baris-artikel__judul a {
  color: var(--color-ink);
  text-decoration: none;
}
.baris-artikel__judul a:hover {
  color: var(--color-primary);
}
.baris-artikel__ringkasan {
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.baris-artikel__meta {
  margin-top: auto;
  color: var(--color-muted);
  font-size: 12.5px;
}

/* --- Kartu artikel (khusus beranda) ------------------------------------------ */
.artikel-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.kartu-artikel {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--nm-timbul);
}
.kartu-artikel__tautan {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.kartu-artikel__gambar {
  display: block;
  width: 100%;
  /* height:auto WAJIB: tanpa itu atribut height="360" pada <img> mengunci tingginya
     360px berapa pun lebar kartunya - di PC (4 kolom, lebar ±260px) gambarnya jadi
     POTRET dan aspect-ratio di bawah tidak pernah berlaku. Ditemukan pemilik 21-09-2026. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-surface-2);
}
.kartu-artikel__gambar--kosong {
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-border));
}
.kartu-artikel__isi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px 16px;
}
.kartu-artikel__kategori {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kartu-artikel__judul {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.4;
}
.kartu-artikel__tautan:hover .kartu-artikel__judul {
  color: var(--color-primary);
}
.kartu-artikel__ringkasan {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.55;
}
.kartu-artikel__meta {
  margin-top: auto;
  padding-top: 4px;
  color: var(--color-muted);
  font-size: 12.5px;
}

/* --- Back - 1 2 3 - Next ------------------------------------------------------ */
.paginasi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}
.paginasi__tombol,
.paginasi__nomor {
  min-width: 40px;
  padding: 8px 13px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--nm-timbul-kecil);
}
.paginasi__tombol:hover,
.paginasi__nomor:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.paginasi__tombol--mati {
  color: var(--color-muted);
  opacity: 0.55;
}
.paginasi__nomor--aktif,
.paginasi__nomor--aktif:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.paginasi__jeda {
  padding: 0 4px;
  color: var(--color-muted);
}

/* --- Halaman baca artikel ----------------------------------------------------- */
.halaman--artikel,
.artikel {
  max-width: 860px;
}
.artikel__kepala {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.artikel__kepala h1 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.artikel__pembuka {
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.6;
}
.artikel__baris-penulis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.artikel__penulis {
  font-size: 14.5px;
  font-weight: 700;
}
.artikel__penulis a {
  color: var(--color-primary);
}
.artikel__tanggal {
  color: var(--color-muted);
  font-size: 13px;
}
.artikel__gambar {
  margin: 0 0 24px;
}
.artikel__gambar img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.artikel__gambar figcaption {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.5;
}
/* Kolom baca: 17px/1.75 - sedikit lebih lega daripada 16/1.5 pada rujukan,
   karena artikel keagamaan cenderung panjang dan banyak dibaca di layar HP. */
.artikel__isi {
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.75;
  overflow-x: auto;
}
.artikel__isi > * + * {
  margin-top: 1em;
}
.artikel__isi h3 {
  margin-top: 1.6em;
  font-size: 21px;
}
.artikel__isi h4 {
  margin-top: 1.4em;
  font-size: 18px;
}
.artikel__kaki {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.artikel__editor {
  color: var(--color-muted);
  font-size: 14px;
}
/* Bagikan artikel (permintaan pemilik 28-09-2026) - warna tiap layanan sengaja dipakai
   supaya dikenali sekilas; ukuran tombol mengikuti jempol di HP (minimal 44px). */
.bagikan {
  max-width: 820px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.bagikan__judul {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-muted);
}
.bagikan__daftar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bagikan__tombol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bagikan__tombol:hover,
.bagikan__tombol:focus-visible {
  border-color: currentColor;
}
.bagikan__tombol--wa { color: #1DA851; }
.bagikan__tombol--fb { color: #1877F2; }
.bagikan__tombol--tg { color: #229ED9; }
.bagikan__tombol--x { color: var(--color-ink); }
.bagikan__tombol--salin { color: var(--color-primary); }
@media (max-width: 560px) {
  .bagikan__daftar { gap: 8px; }
  .bagikan__tombol { padding: 0 12px; font-size: 13px; }
}
.artikel__kataKunci {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.artikel__kataKunciJudul {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chip--tautan {
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chip--tautan:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}
.saringan-kata {
  margin-bottom: 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-2);
  font-size: 14.5px;
}

/* Tabel di dalam naskah artikel (tag tabel diizinkan sejak 20-09-2026). */
.kaya table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 15.5px;
}
.kaya th,
.kaya td {
  border: 1px solid var(--color-border);
  padding: 9px 11px;
  vertical-align: top;
  text-align: left;
}
.kaya th {
  background: var(--color-surface-2);
  font-weight: 700;
}
.kaya caption {
  margin-bottom: 6px;
  color: var(--color-muted);
  font-size: 13px;
}

/* Gambar di tengah naskah artikel (R16). Selalu menyesuaikan lebar kolom baca,
   jadi gambar besar pun tidak pernah membuat halaman bergeser ke samping. */
.kaya img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4em auto;
  border-radius: 4px;
}

/* Grafik dari tabel angka (Support/GrafikTabel.php, R17). SVG-nya digambar di
   server; di sini hanya soal ukuran dan warna teksnya. */
.grafik-tabel {
  margin: 1.6em 0;
}
.grafik-tabel__gambar {
  padding: 10px 4px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}
.grafik-tabel__svg {
  display: block;
  width: 100%;
  height: auto;
}
.grafik-tabel__angka,
.grafik-tabel__nama {
  fill: var(--color-muted);
  font-size: 12.5px;
  font-family: inherit;
}
.grafik-tabel__data {
  margin-top: 8px;
}
.grafik-tabel__data > summary {
  cursor: pointer;
  color: var(--color-primary);
  font-size: 14px;
}
.grafik-tabel__data table {
  margin-top: 8px;
}
/* Di layar kecil gambar ikut mengecil, jadi teksnya dibesarkan (satuannya ikut
   viewBox SVG) supaya tetap terbaca di HP. Tabelnya boleh digulir ke samping,
   halaman tidak ikut melebar. */
@media (max-width: 640px) {
  .grafik-tabel__angka,
  .grafik-tabel__nama {
    font-size: 21px;
  }
  .grafik-tabel__data table {
    display: block;
    overflow-x: auto;
  }
}

/* --- Bagian artikel terbaru di beranda ---------------------------------------- */
.beranda-artikel {
  margin-top: 44px;
}
.beranda-artikel__kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color-primary);
  margin-bottom: 18px;
}
.beranda-artikel__kepala h2 {
  font-size: 24px;
  font-weight: 800;
}
.beranda-artikel__tombol {
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 720px) {
  .judul-kanal h1,
  .judul-kanal h2 {
    font-size: 22px;
  }
  .artikel__kepala h1 {
    font-size: 25px;
    line-height: 1.28;
  }
  .artikel__pembuka {
    font-size: 15.5px;
  }
  .artikel__isi {
    font-size: 16px;
    line-height: 1.7;
  }
  /* Baris artikel di HP: gambar mengecil jadi kotak 96px seperti rujukan. */
  .baris-artikel {
    gap: 12px;
    padding: 14px 0;
  }
  .baris-artikel__gambar {
    width: 96px;
    height: 96px;
  }
  .baris-artikel__judul {
    font-size: 15.5px;
    line-height: 1.4;
  }
  .baris-artikel__ringkasan {
    display: none;
  }
  .artikel-kisi {
    grid-template-columns: minmax(0, 1fr);
  }
  .paginasi__tombol,
  .paginasi__nomor {
    min-width: 36px;
    padding: 7px 10px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide__jalur {
    scroll-behavior: auto;
  }
  .menu-hp__panah {
    transition: none;
  }
}

/* ===== Formulir Santri Baru (fitur baru 21-09-2026) ===== */
.ajakan-daftar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 16px 18px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}
.ajakan-daftar > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 260px;
  min-width: 0;
}
.ajakan-daftar strong {
  color: var(--color-primary);
  font-size: 16px;
}
.ajakan-daftar span {
  color: var(--color-muted);
  font-size: 14px;
}
.formulir__pengantar {
  max-width: 65ch;
  color: var(--color-muted);
  font-size: 15px;
}
.formulir__galat {
  padding: 12px 14px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 14.5px;
  font-weight: 600;
}
.formulir {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.formulir__jebakan {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulir__kelompok {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.formulir__kelompok legend {
  margin-bottom: 12px;
  padding: 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.formulir__kisi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.formulir__isian {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.formulir__isian--lebar {
  grid-column: 1 / -1;
}
.formulir__isian label {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
}
.formulir__isian input,
.formulir__isian select {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 16px; /* 16px: HP tidak memperbesar layar saat kolom disentuh */
}
.formulir__isian input:focus-visible,
.formulir__isian select:focus-visible,
.formulir__setuju input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.formulir__isian--salah input,
.formulir__isian--salah select {
  border-color: var(--color-danger);
}
.formulir__ket {
  color: var(--color-muted);
  font-size: 13px;
}
.formulir__ket--salah {
  color: var(--color-danger);
  font-weight: 600;
}
.formulir__setuju {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 14px;
}
.formulir__setuju.formulir__isian--salah {
  border-color: var(--color-danger);
}
.formulir__setuju input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
}
.formulir__aksi,
.terkirim__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.terkirim__nomor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
  padding: 16px 20px;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}
.terkirim__nomor span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
}
.terkirim__nomor strong {
  color: var(--color-primary);
  font-size: 26px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.terkirim__nomor small {
  color: var(--color-muted);
  font-size: 13px;
}
@media (max-width: 640px) {
  .formulir__kisi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kebijakan Privasi (sispendis.id/kebijakan-privasi, Lampiran B-22) */
.kp {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px var(--tepi) 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kp__kembali a {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.kp__kepala,
.kp__bagian {
  padding: 24px 28px;
  border: 1px solid var(--nm-garis);
  border-radius: var(--nm-radius);
  background: var(--nm-latar);
  box-shadow: var(--nm-timbul);
}
.kp__eyebrow {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kp h1 {
  margin: 6px 0 4px;
  font-size: 32px;
  line-height: 1.2;
}
.kp__berlaku {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
}
.kp__pengantar,
.kp__bagian p,
.kp__bagian li {
  font-size: 16px;
  line-height: 1.7;
}
.kp__pengantar {
  margin-top: 12px;
}
.kp__bagian h2 {
  margin-bottom: 10px;
  font-size: 19px;
  color: var(--color-primary);
}
.kp__bagian p + p {
  margin-top: 10px;
}
.kp__bagian ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kp__bagian a {
  color: var(--color-primary);
  font-weight: 700;
}
@media (max-width: 640px) {
  .kp__kepala,
  .kp__bagian {
    padding: 18px;
  }
  .kp h1 {
    font-size: 26px;
  }
}

/* Cek keaslian rapor (tujuan QR rapor individu, keputusan pemilik 22-09-2026) */
.cek-rapor__status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nm-latar);
}
.cek-rapor__status strong {
  font-size: 26px;
  letter-spacing: 0.08em;
}
.cek-rapor__status--sah {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}
.cek-rapor__status--sah strong {
  color: var(--color-success);
}
.cek-rapor__status--cabut,
.cek-rapor__status--tidak {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.cek-rapor__status--cabut strong,
.cek-rapor__status--tidak strong {
  color: var(--color-danger);
}
.cek-rapor__data {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cek-rapor__data div {
  display: grid;
  grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}
.cek-rapor__data div:last-child {
  border-bottom: none;
}
.cek-rapor__data dt {
  color: var(--color-muted);
  font-size: 14px;
}
.cek-rapor__data dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Tombol kirim yang sedang memproses (publik.js siapkanKirim) */
.tombol--proses {
  cursor: progress;
  opacity: 0.85;
}
.tombol--proses::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tombol-putar 0.7s linear infinite;
}
@keyframes tombol-putar {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tombol--proses::before {
    animation-duration: 1.6s;
  }
}

/* ===== Daftar Istilah (pemilik 29-09-2026) ============================== */
.istilah-pintas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.istilah-pintas .chip {
  text-decoration: none;
}
.istilah-daftar {
  margin: 0;
  display: grid;
  gap: 12px;
}
.istilah-daftar__baris {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 4px 20px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  /* Baris yang dituju tautan "Selengkapnya" tidak boleh tertutup header lengket. */
  scroll-margin-top: 90px;
}
.istilah-daftar__nama {
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.istilah-daftar__kepanjangan {
  font-weight: 500;
  font-size: 12px;
  color: var(--color-muted);
}
.istilah-daftar__arti {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}
/* Tanda ⓘ versi halaman publik: hanya contoh di kalimat petunjuk, tidak bisa diklik. */
.istilah__tanda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .istilah-daftar__baris {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ======================================================================
   Aplikasi Android: kartu unduh, halaman /aplikasi, pita pembaruan.
   Pemilik 03-10-2026. Memakai bahasa rupa yang sama dengan kartu lembaga:
   gaya timbul lembut (--nm-timbul), sudut 18px, pita berwarna lembaga, dan
   eyebrow beraksen - bukan kotak polos.
   ====================================================================== */
.apk {
  position: relative;
  margin-top: 28px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: var(--nm-timbul);
  overflow: hidden;
}
.apk__pita {
  height: 64px;
  background:
    radial-gradient(160px 80px at 85% 0%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); /* warna-tetap: kilau pita, sama dengan kartu lembaga */
}
.apk__badan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  padding: 0 24px 24px;
}
.apk__gambar {
  flex: none;
  /* Tumpang tindih dengan pita secukupnya saja: kartu memakai overflow:hidden
     supaya sudut pitanya ikut membulat, jadi bagian yang menjulur terlalu jauh
     ke atas akan TERPOTONG. -40px membuat HP-nya menumpuk rapi tanpa terpangkas. */
  margin-top: -40px;
}
.apk__isi {
  flex: 1 1 320px;
  min-width: 0;
  padding-top: 16px;
}
.apk__eyebrow {
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.apk h2 {
  margin: 6px 0;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--color-primary);
  text-wrap: balance;
}
.apk__sub {
  margin: 0 0 16px;
  max-width: 54ch;
  color: var(--color-muted);
  font-size: 15px;
  text-wrap: balance;
}
.apk__rincian {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.apk__rincian div {
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--nm-tekan-kecil);
}
.apk__rincian dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.apk__rincian dd {
  margin: 0;
  font-weight: 800;
  color: var(--color-ink);
}
.apk__catatan {
  display: grid;
  gap: 4px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 12px 12px 0;
  background: var(--color-accent-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.apk__catatanLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.apk__aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.apk__tombol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff; /* warna-tetap: teks di atas tombol berwarna tua */
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--nm-timbul-kecil);
  transition: transform 0.18s ease, background 0.18s ease;
}
.apk__tombol:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
}
.apk__tombol:active {
  transform: none;
  box-shadow: var(--nm-tekan-kecil);
}
.apk__tautan {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.apk__tautan:hover {
  text-decoration: underline;
}

/* --- Gambar HP (SVG di tempat, ikut warna tema) --- */
.ponsel__badan {
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: 1.5;
}
.ponsel__layar {
  fill: var(--nm-latar);
}
.ponsel__pita {
  fill: var(--color-primary);
}
.ponsel__baris {
  fill: var(--color-surface-2);
}
.ponsel__lambang {
  fill: var(--color-primary-soft);
  stroke: var(--color-surface);
  stroke-width: 3;
}
.ponsel__cincin {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 3;
}
.ponsel__teks {
  fill: var(--color-primary);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
}

/* --- Halaman /aplikasi --- */
.apk--halaman {
  margin-top: 0;
}
.apk__panduan,
.apk__blok {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: var(--nm-timbul);
}
.apk__panduan h2,
.apk__blok h2 {
  margin: 0 0 16px;
  font-size: 19px;
  color: var(--color-primary);
}
.apk__langkah {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: langkah;
}
.apk__langkah li {
  position: relative;
  padding-left: 46px;
  line-height: 1.7;
  counter-increment: langkah;
}
.apk__langkah li::before {
  content: counter(langkah);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 14px;
}
.apk__lencana {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.apk__kosong {
  padding: 28px;
  border: 1px dashed var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-muted);
  text-align: center;
}

/* --- Tombol unduh APK di PALING ATAS beranda (pemilik 04-10-2026) ---
   Menggantikan kartu besar yang dulu duduk di bawah daftar lembaga. Sengaja terisi
   penuh, bukan bergaris saja, supaya terbaca sebagai ajakan dan bukan tautan biasa -
   tetapi tetap ramping agar beranda tetap menjadi direktori lembaga. */
.pusat__unduhApk {
  margin: 0 0 18px;
  text-align: center;
}
.pusat__unduhApk a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  box-shadow: var(--nm-timbul-kecil);
  color: #fff; /* warna-tetap: teks di atas latar gelap, sama dengan .apk__tombol */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.pusat__unduhApk a:active {
  box-shadow: var(--nm-tekan-kecil);
}

/* --- Isi halaman /aplikasi: deskripsi, info pembaruan, cara memasang --- */
.apk__paragraf {
  margin: 0 0 14px;
  line-height: 1.75;
}
.apk__manfaat {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.apk__manfaat li {
  position: relative;
  padding-left: 26px;
  line-height: 1.65;
}
.apk__manfaat li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary);
}
.apk__blok--baru {
  border-left: 4px solid var(--color-accent);
}
.apk__blok--penting {
  border-left-color: var(--color-primary);
}
.apk__blok h2 .apk__lencana {
  margin-left: 8px;
  vertical-align: middle;
}
.apk__lencana--penting {
  background: var(--color-primary);
  color: #fff; /* warna-tetap: teks di atas lencana gelap */
}
.apk__baruMeta {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--color-muted);
}

/* --- Pita pembaruan: hanya tampil di dalam APK yang versinya ketinggalan --- */
.pita-apk {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--nm-timbul-kecil);
}
.pita-apk--penting {
  border-left-color: var(--color-primary);
}
.pita-apk__teks {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: 14px;
  line-height: 1.5;
}
.pita-apk__teks strong {
  color: var(--color-primary);
}
.pita-apk__teks span {
  color: var(--color-muted);
}
.pita-apk__tombol {
  flex: none;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff; /* warna-tetap: teks di atas tombol berwarna tua */
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.pita-apk__tutup {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pita-apk__tutup:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 640px) {
  .apk__badan {
    gap: 18px;
    padding: 0 18px 20px;
    justify-content: center;
  }
  .apk__gambar {
    margin-top: -34px;
  }
  .ponsel {
    width: 118px;
    height: 162px;
  }
  .apk__isi {
    padding-top: 4px;
  }
  .apk__tombol {
    flex: 1 1 100%;
    justify-content: center;
  }
  .pita-apk {
    flex-wrap: wrap;
  }
  .pita-apk__tombol {
    flex: 1 1 auto;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .apk__tombol {
    transition: none;
  }
}

/* Tombol kembali di ATAS halaman aplikasi - jalan keluar yang tidak perlu dicari
   jauh ke bawah (laporan pemilik 04-10-2026). */
.pusat__kembali {
  margin: 0 0 18px;
}
.pusat__kembali a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--nm-timbul-kecil);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.pusat__kembali a:active {
  box-shadow: var(--nm-tekan-kecil);
}

/* Penjagaan lebar: halaman publik TIDAK BOLEH bisa digeser kanan-kiri. Kalau suatu
   hari ada isi yang kelewat lebar, ia dipotong di sini - bukan membuat seluruh
   halaman bergeser dan teksnya tak terbaca (laporan pemilik 04-10-2026). */
.pub {
  overflow-x: hidden;
}
.apk,
.apk__panduan,
.apk__blok {
  overflow-wrap: anywhere;
}