/**
 * landing.css
 * Styling untuk landingScreen.js & pricingScreen.js — dua layar PRA-LOGIN
 * baru yang tampil sebelum layar login lama (lihat auth.css untuk
 * .auth-card/.auth-gate-screen, dipakai mulai langkah "login").
 *
 * Beda pendekatan dari auth.css: di sana kontennya kartu kecil menempel ke
 * bawah layar di atas foto background. Di sini kontennya halaman PENUH yang
 * di-scroll (landing SaaS standar: hero, grid fitur, cara kerja, CTA,
 * footer) — jadi dipasang sebagai anak dari .auth-gate-content dengan
 * layout sendiri, latar polos (var(--bg-gradient), bukan foto), supaya
 * teks & grid tetap terbaca jelas.
 */

.landing-scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-gradient);
  -webkit-overflow-scrolling: touch;
}

/* ---- Nav ----
   Grid 3 kolom (bukan flex space-between) supaya elemen TENGAH (tab
   Beranda/Harga, atau logo di varian tombol-Kembali pricingScreen.js) selalu
   center betul terlepas dari lebar elemen kiri/kanan yang beda-beda. */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  max-width: 960px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--panel) 46%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, #fff 40%, transparent);
}
[data-theme="dark"] .landing-nav {
  background: color-mix(in srgb, var(--panel) 42%, transparent);
  border-bottom-color: color-mix(in srgb, #fff 12%, transparent);
}
.landing-nav-logo { height: 26px; width: auto; object-fit: contain; justify-self: start; }
.landing-nav-login { white-space: nowrap; justify-self: end; }
/* "Masuk" ditonjolkan dengan warna aksen (signal) supaya jelas ini bagian
   yang bisa di-tap, bukan cuma teks biasa — sisanya ("Sudah punya akun?")
   tetap warna teks normal sebagai konteks. */
.landing-nav-login-highlight { color: var(--signal); font-weight: 600; }
.pricing-back-btn { justify-self: start; }
.pricing-nav-spacer { width: 1px; justify-self: end; } /* jaga logo tetap center walau tombol back lebih pendek dari tombol login */

/* ---- Nav tabs (Beranda / Harga) ----
   Toggle di tengah header, dipakai di landingScreen.js & pricingScreen.js
   (varian showTabs: true) supaya pengunjung bisa pindah antar dua halaman
   pra-login kapan saja tanpa harus scroll balik ke atas. */
.landing-nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--panel-2, var(--panel));
  border: 1px solid var(--border);
  justify-self: center;
}
.landing-nav-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.landing-nav-tab:hover { color: var(--text); }
.landing-nav-tab-active {
  background: var(--gradient-signal);
  color: #fff;
}
.landing-nav-tab-active:hover { color: #fff; }
@media (max-width: 420px) {
  .landing-nav-tab { padding: 6px 10px; font-size: 11.5px; }
  .landing-nav-login-text { display: none; } /* di layar sempit cukup tampilkan "Masuk" saja */
}

/* ---- Hero ---- */
.landing-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  text-align: center;
}
.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--signal-soft);
  color: var(--signal-deep);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
[data-theme="dark"] .landing-eyebrow {
  background: color-mix(in srgb, var(--signal) 18%, transparent);
  color: var(--signal-2);
}
.landing-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
  color: var(--text);
}
.landing-hero-title em {
  font-style: normal;
  background: var(--gradient-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.landing-hero-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 auto var(--sp-5);
  max-width: 560px;
}
.landing-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.landing-cta-btn {
  justify-content: center;
  padding: 12px 26px;
  font-size: 14.5px;
}
.landing-demo-btn {
  justify-content: center;
  padding: 10px 22px;
  text-decoration: none;
}
.landing-hero-hint {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* ---- Hero dengan foto latar (varian "landing-hero-media" + kartu kaca) ----
   Dipakai ketika admin mengunggah foto ke slot "landing" (lihat
   authBackgroundManager.js di sisi admin) — foto tampil aspek rasio 2:3
   full-bleed tanpa celah (background-size: cover; sedikit crop kalau
   rasio asli fotonya tidak persis 2:3, tapi tidak ada spasi/padding kosong
   di sisi kiri-kanan) di bagian paling atas, dengan judul/CTA dipindah ke
   kartu glassmorphism KECIL yang
   menumpuk di atas bagian bawah foto (bukan panel lebar penuh yang
   menyambung ke section berikutnya). Kalau admin belum unggah apa-apa,
   markup ini tidak dirender sama sekali (lihat landingScreen.js), jadi
   tampilan otomatis kembali ke hero polos di atas seperti sebelumnya. */
.landing-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.landing-hero-media-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: -6%;
  height: 112%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.landing-hero-media-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.32) 85%);
  pointer-events: none;
}
/* Wadah luar cuma ngatur inset kiri/kanan (jarak dari tepi layar) + jarak
   vertikal: overlap secukupnya ke foto di atas, DAN margin-bottom supaya
   kartu tidak menempel/menyatu dengan section fitur di bawahnya. */
