/* ============================================================
   SEMMANIS MADU
   Struktur dan ritme gerak mengacu yojea.co.id (lihat
   reference/yojea/TEARDOWN.md). Kode, copy, dan aset orisinal.

   Palet dari logo resmi:
     kuning  #FCAF01  latar logo, dipakai untuk PERMUKAAN
     hijau   #16382A  tinta logo, dipakai untuk TEKS aksen
   Aturannya: kuning tidak pernah jadi warna teks di atas krem
   (kontras terlalu rendah). Teks di atas kuning selalu hijau.

   Microcopy: tanpa em dash, tanpa en dash.
   ============================================================ */

:root {
  --kuning:       #FCAF01;
  --kuning-deep:  #E39C00;
  --kuning-soft:  #FFE2A0;
  --kuning-wash:  #FFF3D8;
  --hijau:        #16382A;   /* 11.9:1 di atas krem */
  --hijau-2:      #24503C;   /*  8.5:1, untuk eyebrow */
  --hijau-soft:   #DCE7DA;
  --base:         #FBF6EC;
  --base-warm:    #F4EAD5;
  --ink:          #1A241D;
  --ink-mute:     #505A51;   /*  6.7:1 */
  --line:         #E6DCC6;
  --wa:           #1FA855;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --pad-x: clamp(20px, 4.5vw, 64px);
  --gap-y: clamp(80px, 11vw, 150px);
  --nav-h: 76px;
  --radius: 20px;
  --pill: 999px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--base); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(38px, 5.4vw, 76px); }
h3 { font-size: 22px; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--gap-y); position: relative; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hijau-2); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow--c { justify-content: center; }
.lead { color: var(--ink-mute); font-size: clamp(15px, 1.2vw, 17px); max-width: 52ch; margin-top: 22px; }

/* ── Tombol ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--pill); border: 1px solid transparent;
  font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--hijau); outline-offset: 3px; }
.btn svg { transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--kuning { background: var(--kuning); color: var(--hijau); box-shadow: 0 12px 28px -14px rgba(227,156,0,.8); }
.btn--kuning:hover { background: var(--kuning-deep); }
.btn--hijau { background: var(--hijau); color: var(--base); }
.btn--hijau:hover { background: #0F2A1F; }
.btn--ghost { background: color-mix(in srgb, #fff 40%, transparent); border-color: var(--hijau); color: var(--hijau); }
.btn--ghost:hover { background: var(--hijau); color: var(--base); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #17924a; }
.btn--sm { padding: 11px 18px; font-size: 13px; }

/* ============================================================
   NAV — logo kiri, pil tautan di tengah, CTA kanan
   ============================================================ */
.nav {
  position: fixed; inset: 14px var(--pad-x) auto; z-index: 60; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav__logo img { height: 40px; width: auto; }
.nav__pill {
  display: flex; gap: 2px; padding: 5px;
  border-radius: var(--pill); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--base) 72%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .3s, background .3s;
}
.nav.is-scrolled .nav__pill { background: color-mix(in srgb, var(--base) 92%, transparent); box-shadow: 0 10px 30px -20px rgba(26,36,29,.5); }
.nav__link {
  position: relative; padding: 9px 16px; border-radius: var(--pill);
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink-mute);
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--hijau); }
.nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--kuning-deep); transform: translateX(-50%) scale(0);
  transition: transform .25s var(--ease);
}
.nav__link[aria-current="true"] { color: var(--hijau); background: var(--kuning-wash); }
.nav__link[aria-current="true"]::after { transform: translateX(-50%) scale(1); }
.nav__cta { flex: none; }
.nav__burger {
  display: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--base); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__burger span { width: 18px; height: 1.6px; background: var(--hijau); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
.nav__drawer {
  position: fixed; inset: 0; z-index: -1;
  padding: 100px var(--pad-x) 32px; background: var(--base);
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .45s var(--ease-out), visibility .45s;
}
.nav.is-open .nav__drawer { transform: none; visibility: visible; }
.nav__drawer a {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 30px; text-decoration: none; color: var(--hijau);
}
.nav__drawer .btn { margin-top: 20px; font-family: var(--sans); font-size: 15px; border: 0; }
@media (max-width: 1080px) {
  .nav__pill, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; display: flex; align-items: center;
  padding-block: 120px 70px;
}
.aurora { position: absolute; inset: -15%; z-index: -2; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform, opacity; }
.aurora span:nth-child(1) { width: 44vw; aspect-ratio: 1; right: 4%; top: 6%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--kuning) 48%, transparent), transparent 70%);
  animation: aurora-a 14s ease-in-out infinite; }
.aurora span:nth-child(2) { width: 36vw; aspect-ratio: 1; left: -8%; bottom: -6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--kuning-soft) 70%, transparent), transparent 70%);
  animation: aurora-b 19s ease-in-out infinite; }
.aurora span:nth-child(3) { width: 30vw; aspect-ratio: 1; left: 34%; top: -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hijau-soft) 90%, transparent), transparent 70%);
  animation: aurora-c 23s ease-in-out infinite; }
.aurora span:nth-child(4) { width: 22vw; aspect-ratio: 1; right: 30%; bottom: 4%;
  background: radial-gradient(circle, color-mix(in srgb, var(--kuning) 30%, transparent), transparent 70%);
  animation: aurora-d 17s ease-in-out infinite; }
@keyframes aurora-a { 0%,100%{transform:none;opacity:.8} 50%{transform:translate(-6%,7%) scale(1.14);opacity:1} }
@keyframes aurora-b { 0%,100%{transform:scale(1.05);opacity:.6} 50%{transform:translate(8%,-6%) scale(.9);opacity:.9} }
@keyframes aurora-c { 0%,100%{transform:scale(.95);opacity:.5} 50%{transform:translate(-7%,9%) scale(1.1);opacity:.8} }
@keyframes aurora-d { 0%,100%{transform:scale(1);opacity:.4} 50%{transform:translate(10%,-8%) scale(1.2);opacity:.7} }
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .08; mix-blend-mode: multiply;
  background-image: var(--grain-url); background-size: 180px 180px;
}

