/* harau.org: tombol pembuka chatbox "Tanya Mimin" (semua halaman). Sumber tunggal; ditempel ke CSS halaman
   (isi.css halaman isi ulang, beranda.css beranda) oleh situs/chatbox.py. Chatbox sendiri = chatbox.css (dimuat saat dibutuhkan). */
button.btn{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.btn-tanya{background:#fff;color:var(--navy);border:2px solid var(--navy);box-shadow:none}
.btn-tanya svg,.btn-t svg{color:var(--marun)}
.cta2 .btn-tanya{flex:1 1 auto;padding:0 14px;white-space:nowrap}
.bar .bar-tanya{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:14px;font:700 17px system-ui,-apple-system,sans-serif;background:#fff;color:var(--navy);border:2px solid var(--navy);cursor:pointer}
.bar .bar-tanya svg{color:var(--marun)}
html.cb-buka .bar{transform:translateY(130%);opacity:0;visibility:hidden}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:900px){.cta2 .btn-tanya{flex:0 0 auto;padding:0 22px}}
/* halaman isi ulang: tombol memakai tata letak .btn-wa (t9.css) + warna tanya (spesifisitas lebih tinggi dari .btn-wa) */
.btn.btn-tanya{background:#fff;color:var(--navy);border:2px solid var(--navy);box-shadow:none}
.btn.btn-tanya svg{color:var(--marun)}
button.btn-t{font:inherit;font-weight:800;cursor:pointer;-webkit-appearance:none;appearance:none}
/* footer: "Chat Tanya Mimin" berupa tombol yang tampil seperti tautan footer */
.k-tanya{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.k-tanya svg{width:18px;height:18px}
html.cb-muat [data-tanya][aria-busy="true"]{cursor:progress;opacity:.75}

/* ── harau.org beranda B/C (kerja #3, RENCANA §2b): tambahan di atas t9.css + situs.css. Chatbox "Tanya Mimin" dari contoh 10. ── */
.beranda h1,.beranda h2,.beranda h3{margin-top:0}
/* hero: H1 live di atas, "buat semua level." besar (<p class="judul-hero">) */
.janji h1{font-size:15px;line-height:1.25;text-transform:none;letter-spacing:.01em;color:var(--marun);margin:0 0 6px;font-weight:800}
.janji .judul-hero{font-family:Spartan,"Arial Black",system-ui,sans-serif;font-weight:700;color:var(--navy);font-size:36px;line-height:.98;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 .28em}
.janji .judul-hero em{font-style:normal;color:var(--navy-tua);background:linear-gradient(transparent 52%,var(--kuning) 52%,var(--kuning) 92%,transparent 92%);padding:0 .08em}
.janji h2.h2-hero{font-size:17px;line-height:1.25;margin:0 0 6px;color:var(--navy)}
.janji h2.h2-hero span{color:var(--marun)}
.janji>p.hero-teks{font-size:16px;line-height:1.4;margin:0 0 12px}
.janji>p.hero-teks b{color:var(--teks)}.janji>p.hero-teks .merah{color:var(--marun)}
@media (min-width:900px){.janji h1{font-size:18px}.janji .judul-hero{font-size:64px;line-height:.95}.janji h2.h2-hero{font-size:22px}.janji>p.hero-teks{font-size:19px}}
.yt-hero{position:absolute;left:14px;bottom:44px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 6px;border-radius:999px;background:#fff;color:var(--navy);font:800 14px/1 system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 18px rgb(28 36 87/.25);border:0;cursor:pointer}
.yt-hero .play{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--marun);color:#fff;font-size:13px}
.yt-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:rgb(15 20 50/.82)}
.yt-modal[hidden]{display:none}
.yt-modal .yt-kotak{position:relative;width:min(960px,100%)}
.yt-modal iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#000}
.yt-modal .yt-x{position:absolute;right:0;top:-52px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:26px;cursor:pointer}
.yt-modal.yt-tegak .yt-kotak{width:min(100%,420px,calc((100vh - 140px) * 9 / 16))}
.yt-modal.yt-tegak iframe{aspect-ratio:9/16}
/* judul blok: label kecil + H2 live */
.kop .kop-label{margin:0;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--marun)}
.kop .sub{display:block;font-size:15px;font-weight:700;color:var(--teks2);margin-top:2px}
.kop h2 span{color:var(--marun)}
/* kartu program: tagline live + <details> "Info lengkap, tap aja!" */
.j-isi .tagline{font-weight:800;color:var(--teks);margin:0 0 6px}
.info-lengkap{margin:6px 0 8px;border-radius:14px;background:var(--l1,#FFF5DA)}
.info-lengkap summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 12px;font-weight:800;color:var(--navy);list-style:none}
.info-lengkap summary::-webkit-details-marker{display:none}
.info-lengkap summary::after{content:"＋";margin-left:auto;color:var(--marun)}
.info-lengkap[open] summary::after{content:"－"}
.info-lengkap p{margin:0;padding:0 12px 12px;font-size:15px;line-height:1.5;color:var(--teks2)}
.mulai{display:inline-block;margin:2px 0 8px;font-size:14px;font-weight:800;color:var(--marun)}
/* kartu program B (Andri 12 Nov): isi tampil langsung, poin berikon, tanpa akordeon */
.poin{list-style:none;margin:2px 0 2px;padding:0;display:grid;gap:8px}
.poin li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--teks);min-width:0}
.poin li span{min-width:0;overflow-wrap:break-word}
.poin svg{flex:none;width:18px;height:18px;margin-top:.12em;color:var(--marun)}
.prog8 li .poin-k{margin:6px 0 6px}.prog8 li .poin-k li{display:flex;grid-template-columns:none;padding:0;background:none;border-radius:0;box-shadow:none;font-size:13.5px;line-height:1.35;gap:7px}.prog8 li .poin-k svg{width:16px;height:16px}
.unggul .poin{margin:4px 0 8px}.unggul .poin li{color:#fff}.unggul .poin svg{color:var(--kuning)}
.prog8 li h3{font-size:16px;margin:0 0 2px;color:var(--navy)}
.prog8 li .tagline{display:block;font-size:13.5px;color:var(--teks2);line-height:1.35}
.prog8 li .info-lengkap{background:#fff}
.unggul h3{margin:6px 0 2px}.unggul .isi-3{margin:0 0 6px;font-weight:800;color:var(--teks)}
/* alasan / nilai / manfaat: judul kartu = H3 live */
.alasan li h3{display:block;font-size:17px;margin:0 0 4px;color:var(--navy)}
.alasan li h3 a{color:inherit}
.nilai li h3{display:block;font-family:Spartan,sans-serif;font-size:15px;color:var(--navy);margin:0}
.manfaat li h3{display:block;font-size:16px;color:var(--navy);margin:0 0 2px}
/* statistik */
.navy h2.stat-judul{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--kuning);margin:28px 0 0}
.stat .angka{font-size:30px;color:var(--navy)}
.stat h3,.stat .lbl{display:block;font-family:Spartan,sans-serif;font-size:15px;color:var(--navy);line-height:1.1;margin:4px 0 0}
.testi-h3{font-size:18px;color:#fff;margin:0 0 14px}
/* tentang */
.artikel .g-utama img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:28px}
.artikel .teks a{color:var(--navy);font-weight:700}
/* CTA akhir + blok Daftar (#daftar-kampung-inggris) */
.cta .kutip-live h2{font-size:24px;line-height:1.15;margin:0 0 8px}
.cta .kutip-live h2 span{color:var(--marun)}
.cta .kutip-live p{margin:0 0 4px}.cta .kutip-live .merah{color:#ff0000}
.cta .cta-ajak{font-family:Spartan,sans-serif;font-weight:700;font-size:30px;line-height:1.05;color:var(--navy);margin:22px 0 8px}
.cta .cta-ajak em{font-style:normal;color:var(--marun)}
.daftar-akhir{scroll-margin-top:84px;margin:18px auto 0;max-width:520px;padding:18px 16px;border-radius:24px;background:#fff}
.daftar-akhir h2{font-size:22px;margin:0 0 10px}
.cta a.yt.yt-foto{position:relative;display:block;margin:12px auto 0;max-width:520px;aspect-ratio:16/10;border-radius:28px;overflow:hidden;background:var(--navy)}
.cta a.yt.yt-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.cta a.yt.yt-foto .yt-main{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.cta .yt-frame{max-width:520px;margin:12px auto 0}
@media (min-width:900px){.cta .kutip-live h2{font-size:34px}.cta .cta-ajak{font-size:46px}}
/* penutup (Andri 12 Nov "ada yang missing"): video dulu lebar 0 di kolom kanan grid t9 (margin auto + isi absolut) → kanan kosong.
   Urutan: kutipan → video → ajakan → kotak "Langkah pertamanya:" + Formulir + tombol. Desktop: kiri teks + kotak, kanan video. */
.cta a.yt.yt-foto{width:100%}
.daftar-akhir .langkah1{margin:0 0 2px;font-weight:700;color:var(--marun)}
.cta .daftar-akhir h2{max-width:none}
@media (min-width:900px){
 .cta{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px 56px;align-items:start}
 .cta .kutip-live{grid-column:1;grid-row:1}
 .cta a.yt.yt-foto{grid-column:2;grid-row:1/4;align-self:center;max-width:none;margin:0}
 .cta .cta-ajak{grid-column:1;grid-row:2;margin:0}
 .cta .daftar-akhir{grid-column:1;grid-row:3;margin:0;max-width:520px;padding:20px 22px}
 .cta .yt-frame{grid-column:2;grid-row:1/4;align-self:center;width:100%;max-width:none;margin:0}
}
/* baris kuota (diisi JS dari data formulir; gagal = elemen tidak ada) */
.kuota-baris{margin:8px 0 0;padding:8px 12px;border-radius:14px;background:rgb(255 255 255/.12);color:#fff;font-weight:700}
.kuota-baris b{color:var(--kuning)}
.camp .tanya-kecil{margin-top:6px;min-height:44px;padding:0 12px;border-radius:999px;border:2px solid var(--navy);background:#fff;color:var(--navy);font:800 14px system-ui,sans-serif;cursor:pointer}
/* tombol Tanya + chatbox: tanya.css (ditempel di depan file ini saat build) + chatbox.css (malas), situs/chatbox.py */

/* beranda C: tanpa teks dekor di HTML (nomor blok + ikon putar lewat CSS) */
.kop .kop-n::before{content:attr(data-n)}
.c-play::before{content:"▶";display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--marun);color:#fff;font-size:13px}
.cta a.yt.yt-foto.c-play::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;font-size:22px}
.beranda-c .janji .h2-hero-c{font-size:26px;line-height:1.1;text-transform:none}
@media (min-width:900px){.beranda-c .janji .h2-hero-c{font-size:44px}}
.beranda-c .c-balik{font-weight:800;color:var(--navy)}.beranda-c .c-min{font-weight:800;color:var(--marun)}
.beranda-c .info-lengkap .aksi{padding:0 12px 12px}
.stat-c .angka-baris{display:flex;justify-content:center;align-items:baseline;gap:2px}
.stat-c .angka-baris p{margin:0}.stat-c .plus{font-family:Spartan,sans-serif;font-weight:700;font-size:24px;color:var(--navy)}
.stat-c .angka{font-size:30px}
.testi-foto{grid-auto-columns:minmax(0,1fr)}
.cta2 .c-btn{display:contents}
@media (min-width:900px){.yt-hero{bottom:auto;top:16%;left:6%}}
/* perbaikan sesudah uji tampil (kerja #3) */
.stat div{min-width:0}
.stat .angka{font-size:26px;color:var(--kuning);overflow-wrap:anywhere}
.stat h3,.stat .lbl{font-family:system-ui,sans-serif;font-size:13px;font-weight:700;color:#e4e7fa;margin:6px 0 4px;line-height:1.25}
.stat-c .plus{color:var(--kuning)}
@media (min-width:900px){.stat .angka{font-size:34px}}
.alasan li h3{font-family:Spartan,sans-serif;font-size:18px;line-height:1.2;color:var(--navy);font-weight:700;margin:0}
.alasan li h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--navy)}
.alasan li h3 a::after{content:" →";color:var(--marun)}
.alasan li>span:last-child{grid-column:2}
.alasan li span b{display:inline;font-family:inherit;font-size:inherit;line-height:inherit;color:var(--teks);font-weight:700}
.unggul .isi-3{color:#fff}.unggul .tagline{color:#eef0ff}.unggul .mulai{color:var(--kuning)}
.unggul .info-lengkap{background:rgb(255 255 255/.1)}.unggul .info-lengkap summary{color:#fff}.unggul .info-lengkap summary::after{color:var(--kuning)}
.unggul .info-lengkap p{color:#eef0ff}
.prog8 li .info-lengkap{margin:6px 0 4px}.prog8 li .info-lengkap summary{font-size:14px;padding:0 10px}
.prog8 li .info-lengkap p{font-size:14px;padding:0 10px 10px}
.daftar-akhir .cta2{flex-wrap:wrap}.daftar-akhir .cta2 .btn{flex:1 1 100%;white-space:normal}
@media (min-width:600px){.daftar-akhir .cta2 .btn{flex:1 1 0}}
.stat{grid-template-columns:1fr 1fr}.stat .angka{overflow-wrap:normal;white-space:nowrap;font-size:28px}
@media (min-width:900px){.stat{grid-template-columns:repeat(5,1fr)}.stat .angka{font-size:34px}}

/* ================= perbaikan HP 11 Nov 2026 (keluhan Uda, iPhone Safari) ================= */
/* 1. chip "Kamu yang mana?": <ul class="lompat"> kena gaya skip link situs.css (absolute, kotak navy, top -60px) dan menimpa
      paragraf. Kembalikan jadi daftar chip biasa di atas foto. */
.siapa .lompat{position:static;top:auto;left:auto;z-index:auto;background:none;padding:0;border-radius:0;color:inherit}
/* 2. ulasan: kutipan tidak lagi di atas foto (tak terbaca + terpotong di awal). Kartu = foto di atas + kutipan utuh di latar polos. */
.spread{display:flex;flex-direction:column;background:var(--navy-tua);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.spread.terang{background:#fff;box-shadow:none}
.spread::after{content:none}
.spread img,.semua .spread img{flex:none;aspect-ratio:4/3;border-radius:28px 28px 0 0!important}
.spread blockquote{position:static;max-height:none;overflow:visible;flex:1 1 auto;justify-content:flex-start;padding:16px 18px 18px;font-size:15.5px;line-height:1.5;color:#fff}
.spread.terang blockquote{color:var(--teks)}
.spread blockquote footer{margin-top:auto;padding-top:12px;font-size:13px}
.testi8{align-items:stretch}
@media (max-width:899px){
 /* 3. beranda selebar layar (dulu ikut padding 18 px main.site-main halaman artikel: blok berwarna menyempit, tepi krem) */
 main.beranda{padding:0}
 /* 4. layar pertama: Daftar + Tanya kami kelihatan tanpa gulir (foto menyesuaikan tinggi layar kecil, termasuk bar Safari) */
 .pembuka8 img,.pembuka8.khas img{height:clamp(170px,calc(100svh - 432px),360px);min-height:0}
 .testi8>.spread{flex:0 0 86%}
}
/* 5. HP sempit (320 px / teks diperbesar): kolom grid boleh menyusut, kata panjang dipatah, tidak ada geser samping */
@media (max-width:899px){
 .indeks{grid-template-columns:minmax(0,1fr)}
 .manfaat,.nilai{grid-template-columns:repeat(2,minmax(0,1fr))}
 .manfaat li,.nilai li,.prog8 li>div{min-width:0;overflow-wrap:break-word}
 .prog8 li{grid-template-columns:52px minmax(0,1fr) auto}
}
@media (max-width:374px){
 .prog8 li{grid-template-columns:52px minmax(0,1fr)}
 .prog8 li>.btn{grid-column:2;justify-self:start}
}
/* 5b. desktop sempit (12 Nov, uji menu desktop): di 1024–1158 px kolom grid "gabung" + "manfaat" melebar seukuran isinya
   (1fr = minimal selebar isi) → halaman geser samping. Kolom boleh menyusut, kata panjang dipatah. */
@media (min-width:900px){
 .prog-bawah{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
 .gabung-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .gabung-wrap>*,.manfaat li,.nilai li,.prog8 li>div{min-width:0;overflow-wrap:break-word}
 .manfaat{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 6. "Mulai Rp…" di daftar paket gabungan: baris sendiri (dulu nempel "Basic udah OKMulai Rp768rb") */
.prog8 li .mulai{display:block;margin:2px 0 0}
/* 7. isi ulang 12 Nov: bagian 09 "Sekolah & Karir". Salinan aturan .harves / .harves-foto di t9.css dengan nama kelas baru,
   supaya kata itu tidak ada sama sekali di HTML beranda (aturan: tidak di beranda). Tampilan sama persis. */
.sk9-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:28px;margin:0 0 18px}
@media (min-width:900px){
 .sk9{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:stretch}
 .sk9-foto{margin:0}.sk9-foto img{height:100%;aspect-ratio:auto;max-height:560px;margin:0}
}

/* Tim Kami (bagian 05 Tentang, Andri 12 Nov): avatar bulat staf aktif dari isi-ulang/alat/tim.py → /tim/ */
.tim-beranda{margin:40px 0 0;padding:26px 0 0;border-top:2px dashed rgb(39 50 114/.15);text-align:center}  /* rata tengah: Andri 12 Nov */
.tim-beranda h3{margin:0 0 6px;font-size:24px;color:var(--navy)}
.tim-beranda>p{margin:0 auto 18px;max-width:640px;color:var(--teks2)}
.tim-ava{list-style:none;margin:0;padding:4px 0 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 8px}
.tim-ava li{min-width:0;flex:0 0 calc((100% - 16px)/3)}
@media (max-width:359px){.tim-ava li{flex-basis:calc((100% - 8px)/2)}}  /* HP sempit / teks 130%: 4 kolom memotong "ADMINISTRASI" */
.tim-ava a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;text-decoration:none;color:var(--navy)}
.tim-ava img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--l1,#FFF5DA);box-shadow:0 0 0 3px var(--kuning),var(--bayang-k)}
.tim-ava b{font-size:12.5px;line-height:1.25;margin-top:8px;overflow-wrap:anywhere}
.tim-ava span{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--marun);overflow-wrap:anywhere}
.tim-beranda .lanjut{margin-top:4px}
@media (min-width:600px){
 .tim-ava{gap:18px 10px}
 .tim-ava li{flex:0 0 120px;width:120px}
 .tim-ava img{width:88px;height:88px}
 .tim-ava b{font-size:14px}
 .tim-ava span{font-size:12px}
}
/* 6. lengkung beranda (12 Nov, Uda: "lengkung beranda tidak sesuai"): di desktop main.site-main masih ber-padding 40 px kiri-kanan
   + 16 px bawah dan footer ber-margin-top 48 px → gelombang tidak selebar layar + pita krem di atas footer. Samakan dengan
   halaman isi ulang (main.isi-t9: tanpa padding, footer menempel). Padding atas 56 px tetap (jarak hero dari header). */
main.beranda{padding-left:0;padding-right:0;padding-bottom:0}
main.beranda~footer.kaki{margin-top:0}

/* harau.org: menu utama bersama (situs/menu.py). Ditempel ke CSS halaman (isi.css / beranda.css). Semua pemilih diawali
   .kepala-situs supaya menang atas t9.css + situs.css yang sudah tayang (isi.css dimuat SEBELUM situs.css).
   HP/tablet <1024: tombol Menu + panel. Desktop ≥1024: bar ala WordPress lama + dropdown. .sempit (menu.js) = bar tidak muat. */
.kepala-situs .m-bar{display:none}
.kepala-situs .m-sublabel{margin:8px 10px 2px;font:700 12px/1.2 system-ui,-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--teks2)}
.kepala-situs .m-wrap a[aria-current]{color:var(--marun);font-weight:800}

/* panel (HP, tablet, desktop sempit): selebar layar di HP, kartu kanan di tablet; tinggi maks layar, bisa digulir */
@media (max-width:1023.98px){
 .kepala-situs .menu{position:static}
 .kepala-situs .m-wrap{left:10px;right:10px;width:auto;top:calc(100% + 6px);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .kepala-situs .menu.buka .m-wrap{display:block}
 .kepala-situs .m-grup+.m-grup{margin-top:10px;border-top:1px solid var(--garis);padding-top:10px}
}
@media (min-width:600px) and (max-width:1023.98px){
 .kepala-situs .m-wrap{left:auto;right:10px;width:min(420px,calc(100vw - 20px))}
}

/* desktop: bar navigasi */
@media (min-width:1024px){
 header.kepala-situs{padding:8px 24px;gap:16px}
 .kepala-situs .logo{flex:none}
 .kepala-situs .menu{position:static;display:flex;align-items:center;min-width:0}
 .kepala-situs .m-btn{display:none}
 .kepala-situs .m-wrap,.kepala-situs .menu.buka .m-wrap{display:none}
 .kepala-situs .m-bar{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;white-space:nowrap}
 .kepala-situs .m-bar>li{position:relative;margin:0}
 .kepala-situs .m-top{display:inline-flex;align-items:center;gap:4px;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:none;
  color:var(--navy);font:700 15.5px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
 .kepala-situs .m-top svg{flex:none;transition:transform .2s ease}
 .kepala-situs .m-top:hover,.kepala-situs .m-top[aria-expanded="true"]{background:var(--kuning-pucat)}
 .kepala-situs .m-top[aria-expanded="true"] svg{transform:rotate(180deg)}
 .kepala-situs .m-top:focus-visible,.kepala-situs .m-drop a:focus-visible,.kepala-situs .m-tanya:focus-visible,.kepala-situs .m-bar-daftar:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
 .kepala-situs .m-ini>.m-top,.kepala-situs a.m-top[aria-current]{box-shadow:inset 0 -3px 0 var(--kuning)}
 .kepala-situs .m-pjg{display:none}
 /* dropdown */
 .kepala-situs .m-drop{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:60;gap:4px 18px;padding:12px;background:#fff;color:var(--teks);
  border-radius:18px;border:1px solid var(--garis);box-shadow:0 18px 40px -18px rgb(28 36 87/.45),0 2px 10px rgb(28 36 87/.08);white-space:nowrap}
 .kepala-situs .m-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
 .kepala-situs .m-drop.kanan,.kepala-situs .m-kanan>.m-drop{left:auto;right:0}
 .kepala-situs .m-top[aria-expanded="true"]+.m-drop,.kepala-situs .menu:not(.mj) .m-sub:focus-within>.m-drop{display:flex}
 .kepala-situs .m-kol{min-width:220px}
 .kepala-situs .m-kol-j{margin:4px 12px 6px;font:800 12.5px/1.2 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--marun)}
 .kepala-situs .m-drop ul{list-style:none;margin:0;padding:0}
 .kepala-situs .m-drop li{margin:0}
 .kepala-situs .m-drop a{display:flex;align-items:center;min-height:44px;padding:4px 12px;border-radius:12px;color:var(--teks);font:600 15.5px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none}
 .kepala-situs .m-drop a:hover,.kepala-situs .m-drop a:focus-visible{background:var(--kuning-pucat);color:var(--navy)}
 .kepala-situs .m-drop a[aria-current]{color:var(--marun);font-weight:800}
 /* Tanya (chatbox) + Daftar */
 .kepala-situs .m-tanya{display:inline-flex;align-items:center;gap:6px;min-height:46px;margin-left:8px;padding:0 16px;border-radius:999px;border:2px solid var(--navy);
  background:#fff;color:var(--navy);font:800 15px/1 system-ui,-apple-system,sans-serif;cursor:pointer;-webkit-appearance:none;appearance:none}
 .kepala-situs .m-tanya svg{width:18px;height:18px;color:var(--marun)}
 .kepala-situs .m-bar-daftar{min-height:46px;margin-left:8px;padding:0 20px;font-size:15px;background:var(--navy);color:#fff;box-shadow:0 4px 0 var(--navy-tua)}
 /* bar tidak muat (menu.js): kembali ke tombol Menu + panel kartu kanan */
 .kepala-situs .menu.sempit .m-bar{display:none}
 .kepala-situs .menu.sempit .m-btn{display:inline-flex}
 .kepala-situs .menu.sempit.buka .m-wrap{display:block;left:auto;right:16px;width:min(420px,calc(100vw - 32px));top:calc(100% + 6px);
  max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overscroll-behavior:contain}
 .kepala-situs .menu.sempit .m-grup+.m-grup{margin-top:10px;border-top:1px solid var(--garis);padding-top:10px}
}
@media (min-width:1024px) and (hover:hover){
 .kepala-situs .m-sub:hover>.m-drop{display:flex}
}
@media (min-width:1280px){
 header.kepala-situs{padding:10px 40px}
 .kepala-situs .m-top{padding:0 14px}
 .kepala-situs .m-pjg{display:inline}
}
@media (prefers-reduced-motion:reduce){.kepala-situs .m-top svg{transition:none}}

/* harau.org: logo resmi + footer bersama (situs/kaki.py). Ditempel ke CSS halaman (isi.css / beranda.css). Pemilih diawali
   .kaki.kk / .kepala-situs .logo / nav.bar supaya menang atas t9.css + situs.css yang sudah tayang (isi.css dimuat SEBELUM situs.css). */

/* logo header: logo resmi berwarna (latar krem), tinggi tetap, rasio asli, ruang kosong di sekeliling */
.kepala-situs .logo img.logo-merek{display:block;width:auto;height:44px;max-width:none;border-radius:0;background:none;filter:none}
.kepala-situs a.logo{gap:0;padding:2px 0}
@media (min-width:1024px){.kepala-situs .logo img.logo-merek{height:48px}}

/* footer */
.kaki.kk{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:48px;padding:40px 20px calc(112px + env(safe-area-inset-bottom));
 background:var(--navy-tua);color:#E7E9F6;font-size:15px;line-height:1.55;border:0}
.kaki.kk img{filter:none}
.kaki.kk a{color:#fff}
.kaki.kk h2{margin:16px 0 8px;color:#fff;font-size:22px;line-height:1.2;text-wrap:balance}
.kaki.kk h3{margin:24px 0 10px;color:var(--kuning);font-size:17px;line-height:1.2}
.kaki.kk>div>h3:first-child,.kaki.kk>nav>h3:first-child{margin-top:0}
.kaki.kk p{margin:0 0 10px}
.kaki.kk ul{list-style:none;margin:0;padding:0}
.kaki.kk li{margin:0}
.kaki.kk .kk-logo{display:block;width:auto;height:64px;max-width:100%}
.kaki.kk .kk-logo-a{display:inline-block;padding:4px 0}

/* sosmed: ikon bulat seragam (nama = aria-label) */
.kaki.kk .k-sosmed{display:flex;flex-wrap:wrap;gap:10px}
.kaki.kk .k-sosmed a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;
 background:rgb(255 255 255/.12);color:#fff;text-decoration:none;transition:background .2s ease}
.kaki.kk .k-sosmed a:hover{background:rgb(255 255 255/.24)}
.kaki.kk .k-sosmed svg{width:20px;height:20px}
/* 6 ikon (+ WhatsApp, Andri 12 Nov) = 314 px; layar < 360 (iPhone SE 320) tidak muat satu baris → 2 baris rapi 3 + 3 */
@media (max-width:359px){.kaki.kk .k-sosmed{display:grid;grid-template-columns:repeat(3,44px)}}

/* pembayaran: chip putih, logo berwarna tinggi seragam */
.kaki.kk .kk-bayar-ket{color:#C9CEEF;font-size:14px;margin:0 0 10px}
.kaki.kk .kk-bayar{display:grid;grid-template-columns:repeat(3,minmax(0,92px));gap:8px}
.kaki.kk .kk-bayar li{display:flex;align-items:center;justify-content:center;height:40px;padding:0 8px;background:#fff;border-radius:8px}
.kaki.kk .kk-bayar img{display:block;max-width:100%;height:auto}

/* tautan: rapat, kelompok jelas */
.kaki.kk .k-link>div+div{margin-top:14px}
.kaki.kk .f-h{margin:0 0 4px;font:800 12px/1.3 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#C9CEEF}
.kaki.kk .k-link a{display:flex;align-items:center;min-height:44px;min-width:0;padding:0;text-decoration:none}
.kaki.kk .k-link a:hover,.kaki.kk .k-kontak a:hover{text-decoration:underline;text-underline-offset:3px}

/* kontak: satu baris per item, ikon kecil seragam */
.kaki.kk .kk-pt{margin:0 0 10px;color:#fff;font-weight:800}
.kaki.kk .kk-kontak li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0}
.kaki.kk .kk-kontak li+li{border-top:1px solid rgb(255 255 255/.1)}
.kaki.kk .kk-kontak li>svg{width:20px;height:20px;margin-top:1px;color:var(--kuning)}
.kaki.kk .kk-kontak p{margin:0}
.kaki.kk .kk-kontak a,.kaki.kk .kk-kontak .k-tanya{display:inline-flex;align-items:center;min-height:24px;padding:0;color:#fff;font-weight:700;
 text-decoration:none;overflow-wrap:anywhere}
.kaki.kk .kk-kontak .k-tanya{font:inherit;font-weight:700;text-decoration:none}
.kaki.kk .kk-kontak .k-tanya:hover{text-decoration:underline;text-underline-offset:3px}
.kaki.kk .kk-kontak .kk-peta{display:inline-flex;margin-top:4px;color:var(--kuning);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.kaki.kk .k-hak{grid-column:1/-1;margin:0;padding-top:20px;border-top:1px solid rgb(255 255 255/.12);color:#C9CEEF;font-size:13px;opacity:1}

@media (max-width:899.98px){
 /* HP: target sentuh tetap 44 px di baris kontak */
 .kaki.kk .kk-kontak a,.kaki.kk .kk-kontak .k-tanya{min-height:44px}
 .kaki.kk .kk-kontak li{padding:2px 0;align-items:center}
 .kaki.kk .kk-kontak li.kk-alamat{align-items:start;padding:12px 0 6px}
 .kaki.kk .k-link{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px 16px}
 .kaki.kk .k-link>h3{grid-column:1/-1;margin-bottom:-4px}
 .kaki.kk .k-link>div+div{margin-top:0}
}
@media (min-width:600px) and (max-width:899.98px){
 .kaki.kk .k-link{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
 .kaki.kk{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:28px 48px;
  padding:64px max(40px,calc(50vw - 570px)) 112px}
 .kaki.kk .k-link a{min-height:30px;padding:2px 0}
 .kaki.kk .kk-bayar{grid-template-columns:repeat(3,92px)}
 /* bar bawah desktop: tombol mengambang ringkas di kanan bawah (tidak pernah terpotong) */
 nav.bar{left:auto;right:24px;bottom:24px;width:auto;max-width:calc(100vw - 48px);gap:8px;padding:8px;border-radius:18px;border:0}
 nav.bar .bar-tanya,nav.bar .bar-daftar{flex:0 0 auto;min-height:46px;padding:0 18px;font-size:16px;white-space:nowrap}
}
@media (min-width:900px) and (max-width:1099.98px){
 .kaki.kk{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .kaki.kk .k-merek{grid-column:1/-1}
}