/* ===== Base / Utilities ===== */
/* Pastikan background hero tidak menangkap klik & ada di bawah konten */
#home { position: relative; }
#home .hero-bg {
  pointer-events: none;
  z-index: 0;
}
#home .container {
  position: relative;
  z-index: 1;
}

:root{
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d;
  --amber-500:#f59e0b; --amber-600:#d97706; --amber-900:#78350f;
  --brown:#4a2c12; --brown-2:#5a3416;
}
html{scroll-behavior:smooth}
.object-cover{object-fit:cover}
.bg-amber-50{background:var(--amber-50)}
.bg-brown{background:var(--brown)}
.text-amber{color:var(--amber-100)}

a.footer-link{color:var(--amber-100); text-decoration:none}
a.footer-link:hover{color:#fff}

/* ===== Navbar underline & active ===== */
#mainNav .nav-link{
  position:relative;
  font-weight:500;
}
#mainNav .nav-link::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-6px;
  height:3px;
  border-radius:3px;
  background:var(--amber-500);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}
#mainNav .nav-link:hover{color:var(--amber-600)}
#mainNav .nav-link:hover::after{transform:scaleX(1)}
#mainNav .nav-link.active{
  color:var(--amber-600) !important;
}
#mainNav .nav-link.active::after{transform:scaleX(1)}

/* ===== Hero image sizing ===== */
.hero-visual{max-width:520px; height:360px}
@media (min-width:992px){
  .hero-visual{max-width:520px; height:420px}
}

/* ===== Carousel tweaks ===== */
/* PRODUCT CAROUSEL */
/* --- Horizontal belt (tetap 3/2/1 card) --- */
#produk .scroll-belt{
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  padding: .5rem 0 1rem;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  grid-auto-columns: 85%; /* mobile: 1 card penuh */
}
@media (min-width: 576px){
  #produk .scroll-belt{ grid-auto-columns: calc(50% - .5rem); }  /* tablet: 2 card */
}
@media (min-width: 992px){
  #produk .scroll-belt{ grid-auto-columns: calc(33.333% - .67rem); } /* desktop: 3 card */
}
#produk .scroll-belt > *{ scroll-snap-align: start; }

/* Card produk (kalau belum ada) */
#produk .p-card{
  border:1px solid #ffe8a3;
  border-radius:16px;
  background:#fffdf5;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
#produk .p-card:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
#produk .p-card .thumb{ aspect-ratio: 16/9; width:100%; background:#fff7e6; }
#produk .p-card img{ width:100%; height:100%; object-fit:cover; display:block; border-bottom:1px solid var(--amber-200); }

/* --- Tombol panah --- */
#produk .scroll-wrap{ position: relative; }
#produk .h-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid #eaeaea; background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  display: grid; place-items: center;
  color: #111; font-size: 22px; line-height: 1;
  z-index: 2;
}
#produk .h-nav:hover{ background:#fff7e6; }
#produk .h-nav.prev{ left: -12px; }
#produk .h-nav.next{ right: -12px; }

/* Sesuaikan di layar kecil biar tidak mentok pinggir */
@media (max-width: 575px){
  #produk .h-nav{ width: 38px; height: 38px; font-size: 20px; }
  #produk .h-nav.prev{ left: -6px; }
  #produk .h-nav.next{ right: -6px; }
}

/* Horizontal scroll belt (optional) */
.scroll-belt{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px, 260px);
  gap:1rem;
  overflow-x:auto;
  padding:1rem 0;
  scroll-snap-type:x mandatory;
}
.scroll-belt > *{scroll-snap-align:start}
.p-card{
  border:1px solid #ffe8a3;
  border-radius:16px;
  background:#fffdf5;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.p-card img{height:160px; width:100%; object-fit:cover}

/* === Panah chevron (tanpa lingkaran) === */
#produk .scroll-wrap{ position:relative; }
#produk .h-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:0; padding:8px;  /* area klik lebih luas */
  color:#111; z-index:2; cursor:pointer;
  transition: transform .12s ease, color .12s ease, opacity .12s ease;
  opacity:.9;
}
#produk .h-nav i{ font-size:34px; line-height:1; }   /* BESAR */
#produk .h-nav:hover{ color:var(--amber-600); transform:translateY(-50%) scale(1.06); opacity:1; }
#produk .h-nav:focus-visible{ outline:2px solid #fcd34d; outline-offset:2px; border-radius:6px; }
#produk .h-nav.prev{ left:4px; }
#produk .h-nav.next{ right:4px; }

