/* static/landing.css — landing hosting.dalang.io (publik/harga.html).
   SALINAN SETIA dari CSS draf v21 yang disetujui pemilik
   (docs/drafts/landing-v21/landing.html, 2026-10-13). Bedanya hanya:
   - pemilih periode memakai <a> (tautan ?period=, tanpa JS), bukan <button>;
   - aturan khusus draf (.draft/.tbd/harga coret .was) dibuang;
   - tambahan di bagian bawah untuk blok yang datang dari data asli
     (promo, tabel, keandalan, bahasa, footer kebijakan).
   Ubah tampilan di draf dulu (bersama pemilik), baru salin ke sini.
   Hanya dimuat oleh halaman landing; <body class="lp">. */
/* Layout: sub-produk dalang.io. Bahasa visual induk (putih, garis hitam 2px, bayangan offset, kuning #facc15, Plus Jakarta Sans).
   Header induk + bilah produk "Hosting" → hero dengan struk → tangga paket → harga → "naik kelas di ekosistem Dalang" → FAQ → footer induk. */
:root {
  --bg: #faf8f2;
  --soft: #fbf6e3;
  --muted-surface: #f1eee5;
  --surface: #fffdf8;
  --ink: #1c1a17;
  --muted: #57534e;
  --line: #1c1a17;
  --shadow-col: #1c1a17;
  --panel: #1c1a17;
  --panel-ink: #faf8f2;
  --accent: #facc15;
  --accent-hover: #eab308;
  --accent-light: #fef9c3;
  --accent-ink: #000000;
  --hl-bg: linear-gradient(transparent 60%, #facc15 60%, #facc15 90%, transparent 90%);
  --hl-fg: inherit;
  --good: #166534;
  --good-bg: #dcfce7;
  --tbd: #9a3412;
  --tbd-bg: #ffedd5;
  --f-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sh: 4px 4px 0 0 var(--shadow-col);
  --sh-lg: 8px 8px 0 0 var(--shadow-col);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151513; --soft: #181715; --hl-bg: none; --hl-fg: #facc15; --muted-surface: #232220; --surface: #1d1c1a;
    --ink: #dedbd2; --muted: #a8a49a; --line: #8f8b80; --shadow-col: #45423b; --panel: #2a2824; --panel-ink: #dedbd2;
    --accent: #facc15; --accent-hover: #fde047; --accent-light: #3a3108; --accent-ink: #000000;
    --good: #86efac; --good-bg: #14361f; --tbd: #fdba74; --tbd-bg: #3b2210;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151513; --soft: #181715; --hl-bg: none; --hl-fg: #facc15; --muted-surface: #232220; --surface: #1d1c1a;
  --ink: #dedbd2; --muted: #a8a49a; --line: #8f8b80; --shadow-col: #45423b; --panel: #2a2824; --panel-ink: #dedbd2;
  --accent: #facc15; --accent-hover: #fde047; --accent-light: #3a3108; --accent-ink: #000000;
  --good: #86efac; --good-bg: #14361f; --tbd: #fdba74; --tbd-bg: #3b2210;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body.lp { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; line-height: 1.1; margin: 0; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.hl { background: var(--hl-bg); color: var(--hl-fg); padding: 0 .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Ilustrasi: semua warna lewat token */
.ill { display: block; overflow: visible; }
.s-ln { stroke: var(--line); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.f-ln { fill: var(--line); }
.f-sf { fill: var(--surface); }
.f-ac { fill: var(--accent); }
.f-mu { fill: var(--muted-surface); }
.f-bg { fill: var(--bg); }
.t-mono { font: 600 13px var(--f-mono); fill: var(--muted); }
.t-pill { font: 700 12px var(--f-body); fill: #000000; }
.led { fill: var(--accent); animation: blink 2.4s infinite steps(2, end); }
.led.d2 { animation-delay: .6s; } .led.d3 { animation-delay: 1.3s; } .led.ok { fill: #22c55e; animation-duration: 3.1s; }
.rod { animation: rod 5s infinite ease-in-out; transform-box: fill-box; transform-origin: 100% 100%; }
.rod.r2 { animation-delay: -2.5s; }
@keyframes blink { 50% { opacity: .25; } }
@keyframes rod { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .led, .rod { animation: none; } }
.ico { width: 34px; height: 34px; }
.ico path, .ico rect, .ico circle, .ico ellipse { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: var(--accent); }
.eyebrow { font: 700 0.78rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.lead { color: var(--muted); max-width: 40em; margin-top: 14px; font-size: 1.08rem; }


/* Konvensi target sentuh (keputusan Pemilik, 2026-10-15): CTA landing ≥44 px.
   Hanya menaikkan TINGGI target sentuh — warna, teks, dan tata letak tidak
   berubah (`min-height` adalah lantai, bukan tinggi paksa). Latar temuan:
   `docs/plan/ux-i18n-layout.md` §5 T1 (CTA "Pesan" terukur 40 px < konvensi
   44 px). Tinggi render bergantung font fallback (40–47 px), jadi lantai ini
   yang menjamin konvensi di semua lingkungan. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 2px solid var(--line); padding: 12px 20px; font: 800 0.98rem var(--f-body); text-decoration: none; box-shadow: var(--sh); transition: transform .12s, box-shadow .12s, background .12s; cursor: pointer; color: var(--ink); background: var(--surface); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--shadow-col); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-sm { padding: 7px 14px; font-size: 0.86rem; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Header induk dalang.io */
.parent { border-bottom: 2px solid var(--line); background: var(--surface); }
.parent .wrap { display: flex; align-items: center; gap: 28px; padding-block: 12px; }
.brand { font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.02em; }
.parent nav { display: flex; gap: 22px; font-weight: 600; font-size: 0.92rem; color: var(--muted); }
.parent nav a { text-decoration: none; }
.parent nav a:hover { color: var(--ink); }
.theme-btn { font: 700 0.82rem var(--f-body); color: var(--ink); background: var(--surface); border: 2px solid var(--line); padding: 4px 10px; cursor: pointer; box-shadow: 2px 2px 0 0 var(--shadow-col); }
.theme-btn:hover { background: var(--accent); color: #000000; }
.parent .right { margin-left: auto; display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: 0.92rem; }
@media (max-width: 820px) { .parent nav { display: none; } }

/* Bilah produk */
.prodbar { background: var(--accent); color: var(--accent-ink); border-bottom: 2px solid #000000; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.prodbar .wrap { display: flex; align-items: center; gap: 20px; padding-block: 8px; }
.prodbar .name { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.prodbar .name small { font: 700 0.66rem var(--f-mono); background: #000000; color: var(--accent); padding: 2px 6px; letter-spacing: 0.08em; }
.prodbar nav { display: flex; gap: 18px; font-weight: 600; font-size: 0.9rem; }
.prodbar nav a { text-decoration: none; }
.prodbar nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prodbar .btn { margin-left: auto; background: #000000; color: var(--accent); border-color: #000000; box-shadow: none; }
.prodbar .btn:hover { transform: none; background: #222222; }
@media (max-width: 640px) { .prodbar nav { display: none; } }

/* Hero */
.hero { background: var(--soft); border-bottom: 2px solid var(--line); background-image: radial-gradient(var(--accent-light) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; padding-block: 72px 80px; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-block: 44px 56px; } }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; }
.hero .sub { font-size: 1.15rem; color: var(--muted); margin-top: 22px; max-width: 33em; }
.hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
.facts li { border: 2px solid var(--line); background: var(--surface); padding: 5px 12px; font-size: 0.86rem; font-weight: 700; }
.trust { margin-top: 26px; font-size: 0.9rem; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trust b { color: var(--ink); }

.hero-art { position: relative; justify-self: center; width: 100%; max-width: 480px; }
.hero-art .sticker { right: auto; left: -6px; bottom: 6px; }
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 44px; }
@media (max-width: 880px) { .proof { grid-template-columns: 1fr; } }
.proof .receipt { max-width: 440px; }
.ladder .ico { margin-bottom: 4px; }
.why .ico, .eco .ico { width: 48px; height: 48px; }


/* Harga: celengan ayam */
.price-top { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; }
@media (max-width: 880px) { .price-top { grid-template-columns: 1fr; } }
.price-top .periods { margin-top: 26px; }
.piggy { position: relative; justify-self: center; width: 100%; max-width: 300px; }
.piggy .coin { transition: opacity .25s, transform .35s; }
.piggy .coin[data-off="1"] { opacity: 0; transform: translateY(-14px); }
@media (prefers-reduced-motion: reduce) { .piggy .coin { transition: none; } }
.piggy-tag { position: relative; display: table; margin: 6px auto 0; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--sh); padding: 8px 12px; font-size: 0.82rem; line-height: 1.3; }
.piggy-tag b { display: block; font-size: 1.15rem; color: var(--good); }

/* Struk + stempel + kaca pembesar */
.receipt-wrap { position: relative; justify-self: center; width: 100%; max-width: 480px; padding: 0 40px 56px 0; }
.receipt-wrap .loupe { position: absolute; top: 46%; right: -6px; width: 84px; pointer-events: none; }
.stamp { position: absolute; left: 24px; bottom: 6px; transform: rotate(-9deg); border: 3px double var(--good); color: var(--good); font: 700 0.72rem/1.25 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; text-align: center; background: var(--surface); opacity: .92; pointer-events: none; }

/* Ikon fitur */
.incl .ico { margin-bottom: 6px; }

/* Panah ekosistem */
.eco article + article::before { content: "→"; position: absolute; left: -21px; top: 38px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--accent); color: #000000; border: 2px solid var(--line); border-radius: 50%; font-weight: 800; z-index: 1; }
@media (max-width: 880px) { .eco article + article::before { content: "↓"; left: 24px; top: -27px; } }
.eco .bar { height: 10px; border: 2px solid var(--line); background: var(--muted-surface); margin-top: 4px; }
.eco .bar i { display: block; height: 100%; background: var(--line); }
.eco article:first-child .bar { border-color: #000000; background: #ffffff; }
.eco article:first-child .bar i { background: #000000; }
.eco .bar-l { font: 600 0.72rem var(--f-mono); color: var(--muted); }
.eco article:first-child .bar-l { color: #000000; }

/* Dukungan + FAQ dengan ilustrasi */
.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split .art { justify-self: center; width: 100%; max-width: 380px; }
.faq-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: start; }
@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .art { display: none; } }
.faq-grid .art { position: sticky; top: 80px; margin-top: 28px; }
.chat { background: var(--surface); border: 2px solid var(--line); box-shadow: var(--sh-lg); font-size: 0.9rem; }
.chat header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 2px solid var(--line); }
.chat .av { width: 30px; height: 30px; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; border: 2px solid var(--line); flex: none; }
.chat .av.d { background: var(--accent); color: #000000; }
.chat .av.u { background: var(--muted-surface); color: var(--muted); border-radius: 50%; }
.chat header b { display: block; line-height: 1.2; }
.chat header small { color: var(--good); font-size: 0.78rem; display: flex; align-items: center; gap: 5px; }
.chat header small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.chat .log { padding: 16px 14px; display: grid; gap: 12px; background-image: radial-gradient(var(--muted-surface) 1px, transparent 1px); background-size: 16px 16px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.msg p { padding: 9px 12px; border: 2px solid var(--line); line-height: 1.4; }
.msg.u p { background: var(--surface); }
.msg.d { justify-self: end; flex-direction: row-reverse; }
.msg.d p { background: var(--accent); color: #000000; font-weight: 700; box-shadow: 3px 3px 0 0 var(--shadow-col); }
.chat .typing { display: flex; gap: 4px; padding: 10px 12px; border: 2px solid var(--line); background: var(--surface); }
.chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.chat .typing i:nth-child(2) { animation-delay: .2s; } .chat .typing i:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .chat .typing i { animation: none; } }
.chat footer { display: flex; border-top: 2px solid var(--line); }
.chat footer span { flex: 1; padding: 11px 14px; color: var(--muted); }
.chat footer b { background: var(--panel); color: var(--panel-ink); padding: 11px 16px; font-size: 0.85rem; }
.t-body { font: 600 13px var(--f-body); fill: var(--ink); }
.t-body-b { font: 800 14px var(--f-body); fill: #000000; }
.steam { animation: steam 3s infinite ease-in-out; }
@keyframes steam { 0%,100% { opacity: .3; transform: translateY(2px); } 50% { opacity: .9; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .steam { animation: none; } }
.receipt { background: var(--surface); border: 2px solid var(--line); box-shadow: var(--sh-lg); font-family: var(--f-mono); font-size: 0.9rem; min-width: 0; }
.receipt header { background: var(--panel); color: var(--panel-ink); padding: 10px 16px; display: flex; justify-content: space-between; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.receipt .body { padding: 16px 18px 18px; display: grid; gap: 8px; }
.receipt .row { display: flex; justify-content: space-between; gap: 12px; }
.receipt .row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.receipt .dim { color: var(--muted); }
.receipt .save { color: var(--good); }
.receipt hr { border: 0; border-top: 2px dashed var(--line); margin: 6px 0; width: 100%; }
.receipt .total { font-weight: 600; font-size: 1.1rem; }
.receipt .foot { font-family: var(--f-body); font-size: 0.8rem; color: var(--muted); padding: 10px 18px; border-top: 2px solid var(--line); }
.sticker { position: absolute; right: -4px; bottom: 0; background: var(--accent); color: var(--accent-ink); border: 2px solid #000000; box-shadow: 4px 4px 0 0 #000000; padding: 10px 14px; transform: rotate(-4deg); font-weight: 800; line-height: 1.15; text-align: center; }
.sticker b { display: block; font-size: 1.5rem; }
.sticker span { font-size: 0.75rem; }

section { padding-block: 76px; }
section.alt { background: var(--muted-surface); border-block: 2px solid var(--line); }

/* Tangga paket */
.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 40px; align-items: end; }
.ladder a { text-decoration: none; border: 2px solid var(--line); margin-left: -2px; background: var(--surface); padding: 14px 12px; display: grid; gap: 4px; align-content: start; transition: background .12s; }
.ladder a:first-child { margin-left: 0; }
.ladder a:hover { background: var(--accent); color: var(--accent-ink); }
.ladder a:hover small { color: var(--accent-ink); }
.ladder b { font-size: 1.2rem; font-weight: 800; }
.ladder small { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.ladder .p { font: 600 0.78rem var(--f-mono); padding-top: 8px; }
.ladder a:nth-child(1) { min-height: 150px; } .ladder a:nth-child(2) { min-height: 172px; } .ladder a:nth-child(3) { min-height: 194px; }
.ladder a:nth-child(4) { min-height: 216px; } .ladder a:nth-child(5) { min-height: 238px; } .ladder a:nth-child(6) { min-height: 260px; }
@media (max-width: 820px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ladder a { margin-left: 0; min-height: 0 !important; } }
.note { margin-top: 18px; font-size: 0.86rem; color: var(--muted); }

.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
@media (max-width: 880px) { .why { grid-template-columns: 1fr; } }
.why article { background: var(--surface); border: 2px solid var(--line); box-shadow: var(--sh); padding: 22px; display: grid; gap: 10px; align-content: start; }
.why .k { font: 700 0.74rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); justify-self: start; padding: 2px 8px; border: 1.5px solid #000000; }
.why h3 { font-size: 1.3rem; font-weight: 800; }
.why p { color: var(--muted); }
.why code { font-family: var(--f-mono); font-size: 0.85em; background: var(--muted-surface); border: 1.5px solid var(--line); padding: 0 5px; }

/* Harga */
.price-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.periods { display: inline-flex; border: 2px solid var(--line); box-shadow: var(--sh); background: var(--surface); flex-wrap: wrap; }
.periods a { font: 700 0.9rem var(--f-body); border: 0; border-right: 2px solid var(--line); background: transparent; color: var(--ink); padding: 10px 16px; cursor: pointer; display: grid; text-align: center; line-height: 1.25; }
.periods a:last-child { border-right: 0; }
.periods a small { font: 600 0.7rem var(--f-mono); color: var(--good); }
.periods a.on { background: var(--accent); color: var(--accent-ink); }
.periods a.on small { color: var(--accent-ink); }
@media (max-width: 520px) { .periods a { padding: 8px 10px; font-size: 0.82rem; } }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-top: 40px; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 2px solid var(--line); box-shadow: var(--sh); padding: 22px; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 14px; position: relative; min-width: 0; }
.card.pick { box-shadow: 10px 10px 0 0 var(--accent), 10px 10px 0 2px var(--line); }
.card .flag { position: absolute; top: -14px; left: 18px; background: var(--panel); color: var(--panel-ink); font: 700 0.72rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; }
.card .name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card h3 { font-size: 1.55rem; font-weight: 800; }
.card .cap { font-size: 0.84rem; color: var(--muted); font-weight: 600; text-align: right; }
.card .for { font-size: 0.92rem; color: var(--muted); }
.card .price { display: grid; gap: 4px; }
.card .price .big { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.card .price .big small { font-size: 0.9rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.card .price .tot { font-size: 0.88rem; }
.save-line { font-weight: 800; color: var(--good); background: var(--good-bg); border: 1.5px solid var(--good); padding: 6px 10px; font-size: 0.9rem; }
.save-line.empty { visibility: hidden; }
.badge-promo { display: inline-block; font: 700 0.72rem var(--f-mono); padding: 2px 8px; color: var(--accent-ink); background: var(--accent); border: 1.5px solid #000000; }
.card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 0.92rem; border-top: 2px solid var(--line); padding-top: 14px; align-content: start; }
.card li { display: flex; justify-content: space-between; gap: 12px; }
.card li span:first-child { color: var(--muted); }
.card li span:last-child { font-weight: 600; text-align: right; }
.card .btn { width: 100%; }
.price-notes { margin-top: 32px; display: grid; gap: 6px; font-size: 0.88rem; color: var(--muted); max-width: 62em; }

details.cmp { margin-top: 28px; border: 2px solid var(--line); background: var(--surface); }
details.cmp summary { padding: 14px 18px; font-weight: 700; cursor: pointer; }
.tbl { overflow-x: auto; border-top: 2px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.9rem; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--muted-surface); font-variant-numeric: tabular-nums; }
thead th { background: var(--muted-surface); font-weight: 800; }
tbody th { font-weight: 600; color: var(--muted); }

.incl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; border: 2px solid var(--line); background: var(--surface); }
@media (max-width: 880px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .incl { grid-template-columns: 1fr; } }
.incl div { padding: 18px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); display: grid; gap: 4px; align-content: start; }
.incl b { font-size: 1rem; }
.incl span { font-size: 0.88rem; color: var(--muted); }

/* Ekosistem */
.eco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; align-items: stretch; }
@media (max-width: 880px) { .eco { grid-template-columns: 1fr; gap: 16px; } }
.eco article { border: 2px solid var(--line); margin-left: -2px; background: var(--surface); padding: 24px; display: grid; gap: 10px; align-content: start; position: relative; }
.eco article:first-child { margin-left: 0; background: var(--accent); color: var(--accent-ink); }
.eco article:first-child p, .eco article:first-child .step { color: var(--accent-ink); }
@media (max-width: 880px) { .eco article { margin-left: 0; } }
.eco .step { font: 700 0.74rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.eco h3 { font-size: 1.35rem; font-weight: 800; }
.eco p { color: var(--muted); font-size: 0.95rem; }
.eco .price { font-weight: 800; font-size: 1.05rem; }
.eco a.more { font-weight: 700; font-size: 0.92rem; }
.siblings { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; font-size: 0.9rem; align-items: center; }
.siblings span.l { color: var(--muted); font-weight: 600; }
.siblings a { border: 2px solid var(--line); padding: 4px 12px; text-decoration: none; font-weight: 700; background: var(--surface); }
.siblings a:hover { background: var(--accent); color: var(--accent-ink); }

.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
@media (max-width: 760px) { .rel { grid-template-columns: 1fr; } }
.rel div { border-top: 3px solid var(--line); padding-top: 14px; display: grid; gap: 6px; }
.rel b { font-size: 1.1rem; }
.rel p { color: var(--muted); font-size: 0.95rem; }

.faq { margin-top: 28px; display: grid; gap: 12px; max-width: 780px; }
.faq details { border: 2px solid var(--line); background: var(--surface); }
.faq summary { padding: 14px 18px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font-family: var(--f-mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 16px; color: var(--muted); }

/* Penutup: panggung hitam, gunungan menyala (sengaja gelap di kedua tema) */
.final { background: #121110; color: #ece9e1; border-top: 4px solid #facc15; position: relative; overflow: hidden; padding-block: 88px; }
.final::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(250, 204, 21, .10) 1.2px, transparent 1.2px); background-size: 22px 22px; pointer-events: none; }
.final .wrap { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .final .wrap { grid-template-columns: 1fr; } }
.final .eyebrow { color: #facc15; }
.final h2 { font-size: clamp(2.3rem, 5.4vw, 4rem); letter-spacing: -0.035em; line-height: 1.04; color: #ece9e1; }
.final h2 span { color: #facc15; }
.final .sub { color: #a8a49a; font-size: 1.1rem; margin-top: 18px; max-width: 34em; }
.final .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.final .btn { border-color: #facc15; box-shadow: 4px 4px 0 0 #facc15; }
.final .btn:hover { box-shadow: 2px 2px 0 0 #facc15; }
.final .btn-primary { background: #facc15; color: #000000; border-color: #000000; box-shadow: 4px 4px 0 0 #ece9e1; }
.final .btn-primary:hover { box-shadow: 2px 2px 0 0 #ece9e1; }
.final .btn-out { background: transparent; color: #ece9e1; border-color: #ece9e1; box-shadow: none; }
.final .btn-out:hover { background: #22201d; transform: none; }
.final .assure { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1.5px solid #3a3a36; }
@media (max-width: 620px) { .final .assure { grid-template-columns: 1fr; } }
.final .assure li { padding: 14px 16px; border-right: 1.5px solid #3a3a36; display: grid; gap: 2px; font-size: 0.85rem; color: #a8a49a; }
.final .assure li:last-child { border-right: 0; }
@media (max-width: 620px) { .final .assure li { border-right: 0; border-bottom: 1.5px solid #3a3a36; } .final .assure li:last-child { border-bottom: 0; } }
.final .assure b { color: #ece9e1; font-size: 0.95rem; }
.final .assure b::before { content: "✓ "; color: #facc15; }
.stage-art { position: relative; justify-self: stretch; width: 100%; min-width: 0; }
.track { background: #fffdf8; color: #111111; border: 2px solid #000000; box-shadow: 8px 8px 0 0 #facc15; max-width: 440px; margin-left: auto; }
@media (max-width: 900px) { .track { margin-left: 0; } }
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 2px solid #000000; }
.track-head small { display: block; font: 600 0.72rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #6b6b63; }
.track-head b { font-size: 1.05rem; }
.track .pill { background: #dcfce7; color: #166534; border: 1.5px solid #166534; font-weight: 800; font-size: 0.78rem; padding: 3px 10px; }
.roadmap { display: block; width: 100%; height: auto; padding: 14px 10px 4px; }
.rm-t { font: 700 13.5px var(--f-body); fill: #111111; }
.rm-ok { font-size: 16px; font-weight: 800; fill: #15803d; }
.rm-n circle { fill: #111111; }
.rm-n text { font: 800 11px var(--f-body); fill: #facc15; text-anchor: middle; }
.track-foot { margin: 0; padding: 12px 18px; border-top: 2px solid #000000; background: #fef9c3; font-size: 0.84rem; color: #3a3a32; }

/* Footer induk */
footer.site { background: var(--surface); border-top: 2px solid var(--line); font-size: 0.9rem; }
footer.site .wrap { padding-block: 44px 28px; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 820px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } }
footer.site h4 { margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--f-mono); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--muted); }
footer.site a { text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .co p { color: var(--muted); margin-top: 8px; max-width: 24em; }
footer.site .here { font-weight: 800; color: var(--ink); }

/* Dark: ilustrasi tetap berlogika "garis hitam membingkai kuning" seperti mode terang */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.hero-art, .piggy svg, .split .art svg, .loupe) {
  --line: #0c0b0a; --shadow-col: #0c0b0a; --surface: #2e2c28; --muted-surface: #3d3a34; --halo: #facc15;
}
  :root:not([data-theme="light"]) :is(.btn-primary, .eco article:first-child, .badge-promo) { border-color: #0c0b0a; }
}
:root[data-theme="dark"] :is(.hero-art, .piggy svg, .split .art svg, .loupe) {
  --line: #0c0b0a; --shadow-col: #0c0b0a; --surface: #2e2c28; --muted-surface: #3d3a34; --halo: #facc15;
}
:root[data-theme="dark"] :is(.btn-primary, .eco article:first-child, .badge-promo) { border-color: #0c0b0a; }

/* Dark: bagian kuning ikon juga dibingkai hitam */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico { box-sizing: border-box; padding: 5px; background: #facc15; border: 2px solid #0c0b0a; color: #0c0b0a; }
  :root:not([data-theme="light"]) .ico .fill { fill: #fde68a; }
}
:root[data-theme="dark"] .ico { box-sizing: border-box; padding: 5px; background: #facc15; border: 2px solid #0c0b0a; color: #0c0b0a; }
:root[data-theme="dark"] .ico .fill { fill: #fde68a; }

/* Dark: redam bidang terang yang lebar */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .track { filter: brightness(.86); box-shadow: 8px 8px 0 0 #8a6d0a; } }
:root[data-theme="dark"] .track { filter: brightness(.86); box-shadow: 8px 8px 0 0 #8a6d0a; }

/* ===== Mobile ===== */
.swipe { display: none; }
@media (max-width: 620px) {
  section { padding-block: 48px; }
  h2 { font-size: 1.75rem; }
  .lead { font-size: 1rem; }
  .hero .wrap { padding-block: 28px 40px; gap: 28px; }
  .hero h1 { font-size: 2.35rem; }
  .hero .sub { font-size: 1rem; margin-top: 16px; }
  .hero .ctas, .final .ctas { display: grid; gap: 12px; }
  .hero .ctas .btn, .final .ctas .btn { width: 100%; }
  .facts { margin-top: 22px; gap: 8px; }
  .facts li { font-size: 0.8rem; padding: 4px 10px; }
  .hero-art { max-width: 340px; }
  .ladder { margin-top: 24px; grid-template-columns: 1fr; gap: 0; }
  .ladder a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: center; margin: -2px 0 0; padding: 12px 14px 12px 42px; min-height: 0 !important; background: linear-gradient(90deg, var(--accent) var(--lv), var(--surface) var(--lv)); }
  .ladder a:first-child { margin-top: 0; }
  .ladder a .ico { grid-row: 1 / 3; width: 30px; height: 30px; margin: 0; }
  .ladder a b { grid-column: 2; font-size: 1.05rem; line-height: 1.2; }
  .ladder a small { grid-column: 2; font-size: 0.8rem; }
  .ladder a .p { grid-column: 3; grid-row: 1 / 3; padding: 0; text-align: right; font-size: 0.8rem; white-space: nowrap; }
  .ladder a:nth-child(1) { --lv: 4px; } .ladder a:nth-child(2) { --lv: 8px; } .ladder a:nth-child(3) { --lv: 12px; }
  .ladder a:nth-child(4) { --lv: 16px; } .ladder a:nth-child(5) { --lv: 20px; } .ladder a:nth-child(6) { --lv: 24px; }
  .why { gap: 16px; margin-top: 28px; }
  .trust { display: block; font-size: 0.85rem; margin-top: 20px; }
  .why article { padding: 18px; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .why article > * { grid-column: 1 / -1; }
  .why article > .ico { grid-column: 1; width: 32px; height: 32px; }
  .why article > .k { grid-column: 2; }
  .why h3 { text-wrap: pretty; }
  .eco article { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .eco article > * { grid-column: 1 / -1; }
  .eco article > .ico { grid-column: 1; width: 34px; height: 34px; }
  .eco article > .step { grid-column: 2; }
  .price-top { gap: 8px; }
  .price-top .periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 20px; }
  .price-top .periods a { padding: 10px 2px; font-size: 0.92rem; }
  .piggy { max-width: none; width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 14px 8px 6px; border: 2px solid var(--line); background: var(--surface); box-shadow: var(--sh); }
  .piggy svg { width: 76px; flex: none; }
  .piggy-tag { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 0.85rem; }
  .piggy-tag b { font-size: 1.2rem; }
  .swipe { display: flex; justify-content: space-between; margin-top: 24px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
  .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 6px -16px 0; padding: 20px 16px 22px; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; }
  .card { flex: 0 0 84%; scroll-snap-align: start; }
  .proof { gap: 20px; margin-top: 28px; }
  .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
  .incl div { padding: 14px 12px; }
  .incl b { font-size: 0.92rem; }
  .incl span { font-size: 0.8rem; }
  .incl .ico { width: 28px; height: 28px; }
  .eco { margin-top: 28px; }
  .eco article { padding: 20px; }
  .split .art { max-width: 300px; }
  .rel { gap: 18px; margin-top: 24px; }
  .faq { margin-top: 20px; }
  .final { padding-block: 56px; }
  .final .assure { margin-top: 26px; }
  footer.site .wrap { padding-block: 32px 24px; gap: 22px; }
}

/* ===== Tambahan port (bukan dari draf) ===== */
body.lp { margin: 0; -webkit-font-smoothing: antialiased; }
.lp-main { display: block; }
.lp-main:focus { outline: none; }
.lp a.btn, .lp .prodbar a, .lp .parent a, .lp .ladder a, .lp .periods a, .lp footer.site a { text-decoration: none; }
.parent .right a:hover, footer.site a:hover { text-decoration: underline; text-underline-offset: 3px; }
.langs { display: inline-flex; gap: 2px; font: 700 0.74rem var(--f-mono); }
.langs a { padding: 3px 5px; border: 1.5px solid transparent; color: var(--muted); }
.langs a[aria-current="true"] { border-color: var(--line); color: var(--ink); }
.theme-btn[hidden] { display: none; }
.periods a:hover:not(.on) { background: var(--accent-light); }
.card .price .tot { color: var(--muted); }
.card .price .tot b { color: var(--ink); }
.receipt .foot { margin: 0; }
.eco a.more { text-decoration: underline; text-underline-offset: 3px; }

.promo { margin-top: 32px; display: flex; gap: 20px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); border: 2px dashed var(--line); padding: 20px 22px; }
.promo > div { display: grid; gap: 6px; max-width: 62em; }
.promo h3 { font-size: 1.15rem; font-weight: 800; }
.promo p { color: var(--muted); font-size: 0.92rem; }
.promo .valid { font: 600 0.78rem var(--f-mono); color: var(--ink); }
.promo .badge-promo { justify-self: start; }
.promo ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 0.82rem; color: var(--muted); list-style: disc; }

.cmp-body { border-top: 2px solid var(--line); padding: 16px 18px; overflow-x: auto; }
.cmp-body ul { margin: 10px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 4px; font-size: 0.9rem; }
.cmp-note { padding: 10px 18px 16px; font-size: 0.82rem; color: var(--muted); }
.cmp-body .cmp-note { padding: 10px 0 0; }
.cmp-body table { min-width: 0; }
.cmp-body .text-gray-600 { color: var(--muted); }
.cmp-body .bg-white, .cmp-body .bg-gray-100 { background: transparent; }
.cmp-body .border-black { border-color: var(--line); }
.cmp-body a { color: var(--ink); }

.incl-h { margin-top: 56px; font-size: 1.5rem; font-weight: 800; }
.incl-lead { color: var(--muted); margin-top: 8px; }
.incl div:last-child:nth-child(4n + 3) { grid-column: span 2; }
@media (max-width: 880px) { .incl div:last-child:nth-child(4n + 3) { grid-column: auto; } .incl div:last-child:nth-child(odd) { grid-column: span 2; } }

.rel-h { margin-top: 40px; font-size: 1.2rem; font-weight: 800; }
.rel { margin-top: 16px; }
.rel .lvl { display: inline-block; background: var(--panel); color: var(--panel-ink); font: 700 0.78rem var(--f-mono); padding: 2px 8px; }
.rel-up { margin-top: 28px; font-weight: 700; }
.facts-dl { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: 2px solid var(--line); background: var(--surface); }
.facts-dl div { padding: 12px 14px; border-right: 1px solid var(--muted-surface); border-bottom: 1px solid var(--muted-surface); }
.facts-dl dt { font: 700 0.72rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.facts-dl dd { margin: 2px 0 0; font-weight: 700; font-size: 0.92rem; }

.summary-geo { margin-top: 28px; max-width: 780px; }
footer.site a { color: inherit; }
footer.site .footnote { padding-block: 0 24px; font-size: 0.8rem; color: var(--muted); }
.lp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 620px) { .promo { padding: 16px; } .promo .btn { width: 100%; } }
.lp .hero { padding-block: 0; }
.receipt .row { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.receipt .row span:last-child { margin-left: auto; white-space: nowrap; }
.receipt .total { font-size: 1rem; }
.receipt-wrap .loupe { top: auto; bottom: 8px; }
.promo details { font-size: 0.85rem; }
.promo summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.cmp-cta { padding: 0 18px 18px; }

/* Kartu paket berbahasa awam (2026-10-14): "cocok untuk" di depan, rincian
   teknis (bahasa program, RAM, CPU) dilipat. */
.card li.use { justify-content: flex-start; gap: 8px; font-weight: 700; color: var(--ink); }
.card li.use span:first-child { color: var(--ink); font-weight: 800; }
.card li.use span:last-child { text-align: left; font-weight: 700; }
.card details.tech { font-size: 0.88rem; }
.card details.tech > summary { cursor: pointer; color: var(--muted); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.card details.tech ul { border-top: 0; padding-top: 4px; }
.card details.tech > summary { list-style: none; gap: 6px; }
.card details.tech > summary::-webkit-details-marker { display: none; }
.card details.tech > summary::before { content: "▸"; transition: transform .12s; }
.card details.tech[open] > summary::before { transform: rotate(90deg); }