/* ======================================================================
   Minyak Cenuai — sales page v4 (simple · moden · selesa dibaca)
   Font: Manrope. Gelap lembut, emas sebagai aksen sahaja, ruang luas.
   v4: responsif laptop/mobile, banner penuh kiri-kanan, latar cahaya bergerak halus.
   ====================================================================== */
:root{
  --ground:#0C0D10; --panel:#15161B; --panel-2:#1B1C22; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --gold:#E6B84A; --gold-deep:#B8860B; --gold-soft:rgba(230,184,74,.12);
  --red:#E24B5A; --green:#3DBB7A; --green-soft:rgba(61,187,122,.12); --green-deep:#0F5132; --red-deep:#8E0F17;
  --text:#ECE8E0; --text-2:#C9C4B8; --muted:#9A968C; --ok:#3DBB7A;
  --display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:#07080A;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
a{color:inherit}

/* ===== Lajur telefon ===== */
.phone{max-width:560px;margin:0 auto;min-height:100%;position:relative;z-index:1}

/* ===== Latar cahaya bergerak (light motion) ===== */
.bg-fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 70% at 50% 0%,#17130A 0%,#0C0C0F 55%,#07080A 100%)}
.bg-fx .rays{position:absolute;left:50%;top:-12vh;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;background:repeating-conic-gradient(from 0deg,rgba(230,184,74,.055) 0deg 3.5deg,transparent 3.5deg 11deg);-webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 22%,transparent 48%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 22%,transparent 48%);animation:rays 180s linear infinite}
.bg-fx .glow{position:absolute;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,rgba(230,184,74,.13),transparent 62%);will-change:transform}
.bg-fx .g1{left:-30vmax;top:10vh;animation:drift1 26s ease-in-out infinite alternate}
.bg-fx .g2{right:-32vmax;top:45vh;background:radial-gradient(circle,rgba(61,187,122,.07),transparent 62%);animation:drift2 32s ease-in-out infinite alternate}
.bg-fx .g3{left:20vw;bottom:-45vmax;animation:drift1 38s ease-in-out infinite alternate-reverse;opacity:.7}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes drift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(12vw,-8vh,0)}}
@keyframes drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10vw,10vh,0)}}
.wrap{padding-inline:22px}
.draft,.promo{display:none}