.hero__grid { display: grid; grid-template-columns: 6fr 4fr; gap: clamp(28px, 4vw, 64px); align-items: center; width: 100%; }
.hero__eyebrow { margin-bottom: 26px; }
.hero__judul { font-size: clamp(44px, 7.2vw, 108px); line-height: 1.03; color: var(--hijau); }
/* Coretan kuas di "Madu murni": tepinya kasar dan tidak rata, tersapu dari kiri sekali saat halaman dibuka. */
.hl { position: relative; isolation: isolate; white-space: nowrap; }
.hl::before {
  content: ""; position: absolute; z-index: -1; inset: -.04em -.22em -.06em -.2em; transform: rotate(-1.4deg);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 80%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23FCAF01%22 fill-opacity=%22.5%22 d=%22M7 15C42 7 118 12 198 8C246 6 280 8 295 13L291 21L298 29L289 39L296 48L287 58L293 69C252 74 152 69 92 74C52 77 24 73 9 68L13 59L4 49L12 39L3 29L11 21Z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%22.38%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22 d=%22M16 30C90 26 190 32 280 27M10 46C100 43 200 49 288 44M24 60C110 57 190 62 270 58%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); animation: hl-sapu .9s .5s cubic-bezier(.5,.1,.2,1) forwards;
}
@keyframes hl-sapu { to { clip-path: inset(0 0 0 0); } }
.hero__judul > span { display: block; }
.hero__judul .hl { display: inline; }
.hero__sub { max-width: 50ch; margin-top: 36px; font-size: clamp(15px, 1.25vw, 18px); color: var(--ink-mute); }
.hero__sub strong { color: var(--hijau); font-weight: 700; }
.hero__sub .u-merek { color: var(--hijau); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--hijau) 55%, transparent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding: 0; }
.hero__badges li {
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill);
  background: color-mix(in srgb, #fff 55%, transparent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hijau);
}
.hero__badges li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kuning-deep); }

.hero__foto { position: relative; }
.hero__frame {
  position: relative; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(22,56,42,.55);
}
/* Foto bergantian: tiap adegan memudar masuk, label kecil menyusul */
.hero__adegan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.035); transition: opacity .9s ease, transform 5s ease-out; }
.hero__adegan.is-on { opacity: 1; transform: scale(1); }
.hero__label {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; border-radius: var(--pill); background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px -14px rgba(22,56,42,.6);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hijau);
  opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.hero__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kuning-deep); }
.hero__label.is-in { opacity: 1; transform: none; }

/* Lebah: terbang dengan jejak putus-putus, lalu hinggap di tulisan Semmanis Madu */
.lebah { position: absolute; inset: 0; z-index: 6; pointer-events: none; --lebah-w: clamp(24px, 2.2vw, 34px); }
.lebah__jejak { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity 1.2s ease .6s; }
.lebah__jejak.is-pudar { opacity: 0; }
.lebah__garis { fill: none; stroke: #3b3b3b; stroke-opacity: .5; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 11 9; }
.lebah__tirai { fill: none; stroke: #fff; stroke-width: 10; }
.lebah__terbang { position: absolute; left: 0; top: 0; width: var(--lebah-w); offset-rotate: 0deg; offset-anchor: 50% 50%; offset-distance: 0%; }
.lebah__img { display: block; width: 100%; height: auto; transform-origin: 50% 85%; animation: lebah-getar .2s ease-in-out infinite alternate; }
@keyframes lebah-getar { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-2px); } }
.lebah.is-hinggap .lebah__img { animation: lebah-diam 7s ease-in-out infinite; }
.lebah.is-geser .lebah__img { animation: lebah-getar .12s ease-in-out infinite alternate; }
@keyframes lebah-diam { 0%, 90%, 100% { transform: none; } 93% { transform: rotate(-8deg) translateY(-1px); } 96.5% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .hl::before { animation: none; clip-path: none; } .lebah__img, .lebah.is-hinggap .lebah__img { animation: none; } }




.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; color: var(--ink-mute);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.scroll-cue svg { animation: mantul 1.8s ease-in-out infinite; }
@keyframes mantul { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__foto { max-width: 440px; margin: 34px auto 0; width: 88%; }
}

/* ============================================================
   2. VARIAN: peta asal nektar
   Satu bidang 680 x 540. Lingkaran bunga dan teksnya memakai satuan
   cqw (lebar peta), jadi seluruh susunan menyusut serentak.
   ============================================================ */
.varian { position: relative; height: 340vh; background: var(--base); }
.varian__panggung {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--nav-h) + 1vh) var(--pad-x) 14px;
}
.varian__latar { position: absolute; inset: 0; pointer-events: none; }
.varian__glow {
  position: absolute; left: 50%; top: 56%; width: min(900px, 100vw); aspect-ratio: 1;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--kuning) 24%, transparent), transparent 62%);
}
.varian__judul { position: relative; z-index: 3; text-align: center; }
.varian__judul .eyebrow { justify-content: center; margin-bottom: 10px; }
.varian__judul .eyebrow::before { display: none; }
.varian__judul h2 { font-size: clamp(32px, 4.2vw, 60px); color: var(--hijau); }
.varian__sub { max-width: 58ch; margin: 10px auto 0; font-size: clamp(13px, 1.1vw, 15.5px); color: var(--ink-mute); }

