/* ============================================================
   PORTAL DIGITAL YAYASAN PUPUK KALTIM
   Lembar gaya utama
   ------------------------------------------------------------
   Urutan isi berkas:
   1. Token       - warna, huruf, jarak
   2. Dasar       - reset & elemen HTML
   3. Tata letak  - wadah & kisi
   4. Header      - logo, navigasi, mode gelap
   5. Sorotan     - salindia utama & teks berjalan
   6. Unit        - kartu lima sekolah
   7. Layanan     - pintasan sistem digital
   8. Berita      - kisi artikel, agenda, prestasi
   9. Footer
   10. Pelengkap  - modal, tombol WhatsApp
   ============================================================ */


/* ---------- 1. TOKEN ---------- */
:root {
  /* Warna kelembagaan */
  --pusaka:       #0D5296;
  --pusaka-tua:   #083A6E;
  --pusaka-muda:  #E6EEF7;
  --emas:         #E8762C;
  /* Oranye pekat cukup terbaca sebagai isian, tetapi gagal kontras
     saat dipakai sebagai teks di latar terang. Dua nilai terpisah:
     --emas untuk isian, --emas-teks untuk tulisan. */
  --emas-teks:    #A8500D;

  /* Permukaan & teks */
  --kertas:       #F4F7FA;
  --kartu:        #FFFFFF;
  --tinta:        #13202E;
  --tinta-lembut: #566473;
  --garis:        #DCE3EB;

  /* Warna identitas lima unit sekolah */
  --unit-tk:   #B85C1D;
  --unit-sd1:  #8A3F0E;
  --unit-sd2:  #1F6E8C;
  --unit-smp:  #0D5296;
  --unit-sma:  #0B3D73;

  /* Huruf */
  --serif: "Petrona", Georgia, serif;
  --sans:  "Be Vietnam Pro", system-ui, -apple-system, sans-serif;

  /* Skala ukuran, rasio 1.25 */
  --t-xs:  0.78rem;
  --t-sm:  0.875rem;
  --t-md:  1rem;
  --t-lg:  1.125rem;
  --t-xl:  1.4rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.2rem;
  --t-4xl: 2.75rem;

  /* Jarak */
  --sela:    1.5rem;
  --sela-lg: 3.5rem;
  --lebar:   1180px;

  --lengkung:   10px;
  --lengkung-s: 6px;
  --bayang:     0 1px 2px rgba(20, 53, 43, .06), 0 8px 24px rgba(20, 53, 43, .07);
}

/* Mode gelap. Diaktifkan lewat atribut data-tema pada <html>. */
html[data-tema="gelap"] {
  --kertas:       #0B1219;
  --kartu:        #14202B;
  --tinta:        #E6EDF4;
  --tinta-lembut: #8C9AAA;
  --garis:        #243140;
  --pusaka:       #5AA9EE;
  --pusaka-tua:   #8AC4F5;
  --pusaka-muda:  #152B41;
  --emas:         #F49246;
  --emas-teks:    #F5A45C;
  --bayang:       0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}


/* ---------- 2. DASAR ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }

p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--pusaka); text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

/* Fokus keyboard harus selalu terlihat jelas */
:focus-visible {
  outline: 2px solid var(--pusaka);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Hormati pengguna yang mematikan animasi di sistemnya */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Teks khusus pembaca layar */
.khusus-pembaca {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------- 3. TATA LETAK ---------- */
.wadah {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: var(--sela);
}

.bagian { padding-block: var(--sela-lg); }

.judul-bagian {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--garis);
}
.judul-bagian h2 { margin: 0; font-size: var(--t-2xl); }
.judul-bagian a  { font-size: var(--t-sm); font-family: var(--sans); }

/* Pita lima segmen — mewakili kelima unit sekolah */
.pita-unit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 4px;
}
.pita-unit span:nth-child(1) { background: var(--unit-tk); }
.pita-unit span:nth-child(2) { background: var(--unit-sd1); }
.pita-unit span:nth-child(3) { background: var(--unit-sd2); }
.pita-unit span:nth-child(4) { background: var(--unit-smp); }
.pita-unit span:nth-child(5) { background: var(--unit-sma); }


/* ---------- 4. HEADER ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--kartu);
  border-bottom: 1px solid var(--garis);
}

.header-isi {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 74px;
}

.merek { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.merek img { height: 46px; width: auto; }
.merek-nama    { font-family: var(--serif); font-weight: 700; font-size: var(--t-lg); line-height: 1.15; }
.merek-tagline { font-size: var(--t-xs); color: var(--tinta-lembut); line-height: 1.2; }

.nav { margin-left: auto; }
.nav-daftar { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }

.nav-tautan {
  display: block; padding: .55rem .8rem;
  color: var(--tinta); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500;
  border-radius: var(--lengkung-s);
  transition: background-color .15s ease, color .15s ease;
}
.nav-tautan:hover, .nav-tautan[aria-expanded="true"] { background: var(--pusaka-muda); color: var(--pusaka); }
.nav-tautan.aktif { color: var(--pusaka); box-shadow: inset 0 -2px 0 var(--pusaka); border-radius: 0; }

/* Menu turun */
.nav-punya-anak { position: relative; }
.nav-tombol { background: none; border: 0; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: .3rem; }
.nav-tombol svg { width: 13px; height: 13px; transition: transform .2s ease; }
.nav-tombol[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-anak {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 232px; padding: .4rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  box-shadow: var(--bayang);
  list-style: none; margin: 0;
  display: none;
}
.nav-anak.tampil { display: block; }
.nav-anak a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: var(--lengkung-s);
  color: var(--tinta); text-decoration: none; font-size: var(--t-sm);
}
.nav-anak a:hover { background: var(--pusaka-muda); }
/* Titik warna penanda unit sekolah */
.titik-unit { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.aksi-header { display: flex; align-items: center; gap: .5rem; }

.tombol-ikon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: none; border: 1px solid var(--garis);
  border-radius: var(--lengkung-s);
  color: var(--tinta); cursor: pointer;
}
.tombol-ikon:hover { border-color: var(--pusaka); color: var(--pusaka); }
.tombol-ikon svg { width: 18px; height: 18px; }

.tombol {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem;
  background: var(--pusaka); color: #fff;
  border: 0; border-radius: var(--lengkung-s);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.tombol:hover { background: var(--pusaka-tua); }
html[data-tema="gelap"] .tombol { color: #08131F; }

.tombol-garis { background: none; color: var(--pusaka); border: 1px solid var(--pusaka); }
.tombol-garis:hover { background: var(--pusaka-muda); color: var(--pusaka); }

/* Tombol hamburger, hanya tampil di layar kecil */
.tombol-menu { display: none; }


/* ---------- 5. SOROTAN ---------- */
.sorotan { position: relative; background: var(--pusaka-tua); }

.salindia { position: relative; height: clamp(340px, 52vw, 520px); overflow: hidden; }

.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.slide.aktif { opacity: 1; visibility: visible; }

.slide img { width: 100%; height: 100%; object-fit: cover; }

.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,66,53,.94) 0%, rgba(10,66,53,.78) 45%, rgba(10,66,53,.15) 100%);
}

.slide-teks {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--lebar); margin-inline: auto;
  padding-inline: var(--sela);
  color: #fff;
}
.slide-teks > * { max-width: 620px; }
.slide-label {
  display: inline-block; width: fit-content;
  padding: .25rem .7rem; margin-bottom: .9rem;
  border-radius: 100px;
  background: rgba(255,255,255,.16);
  font-size: var(--t-xs); font-weight: 600;
}
.slide-teks h2 {
  color: #fff; font-size: clamp(1.6rem, 3.6vw, var(--t-4xl));
  margin-bottom: .5rem;
}
.slide-teks p { color: rgba(255,255,255,.86); font-size: var(--t-lg); }
.slide-teks a.tombol { background: #fff; color: var(--pusaka-tua); width: fit-content; margin-top: .6rem; }

.salindia-titik {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: .45rem;
}
.salindia-titik button {
  width: 30px; height: 4px; padding: 0;
  border: 0; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.35);
}
.salindia-titik button[aria-current="true"] { background: #fff; }

/* Teks berjalan */
.berjalan {
  display: flex; align-items: center;
  /* Oranye pekat #E8762C hanya memberi kontras 2,97 banding 1 dengan
     teks putih — di bawah ambang 4,5. Nada yang sedikit lebih gelap
     ini memberi 4,58 dan tetap terbaca sebagai oranye. */
  background: #B85C1D; color: #fff;
  font-size: var(--t-sm); font-weight: 500;
  overflow: hidden;
}
.berjalan-label {
  flex: none; padding: .6rem 1rem;
  background: rgba(0,0,0,.22); color: #fff; font-weight: 700;
}
.berjalan-jalur { flex: 1; overflow: hidden; }
.berjalan-isi {
  display: inline-flex; gap: 3rem; padding-left: 100%;
  white-space: nowrap;
  animation: geser 38s linear infinite;
}
.berjalan:hover .berjalan-isi { animation-play-state: paused; }
.berjalan-isi a { color: inherit; text-decoration: none; }
.berjalan-isi a:hover { text-decoration: underline; }
@keyframes geser { to { transform: translateX(-100%); } }


/* ---------- 6. UNIT SEKOLAH ---------- */
.kisi-unit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.kartu-unit {
  position: relative;
  display: block; padding: 1.4rem 1.2rem 1.2rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-top: 4px solid var(--warna-unit, var(--pusaka));
  border-radius: var(--lengkung);
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kartu-unit:hover { transform: translateY(-3px); box-shadow: var(--bayang); }
.kartu-unit h3 { font-size: var(--t-lg); margin: 0 0 .2rem; }
.kartu-unit p { font-size: var(--t-sm); color: var(--tinta-lembut); margin: .5rem 0 0; }


/* ---------- 7. LAYANAN DIGITAL ---------- */
.layanan { background: var(--pusaka-muda); }
.kisi-layanan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem;
}
.kartu-layanan {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease;
}
.kartu-layanan:hover { border-color: var(--pusaka); }
.layanan-ikon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--lengkung-s);
  background: var(--pusaka); color: #fff;
}
/* Ikon selalu putih. Di mode gelap warna --pusaka dibuat lebih terang
   agar terbaca sebagai teks, tetapi ikon putih di atasnya jadi pudar —
   hanya 2,52 banding 1. Karena itu kotaknya diberi biru tersendiri
   yang lebih gelap, bukan ikonnya yang digelapkan. */
html[data-tema="gelap"] .layanan-ikon { background: #1A6FB5; color: #fff; }
.layanan-ikon svg { width: 24px; height: 24px; }
.kartu-layanan strong { display: block; font-size: var(--t-sm); }
/* Harus memakai jalur anak yang tepat. ".kartu-layanan span" bernilai
   (0,1,1) dan mengalahkan ".layanan-ikon" yang bernilai (0,1,0) —
   padahal .layanan-ikon sendiri sebuah <span>, sehingga warna ikonnya
   ikut tertimpa jadi abu-abu. */
.kartu-layanan > span:last-child > span { font-size: var(--t-xs); color: var(--tinta-lembut); }


/* ---------- 8. BERITA, AGENDA, PRESTASI ---------- */
.susun-berita {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
}

.kisi-artikel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.4rem;
}

