/* ============================================================
 *  FILE  : assets/style.css
 *  ISI   : Tampilan LP. Mobile-first, kolom tengah max 540px.
 *  UPDATE: 2026-09-20
 * ============================================================ */

/* SEMUA variabel WAJIB berawalan --lp-.
   Alasannya bukan kerapian: CSS Mengantar (app.css, 540 KB) dimuat SESUDAH
   berkas ini dan nulis :root{--red:#f1556c; --yellow:#f7b84b; --green:#1abc9c}.
   Nama polos kalah, jadi seluruh warna merek diam-diam ketimpa - merah jadi
   PINK, kuning jadi emas kusam, hijau jadi tosca. Nol error, nol peringatan,
   dan cuma ketahuan kalau ada yang nyamain warnanya piksel per piksel.
   Nambah variabel baru? kasih awalan --lp- juga. */
:root{
  /* #E62129 = warna panah di banner-panah.gif, diambil lewat sampel piksel.
     Bar, ribbon, dan panah harus satu merah - kalau beda, ketahuan. */
  --lp-red:#DC2627; --lp-red-dark:#B91C1B; --lp-red-soft:#FEECED;
  --lp-yellow:#FACC14; --lp-green:#1E8E3E;
  /* Lebar kolom tengah. Dipakai .wrap, .bar, DAN .dock - kalau angkanya
     diketik ulang per tempat, salah satu pasti ketinggalan dan barnya
     melar keluar kolom putih. */
  --lp-col:540px;
  --lp-ink:#16181D; --lp-muted:#6B7280; --lp-line:#E6E8EC;
  --lp-bg:#EFF1F4; --lp-surface:#FFFFFF;
  --lp-r:16px; --lp-r-sm:12px;
  --lp-dock-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--lp-bg); color:var(--lp-ink);
  font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:calc(var(--lp-dock-h) + env(safe-area-inset-bottom));
}
img{max-width:100%;height:auto;display:block}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}

.wrap{max-width:var(--lp-col);margin:0 auto;background:var(--lp-surface)}

