/* Landing Page - gaya komponen publik (lp-*) */
*, *::before, *::after { box-sizing: border-box; }
/* Pagar anti geser kanan-kiri di mobile: konten tidak boleh melebarkan halaman */
html, body.lp-body { overflow-x: hidden; max-width: 100%; }
body.lp-body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; line-height: 1.6; background: #fff; }
img { max-width: 100%; height: auto; }

.lp-preview-bar { background: #f59e0b; color: #fff; text-align: center; padding: 8px; font-size: 14px; font-weight: 600; }
/* DEFAULT SEMUA MODUL = 100% LEBAR LAYAR (tanpa kolom 800px), kecuali diatur beda
   lewat "Lebar" di Posisi & Ukuran Item (%/px, rata via Lokasi). Gutter tipis 20px
   dipertahankan utk modul teks agar tidak menempel ke tepi layar. */
.lp-main > * { max-width: none; margin-left: auto; margin-right: auto; padding: 12px 20px; }
.lp-main > .lp-section, .lp-main > .lp-spacer, .lp-main > .lp-custom,
.lp-main > .lp-layout, .lp-main > .lp-container, .lp-main > .lp-carousel { padding: 0; }

.lp-heading { margin: 0.4em auto; line-height: 1.25; }
.lp-text, p.lp-text { margin: 0.5em auto; }
/* Komponen "Teks" (span) jadi blok agar Rata teks (text-align) berlaku */
.lp-text-block { display: block; }
.lp-quote { border-left: 4px solid #2563eb; background: #f8fafc; padding: 20px 24px; border-radius: 8px; font-style: italic; }
.lp-quote footer { margin-top: 8px; font-style: normal; font-weight: 600; color: #475569; }
.lp-icon { font-size: 42px; text-align: center; }
.lp-image { display: block; margin: 0 auto; border-radius: 8px; }
.lp-placeholder { border: 2px dashed #cbd5e1; color: #94a3b8; text-align: center; padding: 40px 20px; border-radius: 8px; font-size: 14px; }

.lp-video { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; }
.lp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Padding default section TANPA !important supaya setelan padding dari editor (inline style)
   BERLAKU — konten hero ikut bergerak saat padding diubah. Selector ganda mengalahkan
   reset `.lp-main > .lp-section { padding: 0 }` di atas. */
.lp-section { background: #0f172a; color: #fff; text-align: center; }
.lp-section, .lp-main > .lp-section { padding: 70px 20px; }
.lp-section-inner { max-width: 760px; margin: 0 auto; }
.lp-section h2 { font-size: 2.2em; margin: 0 0 12px; line-height: 1.2; }
.lp-section-sub { font-size: 1.15em; opacity: 0.85; margin-bottom: 24px; }
.lp-container { margin: 0 auto; padding: 20px; }
.lp-divider { border: 0; border-top: 1px solid #e2e8f0; margin: 24px auto; }

.lp-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; }
.lp-grid-col { background: #f8fafc; border-radius: 12px; padding: 24px; text-align: center; }
.lp-grid-col h3 { margin: 8px 0; }
@media (max-width: 640px) { .lp-grid { grid-template-columns: 1fr; } }

.lp-tabs .lp-tab-nav { display: flex; gap: 4px; border-bottom: 2px solid #e2e8f0; flex-wrap: wrap; }
.lp-tab-btn { border: 0; background: none; padding: 10px 18px; cursor: pointer; font-size: 15px; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.lp-tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.lp-tab-panel { display: none; padding: 18px 4px; }
.lp-tab-panel.active { display: block; }

.lp-accordion h2 { text-align: center; }
.lp-acc-item { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 8px; padding: 0; }
.lp-acc-item summary { cursor: pointer; font-weight: 600; padding: 14px 18px; list-style: none; position: relative; }
.lp-acc-item summary::after { content: '+'; position: absolute; right: 18px; font-size: 18px; color: #64748b; }
.lp-acc-item[open] summary::after { content: '\2212'; }
.lp-acc-body { padding: 0 18px 14px; color: #475569; }

.lp-btn-wrap { text-align: center; }
.lp-btn { display: inline-block; background: #2563eb; color: #fff !important; padding: 13px 32px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; transition: transform .1s, opacity .15s; }
.lp-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.lp-btn-outline { background: #fff; color: #2563eb !important; border: 1px solid #2563eb; }
.lp-btn-submit { width: 100%; margin-top: 8px; }

.lp-countdown { text-align: center; }
.lp-cd-units { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-cd-units > div { background: #0f172a; color: #fff; border-radius: 10px; padding: 14px 10px; min-width: 72px; }
.lp-cd-units span { font-size: 30px; font-weight: 800; display: block; }
.lp-cd-units small { opacity: 0.7; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

.lp-carousel { position: relative; border-radius: 12px; overflow: hidden; }
.lp-slide { display: none; width: 100%; }
.lp-slide.active { display: block; }
.lp-car-prev, .lp-car-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.lp-car-prev { left: 12px; } .lp-car-next { right: 12px; }

.lp-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.lp-testi { background: #f8fafc; border-radius: 12px; padding: 22px; }
.lp-testi p { font-style: italic; margin-top: 0; }
.lp-testi strong { display: block; }
.lp-testi small { color: #64748b; }

.lp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: stretch; }
.lp-price-card { border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px 22px; text-align: center; display: flex; flex-direction: column; }
.lp-price-card.highlight { border: 2px solid #2563eb; box-shadow: 0 10px 30px rgba(37,99,235,.15); }
.lp-price { font-size: 30px; font-weight: 800; margin: 10px 0; }
.lp-price-card ul { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.lp-price-card li { padding: 6px 0; border-bottom: 1px dashed #e2e8f0; font-size: 14px; }

.lp-progress span { font-size: 14px; font-weight: 600; }
.lp-progress-track { background: #e2e8f0; border-radius: 99px; height: 12px; overflow: hidden; margin-top: 6px; }
.lp-progress-fill { background: linear-gradient(90deg, #2563eb, #7c3aed); height: 100%; border-radius: 99px; transition: width 1s ease; }

.lp-social { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-social-btn { padding: 10px 20px; border-radius: 99px; color: #fff !important; text-decoration: none; font-weight: 700; font-size: 14px; }
.lp-facebook { background: #1877f2; } .lp-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.lp-tiktok { background: #000; } .lp-whatsapp { background: #25d366; } .lp-youtube { background: #ff0000; }

.lp-newsletter { background: #f1f5f9; border-radius: 14px; padding: 30px; text-align: center; }
.lp-newsletter h3 { margin-top: 0; }

/* ---- Form ---- */
.lp-form-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 26px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.lp-field { margin-bottom: 16px; text-align: left; }
.lp-field.lp-hidden { display: none; }
.lp-field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.lp-req { color: #ef4444; }
.lp-field input:not([type=checkbox]):not([type=radio]), .lp-field select, .lp-field textarea {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 11px 13px; font-size: 15px; font-family: inherit; background: #fff;
}
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus { outline: 2px solid #2563eb; border-color: transparent; }
.lp-field.has-error input, .lp-field.has-error select, .lp-field.has-error textarea { border-color: #ef4444; }
.lp-field-error { color: #ef4444; font-size: 13px; margin-top: 4px; display: block; }
.lp-check { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 4px 0; font-weight: 400 !important; cursor: pointer; }
.lp-rating button { background: none; border: 0; font-size: 30px; color: #cbd5e1; cursor: pointer; padding: 2px; }
.lp-rating button.active { color: #f59e0b; }
.lp-signature { border: 1px dashed #94a3b8; border-radius: 8px; width: 100%; max-width: 400px; display: block; touch-action: none; background: #fff; }
.lp-sig-clear { background: none; border: 0; color: #64748b; font-size: 13px; cursor: pointer; text-decoration: underline; margin-top: 4px; }

.lp-form-progress { background: #e2e8f0; border-radius: 99px; height: 8px; margin-bottom: 22px; overflow: hidden; }
.lp-form-progress-fill { background: #2563eb; height: 100%; border-radius: 99px; transition: width .3s; }
.lp-form-step { display: none; }
.lp-form-step.active { display: block; }
.lp-form-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }
.lp-form-message { margin-top: 14px; padding: 13px 16px; border-radius: 8px; font-size: 15px; }
.lp-form-message.success { background: #dcfce7; color: #166534; }
.lp-form-message.error { background: #fee2e2; color: #991b1b; }

.lp-spacer { width: 100%; }
.lp-map, .lp-embed { border-radius: 10px; }

/* ---- Menu situs (atas / samping / footer) ---- */
.site-nav { border-bottom: 1px solid rgba(0,0,0,.06); z-index: 900; }
.site-nav-sticky { position: sticky; top: 0; }
.site-nav-inner { max-width: 960px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; }
.site-brand { font-weight: 800; font-size: 17px; text-decoration: none; margin-right: 6px; }
.site-links { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.site-links a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 8px; opacity: .85; }
.site-links a:hover { opacity: 1; background: rgba(0,0,0,.06); }
.site-burger { background: none; border: 0; font-size: 20px; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.site-burger:hover { background: rgba(0,0,0,.06); }
.site-burger-float { position: fixed; top: 14px; right: 14px; z-index: 950; background: #0f172a; color: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.site-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 990; }
.site-overlay.open { opacity: 1; pointer-events: auto; }
.site-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 270px; max-width: 85vw; transform: translateX(100%); transition: transform .22s; z-index: 995; padding: 54px 0 20px; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.25); }
.site-drawer.open { transform: translateX(0); }
.site-drawer-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 26px; cursor: pointer; opacity: .7; }
.site-drawer-links { display: flex; flex-direction: column; }
.site-drawer-links a { color: inherit; text-decoration: none; padding: 12px 24px; font-size: 15px; font-weight: 500; opacity: .85; }
.site-drawer-links a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.site-footer { margin-top: 40px; }
.site-footer-inner { max-width: 960px; margin: 0 auto; padding: 36px 20px 28px; text-align: center; }
.site-footer-desc { margin: 0 auto 14px; max-width: 480px; font-size: 14px; line-height: 1.6; }
.site-footer-links { display: flex; gap: 4px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.site-footer-links a { color: inherit; text-decoration: none; font-size: 14px; opacity: .85; }
.site-footer-links a:hover { opacity: 1; text-decoration: underline; }
.site-footer-copy { font-size: 12.5px; opacity: .65; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; margin-top: 6px; }
@media (max-width: 640px) { .site-links a { padding: 6px 9px; font-size: 13px; } }

/* ---- Section Kolom/Baris (layout) + item box ---- */
.lp-layout { width: 100%; }
.lp-layout-grid { display: grid; }
.lp-cell { min-width: 0; }
.lp-item { }
.lp-item-link { display: block; text-decoration: none; color: inherit; }
.lp-item-link:hover { opacity: .92; }
@media (max-width: 640px) {
  .lp-layout-grid { grid-template-columns: 1fr !important; }
  /* Sel gabungan (colspan/rowspan) kembali normal saat menumpuk 1 kolom di HP */
  .lp-layout-grid > .lp-cell { grid-column: auto !important; grid-row: auto !important; }
}

/* Ikon sosial (mode ikon, katalog SVG bawaan) */
.lp-social-icon { display: inline-block; line-height: 0; transition: transform .15s, opacity .15s; }
.lp-social-icon:hover { transform: translateY(-2px); opacity: .9; }
.lp-social-icon svg { display: block; }

/* Logo situs di navbar (menggantikan teks brand) — disarankan PNG transparan tinggi ±40-48px */
.site-logo { height: 40px; width: auto; display: block; max-width: 220px; object-fit: contain; }

/* ---- Background Engine: overlay layer + konten di atasnya ---- */
/* Layer bg terpisah (mendukung transparansi bg tanpa memengaruhi isi): bg < overlay < konten */
.lp-bg-layer { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.lp-bg-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-bg-content { position: relative; z-index: 2; }
/* Paralax (background-attachment:fixed) bermasalah di iOS — kembalikan ke normal di layar kecil */
@media (max-width: 768px) {
  .lp-section, .lp-layout, .lp-bg-layer { background-attachment: scroll !important; }
}