/* ============================================================
   HANDIA — THE CLINICAL GUIDE SERIES
   Stylesheet web jualan ebook. Dipakai semua halaman.

   Token, font, dan aturan di file ini mengikuti
   brief_web_jualan_ebook_HANDIA.md bagian 2.2.

   ATURAN OWNER YANG DIKUNCI DI SINI:
   - tidak ada italic sama sekali
   - tidak ada gradient
   - elemen center harus presisi
   - tanpa emoji berlebihan
   - mobile-first, dicek di 375px
   ============================================================ */

:root{
  /* WARNA — dari brief 2.2 */
  --navy:#0A1A3F;        /* hero, judul, tombol utama            */
  --navy-deep:#071330;   /* latar hero Vol. 01                   */
  --cyan:#43D3F2;        /* judul besar & aksen di atas navy     */
  --cyan-light:#5FE0FA;
  --cyan-text:#00839F;   /* kicker di atas putih, kontras aman   */
  --blue:#3063FD;        /* angka statistik (ukuran besar)       */
  --blue-dark:#1F4FD8;   /* biru untuk teks lebih kecil          */
  --soft:#F4F8FD;        /* latar section selang-seling          */
  --ink:#1E2A44;         /* teks                                 */
  --muted:#5B6680;       /* teks sekunder                        */
  --line:#D5DEEE;        /* hairline, border kartu               */
  --white:#FFFFFF;

  /* fungsional seperlunya */
  --ok:#0F7A37;
  --ok-bg:#E8F7EE;
  --warn:#8A5800;
  --warn-bg:#FFF4DE;
  --alert:#B3261E;
  --alert-bg:#FDECEA;
  --wa:#0E7A4F;
  --wa-hover:#0A6641;

  /* ELEVASI & RADIUS */
  --sh-sm:0 1px 3px rgba(10,26,63,.06), 0 6px 18px -10px rgba(10,26,63,.14);
  --sh-md:0 10px 34px -14px rgba(10,26,63,.28);
  --sh-lg:0 28px 60px -20px rgba(10,26,63,.38);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:26px;

  /* RITME */
  --sp:92px;
  --maxw:1080px;
  --maxw-read:720px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:var(--cyan);color:var(--navy)}

/* Aturan owner: tidak ada italic di mana pun. */
i,em,cite,address,dfn,var{font-style:normal}

h1,h2,h3,h4{color:var(--navy);line-height:1.18;text-wrap:balance}

/* Judul besar: Playfair Display, huruf normal.
   ------------------------------------------------------------
   Sebelumnya Anton uppercase (sesuai brief 2.2). Diganti atas
   permintaan owner: Anton bagus untuk 2–4 kata seperti judul di
   sampul Vol. 02, tapi dipakai untuk kalimat penuh hasilnya
   terasa berteriak seperti poster, bukan premium. Playfair
   mengikuti judul di sampul Vol. 01 ("Reverse Obesity in 3
   Months") yang justru terbaca mahal.

   Anton TETAP dipakai, tapi hanya untuk angka pendek:
   .phase-num dan .toc-num. Jangan dikembalikan ke judul. */
.h-display{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;text-transform:none;letter-spacing:-.018em;
  line-height:1.14;
}
h1.h-display{font-size:clamp(33px,6vw,56px)}
h2.h-display{font-size:clamp(27px,4.4vw,40px)}
/* Untuk headline panjang (lebih dari ~5 kata) supaya tidak menumpuk */
h1.h1-long{font-size:clamp(29px,4.8vw,46px);line-height:1.16}

/* Di atas navy, serif kontras tinggi butuh bobot sedikit lebih
   tebal supaya goresan tipisnya tidak hilang. */
.bg-navy .h-display,.bg-navy-deep .h-display{font-weight:700}

/* Judul section: Playfair Display 600 */
h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:600}
h2{font-size:clamp(25px,3.8vw,36px);letter-spacing:-.01em}
h3{font-size:clamp(20px,2.6vw,26px)}
h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:18px;line-height:1.35}

p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--navy)}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.read{max-width:var(--maxw-read);margin:0 auto}
section{padding:var(--sp) 0}
section.tight{padding:60px 0}
.bg-soft{background:var(--soft)}
.bg-navy{background:var(--navy);color:#D7E2F5}
.bg-navy-deep{background:var(--navy-deep);color:#D7E2F5}
.bg-navy h2,.bg-navy h3,.bg-navy h4,.bg-navy-deep h2,.bg-navy-deep h3,.bg-navy-deep h4{color:var(--white)}
.bg-navy strong,.bg-navy-deep strong{color:var(--white)}

/* center presisi: blok ikut center, bukan cuma teksnya */
.center{text-align:center}
.center > *{margin-left:auto;margin-right:auto}

.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.lead{font-size:clamp(17px,2vw,19px);color:var(--muted)}

/* ---------- KICKER ---------- */
.kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan-text);margin-bottom:14px;
}
.bg-navy .kicker,.bg-navy-deep .kicker{color:var(--cyan)}

