/* =====================================================================================
   Beranda panel SaaS — tema "Terang Editorial" (terinspirasi tata letak situs billing modern: bersih, banyak ruang, kartu datar,
   label monospasi, tombol gelap). Hanya untuk beranda (body.is-landing tanpa .is-auth); halaman masuk/daftar tidak berubah.
   Dimuat SETELAH beranda.css dan menimpanya.
   ===================================================================================== */
body.is-landing:not(.is-auth) {
  --ink: #1c1c1c; --soft: #5b6270; --paper: #ffffff; --mist: #f6f7f6; --line: #e6e8e6;
  --teal: #0d9488; --accent: #f59e0b;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 14px;
  background: #fbfcfa; color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body.is-landing:not(.is-auth) h1, body.is-landing:not(.is-auth) h2, body.is-landing:not(.is-auth) h3, body.is-landing:not(.is-auth) .lp-btn, body.is-landing:not(.is-auth) .bar nav a { font-family: inherit; }
body.is-landing:not(.is-auth) .lp-grad, body.is-landing:not(.is-auth) .lp-grad.dark { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--teal); animation: none; }
body.is-landing:not(.is-auth) code { background: #eef1ee; color: var(--ink); border: 1px solid var(--line); }
body.is-landing:not(.is-auth) code span { color: var(--teal); }

/* ---------- Navigasi: bilah putih tetap di atas ---------- */
body.is-landing:not(.is-auth) .bar, body.is-landing:not(.is-auth) .bar.scrolled { position: sticky; top: 0; background: rgba(251, 252, 250, 0.92); border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(10px); }
body.is-landing:not(.is-auth) .bar-in { padding-block: 12px; }
body.is-landing:not(.is-auth) .bar .logo { color: var(--ink); }
body.is-landing:not(.is-auth) .brand-mark { box-shadow: none; }
body.is-landing:not(.is-auth) .brand-word .hy { background: none; color: #ea580c; }
body.is-landing:not(.is-auth) .bar nav { gap: 22px; }
body.is-landing:not(.is-auth) .bar nav a { color: #3b4250; font-weight: 600; font-size: 0.93rem; }
body.is-landing:not(.is-auth) .bar nav a:hover { color: var(--ink); }
body.is-landing:not(.is-auth) .bar nav a.btn { background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 10px; box-shadow: none; }
body.is-landing:not(.is-auth) .bar nav a.btn:hover { background: #000; color: #fff; }

/* ---------- Tombol ---------- */
body.is-landing:not(.is-auth) .lp-btn { background: var(--ink); color: #fff; box-shadow: none; padding: 13px 22px; border-radius: 11px; }
body.is-landing:not(.is-auth) .lp-btn::after { display: none; }
body.is-landing:not(.is-auth) .lp-btn:hover { background: #000; transform: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
body.is-landing:not(.is-auth) .lp-btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
body.is-landing:not(.is-auth) .lp-btn.ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
body.is-landing:not(.is-auth) .lp-btn.line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
body.is-landing:not(.is-auth) .lp-btn.line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
body.is-landing:not(.is-auth) .lp-btn.light { background: #fff; color: var(--ink); box-shadow: none; }
body.is-landing:not(.is-auth) .lp-btn.light:hover { background: #f1f3f1; }

/* label kecil bergaya monospasi */
body.is-landing:not(.is-auth) .lp-eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: var(--teal); }
body.is-landing:not(.is-auth) .lp-eyebrow.light { color: var(--teal); }

/* ---------- Hero ---------- */
body.is-landing:not(.is-auth) .lp-hero { color: var(--ink); background: #fbfcfa; border-bottom: 1px solid var(--line); padding-top: 56px; }
body.is-landing:not(.is-auth) .lp-blobs { display: none; }
body.is-landing:not(.is-auth) .lp-hero-in { padding-bottom: 56px; gap: 48px; }
body.is-landing:not(.is-auth) .lp-pill { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; color: var(--teal); background: #fff; border: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-pill svg { color: var(--accent); }
body.is-landing:not(.is-auth) .lp-hero h1 { color: var(--ink); font-weight: 800; letter-spacing: -0.035em; }
body.is-landing:not(.is-auth) .lp-lead { color: var(--soft); }
body.is-landing:not(.is-auth) .lp-checks { color: var(--soft); }
body.is-landing:not(.is-auth) .lp-checks svg { color: var(--teal); }

/* jendela aplikasi (mockup) terang, tanpa miring */
body.is-landing:not(.is-auth) .lp-mock { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(28, 28, 28, 0.1), 0 2px 6px rgba(28, 28, 28, 0.05); transform: none; animation: none; }
body.is-landing:not(.is-auth) .lp-mock-bar { background: #f6f7f6; border-bottom: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-mock-bar span { color: #6b7280; background: #fff; border: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-mock-side { background: #f6f7f6; border-right: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-mock-side b { background: #e6e9e6; }
body.is-landing:not(.is-auth) .lp-mock-side b.on { background: var(--teal); box-shadow: none; animation: none; }
body.is-landing:not(.is-auth) .lp-mock-tiles div { border: 1px solid var(--line); background: #fff; }
body.is-landing:not(.is-auth) .lp-mock-tiles .t1 { background: #e8f7ee; } body.is-landing:not(.is-auth) .lp-mock-tiles .t2 { background: #efeafd; } body.is-landing:not(.is-auth) .lp-mock-tiles .t3 { background: #fdecef; }
body.is-landing:not(.is-auth) .lp-mock-tiles small { color: #5b6270; } body.is-landing:not(.is-auth) .lp-mock-tiles strong { color: var(--ink); }
body.is-landing:not(.is-auth) .lp-mock-chart { background: #f6f7f6; border: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-mock-chart span { background: #2dd4bf; } body.is-landing:not(.is-auth) .lp-mock-chart span:nth-child(even) { background: #a78bfa; }
body.is-landing:not(.is-auth) .lp-mock-rows p { background: #eceeec; }
body.is-landing:not(.is-auth) .lp-toast { border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(28, 28, 28, 0.12); animation: none; }
body.is-landing:not(.is-auth) .lp-toast .dot.ok { background: #059669; } body.is-landing:not(.is-auth) .lp-toast .dot.wa { background: #16a34a; } body.is-landing:not(.is-auth) .lp-toast .dot.warn { background: #7c3aed; }

body.is-landing:not(.is-auth) .lp-marquee { background: #fff; border-top: 0; border-bottom: 0; }
body.is-landing:not(.is-auth) .lp-hero .lp-marquee { border-top: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-track span { color: #3b4250; background: #f6f7f6; border-color: var(--line); font-family: var(--mono); font-size: 0.78rem; font-weight: 600; }

/* ---------- Angka ---------- */
body.is-landing:not(.is-auth) .lp-stats { background: #fff; }
body.is-landing:not(.is-auth) .lp-stats strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; }

/* ---------- Bagian umum ---------- */
body.is-landing:not(.is-auth) .lp-sec { padding-block: 84px; }
body.is-landing:not(.is-auth) .lp-sec.alt { background: #f6f7f6; border-block: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-head h2 { font-weight: 800; letter-spacing: -0.03em; }

/* kartu layanan: datar, ikon pastel */
body.is-landing:not(.is-auth) .lp-card { border-radius: var(--radius); box-shadow: none; }
body.is-landing:not(.is-auth) .lp-card::before { display: none; }
body.is-landing:not(.is-auth) .lp-card:hover { transform: none; box-shadow: none; border-color: var(--ink); background: var(--paper); }
body.is-landing:not(.is-auth) .lp-ic { color: var(--hue); background: var(--tint); box-shadow: none; }
body.is-landing:not(.is-auth) .lp-card:hover .lp-ic { transform: none; }

/* portal per peran: panel terang */
body.is-landing:not(.is-auth) .lp-dark { background: #fff; color: var(--ink); border-block: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-dark .lp-head h2 { color: var(--ink); }
body.is-landing:not(.is-auth) .lp-roles { background: #fbfcfa; border: 1px solid var(--line); border-radius: 18px; }
body.is-landing:not(.is-auth) .lp-tabs { border-bottom: 1px solid var(--line); padding: 8px 8px 0; gap: 2px; }
body.is-landing:not(.is-auth) .lp-tabs button { color: #5b6270; border-radius: 10px 10px 0 0; padding: 10px 18px; }
body.is-landing:not(.is-auth) .lp-tabs button:hover { color: var(--ink); background: #f1f3f1; }
body.is-landing:not(.is-auth) .lp-tabs button.on { color: var(--ink); background: #fff; box-shadow: inset 0 -2px 0 var(--teal); }
body.is-landing:not(.is-auth) .lp-pane h3 { color: var(--ink); }
body.is-landing:not(.is-auth) .lp-pane li { color: #3b4250; }
body.is-landing:not(.is-auth) .lp-pane li svg { color: #fff; background: var(--teal); }
body.is-landing:not(.is-auth) .lp-phone { background: #fff; border: 6px solid #e6e9e6; box-shadow: 0 24px 50px rgba(28, 28, 28, 0.12); }
body.is-landing:not(.is-auth) .lp-phone-top { color: var(--ink); border-bottom-color: var(--line); }
body.is-landing:not(.is-auth) .lp-phone-kpi div { background: #e8f7ee; } body.is-landing:not(.is-auth) .lp-phone-kpi div:nth-child(2) { background: #efeafd; }
body.is-landing:not(.is-auth) .lp-phone-kpi small { color: #5b6270; } body.is-landing:not(.is-auth) .lp-phone-kpi strong { color: var(--ink); }
body.is-landing:not(.is-auth) .lp-phone p { background: #eceeec; }

/* fitur: daftar baris bergaris (dua kolom) */
body.is-landing:not(.is-auth) .lp-feats { gap: 0 40px; grid-template-columns: repeat(2, 1fr); }
body.is-landing:not(.is-auth) .lp-feat { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 20px 0; }
body.is-landing:not(.is-auth) .lp-feat:hover { transform: none; box-shadow: none; border-color: var(--line); }
body.is-landing:not(.is-auth) .lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: none; margin-top: 8px; }

/* langkah bernomor besar */
body.is-landing:not(.is-auth) .lp-steps { gap: 0; }
body.is-landing:not(.is-auth) .lp-steps::before { display: none; }
body.is-landing:not(.is-auth) .lp-steps li { background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 22px 28px 8px 0; text-align: left; }
body.is-landing:not(.is-auth) .lp-steps li::before { position: static; transform: none; display: block; width: auto; height: auto; margin-bottom: 18px; background: none; box-shadow: none; color: var(--teal); font-family: var(--mono); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; content: "0" counter(lp); }

/* harga: kartu datar, yang populer berbingkai tebal */
body.is-landing:not(.is-auth) .lp-plan { border-radius: 16px; box-shadow: none; }
body.is-landing:not(.is-auth) .lp-plan:hover { transform: none; box-shadow: none; }
body.is-landing:not(.is-auth) .lp-plan.pop, .js body.is-landing:not(.is-auth) .lp-plan.pop.rv.in { color: var(--ink); background: #fff; border: 2px solid var(--ink); box-shadow: 0 18px 40px rgba(28, 28, 28, 0.08); transform: none; }
body.is-landing:not(.is-auth) .lp-plan.pop:hover { transform: none; }
body.is-landing:not(.is-auth) .lp-plan.pop h3, body.is-landing:not(.is-auth) .lp-plan.pop .lp-price { color: var(--ink); }
body.is-landing:not(.is-auth) .lp-plan.pop .lp-limit, body.is-landing:not(.is-auth) .lp-plan.pop .lp-price span { color: var(--soft); }
body.is-landing:not(.is-auth) .lp-plan.pop li svg { color: var(--teal); }
body.is-landing:not(.is-auth) .lp-badge { background: var(--ink); color: #fff; box-shadow: none; font-family: var(--mono); font-weight: 600; }
body.is-landing:not(.is-auth) .lp-badge.alt { background: var(--teal); }
body.is-landing:not(.is-auth) .lp-price { font-weight: 800; }
body.is-landing:not(.is-auth) .lp-terms button.on { background: var(--ink); color: #fff; }

/* FAQ */
body.is-landing:not(.is-auth) .lp-faq details { border-radius: 12px; }
body.is-landing:not(.is-auth) .lp-faq details[open] { border-color: var(--ink); box-shadow: none; }
body.is-landing:not(.is-auth) .lp-faq summary::after { background: #f1f3f1; color: var(--ink); }
body.is-landing:not(.is-auth) .lp-faq details[open] summary::after { content: "–"; background: var(--ink); color: #fff; transform: translateY(-50%); }
body.is-landing:not(.is-auth) .lp-shield { color: #0f766e; background: #e8f7ee; }

/* penutup & footer terang */
body.is-landing:not(.is-auth) .lp-final { background: var(--ink); color: #fff; animation: none; }
body.is-landing:not(.is-auth) .lp-final p { color: #c9ccd1; }
body.is-landing:not(.is-auth) .lp-foot { background: #f6f7f6; color: #5b6270; border-top: 1px solid var(--line); }
body.is-landing:not(.is-auth) .lp-foot strong, body.is-landing:not(.is-auth) .lp-foot nav b { color: var(--ink); font-family: var(--mono); font-size: 0.75rem; }
body.is-landing:not(.is-auth) .lp-foot a { color: #3b4250; }
body.is-landing:not(.is-auth) .lp-foot a:hover { color: var(--teal); }
body.is-landing:not(.is-auth) .lp-copy { color: #6b7280; border-top-color: var(--line); }
body.is-landing:not(.is-auth) .lp-foot-brand { color: var(--ink); }

@media (max-width: 900px) {
  body.is-landing:not(.is-auth) .bar { position: sticky; }
  body.is-landing:not(.is-auth) .nav-toggle { background: #fff; border-color: var(--line); }
  body.is-landing:not(.is-auth) .nav-toggle span { background: var(--ink); }
  .js body.is-landing:not(.is-auth) .bar nav.open { background: #fbfcfa; border-bottom: 1px solid var(--line); }
  body.is-landing:not(.is-auth) .lp-feats { grid-template-columns: 1fr; }
  body.is-landing:not(.is-auth) .lp-steps li { padding-right: 0; }
}