/* ============================================================
   ARUMANIS — Fun Learn Play
   Sistem desain berdasarkan Guideline Arumanis.pdf,
   dengan gaya visual mengikuti poster program Arumanis:
   latar langit berawan, judul huruf warna-warni, font bulat.
   ============================================================ */

:root{
  /* Palet primer (guideline) */
  --pink-1:#ffa7a7; --pink-2:#ffb8b8; --pink-3:#ffcccc; --pink-4:#ffd9d9; --pink-5:#fce6e6;
  /* Palet opsional (guideline) */
  --kuning-1:#f1d45f; --kuning-2:#f2da77; --kuning-3:#f2e094; --kuning-4:#f2e6b1;
  --biru-1:#95a1d4;   --biru-2:#a9b5db;  --biru-3:#bac5e0;  --biru-4:#cad3e5; --biru-5:#d8dfea;
  --hijau-1:#86d86f;  --hijau-2:#9ce585; --hijau-3:#b0ea9b; --hijau-4:#c5f2b3;

  /* Langit berawan — mengikuti latar poster */
  --langit-1:#b9e3f6; --langit-2:#d9f0fb; --langit-3:#eff9fe;

  /* Turunan digital — WAJIB untuk keterbacaan */
  --tinta:#3D2B2E;         /* teks utama      — 13,3:1 di atas putih */
  --tinta-lembut:#6B5457;  /* teks sekunder   —  6,9:1 di atas putih */
  --aksi:#B03A48;          /* tombol utama    —  5,9:1 dengan teks putih */
  --aksi-gelap:#8F2E3A;

  /* Huruf warna-warni judul — hanya tiga warna brand, persis seperti poster:
     pink, kuning, biru. Keterbacaan dijaga oleh garis tepi gelap, bukan dengan
     menggelapkan warnanya (cara itu yang bikin tabrakan dengan warna Arumanis). */
  --judul-pink:#FBA0A0; --judul-kuning:#F0CE5C; --judul-biru:#9AA6DA;
  --garis-judul:#3D2B2E;

  --putih:#ffffff;
  --krem:#FFFBF9;
  --garis:#F0DCDC;

  --lebar:1120px;
  --radius:24px;
  --radius-s:14px;
  --bayang:0 4px 24px rgba(61,43,46,.08);
  --bayang-kuat:0 12px 40px rgba(61,43,46,.14);

  --font-teks:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-judul:'Baloo 2','Poppins',sans-serif;      /* bulat & gembung, seperti poster */
  --font-riang:'Grandstander','Poppins',sans-serif; /* meloncat, untuk label kecil */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-teks);
  font-size:17px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--krem);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--aksi);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{font-family:var(--font-judul);line-height:1.15;margin:0 0 .45em;letter-spacing:0}
h1{font-size:clamp(2.2rem,5.6vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.9vw,2.7rem);font-weight:800}
h3{font-size:clamp(1.25rem,2.3vw,1.6rem);font-weight:700}
h4{font-size:1.06rem;font-weight:700;font-family:var(--font-teks);margin:0 0 .5em;line-height:1.35}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--lebar);margin:0 auto;padding:0 24px}
.sempit{max-width:760px;margin-left:auto;margin-right:auto}
.tengah{text-align:center}
.lewati{position:absolute;left:-9999px;top:0}
.lewati:focus{left:16px;top:16px;z-index:999;background:var(--putih);padding:12px 18px;border-radius:8px;box-shadow:var(--bayang)}

/* ---------- Judul huruf warna-warni ---------- */
.judul-warna{letter-spacing:.012em}
.judul-warna span{
  display:inline-block;
  -webkit-text-stroke:.052em var(--garis-judul); /* ikut ukuran huruf, tidak menebal di layar kecil */
  paint-order:stroke fill;
  filter:drop-shadow(0 .05em 0 rgba(61,43,46,.15));
}
.judul-warna .w1{color:var(--judul-pink)}
.judul-warna .w2{color:var(--judul-kuning)}
.judul-warna .w3{color:var(--judul-biru)}
.judul-warna .spasi{width:.34em;-webkit-text-stroke:0;filter:none}
/* Tiap huruf muncul bergantian saat halaman dibuka */
.judul-warna span{opacity:0;transform:translateY(14px) scale(.86);animation:hurufMuncul .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes hurufMuncul{to{opacity:1;transform:none}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,251,249,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--garis)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;max-width:var(--lebar);margin:0 auto}
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--tinta)}
.logo:hover{text-decoration:none}
.logo b{font-family:var(--font-judul);font-weight:800;font-size:1.45rem;letter-spacing:.05em}
.logo span{font-family:var(--font-riang);font-size:.62rem;letter-spacing:.2em;color:var(--tinta-lembut);margin-top:2px;text-transform:uppercase;font-weight:600}

.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--tinta);font-size:.92rem;font-weight:500;padding:9px 13px;border-radius:12px;white-space:nowrap}
.nav a:hover{background:var(--pink-5);text-decoration:none}
.nav a[aria-current="page"]{background:var(--pink-4);font-weight:600}