/* ---------- HEADER ---------- */
.site-head{border-bottom:1px solid var(--line);background:var(--white)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:68px}
.site-head img{height:28px;width:auto}
.site-head a.back{font-size:14.5px;font-weight:600;color:var(--muted)}
.site-head a.back:hover{color:var(--navy)}
.site-head.on-navy{background:var(--navy);border-bottom-color:rgba(255,255,255,.12)}
.site-head.on-navy a.back{color:#9FB2D6}
.site-head.on-navy a.back:hover{color:var(--white)}

/* ---------- HERO ---------- */
.hero{padding:70px 0 78px}
.hero-grid{display:grid;gap:44px;align-items:center}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}
}
.hero h1{color:var(--white)}
.hero h1 .cy{color:var(--cyan)}
.hero-sub{font-size:clamp(16.5px,1.9vw,19px);color:#C3D2EC;margin-top:20px;max-width:46ch}
.hero-meta{
  margin-top:22px;font-size:14px;color:#9FB2D6;font-weight:600;
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:#5E739C}

/* mockup cover: dimiringkan sedikit supaya terasa produk nyata */
.cover-mock{perspective:1400px}
.cover-mock img{
  width:100%;max-width:360px;margin:0 auto;border-radius:6px;
  box-shadow:var(--sh-lg);
  transform:rotateY(-13deg) rotateX(3deg) rotateZ(-1.2deg);
  transition:transform .4s ease;
}
.cover-mock img:hover{transform:rotateY(-7deg) rotateX(2deg) rotateZ(-.5deg)}
@media(max-width:899px){
  .cover-mock img{max-width:260px;transform:rotateY(-9deg) rotateZ(-1deg)}
  .hero-grid{gap:34px}
}

/* ---------- TOMBOL ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:15px 34px;border-radius:var(--r-sm);
  font-size:17px;font-weight:700;line-height:1.3;text-align:center;
  transition:background .15s ease,transform .12s ease,box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}

/* tombol utama di atas navy: cyan + teks navy (kontras 9:1) */
.btn-cyan{background:var(--cyan);color:var(--navy);box-shadow:var(--sh-md)}
.btn-cyan:hover{background:var(--cyan-light)}

/* tombol utama di atas putih: navy + teks putih (kontras 15:1) */
.btn-navy{background:var(--navy);color:var(--white);box-shadow:var(--sh-md)}
.btn-navy:hover{background:#13285C}

.btn-wa{background:var(--wa);color:var(--white)}
.btn-wa:hover{background:var(--wa-hover)}

.btn-ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy)}

.btn-block{width:100%}
.btn-sm{min-height:46px;padding:11px 22px;font-size:15.5px}

.cta-note{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.6}
.bg-navy .cta-note,.bg-navy-deep .cta-note{color:#9FB2D6}

/* ---------- KARTU MASALAH ---------- */
.prob-grid{display:grid;gap:16px}
@media(min-width:640px){.prob-grid{grid-template-columns:1fr 1fr}}
.prob-card{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;box-shadow:var(--sh-sm);
}
.prob-card svg{width:24px;height:24px;flex:none;color:var(--cyan-text);margin-top:2px}
.prob-card p{font-size:16.5px;margin:0}

/* kutipan penutup section */
.pull{
  border-left:3px solid var(--cyan);padding:4px 0 4px 22px;
  font-size:clamp(16.5px,2vw,18.5px);color:var(--ink);
}
.bg-navy .pull,.bg-navy-deep .pull{color:#D7E2F5;border-left-color:var(--cyan)}

/* ---------- FASE / ALASAN ---------- */
.phase-grid{display:grid;gap:18px}
@media(min-width:860px){.phase-grid{grid-template-columns:repeat(3,1fr)}}
.phase-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-sm);position:relative;
}
.phase-num{
  font-family:'Anton',Impact,sans-serif;font-size:30px;color:var(--cyan);
  line-height:1;margin-bottom:10px;
}
.phase-week{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.phase-card h4{font-size:19px;margin-bottom:8px;color:var(--navy)}
.phase-card p{font-size:16px;color:var(--muted);margin:0}

.boost{display:grid;gap:16px;margin-top:22px}
@media(min-width:720px){.boost{grid-template-columns:1fr 1fr}}
.boost-card{background:var(--soft);border-radius:var(--r-md);padding:22px 24px}
.boost-card h4{margin-bottom:6px}
.boost-card p{font-size:16px;color:var(--muted);margin:0}

/* ---------- KARTU BUKTI / ANGKA ---------- */
.proof-grid{display:grid;gap:18px}
@media(min-width:720px){.proof-grid.c3{grid-template-columns:repeat(3,1fr)}
  .proof-grid.c2{grid-template-columns:1fr 1fr}}
.proof-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-sm);
}
.proof-num{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:clamp(34px,4.6vw,44px);color:var(--blue);line-height:1;
  letter-spacing:-.01em;margin-bottom:12px;
}
.proof-card h4{margin-bottom:8px}
.proof-card p{font-size:16px;color:var(--muted);margin:0}
.proof-src{
  display:block;font-size:13px;color:var(--muted);margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line);line-height:1.5;
}
.proof-foot{font-size:14.5px;color:var(--muted);margin-top:22px;line-height:1.6}

