/* ============================================================
   IKIPIE NUSANTARA — Tema Situs
   TEMA UNGU TUA & EMAS (09/2026): ungu tua #4A148C · emas #D97706 ·
   variasi ungu violet #5E35B1

   CATATAN NAMA VARIABEL: --utama* = warna utama (ungu tua), --emas* = warna
   kedua (emas), --aksen* = warna variasi ketiga (ungu violet). Kelas HTML
   .utama / .emas / .aksen pada halaman adalah "slot warna" 1/2/3.
   Palet: ungu tua #4A148C · #300A63 · #6A1B9A · #B79CE0 · #EDE7F6,
   ungu violet #5E35B1 · #7E57C2 · #D1C4E9 · #F0EBFA,
   emas #B45309 · #D97706 · #FCD34D · #FFFBEB (emas dipertahankan —
   pasangan resmi ungu tua, sekaligus warna lambang).
   ============================================================ */

:root{
  --utama:#4A148C;
  --utama-700:#300A63;
  --utama-500:#6A1B9A;
  --utama-300:#B79CE0;
  --utama-50:#EDE7F6;
  --emas:#B45309;
  --emas-500:#D97706;
  --emas-700:#8A3E08;   /* emas tua: untuk teks kecil di atas bidang terang (kontras WCAG) */
  --emas-300:#FCD34D;
  --emas-50:#FFFBEB;
  --aksen:#5E35B1;
  --aksen-500:#7E57C2;
  --aksen-300:#D1C4E9;
  --aksen-50:#F0EBFA;
  --ink:#1B1033;
  --ink-soft:#2C1D4D;
  --muted:#5B5476;
  --line:rgba(74,20,140,.14);
  --line-soft:rgba(27,16,51,.08);
  --card:rgba(255,255,255,.68);
  --card-solid:#ffffff;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow-sm:0 6px 18px -12px rgba(48,10,99,.35);
  --shadow:0 20px 44px -22px rgba(48,10,99,.38);
  --shadow-lg:0 34px 70px -30px rgba(48,10,99,.42);
  --container:1180px;
  --tinggi-kepala:calc(74px + var(--tinggi-marquee));  /* ditimpa blok tema di bawah (64px/120px) */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-title:'Playfair Display',Georgia,'Times New Roman',serif;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.72;
  background-color:#F7F2FE;
  background-image:
    radial-gradient(58rem 40rem at 8% -6%, rgba(74,20,140,.16), transparent 60%),
    radial-gradient(50rem 34rem at 96% 4%, rgba(180,83,9,.14), transparent 62%),
    radial-gradient(46rem 34rem at 60% 104%, rgba(94,53,177,.13), transparent 60%),
    linear-gradient(180deg,#FAF6FE 0%,#F2EAFB 45%,#EEE4F9 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--utama);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{padding-left:1.15rem}
h1,h2,h3,h4{font-family:var(--font-title);color:var(--ink);line-height:1.22;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.3rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1em}

::selection{background:rgba(94,53,177,.22)}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--utama);color:#fff;padding:.7rem 1.1rem;
  border-radius:0 0 var(--radius-sm) 0;z-index:200
}
.skip-link:focus{left:0}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.container-narrow{max-width:860px}

/* ---------------- Tombol ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86rem 1.5rem;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;cursor:pointer;
  font-family:var(--font);line-height:1.2;text-decoration:none;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, color .2s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--utama) 0%,var(--utama-500) 100%);color:#fff;box-shadow:0 16px 30px -18px rgba(74,20,140,.85)}
.btn-primary:hover{box-shadow:0 22px 36px -18px rgba(74,20,140,.9)}
.btn-brown{background:linear-gradient(135deg,var(--emas) 0%,var(--emas-500) 100%);color:#fff;box-shadow:0 16px 30px -18px rgba(180,83,9,.85)}
.btn-pi{background:linear-gradient(135deg,var(--aksen) 0%,var(--aksen-500) 100%);color:#fff;box-shadow:0 16px 30px -18px rgba(94,53,177,.85)}
.btn-ghost{background:rgba(255,255,255,.72);color:var(--utama-700);border-color:var(--line);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--utama-300)}
.btn-outline{background:transparent;color:var(--utama);border-color:rgba(74,20,140,.35)}
.btn-outline:hover{background:var(--utama-50)}
.btn-block{width:100%}
.btn[disabled],.btn.disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}
.btn-lg{padding:1rem 1.9rem;font-size:1.05rem}
.pi-mark{
  font-weight:800;font-size:1.05em;line-height:1;
  font-family:Georgia,serif;
}
.btn-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ---------------- Header ---------------- */
.site-header{
  /* Bar TULISAN BERJALAN (.marquee) menempel di paling atas, jadi kepala halaman menempel
     tepat DI BAWAHNYA (bukan di 0) — lihat --tinggi-marquee di blok :root tema. */
  position:sticky;top:var(--tinggi-marquee);z-index:90;
  background:rgba(248,245,255,.82);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.site-header.menggulir{box-shadow:0 12px 30px -24px rgba(48,10,99,.55);border-bottom-color:var(--line-soft);background:rgba(248,245,255,.94)}
.header-inner{display:flex;align-items:center;gap:14px;min-height:var(--tinggi-kepala)}
.brand{display:flex;flex:0 0 auto;align-items:center;gap:.7rem;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{width:46px;height:46px;border-radius:50%;filter:drop-shadow(0 6px 12px rgba(74,20,140,.28))}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-family:var(--font-title);font-size:1.16rem;letter-spacing:.02em;color:var(--utama-700)}
.brand-text small{font-size:.72rem;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}

/* ---------------- Navigasi utama: laci dari kiri (bilah garis tiga) ----------------
   Sejak 09/2026 seluruh daftar menu dibuka dari tombol bilah garis tiga di pojok kiri
   atas, di SEMUA ukuran layar (permintaan pengguna). Karena itu panel menu = "laci"
   (off-canvas) yang meluncur dari kiri, dan tidak ada lagi submenu model sorot (hover)
   di desktop. Laci memakai transform + visibility — bukan display:none — supaya bisa
   dianimasikan, dan karena position:fixed ia tetap tidak menambah lebar halaman. */
.nav-laci-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 2px 12px;border-bottom:1px solid var(--line-soft)
}
.nav-laci-judul{
  font-family:var(--font);font-size:.76rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)
}
.nav-tutup{
  width:38px;height:38px;flex:0 0 auto;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--ink-soft);
  font-size:.95rem;line-height:1
}
.nav-tutup:hover{background:rgba(74,20,140,.08);color:var(--utama-700)}

.main-nav{
  position:fixed;top:var(--tinggi-kepala);left:0;bottom:0;z-index:88;
  /* Tinggi ditegaskan tersendiri (tidak hanya bersandar pada top+bottom) supaya laci tetap
     terbuka penuh seandainya suatu saat ada leluhur ber-backdrop-filter/transform yang
     mengubah acuan posisi unsur position:fixed — lihat bug yang pernah terjadi di umametan. */
  height:calc(100vh - var(--tinggi-kepala));
  height:calc(100dvh - var(--tinggi-kepala));
  width:min(430px,92vw);
  display:flex;flex-direction:column;gap:14px;
  background:rgba(250,248,255,.99);backdrop-filter:blur(20px) saturate(180%);
  border-right:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:18px 20px 32px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-102%);visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),visibility .3s
}
.main-nav.terbuka{transform:none;visibility:visible}
body.nav-terbuka{overflow:hidden}

.nav-daftar{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.nav-daftar>li{display:flex;flex-wrap:wrap;align-items:center;position:relative;border-radius:12px}
.nav-daftar>li:hover{background:rgba(74,20,140,.05)}
.main-nav a{
  display:block;color:var(--ink-soft);font-weight:600;
  transition:background .2s,color .2s
}
.main-nav a.nav-utama{flex:1 1 auto;padding:.7rem .8rem;border-radius:12px;font-size:1rem;white-space:normal}
.main-nav a:hover{background:rgba(74,20,140,.08);color:var(--utama-700);text-decoration:none}
.main-nav a.aktif{background:rgba(74,20,140,.11);color:var(--utama-700);font-weight:700}

/* Tombol panah submenu — selalu tampil (submenu hanya terbuka bila ditekan) */
.nav-buka{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 auto;margin-right:2px;padding:0;
  background:transparent;border:0;border-radius:10px;cursor:pointer;
  color:var(--muted);font-size:.95rem;line-height:1;
  transition:transform .2s ease,background .2s ease,color .2s ease
}
.nav-buka:hover{background:rgba(74,20,140,.08);color:var(--utama-700)}
.nav-cabang.buka>.nav-buka{transform:rotate(180deg)}

/* Submenu: di dalam laci, mengalir biasa di bawah menunya (accordion) */
.nav-panel{display:none;width:100%;padding:0 2px 10px}
.nav-cabang.buka>.nav-panel{display:block}
.nav-panel-kotak{
  background:rgba(74,20,140,.05);border:1px solid rgba(74,20,140,.12);
  border-radius:14px;padding:12px 12px 14px
}
.nav-panel-isi,.nav-panel-isi.dua,
.nav-panel-daftar,.nav-panel-daftar.dua{display:grid;grid-template-columns:1fr;gap:1px}
.nav-panel-isi{gap:12px}
.nav-panel-judul{
  margin:0 0 4px;padding-left:.62rem;
  font-size:.69rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--emas)
}
.nav-panel a{padding:.5rem .62rem;border-radius:9px;font-size:.95rem;font-weight:500;line-height:1.45;white-space:normal}
.nav-panel a:hover{background:rgba(255,255,255,.9)}
.nav-panel-kaki{margin-top:12px;padding-top:10px;border-top:1px solid rgba(74,20,140,.14)}
.nav-panel-kaki a{font-weight:700;color:var(--utama-700)}

/* Program & halaman pendukung di kaki laci */
.nav-laci-kaki{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  display:grid;gap:8px
}
.nav-laci-judul-kaki{
  margin:0;padding-left:.62rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)
}
.nav-laci-daftar-kaki{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.nav-laci-daftar-kaki a{padding:.5rem .62rem;border-radius:10px;font-size:.94rem;font-weight:500}
.nav-laci-daftar-kaki a:hover{background:rgba(74,20,140,.08);color:var(--utama-700);text-decoration:none}
.nav-laci-peta{padding:.5rem .62rem;border-radius:10px;font-weight:700;font-size:.9rem;color:var(--utama-700)}

/* Lapisan gelap di belakang laci (klik untuk menutup) */
.nav-lapisan{
  position:fixed;inset:var(--tinggi-kepala) 0 0 0;z-index:86;
  background:rgba(27,16,51,.42);opacity:0;transition:opacity .3s ease
}
.nav-lapisan.tampil{opacity:1}

/* Tombol "ke atas" (dan dulu tombol WhatsApp melayang) disembunyikan saat laci terbuka supaya
   tidak menumpuk di atas isi menu — di layar ponsel laci (92vw) mencapai area tombol itu.
   Untuk widget live chat Tawk.to, penyembunyiannya lewat Tawk_API.hideWidget()/showWidget()
   di assets/js/main.js (widget itu iframe pihak ketiga, tidak bisa diatur dari CSS ini). */
.to-top{transition:opacity .25s ease}
body.nav-terbuka .to-top,
body.tawk-terbuka .to-top{opacity:0;pointer-events:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* Bilah garis tiga: tampil di semua ukuran layar, pojok kiri atas */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:42px;flex:0 0 auto;padding:0 11px;border-radius:12px;
  background:rgba(255,255,255,.8);border:1px solid var(--line);cursor:pointer;
  transition:background .2s ease,border-color .2s ease
}
.nav-toggle:hover{background:rgba(74,20,140,.08);border-color:rgba(74,20,140,.22)}
.nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--utama-700);transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- Umum section ---------------- */
.section{padding:clamp(48px,6vw,86px) 0}
.section-tight{padding:clamp(34px,4vw,58px) 0}
.section-head{max-width:760px;margin-bottom:clamp(26px,3vw,44px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emas);background:var(--emas-50);border:1px solid rgba(180,83,9,.18);
  padding:.38rem .86rem;border-radius:999px;margin-bottom:1rem
}
.eyebrow.pi{color:#4527A0;background:var(--aksen-50);border-color:rgba(94,53,177,.2)}
.eyebrow.utama{color:var(--utama-700);background:var(--utama-50);border-color:rgba(74,20,140,.18)}
.eyebrow.aksen{color:#4527A0;background:var(--aksen-50);border-color:rgba(94,53,177,.2)}
.eyebrow.emas{color:var(--emas);background:var(--emas-50);border-color:rgba(180,83,9,.18)}

/* Daftar periksa kelengkapan data (admin) */
.daftar-cek{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.daftar-cek li{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6);border:1px solid var(--line-soft)
}
.daftar-cek li.ok{border-color:rgba(74,20,140,.18)}
.daftar-cek .tanda{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;
  background:var(--utama-50);color:var(--utama-700);border:1px solid rgba(74,20,140,.2)
}
.daftar-cek li.belum .tanda{background:var(--emas-50);color:var(--emas);border-color:rgba(180,83,9,.24)}
.daftar-cek .r-main{font-weight:600;line-height:1.4}
.daftar-cek .r-meta{color:var(--muted);font-size:.89rem;line-height:1.5}
.daftar-cek .btn{margin-left:auto;flex:0 0 auto}
@media(max-width:640px){
  .daftar-cek li{flex-wrap:wrap}
  .daftar-cek .btn{margin-left:44px}
}
.section-head h2{margin-bottom:.55rem}
.section-head p{color:var(--muted);font-size:1.03rem;margin:0}
.lead{font-size:1.06rem;color:var(--ink-soft)}

.card{
  background:var(--card);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(22px,2.4vw,30px);
}
.card-solid{background:var(--card-solid)}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-roomy{gap:26px}

/* ---------------- Hero ---------------- */
.hero{position:relative;padding:clamp(38px,5vw,70px) 0 clamp(40px,5vw,72px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(38rem 26rem at 82% 8%,rgba(74,20,140,.13),transparent 62%),
    radial-gradient(30rem 22rem at 6% 88%,rgba(180,83,9,.12),transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);align-items:center}
.hero-title{
  font-size:clamp(2.5rem,7vw,4.4rem);letter-spacing:.02em;margin:0 0 .3rem;
  color:var(--utama-700);
  background:linear-gradient(120deg,var(--utama) 0%,var(--utama-500) 42%,var(--emas) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.hero-sub{
  font-family:var(--font-title);font-size:clamp(1.15rem,2.5vw,1.6rem);
  color:var(--emas);margin:0 0 1rem;font-weight:600
}
.hero-desc{font-size:1.06rem;color:var(--ink-soft);max-width:56ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.badge{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;
  padding:.44rem .9rem;border-radius:999px;background:rgba(255,255,255,.8);
  border:1px solid var(--line);color:var(--utama-700)
}
.badge.aksen{color:#4527A0;border-color:rgba(94,53,177,.22);background:var(--aksen-50)}
.badge.emas{color:var(--emas);border-color:rgba(180,83,9,.22);background:var(--emas-50)}

.hero-media{display:grid;gap:18px}
.hero-photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-lg);background:#EDE7F6
}
.hero-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 20px 14px;
  background:linear-gradient(180deg,transparent,rgba(24,8,48,.82));
  color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.01em
}
.hero-photo .tag-kode{
  position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--utama-700);
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.34rem .72rem;border-radius:999px
}

.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.stat{
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm);backdrop-filter:blur(16px)
}
/* Angka statistik = UNGU BRAND IKIPIE #4A148C (var(--utama)) — keputusan pengurus 30/09/2026
   ("pakai ungu tema ... IKIPIE #4A148C", BUKAN #4B2E83 dan bukan --utama-700 yang lebih gelap).
   Dijaga .uji/cek-warna-brand-angka.js */
/* Angka statistik = UNGU BRAND IKIPIE #4A148C (var(--utama)) & TEBAL 800 — keputusan pengurus
   30/09/2026. Dijaga .uji/cek-warna-brand-angka.js */
.stat strong{display:block;font-family:var(--font-title);font-size:1.7rem;font-weight:800;color:var(--utama);line-height:1.1}
.stat span{font-size:.84rem;color:var(--muted);font-weight:500}

/* ---------------- Page hero (halaman dalam) ---------------- */
.page-hero{
  position:relative;padding:clamp(40px,5vw,68px) 0 clamp(30px,3.4vw,48px);
  background:
    linear-gradient(135deg,rgba(74,20,140,.92) 0%,rgba(48,10,99,.9) 46%,rgba(180,83,9,.9) 100%);
  color:#fff;overflow:hidden
}
.page-hero::after{
  content:"";position:absolute;inset:0;opacity:.35;
  background:radial-gradient(28rem 20rem at 82% 12%,rgba(94,53,177,.5),transparent 62%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff;margin-bottom:.35rem}
.page-hero p{color:rgba(255,255,255,.9);max-width:70ch;margin:0}
.crumb{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:.8rem}
.crumb a{color:rgba(255,255,255,.9)}

/* ---------------- Program ---------------- */
.program-card{position:relative;overflow:hidden;padding:0}
.program-card .program-top{
  padding:clamp(24px,2.6vw,34px) clamp(22px,2.6vw,34px) 22px;
  color:#fff;position:relative
}
.program-card.utama .program-top{background:linear-gradient(135deg,var(--utama) 0%,var(--utama-500) 100%)}
.program-card.emas .program-top{background:linear-gradient(135deg,var(--emas) 0%,var(--emas-500) 100%)}
.program-card .program-top h3{color:#fff;margin:0}
.program-card .program-top span{
  display:block;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.82);font-weight:700;margin-bottom:.3rem
}
.program-card .program-body{padding:clamp(22px,2.6vw,30px)}
.program-icon{
  width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--utama-700);margin-bottom:16px;box-shadow:var(--shadow-sm)
}
.program-icon svg{width:32px;height:32px}
.program-card.emas .program-icon{color:var(--emas)}

.check-list{list-style:none;padding:0;margin:18px 0 0}
.check-list li{position:relative;padding-left:34px;margin-bottom:12px;color:var(--ink-soft)}
.check-list li::before{
  content:"";position:absolute;left:0;top:.28em;width:21px;height:21px;border-radius:50%;
  background:var(--utama-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A148C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat
}
.check-list.emas li::before{
  background-color:var(--emas-50);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
}

/* ---------------- Lambang (halaman Tentang Kami) ---------------- */
.lambang-utama{background:radial-gradient(circle at 50% 40%,#F7F2FE,#E9DFF8);padding:22px}
.lambang-utama img{aspect-ratio:1/1;object-fit:contain;padding:6px}

/* ---------------- Unit usaha ---------------- */
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.unit-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--card);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.72);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .22s ease
}
.unit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.unit-num{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-weight:800;font-size:1rem;color:#fff;
  background:linear-gradient(135deg,var(--utama) 0%,var(--utama-500) 100%);
  box-shadow:0 12px 22px -14px rgba(74,20,140,.9)
}
.unit-card:nth-child(3n+2) .unit-num{background:linear-gradient(135deg,var(--emas) 0%,var(--emas-500) 100%);box-shadow:0 12px 22px -14px rgba(180,83,9,.9)}
.unit-card:nth-child(3n+3) .unit-num{background:linear-gradient(135deg,var(--aksen) 0%,var(--aksen-500) 100%);box-shadow:0 12px 22px -14px rgba(94,53,177,.9)}
.unit-card h3{font-family:var(--font);font-size:1rem;font-weight:700;margin:0 0 .15rem}
.unit-card p{margin:0;font-size:.87rem;color:var(--muted)}

/* ---------------- Galeri ---------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{
  border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--ink-soft);
  padding:.5rem 1.05rem;border-radius:999px;font-size:.88rem;font-weight:600;cursor:pointer;
  font-family:var(--font);transition:all .2s ease
}
.chip:hover{border-color:var(--utama-300)}
.chip.aktif{background:linear-gradient(135deg,var(--utama) 0%,var(--utama-500) 100%);color:#fff;border-color:transparent}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.gallery-item{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);background:#EDE7F6
}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease}
.gallery-item:hover img{transform:scale(1.055)}
.gallery-item figcaption{
  position:absolute;inset:auto 0 0 0;padding:30px 16px 13px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(24,8,48,.85));
  font-size:.9rem;font-weight:600
}
.gallery-item .kat{
  position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);color:var(--utama-700);
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .66rem;border-radius:999px
}
.lightbox{
  position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:24px;
  background:rgba(22,7,45,.8);backdrop-filter:blur(6px)
}
.lightbox.terbuka{display:grid}
.lightbox img{max-width:min(1000px,94vw);max-height:82vh;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.lightbox .lb-caption{color:#fff;text-align:center;margin-top:16px;font-weight:600}
.lightbox .lb-close{
  position:absolute;top:20px;right:22px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer
}

/* ---------------- Video kegiatan (Pelayanan Kasih) ---------------- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px;align-items:stretch}
.video-item{
  margin:0;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(180%)
}
.video-bingkai{position:relative;width:100%;aspect-ratio:16/9;background:#14082B}
.video-bingkai iframe,.video-bingkai video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-tautan{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  aspect-ratio:16/9;padding:24px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#4A148C 0%,#300A63 55%,#B45309 100%)
}
.video-tautan .play-ico{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45)
}
.video-tautan .play-ico svg{width:26px;height:26px;margin-left:3px}
.video-tautan span:last-child{font-weight:600;font-size:.95rem;max-width:34ch;color:rgba(255,255,255,.92)}
.video-isi{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.video-isi h3{font-family:var(--font);font-size:1.04rem;font-weight:700;margin:0}
.video-isi p{color:var(--muted);font-size:.92rem;margin:0}
.video-baris{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}

/* ---------------- Dompet Pi ---------------- */
.wallet-card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);color:#fff;padding:clamp(24px,3vw,34px);
  background:linear-gradient(135deg,#300A63 0%,#7B1FA2 42%,#B45309 100%);
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.22)
}
.wallet-card::after{
  content:"";position:absolute;width:22rem;height:22rem;right:-6rem;top:-9rem;border-radius:50%;
  background:radial-gradient(circle,rgba(211,196,240,.42),transparent 66%)
}
.wallet-card *{position:relative;z-index:1}
.wallet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.wallet-label{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:700}
.wallet-balance{font-family:var(--font-title);font-size:clamp(2rem,5vw,2.9rem);margin:.25rem 0 .1rem;letter-spacing:.01em}
.wallet-sub{color:rgba(255,255,255,.82);font-size:.9rem;margin:0}
.wallet-foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;align-items:center}
.wallet-id{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:.5rem 1rem;font-size:.88rem;font-weight:600
}
.riwayat{list-style:none;padding:0;margin:0}
.riwayat li{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px dashed var(--line-soft)
}
.riwayat li:last-child{border-bottom:0}
.riwayat .r-main{font-weight:600;font-size:.96rem}
.riwayat .r-meta{font-size:.8rem;color:var(--muted)}
.riwayat .r-amount{font-weight:700;color:var(--utama-700);white-space:nowrap}
.riwayat .r-amount.minus{color:var(--emas)}