.menu-btn{display:none;background:none;border:1.5px solid var(--garis);border-radius:12px;padding:9px 12px;cursor:pointer;color:var(--tinta);font-size:1.1rem;line-height:1;min-width:44px;min-height:44px}

/* 9 butir menu butuh ruang lebih; di bawah 1100px langsung jadi tombol menu */
@media(max-width:1100px){
  .menu-btn{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--putih);border-bottom:1px solid var(--garis);
    padding:10px 16px 18px;box-shadow:var(--bayang);
    display:none;
  }
  .nav.buka{display:flex}
  .nav a{padding:12px 14px;font-size:1rem}
  .nav .tombol{margin-top:8px;text-align:center}
}

/* ---------- Tombol ---------- */
.tombol{
  display:inline-block;background:var(--aksi);color:var(--putih);
  font-family:var(--font-judul);font-weight:700;font-size:1.05rem;
  padding:13px 30px;border-radius:999px;
  border:none;cursor:pointer;text-align:center;
  transition:background .15s ease,transform .15s ease;
}
.tombol:hover{background:var(--aksi-gelap);color:var(--putih);text-decoration:none;transform:translateY(-2px)}
.tombol:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.tombol.garis{background:transparent;color:var(--aksi);border:2.5px solid var(--aksi)}
.tombol.garis:hover{background:var(--aksi);color:var(--putih)}
.tombol.kecil{padding:9px 20px;font-size:.95rem}
.tombol.wa{background:#25D366;color:var(--putih)}
.tombol.wa:hover{background:#1EBE5A;color:var(--putih)}
.tombol-grup{display:flex;flex-wrap:wrap;gap:12px}
.tengah .tombol-grup{justify-content:center}

/* ---------- Langit berawan ---------- */
.langit{
  position:relative;
  background:linear-gradient(180deg,var(--langit-1) 0%,var(--langit-2) 48%,var(--langit-3) 100%);
  overflow:hidden;
}
.langit > .wrap{position:relative;z-index:2}

.awan{position:absolute;fill:#fff;pointer-events:none;z-index:1}
.awan.a{top:6%;left:-3%;width:230px;opacity:.95}
.awan.b{top:16%;right:-2%;width:300px;opacity:.8}
.awan.c{bottom:22%;left:8%;width:160px;opacity:.65}
.awan.d{top:44%;right:22%;width:120px;opacity:.5}
@media(max-width:880px){
  .awan.a{width:150px;top:3%}
  .awan.b{width:170px;top:9%}
  .awan.c,.awan.d{display:none}
}

/* Awan yang hanyut.

   Satu putaran 26 sampai 41 detik dengan simpangan sekitar 70px. Percobaan
   pertama jauh lebih pelan - 26px per 32 detik - dan diukur di peramban itu
   cuma 1,5px per tiga detik: secara teknis bergerak, tapi tidak ada mata yang
   bisa melihatnya. Sekarang geraknya terlihat sebagai awan yang hanyut, dan
   tetap cukup pelan untuk tidak menarik perhatian dari judulnya.

   Tiap awan punya lama dan jeda berbeda, dan jedanya negatif supaya semuanya
   sudah di tengah jalan begitu halaman terbuka - tanpa itu keempatnya
   berangkat serentak dari titik yang sama dan terlihat seperti barisan.

   Hanya transform yang digerakkan, jadi tidak ada tata letak yang dihitung
   ulang. prefers-reduced-motion sudah mematikan seluruh animasi di berkas ini
   lewat satu aturan di bawah. */
.awan{animation:hanyut 30s ease-in-out infinite}
.awan.a{animation-duration:34s; animation-delay:-9s}
.awan.b{animation-duration:41s; animation-delay:-19s}
.awan.c{animation-duration:26s; animation-delay:-13s}
.awan.d{animation-duration:30s; animation-delay:-4s}
@keyframes hanyut{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(78px,-16px,0)}
}
/* Yang di tepi kanan hanyut ke arah berlawanan - dua awan yang bergerak
   searah dengan jarak tetap terbaca sebagai satu gambar yang bergeser,
   bukan sebagai dua awan. */
.awan.b,.awan.d{animation-name:hanyut-balik}
@keyframes hanyut-balik{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-64px,13px,0)}
}

/* Tepi bawah berbentuk awan */
.awan-pembatas{display:block;width:100%;height:60px;position:relative;z-index:2;margin-top:-1px}
.awan-pembatas path{fill:var(--krem)}
.awan-pembatas.ke-putih path{fill:var(--putih)}
.awan-pembatas.ke-pink path{fill:var(--pink-5)}

/* Bintang dekoratif (motif logo: anak menggapai bintang) */
.bintang{position:absolute;pointer-events:none;z-index:1}
.bintang.a{top:12%;right:14%;width:44px;opacity:.85}
.bintang.b{bottom:30%;left:3%;width:28px;opacity:.7}
.bintang.c{top:30%;left:44%;width:20px;opacity:.6}
@media(max-width:880px){.bintang{display:none}}