.vp-wadah { position: relative; z-index: 2; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.vp-peta {
  position: relative; container-type: inline-size; aspect-ratio: 680 / 540;
  width: min(100%, 1060px, calc((100vh - var(--nav-h) - 215px) * 1.259));
}
.vp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vp-wil {
  fill: color-mix(in srgb, var(--kuning) 15%, var(--base)); stroke: color-mix(in srgb, var(--hijau) 34%, transparent);
  stroke-width: 1.9; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0;
}
.vp-prov { font: 700 9.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; fill: color-mix(in srgb, var(--hijau) 42%, transparent); }

.vp-garis { fill: none; stroke: color-mix(in srgb, var(--hijau) 42%, transparent); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; transition: stroke .25s, stroke-width .25s; }
.vp-garis.on { stroke: var(--hijau); stroke-width: 1.6; }
.vp-garis--tautan { stroke-dasharray: 3 4; opacity: 0; transition: opacity .3s; }
.vp-garis--tautan.on { opacity: 1; }
.vp-titik { transition: transform .3s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.vp-titik__halo { fill: var(--kuning); opacity: .3; }
.vp-titik__inti { fill: var(--kuning-deep); stroke: var(--base); stroke-width: 1.6; }
.vp-titik.on { transform: scale(1.5); }
.vp-titik.on .vp-titik__inti { fill: var(--hijau); }

.vp-kartu, .vp-kandang { position: absolute; inset: 0; pointer-events: none; }
.vp-kandang {
  inset: auto; left: calc(20 / 680 * 100%); top: calc(430 / 540 * 100%); width: calc(205 / 680 * 100%); height: calc(102 / 540 * 100%);
  border: 1.5px dashed color-mix(in srgb, var(--hijau) 28%, transparent); border-radius: 1.8cqw;
  opacity: 0; transition: opacity .5s ease;
}
.vp-kandang.is-in { opacity: 1; }
.vp-kandang span { position: absolute; left: 1.6cqw; top: .9cqw; font-size: clamp(9px, 1.25cqw, 11.5px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hijau-2); }

.vp-k {
  position: absolute; width: 6cqw; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%,-50%) scale(.5); opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .55s var(--ease-out);
}
.vp-k.is-in { opacity: 1; transform: translate(-50%,-50%); pointer-events: auto; }
.vp-k:focus-visible { outline: none; }
.vp-k__bulat {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--kuning-wash);
  border: .3cqw solid #fff; box-shadow: 0 10px 22px -12px rgba(22,56,42,.55);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.vp-k__bulat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-k:hover .vp-k__bulat, .vp-k:focus-visible .vp-k__bulat { transform: scale(1.14); box-shadow: 0 0 0 .4cqw var(--kuning), 0 14px 26px -12px rgba(22,56,42,.6); }
.vp-k__nama { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; line-height: 1.15; font-size: clamp(11px, 1.8cqw, 15px); font-weight: 700; color: var(--hijau); }
.vp-k--b .vp-k__nama { top: calc(100% + .8cqw); }
.vp-k--a .vp-k__nama { bottom: calc(100% + .8cqw); }
.vp-k__cat { position: absolute; white-space: nowrap; line-height: 1.15; font-size: clamp(10px, 1.45cqw, 12.5px); color: var(--ink-mute); }
.vp-k__cat--kanan { left: calc(100% + 1.4cqw); top: 50%; transform: translateY(-50%); }
.vp-k__cat--bawah { left: 50%; transform: translateX(-50%); top: calc(100% + 3.4cqw); }

.varian__petunjuk {
  position: relative; z-index: 3; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s var(--ease-out);
}
.varian__petunjuk.is-in { opacity: 1; transform: none; }
.vp-daftar { display: none; }
@keyframes putar { to { transform: rotate(360deg); } }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .varian { height: auto; }
  .varian__panggung { position: static; height: auto; overflow: visible; padding-bottom: 64px; }
  .varian__petunjuk { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .varian__panggung { padding-top: 96px; }
  .vp-wadah { display: block; margin-top: 18px; }
  .vp-peta { width: 100%; aspect-ratio: 610 / 360; }
  .vp-kartu, .vp-kandang, .vp-garis { display: none; }
  .vp-prov { font-size: 8px; }
  .varian__petunjuk { display: none; }
  .vp-daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 22px; position: relative; z-index: 3; }
  .vp-d {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; text-align: left; cursor: pointer;
    border: 1px solid var(--line); border-radius: 16px; background: #fff;
  }
  .vp-d:active { border-color: var(--kuning); }
  .vp-d__bulat { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--kuning-wash); }
  .vp-d__bulat img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .vp-d__teks { min-width: 0; }
  .vp-d__teks b { display: block; font-size: 14px; color: var(--hijau); }
  .vp-d__teks small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--ink-mute); }
}
@media (max-width: 420px) { .vp-daftar { grid-template-columns: 1fr; } }

/* ============================================================
   3. TENTANG — cerita brand, foto peternakan
   ============================================================ */