@media (max-width:575px){
  #produk .h-nav i{ font-size:28px; }
  #produk .h-nav.prev{ left:2px; }
  #produk .h-nav.next{ right:2px; }
}

/* === Scrollbar horizontal yang lebih menarik === */
#produk .scroll-belt::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg,#f59e0b,#fcd34d);
  border-radius: 999px;
  border: 2px solid #fff7e6;                   /* memberi space track */
}

/* === Progress bar di bawah belt === */
#produk .scroll-progress{
  position:relative; height:4px; margin-top:.5rem;
  background: #fff2cc; border-radius:999px; overflow:hidden;
}
#produk .scroll-progress span{
  position:absolute; inset:0 auto 0 0; width:0%;
  background: linear-gradient(90deg,#f59e0b,#fcd34d);
  border-radius:999px;
  transition: width .15s ease;
}

/* Hide native scrollbar, keep scrolling */
#produk .scroll-belt{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#produk .scroll-belt::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;              /* WebKit (Chrome/Safari) */
}

/* ===== ABOUT TEASER ===== */
#about-cta{ scroll-margin-top: 90px; }

.about-cta{
  background: linear-gradient(180deg, rgba(255,251,235,.75), #fff);
}

.about-cta-bg{
  position:absolute; inset:auto -10% -20% -10%;
  height:220px; z-index:0;
  background:
    radial-gradient(120px 120px at 20% 40%, rgba(245,158,11,.12) 0%, rgba(245,158,11,0) 60%),
    radial-gradient(140px 140px at 80% 30%, rgba(252,211,77,.14) 0%, rgba(252,211,77,0) 65%);
  pointer-events:none;
}

.about-cta .container{ position:relative; z-index:1; }
.kicker{ letter-spacing:.12em; color: var(--amber-600); }

/* Frame gambar dengan aksen madu */
.honey-frame{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--amber-200);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  aspect-ratio: 4 / 3;               /* konsisten & responsif */
  background:#fff7e6;
}
.honey-frame img{ display:block; width:100%; height:100%; object-fit:cover; }

.honey-frame .since-badge{
  position:absolute; top:12px; left:12px;
  background:#fff; color: var(--amber-600);
  border:1px solid var(--amber-200);
  padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.8rem;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.honey-frame .honey-blob{
  position:absolute; right:-30px; bottom:-30px; width:180px; height:180px;
  background: radial-gradient(circle at 35% 35%, #fcd34d, #f59e0b 60%, rgba(245,158,11,.85) 100%);
  filter: blur(16px); opacity:.35; transform: rotate(12deg);
  border-radius: 44% 56% 60% 40% / 48% 52% 46% 54%; /* blob organik */
}

/* Poin-poin singkat */
.about-points li{
  display:flex; align-items:center; gap:.6rem;
  padding:.3rem 0; color:#4b5563;
}
.about-points i{
  color: var(--amber-600);
  background:#fff3cc; width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; font-size:16px;
  border:1px solid #ffe8a3;
}

/* Sedikit micro-interaction */
.honey-frame:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); transition: .18s ease; }
.btn-outline-warning:hover{ background: var(--amber-50); }

/* Responsif */
@media (max-width: 575px){
  .honey-frame{ aspect-ratio: 16 / 10; }
}

