/* landing-hub.css — Etalase hero-first (S1–S8).
   Dimuat SETELAH auto/landing.css untuk meng-override layout app-shell jadi
   dokumen scroll normal. Hero (chat) tetap = 1 viewport pertama, section
   S2–S8 mengalir di bawahnya. Token-only (navy, dark+light via data-theme). */

/* ── §1 Layout override: app-shell full-viewport → dokumen scroll ── */
:root { --lhub-nav-h: 64px; --lhub-max: 1180px; }
html { height: auto; }
body.page-landing {
  overflow: visible; overflow-x: hidden;
  height: auto; min-height: 100dvh;
}
body.page-landing main.main-content { display: block; }
.nav-guest { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); }
.chat-shell {
  height: calc(100vh - var(--lhub-nav-h));
  height: calc(100dvh - var(--lhub-nav-h));
  min-height: 480px;
}
.lhub-sec { scroll-margin-top: calc(var(--lhub-nav-h) + 12px); }

/* ── Navbar anchor nav (desktop only) ── */
.nav-anchors { display: flex; gap: 1.4rem; margin-left: 2rem; }
.nav-anchors a {
  color: var(--txt-muted); text-decoration: none; font-size: .9rem; font-weight: 500;
  transition: color .15s; white-space: nowrap;
}
.nav-anchors a:hover { color: var(--txt); }
@media (max-width: 900px) { .nav-anchors { display: none; } }

/* ── Hero scroll cue ── */
.hero-scroll-cue {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.6rem;
  color: var(--txt-muted); text-decoration: none; font-size: .88rem; font-weight: 500;
}
.hero-scroll-cue:hover { color: var(--accent); }
.hero-scroll-cue::after { content: "↓"; animation: lhubBob 1.8s ease-in-out infinite; }
@keyframes lhubBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── Shared section scaffolding ── */
.lhub { width: 100%; }
.lhub-sec { padding: 4.2rem 1.5rem; }
.lhub-inner { max-width: var(--lhub-max); margin: 0 auto; }
.lhub-kicker {
  font-family: var(--ff-mono, ui-monospace, monospace); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem;
}
.lhub-title {
  font-family: var(--ff-display, "Playfair Display", serif); font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; margin: 0 0 .8rem; color: var(--txt);
}
.lhub-title em {
  font-style: normal;
  background: var(--grad-text-unified, linear-gradient(120deg, #3B82F6, #22D3EE));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lhub-sub { color: var(--txt-muted); font-size: 1.02rem; line-height: 1.6; max-width: 620px; margin: 0 0 2rem; }
.lhub-sec--alt { background: var(--bg-elev); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Card base */
.lhub-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  padding: 1.4rem; transition: border-color .15s, transform .15s;
}
a.lhub-card, .lhub-card--link { text-decoration: none; display: block; color: inherit; }
a.lhub-card:hover, .lhub-card--link:hover { border-color: var(--accent); transform: translateY(-2px); }
.lhub-card .ic { width: 1.5em; height: 1.5em; color: var(--accent); }
.lhub-card h3 { font-size: 1.06rem; margin: .7rem 0 .35rem; color: var(--txt); }
.lhub-card p { color: var(--txt-muted); font-size: .92rem; line-height: 1.55; margin: 0; }

/* ── S2 Strip bukti ── */
.lhub-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: center; }
.lhub-proof-item .n {
  font-family: var(--ff-display, serif); font-size: 2.1rem; font-weight: 600; color: var(--txt); line-height: 1;
  display: inline-flex; align-items: center; gap: .4rem;
}
.lhub-proof-item .n .ic { width: .8em; height: .8em; color: var(--accent); }
.lhub-proof-item .l {
  font-family: var(--ff-mono, monospace); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-muted); margin-top: .45rem;
}

/* ── S3 Stages ── */
.lhub-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.lhub-stage .num {
  font-family: var(--ff-mono, monospace); font-size: .82rem; color: var(--accent); font-weight: 600;
}
.lhub-stage h3 { display: inline-flex; align-items: center; gap: .5rem; }

/* ── S4 Pillars ── */
.lhub-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.lhub-pillar ul { list-style: none; padding: 0; margin: 1rem 0 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.lhub-pillar li { display: flex; align-items: flex-start; gap: .5rem; color: var(--txt-muted); font-size: .92rem; }
.lhub-pillar li .ic { width: 1.05em; height: 1.05em; color: var(--ok, #22C55E); flex-shrink: 0; margin-top: .12rem; }
.lhub-cta-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: var(--r-pill, 999px);
  background: var(--accent); color: var(--bg); font-weight: 600; font-size: .9rem; text-decoration: none; border: 0; cursor: pointer;
}
.lhub-cta-btn:hover { filter: brightness(1.08); }
.lhub-cta-btn.ghost { background: transparent; color: var(--txt); border: 1px solid var(--line); }
.lhub-cta-btn.ghost:hover { border-color: var(--accent); filter: none; }
.lhub-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.3rem; }
.lhub-mini .lhub-card { padding: 1.05rem 1.2rem; }
.lhub-mini h3 { font-size: .98rem; margin: 0 0 .25rem; }

/* ── S5 Marketplace ── */
.lhub-market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.lhub-badge {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: var(--r-pill, 999px); margin-bottom: .2rem;
}
.lhub-badge.included { background: var(--accent-soft, rgba(56,189,248,.12)); color: var(--accent); }
.lhub-badge.soon { background: var(--warn-soft, rgba(234,179,8,.14)); color: var(--warn, #EAB308); }
.lhub-market .lhub-cta-btn { margin-top: 1rem; width: 100%; justify-content: center; }

/* ── S6 Features ── */
.lhub-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.lhub-feats .lhub-card { padding: 1.2rem; }

/* ── S7 Pricing strip ── */
.lhub-price { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lhub-price-item { text-align: center; padding: 1.3rem 1rem; }
.lhub-price-item .tier { font-family: var(--ff-mono, monospace); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-muted); }
.lhub-price-item .amt { font-family: var(--ff-display, serif); font-size: 1.7rem; font-weight: 600; color: var(--txt); margin: .35rem 0 .1rem; }
.lhub-price-item .per { color: var(--txt-faint); font-size: .82rem; }
.lhub-price-note { text-align: center; color: var(--txt-muted); font-size: .9rem; margin-top: 1.3rem; }
.lhub-price-note a { color: var(--accent); text-decoration: none; }
.lhub-price-cta { display: flex; gap: .8rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }

/* ── S8 Closing ── */
.lhub-close { text-align: center; }
.lhub-close .lhub-title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1rem; }
.lhub-close .lhub-sub { margin: 0 auto 2rem; }
.lhub-close-cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.lhub-close-link { color: var(--txt-muted); font-size: .9rem; text-decoration: none; }
.lhub-close-link:hover { color: var(--accent); }

/* ── Waitlist modal ── */
.lhub-modal {
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(6,10,20,.62); padding: 1.2rem;
}
.lhub-modal.open { display: flex; }
.lhub-modal-card {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  width: min(440px, 100%); padding: 1.6rem; box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.35));
}
.lhub-modal-card h3 { margin: 0 0 .4rem; color: var(--txt); font-size: 1.2rem; }
.lhub-modal-card p { color: var(--txt-muted); font-size: .92rem; margin: 0 0 1.1rem; }
.lhub-modal-card input {
  width: 100%; padding: .65rem .8rem; margin-bottom: .7rem; border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px); background: var(--bg-input); color: var(--txt); font: inherit;
}
.lhub-modal-actions { display: flex; gap: .6rem; margin-top: .4rem; }
.lhub-modal-msg { font-size: .88rem; margin-top: .6rem; min-height: 1.1em; }
.lhub-modal-x { background: none; border: 0; color: var(--txt-muted); font-size: 1.4rem; cursor: pointer; float: right; line-height: 1; }

