/* =========================================================
   lp_fixed_accents.css — warna aksen tetap (semua template)
   Tidak ikut palette $color1..$color4. Agar LP tidak terlalu garing.
   ========================================================= */

:root {
  /* Kuning / orange muda — note, keterangan, highlight */
  --lp-fix-warm-bg: #fff8e6;
  --lp-fix-warm-border: #f0c96e;
  --lp-fix-warm-text: #7a4f01;

  /* Hijau muda — promo aktif / sukses */
  --lp-fix-success-bg: #ecfdf3;
  --lp-fix-success-border: #86efac;
  --lp-fix-success-text: #166534;

  /* Biru muda — hint / petunjuk form */
  --lp-fix-info-bg: #eff6ff;
  --lp-fix-info-border: #93c5fd;
  --lp-fix-info-text: #1e40af;

  /* Border input form — tetap gelap di semua template */
  --lp-fix-input-border: #64748b;
}

/* ---------- Performa: lazy load gambar ---------- */
img[loading="lazy"] {
  content-visibility: auto;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Performa: defer render dari "Yes, Dapatkan Solusi-nya…" ke bawah ----------
   Browser skip layout/paint section offscreen; hero + "Apakah Anda Merasa?" tetap eager.
   Saat user scroll / lompat #order, section otomatis di-render. */
.lp-page .home-portofolio01,
.lp-page .home-portofolio02,
.lp-page .home-portofolio04,
.lp-page .home-portofolio05,
.lp-page .home-portofolio08,
.lp-page .home-portofolio11,
.lp-page .home-container4,
.lp-page .home-container5,
.lp-page .home-container6,
.lp-page .home-container7,
.lp-page .home-container8,
.lp-page .ebook-bonus-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

/* Form order & FAQ biasanya lebih tinggi — estimasi awal agar scrollbar tidak loncat */
.lp-page .home-container6,
.lp-page .home-container7.faq-section,
.lp-page .faq-section {
  contain-intrinsic-size: auto 960px;
}

/* Promo + bonus blok besar */
.lp-page .home-container4,
.lp-page .home-portofolio05,
.lp-page .ebook-bonus-section {
  contain-intrinsic-size: auto 720px;
}

.fig-gambar img,
.offer-produk img,
.mid-produk img {
  background: transparent;
}

/* Detail Buku — cover tanpa frame */
.offer-detail .fig-gambar.img-offset.offer-produk,
.offer-detail .offer-produk.img-offset {
  border: none !important;
  box-shadow: none !important;
}

/* Gambar buku di atas sipnosis — frame rapat, tanpa celah atas/bawah */
.home-portofolio01 .fig-gambar.mid-produk.img-offset {
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

.home-portofolio01 .fig-gambar.mid-produk.img-offset img,
.home-portofolio01 .mid-produk .home-image03 {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none;
}

/* ---------- 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;
}

/* Box formulir pembelian — border jelas di semua template */
.div_form .div_form_main,
.div_form_main,
.form-beli {
  border: 2.5px solid var(--text, #111) !important;
  box-sizing: border-box;
}

/* ---------- 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);
}

.catatan-box h3,
.catatan-box .home-text123 {
  font-size: clamp(24px, 6.8cqi, 30px) !important;
  margin-bottom: 16px !important;
}

/* Jeda <br><br> — tinggi tetap (px), sama di desktop & mobile */
.lp-br-gap {
  display: block !important;
  width: 100% !important;
  height: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 14px !important;
  font-size: 14px !important;
  overflow: hidden;
  border: 0 !important;
}

.artikel.action-box,
.action-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 22px 16px 18px;
  background: var(--lp-wash, var(--surface, #fff));
  border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line, #ddd));
  border-radius: var(--radius, 12px);
}

.action-box .home-text139 {
  font-size: clamp(22px, 6.4cqi, 28px) !important;
  margin: 0 0 12px !important;
  color: var(--text);
}

.action-box .home-text143 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px !important;
  color: var(--text);
}

.action-box .action-now {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: clamp(16px, 4.6cqi, 18px);
  line-height: 1.3;
}

.action-box .action-steps {
  display: block;
  font-weight: 700;
  font-size: clamp(14px, 4cqi, 15.5px);
  line-height: 1.45;
  color: var(--text);
}

.action-box .home-text142 {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 14px 16px;
  background: var(--lp-fix-warm-bg);
  border: 2px solid var(--lp-fix-warm-border);
  border-radius: var(--radius-sm, 8px);
  color: var(--lp-fix-warm-text);
}

.action-box .home-text142 b,
.action-box .home-text142 strong {
  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);
}

/* 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 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.home-text021 {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.12em 0.28em !important;
  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)) !important;
  background: color-mix(in srgb, var(--lp-c3, #e5e7eb) 72%, var(--lp-c4, #f3f4f6)) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* ---------- Notifikasi order toast (warm alert) ---------- */
.popup_user-container {
  top: max(4px, env(safe-area-inset-top, 0px)) !important;
}

.popup_user {
  background: linear-gradient(135deg, #fffbeb 0%, #fff3cd 58%, #ffe8a3 100%) !important;
  background-color: #fff3cd !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #5c4a1f !important;
}

.popup_user .pu-name {
  color: #3d2e12 !important;
}

.popup_user .pu-msg {
  color: #6b5620 !important;
}

.popup_user .pu-msg strong,
.popup_user .pu-meta strong,
.popup_user .pu-time {
  color: #3d2e12 !important;
  font-weight: 800 !important;
}

.popup_user .pu-badge {
  text-transform: none !important;
  letter-spacing: .02em !important;
  color: #7a4f01 !important;
  background: #ffffff !important;
  border: 1px solid var(--lp-fix-warm-border) !important;
}

/* ---------- Lebar box = list "pelajari" (hindari double padding kiri/kanan) ----------
   Pelajari: .section-container.mobile_padding pada 1 elemen → inset ~20px.
   Box di bawah semula nested (section + .mobile_padding anak) → inset ~40px.
*/
.home-hero > .mobile_padding.home-max-width,
.home-portofolio01 .home-features.mobile_padding,
.home-portofolio08 .home-portofolio09.mobile_padding,
.home-portofolio08 .home-portofolio10.mobile_padding,
.home-container4 .offer-wrap.mobile_padding,
.home-container6 .home-max-width1.mobile_padding:has(.garansi-box-lp),
.home-container7 .home-features12.mobile_padding:has(.surat-bayangkan),
.home-container7.faq-section .home-features12.mobile_padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Box "100% Aman" — tanpa inset L/R, tapi beri jarak vertikal ke konten sekitar */
.home-portofolio04 .home-container2.mobile_padding,
.home-portofolio04 .home-container2:has(.aman-bayar-box) {
  padding: 0 !important;
  margin-top: 28px;
  margin-bottom: 28px;
  margin-left: auto;
  margin-right: auto;
}

.home-portofolio04 .aman-bayar-box {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: var(--lp-content-max, 500px);
  box-sizing: border-box;
}

.aman-bayar-box h3 {
  font-size: clamp(24px, 6.8cqi, 30px) !important;
}

/* "Apakah Anda Merasa?" nested di dalam .home-hero — jangan double inset */
.home-hero > .home-portofolio.section-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Penawaran: parent pakai 16px — samakan ke 20px seperti pelajari */
.home-container4 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Pastikan box target full-width di dalam kolom konten */
.home-hero .hero-produk,
.home-hero .pertanyaanproblem-feature-card,
.home-hero .home-text015,
.home-portofolio01 .mid-produk,
.home-portofolio01 .sipnosis-box,
.home-portofolio04 .aman-bayar-box,
.home-portofolio04 .home-container2:has(.aman-bayar-box),
.home-portofolio08 .catatan-box,
.home-portofolio08 .action-box,
.home-container4 .offer-wrap,
.home-container4 .offer-detail,
.home-container4 .offer-deal,
.home-container6 .garansi-box-lp,
.home-container7 .surat-bayangkan,
.faq-section .accordion,
.faq-section .faq-title {
  width: 100%;
  max-width: var(--lp-content-max, 500px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Subjudul hero — lebih besar & tebal */
.subjudul,
.under_tagline,
.subjudul.under_tagline {
  font-size: clamp(18px, 5cqi, 21px) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

/* Box Penawaran Terbatas — harga normal + panah putih agar jelas */
.offer-deal .home-text159 {
  color: #ffffff !important;
  text-decoration-color: color-mix(in srgb, #ffffff 70%, #ef4444) !important;
}

.offer-deal .offer-arrow-down {
  color: #ffffff !important;
}

.offer-deal .offer-label--promo {
  color: #ffffff !important;
}

.offer-deal .offer-price-sub {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  background: #ffffff;
  color: #111111;
  border-radius: 4px;
}

.offer-deal .offer-price-sub u {
  color: #111111;
  text-decoration-color: #111111;
}

.offer-deal .offer-cta-text {
  margin: 8px 0 0;
  max-width: 34em;
  font-family: var(--font-body);
  line-height: 1.5;
  color: #f5d76e;
  text-align: center;
}

/* ---------- Gambar buku di atas "Manfaat Baca" — full-bleed di HP ---------- */
@media (max-width: 640px) {
  /* figure langsung sebelum .lp-wave + section Manfaat */
  .fig-gambar.mid-produk.img-offset:has(+ .lp-wave) {
    width: 100%;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
    border-left: none !important;
    border-right: none !important;
    border-top: 2.5px solid var(--text, #111) !important;
    border-bottom: 2.5px solid var(--text, #111) !important;
    border-radius: 0 !important;
    overflow: hidden;
  }

  .fig-gambar.mid-produk.img-offset:has(+ .lp-wave) img {
    width: 100%;
    border-radius: 0 !important;
  }
}

/* ---------- Hero — pita miring "BUKU BARU" di gambar produk ---------- */
.hero-produk {
  position: relative;
  overflow: hidden;
}

.hero-produk .bonus-ribbon {
  top: 22px;
  right: -44px;
  width: 180px;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 7px 0;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--lp-c1, #1a1a1a) 25%, transparent);
}

.home-text211,
.home-text211 s {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.8;
}

/* Sipnosis — ukuran & line-height */
.sipnosis-isi,
.sipnosis-box p,
.home-text023.artikel p,
.home-text023.sipnosis-box,
.home-text023.artikel .sipnosis-isi {
  font-size: 16.5px !important;
  line-height: 1.45 !important;
}

/* Sticky CTA "Bisa COD..." — hidden sampai section Manfaat Baca terlihat/dilewati */
.btn-melayang {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(110%);
  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility 0s linear .28s,
    background .2s,
    box-shadow .2s;
}
.btn-melayang.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility 0s linear 0s,
    background .2s,
    box-shadow .2s;
}

/* Sticky CTA — selalu full-bleed, tanpa border-radius (semua template) */
a.btn-melayang,
a.btn-melayang.link_button,
.btn-melayang.link_button {
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* ---------- Icon list — emoji (tanpa SVG panjang) ---------- */
.lp-ico,
.lp-ico.problem-mark,
.lp-ico.check-mark,
.lp-ico.manfaat-mark {
  flex: none !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin-top: 2px !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 22px !important;
  line-height: 1 !important;
  overflow: visible;
  display: grid !important;
  place-items: center;
  animation: lp-ico-pop 0.48s cubic-bezier(0.2, 1.35, 0.35, 1) both;
}

.lp-ico svg {
  display: none !important;
}

/* Icon manfaat — lebih besar secara visual, slot layout tetap agar teks tidak bergeser */
.lp-ico.manfaat-mark,
.div_manfaat .lp-ico.manfaat-mark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 32px !important;
  line-height: 1 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  margin-left: -2px !important;
}

/* Kartu manfaat — padding kiri lebih rapat, gap ke teks lebih longgar */
.div_manfaat {
  padding-left: 10px !important;
  gap: 18px !important;
}

/* Judul item di list Pelajari + Manfaat — lebih besar; isi tetap kecil */
.listdetail-text b,
.listdetail-text strong,
.listdetail-feature-card .listdetail-text b,
.listdetail-feature-card .listdetail-text strong,
.div_manfaat > span:not([class]) b,
.div_manfaat > span:not([class]) strong,
.div_manfaat span b,
.div_manfaat span strong {
  font-size: clamp(19px, 5.4cqi, 23px) !important;
}

@keyframes lp-ico-pop {
  0% { transform: scale(0.35); opacity: 0; }
  65% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

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

/* ---------- Icon section besar (atas judul) — emoji WA ---------- */
.surat-mark {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 48px !important;
  line-height: 1 !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
  font-weight: 400 !important;
  width: auto !important;
  height: auto !important;
}

.section-mark.lp-section-emoji,
.aman-bayar-icon.lp-section-emoji {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 48px !important;
  line-height: 1 !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
  font-weight: 400 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
  display: grid !important;
  place-items: center;
  overflow: visible;
  filter: none !important;
}

.aman-bayar-icon.lp-section-emoji {
  font-size: 42px !important;
  margin-bottom: 8px;
}

.section-mark.lp-section-emoji::before,
.section-mark--ebook.lp-section-emoji::before {
  content: none !important;
  display: none !important;
}

/* ---------- Headline — lebih tebal & cocok untuk LP (semua theme) ---------- */
.lp-page .title_1,
.lp-page .judul.title_1,
.lp-page .home-heading-container h1,
.lp-page h1.judul {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  font-synthesis: weight !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.lp-page .title_2,
.lp-page .home-text012,
.lp-page .home-text030,
.lp-page .eksklusif {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.lp-page .home-text020 {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}