/* ---------- Hero ---------- */
.hero{padding:64px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-bottom:24px}
.hero .kicker{
  display:inline-block;background:var(--putih);color:var(--tinta);
  font-family:var(--font-riang);font-size:.84rem;font-weight:700;
  padding:9px 20px;border-radius:999px;margin-bottom:20px;box-shadow:var(--bayang);
}
.hero h1{margin-bottom:.3em}
.hero .lead{font-size:1.12rem;color:var(--tinta-lembut);max-width:33em;margin-bottom:1.5em}
.hero-bukti{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;font-size:.86rem;color:var(--tinta-lembut)}
.hero-bukti b{color:var(--tinta);font-weight:800;display:block;font-size:1.35rem;font-family:var(--font-judul);line-height:1.1}
.hero-maskot{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;min-width:0;
}
.hero-maskot img{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 12px 22px rgba(61,43,46,.16))}
@media(max-width:980px){
  .hero{padding:40px 0 0}
  .hero-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .tombol-grup,.hero-bukti{justify-content:center}
  .hero-maskot img{max-width:300px}
  .hero-balon{max-width:420px}
}

/* Hero ringkas untuk halaman dalam */
.hero-dalam{padding:60px 0 46px}
@media(max-width:880px){.hero-dalam{padding:40px 0 32px}}

/* ---------- Seksi ---------- */
.seksi{padding:76px 0}
.seksi.rapat{padding:52px 0}
.seksi.pink{background:var(--pink-5)}
.seksi.putih{background:var(--putih)}
.seksi.biru{background:var(--biru-5)}
.seksi-kepala{max-width:640px;margin-bottom:44px}
.seksi-kepala.tengah{margin-left:auto;margin-right:auto;text-align:center}
.seksi-kepala p{color:var(--tinta-lembut);font-size:1.05rem;margin-bottom:0}
.label{
  display:inline-block;font-family:var(--font-riang);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--aksi);margin-bottom:10px;
}

/* ---------- Kartu ---------- */
.kisi{display:grid;gap:24px}
.kisi-2{grid-template-columns:repeat(2,1fr)}
.kisi-3{grid-template-columns:repeat(3,1fr)}
.kisi-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.kisi-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.kisi-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.kisi-2{grid-template-columns:1fr}}
@media(max-width:640px){.kisi-2,.kisi-3,.kisi-4{grid-template-columns:1fr}}

.kartu{background:var(--putih);border-radius:var(--radius);padding:30px;box-shadow:var(--bayang);border:1px solid var(--garis)}
.kartu h3{margin-bottom:.35em}
.kartu p{color:var(--tinta-lembut);font-size:.96rem}

/* Kartu kelompok usia — tiap usia punya warna dari palet guideline */
.usia{
  border-radius:var(--radius);padding:32px;color:var(--tinta);
  display:flex;flex-direction:column;height:100%;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease;
}
.usia:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--bayang-kuat)}
.usia .rentang{font-family:var(--font-judul);font-weight:800;font-size:1.7rem;margin-bottom:2px;display:block;line-height:1.1}
.usia .judul{font-family:var(--font-riang);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.72;margin-bottom:16px;display:block}
.usia p{font-size:.95rem;margin-bottom:20px;flex:1}
.usia .lanjut{font-family:var(--font-judul);font-weight:700;font-size:1rem;color:var(--tinta)}
.usia--bayi{background:var(--pink-1)}
.usia--batita{background:var(--kuning-2)}
.usia--pra{background:var(--hijau-2)}

/* ---------- Langkah ---------- */
.langkah{counter-reset:l;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0;margin:0}
@media(max-width:760px){.langkah{grid-template-columns:1fr;gap:20px}}
.langkah li{list-style:none;position:relative;padding-left:62px}
.langkah li::before{
  counter-increment:l;content:counter(l);
  position:absolute;left:0;top:-4px;width:46px;height:46px;
  background:var(--aksi);color:var(--putih);border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-family:var(--font-judul);font-size:1.3rem;
}
.langkah h3{font-size:1.2rem;margin-bottom:.2em}
.langkah p{font-size:.94rem;color:var(--tinta-lembut);margin:0}

/* ---------- Placeholder gambar ---------- */
.gambar{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(140deg,var(--pink-3),var(--pink-5) 60%,var(--kuning-4));
  display:grid;place-items:center;text-align:center;padding:28px;
  min-height:280px;border:1px dashed rgba(61,43,46,.18);
}
.gambar.tinggi{min-height:420px}
.gambar.potret{aspect-ratio:3/4;min-height:0}
.gambar.persegi{aspect-ratio:1/1;min-height:0}
.gambar small{display:block;color:var(--tinta-lembut);font-size:.78rem;line-height:1.5;max-width:24em}
.gambar .ikon{font-size:2rem;margin-bottom:8px;display:block}
.gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Bingkai maskot (gambar transparan, bukan foto) */
.maskot-bingkai{
  border-radius:var(--radius);display:grid;place-items:end center;
  padding:24px 24px 0;min-height:300px;overflow:hidden;
}
.maskot-bingkai img{max-height:290px;width:auto;filter:drop-shadow(0 10px 18px rgba(61,43,46,.14))}
.maskot-bingkai.pink{background:linear-gradient(180deg,var(--pink-4),var(--pink-2))}
.maskot-bingkai.biru{background:linear-gradient(180deg,var(--biru-4),var(--biru-2))}