.kartu-artikel {
  display: flex; flex-direction: column;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kartu-artikel:hover { transform: translateY(-3px); box-shadow: var(--bayang); }
.kartu-artikel .bingkai-gambar { aspect-ratio: 16 / 10; background: var(--pusaka-muda); overflow: hidden; }
.kartu-artikel img { width: 100%; height: 100%; object-fit: cover; }
.kartu-isi { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.kartu-isi h3 { font-size: var(--t-lg); margin-bottom: .35rem; }
.kartu-isi p  { font-size: var(--t-sm); color: var(--tinta-lembut); margin: 0 0 .9rem; }
.kartu-meta {
  margin-top: auto; display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs); color: var(--tinta-lembut);
}

.lencana {
  display: inline-block; width: fit-content;
  padding: .18rem .6rem; margin-bottom: .55rem;
  border-radius: 100px;
  background: var(--warna-lencana, var(--pusaka));
  color: #fff; font-size: var(--t-xs); font-weight: 600;
}

/* Sisi kanan: agenda */
.sisi { display: flex; flex-direction: column; gap: 1.6rem; }
.panel {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  padding: 1.3rem;
}
.panel h3 { font-size: var(--t-lg); margin-bottom: 1rem; }

.agenda-baris { display: flex; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--garis); }
.agenda-baris:last-child { border-bottom: 0; padding-bottom: 0; }
.agenda-tanggal {
  flex: none; width: 52px; text-align: center;
  padding: .4rem 0; border-radius: var(--lengkung-s);
  background: var(--pusaka-muda); color: var(--pusaka);
}
.agenda-tanggal .hari  { font-family: var(--serif); font-size: var(--t-xl); font-weight: 700; line-height: 1; display: block; }
.agenda-tanggal .bulan { font-size: var(--t-xs); font-weight: 600; }
.agenda-isi strong { display: block; font-size: var(--t-sm); line-height: 1.35; }
.agenda-isi span   { font-size: var(--t-xs); color: var(--tinta-lembut); }

/* Prestasi */
.prestasi-baris {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 0; border-bottom: 1px solid var(--garis);
}
.prestasi-baris:last-child { border-bottom: 0; }
.prestasi-piala { flex: none; color: var(--emas); }
.prestasi-piala svg { width: 26px; height: 26px; }
.prestasi-baris h3 { font-size: var(--t-md); margin-bottom: .15rem; }
.prestasi-baris p  { font-size: var(--t-sm); color: var(--tinta-lembut); margin: 0; }

/* Keadaan kosong */
.kosong {
  padding: 2.5rem 1.5rem; text-align: center;
  border: 1px dashed var(--garis); border-radius: var(--lengkung);
  color: var(--tinta-lembut);
}
.kosong strong { display: block; color: var(--tinta); margin-bottom: .3rem; }


/* ---------- 9. FOOTER ---------- */
.footer { background: var(--pusaka-tua); color: rgba(255,255,255,.82); margin-top: var(--sela-lg); }
html[data-tema="gelap"] .footer { background: #080F18; border-top: 1px solid var(--garis); }

.footer-kisi {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: 3rem 2rem;
}
.footer h4 { color: #fff; font-size: var(--t-md); margin-bottom: .9rem; }
.footer p  { font-size: var(--t-sm); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a  { color: rgba(255,255,255,.82); text-decoration: none; font-size: var(--t-sm); }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer img.logo-footer { height: 52px; margin-bottom: 1rem; }

.footer-sosial { display: flex; gap: .5rem; margin-top: 1rem; }
.footer-sosial a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--lengkung-s);
}
.footer-sosial a:hover { background: rgba(255,255,255,.12); }
.footer-sosial svg { width: 17px; height: 17px; }

.footer-bawah {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
}


/* ---------- 10. PELENGKAP ---------- */
/* Pengumuman penting */
.tirai {
  position: fixed; inset: 0; z-index: 100;
  display: none; place-items: center; padding: 1.5rem;
  background: rgba(10, 26, 21, .6);
  backdrop-filter: blur(3px);
}
.tirai.tampil { display: grid; }
.modal {
  width: min(480px, 100%);
  background: var(--kartu);
  border-radius: var(--lengkung);
  box-shadow: var(--bayang);
  overflow: hidden;
}
.modal-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.3rem;
  background: var(--unit-sma); color: #fff;
}
.modal-kepala strong { font-size: var(--t-sm); }
.modal-tutup { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 .2rem; }
.modal-badan { padding: 1.4rem; }
.modal-badan h3 { font-size: var(--t-xl); }
.modal-badan p  { font-size: var(--t-sm); color: var(--tinta-lembut); }

/* Tombol WhatsApp melayang */
.wa-apung {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem 1.1rem;
  background: #1EA855; color: #fff;
  border-radius: 100px; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.wa-apung svg { width: 19px; height: 19px; }
.wa-apung span { display: none; }
@media (min-width: 640px) { .wa-apung span { display: inline; } }


/* ---------- LAYAR KECIL ---------- */
@media (max-width: 980px) {
  .susun-berita { grid-template-columns: 1fr; }
  .footer-kisi  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .tombol-menu { display: grid; }

  .nav {
    position: fixed; inset: 74px 0 auto 0;
    background: var(--kartu);
    border-bottom: 1px solid var(--garis);
    box-shadow: var(--bayang);
    max-height: calc(100vh - 74px); overflow-y: auto;
    display: none;
  }
  .nav.tampil { display: block; }

  .nav-daftar { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem; }
  .nav-tautan { padding: .8rem .9rem; font-size: var(--t-md); }
  .nav-tombol { width: 100%; justify-content: space-between; }

  .nav-anak {
    position: static; display: none;
    box-shadow: none; border: 0;
    background: var(--pusaka-muda);
    margin: .2rem 0 .4rem;
  }
  .nav-anak.tampil { display: block; }

}

@media (max-width: 560px) {
  :root { --sela-lg: 2.5rem; }
  .footer-kisi { grid-template-columns: 1fr; gap: 2rem; }
  .judul-bagian { flex-direction: column; align-items: flex-start; gap: .3rem; }
}


/* ============================================================
   11. HALAMAN DALAM — detail, daftar, profil, unit, galeri, kontak
   ============================================================ */

/* Kepala halaman */
.kepala-laman {
  background: var(--pusaka-tua);
  color: #fff;
  padding-block: 2.6rem 2.2rem;
}
html[data-tema="gelap"] .kepala-laman { background: #0E1A28; border-bottom: 1px solid var(--garis); }
.kepala-laman h1 { color: #fff; margin: 0 0 .3rem; font-size: clamp(1.7rem, 4vw, var(--t-3xl)); }
.kepala-laman p  { color: rgba(255,255,255,.78); margin: 0; font-size: var(--t-md); }
.kepala-laman .lencana { background: rgba(255,255,255,.18); margin-bottom: .7rem; }

.kepala-penulis { display: flex; align-items: center; gap: 1.2rem; }
.avatar-besar {
  display: grid; place-items: center; flex: none;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--emas); color: #2A1405;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
}
.kepala-penulis .jumlah { font-size: var(--t-sm); color: rgba(255,255,255,.62); }

/* Susunan dua kolom untuk halaman dalam */
.susun-artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
}

/* Jejak halaman */
.remah-jejak { display: flex; gap: .45rem; font-size: var(--t-sm); color: var(--tinta-lembut); margin-bottom: 1rem; }
.remah-jejak a { color: var(--tinta-lembut); text-decoration: none; }
.remah-jejak a:hover { color: var(--pusaka); text-decoration: underline; }

/* Artikel */
.judul-artikel { font-size: clamp(1.7rem, 4vw, var(--t-4xl)); margin: .4rem 0 .7rem; }

.meta-artikel {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: var(--t-sm); color: var(--tinta-lembut);
  padding-bottom: 1.3rem; border-bottom: 1px solid var(--garis);
}

.gambar-utama { margin: 1.6rem 0; }
.gambar-utama img { width: 100%; border-radius: var(--lengkung); }

.isi-artikel { font-size: var(--t-lg); line-height: 1.75; }
.isi-artikel > *:first-child { margin-top: 0; }
.isi-artikel h2 { font-size: var(--t-2xl); margin-top: 2rem; }
.isi-artikel h3 { font-size: var(--t-xl); margin-top: 1.6rem; }
.isi-artikel img { border-radius: var(--lengkung); margin-block: 1.2rem; }
.isi-artikel ul, .isi-artikel ol { padding-left: 1.3rem; max-width: 68ch; }
.isi-artikel li { margin-bottom: .4rem; }
.isi-artikel blockquote {
  margin: 1.5rem 0; padding: .3rem 0 .3rem 1.2rem;
  border-left: 3px solid var(--emas); color: var(--tinta-lembut); font-style: italic;
}
.isi-artikel table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-block: 1.2rem; }
.isi-artikel th, .isi-artikel td { padding: .6rem .8rem; border: 1px solid var(--garis); text-align: left; }
.isi-artikel th { background: var(--pusaka-muda); color: var(--pusaka); }

/* Kotak agenda pada detail */
.kotak-agenda {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: baseline;
  margin-top: 1.4rem; padding: .9rem 1.1rem;
  background: var(--pusaka-muda); border-radius: var(--lengkung);
  font-size: var(--t-sm);
}
.kotak-agenda strong { color: var(--pusaka); }

/* ---------- Bagikan ----------
   Hanya ikon. Nama layanannya tetap ada di aria-label dan title,
   jadi pembaca layar dan tooltip tetap menyebutkannya. */
.bagikan { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.bagikan-atas {
  margin: 1.1rem 0 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--garis);
}
.bagikan-bawah {
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--garis);
}

.bagikan-tbl {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--garis); border-radius: 50%;
  background: none; color: var(--tinta-lembut);
  cursor: pointer;
  transition: color var(--laju-cepat) ease,
              border-color var(--laju-cepat) ease,
              background-color var(--laju-cepat) ease,
              transform var(--laju-cepat) var(--lengkung-gerak);
}
.bagikan-tbl svg { width: 19px; height: 19px; }
.bagikan-tbl:active { transform: scale(.92); }

/* Warna merek masing-masing muncul saat disorot */
.bagikan-tbl.wa:hover { color: #fff; background: #1EA855; border-color: #1EA855; }
.bagikan-tbl.fb:hover { color: #fff; background: #1877F2; border-color: #1877F2; }
.bagikan-tbl.tg:hover { color: #fff; background: #1A8FCC; border-color: #1A8FCC; }
.bagikan-tbl.salin:hover { color: var(--pusaka); border-color: var(--pusaka); }

/* Umpan balik setelah tautan tersalin */
.bagikan-tbl.tersalin {
  color: #fff; background: #1D7A52; border-color: #1D7A52;
}

/* Kotak penulis */
.kotak-penulis {
  margin-top: 2rem; padding: 1.3rem;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--lengkung);
}
.kotak-penulis strong { display: block; font-family: var(--serif); font-size: var(--t-lg); }
.kotak-penulis > span { font-size: var(--t-sm); color: var(--tinta-lembut); }
.kotak-penulis p { font-size: var(--t-sm); margin: .7rem 0 .5rem; }
.kotak-penulis a { font-size: var(--t-sm); }

/* Berita di kolom kanan */
.sisi-berita {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem 0; border-bottom: 1px solid var(--garis);
  color: inherit; text-decoration: none;
}
.sisi-berita:last-child { border-bottom: 0; padding-bottom: 0; }
.sisi-berita img { width: 64px; height: 48px; object-fit: cover; border-radius: 5px; flex: none; }
.sisi-berita strong { display: block; font-size: var(--t-sm); line-height: 1.35; font-weight: 600; }
.sisi-berita > span > span { font-size: var(--t-xs); color: var(--tinta-lembut); }
.sisi-berita:hover strong { color: var(--pusaka); }

.sisi-unit {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 0; border-bottom: 1px solid var(--garis);
  color: inherit; text-decoration: none;
}
.sisi-unit:last-child { border-bottom: 0; padding-bottom: 0; }
.sisi-unit strong { display: block; font-size: var(--t-sm); }
.sisi-unit > span > span { font-size: var(--t-xs); color: var(--tinta-lembut); }
.sisi-unit:hover strong { color: var(--warna-unit); }

/* Daftar keterangan */
.daftar-info { margin: 0; font-size: var(--t-sm); }
.daftar-info dt { font-weight: 600; color: var(--tinta-lembut); font-size: var(--t-xs); margin-top: .8rem; }
.daftar-info dt:first-child { margin-top: 0; }
.daftar-info dd { margin: .1rem 0 0; }

/* Visi & misi */
.kisi-visi { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.kartu-visi {
  padding: 1.4rem; border-radius: var(--lengkung);
  background: var(--pusaka-muda); border-top: 4px solid var(--pusaka);
}
.kartu-visi.misi { border-top-color: var(--emas); }
.kartu-visi h3 { margin-bottom: .6rem; }
.kartu-visi p, .kartu-visi div { font-size: var(--t-sm); margin: 0; }

/* Pengurus */
.kisi-pengurus { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.4rem; }
.kartu-orang { margin: 0; text-align: center; }
.bingkai-orang {
  aspect-ratio: 1; border-radius: var(--lengkung); overflow: hidden;
  background: var(--pusaka-muda); display: grid; place-items: center; margin-bottom: .7rem;
}
.bingkai-orang img { width: 100%; height: 100%; object-fit: cover; }
.bingkai-orang .inisial { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--pusaka); }
.kartu-orang strong { display: block; font-size: var(--t-sm); line-height: 1.35; }
.kartu-orang figcaption > span { display: block; font-size: var(--t-xs); color: var(--tinta-lembut); }
.kartu-orang .periode { margin-top: .15rem; opacity: .75; }

/* Galeri */
.kisi-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.kisi-galeri.besar { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.petak-galeri { margin: 0; }
.petak-galeri a { position: relative; display: block; }
.petak-galeri img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--lengkung); background: var(--pusaka-muda);
}
.petak-galeri figcaption { margin-top: .5rem; font-size: var(--t-xs); }
.petak-galeri figcaption strong { display: block; font-size: var(--t-sm); line-height: 1.35; }
.petak-galeri figcaption > span { color: var(--tinta-lembut); }
.tanda-putar {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.62);
}
.tanda-putar::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 18px;
  border-left: 14px solid #fff;
  border-block: 9px solid transparent;
}

