/* =========================================================
   lp_bukutop_1.css — LP Bukutop 1 — Warm Coral (gabungan base + layout + fixed accents)
   ========================================================= */

/* ---------- Design system (komponen dipakai LP) ---------- */
/* Judul & subjudul */
.judul-blok { text-align: center; width: 100%; max-width: 100%; box-sizing: border-box; }
.judul-eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: clamp(11.5px, 3cqi, 13px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.judul {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(28px, 9.5cqi, 42px);
  line-height: 1.05; letter-spacing: -.03em;
  color: var(--text); margin: 0 0 14px;
  position: relative; z-index: 1;
}
.subjudul {
  font-family: var(--font-body); font-size: clamp(18px, 5cqi, 21px);
  font-weight: 700; line-height: 1.55; color: var(--text-dim);
  max-width: 480px; margin: 0 auto; font-style: italic;
}
.hl-blok { background: var(--accent); color: var(--on-accent); padding: 2px 12px; border-radius: 8px; display: inline-block; box-shadow: 0 4px 14px var(--accent-soft); }
.typo-gradien h1, .typo-gradien h2 { background: linear-gradient(110deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tombol {
  font-family: var(--font-body); font-weight: 600; font-size: clamp(14px, 3.8cqi, 15px);
  padding: 12px 24px; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-text);
  border: var(--btn-border); border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: transform .14s, box-shadow .2s, background .2s;
}
.tombol:hover { transform: var(--btn-hover-t); box-shadow: var(--btn-hover-shadow); }
.tombol:active { transform: var(--btn-active-t); box-shadow: var(--btn-active-shadow); }
.lencana {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: clamp(11.5px, 3cqi, 13px); font-weight: 600;
  padding: 5px 13px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
}
.lencana.soft { background: var(--lp-pop-soft); color: var(--lp-pop); border: 1px solid var(--lp-pop-edge); }
.kartu {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--surface); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  padding: 26px; width: 100%; box-sizing: border-box; min-width: 0; font-family: var(--font-body);
  transition: transform .2s, box-shadow .2s;
}
.kartu:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.kartu h3 { font-family: var(--font-head); font-size: clamp(17px, 4.8cqi, 19px); color: var(--text); margin: 0 0 6px; }
.kartu p { color: var(--text-dim); font-size: clamp(13px, 3.5cqi, 14px); line-height: 1.6; margin: 0; }
.kartu-kertas {
  border-radius: var(--radius); padding: 16px 20px;
  width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; font-family: var(--font-body);
  box-shadow: var(--shadow); color: var(--text);
}
.kartu-kertas .baris { padding: 0; color: var(--text); display: flex; align-items: flex-start; }
.kertas-bg-surface { background-color: var(--surface); border: var(--border); }
.kertas-garis-standar {
  background-image: repeating-linear-gradient(transparent, transparent 31px, color-mix(in srgb, var(--line) 60%, transparent) 31px, color-mix(in srgb, var(--line) 60%, transparent) 32px);
  background-size: 100% 32px; background-position: 0 12px;
}
.kertas-garis-standar .baris { line-height: 32px; font-size: clamp(13px, 3.5cqi, 15px); }
.artikel {
  background: var(--surface); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  padding: 30px; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; font-family: var(--font-body);
}
.artikel h3 { font-family: var(--font-head); font-size: clamp(19px, 5.5cqi, 22px); color: var(--text); margin: 0 0 12px; }
.artikel p { color: var(--text-dim); font-size: clamp(14px, 4cqi, 15.5px); line-height: 1.75; margin: 0 0 14px; }
.artikel p:last-child { margin-bottom: 0; }
.fig-gambar { margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.fig-gambar img { width: 100%; height: auto; display: block; object-fit: cover; }
.img-offset { border: 2.5px solid var(--text); border-radius: var(--radius-sm); overflow: hidden; }
.testi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; max-width: 100%; box-sizing: border-box; }
.testi {
  background: var(--surface); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  padding: 28px; width: 100%; box-sizing: border-box; min-width: 0; font-family: var(--font-body);
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.testi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.testi::before {
  content: "\201c"; position: absolute; top: -10px; right: 10px;
  font-size: 120px; font-family: serif; font-weight: 900;
  color: var(--text-dim); opacity: 0.08; line-height: 1; pointer-events: none;
}
.testi .bintang { color: var(--accent); font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.testi blockquote { margin: 0 0 20px; font-size: clamp(15px, 4.2cqi, 17px); line-height: 1.6; color: var(--text); font-style: italic; }
.testi .orang { display: flex; align-items: center; gap: 13px; }
.testi .ava {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-head); flex: none;
}
.testi .nama { font-weight: 600; color: var(--text); font-size: clamp(14px, 4cqi, 16px); }
.testi .peran { font-size: clamp(12.5px, 3.2cqi, 13px); color: var(--text-dim); }
.bonus-wrap { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 100%; box-sizing: border-box; font-family: var(--font-body); align-items: center; }
.bonus-header { text-align: center; }
.bonus-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
  font-size: 13px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.bonus-title { font-family: var(--font-head); font-size: clamp(20px, 6cqi, 26px); color: var(--text); margin: 0; line-height: 1.3; font-weight: 700; }
.bonus-card { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; width: 100%; }
.bonus-img { width: 100%; height: 220px; border-bottom: 1px solid var(--line); overflow: hidden; position: relative; background: color-mix(in srgb, var(--text) 5%, transparent); }
.bonus-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bonus-ribbon { position: absolute; top: 24px; right: -42px; z-index: 2; background: var(--accent); color: var(--on-accent); width: 170px; text-align: center; padding: 6px 0; font-family: var(--font-head); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; transform: rotate(45deg); pointer-events: none; }
.bonus-content { padding: 32px 24px; text-align: center; color: var(--text-dim); font-size: clamp(14px, 4cqi, 15px); line-height: 1.6; }
.bonus-content p { margin: 0; }
.bonus-list { list-style: none; margin: 22px auto; display: flex; flex-direction: column; gap: 10px; text-align: left; background: color-mix(in srgb, var(--text) 3%, transparent); border-radius: var(--radius-sm); padding: 18px 24px; border: 1px solid var(--line); width: 100%; max-width: 320px; box-sizing: border-box; }
.bonus-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: clamp(13px, 3.6cqi, 14.5px); font-weight: 500; line-height: 1.4; }
.bonus-footer { margin-top: 22px; font-size: clamp(13.5px, 3.8cqi, 14.5px); padding-top: 18px; border-top: 1px dashed var(--line); }
.bonus2-list { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 100%; box-sizing: border-box; font-family: var(--font-body); }
.bonus2-card { display: flex; gap: 20px; align-items: stretch; background: var(--surface); border: var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.bonus2-img { flex: none; width: 90px; height: 125px; border-radius: 3px 10px 10px 3px; overflow: hidden; background: var(--accent-soft); position: relative; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.bonus2-img img { width: 100%; height: 100%; object-fit: cover; }
.bonus2-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.b2-label { font-size: clamp(11px, 3cqi, 12px); font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.b2-title { font-family: var(--font-head); font-size: clamp(16px, 4.8cqi, 18px); color: var(--text); margin: 0 0 8px; font-weight: 700; line-height: 1.3; }
.b2-desc { font-size: clamp(13px, 3.6cqi, 14px); color: var(--text-dim); line-height: 1.55; margin: 0 0 16px; }
.btn-melayang {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: clamp(14px, 4cqi, 16px);
  padding: 16px 28px; border-radius: 0; box-sizing: border-box;
  background: var(--accent); color: var(--on-accent); border: none;
  cursor: pointer; transition: background .2s, box-shadow .2s;
}

/* ---------- Layout & LP ---------- */
/* ---------- Palette 5 level (setup $color1..$color5) ----------
   c1 gelap → c2 master → c3 terang → c4 paling terang → c5 pop/aksen
   PHP inject --lp-c1..c5; semantic token dihitung di sini.
*/
:root,
.lp-page {
  --lp-content-max: 500px;

  /* Identitas template 1 */
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --blur: blur(0px);
  --btn-radius: 14px;

  /* Default palette — di-override inline #lp-bukutop-1-colors jika setup terisi */
  --lp-c1: #3d2b26;
  --lp-c2: #ff6b5e;
  --lp-c3: #f5e3da;
  --lp-c4: #fff5f0;
  --lp-c5: #ffa94d;

  /* Role tokens (turunan 5 level: c1 ink → c2 brand → c3 tint → c4 paper → c5 pop) */
  --lp-ink: var(--lp-c1);
  --lp-brand: var(--lp-c2);
  --lp-tint: var(--lp-c3);
  --lp-paper: var(--lp-c4);
  --lp-pop: var(--lp-c5);
  --lp-pop-soft: color-mix(in srgb, var(--lp-c5) 16%, transparent);
  --lp-pop-wash: color-mix(in srgb, var(--lp-c5) 9%, var(--lp-c4));
  --lp-pop-edge: color-mix(in srgb, var(--lp-c5) 28%, var(--lp-c3));
  --lp-pop-glow: color-mix(in srgb, var(--lp-c5) 22%, transparent);
  --lp-gradient-brand: linear-gradient(110deg, var(--lp-c2), var(--lp-c5));
  --lp-gradient-brand-v: linear-gradient(180deg, var(--lp-c2), var(--lp-c5));
  --lp-band: color-mix(in srgb, var(--lp-c3) 34%, color-mix(in srgb, var(--lp-c5) 7%, var(--lp-c4)));
  --lp-wash: color-mix(in srgb, var(--lp-c2) 7%, color-mix(in srgb, var(--lp-c5) 5%, var(--lp-c4)));
  --lp-soft: color-mix(in srgb, var(--lp-c2) 10%, color-mix(in srgb, var(--lp-c5) 6%, transparent));
  --lp-muted: color-mix(in srgb, var(--lp-c1) 58%, var(--lp-c3));
  --lp-edge: color-mix(in srgb, var(--lp-c3) 72%, var(--lp-c1) 14%);

  /* Semantic map */
  --text: var(--lp-ink);
  --text-dim: var(--lp-muted);
  --accent: var(--lp-brand);
  --accent-2: var(--lp-c5);
  --accent-soft: var(--lp-soft);
  --on-accent: #ffffff;
  --line: var(--lp-tint);
  --border: none;
  --canvas: var(--lp-paper);
  --surface: #ffffff;

  --shadow: 0 10px 32px -18px color-mix(in srgb, var(--lp-c2) 35%, transparent);
  --shadow-lg: 0 14px 40px -16px color-mix(in srgb, var(--lp-c2) 42%, transparent);

  --btn-bg: var(--lp-gradient-brand);
  --btn-text: #ffffff;
  --btn-border: none;
  --btn-shadow: 0 12px 26px -12px color-mix(in srgb, var(--lp-c5) 50%, var(--lp-c2));
  --btn-hover-t: translateY(-1px);
  --btn-hover-shadow: 0 16px 32px -12px color-mix(in srgb, var(--lp-c5) 58%, transparent);
  --btn-active-t: translateY(0);
  --btn-active-shadow: none;
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--lp-ink);
  --btn-ghost-border: 1px solid var(--lp-ink);

  /* Fixed accents */
  --lp-fix-warm-bg: #fff8e6;
  --lp-fix-warm-border: #f0c96e;
  --lp-fix-warm-text: #7a4f01;
  --lp-fix-success-bg: #ecfdf3;
  --lp-fix-success-border: #86efac;
  --lp-fix-success-text: #166534;
  --lp-fix-info-bg: #eff6ff;
  --lp-fix-info-border: #93c5fd;
  --lp-fix-info-text: #1e40af;
  --lp-fix-input-border: #64748b;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--canvas);
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--lp-brand) 14%, transparent), transparent 42%),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--lp-tint) 60%, transparent), transparent 44%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; color: var(--text); }
u { text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
b, strong { font-weight: 700; color: inherit; }

/* ---------- Shell / layout ---------- */
.home-container,
.lp-page {
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
  container-name: lp;
}

.home-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.section-container,
.home-hero,
.home-portofolio,
.home-portofolio01,
.home-portofolio02,
.home-portofolio04,
.home-portofolio05,
.home-portofolio06,
.home-portofolio07,
.home-portofolio08,
.home-portofolio09,
.home-portofolio10,
.home-portofolio11,
.home-container2,
.home-container4,
.home-container5,
.home-container6,
.home-container7,
.home-container8,
.home-features,
.home-features01,
.home-features03,
.home-features04,
.home-features05,
.home-features06,
.home-features07,
.home-features08,
.home-features09,
.home-features12,
.home-features13,
.home-pricing {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-container,
.home-portofolio,
.home-portofolio01,
.home-portofolio02,
.home-portofolio04,
.home-portofolio05,
.home-portofolio06,
.home-portofolio07,
.home-portofolio08,
.home-portofolio11,
.home-container2,
.home-container4,
.home-container5,
.home-container6,
.home-container7 {
  padding: 48px 20px;
}

.home-portofolio01.section-container {
  padding-top: 20px;
  padding-bottom: 16px;
}


.max-content-container,
.home-max-width,
.home-max-width1,
.max-width-550,
.max-width-500,
.max-width-450,
.max-width-420,
.home-portofolio09,
.home-portofolio10,
.home-features,
.home-features01,
.home-features03,
.home-features04,
.home-features05,
.home-features06,
.home-features07,
.home-features08,
.home-features09,
.home-features10,
.home-features12,
.home-features13,
.home-text015,
.home-text033,
.home-text047,
.home-text126,
.home-text142,
.home-text175,
.home-pricing,
.home-container1,
.home-container2,
.home-container3,
.bonus-wrap,
.sipnosis-box,
.aman-bayar-box,
.catatan-box,
.action-box,
.cod-ongkir-note,
.cod-ongkir-wrap,
.garansi-box-lp,
.surat-bayangkan,
.div_form,
.mid-produk,
.accordion,
.ebook-bonus-list,
.title_2,
.home-text030 {
  width: 100%;
  max-width: var(--lp-content-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.bg_color10 {
  background: color-mix(in srgb, var(--lp-band) 82%, var(--lp-pop-wash));
  border-top: 1px solid var(--lp-pop-edge);
  border-bottom: 1px solid var(--lp-pop-edge);
}

.bg_white {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Top bar ---------- */
.navigation-max-width {
  width: 100%;
  background: var(--lp-gradient-brand);
  color: var(--surface);
  padding: 10px 16px;
  text-align: center;
}

.navigation-text {
  font-family: var(--font-body);
  font-size: clamp(11px, 2.9cqi, 12.5px);
  font-weight: 600;
  letter-spacing: .02em;
  display: inline;
  white-space: normal;
}

.navigation-text b,
.navigation-text strong {
  color: inherit;
  font-weight: 800;
}

/* ---------- Hero ---------- */
.home-hero {
  padding: 36px 20px 0;
  gap: 18px;
}

.bintang {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.judul-blok.bintang {
  gap: 20px;
}

.home-heading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--lp-content-max);
}

.title_1,
.judul.title_1,
.home-heading-container h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 11cqi, 52px);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--text);
  margin: 0;
}

.title_1 b,
.home-heading-container h1 b,
.home-heading-container.typo-gradien .judul,
.home-heading-container.typo-gradien h1 {
  background: linear-gradient(110deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.under_tagline {
  font-family: var(--font-body);
  font-size: clamp(18px, 5cqi, 21px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: var(--lp-content-max);
  font-style: italic;
}

.home-image,
.home-image03,
.home-image07 {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  background: var(--surface);
}

.home-image22,
.home-image24,
.img_radius,
.img_border,
.bg_produk {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--surface);
}

/* Gambar produk — border saja, tanpa shadow offset */
.fig-gambar.img-offset,
.offer-produk.img-offset {
  box-shadow: none;
  transition: none;
}

.fig-gambar.img-offset:hover,
.offer-produk.img-offset:hover {
  transform: none;
  box-shadow: none;
}

.fig-gambar.img-offset img,
.offer-produk.img-offset img,
.mid-produk img,
.mid-produk .home-image03,
.mid-produk .home-image07 {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.home-image01 {
  max-width: 280px;
  margin: 8px auto 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* CTA buttons (map lama → gaya .tombol) */
.home-link,
.home-link3,
.home-link4,
.button-lg,
.button-lg-2,
.orderviawa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14px, 3.8cqi, 16px);
  padding: 14px 26px;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: transform .14s, box-shadow .2s, background .2s;
  text-decoration: none;
  width: auto;
  max-width: 100%;
}

.home-link:hover,
.home-link3:hover,
.home-link4:hover,
.button-lg:hover,
.button-lg-2:hover,
.orderviawa:hover {
  transform: var(--btn-hover-t);
  box-shadow: var(--btn-hover-shadow);
}

.home-link:active,
.home-link3:active,
.home-link4:active,
.button-lg:active,
.button-lg-2:active {
  transform: var(--btn-active-t);
  box-shadow: var(--btn-active-shadow);
}

.home-text011 { color: inherit; font-weight: 700; }

/* Wave divider → garis aksen tipis */
#wave { display: none !important; }

.lp-wave {
  width: min(var(--lp-content-max), 92%);
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}

/* ---------- Section titles ---------- */
.title_2,
.home-text012,
.home-text030,
.home-text051,
.home-text123,
.home-text139,
.eksklusif {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 7cqi, 32px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 auto 18px;
  width: 100%;
  max-width: var(--lp-content-max);
  box-sizing: border-box;
}

.home-text013,
.home-text031 {
  position: relative;
  display: inline-block;
}

.home-text018 {
  background: var(--accent);
  color: var(--on-accent);
  padding: 2px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 14px var(--accent-soft);
}

.home-text020 {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(30px, 9cqi, 44px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 8px 0 12px;
  text-align: center;
}

.home-text022,
.home-text015,
.home-text033,
.home-text040,
.home-text047,
.home-text048,
.home-text049,
.home-text126,
.home-text142,
.home-text143,
.home-text152,
.home-text155,
.home-text156,
.home-text181,
.home-text061,
.home-text072,
.home-text082 {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 4cqi, 16px);
  line-height: 1.65;
  color: var(--text-dim);
}

.home-text016 {
  font-size: clamp(15px, 4.2cqi, 17px);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}


/* Subjudul buku — highlight mengikuti teks, bukan kotak */
.home-text021-wrap {
  display: block;
  width: 100%;
  max-width: var(--lp-content-max, 500px);
  margin: 0 auto 12px;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.home-text021 {
  display: inline;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.12em 0.28em;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: clamp(17px, 4.8cqi, 19px);
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  color: var(--lp-c1, var(--text));
  background: color-mix(in srgb, var(--lp-c3, #e5e7eb) 72%, var(--lp-c4, #f3f4f6));
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.home-text022 {
  font-size: 13px;
  opacity: .8;
  margin-bottom: 14px;
}

/* Sipnosis — box + rata kiri */
.sipnosis-box,
.home-text023.artikel {
  text-align: left !important;
  margin-top: 18px;
  margin-bottom: 0;
}

.sipnosis-box h3,
.home-text023.artikel h3 {
  text-align: left;
  margin: 0 0 12px;
}

.sipnosis-isi,
.sipnosis-box p,
.home-text023.artikel p,
.home-text023.sipnosis-box,
.home-text023.artikel .sipnosis-isi {
  text-align: left !important;
  color: var(--lp-c1); /* color1 — teks sinopsis lebih jelas */
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.2;
}

.sipnosis-isi b,
.sipnosis-isi strong {
  color: var(--lp-c1);
  font-weight: 700;
}

/* Box jaminan bayar aman */
.aman-bayar-box {
  text-align: center;
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto -10px;
  padding: 16px 14px 14px;
  background: var(--lp-wash);
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius);
  box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--accent) 35%, transparent);
  position: relative;
}

.aman-bayar-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border-radius: 999px;
  border: 2.5px solid var(--text);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--text);
}

.aman-bayar-badge {
  display: inline-block;
  margin: 0 auto 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lp-gradient-brand);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.aman-bayar-box h3 {
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(20px, 5.8cqi, 26px);
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text);
}

.aman-bayar-box p {
  text-align: center;
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: clamp(14px, 4cqi, 15.5px);
  line-height: 1.7;
}

.aman-bayar-box p b,
.aman-bayar-box p strong {
  color: var(--text);
}

.aman-bayar-wa {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-sm);
}