.notice{
  display:flex;gap:14px;align-items:flex-start;border-radius:var(--radius-sm);
  padding:16px 18px;font-size:.92rem;border:1px solid;margin:0 0 20px
}
.notice strong{display:block;margin-bottom:.15rem}
.notice.info{background:#fff8e6;border-color:rgba(180,120,0,.3);color:#7a5200}
.notice.aksen{background:var(--aksen-50);border-color:rgba(94,53,177,.25);color:#4527A0}
.notice.utama{background:var(--utama-50);border-color:rgba(74,20,140,.22);color:var(--utama-700)}
.notice.error{background:#fdeceb;border-color:rgba(180,40,30,.28);color:#8d221a}
.notice.sukses{background:var(--utama-50);border-color:rgba(74,20,140,.24);color:var(--utama-700)}

/* ---------------- Form ---------------- */
.form-grid{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.87rem;font-weight:700;color:var(--ink-soft);letter-spacing:.01em}
.field .hint{font-size:.78rem;color:var(--muted)}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=tel],select,textarea{
  width:100%;padding:.82rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(255,255,255,.85);font-family:var(--font);font-size:.97rem;color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--utama-300);box-shadow:0 0 0 4px rgba(74,20,140,.1)
}
textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* ---------------- Unggah Foto (admin) ---------------- */
input[type=file]{
  width:100%;padding:.7rem .8rem;border-radius:var(--radius-sm);border:1px dashed var(--line);
  background:rgba(255,255,255,.85);font-family:var(--font);font-size:.9rem;color:var(--ink-soft);
  cursor:pointer
}
input[type=file]::file-selector-button{
  margin-right:.8rem;padding:.5rem .9rem;border-radius:9px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--utama),var(--utama-500));color:#fff;font-weight:600;
  font-family:var(--font)
}
.foto-daftar{display:grid;gap:16px;margin-top:16px}
.foto-baris{
  display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.6);
  border:1px solid var(--line-soft)
}
.foto-mini{
  width:104px;height:74px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line-soft);background:var(--utama-50)
}
.foto-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto;gap:12px;align-items:end}
.foto-hapus{display:flex;align-items:center}
.foto-slot{display:grid;gap:18px;margin-top:16px}
.foto-slot-item{
  display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,260px) auto;
  gap:18px;align-items:center;padding:16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6);border:1px solid var(--line-soft)
}
.foto-slot-item > img{
  width:150px;height:100px;object-fit:cover;border-radius:12px;
  border:1px solid var(--line-soft);background:var(--utama-50)
}
/* Logo jangan dipotong (object-fit: cover) — ditampilkan utuh */
.foto-slot-item > img[alt="Logo Resmi IKIPIE Nusantara"]{object-fit:contain;background:#fff;padding:6px}
.foto-slot-form{display:grid;gap:10px}
.foto-slot .r-main{font-weight:600}
.foto-slot .r-meta{color:var(--muted);font-size:.86rem;line-height:1.55}
/* ---------------- Video kegiatan (admin) ---------------- */
.video-admin{display:grid;gap:16px;margin-top:16px}
.video-admin-item{padding:16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.6);border:1px solid var(--line-soft)}
.video-admin-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.video-admin-item .form-grid{gap:12px}
.video-admin-item .form-row{margin-bottom:2px}

@media(max-width:860px){
  .foto-baris{grid-template-columns:80px minmax(0,1fr)}
  .foto-mini{width:80px;height:58px}
  .foto-form{grid-template-columns:1fr;width:100%}
  .foto-hapus{grid-column:2}
  .foto-slot-item{grid-template-columns:1fr;justify-items:stretch}
  .foto-slot-item > img{width:100%;height:170px}
}

/* ---------------- Donasi ---------------- */
.bank-card{border-left:5px solid var(--emas);display:flex;flex-direction:column;gap:6px}
.bank-card .bank-name{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bank-card .bank-no{font-family:var(--font-title);font-size:1.5rem;color:var(--ink);letter-spacing:.03em}
.bank-card .bank-owner{font-size:.9rem;color:var(--ink-soft)}
.bank-card .bank-alamat{font-size:.82rem;color:var(--muted);line-height:1.55;margin-top:2px}
.bank-card .bank-alamat strong{color:var(--ink-soft);font-weight:600}
.copy-ok{color:var(--utama-700);font-weight:600;font-size:.82rem;opacity:0;transition:opacity .2s}
.copy-ok.tampil{opacity:1}

/* ---------------- Kontak ---------------- */
.kontak-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,38px);align-items:start}
.kontak-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px dashed var(--line-soft)}
.kontak-item:last-child{border-bottom:0}
.kontak-ico{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--utama-50);color:var(--utama-700)
}
.kontak-ico.aksen{background:var(--aksen-50);color:#4527A0}
.kontak-ico.emas{background:var(--emas-50);color:var(--emas)}
.kontak-ico svg{width:22px;height:22px}
.kontak-item h3{font-family:var(--font);font-size:.95rem;font-weight:700;margin:0 0 .15rem}
.kontak-item p{margin:0;color:var(--ink-soft);font-size:.95rem}
.map-frame{
  border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow);margin-top:24px;background:#EDE7F6
}
.map-frame iframe{width:100%;height:320px;border:0;display:block}