/* Saringan di halaman publik */
.saring-publik { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.saring-publik input, .saring-publik select {
  padding: .6rem .8rem; font-family: inherit; font-size: var(--t-sm);
  background: var(--kartu); color: var(--tinta);
  border: 1px solid var(--garis); border-radius: var(--lengkung-s);
}
.saring-publik input[type=text] { flex: 1; min-width: 210px; }
.saring-publik input:focus, .saring-publik select:focus {
  outline: none; border-color: var(--pusaka); box-shadow: 0 0 0 3px var(--pusaka-muda);
}

/* Halaman bernomor */
.halaman-publik { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 2.5rem; }
.halaman-publik a, .halaman-publik span {
  padding: .5rem .85rem; border-radius: var(--lengkung-s);
  border: 1px solid var(--garis); text-decoration: none;
  font-size: var(--t-sm); color: var(--tinta);
}
.halaman-publik a:hover { border-color: var(--pusaka); color: var(--pusaka); }
.halaman-publik .kini { background: var(--pusaka); color: #fff; border-color: var(--pusaka); }
html[data-tema="gelap"] .halaman-publik .kini { color: #08131F; }

/* Formulir kontak */
.form-kontak { display: grid; gap: 1.1rem; max-width: 640px; }
.form-kontak .dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-kontak label.bidang > span { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: .35rem; }
.form-kontak label.bidang small { font-weight: 400; color: var(--tinta-lembut); }
.form-kontak input, .form-kontak select, .form-kontak textarea {
  width: 100%; padding: .65rem .8rem;
  background: var(--kartu); color: var(--tinta);
  border: 1px solid var(--garis); border-radius: var(--lengkung-s);
  font-family: inherit; font-size: var(--t-sm);
}
.form-kontak textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.form-kontak input:focus, .form-kontak select:focus, .form-kontak textarea:focus {
  outline: none; border-color: var(--pusaka); box-shadow: 0 0 0 3px var(--pusaka-muda);
}
/* Jebakan robot — tidak boleh terlihat maupun terbaca pembaca layar */
.jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kabar-publik {
  padding: .95rem 1.15rem; margin-bottom: 1.5rem;
  border-radius: var(--lengkung); border: 1px solid; font-size: var(--t-sm);
}
.kabar-publik strong { display: block; margin-bottom: .15rem; }
.kabar-publik.sukses { background: #E6F4EC; border-color: #B8DFC9; color: #16603F; }
.kabar-publik.galat  { background: #FBEAE6; border-color: #F0C4B8; color: #8A3320; }
html[data-tema="gelap"] .kabar-publik.sukses { background: #122E22; border-color: #1F5540; color: #8FE0BB; }
html[data-tema="gelap"] .kabar-publik.galat  { background: #331A14; border-color: #6B2E1E; color: #F0A48C; }

@media (max-width: 980px) {
  .susun-artikel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-kontak .dua-kolom { grid-template-columns: 1fr; }
  .kepala-penulis { flex-direction: column; align-items: flex-start; gap: .8rem; }
}


/* ============================================================
   12. GERAK
   ------------------------------------------------------------
   Gerak di sini punya tugas, bukan hiasan: mengarahkan mata ke
   isi yang baru masuk layar, dan memberi umpan balik saat
   sesuatu disentuh. Semuanya singkat — 150 sampai 500 milidetik.
   Lebih lama dari itu terasa lambat, bukan halus.
   ============================================================ */
:root {
  --laju-cepat:  160ms;
  --laju-sedang: 320ms;
  --laju-lambat: 620ms;
  /* Melambat di ujung, seperti benda nyata yang berhenti */
  --lengkung-gerak: cubic-bezier(.22, .61, .36, 1);
  --lengkung-pegas: cubic-bezier(.34, 1.36, .64, 1);
}

/* ---------- Muncul saat masuk layar ---------- */
[data-muncul] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--laju-lambat) var(--lengkung-gerak),
              transform var(--laju-lambat) var(--lengkung-gerak);
  /* will-change memindahkan elemen ke lapisan gambar tersendiri.
     Di lapisan itu penghalusan tepi berubah dari mode subpiksel ke
     mode abu-abu, sehingga garis tipis putih tampak lebih pudar.
     Karena itu penandanya dilepas lagi oleh skrip setelah animasinya
     selesai — lihat utama.js. */
  will-change: opacity, transform;
}
[data-muncul].tampil { opacity: 1; transform: none; }

/* Beruntun: tiap kartu menyusul sedikit setelah tetangganya */
[data-muncul]:nth-child(2) { transition-delay: 60ms; }
[data-muncul]:nth-child(3) { transition-delay: 120ms; }
[data-muncul]:nth-child(4) { transition-delay: 180ms; }
[data-muncul]:nth-child(5) { transition-delay: 240ms; }
[data-muncul]:nth-child(6) { transition-delay: 300ms; }

/* ---------- Header menyusut saat digulir ---------- */
.header {
  transition: box-shadow var(--laju-sedang) var(--lengkung-gerak),
              background-color var(--laju-sedang) ease;
}
.header-isi {
  transition: min-height var(--laju-sedang) var(--lengkung-gerak);
}
.header.turun { box-shadow: 0 2px 20px rgba(20,53,43,.09); }
.header.turun .header-isi { min-height: 60px; }
.header.turun .merek img  { height: 38px; }
.merek img { transition: height var(--laju-sedang) var(--lengkung-gerak); }
html[data-tema="gelap"] .header.turun { box-shadow: 0 2px 20px rgba(0,0,0,.45); }

/* ---------- Salindia ---------- */
.slide { transition: opacity var(--laju-lambat) ease, visibility var(--laju-lambat); }
/* Gambar merayap perlahan selama slide aktif — memberi kesan hidup
   tanpa mengalihkan perhatian dari judulnya */
.slide.aktif img { animation: rayap 9s ease-out forwards; }
@keyframes rayap { from { transform: scale(1.005); } to { transform: scale(1.07); } }

.slide-teks > * {
  opacity: 0;
  transform: translateY(14px);
}
.slide.aktif .slide-teks > * {
  animation: naik var(--laju-lambat) var(--lengkung-gerak) forwards;
}
.slide.aktif .slide-teks > *:nth-child(1) { animation-delay:  80ms; }
.slide.aktif .slide-teks > *:nth-child(2) { animation-delay: 170ms; }
.slide.aktif .slide-teks > *:nth-child(3) { animation-delay: 260ms; }
.slide.aktif .slide-teks > *:nth-child(4) { animation-delay: 350ms; }
@keyframes naik { to { opacity: 1; transform: none; } }

.salindia-titik button { transition: background-color var(--laju-sedang) ease, width var(--laju-sedang) var(--lengkung-gerak); }
.salindia-titik button[aria-current="true"] { width: 46px; }

/* ---------- Kartu & tombol ---------- */
.kartu-artikel, .kartu-unit, .kartu-layanan {
  transition: transform var(--laju-sedang) var(--lengkung-gerak),
              box-shadow var(--laju-sedang) var(--lengkung-gerak),
              border-color var(--laju-cepat) ease;
}
.kartu-artikel:active, .kartu-unit:active { transform: translateY(-1px); }

.kartu-artikel .bingkai-gambar { overflow: hidden; }
.kartu-artikel img { transition: transform var(--laju-lambat) var(--lengkung-gerak); }
.kartu-artikel:hover img { transform: scale(1.05); }

.kartu-unit:hover { transform: translateY(-4px); }
.kartu-layanan .layanan-ikon { transition: transform var(--laju-sedang) var(--lengkung-pegas); }
/* Rotasi dibuang. Memutar bentuk bergaris memaksa layar menggambar
   ulang tiap tepinya pada sudut miring, dan hasilnya garis putih
   terlihat kabur justru saat pengunjung menyorotnya. */
.kartu-layanan:hover .layanan-ikon { transform: scale(1.06); }

.tombol, .bagikan-tbl, .tombol-ikon {
  transition: background-color var(--laju-cepat) ease,
              border-color var(--laju-cepat) ease,
              color var(--laju-cepat) ease,
              transform var(--laju-cepat) var(--lengkung-gerak);
}
.tombol:active, .bagikan-tbl:active, .tombol-ikon:active { transform: scale(.96); }

/* Garis bawah tumbuh dari kiri saat tautan disentuh */
.judul-bagian a, .remah-jejak a {
  position: relative; text-decoration: none;
}
.judul-bagian a::after, .remah-jejak a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--laju-sedang) var(--lengkung-gerak);
}
.judul-bagian a:hover::after, .remah-jejak a:hover::after { transform: scaleX(1); }

/* ---------- Menu ---------- */
.nav-anak {
  transform-origin: top;
  animation: turun var(--laju-cepat) var(--lengkung-gerak);
}
@keyframes turun { from { opacity: 0; transform: translateY(-6px); } }

.nav-tautan { transition: background-color var(--laju-cepat) ease, color var(--laju-cepat) ease; }
.titik-unit { transition: transform var(--laju-cepat) var(--lengkung-pegas); }
.nav-anak a:hover .titik-unit { transform: scale(1.5); }

/* ---------- Pengumuman ---------- */
.tirai { animation: pudar var(--laju-sedang) ease; }
.tirai.tampil .modal { animation: masuk var(--laju-sedang) var(--lengkung-pegas); }
@keyframes pudar { from { opacity: 0; } }
@keyframes masuk { from { opacity: 0; transform: translateY(20px) scale(.97); } }

/* ---------- Tombol WhatsApp ---------- */
.wa-apung {
  transition: transform var(--laju-sedang) var(--lengkung-pegas), box-shadow var(--laju-sedang) ease;
  animation: masukWa var(--laju-lambat) var(--lengkung-pegas) 900ms both;
}
.wa-apung:hover  { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.wa-apung:active { transform: scale(.95); }
@keyframes masukWa { from { opacity: 0; transform: translateY(28px) scale(.85); } }

/* ---------- Hormati pengguna yang mematikan animasi ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-muncul] { opacity: 1 !important; transform: none !important; }
  .slide.aktif img { animation: none; }
  .slide-teks > * { opacity: 1; transform: none; animation: none !important; }
  .kartu-artikel:hover img { transform: none; }
  .wa-apung { animation: none; }
  .berjalan-isi { animation: none; padding-left: 0; }
}


/* ============================================================
   13. TITIK PATAH TAMBAHAN
   ============================================================ */

/* Tablet mendatar: kolom samping menyempit dulu sebelum turun */
/* Rentang dibatasi dua sisi. Tanpa batas bawah, aturan ini ikut
   berlaku di ponsel dan menimpa aturan satu kolom di atasnya,
   karena CSS memenangkan aturan yang ditulis belakangan. */
@media (min-width: 981px) and (max-width: 1100px) {
  .susun-berita, .susun-artikel { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.8rem; }
  .nav-daftar { gap: .1rem; }
  .nav-tautan { padding: .55rem .6rem; }
}

/* Tablet tegak */
@media (max-width: 860px) {
  .kisi-unit { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .salindia  { height: clamp(300px, 58vw, 420px); }
  .slide::after {
    background: linear-gradient(180deg, rgba(10,66,53,.55) 0%, rgba(10,66,53,.92) 100%);
  }
  .slide-teks { justify-content: flex-end; padding-bottom: 3rem; }
}

/* Ponsel */
@media (max-width: 560px) {
  /* .kisi-artikel dan .kisi-galeri sengaja tidak diatur di sini —
     keduanya ditangani blok 720px di bawah, yang ditulis belakangan
     sehingga selalu menang. Menulisnya dua kali hanya menyesatkan. */
  .kisi-unit     { grid-template-columns: 1fr 1fr; }
  .kisi-layanan  { grid-template-columns: 1fr; }
  .kisi-pengurus { grid-template-columns: 1fr 1fr; }

  .saring-publik { flex-direction: column; }
  .saring-publik input, .saring-publik select, .saring-publik .tombol { width: 100%; }
  .saring-publik input[type=text] { min-width: 0; }

  .bagikan { gap: .45rem; }
  .bagikan-tbl { width: 38px; height: 38px; }

  .isi-artikel { font-size: var(--t-md); }
  .footer-sosial { flex-wrap: wrap; }
}

/* Ponsel sempit */
@media (max-width: 380px) {
  :root { --sela: 1rem; }
  .kisi-unit, .kisi-pengurus { grid-template-columns: 1fr; }
  .wa-apung    { right: .8rem; bottom: .8rem; padding: .7rem; }
  .wa-apung span { display: none; }
}

/* Ponsel mendatar: layar pendek, salindia jangan memakan seluruh tinggi */
@media (max-height: 460px) and (orientation: landscape) {
  .salindia { height: 82vh; }
  .header-isi { min-height: 58px; }
}

/* Layar sangat lebar */
@media (min-width: 1500px) {
  :root { --lebar: 1300px; }
  .salindia { height: clamp(420px, 40vw, 580px); }
}

/* Layar sentuh: efek arahkan kursor tidak berlaku, hilangkan saja */
@media (hover: none) {
  .kartu-artikel:hover img { transform: none; }
  .kartu-unit:hover, .kartu-artikel:hover { transform: none; box-shadow: none; }
  .kartu-layanan:hover .layanan-ikon { transform: none; }
}


/* ============================================================
   14. PENYESUAIAN HEADER, HURUF LENTUR, DAN SALINDIA
   ============================================================ */

/* ---------- Ukuran huruf yang ikut lebar layar ----------
   clamp(minimum, lentur, maksimum). Nilai tengah memakai vw,
   sehingga huruf mengecil sendiri di ponsel dan membesar di
   layar lebar tanpa perlu media query terpisah. */
:root {
  --t-xs:  clamp(.72rem,  .68rem + .18vw, .80rem);
  --t-sm:  clamp(.81rem,  .77rem + .20vw, .90rem);
  --t-md:  clamp(.94rem,  .89rem + .24vw, 1.03rem);
  --t-lg:  clamp(1.04rem, .98rem + .30vw, 1.16rem);
  --t-xl:  clamp(1.20rem, 1.10rem + .50vw, 1.45rem);
  --t-2xl: clamp(1.38rem, 1.22rem + .78vw, 1.80rem);
  --t-3xl: clamp(1.62rem, 1.35rem + 1.30vw, 2.25rem);
  --t-4xl: clamp(1.88rem, 1.45rem + 2.10vw, 2.85rem);
}

/* ---------- Merek di header ----------
   Nama yayasan sebelumnya pecah jadi tiga baris di ponsel karena
   ruang tersisa terlalu sempit. Diperbaiki dengan mengecilkan
   tombol aksi dan memberi merek ruang tumbuh yang jelas. */
.merek { min-width: 0; flex: 1 1 auto; }
.merek-teks { display: flex; flex-direction: column; min-width: 0; }

.merek-nama {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(.88rem, .70rem + .80vw, 1.18rem);
  line-height: 1.12;
  /* Dibungkus ke baris kedua, bukan dipotong titik-titik.
     "Yayas..." tidak memberi tahu pengunjung apa pun. */
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Slogan kini emas dan tampil di semua ukuran layar */
.merek-tagline {
  display: block;
  color: var(--emas-teks);
  font-size: clamp(.555rem, .46rem + .38vw, .78rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aksi-header { flex: none; }

/* ---------- Salindia sebagai satu tautan utuh ----------
   Seluruh area dapat diklik: gambar, judul, ringkasan, tombol. */
.slide { display: block; color: inherit; text-decoration: none; }
.slide-teks { display: flex; flex-direction: column; align-items: flex-start; }
.slide-judul {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.05rem + 2.2vw, 2.85rem);
  line-height: 1.15;
  color: #fff;
  margin-bottom: .45rem;
  max-width: 620px;
}
.slide-ringkas {
  color: rgba(255,255,255,.86);
  font-size: var(--t-lg);
  margin-bottom: .9rem;
  max-width: 620px;
}
.slide .tombol { background: #fff; color: var(--pusaka-tua); margin-top: .3rem; }
.slide:hover .tombol { background: rgba(255,255,255,.88); }


/* ============================================================
   15. PONSEL — penyesuaian menyeluruh
   ============================================================ */
@media (max-width: 720px) {

  /* Tombol aksi mengecil agar nama yayasan dapat ruang cukup */
  .tombol-ikon { width: 36px; height: 36px; }
  .aksi-header { gap: .35rem; }
  .header-isi  { gap: .6rem; min-height: 64px; }
  .merek img   { height: 40px; }
  .merek       { gap: .55rem; }

  /* Tombol SPMB menyusut jadi ikon saja, memberi ruang untuk nama yayasan */
  .aksi-header .tombol { padding: .5rem .7rem; }
  .aksi-header .tombol .label-tbl { display: none; }
  .aksi-header .tombol svg { width: 18px !important; height: 18px !important; }

  /* ---------- Berita terbaru jadi daftar mendatar ----------
     Gambar kecil di kiri, judul di kanan. Kartu bergambar besar
     memakan terlalu banyak layar di ponsel, sehingga hanya dua
     berita terlihat sebelum harus menggulir jauh. */
  .kisi-artikel { grid-template-columns: 1fr; gap: 0; }

  .kartu-artikel {
    flex-direction: row;
    align-items: stretch;
    gap: .85rem;
    border: 0;
    border-bottom: 1px solid var(--garis);
    border-radius: 0;
    padding: .85rem 0;
    background: none;
  }
  .kartu-artikel:last-child { border-bottom: 0; }
  .kartu-artikel:hover { transform: none; box-shadow: none; }

  .kartu-artikel .bingkai-gambar {
    flex: none;
    width: 104px;
    aspect-ratio: 1;
    border-radius: 8px;
  }
  .kartu-isi { padding: 0; justify-content: center; }
  .kartu-isi h3 {
    font-size: var(--t-md);
    line-height: 1.35;
    margin-bottom: .25rem;
    /* Batasi tiga baris agar tinggi tiap baris seragam */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Ringkasan disembunyikan — di ruang sesempit ini hanya
     membuat judul jadi sulit dipindai */
  .kartu-isi p { display: none; }
  .kartu-isi .lencana { margin-bottom: .3rem; padding: .1rem .45rem; }
  .kartu-meta { font-size: var(--t-xs); }

  /* ---------- Agenda & panel samping ---------- */
  .susun-berita, .susun-artikel { gap: 2rem; }
  .panel { padding: 1.1rem; }
  .agenda-tanggal { width: 46px; }
  .agenda-tanggal .hari { font-size: var(--t-lg); }

  /* ---------- Salindia: foto dan judul saja ---------- */
  .salindia { height: clamp(280px, 62vw, 380px); }
  .slide-ringkas { display: none; }
  .slide .tombol { display: none; }
  .slide-teks { justify-content: flex-end; padding-bottom: 3.2rem; }
  .slide-label { margin-bottom: .55rem; padding: .2rem .55rem; }
  .slide-judul {
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .slide::after {
    background: linear-gradient(180deg, rgba(10,66,53,.30) 0%, rgba(10,66,53,.92) 72%);
  }
  .salindia-titik { bottom: 1.1rem; }
}

@media (max-width: 400px) {
  .kartu-artikel .bingkai-gambar { width: 88px; }
  .merek img { height: 36px; }
}

/* Kartu di halaman galeri tetap bentuk petak, bukan daftar */
@media (max-width: 720px) {
  .kisi-galeri, .kisi-galeri.besar { grid-template-columns: 1fr 1fr; gap: .7rem; }
}


/* ============================================================
   16. KATA MEREKA, KERJA SAMA, KORSEL ARTIKEL, ALBUM
   ============================================================ */

.judul-tengah {
  text-align: center;
  font-size: var(--t-2xl);
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 1.2rem;
}
.judul-tengah::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 190px; height: 1px; background: var(--garis);
}

/* ---------- Menu turun: tombol mode gelap ---------- */
.hanya-ponsel { display: none; }
.nav-daftar .tombol-tema {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; background: none; border: 0;
  font-family: inherit; cursor: pointer; text-align: left;
}
.nav-daftar .tombol-tema svg { width: 17px; height: 17px; flex: none; }

/* ---------- Kata Mereka ---------- */
.kata-mereka { background: var(--pusaka-muda); }

.testi { position: relative; min-height: 460px; }
.testi-kartu {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--laju-sedang) ease,
              transform var(--laju-sedang) var(--lengkung-gerak),
              visibility var(--laju-sedang);
}
.testi-kartu.aktif { opacity: 1; visibility: visible; transform: none; }

.testi-foto {
  display: grid; place-items: center;
  width: 192px; height: 192px; flex: none;
  border-radius: 50%; overflow: hidden;
  border: 5px solid var(--pusaka);
  background: var(--kartu);
  position: relative; z-index: 2;
}
.testi-foto img { width: 100%; height: 100%; object-fit: cover; }
.testi-foto .inisial { font-family: var(--serif); font-size: 4rem; font-weight: 700; color: var(--pusaka); }
.testi-foto.kecil { width: 144px; height: 144px; border-width: 4px; }

.testi-kartu blockquote {
  margin: -96px 0 0;
  padding: 116px 2rem 1.5rem;
  max-width: 720px;
  background: var(--pusaka);
  border-radius: var(--lengkung);
  color: #fff;
  text-align: center;
  font-size: var(--t-md);
  line-height: 1.65;
}
html[data-tema="gelap"] .testi-kartu blockquote { background: #14304C; }

.testi-kartu figcaption {
  margin-top: -1.5rem;
  padding: 0 2rem 1.4rem;
  max-width: 720px; width: 100%;
  background: var(--pusaka);
  border-radius: 0 0 var(--lengkung) var(--lengkung);
  text-align: center; color: #fff;
}
html[data-tema="gelap"] .testi-kartu figcaption { background: #14304C; }
.testi-kartu figcaption strong { display: block; font-size: var(--t-lg); font-family: var(--serif); }
.testi-kartu figcaption span   { font-size: var(--t-sm); font-style: italic; opacity: .85; }

.testi-kendali { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.testi-kendali > button {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--garis); border-radius: 50%;
  background: var(--kartu); color: var(--tinta);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color var(--laju-cepat) ease, color var(--laju-cepat) ease;
}
.testi-kendali > button:hover { border-color: var(--pusaka); color: var(--pusaka); }
.testi-titik { display: flex; gap: .4rem; }
.testi-titik button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--garis); cursor: pointer;
  transition: background-color var(--laju-cepat) ease, width var(--laju-sedang) var(--lengkung-gerak);
}
.testi-titik button[aria-current="true"] { background: var(--pusaka); width: 24px; border-radius: 4px; }

/* Halaman penuh Kata Mereka */
.kisi-testi { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2.6rem 1.4rem; }
.testi-petak { margin: 0; display: flex; flex-direction: column; align-items: center; }
.testi-petak blockquote {
  margin: -72px 0 0; padding: 88px 1.3rem 1.2rem;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--lengkung);
  text-align: center; font-size: var(--t-sm); line-height: 1.6;
}
.testi-petak figcaption { margin-top: .8rem; text-align: center; }
.testi-petak figcaption strong { display: block; font-size: var(--t-sm); }
.testi-petak figcaption span   { font-size: var(--t-xs); color: var(--tinta-lembut); font-style: italic; }

.tapis { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; justify-content: center; }
.tapis a {
  padding: .42rem .95rem; border-radius: 100px;
  border: 1px solid var(--garis); text-decoration: none;
  font-size: var(--t-sm); color: var(--tinta);
}
.tapis a:hover  { border-color: var(--pusaka); color: var(--pusaka); }
.tapis a.aktif  { background: var(--pusaka); color: #fff; border-color: var(--pusaka); }
html[data-tema="gelap"] .tapis a.aktif { color: #08131F; }

/* ---------- Kerja Sama ---------- */
.pita-mitra { overflow: hidden; padding-block: .5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pita-mitra-jalur {
  display: flex; align-items: center; gap: 3.5rem;
  width: max-content;
  animation: jalanMitra 42s linear infinite;
}
.pita-mitra:hover .pita-mitra-jalur { animation-play-state: paused; }
@keyframes jalanMitra { to { transform: translateX(-50%); } }

.logo-mitra {
  display: block; flex: none;
  width: 150px; height: 90px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  transition: transform var(--laju-sedang) var(--lengkung-pegas), filter var(--laju-sedang) ease;
  filter: grayscale(1); opacity: .72;
}
/* Lebar dan tinggi ditetapkan tegas, lalu object-fit menyusutkan
   gambar sampai muat seluruhnya. Dengan max-height saja, logo jangkung
   ikut menentukan tinggi kotaknya sendiri lalu terpotong oleh pita. */
.logo-mitra img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
a.logo-mitra:hover { filter: none; opacity: 1; transform: scale(1.08); }

.kisi-mitra { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem; }
.kartu-mitra {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.4rem 1rem; gap: .5rem;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--lengkung);
  color: inherit; text-decoration: none;
  transition: border-color var(--laju-cepat) ease, transform var(--laju-sedang) var(--lengkung-gerak);
}
a.kartu-mitra:hover { border-color: var(--pusaka); transform: translateY(-3px); }
.bingkai-logo {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 5 / 3;
  padding: 8px; border-radius: 8px; background: #fff;
}
.bingkai-logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.bingkai-logo .inisial { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--pusaka); }
.kartu-mitra strong { font-size: var(--t-sm); line-height: 1.35; }
.kartu-mitra > span  { font-size: var(--t-xs); color: var(--tinta-lembut); }

/* ---------- Korsel artikel ---------- */
.korsel { position: relative; }
.korsel-jalur {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: .3rem;
}
.korsel-jalur::-webkit-scrollbar { display: none; }

.kartu-artikel-kecil {
  flex: 0 0 calc((100% - 3rem) / 4);
  scroll-snap-align: start;
  color: inherit; text-decoration: none;
}
.kartu-artikel-kecil .bingkai {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--lengkung); background: var(--pusaka-muda); margin-bottom: .6rem;
}
.kartu-artikel-kecil img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--laju-lambat) var(--lengkung-gerak);
}
.kartu-artikel-kecil:hover img { transform: scale(1.06); }
.kartu-artikel-kecil strong {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--t-sm); line-height: 1.4; font-weight: 600;
}
.kartu-artikel-kecil:hover strong { color: var(--pusaka); }
.kartu-artikel-kecil .tgl { display: block; font-size: var(--t-xs); color: var(--tinta-lembut); margin-top: .25rem; }

.korsel-tbl {
  position: absolute; top: 34%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--garis); border-radius: 50%;
  background: var(--kartu); color: var(--tinta);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: var(--bayang);
  transition: opacity var(--laju-cepat) ease, border-color var(--laju-cepat) ease;
}
.korsel-tbl.kiri  { left: -14px; }
.korsel-tbl.kanan { right: -14px; }
.korsel-tbl:hover:not(:disabled) { border-color: var(--pusaka); color: var(--pusaka); }
.korsel-tbl:disabled { opacity: 0; pointer-events: none; }

/* ---------- Album galeri ---------- */
.buka-album {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.jumlah-foto {
  position: absolute; right: .5rem; bottom: .5rem;
  padding: .2rem .55rem; border-radius: 100px;
  background: rgba(10,26,21,.78); color: #fff;
  font-size: var(--t-xs); font-weight: 600;
}

.tirai-album {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem; padding: 1rem;
  background: rgba(6, 18, 14, .94);
}
.tirai-album[hidden] { display: none; }

.album-panggung { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; min-width: 0; }
.album-panggung img {
  max-width: 100%; max-height: 78vh;
  object-fit: contain; border-radius: var(--lengkung);
}
.album-panggung figcaption { text-align: center; color: rgba(255,255,255,.9); font-size: var(--t-sm); }
.album-panggung figcaption span { display: block; }
#album-hitung { font-size: var(--t-xs); color: rgba(255,255,255,.55); margin-top: .2rem; }

.album-nav, .album-tutup {
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  transition: background-color var(--laju-cepat) ease;
}
.album-nav { width: 46px; height: 46px; font-size: 1.7rem; line-height: 1; }
.album-nav:hover, .album-tutup:hover { background: rgba(255,255,255,.2); }
.album-tutup {
  position: absolute; top: 1rem; right: 1rem;
  width: 42px; height: 42px; font-size: 1.5rem; line-height: 1;
}

/* Foto album di panel admin */
.kisi-foto-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.petak-foto { position: relative; margin: 0; }
.petak-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; }
.tanda-sampul {
  position: absolute; left: .35rem; top: .35rem;
  padding: .1rem .45rem; border-radius: 4px;
  background: rgba(10,26,21,.8); color: #fff; font-size: .68rem; font-weight: 600;
}
.hapus-foto {
  position: absolute; right: .35rem; top: .35rem;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(180,70,47,.92); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer;
}


/* ============================================================
   17. PONSEL — komponen baru
   ============================================================ */
@media (max-width: 860px) {
  .kartu-artikel-kecil { flex: 0 0 calc((100% - 2rem) / 3); }
  .korsel-tbl { display: none; }
}

@media (max-width: 720px) {
  /* Mode gelap pindah ke dalam menu hamburger */
  .hanya-ponsel { display: block; }
  .hanya-lebar  { display: none; }

  /* Empat item dalam satu baris, sesuai permintaan.
     Kartunya diringkas agar tetap terbaca di lebar sekecil itu. */
  /* Lima unit dalam tiga kolom tersusun 3-2, lebih seimbang
     daripada empat kolom yang menyisakan satu kartu sendirian. */
  .kisi-unit    { grid-template-columns: repeat(3, 1fr); gap: .55rem; }
  .kisi-layanan { grid-template-columns: repeat(4, 1fr); gap: .5rem; }

  .kartu-unit { padding: .9rem .5rem; text-align: center; border-top-width: 3px; }
  .kartu-unit h3 { font-size: .84rem; line-height: 1.25; margin: 0; }
  .kartu-unit p  { display: none; }

  .kartu-layanan { flex-direction: column; text-align: center; gap: .4rem; padding: .8rem .3rem; }
  .layanan-ikon  { width: 36px; height: 36px; }
  .layanan-ikon svg { width: 20px; height: 20px; }
  .kartu-layanan strong { font-size: .68rem; line-height: 1.2; }
  /* Hanya keterangan yang disembunyikan. Selektor ".kartu-layanan span"
     terlalu luas — ikut mengenai pembungkus ikon dan pembungkus judul,
     sehingga seluruh isi kartu ikut hilang. */
  .kartu-layanan > span:last-child > span { display: none; }

  /* Artikel: dua kartu terlihat. Empat judul artikel di layar
     selebar 380px hanya menyisakan 90px per judul — tidak terbaca. */
  .kartu-artikel-kecil { flex: 0 0 calc((100% - 1rem) / 2); }

  .testi { min-height: 500px; }
  .testi-kartu blockquote { margin-top: -72px; padding: 92px 1.2rem 1.3rem; font-size: var(--t-sm); }
  .testi-kartu figcaption { padding: 0 1.2rem 1.2rem; }
  .testi-foto { width: 144px; height: 144px; border-width: 4px; }
  .testi-foto .inisial { font-size: 3rem; }

  .logo-mitra { width: 108px; height: 66px; padding: 6px; }
  .pita-mitra-jalur { gap: 2.2rem; }
  .kisi-mitra { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
  .bingkai-logo { padding: 6px; }

  .tirai-album { grid-template-columns: 1fr; padding: .5rem; }
  .album-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
  }
  .album-nav.kiri  { left: .5rem; }
  .album-nav.kanan { right: .5rem; }
  .album-panggung img { max-height: 68vh; }
}

@media (max-width: 420px) {
  .kartu-unit h3 { font-size: .76rem; }
  .kisi-testi { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pita-mitra-jalur { animation: none; }
  .testi-kartu { transition: none; }
}


/* ============================================================
   18. BAGAN STRUKTUR PENGURUS
   ------------------------------------------------------------
   Garis penghubung digambar dengan pseudo-element, bukan gambar
   atau pustaka bagan. Hasilnya ikut menyesuaikan warna mode gelap
   dan tidak menambah berkas apa pun untuk diunduh pengunjung.
   ============================================================ */

.bingkai-pohon {
  overflow-x: auto;
  padding: 1rem .5rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.petunjuk-geser { display: none; font-size: var(--t-xs); color: var(--tinta-lembut); margin-bottom: .3rem; }

.bingkai-pohon ul {
  display: flex; justify-content: center;
  position: relative; list-style: none;
  margin: 0; padding: 26px 0 0;
  width: max-content; min-width: 100%;
}
.bingkai-pohon .pohon-akar { padding-top: 0; }

.bingkai-pohon li {
  position: relative;
  padding: 26px 7px 0;
  text-align: center;
}

/* Dua garis siku di atas tiap simpul, membentuk cabang */
.bingkai-pohon li::before,
.bingkai-pohon li::after {
  content: ""; position: absolute; top: 0;
  width: 50%; height: 26px;
  border-top: 2px solid var(--garis);
}
.bingkai-pohon li::before { right: 50%; }
.bingkai-pohon li::after  { left: 50%; border-left: 2px solid var(--garis); }

/* Ujung kiri dan kanan dibulatkan agar cabangnya rapi */
.bingkai-pohon li:first-child::before,
.bingkai-pohon li:last-child::after { border: 0; }
.bingkai-pohon li:last-child::before  { border-right: 2px solid var(--garis); border-radius: 0 7px 0 0; }
.bingkai-pohon li:first-child::after  { border-radius: 7px 0 0 0; }

/* Bawahan tunggal: garis lurus menerus, tanpa siku.
   ------------------------------------------------------------
   Jarak antara kotak atasan dan bawahan berjumlah 52 piksel —
   26 dari jarak atas daftar, 26 lagi dari jarak atas kotak.
   Garis turun milik daftar hanya menutupi 26 piksel pertama,
   jadi separuh sisanya harus ditutup dari sini.

   Blok ini WAJIB berada setelah aturan first/last-child di atas.
   Bawahan tunggal juga berstatus anak terakhir, sehingga aturan
   "border: 0" akan menghapus garisnya kalau ditulis belakangan. */
.bingkai-pohon li:only-child::before { display: none; }
.bingkai-pohon li:only-child::after {
  top: 0; left: 50%; right: auto;
  width: 0; height: 26px;
  border: 0;
  border-left: 2px solid var(--garis);
  border-radius: 0;
}

/* Simpul puncak tidak punya atasan, jadi tidak boleh bergaris ke atas */
.bingkai-pohon .pohon-akar > li { padding-top: 0; }
.bingkai-pohon .pohon-akar > li::before,
.bingkai-pohon .pohon-akar > li::after { display: none; }

/* Garis turun dari induk ke barisan anaknya */
.bingkai-pohon ul ul::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 0; height: 26px;
  border-left: 2px solid var(--garis);
}

/* ---------- Kotak nama ---------- */
.simpul {
  display: inline-flex; flex-direction: column; align-items: center;
  width: 136px; padding: .8rem .55rem .85rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-top: 3px solid var(--warna-organ, var(--pusaka));
  border-radius: var(--lengkung);
  transition: box-shadow var(--laju-sedang) var(--lengkung-gerak),
              transform var(--laju-sedang) var(--lengkung-gerak);
}
.simpul:hover { box-shadow: var(--bayang); transform: translateY(-2px); }

.simpul-foto {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin-bottom: .5rem;
  border-radius: 50%; overflow: hidden;
  background: var(--pusaka-muda);
  border: 2px solid var(--warna-organ, var(--pusaka));
}
.simpul-foto img { width: 100%; height: 100%; object-fit: cover; }
.simpul-foto .inisial { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--warna-organ, var(--pusaka)); }

.simpul-jabatan {
  font-size: .68rem; font-weight: 700; line-height: 1.25;
  color: var(--warna-organ, var(--pusaka));
  margin-bottom: .15rem;
}
.simpul strong { font-size: .8rem; line-height: 1.3; font-weight: 600; }
.simpul-ket { font-size: .68rem; color: var(--tinta-lembut); margin-top: .15rem; }

/* Warna per jenjang organ, agar lapisan bagan terbaca sekilas */
.organ-pembina   { --warna-organ: #0B3D73; }
.organ-pengawas  { --warna-organ: #9C4A12; }
.organ-pengurus  { --warna-organ: #0D5296; }
.organ-pelaksana { --warna-organ: #1F6E8C; }
.organ-sekolah   { --warna-organ: #566473; }
html[data-tema="gelap"] .organ-pengurus { --warna-organ: #5AA9EE; }


/* ---------- Kelompok menurun ----------
   Dipakai untuk sekumpulan bawahan akhir. Aturan ini sengaja
   ditempatkan setelah seluruh aturan pohon di atas: kekuatannya
   setara dengan aturan first/last-child, sehingga yang menentukan
   adalah urutan penulisan. */
.bingkai-pohon ul.tumpuk {
  flex-direction: column;
  align-items: stretch;
  width: auto; min-width: 0;
  padding: 26px 0 0;
}
.bingkai-pohon .tumpuk > li {
  padding: 0 0 .45rem 1.35rem;
  text-align: left;
}
.bingkai-pohon .tumpuk > li:last-child { padding-bottom: 0; }

/* Satu garis tegak menyusuri sisi kiri, satu garis mendatar ke tiap kotak */
.bingkai-pohon .tumpuk > li::before {
  top: 0; left: 0; right: auto;
  width: 0; height: 100%;
  border: 0; border-left: 2px solid var(--garis);
  border-radius: 0;
}
.bingkai-pohon .tumpuk > li:last-child::before { height: 1.45rem; }
.bingkai-pohon .tumpuk > li::after {
  top: 1.45rem; left: 0;
  width: 1.35rem; height: 0;
  border: 0; border-top: 2px solid var(--garis);
  border-radius: 0;
}

/* Kotaknya jadi mendatar: foto di kiri, nama di kanan */
.bingkai-pohon .tumpuk .simpul {
  flex-direction: row; align-items: center; gap: .6rem;
  width: 100%; min-width: 210px;
  padding: .5rem .7rem;
  text-align: left;
  border-top: 1px solid var(--garis);
  border-left: 3px solid var(--warna-organ, var(--pusaka));
}
.bingkai-pohon .tumpuk .simpul-foto { width: 38px; height: 38px; margin: 0; flex: none; }
.bingkai-pohon .tumpuk .simpul-jabatan { display: block; margin-bottom: .05rem; }
.bingkai-pohon .tumpuk .simpul strong  { display: block; }

/* ---------- Ponsel: bagan mendatar diganti daftar bertingkat ----------
   Bagan enam kepala sekolah berdampingan butuh lebar sekitar 900px.
   Memaksakannya di layar 380px hanya menghasilkan kotak sempit yang
   tidak terbaca, jadi bentuknya diubah menjadi susunan menurun. */
@media (max-width: 860px) {
  .petunjuk-geser { display: none; }
  .bingkai-pohon { overflow-x: visible; padding: .5rem 0 1rem; }

  .bingkai-pohon ul {
    flex-direction: column; align-items: stretch;
    width: auto; min-width: 0;
    padding: 0 0 0 1.4rem;
  }
  .bingkai-pohon .pohon-akar { padding-left: 0; }

  .bingkai-pohon li {
    padding: .4rem 0 .4rem 1.1rem;
    text-align: left;
  }
  .bingkai-pohon li:only-child { padding-top: .4rem; }

  /* Garis tegak menyusuri sisi kiri, garis mendatar ke tiap simpul */
  .bingkai-pohon li::before {
    top: 0; left: 0; right: auto;
    width: 0; height: 100%;
    border-top: 0; border-left: 2px solid var(--garis);
    border-radius: 0;
  }
  .bingkai-pohon li:last-child::before { height: 1.55rem; }
  .bingkai-pohon li::after {
    top: 1.55rem; left: 0;
    width: 1.1rem; height: 0;
    border-left: 0; border-top: 2px solid var(--garis);
    border-radius: 0;
  }
  /* Ditulis ulang secara lengkap, bukan sekadar ditampilkan kembali.
     Aturan bawahan tunggal di tampilan lebar bernilai lebih kuat
     daripada aturan dasar di sini, jadi kalau hanya "display: block"
     bentuk garisnya akan ikut terbawa dari tampilan lebar. */
  .bingkai-pohon li:only-child::before {
    display: block;
    top: 0; left: 0; right: auto;
    width: 0; height: 1.55rem;
    border: 0; border-left: 2px solid var(--garis);
    border-radius: 0;
  }
  .bingkai-pohon li:only-child::after {
    display: block;
    top: 1.55rem; left: 0;
    width: 1.1rem; height: 0;
    border: 0; border-top: 2px solid var(--garis);
    border-radius: 0;
  }
  .bingkai-pohon .pohon-akar > li::before,
  .bingkai-pohon .pohon-akar > li::after { display: none; }
  .bingkai-pohon .pohon-akar > li { padding-left: 0; }
  .bingkai-pohon ul ul::before { display: none; }

  /* Kotak jadi mendatar: foto di kiri, nama di kanan */
  .simpul {
    flex-direction: row; align-items: center; gap: .7rem;
    width: 100%; max-width: 420px;
    padding: .6rem .8rem;
    text-align: left;
    border-top: 1px solid var(--garis);
    border-left: 3px solid var(--warna-organ, var(--pusaka));
  }
  .simpul:hover { transform: none; }
  .simpul-foto { width: 44px; height: 44px; margin: 0; flex: none; }
  .simpul-jabatan { display: block; font-size: .66rem; }
  .simpul strong  { display: block; font-size: .82rem; }
}

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


/* ============================================================
   19. SAMBUTAN
   ============================================================ */

.kartu-sambutan {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 2.6rem;
  align-items: center;
  padding: 1.8rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-left: 4px solid var(--emas);
  border-radius: var(--lengkung);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--laju-sedang) var(--lengkung-gerak),
              transform var(--laju-sedang) var(--lengkung-gerak);
}
.kartu-sambutan:hover { box-shadow: var(--bayang); transform: translateY(-3px); }

.sambutan-foto {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  background: var(--pusaka-muda);
  /* Blok oranye di belakang foto dibuat dengan bayangan padat,
     bukan elemen tambahan. Bayangan luar tidak ikut terpotong oleh
     overflow: hidden, jadi fotonya tetap bisa melengkung sudutnya. */
  box-shadow:
    14px 14px 0 var(--emas),
    0 18px 40px rgba(8, 26, 45, .16);
  transition: box-shadow var(--laju-sedang) var(--lengkung-gerak),
              transform var(--laju-sedang) var(--lengkung-gerak);
}
/* Saat disorot, foto bergeser menutupi bloknya — memberi kesan terangkat */
.kartu-sambutan:hover .sambutan-foto {
  transform: translate(5px, 5px);
  box-shadow: 9px 9px 0 var(--emas), 0 22px 48px rgba(8, 26, 45, .22);
}
.sambutan-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform var(--laju-lambat) var(--lengkung-gerak);
}
.kartu-sambutan:hover .sambutan-foto img { transform: scale(1.04); }
.sambutan-foto .inisial { font-family: var(--serif); font-size: 4rem; font-weight: 700; color: var(--pusaka); }

.sambutan-teks { display: flex; flex-direction: column; align-items: flex-start; }

.sambutan-label {
  display: inline-block; width: fit-content;
  padding: .2rem .65rem; margin-bottom: .7rem;
  border-radius: 100px;
  background: var(--emas); color: #2A1405;
  font-size: var(--t-xs); font-weight: 700;
}
.sambutan-judul {
  font-family: var(--serif); font-weight: 600;
  font-size: var(--t-2xl); line-height: 1.2;
  margin-bottom: .3rem;
}
.kartu-sambutan:hover .sambutan-judul { color: var(--pusaka); }
.sambutan-nama { font-size: var(--t-sm); color: var(--tinta-lembut); margin-bottom: 1rem; }
.sambutan-ringkas {
  font-size: var(--t-md); line-height: 1.7; margin-bottom: 1.2rem;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

/* Halaman sambutan lengkap */
.foto-sambutan-penuh { margin: 0 1rem 2.4rem 0; max-width: 340px; }
.foto-sambutan-penuh img {
  width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: top center;
  border-radius: 16px;
  box-shadow: 14px 14px 0 var(--emas), 0 18px 40px rgba(8, 26, 45, .16);
}
.foto-sambutan-penuh figcaption { margin-top: .7rem; }
.foto-sambutan-penuh strong { display: block; font-size: var(--t-md); }
.foto-sambutan-penuh span   { font-size: var(--t-sm); color: var(--tinta-lembut); }

.tanda-tangan {
  margin-top: 2rem; padding-top: 1.3rem;
  border-top: 1px solid var(--garis);
}
.tanda-tangan strong { display: block; font-family: var(--serif); font-size: var(--t-lg); }
.tanda-tangan span   { font-size: var(--t-sm); color: var(--tinta-lembut); }

/* Foto tegak di kolom samping berbeda bentuk dari gambar berita */
.sisi-berita img[src*="/sambutan/"] { width: 48px; height: 62px; }

@media (max-width: 860px) {
  /* Foto pindah ke atas, ringkasan di bawahnya */
  .kartu-sambutan { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.2rem; }
  .sambutan-foto  {
    max-width: 220px; margin: 0 auto;
    box-shadow: 10px 10px 0 var(--emas), 0 14px 30px rgba(8, 26, 45, .16);
  }
  .foto-sambutan-penuh { margin-right: .8rem; }
  .foto-sambutan-penuh img { box-shadow: 10px 10px 0 var(--emas), 0 14px 30px rgba(8, 26, 45, .16); }
  .sambutan-teks  { align-items: center; text-align: center; }
  .sambutan-ringkas { -webkit-line-clamp: 6; }
  .foto-sambutan-penuh { max-width: 100%; }
}

@media (max-width: 480px) {
  .sambutan-foto { max-width: 190px; }
  .sambutan-judul { font-size: var(--t-xl); }
}


/* ============================================================
   20. HALAMAN STRUKTUR PENGURUS
   ============================================================ */

/* Wadah lebih lebar dari biasanya. Bagan enam kepala sekolah
   berdampingan butuh sekitar 900 piksel; wadah 1180 piksel
   membuatnya selalu tergeser meski layarnya cukup luas. */
.wadah-lebar {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--sela);
}

/* Keterangan warna di bawah bagan */
.kunci-warna {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  justify-content: center;
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--garis);
}
.kunci-butir {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); color: var(--tinta-lembut);
}
.kunci-titik {
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--warna-organ, var(--pusaka));
}
.kunci-jumlah {
  padding: .05rem .4rem; border-radius: 100px;
  background: var(--pusaka-muda); color: var(--pusaka);
  font-size: var(--t-xs); font-weight: 700;
}

.catatan-bagan {
  text-align: center; margin: 1rem auto 0;
  font-size: var(--t-sm); color: var(--tinta-lembut);
}

/* Judul tiap organ di halaman profil */
.judul-organ {
  font-size: var(--t-lg);
  padding-left: .7rem;
  border-left: 4px solid var(--warna-organ, var(--pusaka));
  margin-bottom: 1rem;
}

@media (max-width: 1100px) {
  .petunjuk-geser { display: block; }
}


/* ============================================================
   21. JEJAK ALUMNI & PROGRAM UNGGULAN
   ============================================================ */

/* ---------- Jejak alumni ---------- */
.kisi-alumni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 1.3rem;
}

.kartu-alumni {
  display: flex; flex-direction: column;
  margin: 0; padding: 1.4rem 1.1rem 1.2rem;
  text-align: center; cursor: pointer;
  font-family: inherit; color: inherit;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-top: 3px solid var(--warna-unit, var(--pusaka));
  border-radius: var(--lengkung);
  transition: transform var(--laju-sedang) var(--lengkung-gerak),
              box-shadow var(--laju-sedang) var(--lengkung-gerak);
}
.kartu-alumni:hover { transform: translateY(-3px); box-shadow: var(--bayang); }

.alumni-foto {
  display: grid; place-items: center;
  width: 176px; height: 176px; margin: 0 auto 1rem;
  border-radius: 50%; overflow: hidden;
  background: var(--pusaka-muda);
  border: 4px solid var(--warna-unit, var(--pusaka));
}
.alumni-foto img { width: 100%; height: 100%; object-fit: cover; }
.alumni-foto .inisial {
  font-family: var(--serif); font-size: 3.6rem; font-weight: 700;
  color: var(--warna-unit, var(--pusaka));
}

.kartu-alumni strong { display: block; font-size: var(--t-md); line-height: 1.3; }
.alumni-institusi {
  display: block; margin-top: .35rem;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--warna-unit, var(--pusaka));
}
.alumni-prodi { display: block; font-size: var(--t-sm); color: var(--tinta-lembut); }
.alumni-asal {
  display: block; margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--garis);
  font-size: var(--t-xs); color: var(--tinta-lembut);
}
.alumni-ket {
  display: block; margin-top: .4rem;
  font-size: var(--t-xs); color: var(--tinta-lembut); font-style: italic;
}

/* ---------- Program unggulan ---------- */
.kisi-program {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}

.kartu-program {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.4rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-left: 4px solid var(--warna-unit, var(--pusaka));
  border-radius: var(--lengkung);
  color: inherit; text-decoration: none;
  transition: transform var(--laju-sedang) var(--lengkung-gerak),
              box-shadow var(--laju-sedang) var(--lengkung-gerak);
}
.kartu-program:hover { transform: translateY(-3px); box-shadow: var(--bayang); }

.program-ikon {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: var(--lengkung-s);
  background: var(--warna-unit, var(--pusaka));
  color: #fff;
}

.program-isi { display: flex; flex-direction: column; min-width: 0; }
.program-unit {
  font-size: var(--t-xs); font-weight: 700;
  color: var(--warna-unit, var(--pusaka));
  margin-bottom: .15rem;
}
.kartu-program strong {
  font-family: var(--serif); font-weight: 600;
  font-size: var(--t-xl); line-height: 1.2;
}
.program-ringkas {
  font-size: var(--t-sm); color: var(--tinta-lembut);
  margin-top: .45rem; line-height: 1.6;
}
.program-baca {
  margin-top: .8rem; font-size: var(--t-sm); font-weight: 600;
  color: var(--warna-unit, var(--pusaka));
}
.kartu-program:hover .program-baca { text-decoration: underline; }

@media (max-width: 560px) {
  .kisi-alumni  { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .kartu-alumni { padding: 1rem .7rem; }
  .alumni-foto  { width: 132px; height: 132px; border-width: 3px; }
  .alumni-foto .inisial { font-size: 2.7rem; }
  .kisi-program { grid-template-columns: 1fr; }
  .kartu-program { padding: 1.1rem; gap: .8rem; }
  .program-ikon { width: 44px; height: 44px; }
}


/* ============================================================
   22. SALINDIA SAMBUTAN & FASILITAS UNGGULAN
   ============================================================ */

/* ---------- Salindia sambutan ---------- */
.salindia-sambutan { position: relative; }

.salindia-sambutan .kartu-sambutan {
  display: none;
  animation: munculSambutan var(--laju-sedang) var(--lengkung-gerak);
}
.salindia-sambutan .kartu-sambutan.aktif { display: grid; }
@keyframes munculSambutan { from { opacity: 0; transform: translateY(12px); } }

.kendali-sambutan {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.2rem;
}
.kendali-sambutan > button {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--garis); border-radius: 50%;
  background: var(--kartu); color: var(--tinta);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color var(--laju-cepat) ease, color var(--laju-cepat) ease;
}
.kendali-sambutan > button:hover { border-color: var(--pusaka); color: var(--pusaka); }

.titik-sambutan { display: flex; gap: .4rem; }
.titik-sambutan button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--garis); cursor: pointer;
  transition: background-color var(--laju-cepat) ease, width var(--laju-sedang) var(--lengkung-gerak);
}
.titik-sambutan button[aria-current="true"] { background: var(--emas); width: 24px; border-radius: 4px; }