/* Reveal on scroll – kiri & kanan (aktif hanya saat JS jalan) */
.reveal-ready .reveal-left,
.reveal-ready .reveal-right{
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal-ready .reveal-left{  transform: translateX(-36px); }
.reveal-ready .reveal-right{ transform: translateX( 36px); }

/* Saat terlihat */
.in-view{ opacity:1 !important; transform:none !important; }

/* Optional: stagger kecil untuk poin bullet di kanan */
.reveal-right.in-view .about-points li{
  opacity:1; transform:none; transition: opacity .45s ease, transform .45s ease;
}
.reveal-right .about-points li{
  opacity:0; transform: translateY(10px);
}
.reveal-right .about-points li:nth-child(1){ transition-delay:.05s; }
.reveal-right .about-points li:nth-child(2){ transition-delay:.12s; }
.reveal-right .about-points li:nth-child(3){ transition-delay:.19s; }

/* Hormati preferensi reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal-ready .reveal-left,
  .reveal-ready .reveal-right,
  .reveal-right .about-points li{
    transition:none; opacity:1; transform:none;
  }
}

/* ==== PRODUK: kartu lebih kecil (narrower) ==== */
/* Mobile: 1 kartu (lebih ramping dari 85% -> 80%) */
#produk .scroll-belt{ grid-auto-columns: 80% !important; }

/* Tablet: 2 kartu (dari 50% -> 46%) */
@media (min-width: 576px){
  #produk .scroll-belt{ grid-auto-columns: calc(46% - .5rem) !important; }
}

/* Desktop: 3 kartu (dari 33.33% -> 31%) */
@media (min-width: 992px){
  #produk .scroll-belt{ grid-auto-columns: calc(31% - .67rem) !important; }
}

/* ==== PRODUK: kartu lebih tinggi via rasio gambar ==== */
#produk .p-card .thumb{
  aspect-ratio: 4 / 3;   /* semula 16/9 → kini lebih tinggi */
}

/* (opsional) tambahkan sedikit ruang konten agar tampak proporsional */
#produk .p-card .p-3{ padding-top: 0.9rem; padding-bottom: 1.0rem; }


