/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding:max(10px,env(safe-area-inset-top)) 0 10px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-header img{height:30px;width:auto}

/* #top (hero) */
.hero{padding:var(--s-sm) 0 var(--s-md)}
.hero-grid{display:grid;gap:var(--s-sm)}
.hero h1{margin-bottom:var(--s-xs)}
.lede{color:var(--text-soft);font-size:1.0625rem;max-width:34rem;margin-bottom:var(--s-sm)}
.btn-row{display:grid;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:var(--s-sm) 0 0;padding:0}
.chips li{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px;font-size:.8125rem;font-weight:600}
.hero-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm)}

/* #tanda */
.signs{background:var(--bg-raised);border-block:1px solid var(--line)}
.signs-grid{display:grid;gap:var(--s-sm)}
.big-age{margin:0;font:700 clamp(6.5rem,34vw,13rem)/.8 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--accent)}
.sign-list{list-style:none;margin:0 0 var(--s-sm);padding:0;border-top:1px solid var(--line)}
.sign-list li{padding:16px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:1.125rem}
.note{color:var(--text-soft);font-size:.9375rem}
.note a{color:var(--text)}

/* #tora */
.tora-grid{display:grid;gap:var(--s-sm)}
.tora-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm)}
.tora blockquote{margin:var(--s-sm) 0;padding-left:16px;border-left:3px solid var(--accent);font:600 1.75rem/1.15 var(--font-display);text-transform:uppercase}
.tora blockquote cite{display:block;margin-top:8px;font:400 .875rem/1.4 var(--font-body);color:var(--text-soft);text-transform:none;font-style:normal}
.disclose{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;font-size:.9375rem;color:var(--text-soft)}
.disclose strong{color:var(--text)}

/* #produk */
.product{background:var(--bg-raised);border-block:1px solid var(--line)}
.product-grid{display:grid;gap:var(--s-md)}
.pack{display:flex;align-items:flex-end;justify-content:center;gap:20px;padding:var(--s-sm);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.pack img:first-child{height:min(300px,58vw);width:auto}
.pack img:last-child{width:min(140px,30vw);height:auto;margin-bottom:12px}
.facts{margin:0}
.facts div{padding:14px 0;border-bottom:1px solid var(--line)}
.facts div:first-child{border-top:1px solid var(--line)}
.facts dt{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:4px}
.facts dd{margin:0;font-size:1.0625rem}
.facts a{color:var(--text)}

/* #faq */
.faq-list{max-width:760px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none;font-weight:700;font-size:1.0625rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--accent);flex:none}
details[open] summary::after{content:"\2212"}
details p{color:var(--text-soft);margin:0 0 16px}
details a{color:var(--text)}

/* #pesan */
.final{text-align:center}
.final h2{font-size:clamp(2.5rem,11vw,5.5rem)}
.final .lede{margin-inline:auto}
.cta-missing{margin:12px 0 0;font-size:.875rem;color:var(--text-soft)}

footer{padding:var(--s-md) 0;border-top:1px solid var(--line)}
footer p{margin:0 0 8px;font-size:.8125rem;color:var(--text-soft);max-width:60ch}

/* bar CTA mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));transition:transform .25s}
.sticky-cta.is-hidden{transform:translateY(110%)}
.sticky-cta .btn{width:100%}

/* reveal: mengarahkan mata ke blok utama saat discroll, hanya bila JS aktif */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
html.js .reveal.in{opacity:1;transform:none}

@media (min-width:640px){
  .btn-row{display:flex}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .sticky-cta{display:none}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:64px}
  .hero-img{max-height:78vh}
  .signs-grid{grid-template-columns:.8fr 1.2fr;align-items:end;gap:64px}
  .tora-grid{grid-template-columns:.9fr 1.1fr;align-items:center;gap:64px}
  .product-grid{grid-template-columns:1fr 1fr;align-items:center;gap:64px}
  .pack img:first-child{height:340px}
}