/* =====================================================================
   KACA (3.85.0) — glass ala iOS, bersih. Tahap 1 (token + komponen), 2 (beranda), 3-6 (halaman lain lewat body.kaca-halaman).
   Dimuat SETELAH biru.css. Header TIDAK disentuh. Untuk kembali: copot <link> kaca.css dan kaca.js.
   Aturan: glass hanya di atas latar gelap/foto; di atas putih pakai kartu putih bersih.
   ===================================================================== */
:root {
  --k-blur: 20px;
  --k-sat: 160%;
  --k-kaca: rgba(255, 255, 255, 0.14);
  --k-kaca-terang: rgba(255, 255, 255, 0.72);
  --k-tepi: rgba(255, 255, 255, 0.34);
  --k-kilau: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  --k-bayang: 0 1px 2px rgba(11, 29, 46, 0.06), 0 14px 32px -16px rgba(20, 53, 84, 0.32);
  --k-bayang-naik: 0 2px 4px rgba(11, 29, 46, 0.08), 0 28px 48px -20px rgba(20, 53, 84, 0.42);
  --k-r: 24px;
  --k-pegas: cubic-bezier(0.34, 1.4, 0.64, 1);
  --k-halus: cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* ---------- Komponen glass (dipakai di atas gelap / foto) ---------- */
.k-kaca {
  background: var(--k-kaca);
  border: 1px solid var(--k-tepi);
  box-shadow: var(--k-kilau), 0 12px 30px -16px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
  color: #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-kaca { background: rgba(20, 53, 84, 0.78); }
}
.lite .k-kaca { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 53, 84, 0.78); }

/* ---------- HERO (di bawah header, header tidak diubah) ---------- */
body.beranda .hero-kicker {
  background: var(--k-kaca); color: #fff; border: 1px solid var(--k-tepi);
  box-shadow: var(--k-kilau); -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
body.beranda .hero-kicker .titik { background: #7fd1a8; box-shadow: 0 0 0 4px rgba(127, 209, 168, 0.25); }
body.beranda .hero-lokasi {
  background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
body.beranda .hero .btn { border-radius: 999px; transition: transform .35s var(--k-pegas), box-shadow .3s, background .25s; }
body.beranda .hero .btn:hover { transform: translateY(-2px) scale(1.02); }
body.beranda .hero .btn:active { transform: scale(0.97); transition-duration: .1s; }
body.beranda .hero .btn-garis {
  background: var(--k-kaca); border: 1px solid var(--k-tepi) !important; box-shadow: var(--k-kilau);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
body.beranda .hero .btn-garis:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- Pita angka (latar gelap): tile glass ---------- */
body.beranda .angka-grid { gap: 14px; }
body.beranda .angka-item {
  padding: 22px 12px; border-radius: var(--k-r); background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
  transition: transform .45s var(--k-pegas), background .3s;
}
body.beranda .angka-item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.2); }

/* ---------- Kartu di atas putih: bersih, bukan glass ---------- */
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu, .apl-kartu, .guru-kartu, .testi-kartu, .agenda-item, .bagan-kartu) {
  background: #fff; border: 1px solid rgba(20, 53, 84, 0.1); border-radius: var(--k-r);
  box-shadow: var(--k-bayang); overflow: hidden;
  transition: transform .5s var(--k-pegas), box-shadow .35s var(--k-halus), border-color .3s;
}
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu, .apl-kartu, .guru-kartu, .testi-kartu, .agenda-item, .bagan-kartu):hover {
  transform: translateY(-6px); box-shadow: var(--k-bayang-naik); border-color: rgba(30, 77, 123, 0.28);
}
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu, .apl-kartu, .guru-kartu, .testi-kartu, .agenda-item):active { transform: translateY(-2px) scale(0.985); transition-duration: .1s; }
:is(body.beranda, body.kaca-halaman) .eks-kartu { border-radius: var(--k-r); border-color: rgba(20, 53, 84, 0.1); box-shadow: var(--k-bayang); }
:is(body.beranda, body.kaca-halaman) .eks-kartu:hover { border-color: rgba(30, 77, 123, 0.28); box-shadow: var(--k-bayang-naik); }
:is(body.beranda, body.kaca-halaman) :is(.jur-media, .fas-media, .eks-media) img { transition: transform .9s var(--k-halus); }
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu):hover :is(.jur-media, .fas-media) img { transform: scale(1.06); }

/* kilau lembut mengikuti jari/kursor (diisi kaca.js) */
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu, .apl-kartu, .guru-kartu)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(58, 122, 181, 0.12), transparent 70%);
}
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu, .apl-kartu, .guru-kartu) { position: relative; }
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu, .apl-kartu, .guru-kartu):hover::after { opacity: 1; }

/* ---------- Badge di atas foto: glass ---------- */
:is(body.beranda, body.kaca-halaman) :is(.jur-ikon, .fas-ikon) { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }

/* ---------- Judul seksi & tombol umum ---------- */
:is(body.beranda, body.kaca-halaman) .seksi-kepala h2 { letter-spacing: -0.02em; }
:is(body.beranda, body.kaca-halaman) .seksi .btn { border-radius: 999px; transition: transform .35s var(--k-pegas), box-shadow .3s; }
:is(body.beranda, body.kaca-halaman) .seksi .btn:hover { transform: translateY(-2px); }
:is(body.beranda, body.kaca-halaman) .seksi .btn:active { transform: scale(0.97); }

/* ---------- CTA penutup (latar gelap): panel glass ---------- */
:is(body.beranda, body.kaca-halaman) .cta .wrap {
  padding: clamp(24px, 5vw, 48px); border-radius: calc(var(--k-r) + 8px);
  background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}

/* ---------- Reveal saat scroll (hanya aktif jika JS jalan; pakai animation supaya tidak bentrok dengan transition kartu) ---------- */
.k-js .k-rv { opacity: 0; }
.k-js .k-rv.k-in { animation: k-naik .85s var(--k-halus) both; animation-delay: var(--k-d, 0ms); }
.k-js .k-rv[data-k-rv="zoom"].k-in { animation-name: k-zoom; animation-duration: .9s; animation-timing-function: var(--k-pegas); }
.k-js .k-rv[data-k-rv="kiri"].k-in { animation-name: k-kiri; }
.k-js .k-rv[data-k-rv="kanan"].k-in { animation-name: k-kanan; }
@keyframes k-naik { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes k-zoom { from { opacity: 0; translate: 0 22px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes k-kiri { from { opacity: 0; translate: -36px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes k-kanan { from { opacity: 0; translate: 36px 0; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .k-js .k-rv { opacity: 1; }
  .k-js .k-rv.k-in { animation: none; }
  :is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu, .apl-kartu, .guru-kartu, .testi-kartu, .agenda-item, .angka-item, .hero .btn, .baris-daftar .baris):hover { transform: none; }
}
@media (max-width: 640px) {
  :root { --k-blur: 14px; --k-r: 20px; }
}

/* =====================================================================
   TAHAP 3+ — halaman dalam (scope: body.kaca-halaman). Header tidak disentuh.
   ===================================================================== */

/* ---------- Page-hero: breadcrumb & pill glass di atas latar navy ---------- */
body.kaca-halaman .page-hero .crumb {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; margin-bottom: 20px;
  border-radius: 999px; background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau); color: #fff;
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
body.kaca-halaman .page-hero .crumb a { display: inline-flex; align-items: center; min-height: 44px; }
body.kaca-halaman .page-hero h1 { letter-spacing: -0.02em; }
body.kaca-halaman .page-hero .lede { max-width: 40rem; }
body.kaca-halaman .page-hero .daftar-tahun {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; color: #fff; background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
body.kaca-halaman .page-hero .daftar-tahun[hidden] { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.kaca-halaman .page-hero :is(.crumb, .daftar-tahun) { background: rgba(20, 53, 84, 0.78); }
}
.lite body.kaca-halaman .page-hero :is(.crumb, .daftar-tahun) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 53, 84, 0.78); }

/* ---------- Bar tab sticky (glass terang, dibangun kaca.js dari [data-k-bagian]) ---------- */
.k-tab {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255, 255, 255, 0.72); border-bottom: 1px solid rgba(20, 53, 84, 0.1);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
.k-tab[hidden] { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .k-tab { background: rgba(255, 255, 255, 0.97); } }
.lite .k-tab { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.97); }
.k-tab-jalur { position: relative; display: flex; gap: 4px; padding: 8px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.k-tab-jalur::-webkit-scrollbar { display: none; }
.k-tab a {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; font-size: 0.9375rem; font-weight: 600; color: var(--biru-tua); text-decoration: none;
  transition: color .25s, transform .3s var(--k-pegas);
}
.k-tab a:hover { color: var(--biru); }
.k-tab a:active { transform: scale(0.97); }
.k-tab a[aria-current="true"] { color: #fff; }
.k-tab a:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: -3px; }
.k-tab-ind {
  position: absolute; z-index: 0; left: 0; top: 8px; height: 44px; width: var(--w, 0px); border-radius: 999px; opacity: 0; pointer-events: none;
  background: var(--biru); box-shadow: 0 8px 18px -10px rgba(20, 53, 84, 0.7);
  transform: translateX(var(--x, 0px)); transition: transform .5s var(--k-pegas), width .4s var(--k-halus), opacity .2s;
}
.k-tab-ind.siap { opacity: 1; }
[data-k-bagian] { scroll-margin-top: calc(var(--header-h) + 60px); }

/* ---------- Kartu daftar (program, nilai, dll) ---------- */
body.kaca-halaman .baris-daftar .baris {
  background: #fff; border: 1px solid rgba(20, 53, 84, 0.1); border-radius: var(--k-r); box-shadow: var(--k-bayang);
  transition: transform .5s var(--k-pegas), box-shadow .35s var(--k-halus), border-color .3s;
}
body.kaca-halaman .baris-daftar .baris:hover { transform: translateY(-6px); box-shadow: var(--k-bayang-naik); border-color: rgba(30, 77, 123, 0.28); }
body.kaca-halaman .baris-daftar .baris:active { transform: translateY(-2px) scale(0.985); transition-duration: .1s; }
body.kaca-halaman .baris-daftar .baris .icon { transition: transform .5s var(--k-pegas); }
body.kaca-halaman .baris-daftar .baris:hover .icon { transform: scale(1.08) rotate(-4deg); }

/* panel samping (penekanan, data pokok): kartu putih bersih */
body.kaca-halaman .data-pokok { border-radius: var(--k-r); border: 1px solid rgba(20, 53, 84, 0.1); box-shadow: var(--k-bayang); background: #fff; }
body.kaca-halaman .data-pokok h3 { background: var(--biru-tua); }

/* ---------- Filter / pencarian tabel ---------- */
body.kaca-halaman .alat .chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(20, 53, 84, 0.16); background: #fff; color: var(--biru-tua); font-weight: 600; transition: transform .3s var(--k-pegas), background .25s, color .25s, border-color .25s; }
body.kaca-halaman .alat .chip:hover { border-color: var(--biru); }
body.kaca-halaman .alat .chip:active { transform: scale(0.96); }
body.kaca-halaman .alat .chip[aria-pressed="true"] { background: var(--biru); border-color: var(--biru); color: #fff; }
body.kaca-halaman .alat .cari input { min-height: 52px; border-radius: 999px; border: 1px solid rgba(20, 53, 84, 0.16); background: #fff; }
body.kaca-halaman .alat .cari input:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: 2px; }
body.kaca-halaman .tabel-bungkus { border-radius: var(--k-r); border: 1px solid rgba(20, 53, 84, 0.1); box-shadow: var(--k-bayang); }
body.kaca-halaman .tabel th { background: var(--biru-tua); }
body.kaca-halaman .tabel tbody tr { transition: background .2s; }
body.kaca-halaman .tabel tbody tr:hover { background: var(--biru-pucat); }

/* ---------- Jurusan: detail lipat (akordeon dibuat kaca.js) ---------- */
body.kaca-halaman .jur-grid[data-k-akordeon] { align-items: start; }
.k-detail-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; margin-top: 4px;
  border: 1px solid rgba(20, 53, 84, 0.16); border-radius: 999px; background: var(--biru-pucat); color: var(--biru-tua); font: 600 0.9375rem var(--font-isi); cursor: pointer;
  transition: background .25s, transform .3s var(--k-pegas), border-color .25s;
}
.k-detail-btn:hover { background: var(--biru-soft); border-color: var(--biru); }
.k-detail-btn:active { transform: scale(0.97); }
.k-detail-btn:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: 2px; }
.k-detail-btn::after { content: ""; flex: none; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--k-pegas); }
.k-detail-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.k-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--k-halus); }
.k-detail.buka { grid-template-rows: 1fr; }
.k-detail-dalam { min-height: 0; overflow: hidden; display: grid; gap: 10px; }
.k-detail:not(.buka) .k-detail-dalam { visibility: hidden; transition: visibility 0s .45s; }

/* ---------- CTA: dua tombol sejajar ---------- */
body.kaca-halaman .cta .cta-aksi .btn { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .k-tab-ind, .k-tab a, .k-detail, .k-detail-btn, .k-detail-btn::after { transition: none; }
  body.kaca-halaman .baris-daftar .baris:hover .icon { transform: none; }
}
body.kaca-halaman .cta .cta-aksi { display: flex; flex-wrap: wrap; gap: 12px; }

/* =====================================================================
   TAHAP 4 — Tur 360° (kulit saja; pano.js / tur.js tidak diubah)
   ===================================================================== */
body.kaca-halaman .tur-pemirsa { border-radius: calc(var(--k-r) + 6px); box-shadow: var(--k-bayang-naik); border: 1px solid rgba(20, 53, 84, 0.18); }
body.kaca-halaman .tur-pemirsa:fullscreen { border-radius: 0; border: 0; }
/* panel judul: glass di atas panorama */
body.kaca-halaman .tur-judul-layar {
  right: auto; left: 12px; top: 12px; max-width: min(78%, 420px); padding: 10px 16px 11px; gap: 1px; border-radius: 20px;
  background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau), 0 12px 30px -16px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
body.kaca-halaman .tur-judul-layar strong { text-shadow: none; font-size: 1.0625rem; }
body.kaca-halaman .tur-hitung { opacity: 0.9; }
/* info tambahan (disalin kaca.js dari panel, hanya tampilan) */
.k-tur-info {
  display: none; position: absolute; z-index: 4; left: 50%; bottom: 12px; translate: -50% 0; width: min(46%, 440px); padding: 10px 16px; border-radius: 20px; pointer-events: none;
  background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau); color: #fff; font-size: 0.875rem; line-height: 1.45;
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
.k-tur-info.ada { display: block; }
.k-tur-info span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 979px) { .k-tur-info.ada { display: none; } }
/* kontrol: pill glass, tombol 44px */
body.kaca-halaman :is(.tur-langkah, .pano-kontrol) {
  gap: 2px; padding: 4px; border-radius: 999px; background: var(--k-kaca); border: 1px solid var(--k-tepi); box-shadow: var(--k-kilau), 0 12px 24px -14px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
body.kaca-halaman :is(.tur-langkah, .pano-kontrol) .pano-btn {
  width: 44px; height: 44px; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background .25s, transform .3s var(--k-pegas);
}
body.kaca-halaman :is(.tur-langkah, .pano-kontrol) .pano-btn:hover { background: rgba(255, 255, 255, 0.22); }
body.kaca-halaman :is(.tur-langkah, .pano-kontrol) .pano-btn:active { transform: scale(0.92); }
body.kaca-halaman :is(.tur-langkah, .pano-kontrol) .pano-btn:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.kaca-halaman :is(.tur-judul-layar, .tur-langkah, .pano-kontrol, .k-tur-info) { background: rgba(20, 53, 84, 0.82); }
}
.lite body.kaca-halaman :is(.tur-judul-layar, .tur-langkah, .pano-kontrol, .k-tur-info) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 53, 84, 0.82); }
/* panel keterangan, kartu titik, denah */
body.kaca-halaman .tur-panel, body.kaca-halaman .tur-kosong { border-radius: var(--k-r); border: 1px solid rgba(20, 53, 84, 0.1); box-shadow: var(--k-bayang); background: #fff; }
body.kaca-halaman .tur-lencana { border-radius: 999px; background: var(--biru-pucat); border-color: rgba(20, 53, 84, 0.12); color: var(--biru-tua); }
body.kaca-halaman .tur-lencana-360 { background: var(--biru); border-color: var(--biru); color: #fff; }
body.kaca-halaman .tur-item {
  min-height: 64px; border-radius: 18px; border: 1px solid rgba(20, 53, 84, 0.1); box-shadow: var(--k-bayang);
  transition: transform .45s var(--k-pegas), box-shadow .3s var(--k-halus), border-color .25s;
}
body.kaca-halaman .tur-item:hover { transform: translateY(-3px); box-shadow: var(--k-bayang-naik); border-color: rgba(30, 77, 123, 0.3); }
body.kaca-halaman .tur-item:active { transform: scale(0.98); transition-duration: .1s; }
body.kaca-halaman .tur-item.aktif { border-color: var(--biru); box-shadow: 0 0 0 2px rgba(30, 77, 123, 0.18), var(--k-bayang); }
body.kaca-halaman .tur-item:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: 2px; }
body.kaca-halaman .tur-no { background: var(--biru-tua); }
body.kaca-halaman .tur-item.aktif .tur-no { background: var(--biru); color: #fff; }
body.kaca-halaman .tur-pin { background: var(--biru-tua); }
body.kaca-halaman .tur-pin.aktif { background: var(--biru-muda); color: #fff; border-color: #fff; }
body.kaca-halaman .tur-peta { border-radius: var(--k-r); box-shadow: var(--k-bayang); }
body.kaca-halaman .tur-chips .chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(20, 53, 84, 0.16); background: #fff; color: var(--biru-tua); font-weight: 600; transition: transform .3s var(--k-pegas), background .25s, color .25s; }
body.kaca-halaman .tur-chips .chip:active { transform: scale(0.96); }
body.kaca-halaman .tur-chips .chip[aria-pressed="true"] { background: var(--biru); border-color: var(--biru); color: #fff; }
body.kaca-halaman .tur-petunjuk { padding: 0 4px; }
@media (prefers-reduced-motion: reduce) {
  body.kaca-halaman .tur-item, body.kaca-halaman :is(.tur-langkah, .pano-kontrol) .pano-btn { transition: none; }
  body.kaca-halaman .tur-item:hover { transform: none; }
}
/* tint navy tipis: teks putih tetap terbaca di atas foto terang (AA) */
body.kaca-halaman :is(.tur-judul-layar, .tur-langkah, .pano-kontrol), .k-tur-info { background: rgba(11, 29, 46, 0.46); }
@media (max-width: 640px) { :is(body.beranda, body.kaca-halaman) .cta .wrap { width: calc(100% - 24px); } }

/* =====================================================================
   TAHAP 5 — Daftar online (kulit saja; daftar.js, name/id/data-* tidak diubah)
   ===================================================================== */
/* stepper: glass terang, menempel di bawah header */
body.kaca-halaman .df-steps {
  position: sticky; top: var(--header-h); z-index: 40; margin: 0 0 20px; padding: 10px 6px 8px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(20, 53, 84, 0.1); box-shadow: var(--k-bayang);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.kaca-halaman .df-steps { background: rgba(255, 255, 255, 0.97); } }
.lite body.kaca-halaman .df-steps { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.97); }
body.kaca-halaman .df-steps::before, body.kaca-halaman .df-steps::after { top: 28px; height: 4px; }
body.kaca-halaman .df-steps::before { background: rgba(20, 53, 84, 0.12); }
body.kaca-halaman .df-steps::after { background: var(--biru-muda); }
body.kaca-halaman .df-dot { width: 34px; height: 34px; border-color: rgba(20, 53, 84, 0.22); transition: background-color .3s, border-color .3s, color .3s, transform .45s var(--k-pegas); }
body.kaca-halaman .df-steps li.is-current .df-dot { background: var(--biru-tua); border-color: var(--biru-tua); color: #fff; transform: scale(1.12); }
body.kaca-halaman .df-steps li.is-done .df-dot { background: var(--biru-muda); border-color: var(--biru-muda); color: #fff; }
body.kaca-halaman .df-slabel { font-size: 0.8125rem; color: #3a5166; }
body.kaca-halaman .df-steps li.is-current .df-slabel, body.kaca-halaman .df-steps li.is-done .df-slabel { color: var(--biru-tua); }
/* kolom yang difokuskan tidak tertutup stepper */
body.kaca-halaman :is(.fl, .df-group, .df-ortu, .df-agree, .df-error) { scroll-margin-top: calc(var(--header-h) + 120px); }

/* pengantar, kartu form, status */
body.kaca-halaman .df-intro { border: 1px solid rgba(20, 53, 84, 0.1); border-left: 1px solid rgba(20, 53, 84, 0.1); border-radius: var(--k-r); background: #fff; box-shadow: var(--k-bayang); padding: 20px 22px; }
body.kaca-halaman .df-intro li::before { border-color: var(--biru-muda); }
body.kaca-halaman .df-form, body.kaca-halaman .daftar-samping .kartu-form, body.kaca-halaman .cek-status-card, body.kaca-halaman .status-card {
  border: 1px solid rgba(20, 53, 84, 0.1); border-radius: var(--k-r); background: #fff; box-shadow: var(--k-bayang);
}
body.kaca-halaman .daftar-status { border: 1px solid rgba(20, 53, 84, 0.1); border-left: 4px solid var(--biru-muda); border-radius: var(--k-r); background: #fff; box-shadow: var(--k-bayang); }
body.kaca-halaman .daftar-status.gagal { border-left-color: var(--df-salah); background: var(--df-salah-latar); }
body.kaca-halaman .daftar-samping .kartu-form:hover { box-shadow: var(--k-bayang-naik); }
body.kaca-halaman .langkah li::before { background: var(--biru); }
/* kolom isian ramah: radius besar, fokus biru, label tetap naik */
body.kaca-halaman .fl input, body.kaca-halaman .fl textarea, body.kaca-halaman .fl select { border-radius: 16px; border-color: rgba(20, 53, 84, 0.2); transition: border-color .2s, box-shadow .2s; }
body.kaca-halaman .fl input:focus, body.kaca-halaman .fl textarea:focus, body.kaca-halaman .fl select:focus { border-color: var(--biru); box-shadow: 0 0 0 4px rgba(30, 77, 123, 0.16); }
body.kaca-halaman .fl input:focus + label, body.kaca-halaman .fl textarea:focus + label, body.kaca-halaman .fl select:focus + label { color: var(--biru); }
body.kaca-halaman .is-invalid input, body.kaca-halaman .is-invalid textarea, body.kaca-halaman .is-invalid select { border-color: var(--df-salah); }
body.kaca-halaman .df-card, body.kaca-halaman .df-check { border-radius: 16px; border-color: rgba(20, 53, 84, 0.2); transition: border-color .2s, background-color .2s, transform .35s var(--k-pegas); }
body.kaca-halaman .df-opt:active .df-card { transform: scale(0.98); }
body.kaca-halaman .df-opt input:checked + .df-card { border-color: var(--biru); background: var(--biru-soft); }
body.kaca-halaman .df-opt input:checked + .df-card .df-radio { border-color: var(--biru); }
body.kaca-halaman .df-radio::after, body.kaca-halaman .df-check input:checked + .df-box { background: var(--biru); }
body.kaca-halaman .df-check input:checked + .df-box { border-color: var(--biru); }
body.kaca-halaman .df-rv { border-radius: 18px; border-color: rgba(20, 53, 84, 0.12); }
body.kaca-halaman .df-rv-head { background: var(--biru-pucat); }
/* tombol: pill, menekan sedikit mengecil */
body.kaca-halaman :is(.df-nav .btn, .cek-status-card .btn, .daftar-samping .btn, .daftar-sukses .btn) { border-radius: 999px; transition: transform .35s var(--k-pegas), box-shadow .3s, background .25s; }
body.kaca-halaman .df-nav .btn:hover { transform: translateY(-2px); }
body.kaca-halaman .df-nav .btn:active { transform: scale(0.97); }
body.kaca-halaman .df-nav .btn:disabled { transform: none; }
/* sukses */
body.kaca-halaman .daftar-sukses { border-radius: var(--k-r); background: #fff; border: 1px solid rgba(20, 53, 84, 0.1); border-top: 4px solid var(--biru-muda); box-shadow: var(--k-bayang); }
body.kaca-halaman .nomor-daftar { border-color: var(--biru-muda); border-radius: 16px; }
body.kaca-halaman .ppdb-grup dl > div { border-top-color: rgba(20, 53, 84, 0.1); }

/* ---------- FAQ akordeon ---------- */
.k-faq { display: grid; gap: 12px; max-width: 52rem; }
.k-faq-item { background: #fff; border: 1px solid rgba(20, 53, 84, 0.1); border-radius: var(--k-r); box-shadow: var(--k-bayang); transition: box-shadow .35s var(--k-halus), border-color .3s; }
.k-faq-item.buka { border-color: rgba(30, 77, 123, 0.28); box-shadow: var(--k-bayang-naik); }
.k-faq-item h3 { margin: 0; font-size: 1rem; }
.k-faq-item:not(.k-faq-js) h3 { padding: 18px 22px 0; }
.k-faq-item:not(.k-faq-js) p { padding: 6px 22px 18px; color: var(--teks-redup); }
.k-faq-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 14px 22px; border: 0; border-radius: var(--k-r);
  background: transparent; color: var(--biru-tua); font: 600 1.0625rem/1.4 var(--font-isi); text-align: left; cursor: pointer;
}
.k-faq-btn:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: -3px; }
.k-faq-btn::after { content: ""; flex: none; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--k-pegas); }
.k-faq-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.k-faq-item .k-detail-dalam { padding: 0 22px; }
.k-faq-item.buka .k-detail-dalam { padding-bottom: 18px; }
.k-faq-item .k-detail-dalam p { color: var(--teks-redup); max-width: 42rem; }
@media (prefers-reduced-motion: reduce) {
  body.kaca-halaman :is(.df-dot, .df-card, .df-check, .df-nav .btn), .k-faq-item, .k-faq-btn::after { transition: none; }
  body.kaca-halaman .df-nav .btn:hover { transform: none; }
}
@media (min-width: 720px) { body.kaca-halaman .df-step.is-active > :is([data-field="nama"], [data-field="tempatLahir"]) { grid-column: 1 / -1; } }

/* =====================================================================
   TAHAP 6 — penyelarasan halaman lain (satu bahasa visual)
   ===================================================================== */
/* subnav profil: glass terang + pill biru, tinggi sentuh 44px */
body.kaca-halaman .subnav {
  top: var(--header-h); background: rgba(255, 255, 255, 0.72); border-bottom: 1px solid rgba(20, 53, 84, 0.1);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.kaca-halaman .subnav { background: rgba(255, 255, 255, 0.97); } }
.lite body.kaca-halaman .subnav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.97); }
body.kaca-halaman .subnav a { min-height: 44px; color: var(--biru-tua); transition: background .25s, color .25s, transform .3s var(--k-pegas); }
body.kaca-halaman .subnav a:active { transform: scale(0.97); }
body.kaca-halaman .subnav a[aria-current="true"] { background: var(--biru); color: #fff; }
body.kaca-halaman .subnav a:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: -3px; }
html.ada-subnav { scroll-padding-top: calc(var(--header-h) + 72px); }

/* kartu umum: radius, bayangan, lift */
body.kaca-halaman :is(.post, .pimpinan, .kartu-form, .faq details, .kontak-info li, .fakta, .jalan-langkah, .kosong, .callout) {
  border-radius: var(--k-r);
}
body.kaca-halaman :is(.post, .kartu-form, .faq details) { background: #fff; border: 1px solid rgba(20, 53, 84, 0.1); box-shadow: var(--k-bayang); transition: transform .5s var(--k-pegas), box-shadow .35s var(--k-halus), border-color .3s; }
body.kaca-halaman .post.bisa-dibuka:hover { transform: translateY(-5px); box-shadow: var(--k-bayang-naik); border-color: rgba(30, 77, 123, 0.28); }
body.kaca-halaman .post.bisa-dibuka:active { transform: scale(0.99); transition-duration: .1s; }
body.kaca-halaman .faq details[open] { border-color: rgba(30, 77, 123, 0.28); }
body.kaca-halaman .faq summary { min-height: 56px; }
body.kaca-halaman .faq summary:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: -3px; }
/* galeri: foto kartu */
body.kaca-halaman .galeri .foto { border-radius: var(--k-r); overflow: hidden; box-shadow: var(--k-bayang); transition: transform .5s var(--k-pegas), box-shadow .35s var(--k-halus); }
body.kaca-halaman .galeri .foto:hover { transform: translateY(-5px); box-shadow: var(--k-bayang-naik); }
body.kaca-halaman .galeri .foto img { transition: transform .9s var(--k-halus); }
body.kaca-halaman .galeri .foto:hover img { transform: scale(1.05); }
/* chip filter di halaman lain */
body.kaca-halaman :is([data-gallery-chips], [data-posts-chips]) .chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(20, 53, 84, 0.16); background: #fff; color: var(--biru-tua); font-weight: 600; transition: transform .3s var(--k-pegas), background .25s, color .25s; }
body.kaca-halaman :is([data-gallery-chips], [data-posts-chips]) .chip:active { transform: scale(0.96); }
body.kaca-halaman :is([data-gallery-chips], [data-posts-chips]) .chip[aria-pressed="true"] { background: var(--biru); border-color: var(--biru); color: #fff; }
/* kolom isian & peta */
body.kaca-halaman :is(.field .input, .field input, .field textarea) { border-radius: 14px; }
body.kaca-halaman .peta { border-radius: var(--k-r); box-shadow: var(--k-bayang); }
body.kaca-halaman .btn { border-radius: 999px; }
body.kaca-halaman .seksi .btn:active, body.kaca-halaman .cta .btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  body.kaca-halaman :is(.post, .kartu-form, .faq details, .galeri .foto, .galeri .foto img, .subnav a) { transition: none; }
  body.kaca-halaman :is(.post.bisa-dibuka, .galeri .foto):hover { transform: none; }
  body.kaca-halaman .galeri .foto:hover img { transform: none; }
}
/* target sentuh >= 44px untuk tautan/tombol kecil */
:is(body.beranda, body.kaca-halaman) :is(.tautan, .salin) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
:is(body.beranda, body.kaca-halaman) .salin { min-width: 44px; }
body.beranda .hero-kicker { min-height: 44px; display: inline-flex; align-items: center; }

/* =====================================================================
   BERANDA v2 — hero rata tengah, kartu angka navy, sosial melayang, panah hero, efek scroll
   Hero es (hero-es.js / hero-foto.js) dan header tidak diubah: hanya CSS tata letak/tampilan.
   ===================================================================== */

/* ---------- Hero: rata tengah, lambang kecil di atas judul ---------- */
body.beranda .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px; }
body.beranda .crest-wrap { grid-column: 1; grid-row: 1; justify-self: center; width: clamp(84px, 22vw, 108px); }
body.beranda .hero-copy { display: grid; justify-items: center; }
body.beranda .hero h1 { font-size: clamp(2.5rem, 8.6vw, 4.75rem); line-height: 1.04; }
body.beranda .hero-lede { margin-inline: auto; max-width: 38rem; }
body.beranda .hero-aksi { justify-content: center; }
@media (min-width: 900px) {
  body.beranda .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 22px; }
  body.beranda .crest-wrap { grid-column: 1; grid-row: 1; width: clamp(96px, 9vw, 128px); }
  body.beranda .hero-lede { margin-inline: auto; font-size: 1.25rem; }
  body.beranda .hero-aksi { justify-content: center; }
}
/* mode foto: teks (salinan hero) ikut rata tengah, lapisan gelap rata navy agar teks selalu terbaca */
body.beranda .hero-foto-teks .hero-grid { justify-items: center; text-align: center; }
body.beranda .hero-foto-teks .hero-copy { justify-items: center; }
body.beranda .hero-foto-teks .hero-aksi { justify-content: center; }
body.beranda .hero-foto::before { background: rgba(11, 29, 46, 0.52); }
@media (min-width: 900px) { body.beranda .hero-foto::before { background: rgba(11, 29, 46, 0.52); } }

/* ---------- Panah hero (dipasang kaca.js bila ada >1 foto) ---------- */
.k-hero-panah {
  position: absolute; z-index: 3; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer; pointer-events: auto;
  border-radius: 50%; border: 1px solid var(--k-tepi); color: #fff; background: rgba(11, 29, 46, 0.42); box-shadow: var(--k-kilau);
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat)); backdrop-filter: blur(var(--k-blur)) saturate(var(--k-sat));
  transition: transform .4s var(--k-pegas), background .25s;
}
.k-hero-panah.kiri { left: clamp(10px, 2.4vw, 32px); }
.k-hero-panah.kanan { right: clamp(10px, 2.4vw, 32px); }
@media (min-width: 900px) { body.k-sosial-ada .k-hero-panah.kanan { right: 72px; } }
.k-hero-panah::before { content: ""; width: 11px; height: 11px; border: solid #fff; border-width: 0 0 2.5px 2.5px; border-radius: 2px; }
.k-hero-panah.kiri::before { transform: translateX(2px) rotate(45deg); }
.k-hero-panah.kanan::before { transform: translateX(-2px) rotate(-135deg); }
.k-hero-panah:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
.k-hero-panah:active { transform: scale(0.94); }
.k-hero-panah:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) { .k-hero-panah { width: 44px; height: 44px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .k-hero-panah { background: rgba(11, 29, 46, 0.8); } }
.lite .k-hero-panah { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 29, 46, 0.8); }

/* ---------- Kartu angka (data admin) di bawah kartu identitas: navy sesuai tema ---------- */
body.beranda .angka-atas { background: transparent; margin: 0; padding: 4px 0 8px; border-radius: 0; color: #fff; box-shadow: none; position: relative; z-index: 2; }
body.beranda .angka-atas::before { display: none; }
body.beranda .angka-atas .wrap { padding-block: 0; }
body.beranda .angka-atas .angka-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: center; }
@media (min-width: 900px) { body.beranda .angka-atas .angka-grid { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; } }
body.beranda .angka-atas .angka-grid .angka-item:last-child:nth-child(odd) { grid-column: auto; }
@media (max-width: 899px) { body.beranda .angka-atas .angka-grid .angka-item:last-child:nth-child(odd) { grid-column: 1 / -1; } }
body.beranda .angka-atas .angka-item {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 22px 12px 20px; border-radius: var(--k-r); border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--biru-tua); color: #fff; box-shadow: var(--k-kilau), var(--k-bayang);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .5s var(--k-pegas), box-shadow .35s var(--k-halus), background .3s;
}
body.beranda .angka-atas .angka-item::before { display: none; }
body.beranda .angka-atas .angka-item:hover { transform: translateY(-6px); background: var(--biru); box-shadow: var(--k-kilau), var(--k-bayang-naik); }
body.beranda .angka-atas .angka-item:active { transform: scale(0.98); transition-duration: .1s; }
body.beranda .angka-atas .angka-nilai { color: #fff; font-family: var(--font-judul); font-weight: 700; font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.05; }
body.beranda .angka-atas .angka-label { color: #d4e4f2; font-size: 0.9375rem; font-weight: 600; }
.k-angka-ikon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); color: #fff;
  transition: transform .5s var(--k-pegas), background .3s;
}
.k-angka-ikon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.beranda .angka-atas .angka-item:hover .k-angka-ikon { transform: scale(1.1) rotate(-6deg); background: rgba(255, 255, 255, 0.2); }