/* ---------- Fasilitas unggulan ---------- */
.fasilitas-blok { background: var(--pusaka-muda); }

.kisi-fasilitas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem;
}

.kartu-fasilitas {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-bottom: 3px solid var(--warna-unit, var(--pusaka));
  border-radius: var(--lengkung);
  text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
  transition: transform var(--laju-sedang) var(--lengkung-gerak),
              box-shadow var(--laju-sedang) var(--lengkung-gerak);
}
.kartu-fasilitas:hover { transform: translateY(-4px); box-shadow: var(--bayang); }

.fasilitas-gambar {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--pusaka-muda);
}
.fasilitas-gambar img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--laju-lambat) var(--lengkung-gerak);
}
.kartu-fasilitas:hover .fasilitas-gambar img { transform: scale(1.06); }

.fasilitas-isi { padding: 1rem 1.1rem 1.2rem; }
.fasilitas-unit {
  display: block; font-size: var(--t-xs); font-weight: 700;
  color: var(--warna-unit, var(--pusaka)); margin-bottom: .15rem;
}
.kartu-fasilitas strong {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: var(--t-lg); line-height: 1.25;
}
.fasilitas-ringkas {
  display: block; margin-top: .4rem;
  font-size: var(--t-sm); color: var(--tinta-lembut); line-height: 1.6;
}

