/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);padding:max(0.625rem,env(safe-area-inset-top)) 0 0.625rem}
html.js .site-header{position:fixed;inset:0 0 auto;transform:translateY(-100%);visibility:hidden;transition:transform .25s,visibility .25s}
html.js .site-header.is-visible{transform:none;visibility:visible}
.site-header .wrap{display:flex;align-items:center;justify-content:center;gap:0.75rem}
.site-header .btn{display:none}
.site-header img{height:1.875rem;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:0.75rem}
.badges{display:flex;flex-wrap:nowrap;gap:0.25rem;list-style:none;margin:var(--s-sm) 0 0;padding:0}
.badges li{flex:1 1 0;min-width:0;max-width:7rem;display:flex;flex-direction:column;align-items:center;gap:0.375rem;text-align:center;font-size:clamp(.625rem,2.8vw,.75rem);line-height:1.25;font-weight:600;color:var(--text-soft);overflow-wrap:anywhere}
.badges img{width:100%;height:2.5rem;object-fit:contain}
.hero-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm)}

/* #tanda */
.signs{background:var(--bg-raised)}
.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:0.125rem var(--accent)}
.sign-list{margin:0 0 var(--s-xs)}
.sign-list summary{font-size:1.125rem;font-weight:600}
.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:1rem;border-left:0.1875rem solid var(--accent);font:600 1.75rem/1.15 var(--font-display);text-transform:uppercase}
.tora blockquote cite{display:block;margin-top:0.5rem;font:400 .875rem/1.4 var(--font-body);color:var(--text-soft);text-transform:none;font-style:normal}
.disclose{border:0.0625rem solid var(--line);border-radius:var(--r-sm);padding:0.75rem 1rem;font-size:.9375rem;color:var(--text-soft)}
.disclose strong{color:var(--text)}

/* #produk */
.product{background:var(--bg-raised)}
.product-grid{display:grid;gap:var(--s-sm)}
.pack{margin:0}
.pack img{width:100%;aspect-ratio:1080/1000;object-fit:cover;border-radius:var(--r-sm)}
.facts{margin:0}
.facts div{padding:0.875rem 0;border-bottom:0.0625rem solid var(--line)}
.facts div:first-child{border-top:0.0625rem solid var(--line)}
.facts dt{font:700 1.375rem/1.1 var(--font-display);text-transform:uppercase;margin-bottom:0.25rem}
.facts dd{margin:0;font-size:1rem;color:var(--text-soft)}
.facts a{color:var(--text)}

/* #faq */
.faq-list{max-width:47.5rem}
details{border-bottom:0.0625rem solid var(--line)}
details:first-of-type{border-top:0.0625rem solid var(--line)}
summary{position:relative;display:block;padding:1.0625rem 2.25rem 1.0625rem 0;cursor:pointer;list-style:none;font-weight:700;font-size:1.0625rem;line-height:1.5}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0.25rem;top:50%;transform:translateY(-50%);font-size:1.5rem;line-height:1;color:var(--accent)}
details[open] summary::after{content:"\2212"}
details p{color:var(--text-soft);margin:0 0 1rem}
details a{color:var(--text)}

/* #pesan */
/* #konsultasi (CTA Card, diadaptasi dari kartu dan .cta-stack di LP S-Glow) */
.cta-card-section{padding:var(--s-md) 0}
.cta-card{display:grid;gap:var(--s-sm);padding:var(--s-sm);border:0.0625rem solid var(--line);border-radius:var(--r-sm);background:var(--bg-raised)}
.cta-card h2{font-size:clamp(1.75rem,6.5vw,2.75rem);margin-bottom:var(--s-xs)}
.cta-card p{margin:0;color:var(--text-soft)}
.cta-stack{display:grid;gap:0.625rem}

/* #pesan: sampul di belakang konten, ganti file cover-final-sample.webp; --cover-opacity mengatur transparansi */
.final{text-align:center;position:relative;isolation:isolate;--cover-opacity:.3}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--bg) 0%,transparent 30%,transparent 70%,var(--bg) 100%)}
.final::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--cover-opacity);
  background:url("../assets/img/cover-final-sample.webp") center/cover no-repeat}
.final h2{font-size:clamp(2.5rem,11vw,5.5rem)}
.final .lede{margin-inline:auto;color:var(--text)}
.cta-missing{margin:0.75rem 0 0;font-size:.875rem;color:var(--text-soft)}

