/* =========================================================
   Yayasan Cahaya Teratai Putih — sistem desain situs
   Palet: telaga tempat teratai tumbuh, putih kelopak, dan
   kuning sari, warna kain putih-kuning di pura.
   ========================================================= */

:root {
  --telaga: #0f3437;
  --telaga-2: #1b4c4f;
  --telaga-gelap: #0a2629;
  --daun: #2f7a6b;
  --daun-tua: #1c6a5c;
  --sari: #efb30f;
  --sari-muda: #f9dd8a;
  --sari-tua: #7d5a00;
  --kelopak: #fbfcf9;
  --embun: #eef4f0;
  --embun-2: #dfe9e3;
  --tinta: #0f3437;
  --tinta-2: #4b6466;
  --garis: #d6e2dc;
  --garis-2: #bdcfc7;
  --merah: #a3312b;
  --merah-bg: #f8e6e5;

  --hijau: #1f6b50;
  --hijau-bg: #e3f2ea;
  --kuning: #8a5a00;
  --kuning-bg: #fbf1dc;
  --biru: #1f4e79;
  --biru-bg: #e6eef6;

  /* langit pagi sebagai cadangan tanpa JavaScript */
  --l-atas: #a9dbe2; --l-tengah: #dff1ea; --l-bawah: #fff0c2; --l-teks: #0f3437; --l-teks-2: #27505a; --l-cahaya: #fffdf0cc;

  --f-judul: 'Spectral', 'Georgia', serif;
  --f-badan: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --lebar: 1200px;
  --tepi: clamp(16px, 4vw, 32px);
  --radius: 8px;
  --bayang: 0 1px 2px rgb(15 52 55 / 0.06), 0 8px 24px -12px rgb(15 52 55 / 0.18);
  --tinggi-kepala: 80px;
}

/* ---------- dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--f-badan);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--kelopak);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--daun-tua); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--telaga); }
h1, h2, h3, h4 { font-family: var(--f-judul); font-weight: 400; line-height: 1.14; margin: 0; letter-spacing: -0.008em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--sari-muda); color: var(--telaga); }
[hidden] { display: none !important; }

.ikon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: none; }
.wadah { width: 100%; max-width: calc(var(--lebar) + var(--tepi) * 2); margin-inline: auto; padding-inline: var(--tepi); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lompat { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--telaga); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.lompat:focus { top: 12px; color: #fff; }
.kode { font-family: var(--f-badan); font-weight: 500; font-size: 0.92em; letter-spacing: 0.01em; }

/* ---------- tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 0.65em 1.3em;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font-family: var(--f-badan); font-weight: 700; font-size: 0.95rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.tombol:active { transform: translateY(1px); }
.tombol[disabled], .tombol[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }
.tombol-utama { background: var(--daun); color: #fff; }
.tombol-utama:hover { background: var(--daun-tua); color: #fff; }
.tombol-garis { border-color: var(--garis-2); color: var(--tinta); background: transparent; }
.tombol-garis:hover { border-color: var(--tinta); color: var(--tinta); background: rgb(15 52 55 / 0.04); }
.tombol-emas { background: var(--sari); color: var(--telaga); }
.tombol-emas:hover { background: var(--sari-muda); color: var(--telaga); }
.tombol-terang { border-color: rgb(255 255 255 / 0.4); color: #fff; background: transparent; }
.tombol-terang:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); color: #fff; }
.tombol-hapus { border-color: #e2b4b2; color: var(--daun); background: transparent; }
.tombol-hapus:hover { background: var(--merah-bg); color: var(--daun-tua); }
.tombol.kecil { min-height: 36px; padding: 0.4em 0.9em; font-size: 0.875rem; }
.tombol.lebar { width: 100%; }
.tombol .ikon { width: 1.1em; height: 1.1em; }
.tombol-teks { background: none; border: 0; padding: 0; color: var(--daun); font-weight: 700; display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; font-size: 0.95rem; }
.tombol-teks:hover { color: var(--daun-tua); }
.tombol-teks .ikon { transition: transform 0.18s; }
.tombol-teks:hover .ikon { transform: translateX(3px); }
.berputar { animation: putar 0.9s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

.nav { margin-left: auto; }
.nav-daftar { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-daftar > li { position: relative; display: flex; align-items: center; }
.nav-daftar > li > a { display: block; padding: 10px 14px; color: var(--tinta); font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: var(--radius); position: relative; }
.nav-daftar > li > a:hover { color: var(--daun); }
.nav-daftar > li > a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--daun); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.nav-daftar > li > a[aria-current='page']::after, .nav-daftar > li > a:hover::after { transform: scaleX(1); }
.nav-daftar > li > a[aria-current='page'] { color: var(--daun); }
.nav-turun > a { padding-right: 4px !important; }
.nav-turun-tombol { border: 0; background: none; padding: 8px 6px; color: inherit; display: inline-flex; border-radius: var(--radius); }
.nav-turun-tombol .ikon { transition: transform 0.2s; }
.nav-turun.terbuka .nav-turun-tombol .ikon { transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: calc(100% + 10px); left: -12px; min-width: 320px; list-style: none; margin: 0; padding: 8px;
  background: var(--kelopak); border: 1px solid var(--garis); border-radius: 10px; box-shadow: var(--bayang);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav-turun:hover .nav-sub, .nav-turun:focus-within .nav-sub, .nav-turun.terbuka .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-sub::before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav-sub a { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 8px; text-decoration: none; color: var(--tinta); }
.nav-sub a:hover { background: var(--embun); color: var(--tinta); }
.nav-sub .ikon { width: 22px; height: 22px; color: var(--daun); margin-top: 2px; }
.nav-sub b { display: block; font-weight: 700; font-size: 0.95rem; }
.nav-sub small { display: block; color: var(--tinta-2); font-size: 0.83rem; }
.nav-seluler-aksi { display: none; }

.kepala-aksi { display: flex; align-items: center; gap: 14px; }
.tautan-akun { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); font-weight: 600; font-size: 0.95rem; text-decoration: none; padding: 8px 4px; }
.tautan-akun:hover { color: var(--daun); }
.tautan-akun .inisial { width: 30px; height: 30px; border-radius: 50%; background: var(--telaga); color: var(--sari-muda); display: inline-grid; place-items: center; font-family: var(--f-judul); font-weight: 700; font-size: 0.95rem; }
.tombol-menu { display: none; border: 1.5px solid var(--garis); background: var(--kelopak); border-radius: var(--radius); width: 46px; height: 46px; align-items: center; justify-content: center; }
.tombol-menu .ikon { width: 22px; height: 22px; }

/* ---------- label & judul bagian ---------- */
.label { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--daun); margin: 0 0 12px; }
.label::before { content: ''; width: 8px; height: 8px; background: var(--sari); transform: rotate(45deg); flex: none; }
.judul-bagian { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
.bagian { padding-block: clamp(56px, 8vw, 104px); }
.bagian-putih { background: var(--embun); }
.bagian-kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.bagian-kepala p:not(.label) { max-width: 56ch; color: var(--tinta-2); margin: 12px 0 0; }
.paragraf-besar { font-size: 1.15rem; color: var(--tinta-2); max-width: 60ch; }

/* ---------- kabar ---------- */
.kabar-portal { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.kabar-utama { display: block; text-decoration: none; color: var(--tinta); }
.kabar-utama:hover { color: var(--tinta); }
.kabar-utama .sampul { aspect-ratio: 16 / 10; border-radius: var(--radius); }
.kabar-utama h3 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); margin: 18px 0 10px; line-height: 1.15; }
.kabar-utama:hover h3 { color: var(--daun); }
.kabar-utama p { color: var(--tinta-2); margin-bottom: 12px; }
.kabar-daftar { list-style: none; margin: 0; padding: 0; display: grid; }
.kabar-daftar li + li { border-top: 1px solid var(--garis); }
.kabar-baris { display: grid; grid-template-columns: 124px 1fr; gap: 18px; padding: 18px 0; text-decoration: none; color: var(--tinta); align-items: start; }
.kabar-daftar li:first-child .kabar-baris { padding-top: 0; }
.kabar-baris .sampul { aspect-ratio: 4 / 3; border-radius: 4px; }
.kabar-baris h3 { font-size: 1.12rem; line-height: 1.25; margin: 4px 0 6px; }
.kabar-baris:hover h3 { color: var(--daun); }
.meta-kecil { font-size: 0.82rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.kat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--daun); }