.aman-bayar-box p:last-child {
  margin-bottom: 0;
}

.aman-bayar-cta {
  margin-top: 10px !important;
  text-align: center !important;
}

.aman-bayar-cta .tombol {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.home-container2 {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
}

.home-portofolio04 .home-text047 {
  margin: 8px auto 28px;
}

.home-portofolio04 .mid-produk {
  margin: 0 auto 4px;
}

.home-portofolio04.section-container {
  padding-bottom: 0;
}

/* Catatan Penting — highlight kuning tetap  */
.artikel.catatan-box,
.catatan-box {
  text-align: center;
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto 32px;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.catatan-box .section-mark {
  width: 56px;
  height: 56px;
  font-size: 26px;
  margin-bottom: 6px;
}

.action-box {
  text-align: center;
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
}

.catatan-box h3,
.action-box h3,
.catatan-box .home-text123,
.action-box .home-text139 {
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(20px, 6cqi, 26px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 8px;
}

.catatan-box .home-text126,
.catatan-box p {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(14.5px, 4cqi, 16px);
  line-height: 1.65;
  margin: 0;
}

.action-box .home-text142,
.action-box .home-text143,
.action-box p {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(14.5px, 4cqi, 16px);
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0;
}

.action-box .home-text143 {
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 600;
}

.home-portofolio08 {
  gap: 6px;
}

.home-portofolio08.section-container {
  padding-top: 8px;
  padding-bottom: 12px;
}

.home-portofolio09,
.home-portofolio10 {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

/* Bisa COD + Gratis Ongkir — teks pendukung konversi */
.cod-ongkir-wrap {
  text-align: center;
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 12px auto 0;
}

.cod-ongkir-note-title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(17px, 4.8cqi, 20px);
  font-weight: 800;
  line-height: 1.3;
}

.cod-ongkir-note-title strong {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--lp-fix-warm-bg, #fff8e6);
  color: var(--lp-fix-warm-text, #7a4f01);
  border: 1px solid var(--lp-fix-warm-border, #f0c96e);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--lp-fix-warm-border, #f0c96e) 45%, transparent);
  letter-spacing: .01em;
}

.cod-ongkir-note {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 14px;
  background: transparent !important;
  border: 1px solid var(--lp-fix-warm-border, #f0c96e) !important;
  border-radius: var(--radius-sm);
  box-shadow: none !important;
}

.cod-ongkir-note-text {
  margin: 0 auto 14px;
  font-family: var(--font-body);
  font-size: clamp(14px, 3.8cqi, 15.5px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 420px;
}

.cod-ongkir-note-text b,
.cod-ongkir-note-text strong {
  color: var(--text);
  font-weight: 700;
}

.cod-ongkir-note-text u {
  text-decoration-color: var(--accent);
}

.cod-ongkir-note-points {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: clamp(13.5px, 3.7cqi, 15px);
  line-height: 1.4;
}

.cod-ongkir-note-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  text-align: left;
  color: var(--text);
  font-weight: 600;
}

.cod-ongkir-check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--accent);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--text);
}

.home-container6 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.home-container6.section-container:has(.cod-ongkir-note) {
  padding-top: 28px;
  padding-bottom: 12px;
}

.home-container6.section-container:has(.garansi-box-lp) {
  padding-top: 12px;
  padding-bottom: 24px;
}

/* Surat Bayangkan */
.home-container7.bg_color10,
.home-features12 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Surat Bayangkan — letter card matching design tokens ---------- */
.surat-bayangkan {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto 20px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0 4px;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

.surat-bayangkan::before {
  display: none;
}

.surat-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-align: center;
}

.surat-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2.5px solid var(--text);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--text);
}

.surat-eyebrow {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.surat-kop {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 14px;
  padding: 0 4px;
}

.surat-stempel,
.surat-bayangkan .home-image28,
img[src*="love-200h"] {
  display: none !important;
}

.surat-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.surat-dari {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(16px, 4.5cqi, 19px);
  color: var(--text);
}

.surat-tanggal {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}

.surat-bayangkan .kartu-kertas.surat-isi,
.surat-isi,
.surat-isi.home-text184 {
  text-align: left !important;
  font-family: var(--font-body);
  font-size: clamp(14.5px, 4cqi, 16px);
  line-height: 32px !important;
  color: var(--text);
  margin: 0 0 18px;
  font-style: italic;
  background-color: #ffffff !important;
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  padding: 14px 18px 16px !important;
  /* garis kertas pakai accent soft, bukan kuning krem */
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    color-mix(in srgb, var(--accent) 18%, transparent) 31px,
    color-mix(in srgb, var(--accent) 18%, transparent) 32px
  ) !important;
  background-size: 100% 32px !important;
  background-position: 0 12px !important;
}

.surat-isi b,
.surat-isi strong {
  color: var(--text);
  font-weight: 700;
  font-style: italic;
}

.surat-isi u {
  color: var(--accent);
  text-decoration-color: var(--accent);
  font-style: italic;
}

.surat-ttd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 12px 10px 4px;
  margin-top: 2px;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line));
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
}

