/* ==========================================================================
   HerbaGULANO — advertorial landing page
   Style mengikuti nutrition.mganik.com (kolom sempit, mobile-first)
   Tone warna: hijau pastel (#9FB698)
   ========================================================================== */

:root{
  --g-50:#F4F8F1; --g-100:#E7EFE2; --g-200:#D2E0C9; --g-300:#B8CBAE;
  --g-400:#9FB698; --g-500:#87A27E; --g-600:#6D8A64; --g-700:#55704D;
  --g-800:#3F5439; --g-900:#2A3A26;
  --mint:#9DB8AE; --gold:#D4A62A; --gold-soft:#F6E9C4;
  --ivory:#F7FAF4; --sand:#EDF4E8;
  --ink:#1D241B; --muted:#5E6B5A;
  --shell:#DDE8D6;            /* latar di luar kolom advertorial */
  --col: 34rem;               /* lebar kolom advertorial */
}

*{ -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--shell);
  background-image:
    radial-gradient(900px 600px at 10% 0%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(800px 600px at 95% 30%, rgba(157,184,174,.45), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--g-200); color:var(--g-900); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--g-50); }
::-webkit-scrollbar-thumb{ background:var(--g-300); border-radius:99px; border:2px solid var(--g-50); }
::-webkit-scrollbar-thumb:hover{ background:var(--g-500); }

/* --- Kolom advertorial ----------------------------------------------------- */
.shell{
  max-width:var(--col);
  margin-inline:auto;
  background:#fff;
  box-shadow:0 0 0 1px rgba(42,58,38,.05), 0 40px 90px -60px rgba(42,58,38,.5);
  overflow:hidden;
}
.pad{ padding-inline:1.5rem; }

/* --- Tipografi ------------------------------------------------------------- */
.eyebrow{
  color:var(--g-600); font-weight:800; letter-spacing:-.01em;
  font-size:1.35rem; line-height:1.25;
}
.headline{
  color:var(--ink); font-weight:800; letter-spacing:-.025em;
  font-size:1.6rem; line-height:1.22;
}
.lede{ color:var(--muted); font-size:.98rem; line-height:1.72; }
@media (min-width:480px){
  .eyebrow{ font-size:1.5rem; }
  .headline{ font-size:1.85rem; }
}

/* --- Tekstur --------------------------------------------------------------- */
.grain{ position:relative; }
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.leafy{
  background-color:#F1F7EC;
  background-image:
    radial-gradient(560px 340px at 108% -12%, rgba(159,182,152,.75), transparent 64%),
    radial-gradient(460px 320px at -18% 110%, rgba(157,184,174,.62), transparent 64%),
    linear-gradient(180deg, rgba(231,239,226,.9), rgba(255,255,255,0) 58%);
}

/* --- Tombol ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:800; border-radius:999px; line-height:1;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  background:var(--g-700); color:#fff;
  box-shadow:0 14px 26px -14px rgba(42,58,38,.85), inset 0 -2px 0 rgba(42,58,38,.28);
}
.btn-primary:hover{ background:var(--g-800); transform:translateY(-2px); box-shadow:0 20px 32px -14px rgba(42,58,38,.9); }
.btn-wa{ background:#1FA855; color:#fff; box-shadow:0 14px 26px -14px rgba(16,94,48,.8); }
.btn-wa:hover{ background:#178944; transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--g-800); border:1.5px solid var(--g-200); }
.btn-ghost:hover{ border-color:var(--g-500); transform:translateY(-2px); }

/* --- Kartu ----------------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--g-100); border-radius:1.25rem;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.card-hover:hover{ transform:translateY(-4px); border-color:var(--g-200); box-shadow:0 26px 44px -30px rgba(42,58,38,.5); }

/* checklist ala referensi */
.check{ display:flex; gap:.75rem; align-items:flex-start; }
.check i{
  flex:0 0 auto; display:grid; place-items:center; width:1.5rem; height:1.5rem; margin-top:.1rem;
  border-radius:999px; background:var(--g-600); color:#fff;
}