/* ── Mobile ── */
@media (max-width: 720px) {
  .lhub-sec { padding: 3rem 1.15rem; }
  .lhub-proof { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .lhub-stages, .lhub-pillars, .lhub-mini, .lhub-market, .lhub-feats, .lhub-price { grid-template-columns: 1fr; }
  .lhub-price-item { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  a.lhub-card:hover, .lhub-card--link:hover { transform: none; }
  html { scroll-behavior: auto; }
}
:root { scroll-behavior: smooth; }

/* ════════════════════════════════════════════════════════════════════
   S1 · HERO ETALASE RISET (marketplace-forward) — "Etalase Riset"
   Chat tak lagi 100dvh; jadi konsol ringkas. Etalase produk = bintang fold.
   ════════════════════════════════════════════════════════════════════ */
.lm-hero { padding: 2.4rem 1.5rem 0; }
.lm-hero-inner { max-width: var(--lhub-max); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 1.7rem; }

.lm-copy { text-align: center; max-width: 760px; margin: 0 auto; }
.lm-kicker { font-family: var(--ff-mono, ui-monospace, monospace); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.lm-h1 { font-family: var(--ff-display, "Playfair Display", serif); font-weight: 500; letter-spacing: -.02em; font-size: clamp(2.05rem, 1.2rem + 2.9vw, 3.3rem); line-height: 1.06; color: var(--txt); margin: 0 0 .9rem; }
.lm-h1 em { font-style: italic; background: var(--grad-text-unified, linear-gradient(120deg, #3B82F6, #22D3EE)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lm-sub { color: var(--txt-muted); font-size: 1rem; line-height: 1.6; max-width: 52ch; margin: 0 auto; }

/* ── Halaman depan PADAT (keputusan Rio, 12 Agu 2026) ───────────────────────
   Bentuknya meniru kepadatan Risos Pasar, tapi yang dipajang alat & kelas yang
   benar-benar ada — bukan produk. Tiga keluhan yang dijawab langsung:
     • "judulnya terlalu besar"      → .lp-h1 satu baris, 1.05rem, bukan display
     • "bingung mau klik apa"        → SATU tombol utama; sisanya kartu setara
     • "banyak sisa marketplace"     → seksi etalase/kontributor dicabut
   Kepadatan datang dari kisi auto-fill 210px: di layar lebar muat 5 kolom
   tanpa kartu menjadi raksasa, di ponsel turun jadi 1–2 tanpa aturan khusus. */
.lp-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lp-h1 { margin: 0; font-family: inherit; font-weight: 600; font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; color: var(--txt); }
.lp-bar-act { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-wrap: wrap; }
.lp-cari { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; min-width: 240px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--bg-input); }
.lp-cari > .ic { color: var(--txt-faint); flex: none; }
.lp-cari input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--txt); font: inherit; font-size: .86rem; }
.lp-cari:focus-within { border-color: var(--accent); }

.lp-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.lp-chip { font: inherit; font-size: .82rem; font-weight: 500; padding: .35rem .85rem; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--bg-card); color: var(--txt-muted); transition: border-color .15s, color .15s, background .15s; }
.lp-chip:hover { border-color: var(--accent); color: var(--txt); }
.lp-chip.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #fff); }
.lp-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
.lp-card { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--bg-card); transition: border-color .15s, transform .15s; }
.lp-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp-card.hide { display: none; }
.lp-card-ic { color: var(--accent); line-height: 0; }
.lp-card strong { font-size: .9rem; color: var(--txt); letter-spacing: -.01em; }
.lp-card-d { font-size: .76rem; line-height: 1.45; color: var(--txt-muted); }
.lp-fact { margin-top: auto; padding-top: .4rem; font-size: .74rem; color: var(--txt-faint); }
.lp-fact b { font-size: .92rem; color: var(--txt); }
.lp-fact i { font-style: normal; }
.lp-card--kelas { border-style: dashed; }
.lp-kicker { font-family: var(--ff-mono, ui-monospace, monospace); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lp-empty { grid-column: 1 / -1; padding: 1.4rem; text-align: center; font-size: .85rem; color: var(--txt-muted); border: 1px dashed var(--line); border-radius: var(--r-lg, 16px); }

@media (max-width: 700px) {
  .lp-bar-act { margin-left: 0; width: 100%; }
  .lp-cari { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-card:hover { transform: none; }
}

/* Jembatan ke Risos Pasar — satu baris, sengaja TIDAK sekeras kartu di atas:
   barang bukan produk utama risos.ai, ia hanya perlu ketemu kalau dicari. */
.lm-pasar { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; text-decoration: none; color: inherit; border: 1px dashed var(--line); border-radius: var(--r-lg, 16px); background: transparent; transition: border-color .15s, background .15s; }
.lm-pasar:hover { border-color: var(--accent); background: var(--bg-card); }
.lm-pasar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lm-pasar > .ic { color: var(--accent); flex: none; }
.lm-pasar-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.lm-pasar-txt strong { font-size: .86rem; color: var(--txt); }
.lm-pasar-txt span { font-size: .76rem; color: var(--txt-muted); }
.lm-pasar-cta { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--accent); white-space: nowrap; }

@media (max-width: 900px) {
  .lm-pasar { flex-wrap: wrap; }
  .lm-pasar-cta { margin-left: 0; }
}

/* Etalase toolbar */
.lm-et-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.lm-et-cats { display: flex; gap: .5rem; flex-wrap: wrap; }
.lm-cat { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .87rem; font-weight: 500; padding: .48rem .95rem; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--bg-card); color: var(--txt-muted); transition: border-color .15s, color .15s, background .15s; }
.lm-cat:hover { border-color: var(--accent); color: var(--txt); }
.lm-cat.is-on { border-color: var(--accent); background: var(--accent-soft, rgba(56,189,248,.12)); color: var(--txt); }
.lm-cat .lm-code { position: static; }
.lm-et-search { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; min-width: 240px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--bg-input); color: var(--txt-faint); font-size: .86rem; text-decoration: none; transition: border-color .15s, color .15s; }
.lm-et-search:hover { border-color: var(--accent); color: var(--txt-muted); }

/* Product grid */
.lm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lm-prod { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.lm-prod:hover { border-color: var(--accent); transform: translateY(-3px); }
.lm-prod.hide { display: none; }
.lm-prod-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--accent-soft, rgba(56,189,248,.10)), var(--bg-input)); }
.lm-prod-cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-prod-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.lm-prod-ph .ic { width: 2rem; height: 2rem; color: var(--accent); opacity: .55; }
.lm-code { position: absolute; top: .6rem; left: .6rem; font-family: var(--ff-mono, monospace); font-size: .64rem; letter-spacing: .08em; color: var(--accent); background: var(--accent-soft, rgba(56,189,248,.12)); padding: .14rem .45rem; border-radius: var(--r-pill, 999px); }
.lm-prod-cover .lm-code { z-index: 2; background: var(--bg-elev); }
.lm-prod-body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: .85rem .95rem 1rem; }
.lm-prod-body h3 { margin: 0; font-size: .95rem; line-height: 1.35; color: var(--txt); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lm-prod-body p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--txt-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lm-prod-meta { margin-top: auto; padding-top: .5rem; }
.lm-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; width: fit-content; padding: .16rem .5rem; border-radius: var(--r-pill, 999px); }
.lm-tag.included { background: var(--accent-soft, rgba(56,189,248,.12)); color: var(--accent); }
.lm-tag.free { background: var(--ok-soft, rgba(34,197,94,.14)); color: var(--ok, #22C55E); }
.lm-tag.price { background: var(--bg-input); color: var(--txt); border: 1px solid var(--line); }
.lm-tag.soon { background: var(--warn-soft, rgba(234,179,8,.14)); color: var(--warn, #EAB308); }
.lm-grid-empty { grid-column: 1 / -1; text-align: center; padding: 2.2rem 1rem; border: 1px dashed var(--line); border-radius: var(--r-lg, 16px); color: var(--txt-muted); }
.lm-grid-empty p { margin: 0 0 .8rem; }
.lm-et-foot { text-align: center; margin-top: 1.1rem; }
.lm-et-foot a { color: var(--accent); text-decoration: none; font-size: .92rem; font-weight: 500; }

/* Empty-catalog fallback doors */
.lm-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.lm-door { position: relative; text-align: left; cursor: pointer; font: inherit; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: 1.3rem 1.1rem 1.1rem; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: .45rem; min-height: 160px; transition: border-color .15s, transform .15s; }
.lm-door:hover { border-color: var(--accent); transform: translateY(-3px); }
.lm-door .ic { color: var(--accent); }
.lm-door h3 { margin: 0; font-size: .98rem; color: var(--txt); }
.lm-door p { margin: 0; font-size: .8rem; color: var(--txt-muted); line-height: 1.45; }
.lm-door .lm-tag { margin-top: auto; }
.lm-door .lm-code { top: .8rem; right: .8rem; left: auto; }

/* Proof bar */
.lm-proofbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-top: 1px solid var(--line); margin-top: .4rem; padding: 1.1rem 0 1.3rem; text-align: center; }
.lm-proof-item .n { font-family: var(--ff-display, serif); font-size: 1.55rem; font-weight: 600; color: var(--txt); display: block; line-height: 1; }
.lm-proof-item .l { font-family: var(--ff-mono, monospace); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-muted); margin-top: .3rem; display: block; }

/* ── Floating asisten Risos AI ── */
.rb-root { position: fixed; right: 18px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 900; }
.rb-fab { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 12px 32px -8px var(--accent-soft, rgba(56,189,248,.5)); transition: transform .18s; }
.rb-fab:hover { transform: translateY(-2px); }
.rb-fab svg { width: 24px; height: 24px; stroke-width: 2; }
.rb-fab .ico-x { display: none; }
.rb-root.open .rb-fab .ico-chat { display: none; }
.rb-root.open .rb-fab .ico-x { display: block; }
.rb-badge { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--warn, #EAB308); border: 2px solid var(--bg); }
.rb-panel { display: none; position: absolute; bottom: calc(56px + 14px); right: 0; width: min(380px, calc(100vw - 28px)); height: min(560px, calc(100dvh - 120px)); flex-direction: column; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rb-root.open .rb-panel { display: flex; animation: rbIn .18s ease; }
@keyframes rbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rb-head { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.rb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #22C55E); box-shadow: 0 0 0 3px var(--ok-soft, rgba(34,197,94,.14)); flex-shrink: 0; }
.rb-head-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rb-head-txt strong { font-size: .92rem; color: var(--txt); }
.rb-head-txt span { font-size: .74rem; color: var(--txt-muted); }
.rb-close { background: none; border: 0; cursor: pointer; color: var(--txt-muted); padding: .3rem; }
.rb-close svg { width: 16px; height: 16px; stroke-width: 2; }
.rb-greet { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--txt-muted); }
.rb-panel .chat-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .9rem .9rem .3rem; align-items: stretch; }
.rb-panel .chat-inner { max-width: none; gap: 14px; }
.rb-panel .greet-wrap { margin: 0; padding: .2rem .1rem; gap: .7rem; }
.rb-panel .chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.rb-panel .chip { padding: .45rem .8rem; border-radius: var(--r-pill, 999px); flex-direction: row; gap: 0; background: var(--bg-input); }
.rb-panel .chip-text { font-family: var(--ff-body, sans-serif); font-size: .8rem; font-weight: 500; }
.rb-panel .gmsg { max-width: 94%; }
.rb-panel .input-bar { position: static; background: transparent; backdrop-filter: none; border-top: 1px solid var(--line); padding: .55rem .7rem .65rem; flex-shrink: 0; }
.rb-panel .input-inner { max-width: none; }
.rb-panel .cta-box { padding: 14px 14px; gap: 10px; }

@media (max-width: 1020px) {
  .lm-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .lm-et-bar { flex-direction: column; align-items: stretch; }
  .lm-et-cats { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: .2rem; }
  .lm-et-cats::-webkit-scrollbar { display: none; }
  .lm-cat { flex: 0 0 auto; }
  .lm-et-search { min-width: 0; }
  .lm-grid { grid-template-columns: repeat(2, 1fr); }
  .lm-prod-body p { display: none; }
  .lm-doors { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .7rem; padding-bottom: .4rem; margin-inline: -1.15rem; padding-inline: 1.15rem; scrollbar-width: none; }
  .lm-doors::-webkit-scrollbar { display: none; }
  .lm-door { flex: 0 0 72%; scroll-snap-align: start; }
  .lm-proofbar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rb-panel { position: fixed; inset: auto 0 0 0; width: 100%; height: min(80dvh, 640px); border-radius: 18px 18px 0 0; border-bottom: 0; }
  .rb-root.open .rb-fab { display: none; }
  body.rb-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-door:hover, .lm-prod:hover { transform: none; }
  .rb-root.open .rb-panel { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   S1 · Etalase dua kategori (produk fisik / produk digital) + banner
   langganan. Aditif: kelas baru saja, aturan lama tidak diubah — jarak
   diatur lewat margin elemen baru supaya tata letak lama tetap sama.
   Semua warna lewat token tema → benar di mode terang maupun gelap.
   ════════════════════════════════════════════════════════════════════ */

/* Sakelar segmen pasar (.lm-seg / .lm-segbtn) DIHAPUS Agu 2026 bersama markup-
   nya: satu-satunya tombol di sana, "Semua produk", mengembalikan daftar yang
   identik dengan tab "Semua" di .lm-et-cats. Penanda kategori per kartu
   (.lm-seg-flag, §bawah) tetap ada dan itulah yang kini membedakan produk
   fisik dari produk digital. */

/* Banner produk utama → /pricing (tautan sungguhan).
   ─────────────────────────────────────────────────────────────────────
   Revisi daya tarik. Versi lama membaca seperti paragraf biasa, bukan
   penawaran utama, karena tiga hal yang terlihat langsung dari aturan
   CSS-nya sendiri:
     1. Latarnya `accent-soft` = alfa 0.07 (terang) / 0.10 (gelap) →
        praktis tak terlihat, padahal bordernya penuh warna aksen.
     2. `.lm-banner-ic` memakai `--bg-elev` — warna yang sama dengan
        kartu di sekitarnya, jadi medali ikonnya tak jadi jangkar mata.
     3. `.lm-banner-cta` hanya teks berwarna aksen: tidak ada padding,
        latar, atau bentuk — ajakan bertindak yang tidak tampak bisa
        diklik, terlebih di ≤480px saat ia jatuh ke barisnya sendiri.
   Perbaikan di bawah menambah bobot visual TANPA warna merek baru:
   semua nilai warna tetap diturunkan dari token tema (--accent,
   --bg-*, --line), sehingga benar di mode terang maupun gelap.
   ───────────────────────────────────────────────────────────────────── */
.lm-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.05rem; margin: 0 0 1rem; padding: 1.05rem 1.2rem; text-decoration: none; color: inherit; border: 1px solid var(--accent); border-radius: var(--r-lg, 16px); background: linear-gradient(120deg, var(--accent-soft, rgba(56,189,248,.14)), var(--bg-card) 68%); box-shadow: 0 10px 26px -22px var(--accent); transition: transform .15s, box-shadow .15s; }
.lm-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px var(--accent); }
.lm-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Wash aksen yang benar-benar terbaca. Di dalam @supports supaya browser
   lama tetap dapat gradien lama sebagai fallback, bukan latar kosong. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .lm-banner { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%), var(--bg-card); }
}
/* Cahaya dekoratif di sudut kanan — memberi arah baca menuju tombol. */
.lm-banner::after { content: ""; position: absolute; z-index: 0; top: -70%; right: -10%; width: 38%; padding-bottom: 38%; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft, rgba(56,189,248,.14)), transparent 70%); pointer-events: none; }
.lm-banner > * { position: relative; z-index: 1; }
.lm-banner-ic { display: grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft, rgba(56,189,248,.14)); }
.lm-banner-ic .ic { width: 1.5em; height: 1.5em; color: var(--accent); }
.lm-banner-txt { display: flex; flex-direction: column; gap: .18rem; flex: 1; min-width: 0; }
.lm-banner-kicker { font-family: var(--ff-mono, monospace); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lm-banner-txt strong { font-size: 1.12rem; font-weight: 700; line-height: 1.25; color: var(--txt); }
.lm-banner-sub { font-size: .8rem; line-height: 1.5; color: var(--txt-muted); }
/* Baris angka: idiom yang sama dengan .lm-proofbar di bawah hero. */
.lm-banner-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin-top: .45rem; }
.lm-banner-stat { display: inline-flex; align-items: baseline; gap: .3rem; }
.lm-banner-stat b { font-family: var(--ff-display, serif); font-size: 1.1rem; font-weight: 600; line-height: 1; color: var(--accent); }
.lm-banner-stat i { font-family: var(--ff-mono, monospace); font-style: normal; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-muted); }
/* CTA jadi pil sungguhan — bentuk yang sama dengan .lhub-cta-btn di §S4. */
.lm-banner-cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .58rem 1.05rem; border-radius: var(--r-pill, 999px); background: var(--accent); color: var(--bg); font-size: .84rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -12px var(--accent); transition: filter .15s; }
.lm-banner:hover .lm-banner-cta { filter: brightness(1.08); }

/* Kartu produk yang lebih lengkap: chip kategori + penanda segmen */
.lm-prod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.lm-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; font-weight: 600; padding: .14rem .48rem; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--bg-input); color: var(--txt-muted); }
.lm-seg-flag { position: absolute; z-index: 2; top: .6rem; right: .6rem; font-family: var(--ff-mono, monospace); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: .14rem .45rem; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--bg-elev); color: var(--txt-muted); }
.lm-seg-flag--fisik { border-color: var(--accent); color: var(--accent); }

/* Sisi penjual: dua jalur pasar */
.lm-sell { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); }
.lm-sell-head { margin: 0 0 .7rem; font-size: .82rem; color: var(--txt-muted); }
.lm-sell-lanes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.lm-sell-lane { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--bg-card); transition: border-color .15s, transform .15s; }
.lm-sell-lane:hover { border-color: var(--accent); transform: translateY(-2px); }
.lm-sell-lane > .ic { color: var(--accent); }
.lm-sell-lane strong { font-size: .92rem; color: var(--txt); }
.lm-sell-lane > span:not(.lm-sell-cta) { font-size: .78rem; line-height: 1.45; color: var(--txt-muted); }
.lm-sell-cta { margin-top: .15rem; font-size: .8rem; font-weight: 600; color: var(--accent); }

@media (max-width: 900px) {
  /* Saat membungkus, pil CTA jatuh ke barisnya sendiri — lebarkan penuh
     supaya tetap terbaca sebagai tombol, bukan potongan teks. */
  .lm-banner { flex-wrap: wrap; }
  .lm-banner-cta { width: 100%; }
  .lm-sell-lanes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lm-banner { gap: .75rem; padding: .95rem .9rem; }
  .lm-banner-ic { width: 2.5rem; height: 2.5rem; box-shadow: 0 0 0 3px var(--accent-soft, rgba(56,189,248,.14)); }
  .lm-banner-ic .ic { width: 1.3em; height: 1.3em; }
  .lm-banner-txt strong { font-size: 1.02rem; }
  .lm-banner-sub { font-size: .77rem; }
  .lm-banner-stats { gap: .25rem .7rem; margin-top: .4rem; }
  .lm-banner-stat b { font-size: 1rem; }
  .lm-banner-stat i { font-size: .6rem; }
  .lm-banner-cta { width: 100%; }
  .lm-seg-flag { top: .45rem; right: .45rem; font-size: .56rem; padding: .1rem .38rem; }
  .lm-prod-meta { gap: .28rem; }
  .lm-chip { font-size: .62rem; padding: .12rem .4rem; }
  /* Layar 360px: kartu ±148px — jangan biarkan label panjang meluber. */
  .lm-prod-meta .lm-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-banner:hover, .lm-sell-lane:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   §H · Halaman yang lebih hidup — hierarki, gerak halus, CTA jelas
   ────────────────────────────────────────────────────────────────────
   Tiga keluhan yang bisa dibaca langsung dari aturan di atas:

     1. HIERARKI. Kicker section (.lhub-kicker) dan judul (.lhub-title)
        cuma dibedakan ukuran huruf; tidak ada penanda bentuk yang
        memberi tahu mata "di sini bagian baru mulai". Kicker hero
        (.lm-kicker) sama: teks mono kecil melayang tanpa wadah.
     2. GERAK. Satu-satunya gerak di halaman adalah orb latar dan
        transform:-2px saat hover. Halaman terasa diam: seluruh S3–S8
        muncul sekaligus, tanpa ritme saat digulir.
     3. CTA. Fold pertama tidak punya tombol (lihat .lm-cta-row baru di
        landing.html), pil .lhub-cta-btn rata tanpa kedalaman maupun
        cincin fokus, dan "Lihat semua produk" hanya teks berwarna.

   Semua nilai warna tetap diturunkan dari token tema (--accent, --bg-*,
   --line) → benar di mode terang maupun gelap. Semua gerak dimatikan
   pada prefers-reduced-motion: reduce (blok terakhir).
   ════════════════════════════════════════════════════════════════════ */

/* ── H1 · Hierarki: kicker jadi penanda bentuk, bukan sekadar teks ── */
.lhub-kicker { display: inline-flex; align-items: center; gap: .55rem; }
.lhub-kicker::before {
  content: ""; flex: 0 0 auto; width: 1.7rem; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .65;
}
.lm-kicker {
  display: inline-block; padding: .3rem .85rem; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line); background: var(--accent-soft, rgba(56,189,248,.12));
}
.lhub-title { letter-spacing: -.015em; }

/* ── H2 · CTA: kedalaman, angkat saat hover, cincin fokus ── */
.lhub-cta-btn {
  box-shadow: 0 10px 20px -14px var(--accent);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}
.lhub-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px var(--accent); }
.lhub-cta-btn:active { transform: translateY(0); }
.lhub-cta-btn.ghost { box-shadow: none; }
.lhub-cta-btn.ghost:hover { box-shadow: none; }
/* Cincin fokus keyboard untuk SEMUA target klik utama di halaman ini —
   sebelumnya hanya .lm-banner yang punya. */
.lhub-cta-btn:focus-visible,
.lm-cat:focus-visible,
.lm-prod:focus-visible,
.lm-door:focus-visible,
.lm-sell-lane:focus-visible,
.lm-et-search:focus-visible,
.lm-et-foot a:focus-visible,
.lhub-card--link:focus-visible,
a.lhub-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Baris CTA hero */
.lm-cta-row { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.4rem; }

/* "Lihat semua produk di katalog" — dari teks berwarna jadi pil yang
   terlihat bisa diklik (bentuk sama dengan .lhub-cta-btn.ghost). */
.lm-et-foot a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.05rem;
  border: 1px solid var(--line); border-radius: var(--r-pill, 999px);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.lm-et-foot a:hover { border-color: var(--accent); background: var(--accent-soft, rgba(56,189,248,.12)); transform: translateY(-1px); }
/* Anak panah "Ajukan produk →" ikut maju saat kartunya disentuh. */
.lm-sell-cta { display: inline-block; transition: transform .16s ease; }
.lm-sell-lane:hover .lm-sell-cta { transform: translateX(3px); }

/* ── H3 · Kedalaman kartu: bayangan aksen tipis saat hover ── */
a.lhub-card:hover, .lhub-card--link:hover { box-shadow: 0 18px 34px -26px var(--accent); }
.lm-prod, .lm-door, .lm-sell-lane { transition: border-color .15s, transform .15s, box-shadow .15s; }
.lm-prod:hover, .lm-door:hover, .lm-sell-lane:hover { box-shadow: 0 20px 36px -26px var(--accent); }
.lm-prod-cover img { transition: transform .45s cubic-bezier(.22,.7,.3,1); }
.lm-prod:hover .lm-prod-cover img { transform: scale(1.045); }

/* ── H4 · Gerak: hero masuk bertahap (CSS murni, tanpa JS) ── */
@media (prefers-reduced-motion: no-preference) {
  .lm-kicker, .lm-h1, .lm-sub, .lm-cta-row, .lm-etalase, .lm-proofbar {
    animation: lmRise .62s cubic-bezier(.22,.7,.3,1) both;
  }
  /* Jeda sengaja pendek: seluruh rantai selesai < 0,9 dtk supaya etalase
     (barang dagangan) tidak tertahan lama di balik animasi judul. */
  .lm-kicker   { animation-delay: .02s; }
  .lm-h1       { animation-delay: .07s; }
  .lm-sub      { animation-delay: .13s; }
  .lm-cta-row  { animation-delay: .19s; }
  .lm-etalase  { animation-delay: .25s; }
  .lm-proofbar { animation-delay: .31s; }
}
@keyframes lmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── H5 · Gerak: section di bawah hero terungkap saat digulir ──
   Kelas .lhub-reveal DIPASANG OLEH JS (IIFE #5 di landing.html), bukan di
   markup — tanpa JS halaman tetap tampil penuh, tidak ada yang tersembunyi
   permanen. Jeda per-elemen lewat --lhub-d yang di-set JS. */
.lhub-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1);
  transition-delay: var(--lhub-d, 0s);
}
.lhub-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lhub-cta-btn:hover, .lm-et-foot a:hover { transform: none; }
  .lm-sell-lane:hover .lm-sell-cta { transform: none; }
  .lm-prod:hover .lm-prod-cover img { transform: none; }
  .lhub-reveal { opacity: 1; transform: none; transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   §K · KAROSEL FITUR BERGAMBAR + ETALASE KELAS (permintaan Rio, 12 Agu 2026)
   ────────────────────────────────────────────────────────────────────
   "Fitur utama … swipe otomatis … dengan gambar, profesional dan tidak
   berupa ikon", lalu "etalase kelas … bentuk tampilannya seperti etalase
   yang padat", tiap kartu "ada thumbnail yang menarik".

   Tiga keputusan bentuk yang perlu dicatat karena keliru menebaknya mahal:

     1. RELNYA PENGGULIRAN CSS, BUKAN TRANSFORM. Slide disusun sebagai baris
        yang bisa digulir dengan scroll-snap. Akibatnya sentuh/seret,
        roda mendatar, tombol panah keyboard, dan pembaca layar semuanya
        bekerja TANPA JavaScript — JS hanya menambah geser otomatis. Karosel
        berbasis transform akan mati total begitu skripnya gagal dimuat.
     2. TEKS DI SAMPING GAMBAR, BUKAN DI ATASNYA. Gambar datang dari jalur
        kerja lain dan isinya belum kita lihat; teks putih di atas gambar
        yang kebetulan terang = tidak terbaca, dan tidak ada nilai token yang
        bisa menyelamatkannya. Panel teks memakai --bg-card, jadi kontrasnya
        benar apa pun gambarnya, di tema terang maupun gelap.
     3. BINGKAI PUNYA aspect-ratio SENDIRI. Tinggi bingkai tidak bergantung
        pada gambar yang belum mendarat, jadi tata letak tidak melompat saat
        gambar lazy-load masuk — bahkan kalau atribut width/height di
        manifest salah.
   Semua warna lewat token (--accent, --bg-*, --line, --txt-*). Semua gerak
   mati pada prefers-reduced-motion (blok terakhir §K).
   ════════════════════════════════════════════════════════════════════ */

/* Fold pertama jadi lebih rapat (bilah → karosel → rak kelas → rak alat) dan
   dapat ruang bawah yang dulu disumbang bilah bukti sebelum ia dibuang. */
.lm-hero { padding-bottom: 1.7rem; }
.lm-hero-inner { gap: 1.35rem; }
/* Jangkar "Kelas" di navbar melompat ke rak di dalam hero — navbar melekat
   setinggi --lhub-nav-h, jadi tanpa ini judul raknya tertutup. */
.lp-shelf { scroll-margin-top: calc(var(--lhub-nav-h) + 12px); }

.lp-kar { position: relative; }
.lp-kar.hide { display: none; }

.lp-kar-trek {
  display: flex; gap: .8rem; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: var(--r-lg, 16px);
}
.lp-kar-trek::-webkit-scrollbar { display: none; }
.lp-kar-trek:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lp-kar-slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .15s;
}
.lp-kar-slide:hover { border-color: var(--accent); }
.lp-kar-slide:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lp-kar-gbr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-input); }
.lp-kar-gbr img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,.7,.3,1);
}
.lp-kar-slide:hover .lp-kar-gbr img { transform: scale(1.035); }

.lp-kar-teks { display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: 1.25rem 1.5rem; min-width: 0; }
.lp-kar-kicker { font-family: var(--ff-mono, ui-monospace, monospace); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
/* Judul slide sengaja DIBATASI 1,5rem: fold ini sudah punya satu judul
   halaman; slide yang berteriak akan mengulangi keluhan "judulnya kebesaran". */
.lp-kar-teks strong { font-size: clamp(1.05rem, .9rem + .55vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; color: var(--txt); }
.lp-kar-d { font-size: .86rem; line-height: 1.55; color: var(--txt-muted); }
.lp-kar-cta { margin-top: .3rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--accent); }
.lp-kar-cta::after { content: "→"; transition: transform .16s ease; }
.lp-kar-slide:hover .lp-kar-cta::after { transform: translateX(3px); }

/* Kemudi: [‹] [• • •] [›] di bawah rel — tidak menumpang di atas gambar. */
.lp-kar-kaki { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: .6rem; }
.lp-kar-nav {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  cursor: pointer; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-card); color: var(--txt-muted);
  transition: border-color .15s, color .15s;
}
.lp-kar-nav:hover { border-color: var(--accent); color: var(--txt); }
.lp-kar-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp-kar-nav svg { width: 16px; height: 16px; stroke-width: 2; fill: none; }

.lp-kar-titik { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.lp-kar-dot {
  width: 8px; height: 8px; padding: 0; cursor: pointer; border: 0;
  border-radius: var(--r-pill, 999px); background: var(--line);
  transition: width .2s ease, background .2s ease;
}
.lp-kar-dot:hover { background: var(--txt-faint); }
.lp-kar-dot.is-on { width: 22px; background: var(--accent); }
.lp-kar-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Rak (kelas & alat): judul kecil + baris aksi di kanan ── */
.lp-shelf { display: flex; flex-direction: column; gap: .75rem; }
.lp-shelf.hide { display: none; }
.lp-shelf-head { display: flex; align-items: center; gap: .55rem .9rem; flex-wrap: wrap; }
.lp-shelf-head h2 { margin: 0; font-family: inherit; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--txt); }
.lp-shelf-head p { margin: 0; font-size: .78rem; color: var(--txt-muted); }
.lp-shelf-head .lp-chips, .lp-shelf-link { margin-left: auto; }
.lp-shelf-link { font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.lp-shelf-link:hover { text-decoration: underline; }
.lp-shelf-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Kartu kelas: padat, thumbnail selalu terisi ──
   Latar .lp-kls-thumb SELALU diberi gradien sampul generatif dari server, jadi
   gambar yang gagal dimuat (onerror → elemennya dibuang) meninggalkan sampul
   bermerek, bukan lubang abu-abu. */
.lp-kls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .7rem; }
.lp-kls {
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--bg-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lp-kls:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 18px 34px -26px var(--accent); }
.lp-kls:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp-kls.hide { display: none; }
.lp-kls-thumb { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.lp-kls-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.22,.7,.3,1); }
.lp-kls:hover .lp-kls-thumb img { transform: scale(1.05); }
.lp-kls-ph { line-height: 0; }
.lp-kls-ph .ic, .lp-kls-ph svg { width: 46px; height: 46px; }
/* Kartu ajakan (katalog kelas kosong): bukan sampul produk, jadi ia memakai
   wash aksen — bukan gradien sampul yang menyiratkan "ini sebuah kelas". */
.lp-kls--kosong .lp-kls-thumb { background: var(--accent-soft, rgba(56,189,248,.12)); }
.lp-kls--kosong .lp-kls-ph .ic { color: var(--accent); }
.lp-kls-body { display: flex; flex-direction: column; gap: .28rem; flex: 1; padding: .65rem .78rem .8rem; }
.lp-kls-body strong { font-size: .84rem; line-height: 1.35; color: var(--txt); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-kls-d { font-size: .75rem; line-height: 1.45; color: var(--txt-muted); }
.lp-kls-meta { margin-top: auto; padding-top: .4rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.lp-kls-kind { font-family: var(--ff-mono, ui-monospace, monospace); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.lp-kls-tag { margin-left: auto; font-size: .68rem; font-weight: 600; padding: .12rem .48rem; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--bg-input); color: var(--txt-muted); white-space: nowrap; }

@media (max-width: 860px) {
  /* Panel teks di samping gambar jadi terlalu sempit → tumpuk. */
  .lp-kar-slide { grid-template-columns: 1fr; }
  .lp-kar-teks { padding: .95rem 1.05rem 1.1rem; }
  .lp-kar-trek { gap: .6rem; }
}
@media (max-width: 700px) {
  .lp-kls-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
  .lp-shelf-head .lp-chips { margin-left: 0; width: 100%; }
  .lp-shelf-link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-kar-slide:hover .lp-kar-gbr img,
  .lp-kls:hover .lp-kls-thumb img,
  .lp-kar-slide:hover .lp-kar-cta::after { transform: none; }
  .lp-kls:hover { transform: none; }
  .lp-kar-dot { transition: none; }
}