/* ---------- DAFTAR ISI ---------- */
.toc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--white);box-shadow:var(--sh-sm)}
.toc-row{display:flex;gap:18px;align-items:flex-start;padding:18px 22px;
  border-bottom:1px solid var(--line)}
.toc-row:last-child{border-bottom:0}
.toc-row:nth-child(odd){background:#FBFDFF}
.toc-num{
  font-family:'Anton',Impact,sans-serif;font-size:19px;color:var(--cyan-text);
  flex:none;width:34px;line-height:1.3;
}
.toc-main b{display:block;color:var(--navy);font-size:17px;line-height:1.4}
.toc-main span{display:block;color:var(--muted);font-size:15.5px;margin-top:3px;line-height:1.55}

/* ---------- PREVIEW HALAMAN ---------- */
.preview-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.preview-grid{grid-template-columns:repeat(4,1fr)}}
.preview-grid figure{margin:0}
.preview-grid img{
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
  background:var(--white);
}
.preview-grid figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;
  text-align:center;line-height:1.5}

/* ---------- CONTOH GERAKAN ---------- */
.sample{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--sh-sm);
}
.sample ol{margin:14px 0 0;padding-left:20px}
.sample li{margin-bottom:8px;font-size:16.5px}
.dose{
  display:inline-block;margin-top:16px;background:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:8px 18px;
  font-size:14.5px;font-weight:700;color:var(--navy);letter-spacing:.02em;
}

/* ---------- PANEL SERBAGUNA ---------- */
.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;box-shadow:var(--sh-sm);text-align:left;
}
.panel .row{display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:16px}
.panel .row:last-child{border-bottom:0}
.panel .row b{color:var(--navy);text-align:right}
.panel .row b.code{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:19px}

/* ---------- LANGKAH (cara order / setelah bayar) ---------- */
.steps{display:grid;gap:16px;counter-reset:s;list-style:none}
.steps li{counter-increment:s;display:flex;gap:15px;align-items:flex-start;font-size:16.5px}
.steps li::before{
  content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:var(--white);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;
  display:grid;place-items:center;
}