/* ---------- Pop-up fasilitas ---------- */
.tirai-fasilitas {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(6, 14, 24, .9);
  backdrop-filter: blur(4px);
  animation: pudar var(--laju-sedang) ease;
}
.tirai-fasilitas[hidden] { display: none; }

.kotak-fasilitas {
  position: relative;
  width: min(880px, 100%);
  max-height: 92vh; overflow-y: auto;
  background: var(--kartu);
  border-radius: 18px;
  box-shadow: 0 26px 76px rgba(0,0,0,.45);
  animation: masuk var(--laju-sedang) var(--lengkung-pegas);
}

/* Bagian gambar atau video */
.fasilitas-media {
  position: relative;
  background: #05121F;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.fasilitas-media img,
.fasilitas-media iframe {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 0;
  animation: bukaMedia 700ms var(--lengkung-gerak) both;
}
@keyframes bukaMedia { from { opacity: 0; transform: scale(1.06); } }

/* Garis warna unit sebagai pemisah gambar dan teks */
.fasilitas-media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--warna-unit, var(--pusaka));
}

.fasilitas-teks {
  position: relative;
  padding: 1.5rem 1.8rem 1.9rem;
}

/* Lencana unit */
.kotak-fasilitas .fasilitas-unit {
  display: inline-block; width: fit-content;
  padding: .3rem .8rem; margin-bottom: .6rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--warna-unit, #0D5296) 13%, transparent);
  color: var(--warna-unit, var(--pusaka));
  font-size: var(--t-xs); font-weight: 700;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .kotak-fasilitas .fasilitas-unit { background: var(--pusaka-muda); }
}
.kotak-fasilitas .fasilitas-unit[hidden] { display: none; }