/* ---------------- Footer ---------------- */
.site-footer{
  margin-top:clamp(40px,5vw,72px);color:rgba(255,255,255,.86);
  background:linear-gradient(150deg,#300A63 0%,#1B1033 48%,#B45309 100%);
  padding-top:clamp(40px,4.6vw,64px)
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
.footer-brand{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.footer-brand img{width:52px;height:52px;border-radius:50%}
.footer-brand strong{display:block;font-family:var(--font-title);font-size:1.15rem;color:#fff}
.footer-brand span{font-size:.8rem;color:rgba(255,255,255,.7)}
.footer-desc{font-size:.92rem;color:rgba(255,255,255,.78);max-width:38ch}
.footer-vibe{font-size:.88rem;color:rgba(255,255,255,.72);border-left:2px solid rgba(211,196,240,.6);padding-left:12px}
.site-footer h4{color:#fff;font-family:var(--font);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1rem}
.footer-links,.footer-contact{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.55rem}
.footer-links a{color:rgba(255,255,255,.82);font-size:.92rem}
.footer-links a:hover{color:#fff}
.footer-contact li{margin-bottom:1rem;display:flex;flex-direction:column;gap:.1rem}
.footer-contact .fc-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(211,196,240,.85)}
.footer-contact a,.footer-contact span{color:#fff;font-size:.92rem;word-break:break-word}
.footer-bottom{
  margin-top:clamp(30px,3.4vw,48px);padding-top:20px;padding-bottom:26px;
  border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;align-items:center
}
.footer-bottom p{margin:0;font-size:.84rem;color:rgba(255,255,255,.7)}
.footer-bottom a{color:rgba(255,255,255,.85)}

/* ---------------- Mengambang ----------------
   Tombol WhatsApp melayang (.wa-float) dihapus 09/2026 — digantikan live chat Tawk.to
   (lihat inc/footer.php). Yang tersisa hanya tombol "ke atas".
   Aturan PENJAGA di bawah: pengunjung yang perambannya masih memegang halaman LAMA dari
   singgahan (halaman lama itu masih memuat tombol WhatsApp melayang) tetap tidak akan
   melihat tombolnya, karena gaya lamanya sudah tidak ada di berkas ini. Jangan dihapus
   selama masih ada kemungkinan halaman lama tersinggah di peramban pengunjung. */
.wa-float,.wa-float *{display:none !important;visibility:hidden !important;pointer-events:none !important}

/* ---------------- Anasir live chat Tawk.to di layar ponsel ----------------
   GELEMBUNG CHAT DIGESER NAIK 30px (permintaan pengurus 09/2026): bawaannya 20px dari sudut
   kanan bawah, sekarang 50px. Penggeseran itu TIDAK bisa dilakukan dari berkas ini — Tawk menulis
   posisinya sebagai GAYA SEBARIS ber-!important (`inset: auto 20px 20px auto !important`) sehingga
   apa pun di lembar gaya ini kalah; karena itu dikerjakan JS di `assets/js/tawk-ikipie.js`
   bagian 8 (dan diulang setiap widget digambar ulang). Tombol "ke atas" (.to-top) di atas sudah
   ikut dinaikkan 30px di DUA tempat: 88px -> 118px (aturan utama) dan 96px -> 126px (aturan
   layar <=760px di bawah), supaya jarak ke gelembung tetap seperti semula.

   Kartu pratinjau pesan Tawk.to (pembungkusnya ber-id "message-preview") lebarnya 350px —
   di layar ponsel (390px) itu 90% lebar layar sehingga MENUTUPI tombol hero
   PI MOLAKADI · PI KOLAKADI · "Lihat Ruang Belajar" (dilaporkan pengurus 09/2026).
   Di layar sesempit itu tidak ada tempat menggesernya tanpa menutupi konten lain, jadi di
   ponsel kartu itu tidak ditampilkan; gelembung chat di pojok kanan bawah tetap ada dan bisa
   diketuk untuk mulai mengobrol. Di layar lebar (>=1024px) perilakunya TIDAK diubah.
   Aturan yang sama juga dipasang dari JS (assets/js/tawk-ikipie.js bagian 7) supaya tetap
   berlaku seandainya Tawk mengganti id pembungkusnya. Uji: .uji/cek-gelembung-tawk-hp.js */
@media (max-width:1023px){
  #message-preview,
  #message-preview *{display:none !important;visibility:hidden !important;pointer-events:none !important}
}
.to-top{
  position:fixed;right:22px;bottom:118px;z-index:115;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.86);color:var(--utama-700);
  font-size:1.15rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .2s ease
}
.to-top.tampil{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:160;
  background:#1B1033;color:#fff;padding:.85rem 1.35rem;border-radius:999px;font-size:.92rem;
  font-weight:600;box-shadow:var(--shadow-lg);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);max-width:90vw
}
.toast.tampil{transform:translate(-50%,0)}
.toast.error{background:#8d221a}

/* ---------------- Panel admin ---------------- */
.admin-wrap{max-width:1020px}
.admin-tab{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.admin-tab a{
  padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.72);
  color:var(--ink-soft);font-size:.9rem;font-weight:600
}
.admin-tab a.aktif{background:linear-gradient(135deg,var(--utama),var(--utama-500));color:#fff;border-color:transparent}
.tabel-wrap{overflow-x:auto;border-radius:var(--radius-sm)}
table.tabel{width:100%;border-collapse:collapse;font-size:.9rem;background:rgba(255,255,255,.6)}
table.tabel th,table.tabel td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.tabel th{background:rgba(74,20,140,.07);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--utama-700)}
.pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pill.ok{background:var(--utama-50);color:var(--utama-700)}
.pill.wait{background:#fff6e0;color:#8a5b00}
.pill.no{background:#fdeae8;color:#8d221a}

/* ---------------- Animasi masuk ---------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.18,.85,.32,1)}
.reveal.muncul{opacity:1;transform:none}

/* ---------------- Responsif ---------------- */
/* Sejak navigasi memakai laci (bilah garis tiga di semua ukuran layar), kepala halaman
   TIDAK lagi perlu lebih lebar daripada isi halaman — dulu 1360px supaya 13 entri menu
   tetap satu baris. Sekarang kembali selebar isi (--container) agar rata dengan grid.
   Catatan: pengukuran lama di .uji/ukur-nav.js dan .uji/ukur-varian.js sudah tidak
   relevan (tidak ada lagi navigasi satu baris) — jangan dipakai sebagai acuan. */
/* Tagline merek disembunyikan di layar sempit (dulu selalu disembunyikan karena berebut
   tempat dengan menu satu baris) — di layar lebar sekarang bisa tampil lagi. */
.brand-text small{display:none}
@media (min-width:761px){
  .brand-text small{display:block}
}
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:1280px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{grid-template-columns:1fr 1fr;order:2}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kontak-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .section{padding:44px 0}
  .hero-stats{grid-template-columns:1fr;gap:14px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-media{grid-template-columns:1fr}
  .unit-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100%,1fr))}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .to-top{right:20px;bottom:126px}   /* 96px -> 126px: ikut naik 30px bersama gelembung chat Tawk */
}
@media (max-width:420px){
  .btn-actions{flex-direction:column;align-items:stretch}
  .btn-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.to-top,.site-footer{display:none}
  body{background:#fff}
}

/* ============================================================
   Halaman menu (10 menu) — dipakai inc/menu-web.php
   ============================================================ */
section[id],article[id]{scroll-margin-top:96px}

/* Kepala halaman menu */
.page-hero-ikon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:18px;margin-bottom:14px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff
}
.page-hero-ikon svg{width:30px;height:30px}
.page-hero-sub{
  font-family:var(--font-title);font-size:1.06rem;font-weight:600;
  color:rgba(255,255,255,.95);margin:.15rem 0 .7rem
}
.badge-taut{text-decoration:none}
.badge-taut:hover{background:#fff;text-decoration:none}

/* Kartu item menu */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.menu-kartu{display:flex;flex-direction:column;scroll-margin-top:100px}
.menu-kartu-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.menu-nomor{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.88rem;letter-spacing:.02em;
  background:var(--utama-50);color:var(--utama-700);border:1px solid rgba(74,20,140,.16)
}
.menu-kartu-head h3{margin:0 0 3px;font-size:1.06rem;line-height:1.35}
.menu-sub{margin:0;font-size:.875rem;font-weight:600;color:var(--emas);line-height:1.45}
.menu-ket{color:var(--ink-soft);font-size:.96rem;margin:0}
.menu-kartu .check-list{margin-top:14px}
.menu-kartu .check-list li{font-size:.94rem;margin-bottom:8px}
.menu-kartu .check-list li:last-child{margin-bottom:0}
.menu-aksi{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:auto;padding-top:20px
}
.menu-wa{font-size:.9rem;font-weight:700;color:var(--utama-700)}
.menu-wa:hover{color:var(--utama)}
.menu-jumlah{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)
}

/* Keterangan menu — kotak di bawah daftar isi menu */
.keterangan-menu{max-width:1000px;margin:0 auto}
.keterangan-menu h2{margin:.55rem 0 .2rem}
.keterangan-menu>p{color:var(--ink-soft)}
.keterangan-bagian{display:grid;gap:16px;margin-top:22px}
.keterangan-butir{
  padding:18px 20px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.62);border:1px solid var(--line-soft)
}
.keterangan-butir h3{margin:0 0 .4rem;font-size:1.02rem;color:var(--ink)}
.keterangan-butir p{margin:0;color:var(--ink-soft);font-size:.95rem}
.keterangan-menu .check-list{margin-top:18px}

/* Peta menu */
.peta-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.peta-kartu{display:flex;flex-direction:column;gap:12px}
.peta-head{display:flex;gap:14px;align-items:center}
.peta-ikon{
  flex:0 0 auto;width:48px;height:48px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:var(--utama-50);color:var(--utama-700);border:1px solid rgba(74,20,140,.16)
}
.peta-ikon svg{width:26px;height:26px}
.peta-ikon.emas{background:var(--emas-50);color:var(--emas);border-color:rgba(180,83,9,.18)}
.peta-ikon.aksen{background:var(--aksen-50);color:#4527A0;border-color:rgba(94,53,177,.2)}
.peta-head h3{margin:0;font-size:1.08rem}
.peta-head p{margin:0;font-size:.82rem;color:var(--muted);font-weight:600}
.peta-daftar{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.peta-daftar li{position:relative;padding-left:18px;font-size:.92rem;color:var(--ink-soft)}
.peta-daftar li::before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--utama-300)
}
.peta-daftar a{color:var(--ink-soft)}
.peta-daftar a:hover{color:var(--utama-700)}
.peta-kaki{margin-top:auto;padding-top:14px}

/* Kaki halaman */
.footer-links.dua{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.footer-links.dua li{margin-bottom:.5rem}
.footer-cta{
  display:inline-block;margin-top:10px;font-size:.86rem;font-weight:700;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.35)
}
.footer-cta:hover{text-decoration:none;border-bottom-color:#fff}

@media (max-width:760px){
  .menu-grid,.peta-menu{grid-template-columns:1fr;gap:18px}
  .menu-aksi{gap:10px}
  .footer-links.dua{grid-template-columns:1fr 1fr}
}

/* ---------------- Panel admin: tab Menu Web ---------------- */
.menu-admin-head{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)
}
.menu-admin-head h3{margin:0 0 .2rem}
.menu-admin-sub{margin:0;font-size:.85rem;color:var(--muted);font-weight:600}
.menu-admin-grup{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 18px 8px;margin:0;background:rgba(255,255,255,.5)
}
.menu-admin-grup>legend{
  padding:0 8px;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--utama-700)
}
.menu-admin-item{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;
  padding:16px 0;border-top:1px dashed var(--line-soft)
}
.menu-admin-item:first-of-type{border-top:0}
.menu-admin-nomor{
  width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.82rem;background:var(--utama-50);color:var(--utama-700);
  border:1px solid rgba(74,20,140,.16)
}
.menu-admin-item .form-grid{gap:14px}
.menu-admin textarea{font-family:var(--font);line-height:1.6}

@media (max-width:760px){
  .menu-admin-item{grid-template-columns:1fr}
  .menu-admin-grup{padding:14px 14px 6px}
}

/* ============================================================
   RUANG OBROLAN CLOUD + KEANGGOTAAN (09/2026)
   Tema tetap ungu tua & emas — hanya bentuk/komponen yang baru.
   ============================================================ */

/* ---------------- Tombol akun di kepala halaman ---------------- */
.akun-chip{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:999px;
  padding:4px 10px 4px 4px;text-decoration:none;color:var(--utama-700);font-weight:600;
  box-shadow:var(--shadow-sm);transition:background .2s ease,border-color .2s ease
}
.akun-chip:hover{background:#fff;border-color:rgba(74,20,140,.26);text-decoration:none}
.akun-chip-isi{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.akun-chip-isi:hover{text-decoration:none}
.akun-chip-avatar{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--utama-50);color:var(--utama-700);font-weight:800;font-size:.82rem;overflow:hidden
}
.akun-chip-avatar img{width:34px;height:34px;object-fit:cover;border-radius:50%}
.akun-chip-nama{font-size:.9rem;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.akun-chip-obrolan{
  position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:var(--utama-700);background:var(--utama-50)
}
.akun-chip-obrolan:hover{background:rgba(74,20,140,.16)}
.akun-chip-lencana{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--emas);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center
}
.akun-chip.masuk{gap:8px;padding:4px 14px 4px 6px}
.akun-chip.masuk .akun-chip-nama{color:var(--utama-700)}

/* ---------------- Kerangka mini-app ---------------- */
.obrolan-panel{display:grid;grid-template-columns:296px minmax(0,1fr);gap:22px;align-items:start}

.obrolan-sisi{
  background:var(--card);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px;position:sticky;top:calc(var(--tinggi-kepala) + 14px)
}
.obrolan-sisi-head h2{margin:0 0 .2rem;font-size:1.12rem}
.obrolan-sisi-head .hint{margin:0 0 14px}
.obrolan-daftar{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.obrolan-kamar{
  display:block;padding:11px 13px;border-radius:var(--radius-sm);text-decoration:none;
  background:rgba(255,255,255,.55);border:1px solid var(--line-soft);color:var(--ink-soft);
  transition:background .18s ease,border-color .18s ease,transform .18s ease
}
.obrolan-kamar:hover{background:#fff;border-color:rgba(74,20,140,.24);text-decoration:none;transform:translateX(2px)}
.obrolan-kamar.aktif{background:linear-gradient(135deg,rgba(74,20,140,.12),rgba(180,83,9,.10));border-color:rgba(74,20,140,.3)}
.obrolan-kamar.terkunci{opacity:.62;cursor:not-allowed}
.obrolan-kamar.terkunci:hover{transform:none;background:rgba(255,255,255,.55)}
.obrolan-kamar-nama{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--utama-700);font-size:.98rem}
.obrolan-kamar-ket{display:block;font-size:.79rem;color:var(--muted);line-height:1.5;margin-top:3px}
.obrolan-lencana{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--emas);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center
}
.obrolan-sisi-kaki{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);display:grid;gap:12px}
.obrolan-aku{display:flex;align-items:center;gap:10px}
.obrolan-aku-nama strong{display:block;font-size:.92rem;color:var(--utama-700)}
.obrolan-aku-nama small{color:var(--muted);font-size:.78rem}

/* ---------------- Jendela obrolan ---------------- */
.obrolan-jendela{
  background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.66);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column
}
.obrolan-kepala{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:18px 22px;background:linear-gradient(135deg,var(--utama) 0%,var(--utama-500) 100%);color:#fff
}
.obrolan-kepala h2{margin:0;color:#fff;font-size:1.16rem}
.obrolan-kepala p{margin:.18rem 0 0;color:rgba(255,255,255,.82);font-size:.85rem;max-width:56ch}
.obrolan-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.obrolan-online,.obrolan-jumlah{
  display:inline-flex;align-items:center;gap:6px;padding:.32rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);font-size:.76rem;font-weight:700
}
.obrolan-online i{width:8px;height:8px;border-radius:50%;background:#7CE38B;box-shadow:0 0 0 3px rgba(124,227,139,.28)}
.obrolan-online-daftar{
  display:flex;flex-wrap:wrap;gap:8px;padding:12px 22px;background:var(--utama-50);
  border-bottom:1px solid var(--line-soft)
}
.obrolan-online-anggota{
  display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-soft);
  border-radius:999px;padding:3px 10px 3px 3px;font-size:.78rem;font-weight:600;color:var(--ink-soft)
}
.obrolan-online-anggota img{width:22px;height:22px;border-radius:50%;object-fit:cover}

.obrolan-ruang{
  padding:20px 22px;display:flex;flex-direction:column;gap:16px;
  min-height:320px;max-height:min(62vh,620px);overflow-y:auto;overscroll-behavior:contain
}
.obrolan-pesan{display:flex;gap:12px;align-items:flex-start}
.obrolan-pesan.sendiri{flex-direction:row-reverse}
.obrolan-avatar{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--utama-50);color:var(--utama-700);font-weight:800;font-size:.86rem;overflow:hidden;
  border:1px solid rgba(74,20,140,.14)
}
.obrolan-avatar img{width:100%;height:100%;object-fit:cover}
.obrolan-avatar.kecil{width:38px;height:38px}
.obrolan-avatar.mini{width:22px;height:22px;font-size:.68rem}
.obrolan-badan{
  flex:1 1 auto;max-width:min(100%,74ch);background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-sm)
}
.obrolan-pesan.sendiri .obrolan-badan{background:linear-gradient(135deg,rgba(74,20,140,.07),rgba(180,83,9,.06))}
.obrolan-meta{margin:0 0 .35rem;font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.obrolan-meta strong{color:var(--utama-700);font-size:.88rem}
.obrolan-meta em{font-style:normal;color:var(--emas-700);font-weight:700}
.obrolan-meta time{margin-left:auto;white-space:nowrap;font-size:.74rem}
.obrolan-isi{margin:0;color:var(--ink-soft)}
.obrolan-dihapus{margin:0;color:var(--muted);font-style:italic;font-size:.9rem}
.obrolan-media{display:block;margin-top:10px;border-radius:var(--radius-sm);overflow:hidden;max-width:420px}
.obrolan-media img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.obrolan-video{display:block;margin-top:10px;width:100%;max-width:420px;border-radius:var(--radius-sm);background:#14082B}
.obrolan-berkas{
  display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:9px 13px;border-radius:var(--radius-sm);
  background:var(--utama-50);border:1px solid var(--line);color:var(--utama-700);font-weight:600;font-size:.9rem;
  word-break:break-all
}
.obrolan-berkas:hover{background:#fff;text-decoration:none}
.obrolan-hapus{
  margin-top:8px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);
  font-size:.76rem;text-decoration:underline
}
.obrolan-hapus:hover{color:#B91C1C}
.obrolan-kosong{
  display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;
  min-height:200px;padding:26px;color:var(--muted)
}
.obrolan-kosong strong{color:var(--utama-700);font-size:1.05rem}

/* ---------------- Kotak menulis ---------------- */
.obrolan-tulis{
  display:flex;align-items:flex-end;gap:10px;padding:14px 18px 4px;
  border-top:1px solid var(--line-soft);background:rgba(255,255,255,.66)
}
.obrolan-tulis textarea{
  flex:1 1 auto;resize:none;max-height:160px;padding:.72rem .9rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#fff;font:inherit;font-size:.96rem;line-height:1.6;color:var(--ink)
}
.obrolan-tulis textarea:focus{outline:2px solid var(--utama-300);outline-offset:1px}
.obrolan-lampir{
  display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:var(--radius-sm);
  background:var(--utama-50);border:1px solid var(--line);color:var(--utama-700);cursor:pointer
}
.obrolan-lampir:hover{background:rgba(74,20,140,.14)}
.obrolan-tulis .btn{flex:0 0 auto;height:44px}
.obrolan-bantuan{
  margin:0;padding:.55rem 18px 14px;font-size:.78rem;color:var(--muted);background:rgba(255,255,255,.66)
}
.obrolan-bantuan a{font-weight:600}

/* Daftar ruang untuk pengunjung yang belum masuk */
.obrolan-cuplikan{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.obrolan-cuplikan li{
  background:rgba(255,255,255,.6);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 14px
}
.obrolan-cuplikan strong{display:block;color:var(--utama-700)}
.obrolan-cuplikan span{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
.obrolan-cuplikan em{display:inline-block;margin-top:6px;font-style:normal;font-size:.74rem;font-weight:700;color:var(--emas)}

/* ---------------- Halaman profil anggota ---------------- */
.profil-baris{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.profil-avatar{
  width:120px;height:120px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--utama-50);color:var(--utama-700);font-weight:800;font-size:2rem;
  border:3px solid rgba(255,255,255,.8);box-shadow:var(--shadow-sm)
}
.profil-avatar img{width:100%;height:100%;object-fit:cover}
.form-inline{display:inline-flex;align-items:center;gap:8px}

@media (max-width:1080px){
  .obrolan-panel{grid-template-columns:1fr}
  .obrolan-sisi{position:static}
  .obrolan-ruang{max-height:56vh}
}
@media (max-width:760px){
  .akun-chip-nama{display:none}
  .akun-chip{padding:4px}
  .akun-chip.masuk{padding:4px 10px}
  .akun-chip.masuk .akun-chip-nama{display:inline}
  .obrolan-ruang{padding:16px;gap:14px;max-height:58vh}
  .obrolan-kepala{padding:14px 16px}
  .obrolan-tulis{padding:12px 12px 4px}
  .obrolan-bantuan{padding:.5rem 12px 12px}
  .obrolan-badan{max-width:100%}
  .profil-avatar{width:96px;height:96px;font-size:1.6rem}
}

/* Kotak "Akun untuk Ruang Obrolan Cloud" di formulir pendaftaran anggota */
.akun-daftar{
  background:var(--utama-50);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 18px 4px;display:grid;gap:14px
}
.akun-daftar h3{margin:0;font-size:1.06rem;color:var(--utama-700)}
.akun-daftar p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* Panel admin: baris "Atur sandi" yang bisa dibuka-tutup */
.sandi-baris{display:inline-block;margin-top:6px}
.sandi-baris summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--utama-700)}
.sandi-baris[open]{display:block}
.sandi-baris .form-grid,.sandi-baris .form-inline{margin-top:10px}
.sandi-baris .form-inline{flex-wrap:wrap}

/* ============================================================
   SUSUNAN MENU BARU (09/2026) — 4 MENU UTAMA + KEPALA PUTIH + POPPINS
   ============================================================
   1) Huruf situs: Poppins (diminta pengurus) — menggantikan Inter & Playfair Display.
   2) Kepala halaman: PUTIH (dulu ungu muda transparan).
   3) menu utama: bilah mendatar di layar ≥1150px (BERANDA + 4 dropdown + tombol kuning),
      laci dari kiri (bilah garis tiga) di layar sempit.
   4) Tombol "JUAL LINK PRIBADI": kuning #FFD700, teks hitam tebal, paling menonjol.
   Nama kelas lama (--utama/--emas/--aksen) TIDAK diubah — hanya dipakai sebagai slot warna.
   ============================================================ */
:root{
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-title:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --jual:#FFD700;
  --jual-gelap:#E6B800;
}

/* ---- Kepala halaman putih ---- */
.site-header{background:rgba(255,255,255,.94)}
.site-header.menggulir{
  background:rgba(255,255,255,.99);
  border-bottom-color:rgba(74,20,140,.14);
  box-shadow:0 14px 32px -26px rgba(48,10,99,.55)
}
.brand-text strong{color:var(--utama)}
.nav-toggle{background:#fff}

/* ---- Tombol kuning JUAL LINK PRIBADI (menu ke-4) ---- */
.btn-jual{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  background:var(--jual);color:#111 !important;font-weight:800;letter-spacing:.03em;
  border:2px solid var(--jual-gelap);border-radius:999px;
  padding:.62rem 1.05rem;font-size:.8rem;line-height:1.15;text-decoration:none;white-space:nowrap;
  box-shadow:0 12px 24px -14px rgba(224,168,0,.95);
  animation:kilau 2.8s ease-in-out infinite;
}
.btn-jual:hover{background:#FFE44D;text-decoration:none;transform:translateY(-2px)}
.jual-badge{
  background:#111;color:var(--jual);font-size:.64rem;font-weight:800;letter-spacing:.03em;
  padding:.18rem .5rem;border-radius:999px;white-space:nowrap
}
@keyframes kilau{
  0%,100%{box-shadow:0 10px 22px -14px rgba(224,168,0,.85)}
  50%{box-shadow:0 18px 32px -10px rgba(255,215,0,1)}
}
.jual-kepala{margin-left:auto}
/* Di kepala layar sempit badge disembunyikan (tempatnya terbatas); badge
   "Rp250.000/Pionir" tetap tampil di bilah menu (layar lebar) dan di dalam laci. */
.jual-kepala .jual-badge{display:none}
.jual-kepala + .akun-chip{margin-left:8px}

/* ---- Bilah menu utama (layar lebar) ---- */
.menu-bar{display:none;list-style:none;margin:0;padding:0}
.bar-cabang{position:relative;display:flex;align-items:center}

@media (min-width:1150px){
  /* Tagline merek disembunyikan saat bilah menu tampil: tulisannya panjang sehingga
     bilah menyusut dan tombol kuning terbelah dua baris. Tagline tetap tampil pada
     lebar 761–1149px (bila bilah menu belum tampil). */
  .brand-text small{display:none}
  .header-inner > .nav-toggle{display:none}
  .header-inner > .jual-kepala{display:none}
  .header-inner > .akun-chip{margin-left:12px}
  .menu-bar{display:flex;align-items:center;gap:0;margin-left:auto}
  /* Ukuran entri bilah sengaja lebih rapat (padding .55/.6, font .74rem) sejak menu
     KESEHATAN ditambahkan 09/2026: dengan 6 entri, ukuran lama membuat tombol kuning
     JUAL LINK PRIBADI terbelah dua baris (62px) pada 1150–1440px. Diuji .uji/ukur-kepala.js. */
  /* Ukuran entri bilah dirapatkan lagi 09/2026 (menu RUANG ANAK DESA ditambahkan):
     dengan 7 entri, ukuran sebelumnya membuat tombol kuning JUAL LINK PRIBADI terbelah
     dua baris (62px) pada 1150-1440px. Diuji .uji/ukur-kepala.js (18 lebar). */
  .bar-utama,.bar-taut{
    display:inline-flex;align-items:center;gap:.3rem;padding:.52rem .46rem;border:0;border-radius:12px;
    background:transparent;cursor:pointer;font-family:var(--font);font-size:.715rem;font-weight:700;
    letter-spacing:.02em;color:var(--ink-soft);text-decoration:none;white-space:nowrap
  }
  .bar-utama:hover,.bar-taut:hover,
  .bar-cabang.aktif > .bar-utama,.bar-taut.aktif{
    background:rgba(74,20,140,.08);color:var(--utama-700);text-decoration:none
  }
  .bar-panah{font-size:.68rem;transition:transform .2s ease}
  .bar-cabang.buka > .bar-utama .bar-panah{transform:rotate(180deg)}
  .bar-panel{
    position:absolute;top:calc(100% + 8px);left:0;z-index:95;min-width:300px;max-width:360px;
    background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
    padding:10px;display:none
  }
  .bar-cabang:hover > .bar-panel,
  .bar-cabang:focus-within > .bar-panel,
  .bar-cabang.buka > .bar-panel{display:block}
  .bar-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .bar-panel a{
    display:block;padding:.55rem .7rem;border-radius:11px;text-decoration:none;color:var(--ink-soft)
  }
  .bar-panel a:hover{background:var(--utama-50);text-decoration:none}
  .bar-panel a.aktif{background:var(--utama-50)}
  .bar-panel a strong{display:block;font-size:.92rem;font-weight:700;color:var(--ink)}
  .bar-ket{display:block;font-size:.76rem;color:var(--muted);line-height:1.4}
  .bar-tanda{
    display:inline-block;margin-top:3px;font-size:.66rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--emas-700)
  }
  .bar-panel-kaki{
    display:block;margin-top:8px;padding-top:9px;border-top:1px solid var(--line-soft);
    font-size:.85rem;font-weight:700;color:var(--utama-700)
  }
  .bar-jual{display:flex;align-items:center;margin-left:6px}
  .bar-jual .btn-jual{font-size:.72rem;padding:.5rem .78rem;gap:.38rem}
}

/* Sejak menu RUANG ANAK DESA ditambahkan (09/2026) bilah berisi 7 entri, sehingga badge
   harga di tombol kuning TIDAK muat lagi tanpa membuat tombolnya terbelah dua baris
   (kepala hanya selebar --container 1180px, jadi menambah lebar layar tidak menolong).
   Karena itu badge disembunyikan DI BILAH SAJA: harga tetap terbaca di dalam laci
   (ponsel/tablet), di peta menu, di kaki halaman, dan di halaman /jual-link.
   Tinggi tombol kuning tetap ≤46px — diuji .uji/ukur-kepala.js (18 lebar). */
@media (min-width:1150px){
  .bar-jual .btn-jual .jual-badge{display:none}
}

/* ---- Tombol kuning versi laci (menu ke-4 di dalam laci) ---- */
.main-nav a.nav-jual-taut{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--jual);color:#111;font-weight:800;border:2px solid var(--jual-gelap);
  border-radius:14px;padding:.85rem 1rem;font-size:.88rem;letter-spacing:.03em;
  box-shadow:0 14px 26px -18px rgba(224,168,0,.95)
}
.main-nav a.nav-jual-taut:hover{background:#FFE44D;color:#111;text-decoration:none}
.nav-jual{margin:6px 0 2px}

/* Penanda "Segera Hadir" di dalam submenu laci */
.nav-panel a .tanda-kecil{
  display:block;font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--emas-700)
}

/* ------------------------------------------------------------
   Halaman menu utama: kartu, "Segera Hadir", kotak kuning disclaimer
   ------------------------------------------------------------ */
.hal-kartu{display:flex;flex-direction:column;gap:12px}
.hal-kartu-head{display:flex;align-items:center;gap:14px}
.hal-kartu-head h3{margin:0}
.hal-kartu .hint,.hal-segera .hint{font-size:.82rem;color:var(--muted);line-height:1.6}
.hal-tanda{margin-top:2px}
.hal-kartu .menu-aksi{margin-top:auto}
.hal-segera{display:grid;gap:10px;justify-items:start}
.hal-segera h2{margin:.2rem 0 0}

.kotak-disclaimer{
  background:var(--jual);border:2px solid var(--jual-gelap);border-radius:var(--radius);
  padding:18px 22px;box-shadow:0 18px 36px -24px rgba(224,168,0,.95)
}
.kotak-disclaimer p{
  margin:0;color:#161100;font-weight:600;font-size:.92rem;line-height:1.66
}

/* ------------------------------------------------------------
   Halaman JUAL LINK PRIBADI (/jual-link)
   ------------------------------------------------------------ */
.paket-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.paket-kartu{display:flex;flex-direction:column;gap:14px;position:relative}
.paket-kartu.unggulan{border:2px solid var(--jual-gelap);box-shadow:0 28px 54px -30px rgba(224,168,0,.8)}
.paket-label{
  align-self:flex-start;background:var(--jual);color:#111;border:1px solid var(--jual-gelap);
  border-radius:999px;padding:.22rem .7rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase
}
.paket-kartu h3{margin:0;font-size:1.28rem}
.paket-untuk{margin:0;font-size:.86rem;color:var(--muted)}
.paket-harga{font-size:2rem;font-weight:800;color:var(--utama-700);margin:0;line-height:1.15}
.paket-harga small{display:block;font-size:.74rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.paket-kartu .check-list{margin:0}
.paket-kartu .menu-aksi{margin-top:auto}

.checkout-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
.checkout-box{display:grid;gap:16px}
.pil-paket{display:grid;gap:10px}
.pil-paket label{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:rgba(255,255,255,.7);cursor:pointer
}
.pil-paket input{width:18px;height:18px;accent-color:var(--utama)}
.pil-paket strong{display:block;font-size:.95rem}
.pil-paket span{font-size:.82rem;color:var(--muted)}
.pil-paket .pil-harga{margin-left:auto;font-weight:800;color:var(--utama-700);white-space:nowrap}
.metode-pil{display:flex;flex-wrap:wrap;gap:10px}
.metode-pil label{
  display:inline-flex;align-items:center;gap:8px;padding:.55rem .95rem;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.7);cursor:pointer;font-size:.88rem;font-weight:600
}
.metode-pil input{accent-color:var(--utama)}
.setuju-baris{display:flex;gap:12px;align-items:flex-start;font-size:.9rem}
.setuju-baris input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--utama)}
.ringkas-pesanan{display:grid;gap:8px}
.ringkas-pesanan .baris{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;border-bottom:1px dashed var(--line-soft);padding-bottom:7px}
.ringkas-pesanan .baris strong{color:var(--ink)}

.kotak-sukses{
  background:linear-gradient(135deg,rgba(74,20,140,.06),rgba(180,83,9,.08));
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.6vw,32px);display:grid;gap:14px
}
.kotak-sukses h2{margin:0}
.kotak-kode{
  display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px dashed var(--jual-gelap);
  border-radius:var(--radius-sm);padding:12px 16px;font-weight:800;letter-spacing:.08em
}
.link-pribadi{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#fff;border:2px solid var(--jual-gelap);
  border-radius:var(--radius-sm);padding:14px 16px;word-break:break-all
}
.link-pribadi code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;color:var(--utama-700)}
.pesan-galat{background:#fdeae8;border:1px solid #f3c4be;color:#8d221a;border-radius:var(--radius-sm);padding:12px 16px}
.pesan-galat ul{margin:.5rem 0 0;padding-left:1.2rem}
/* Catatan: kelas .catatan-simulasi (mode pembayaran simulasi) SUDAH DIHAPUS 09/2026 —
   pembayaran /jual-link kini nyata (transfer BRI + verifikasi pengurus). Penggantinya
   kelas .bayar-catatan di bawah. */

/* ------------------------------------------------------------
   TIGA KARTU PEMBAYARAN (/jual-link) — sejak 09/2026
   Kartu 1: BRI (biru, paling atas & paling besar) · Kartu 2: QRIS (putih) ·
   Kartu 3: Pi (ungu). Jangan menyembunyikan kartu 1 di layar sempit.
   ------------------------------------------------------------ */
.bayar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.bayar-kartu{
  display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.4vw,28px);border-radius:var(--radius);
  border:1px solid var(--line);background:var(--card);box-shadow:0 26px 52px -36px rgba(27,16,51,.5)
}
.bayar-kartu h3{margin:0;font-size:1.16rem;line-height:1.35}
.bayar-antar{margin:0;font-size:.92rem;line-height:1.7;color:var(--ink-soft)}
.bayar-kartu .menu-aksi{margin-top:auto}