.tentang__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.tentang__media { position: relative; aspect-ratio: 4 / 5; }
.tentang__utama { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: var(--hijau); }
/* Jalur geser: dua slide berjajar, snap per slide. Bilah gulir disembunyikan. */
.tentang__geser { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -4px; }
.tentang__geser::-webkit-scrollbar { display: none; }
.tentang__slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; overflow: hidden; }
.tentang__slide > img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.tentang__slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; background: var(--hijau); }
/* Titik penanda slide, pojok kanan atas bingkai */
.tentang__titik { position: absolute; top: 16px; right: 16px; z-index: 4; display: flex; gap: 4px; padding: 4px; border-radius: var(--pill); background: color-mix(in srgb, var(--hijau) 70%, transparent); backdrop-filter: blur(6px); }
.tentang__titik button { all: unset; box-sizing: border-box; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.tentang__titik button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--base) 45%, transparent); transition: width .3s, background .3s; }
.tentang__titik button.is-aktif::before { width: 18px; border-radius: 4px; background: var(--base); }
.tentang__titik button:focus-visible { outline: 2px solid var(--base); outline-offset: 1px; }
/* Foto madu menimpa pojok kanan bawah, keluar sedikit dari bingkai besar. Hanya tampil di slide 1. */
.tentang__kedua {
  position: absolute; right: -11%; bottom: -8%; width: 52%; aspect-ratio: 4 / 5; margin: 0; z-index: 3;
  border-radius: 22px; overflow: hidden; border: 7px solid var(--base); box-shadow: 0 30px 50px -28px rgba(22,56,42,.55);
  transition: opacity .4s var(--ease, ease), transform .5s var(--ease, ease);
}
.tentang__media.is-slide2 .tentang__kedua { opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; }
.tentang__kedua img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.tentang__label {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  padding: 8px 14px; border-radius: var(--pill); background: color-mix(in srgb, var(--hijau) 88%, transparent);
  color: var(--base); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.tentang h2 { color: var(--hijau); }
.tentang__isi p + p { margin-top: 16px; }
.tentang__angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 26px; }
.tentang__angka b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; color: var(--hijau); }
.tentang__angka span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-mute); }
@media (max-width: 900px) {
  .tentang__grid { grid-template-columns: 1fr; }
  .tentang__media { aspect-ratio: 1 / 1; margin-bottom: 36px; }   /* persegi: klip Pak Siyamto potret, wajah harus utuh */
  .tentang__kedua { right: 14px; bottom: -34px; width: 40%; border-width: 5px; border-radius: 18px; }
  .tentang__label { top: 14px; bottom: auto; }   /* foto kecil menutup pojok kanan bawah, label pindah ke atas */
  .tentang__titik { top: 10px; right: 10px; }
  .tentang__slide video { object-position: 50% 8%; }   /* bingkai melebar: naikkan fokus supaya topi sampai dagu tetap masuk */
}

/* ============================================================
   4. PROSES — padanan section Manfaat Yojea
   Latar bergeser krem ke hijau tua di paruh pertama. Botol
   masuk dari tepi kanan (rebah, 2.4x) ke tengah (tegak, 1x).
   Lima tahap muncul bergiliran di kolom kanan.
   ============================================================ */
.proses { position: relative; height: 330vh; }
.proses__panggung { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.proses__glow {
  position: absolute; left: 50%; top: 50%; width: 70vw; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kuning) 26%, transparent), transparent 62%);
  opacity: var(--gelap, 0); pointer-events: none;
}
.proses__kepala {
  position: absolute; left: var(--pad-x); top: 50%; transform: translateY(-50%);
  width: min(400px, 32vw); z-index: 3; transition: color .4s;
}
.proses__kepala h2 { font-size: clamp(36px, 4.4vw, 66px); color: inherit; }
.proses__kepala .lead { color: inherit; opacity: .78; }
.proses__kepala .eyebrow { color: inherit; }
.proses.is-gelap .proses__kepala { color: var(--base); }
.proses:not(.is-gelap) .proses__kepala { color: var(--hijau); }
.proses__botol { position: absolute; left: 50%; top: 50%; width: min(290px, 23vw); z-index: 2; will-change: transform; }
.proses__botol img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(8,22,16,.32)); }
/* Kesan 3D: botol miring tipis mengikuti kursor, kilap kaca menyapu badan botol, bayangan lantai + pendar madu */
.proses__tilt { position: relative; transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .35s var(--ease-out); will-change: transform; }
.proses__kilap {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  -webkit-mask: url(aset/foto/botol-randu.webp?v=3) center / 100% 100% no-repeat; mask: url(aset/foto/botol-randu.webp?v=3) center / 100% 100% no-repeat;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.95) 49%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: var(--kilap, 150%) 0;
}
.proses__bayang { position: absolute; left: 50%; bottom: -4%; width: 125%; height: 12%; transform: translateX(-50%); opacity: var(--e, 0); pointer-events: none;
  background: radial-gradient(closest-side, rgba(6,18,12,.5), rgba(6,18,12,0)); filter: blur(5px); }
.proses__bayang::after { content: ""; position: absolute; left: -6%; right: -6%; top: -90%; height: 240%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244,176,54,.5), rgba(244,176,54,0)); opacity: var(--gelap, 0); filter: blur(14px); }
.proses__daftar { position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); width: min(360px, 30vw); z-index: 3; display: grid; gap: 12px; }
.tahap {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--base) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--base) 22%, transparent);
  color: var(--base); opacity: 0; will-change: transform, opacity;
}
.proses:not(.is-gelap) .tahap { color: var(--hijau); border-color: var(--line); background: #fff; }
.tahap__no { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--kuning); }
.proses:not(.is-gelap) .tahap__no { color: var(--kuning-deep); }
.tahap__teks b { display: block; font-size: 14.5px; }
.tahap__teks span { display: block; font-size: 12px; opacity: .72; margin-top: 2px; }
.tahap__centang { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--kuning); color: var(--hijau); }
@media (max-width: 900px) {
  .proses__kepala { top: calc(var(--nav-h) + 10px); transform: none; width: auto; right: var(--pad-x); }
  .proses__kepala .lead { display: none; }
  .proses__botol { width: 120px; }
  .proses__daftar { top: auto; bottom: 24px; transform: none; left: var(--pad-x); width: auto; gap: 8px; }
  .tahap { padding: 10px 12px; }
  .tahap__teks span { display: none; }
}

/* ============================================================
   5. MITOS — padanan section gelembung Yojea
   Mitos soal madu mengambang sebagai gelembung. Tombol di kotak
   tengah memecahkannya, lalu kotak berganti menampilkan fakta.
   ============================================================ */