/* ── BAR COUNTDOWN ─────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:40;
  max-width:var(--lp-col);margin:0 auto;
  background:var(--lp-red);color:#fff;text-align:center;
  padding:10px 12px 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.bar-label{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;font-weight:800;letter-spacing:.09em;margin-bottom:8px;
}
.bar-label svg{width:15px;height:15px}
.clock{display:flex;gap:8px;justify-content:center}
.unit{
  /* Warna TETAP, bukan hitam transparan. Transparan bikin warnanya
     ikut geser tiap merah induknya diubah - waktu merahnya masih
     kebajak pink, kotak ini jadi #BC4254 tanpa ada yang nulis. */
  background:#B91C1B;border-radius:var(--lp-r-sm);
  min-width:58px;padding:5px 4px 6px;
}
.unit b{display:block;font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.unit span{font-size:9px;font-weight:700;letter-spacing:.1em;opacity:.85}
.unit:last-child b{color:var(--lp-yellow)}

/* ── HERO ──────────────────────────────────────── */
.hero{padding:0 20px 26px;text-align:center}
.hero-img{width:100%;border-radius:var(--lp-r);margin-bottom:14px}
.kicker{
  display:inline-block;background:var(--lp-red-soft);color:var(--lp-red-dark);
  font-size:12px;font-weight:800;letter-spacing:.06em;
  padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
h1{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.sub{color:var(--lp-muted);margin-top:10px;font-size:16px}
.price-from{margin-top:16px;font-size:15px;color:var(--lp-muted)}
.price-from b{font-size:28px;color:var(--lp-ink);font-weight:800;margin-left:6px;
  font-variant-numeric:tabular-nums}
.micro{margin-top:10px;font-size:13px;color:var(--lp-muted)}

/* ── TOMBOL ────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;border-radius:999px;
  font-size:17px;font-weight:800;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;border:0;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn-main{
  background:var(--lp-yellow);color:#1A1200;
  box-shadow:0 6px 0 #C89A00,0 10px 20px rgba(0,0,0,.14);
  margin-top:20px;width:100%;
}
.btn-main:active{transform:translateY(3px);box-shadow:0 3px 0 #C89A00}
.chev{width:18px;height:18px;stroke-width:2.6}

/* ── SECTION ───────────────────────────────────── */
.sec{padding:30px 20px;border-top:8px solid var(--lp-bg)}
h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-bottom:16px}
h2.center{text-align:center}

.pains{list-style:none;display:grid;gap:10px}
.pains li{
  position:relative;padding:13px 14px 13px 40px;
  background:var(--lp-red-soft);border-radius:var(--lp-r-sm);
  font-size:15px;font-weight:500;
}
.pains li::before{
  content:"";position:absolute;left:16px;top:50%;
  width:8px;height:8px;margin-top:-4px;border-radius:2px;background:var(--lp-red);
}
.punch{margin-top:16px;font-size:18px;font-weight:800;line-height:1.4}

.full{width:100%;border-radius:var(--lp-r);margin-bottom:16px}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.tool{
  background:var(--lp-bg);border-radius:var(--lp-r-sm);
  padding:12px 6px;text-align:center;
}
.tool b{display:block;font-size:11px;font-weight:800;letter-spacing:.04em}
.tool span{display:block;font-size:11px;color:var(--lp-muted);margin-top:3px}
.specs{text-align:center;font-size:14px;color:var(--lp-muted);font-weight:600}

/* ── PAKET ─────────────────────────────────────── */
.pkgs{display:grid;gap:12px}
.pkg{
  position:relative;border:2px solid var(--lp-line);border-radius:var(--lp-r);
  padding:16px;background:var(--lp-surface);cursor:pointer;
  transition:border-color .15s ease,transform .12s ease;
}
.pkg:active{transform:scale(.99)}
.pkg.best{border-color:var(--lp-red);padding-top:26px;box-shadow:0 8px 22px rgba(209,43,43,.13)}
.ribbon{
  position:absolute;top:-1px;left:-1px;
  background:var(--lp-red);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:5px 12px;border-radius:var(--lp-r) 0 var(--lp-r-sm) 0;
}
.pkg-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pkg-qty{font-size:19px;font-weight:800}
.pkg-name{font-size:14px;font-weight:600;color:var(--lp-muted)}
.pkg-note{font-size:13px;color:var(--lp-muted);margin-top:3px}
.pkg-was{margin-top:9px;font-size:14px;color:var(--lp-muted)}
.pkg-price{font-size:27px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.ship-free{
  display:inline-block;margin-top:6px;
  background:#E7F5EB;color:var(--lp-green);
  font-size:12px;font-weight:800;letter-spacing:.05em;
  padding:4px 11px;border-radius:999px;
}
.ship-paid{margin-top:6px;font-size:13px;color:var(--lp-muted)}
.nudge{
  margin-top:12px;background:var(--lp-yellow);color:#1A1200;
  font-size:14px;font-weight:800;text-align:center;
  padding:10px;border-radius:var(--lp-r-sm);
}

.arrows{display:flex;justify-content:center;margin:20px 0 8px}
/* Geraknya udah di dalam GIF-nya, jadi animasi CSS dicabut - kalau enggak,
   dua gerakan numpuk dan kelihatan gugup. */
.arrows img{width:190px;height:auto}

.stock{
  background:var(--lp-red);color:#fff;border-radius:var(--lp-r);
  padding:16px;text-align:center;
}
.stock span{font-size:12px;font-weight:800;letter-spacing:.1em;opacity:.9}
.stock b{display:block;font-size:44px;font-weight:800;line-height:1.1;color:var(--lp-yellow)}

/* ── FORM ──────────────────────────────────────── */
.form-sec{padding-left:0;padding-right:0}
.form-sec h2{padding:0 20px}
.embed-box{min-height:320px}
.after-form{
  /* Widget nyisain <footer> KOSONG ~100px di bawah tombol Beli Sekarang.
     Kita TARIK NAIK catatan milik kita sendiri, BUKAN nyembunyiin elemen
     widget. Nyentuh elemen punya pihak lain bisa ganggu alur bayarnya,
     dan checkout mati harganya jauh di atas ruang kosong. */
  margin:-84px 20px 0;padding:13px 15px;
  background:#E7F5EB;color:#14532D;border-radius:var(--lp-r-sm);
  font-size:13.5px;font-weight:600;line-height:1.5;
}

footer{padding:26px 20px 34px;text-align:center;border-top:8px solid var(--lp-bg)}
.guarantee{font-size:14px;font-weight:700}
.brandline{margin-top:6px;font-size:12px;color:var(--lp-muted)}

/* ── DOCK ──────────────────────────────────────── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  max-width:var(--lp-col);margin:0 auto;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--lp-line);
  transform:translateY(110%);transition:transform .22s ease;
}
.dock.show{transform:none}
.dock-price{font-size:11px;color:var(--lp-muted);line-height:1.2;white-space:nowrap}
.dock-price b{display:block;font-size:19px;color:var(--lp-ink);font-weight:800;
  font-variant-numeric:tabular-nums}
.dock-btn{margin-top:0;flex:1;min-height:50px;font-size:16px}

@media (min-width:560px){
  h1{font-size:34px}
  body{background:var(--lp-bg)}
  .wrap{box-shadow:0 0 40px rgba(0,0,0,.07)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ── Perbaikan embed Mengantar ──────────────────
   (versi benar dari CSS lama — .embed-gap dulu
    kejebak nested di dalam .embed-notopMargin
    jadi gak pernah jalan) */
#app{background-color:transparent !important;text-align:left}
.embed-sealHide,.embed-leftHide,.bottom-bar-text{display:none !important}
.embed-rightHide{flex:0 0 100% !important;width:100% !important;max-width:100% !important;margin:auto}
.embed-bgHide{box-shadow:none !important;background:transparent;border:none !important;
  padding:1px 20px !important;margin:0}
.embed-topSpace{margin:auto !important}
.embed-wrapper{height:auto !important;overflow:initial !important}
.embed-notopMargin{margin:0 !important}
.embed-gap{gap:10px !important}