.surat-ttd strong {
  font-family: var(--font-head);
  font-style: normal;
  font-size: 17px;
  font-weight: 800;
  color: var(--accent);
}

.surat-note {
  text-align: center;
  margin: 10px 0 0;
}

.home-features12 .home-link4,
.home-features12 .tombol {
  margin-top: 4px;
}

/* Bonus #1–#3 */
.home-portofolio05,
.home-portofolio06,
.home-portofolio07 {
  align-items: center;
}

.bonus-wrap {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
}

.img-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Panah scribble melengkung — tanpa border */
.scribble-arrow {
  display: block;
  width: 44px;
  height: 80px;
  margin: 0 auto 12px;
  color: var(--accent);
  background: none;
  border: none;
  box-shadow: none;
  animation: scribble-bounce 1.4s ease-in-out infinite;
}

.scribble-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.scribble-arrow--after-ya {
  margin-top: 12px;
  margin-bottom: -20px;
}

.home-hero > .home-portofolio.section-container {
  padding-bottom: 12px;
}

@keyframes scribble-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .scribble-arrow { animation: none; }
}

.home-features10 {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bonus-wrap .bonus-header {
  margin-bottom: 8px;
}

.bonus-wrap .bonus-title {
  font-size: clamp(18px, 5.5cqi, 24px);
  text-align: center;
}

.bonus-wrap .bonus-card {
  text-align: center;
  max-width: 400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.bonus-wrap .bonus-content h3,
.bonus-wrap .home-text062,
.bonus-wrap .home-text083,
.bonus-wrap .home-text108 {
  font-family: var(--font-head);
  font-size: clamp(18px, 5.2cqi, 22px);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.3;
}

.bonus-wrap .bonus-content p,
.bonus-wrap .home-text072,
.bonus-wrap .home-text093,
.bonus-wrap .home-text118 {
  text-align: center;
  color: var(--text-dim);
  font-size: clamp(14px, 4cqi, 15.5px);
  line-height: 1.65;
  margin: 0;
}

.bonus-wrap .bonus-list {
  text-align: left;
}

.bonus-wrap .bonus-img img,
.bonus-wrap .home-image14,
.bonus-wrap .home-image15,
.bonus-wrap .home-image17 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- Problem / list cards ---------- */
.pertanyaanproblem-feature-card,
.listdetail-feature-card,
.div_manfaat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: var(--lp-content-max);
  text-align: left;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin: 0 0 12px;
  transition: transform .2s, box-shadow .2s;
}

.pertanyaanproblem-feature-card:hover,
.listdetail-feature-card:hover,
.div_manfaat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.pertanyaanproblem-text,
.listdetail-text,
.div_manfaat > span:not([class]) {
  font-family: var(--font-body);
  font-size: clamp(13px, 3.5cqi, 14.5px);
  line-height: 1.55;
  color: var(--text-dim);
}

/* Judul item (dipelajari / manfaat) lebih besar; keterangan tetap kecil */
.listdetail-text b,
.listdetail-text strong,
.div_manfaat > span:not([class]) b,
.div_manfaat > span:not([class]) strong {
  display: block;
  font-size: clamp(16px, 4.5cqi, 19px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 5px;
}

/* Problem list tetap ukuran seragam (bukan hierarki judul+ket) */
.pertanyaanproblem-text {
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
}

.listdetail-image,
.listdetail2-image {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Icon list pertanyaan — karakter, bukan gambar */
.problem-mark {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--text);
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--text);
  margin-top: 1px;
}

/* Checklist CSS — "Yang Anda Dipelajari" */
.check-mark {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--text);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--text);
  margin-top: 1px;
}