.mitos { background: var(--base-warm); overflow: hidden; padding-block: clamp(56px, 7vw, 96px); }   /* lebih ringkas dari section lain */
.mitos__kepala { text-align: center; max-width: 720px; margin: 0 auto; }
.mitos__kepala h2 { color: var(--hijau); }
.mitos__kepala .lead { margin-inline: auto; }
.mitos__arena { position: relative; height: clamp(440px, 38vw, 470px); margin-top: 20px; }
.mitos__kotak {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(380px, 82vw); padding: 26px 26px; border-radius: 26px; z-index: 2;
  background: var(--hijau); color: var(--base); text-align: center;
  box-shadow: 0 40px 80px -40px rgba(22,56,42,.9);
}
.mitos__kotak h3 { font-size: clamp(26px, 2.6vw, 34px); color: var(--base); }
.mitos__kotak p { margin-top: 10px; font-size: 13.5px; opacity: .8; }
.mitos__kotak .btn { margin-top: 20px; }
.mitos__fakta { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; text-align: left; }
.mitos__fakta li {
  list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 10px;
  font-size: 13px; line-height: 1.5; opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i) * 90ms + .2s);
}
.mitos__fakta li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--kuning); }
.mitos.is-pecah .mitos__fakta li { opacity: 1; transform: none; }
.mitos__fakta-wadah { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.mitos.is-pecah .mitos__fakta-wadah { grid-template-rows: 1fr; }
.mitos__fakta-wadah > div { overflow: hidden; }

.gelembung {
  position: absolute; z-index: 1; max-width: 220px; padding: 12px 18px;
  border-radius: var(--pill); background: #fff; border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; text-align: center;
  box-shadow: 0 16px 34px -22px rgba(26,36,29,.6);
  transform: translate(-50%,-50%) scale(0); opacity: 0;
  transition: transform .6s var(--ease-out), opacity .4s, color .3s, background .3s;
}
.gelembung.is-in { transform: translate(-50%,-50%) scale(1); opacity: 1; animation: ayun var(--dur, 5s) ease-in-out infinite; }
.gelembung small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; color: #B5462B; margin-bottom: 2px; }
/* Terang otomatis kalau posisinya menimpa kotak hijau */
.gelembung.is-atas-gelap { background: var(--kuning); border-color: var(--kuning); color: var(--hijau); }
.gelembung.is-pecah { animation: pecah .5s var(--ease) forwards; }
@keyframes ayun { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes pecah {
  40%  { transform: translate(-50%,-50%) scale(1.18); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(.2); opacity: 0; filter: blur(6px); }
}
.serpih { position: absolute; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: var(--kuning); pointer-events: none; animation: serpih .7s var(--ease-out) forwards; }
@keyframes serpih { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (max-width: 700px) {
  .gelembung { max-width: 150px; font-size: 11.5px; padding: 9px 12px; }
  .mitos__arena .gelembung:nth-child(4), .mitos__arena .gelembung:nth-child(5) { display: none; }   /* arena pendek: empat gelembung di sudut, dua tengah disembunyikan */
}

/* ============================================================
   5b. MANFAAT — ringkas: judul + empat kartu satu baris
   ============================================================ */
.manfaat { padding-block: clamp(56px, 7vw, 96px); }
.manfaat__kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.manfaat__kepala h2 { color: var(--hijau); }
.manfaat__kepala .lead { margin-top: 0; max-width: 34ch; padding-bottom: 6px; }
.manfaat__grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.manfaat__kartu { padding: 22px 20px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.manfaat__ikon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--kuning-wash); color: var(--hijau); }
.manfaat__kartu h3 { margin-top: 16px; font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--hijau); }
.manfaat__kartu p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); }
.manfaat__catatan { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--hijau-soft); color: var(--hijau); font-size: 13px; line-height: 1.5; }
.manfaat__i { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--hijau); color: var(--base); font: italic 400 13px/1 var(--serif); }
@media (max-width: 1000px) { .manfaat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .manfaat__kepala { flex-direction: column; align-items: flex-start; gap: 14px; }
  .manfaat__kepala .lead { max-width: none; padding: 0; }
  .manfaat__grid { gap: 10px; margin-top: 24px; }
  .manfaat__kartu { padding: 14px 14px 16px; }
  .manfaat__ikon { width: 36px; height: 36px; border-radius: 10px; }
  .manfaat__kartu h3 { margin-top: 12px; font-size: 14.5px; }
  .manfaat__kartu p { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
}

/* ============================================================
   6. UJI LAB — tumpukan grafis sertifikat bergilir, parallax
   ============================================================ */
.lab { position: relative; overflow: hidden; padding-block: clamp(64px, 7vw, 104px); }
.lab__medan { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lab__medan span { position: absolute; left: var(--x); width: var(--s); opacity: var(--o); will-change: transform; color: var(--kuning-deep); }
.lab__medan svg { width: 100%; height: auto; display: block; }
.lab__gelembung { position: absolute; bottom: -20px; width: var(--s); height: var(--s); left: var(--x); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--kuning-deep) 50%, transparent); animation: naik var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes naik { to { transform: translateY(-110vh); opacity: 0; } }
.lab .wrap { position: relative; z-index: 1; }
.lab__kepala { max-width: 720px; }
.lab__kepala h2 { color: var(--hijau); }
.lab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; margin-top: clamp(32px, 4vw, 44px); }
@media (max-width: 900px) { .lab__grid { grid-template-columns: 1fr; } }

.tumpuk { position: relative; aspect-ratio: 1; max-width: 480px; width: 100%; margin-inline: auto; }
.tumpuk img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -36px rgba(26,36,29,.6);
  transition: transform .9s var(--ease-out), opacity .6s; transform-origin: 50% 110%;
}
.tumpuk:not(.is-in) img { opacity: 0; transform: translateY(40px) rotate(0); }
.tumpuk img[data-pos="0"] { z-index: 3; transform: rotate(0); }
.tumpuk img[data-pos="1"] { z-index: 2; transform: rotate(-5deg) translate(-4%, 2%) scale(.96); }
.tumpuk img[data-pos="2"] { z-index: 1; transform: rotate(5deg) translate(4%, 3%) scale(.92); }

