/* =======================================================================
   Yabeli — gaya ELEMEN kanvas landing page (.lb-*).
   Dipakai halaman publik DAN kanvas editor di panel admin, supaya apa
   yang disusun admin sama persis dengan hasil akhirnya.
   ======================================================================= */
:root { --ok: #1e7d4a; --danger: #b3261e; }
/* ---- Struktur kanvas -------------------------------------------------- */
/* Tiap section jadi 'container' -> gaya di dalamnya menyesuaikan lebar
   kanvas, bukan lebar jendela browser. */
.lb-section { position: relative; scroll-margin-top: 72px; container-type: inline-size; }
.lb-anchor { display: block; height: 0; scroll-margin-top: 80px; }
.lb-canvas {
  --lb-row: 34px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 20px;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: minmax(var(--lb-row), auto);
  align-items: stretch;
}
/* Tiap elemen menempati sel grid; penempatan (grid-column/row) di-generate
   per elemen oleh LandingRenderer, termasuk versi tablet & HP-nya. */
.lb-el { display: flex; min-width: 0; }
.lb-el > * { width: 100%; min-width: 0; }

/* Latar section */
.lb-bg-white { background: #fff; }
.lb-bg-cream { background: var(--cream); }
.lb-bg-soft { background: linear-gradient(160deg, #fff 0%, var(--cream) 100%); }
.lb-bg-wine { background: linear-gradient(135deg, var(--wine), var(--wine-deep)); color: #fff; }
.lb-bg-dark { background: #1a1614; color: #fff; }
.lb-bg-gold { background: linear-gradient(135deg, #f6ecd9, var(--gold)); }

/* ---- Utilitas teks ---------------------------------------------------- */
.lb-align-left { text-align: left; }
.lb-align-center { text-align: center; }
.lb-align-right { text-align: right; }
.lb-color-ink { color: var(--ink); }
.lb-color-soft { color: var(--text-soft); }
.lb-color-wine { color: var(--wine); }
.lb-color-gold { color: #a8813f; }
.lb-color-white { color: #fff; }
.lb-color-green { color: var(--ok); }
.lb-muted { color: var(--text-soft); opacity: .8; }

.lb-h { margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.lb-font-serif { font-family: 'Fraunces', Georgia, serif; font-weight: 700; }
.lb-font-sans { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 700; }
.lb-h.lb-size-xl { font-size: clamp(1.9rem, 3.4cqw, 2.6rem); }
.lb-h.lb-size-lg { font-size: clamp(1.4rem, 2.4cqw, 1.85rem); }
.lb-h.lb-size-md { font-size: clamp(1.15rem, 1.8cqw, 1.35rem); }
.lb-h.lb-size-sm { font-size: 1.02rem; }

.lb-text { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.lb-text.lb-size-xl { font-size: 1.15rem; }
.lb-text.lb-size-lg { font-size: 1.05rem; }
.lb-text.lb-size-md { font-size: .96rem; }
.lb-text.lb-size-sm { font-size: .84rem; }

/* ---- Tombol ----------------------------------------------------------- */
.lb-btn-wrap { display: flex; align-items: flex-start; }
.lb-align-center.lb-btn-wrap { justify-content: center; }
.lb-align-right.lb-btn-wrap { justify-content: flex-end; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; font-weight: 700; border-radius: 999px; border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease; white-space: normal;
}
.lb-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(43,37,35,.16); }
.lb-btn-sm { padding: 8px 16px; font-size: .84rem; }
.lb-btn-md { padding: 11px 22px; font-size: .95rem; }
.lb-btn-lg { padding: 13px 28px; font-size: 1.03rem; }
.lb-btn-full { width: 100%; }
.lb-btn-primary { background: var(--wine); color: #fff; }
.lb-btn-outline { background: transparent; color: var(--wine); border-color: var(--wine); }
.lb-bg-wine .lb-btn-outline, .lb-bg-dark .lb-btn-outline { color: #fff; border-color: #fff; }
.lb-btn-gold { background: var(--gold); color: var(--wine-deep); }
.lb-btn-white { background: #fff; color: var(--wine); }

/* ---- Gambar & galeri --------------------------------------------------- */
.lb-img { display: block; width: 100%; height: 100%; }
.lb-fit-cover { object-fit: cover; }
.lb-fit-contain { object-fit: contain; }
.lb-radius-none { border-radius: 0; }
.lb-radius-sm { border-radius: 6px; }
.lb-radius-md { border-radius: 14px; }
.lb-radius-lg { border-radius: 26px; }
.lb-radius-full { border-radius: 50%; }
.lb-shadow { box-shadow: 0 18px 40px rgba(43,37,35,.18); }
.lb-img-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  border: 2px dashed var(--border); border-radius: 14px; color: var(--text-soft);
  font-size: .82rem; background: rgba(255,255,255,.5); text-align: center; padding: 10px;
}
.lb-gallery { display: grid; grid-template-columns: repeat(var(--g-d, 3), 1fr); width: 100%; }
.lb-gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.lb-gap-sm { gap: 6px; }
.lb-gap-md { gap: 12px; }
.lb-gap-lg { gap: 20px; }

/* ---- Badge ------------------------------------------------------------- */
.lb-badge {
  display: inline-block; align-self: flex-start; padding: 6px 14px; border-radius: 999px;
  font-weight: 700; font-size: .78rem; width: auto;
}
.lb-badge-gold { background: #fff3cd; color: #7a5b00; border: 1px solid #f2dfa0; }
.lb-badge-wine { background: var(--wine); color: #fff; }
.lb-badge-green { background: #eaf6ee; color: var(--ok); }
.lb-badge-soft { background: rgba(43,37,35,.08); color: var(--ink); }

/* ---- Kartu fitur / langkah --------------------------------------------- */
.lb-card { padding: 20px; border-radius: 14px; height: 100%; }
.lb-cardbg-white { background: #fff; }
.lb-cardbg-cream { background: var(--cream); }
.lb-cardbg-none { background: transparent; }
.lb-cardbg-green { background: #eaf6ee; }
.lb-cardbg-red { background: #fdecea; }
.lb-bordered { border: 1px solid var(--border); }
.lb-card-icon { font-size: 1.7rem; margin-bottom: 8px; line-height: 1; }
.lb-card-num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--wine); color: #fff; font-weight: 700; margin-bottom: 10px;
}
.lb-align-center .lb-card-num, .lb-card.lb-align-center .lb-card-icon { margin-left: auto; margin-right: auto; }
.lb-card-title { margin: 0 0 6px; font-size: 1.05rem; }
.lb-card-text { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.55; }
.lb-bg-wine .lb-cardbg-none .lb-card-text, .lb-bg-dark .lb-cardbg-none .lb-card-text { color: rgba(255,255,255,.85); }

/* ---- Daftar centang ----------------------------------------------------- */
.lb-list { padding: 22px; border-radius: 14px; height: 100%; }
.lb-list-title { margin: 0 0 12px; font-size: 1.05rem; }
.lb-list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lb-list-items li { position: relative; padding-left: 26px; font-size: .92rem; line-height: 1.5; }
.lb-list-items li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lb-listicon-check li::before { content: "✓"; color: var(--ok); }
.lb-listicon-cross li::before { content: "✕"; color: var(--danger); }
.lb-listicon-dot li::before { content: "•"; color: currentColor; opacity: .55; font-size: 1.2em; line-height: 1; }
.lb-listicon-number { counter-reset: lbn; }
.lb-listicon-number li { counter-increment: lbn; }
.lb-listicon-number li::before { content: counter(lbn) "."; color: var(--wine); }

/* ---- Kartu harga --------------------------------------------------------- */
.lb-price {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 22px; height: 100%; display: flex; flex-direction: column;
}
.lb-price-featured { border: 2px solid var(--gold); box-shadow: 0 16px 36px rgba(212,180,131,.3); }
.lb-price-ribbon {
  position: absolute; top: -13px; left: 20px; background: var(--wine); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 5px 14px; border-radius: 999px;
}
.lb-price h3 { margin: 0 0 6px; font-size: 1.1rem; }
.lb-price-strike { margin: 0; color: var(--text-soft); text-decoration: line-through; font-size: 1rem; }
.lb-price-value { margin: 2px 0 10px; font-size: 2rem; font-weight: 800; color: var(--wine); line-height: 1.15; }
.lb-price-value span { font-size: .78rem; font-weight: 500; color: var(--text-soft); }
.lb-price-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.lb-price-list li { position: relative; padding-left: 22px; }
.lb-price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.lb-price .lb-btn { margin-top: auto; }
.lb-price-note { margin: 10px 0 0; font-size: .76rem; color: var(--text-soft); }

/* ---- FAQ ----------------------------------------------------------------- */
.lb-faq { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lb-faq details { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; }
.lb-faq summary { font-weight: 700; cursor: pointer; list-style: none; padding-right: 24px; position: relative; }
.lb-faq summary::-webkit-details-marker { display: none; }
.lb-faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 1.2rem; color: var(--wine); }
.lb-faq details[open] summary::after { content: "–"; }
.lb-faq p { margin: 10px 0 0; color: var(--text-soft); font-size: .9rem; line-height: 1.55; }

/* ---- Testimoni ------------------------------------------------------------ */
.lb-testi {
  margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; height: 100%; display: flex; flex-direction: column; gap: 10px;
}
.lb-testi-stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; }
.lb-testi blockquote { margin: 0; font-size: .93rem; line-height: 1.6; }
.lb-testi figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.lb-testi figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lb-testi figcaption span { display: flex; flex-direction: column; font-size: .85rem; }
.lb-testi figcaption em { font-style: normal; color: var(--text-soft); font-size: .78rem; }

/* ---- Video ---------------------------------------------------------------- */
.lb-video { width: 100%; border-radius: 14px; overflow: hidden; background: #000; }
.lb-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Mockup HP -------------------------------------------------------------- */
.lb-phone {
  width: 100%; max-width: 250px; margin: 0 auto; border: 10px solid var(--ink); border-radius: 32px;
  background: #fff; box-shadow: 0 24px 50px rgba(43,37,35,.22); overflow: hidden; position: relative;
}
.lb-phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 16px; background: var(--ink); border-radius: 0 0 10px 10px; }
.lb-phone-screen { padding: 28px 14px 16px; text-align: center; background: linear-gradient(180deg, #fff, var(--cream)); }
.lb-mock-avatar {
  width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wine), var(--gold)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Fraunces', serif;
}
.lb-mock-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: .98rem; color: var(--ink); }
.lb-mock-tagline { font-size: .72rem; color: var(--text-soft); margin-bottom: 12px; }
.lb-mock-tabs { display: flex; gap: 6px; background: #f2eee4; border-radius: 999px; padding: 3px; margin-bottom: 10px; }
.lb-mock-tabs span { flex: 1; padding: 6px 0; font-size: .7rem; font-weight: 700; border-radius: 999px; color: var(--text-soft); }
.lb-mock-tabs span.active { background: var(--wine); color: #fff; }
.lb-mock-link {
  display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 11px; margin-bottom: 7px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: .76rem;
  font-weight: 600; color: var(--ink);
}
.lb-mock-badge { margin-top: 10px; font-size: .6rem; color: var(--text-soft); }

/* ---- Pemisah ------------------------------------------------------------------ */
.lb-divider { align-self: center; width: 100%; }
.lb-divider-line { border-top: 1px solid currentColor; opacity: .25; }
.lb-divider-dots { height: 6px; background-image: radial-gradient(currentColor 1.5px, transparent 2px); background-size: 14px 6px; opacity: .4; }
.lb-divider-gradient { height: 3px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .35; border-radius: 3px; }


/* =======================================================================
   Penyesuaian per lebar KANVAS -- memakai container query, bukan media
   query. Bedanya krusial: di editor panel admin, kanvas "HP" hanya selebar
   378px walau layar admin lebar. Dengan container query, gaya versi HP
   tetap aktif di dalam kanvas itu, sehingga yang dilihat admin saat
   menyusun benar-benar sama dengan hasil di HP sungguhan.
   ======================================================================= */
@container (max-width: 1024px) {
  .lb-canvas { --lb-row: 32px; padding: 22px 18px; }
  .lb-gallery { grid-template-columns: repeat(var(--g-t, 2), 1fr); }
}
@container (max-width: 640px) {
  .lb-canvas { --lb-row: 30px; padding: 18px 16px; }
  .lb-gallery { grid-template-columns: repeat(var(--g-m, 2), 1fr); }
  .lb-price { padding: 22px 18px; }
  .lb-card, .lb-list { padding: 18px; }
}