/* Icon list manfaat — beda dari checklist dipelajari */
.manfaat-mark,
.div_manfaat .manfaat-mark {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--accent);
  color: #ffffff; /* putih — kontras di lingkaran gelap; jangan --text/c1 */
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--text);
  margin-top: 1px;
}

.page, .content {
  width: 100%;
  max-width: var(--lp-content-max);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Pricing: detail buku + penawaran harga terpisah ---------- */
.home-container4 {
  padding-top: 24px;
}

.offer-wrap {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

/* Detail buku — tenang, terpisah */
.offer-detail {
  width: 100%;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-sizing: border-box;
}

.offer-detail-title {
  margin: 4px 0 0;
  font-family: var(--font-head);
  font-size: clamp(18px, 5cqi, 22px);
  font-weight: 800;
  color: var(--text);
}

.offer-produk {
  width: min(100%, 220px);
  margin: 0 auto;
}

.offer-produk img,
.offer-detail .home-image24,
.home-pricing .home-image24 {
  width: 100%;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Penawaran harga — nendang, berdiri sendiri */
.home-pricing,
.offer-deal {
  width: 100%;
  background: var(--text);
  color: var(--surface);
  border: 3px solid var(--text);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 30px 20px 26px;
  gap: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.offer-deal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 42%),
    radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--lp-c5) 30%, transparent), transparent 45%),
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--lp-c5) 10%, transparent), transparent 55%);
  pointer-events: none;
}

.offer-deal > * {
  position: relative;
  z-index: 1;
}

.offer-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.offer-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2.5px solid var(--surface);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 26px;
  line-height: 1;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 40%, #000);
  animation: offer-pulse 1.6s ease-in-out infinite;
}

@keyframes offer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .offer-badge { animation: none; }
}

.home-text151 {
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--lp-gradient-brand);
  border-radius: 999px;
  padding: 7px 16px;
}

.home-text152 {
  font-family: var(--font-head);
  font-size: clamp(28px, 8cqi, 38px);
  font-weight: 800;
  color: var(--surface);
  margin: 0;
  line-height: 1.1;
}

.offer-price-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(14.5px, 4cqi, 16px);
  font-weight: 600;
  color: color-mix(in srgb, var(--surface) 78%, transparent);
}