/* ===== Ticker (banner bergerak) ===== */
.ticker{display:block;position:sticky;top:0;z-index:60;width:100%;overflow:hidden;background:#15130B;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.04em;height:34px;text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(230,184,74,.18)}
.ticker-track{display:inline-flex;align-items:center;height:34px;animation:tick 70s linear infinite;will-change:transform}
.ticker-track span{padding:0 8px}.ticker-track i{font-style:normal;padding:0 10px;opacity:.4}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Header ===== */
.top{position:sticky;top:34px;z-index:55;background:rgba(12,13,16,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;max-width:560px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:36px;width:auto;border-radius:8px}
.brand b{font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--gold)}
.wa{display:inline-flex;align-items:center;gap:6px;background:#1F8F5F;color:#fff;border:0;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;text-decoration:none}

/* ===== Strip ===== */
.strip{display:flex;gap:8px;align-items:center;padding:10px 22px;font-size:13px;color:var(--text-2);border-bottom:1px solid var(--line)}
.strip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(61,187,122,.16)}
.strip b{color:#fff;font-weight:700}

/* ===== Hero ===== */
.hero{padding-block:34px 10px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px}
h1{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.18;margin:0 0 16px;letter-spacing:-.02em;text-wrap:balance;color:#fff}
h1 em{font-style:normal;color:var(--gold)}
.lead{color:var(--text-2);font-size:16px;line-height:1.7;margin:0 0 18px;max-width:40ch}
.rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);margin:0 0 18px;line-height:1.45}
.rating.big{margin:-6px 0 20px}
.stars{color:var(--gold);letter-spacing:1.5px;font-size:15px;line-height:1;white-space:nowrap}.stars.sm{font-size:12px;margin:8px 0 6px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.badge{color:var(--text-2);font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.showcase{margin:22px 0 8px;border-radius:var(--r);overflow:hidden;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.showcase img{width:100%}
.showcase .tag{position:absolute;top:14px;left:14px;background:var(--gold);color:#1F1400;font-size:11px;font-weight:800;letter-spacing:.06em;padding:6px 10px;border-radius:999px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:22px 0 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.stats div{padding:14px 8px;text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border-right:0}
.stats b{display:block;font-size:22px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.stats span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;font-weight:500}
.note{font-size:13px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.55}

/* ===== Butang ===== */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:17px 18px;font-size:16px;font-weight:800;letter-spacing:-.01em;text-align:center;text-decoration:none;transition:transform .08s,filter .2s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn .arr{display:inline-block;transition:transform .2s;font-weight:600}.btn:hover .arr{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:#1F1400;box-shadow:0 12px 30px rgba(230,184,74,.22)}.btn-gold:hover{filter:brightness(1.05)}
.btn-red{background:var(--green);color:#06130C;box-shadow:0 12px 30px rgba(61,187,122,.25)}.btn-red:hover{filter:brightness(1.05)}

/* ===== Baris kepercayaan ===== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-block:18px 6px;font-size:12px;line-height:1.35;color:var(--text-2);text-align:center;font-weight:600}
.trust div{padding:12px 4px;border-radius:12px;background:var(--panel)}
.trust i{display:block;font-style:normal;font-size:20px;margin-bottom:6px;filter:saturate(.85)}

/* ===== Seksyen ===== */
section{padding-block:40px;border-top:1px solid var(--line)}
.sec-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
h2{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.22;margin:0 0 20px;letter-spacing:-.02em;text-wrap:balance;color:#fff}
h2 span{color:var(--gold)}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* Masalah */
.pain{display:grid;gap:10px}
.pain>div{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border-radius:14px;padding:16px}
.pain>div>div{min-width:0}
.pain div em{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--gold);font-style:normal;font-weight:800;font-size:14px;display:grid;place-items:center;margin-top:1px}
.pain div b{display:block;color:#fff;font-size:15.5px;font-weight:700;margin-bottom:3px}.pain div span{font-size:14.5px;color:var(--text-2);line-height:1.6}
.callout{margin-top:16px;background:var(--gold-soft);border-radius:14px;padding:16px 18px;font-size:15px;color:var(--text);line-height:1.65}
.callout b{color:var(--gold)}

/* Galeri */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery figure{margin:0;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:3/4;background:var(--panel)}
.gallery figure:first-child{grid-column:1/-1;aspect-ratio:4/5}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:top}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.gallery figcaption span{display:block;font-weight:500;color:#ddd;font-size:12px;margin-top:2px}
.gallery figure:not(:first-child) figcaption{font-size:12px;padding:22px 10px 10px}
.gallery figure:not(:first-child) figcaption span{display:none}
.gallery figure.noimg{aspect-ratio:auto}.gallery figure.noimg figcaption{position:static;background:none;padding:16px 14px}.gallery figure.noimg:not(:first-child) figcaption span{display:block}

/* Kelebihan & manfaat */
.herbs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.herb{background:var(--panel);border-radius:14px;padding:16px 14px}
.herb b{display:block;color:#fff;font-size:15px;font-weight:700;margin-bottom:4px}
.herb span{font-size:13.5px;color:var(--text-2);line-height:1.55}
.benefits{display:grid;gap:10px;margin-top:14px}
.benefits>div{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--text-2);background:var(--green-soft);border-radius:14px;padding:14px 16px}
.benefits i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--green);color:#06130C;font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:2px}
.benefits b{color:#fff}

/* Testimoni */
.tcar{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0 -22px;padding-inline:22px}
.tcar::-webkit-scrollbar{display:none}
.tcard{flex:0 0 calc(100% - 44px);scroll-snap-align:center;background:var(--panel);border-radius:var(--r);padding:18px;position:relative}
.tcard .th{display:flex;align-items:center;gap:12px}
.tav{width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--gold);font-weight:800;display:grid;place-items:center;font-size:15px;flex:none}
.tcard .th b{display:block;font-size:15px;color:#fff;font-weight:700}.tcard .th small{display:block;font-size:12px;color:var(--muted)}
.tver{margin-left:auto;font-size:11px;font-weight:700;color:var(--green);white-space:nowrap}
.tcard p{margin:0;font-size:15px;line-height:1.65;color:var(--text)}
.tdots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.tdots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:all .2s}.tdots i.on{width:18px;border-radius:3px;background:var(--gold)}
.tiktoks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tiktoks img{border-radius:12px}
.testi-mix,.testi{display:grid;gap:10px}
.bubble{background:var(--panel);border-radius:14px;padding:14px 16px;font-size:15px}
.bubble .who{font-size:12px;color:var(--green);font-weight:700;margin-bottom:4px;display:flex;justify-content:space-between}.bubble .who span{color:var(--muted);font-weight:500}

/* Video */
.qna{display:grid;gap:12px}
.qna-vid{border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/5;max-height:460px}
.qna-vid video{width:100%;height:100%;object-fit:cover;display:block}
.qna-list{display:grid;gap:8px}
.qna-list div{background:var(--panel);border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.55}
.qna-list b{display:block;color:#fff;margin-bottom:2px}.qna-list span{color:var(--text-2)}

/* CTA banner */
.cta-banner{display:block;margin:6px 0 0;border-radius:var(--r);overflow:hidden}
.cta-banner img{width:100%;display:block}
.trustrow{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:12px 0 4px;font-size:12px;color:var(--muted);font-weight:600}
.imgcard{border-radius:var(--r);overflow:hidden;margin-top:12px}

/* Pakej */
.pkg{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;margin-bottom:14px;position:relative}
.pkg.has-img{grid-template-columns:76px 1fr auto}
.pkg .thumb{width:76px;height:76px;object-fit:cover;border-radius:12px;grid-row:1}
.pkg.hot{border-color:rgba(230,184,74,.45);background:linear-gradient(180deg,#1B1810,#15161B);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.pkg .ribbon{position:absolute;top:-11px;left:16px;background:var(--gold);color:#1F1400;font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.pkg .ribbon.alt{background:var(--panel-2);color:var(--text-2);border:1px solid var(--line-2);left:auto;right:16px}
.pkg h3{margin:0;font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em}
.pkg p{margin:3px 0 0;font-size:13.5px;color:var(--text-2);line-height:1.5}
.pkg .meta{color:var(--muted);font-size:12.5px;margin-top:5px}
.pkg .price{font-size:30px;font-weight:800;color:#fff;line-height:1;text-align:right;letter-spacing:-.02em}
.pkg.hot .price{color:var(--gold)}
.pkg .price s{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:4px}
.pkg .price em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--green);margin-top:6px;letter-spacing:.02em}
.pkg .btn{grid-column:1/-1;padding:15px;font-size:15px;margin-top:4px}
.paylogos{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:14px}
.paylogos span{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.free{display:inline-block;background:var(--green);color:#06130C;font-size:10px;font-weight:800;padding:2px 6px;border-radius:3px;margin-left:4px}

/* Cara guna */
.steps{display:grid;gap:10px;counter-reset:st}
.steps div{counter-increment:st;position:relative;padding:15px 16px 15px 58px;background:var(--panel);border-radius:14px;font-size:15px;line-height:1.6}
.steps div:before{content:counter(st);position:absolute;left:16px;top:15px;width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--gold);font-weight:800;font-size:14px;display:grid;place-items:center}
.steps b{display:block;color:#fff;font-weight:700;margin-bottom:2px}.steps span{color:var(--text-2);font-size:14.5px}

/* FAQ */
details{background:var(--panel);border-radius:14px;padding:0 18px;margin-bottom:8px}
summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;color:#fff}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:400;flex:none;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0;padding:0 0 16px;font-size:14.5px;color:var(--text-2);line-height:1.65}

footer{padding:28px 22px 130px;font-size:12px;color:var(--muted);text-align:center;border-top:1px solid var(--line);line-height:1.6}
footer b{color:var(--gold);font-weight:800;letter-spacing:.06em;font-size:13px}

/* Sticky bar */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;pointer-events:none}
.sticky .in{pointer-events:auto;width:100%;max-width:560px;background:rgba(12,13,16,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line-2);padding:12px 22px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px}
.sticky .p{font-size:24px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.sticky .p small{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:4px;letter-spacing:.02em}
.sticky .btn{flex:1;padding:14px;font-size:15px}

/* Notifikasi order sebenar */
.proof{position:fixed;left:14px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:46;max-width:290px;display:flex;gap:12px;align-items:center;background:#1B1C22;border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.55);transform:translateX(-120%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
.proof.on{transform:none;opacity:1;pointer-events:auto}
@media (min-width:600px){.proof{left:calc(50% - 280px + 14px)}}
.proof .pav{width:40px;height:40px;border-radius:12px;background:var(--gold-soft);display:grid;place-items:center;font-size:18px;flex:none}
.proof .pt{font-size:13px;color:#fff;line-height:1.4}.proof .pt small{font-size:12px;color:var(--muted)}.proof .pt small b{color:var(--gold)}
.proof .px{position:absolute;top:4px;right:6px;background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 6px}

/* Aksesibiliti */
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.ticker-track{animation:none}html{scroll-behavior:auto}.bg-fx .rays,.bg-fx .glow{animation:none}}
@media (max-width:360px){h1{font-size:30px}.wrap{padding-inline:18px}.stats b{font-size:19px}.tcar{margin:0 -18px;padding-inline:18px}.tcard{flex-basis:calc(100% - 36px)}}

/* ======================================================================
   MODUL LIVE / bubble video — dikekalkan dari sistem Tuan Man HQ
   ====================================================================== */
/* floating video bubble */
.bubbleVid{position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:96px;height:150px;border-radius:14px;overflow:hidden;z-index:45;border:2px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.6);cursor:pointer;background:#000}
@media (min-width:600px){.bubbleVid{right:calc(50% - 280px + 14px)}}
.bubbleVid .vid{position:absolute;inset:0;background:url("__HP1__") center/cover;filter:brightness(.85)}
.bubbleVid .live{position:absolute;top:6px;left:6px;background:var(--red);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:3px;letter-spacing:.1em}
.bubbleVid .live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff;margin-right:4px;animation:blink 1.2s infinite}
.bubbleVid .x{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;display:grid;place-items:center;border:0}
.bubbleVid .play{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 4px #000}
@keyframes blink{50%{opacity:.2}}

/* ===== LIVE overlay (TikTok style) ===== */
.live-ov{position:fixed;inset:0;z-index:100;background:#000;display:none}
.live-ov.on{display:block}
.stage{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden;background:#000}
.stage .video{position:absolute;inset:0;background:url("__HP1__") center/cover;transform:scale(1.06);filter:brightness(.7) saturate(1.1)}
.stage .video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 25%,transparent 55%,rgba(0,0,0,.85))}
.vidnote{position:absolute;top:44%;left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.6);padding:0 40px}
.vidnote b{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:#fff;text-shadow:0 2px 12px #000;letter-spacing:.04em}
.lhead{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;align-items:center;gap:8px}

.lhead .name{background:rgba(0,0,0,.45);border-radius:999px;padding:6px 12px 6px 6px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#fff}
.lhead .name small{font-weight:500;color:#ddd;font-size:11px}
.pill{background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:4px 8px;border-radius:4px;letter-spacing:.1em}
.viewers{background:rgba(0,0,0,.45);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;margin-left:auto;font-variant-numeric:tabular-nums}
.icon{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;border:0;font-size:16px;display:grid;place-items:center}
.pinned{position:absolute;left:12px;right:90px;bottom:318px;background:rgba(0,0,0,.55);border-radius:8px;padding:8px 10px;font-size:12px;color:#fff}
.pinned b{display:block;font-size:10px;color:#ccc;letter-spacing:.08em;margin-bottom:2px}
.comments{position:absolute;left:12px;right:80px;bottom:188px;height:120px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;mask-image:linear-gradient(180deg,transparent,#000 30%)}
.c{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#fff;animation:up .35s ease-out;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.c .av{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff}
.c b{font-weight:700;color:#FFE9A8;margin-right:4px}
.c.sys{color:#bbb;font-style:italic}
.c.admin b{color:#7CE3FF}
@keyframes up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.hearts{position:absolute;right:14px;bottom:330px;width:40px;height:200px;pointer-events:none}
.heart{position:absolute;bottom:0;left:10px;font-size:20px;animation:float 2.4s ease-out forwards}
@keyframes float{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-180px) translateX(var(--dx,0)) scale(1.2);opacity:0}}
.rail{position:absolute;right:10px;bottom:188px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:3}
.rail button{background:none;border:0;padding:0;color:#fff;display:grid;place-items:center;gap:3px}
.rail button svg{width:32px;height:32px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));transition:transform .15s}
.rail button:active svg{transform:scale(.85)}
.rail button small{font-size:12px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
.rail button.on svg{fill:#FE2C55}
.rail #saveBtn.on svg{fill:#FACE15}
.rail .follow{position:relative;width:44px;height:44px;margin-bottom:6px;cursor:pointer}
.rail .follow img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;background:#000}
.rail .follow span{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#FE2C55;color:#fff;font-size:14px;line-height:18px;text-align:center;font-weight:700;transition:transform .2s,opacity .2s}
.rail .follow.done span{transform:translateX(-50%) scale(0);opacity:0}
.pinned,.comments,.hearts,.rail{transition:bottom .45s cubic-bezier(.2,.8,.2,1)}
.stage.nocard .pinned{bottom:212px}.stage.nocard .comments{bottom:82px}.stage.nocard .rail{bottom:82px}.stage.nocard .hearts{bottom:224px}
.pcard{position:absolute;left:12px;right:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px));background:#fff;color:#111;border-radius:14px;padding:10px;display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pcard img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.pcard .t{font-size:13px;font-weight:800;line-height:1.2}
.pcard .opts{display:flex;gap:6px;margin:5px 0}
.pcard .opts button{border:1.5px solid #ddd;background:#fff;color:#444;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.pcard .opts button.sel{border-color:var(--red);color:var(--red);background:#FFF1F2}
.pcard .pr{font-size:12px;color:#888}
.pcard .pr b{font-size:18px;color:var(--red);margin-left:4px}
.pcard .pr s{margin-right:4px}
.pcard .stock{font-size:11px;color:#D9821A;font-weight:700}
.pcard .buy{background:var(--red);color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:800;font-size:14px;align-self:center}
.pcard .num{position:absolute;top:-8px;left:-6px;background:#111;color:#fff;font-size:10px;font-weight:800;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff}
.pcard .close{position:absolute;top:6px;right:8px;background:none;border:0;font-size:14px;color:#999}
.pcard{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.pcard.off{transform:translateY(140%);opacity:0;pointer-events:none}
.pcard.pop{animation:pop .55s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{0%{transform:translateY(40%) scale(.92);opacity:0}60%{transform:translateY(-4%) scale(1.02);opacity:1}100%{transform:none}}
.c.admin .at{font-style:normal;color:#FFE9A8;font-weight:700}
.chat{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:center}
.chat .bag{width:40px;height:40px;border-radius:10px;background:var(--gold);display:grid;place-items:center;font-size:18px;position:relative;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.chat .bag:active{transform:scale(.9)}
.chat .bag.bump{animation:bump .4s}
@keyframes bump{30%{transform:scale(1.18)}60%{transform:scale(.94)}100%{transform:none}}
.chat .bag i{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10px;font-style:normal;font-weight:800;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.chat input{flex:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:11px 14px;font-size:16px;font-family:inherit;min-width:0}
.chat input::placeholder{color:#ccc}
.chat .send{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;border:0;font-size:16px;flex:none}
.tap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.55);color:#fff;font-size:13px;padding:10px 16px;border-radius:999px;pointer-events:none}

/* checkout mock (Draf 3 placeholder) */
.sheet{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
.sheet .card{width:100%;max-width:480px;background:#fff;color:#111;border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.sheet h3{margin:0 0 4px;font-size:18px}
.sheet p{margin:0 0 12px;font-size:13px;color:#666}
.sheet .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.sheet .row button{border:2px solid #ddd;background:#fff;border-radius:10px;padding:12px;font-weight:800;font-size:13px;color:#333}
.sheet .row button.sel{border-color:var(--red);color:var(--red);background:#FFF1F2}
.sheet .btn{padding:14px;font-size:14px}
@media (prefers-reduced-motion:reduce){.c,.heart,.bubbleVid .live i{animation:none}}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* iOS: elak auto-zoom & kunci overlay bila keyboard naik */
.live-ov{height:100dvh}
.stage{height:100dvh}
input,select,textarea{font-size:16px}

/* ===== MODUL LIVE: stack video slide gaya TikTok ===== */
.vstack{position:absolute;inset:0;z-index:0;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}
.vstack::-webkit-scrollbar{display:none;width:0}
.vslide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.vslide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.stage>.video,.tap,.pinned,.comments,.hearts{pointer-events:none}
.vdots{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.vdots i{width:3px;height:14px;border-radius:2px;background:rgba(255,255,255,.3)}
.vdots i.on{background:var(--gold);height:20px}
.vnext{position:absolute;left:50%;top:calc(96px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:9;width:34px;height:34px;border-radius:50%;border:0;padding:0;background:rgba(0,0,0,.5);color:#fff;display:none;place-items:center;cursor:pointer;backdrop-filter:blur(3px);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.vnext.on{display:grid}
.vnext svg{width:20px;height:20px;fill:#fff;animation:hpDown 1.5s ease-in-out infinite}
@keyframes hpDown{0%,100%{transform:translateY(-2px);opacity:.9}50%{transform:translateY(3px);opacity:.55}}
@media (max-height:720px){.vnext{top:calc(84px + env(safe-area-inset-top,0px))}}
.stage.nonlive .pill,.stage.nonlive .viewers,.stage.nonlive .pinned,.stage.nonlive #comments{display:none}
.bubbleVid{bottom:calc(96px + env(safe-area-inset-bottom,0px));border-color:var(--gold)}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#000}
.bubbleVid video,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.midcta{padding-block:8px 36px}.midcta .trustrow{gap:8px}
section,.midcta{scroll-margin-top:84px}

/* ======================================================================
   v4 — LAPTOP / DESKTOP (≥960px): guna ruang penuh, tak lagi lajur sempit
   ====================================================================== */
@media (min-width:960px){
  .phone{max-width:1140px}
  .wrap{padding-inline:40px}
  .top-in{max-width:1140px;padding:14px 40px}
  .brand img{height:42px}
  .ticker{font-size:13px}
  .strip{justify-content:center;border-bottom:0;padding-top:16px}

  /* Hero 2 lajur: teks kiri, gambar kanan */
  .hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:64px;align-items:center;padding-block:56px 24px}
  .hero>*{grid-column:1}
  .hero .showcase{grid-column:2;grid-row:1/8;margin:0;width:100%;max-width:470px;justify-self:end;align-self:center}
  .hero .stats{grid-column:1/-1;margin-top:44px}
  .hero .stats div{padding:22px 8px}.hero .stats b{font-size:30px}.hero .stats span{font-size:13px}
  h1{font-size:54px;line-height:1.1}
  .lead{font-size:18px;max-width:46ch}
  .hero .btn{display:inline-flex;width:auto;justify-self:start;padding:17px 40px}
  .hero .note{text-align:left;margin-top:12px}
  .trust{gap:16px;font-size:14px}.trust div{padding:22px 10px;border:1px solid var(--line)}.trust i{font-size:24px}

  /* Seksyen */
  section{padding-block:76px}
  .sec-eyebrow,h2{text-align:center}
  h2{font-size:38px;margin-bottom:38px}
  .pain{grid-template-columns:repeat(2,1fr);gap:14px}
  .pain>div:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 7px);justify-self:center;width:100%}
  .callout{max-width:780px;margin:22px auto 0;text-align:center;padding:20px 26px}
  .gallery{grid-template-columns:repeat(3,1fr);gap:16px}
  .gallery figure:first-child{grid-column:auto;aspect-ratio:3/4}
  .gallery figure:not(:first-child) figcaption{font-size:15px;padding:40px 16px 14px}
  .gallery figure:not(:first-child) figcaption span,.gallery figcaption span{display:block;font-size:13px}
  .herbs{grid-template-columns:repeat(3,1fr);gap:14px}.herb{padding:20px 18px}
  .benefits{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  .rating.big{justify-content:center}
  .tcar{margin:0;padding-inline:0;gap:16px}
  .tcard{flex:0 0 calc((100% - 32px)/3);padding:22px}
  .tiktoks{grid-template-columns:repeat(4,1fr);gap:12px}
  .qna{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}
  .qna-vid{max-height:560px}
  .midcta{max-width:520px;margin:0 auto}

  /* Pakej: 3 kad sebelah-menyebelah */
  .pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:6px;padding-top:12px}
  .pkg,.pkg.has-img{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;padding:20px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
  .pkg:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .pkg.hot{transform:translateY(-10px)}.pkg.hot:hover{transform:translateY(-14px)}
  .pkg .thumb{width:100%;height:auto;aspect-ratio:3/4;border-radius:12px}
  .pkg .price{text-align:left;font-size:34px}
  .pkg .btn{margin-top:auto}
  #pakej>.note{max-width:780px;margin:22px auto 0}
  .steps{grid-template-columns:repeat(2,1fr);gap:14px}
  section details{max-width:820px;margin-inline:auto}
  .imgcard{max-width:820px;margin-inline:auto}
  section>.note{max-width:820px;margin-inline:auto;text-align:center!important}
  section>.btn{max-width:420px;margin:22px auto 0}
  footer{max-width:1140px;margin:0 auto}

  /* Bar bawah: penuh kiri-kanan */
  .sticky{background:rgba(12,13,16,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line-2);pointer-events:auto}
  .sticky .in{max-width:1140px;background:none;border:0;padding:12px 40px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));backdrop-filter:none;-webkit-backdrop-filter:none}
  .sticky .btn{flex:0 0 auto;width:auto;margin-left:auto;padding:14px 44px}
  .proof{left:24px}
  .bubbleVid{right:24px}
}
/* Tablet: sedikit lebih luas */
@media (min-width:600px) and (max-width:959px){
  .tcard{flex:0 0 calc(80% - 10px)}
  h1{font-size:40px}
}

/* ======================================================================
   v4.1 — KEMAS & MINIMALIS: saiz sederhana, ruang lebih tenang
   ====================================================================== */
body{font-size:15px;line-height:1.65}
.ticker{height:30px;font-size:11.5px;letter-spacing:.05em}.ticker-track{height:30px}
.top{top:30px}
.top-in{padding:10px 20px}
.brand img{height:32px}
.wa{padding:8px 13px;font-size:12.5px}
.strip{font-size:12.5px;padding:9px 20px}
.wrap{padding-inline:20px}
.hero{padding-block:28px 6px}
.eyebrow,.sec-eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:10px}
h1{font-size:28px;line-height:1.2;margin-bottom:12px}
h2{font-size:22px;margin-bottom:16px}
.lead{font-size:15px;margin-bottom:14px}
.rating{font-size:12.5px;margin-bottom:14px}.stars{font-size:13px}
.badges{gap:6px;margin-bottom:18px}.badge{font-size:11px;padding:5px 10px;background:transparent}
.btn{padding:14px 16px;font-size:15px;border-radius:12px;font-weight:700}
.btn-gold{box-shadow:0 8px 22px rgba(230,184,74,.16)}.btn-red{box-shadow:0 8px 22px rgba(61,187,122,.16)}
.note{font-size:12.5px}
.showcase{margin:18px 0 6px;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.stats{margin:18px 0 4px;border-radius:14px;background:transparent}
.stats div{padding:12px 6px}.stats b{font-size:18px}.stats span{font-size:11px}
.trust{gap:6px;font-size:11px;padding-block:14px 4px}
.trust div{padding:10px 4px;background:transparent;border:1px solid var(--line)}.trust i{font-size:16px;margin-bottom:4px}
section{padding-block:34px}
.pain{gap:8px}.pain>div{padding:13px 14px;gap:12px;border-radius:12px}
.pain div em{width:26px;height:26px;font-size:12px}
.pain div b{font-size:14.5px}.pain div span{font-size:13.5px}
.callout{font-size:14px;padding:14px 16px;border-radius:12px}
.gallery{gap:8px}.gallery figure{border-radius:12px}
.herbs{gap:8px}.herb{padding:13px 12px;border-radius:12px}.herb b{font-size:14px}.herb span{font-size:12.5px}
.benefits{gap:8px}.benefits>div{font-size:14px;padding:12px 14px;border-radius:12px}
.tcard{padding:16px;border-radius:14px}.tcard p{font-size:14px}.tav{width:34px;height:34px;font-size:13px}
.tcard .th b{font-size:14px}
.qna-list div{font-size:13.5px}
.pkg{padding:16px;border-radius:14px;gap:8px 12px}
.pkg.has-img{grid-template-columns:64px 1fr auto}.pkg .thumb{width:64px;height:64px;border-radius:10px}
.pkg h3{font-size:16px}.pkg p{font-size:12.5px}.pkg .meta{font-size:11.5px}
.pkg .price{font-size:24px}.pkg .price s{font-size:12px}.pkg .price em{font-size:10.5px}
.pkg .btn{padding:12px;font-size:14px}
.pkg.hot{box-shadow:0 12px 30px rgba(0,0,0,.28)}
.pkg .ribbon{font-size:10px;padding:3px 9px;top:-10px}
.paylogos span{font-size:10.5px;padding:4px 10px}
.steps div{font-size:14px;padding:13px 14px 13px 52px;border-radius:12px}.steps div:before{width:26px;height:26px;font-size:12px;top:13px;left:14px}.steps span{font-size:13.5px}
details{border-radius:12px;padding:0 16px}summary{font-size:14px;padding:13px 0}details p{font-size:13.5px}
footer{font-size:11.5px}
.sticky .in{padding:10px 20px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.sticky .p{font-size:20px}.sticky .btn{padding:12px;font-size:14px}
/* latar lebih lembut */
.bg-fx .rays{background:repeating-conic-gradient(from 0deg,rgba(230,184,74,.035) 0deg 3deg,transparent 3deg 12deg)}
.bg-fx .glow{background:radial-gradient(circle,rgba(230,184,74,.08),transparent 62%)}
.bg-fx .g2{background:radial-gradient(circle,rgba(61,187,122,.045),transparent 62%)}

@media (min-width:600px) and (max-width:959px){h1{font-size:32px}}
@media (min-width:960px){
  .phone{max-width:1040px}
  .top-in{max-width:1040px;padding:12px 40px}
  .brand img{height:36px}
  .ticker{font-size:12px}
  .hero{column-gap:56px;padding-block:44px 16px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero .showcase{max-width:380px}
  h1{font-size:40px;line-height:1.15}
  .lead{font-size:16px;max-width:48ch}
  .hero .btn{padding:13px 30px}
  .hero .stats{margin-top:32px}.hero .stats div{padding:16px 8px}.hero .stats b{font-size:22px}.hero .stats span{font-size:12px}
  .trust{gap:12px;font-size:12.5px}.trust div{padding:14px 8px;border:1px solid var(--line)}.trust i{font-size:18px}
  section{padding-block:56px}
  h2{font-size:28px;margin-bottom:28px}
  .pain{gap:10px}.callout{font-size:14.5px}
  .gallery{gap:12px;max-width:900px;margin-inline:auto}
  .gallery figure:not(:first-child) figcaption,.gallery figure:first-child figcaption{font-size:13.5px;padding:34px 14px 12px}
  .gallery figcaption span{font-size:12px}
  .herbs,.benefits{gap:10px}.herb{padding:16px 14px}
  .tcar{gap:12px}.tcard{flex:0 0 calc((100% - 24px)/3);padding:18px}
  .pkgs{gap:16px;max-width:900px;margin-inline:auto}
  .pkg,.pkg.has-img{padding:16px;gap:10px}
  .pkg .thumb{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top}
  .pkg .price{font-size:26px}
  .pkg.hot{transform:translateY(-6px)}.pkg.hot:hover{transform:translateY(-9px)}.pkg:hover{transform:translateY(-3px)}
  .steps{gap:10px;max-width:900px;margin-inline:auto}
  section details,.imgcard,section>.note{max-width:760px}
  section>.btn{max-width:340px}
  .midcta{max-width:420px}
  .sticky .in{max-width:1040px;padding:10px 40px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .sticky .btn{padding:11px 36px}
}

/* v4.2 — gambar J&T lebih kecil, testimoni boleh slide, betulkan jarak */
.tcar{margin:0 -20px;padding-inline:20px;scroll-padding-inline:20px}
.tcard{flex:0 0 calc(100% - 40px);scroll-snap-align:start}
.tctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.tctl .tdots{margin:0}
.tnav{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text-2);font-size:18px;line-height:1;display:grid;place-items:center;padding:0 0 2px;transition:border-color .2s,color .2s}
.tnav:hover{border-color:var(--gold);color:var(--gold)}
.imgcard{max-width:340px;margin-inline:auto}
@media (max-width:360px){.tcar{margin:0 -18px;padding-inline:18px;scroll-padding-inline:18px}.tcard{flex-basis:calc(100% - 36px)}}
@media (min-width:600px) and (max-width:959px){.tcard{flex-basis:calc(70% - 10px)}}
@media (min-width:960px){
  .wrap{padding-inline:40px}
  .tcar{margin:0;padding-inline:0;scroll-padding-inline:0;gap:12px}
  .tcard{flex:0 0 calc((100% - 24px)/2.4)}
  .imgcard{max-width:380px}
}