.bukti { display: grid; gap: 14px; }
.bukti__item {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
}
.bukti__ikon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--kuning-wash); color: var(--hijau); }
.bukti__item h3 { color: var(--hijau); font-size: 24px; }
.bukti__item p { margin-top: 6px; font-size: 14px; color: var(--ink-mute); }
.bukti__no { margin-top: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--hijau-2); word-break: break-all; }

/* ============================================================
   7. ETALASE — produk dari Shopee
   ============================================================ */
/* ---- Produk: carousel pilihan unggulan, tombol membuka semua produk di tempat yang sama ---- */
.produk { background: var(--base-warm); padding-block: clamp(64px, 7.5vw, 104px); }
.produk h2 { color: var(--hijau); font-size: clamp(24px, 7.6vw, 72px); white-space: nowrap; }
.pk { margin-top: 40px; }
.pk__lintasan {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 10px 2px 26px; margin: -10px -2px -26px;      /* ruang untuk bayangan dan angkat saat hover */
}
.pk__lintasan::-webkit-scrollbar { display: none; }
.pk__lintasan:focus-visible { outline: 2px solid var(--hijau); outline-offset: 4px; border-radius: 22px; }
.pil {
  position: relative; flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.pil:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -34px rgba(22,56,42,.55); border-color: var(--kuning); }
.pil__foto { position: relative; aspect-ratio: 6 / 5; background: linear-gradient(165deg, var(--kuning-wash), color-mix(in srgb, var(--kuning-soft) 60%, #fff)); }
.pil__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform .5s var(--ease-out); }
.pil__foto.is-foto { background: #F5F5F6; }
.pil__foto.is-foto img { object-fit: cover; padding: 0; }
.pil:hover .pil__foto img { transform: scale(1.04); }
.pil__isi { padding: 20px 22px 6px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pil__jenis { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hijau-2); }
.pil__isi h3 { color: var(--hijau); }
/* Tombol di dalam h3 melebar menutup seluruh kartu, jadi satu klik di mana saja membuka modal */
.pil__buka { all: unset; cursor: pointer; }
.pil__buka::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.pil__buka:focus-visible::after { outline: 2px solid var(--hijau); outline-offset: -3px; }
.pil__asal { font-size: 12.5px; color: var(--ink-mute); }
.pil__ciri { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.pil__cta { display: flex; justify-content: space-between; align-items: center; margin: 14px 22px 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--hijau); }
.pil__cta i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--kuning); transition: transform .3s var(--ease-out); }
.pil:hover .pil__cta i { transform: rotate(-45deg); }

.pk__kontrol { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 38px; }
.pk__panah { display: flex; gap: 10px; }
.pk__panah button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--hijau); cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.pk__panah button:hover:not(:disabled) { background: var(--kuning); border-color: var(--kuning); }
.pk__panah button:focus-visible { outline: 2px solid var(--hijau); outline-offset: 3px; }
.pk__panah button:disabled { opacity: .35; cursor: default; }