.offer-price-sub u {
  color: var(--lp-c5);
  text-decoration-color: var(--lp-c5);
}

.offer-price-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
}

.offer-price-old,
.offer-price-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.offer-arrow-down {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  animation: scribble-bounce 1.4s ease-in-out infinite;
}

.offer-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--surface) 55%, transparent);
}

.offer-label--promo {
  color: var(--lp-c5);
}

.home-text155 {
  margin: 0;
  color: color-mix(in srgb, var(--surface) 70%, transparent);
}

.home-text159 {
  font-family: var(--font-head);
  font-size: clamp(22px, 6cqi, 28px);
  font-weight: 700;
  color: #ffffff;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: color-mix(in srgb, #ffffff 70%, #ef4444);
}

.home-text161 {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: color-mix(in srgb, var(--surface) 70%, transparent);
}

.home-text165 {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--font-head);
  font-size: clamp(48px, 14cqi, 64px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: #ffffff;
  background: var(--lp-gradient-brand);
  border: 3px solid var(--surface);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--lp-c5) 35%, transparent);
  padding: 14px 22px 12px;
}

.offer-currency {
  font-size: .38em;
  font-weight: 800;
  letter-spacing: 0;
  margin-right: 2px;
  color: #ffffff;
}

.offer-save {
  display: inline-flex;
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--lp-c5);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Countdown */
.offer-timer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--surface) 22%, transparent);
}

.offer-timer-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--surface) 60%, transparent);
}

#countdown,
.offer-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--accent);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.cd-unit {
  min-width: 68px;
  padding: 12px 8px 10px;
  background: color-mix(in srgb, var(--surface) 8%, transparent);
  border: 2px solid color-mix(in srgb, var(--lp-c5) 45%, var(--surface));
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--lp-c5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.cd-num {
  font-size: clamp(26px, 7.5cqi, 34px);
  font-weight: 800;
  line-height: 1;
  color: var(--surface);
  font-variant-numeric: tabular-nums;
}

.cd-lab {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--surface) 55%, transparent);
}

.cd-sep {
  font-size: 24px;
  font-weight: 800;
  color: var(--lp-c5);
  padding-bottom: 14px;
}

.div_time {
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--surface) 70%, transparent);
  max-width: 34em;
  margin: 2px 0 0;
}

.div_time b {
  color: var(--surface);
}

.offer-cta {
  margin-top: 8px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
  background: var(--lp-gradient-brand) !important;
  color: var(--on-accent) !important;
  border: 2.5px solid var(--surface) !important;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--lp-c5) 35%, transparent);
}

.offer-cta:hover {
  transform: translateY(-2px);
}

.table_buku {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin: 0;
  font-family: var(--font-body);
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 2%, var(--surface));
  box-shadow: none;
}

.table_buku td {
  padding: 10px 12px;
  font-size: clamp(12.5px, 3.4cqi, 14px);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.table_buku td:first-child {
  width: 38%;
  color: var(--text-dim);
  font-weight: 600;
}

.table_buku tr:nth-child(even) td {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.table_buku tr:last-child td { border-bottom: none; }

/* ---------- Bonus blocks ---------- */
.home-text062,
.home-text083,
.home-portofolio07 h1 {
  font-family: var(--font-head);
  font-size: clamp(20px, 6cqi, 26px);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}

.home-text051 .home-text052,
.home-text060 {
  color: var(--accent);
  font-weight: 800;
}

.home-image14,
.home-image15,
.home-image17 {
  margin: 0 auto 14px;
}

.home-container3 {
  text-align: left;
  width: 100%;
  max-width: var(--lp-content-max);
}

/* ---------- Testimonials — modern review cards ---------- */
.home-portofolio11.section-container {
  padding-top: 12px;
  padding-bottom: 16px;
}

.lp-testi-section > .scribble-arrow {
  margin-top: 0;
  margin-bottom: 8px;
}

.lp-testi-section {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lp-testi-section .home-text175 {
  text-align: center;
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto 18px;
}

.lp-testi-section .home-text177 {
  background: var(--accent);
  color: var(--on-accent);
  padding: 2px 10px;
  border-radius: 8px;
  display: inline-block;
}

.lp-testi-grid {
  width: 100%;
  gap: 14px;
  margin-top: 8px;
}

.lp-testi.testi,
.lp-testi {
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--accent);
  padding: 24px 22px 20px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}

.lp-testi:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--accent);
}

.lp-testi::before {
  content: "“";
  position: absolute;
  top: -8px;
  right: 12px;
  font-family: var(--font-head);
  font-size: 110px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: .18;
  pointer-events: none;
}

.lp-testi .bintang {
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  line-height: 1;
}

.lp-testi blockquote {
  margin: 0 0 18px;
  padding: 0;
  border: none;
  font-family: var(--font-body);
  font-size: clamp(15px, 4.2cqi, 17px);
  font-style: italic;
  line-height: 1.65;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.lp-testi .orang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  position: relative;
  z-index: 1;
}

.lp-testi .ava {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 2px 2px 0 var(--text);
  flex: none;
}

.lp-testi .nama {
  font-weight: 700;
  color: var(--text);
  font-size: clamp(14px, 4cqi, 15.5px);
}

.lp-testi .peran {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ---------- FAQ accordion ---------- */
.accordion {
  width: 100%;
  max-width: var(--lp-content-max);
  text-align: left;
  font-family: var(--font-body);
}

.accordion-item {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
}

.accordion-header {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  color: var(--text);
  font-size: clamp(14.5px, 4.2cqi, 16px);
}

.accordion-icon {
  color: var(--accent);
  font-size: 22px;
  transition: transform .2s;
  line-height: 1;
}

.accordion-content {
  display: none;
  padding: 0 20px 18px;
  color: var(--text-dim);
  font-size: clamp(13.5px, 3.8cqi, 15px);
  line-height: 1.6;
}

/* ---------- Footer ---------- */
.home-container8 {
  padding: 32px 20px 40px;
  background: var(--text);
  color: color-mix(in srgb, var(--surface) 88%, transparent);
  text-align: center;
}

.home-container8 h3,
.home-text214 h3 {
  font-family: var(--font-head);
  color: var(--surface);
  margin: 0 0 10px;
}

.home-text213,
.home-container8 small {
  color: color-mix(in srgb, var(--surface) 75%, transparent);
  font-size: 14px;
  line-height: 1.6;
}

.home-container8 .orderviawa {
  margin-top: 8px;
  margin-bottom: 0;
}

/* ---------- Sticky CTA → gaya .btn-melayang ---------- */
.link_button,
.btn-melayang {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14px, 4cqi, 16px);
  padding: 16px 28px;
  border-radius: 0;
  box-sizing: border-box;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  box-shadow: 0 -4px 20px var(--accent-soft), 0 -2px 10px rgba(0,0,0,.15);
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
  text-decoration: none;
}

.link_button:hover,
.btn-melayang:hover {
  background: var(--accent-2);
  transform: none;
  box-shadow: 0 -6px 25px var(--accent-soft), 0 -4px 15px rgba(0,0,0,.2);
}

.blink {
  animation: lp-blink 1.4s ease-in-out infinite;
}

@keyframes lp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ---------- Social proof toast (modern) ---------- */
.popup_user-container {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
  width: min(400px, calc(100vw - 24px));
  max-width: min(400px, calc(100vw - 24px));
  box-sizing: border-box;
}

.popup_user {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 13px;
  background: linear-gradient(135deg, #fffbeb 0%, #fff3cd 58%, #ffe8a3 100%);
  background-color: #fff3cd;
  border: 1.5px solid #f0c96e;
  border-radius: 16px;
  box-shadow:
    0 2px 6px color-mix(in srgb, #f0c96e 35%, transparent),
    0 12px 28px -8px color-mix(in srgb, #e8a317 28%, transparent);
  color: #5c4a1f;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px) scale(.96);
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1), transform .4s cubic-bezier(.22, 1, .36, 1), visibility .4s;
  overflow: visible;
  position: relative;
}

.popup_user::before {
  display: none;
}

.popup_user.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Icon kotak — tas belanja CSS murni */
.popup_user .pu-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--lp-gradient-brand);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--lp-c5) 42%, transparent);
}