/* ---------- Fasilitator ---------- */
.profil{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:900px){.profil{grid-template-columns:1fr;gap:32px}}
.kredensial{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.kredensial li{background:var(--pink-4);color:var(--tinta);font-size:.85rem;font-weight:600;padding:7px 16px;border-radius:999px}

/* ---------- Tabel harga ---------- */
.harga-kisi{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:980px){.harga-kisi{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.harga-kartu{background:var(--putih);border:2px solid var(--garis);border-radius:var(--radius);padding:34px 30px;display:flex;flex-direction:column;position:relative}
.harga-kartu.unggulan{border-color:var(--aksi);box-shadow:var(--bayang-kuat)}
.harga-kartu .pita{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--aksi);color:var(--putih);font-family:var(--font-riang);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 18px;border-radius:999px;white-space:nowrap;
}
.harga-kartu .nama{font-family:var(--font-judul);font-weight:800;font-size:1.4rem;margin-bottom:2px;line-height:1.2}
.harga-kartu .nominal{font-family:var(--font-judul);font-weight:800;font-size:2.6rem;line-height:1.1;margin:14px 0 2px;color:var(--aksi)}
.harga-kartu .satuan{font-size:.9rem;color:var(--tinta-lembut);margin-bottom:20px}
.harga-kartu ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.harga-kartu li{padding-left:26px;position:relative;font-size:.94rem;margin-bottom:10px;color:var(--tinta-lembut)}
.harga-kartu li::before{content:"★";position:absolute;left:0;color:var(--kuning-1);font-size:.9rem}
.harga-kartu .tombol-grup{flex-direction:column;gap:10px}
.harga-kartu .tombol-grup .tombol{width:100%}

/* ---------- Formulir ---------- */
.form{background:var(--putih);border-radius:var(--radius);padding:36px;box-shadow:var(--bayang);border:1px solid var(--garis)}
.form-baris{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form-baris{grid-template-columns:1fr}}
.bidang{margin-bottom:18px}
.bidang label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.bidang .bantu{font-weight:400;color:var(--tinta-lembut);font-size:.82rem}
.bidang input,.bidang select,.bidang textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--garis);border-radius:var(--radius-s);
  font-family:var(--font-teks);font-size:1rem;color:var(--tinta);background:var(--krem);
}
.bidang input:focus,.bidang select:focus,.bidang textarea:focus{outline:none;border-color:var(--aksi);background:var(--putih)}
.bidang textarea{min-height:110px;resize:vertical}
fieldset{border:none;padding:0;margin:0 0 18px}
legend{font-weight:600;font-size:.9rem;margin-bottom:9px;padding:0}
.pilihan{display:flex;flex-wrap:wrap;gap:10px}
.pilihan label{
  display:flex;align-items:center;gap:8px;background:var(--krem);border:1.5px solid var(--garis);
  padding:10px 16px;border-radius:999px;cursor:pointer;font-size:.92rem;font-weight:500;margin:0;
}
/* 20px, sama seperti .ceklis-daftar. Ukuran bawaan peramban 13px, dan di
   ponsel itu terlalu kecil untuk melihat mana yang sudah tercentang - ini
   formulir pendaftaran yang diisi orang tua sambil memegang anak. Sasaran
   ketuknya sendiri sudah cukup: tiap kotak dibungkus <label> setinggi 48px. */
.pilihan input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--aksi)}
.pilihan label:has(input:checked){background:var(--pink-4);border-color:var(--aksi)}
.catatan-form{font-size:.85rem;color:var(--tinta-lembut);margin-top:16px}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius-s);margin-bottom:12px;overflow:hidden}
.faq summary{padding:20px 24px;font-weight:600;cursor:pointer;list-style:none;position:relative;padding-right:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--aksi);line-height:1;font-family:var(--font-judul)}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{background:var(--pink-5)}
.faq .isi{padding:4px 24px 22px;color:var(--tinta-lembut);font-size:.96rem}

/* ---------- Testimoni (placeholder) ---------- */
.testi-kosong{
  background:var(--putih);border:1px dashed var(--garis);border-radius:var(--radius);
  padding:34px;text-align:center;color:var(--tinta-lembut);
}
.testi-kosong .ikon{font-size:1.8rem;display:block;margin-bottom:10px;opacity:.5}
.testi-kosong strong{display:block;color:var(--tinta);margin-bottom:6px;font-size:1rem}
.testi-kosong small{font-size:.85rem}