/* ---------- Sosial melayang di kanan (kaca.js; hanya yang diisi admin) ---------- */
.k-sosial { position: fixed; right: 0; top: 50%; translate: 0 -50%; z-index: 45; display: none; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .k-sosial { display: flex; } body.k-sosial-wa .melayang-wa { display: none; } }
.k-sosial a {
  display: grid; place-items: center; width: 52px; height: 48px; padding-right: 6px; border-radius: 16px 0 0 16px; color: #fff; background: var(--biru-tua); box-shadow: var(--k-bayang);
  transform: translateX(8px); transition: transform .45s var(--k-pegas), background .25s;
  animation: k-sosial-masuk .8s var(--k-pegas) both; animation-delay: calc(.5s + var(--n, 0) * 90ms);
}
.k-sosial a:hover, .k-sosial a:focus-visible { transform: translateX(0); background: var(--biru); }
.k-sosial a:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: -3px; }
.k-sosial svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes k-sosial-masuk { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }

/* ---------- Efek scroll tambahan (progresif: hanya browser yang mendukung scroll-driven animation) ---------- */
:is(body.beranda, body.kaca-halaman) .seksi-kepala.k-in h2::before { animation: k-pop .7s var(--k-pegas) .15s both; }
@keyframes k-pop { from { opacity: 0; scale: .2; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
:is(body.beranda, body.kaca-halaman) .tab-panel.is-aktif { animation: k-naik .5s var(--k-halus) both; }
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2; background: var(--biru-muda); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--k-halus); pointer-events: none;
}
:is(body.beranda, body.kaca-halaman) :is(.jur-kartu, .fas-kartu):hover::before { transform: scaleX(1); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(body.beranda, body.kaca-halaman) :is(.jur-media, .fas-media) img { scale: 1.16; animation: k-paralaks linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes k-paralaks { from { translate: 0 -5%; } to { translate: 0 5%; } }
    body.kaca-halaman .page-hero > .wrap { animation: k-hero-geser linear both; animation-timeline: scroll(root); animation-range: 0 460px; }
    @keyframes k-hero-geser { from { translate: 0 0; opacity: 1; } to { translate: 0 44px; opacity: .15; } }
    :is(body.beranda, body.kaca-halaman) .cta .wrap { animation: k-cta-masuk linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes k-cta-masuk { from { scale: .94; opacity: .4; } to { scale: 1; opacity: 1; } }
  }
}
.lite :is(.jur-media, .fas-media) img { animation: none !important; scale: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .k-sosial a, .k-hero-panah, body.beranda .angka-atas .angka-item, .k-angka-ikon { transition: none; animation: none; }
  :is(body.beranda, body.kaca-halaman) .seksi-kepala.k-in h2::before, :is(body.beranda, body.kaca-halaman) .tab-panel.is-aktif { animation: none; }
  body.beranda .angka-atas .angka-item:hover { transform: none; }
}