.popup_user .pu-icon-mark {
  display: block;
  width: 22px;
  height: 22px;
  position: relative;
}

.popup_user .pu-icon-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  width: 16px;
  height: 11px;
  border: 2.5px solid #fff;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
}

.popup_user .pu-icon-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  transform: translateX(-50%);
  width: 9px;
  height: 7px;
  border: 2.5px solid #fff;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  box-sizing: border-box;
}

.popup_user .pu-icon-live {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #fffbeb;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f0c96e 45%, transparent);
  animation: pu-live-pulse 2.2s ease-in-out infinite;
}

@keyframes pu-live-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 50%, transparent); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .popup_user .pu-icon-live { animation: none; }
}

.popup_user .pu-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popup_user .pu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.popup_user .pu-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: #3d2e12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup_user .pu-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: #7a4f01;
  background: #ffffff;
  border: 1px solid #f0c96e;
  border-radius: 6px;
  padding: 4px 10px;
  line-height: 1.2;
  box-shadow: 0 1px 3px color-mix(in srgb, #f0c96e 40%, transparent);
}

.popup_user .pu-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex: none;
  animation: pu-live-pulse 2.2s ease-in-out infinite;
}

.popup_user .pu-msg {
  font-size: 12.5px;
  color: #6b5620;
  line-height: 1.45;
}

.popup_user .pu-msg strong,
.popup_user .pu-time {
  color: #3d2e12;
  font-weight: 600;
}

.popup_user .pu-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.popup_user .pu-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lp-c5);
  opacity: .7;
  flex: none;
}

/* fallback konten lama (HTML mentah) */
.popup_user > b {
  font-family: var(--font-head);
  font-size: 13.5px;
}

.popup_user b { color: var(--text); }
.popup_user strong { color: var(--text); }

/* ---------- Order form — modern checkout look ---------- */
.div_form {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 8px auto 16px;
  padding: 0 12px;
  container-type: inline-size;
  box-sizing: border-box;
}

.div_form > center { display: none; }

.lp-form-head {
  text-align: center;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lp-form-eyebrow {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lp-form-title,
.div_form > center > b {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(26px, 7cqi, 34px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}

.lp-form-sub {
  margin: 0;
  max-width: 28em;
  font-size: clamp(13.5px, 3.6cqi, 15px);
  color: var(--text-dim);
  line-height: 1.5;
}

.div_form_main,
.form-beli {
  width: 100% !important;
  margin: 0 !important;
  background: var(--surface) !important;
  border: 2.5px solid var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 26px 20px 22px !important;
  box-sizing: border-box !important;
}

.lp-form-sec {
  margin-bottom: 18px !important;
}

.lp-form-sec-title,
.div_form h3 {
  font-family: var(--font-head) !important;
  font-size: clamp(15px, 4.2cqi, 17px) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  text-align: left !important;
  margin: 0 0 12px !important;
  padding: 0 0 10px !important;
  border-bottom: 2px solid var(--line) !important;
  letter-spacing: -.01em;
}

.lp-form-field {
  margin-bottom: 12px !important;
}

.div_form .form-control,
.div_form .textarea,
.div_form select,
.lp-form-field input,
.lp-form-field textarea,
.lp-form-field select {
  width: 100% !important;
  background: color-mix(in srgb, var(--text) 2.5%, var(--surface)) !important;
  color: var(--text) !important;
  border: 2px solid var(--lp-fix-input-border, #64748b) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  padding: 13px 14px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
  box-sizing: border-box !important;
}

.div_form .form-control::placeholder,
.div_form .textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: .55;
}

.div_form .form-control:focus,
.div_form .textarea:focus,
.div_form select:focus {
  outline: none !important;
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.div_form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c5a54' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  cursor: pointer;
}

.lp-ac-hint,
.lp-ac-selected {
  text-align: left !important;
  font-size: 12px !important;
}

.lp-ac-selected {
  font-weight: 700 !important;
}

.lp-ac-drop {
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

.lp-ac-item:hover { background: var(--accent-soft) !important; }

/* Product cards */
.lp-produk-list {
  gap: 10px !important;
}

.lp-produk-item {
  position: relative;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--text) 2%, var(--surface)) !important;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s !important;
}

.lp-produk-item:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  transform: translateY(-1px);
}

.lp-produk-item.checked {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 3px 3px 0 var(--accent) !important;
}

.lp-produk-item input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}

.lp-produk-item .pname {
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.lp-produk-item .pharga {
  color: var(--accent) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-top: 3px !important;
}

.lp-produk-check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: transparent;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  transition: .15s;
}

.lp-produk-item.checked .lp-produk-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.lp-empty-produk {
  font-size: 13px;
  color: var(--text-dim);
  text-align: left;
}

/* Promo notes: warna tetap di lp_fixed_accents.css */

/* Summary checkout card */
.lp-summary {
  margin: 18px 0 16px !important;
  padding: 16px 14px !important;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--lp-wash);
  border: 1.5px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: var(--radius);
}

.lp-summary-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line));
}

.lp-summary-row {
  padding: 6px 0 !important;
  font-size: 14.5px !important;
}

.lp-summary-row .val {
  font-variant-numeric: tabular-nums;
}

.lp-summary-row.diskon .val {
  color: #b91c1c !important;
}

.lp-summary-row.total {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 2px solid var(--text);
  align-items: center !important;
}

.lp-summary-row.total span:first-child {
  font-weight: 700;
}

.lp-summary-row.total .val {
  font-family: var(--font-head);
  font-size: clamp(20px, 5.5cqi, 24px);
  font-weight: 800;
  color: var(--accent);
}

.lp-ongkir-hint {
  margin-top: 8px !important;
}

.lp-form-actions {
  margin: 0 0 14px;
}

.lp-form-btn,
.div_form .home-link3,
.div_form .button-lg-2 {
  width: 100% !important;
  justify-content: center !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800 !important;
  padding: 16px 20px !important;
  border: 2.5px solid var(--text) !important;
  box-shadow: 4px 4px 0 var(--accent) !important;
  background: var(--text) !important;
  color: var(--surface) !important;
}

.lp-form-btn:hover,
.div_form .home-link3:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--accent) !important;
}

.lp-pay-badge,
.div_form img[src*="transfer"] {
  display: block;
  width: min(100%, 280px);
  margin: 4px auto 10px;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.lp-trust {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--line);
  gap: 8px !important;
}

.lp-trust-item {
  color: var(--text-dim) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 8px 6px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border-radius: var(--radius-sm);
}

.gif {
  width: 150px !important;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  opacity: .85;
}

/* ---------- Utilities / cleanup old theme leftovers ---------- */
.closepop { float: right; }
.home-text214 { display: block; }

/* ---------- Design polish pass ---------- */
.lp-page {
  padding-bottom: 72px; /* ruang sticky CTA */
}

.home-image01 {
  display: block;
  width: min(100%, 260px);
  margin: 10px auto 0 !important;
}

/* Section icon CSS — ganti gambar learning */
.section-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border: 3px solid var(--text);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 4px 4px 0 var(--text);
}

.section-mark--ebook {
  background: var(--surface);
  color: var(--accent);
  border-radius: 14px;
  font-size: 0;
}

.section-mark--ebook::before {
  content: "";
  display: block;
  width: 26px;
  height: 32px;
  border: 2.5px solid currentColor;
  border-left-width: 6px;
  border-radius: 2px 7px 7px 2px;
  box-shadow: inset 5px 0 0 color-mix(in srgb, currentColor 18%, transparent);
}