.fasilitas-teks h3 {
  font-size: var(--t-3xl); line-height: 1.15;
  margin: 0 0 .7rem;
}
.fasilitas-teks p {
  font-size: var(--t-md); line-height: 1.75; margin: 0;
  white-space: pre-line;
  padding-left: 1rem;
  border-left: 3px solid var(--warna-unit, var(--pusaka));
}

/* Isi teks naik beruntun setelah gambarnya tampil */
.fasilitas-teks > * { animation: naikIsi 500ms var(--lengkung-gerak) both; }
.fasilitas-teks > *:nth-child(1) { animation-delay: 130ms; }
.fasilitas-teks > *:nth-child(2) { animation-delay: 210ms; }
.fasilitas-teks > *:nth-child(3) { animation-delay: 290ms; }
@keyframes naikIsi { from { opacity: 0; transform: translateY(14px); } }

.fasilitas-tutup {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  background: rgba(5, 18, 31, .55); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background-color var(--laju-cepat) ease,
              transform var(--laju-cepat) var(--lengkung-gerak);
}
.fasilitas-tutup:hover  { background: rgba(5, 18, 31, .85); }
.fasilitas-tutup:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .fasilitas-media img, .fasilitas-media iframe,
  .fasilitas-teks > * { animation: none; }
}