/* kartu bahan aktif */
.herb{ text-align:center; }
.herb .ico{
  margin-inline:auto; display:grid; place-items:center; width:4rem; height:4rem; border-radius:999px;
  background:#fff; color:var(--g-600); box-shadow:0 10px 24px -16px rgba(42,58,38,.6);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.herb:hover .ico{ transform:translateY(-4px) scale(1.04); }

/* langkah bernomor */
.step{ position:relative; }
.step .num{
  position:absolute; top:-.85rem; left:1.25rem;
  display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:.6rem;
  background:var(--g-600); color:#fff; font-weight:800; font-size:.8rem;
}

/* --- Badge ----------------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:800; letter-spacing:.02em;
  padding:.35rem .7rem; border-radius:999px;
  background:var(--g-50); color:var(--g-700); border:1px solid var(--g-100);
}
.pill-gold{ background:var(--gold-soft); color:#6B5208; border-color:#EEDCA6; }

/* --- FAQ ------------------------------------------------------------------- */
.faq{ border:1px solid var(--g-100); border-radius:1rem; background:#fff; transition:border-color .3s, box-shadow .3s; }
.faq[open]{ border-color:var(--g-200); box-shadow:0 20px 36px -30px rgba(42,58,38,.6); }
.faq summary{ list-style:none; cursor:pointer; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .ico{ transition:transform .35s cubic-bezier(.2,.7,.3,1), background-color .3s, color .3s; }
.faq[open] .ico{ transform:rotate(45deg); background:var(--g-600); color:#fff; }
.faq .body{ animation:faqIn .3s ease both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-5px);} to{ opacity:1; transform:none; } }

/* --- Header & sticky CTA --------------------------------------------------- */
.site-header{ transition:background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.site-header.stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 8px 26px -22px rgba(42,58,38,.8);
}
#ctaBar{ transform:translateY(120%); transition:transform .4s cubic-bezier(.2,.7,.3,1); }
#ctaBar.show{ transform:none; }

/* --- Reveal ---------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in{ opacity:1; transform:none; }

/* --- Chart ----------------------------------------------------------------- */
.chart-line{ stroke-dasharray:1000; stroke-dashoffset:1000; }
.in .chart-line{ animation:draw 1.8s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.bar{ transform-origin:bottom; transform:scaleY(0); transition:transform .9s cubic-bezier(.2,.8,.3,1); }
.in .bar{ transform:scaleY(1); }

/* --- Marquee --------------------------------------------------------------- */
.marquee{ display:flex; overflow:hidden; }
.marquee__t{ display:flex; gap:2rem; padding-inline:1rem; flex:0 0 auto; animation:mq 26s linear infinite; }
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* --- Scroll cue ------------------------------------------------------------ */
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.bob{ animation:bob 2s ease-in-out infinite; }

/* --- Testimoni scroller ---------------------------------------------------- */
.scroller{ display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.25rem; }
.scroller::-webkit-scrollbar{ display:none; }
.scroller > *{ scroll-snap-align:center; flex:0 0 85%; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .chart-line{ stroke-dashoffset:0 !important; }
  .bar{ transform:scaleY(1) !important; }
}

/* --- Akordeon provinsi (Cari Mitra) ---------------------------------------- */
.prov summary{ list-style:none; }
.prov summary::-webkit-details-marker{ display:none; }
.prov .prov-ico{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.prov[open] .prov-ico{ transform:rotate(180deg); }
.prov{ transition:box-shadow .3s ease; }
.prov[open]{ box-shadow:0 18px 32px -28px rgba(42,58,38,.8); }

/* ==========================================================================
   DESKTOP ( ≥1024px )
   Kolom advertorial dilepas; section jadi full-bleed, konten dibatasi container
   ========================================================================== */
@media (min-width:1024px){
  html{ scroll-padding-top:96px; }

  .shell{
    max-width:none;
    box-shadow:none;
    background:transparent;
    overflow:visible;
  }

  .pad{
    max-width:72rem;
    margin-inline:auto;
    padding-inline:2.5rem;
  }

  .eyebrow{ font-size:2.15rem; line-height:1.18; }
  .headline{ font-size:2.6rem; line-height:1.14; }
  .lede{ font-size:1.0625rem; line-height:1.8; }

  /* section yang perlu latar sendiri saat full-bleed */
  .site-header{ background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); }
  .site-header.stuck{ box-shadow:0 10px 30px -26px rgba(42,58,38,.9); }

  /* testimoni: dari scroller jadi grid */
  .scroller{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
    overflow:visible; max-width:72rem; margin-inline:auto; padding-inline:2.5rem;
  }
  .scroller > *{ flex:none; }

  /* batasi lebar elemen yang tidak enak kalau melar */
  .narrow{ max-width:42rem; margin-inline:auto; }
  .narrow-sm{ max-width:34rem; margin-inline:auto; }
}

@media (min-width:1280px){
  .eyebrow{ font-size:2.4rem; }
  .headline{ font-size:3rem; }
}