.section-mark--catatan {
  background: var(--surface);
  color: var(--accent);
  border-radius: 999px;
}

.section-mark--action {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 28px;
  padding-left: 4px;
}

.mid-produk {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 8px auto 24px;
}

.home-features,
.home-features01,
.home-features03 {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-portofolio01 .home-image03,
.home-portofolio01 .bg_produk,
.home-portofolio01 .mid-produk {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 10px auto 16px;
}

.home-portofolio01 .mid-produk img,
.home-portofolio01 .home-image03 {
  width: 100%;
}

.home-text015,
.home-text033,
.home-text047 {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 12px auto 0;
  text-align: center;
  display: block;
}

.home-container1 {
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 16px auto 0;
}

/* Kartu problem/pelajari: jangan bentrok dengan .kartu custom */
.pertanyaanproblem-feature-card.kartu,
.listdetail-feature-card.kartu {
  flex-direction: row;
  align-items: flex-start;
  padding: 16px 18px;
  gap: 12px;
}

.pertanyaanproblem-feature-card .kartu-ic,
.listdetail-feature-card .kartu-ic { display: none; }

/* Pricing card tighter */
.home-container4 {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 16px 8px;
}

.home-pricing,
.offer-wrap,
.offer-detail,
.offer-deal {
  width: 100%;
  max-width: var(--lp-content-max);
}

.home-pricing .home-image24,
.offer-produk {
  width: min(100%, 220px);
  margin: 0 auto;
}

/* Ebook bonus list */
.ebook-bonus-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ebook-bonus-section.section-container {
  padding-bottom: 16px;
}

.ebook-bonus-section .section-mark--ebook {
  margin-bottom: 12px;
}

.ebook-bonus-list {
  gap: 12px;
  width: 100%;
}

.ebook-bonus-list .bonus2-card {
  width: 100%;
  text-align: left;
  margin: 0;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 14px;
}

.ebook-bonus-list .bonus2-img {
  flex: none;
  width: 72px !important;
  height: 100px !important;
  border-radius: 3px 10px 10px 3px !important;
}

.ebook-bonus-list .bonus2-img::after {
  display: block !important;
}

.ebook-bonus-list .bonus2-info {
  flex: 1;
  min-width: 0;
}

.ebook-bonus-list .b2-desc h3 {
  font-family: var(--font-head);
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--text);
}

.ebook-bonus-list .b2-desc div,
.ebook-bonus-list .b2-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.ebook-bonus-list .b2-desc b {
  color: var(--accent);
}

@container (max-width: 480px) {
  .ebook-bonus-list .bonus2-card,
  .bonus2-list .bonus2-card {
    flex-direction: row !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .ebook-bonus-list .bonus2-img,
  .bonus2-list .bonus2-img {
    width: 64px !important;
    height: 90px !important;
    border-radius: 3px 8px 8px 3px !important;
  }
  .ebook-bonus-list .bonus2-img::after,
  .bonus2-list .bonus2-img::after {
    display: block !important;
  }
}

/* Garansi — kartu jaminan */
.artikel.garansi-box-lp,
.garansi-box-lp {
  text-align: center;
  width: 100%;
  max-width: var(--lp-content-max);
  margin: 0 auto;
  padding: 30px 22px 26px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
  border: 2.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 16px 36px -20px color-mix(in srgb, var(--accent) 40%, transparent) !important;
  position: relative;
  overflow: hidden;
}

.garansi-box-lp::after {
  content: "AMAN";
  position: absolute;
  right: -8px;
  bottom: 8px;
  font-family: var(--font-head);
  font-size: clamp(52px, 16cqi, 72px);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent);
  opacity: .08;
  line-height: 1;
  pointer-events: none;
  transform: rotate(-8deg);
}

.garansi-seal {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
}

.garansi-seal-mark {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid var(--text);
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  box-shadow: 4px 4px 0 var(--text);
  position: relative;
  z-index: 1;
}

.garansi-seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, var(--text));
  animation: garansi-spin 12s linear infinite;
}

@keyframes garansi-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .garansi-seal-ring { animation: none; }
}