@media (max-width: 560px) {
  .kisi-fasilitas { grid-template-columns: 1fr; }
  .fasilitas-teks { padding: 1.1rem 1.1rem 1.4rem; }
  .fasilitas-teks h3 { font-size: var(--t-2xl); }
  .fasilitas-teks p  { padding-left: .8rem; }
  .fasilitas-tutup   { width: 36px; height: 36px; top: .6rem; right: .6rem; }
  .kendali-sambutan { margin-top: 1rem; }
}


/* ============================================================
   23. POP-UP ALUMNI, PANAH SOROTAN, SOROTAN DI PONSEL
   ============================================================ */

/* ---------- Pop-up alumni ---------- */
.tirai-alumni {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 1.2rem;
  background: rgba(6, 14, 24, .88);
  backdrop-filter: blur(4px);
  animation: pudar var(--laju-sedang) ease;
}
.tirai-alumni[hidden] { display: none; }

.kotak-alumni {
  position: relative;
  width: min(430px, 100%);
  max-height: 92vh; overflow-y: auto;
  text-align: center;
  background: var(--kartu);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.4);
  animation: masuk var(--laju-sedang) var(--lengkung-pegas);
}

/* Pita warna unit di bagian atas.
   Sudut bawahnya dilengkungkan sehingga foto bulat di atasnya
   terlihat duduk pada sebuah lengkungan, bukan menempel di kotak. */