.landing-hero-glass-wrap {
  position: relative;
  z-index: 2;
  padding: 0 var(--sp-4);
  margin-top: -56vw;
  margin-bottom: var(--sp-6);
}
/* Style dasar kaca (dipakai bareng oleh kartu kaca hero DAN kartu kaca
   "Cara kerjanya" yang menumpuk di atas strip foto kedua — lihat
   .landing-hero-glass & .landing-mid-glass di bawah) — kecil-besarnya
   ukuran/padding beda per pemakaian, tapi warna/blur/border/shadow-nya
   sama supaya terasa satu bahasa visual "kaca" yang konsisten. */
.landing-glass-surface {
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 46%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid color-mix(in srgb, #fff 40%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .landing-glass-surface {
  background: color-mix(in srgb, var(--panel) 42%, transparent);
  border-color: color-mix(in srgb, #fff 12%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.landing-hero-glass {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
/* Teks di dalam kartu kaca dibuat lebih ringkas (deskripsi lebih kecil,
   jarak antar elemen lebih rapat) supaya kartunya betul-betul kecil,
   bukan setinggi hero polos biasa. */
.landing-hero-in-glass {
  padding: 0;
  max-width: none;
}
.landing-hero-in-glass .landing-hero-title {
  font-size: clamp(22px, 5.5vw, 32px);
  margin-bottom: var(--sp-3);
}
.landing-hero-in-glass .landing-hero-desc {
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: var(--sp-4);
}

/* ---- Kartu kaca "Cara kerjanya" (menumpuk di atas strip foto KEDUA,
   landingMid) ----
   Pola sama dengan hero: wadah luar ngatur inset + overlap ke foto di
   atasnya lewat margin-top negatif (satuan vw, proporsional ke tinggi foto
   — lihat .landing-hero-glass-wrap), kartu kaca beneran cuma dari
   .landing-glass-surface + max-width/padding sendiri di sini. Overlap-nya
   sengaja lebih kecil dibanding hero (kartu ini jauh lebih tinggi isinya —
   3 langkah lengkap dengan penjelasan — jadi cukup bagian ATASNYA saja yang
   menumpuk ke foto, sisanya jatuh normal ke background halaman). Section
   ini hanya dirender kalau admin sudah mengisi slot landingMid (lihat
   landingScreen.js) — kalau kosong, "Cara kerjanya" balik ke section polos
   alt-background biasa (.landing-section-alt), tanpa foto/kaca. */
.landing-mid-glass-wrap {
  position: relative;
  z-index: 2;
  padding: 0 var(--sp-4);
  margin-top: -30vw;
  margin-bottom: var(--sp-6);
}
.landing-mid-glass {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
}

/* ---- Section umum ---- */
.landing-section {
  padding: var(--sp-6) var(--sp-5);
  max-width: 960px;
  margin: 0 auto;
}
.landing-section-alt {
  background: var(--panel-alt);
  max-width: none;
  border-radius: var(--radius-lg);
  margin: 0 var(--sp-4) var(--sp-6);
  padding: var(--sp-6) var(--sp-5);
}
@media (min-width: 700px) {
  .landing-section-alt { margin: 0 auto var(--sp-6); max-width: 920px; }
}
.landing-section-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--sp-5);
}
.landing-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 26px);
  margin: 0 0 var(--sp-2);
  color: var(--text);
}
.landing-section-head p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ---- Grid fitur ---- */
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--sp-4);
}
.landing-feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--elevation-1);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
/* Kartu bergambar: teks di kiri, gambar persegi rounded di kanan. */
.landing-feature-card.has-media {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.landing-feature-body { flex: 1; min-width: 0; }
.landing-feature-media {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--elevation-1);
  background: var(--panel-alt);
}
@media (max-width: 360px) {
  .landing-feature-media { width: 80px; height: 80px; }
}
.landing-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}
.landing-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gradient-signal);
  color: #fff;
  box-shadow: var(--elevation-signal);
  margin-bottom: var(--sp-3);
}
.landing-feature-card h3 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.landing-feature-card p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Cara kerja / steps ---- */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.landing-step-card { text-align: center; padding: 0 var(--sp-2); }
.landing-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--panel);
  border: 1.5px solid var(--signal);
  color: var(--signal-deep);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: var(--sp-3);
}
[data-theme="dark"] .landing-step-num { color: var(--signal-2); }
.landing-step-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.landing-step-card p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ---- CTA akhir ---- */
.landing-final-cta {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}
.landing-final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 26px);
  margin: 0 0 var(--sp-2);
  color: var(--text);
}
.landing-final-cta p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}