.garansi-badge {
  display: inline-flex;
  margin: 0 auto 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.garansi-box-lp h3,
.garansi-box-lp .home-text180 {
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(24px, 7cqi, 32px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.garansi-box-lp p,
.garansi-box-lp .home-text181 {
  text-align: center;
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: clamp(14.5px, 4cqi, 16px);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.garansi-points {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  text-align: left;
}

.garansi-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.garansi-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  margin-top: 1px;
}

.garansi-points strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.garansi-points em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* FAQ */
.faq-section {
  padding-top: 40px;
  padding-bottom: 24px;
}

.faq-title {
  text-align: center;
  margin-bottom: 18px !important;
}

.faq-section .accordion {
  margin: 0 auto;
}

/* Nested section padding reset */
.home-portofolio08 .section-container,
.home-portofolio09.section-container,
.home-portofolio10.section-container {
  padding-top: 4px;
  padding-bottom: 4px;
}

.home-hero.section-container {
  padding-bottom: 28px;
}

@media (max-width: 550px) {
  .section-container,
  .home-portofolio,
  .home-portofolio01,
  .home-portofolio02,
  .home-portofolio04,
  .home-portofolio05,
  .home-container4,
  .home-container5,
  .home-container6,
  .home-container7 {
    padding: 36px 16px;
  }

  .home-pricing { padding: 22px 16px; }
  .ebook-bonus-list .bonus2-card {
    flex-direction: row !important;
    padding: 14px;
    gap: 12px;
  }
  .ebook-bonus-list .bonus2-img {
    width: 64px !important;
    height: 90px !important;
    border-radius: 3px 8px 8px 3px !important;
  }
}


/* ---------- Fixed accent colors ---------- */
/* ---------- Form order: promo / keterangan produk ---------- */
.lp-promo-notes {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--lp-fix-warm-bg) !important;
  border: 1.5px dashed var(--lp-fix-warm-border) !important;
  color: var(--lp-fix-warm-text) !important;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.lp-promo-notes .lp-promo-line {
  margin: 0 0 4px;
}

.lp-promo-notes .lp-promo-line:last-child {
  margin-bottom: 0;
}

.lp-promo-notes.active {
  background: var(--lp-fix-success-bg) !important;
  border: 1.5px solid var(--lp-fix-success-border) !important;
  color: var(--lp-fix-success-text) !important;
}

.lp-ac-hint,
.lp-ongkir-hint {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--lp-fix-info-bg);
  border: 1px solid var(--lp-fix-info-border);
  color: var(--lp-fix-info-text);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}

.lp-ac-selected {
  color: var(--lp-fix-success-text) !important;
}

/* Input form — border gelap agar kolom terlihat jelas */
.div_form .form-control,
.div_form .textarea,
.div_form select,
.lp-form-field input,
.lp-form-field textarea,
.lp-form-field select {
  border: 2px solid var(--lp-fix-input-border) !important;
}

/* ---------- LP sections: catatan, footnote, surat ---------- */
.catatan-box,
.artikel.catatan-box {
  background: var(--lp-fix-warm-bg) !important;
  border: 2px solid var(--lp-fix-warm-border) !important;
  outline: 2px dashed color-mix(in srgb, var(--lp-fix-warm-text) 28%, transparent);
  outline-offset: 4px;
}

.catatan-box h3,
.catatan-box .home-text123,
.catatan-box p,
.catatan-box .home-text126 {
  color: var(--lp-fix-warm-text);
}

.home-text047 {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 12px auto 24px;
  text-align: center;
}

.home-text047 i {
  display: inline;
  font-style: italic;
  background: var(--lp-fix-warm-bg);
  color: var(--lp-fix-warm-text);
  padding: 4px 10px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.surat-note {
  display: inline-block;
  margin: 10px auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--lp-fix-warm-bg);
  border: 1px solid var(--lp-fix-warm-border);
  color: var(--lp-fix-warm-text);
  font-size: 13px;
  font-weight: 600;
}

.home-text033,
.home-text015 {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 12px auto 0;
  padding: 10px 14px;
  box-sizing: border-box;
  text-align: center;
  /* Ikuti palette custom $color1..$color4 (--lp-c1..c4) */
  background: color-mix(in srgb, var(--lp-c3, #e5e7eb) 70%, var(--lp-c4, #f3f4f6));
  border: 1px solid color-mix(in srgb, var(--lp-c2, #4b5563) 42%, var(--lp-c3, #e5e7eb));
  border-radius: 6px;
  color: var(--lp-c1, #111827);
}
/* ========== 5-Color Accent Layer (color5 / --lp-c5) ========== */
.lencana:not(.soft) {
  background: var(--lp-gradient-brand);
}

.lp-wave {
  background: linear-gradient(90deg, transparent, var(--lp-c2), var(--lp-c5), transparent);
}

.section-mark:not(.section-mark--ebook):not(.section-mark--catatan):not(.section-mark--action) {
  background: var(--lp-gradient-brand-v);
}

.check-mark {
  color: var(--lp-c5);
  background: var(--lp-pop-soft);
  border-color: color-mix(in srgb, var(--lp-c5) 50%, var(--text));
}

.garansi-badge {
  background: var(--lp-gradient-brand);
}

.garansi-box-lp,
.artikel.garansi-box-lp {
  border-color: color-mix(in srgb, var(--lp-c5) 42%, var(--accent)) !important;
}

.accordion-icon {
  color: var(--lp-c5);
}

.home-link3,
.lp-form-btn {
  background: var(--lp-gradient-brand) !important;
}

.link_button:hover,
.btn-melayang:hover {
  background: var(--lp-c5);
}

.offer-badge {
  background: var(--lp-gradient-brand-v);
}

#countdown,
.offer-countdown {
  color: var(--lp-c5);
}

/* ========== Karakter Theme 1 — Warm Coral (lembut, pill, tanpa border keras) ========== */
body {
  background: linear-gradient(168deg, #ffffff 0%, color-mix(in srgb, var(--lp-c4) 70%, #ffffff) 42%, color-mix(in srgb, var(--lp-c2) 4%, var(--lp-c4)) 100%);
  background-image:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--lp-c2) 7%, transparent), transparent 50%),
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--lp-c5) 6%, transparent), transparent 46%);
}

/* Hero/headline — lebih terang */
.home-hero {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lp-c4) 35%, #ffffff) 0%,
    color-mix(in srgb, var(--lp-c4) 55%, #ffffff) 55%,
    transparent 100%
  );
}

.navigation-max-width {
  background: linear-gradient(95deg, var(--lp-c2), var(--lp-c5));
  border-bottom: none;
  border-radius: 0;
}

.lencana.soft {
  border: none;
  background: color-mix(in srgb, var(--lp-c2) 16%, var(--surface));
  border-radius: 999px;
  font-weight: 700;
  padding: 6px 14px;
}

.title_1,
.home-heading-container h1 {
  font-weight: 800;
}

.title_2 {
  color: var(--text);
}

/* Kartu — tanpa border, shadow lembut, sangat bulat */
.pertanyaanproblem-feature-card,
.listdetail-feature-card,
.div_manfaat,
.lp-testi.testi,
.bonus2-card,
.artikel,
.sipnosis-box,
.offer-detail,
.accordion-item {
  border: none !important;
  box-shadow: 0 10px 32px -18px color-mix(in srgb, var(--lp-c2) 38%, transparent) !important;
  border-radius: calc(var(--radius) + 6px) !important;
}

.pertanyaanproblem-feature-card:hover,
.listdetail-feature-card:hover,
.div_manfaat:hover,
.lp-testi.testi:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -16px color-mix(in srgb, var(--lp-c2) 45%, transparent) !important;
}

/* Gambar produk — border tipis, sudut sangat bulat */
.fig-gambar.img-offset,
.offer-produk.img-offset {
  border: 2px solid color-mix(in srgb, var(--lp-c2) 45%, var(--lp-c1));
  border-radius: calc(var(--radius-sm) + 10px);
  box-shadow: none;
}

/* Icon section — lingkaran penuh */
.section-mark {
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--lp-c2) 32%, transparent);
}

.section-mark--ebook {
  border-radius: 999px;
}

.section-mark--catatan,
.section-mark--action {
  border-radius: 999px;
}

.problem-mark {
  border-radius: 999px;
  border: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--lp-c2) 35%, transparent);
}

.check-mark {
  border-radius: 10px;
  border: none;
  background: color-mix(in srgb, var(--lp-c2) 18%, var(--surface));
  box-shadow: none;
}

.manfaat-mark {
  border-radius: 999px;
  border: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--lp-c2) 35%, transparent);
}

/* Penawaran — rounded besar, border accent lembut */
.offer-deal {
  border: 2px solid color-mix(in srgb, var(--lp-c5) 50%, var(--lp-c1));
  border-radius: calc(var(--radius) + 8px);
  box-shadow: none;
}

.offer-badge {
  border-radius: 999px;
  border: 2px solid var(--surface);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}

.cd-unit {
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--surface) 35%, transparent);
}

/* Form — pill container + border tegas */
.div_form_main,
.form-beli {
  border: 2.5px solid var(--text) !important;
  background: var(--surface);
  box-shadow: 0 12px 36px -20px color-mix(in srgb, var(--lp-c2) 35%, transparent) !important;
  border-radius: calc(var(--radius) + 8px) !important;
}

.div_form_main input,
.div_form_main select,
.div_form_main textarea,
.form-beli input,
.form-beli select,
.form-beli textarea {
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--lp-c3) 80%, var(--lp-c2));
}

.lp-form-btn,
.tombol {
  border-radius: var(--btn-radius);
}

/* Garansi & catatan — dashed lembut, bulat */
.garansi-box-lp,
.artikel.garansi-box-lp {
  border: 2px dashed color-mix(in srgb, var(--lp-c2) 45%, var(--lp-edge)) !important;
  border-radius: calc(var(--radius) + 6px) !important;
  box-shadow: none !important;
}

.garansi-seal-mark {
  border-radius: 999px;
  border: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--lp-c2) 40%, transparent);
}

.garansi-badge {
  border-radius: 999px;
}

.catatan-box,
.artikel.catatan-box {
  border: none;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 8px 28px -18px color-mix(in srgb, var(--lp-c2) 30%, transparent);
}

.cod-ongkir-note {
  border-radius: calc(var(--radius) + 2px);
  border: 1.5px solid color-mix(in srgb, var(--lp-c2) 30%, var(--lp-edge));
}

.cod-ongkir-check {
  border-radius: 999px;
}

.aman-bayar-box {
  border-radius: calc(var(--radius) + 4px);
  border: none;
  box-shadow: 0 8px 28px -18px color-mix(in srgb, var(--lp-c2) 28%, transparent);
}

.bg_color10 {
  border-radius: 0;
  border-top: none;
  border-bottom: none;
}

.popup_user {
  border: 1.5px solid #f0c96e;
  border-radius: calc(var(--radius) + 4px);
  box-shadow:
    0 2px 6px color-mix(in srgb, #f0c96e 35%, transparent),
    0 16px 40px -12px color-mix(in srgb, #e8a317 30%, transparent);
}

.popup_user .pu-icon {
  border-radius: calc(var(--radius-sm) + 6px);
}

.popup_user .pu-badge {
  border-radius: 6px;
}

.btn-melayang,
.link_button {
  background: linear-gradient(95deg, var(--lp-c2), var(--lp-c5));
  border-radius: 0;
  border: none;
  box-shadow: 0 -8px 28px color-mix(in srgb, var(--lp-c2) 35%, transparent);
}

.home-container8 {
  border-radius: 22px 22px 0 0;
}