/* jual.css — tambahan khusus mockup penjualan DBenk Hub (landing, uji coba, portal, konsol).
   Dasar = theme.css (salinan byte-identik ui/theme/theme.css). Di sini hanya: font Inter lokal (landing boleh memuat font
   sendiri; Hub tidak), komponen landing, dan beberapa komponen portal/konsol yang belum ada di tema. */
@font-face { font-family:'Inter'; src:url(InterVariable.woff2) format('woff2'); font-weight:100 900; font-display:swap }
body { font-feature-settings:'cv11','ss01'; }
.num { font-variant-numeric:tabular-nums }
.mono { font-family:var(--mono) }
.draft-tag { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#1a1300; background:#fbbf24 }

/* ---------- Landing ---------- */
.lp { position:relative; z-index:1 }
.wrap { width:min(1200px,100% - 48px); margin-inline:auto }
.lp-nav { position:sticky; top:0; z-index:30; background:color-mix(in oklab,var(--bg) 78%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.lp-nav .wrap { display:flex; align-items:center; gap:28px; height:68px }
.lp-nav nav { display:flex; gap:22px; margin-right:auto; font-size:14px }
.lp-nav nav a { color:var(--text-2) } .lp-nav nav a:hover { color:var(--text); text-decoration:none }
.lang { display:inline-flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; font-size:12px; font-weight:700 }
.lang a { padding:5px 9px; color:var(--muted) } .lang a.on { background:var(--surface-2); color:var(--text) } .lang a:hover { text-decoration:none }
.btn.lg { padding:12px 20px; font-size:15px; border-radius:13px }

.lp-hero { padding:72px 0 0; overflow:hidden }
.lp-hero .wrap { display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:56px; align-items:start }
.kicker { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--violet-s) }
.lp-hero h1 { font-size:52px; line-height:1.05; letter-spacing:-.035em; font-weight:800; margin:14px 0 18px; text-wrap:balance }
.lp-hero h1 em { font-style:normal; background:linear-gradient(90deg,#c4b5fd,#67e8f9); -webkit-background-clip:text; background-clip:text; color:transparent }
.lede { font-size:18px; line-height:1.55; color:var(--text-2); max-width:46ch; text-wrap:pretty }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }
.cmd { display:flex; align-items:center; gap:12px; margin-top:28px; padding:12px 12px 12px 16px; border-radius:14px; background:#05060f; border:1px solid var(--line-2); font:13.5px/1.4 var(--mono); color:#d7dbff; max-width:520px }
.cmd .p { color:#6ee7b7; user-select:none } .cmd code { background:none; padding:0; flex:1; font-size:13.5px; color:#e5e7ff }
.cmd .copy { font:600 12px var(--font); color:var(--text-2); background:var(--surface-2); border:1px solid var(--line); padding:6px 10px; border-radius:9px }
.cmd-cap { margin-top:8px; font-size:12.5px; color:var(--muted) }
.facts { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; font-size:13px; color:var(--text-2) }
.facts span::before { content:'✓'; color:var(--ok-text); font-weight:800; margin-right:7px }
.shot { position:relative; margin-right:-220px; border-radius:16px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.03) }
.shot .bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#1b1d36; border-bottom:1px solid var(--line) }
.shot .bar i { width:10px; height:10px; border-radius:50%; background:#3a3d63 } .shot .bar span { margin-left:12px; font:11.5px var(--mono); color:var(--muted) }
.shot img { display:block; width:100%; height:auto }

.lp-sec { padding:96px 0 0 }
.sec-head { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:56px; align-items:end; margin-bottom:36px }
.sec-head h2 { font-size:36px; line-height:1.1; letter-spacing:-.025em; font-weight:800; text-wrap:balance }
.sec-head p { color:var(--text-2); font-size:16px; max-width:58ch }

.mods { border-top:1px solid var(--line-2) }
.mod { display:grid; grid-template-columns:240px minmax(0,1fr) minmax(0,1fr); gap:40px; padding:28px 0; border-bottom:1px solid var(--line) }
.mod-name b { display:block; font-size:22px; font-weight:800; letter-spacing:-.015em }
.mod-name small { display:block; margin-top:6px; font-size:12px; color:var(--muted) }
.mod-name .chip { margin-top:10px }
.mod-what { font-size:15.5px; line-height:1.55; color:var(--text-2); text-wrap:pretty }
.mod-list { list-style:none; padding:0; display:grid; gap:8px; font-size:14px; color:var(--text-2) }
.mod-list li { padding-left:18px; position:relative } .mod-list li::before { content:''; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--hs) }

.trust { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line-2); border-radius:20px; overflow:hidden; background:var(--surface) }
.trust > div { padding:26px 28px } .trust > div + div { border-left:1px solid var(--line) }
.trust b { display:block; font-size:16px; margin-bottom:6px } .trust p { color:var(--text-2); font-size:14px }

.bill { display:inline-flex; padding:4px; gap:4px; border-radius:12px; background:var(--surface); border:1px solid var(--line-2) }
.bill a { padding:7px 14px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text-2) } .bill a:hover { text-decoration:none; color:var(--text) }
.bill a.on { background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2) } .bill a em { font-style:normal; color:var(--ok-text); font-size:11.5px; margin-left:6px }
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line-2); border-radius:22px; background:var(--surface); overflow:hidden }
.plan { display:flex; flex-direction:column; gap:14px; padding:28px 28px 30px }
.plan + .plan { border-left:1px solid var(--line) }
.plan.hi { background:linear-gradient(180deg,color-mix(in oklab,#7c3aed 20%,var(--surface)),var(--surface) 70%); box-shadow:inset 0 3px 0 #8b5cf6 }
.plan h3 { font-size:20px; font-weight:800; display:flex; align-items:center; gap:10px }
.plan .for { font-size:13.5px; color:var(--muted); min-height:40px }
.price { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap } .price b { font-size:34px; font-weight:800; letter-spacing:-.03em } .price span { color:var(--muted); font-size:13px }
.price-sub { font-size:12.5px; color:var(--muted); margin-top:-8px }
.plan ul { list-style:none; padding:0; display:grid; gap:8px; font-size:14px; color:var(--text-2); border-top:1px solid var(--line); padding-top:16px }
.plan ul li::before { content:'✓'; color:var(--ok-text); font-weight:800; margin-right:8px }
.plan ul li.no { color:var(--muted) } .plan ul li.no::before { content:'–'; color:var(--muted) }
.plan .btn { margin-top:auto }
.addons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px }
.addon { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:16px; border:1px solid var(--line); background:color-mix(in oklab,var(--surface) 60%,transparent) }
.addon b { display:block; font-size:15px } .addon p { font-size:13px; color:var(--muted); margin-top:3px }
.addon .amt { text-align:right; white-space:nowrap; font-weight:700; font-size:15px } .addon .amt small { display:block; font-weight:500; color:var(--muted) }
.perp { margin-top:16px; padding:16px 20px; border-radius:16px; border:1px dashed var(--line-2); font-size:14px; color:var(--text-2) }

.faq { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; border-top:1px solid var(--line-2) }
.faq details { border-bottom:1px solid var(--line); padding:18px 0 }
.faq summary { list-style:none; font-weight:700; font-size:15.5px; display:flex; justify-content:space-between; gap:16px }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:'+'; color:var(--muted); font-weight:500; font-size:20px; line-height:1 } .faq details[open] summary::after { content:'–' }
.faq details p { margin-top:10px; color:var(--text-2); font-size:14.5px; max-width:60ch }

.final { margin-top:110px; padding:56px 0; border-top:1px solid var(--line); background:radial-gradient(60% 120% at 15% 0%,color-mix(in oklab,#7c3aed 28%,transparent),transparent 70%),radial-gradient(50% 120% at 100% 100%,color-mix(in oklab,#0e7490 30%,transparent),transparent 70%) }
.final .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:48px; align-items:center }
.final h2 { font-size:38px; line-height:1.08; letter-spacing:-.03em; font-weight:800; text-wrap:balance }
.final p { color:var(--text-2); margin-top:12px; font-size:16px }
.inline-form { display:flex; gap:8px } .inline-form input { flex:1 }
.foot { padding:28px 0 40px; border-top:1px solid var(--line); font-size:13px; color:var(--muted) }
.foot .wrap { display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between }
.foot nav { display:flex; gap:18px } .foot a { color:var(--muted) }

@media (max-width:980px) {
  .lp-nav nav, .lp-nav .hide-m { display:none }
  .lp-nav .wrap { gap:12px; height:60px }
  .lp-hero { padding-top:40px }
  .lp-hero .wrap, .sec-head, .final .wrap { grid-template-columns:minmax(0,1fr); gap:28px }
  .lp-hero h1 { font-size:36px }
  .lede { font-size:16px }
  .shot { margin-right:-60px }
  .lp-sec { padding-top:64px }
  .sec-head h2, .final h2 { font-size:28px }
  .mod { grid-template-columns:minmax(0,1fr); gap:12px }
  .trust, .plans, .addons, .faq { grid-template-columns:minmax(0,1fr) }
  .trust > div + div, .plan + .plan { border-left:0; border-top:1px solid var(--line) }
  .cmd { font-size:12px } .cmd code { font-size:12px }
  .inline-form { flex-direction:column }
  .final { margin-top:72px }
}

/* ---------- Uji coba ---------- */
.flow { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column }
.flow-top { display:flex; align-items:center; justify-content:space-between; padding:18px 28px }
.flow-main { flex:1; display:grid; place-items:start center; padding:24px 24px 64px }
.flow-card { width:min(1040px,100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 40px 80px -30px rgba(0,0,0,.6) }
.flow-side { padding:36px; background:linear-gradient(160deg,#4338ca,#7e22ce 60%,#a21caf); color:#fff; display:flex; flex-direction:column; gap:22px }
.flow-side h1 { font-size:30px; line-height:1.12; letter-spacing:-.02em }
.flow-side p { opacity:.92 }
.flow-side ul { list-style:none; padding:0; display:grid; gap:10px; font-size:14.5px } .flow-side ul li::before { content:'✓'; margin-right:10px; font-weight:800 }
.flow-side .small { opacity:.85; margin-top:auto }
.flow-form { padding:36px; display:grid; gap:18px; align-content:start }
.steps { display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); flex-wrap:wrap }
.steps b { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-2); font-size:11.5px; color:var(--text-2); margin-right:6px }
.steps .on { color:var(--text); font-weight:600 } .steps .on b { background:#7c3aed; border-color:#7c3aed; color:#fff }
.steps .done b { background:#047857; border-color:#047857; color:#fff }
.steps i { width:20px; height:1px; background:var(--line-2) }
.flow-form h2 { font-size:22px; font-weight:800 }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.ok-head { display:flex; gap:14px; align-items:flex-start }
.ok-ico { width:44px; height:44px; flex:none; border-radius:14px; display:grid; place-items:center; font-weight:800; font-size:20px; color:#fff; background:linear-gradient(135deg,#047857,#0f766e) }
.term { border-radius:14px; overflow:hidden; border:1px solid var(--line-2); background:#05060f }
.term-bar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#14162c; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted) }
.term pre { border:0; border-radius:0; background:none; color:#e5e7ff; font-size:13px; padding:14px 16px; margin:0 }
.term pre .p { color:#6ee7b7 } .term pre .c { color:#8b90b8 }
.tl { list-style:none; padding:0; display:grid; gap:0 }
.tl li { display:grid; grid-template-columns:28px 1fr; gap:12px; padding:0 0 16px; position:relative }
.tl li::before { content:''; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--line) } .tl li:last-child::before { display:none }
.tl .n { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--surface-2); border:1px solid var(--line-2) }
.tl b { display:block; font-size:14px } .tl p { font-size:13px; color:var(--muted) }
@media (max-width:860px) {
  .flow-card { grid-template-columns:minmax(0,1fr) }
  .flow-side, .flow-form { padding:24px 20px }
  .flow-side h1 { font-size:24px }
  .flow-main { padding:8px 12px 40px } .flow-top { padding:14px 16px }
  .two { grid-template-columns:1fr }
  .flow-side ul.hide-m { display:none }
}

/* ---------- Portal & konsol ---------- */
.nav-ico svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.lic-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start }
.lic-id { font:600 13px var(--mono); color:var(--text-2) }
.lic-title { font-size:20px; font-weight:800; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:16px 0 }
.meta > div { background:var(--surface); padding:12px 14px } .meta dt { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600 } .meta dd { margin:4px 0 0; font-weight:600; font-size:14px }
.meta dd small { display:block; font-weight:400; color:var(--muted); font-size:12px }
.split { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:start }
.side-card { padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow) }
.side-card + .side-card { margin-top:18px }
.side-card h2 { font-size:15px; margin-bottom:10px }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.filters input { max-width:300px }
.seg { display:inline-flex; gap:2px; padding:3px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line) }
.seg a { padding:5px 11px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--muted) } .seg a:hover { text-decoration:none; color:var(--text) }
.seg a.on { background:var(--surface); color:var(--text); box-shadow:0 1px 0 var(--line-2) } .seg a i { font-style:normal; color:var(--muted); margin-left:4px; font-weight:500 }
tr.sel > * { background:color-mix(in oklab,#7c3aed 12%,transparent) !important }
tr.sel > :first-child { box-shadow:inset 3px 0 0 #8b5cf6 }
.cust b { display:block } .cust small { color:var(--muted) }
.bar-s { display:inline-block; width:64px; height:6px; border-radius:6px; background:var(--meter-track); vertical-align:middle; margin-right:6px; overflow:hidden } .bar-s i { display:block; height:100%; background:var(--series-1) }
.events { list-style:none; padding:0; display:grid; gap:10px; font-size:13px }
.events li { display:grid; grid-template-columns:96px 1fr; gap:10px } .events time { color:var(--muted); font-size:12px }
.paper { background:#fff; color:#12142b; border-radius:6px; padding:44px 48px; box-shadow:0 30px 60px -30px rgba(20,24,60,.45); border:1px solid rgba(20,24,60,.12); font-size:13px }
.paper .ph { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:2px solid #12142b }
.paper h3 { font-size:22px; letter-spacing:.02em } .paper .muted { color:#565c84 }
.paper table { margin-top:18px; font-size:13px } .paper th, .paper td { border-bottom:1px solid rgba(20,24,60,.12); color:#12142b }
.paper thead th { background:#f5f6fd; color:#565c84; position:static }
.paper .tot { margin-left:auto; width:min(320px,100%); display:grid; grid-template-columns:1fr auto; gap:6px 18px; margin-top:14px }
.paper .tot .g { font-weight:800; font-size:16px; border-top:2px solid #12142b; padding-top:8px }
.paper .pay { margin-top:24px; padding:14px 16px; background:#f5f6fd; border-radius:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px }
.paper .stamp { display:inline-block; padding:4px 10px; border:2px solid #b45309; color:#b45309; font-weight:800; letter-spacing:.1em; border-radius:6px; transform:rotate(-4deg) }
.effect { padding:12px 14px; border-radius:12px; background:color-mix(in oklab,#047857 12%,var(--surface)); border:1px solid color-mix(in oklab,#047857 30%,transparent); font-size:13px }
.effect b { color:var(--ok-text) }
@media (max-width:1180px) { .split { grid-template-columns:minmax(0,1fr) } }
@media (max-width:720px) {
  .meta { grid-template-columns:1fr 1fr }
  .paper { padding:22px 18px } .paper .ph { flex-direction:column } .paper .pay { grid-template-columns:1fr }
  .filters input { max-width:none }
  .hide-s { display:none }
}

.g7 { grid-column:span 7; min-width:0 } .g5 { grid-column:span 5; min-width:0; display:grid; gap:12px; align-content:start }
@media (max-width:860px) { .g7, .g5 { grid-column:span 12 } }
.g5 .side-card + .side-card { margin-top:0 }
td.num { white-space:nowrap }
.filters input { min-width:300px }
@media (max-width:720px){ .filters input { min-width:0 } }
@media (max-width:720px) {
  .seg { max-width:100%; overflow-x:auto; flex-wrap:nowrap } .seg a { white-space:nowrap }
  table.stack tr { display:grid !important; grid-template-columns:1fr 1fr; column-gap:4px }
  table.stack tr > :first-child { grid-column:1 / -1 }
}

/* revisi 31 Okt: 4 paket, mode server/AI */
.plans.four { grid-template-columns:repeat(4,minmax(0,1fr)) }
.plans.four .plan { padding:26px 22px 28px } .plans.four .price b { font-size:30px }
.bill.mode a.off { color:var(--muted) } .bill a em.sub { color:var(--muted) }
.soon { display:inline-flex; align-items:center; padding:1px 8px; margin-left:6px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1a1300; background:#fbbf24; vertical-align:middle }
.modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:16px }
.mode-card { padding:18px 20px; border-radius:16px; border:1px dashed var(--line-2); background:color-mix(in oklab,var(--surface) 50%,transparent) }
.mode-card.on { border-style:solid; box-shadow:inset 0 3px 0 #22d3ee }
.mode-card.ai { border-style:solid; box-shadow:inset 0 3px 0 #10b981 }
.mode-card b { display:block; font-size:15px; margin-bottom:4px } .mode-card p { font-size:13px; color:var(--text-2) }
@media (max-width:1180px) { .plans.four { grid-template-columns:repeat(2,minmax(0,1fr)) } .plans.four .plan:nth-child(3) { border-left:0 } .plans.four .plan:nth-child(n+3) { border-top:1px solid var(--line) } }
@media (max-width:980px) { .plans.four, .modes { grid-template-columns:minmax(0,1fr) } .plans.four .plan + .plan { border-left:0; border-top:1px solid var(--line) } }