.alumni-pita {
  height: 132px;
  border-radius: 18px 18px 46% 46% / 18px 18px 30px 30px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(150deg,
      var(--warna-unit, var(--pusaka)) 0%,
      color-mix(in srgb, var(--warna-unit, #0D5296) 72%, #000) 100%);
}
/* Cadangan untuk browser lama yang belum mengenal color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .alumni-pita { background: var(--warna-unit, var(--pusaka)); }
}

.alumni-media {
  display: grid; place-items: center;
  position: relative; z-index: 2;
  width: 168px; height: 168px;
  margin: -104px auto 0;
  border-radius: 50%; overflow: hidden;
  background: var(--kartu);
  border: 6px solid var(--kartu);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.alumni-media img { width: 100%; height: 100%; object-fit: cover; }
.alumni-media .inisial {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--pusaka-muda);
  font-family: var(--serif); font-size: 4rem; font-weight: 700;
  color: var(--warna-unit, var(--pusaka));
}

.alumni-teks { padding: 1rem 1.6rem 1.8rem; }
.alumni-teks h3 { font-size: var(--t-2xl); margin: 0 0 .7rem; line-height: 1.2; }
.alumni-teks p  { margin: 0; max-width: none; }

/* Institusi sebagai lencana — bagian terpenting dari kartu ini */
.alumni-lencana {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--warna-unit, #0D5296) 12%, transparent);
  color: var(--warna-unit, var(--pusaka));
  font-size: var(--t-md); font-weight: 700; line-height: 1.3;
  text-align: left;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .alumni-lencana { background: var(--pusaka-muda); }
}
.alumni-lencana-ikon { display: grid; place-items: center; flex: none; }
.alumni-lencana-ikon svg { width: 18px; height: 18px; }

.alumni-detail-prodi {
  margin-top: .5rem !important;
  font-size: var(--t-sm); color: var(--tinta-lembut);
}

.alumni-meta {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px dashed var(--garis);
  font-size: var(--t-sm); color: var(--tinta-lembut);
}

.alumni-ket-kotak {
  position: relative;
  margin-top: 1rem; padding: .9rem 1rem .9rem 2.1rem;
  background: var(--kertas);
  border-radius: 10px;
  text-align: left;
}
/* Tanda kutip besar sebagai penanda bahwa ini catatan, bukan data */
.alumni-ket-kotak::before {
  content: "\201C";
  position: absolute; left: .55rem; top: .1rem;
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
  color: var(--warna-unit, var(--pusaka)); opacity: .35;
}
.alumni-ket-kotak p {
  font-size: var(--t-sm); line-height: 1.7;
  white-space: pre-line; color: var(--tinta);
}

.alumni-tutup {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
  background: rgba(0,0,0,.22); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background-color var(--laju-cepat) ease;
}
.alumni-tutup:hover { background: rgba(0,0,0,.5); }


/* ---------- Panah sorotan ---------- */
.salindia-panah {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  background: rgba(8, 26, 45, .42); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  transition: background-color var(--laju-cepat) ease, border-color var(--laju-cepat) ease;
}
.salindia-panah:hover  { background: rgba(8, 26, 45, .75); border-color: #fff; }
.salindia-panah:active { transform: translateY(-50%) scale(.93); }
.salindia-panah.kiri  { left: 1rem; }
.salindia-panah.kanan { right: 1rem; }


/* ============================================================
   24. SOROTAN DI PONSEL — gambar utuh, tidak terpotong
   ------------------------------------------------------------
   Sebelumnya gambar dipangkas agar memenuhi kotak bertinggi tetap.
   Di sini kotaknya yang mengikuti gambar: foto tampil seluruhnya,
   judulnya turun ke bawah foto di atas latar biru.
   ============================================================ */
@media (max-width: 720px) {
  .salindia { height: auto; }

  /* Hanya slide yang aktif ikut menentukan tinggi wadahnya.
     Sisanya tetap melayang di belakang dan tersembunyi. */
  .slide       { position: absolute; inset: 0; }
  .slide.aktif { position: relative; inset: auto; display: flex; flex-direction: column; }

  .slide img {
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: #071C2E;
  }
  .slide.aktif img { animation: none; }   /* tanpa gerak merayap agar tidak terpangkas */
  .slide::after { display: none; }        /* gradasi tidak perlu, teks sudah terpisah */

  .slide-teks {
    position: static;
    padding: 1rem var(--sela) 1.2rem;
    background: var(--pusaka-tua);
    max-width: none;
  }
  .slide-teks > * { max-width: none; }
  .slide-label  { margin-bottom: .5rem; }
  .slide-judul  { -webkit-line-clamp: 4; }

  /* Titik penanda turun ke bawah, tidak lagi menumpuk di atas gambar */
  .salindia-titik {
    position: relative; bottom: auto; left: auto; transform: none;
    justify-content: center;
    padding: .75rem 0;
    background: var(--pusaka-tua);
  }

  .salindia-panah { width: 38px; height: 38px; font-size: 1.4rem; }
  .salindia-panah.kiri  { left: .5rem; }
  .salindia-panah.kanan { right: .5rem; }
  /* Panah disejajarkan ke tengah gambar, bukan tengah seluruh slide */
  .salindia-panah { top: 31vw; }

  .alumni-pita  { height: 104px; }
  .alumni-media { width: 132px; height: 132px; margin-top: -82px; border-width: 5px; }
  .alumni-media .inisial { font-size: 3.1rem; }
  .alumni-teks  { padding: .9rem 1.1rem 1.4rem; }
  .alumni-lencana { font-size: var(--t-sm); padding: .4rem .8rem; }
}


/* ============================================================
   25. LEMBARAN BERITA DI BERANDA
   ------------------------------------------------------------
   Enam berita per lembar, tiga per baris. Yang berganti seluruh
   lembarnya sekaligus — bukan satu kartu digeser — sehingga
   susunan tiga kali dua-nya tidak pernah terlihat separuh.
   ============================================================ */

.lembaran { position: relative; }

.lembar { display: none; }
.lembar.aktif {
  display: block;
  animation: gantiLembar 460ms var(--lengkung-gerak);
}
@keyframes gantiLembar { from { opacity: 0; transform: translateY(14px); } }

/* Tiga kartu per baris, tetap tiga meski kolomnya menyempit */
.kisi-artikel.tiga {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.kendali-lembar {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.4rem;
}
.kendali-lembar > button {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--garis); border-radius: 50%;
  background: var(--kartu); color: var(--tinta);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color var(--laju-cepat) ease, color var(--laju-cepat) ease;
}
.kendali-lembar > button:hover { border-color: var(--pusaka); color: var(--pusaka); }

.titik-lembar { display: flex; gap: .4rem; }
.titik-lembar button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--garis); cursor: pointer;
  transition: background-color var(--laju-cepat) ease, width var(--laju-sedang) var(--lengkung-gerak);
}
.titik-lembar button[aria-current="true"] { background: var(--pusaka); width: 24px; border-radius: 4px; }

/* Kartu diringkas karena kolomnya kini terbagi tiga */
.kisi-artikel.tiga .kartu-isi   { padding: .8rem .9rem 1rem; }
.kisi-artikel.tiga .kartu-isi h3 { font-size: var(--t-md); }
.kisi-artikel.tiga .kartu-isi p  { font-size: var(--t-xs); }

@media (max-width: 980px) {
  /* Panel agenda sudah turun ke bawah, kolom berita jadi selebar penuh */
  .kisi-artikel.tiga { gap: 1rem; }
}

@media (max-width: 720px) {
  /* Di ponsel hanya lembar pertama yang tampil, tanpa pergantian.
     Berita yang berpindah sendiri di layar sempit membuat pengunjung
     kehilangan tempat bacanya. */
  .kisi-artikel.tiga { grid-template-columns: 1fr; gap: 0; }
  .kendali-lembar { display: none; }
  .lembar:not(.aktif) { display: none; }
}


/* ---------- Titik sorotan bila jumlahnya banyak ----------
   Dua puluh sorotan berarti dua puluh titik. Tanpa pembungkusan,
   deretannya melebar melewati tepi layar. */
.salindia-titik { flex-wrap: wrap; max-width: min(90%, 620px); justify-content: center; }
.salindia-titik button { width: 24px; }
.salindia-titik button[aria-current="true"] { width: 40px; }

@media (max-width: 720px) {
  .salindia-titik { max-width: 100%; padding-inline: 1rem; row-gap: .35rem; }
  .salindia-titik button { width: 18px; height: 3px; }
  .salindia-titik button[aria-current="true"] { width: 30px; }
}

/* Latar gelap selagi gambar yang ditunda belum termuat */
.slide img[data-nanti] { background: var(--pusaka-tua); }

/* Penghitung sorotan, dipakai bila jumlahnya lebih dari dua belas */
.salindia-hitung {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 3;
  padding: .3rem .85rem;
  border-radius: 100px;
  background: rgba(8, 26, 45, .5);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .salindia-hitung {
    position: relative; bottom: auto; left: auto; transform: none;
    display: block; width: fit-content; margin: 0 auto;
    padding: .5rem .9rem;
    background: var(--pusaka-tua); border: 0; border-radius: 0;
  }
}


/* ============================================================
   26. POP-UP PENGUMUMAN — EMPAT MODE TAMPIL
   ============================================================ */

/* Mode gambar dan video butuh ruang lebih lebar daripada
   mode ringkas yang hanya berisi beberapa baris teks. */
.modal-gambar, .modal-video { width: min(720px, 100%); }
.modal-teks { width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column; }

.modal-media { background: #05121F; line-height: 0; }
.modal-media img,
.modal-media iframe {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: contain;
  border: 0;
}
/* Gambar pengumuman sering berupa poster tegak — dibiarkan utuh,
   bukan dipangkas, karena biasanya memuat tulisan penting. */
.modal-gambar .modal-media img { aspect-ratio: auto; max-height: 62vh; object-fit: contain; }

/* Pada mode teks, hanya bagian isinya yang menggulir agar judul
   dan tombolnya tetap terlihat. */
.modal-teks .modal-badan { display: flex; flex-direction: column; min-height: 0; }
.modal-isi {
  overflow-y: auto; min-height: 0;
  margin: .2rem 0 1.2rem;
  padding-right: .5rem;
  font-size: var(--t-md); line-height: 1.75;
  text-align: left;
}
.modal-isi > *:first-child { margin-top: 0; }
.modal-isi > *:last-child  { margin-bottom: 0; }

/* Tanpa ini tombolnya melebar penuh, karena di mode teks ia menjadi
   anak wadah lentur — berbeda dari ketiga mode lainnya. */
.modal-teks .modal-badan .tombol { align-self: flex-start; }

@media (max-width: 560px) {
  .modal-gambar .modal-media img { max-height: 48vh; }
  .modal-teks { max-height: 84vh; }
}