/* ---------- Daftar centang ---------- */
.centang{list-style:none;padding:0;margin:0}
.centang li{padding-left:30px;position:relative;margin-bottom:12px;color:var(--tinta-lembut)}
.centang li::before{content:"★";position:absolute;left:0;top:0;color:var(--kuning-1)}
.centang strong{color:var(--tinta)}

/* ---------- Fasilitas ---------- */
.fasilitas{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none}
.fasilitas li{background:var(--putih);border:1px solid var(--garis);border-radius:999px;padding:10px 20px;font-size:.92rem;font-weight:500}

/* ---------- CTA ---------- */
.cta{background:var(--pink-1);border-radius:var(--radius);padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.cta h2{margin-bottom:.35em}
.cta p{color:var(--tinta);opacity:.85;max-width:34em;margin:0 auto 1.7em}
.cta-maskot{position:absolute;bottom:0;right:24px;width:150px;opacity:.95;pointer-events:none}
@media(max-width:820px){.cta-maskot{display:none}}
@media(max-width:620px){.cta{padding:40px 24px}}

/* ---------- Peta ---------- */
.peta{border-radius:var(--radius);overflow:hidden;border:1px solid var(--garis);box-shadow:var(--bayang);line-height:0}
.peta iframe{width:100%;height:400px;border:0}

/* ---------- Footer ---------- */
.footer{background:var(--tinta);color:#E8DCDD;padding:60px 0 28px}
.footer a{color:var(--pink-3)}
.footer-kisi{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;margin-bottom:44px}
@media(max-width:820px){.footer-kisi{grid-template-columns:1fr;gap:32px}}
.footer h4{color:var(--putih);font-family:var(--font-riang);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:9px;font-size:.93rem}
.footer .logo b{color:var(--putih)}
.footer .logo span{color:var(--pink-3)}
.footer p{font-size:.93rem;opacity:.82;max-width:30em}
.footer-bawah{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:.85rem;opacity:.7;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ---------- Tombol WhatsApp melayang ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:200;
  background:#25D366;color:#fff;border-radius:999px;
  padding:14px 22px 14px 18px;font-family:var(--font-judul);font-weight:700;font-size:1rem;
  box-shadow:0 6px 22px rgba(0,0,0,.2);display:flex;align-items:center;gap:9px;
}
.wa-float:hover{color:#fff;text-decoration:none;background:#1EBE5A}
.wa-float svg{width:22px;height:22px;fill:currentColor;flex:none}
@media(max-width:520px){
  .wa-float{padding:12px 18px 12px 15px;right:16px;bottom:16px;font-size:.92rem}
}

/* ---------- Utilitas ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.kecil{font-size:.88rem;color:var(--tinta-lembut)}
.sorot{background:var(--kuning-3);padding:2px 7px;border-radius:6px;font-weight:600;color:var(--tinta)}

/* ============================================================
   ARU & UNI YANG HIDUP + BAGIAN INTERAKTIF
   ============================================================ */

/* ---------- Maskot mengambang ---------- */
.maskot-hidup{animation:mengambang 4.5s ease-in-out infinite;transform-origin:50% 100%}
.maskot-hidup.lambat{animation-duration:5.6s;animation-delay:-1.4s}
@keyframes mengambang{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(-1.2deg)}
}

/* ---------- Balon ucapan ---------- */
.balon{
  position:relative;background:var(--putih);border:2.5px solid var(--tinta);
  border-radius:22px;padding:18px 22px;box-shadow:0 6px 0 rgba(61,43,46,.14);
  font-family:var(--font-riang);font-weight:600;font-size:1rem;line-height:1.5;color:var(--tinta);
}
.balon::after,.balon::before{content:"";position:absolute;width:0;height:0;border-style:solid}
.balon::before{bottom:-19px;left:40px;border-width:19px 15px 0 0;border-color:var(--tinta) transparent transparent transparent}
.balon::after{bottom:-14px;left:43px;border-width:15px 11px 0 0;border-color:var(--putih) transparent transparent transparent}
.balon.kanan::before{left:auto;right:40px;border-width:19px 0 0 15px}
.balon.kanan::after{left:auto;right:43px;border-width:15px 0 0 11px}
/* Ekor menghadap kiri — untuk balon yang berdiri di sebelah kanan maskot */
.balon.kiri::before{bottom:auto;left:-19px;top:26px;border-width:0 19px 15px 0;border-color:transparent var(--tinta) transparent transparent}
.balon.kiri::after{bottom:auto;left:-14px;top:29px;border-width:0 15px 11px 0;border-color:transparent var(--putih) transparent transparent}
@media(max-width:820px){.balon.kiri::before,.balon.kiri::after{display:none}}
.balon .ganti{display:block;animation:balonMasuk .4s ease}
@keyframes balonMasuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Balon di hero — selalu DI ATAS maskot, tidak pernah menutupi wajahnya.
   Sengaja tidak memakai position:absolute supaya tidak bisa bertabrakan
   dengan kolom teks di lebar layar mana pun. */
.hero-balon{
  max-width:330px;width:100%;margin:0 auto 6px;cursor:pointer;
  transition:transform .2s ease;text-align:left;
}
.hero-balon:hover{transform:translateY(-2px) rotate(-1deg)}
.hero-balon::before{left:50%;transform:translateX(-11px)}
.hero-balon::after{left:50%;transform:translateX(-8px)}
.hero-balon .petunjuk{display:block;font-family:var(--font-teks);font-weight:400;font-size:.72rem;color:var(--tinta-lembut);margin-top:7px}

/* ---------- Tur "Kenalan dengan Arumanis" ---------- */
.tur{background:var(--putih);border:2.5px solid var(--tinta);border-radius:30px;padding:38px;box-shadow:0 10px 0 rgba(61,43,46,.12)}
.tur-panggung{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:32px;align-items:center;min-height:280px}
@media(max-width:820px){
  .tur{padding:26px 20px}
  .tur-panggung{grid-template-columns:1fr;gap:18px;text-align:center}
}
.tur-maskot{position:relative;display:grid;place-items:end center}
.tur-maskot img{max-height:250px;width:auto;filter:drop-shadow(0 10px 16px rgba(61,43,46,.16))}
@media(max-width:820px){.tur-maskot img{max-height:170px}}
.tur-nama{
  display:inline-block;font-family:var(--font-riang);font-weight:700;font-size:.8rem;
  padding:5px 14px;border-radius:999px;margin-bottom:12px;
}
.tur-nama.aru{background:var(--kuning-3)}
.tur-nama.uni{background:var(--biru-4)}
.tur-isi h3{margin-bottom:.3em}
.tur-isi p{color:var(--tinta-lembut);margin-bottom:1em}
.tur-kendali{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.tur-nav{
  width:48px;height:48px;border-radius:50%;border:2.5px solid var(--tinta);
  background:var(--putih);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--tinta);
  display:grid;place-items:center;transition:background .15s ease,transform .15s ease;
}
.tur-nav:hover:not(:disabled){background:var(--kuning-3);transform:translateY(-2px)}
.tur-nav:disabled{opacity:.3;cursor:not-allowed}
.tur-titik{display:flex;gap:9px}
.tur-titik button{
  width:12px;height:12px;border-radius:50%;border:2px solid var(--tinta);
  background:var(--putih);padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease;
}
.tur-titik button[aria-current="true"]{background:var(--aksi);border-color:var(--aksi);transform:scale(1.25)}

/* ---------- Pemandu usia ---------- */
.pemandu{max-width:800px;margin:0 auto}
.pemandu-tombol{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:30px}
.pemandu-tombol button{
  font-family:var(--font-judul);font-weight:700;font-size:1rem;
  background:var(--putih);border:2.5px solid var(--tinta);border-radius:999px;
  padding:12px 24px;cursor:pointer;color:var(--tinta);
  transition:background .15s ease,transform .15s ease;
}
.pemandu-tombol button:hover{transform:translateY(-2px)}
.pemandu-tombol button[aria-pressed="true"]{background:var(--tinta);color:var(--putih)}
.pemandu-hasil{display:none}
.pemandu-hasil.tampil{display:block;animation:balonMasuk .35s ease}
.hasil-kartu{
  border-radius:26px;padding:32px;border:2.5px solid var(--tinta);
  box-shadow:0 8px 0 rgba(61,43,46,.12);
  display:grid;grid-template-columns:130px 1fr;gap:26px;align-items:center;
}
@media(max-width:640px){.hasil-kartu{grid-template-columns:1fr;text-align:center;padding:26px 20px}}
.hasil-kartu img{max-height:180px;width:auto;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(61,43,46,.16))}
.hasil-kartu h3{margin-bottom:.25em}
.hasil-kartu p{margin-bottom:1em;color:var(--tinta)}
.hasil-kartu.bayi{background:var(--pink-3)}
.hasil-kartu.batita{background:var(--kuning-3)}
.hasil-kartu.pra{background:var(--hijau-3)}
.hasil-kartu.lain{background:var(--biru-4)}

/* ---------- Ceklis milestone ---------- */
.ceklis-hasil{display:none}
.ceklis-hasil.tampil{display:block;animation:balonMasuk .35s ease}
.ceklis-kotak{
  background:var(--putih);border:2.5px solid var(--tinta);border-radius:26px;
  padding:32px;box-shadow:0 8px 0 rgba(61,43,46,.12);max-width:720px;margin:0 auto;
}
@media(max-width:620px){.ceklis-kotak{padding:24px 20px}}
.ceklis-kotak h3{margin-bottom:.2em}
.ceklis-kotak .kecil{margin-bottom:1.4em}
.ceklis-daftar{list-style:none;padding:0;margin:0 0 26px}
.ceklis-daftar li{margin-bottom:10px}
.ceklis-daftar label{
  display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  background:var(--krem);border:1.5px solid var(--garis);border-radius:var(--radius-s);
  padding:14px 16px;transition:background .15s ease,border-color .15s ease;
}
.ceklis-daftar label:hover{background:var(--pink-5)}
.ceklis-daftar label:has(input:checked){background:var(--hijau-4);border-color:var(--hijau-1)}
.ceklis-daftar input{margin:3px 0 0;width:20px;height:20px;flex:none;accent-color:var(--aksi)}
.ceklis-daftar span{font-size:.97rem;line-height:1.5}
.ceklis-tutup{
  background:var(--biru-5);border-radius:var(--radius-s);padding:20px 22px;
  font-size:.95rem;line-height:1.6;
}
.ceklis-tutup strong{display:block;margin-bottom:6px;font-family:var(--font-judul);font-size:1.1rem}

/* ---------- Kartu video Instagram ---------- */
.video-kartu{
  border-radius:26px;overflow:hidden;border:2.5px solid var(--tinta);
  box-shadow:0 8px 0 rgba(61,43,46,.12);background:var(--putih);
}
.video-tirai{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;aspect-ratio:9/14;padding:28px 22px;border:0;cursor:pointer;text-align:center;
  background:linear-gradient(160deg,var(--biru-3),var(--pink-3) 55%,var(--kuning-3));
  color:var(--tinta);font-family:var(--font-teks);
  transition:filter .18s ease;
}
.video-tirai:hover{filter:brightness(1.04)}
.video-tirai:focus-visible{outline:3px solid var(--tinta);outline-offset:-6px}
.video-main{
  width:66px;height:66px;border-radius:50%;background:var(--putih);border:2.5px solid var(--tinta);
  display:grid;place-items:center;font-size:1.4rem;padding-left:5px;margin-bottom:12px;
  box-shadow:0 4px 0 rgba(61,43,46,.18);transition:transform .18s ease;
}
.video-tirai:hover .video-main{transform:scale(1.08)}
.video-tema{font-family:var(--font-riang);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.video-judul{font-family:var(--font-judul);font-weight:800;font-size:1.3rem;line-height:1.2}
.video-catatan{font-size:.86rem;line-height:1.45;opacity:.85;max-width:22em}
.video-kartu iframe{display:block;width:100%;aspect-ratio:9/14;border:0;background:var(--putih)}
@media(max-width:900px){.video-tirai{aspect-ratio:4/3}.video-kartu iframe{aspect-ratio:9/13}}

/* ---------- Muncul saat digulir ---------- */
.muncul{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.muncul.terlihat{opacity:1;transform:none}

/* ---------- Sentuhan interaktif kecil ---------- */
.kartu{transition:transform .18s ease,box-shadow .18s ease}
.kartu:hover{transform:translateY(-3px);box-shadow:var(--bayang-kuat)}
.harga-kartu{transition:transform .18s ease,box-shadow .18s ease}
.harga-kartu:hover{transform:translateY(-4px);box-shadow:var(--bayang-kuat)}
.fasilitas li{transition:transform .15s ease,background .15s ease}
.fasilitas li:hover{transform:translateY(-2px);background:var(--kuning-4)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .judul-warna span{opacity:1;transform:none}
  .muncul{opacity:1;transform:none}
}

/* ---------- Jadwal kelas dan formulir pendaftaran ----------

   Ditambahkan saat halaman /jadwal berubah dari naskah statis menjadi jadwal
   sungguhan. Semua yang bisa memakai kelas yang sudah ada (.kartu, .form,
   .bidang, .pilihan, .tombol) memakainya; yang di bawah ini hanya bentuk yang
   memang belum pernah ada di situs. */

.jadwal-hari{
  display:flex;gap:22px;align-items:flex-start;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:14px;box-shadow:var(--bayang);
}
/* Keping tanggal. Tanggal yang berdiri sendiri terbaca jauh lebih cepat
   daripada tanggal di tengah kalimat - dan halaman ini dipindai, bukan
   dibaca. */
.jadwal-tanggal{
  flex:none;width:74px;text-align:center;background:var(--pink-5);
  border:1.5px solid var(--pink-3);border-radius:var(--radius-s);padding:10px 0 12px;
}
.jadwal-hari-nama{display:block;font-size:.72rem;font-weight:700;color:var(--aksi);
  text-transform:uppercase;letter-spacing:.06em}
.jadwal-angka{display:block;font-family:var(--font-judul);font-size:1.9rem;
  font-weight:700;color:var(--aksi);line-height:1.05}
.jadwal-bulan{display:block;font-size:.74rem;color:var(--tinta-lembut)}

.jadwal-sesi{flex:1;min-width:0;display:grid;gap:10px}
.jadwal-baris{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  padding:12px 16px;border-radius:var(--radius-s);background:var(--krem);
  border-left:4px solid var(--garis);
}
.jadwal-baris .kecil{display:block;font-size:.86rem;color:var(--tinta-lembut);margin-top:2px}
.jadwal-kanan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jadwal-kursi{font-size:.86rem;font-weight:600;color:var(--tinta-lembut);white-space:nowrap}

/* Tiga keadaan kursi. Penuh sengaja BUKAN merah: penuh adalah kabar baik bagi
   Arumanis, dan bagi pengunjung ia informasi - bukan galat. Yang diberi warna
   paling kuat justru yang hampir habis, karena itu yang menuntut keputusan. */
.jadwal-baris.keadaan-longgar{border-left-color:var(--hijau-2)}
.jadwal-baris.keadaan-hampir{border-left-color:var(--kuning-1);background:#FEFBEF}
.jadwal-baris.keadaan-penuh{border-left-color:var(--biru-3);opacity:.78}

@media(max-width:640px){
  .jadwal-hari{flex-direction:column;gap:14px;padding:18px}
  .jadwal-tanggal{width:100%;display:flex;align-items:baseline;justify-content:center;gap:8px}
  .jadwal-angka{font-size:1.3rem}
  .jadwal-kanan{width:100%;justify-content:space-between}
}

/* Perangkap robot. Bukan display:none dan bukan type=hidden - robot pengisi
   formulir melewati keduanya. Ia harus "ada" bagi mesin tapi tak terjangkau
   manusia: di luar layar, tanpa tinggi, dan dijauhkan dari urutan Tab lewat
   atribut di HTML-nya. */
.jebakan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Radio bertumpuk, untuk pilihan yang labelnya kalimat penuh. */
.pilihan.tumpuk{flex-direction:column;align-items:stretch}
.pilihan.tumpuk label{border-radius:var(--radius-s);justify-content:flex-start}

/* Kedipan singkat saat sesi terpilih dari tombol di daftar jadwal. Tanpa ini,
   tombol "Pilih sesi ini" terasa tidak melakukan apa pun: halaman melompat ke
   formulir, dan menu yang sudah terisi ada jauh di bawah layar. */
@keyframes sesi-terpilih{
  0%{border-color:var(--aksi);background:var(--pink-4)}
  100%{border-color:var(--garis);background:var(--krem)}
}
.bidang select.berubah{animation:sesi-terpilih 1.4s ease-out}
@media(prefers-reduced-motion:reduce){.bidang select.berubah{animation:none}}

/* Usia anak: dua kotak angka dengan satuannya terlihat di sebelahnya.
   Sebelumnya satuannya hanya ada di aria-label dan di placeholder yang tidak
   pernah muncul karena kedua medan berisi 0. */
.label-grup{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.usia-duet{display:flex;gap:12px;flex-wrap:wrap}
.usia-satuan{display:flex;align-items:center;gap:10px;flex:1 1 110px;
  flex-wrap:nowrap;margin-bottom:0;font-weight:400}
/* width:auto membatalkan .bidang input{width:100%}, yang tanpa ini mendorong
   satuannya membungkus ke baris berikutnya - dan satuan yang berdiri di
   bawah kotaknya sama tidak jelasnya dengan tidak ada satuan sama sekali. */
.usia-satuan input{width:auto;flex:1 1 60px;min-width:0}
.usia-satuan > span{flex:none;color:var(--tinta-lembut);font-size:.9rem;
  white-space:nowrap}

/* Galat yang menempel di medannya sendiri. Ringkasan galat di puncak formulir
   sudah ada, tapi formulir ini panjang - di ponsel, ringkasan di atas berarti
   menggulir naik, membaca, lalu menggulir turun lagi mencari medan mana yang
   dimaksud. */
.salah-medan{margin:7px 0 0;color:#8E3436;font-size:.86rem;font-weight:600}

/* Kartu "sesi mana untuk usia berapa" di halaman jadwal, dan bingkai catatan
   yang hanya terlihat staf.
   ------------------------------------------------------------------------ */
.sesi-usia{margin:0 0 26px;max-width:640px}
.sesi-usia h3{margin:0 0 10px;font-size:1.05rem}
.sesi-usia ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.sesi-usia li{padding:10px 14px;background:var(--krem);border-radius:12px}
.sesi-usia p{margin:0}

/* Catatan untuk pemilik. Dibuang dari jawaban sebelum dikirim ke pengunjung -
   lihat App\Support\Naskah - jadi gaya ini HANYA pernah terlihat staf yang
   sedang masuk. Sengaja mencolok: halaman ini nyaris seluruhnya naskah untuk
   orang tua, dan catatan internal yang terbaca seperti bagian halaman adalah
   catatan yang suatu saat ikut terbit. */
.pemilik-blok{
  margin:26px 0;border:2.5px dashed var(--aksi);border-radius:18px;
  padding:18px 20px;background:#FFFBF7;
}
.pemilik-blok > :last-child{margin-bottom:0}
.pemilik-tanda{
  margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aksi);
}
.pemilik-blok .seksi,.pemilik-blok .wrap{padding:0}
.pemilik-blok .kartu{border:0;box-shadow:none;padding:0;background:none}