/* Filter kategori, hanya tampil di mode grid */
.pk__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.pk__filter[hidden] { display: none; }
.pk__chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--pill); cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--hijau); font: inherit; font-size: 14px; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.pk__chip span { font-size: 12px; font-weight: 700; opacity: .55; }
.pk__chip:hover { border-color: var(--kuning); }
.pk__chip[aria-pressed="true"] { background: var(--hijau); border-color: var(--hijau); color: var(--base); }
.pk__chip:focus-visible { outline: 2px solid var(--hijau); outline-offset: 3px; }
@media (max-width: 600px) { .pk__filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; } .pk__filter::-webkit-scrollbar { display: none; } .pk__chip { flex: none; } }
.pil[hidden], .pk.is-semua .pil[hidden] { display: none; }
@keyframes pil-masuk { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pil.is-baru { animation: pil-masuk .5s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .pil.is-baru { animation: none; } }

/* Lihat lebih banyak: carousel menjadi grid */
.pk.is-semua .pk__lintasan { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; scroll-snap-type: none; }
.pk.is-semua .pil { flex: none; }
.pk.is-semua .pk__panah { display: none; }
.pk.is-semua .pk__kontrol { justify-content: center; }
@media (min-width: 1100px) { .pk.is-semua .pk__lintasan { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .pk__lintasan { gap: 14px; }
  .pil { flex-basis: 78%; }
  .pk.is-semua .pk__lintasan { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pk.is-semua .pk__lintasan { grid-template-columns: 1fr; }
  .pk.is-semua .pil { display: grid; grid-template-columns: 108px 1fr; }
  .pk.is-semua .pil__foto { aspect-ratio: auto; min-height: 132px; grid-row: 1; }
  .pk.is-semua .pil__isi { grid-row: 1; padding: 16px 16px 4px; }
  .pk.is-semua .pil__cta { grid-column: 1 / -1; margin: 8px 16px 14px; }
}

/* ============================================================
   8. TESTIMONI — carousel kartu ulasan + marquee
   ============================================================ */
.testi { overflow: hidden; padding-bottom: clamp(48px, 6vw, 80px); }
.testi__kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.testi__kepala h2 { color: var(--hijau); }
.testi__kepala .lead { margin-top: 14px; }
.testi__panah { display: flex; gap: 10px; flex: none; padding-bottom: 6px; }
.testi__panah button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--hijau); cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.testi__panah button:hover:not(:disabled) { background: var(--kuning); border-color: var(--kuning); }
.testi__panah button:focus-visible { outline: 2px solid var(--hijau); outline-offset: 3px; }
.testi__panah button:disabled { opacity: .35; cursor: default; }
.testi__lintasan {
  display: flex; gap: 14px; margin: 30px calc(var(--pad-x) * -1) 0; padding: 4px var(--pad-x) 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); scrollbar-width: none; overscroll-behavior-x: contain;
}
.testi__lintasan::-webkit-scrollbar { display: none; }
.testi__lintasan:focus-visible { outline: 2px solid var(--hijau); outline-offset: -2px; border-radius: 22px; }
.tt {
  flex: 0 0 min(390px, 84vw); scroll-snap-align: start; display: flex; flex-direction: column;
  padding: 20px 22px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 38px -30px rgba(26,36,29,.55);
}
.tt__atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-mute); }
.tt__sumber { padding: 4px 10px; border-radius: var(--pill); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; background: var(--hijau-soft); color: var(--hijau); }
.tt__sumber--shopee { background: #FDE9E1; color: #A63F1B; }
.tt__bintang { margin-right: auto; margin-left: 10px; color: var(--kuning-deep); letter-spacing: 1.5px; font-size: 12px; }
.tt__teks { margin: 14px 0 0; flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.tt__nama { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--hijau); }
@media (max-width: 700px) {
  .testi__kepala { align-items: flex-start; }
  .testi__panah { display: none; }   /* di layar sentuh cukup digeser */
  .tt { padding: 18px 18px 16px; }
}

.marquee { overflow: hidden; margin-top: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__jalur { display: flex; gap: 12px; width: max-content; animation: jalan 44s linear infinite; }
.marquee--balik .marquee__jalur { animation-direction: reverse; }
.marquee:hover .marquee__jalur { animation-play-state: paused; }
@keyframes jalan { to { transform: translateX(-50%); } }
.chip { flex: none; padding: 12px 20px; border-radius: var(--pill); background: var(--base-warm); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--hijau); white-space: nowrap; }
.chip b { color: var(--kuning-deep); margin-right: 6px; }

/* ============================================================
   9. PENUTUP — galeri 60 : beli di mana 40
   Galeri: foto berukuran tetap (5:6), berganti sendiri dengan zoom pelan.
   Segel menempel di sudut bingkai seperti stiker.
   ============================================================ */
.cerita { position: relative; background: #FFE7AE; padding-block: clamp(64px, 8vw, 120px); }
.cerita__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
.cerita__beli { min-width: 0; }
.cerita__beli h2 { font-size: clamp(44px, 5.2vw, 80px); color: var(--hijau); margin-top: 14px; }

.galeri { --tinggi: min(78vh, 780px); position: relative; justify-self: center; width: min(100%, calc(var(--tinggi) * 5 / 6)); }
.galeri__bingkai { position: relative; aspect-ratio: 5 / 6; border-radius: 28px; overflow: hidden; background: var(--base-warm); box-shadow: 0 40px 70px -46px rgba(22,56,42,.55); isolation: isolate; }
.galeri__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.galeri__slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.galeri__slide.is-aktif { opacity: 1; z-index: 2; }
.galeri__slide.is-pergi { opacity: 0; z-index: 1; }
.galeri__slide.is-aktif img, .galeri__slide.is-pergi img { animation: galeri-zoom 9s ease-out both; }
.galeri__slide.is-keluar.is-aktif img, .galeri__slide.is-keluar.is-pergi img { animation-name: galeri-zoom-balik; }
@keyframes galeri-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes galeri-zoom-balik { from { transform: scale(1.09); } to { transform: scale(1); } }

.galeri__bawah { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.galeri__cap { font-size: 14px; font-weight: 600; color: var(--hijau); transition: opacity .22s; min-height: 1.4em; }
.galeri__cap.is-ganti { opacity: 0; }
.galeri__titik { display: flex; gap: 8px; flex: none; }
.galeri__titik button { width: 26px; height: 26px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.galeri__titik button::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--hijau) 22%, transparent); transition: background .3s, width .3s; }
.galeri__titik button[aria-current="true"]::before { background: var(--hijau); width: 26px; }
.galeri__titik button:focus-visible { outline: 2px solid var(--hijau); outline-offset: 2px; border-radius: 6px; }

.kanal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.kanal a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 20px; border-radius: 18px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); color: var(--hijau); font-weight: 700;
  transition: transform .25s var(--ease-out), border-color .25s;
}
.kanal a:hover { transform: translateY(-3px); border-color: var(--kuning); }
.kanal a.kanal--utama { background: var(--kuning); border-color: var(--kuning); }
.kanal small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.kanal a.kanal--utama small { color: var(--hijau-2); }
.rekanan { margin-top: 26px; }
.rekanan__label { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.rekanan .marquee { margin-top: 10px; }
.rekanan .chip { background: #fff; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s, border-color .3s; }
.rekanan .chip:hover { filter: none; opacity: 1; border-color: var(--kuning); }

.segel { position: absolute; z-index: 5; width: var(--w, 132px); aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .6s ease var(--tunda, 0s), transform .7s var(--ease-out) var(--tunda, 0s); filter: drop-shadow(0 14px 18px rgba(22,56,42,.22)); }
.galeri.is-in .segel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.segel svg { width: 100%; height: 100%; animation: putar 24s linear infinite; }
.segel__tengah { position: absolute; inset: 26%; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--c, var(--hijau)); color: var(--t, var(--kuning)); font-family: var(--serif); font-size: calc(var(--w, 132px) * .17); line-height: 1; }

@media (max-width: 900px) {
  .cerita__grid { grid-template-columns: 1fr; gap: 40px; }
  .galeri { --tinggi: 70vh; width: min(100%, 460px); }
  .segel { scale: .72; }
  .kanal { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .galeri__slide { transition: none; }
  .galeri__slide.is-aktif img, .galeri__slide.is-pergi img { animation: none; }
  .segel { transition: none; }
}

/* ============================================================
   10. FAQ — judul sticky kiri, accordion kanan
   ============================================================ */
#faq { padding-block: clamp(64px, 7vw, 104px); }
.faq__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }
.faq__kepala { position: sticky; top: calc(var(--nav-h) + 24px); }
.faq__kepala h2 { color: var(--hijau); }
.faq__kepala .btn { margin-top: 26px; }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 2px; border: 0; background: none; text-align: left; font-weight: 600; font-size: 15.5px; color: var(--ink); cursor: pointer; }
.acc__q:focus-visible { outline: 2px solid var(--hijau); outline-offset: -2px; }
.acc__no { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--kuning-deep); min-width: 22px; }
.acc__ikon { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--hijau); transition: transform .35s var(--ease-out), background .3s; }
.acc__item.is-open .acc__ikon { transform: rotate(45deg); background: var(--kuning); border-color: var(--kuning); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__jawab { padding: 0 48px 22px 40px; color: var(--ink-mute); font-size: 14.5px; }

/* ============================================================
   11. FOOTER
   ============================================================ */
.footer { background: var(--hijau); color: var(--base); padding-top: var(--gap-y); overflow: hidden; }
.footer__atas { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) {
  .footer__atas { grid-template-columns: 1fr 1fr; }
  .footer__atas > :first-child, .footer__atas > :nth-child(2) { grid-column: 1 / -1; }
  .footer__daftar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .footer__daftar [data-footer-nav] { display: contents; }
  .footer a { padding: 10px 0; }
  .footer__kredit { padding-bottom: 96px; }
}
.footer__bawah span { white-space: nowrap; }
.footer__bawah [data-izin] span + span::before { content: "\00b7"; margin: 0 8px; }
@media (max-width: 900px) { .footer__bawah [data-izin] span { display: block; } .footer__bawah [data-izin] span + span::before { content: none; } }
.footer__logo { height: 70px; width: auto; }
.footer__tag { margin-top: 16px; font-size: 14px; opacity: .72; max-width: 30ch; }
.footer__judul { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--kuning); margin-bottom: 14px; }
.footer a { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: inherit; opacity: .82; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; transition: opacity .2s, color .2s; }
.footer a:hover { opacity: 1; }
.footer__garis { height: 1px; background: currentColor; opacity: .16; margin: 56px 0 22px; }
.footer__bawah { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12px; opacity: .62; }
.footer__kredit { margin-top: 10px; padding-bottom: 28px; font-size: 11.5px; opacity: .5; }
.footer .footer__kredit a { display: inline; padding: 0; font-size: inherit; opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ── Modal detail ───────────────────────────────────── */
dialog.detail { width: min(900px, 92vw); max-height: 88vh; padding: 0; border: 0; border-radius: 26px; background: var(--base); color: var(--ink); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(22,56,42,.8); }
dialog.detail::backdrop { background: rgba(22,56,42,.55); backdrop-filter: blur(4px); }
dialog.detail[open] { animation: modal-masuk .45s var(--ease-out); }
@keyframes modal-masuk { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.detail__grid { display: grid; grid-template-columns: .9fr 1.1fr; max-height: 88vh; }
@media (max-width: 760px) { .detail__grid { grid-template-columns: 1fr; overflow-y: auto; } }
.detail__foto { position: relative; display: grid; place-items: center; padding: 30px; min-height: 260px; background: linear-gradient(165deg, var(--kuning-wash), color-mix(in srgb, var(--kuning-soft) 70%, #fff)); }
.detail__foto img { max-height: 380px; width: auto; object-fit: contain; border-radius: 14px; }
/* Foto asli: penuh sampai ke tepi, bukan ilustrasi di tengah bingkai */
.detail__foto.is-foto { padding: 0; overflow: hidden; }
.detail__foto.is-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
@media (max-width: 760px) { .detail__foto.is-foto { min-height: 240px; } .detail__foto.is-foto img { max-height: none; } }
@media (max-width: 760px) { .detail__foto { min-height: 200px; } .detail__foto img { max-height: 200px; } }
.detail__isi { padding: 34px 32px; overflow-y: auto; }
.detail__eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--hijau-2); }
.detail__isi h3 { margin-top: 8px; font-size: clamp(30px, 3.2vw, 42px); color: var(--hijau); }
.detail__latin { margin-top: 6px; font-style: italic; font-size: 14px; color: var(--ink-mute); }
.detail__ket { margin-top: 18px; font-size: 15px; color: var(--ink-mute); }
.detail__data { margin-top: 20px; border-top: 1px solid var(--line); }
.detail__data div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.detail__data dt { color: var(--ink-mute); }
.detail__data dd { margin: 0; font-weight: 700; color: var(--hijau); text-align: right; }
.detail__tag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.detail__tag span { padding: 6px 12px; border-radius: var(--pill); background: var(--kuning-wash); font-size: 11.5px; font-weight: 700; color: var(--hijau); }
.detail__produk { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.detail__produk li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail__produk b { display: block; font-size: 14px; color: var(--hijau); }
.detail__produk small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-mute); }
.detail__aksi.is-satu { grid-template-columns: 1fr; }
.detail [hidden] { display: none !important; }
.detail__aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
@media (max-width: 420px) { .detail__aksi { grid-template-columns: 1fr; } }
.detail__catatan { margin-top: 12px; font-size: 12px; color: var(--ink-mute); }
.detail__tutup { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--hijau); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
.detail__tutup:focus-visible { outline: 2px solid var(--hijau); outline-offset: 2px; }

/* ── Lain-lain ─────────────────────────────────────── */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: none; align-items: center; gap: 8px; padding: 13px 18px; border-radius: var(--pill); background: var(--wa); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(31,168,85,.7); }
@media (max-width: 1080px) { .wa-float { display: inline-flex; } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }