/* Leo Channel — sistem visual
   ────────────────────────────────────────────────────────────────────────
   Palet diambil dari ilustrasi bukunya sendiri (golden hour di taman),
   bukan dari palet generik. Font: `ui-rounded` adalah generic CSS asli yang
   memetakan ke SF Pro Rounded di perangkat Apple — membulat & ramah-anak
   dengan NOL KB dan NOL permintaan ke server pihak ketiga (Google Fonts CDN
   mengirim IP pengunjung ke Google; untuk situs di sekitar audiens anak itu
   risiko yang tak perlu diambil).
*/

:root{
  --gold:#F5B942;  --gold-deep:#E09A2B;
  --sky:#FBE3C2;   --sky-hi:#FFF3E2;
  --sage:#7FA05A;        /* dekoratif saja — 2,97:1 dgn putih */
  --sage-aa:#617B45;     /* varian pembawa teks putih (4,74:1) */
  --sage-deep:#4E6B37;
  --clay:#D9694A;        /* dekoratif saja — kontras dgn putih hanya 3,46:1 */
  --clay-aa:#BA5A3F;     /* dipakai kalau ADA TEKS PUTIH di atasnya (4,54:1) */
  --ink:#2F2A24;   --ink-soft:#5E564C;
  --paper:#FFFCF7; --card:#FFFFFF;
  --line:#EADFCF;

  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --tap:48px;                     /* Apple HIG 44 / Material 48 — kita ambil yang lebih besar,
                                     karena persona kita: orang tua satu tangan, anak di tangan lain */
  --shadow-near:0 2px 6px rgba(47,42,36,.08);
  --shadow-far:0 18px 44px rgba(47,42,36,.14);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Variable Display",system-ui,-apple-system,sans-serif;
  font-size:clamp(17px,1.05vw + 14px,19px);   /* dasar besar: dibaca sambil menggendong */
  line-height:1.62; text-rendering:optimizeLegibility;
}
h1,h2,h3{line-height:1.18; letter-spacing:-.015em; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800}
h3{font-size:1.18rem; font-weight:700}
p{margin:0 0 1em; max-width:64ch}
a{color:var(--sage-deep); text-underline-offset:3px}
img{max-width:100%; display:block}

.wrap{width:min(1120px,92vw); margin-inline:auto}
.stack>*+*{margin-top:var(--gap,1.4rem)}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}

/* ── target sentuh: semua kontrol minimal 48px, tanpa kecuali ───────────── */
.btn,.chip,.nav a,.card-link{
  min-height:var(--tap); display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.15rem; border-radius:999px; text-decoration:none; font-weight:700;
}
.btn{background:var(--clay-aa); color:#fff; box-shadow:var(--shadow-near);
     transition:transform .18s var(--ease-soft), box-shadow .18s var(--ease-soft)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px); box-shadow:var(--shadow-far)}
.btn.ghost{background:var(--card); color:var(--ink); border:2px solid var(--line)}
.chip{background:var(--card); border:2px solid var(--line); color:var(--ink); font-size:.95rem}
.chip[aria-current="true"]{background:var(--sage-aa); border-color:var(--sage-aa); color:#fff}
:focus-visible{outline:3px solid var(--sage-deep); outline-offset:3px; border-radius:6px}

/* ── header ─────────────────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:40; background:rgba(255,252,247,.86);
     backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:.35rem; min-height:66px; flex-wrap:wrap}
.brand{font-weight:800; font-size:1.15rem; margin-right:auto; text-decoration:none; color:var(--ink);
       display:inline-flex; align-items:center; gap:.55rem}
.brand img{width:36px; height:36px; border-radius:50%}
.nav a{padding:.5rem .8rem; color:var(--ink-soft); font-size:.96rem}
.nav a:hover{color:var(--ink)}

/* ── HERO berlapis ──────────────────────────────────────────────────────────
   Ini bagian yang mengambil dari model 3D: KEDALAMAN BERLAPIS dan benda yang
   merespons kehadiran. Bedanya, di sini tidak ada WebGL — Googlebot resmi
   tidak mendukungnya, jadi teks di dalam kanvas hilang dari pencarian.
   Semua yang di bawah ini tetap HTML asli yang terindeks penuh.

   Rumus damping diambil dari skill `add-mouse-driven-orbit` milik Meng To:
   pointer dinormalisasi ke -1..1, lalu dihaluskan eksponensial. Aturan
   pentingnya: TIAP LAPISAN memakai pengali BERBEDA — kalau semua digeser
   sama besar, yang terasa cuma geseran, bukan kedalaman.
*/
.hero{position:relative; overflow:hidden; padding:clamp(2.5rem,7vw,4rem) 0 0;
      background:linear-gradient(178deg,var(--sky-hi) 0%,var(--sky) 55%,#F3E7CF 100%)}
/* Adegan HARUS terlihat tanpa scroll — kalau tokohnya jatuh di bawah lipatan,
   seluruh gagasan "kedalaman berlapis" hilang bagi mayoritas pengunjung.
   Di layar lebar: dua kolom. Di layar sempit: bertumpuk, tapi hero-nya
   diperpendek supaya adegannya tetap masuk layar. */
.hero .wrap{display:grid; gap:1rem; align-items:end}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:2rem}
  .hero .scene{height:clamp(300px,32vw,400px); margin-top:0}
}
.hero-copy{position:relative; z-index:5; max-width:34rem}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:1.16rem; color:var(--ink-soft); max-width:38ch}
.hero-cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem}

.scene{position:relative; height:clamp(230px,30vw,340px); margin-top:1rem;
       --rx:0; --ry:0}                      /* diisi JS; default 0 = diam */
/* TANPA transition pada transform. app.js sudah meredam per-frame; menambah
   transisi CSS di atasnya membuat peredaman DOBEL — gerakannya tertinggal dari
   kursor dan terasa berat. (Ini juga sempat mengacaukan pengukuran: getBoundingClientRect
   yang dibaca seketika mengembalikan posisi transisi yang belum selesai.) */
.layer{position:absolute; bottom:0; pointer-events:none; will-change:transform}
.layer img{filter:drop-shadow(0 12px 24px rgba(47,42,36,.18))}
/* pengali berbeda per lapisan — jauh bergerak sedikit, dekat bergerak banyak */
.l-far  {left:4%;  width:clamp(96px,13vw,150px);
         transform:translate3d(calc(var(--rx)*  -8px),calc(var(--ry)*  -4px),0)}
.l-mid  {left:26%; width:clamp(120px,17vw,196px);
         transform:translate3d(calc(var(--rx)* -18px),calc(var(--ry)*  -9px),0)}
.l-near {right:20%;width:clamp(132px,19vw,214px);
         transform:translate3d(calc(var(--rx)*  30px),calc(var(--ry)* 14px),0)}
.l-front{right:2%; width:clamp(108px,15vw,170px);
         transform:translate3d(calc(var(--rx)*  46px),calc(var(--ry)* 22px),0)}
/* Tanah dibuat FULL-BLEED di dasar hero, bukan kotak di dalam .scene.
   Versi pertama memakai persegi di dalam adegan — tepinya berhenti mendadak
   dan tokohnya terbaca sebagai stiker menempel, bukan berdiri di suatu tempat.
   Satu garis tanah yang menerus membuat keempatnya berada di dunia yang sama. */
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(70px,9vw,120px);
             background:linear-gradient(to top,rgba(127,160,90,.40),rgba(127,160,90,.10) 60%,transparent);
             pointer-events:none; z-index:1}
.hero .scene{z-index:2}
.layer img{filter:drop-shadow(0 10px 14px rgba(78,107,55,.32))}   /* bayangan jatuh ke tanah */

/* ── kartu ──────────────────────────────────────────────────────────────── */
.grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
      overflow:hidden; box-shadow:var(--shadow-near);
      display:flex; flex-direction:column;      /* tombol sejajar walau ringkasan beda panjang */
      transition:transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft)}
.card:hover,.card:focus-within{transform:translateY(-4px); box-shadow:var(--shadow-far)}
.card .thumb{display:block; position:relative; aspect-ratio:16/9; background:var(--sky);
             overflow:hidden}   /* display:block WAJIB — .thumb adalah <a>, dan
                                   aspect-ratio tidak berlaku pada elemen inline,
                                   sehingga thumbnail tak pernah terpotong 16:9 */
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .len{position:absolute; right:.6rem; bottom:.6rem; background:rgba(47,42,36,.82); color:#fff;
           font-size:.8rem; font-weight:700; padding:.2rem .5rem; border-radius:6px}
.card .body{padding:1.05rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1}
.card h3{margin-bottom:.3rem}
.card p{font-size:.95rem; color:var(--ink-soft); margin-bottom:.9rem}
.card .card-link{margin-top:auto; align-self:flex-start}
.card-link{background:var(--sage-aa); color:#fff; font-size:.95rem; padding:.6rem 1rem}

.kicker{display:inline-block; font-size:.82rem; font-weight:800; letter-spacing:.09em;
        text-transform:uppercase; color:var(--sage-deep); margin-bottom:.5rem}

/* ── seksi & panel ──────────────────────────────────────────────────────── */
section{padding:clamp(2.6rem,6vw,4.6rem) 0}
.band{background:var(--sky-hi); border-block:1px solid var(--line)}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
       padding:clamp(1.3rem,3vw,2.1rem)}
.split{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* bukti sosial */
.proof{display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center; margin-top:1.4rem}
.proof b{font-size:1.5rem; display:block; line-height:1.1}
.proof span{font-size:.86rem; color:var(--ink-soft)}

/* tokoh */
.cast{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cast figure{margin:0; text-align:center; background:var(--card); border:1px solid var(--line);
             border-radius:var(--r-lg); padding:1.1rem .9rem}
.cast img{width:min(140px,60%); margin-inline:auto}
.cast figcaption{margin-top:.7rem}
.cast b{display:block}
.cast span{font-size:.9rem; color:var(--ink-soft)}

/* lirik */
.lyrics{background:var(--sky-hi); border-radius:var(--r-md); padding:1.2rem 1.4rem;
        border:1px solid var(--line)}
.lyrics p{font-size:1.06rem; margin:0 0 .35em; max-width:none}

/* jadwal */
.sched{list-style:none; padding:0; margin:0}
.sched li{display:flex; gap:1rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--line)}
.sched time{font-weight:800; color:var(--sage-deep); min-width:6.5rem; font-variant-numeric:tabular-nums}

footer{background:var(--ink); color:#EFE7DA; padding:2.6rem 0 3rem; margin-top:2rem}
footer a{color:#F5D9A8}
footer .split{gap:1.2rem}

/* ── GERAK ────────────────────────────────────────────────────────────────
   Riset aksesibilitas: parallax & gerak kontinu memicu pusing pada gangguan
   vestibular, dan situs ini sering dibuka saat anak ikut melihat. Jadi:
   amplitudo kecil, dan SEMUA gerak mati total saat pengguna memintanya.
*/
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.reveal{animation:rise .6s var(--ease-soft) both}

/* Scroll-driven CSS: 85% dukungan global, Firefox baru sejak v156 — jadi
   dipakai sebagai peningkatan, bukan satu-satunya jalur. Tanpa dukungan,
   `.reveal` tetap jalan sebagai animasi biasa saat halaman dimuat. */
@supports (animation-timeline:view()){
  .reveal{animation:rise .8s var(--ease-soft) both; animation-timeline:view(); animation-range:entry 8% cover 34%}
}

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

@media (max-width:640px){
  .scene{height:200px}
  .l-far{display:none}                      /* di layar kecil, kurangi keramaian */
  .nav a{padding:.5rem .6rem; font-size:.9rem}
}
@media print{.nav,.hero .scene,footer{display:none}}

/* ── kartu unduhan ebook ──────────────────────────────────────────────────── */
.dl{display:grid; gap:1.6rem; align-items:center}
@media (min-width:820px){ .dl{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.dl-art img{width:100%; border-radius:var(--r-md); box-shadow:var(--shadow-far);
            transform:rotate(-1.4deg)}          /* sedikit miring: terbaca sebagai BENDA, bukan tombol */
.ticks{list-style:none; padding:0; margin:0 0 1.4rem}
.ticks li{position:relative; padding-left:1.7rem; margin-bottom:.45rem; color:var(--ink-soft);
          font-size:.97rem}
.ticks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--sage-aa);
                  font-weight:800}

/* ── kelas utilitas menggantikan atribut style="" inline ──────────────────────
   Bukan preferensi gaya: CSP `style-src 'self'` di netlify.toml MEMBLOKIR
   atribut style inline. Melemahkannya dengan 'unsafe-inline' akan membatalkan
   gunanya — CSP itulah yang menegakkan janji "situs ini tidak memuat apa pun
   dari perusahaan lain". Jadi gayanya pindah ke sini. */
.skip{position:absolute; left:-9999px; top:0; z-index:99}
.skip:focus{left:8px; top:8px}                      /* :focus murni CSS, tanpa handler inline */
.on-dark{color:#fff}
.on-dark-soft{color:#CDBFA8}
.plain{text-decoration:none; color:inherit}
.row{display:flex; gap:.6rem; flex-wrap:wrap}
.mt-m{margin-top:1.4rem}
.mt-s{margin-top:1rem}
.mt-xs{margin-top:.8rem}
.mb-xs{margin-bottom:.35em}
.ai-center{align-items:center}
.gap-s{--gap:1.1rem}
.cast-portrait{max-width:190px; margin-inline:auto}
.watch-card{display:block; max-width:760px; text-decoration:none; color:inherit}