.landing-footer {
  text-align: center;
  padding: var(--sp-5);
  font-size: 12px;
  color: var(--text-faint);
}
.landing-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
}
.landing-footer-links a {
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-footer-links a:hover { color: var(--signal-deep); }

/* =====================================================================
   Pricing screen (pricingScreen.js)
   ===================================================================== */
.pricing-back-btn { white-space: nowrap; }

.pricing-head {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  text-align: center;
}
.pricing-head h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 30px);
  margin: 0 0 var(--sp-3);
  color: var(--text);
}
.pricing-head p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-5);
  align-items: start;
}

.pricing-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  box-shadow: var(--elevation-1);
  display: flex;
  flex-direction: column;
}
.pricing-card.is-highlight {
  border-color: var(--signal);
  box-shadow: var(--elevation-3);
  transform: translateY(-4px);
}
@media (max-width: 699px) {
  .pricing-card.is-highlight { transform: none; }
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-signal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: var(--elevation-signal);
  white-space: nowrap;
}

.pricing-card-name {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0 0 4px;
  color: var(--text);
}
.pricing-card-tagline {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
  min-height: 32px;
}
.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.pricing-card-price-main {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--signal);
}
.pricing-card-price-note {
  font-size: 11.5px;
  color: var(--text-faint);
}
/* Daftar harga per durasi (1 Bulan / 6 Bulan / 1 Tahun) di kartu Lite & Pro,
   diisi dari paket buatan admin oleh hydratePlanPrices() (planCards.js). */
.pricing-card-price.pricing-card-price--list {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  animation: pricing-duration-in var(--duration-base, 200ms) var(--ease-out, ease-out) both;
}
.pricing-duration-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-duration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 11px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pricing-duration-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.pricing-duration-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.pricing-duration-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--signal);
  text-align: right;
  white-space: nowrap;
}
/* Harga coret ditumpuk DI ATAS harga akhir (bukan sebaris) supaya baris
   tetap muat di kartu sempit walau angkanya jutaan + ada badge diskon. */
.pricing-duration-saving {
  margin-top: 2px;
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
}
.pricing-duration-original {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
}
@keyframes pricing-duration-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card-price.pricing-card-price--list { animation: none; }
}

.pricing-select-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.pricing-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pricing-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.pricing-feature-yes { color: var(--text); }
.pricing-feature-yes svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }
.pricing-feature-no { color: var(--text-faint); }
.pricing-feature-no svg { color: var(--text-faint); flex-shrink: 0; margin-top: 2px; }

.pricing-footnote {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-6);
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.6;
}


/* ---- Tombol "Produk lain" + dropdown (otherProductsMenu.js) ----
   Tombol ikut di dalam pill tab (kanan "Harga"), tampil hanya kalau admin
   sudah mengisi produk. Menu di-portal ke <body>, jadi z-index-nya harus di
   atas #auth-gate (z-modal) tapi tetap di bawah toast. */
.landing-nav-more { display: inline-flex; align-items: center; gap: 4px; }
.landing-nav-more[hidden] { display: none; }
.landing-nav-more-caret { transition: transform 0.18s ease; }
.landing-nav-more.open { color: var(--text); }
.landing-nav-more.open .landing-nav-more-caret { transform: rotate(180deg); }