/* --- Kartu 1: TRANSFER BANK BRI (warna biru BRI, menempati lebar penuh) --- */
.bayar-bri{
  grid-column:1 / -1;
  background:linear-gradient(140deg,#00539C 0%,#00396E 55%,#012A52 100%);
  border:1px solid #02315E;color:#EAF2FB;
  box-shadow:0 38px 66px -34px rgba(0,55,105,.9)
}
.bayar-bri h3{color:#fff;font-size:clamp(1.2rem,2.2vw,1.5rem)}
.bayar-bri .bayar-antar{color:rgba(255,255,255,.88)}
.bayar-kepala{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bayar-merek{
  flex:0 0 auto;background:#fff;color:#00539C;font-weight:900;letter-spacing:.08em;
  font-size:.95rem;padding:.5rem .75rem;border-radius:10px
}
.bayar-rek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bayar-baris{
  display:grid;gap:5px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  border-radius:14px;padding:13px 16px
}
.bayar-label{
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)
}
.bayar-nomor{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:.04em;
  font-size:clamp(1.02rem,1.9vw,1.42rem);color:#FFE44D;word-break:break-word
}
.bayar-nilai{font-weight:700;color:#fff;font-size:1.02rem;word-break:break-word}
.bayar-tombol{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bayar-salin{
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:#00539C;border:1px solid #fff;
  border-radius:999px;padding:.7rem 1.15rem;font-weight:800;font-size:.9rem;cursor:pointer;
  font-family:inherit;transition:transform .15s ease,box-shadow .15s ease
}
.bayar-salin:hover{transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(0,0,0,.75)}
.bayar-bri .copy-ok{color:#FFE44D}
.bayar-peringatan{
  display:flex;gap:10px;align-items:flex-start;margin:0;background:rgba(255,228,77,.14);
  border:1px dashed rgba(255,228,77,.55);border-radius:12px;padding:12px 16px;
  color:#FFF7CE;font-size:.86rem;font-weight:600;line-height:1.6
}

/* --- Kartu 2: QRIS (putih) --- */
.bayar-qris{background:#fff}
.qris-kotak{
  display:grid;gap:10px;justify-items:center;text-align:center;border:2px dashed var(--line);
  border-radius:16px;padding:clamp(20px,3vw,30px);background:var(--utama-50);flex:1
}
.qris-ikon{font-size:2.8rem;line-height:1;color:var(--utama)}
.qris-kotak strong{font-size:.98rem;color:var(--utama-700)}
.qris-kotak .hint{font-size:.82rem;line-height:1.6;max-width:34ch}
.qris-bingkai{margin:0;display:grid;justify-items:center}
.qris-bingkai img{
  width:100%;max-width:320px;height:auto;border-radius:14px;border:1px solid var(--line);background:#fff
}
/* Selama QRIS belum diunggah: rekening BRI ditampilkan langsung di kartu QRIS supaya
   pembeli tetap bisa membayar (09/2026, permintaan pengurus). */
.qris-bri{
  display:grid;gap:8px;justify-items:start;border:1px solid var(--line);border-radius:16px;
  padding:14px 16px;background:var(--utama-50)
}
.qris-bri-label{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--utama-700)
}
.qris-bri-nomor{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:.03em;
  font-size:clamp(1.02rem,1.7vw,1.3rem);color:var(--utama-700);word-break:break-word
}
.qris-bri .hint{font-size:.78rem;line-height:1.55}

/* --- Kartu 3: PI (ungu) --- */
.bayar-pi{
  background:linear-gradient(140deg,var(--utama) 0%,var(--aksen) 100%);
  border:1px solid rgba(74,20,140,.5);color:#F1EAFF;
  box-shadow:0 26px 52px -34px rgba(74,20,140,.75)
}
.bayar-pi h3{color:#fff}
.bayar-pi .bayar-antar{color:rgba(255,255,255,.9)}
.bayar-cek{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.bayar-cek li{position:relative;padding-left:26px;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.92)}
.bayar-cek li::before{content:"\2713";position:absolute;left:0;top:0;color:#FCD34D;font-weight:800}
.bayar-pi .menu-wa{color:#FDE68A}
.bayar-pi .menu-wa:hover{color:#fff}

/* Catatan informasi (memakai gaya lembut, bukan "simulasi") */
.bayar-catatan{
  display:flex;gap:10px;align-items:flex-start;background:var(--utama-50);
  border:1px solid rgba(74,20,140,.22);border-radius:var(--radius-sm);padding:12px 16px;
  font-size:.86rem;color:var(--utama-700);font-weight:600;line-height:1.65
}

/* Unggahan bukti transfer + pratinjaunya di formulir checkout */
.pratinjau-bukti{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:6px;
  background:rgba(255,255,255,.72);border:1px dashed var(--line);border-radius:var(--radius-sm);
  padding:12px;max-width:100%
}
.pratinjau-bukti img{
  width:100%;max-width:320px;height:auto;max-height:420px;object-fit:contain;
  border-radius:10px;border:1px solid var(--line);background:#fff
}
.pratinjau-nama{font-size:.8rem;color:var(--muted);word-break:break-all}

/* Dashboard verifikasi pesanan (/admin-pesanan) */
.pesanan-bukti{
  display:block;width:100%;max-width:420px;height:auto;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#fff
}
.pesanan-detail{display:grid;gap:14px}
.pesanan-aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* ------------------------------------------------------------
   PROGRAM KESEHATAN IKIPIE — /kesehatan (MOKODI & MAKODI)
   Kartu sejoli: MOKODI hijau #16a34a, MAKODI merah #dc2626.
   CATATAN KONTRAS (penting, jangan diubah tanpa menguji ulang):
   putih di atas #16a34a hanya berkontras ~2,96:1 (gagal WCAG), jadi SELURUH teks
   kartu diletakkan di panel/panel-dalam bernuansa lebih tua & solid:
   hijau #15803D (≈5,0:1) dan merah #B91C1C (≈6,4:1). Warna kartu #16a34a / #dc2626
   tetap dipakai apa adanya di badan kartu. Diuji oleh .uji/cek-kontras-ikipie.js.
   ------------------------------------------------------------ */
.sehat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.sehat-kartu{
  display:flex;flex-direction:column;gap:18px;padding:clamp(18px,2.2vw,24px);
  border-radius:22px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 34px 62px -34px rgba(11,20,40,.7)
}
.sehat-hijau{background:#16a34a;border:1px solid #12803F}
.sehat-merah{background:#dc2626;border:1px solid #B91C1C}

/* Kepala kartu: ikon mobil putih + nama program (panel lebih tua supaya tulisan terbaca) */
.sehat-kepala{
  display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;
  background:#15803D;border:1px solid rgba(255,255,255,.22)
}
.sehat-merah .sehat-kepala{background:#B91C1C}
.sehat-ikon{
  flex:0 0 auto;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.45);
  font-size:2.3rem;line-height:1;color:#fff
}
/* Ikon MOBIL PUTIH flat vector (hal_ikon_mobil()) di dalam lingkaran — bukan emoji, supaya
   bentuknya sama di semua perangkat. Ukurannya dijaga ≥56px agar jelas seperti poster. */
.sehat-ikon svg{width:56px;height:35px;display:block}
.sehat-identitas{display:grid;gap:4px;min-width:0}
.sehat-judul{
  margin:0;font-size:clamp(1.75rem,3.4vw,2.35rem);line-height:1;letter-spacing:.06em;color:#fff
}
.sehat-panjang{
  margin:0;font-size:1.06rem;font-weight:800;line-height:1.45;color:#fff
}

/* Kotak slogan putih (tulisan gelap) */
.sehat-slogan{
  display:grid;gap:2px;margin:0;background:#fff;border-radius:16px;padding:12px 18px;
  font-size:1.32rem;font-weight:800;letter-spacing:.02em;line-height:1.3;color:#14532D;
  box-shadow:0 16px 30px -22px rgba(0,0,0,.55)
}
.sehat-merah .sehat-slogan{color:#7F1D1D}
.sehat-slogan-label{
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#3F6212
}
.sehat-merah .sehat-slogan-label{color:#9A3412}

/* Daftar keterangan: panel lebih tua + tanda centang */
.sehat-daftar{
  list-style:none;margin:0;padding:18px 20px;display:grid;gap:12px;
  background:#15803D;border:1px solid rgba(255,255,255,.22);border-radius:18px
}
.sehat-merah .sehat-daftar{background:#B91C1C}
.sehat-daftar li{
  position:relative;padding-left:26px;font-size:.95rem;line-height:1.65;color:#fff
}
.sehat-daftar li::before{
  content:"\2713";position:absolute;left:0;top:0;font-weight:800;color:#FFE44D
}

/* Blok NOMOR DARURAT MAKODI (24 jam) — pakai nomor WhatsApp resmi IKIPIE.
   Panel putih + tulisan merah tua supaya jelas terbaca di kartu merah. */
.sehat-darurat{
  display:grid;gap:6px;background:#fff;border:2px solid rgba(0,0,0,.12);border-radius:16px;
  padding:14px 18px;box-shadow:0 16px 30px -22px rgba(0,0,0,.55)
}
.sehat-darurat-label{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9A3412
}
.sehat-darurat-nomor{
  display:inline-flex;align-items:center;gap:8px;font-size:1.24rem;font-weight:800;
  letter-spacing:.02em;color:#B91C1C;text-decoration:none;word-break:break-word
}
.sehat-darurat-nomor:hover{color:#7F1D1D;text-decoration:none}
.sehat-darurat-ket{font-size:.82rem;line-height:1.6;color:#7F1D1D}
.sehat-darurat-ket a{color:#B91C1C;font-weight:700}

/* Tombol aksi: hijau/merah (sesuai kartu) + kuning "Donasi" */
.sehat-tombol{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.sehat-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  padding:.85rem 1.3rem;border-radius:999px;font-weight:800;font-size:.94rem;line-height:1.3;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease
}
.sehat-btn:hover{transform:translateY(-2px);text-decoration:none}
.sehat-btn-hijau{
  background:#0F6B33;color:#fff;border:2px solid rgba(255,255,255,.6)
}
.sehat-btn-hijau:hover{color:#fff;background:#0B5628}
.sehat-btn-merah{
  background:#991B1B;color:#fff;border:2px solid rgba(255,255,255,.6)
}
.sehat-btn-merah:hover{color:#fff;background:#7F1D1D}
.sehat-btn-kuning{
  background:#FFD700;color:#111;border:2px solid #E6B800
}
.sehat-btn-kuning:hover{color:#111;background:#FFE44D}

/* Kotak BIRU DONGKER (ajakan donasi MOKODI & MAKODI) */
.sehat-kotak{
  display:grid;gap:16px;background:#0F2E5E;border:1px solid #0B2347;border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);box-shadow:0 30px 56px -34px rgba(15,46,94,.85)
}
.sehat-kotak-teks{
  margin:0;color:#fff;font-size:1rem;font-weight:600;line-height:1.75;max-width:110ch
}
.sehat-kotak-tombol{display:flex;flex-wrap:wrap;gap:12px}
.sehat-kotak-taut{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,228,77,.7);border-radius:999px;padding:.7rem 1.2rem;
  color:#FFE44D;font-weight:800;font-size:.9rem;text-decoration:none
}
.sehat-kotak-taut:hover{background:rgba(255,255,255,.2);color:#FFF7CE;text-decoration:none}

/* ------------------------------------------------------------
   Kaki halaman: baris identitas komunitas
   ------------------------------------------------------------ */
.footer-identitas{
  margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center
}
.footer-identitas-teks{margin:0;font-size:.84rem;color:rgba(255,255,255,.82);max-width:78ch}
.footer-identitas-taut{margin:0;font-size:.84rem}
.footer-identitas-taut a{color:var(--jual);font-weight:700}

/* Halaman Syarat & Ketentuan */
.syarat-bagian{display:grid;gap:2px}
.syarat-bagian h2{font-size:1.28rem;margin:0 0 .2rem}
.syarat-bagian + .syarat-bagian{margin-top:22px}
.syarat-isi{display:grid;gap:26px}
.syarat-meta{font-size:.82rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.syarat-poin{margin:.2rem 0 0}

/* ------------------------------------------------------------
   Responsif halaman baru
   ------------------------------------------------------------ */
@media (max-width:1149px){
  .btn-jual{font-size:.74rem;padding:.5rem .8rem}
  .jual-badge{font-size:.6rem;padding:.16rem .42rem}
}
@media (max-width:900px){
  .paket-grid,.checkout-grid{grid-template-columns:1fr}
  .bayar-grid{grid-template-columns:1fr}
  .bayar-rek{grid-template-columns:1fr}
  .sehat-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  /* Kartu kesehatan berdampingan menjadi satu kolom: kepala kartu ditumpuk supaya
     ikon & nama program tidak berdesakan di layar ponsel. */
  .sehat-kepala{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .sehat-ikon{width:64px;height:64px;font-size:1.8rem}
  .sehat-ikon svg{width:44px;height:28px}
  .sehat-slogan{font-size:1.18rem}
  .sehat-darurat-nomor{font-size:1.1rem}
  /* Layar sempit: nama merek tetap tampil, yang dirapatkan justru label "Masuk"
     (ikonnya sudah jelas) — supaya tombol kuning JUAL LINK tetap dapat tempat. */
  .brand-text strong{font-size:1rem}
  .header-inner{gap:10px}
  .header-inner > .akun-chip{padding:4px}
  .akun-chip.masuk .akun-chip-nama{display:none}
}
@media (max-width:460px){
  .jual-kepala{font-size:.7rem;padding:.42rem .7rem}
}

/* Tombol bayar di formulir checkout: kuning, besar, selebar kartu (tanpa animasi kilau).
   white-space:normal WAJIB: aturan .btn-jual di kepala halaman memakai nowrap, dan pada
   layar sempit teks tombol yang panjang itu membuat seluruh formulir melebar. */
.checkout-box .btn-jual{width:100%;font-size:1rem;padding:1rem 1.5rem;animation:none;white-space:normal;line-height:1.35}
.checkout-box .paket-label{margin:0}

/* Nomor bulat di kartu halaman (dipakai daftar sasaran MILOI & sejenisnya):
   warna ditulis jelas supaya angkanya tidak putih-di-atas-putih. */
.hal-nomor{
  flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--emas-50);color:var(--emas-700);border:1px solid rgba(180,83,9,.22);
  font-weight:800;font-size:1.05rem;letter-spacing:.02em
}

/* ============================================================
   RUANG ANAK DESA (09/2026) — MOLAKADI · KOLAKADI · RUANG BELAJAR
   Dipakai: beranda (slider hero, 2 kartu besar, bagian Ruang Belajar),
   halaman /molakadi, /kolakadi, /ruang-belajar.
   ============================================================ */

/* ---- Slider hero beranda (3 foto: MOLAKADI, KOLAKADI, RUANG BELAJAR) ---- */
.hero-anak{position:relative;overflow:hidden;isolation:isolate;background:#300A63}
.hero-anak-jalur{position:absolute;inset:0}
.hero-anak-slide{
  position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility .8s ease
}
.hero-anak-slide.aktif{opacity:1;visibility:visible}
.hero-anak-foto{width:100%;height:100%;object-fit:cover;display:block}
.hero-anak-lapisan{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(48,10,99,.94) 0%,rgba(48,10,99,.76) 42%,rgba(48,10,99,.42) 100%)
}
.hero-anak-isi{
  position:relative;z-index:2;color:#fff;
  padding:clamp(52px,7vw,104px) 0 clamp(96px,11vw,138px)
}
.hero-anak h1{
  color:#fff;font-size:clamp(1.75rem,4vw,2.95rem);line-height:1.12;margin:.35rem 0 .5rem;max-width:26ch
}
.hero-anak-sub{color:#FFD54A;font-weight:800;font-size:clamp(1.02rem,2.1vw,1.42rem);margin:0 0 .6rem}
.hero-anak-teks{color:rgba(255,255,255,.9);max-width:62ch;font-size:1.03rem}
.hero-anak .btn-actions{margin-top:22px}
.anak-eyebrow{
  color:#FFD54A;background:rgba(255,255,255,.14);border-color:rgba(255,213,74,.45)
}
/* Keterangan foto yang sedang tampil: pita di kaki slider. */
.hero-anak-ket{position:absolute;left:0;right:0;bottom:16px;margin:0}
.hero-anak-ket .container{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.hero-anak-ket strong{color:#fff;font-size:clamp(.98rem,1.7vw,1.2rem)}
.hero-anak-ket-kecil{color:rgba(255,255,255,.82);font-size:.9rem}
.hero-anak-tag{
  display:inline-flex;align-items:center;background:var(--jual);color:#111;font-weight:800;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.34rem .8rem;
  border-radius:999px;text-decoration:none
}
.hero-anak-tag:hover{background:#FFE44D;color:#111;text-decoration:none}
/* Kendali slider (panah + titik) ditaruh di aliran isi supaya tidak menumpuk apa pun. */
.hero-anak-kendali{display:flex;align-items:center;gap:12px;margin-top:24px}
.hero-anak-panah{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease
}
.hero-anak-panah:hover{background:rgba(255,255,255,.3)}
.hero-anak-nav{display:flex;gap:8px}
.hero-anak-titik{
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.25)
}
.hero-anak-titik.aktif{background:var(--jual);border-color:var(--jual)}

/* ---- Dua kartu besar MOLAKADI & KOLAKADI ---- */
.anak-kartu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.anak-kartu{padding:0;overflow:hidden;display:flex;flex-direction:column}
.anak-kartu figure{margin:0}
.anak-kartu figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.anak-kartu-isi{display:grid;gap:10px;padding:22px 24px 26px}
.anak-kartu-isi h3{font-size:1.22rem;margin:0}
.anak-kartu-slogan{color:var(--emas);font-weight:800;margin:0}
.anak-kartu-isi .check-list{margin-top:4px}
.anak-kartu-isi .menu-aksi{margin-top:auto;padding-top:6px}

/* ---- Bagian RUANG BELAJAR & BERLATIH di beranda (latar foto gabungan) ---- */
.ruang-anak-band{position:relative;overflow:hidden;isolation:isolate;background:#300A63}
.ruang-anak-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ruang-anak-lapisan{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(48,10,99,.94) 0%,rgba(74,20,140,.8) 48%,rgba(48,10,99,.55) 100%)
}
.ruang-anak-isi{position:relative;z-index:2;color:#fff;padding:clamp(46px,6.5vw,92px) 0}
.ruang-anak-isi h2{color:#fff;max-width:34ch}
.ruang-anak-teks{color:rgba(255,255,255,.9);max-width:70ch}
.ruang-anak-isi .btn-actions{margin-top:24px}

/* ---- Halaman /molakadi, /kolakadi, /ruang-belajar ---- */
.anak-hero{position:relative;overflow:hidden;isolation:isolate;background:#300A63}
.anak-hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anak-hero-lapisan{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(48,10,99,.95) 0%,rgba(74,20,140,.8) 55%,rgba(48,10,99,.52) 100%)
}
.anak-hero-isi{position:relative;z-index:2;color:#fff;padding:clamp(44px,5.5vw,84px) 0 clamp(50px,6vw,88px)}
.anak-hero h1{color:#fff;max-width:26ch;margin-bottom:.4rem}
.anak-hero .hero-badges{margin-top:20px}
.crumb-terang{color:rgba(255,255,255,.8)}
.crumb-terang a{color:#FFD54A}
.anak-slogan{color:#FFD54A;font-weight:800;font-size:clamp(1.02rem,2.1vw,1.4rem);margin:.2rem 0 .4rem}

.anak-dua{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,42px);align-items:start}
.anak-foto{margin:0;display:grid;gap:10px}
.anak-foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow-lg)
}
.anak-foto figcaption{font-size:.85rem;color:var(--muted)}
.anak-sub{margin-top:20px;font-size:1.08rem}

.anak-jadwal{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.anak-jadwal li{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:14px;padding:12px 16px
}
.anak-jadwal strong{color:var(--utama-700);min-width:132px}
.anak-fasilitas{margin-top:18px}
.anak-lokasi{
  display:grid;gap:10px;justify-items:start;
  background:linear-gradient(135deg,rgba(74,20,140,.08),rgba(180,83,9,.08));
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.6vw,34px)
}

/* ---- Tombol maju/mundur di lightbox galeri (dibuat oleh main.js) ---- */
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;font-size:1.7rem;line-height:1;
  background:rgba(255,255,255,.9);color:#300A63;box-shadow:var(--shadow)
}
.lb-nav:hover{background:#fff}
.lb-prev{left:clamp(10px,3vw,36px)}
.lb-next{right:clamp(10px,3vw,36px)}

@media (max-width:900px){
  .anak-kartu-grid,.anak-dua{grid-template-columns:1fr}
  /* Pita keterangan foto tetap di kaki slider; tinggi isi ditambah supaya
     tulisan judul/slogan tidak bertumpuk dengan pita itu di layar sempit. */
  .hero-anak-isi{padding-bottom:clamp(132px,26vw,168px)}
  .hero-anak-ket-kecil{display:none}
}

/* ---- HP PENDEK: rapatkan hero supaya gelembung chat tidak menutupi tombolnya ----------------
   Permintaan pengurus 09/2026: gelembung live chat Tawk.to (64x60, 20px dari sudut kanan bawah)
   jangan menutupi tombol hero PI MOLAKADI · PI KOLAKADI · "Lihat Ruang Belajar".
   Di layar ponsel PENDEK (<=760px) tombol ke-3 itu jatuh tepat di jalur gelembung, jadi di sana
   saja padding atas + jarak antar unsur dirapatkan dan dua tombol pertama disusun berdampingan.
   Di ponsel tinggi (>=761px) tata letak hero TIDAK diubah sama sekali — di sana gelembungnya
   sudah berada di bawah kendali slider (ruang kosong hero), bukan di atas tombol.
   Uji: .uji/cek-gelembung-tawk-hp.js (mengukur di 360x640, 375x667, 390x700, 390x780, 412x844). */
@media (max-width:1023px) and (max-height:760px){
  .hero-anak-isi{padding-top:30px}
  .hero-anak h1{font-size:1.6rem}
  .hero-anak .btn-actions{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .hero-anak .btn-actions .btn{width:100%}
  .hero-anak .btn-actions .btn:nth-child(3){grid-column:1 / -1}
  .hero-anak-kendali{margin-top:14px}
}
@media (max-width:620px){
  .anak-jadwal strong{min-width:0}
  .lb-nav{width:44px;height:44px;font-size:1.4rem}
}

/* ==============================================================
   KAPASITAS KAMAR OBROLAN (GEMSPACE 1.000 peserta) — 09/2026
   Dipakai obrolan.php: keterangan "N / 1.000 peserta" di daftar
   ruang, kepala jendela obrolan, dan halaman /gemspace.
   ============================================================== */
.obrolan-kamar-tempat{
  display:block;margin-top:6px;font-size:.74rem;font-weight:700;letter-spacing:.2px;
  color:var(--utama);opacity:.85
}
.obrolan-tempat{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  background:var(--emas-50);border:1px solid rgba(180,83,9,.22);color:var(--emas);
  font-size:.76rem;font-weight:700
}

/* ---- Halaman /gemspace ---- */
.gem-tempat{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  margin-top:8px
}
.gem-angka{
  background:linear-gradient(135deg,rgba(74,20,140,.06),rgba(180,83,9,.06));
  border:1px solid rgba(74,20,140,.14);border-radius:var(--radius);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px
}
/* Angka statistik GEMSPACE = UNGU BRAND IKIPIE #4A148C (var(--utama)) — keputusan pengurus
   30/09/2026 (sama seperti .stat strong di atas). Dijaga .uji/cek-warna-brand-angka.js */
.gem-angka strong{font-size:1.8rem;font-weight:800;line-height:1.1;color:var(--utama)}
.gem-angka span{font-size:.82rem;color:var(--muted);font-weight:600}
.gem-bar{
  height:14px;border-radius:999px;background:rgba(74,20,140,.12);overflow:hidden;margin-top:16px
}
.gem-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--utama),var(--emas))
}
.gem-penuh{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 14px;
  border-radius:999px;background:#FFFBEB;border:1px solid rgba(180,83,9,.3);
  color:#7C2D12;font-weight:700;font-size:.85rem
}
.gem-aturan{margin:0;padding-left:1.1rem}
.gem-aturan li{margin-bottom:10px;line-height:1.65}
.gem-cta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px
}

/* ============================================================
   MEGA MENU IKIPIE (09/2026, permintaan pengurus)
   Kepala LENGKET dua baris:
     baris 1 = merek + tombol PI CALL CENTER & WALLET LOGIN
     baris 2 = mega menu 6 entri + pencarian + tombol kuning JUAL LINK PRIBADI
   Palet kepala/kaki = HIJAU TUA #0A4D2A + AKSEN ORANYE Pi #FFA500 (permintaan pengurus).
   Halaman isi tetap memakai tema ungu tua & emas — kepala & kaki jadi "bingkai" hijau.
   Nama variabel lama (--utama/--emas/--aksen) TIDAK diubah.
   ============================================================ */
:root{
  --nat:#0A4D2A;          /* hijau tua kepala & kaki */
  --nat-700:#062B18;      /* hijau paling tua */
  --nat-500:#12653A;      /* hijau terang (hover) */
  --nat-300:#7FB79A;      /* hijau pucat (garis/pemisah) */
  --nat-50:#EAF5EF;
  --pi:#FFA500;           /* oranye Pi (aksen) */
  --pi-700:#8A5A00;       /* oranye tua KHUSUS TEKS di atas putih (kontras 5,9:1 —
                             #C97D00 hanya 3,3:1 sehingga gagal WCAG untuk teks kecil) */
  --pi-50:#FFF4E0;
  --tinggi-baris1:64px;   /* tinggi baris merek */
  --tinggi-marquee:22px;  /* tinggi bar TULISAN BERJALAN di paling atas (lihat .marquee) */
  --tinggi-kepala:calc(64px + var(--tinggi-marquee));   /* tinggi kepala + bar marquee (dipakai laci & lapisan) */
}

/* ---------- Tulisan berjalan (marquee) di PALING ATAS halaman ----------
   Permintaan pengurus 09/2026: bar tipis (bukan tinggi), latar hijau paling tua, tulisan
   ORANYE terang #FF7A00, huruf besar & tebal, berjalan kanan→kiri tanpa henti, selebar
   layar, dan LENGKET di atas kepala halaman saat digulir. Markahnya di inc/header.php
   (dipakai SEMUA halaman).
   Tinggi bar ini WAJIB ikut terhitung di --tinggi-kepala, karena laci menu (.main-nav) dan
   lapisan gelapnya diposisikan dari --tinggi-kepala; kalau tingginya diubah di sini,
   perbarui juga --tinggi-marquee (dan itu otomatis menggeser --tinggi-kepala). */
.marquee{
  position:sticky;top:0;z-index:92;height:var(--tinggi-marquee);
  background:var(--nat-700);border-bottom:1px solid rgba(255,122,0,.35);
  /* WAJIB: isi marquee jauh lebih lebar dari layar — tanpa ini halaman jadi bisa digulir ke samping. */
  overflow:hidden;color:#FF7A00
}
.marquee-lacak{display:flex;align-items:center;height:100%;width:max-content;animation:marqueeJalan 26s linear infinite}
.marquee-isi{
  display:inline-flex;align-items:center;gap:1.5rem;height:100%;padding:0 0 0 1.5rem;
  font-family:var(--font);font-size:.68rem;font-weight:800;letter-spacing:.16em;
  line-height:1.2;text-transform:uppercase;white-space:nowrap
}
.marquee-pisah{font-size:.6rem;color:rgba(255,122,0,.55)}
@keyframes marqueeJalan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Pengunjung yang perambannya meminta gerakan seminim mungkin: tulisan berhenti, tetap terbaca. */
@media (prefers-reduced-motion:reduce){ .marquee-lacak{animation:none} }

/* ---------- Kepala hijau tua (dua baris) ---------- */
.site-header{
  background:var(--nat);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.site-header.menggulir{
  background:var(--nat-700);
  border-bottom-color:rgba(255,165,0,.35);
  box-shadow:0 16px 34px -26px rgba(0,0,0,.75)
}
.header-inner{min-height:var(--tinggi-baris1);gap:12px}
.brand-text strong{color:#fff}
.brand-text small{color:rgba(255,255,255,.72)}
.nav-toggle{background:transparent;border-color:rgba(255,255,255,.28)}
.nav-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.nav-toggle span{background:#fff}

/* ---------- Tombol layanan: PI CALL CENTER & WALLET LOGIN ---------- */
.kepala-aksi{display:flex;align-items:center;gap:10px;margin-left:auto}
.btn-aksi{
  display:inline-flex;align-items:center;gap:.45rem;padding:.52rem .9rem;border-radius:999px;
  font-size:.73rem;font-weight:800;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  border:2px solid transparent;transition:transform .18s ease,background .18s ease,box-shadow .18s ease
}
.btn-aksi:hover{text-decoration:none;transform:translateY(-2px)}
.btn-aksi-panggil{background:#fff;color:var(--nat);border-color:rgba(255,255,255,.75);box-shadow:0 10px 20px -14px rgba(0,0,0,.6)}
.btn-aksi-panggil:hover{background:var(--nat-50)}
.btn-aksi-wallet{background:var(--pi);color:#3A2400;border-color:var(--pi-700);box-shadow:0 12px 22px -12px rgba(255,165,0,.9)}
.btn-aksi-wallet:hover{background:#FFB733}
.site-header .akun-chip-isi{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.site-header .akun-chip-isi:hover{background:rgba(255,255,255,.24)}
.site-header .akun-chip-nama{color:#fff}

/* ---------- Bilah mega menu (baris 2) ---------- */
.mega-baris{position:relative;padding-left:22px;padding-right:22px}
.mega-bar{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid rgba(255,255,255,.14);
  min-height:46px
}
.mega-daftar{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.mega-cabang{position:static}
.mega-utama{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .58rem;border:0;border-radius:12px;
  background:transparent;cursor:pointer;font-family:var(--font);font-size:.74rem;font-weight:700;
  letter-spacing:.03em;color:#fff;white-space:nowrap;transition:background .18s ease,color .18s ease
}
.mega-emoji{font-size:1rem;line-height:1}
.mega-teks{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.mega-ket{display:none}
.mega-panah{font-size:.66rem;transition:transform .22s ease;color:var(--pi)}
.mega-utama:hover,.mega-cabang.aktif>.mega-utama,.mega-cabang.terbuka>.mega-utama{background:rgba(255,255,255,.14);color:#fff}
.mega-cabang.terbuka>.mega-utama .mega-panah{transform:rotate(180deg)}
/* WALLET IKIPIE — menu penting, disorot oranye */
.mega-cabang.mega-pi>.mega-utama{background:var(--pi);color:#3A2400;box-shadow:0 10px 20px -14px rgba(255,165,0,.95)}
.mega-cabang.mega-pi>.mega-utama .mega-panah{color:#3A2400}
.mega-cabang.mega-pi.terbuka>.mega-utama,.mega-cabang.mega-pi>.mega-utama:hover{background:#FFB733}
.mega-jual{margin-left:auto;font-size:.7rem;padding:.45rem .8rem;gap:.35rem}

/* Pencarian seluruh menu (tombol kaca pembesar di bilah) */
.mega-cari-global{position:relative}
.mega-cari-tombol{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer
}
.mega-cari-tombol:hover{background:rgba(255,255,255,.26)}
.mega-cari-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:120;width:min(420px,86vw);display:none;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px
}
.mega-cari-global.terbuka .mega-cari-panel{display:block;animation:megaMasuk .2s ease both}
.mega-cari-global-input{
  width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px;font-family:var(--font);
  font-size:.92rem;color:var(--ink);background:#fff
}
.mega-hasil{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;max-height:min(330px,50vh);overflow:auto}
.mega-hasil a{display:block;padding:.5rem .6rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.mega-hasil a:hover{background:var(--nat-50);text-decoration:none}
.mega-hasil strong{display:block;font-size:.9rem}
.mega-hasil span{display:block;font-size:.75rem;color:var(--muted)}
.mega-hasil-kosong{margin:10px 0 0;font-size:.85rem;color:var(--muted)}

/* ---------- Panel mega menu (fade-in, lebar penuh mengikuti wadah) ---------- */
.mega-panel{
  position:absolute;top:100%;left:0;right:0;z-index:110;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease
}
.mega-cabang.terbuka>.mega-panel{opacity:1;visibility:visible;transform:none}
@media (hover:hover){
  .mega-cabang:hover>.mega-panel,
  .mega-cabang:focus-within>.mega-panel{opacity:1;visibility:visible;transform:none}
}
.mega-panel-isi{
  background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;
  box-shadow:0 30px 60px -34px rgba(6,43,24,.55);padding:18px 20px 16px;
  /* Layar pendek (mis. laptop 768px): panel TERPANJANG (DESENTRALISASI, 719px) akan
     terpotong karena kepala lengket, jadi tingginya dibatasi & isinya bisa digulir. */
  max-height:calc(100vh - var(--tinggi-kepala) - 22px);overflow:auto
}
.mega-panel-kepala{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:16px}
.mega-panel-judul{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:.06em;color:var(--nat);font-size:.86rem;text-transform:uppercase}
.mega-cari-kotak{
  display:flex;align-items:center;gap:.5rem;flex:1 1 220px;max-width:340px;margin-left:auto;
  background:var(--nat-50);border:1px solid rgba(10,77,42,.18);border-radius:999px;padding:.35rem .8rem;color:var(--nat)
}
.mega-cari-kotak input{
  flex:1 1 auto;border:0;background:transparent;font-family:var(--font);font-size:.86rem;color:var(--ink);
  padding:.2rem 0;min-width:0
}
.mega-cari-kotak input:focus{outline:none}
.mega-kolom{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-panel.lebar-1 .mega-kolom{grid-template-columns:minmax(0,1fr)}
.mega-panel.lebar-3 .mega-kolom{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-panel.lebar-4 .mega-kolom{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-grup{min-width:0}
.mega-grup-judul{
  display:flex;align-items:center;gap:.4rem;margin:0 0 .6rem;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pi-700)
}
.mega-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-item>a{
  display:flex;align-items:flex-start;gap:.55rem;padding:.46rem .55rem;border-radius:11px;
  text-decoration:none;color:var(--ink);font-size:.9rem;line-height:1.4
}
.mega-item>a:hover{background:var(--nat-50);text-decoration:none}
.mega-item-ikon{font-size:1rem;line-height:1.3}
.mega-item-isi{min-width:0}
.mega-item-isi strong{display:block;font-weight:600;color:var(--ink-soft)}
.mega-item-ket{display:block;font-size:.76rem;color:var(--muted);line-height:1.45}
.mega-item-anaktanda{
  flex:0 0 auto;margin-left:auto;align-self:center;min-width:20px;text-align:center;
  background:var(--nat-50);color:var(--nat);font-size:.68rem;font-weight:800;border-radius:999px;padding:.1rem .35rem
}
.mega-item.unggulan>a{background:var(--pi-50);border:1px solid rgba(255,165,0,.4)}
.mega-item.unggulan>a strong{color:#6B3F00}
.mega-item.segera .mega-item-isi strong::after{content:" · Segera Hadir";font-size:.72rem;font-weight:700;color:var(--pi-700);letter-spacing:.02em}
.mega-anak{list-style:none;margin:2px 0 .5rem;padding-left:16px;border-left:2px solid var(--nat-50);display:grid;gap:1px}
.mega-anak-item>a{display:flex;gap:.4rem;align-items:flex-start;padding:.34rem .5rem;border-radius:9px;text-decoration:none;color:var(--ink-soft);font-size:.85rem;line-height:1.4}
.mega-anak-item>a:hover{background:var(--nat-50);text-decoration:none}
.mega-anak-titik{color:var(--pi-700);font-size:.7rem;line-height:1.6}
.mega-anak-dalam{list-style:none;margin:0 0 .4rem;padding-left:18px;display:grid;gap:1px}
.mega-anak-dalam a{display:block;padding:.28rem .45rem;border-radius:8px;font-size:.82rem;color:var(--muted);text-decoration:none}
.mega-anak-dalam a:hover{background:var(--nat-50);text-decoration:none}
.mega-panel-kaki{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.mega-panel-taut{font-weight:800;font-size:.85rem;color:var(--nat);text-decoration:none}
.mega-panel-taut:hover{text-decoration:none;color:var(--nat-500)}
.mega-kosong{font-size:.82rem;color:var(--pi-700);font-weight:700}

/* ---------- Penjelas arti awalan "PI" (= PELAYANAN INDEPENDEN) ----------
   Permintaan pengurus 09/2026: pengunjung yang membuka mega menu harus langsung paham
   arti awalan PI pada nama layanan (PI MALOI, PI MOKODI, …). Kalimatnya SATU sumber di
   inc/mega-menu.php → mega_pi_baris() dan dipakai di panel, laci, peta menu, kaki halaman. */
.mega-pi-arti{
  display:flex;align-items:flex-start;gap:.55rem;margin:0 0 16px;
  padding:.55rem .8rem;border-radius:12px;
  background:var(--nat-50);border:1px solid rgba(10,77,42,.16);
  color:var(--nat-700);font-size:.79rem;line-height:1.45
}
.mega-pi-tanda{
  flex:0 0 auto;background:var(--nat);color:#fff;border-radius:999px;
  padding:.14rem .5rem;font-size:.68rem;font-weight:800;letter-spacing:.08em
}
.mega-pi-teks{min-width:0;display:block}
.mega-pi-teks strong{letter-spacing:.02em;color:var(--nat)}
.mega-pi-teks em{display:block;font-style:normal;font-size:.74rem;color:var(--muted);margin-top:.1rem}
/* Di dalam laci & kartu peta menu jaraknya sudah diatur wadahnya (grid gap).
   Kartu peta menu bertema ungu tua (seperti kartu lain di halaman itu), jadi warnanya ikut ungu —
   jangan diseragamkan dengan hijau kepala tanpa alasan. */
.mega-pi-arti-laci,.mega-pi-arti-peta{margin:0}
.mega-pi-arti-peta{background:var(--utama-50);border-color:rgba(74,20,140,.16);color:var(--utama-700)}
.mega-pi-arti-peta .mega-pi-tanda{background:var(--utama);color:#fff}
.mega-pi-arti-peta .mega-pi-teks strong{color:var(--utama)}
/* Di layar ponsel, kalimat penjelasnya disembunyikan di LACI saja (menjadi sangat panjang
   karena kolomnya sempit) — kalimat pokoknya "PI = PELAYANAN INDEPENDEN" tetap terbaca. */
@media (max-width:620px){
  .mega-pi-arti-laci .mega-pi-teks em{display:none}
}
/* Di kaki halaman (latar hijau tua) — versi terang. */
.mega-pi-arti-kaki{margin:0 0 18px;max-width:900px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.88)}
.mega-pi-arti-kaki .mega-pi-tanda{background:var(--pi);color:#3A2400}
.mega-pi-arti-kaki .mega-pi-teks strong{color:#fff}
.mega-pi-arti-kaki .mega-pi-teks em{color:rgba(255,255,255,.78)}

/* Kolom GAMBAR di mega menu (EKOSISTEM) */
.mega-banner{
  position:relative;overflow:hidden;border-radius:16px;background:var(--nat-700);color:#fff;
  display:flex;flex-direction:column;min-height:190px
}
.mega-banner img{width:100%;height:118px;object-fit:cover}
.mega-banner-isi{padding:12px 14px 16px;display:flex;flex-direction:column;gap:.4rem}
.mega-banner-isi strong{font-family:var(--font);font-size:.95rem;line-height:1.35}
.mega-banner-isi span{font-size:.79rem;color:rgba(255,255,255,.82);line-height:1.5}
.mega-banner-btn{align-self:flex-start;margin-top:.2rem;font-size:.68rem;padding:.4rem .7rem}

@keyframes megaMasuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mega-panel,.mega-cari-panel,.mega-utama,.mega-panah,.btn-aksi{transition:none !important;animation:none !important}
}

/* ---------- Laci (ponsel & tablet): accordion mega menu ---------- */
.nav-emoji{margin-right:.45rem}
.nav-daftar-mega .nav-utama{font-size:.98rem;font-weight:700}
.nav-daftar-mega .nav-cabang.nav-pi>.nav-utama{background:var(--pi);color:#3A2400}
.nav-daftar-mega .nav-cabang.nav-pi>.nav-buka{color:#3A2400}
.nav-cari-umum{padding:0 14px 10px}
.nav-cari-umum .mega-cari-kotak{max-width:none;margin-left:0}
.nav-panel-mega li{padding-bottom:2px}
.nav-anak{list-style:none;margin:2px 0 6px;padding:0 0 0 14px;display:grid;gap:1px;border-left:2px solid rgba(10,77,42,.14)}
.nav-anak a{padding:.36rem .5rem;font-size:.88rem;border-radius:9px}
.nav-anak-dalam{list-style:none;margin:0;padding:0 0 4px 14px;display:grid;gap:1px}
.nav-anak-dalam a{padding:.3rem .45rem;font-size:.83rem;color:var(--muted)}
.nav-laci-kaki .nav-laci-daftar-kaki a em{display:block}
.nav-laci-judul-kaki + .nav-laci-daftar-kaki, .nav-daftar-mega{margin-bottom:6px}

/* ---------- Kaki halaman: hijau tua + kolom per mega menu ---------- */
.site-footer{
  background:linear-gradient(150deg,var(--nat-500) 0%,var(--nat) 46%,var(--nat-700) 100%);
  border-top:4px solid var(--pi)
}
.site-footer h4{color:#fff}
.footer-links a{color:rgba(255,255,255,.84)}
.footer-identitas{border-top-color:rgba(255,255,255,.2)}
.footer-menu{
  margin-top:clamp(30px,3.4vw,48px);padding-top:26px;border-top:1px solid rgba(255,255,255,.2)
}
.footer-menu-judul{
  margin:0 0 18px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pi)
}
.footer-menu-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.footer-menu-kolom h4{
  display:flex;align-items:center;gap:.4rem;font-size:.76rem;letter-spacing:.1em;margin-bottom:.7rem
}
.footer-menu-kolom .footer-links li{margin-bottom:.45rem}
.footer-menu-kolom .footer-links a{font-size:.87rem}
.footer-anak{list-style:none;margin:.15rem 0 .55rem;padding-left:14px;display:grid;gap:1px}
.footer-anak a{font-size:.8rem;color:rgba(255,255,255,.7)}
.footer-anak a:hover{color:#fff}

/* ---------- Halaman "Segera Hadir" bersama ---------- */
.segera-kartu{display:grid;gap:14px}
.segera-kartu h2{font-size:1.3rem;margin:0}
.segera-baris{margin:0;font-size:.86rem;color:var(--muted)}
.segera-kartu-kecil h3{font-size:1.05rem}

/* ---------- Peta menu: kolom & emoji ---------- */
.peta-emoji{font-size:1.5rem;line-height:1}
.peta-kolom{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:12px}
.peta-grup-judul{margin:0 0 .45rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pi-700)}
.peta-anak,.peta-anak-dalam{list-style:none;margin:.3rem 0 0;padding-left:14px;display:grid;gap:2px}
.peta-anak a{font-size:.86rem;color:var(--ink-soft)}
.peta-anak-dalam a{font-size:.82rem;color:var(--muted)}

/* ---------- Sisi kanan bilah: penjelas "PI" + tombol kuning JUAL LINK ----------
   Wadah ini memakai margin-left:auto supaya keduanya menempel di ujung kanan, dan
   penjelas PI benar-benar bersebelahan dengan tombolnya (jarak 10px). */
.mega-kanan{display:flex;align-items:center;gap:10px;margin-left:auto}
.mega-kanan .mega-jual{margin-left:0}
/* Penjelas ringkas "PI = PELAYANAN INDEPENDEN" di kepala — kalimatnya dari
   inc/mega-menu.php → mega_pi_bilah() (satu sumber); lebarnya DIBATASI di sini supaya
   kalimat itu membungkus jadi dua baris pendek, bukan memanjang sampai keluar wadah.
   Dua tempat: di BILAH samping tombol kuning (≥1200px) dan di BARIS MEREK samping tombol
   PI CALL CENTER/WALLET LOGIN (1150–1199px) — hanya SATU yang tampil di tiap lebar,
   aturannya ada di bawah (diukur .uji/ukur-kepala.js). */
.mega-pi-bilah{
  display:none;max-width:118px;padding:.16rem .46rem;border-radius:10px;
  background:rgba(6,43,24,.5);border:1px solid rgba(255,255,255,.22);
  font-size:.62rem;font-weight:800;letter-spacing:.03em;line-height:1.18;
  text-transform:uppercase;color:#fff;text-align:left
}
/* Chip ini memakai latar hijau LEBIH TUA dari kepala (rgba(6,43,24,.5) di atas #0A4D2A)
   supaya teks oranye Pi di atasnya tetap lolos kontras WCAG untuk teks kecil:
   oranye ≈ 6,3:1 dan putih ≈ 12,5:1 (diukur .uji/ukur-kepala.js & .uji/cek-mega-menu.js).
   Jangan dikembalikan ke latar putih transparan — oranye Pi di atasnya hanya ≈3,7:1. */
.mega-pi-bilah-kunci{color:var(--pi);font-weight:800}
.mega-pi-bilah-teks{color:#fff}
/* ≥1200px: chip di BILAH, di samping tombol kuning JUAL LINK PRIBADI. */
@media (min-width:1200px){ .mega-pi-bilah:not(.mega-pi-bilah-baris1){display:inline-block} }
/* 1150–1199px: tempat di bilah tidak cukup (tersisa 115px, chip perlu 128px), jadi chip
   yang sama tampil di BARIS MEREK — di samping tombol PI CALL CENTER & WALLET LOGIN.
   Di bawah 1150px keduanya tersembunyi (bilah tersembunyi; artinya tetap terbaca di
   panel menu, laci, peta menu, dan kaki halaman). */
@media (min-width:1150px) and (max-width:1199px){ .mega-pi-bilah-baris1{display:inline-block} }

/* ---------- Tombol JUAL LINK PRIBADI ---------- */
/* Badge harga disembunyikan DI BILAH saja (≥1150px): di situ tempatnya tidak cukup sehingga
   tombolnya terbelah dua baris (tinggi 54px, diukur .uji/ukur-kepala.js). Badge
   "Rp250.000/Pionir" tetap tampil di dalam laci (ponsel/tablet), peta menu, kaki halaman,
   dan halaman /jual-link. */
@media (min-width:1150px){ .mega-jual .jual-badge{display:none} }

/* ---------- Bilah mega menu dirapatkan (SEMUA lebar ≥1150px) ----------
   Kepala hanya selebar --container (1180px), jadi menambah lebar layar TIDAK menambah
   tempat: isi bilah (6 judul + pencarian + tombol kuning + penjelas PI) tidak akan muat
   dengan ukuran longgar. Dulu perapatan ini hanya berlaku 1150–1249px, akibatnya pada
   1250px ke atas tombol kuning terbelah dua baris (tinggi 54px) — diukur .uji/ukur-kepala.js,
   dan pada 1440px bilahnya melebihi wadahnya ~20px. Sekarang dipakai di semua ≥1150px
   (pengecualian: badge harga tombol disembunyikan — lihat aturan di atasnya). */
@media (min-width:1150px){
  .mega-utama{padding:.44rem .36rem;font-size:.68rem;gap:.3rem}
  .mega-emoji{font-size:.9rem}
  .mega-panah{font-size:.6rem}
  .mega-jual{font-size:.65rem;padding:.42rem .62rem;gap:.3rem}
  .mega-cari-tombol{width:34px;height:34px}
  .mega-bar{gap:8px}
}

/* ---------- Kepala layar sempit: tombol jadi ikon saja ---------- */
@media (max-width:1149px){
  .mega-baris,.mega-bar{display:none}
  .brand-text small{display:none}
  .btn-aksi{padding:.5rem;border-radius:12px}
  .btn-aksi-teks{display:none}
  .brand-text strong{font-size:1.02rem}
  .mega-cari-global{display:none}
}
@media (max-width:600px){
  .header-inner{gap:8px}
  .brand-text strong{font-size:.92rem}
  .kepala-aksi{gap:6px}
  .btn-aksi-wallet,.btn-aksi-panggil{padding:.45rem}
}

/* ---------- Desktop: kepala dua baris (bilah mega menu tampil) ---------- */
@media (min-width:1150px){
  /* 120px = tinggi kepala desktop; ditambah tinggi bar tulisan berjalan di paling atas.
     Nilai ini dipakai laci menu (.main-nav) & lapisan gelapnya — lihat --tinggi-marquee. */
  :root{--tinggi-kepala:calc(120px + var(--tinggi-marquee))}
  .header-inner>.nav-toggle{display:none}
  .mega-teks{flex-direction:row;align-items:center;gap:.35rem}
  .mega-ket{display:none}
  .brand-text small{display:block}
}


/* ============================================================
   LAYANAN UMUM — MENU BAWAAN PERMANEN dalam bentuk KARTU (09/2026)
   ============================================================
   Permintaan pengurus: bagian MENU BAWAAN PERMANEN di beranda diganti jadi
   KARTU, dan dibuat halaman /layanan-umum/ berisi 3 kartu besar yang rinciannya
   terbuka di halaman itu sendiri. Palet yang diminta: hijau tua #0f3d2e &
   kuning #ffcc33 — dipakai KHUSUS untuk bagian/kartu ini; isi halaman lain
   tetap ungu tua & emas sesuai tema situs.

   Kartu ringkas (beranda) = <a class="lu-kartu"> → /layanan-umum/#<kunci>
   Kartu besar  (halaman)  = <details class="lu-item"> + <summary class="lu-kepala">
   Keduanya memakai grid yang sama (ikon · nama/anak judul/tanda · panah) dan
   dirender lu_kartu_badan() yang sama di inc/halaman.php, jadi tampilannya
   konsisten. Panah berputar lewat aturan [open] kartunya masing-masing. */
:root{
  --lu-hijau:#0f3d2e;
  --lu-hijau-500:#166b4c;
  --lu-kuning:#ffcc33;
  --lu-kuning-50:#fff6d9;
  --lu-teks:#43584e;     /* tulisan sekunder di kartu (kontras ≥ 4.5:1 di atas putih) */
  --lu-tanda:#5a4a10;    /* tulisan di dalam tanda kuning muda */
  --lu-kotak:#fbfefc;    /* latar isi kartu besar */
}
.lu-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.lu-daftar{display:grid;gap:20px}
.lu-kartu,.lu-kepala{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;
  column-gap:16px;row-gap:5px;align-items:start
}

/* ---- kartu ringkas di beranda (seluruh kartunya = tautan) ---- */
.lu-kartu{
  padding:20px;border-radius:18px;text-decoration:none;background:var(--card-solid);
  border:1px solid var(--line);border-top:4px solid var(--lu-hijau);box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease
}
.lu-kartu:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(15,61,46,.16)}
.lu-kartu:focus-visible{outline:3px solid var(--lu-kuning);outline-offset:2px}
.lu-kartu .lu-kaki{grid-column:1/-1}

/* ---- bagian kartu yang dipakai bersama (beranda & halaman) ---- */
.lu-ikon{
  grid-column:1;grid-row:1/4;width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
  background:var(--lu-kuning);color:var(--lu-hijau)
}
.lu-ikon svg{width:30px;height:30px}
.lu-nama{grid-column:2;margin:0;font-size:1.05rem;font-weight:800;letter-spacing:.02em;color:var(--lu-hijau);line-height:1.25}
.lu-sub{grid-column:2;font-size:.87rem;color:var(--lu-teks)}
.lu-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.lu-tags span{
  background:var(--lu-kuning-50);border:1px solid #f2dfa6;border-radius:999px;
  padding:3px 9px;font-size:.72rem;font-weight:600;color:var(--lu-tanda)
}
.lu-kaki{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)
}
.lu-kaki-teks{font-size:.84rem;font-weight:700;letter-spacing:.02em;color:var(--lu-hijau)}
.lu-panah-bulat{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--lu-hijau);color:var(--lu-kuning);font-size:1.15rem;font-weight:700;line-height:1
}
.lu-aksi{justify-content:center;margin-top:26px}
.lu-catatan{margin:16px 0 0;text-align:center}

/* ---- kartu besar ber-akordeon di halaman /layanan-umum/ ---- */
.lu-item{
  background:var(--card-solid);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-sm);overflow:hidden
}
.lu-item[open]{border-color:#cfe3d8;box-shadow:0 18px 36px rgba(15,61,46,.15)}
.lu-kepala{padding:20px;cursor:pointer;list-style:none;background:#fff}
.lu-kepala::-webkit-details-marker{display:none}
.lu-kepala::marker{content:''}
.lu-kepala:hover{background:#f5fbf7}
.lu-kepala:focus-visible{outline:3px solid #9ed3bb;outline-offset:-3px}
/* panah: digambar dari dua sisi kotak; berputar sendiri saat kartunya terbuka */
.lu-panah-kotak{
  grid-column:3;grid-row:1/4;align-self:center;width:11px;height:11px;margin-right:6px;
  border-right:2.6px solid var(--lu-hijau);border-bottom:2.6px solid var(--lu-hijau);
  transform:rotate(45deg);transition:transform .25s ease
}
.lu-item[open] .lu-panah-kotak{transform:rotate(-135deg)}
.lu-isi{padding:2px 20px 20px;border-top:1px solid var(--line);background:var(--lu-kotak)}
.lu-butir{padding-top:14px}
.lu-butir h4{margin:0 0 4px;font-size:1.02rem;font-weight:800;color:var(--lu-hijau);letter-spacing:.02em}
.lu-butir-sub{margin:0 0 8px;font-size:.82rem;font-weight:700;color:var(--lu-hijau-500)}
.lu-butir p{margin:0 0 12px;font-size:.92rem;line-height:1.65;color:var(--lu-teks)}
.lu-btn{
  display:inline-block;padding:.6rem 1.1rem;border-radius:999px;background:var(--lu-hijau);color:#fff;
  font-weight:700;font-size:.86rem;text-decoration:none
}
.lu-btn:hover{background:var(--lu-hijau-500)}

/* ---- kepala halaman /layanan-umum/ (hijau tua, tulisan putih & kuning) ---- */
.lu-hero{background:linear-gradient(135deg,var(--lu-hijau),#14664a);color:#fff;padding:32px 0 30px}
.lu-hero .container{display:grid;gap:10px}
.lu-hero h1{margin:0;color:#fff;font-size:clamp(1.55rem,3.4vw,2.25rem);letter-spacing:.04em}
.lu-hero-sub{margin:0;font-weight:700;color:var(--lu-kuning)}
.lu-hero-ringkas{margin:0;max-width:64ch;color:#e2f4e9}
.lu-hero .crumb{color:#cfe8da}
.lu-hero .crumb a{color:var(--lu-kuning)}
.lu-lencana{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--lu-kuning);color:var(--lu-hijau)
}
.lu-lencana svg{width:28px;height:28px}
.lu-badge{background:var(--lu-kuning);color:var(--lu-hijau);border-color:transparent;font-weight:700}

@media (max-width:900px){
  .lu-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .lu-kartu,.lu-kepala{padding:16px;column-gap:12px}
  .lu-ikon{width:52px;height:52px;border-radius:14px}
  .lu-ikon svg{width:26px;height:26px}
  .lu-nama{font-size:.98rem}
  .lu-hero{padding:26px 0 24px}
  .lu-isi{padding:0 16px 16px}
  .lu-btn{width:100%;text-align:center}
}

/* ===========================================================================
   PENJAGA BAYANGAN TULISAN (30/09/2026) — permintaan pengurus:
     "Hapus semua text-shadow hitam tebal di seluruh website. Terapkan ke SELURUH
      APLIKASI (semua teks)... Code: { text-shadow: none !important; }"
   IKIPIE memang tidak pernah memakai text-shadow (terukur 0 unsur), jadi aturan ini
   adalah jaring pengaman supaya hal itu tidak berubah tanpa sengaja. Situs lain di
   jaringan ini (UMA METAN) hanya menyisakan bayangan PUTIH tipis pada tulisan di atas
   video hero — di IKIPIE tidak ada video hero, jadi memang tidak perlu bayangan sama sekali.
   Dijaga .uji/cek-bayangan-tulisan.js
   =========================================================================== */
h1, h2, h3, h4, h5, h6, .stat-number, .card-title{ text-shadow: none !important; }

/* ===========================================================================
   ALUR OTONOM /jual-link (3 LANGKAH) + /pendaftaran-anggota  —  01/10/2026
   ---------------------------------------------------------------------------
   Dipakai oleh jual-link/index.php dan pendaftaran-anggota/index.php.
   Kelas .jl-* = jual-link (langkah 1 → 2 → 3), .pa-* = pendaftaran anggota.
   MENU TIDAK DISENTUH: blok ini murni tampilan halaman, tidak ada kaitan dengan
   kepala/laci menu (menu final lock tetap apa adanya).
   Aturan penting: `.jl-js .jl-panel:not(.jl-tampil){display:none}` — kelas .jl-js
   dipasang oleh skrip di halaman jual-link. Kalau JavaScript mati, ketiga langkah
   tampil berurutan dan formulirnya tetap bisa diisi & dikirim.
   =========================================================================== */

/* ---- Penunjuk langkah ---- */
.jl-penunjuk{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.jl-penunjuk li{
  display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  font-size:.88rem;font-weight:700;color:var(--muted)
}
.jl-penunjuk li span{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--utama-50);color:var(--utama-700);font-size:.82rem
}
.jl-penunjuk li.aktif{background:linear-gradient(135deg,var(--utama),var(--utama-500));border-color:transparent;color:#fff}
.jl-penunjuk li.aktif span{background:rgba(255,255,255,.24);color:#fff}
.jl-penunjuk li.lewat{color:var(--utama-700);border-color:var(--utama-300)}
.jl-penunjuk li.lewat span{background:var(--utama);color:#fff}

/* ---- Kartu langkah ---- */
.jl-kartu{display:grid;gap:20px}
.jl-js .jl-panel:not(.jl-tampil){display:none}
.jl-panel{display:grid;gap:18px}
.jl-panel-kepala{display:flex;gap:14px;align-items:flex-start}
.jl-nomor{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--utama),var(--utama-500));color:#fff;font-weight:800;font-size:1.05rem
}
.jl-nomor-ok{background:linear-gradient(135deg,#15803D,#16a34a)}
.jl-panel-kepala h3{margin:0 0 4px;font-size:1.16rem}
.jl-panel-kepala .hint{margin:0}

/* ---- Kotak isian "ikipie.click/…" ---- */
.jl-awalan{
  display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.85);overflow:hidden
}
.jl-awalan-teks{
  display:flex;align-items:center;padding:0 12px;background:var(--utama-50);color:var(--utama-700);
  font-weight:700;font-size:.92rem;white-space:nowrap;border-right:1px solid var(--line)
}
.jl-awalan input{flex:1 1 auto;border:0;background:transparent;padding:12px 14px;font:inherit;color:var(--ink);min-width:0}
.jl-awalan input:focus{outline:2px solid var(--utama-300);outline-offset:-2px}
.jl-pratinjau-link{font-size:.85rem;font-weight:700;color:var(--utama-700);word-break:break-all}
.jl-pratinjau-link.jl-kosong{color:var(--muted);font-weight:600}

/* ---- Catatan tersimpan di peramban ---- */
.jl-catatan-tersimpan{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:var(--emas-50);border:1px solid rgba(180,83,9,.25);border-radius:var(--radius-sm);
  padding:14px 18px;margin-bottom:20px
}
.jl-ts-label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--emas-700);font-weight:700}
.jl-catatan-tersimpan strong{color:var(--ink);font-size:.94rem;word-break:break-word}
.jl-ts-aksi{display:flex;gap:10px;flex-wrap:wrap}

/* ---- Langkah 2: kotak pembayaran ---- */
.jl-bayar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.jl-bayar-kotak{
  display:grid;gap:8px;align-content:start;padding:18px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.85);border:1px solid var(--line)
}
.jl-bayar-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.jl-bayar-nomor{font-size:1.24rem;font-weight:800;color:#00539C;letter-spacing:.02em;word-break:break-all}
.jl-bayar-nama{font-size:.9rem;color:var(--ink-soft)}
.jl-bayar-qris{justify-items:start}
.jl-qris-kosong{font-weight:700;color:var(--utama-700)}
.jl-bayar-kotak .copy-ok{color:var(--emas-700);font-weight:700;font-size:.82rem}
.jl-ringkas{gap:0}

/* ---- Langkah 3: "Link Anda Aktif" ---- */
.jl-link-aktif{
  display:grid;gap:10px;padding:22px;border-radius:var(--radius);text-align:center;
  background:linear-gradient(135deg,var(--utama) 0%,var(--utama-500) 100%);
  color:#fff;box-shadow:var(--shadow)
}
.jl-link-label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.85)}
.jl-link-alamat{font-size:clamp(1.15rem,3.4vw,1.7rem);word-break:break-all}
.jl-link-tombol{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.jl-link-aktif .copy-ok{color:#FFE44D;font-weight:700;font-size:.84rem}

@media (max-width:760px){
  .jl-bayar-grid{grid-template-columns:1fr}
  .jl-penunjuk li{flex:1 1 100%}
  .jl-awalan{flex-direction:column}
  .jl-awalan-teks{border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}
}

/* ==================================================================
   PASAR IKIPIE — pita pintu toko roti & kue di beranda
   (06/10/2026, permintaan pengurus: toko roti lama dipindahkan ke
   DALAM induk dan pintu masuknya terlihat dari beranda)
   ================================================================== */
.pasar-band{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  padding:24px 26px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(255,251,235,.96) 0%,rgba(237,231,246,.94) 100%);
  border:2px solid var(--emas-300);box-shadow:var(--shadow)
}
.pasar-ikon{
  width:74px;height:74px;border-radius:20px;display:grid;place-items:center;font-size:2.1rem;
  background:var(--utama);color:#fff;box-shadow:var(--shadow-sm)
}
.pasar-teks h2{margin:.15rem 0 .45rem;font-size:clamp(1.15rem,2.6vw,1.6rem);color:var(--utama-700)}
.pasar-teks p{margin:0;color:var(--ink-soft);line-height:1.6;max-width:62ch}
.pasar-aksi{display:flex;flex-direction:column;gap:10px;min-width:220px}
.pasar-aksi .btn{white-space:nowrap}

@media (max-width:900px){
  .pasar-band{grid-template-columns:1fr;justify-items:start;padding:20px}
  .pasar-aksi{width:100%;min-width:0}
  .pasar-aksi .btn{width:100%;justify-content:center}
}

/* ==================================================================
   LAYANAN UMUM — GRID KARTU 2 KOLOM (06/10/2026, permintaan pengurus)
   ------------------------------------------------------------------
   Sebelumnya seksi "🚀 LAYANAN UMUM" menampilkan judul panjang bertanda
   kurung + keterangan ("RUMAH KURSUS (Menjahit, Bahasa, Komputer, Seni
   Budaya)") sehingga panel terlihat RAMAI. Sekarang:
     · panel mega menu & laci  → hanya JUDUL BERSIH + ikon, grid 2 kolom;
     · keterangan lengkap pindah ke halaman detail /layanan/<slug>/.
   Kelas .mega-kartu-* dipakai bersama oleh panel (mega_bar) dan laci (mega_laci);
   yang membedakan hanya pembungkusnya.
   ================================================================== */
.mega-kartu-bungkus{max-width:760px;margin:0 auto}

/* Panel mega menu */
ul.mega-list.mega-kartu-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  padding:0;margin:0;list-style:none
}
.mega-kartu-grid > .mega-kartu{min-width:0}
.mega-kartu-grid > .mega-kartu > a{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.4rem;
  min-height:86px;padding:12px 12px;border:1.5px solid rgba(10,77,42,.16);border-radius:14px;
  background:#F7FAF8;text-align:center;text-decoration:none;color:var(--ink);
  box-shadow:0 3px 8px -6px rgba(6,43,24,.35);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease
}
.mega-kartu-grid > .mega-kartu > a:hover,
.mega-kartu-grid > .mega-kartu > a:focus-visible{
  transform:translateY(-3px);border-color:var(--nat);background:var(--nat-50);
  box-shadow:0 14px 26px -16px rgba(10,77,42,.5);text-decoration:none
}
.mega-kartu-ikon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--nat-50);border:1px solid rgba(10,77,42,.12);
  font-size:1.25rem;line-height:1;transition:background .18s ease
}
.mega-kartu-grid > .mega-kartu > a:hover .mega-kartu-ikon{background:#fff}
.mega-kartu-nama{font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.35}

/* Laci (ponsel/tablet) — tetap 2 kolom supaya tidak panjang ke bawah */
ul.nav-panel-daftar.nav-kartu-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  padding:0;margin:0;list-style:none
}
.nav-kartu-grid > .mega-kartu{min-width:0}
.nav-kartu-grid > .mega-kartu > a{
  display:flex;flex-direction:column;align-items:center;gap:.38rem;
  min-height:92px;padding:12px 10px;border:1px solid var(--line);border-radius:12px;
  background:#fff;text-align:center;white-space:normal;
  font-size:.82rem;font-weight:700;line-height:1.35;color:var(--utama-700);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.nav-kartu-grid > .mega-kartu > a:hover{
  background:#fff;border-color:var(--utama);transform:translateY(-2px);box-shadow:var(--shadow-sm)
}
.nav-kartu-grid .mega-kartu-ikon{
  width:36px;height:36px;border-radius:11px;background:var(--utama-50);
  border:1px solid var(--line);font-size:1.1rem
}
.nav-kartu-grid .mega-kartu-nama{font-size:.82rem;font-weight:700;color:var(--utama-700)}

@media (max-width:420px){
  ul.mega-list.mega-kartu-grid,ul.nav-panel-daftar.nav-kartu-grid{gap:8px}
  .mega-kartu-grid > .mega-kartu > a,
  .nav-kartu-grid > .mega-kartu > a{min-height:86px;padding:11px 8px}
}

/* ==================================================================
   HALAMAN DETAIL LAYANAN (/layanan/<slug>/) — animasi masuk yang halus
   ================================================================== */
@keyframes lyMasuk{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ly-masuk{animation:lyMasuk .42s ease both}
.ly-masuk-lambat{animation:lyMasuk .42s ease .1s both}

.ly-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}
.ly-utama{display:flex;flex-direction:column;gap:12px;margin:0}
.ly-ikon{
  width:66px;height:66px;border-radius:18px;display:grid;place-items:center;
  background:var(--utama-50);border:1px solid var(--line);font-size:2rem;line-height:1
}
.ly-judul{margin:0;font-size:clamp(1.25rem,3vw,1.65rem);color:var(--utama-700)}
.ly-ringkas{margin:0;font-weight:700;color:var(--emas-700)}
.ly-teks{margin:0;color:var(--ink-soft);line-height:1.75}

.ly-samping{
  display:flex;flex-direction:column;gap:12px;margin:0;
  background:linear-gradient(135deg,rgba(237,231,246,.9),rgba(255,255,255,.92))
}
.ly-samping-judul{margin:0;font-size:1.1rem;color:var(--utama-700)}
.ly-daftar{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ly-daftar li{
  position:relative;padding-left:30px;color:var(--ink-soft);line-height:1.55;font-size:.95rem
}
.ly-daftar li::before{
  content:"";position:absolute;left:0;top:.2em;width:19px;height:19px;border-radius:50%;
  background:var(--utama);opacity:.12
}
.ly-daftar li::after{
  content:"";position:absolute;left:6px;top:.55em;width:7px;height:4px;
  border-left:2px solid var(--utama);border-bottom:2px solid var(--utama);transform:rotate(-45deg)
}
.ly-aksi{display:grid;gap:10px;margin-top:6px}
.ly-aksi .btn{justify-content:center}
.ly-tombol-wa{white-space:normal}

/* Grid kartu layanan di halaman daftar & bagian "Layanan Lainnya" */
.ly-kartu-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  max-width:760px;margin:0 auto
}
.ly-kartu{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:22px 16px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--card-solid);text-decoration:none;text-align:center;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease
}
.ly-kartu:hover,.ly-kartu:focus-visible{
  transform:translateY(-4px);border-color:var(--utama);background:#fff;
  box-shadow:var(--shadow);text-decoration:none
}
.ly-kartu-ikon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--utama-50);border:1px solid var(--line);font-size:1.6rem;line-height:1
}
.ly-kartu-nama{font-size:.95rem;font-weight:700;color:var(--utama-700);line-height:1.35}
.ly-kartu-grid-kecil .ly-kartu{padding:16px 12px}
.ly-kartu-grid-kecil .ly-kartu-ikon{width:44px;height:44px;font-size:1.35rem}
.ly-kartu-grid-kecil .ly-kartu-nama{font-size:.88rem}

@media (max-width:820px){
  .ly-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:520px){
  .ly-kartu-grid{gap:12px}
  .ly-kartu{padding:18px 10px}
  .ly-kartu-ikon{width:46px;height:46px;font-size:1.4rem}
  .ly-kartu-nama{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .ly-masuk,.ly-masuk-lambat{animation:none}
  .mega-kartu-grid > .mega-kartu > a,.nav-kartu-grid > .mega-kartu > a,.ly-kartu{transition:none}
}