/* ---------- UNTUK SIAPA ---------- */
.fit-grid{display:grid;gap:18px}
@media(min-width:800px){.fit-grid{grid-template-columns:1fr 1fr}}
.fit-col{border-radius:var(--r-lg);padding:28px 26px;border:1px solid var(--line)}
.fit-col.ok{background:var(--ok-bg);border-color:#BFE6CD}
.fit-col.ok h3{color:var(--ok)}
.fit-col.warn{background:var(--warn-bg);border-color:#F0DCB4}
.fit-col.warn h3{color:var(--warn)}
.fit-col ul{list-style:none;display:grid;gap:12px;margin-top:16px}
.fit-col li{position:relative;padding-left:32px;font-size:16.5px}
.fit-col li::before{
  position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.fit-col.ok li::before{content:'\2713';background:var(--ok);color:var(--white)}
.fit-col.warn li::before{content:'!';background:var(--warn);color:var(--white)}

/* ---------- KARTU HARGA ---------- */
.pricecard{
  max-width:540px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-md);overflow:hidden;
}
.pricecard-top{padding:32px 30px 28px;text-align:center;border-bottom:1px solid var(--line)}
.pricecard-top .ttl{font-size:15px;font-weight:700;color:var(--muted);margin-bottom:14px}
.price{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.price-was{font-size:19px;color:var(--muted);text-decoration:line-through;
  text-decoration-thickness:2px}
.price-now{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:clamp(38px,7vw,52px);color:var(--navy);line-height:1;letter-spacing:-.02em;
}
.pricecard-body{padding:28px 30px 32px}
/* daftar isi paket selalu rata kiri, walau kartunya berada di blok .center */
.pricecard-body ul{list-style:none;display:grid;gap:11px;margin-bottom:26px;text-align:left}
.pricecard-body li{position:relative;padding-left:30px;font-size:16.5px}
.pricecard-body li::before{
  content:'\2713';position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;
  background:var(--navy);color:var(--white);font-size:12px;font-weight:800;
  display:grid;place-items:center;
}
/* bonus khusus varian A/B test — lihat abTest di config.js */
.bonus-box{
  margin:22px auto 0;max-width:420px;text-align:left;
  background:var(--soft);border:1px solid var(--line);
  border-left:4px solid var(--cyan);border-radius:var(--r-md);
  padding:18px 20px;
}
.bonus-box .lbl{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan-text);margin-bottom:7px;
}
.bonus-box b{display:block;font-size:17px;color:var(--navy);line-height:1.4}
.bonus-box span.det{display:block;font-size:15px;color:var(--muted);margin-top:5px;
  line-height:1.55}
.pricecard-body .bonus-box{margin:0 0 22px;max-width:none}

/* versi ringkas untuk kartu di katalog */
.bonus-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--soft);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:14px;font-weight:700;color:var(--cyan-text);
  margin-bottom:14px;
}
.bonus-tag::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;
}

.bundle-line{
  margin-top:20px;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 20px;font-size:15.5px;color:var(--muted);
  text-align:center;
}
.bundle-line b{color:var(--navy)}
.bundle-line a{color:var(--blue-dark);font-weight:700;text-decoration:underline}

/* ---------- KATALOG ---------- */
.book-grid{display:grid;gap:24px}
@media(min-width:860px){.book-grid{grid-template-columns:1fr 1fr}}
.book-card{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-sm);transition:box-shadow .18s ease,transform .18s ease;
}
.book-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.book-card .top{background:var(--navy-deep);padding:34px 28px;text-align:center}
.book-card .top img{width:100%;max-width:186px;margin:0 auto;border-radius:4px;
  box-shadow:var(--sh-lg)}