.opm-menu {
  position: fixed;
  z-index: calc(var(--z-modal) + 20);
  overflow-y: auto;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--elevation-3);
  animation: opm-in 0.16s var(--ease-out);
}
.opm-menu[hidden] { display: none; }
.opm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px; /* target sentuh nyaman */
  padding: 8px 12px;
  border-radius: 13px;
  color: var(--text);
  text-decoration: none;
}
.opm-item:hover, .opm-item:focus-visible { background: var(--panel-alt); outline: none; }
.opm-item:active { background: color-mix(in srgb, var(--signal) 12%, var(--panel)); }
.opm-item > .icon { flex: 0 0 16px; color: var(--text-faint); }
.opm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.opm-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opm-host { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes opm-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Header jadi 3 tab — di layar sempit logo & "Masuk" dirapatkan supaya muat satu baris. */
@media (max-width: 520px) {
  .landing-nav.has-more {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: var(--sp-3);
  }
  .landing-nav.has-more .landing-nav-logo { height: 20px; }
  .landing-nav.has-more .landing-nav-tab { padding: 6px 8px; font-size: 11px; }
  .landing-nav.has-more .landing-nav-more { gap: 3px; }
  .landing-nav.has-more .landing-nav-login { padding: 5px 6px; }
  .landing-nav.has-more .landing-nav-login-text { display: none; }
}
@media (max-width: 340px) {
  .landing-nav.has-more .landing-nav-tab { padding: 6px 6px; font-size: 10.5px; }
  .landing-nav.has-more .landing-nav-logo { height: 18px; }
}


/* ---- FAQ (accordion native <details>, tanpa JS) ---- */
.landing-faq-list {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.landing-faq-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--elevation-1);
}
.landing-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--signal);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.landing-faq-item[open] summary::after { transform: rotate(45deg); }
.landing-faq-item p {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---- Bagian "Kenapa WhatsApp?" ---- */
.landing-wa-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--signal-deep); background: var(--signal-soft);
  padding: 4px 10px; border-radius: 999px; margin-bottom: var(--sp-3);
}
.landing-wa-body {
  display: grid; gap: var(--sp-5); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .landing-wa-body { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--sp-6); }
}
/* Mockup chat WhatsApp. Warna sengaja mengikuti nuansa WhatsApp, bukan token tema. */
.landing-wa-chat {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--elevation-1);
  max-width: 360px; width: 100%; margin: 0 auto; background: #efeae2;
}
.landing-wa-chat-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3); background: #008069; color: #fff;
}
.landing-wa-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.22);
}
.landing-wa-chat-name { font-weight: 600; font-size: 14px; }
.landing-wa-chat-sub { font-size: 11px; opacity: 0.8; margin-left: auto; }
.landing-wa-chat-body { padding: var(--sp-3); display: flex; justify-content: flex-end; }
.landing-wa-bubble {
  position: relative; background: #d9fdd3; color: #111b21;
  border-radius: 10px 0 10px 10px; padding: 8px 10px 18px;
  font-size: 12.5px; line-height: 1.5; max-width: 94%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.landing-wa-bubble p { margin: 0 0 6px; }
.landing-wa-bubble p:last-of-type { margin-bottom: 0; }
.landing-wa-time { position: absolute; right: 8px; bottom: 3px; font-size: 10px; color: #667781; }
[data-theme="dark"] .landing-wa-chat { background: #0b141a; border-color: var(--border); }
[data-theme="dark"] .landing-wa-chat-head { background: #1f2c34; }
[data-theme="dark"] .landing-wa-bubble { background: #005c4b; color: #e9edef; }
[data-theme="dark"] .landing-wa-time { color: #8fb3aa; }

.landing-wa-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.landing-wa-benefits li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.landing-wa-benefits h3 { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.landing-wa-benefits p { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.landing-wa-note {
  text-align: center; margin: var(--sp-5) 0 0;
  font-size: 12.5px; font-weight: 600; color: var(--signal-deep);
}
.landing-wa-benefits .landing-feature-icon { margin-bottom: 0; flex-shrink: 0; width: 36px; height: 36px; }