/* ===== BENEFITS – neo card style ===== */
.benefits-neo{
  background:
    radial-gradient(160px 120px at 10% 15%, rgba(252,211,77,.18), transparent 60%),
    radial-gradient(160px 120px at 90% 30%, rgba(245,158,11,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,251,235,.55), #fff);
}

.benefit-tiles{
  display:grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tile{
  position:relative;
  border-radius:18px;
  background:#fffdf5;
  border:1px solid #ffe8a3;
  padding:1rem 1rem 1.05rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden;
}

/* amber glow edge */
.tile::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(40% 40% at 100% 100%, rgba(245,158,11,.18), transparent 70%);
  opacity:.6; pointer-events:none;
}

/* number badge */
.tile .num{
  position:absolute; top:10px; right:10px;
  font-weight:800; font-size:.78rem; letter-spacing:.04em;
  color: var(--amber-700, #92400e);
  background:#fff;
  border:1px solid var(--amber-200);
  padding:.18rem .5rem; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* icon bubble */
.icon-bubble{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  background:#fff3cc; color:#bb7a00;
  border:1px solid #ffe8a3;
  margin-bottom:.6rem; font-size:20px;
}

/* title */
.tile h3{
  margin:0; font-size:1rem; line-height:1.3;
  font-weight:800; color:#4a2c12; text-wrap:balance;
}

/* hover */
.tile:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  border-color: #f7c74c;
}

/* responsif kecil */
@media (max-width: 575px){
  .benefit-tiles{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .icon-bubble{ width:42px; height:42px; font-size:18px; }
}

/* === Reveal on scroll (hanya aktif kalau JS menambahkan .reveal-ready ke body) === */
.reveal-ready #benefits .tile{
  opacity:0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
#benefits .tile.in-view{ opacity:1; transform:none; }
#benefits .tile{ will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce){
  .reveal-ready #benefits .tile{ transition:none; opacity:1; transform:none; }
}



/* ===== Ingredients Grid ===== */
.ingredients-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width:768px){ .ingredients-grid{ grid-template-columns:repeat(2,1fr);} }

.ing-card{
  position:relative;
  border:1px solid #ffe8a3;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#fff9ea);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.ing-accent{
  position:absolute; inset:auto 0 0 0; height:8px; background:linear-gradient(90deg,#f59e0b,#fcd34d);
}
.ing-body{ padding:1.1rem 1.25rem 1.5rem }

/* ===== Uji Lab ===== */
.lab-card{
  background:#fffdf5;
  border:1px solid #ffe8a3;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  height:100%; display:flex; flex-direction:column;
  max-width:520px;           /* agar proporsional di layar lebar */
  margin-inline:auto;        /* center dalam kolom */
}
.lab-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  border-color:#f7c74c;
}
.lab-head{ display:flex; align-items:center; gap:.75rem; padding:1rem 1rem .5rem; }
.pdf-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#fee2e2; color:#b91c1c; border:1px solid #fecaca;
  padding:.15rem .55rem; border-radius:999px; font-size:.8rem; font-weight:600;
}
.lab-meta strong{ display:block; color:#4a2c12; }
.lab-meta small{ font-size:.8rem; }

.lab-metrics{ padding:.5rem 1rem 0; }
.lab-metrics li{
  display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:.75rem; padding:.4rem 0; border-bottom:1px dashed #ffe8a3;
}
.lab-metrics li:last-child{ border-bottom:0; }
.lab-metrics span{ color:#6b7280; }
.lab-metrics b{ color:#4a2c12; }
.lab-metrics i{
  font-style:normal; font-size:.72rem; padding:.15rem .5rem; border-radius:999px;
  border:1px solid #d1fae5; background:#ecfdf5; color:#0f766e; font-weight:700;
}
.lab-metrics i.warn{ border-color:#fee8a3; background:#fff7db; color:#b7791f; }

.lab-actions{ margin-top:auto; padding: .75rem 1rem 1rem; display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }

/* Reveal animasi (ringan) */
.reveal-ready #uji-lab .reveal{ opacity:0; transform: translateY(12px); }
#uji-lab .reveal.in-view{ opacity:1; transform:none; transition: opacity .45s ease, transform .45s ease; }

/* Modal PDF responsif: 4:3 di mobile, 16:9 di ≥768px */
.ratio-embed{ --bs-aspect-ratio: 75%; }             /* 4:3 */
@media (min-width:768px){ .ratio-embed{ --bs-aspect-ratio: 56.25%; } } /* 16:9 */
.modal-xl{ --bs-modal-width: min(1140px, 96vw); }

/* Biar scroll ke section tidak ketutup navbar sticky */
section[id]{ scroll-margin-top: 88px; } /* sesuaikan 88px dengan tinggi navbar */


/* Reveal animasi (ringan) */
.reveal-ready #uji-lab .reveal{ opacity:0; transform: translateY(12px); }
#uji-lab .reveal.in-view{ opacity:1; transform:none; transition: opacity .45s ease, transform .45s ease; }

/* Responsif kecil */
@media (max-width: 575px){
  .lab-metrics li{ grid-template-columns: 1fr auto; }
  .lab-metrics i{ display:none; } /* hemat ruang di layar kecil; hapus jika perlu */
}


/* ===== Testimonials ===== */
.stars{ color:#f59e0b; letter-spacing:.15em }
.testi-card{ border:1px solid #ffe8a3; background:#fffdf5; border-radius:16px }

/* ===== FAQ ===== */
.faq-list{ display:grid; gap:.75rem }
.faq-item{ border:1px solid #ffe8a3; background:#fff; border-radius:16px; overflow:hidden }
.faq-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem 1.25rem; background:#fff; border:0; text-align:left; font-weight:600
}
.faq-toggle i{ transition: transform .2s ease }
.faq-item.open .faq-toggle{ color:#bb7a00; background:#fff9ea }
.faq-item.open .faq-toggle i{ transform:rotate(90deg) }
.faq-content{ display:none; padding:0 1.25rem 1rem; color:#6b7280 }
.faq-item.open .faq-content{ display:block }

/* ===== Video testimonials: horizontal cards ===== */
.video-scroller{ position:relative; }
.video-scroller::before,
.video-scroller::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none;
}
.video-scroller::before{
  left:-2px;  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.video-scroller::after{
  right:-2px; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}

.video-belt{
  --gap: 1rem;
  display:grid; grid-auto-flow: column;
  gap: var(--gap);
  overflow-x:auto;
  padding: .25rem 2px .5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* 1 / 2 / 3 card per layar */
.video-belt{ grid-auto-columns: 88%; }
@media (min-width:576px){ .video-belt{ grid-auto-columns: 58%; } }
@media (min-width:992px){ .video-belt{ grid-auto-columns: calc((100% - (var(--gap) * 2)) / 3); } }

.video-card{
  scroll-snap-align: start;
  background:#fffdf5; border:1px solid #ffe8a3; border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.video-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  border-color:#f7c74c;
}
.video-meta{ padding:.9rem 1rem 1rem; }
.video-meta h6{ color:#4a2c12; }
.video-meta small{ color:#6b7280; }

/* scrollbar amber */
.video-belt::-webkit-scrollbar{ height: 10px; }
.video-belt::-webkit-scrollbar-track{ background:#fff5d6; border-radius:999px; }
.video-belt::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #f59e0b, #fcd34d); border-radius:999px;
}
.video-belt{ scrollbar-color:#f59e0b #fff5d6; scrollbar-width:thin; }

/* ===== Review (text) horizontal cards ===== */
.review-scroller{ position:relative; margin-top:.5rem; }
.review-scroller::before,
.review-scroller::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none;
}
.review-scroller::before{
  left:-2px;  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.review-scroller::after{
  right:-2px; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}

.review-belt{
  --gap: 1rem;
  display:grid; grid-auto-flow: column;
  gap: var(--gap);
  overflow-x:auto;
  padding: .25rem 2px .5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* 1 / 2 / 3 card per layar */
.review-belt{ grid-auto-columns: 88%; }
@media (min-width:576px){ .review-belt{ grid-auto-columns: 58%; } }
@media (min-width:992px){ .review-belt{ grid-auto-columns: calc((100% - (var(--gap) * 2)) / 3); } }

.review-card{
  scroll-snap-align: start;
  background:#fffdf5; border:1px solid #ffe8a3; border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.review-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  border-color:#f7c74c;
}
.review-body{ padding:1rem 1rem 1.05rem; }
.stars{ color:#f59e0b; letter-spacing:.15em; }

/* scrollbar amber */
.review-belt::-webkit-scrollbar{ height: 10px; }
.review-belt::-webkit-scrollbar-track{ background:#fff5d6; border-radius:999px; }
.review-belt::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #f59e0b, #fcd34d); border-radius:999px;
}
.review-belt{ scrollbar-color:#f59e0b #fff5d6; scrollbar-width:thin; }

/* (Opsional) reveal-on-scroll ringan */
.reveal-ready #testi .video-card,
.reveal-ready #testi .review-card{
  opacity:0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
#testi .video-card.in-view,
#testi .review-card.in-view{
  opacity:1; transform:none;
}

/* --- Hilangkan fade hint kiri/kanan (gradient) --- */
.video-scroller::before,
.video-scroller::after,
.review-scroller::before,
.review-scroller::after {
  display: none !important;
}

/* --- Sembunyikan scrollbar di semua browser --- */
.video-belt,
.review-belt{
  scrollbar-width: none !important;    /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge lama */
}
.video-belt::-webkit-scrollbar,
.review-belt::-webkit-scrollbar{
  display: none !important;            /* WebKit */
}

/* (opsional) kalau snap terasa terlalu "kencang", ganti ke proximity
.video-belt, .review-belt { scroll-snap-type: x proximity; }
*/

/* ===== BENEFITS_INGREDIENTS – Reveal on scroll ===== */
/* Sembunyikan awal hanya jika JS aktif */
.reveal-ready #ingredients .ing-card{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

/* Garis aksen (ing-accent) ikut dianimasi: grow dari kiri → kanan */
.reveal-ready #ingredients .ing-card .ing-accent{
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

/* Saat masuk viewport */
#ingredients .ing-card.in-view{
  opacity: 1;
  transform: none;
}
#ingredients .ing-card.in-view .ing-accent{
  transform: scaleX(1);
}

/* Stagger (urutan muncul) – sesuaikan jumlah item bila perlu */
#ingredients .ing-card:nth-child(1){ transition-delay: .00s; }
#ingredients .ing-card:nth-child(2){ transition-delay: .08s; }
#ingredients .ing-card:nth-child(3){ transition-delay: .16s; }
#ingredients .ing-card:nth-child(4){ transition-delay: .24s; }

/* Accent bar sedikit terlambat agar terasa “menggambar” */
#ingredients .ing-card:nth-child(1) .ing-accent{ transition-delay: .10s; }
#ingredients .ing-card:nth-child(2) .ing-accent{ transition-delay: .18s; }
#ingredients .ing-card:nth-child(3) .ing-accent{ transition-delay: .26s; }
#ingredients .ing-card:nth-child(4) .ing-accent{ transition-delay: .34s; }

/* Micro-interaction saat hover (tetap subtle) */
#ingredients .ing-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* Reduce motion – hormati preferensi pengguna */
@media (prefers-reduced-motion: reduce){
  .reveal-ready #ingredients .ing-card,
  .reveal-ready #ingredients .ing-card .ing-accent{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===== Footer ===== */
.social-btn{ color:#fcd34d; text-decoration:none }
.social-btn:hover{ color:#fff }

/* Shopee: orange brand */
.btn-shopee {
  background: #ee4d2d;         /* orange Shopee */
  border-color: #ee4d2d;
  color: #fff;
}
.btn-shopee:hover,
.btn-shopee:focus {
  background: #d8431f;
  border-color: #d8431f;
  color: #fff;
}

/* Lazada: biru tua */
.btn-lazada {
  background: #1f2a5a;         /* dark blue */
  border-color: #1f2a5a;
  color: #fff;
}
.btn-lazada:hover,
.btn-lazada:focus {
  background: #172046;
  border-color: #172046;
  color: #fff;
}

:root{ --wa:#25d366; }

.btn-outline-warning.btn-wa{
  border-color: var(--wa);
  color: var(--wa);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-outline-warning.btn-wa:hover,
.btn-outline-warning.btn-wa:focus,
.btn-outline-warning.btn-wa:active{
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
}
.btn-outline-warning.btn-wa:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(37,211,102,.35);
}

/* Floating mid-center shop badges */
/* .floating-shops{
  position:fixed;left:50%;transform:translateX(-50%);bottom:2.5vh;z-index:1050;
  display:flex;gap:.5rem;background:rgba(255,255,255,.85);backdrop-filter:saturate(120%) blur(6px);
  padding:.5rem;border:1px solid #f1f5f9;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.1)
}
.shop-badge{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--amber-500);color:#fff;font-weight:800}
.shop-badge:hover{background:var(--amber-600)} */
/* Floating mid-center shop badges - OVAL PER LOGO */
.floating-shops {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.5vh;           /* tetap 'mengambang' dan tidak terlalu bawah */
  z-index: 1050;
  display: flex;
  gap: 0.75rem;            /* jarak antar oval */
  background: transparent; /* HAPUS background panel, fokus pada oval masing-masing */
  padding: 0;              /* tidak perlu padding untuk container */
  border: 0;
  box-shadow: none;
}

.shop-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;         /* buat oval memanjang */
  height: 40px;
  padding: 0 12px;         /* agar terlihat oval */
  border-radius: 999px;    /* bentuk pill/oval */
  background: #fff;        /* background putih */
  border: 1px solid #eaeaea;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.shop-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  background: #fefefe;
}

/* ukuran logo di oval */
.shop-badge img {
  width: 80px;
  height: auto;     /* kalau yg lazada bukan square, tetap proporsional */
  display: block;
  object-fit: contain;
}

/* Responsive tweak untuk layar kecil */
@media (max-width: 575px) {
  .shop-badge {
    min-width: 60px;
    height: 36px;
    padding: 0 10px;
  }
  .shop-badge img { width: 20px; }

  /* Floating bar posisi juga dibuat responsif */
.floating-shops{
  bottom: clamp(12px, 2.5vh, 40px);
  gap: clamp(6px, 1.5vw, 14px);
}

/* Badge oval responsif */
.shop-badge{
  /* tinggi/padding/lebar minimum ikut layar */
  --h: clamp(36px, 5.5vw, 48px);       /* tinggi */
  --px: clamp(10px, 2vw, 18px);        /* padding kiri/kanan */
  height: var(--h);
  min-width: clamp(60px, 16vw, 120px); /* oval memanjang */
  padding: 0 var(--px);
  border-radius: 999px;
}

/* Logo di dalam badge: skala proporsional */
.shop-badge img{
  height: calc(var(--h) * 0.62); /* ~62% dari tinggi badge */
  width: auto;
  max-width: clamp(20px, 10vw, 90px);
  object-fit: contain;
  display: block;
}
}


/* WhatsApp FAB */
.wa-fab{
  position:fixed;right:18px;bottom:18px;z-index:1051;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18)
}
.wa-fab i {
  font-size: 24px;  /* ubah angkanya: 20, 24, 28, dst. */
  line-height: 1;
}
.wa-fab:hover{filter:brightness(.95)}

/* ===== Floating Shop Dock ===== */
/* .shop-dock{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:8vh; z-index:1040;
  background:#1f2937; border:1px solid #334155;
  padding:.5rem; border-radius:999px; display:flex; gap:.4rem;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.shop-btn{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:#111827; border:1px solid #374151
}
.shop-btn img{ width:22px; height:22px; filter:invert(86%) sepia(35%) saturate(1164%) hue-rotate(347deg) brightness(100%) contrast(93%) }
.shop-btn:hover{ background:#0b1220 } */

/* Background hitam di belakang player (biar tidak ada kedip putih) */
#testi .video-card iframe{ background:#000; }

@media (max-width:576px){
  .shop-dock{ bottom:72px }
}

/* Kurangi flicker saat transform/opacity transition */
#testi .video-card,
#testi .review-card{
  backface-visibility: hidden;
  will-change: transform, opacity;
  transform: translateZ(0); /* promote to GPU */
}

/* Bug Kedip-Kedip Video Ulasan */
/* Video belt: snap lebih lembut agar tidak “nyentak” saat wrap */
.video-belt { scroll-snap-type: x proximity; }

/* Hint ke GPU untuk kurangi repaint saat geser */
#testi .video-card,
#testi .video-card iframe,
#testi .review-card{
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.video-belt, .review-belt{
  will-change: scroll-position;
  contain: content;
}

/* Lembutkan snap biar tak “nyentak” saat wrap */
.video-belt, .review-belt { scroll-snap-type: x proximity !important; }

/* Stabilkan rendering iframe saat scroll/wrap */
#testi .ratio { 
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  contain: paint;              /* kurangi repaint area */
}
#testi iframe {
  display:block; width:100%; height:100%;
  border:0;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* (opsional) hindari transform hover pada video-card (kadang bikin shimmer di Windows) */
#testi .video-card:hover{ transform:none; box-shadow:0 16px 34px rgba(0,0,0,.08); }