.book-card .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.book-card .vol{font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan-text);margin-bottom:10px}
.book-card h3{font-size:22px;margin-bottom:10px}
.book-card p{font-size:16px;color:var(--muted);flex:1}
/* NB: jangan pakai nama .foot di sini — itu dipakai footer situs. */
.book-card .card-foot{margin-top:20px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.book-card .pr{display:flex;align-items:baseline;gap:9px}
.book-card .pr .was{font-size:15px;color:var(--muted);text-decoration:line-through}
.book-card .pr .now{font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:26px;color:var(--navy)}

.bundle-card{
  border:1.5px solid var(--navy);border-radius:var(--r-xl);padding:34px 30px;
  background:var(--white);box-shadow:var(--sh-sm);
}
.bundle-card .covers{display:flex;gap:12px;justify-content:center;margin-bottom:24px}
.bundle-card .covers img{width:108px;border-radius:4px;box-shadow:var(--sh-md)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 52px 19px 22px;position:relative;
  font-weight:700;color:var(--navy);font-size:16.5px;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:22px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--cyan-text);
  border-bottom:2px solid var(--cyan-text);transform:rotate(45deg);
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:hover{background:var(--soft)}
.faq .answer{padding:0 22px 20px;font-size:16.5px;color:var(--muted)}
.faq .answer p{margin-bottom:.7em}

/* ---------- TENTANG ---------- */
.about{display:grid;gap:26px;align-items:center}
@media(min-width:760px){.about{grid-template-columns:160px 1fr}}
.about img{height:44px;width:auto}

/* ---------- FOOTER ---------- */
footer.foot{background:var(--navy);color:#9FB2D6;padding:56px 0 44px;font-size:15px}
footer.foot img.logo{height:28px;width:auto;margin-bottom:22px}
footer.foot a{color:var(--white);text-decoration:underline}
footer.foot .cols{display:grid;gap:20px}
@media(min-width:720px){footer.foot .cols{grid-template-columns:1fr auto}}
footer.foot .legal{font-size:13px;color:#7C8FB5;border-top:1px solid rgba(255,255,255,.12);
  padding-top:22px;margin-top:28px;line-height:1.65}
footer.foot .legal p{margin-bottom:.6em}
footer.foot .pt{font-size:12.5px;color:#64779D}

/* ---------- STICKY (brief: hanya di mobile, kecil) ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(255,255,255,.98);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px -10px rgba(10,26,63,.3);
  padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .25s ease;
}
.sticky.show{transform:translateY(0)}
.sticky-in{display:flex;align-items:center;gap:13px}
.sticky-pr{flex:none;line-height:1.15}
.sticky-pr .w{display:block;font-size:12px;color:var(--muted);text-decoration:line-through}
.sticky-pr .n{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:21px;color:var(--navy)}
.sticky .btn{flex:1;min-height:46px;font-size:15.5px;padding:11px 16px}
@media(max-width:899px){.sticky{display:block}}
#sticky-after{height:1px;margin-bottom:-1px}

/* ---------- MODAL ORDER ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(7,19,48,.68);padding:18px;overflow-y:auto;overscroll-behavior:contain;
}
.modal.open{display:block}
.modal-box{background:var(--white);border-radius:var(--r-xl);max-width:500px;
  margin:28px auto;box-shadow:var(--sh-lg);overflow:hidden}
.modal-head{background:var(--navy);color:var(--white);padding:22px 24px;position:relative}
.modal-head h3{color:var(--white);font-size:21px;margin:0}
.modal-head p{color:#9FB2D6;font-size:14px;margin:5px 0 0}
.modal-close{position:absolute;right:12px;top:12px;width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;color:var(--white);font-size:21px}
.modal-close:hover{background:rgba(255,255,255,.14)}
.modal-body{padding:24px}
.modal-step{display:none}
.modal-step.active{display:block}

.field{margin-bottom:17px}
.field label{display:block;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px}
.field label .opt{font-weight:500;color:var(--muted)}
.field input{
  width:100%;font:inherit;font-size:16.5px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);min-height:52px;
}
.field input:focus{border-color:var(--blue);outline:none}
.field .hint{font-size:13.5px;color:var(--muted);margin-top:5px}
.field.err input{border-color:var(--alert);background:var(--alert-bg)}
.field .msg{font-size:13.5px;color:var(--alert);margin-top:5px;display:none;font-weight:600}
.field.err .msg{display:block}

.order-sum{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px;margin-bottom:20px;font-size:15.5px}
.order-sum .row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.order-sum .row b{color:var(--navy)}
.order-sum .row.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;
  font-size:17px}
.order-sum .row.tot b{font-family:'Playfair Display',Georgia,serif;font-size:21px}

.qris-card{text-align:center;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;background:var(--white)}
.qris-card img{margin:0 auto;max-width:260px;width:100%;border-radius:var(--r-sm)}
.qris-card .nm{font-weight:700;color:var(--navy);margin-top:12px;font-size:16px}
.qris-amt{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:28px;
  color:var(--navy);margin-top:3px}
.qris-missing{
  border:1.5px dashed var(--warn);background:var(--warn-bg);color:var(--warn);
  border-radius:var(--r-md);padding:22px;font-size:15px;font-weight:600;text-align:center;
  line-height:1.6;
}
.bank-alt{margin-top:15px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px;font-size:15.5px;background:var(--soft)}
.bank-alt .t{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.bank-alt .no{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:19px;
  color:var(--navy)}
.copy-btn{font-size:13.5px;font-weight:700;color:var(--blue-dark);
  text-decoration:underline;margin-left:8px}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#EAF1FF;border-radius:var(--r-sm);padding:12px 16px;margin-top:15px}
.code-box .k{font-size:12.5px;font-weight:800;color:var(--navy);
  letter-spacing:.12em;text-transform:uppercase}
.code-box .v{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:18px;
  color:var(--navy)}

/* ---------- PENANDA "BELUM DIISI" (hapus sebelum tayang) ---------- */
.todo,
.price-todo{
  display:inline-block;background:var(--warn-bg);color:var(--warn);
  border:1.5px dashed var(--warn);border-radius:6px;padding:2px 10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;
  letter-spacing:.02em;white-space:nowrap;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:620px){
  :root{--sp:62px}
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .hero{padding:48px 0 56px}
  .phase-card,.proof-card,.sample{padding:22px 20px}
  .fit-col{padding:24px 20px}
  .pricecard-top{padding:26px 22px 24px}
  .pricecard-body{padding:24px 22px 26px}
  .toc-row{padding:16px 18px;gap:14px}
  .modal{padding:0}
  .modal-box{margin:0;border-radius:0;min-height:100vh;max-width:none}
  .bundle-card{padding:26px 20px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .cover-mock img{transform:none}
}

@media print{
  .sticky,.modal,.site-head{display:none !important}
}