.sampul { position: relative; overflow: hidden; background: var(--embun-2); }
.sampul img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
a:hover .sampul img { transform: scale(1.03); }
.sampul-kosong {
  display: grid; place-items: center; color: var(--sari);
  background:
    linear-gradient(rgb(0 0 0 / 0.16) 1px, transparent 1px) 0 0 / 28px 14px,
    var(--telaga-2);
}
.sampul-kosong svg { width: auto; height: 62%; opacity: 0.85; }
.sampul-kosong .sampul-kat { position: absolute; left: 14px; bottom: 12px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sari-muda); }
.kabar-baris .sampul-kosong .sampul-kat { display: none; }

.kisi-kabar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 28px; }
.kartu-kabar { display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); }
.kartu-kabar:hover { color: var(--tinta); }
.kartu-kabar .sampul { aspect-ratio: 16 / 10; border-radius: var(--radius); margin-bottom: 16px; }
.kartu-kabar h3 { font-size: 1.3rem; line-height: 1.22; margin: 6px 0 8px; }
.kartu-kabar:hover h3 { color: var(--daun); }
.kartu-kabar p { color: var(--tinta-2); font-size: 0.97rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; }

.kosong { border: 1.5px dashed var(--garis-2); border-radius: 10px; padding: 40px 24px; text-align: center; color: var(--tinta-2); background: rgb(255 255 255 / 0.5); }
.kosong h3 { font-size: 1.3rem; color: var(--tinta); margin-bottom: 8px; }
.kosong p { margin: 0 auto; max-width: 48ch; }
.kerangka { background: linear-gradient(90deg, var(--embun-2) 0%, #f6faf7 50%, var(--embun-2) 100%) 0 0 / 200% 100%; animation: kilau 1.4s linear infinite; border-radius: 4px; }
@keyframes kilau { to { background-position: -200% 0; } }

.saring { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.chip-grup { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--garis-2); background: var(--kelopak); color: var(--tinta); border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip[aria-pressed='true'], .chip[aria-current='true'] { background: var(--telaga); border-color: var(--telaga); color: #fff; }
.cari { position: relative; min-width: min(320px, 100%); }
.cari input { width: 100%; padding: 10px 14px 10px 40px; border: 1.5px solid var(--garis-2); border-radius: 999px; background: var(--kelopak); }
.cari .ikon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--tinta-2); }

/* ---------- visi & nilai ---------- */
.visi-kisi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.kutipan-visi { font-family: var(--f-judul); font-weight: 600; font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.3; color: var(--telaga); margin: 0; padding-left: 24px; border-left: 3px solid var(--sari); }
.semboyan-kotak { margin-top: 36px; padding: 26px 28px; background: var(--kelopak); border: 1px solid var(--garis); border-radius: 10px; }
.semboyan-kotak .translit { font-family: var(--f-judul); font-style: italic; font-size: 1.15rem; margin: 2px 0 8px; color: var(--tinta); }
.semboyan-kotak p:last-child { margin: 0; color: var(--tinta-2); }
/* ---------- legalitas ---------- */
.pita-legal { background: var(--kelopak); border-block: 1px solid var(--garis); }
.legal-kisi { display: grid; grid-template-columns: 0.9fr 1fr 1fr 1fr; gap: 0; }
.legal-kisi > div { padding: 30px 26px; border-left: 1px solid var(--garis); }
.legal-kisi > div:first-child { border-left: 0; padding-left: 0; }
.legal-kisi h2 { font-size: 1.5rem; }
.legal-kisi .kode { display: block; color: var(--telaga); font-size: 0.9rem; margin: 6px 0 4px; word-break: break-word; }
.legal-kisi p { margin: 0; font-size: 0.9rem; color: var(--tinta-2); }
.legal-kisi .judul-legal { font-weight: 700; color: var(--tinta); font-size: 0.95rem; }

.remah { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; margin-bottom: 18px; color: var(--tinta-2); }
.remah a { color: inherit; text-decoration: none; }
.remah a:hover { text-decoration: underline; }

/* ---------- tata letak halaman dalam ---------- */
.dua-kolom { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.daftar-isi { position: sticky; top: calc(var(--tinggi-kepala) + 24px); font-size: 0.92rem; }
.daftar-isi p { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 10px; }
.daftar-isi ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--garis); }
.daftar-isi a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--tinta-2); text-decoration: none; }
.daftar-isi a:hover { color: var(--tinta); }
.daftar-isi a.aktif { border-left-color: var(--daun); color: var(--daun); font-weight: 600; }
.blok + .blok { margin-top: clamp(56px, 7vw, 88px); }
.blok > h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 18px; scroll-margin-top: calc(var(--tinggi-kepala) + 24px); }
.blok > h2[id], .blok[id] { scroll-margin-top: calc(var(--tinggi-kepala) + 24px); }

.garis-waktu { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.garis-waktu::before { content: ''; position: absolute; left: 70px; top: 8px; bottom: 8px; width: 1px; background: var(--garis-2); }
.garis-waktu li { display: grid; grid-template-columns: 70px 1fr; gap: 28px; padding: 0 0 28px; position: relative; }
.garis-waktu li::after { content: ''; position: absolute; left: 66px; top: 9px; width: 9px; height: 9px; background: var(--sari); transform: rotate(45deg); }
.garis-waktu time { font-family: var(--f-judul); font-weight: 700; font-size: 1.35rem; color: var(--daun); line-height: 1.2; }
.garis-waktu h3 { font-family: var(--f-badan); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.garis-waktu p { margin: 0; color: var(--tinta-2); }

.misi-daftar { list-style: none; counter-reset: misi; margin: 0; padding: 0; display: grid; gap: 0; }
.misi-daftar li { counter-increment: misi; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--garis); }
.misi-daftar li::before { content: counter(misi, decimal-leading-zero); font-family: var(--f-judul); font-weight: 700; font-size: 1.5rem; color: var(--sari-tua); line-height: 1.2; }
.misi-daftar li p { margin: 0; }
.misi-daftar strong { color: var(--telaga); }

.kisi-dua { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kisi-tiga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kartu { background: var(--kelopak); border: 1px solid var(--garis); border-radius: 10px; padding: 24px; }
.kartu h3 { font-size: 1.2rem; margin-bottom: 8px; }
.kartu p:last-child { margin-bottom: 0; }
.kartu ul { margin: 0; padding-left: 1.1em; color: var(--tinta-2); }
.kartu .label { margin-bottom: 8px; }

.pengurus-kelompok + .pengurus-kelompok { margin-top: 32px; }
.pengurus-kelompok h3 { font-family: var(--f-badan); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); font-weight: 800; margin-bottom: 12px; }
.pengurus-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pengurus { background: var(--kelopak); border: 1px solid var(--garis); border-radius: 10px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.pengurus .inisial { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--embun); border: 1px solid var(--garis); display: grid; place-items: center; font-family: var(--f-judul); font-weight: 700; color: var(--daun); font-size: 1.05rem; }
.pengurus b { display: block; font-family: var(--f-judul); font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.pengurus small { display: block; color: var(--tinta-2); font-size: 0.85rem; margin-top: 2px; }
.pengurus.utama { border-color: var(--sari); background: linear-gradient(180deg, #fff 0%, #f6f4e6 100%); }

.tabel-wadah { overflow-x: auto; border: 1px solid var(--garis); border-radius: 10px; background: var(--kelopak); }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabel th, .tabel td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); font-weight: 800; background: var(--embun); }
.tabel tr:last-child td { border-bottom: 0; }

/* ---------- prosa (isi kabar, kebijakan) ---------- */
.prosa { font-size: 1.125rem; line-height: 1.78; max-width: 68ch; }
.prosa > * + * { margin-top: 1.1em; }
.prosa p { margin-bottom: 0; }
.prosa h2 { font-size: 1.65rem; margin-top: 1.8em; }
.prosa h3 { font-size: 1.3rem; margin-top: 1.5em; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin-bottom: 0; }
.prosa li + li { margin-top: 0.35em; }
.prosa li::marker { color: var(--daun); }
.prosa blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sari); font-family: var(--f-judul); font-size: 1.3rem; line-height: 1.45; color: var(--telaga); }
.prosa figure { margin: 1.6em 0; }
.prosa figure img, .prosa img { border-radius: var(--radius); }
.prosa a { font-weight: 600; }

.baca { padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.baca-wadah { max-width: 820px; }
.baca .remah { margin-bottom: 24px; }
.baca-judul { font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.08; color: var(--telaga); }
.baca-ringkasan { font-size: 1.2rem; color: var(--tinta-2); margin: 18px 0 0; max-width: 60ch; }
.baca-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--garis); font-size: 0.9rem; color: var(--tinta-2); }
.baca-meta > * + *::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--sari); transform: rotate(45deg); margin-right: 14px; vertical-align: 0.2em; }
.baca-sampul { margin: 32px 0 36px; }
.baca-sampul img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.baca-sampul figcaption { font-size: 0.88rem; color: var(--tinta-2); margin-top: 10px; }
.baca .prosa { margin-top: 32px; }
.baca-kaki { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--garis); }
.baca-kaki-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 12px; }
.bagikan { display: flex; flex-wrap: wrap; gap: 8px; }
.tak-ditemukan { text-align: center; padding-block: 40px; }
.tak-ditemukan .kode-404 { font-family: var(--f-judul); font-weight: 800; font-size: clamp(4rem, 12vw, 7rem); color: var(--daun); line-height: 1; }

/* ---------- formulir ---------- */
.formulir { display: grid; gap: 28px; }
.formulir fieldset { border: 1px solid var(--garis); border-radius: 12px; background: var(--kelopak); padding: clamp(20px, 3vw, 32px); margin: 0; display: grid; gap: 20px; min-width: 0; }
.formulir legend { font-family: var(--f-judul); font-weight: 700; font-size: 1.35rem; padding: 0 8px; margin-left: -8px; }
.formulir .keterangan-set { margin: -10px 0 0; color: var(--tinta-2); font-size: 0.95rem; }
.medan { display: grid; gap: 6px; min-width: 0; }
.medan > label, .medan > .medan-label { font-weight: 700; font-size: 0.95rem; }
.medan .wajib { color: var(--daun); }
.medan .petunjuk { font-size: 0.86rem; color: var(--tinta-2); margin: 0; }
.medan input[type='text'], .medan input[type='email'], .medan input[type='password'], .medan input[type='tel'], .medan input[type='date'], .medan input[type='number'], .medan input[type='search'], .medan input[type='url'], .medan select, .medan textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--garis-2); border-radius: var(--radius); background: #fff; font-size: 1rem; line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s;
}
.medan textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.medan input:focus, .medan select:focus, .medan textarea:focus { outline: none; border-color: var(--daun); box-shadow: 0 0 0 3px rgb(47 122 107 / 0.18); }
.medan [aria-invalid='true'] { border-color: var(--daun); background: #fffafa; }
.medan-galat { color: var(--daun); font-size: 0.86rem; font-weight: 600; margin: 0; }
.medan-hitung { font-size: 0.8rem; color: var(--tinta-2); text-align: right; margin: 0; }
.baris-medan { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.baris-medan.tiga { grid-template-columns: 1fr 1fr 1fr; }
.pilihan-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pilihan { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--garis-2); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; font-size: 0.95rem; }
.pilihan:hover { border-color: var(--tinta-2); }
.pilihan input { margin: 3px 0 0; accent-color: var(--daun); width: 18px; height: 18px; flex: none; }
.pilihan:has(input:checked) { border-color: var(--daun); background: #f1f8f4; }
.pilihan:has(input:focus-visible) { outline: 3px solid var(--sari); outline-offset: 2px; }
.pilihan b { display: block; font-weight: 700; }
.pilihan small { display: block; color: var(--tinta-2); font-size: 0.84rem; margin-top: 2px; }
.centang { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; cursor: pointer; }
.centang input { margin: 3px 0 0; accent-color: var(--daun); width: 18px; height: 18px; flex: none; }
.unggah { border: 1.5px dashed var(--garis-2); border-radius: 10px; padding: 22px; text-align: center; background: var(--embun); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.unggah:hover, .unggah.seret { border-color: var(--daun); background: #f1f8f4; }
.unggah .ikon { width: 28px; height: 28px; color: var(--daun); margin: 0 auto 6px; display: block; }
.unggah p { margin: 0; font-size: 0.92rem; color: var(--tinta-2); }
.unggah b { color: var(--tinta); }
.daftar-berkas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.daftar-berkas li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 8px; background: #fff; font-size: 0.92rem; }
.daftar-berkas img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
.daftar-berkas .berkas-ikon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--embun); border-radius: 4px; color: var(--daun); }
.daftar-berkas .berkas-nama { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daftar-berkas button { border: 0; background: none; color: var(--tinta-2); padding: 6px; border-radius: 4px; }
.daftar-berkas button:hover { color: var(--daun); background: var(--merah-bg); }
.aksi-formulir { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.tata-layanan { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.samping { position: sticky; top: calc(var(--tinggi-kepala) + 24px); display: grid; gap: 16px; }
.samping .kartu { padding: 22px; }
.samping h3 { font-size: 1.1rem; }
.samping ul { padding-left: 1.1em; margin: 0; font-size: 0.93rem; display: grid; gap: 6px; color: var(--tinta-2); }

/* ---------- pesan, status, roti ---------- */
.pesan { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; background: var(--biru-bg); color: #163a5b; font-size: 0.95rem; border: 1px solid #c9d9ea; }
.pesan .ikon { width: 20px; height: 20px; margin-top: 2px; }
.pesan p { margin: 0; }
.pesan p + p { margin-top: 6px; }
.pesan a { color: inherit; font-weight: 700; }
.pesan-peringatan { background: var(--kuning-bg); color: #5e3d00; border-color: #efd9a8; }
.pesan-berhasil { background: var(--hijau-bg); color: #1d4a2f; border-color: #c4dccb; }
.pesan-galat { background: var(--merah-bg); color: #6e1418; border-color: #ecc5c2; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; background: var(--embun-2); color: var(--tinta); }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status[data-status='baru'], .status[data-status='menunggu'] { background: var(--biru-bg); color: var(--biru); }
.status[data-status='ditinjau'] { background: var(--kuning-bg); color: var(--kuning); }
.status[data-status='diproses'] { background: #f3e8f7; color: #5b2a73; }
.status[data-status='selesai'], .status[data-status='diterima'], .status[data-status='terbit'] { background: var(--hijau-bg); color: var(--hijau); }
.status[data-status='ditutup'], .status[data-status='ditolak'] { background: var(--embun-2); color: var(--tinta-2); }
.status[data-status='draf'] { background: var(--kuning-bg); color: var(--kuning); }
.status[data-status='mendesak'] { background: var(--merah-bg); color: var(--daun); }

.roti-wadah { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 200; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.roti { pointer-events: auto; background: var(--tinta); color: #fff; padding: 14px 18px; border-radius: 10px; box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.5); font-size: 0.95rem; display: flex; gap: 10px; align-items: center; animation: roti-masuk 0.25s ease-out; }
.roti.galat { background: var(--daun-tua); }
.roti.berhasil { background: #1f4a31; }
@keyframes roti-masuk { from { opacity: 0; transform: translateY(10px); } }

.modal { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5); color: var(--tinta); }
.modal::backdrop { background: rgb(7 26 36 / 0.55); backdrop-filter: blur(2px); }
.modal-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--garis); }
.modal-kepala h2 { font-size: 1.3rem; }
.modal-isi { padding: 22px; overflow: auto; }
.modal-kaki { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--garis); background: var(--embun); }
.tombol-ikon { border: 0; background: none; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--tinta-2); }
.tombol-ikon:hover { background: var(--embun); color: var(--tinta); }

/* ---------- masuk ---------- */
.masuk-tata { min-height: calc(100vh - 120px); display: grid; grid-template-columns: 1fr 1fr; }
.masuk-panel { position: relative; overflow: hidden; background: var(--telaga); color: #e6d9cf; padding: clamp(32px, 6vw, 72px); display: flex; flex-direction: column; justify-content: flex-end; }
.masuk-panel::before { content: ''; position: absolute; inset: 0; opacity: 0.45; background: linear-gradient(rgb(0 0 0 / 0.2) 1px, transparent 1px) 0 0 / 28px 14px; }
.masuk-panel > * { position: relative; }
.masuk-panel h1 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.masuk-panel ul { padding-left: 1.1em; margin: 0; display: grid; gap: 8px; }
.masuk-panel li::marker { color: var(--sari); }
.masuk-form { padding: clamp(28px, 5vw, 64px); display: flex; align-items: center; justify-content: center; background: var(--embun); }
.masuk-kotak { width: min(440px, 100%); }
.tab-daftar { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--garis-2); margin-bottom: 26px; }
.tab-daftar button { border: 0; background: none; padding: 12px 8px; font-weight: 700; color: var(--tinta-2); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tab-daftar button[aria-selected='true'] { color: var(--daun); border-bottom-color: var(--daun); }
.pemisah { display: flex; align-items: center; gap: 14px; color: var(--tinta-2); font-size: 0.85rem; margin: 6px 0; }
.pemisah::before, .pemisah::after { content: ''; flex: 1; height: 1px; background: var(--garis-2); }
.tombol-google { background: #fff; border-color: var(--garis-2); color: var(--tinta); }
.tombol-google:hover { border-color: var(--tinta); }
.tombol-google .ikon { width: 20px; height: 20px; }
.sandi-medan { position: relative; }
.sandi-medan input { padding-right: 48px !important; }
.sandi-medan button { position: absolute; right: 4px; top: 50%; translate: 0 -50%; }

/* ---------- akun ---------- */
.akun-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.akun-identitas { display: flex; gap: 18px; align-items: center; }
.akun-identitas .inisial-besar { width: 64px; height: 64px; border-radius: 50%; background: var(--sari); color: var(--telaga); display: grid; place-items: center; font-family: var(--f-judul); font-weight: 800; font-size: 1.6rem; }
.akun-identitas h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: #fff; }
.akun-identitas p { margin: 4px 0 0; color: #d9cabf; }
.tab-akun { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 28px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tab-akun::-webkit-scrollbar { display: none; }
.tab-akun button { border: 0; background: none; padding: 14px 16px; font-weight: 700; color: var(--tinta-2); border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab-akun button[aria-selected='true'] { color: var(--daun); border-bottom-color: var(--daun); }
.tab-akun .hitung { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--embun-2); color: var(--tinta); font-size: 0.75rem; }
.daftar-laporan { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.butir-laporan { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 18px 20px; border: 1px solid var(--garis); border-radius: 10px; background: var(--kelopak); text-decoration: none; color: var(--tinta); cursor: pointer; text-align: left; width: 100%; }
.butir-laporan:hover { border-color: var(--tinta-2); color: var(--tinta); }
.butir-laporan h3 { font-size: 1.15rem; font-family: var(--f-badan); font-weight: 700; margin: 4px 0; }
.butir-laporan .kode { color: var(--tinta-2); font-size: 0.82rem; }
.butir-laporan .ada-balasan { color: var(--daun); font-weight: 700; font-size: 0.85rem; }

.lini { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lini li { padding: 16px 18px; border-radius: 10px; border: 1px solid var(--garis); background: var(--kelopak); }
.lini li.dari-admin { border-color: #c9dfd5; background: #f4f9f5; }
.lini .lini-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 0.85rem; color: var(--tinta-2); margin-bottom: 6px; }
.lini .lini-kepala b { color: var(--tinta); }
.lini p { margin: 0; white-space: pre-wrap; }
.rincian { display: grid; grid-template-columns: 180px 1fr; gap: 10px 20px; margin: 0; font-size: 0.95rem; }
.rincian dt { color: var(--tinta-2); font-weight: 600; }
.rincian dd { margin: 0; white-space: pre-wrap; word-break: break-word; }

/* ---------- kaki ---------- */
.kaki { background: var(--telaga-gelap); color: #bfb4a8; font-size: 0.95rem; }
.kaki-atas { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 64px 48px; }
.kaki-merek img { width: 58px; margin-bottom: 16px; }
.kaki-nama { font-family: var(--f-judul); font-weight: 700; font-size: 1.4rem; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; }
.kaki-wilayah { color: var(--sari-muda); font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; }
.kaki-motto { margin-bottom: 6px; }
.kaki-deva { font-family: var(--f-judul); color: var(--sari); font-size: 1.25rem; margin: 0; }
.kaki h2 { font-family: var(--f-badan); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sari); margin-bottom: 16px; }
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.kaki a { color: #e5ddd2; text-decoration: none; }
.kaki a:hover { color: var(--sari-muda); text-decoration: underline; }
.kaki address { font-style: normal; margin-bottom: 14px; line-height: 1.6; }
.kaki-kontak a { display: inline-flex; gap: 8px; align-items: center; word-break: break-all; }
.kaki-kontak .ikon { color: var(--sari); }
.kaki-sosial { display: grid; gap: 10px; margin-top: 16px; justify-items: start; }
.kaki-sosial a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.kaki-sosial .ikon { width: 20px; height: 20px; color: var(--sari); }
.kaki-bawah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.85rem; color: #918679; }
.kaki-bawah p { margin: 0; }

/* ---------- mode layanan tidak aktif / demo ---------- */
.pita-demo { background: var(--kuning-bg); color: #5e3d00; border-bottom: 1px solid #efd9a8; font-size: 0.88rem; padding: 8px 0; text-align: center; }
.pita-demo b { font-weight: 800; }

/* ---------- responsif ---------- */
@media (max-width: 1100px) {
  .tombol-menu { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--tinggi-kepala) 0 0 0; margin: 0; background: var(--kelopak); padding: 16px var(--tepi) 32px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.1, 1); visibility: hidden;
  }
  .nav.terbuka { transform: none; visibility: visible; }
  .nav-daftar { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-daftar > li { flex-wrap: wrap; border-bottom: 1px solid var(--garis); }
  .nav-daftar > li > a { flex: 1; padding: 16px 4px; font-size: 1.1rem; }
  .nav-daftar > li > a::after { display: none; }
  .nav-turun-tombol { padding: 12px; }
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; min-width: 0; width: 100%; padding: 0 0 12px; display: none; }
  .nav-turun.terbuka .nav-sub { display: block; }
  .nav-turun:hover .nav-sub { display: none; }
  .nav-turun.terbuka:hover .nav-sub { display: block; }
  .nav-seluler-aksi { display: grid; gap: 10px; }
  .kepala-aksi { margin-left: auto; }
  body.menu-terbuka { overflow: hidden; }
}
@media (max-width: 980px) {
  .kabar-portal { grid-template-columns: 1fr; }
  .kisi-tiga { grid-template-columns: 1fr 1fr; }
  .legal-kisi { grid-template-columns: 1fr 1fr; }
  .legal-kisi > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--garis); }
  .legal-kisi > div:first-child { grid-column: 1 / -1; border-top: 0; }
  .kaki-atas { grid-template-columns: 1fr 1fr; }
  .dua-kolom, .tata-layanan { grid-template-columns: 1fr; }
  .daftar-isi { display: none; }
  .samping { position: static; }
  .masuk-tata { grid-template-columns: 1fr; }
  .masuk-panel { min-height: 300px; }
}
@media (max-width: 640px) {
  .legal-kisi, .kaki-atas, .baris-medan, .baris-medan.tiga, .kisi-dua, .kisi-tiga { grid-template-columns: 1fr; }
  .sembunyi-hp { display: none !important; }
  .tautan-akun span { display: none; }
  .bagian-kepala { flex-direction: column; align-items: flex-start; }
  .kabar-baris { grid-template-columns: 96px 1fr; gap: 14px; }
  .garis-waktu::before { left: 0; }
  .garis-waktu li { grid-template-columns: 1fr; gap: 4px; padding-left: 24px; }
  .garis-waktu li::after { left: -4px; }
  .rincian { grid-template-columns: 1fr; gap: 2px; }
  .rincian dd { margin-bottom: 10px; }
  .butir-laporan { grid-template-columns: 1fr; }
  .tabel th, .tabel td { padding: 12px 14px; }
}

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

@media print {
  .kepala, .kaki, .tombol, .bagikan, .tab-akun, .pita-demo { display: none !important; }
  body { background: #fff; }
}

/* ---------- tambahan: layanan, akun, kontak ---------- */
.ikon-besar { width: 34px !important; height: 34px !important; color: var(--daun); }
.kartu-gerbang { display: grid; gap: 12px; justify-items: start; padding: clamp(24px, 4vw, 40px); }
.kartu-gerbang h2 { font-size: 1.6rem; }
.kartu-gerbang p { margin: 0; color: var(--tinta-2); max-width: 60ch; }
.kartu-gerbang .petunjuk { font-size: 0.88rem; }
.hasil-kirim { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 4vw, 44px); border-color: #c4dccb; }
.hasil-kirim h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.hasil-kirim p { margin: 0; max-width: 62ch; }
.hasil-ikon .ikon { width: 44px; height: 44px; color: var(--hijau); }
.nomor-tiket { font-size: clamp(1.6rem, 4vw, 2.4rem) !important; color: var(--telaga); letter-spacing: 0.06em; padding: 10px 18px; background: var(--embun); border: 1px dashed var(--garis-2); border-radius: 8px; }

.tanya-jawab { display: grid; gap: 0; }
.tanya-jawab details { border-bottom: 1px solid var(--garis); padding: 18px 0; }
.tanya-jawab details:first-child { border-top: 1px solid var(--garis); }
.tanya-jawab summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.tanya-jawab summary::-webkit-details-marker { display: none; }
.tanya-jawab summary::after { content: '+'; font-family: var(--f-judul); font-size: 1.5rem; line-height: 1; color: var(--daun); transition: transform 0.2s; }
.tanya-jawab details[open] summary::after { transform: rotate(45deg); }
.tanya-jawab details p { margin: 10px 0 0; color: var(--tinta-2); }

.kontak-kisi { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
.kontak-daftar { display: grid; gap: 14px; }
.kontak-butir { display: flex; gap: 18px; align-items: flex-start; }
.kontak-butir > .ikon { width: 26px; height: 26px; color: var(--daun); margin-top: 4px; }
.kontak-butir h2 { font-family: var(--f-badan); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 8px; }
.kontak-butir address { font-style: normal; margin-bottom: 8px; font-size: 1.05rem; }
.kontak-butir p { margin: 0 0 10px; }
.peta { border-radius: 12px; overflow: hidden; border: 1px solid var(--garis); background: var(--embun-2); aspect-ratio: 4 / 3.4; position: sticky; top: calc(var(--tinggi-kepala) + 24px); }
.peta iframe { width: 100%; height: 100%; border: 0; display: block; }

.langkah-status { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.langkah-status li { font-size: 0.8rem; color: var(--tinta-2); padding-top: 10px; border-top: 4px solid var(--embun-2); }
.langkah-status li.lewat { border-top-color: var(--sari); }
.langkah-status li.kini { border-top-color: var(--daun); color: var(--tinta); font-weight: 700; }
.langkah-tutup { display: flex; gap: 8px; align-items: center; color: var(--tinta-2); margin: 14px 0; }
.detail-laporan { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; margin-top: 12px; }
.detail-laporan > aside { position: sticky; top: calc(var(--tinggi-kepala) + 20px); }
.detail-laporan .rincian { grid-template-columns: 1fr; gap: 2px; }
.detail-laporan .rincian dd { margin-bottom: 12px; }
.detail-kepala { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--tinta-2); }
.detail-judul { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 10px; color: var(--telaga); }
.sub-judul { font-family: var(--f-badan); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); margin: 32px 0 12px; }
.teks-panjang { white-space: pre-wrap; background: var(--kelopak); border: 1px solid var(--garis); border-radius: 10px; padding: 18px 20px; margin: 0; word-break: break-word; }
.kisi-lampiran { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.kisi-lampiran button { width: 100%; border: 1px solid var(--garis); background: var(--kelopak); border-radius: 8px; padding: 6px; display: grid; gap: 6px; text-align: left; font-size: 0.8rem; color: var(--tinta-2); }
.kisi-lampiran button:hover { border-color: var(--tinta-2); }
.kisi-lampiran img, .kisi-lampiran .berkas-ikon { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--embun); display: grid; place-items: center; color: var(--daun); }
.kisi-lampiran span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lini-status { font-size: 0.85rem; color: var(--tinta-2); margin-bottom: 6px !important; }

@media (max-width: 980px) {
  .kontak-kisi, .detail-laporan { grid-template-columns: 1fr; }
  .peta, .detail-laporan > aside { position: static; }
}
@media (max-width: 640px) {
  .langkah-status li { font-size: 0.7rem; }
}

/* =========================================================
   Rupa Cahaya Teratai Putih
   Langit mengikuti jam di Mataram: Tri Sandya membagi hari umat
   Hindu Bali, dan nama yayasan sendiri berarti cahaya.
   ========================================================= */

:root[data-langit='subuh'] { --l-cahaya: #ffd9b444; --l-atas: #1c2b52; --l-tengah: #5d5288; --l-bawah: #e9a78e; --l-teks: #fff; --l-teks-2: #ece4ee; }
:root[data-langit='pagi'] { --l-cahaya: #fffdf0cc; --l-atas: #a9dbe2; --l-tengah: #dff1ea; --l-bawah: #fff0c2; --l-teks: #0f3437; --l-teks-2: #27505a; }
:root[data-langit='siang'] { --l-cahaya: #ffffffb0; --l-atas: #6cc3d1; --l-tengah: #c5e9e3; --l-bawah: #f3faf3; --l-teks: #0f3437; --l-teks-2: #1f4a50; }
:root[data-langit='senja'] { --l-cahaya: #ffc59a40; --l-atas: #232c5c; --l-tengah: #8e3f6b; --l-bawah: #ec8a47; --l-teks: #fff; --l-teks-2: #fbe9df; }
:root[data-langit='malam'] { --l-cahaya: #2a6a6866; --l-atas: #071a24; --l-tengah: #0e3038; --l-bawah: #16504f; --l-teks: #fbfcf9; --l-teks-2: #cfe0da; }

/* ---------- tombol ---------- */
.tombol { border-radius: 999px; font-weight: 600; font-size: 1rem; }
.tombol.besar { min-height: 54px; padding: 0.7em 1.7em; font-size: 1.06rem; }
.tombol-utama { background: var(--sari); color: var(--telaga); }
.tombol-utama:hover { background: #f7c53a; color: var(--telaga); }
.tombol-telaga { background: var(--telaga); color: #fff; }
.tombol-telaga:hover { background: var(--telaga-2); color: #fff; }
.tombol-garis-langit { border-color: currentColor; color: inherit; background: transparent; }
.tombol-garis-langit:hover { color: inherit; background: rgb(255 255 255 / 0.14); }
.tombol-garis-terang { border-color: rgb(255 255 255 / 0.5); color: #fff; background: transparent; }
.tombol-garis-terang:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / 0.08); }
.tombol-garis { border-color: var(--garis-2); }
.tombol-hapus { border-color: #e2b4b2; color: var(--merah); }
.tombol-hapus:hover { background: var(--merah-bg); color: var(--merah); }
.tombol-teks { color: var(--daun-tua); font-weight: 600; font-size: 1rem; }
.tombol-teks:hover { color: var(--telaga); }

/* ---------- kepala situs ---------- */
.kepala { position: sticky; top: 0; z-index: 40; background: var(--kelopak); color: var(--tinta); border-bottom: 1px solid var(--garis); transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s; }
.kepala.tergulir { box-shadow: 0 8px 26px -18px rgb(15 52 55 / 0.45); }
.kepala-isi { display: flex; align-items: center; gap: 28px; min-height: var(--tinggi-kepala); }
.merek { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.merek:hover { color: inherit; }
.merek-lambang { width: 48px; height: 48px; flex: none; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.12; }
.merek-sub { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.8; }
.merek-nama { font-family: var(--f-judul); font-weight: 500; font-size: 1.28rem; }
.nav-daftar > li > a { color: inherit; font-weight: 500; font-size: 1rem; }
.nav-daftar > li > a:hover, .nav-daftar > li > a[aria-current='page'] { color: inherit; }
.nav-daftar > li > a::after { background: var(--sari); height: 2px; }
.tautan-akun { color: inherit; font-weight: 500; font-size: 1rem; }
.tautan-akun:hover { color: inherit; opacity: 0.8; }
.tautan-akun .inisial { background: var(--telaga); color: var(--sari-muda); font-family: var(--f-badan); font-weight: 600; font-size: 0.8rem; }
.tombol-menu { border-color: currentColor; background: transparent; color: inherit; }
body.beranda .kepala:not(.tergulir):not(:has(.nav.terbuka)) { background: transparent; border-bottom-color: transparent; color: var(--l-teks); }

/* ---------- langit (pembuka beranda) ---------- */
.langit {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--tinggi-kepala));
  min-height: max(620px, 86svh);
  padding: calc(var(--tinggi-kepala) + 48px) var(--tepi) 96px;
  display: grid; place-items: center; text-align: center;
  color: var(--l-teks);
  background: linear-gradient(180deg, var(--l-atas) 0%, var(--l-tengah) 54%, var(--l-bawah) 100%);
}
.langit::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 62% at 50% 44%, var(--l-cahaya), transparent 72%); }
.langit-isi { max-width: 880px; }
.langit-label { margin: 0 0 16px; font-size: 0.98rem; color: var(--l-teks-2); }
.langit h1 { font-size: clamp(2.5rem, 5.6vw, 4.7rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.018em; }
.langit-semboyan { margin: 16px auto 0; display: grid; gap: 2px; }
.langit-semboyan i { font-family: var(--f-judul); font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.langit-semboyan small { font-size: 0.95rem; color: var(--l-teks-2); }
.langit-teks { margin: 20px auto 0; max-width: 60ch; font-size: 1.14rem; color: var(--l-teks-2); }
.langit-aksi { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.langit-waktu { position: absolute; left: var(--tepi); bottom: 18px; margin: 0; font-size: 0.92rem; color: var(--l-teks-2); }

/* ---------- kepala halaman dalam ---------- */
.kepala-halaman { position: relative; overflow: hidden; isolation: isolate; color: var(--l-teks); padding: clamp(40px, 6vw, 72px) 0 clamp(40px, 5vw, 60px); background: linear-gradient(180deg, var(--l-atas), var(--l-tengah) 120%); }
.kepala-halaman h1 { color: inherit; font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 400; letter-spacing: -0.014em; max-width: 24ch; }
.kepala-halaman p.lead { margin: 16px 0 0; font-size: 1.15rem; max-width: 60ch; color: var(--l-teks-2); }
.kepala-halaman .remah, .kepala-halaman .remah a { color: var(--l-teks-2); }

/* ---------- bagian ---------- */
.label { display: block; font-family: var(--f-judul); font-style: italic; font-weight: 400; font-size: 1.14rem; letter-spacing: 0; text-transform: none; color: var(--daun-tua); margin: 0 0 8px; }
.label::before { content: none; }
.judul-bagian { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 400; letter-spacing: -0.012em; line-height: 1.14; }
.bagian-embun { background: var(--embun); }
.bagian-kepala p:not(.label) { max-width: 56ch; color: var(--tinta-2); margin: 12px 0 0; }
.dua-lajur { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.lajur-kiri { position: sticky; top: calc(var(--tinggi-kepala) + 32px); display: grid; gap: 12px; justify-items: start; }
.lajur-kiri p:not(.label) { color: var(--tinta-2); margin: 0; }
.catatan-kecil { font-size: 0.95rem; color: var(--tinta-2); margin: 18px 0 0; max-width: 62ch; }

.daftar-layanan { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--garis); }
.daftar-layanan a { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--garis); text-decoration: none; color: var(--tinta); }
.daftar-layanan b { display: block; font-family: var(--f-judul); font-weight: 400; font-size: clamp(1.5rem, 2.5vw, 1.95rem); line-height: 1.2; letter-spacing: -0.01em; transition: color 0.2s; }
.daftar-layanan small { display: block; margin-top: 4px; font-size: 1rem; color: var(--tinta-2); }
.daftar-layanan .ikon { width: 24px; height: 24px; color: var(--daun-tua); transition: translate 0.2s; }
.daftar-layanan a:hover { color: var(--tinta); }
.daftar-layanan a:hover b { color: var(--daun-tua); }
.daftar-layanan a:hover .ikon { translate: 5px 0; }

/* ---------- purnama ---------- */
.purnama { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--telaga-gelap); color: #dbe7e2; }
.purnama img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.purnama-isi { padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); align-self: center; display: grid; gap: 14px; justify-items: start; }
.purnama .label { color: var(--sari-muda); }
.purnama h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 400; letter-spacing: -0.016em; line-height: 1.12; }
.purnama p span { color: var(--sari-muda); font-weight: 600; white-space: nowrap; }
.purnama p:not(.label) { margin: 0; }

/* ---------- dokumentasi kegiatan: foto utuh, digeser ke samping ---------- */
.geser-jalur {
  display: flex; gap: 16px; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(var(--tepi) * -1); padding-inline: var(--tepi); scroll-padding-inline: var(--tepi);
}
.geser-jalur::-webkit-scrollbar { display: none; }
.geser-jalur figure { flex: none; width: min-content; margin: 0; scroll-snap-align: start; }
.geser-jalur img { display: block; width: auto; max-width: none; height: clamp(130px, 37vw, 470px); border-radius: 4px; }
.geser-jalur figcaption { font-size: 0.97rem; color: var(--tinta-2); margin-top: 10px; }
.geser-kendali { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.geser-kendali[hidden] { display: none; }
.geser-hitung { min-width: 3.2em; text-align: center; font-size: 0.95rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.geser-tombol { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1.5px solid var(--garis-2); border-radius: 50%; background: var(--kelopak); color: var(--telaga); cursor: pointer; transition: background-color 0.18s, color 0.18s, opacity 0.18s; }
.geser-tombol:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .geser-tombol:not(:disabled):hover { background: var(--telaga); color: var(--kelopak); } }

/* ---------- pita kain (putih-kuning pura) ---------- */
.pita-kain { background: var(--sari); color: var(--telaga); }
.pita-kain-isi { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; padding-block: clamp(40px, 5vw, 64px); }
.pita-kain h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 400; letter-spacing: -0.014em; }
.pita-kain p { margin: 8px 0 0; font-size: 1.1rem; max-width: 46ch; }
.pita-kain .tombol-garis { border-color: var(--telaga); color: var(--telaga); }
.pita-kain .tombol-garis:hover { background: rgb(15 52 55 / 0.08); color: var(--telaga); }

/* ---------- testimoni ---------- */
.kisi-testimoni { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.kartu-testimoni { margin: 0; background: var(--kelopak); border: 1px solid var(--garis); border-radius: 8px; padding: 24px; display: grid; gap: 12px; }
.kartu-testimoni img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.kartu-testimoni blockquote { margin: 0; font-family: var(--f-judul); font-size: 1.22rem; line-height: 1.45; white-space: pre-wrap; }
.kartu-testimoni figcaption { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 0.95rem; color: var(--tinta-2); }
.kartu-testimoni figcaption b { color: var(--tinta); font-weight: 600; }
.kartu-testimoni .kat { flex-basis: 100%; }
.bintang { display: inline-flex; gap: 1px; vertical-align: -3px; }
.bintang i { color: var(--garis-2); }
.bintang i.isi { color: var(--sari); }
.bintang i.isi svg { fill: currentColor; }
.bintang .ikon { width: 18px; height: 18px; }
.ajakan-testimoni { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; padding: 26px 0; border-block: 1px solid var(--garis-2); }
.ajakan-testimoni p { margin: 0; max-width: 62ch; color: var(--tinta-2); }
.tata-tulis { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.tata-tulis > div:first-child { position: sticky; top: calc(var(--tinggi-kepala) + 32px); }
.daftar-tenang { margin: 20px 0 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--tinta-2); }
.pilih-bintang { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.pilih-bintang label { cursor: pointer; color: var(--garis-2); padding: 2px; }
.pilih-bintang input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilih-bintang .ikon { width: 34px; height: 34px; }
.pilih-bintang label:has(input:checked), .pilih-bintang label:has(input:checked) ~ label, .pilih-bintang label:hover, .pilih-bintang label:hover ~ label { color: var(--sari); }
.pilih-bintang label:has(input:checked) svg, .pilih-bintang label:has(input:checked) ~ label svg, .pilih-bintang label:hover svg, .pilih-bintang label:hover ~ label svg { fill: currentColor; }
.pilih-bintang label:has(input:focus-visible) { outline: 3px solid var(--sari); outline-offset: 1px; border-radius: 4px; }

/* ---------- booking ---------- */
.pita-tanggal { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.kartu-tanggal { position: relative; cursor: pointer; }
.kartu-tanggal input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kartu-tanggal span { display: grid; justify-items: center; padding: 10px 4px; border: 1.5px solid var(--garis-2); border-radius: 8px; background: #fff; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.kartu-tanggal small { font-size: 0.8rem; color: var(--tinta-2); }
.kartu-tanggal b { font-family: var(--f-judul); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
.kartu-tanggal:hover span { border-color: var(--tinta-2); }
.kartu-tanggal input:checked + span { background: var(--telaga); border-color: var(--telaga); color: #fff; }
.kartu-tanggal input:checked + span small { color: #cfe0da; }
.kartu-tanggal input:focus-visible + span { outline: 3px solid var(--sari); outline-offset: 2px; }
.alur-pendek { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 0.97rem; color: var(--tinta-2); }
.alur-pendek li::marker { font-family: var(--f-judul); color: var(--daun-tua); }

/* ---------- tentang & layanan ---------- */
.makna { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.makna dt { font-family: var(--f-judul); font-size: 1.3rem; line-height: 1.25; }
.makna dd { margin: 4px 0 0; color: var(--tinta-2); }
.program { margin: 0; display: grid; gap: 4px; }
.program dt { font-weight: 600; margin-top: 12px; }
.program dt:first-child { margin-top: 0; }
.program dd { margin: 0; color: var(--tinta-2); font-size: 0.98rem; }
.bidang-tiga h3 { font-size: 1.6rem; font-weight: 400; margin-bottom: 14px; }
.kutipan-visi { font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.3; color: var(--telaga); border-left: 0; padding-left: 0; }
.semboyan-kotak { background: transparent; border: 0; border-top: 1px solid var(--garis); border-radius: 0; padding: 22px 0 0; margin-top: 32px; }
.semboyan-kotak .translit { font-size: 1.4rem; margin-bottom: 4px; }
.pengurus { display: block; padding: 16px 18px; }
.pengurus b { font-family: var(--f-badan); font-weight: 600; font-size: 1rem; }
.pengurus.utama { border-color: var(--sari); background: var(--kelopak); }
.garis-waktu time { font-weight: 400; color: var(--daun-tua); }
.garis-waktu li::after { background: var(--sari); }
.garis-waktu h3 { font-weight: 600; }
.blok > h2 { font-weight: 400; letter-spacing: -0.012em; }
.kartu h3 { font-weight: 500; }

/* ---------- kaki ---------- */
.kaki { background: var(--telaga-gelap); color: #b9cbc6; font-size: 1rem; }
.kaki-lambang { width: 84px; height: 84px; color: var(--kelopak); margin-bottom: 14px; }
.kaki-nama { font-family: var(--f-judul); font-weight: 400; font-size: 1.45rem; color: #fff; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.kaki-motto { color: var(--sari-muda); font-family: var(--f-judul); margin: 0; }
.kaki h2 { font-family: var(--f-judul); font-style: italic; font-weight: 400; font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--sari-muda); }
.kaki a { color: #e6efeb; }
.kaki a:hover { color: var(--sari-muda); }
.kaki-kontak .ikon, .kaki-sosial .ikon { color: var(--sari); }
.kaki-bawah { color: #8fa6a1; }

/* ---------- masuk ---------- */
.masuk-panel { background: linear-gradient(180deg, var(--l-atas), var(--l-tengah) 70%, var(--l-bawah)); color: var(--l-teks); justify-content: flex-end; gap: 12px; }
.masuk-panel::before { content: none; }
.masuk-panel h1 { color: inherit; font-weight: 300; }
.masuk-panel li::marker { color: currentColor; }
.masuk-surya { width: min(260px, 60%); height: auto; aspect-ratio: 1; margin-bottom: auto; color: inherit; }
.masuk-form { background: var(--kelopak); }

/* ---------- akun ---------- */
.akun-identitas h1 { color: inherit; font-weight: 300; }
.akun-identitas p { color: var(--l-teks-2); }
.akun-identitas .inisial-besar { background: var(--sari); color: var(--telaga); font-family: var(--f-badan); font-weight: 600; font-size: 1.3rem; }
.akun-kepala { position: relative; }

/* ---------- warna peringatan ---------- */
.medan .wajib, .medan-galat { color: var(--merah); }
.medan [aria-invalid='true'] { border-color: var(--merah); background: #fff8f7; }
[role='radiogroup'][aria-invalid='true'] { outline: 2px solid var(--merah); outline-offset: 4px; border-radius: 8px; }
.roti.galat { background: var(--merah); }
.roti.berhasil { background: var(--telaga-2); }
.status[data-status='terjadwal'], .status[data-status='tampil'] { background: var(--hijau-bg); color: var(--hijau); }
.status[data-status='batal'] { background: var(--embun-2); color: var(--tinta-2); }
.status[data-status='menunggu'] { background: var(--kuning-bg); color: var(--kuning); }
.langkah-status { grid-template-columns: repeat(3, 1fr); }
.langkah-status li.lewat { border-top-color: var(--sari); }
.langkah-status li.kini { border-top-color: var(--daun-tua); }
.sampul-kosong { background: var(--telaga); color: var(--sari-muda); }
.sampul-kosong .sampul-kat { color: var(--sari-muda); letter-spacing: 0; text-transform: none; font-family: var(--f-judul); font-style: italic; font-size: 0.98rem; font-weight: 400; }
.kat { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--daun-tua); }
.nomor-tiket { color: var(--telaga); font-family: var(--f-badan); font-weight: 600; font-variant-numeric: tabular-nums; }
.kode { font-family: var(--f-badan); font-weight: 500; font-size: 0.95em; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.kosong { border-style: solid; border-width: 1px; border-color: var(--garis); background: transparent; }
.kosong h3 { font-weight: 400; }

@media (max-width: 1100px) {
  .nav { color: var(--tinta); background: var(--kelopak); }
}
@media (max-width: 980px) {
  .dua-lajur, .tata-tulis, .purnama { grid-template-columns: 1fr; }
  .lajur-kiri, .tata-tulis > div:first-child { position: static; }
  .purnama img { min-height: 260px; aspect-ratio: 16 / 9; height: auto; }
  .makna { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --tinggi-kepala: 68px; }
  body { font-size: 1.0625rem; }
  .merek-lambang { width: 42px; height: 42px; }
  .merek-nama { font-size: 1.1rem; }
  .langit { min-height: 0; padding-top: calc(var(--tinggi-kepala) + 36px); padding-bottom: 64px; }
  .langit-waktu { display: none; }
  .langit h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .langit-teks { font-size: 1.05rem; }
  .tombol.besar { width: 100%; }
  .pita-tanggal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .daftar-layanan b { font-size: 1.45rem; }
}

/* ---------- pemilih bahasa & terjemahan Google ---------- */
.pilih-bahasa { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-size: 1rem; font-weight: 500; }
.pilih-bahasa select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 6px 2px; max-width: 96px; cursor: pointer; }
.pilih-bahasa select:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; border-radius: 4px; }
.pilih-bahasa option { color: var(--tinta); background: #fff; }
.bahasa-seluler { min-height: 46px; justify-content: center; border: 1.5px solid var(--garis-2); border-radius: 999px; }
.bahasa-seluler select { max-width: none; }
#terjemah-wadah { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
@media (max-width: 1100px) {
  .bahasa-lebar { display: none; }
}
@media (min-width: 1101px) and (max-width: 1240px) {
  .tautan-akun span { display: none; }
}

/* ---------- pengenalan yayasan di beranda ---------- */
.profil-kisi { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 64px); align-items: start; }
.profil-judul p:not(.label), .profil-teks p { color: var(--tinta-2); margin: 14px 0 0; }
.profil-teks p:first-child { margin-top: 0; }
.profil-teks .tombol-teks { margin-top: 18px; }
.fakta { margin: clamp(32px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--garis); }
.fakta > div { padding: 18px 20px; border-left: 1px solid var(--garis); }
.fakta > div:first-child { border-left: 0; padding-left: 0; }
.fakta dt { font-family: var(--f-judul); font-style: italic; color: var(--daun-tua); font-size: 1.08rem; }
.fakta dd { margin: 2px 0 0; font-weight: 500; }
.visi-kisi { align-items: start; }
.nilai-daftar { list-style: none; margin: 0; padding: 0; }
.nilai-daftar li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--garis-2); align-items: baseline; }
.nilai-daftar li:first-child { border-top: 1px solid var(--garis-2); }
.nilai-daftar b { font-family: var(--f-judul); font-weight: 500; font-size: 1.2rem; color: var(--telaga); }
.nilai-daftar span { color: var(--tinta-2); }
.kisi-bidang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bidang { background: var(--kelopak); border: 1px solid var(--garis); border-radius: 8px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.bidang .ikon { width: 28px; height: 28px; color: var(--daun-tua); }
.bidang h3 { font-size: 1.45rem; font-weight: 500; }
.bidang ul { margin: 0; padding-left: 1.1em; color: var(--tinta-2); display: grid; gap: 4px; }
.bidang ul li::marker { color: var(--sari-tua); }
@media (max-width: 980px) {
  .profil-kisi, .visi-kisi, .kisi-bidang { grid-template-columns: 1fr; }
  .profil-kisi { row-gap: 14px; }
  .fakta { grid-template-columns: 1fr 1fr; }
  .fakta > div { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .fakta { grid-template-columns: 1fr; }
  .fakta > div { padding: 12px 0; }
  .nilai-daftar li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- gerak: cahaya dan riak telaga di pembuka, bagian muncul saat digulir ---------- */
.riak { position: absolute; left: 50%; top: 46%; width: min(86vw, 660px); aspect-ratio: 1; border: 1px solid var(--l-teks); border-radius: 50%; translate: -50% -50%; opacity: 0; z-index: -1; pointer-events: none; }
@keyframes naik { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes cahaya { from { opacity: 0.7; scale: 0.9; translate: -3% 2%; } to { opacity: 1; scale: 1.14; translate: 3% -2%; } }
@keyframes riak { 0% { opacity: 0; scale: 0.3; } 16% { opacity: 0.2; } 100% { opacity: 0; scale: 2; } }
.m { opacity: 0; translate: 0 22px; transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.1, 1) var(--tunda, 0ms), translate 0.75s cubic-bezier(0.2, 0.7, 0.1, 1) var(--tunda, 0ms); }
.m.tampak { opacity: 1; translate: 0 0; }
.tombol-utama, .tombol-telaga { transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.2s, box-shadow 0.2s; }
.bidang, .kartu-testimoni, .pengurus { transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
@media (hover: hover) {
  .tombol-utama:hover, .tombol-telaga:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgb(15 52 55 / 0.55); }
  .bidang:hover, .kartu-testimoni:hover, .pengurus:hover { transform: translateY(-3px); box-shadow: var(--bayang); border-color: var(--garis-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .langit::before { animation: cahaya 16s ease-in-out infinite alternate; }
  .riak { animation: riak 15s linear infinite; }
  .riak:nth-of-type(2) { animation-delay: 5s; }
  .riak:nth-of-type(3) { animation-delay: 10s; }
  .langit-isi > *, .kepala-halaman .wadah > * { animation: naik 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
  .langit-isi > :nth-child(2), .kepala-halaman .wadah > :nth-child(2) { animation-delay: 0.1s; }
  .langit-isi > :nth-child(3), .kepala-halaman .wadah > :nth-child(3) { animation-delay: 0.2s; }
  .langit-isi > :nth-child(4), .kepala-halaman .wadah > :nth-child(4) { animation-delay: 0.3s; }
  .langit-isi > :nth-child(5) { animation-delay: 0.4s; }
}
@media print {
  .m { opacity: 1 !important; translate: none !important; }
  .riak { display: none; }
}
#tentang-yayasan { scroll-margin-top: 40px; }
.baca-sampul.sampul-kosong { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
@media (max-width: 350px) { .tautan-akun { display: none; } }

/* ---------- donasi ---------- */
.rekening { display: grid; gap: 6px; justify-items: start; align-content: start; }
.rekening-bank { margin: 0; font-weight: 600; color: var(--daun-tua); }
.rekening-nomor { margin: 0; font-family: var(--f-judul); font-size: clamp(1.7rem, 3.4vw, 2.1rem); line-height: 1.2; color: var(--telaga); font-variant-numeric: lining-nums tabular-nums; }
.rekening-nama { margin: 0 0 10px; color: var(--tinta-2); }
.donasi-ringkas { display: grid; gap: 18px; justify-items: start; max-width: 62ch; }
.donasi-ringkas p { margin: 0; color: var(--tinta-2); }
@media (min-width: 1101px) and (max-width: 1200px) {
  .nav-daftar > li > a { padding-inline: 8px; }
  .nav-daftar > li > a::after { left: 8px; right: 8px; }
}

/* ---------- pilihan ajaran: satu panel terbuka, panel lain menyempit ---------- */
.pilih { container-type: inline-size; display: flex; gap: 8px; margin-top: clamp(32px, 4vw, 48px); aspect-ratio: 1200 / 418; }
.pilih-butir {
  --lebar-aktif: calc((100cqw - 32px) * 7 / 11); --lebar-sempit: calc((100cqw - 32px) / 11); --ikon: 34px;
  position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: var(--telaga); color: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: flex-grow 0.7s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.pilih-butir.aktif { flex-grow: 7; cursor: default; }
.pilih-butir:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.pilih-butir img {
  position: absolute; top: 0; left: 50%; translate: -50% 0; width: var(--lebar-aktif); max-width: none; height: 100%;
  object-fit: cover; filter: saturate(0.8) brightness(0.72); transition: filter 0.7s ease;
}
.pilih-butir.aktif img { filter: none; }
.pilih-butir::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to top, rgb(8 30 32 / 0.85), transparent); opacity: 0; transition: opacity 0.7s ease; }
.pilih-butir.aktif::after { opacity: 1; }
.pilih-label { position: absolute; z-index: 1; left: calc((var(--lebar-sempit) - var(--ikon)) / 2); bottom: 13px; display: flex; align-items: center; gap: 10px; }
.pilih-ikon { flex: none; width: var(--ikon); height: var(--ikon); display: grid; place-items: center; border-radius: 50%; background: rgb(15 52 55 / 0.82); border: 1px solid rgb(255 255 255 / 0.32); }
.pilih-teks { flex: none; display: grid; gap: 2px; width: calc(var(--lebar-aktif) - var(--lebar-sempit) - 40px); opacity: 0; translate: 25px 0; transition: opacity 0.7s ease, translate 0.7s ease; }
.pilih-butir.aktif .pilih-teks { opacity: 1; translate: 0 0; }
.pilih-ikon .ikon { width: 16px; height: 16px; }
.pilih-teks b { font-family: var(--f-judul); font-weight: 500; font-size: 1.1rem; line-height: 1.2; }
.pilih-teks small { font-size: 0.84rem; color: rgb(255 255 255 / 0.86); }
.pilih.m .pilih-butir { opacity: 0; translate: -48px 0; }
.pilih.m.tampak .pilih-butir { opacity: 1; translate: 0 0; transition: opacity 0.6s ease, translate 0.6s ease; }
.pilih.m.tampak .pilih-butir:nth-child(2) { transition-delay: 120ms; }
.pilih.m.tampak .pilih-butir:nth-child(3) { transition-delay: 240ms; }
.pilih.m.tampak .pilih-butir:nth-child(4) { transition-delay: 360ms; }
.pilih.m.tampak .pilih-butir:nth-child(5) { transition-delay: 480ms; }
@media (hover: hover) {
  .pilih-butir:not(.aktif):hover img { filter: saturate(1) brightness(0.92); }
}
@media (max-width: 640px) {
  .pilih { gap: 5px; aspect-ratio: 100 / 76; max-height: 340px; }
  .pilih-butir { --lebar-aktif: calc((100cqw - 20px) * 7 / 11); --lebar-sempit: calc((100cqw - 20px) / 11); --ikon: 20px; }
  .pilih-butir::after { height: 52%; }
  .pilih-label { bottom: 8px; gap: 6px; align-items: flex-end; }
  .pilih-butir.aktif .pilih-label { left: 8px; }
  .pilih-ikon .ikon { width: 11px; height: 11px; }
  .pilih-teks { width: calc(var(--lebar-aktif) - var(--ikon) - 24px); }
  .pilih-teks b { font-size: 0.86rem; }
  .pilih-teks small { font-size: 0.7rem; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .pilih-butir, .pilih-butir img, .pilih-butir::after, .pilih-teks { transition: none; }
}