footer{padding:var(--s-md) 0}
footer p{margin:0 0 0.5rem;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:0.0625rem solid var(--line);padding:0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom,0rem));transition:transform .25s,visibility .25s}
.sticky-cta.is-hidden{transform:translateY(110%);visibility:hidden}
.sticky-cta .btn{width:100%}

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

@media (min-width:40rem){
  .btn-row{display:flex;align-items:center}
  .final .btn-row{justify-content:center}
}
@media (min-width:56.25rem){
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem}
  .hero-img{max-height:78vh}
  .signs-grid{grid-template-columns:.8fr 1.2fr;align-items:end;gap:4rem}
  .tora-grid{grid-template-columns:.9fr 1.1fr;align-items:center;gap:4rem}
  .product-grid{grid-template-columns:1fr 1fr;align-items:center;gap:4rem}
  .cta-card{grid-template-columns:1.1fr .9fr;align-items:center}
}

/* desktop saja (bukan tablet): header lengkap dengan tombol, FAB tidak dipakai. Tablet memakai header tengah dan FAB seperti mobile. */
@media (min-width:64rem) and (pointer:fine){
  body{padding-bottom:0}
  .sticky-cta{display:none}
  .site-header .wrap{justify-content:space-between}
  .site-header .btn{display:inline-flex}
}

/* #testimoni (scroller scroll-snap diadaptasi dari LP S-Glow) */
.testi-scroller{display:flex;gap:0.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-1.25rem;padding:0 1.25rem 0.5rem;scroll-padding-inline:1.25rem}
.testi-card{margin:0;flex:0 0 78%;max-width:17.5rem;scroll-snap-align:start;border:0.0625rem dashed var(--line);border-radius:var(--r-sm);background:var(--bg-raised);overflow:hidden}
.testi-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.testi-card figcaption{display:flex;flex-direction:column;gap:0.25rem;padding:0.75rem 1rem 1rem;font-size:.9375rem;color:var(--text-soft)}
.testi-card strong{color:var(--text)}
.ph-tag{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.testi .note{margin-top:var(--s-xs)}
@media (min-width:40rem){
  .testi-scroller{margin-inline:-2rem;padding-inline:2rem;scroll-padding-inline:2rem}
}
@media (min-width:64rem){
  .testi-scroller{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin-inline:0;padding-inline:0}
  .testi-card{max-width:none}
}

/* accordion: isi yang baru dibuka muncul dengan fade pendek supaya mata mengikuti perpindahan */
details[open]>p{animation:fade-down .25s ease}
@keyframes fade-down{from{opacity:0;transform:translateY(-0.375rem)}to{opacity:1;transform:none}}

/* #penghargaan */
.awards-grid{display:grid;gap:var(--s-md)}
.award-logos{display:flex;align-items:center;gap:1.5rem;margin-bottom:var(--s-xs)}
.award-logos img{height:5.5rem;width:auto;max-width:48%;object-fit:contain}
.award h3{font-size:1.5rem;line-height:1.1;margin-bottom:0.5rem}
.award p{margin:0 0 0.25rem;color:var(--text-soft);font-size:.9375rem}
.award a{color:var(--text)}
.awards-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--s-md) 3rem}

/* kerangka sertifikat BPOM + Halal dalam satu bingkai, di dalam item FAQ */
.cert-frame{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin:0 0 1rem;padding:0.75rem;border:0.0625rem solid var(--line);border-radius:var(--r-sm);background:var(--bg-raised)}
.cert-frame figure{margin:0}
.cert-frame img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0.25rem}
.cert-frame figcaption{display:flex;flex-direction:column;gap:0.125rem;margin-top:0.5rem;font-size:.875rem;font-weight:600;color:var(--text)}
.cert-frame small{font-size:.75rem;font-weight:400;color:var(--text-soft)}
@media (min-width:40rem){
  .cert-frame{max-width:30rem}
}

/* Ikon WhatsApp: hanya untuk tombol yang membuka chat (konsultasi, FAB, header desktop).
   Ikon adalah item flex tetap (flex:none) dengan gap, label boleh turun baris tanpa mendorong ikon,
   dan ikon disembunyikan di layar sangat sempit supaya label tidak berdesakan. */
.btn-wa{gap:0.625rem}
.btn-wa::before{content:"";flex:none;width:1.375rem;height:1.375rem;background:currentColor;
  -webkit-mask:var(--wa-icon) center/contain no-repeat;mask:var(--wa-icon) center/contain no-repeat}
:root{--wa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cg transform='translate(6.2 6.2) scale(.48)' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/g%3E%3C/svg%3E")}
@media (max-width:22.5rem){
  .btn-wa::before{display:none}
}