/* BBOTO Banding Leasing V1.4 — mengikuti bahasa desain BBOTO (homepage V2 / halaman mobil V34) */
:root{
  --cream:#f3efe4;--soft:#f6f3ea;--paper:#fff;--line:#e4e0d4;--line-strong:#cfc6ae;
  --ink:#10201a;--muted:#5f6f66;--green:#08783f;--gd:#063d2b;
  --mint:#8ff0b8;--mint-text:#dcefe3;--mint-muted:#9fd6b5;--mint-soft:#e3efe5;
  --o1:#ff7a0f;--o2:#ffa646;--od:#c2410c;--osoft:#fff1e3;--peach:#ffb070;
  --red:#b42318;--redsoft:#fdecea;
  --grad:linear-gradient(135deg,#042e20 0%,#08532f 55%,#0b6b3c 100%);
  --grad-o:linear-gradient(100deg,#ff7a0f,#ffa646);
  --sh:0 14px 40px rgba(60,45,10,.07);--sh-cta:0 6px 18px rgba(255,122,15,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
.wrap{width:min(1180px,100% - 48px);margin:0 auto}
.num,.rpc{font-variant-numeric:tabular-nums}
.kicker{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--od)}
.kicker.light{color:var(--peach)}
.sub{color:var(--muted);font-size:14px}
.muted{color:var(--muted)}
em{font-style:normal;color:var(--green)}

/* header */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px}
.logo{display:flex;flex:none}.logo img{height:24px;width:auto}
.hd-link{font-weight:800;font-size:13px;color:var(--gd);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;white-space:nowrap}

/* hero */
.hero{padding:40px 0 26px}
.hero h1{font-size:clamp(34px,5.6vw,64px);font-weight:900;letter-spacing:-.055em;line-height:1.02;margin:10px 0 14px;max-width:860px}
.lede{font-size:17px;color:var(--muted);max-width:720px}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.trust span{font-size:12.5px;font-weight:700;color:var(--gd);background:var(--mint-soft);border-radius:999px;padding:6px 12px}

/* layout */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;padding-bottom:48px}
.col-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.col-side{position:sticky;top:78px;min-width:0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh);padding:20px}
.card-h,.sec-h{display:flex;gap:12px;align-items:flex-start}
.card-h h2,.sec-h h2{font-size:20px;font-weight:900;letter-spacing:-.035em}
.sec-h{margin-top:10px}
.num-dot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gd);color:#fff;font-weight:900;font-size:14px;display:grid;place-items:center}

/* fields */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>span{font-size:12.5px;font-weight:700;color:var(--muted)}
.fld input,.fld select{width:100%;min-width:0;height:46px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 12px;font:inherit;font-weight:700;color:var(--ink)}
.fld input:focus,.fld select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.money,.suffix{display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:#fff;height:46px;padding:0 12px;gap:6px;min-width:0}
.money:focus-within,.suffix:focus-within{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.money small,.suffix small{font-weight:800;color:var(--muted);font-size:13px;flex:none}
.money input,.suffix input{border:0;height:auto;padding:0;outline:0!important;font-variant-numeric:tabular-nums}
.row2,.row3{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.row3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* car picker: pola KKB, katalog atau OTR manual */
.narrow{width:min(760px,100% - 48px)}
.form{display:flex;flex-direction:column;gap:12px;padding-bottom:44px}
.step{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;letter-spacing:-.03em;margin-bottom:12px}
.step.out{margin:10px 0 0}
.search{position:relative}
.search .ico{position:absolute;left:14px;top:15px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.search input{width:100%;height:50px;border:1.5px solid var(--line-strong);border-radius:999px;padding:0 16px 0 44px;font:inherit;font-size:16px;font-weight:700;color:var(--ink);background:#fff}
.search input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.sug{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(16,32,26,.16);z-index:5;overflow:hidden}
.sug button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:#fff;padding:8px 12px;text-align:left;font:inherit;cursor:pointer}
.sug button:hover,.sug button.on{background:var(--soft)}
.sug img{width:56px;height:42px;object-fit:contain;flex:none}
.sug b{display:block;font-size:14px}.sug small{color:var(--muted);font-size:12px}
.sug .none{padding:12px 14px;color:var(--muted);font-size:13px}
.sug .manual{display:block;width:100%;border:0;border-top:1px solid var(--line);background:var(--soft);padding:11px 14px;font:inherit;font-weight:800;font-size:13px;color:var(--od);text-align:left;cursor:pointer}
.picked{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:8px 10px 8px 8px;background:#fff}
.picked img{width:84px;height:63px;object-fit:contain;flex:none;border-radius:12px;background:#fff}
.picked-t{flex:1;min-width:0}
.picked-t b{display:block;font-size:16px;font-weight:900;letter-spacing:-.02em;line-height:1.25}
.picked-t span{font-size:13px;color:var(--muted);font-weight:600}
.chg{flex:none;border:1px solid var(--line-strong);background:#fff;border-radius:999px;height:36px;padding:0 14px;font:inherit;font-weight:800;font-size:13px;color:var(--gd);cursor:pointer}
.adv{margin-top:12px}
.adv summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--gd);list-style:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::after{content:" ›";}
.adv .row3{margin-top:10px}
.car-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:16px}
.car-mode button{min-height:42px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.car-mode button.on{background:#fff;color:var(--gd);box-shadow:0 3px 10px rgba(16,32,26,.07)}
.brand-browser{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.brand-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.brand-head b{font-size:13.5px}.brand-head small{font-size:11.5px;color:var(--muted)}
.brand-chips{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 7px;scrollbar-width:thin}
.brand-chips button{flex:none;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.brand-chips button.on{background:var(--gd);border-color:var(--gd);color:#fff}
.brand-cars{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5px;max-height:286px;overflow:auto}
.brand-cars button{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--line);border-radius:14px;background:#fff;padding:7px;text-align:left;font:inherit;cursor:pointer}
.brand-cars button:hover{border-color:var(--green);background:#fbfefb}
.brand-cars img{width:64px;height:48px;object-fit:contain;flex:none}
.brand-cars span{min-width:0}.brand-cars b{display:block;font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}.brand-cars small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.brand-empty{grid-column:1/-1;padding:10px 2px;color:var(--muted);font-size:12.5px}
.manual-start{padding:14px 15px;border-radius:14px;background:var(--mint-soft);color:var(--gd);display:flex;flex-direction:column;gap:2px}
.manual-start span{font-size:12.5px;color:var(--muted)}
/* offers */
#offerList{display:flex;flex-direction:column;gap:12px}
.offer{display:flex;flex-direction:column;gap:12px}
.offer-top{display:flex;align-items:center;gap:10px}
.offer .tag{flex:none;width:30px;height:30px;border-radius:10px;background:var(--osoft);color:var(--od);font-weight:900;display:grid;place-items:center}
.offer-name{flex:1;min-width:0;border:0;border-bottom:1px dashed var(--line-strong);font:inherit;font-weight:900;font-size:17px;letter-spacing:-.02em;padding:4px 0;color:var(--ink);background:transparent}
.offer-name:focus{outline:0;border-bottom-color:var(--green)}
.x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.combo-only{display:none}
.offer.combo .combo-only{display:flex}
.more summary{cursor:pointer;font-weight:800;font-size:13.5px;color:var(--gd);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+ "}
.more[open] summary::before{content:"− "}
.more summary small{color:var(--muted);font-weight:600;margin-left:4px}
.more .row3{margin-top:10px}
.hint{font-size:12.5px;color:var(--muted);min-height:0}
.hint:empty{display:none}
.hint b{color:var(--od)}
.offer-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.first-pay{padding:12px;border:1px solid #d7e7da;border-radius:14px;background:#f7fbf8}
.start-choice{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border:1px solid #ffd3a8;border-radius:20px;background:linear-gradient(135deg,#fff8ef,#fffdf8);box-shadow:var(--sh)}
.start-choice>div:first-child{display:flex;flex-direction:column;gap:2px}.start-choice b{font-size:15px}.start-choice span{font-size:12.5px;color:var(--muted)}
.start-actions{display:flex;gap:8px;flex:none}.btn.demo{background:var(--gd);color:#fff}.btn.demo span{font-size:9px;color:#fff;background:var(--o1);padding:3px 6px;border-radius:999px;letter-spacing:.06em}
.demo-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border:1px solid #b8dec6;border-radius:16px;background:var(--mint-soft)}
.demo-banner>div{display:flex;flex-direction:column}.demo-banner b{font-size:13.5px;color:var(--gd)}.demo-banner span{font-size:12px;color:var(--muted)}
.demo-banner button{flex:none;border:0;background:transparent;color:var(--green);font:inherit;font-size:12.5px;font-weight:900;cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font:inherit;font-weight:800;font-size:14px;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn.big{height:50px;font-size:15px;width:100%}
.btn.primary{background:var(--gd);color:#fff}
.btn.orange{background:var(--grad-o);color:#fff;box-shadow:var(--sh-cta)}
.btn.ghost{background:#fff;border-color:var(--line-strong);color:var(--gd)}
.btn.text{background:transparent;color:var(--od);padding:0 6px}
.btn.light{background:#fff;color:var(--gd);border-color:var(--line)}

/* Rp gaya C: Rp kecil & diredam, angka besar, satuan kecil */
.rpc{display:inline-flex;align-items:baseline;gap:.12em;white-space:nowrap;line-height:1}
.rpc .r{font-size:max(.46em,10.5px);font-weight:800;color:var(--rp,var(--muted));letter-spacing:-.01em}
.rpc .v{font-weight:900;letter-spacing:-.035em}
.rpc .u{font-size:max(.42em,10px);font-weight:800;color:var(--rp,var(--muted))}

/* results */
.results{background:var(--grad);color:#fff;padding:44px 0 56px}
.res-h{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.045em;line-height:1.08;margin-top:8px}
.res-h em{color:var(--mint)}
.res-sub{color:var(--mint-text);margin-top:6px}
/* tabel perbandingan berdampingan */
.tbl-wrap{margin-top:20px;background:#fff;border-radius:24px;color:var(--ink);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{--cols:2;min-width:100%}
.tr{display:grid;grid-template-columns:190px repeat(var(--cols),minmax(0,1fr));border-top:1px solid var(--line);align-items:stretch}
.tr:first-child{border-top:0}
.th{font-size:13px;font-weight:700;color:var(--muted);padding:12px 14px;display:flex;align-items:center}
.td{padding:12px 10px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;font-weight:800;font-size:15px}
.td.base{background:#f3faf5}
.td .rpc{font-size:17px;color:var(--ink)}
.td.best .rpc,.td.best .pct{color:var(--green)}
.td.best{box-shadow:inset 0 -3px 0 var(--mint)}
.pct{font-weight:900;font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.td small{font-size:11px;font-weight:600;color:var(--muted);line-height:1.3}
.tr.head .td{padding:14px 10px 12px;gap:4px;justify-content:flex-start}
.colh{font-size:14px;font-weight:900;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.colh .tg{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--osoft);color:var(--od);font-size:11px;margin-right:5px;vertical-align:1px}
.td.base .colh .tg{background:var(--gd);color:#fff}
.badge{align-self:flex-start;font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 8px;white-space:nowrap}
.badge.o{background:var(--grad-o);color:#fff}
.badge.g{background:var(--gd);color:#fff}
.tr.total .rpc{font-size:21px}
.tr.total .td{padding-top:14px;padding-bottom:14px}
.chip{align-self:flex-start;font-size:12px;font-weight:800;border-radius:10px;padding:4px 8px;line-height:1.3}
.chip.full{background:var(--mint-soft);color:var(--gd)}
.chip.low{background:var(--osoft);color:var(--od)}
.chip.unk{background:var(--soft);color:var(--muted)}
.delta{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.delta.up{color:var(--red)}.delta.dn{color:var(--green)}
.tbl-note{font-size:12.5px;color:var(--mint-text);margin-top:10px;line-height:1.5}
.insight{margin-top:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:16px 18px;font-size:15px;line-height:1.5;color:#fff}
.insight b{color:var(--peach)}
.lead{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;color:var(--ink)}
.lead h2{font-size:26px;font-weight:900;letter-spacing:-.045em;line-height:1.1;margin:6px 0 8px}
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lead-form .btn,.lead-form .err{grid-column:1/-1}
.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:11.5px;line-height:1.45}.consent input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--green);flex:none}.consent a{color:var(--green);font-weight:800}
.err{color:var(--red);font-size:13px;font-weight:700;min-height:0}
.err:empty{display:none}
.next{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.disclaimer{font-size:12px;color:var(--mint-muted);margin-top:18px;max-width:900px;line-height:1.55}

@media (max-width:760px){
  .lead{grid-template-columns:minmax(0,1fr)}
  .tr{grid-template-columns:repeat(var(--cols),minmax(var(--cmin,0px),1fr))}
  .tr .th{grid-column:1/-1;padding:10px 12px 0;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .tr.head .th{display:none}
  .tbl.many{--cmin:118px}
  .td{padding:6px 8px 10px}
  .tr.head .td{padding:12px 8px 10px}
  .td .rpc,.pct{font-size:15px}
  .tr.total .rpc{font-size:17px}
  .tr{border-top-color:#efebe0}
}
@media (max-width:640px){
  .wrap,.narrow{width:calc(100% - 32px)}
  .hero{padding:28px 0 18px}
  .lede{font-size:15.5px}
  .card{padding:16px;border-radius:20px}
  .row3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row3>.fld:last-child{grid-column:1/-1}
  .lead-form{grid-template-columns:minmax(0,1fr)}
  .hd-link{font-size:12px;padding:7px 11px}
  .tbl-wrap{border-radius:18px}
  .start-choice{align-items:stretch;flex-direction:column}.start-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.start-actions .btn{padding:0 10px;font-size:12.5px}
  .brand-cars{grid-template-columns:1fr}.brand-head{align-items:flex-start;flex-direction:column;gap:2px}
}
@media (max-width:360px){
  .logo img{height:20px}
  .td .rpc,.pct{font-size:13.5px}
  .tr.total .rpc{font-size:15px}
  .colh{font-size:12.5px}
  .td{padding:6px 6px 10px}
  .picked img{width:64px;height:48px}
}
@media print{.hd,.lead,.next,.offer-actions,#compareBtn,.form{display:none}.results{background:#fff;color:#000}}
@media (max-width:440px){
  .td{padding:6px 5px 10px}
  .tr.head .td{padding:12px 5px 10px}
  .td .rpc,.pct{font-size:13.5px;letter-spacing:-.04em}
  .tr.total .rpc{font-size:15px}
  .rpc .r{font-size:9.5px}
  .colh{font-size:12.5px}
  .badge{font-size:9.5px;padding:3px 6px}
  .chip{font-size:11px;padding:3px 6px}
  .delta{font-size:13.5px}
  .tr .th{padding:10px 8px 0}
}
@media (max-width:350px){
  .td .rpc,.pct{font-size:12px}
  .tr.total .rpc{font-size:13px}
  .rpc .r{font-size:8.5px}
  .colh{font-size:11.5px}
  .delta{font-size:12px}
}

/* ===== hasil ringkas, mudah dibaca ===== */
.results{background:var(--cream);color:var(--ink);padding:8px 0 56px;border-top:1px solid var(--line)}
.results .wrap.narrow{display:flex;flex-direction:column;gap:14px}
.results .kicker{margin-top:24px}
.res-car{display:flex;gap:14px;align-items:center}
.res-car img{width:116px;height:87px;object-fit:contain;flex:none}
.res-car b{display:block;font-size:20px;font-weight:900;letter-spacing:-.035em;line-height:1.15}
.res-car span{display:block;color:var(--muted);font-size:13.5px;font-weight:600;margin-top:2px}
.st{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12.5px;font-weight:800;border-radius:999px;padding:5px 10px;margin-top:8px}
.st.ok{background:var(--mint-soft);color:var(--green)}
.st.warn-st{background:var(--osoft);color:var(--od)}
/* tenor chips */
.tenor{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tenor button{min-width:48px;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer}
.tenor button.on{background:var(--gd);border-color:var(--gd);color:#fff}
.tenor small{font-size:12.5px;color:var(--muted);font-weight:700;margin-left:2px}
/* jawaban utama */
.answer{background:linear-gradient(160deg,#eaf6ee,#f7fbf3);border:1px solid #cfe7d6;border-radius:24px;padding:20px}
.a-k{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--green)}
.answer h3{font-size:20px;font-weight:900;letter-spacing:-.03em;margin-top:4px}
.a-big .rpc{font-size:clamp(38px,9vw,52px);color:var(--gd);margin-top:4px}
.a-big .rpc .r{font-size:.4em}
.a-big.up .rpc{color:var(--red)}
.a-sub{font-size:14px;color:var(--muted);font-weight:600;margin-top:4px}
.bars{display:flex;flex-direction:column;gap:10px;margin-top:16px;background:#fff;border-radius:16px;padding:14px}
.bar .bl{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.bar .bl span{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .bl b{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar i{display:block;height:10px;border-radius:99px;background:#d9d3c2;margin-top:5px}
.bar.min i{background:var(--green)}
.bar.base i{background:repeating-linear-gradient(90deg,#063d2b 0 10px,#0b6b3c 10px 20px)}
.bar.base.min i{background:var(--green)}
.a-note{font-size:12px;color:var(--muted);margin-top:8px}
/* kartu ringkas berdampingan */
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.o{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative}
.o.base{border:2px solid var(--green);background:#fbfefb}
.o-tag{position:absolute;top:-10px;left:12px;font-size:10px;font-weight:800;letter-spacing:.05em;border-radius:999px;padding:3px 8px}
.o-tag.base{background:var(--gd);color:#fff}
.o-tag.best{background:var(--grad-o);color:#fff}
.o h4{font-size:16px;font-weight:900;letter-spacing:-.02em;margin:0;line-height:1.2;overflow-wrap:anywhere}
.o-r{border-top:1px solid #efebe0;padding-top:8px;display:flex;flex-direction:column;gap:1px;min-width:0}
.o-r small{font-size:12px;color:var(--muted);font-weight:600}
.o-r b{font-size:16px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.o-r b.g{color:var(--green)}
.o-r b span{font-size:11px;font-weight:700;color:var(--muted)}
.o-r em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600}
.o-r .chip{margin-top:2px}
/* daftar keputusan */
.vlist{padding:4px 16px}
.v{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;align-items:center;padding:11px 0;border-top:1px solid #efebe0}
.v:first-child{border-top:0}
.v svg{width:24px;height:24px;grid-row:span 2}
.v span{font-size:12.5px;color:var(--muted);font-weight:600}
.v b{font-size:15px;font-weight:900;letter-spacing:-.02em}
.warn{background:var(--osoft);border:1px solid #ffd3a8;border-radius:18px;padding:14px 16px;font-size:14px;line-height:1.5;color:#7a2e08}
.warn b{color:var(--od)}
.actions{display:grid;gap:10px}
.full{padding:0}
.full summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:900;font-size:15px;color:var(--gd)}
.full summary::-webkit-details-marker{display:none}
.full summary::after{content:" +";color:var(--muted)}
.full[open] summary::after{content:" −"}
.full summary small{display:block;font-weight:600;font-size:12.5px;color:var(--muted);margin-top:2px}
.full .tbl-wrap{margin:0;border-radius:0 0 24px 24px;border-top:1px solid var(--line)}
.full .tbl-note{color:var(--muted);padding:0 18px 16px}
.results .lead{margin-top:8px}
.results .disclaimer{color:var(--muted)}
@media (max-width:640px){
  .opts.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts.n3 .o:last-child{grid-column:1/-1}
  .res-car img{width:96px;height:72px}
  .res-car b{font-size:18px}
}
@media (max-width:360px){
  .o{padding:12px 10px}
  .o-r b{font-size:14px}
  .o h4{font-size:14.5px}
  .bar .bl{font-size:12.5px}
}
.opts.n3 .o.base:last-child,.opts.n1 .o{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.opts.n3 .o.base:last-child h4{grid-column:1/-1}
.full summary{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.full summary small{flex-basis:100%;order:3;margin-top:0}
.full summary::after{order:2}
.bar.hi i{background:var(--red)}
.answer.bad{background:linear-gradient(160deg,#fff3ea,#fffaf5);border-color:#ffd3a8}
.answer.bad .a-k{color:var(--od)}
.tenor{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.tenor button{min-width:0;padding:0}

/* V1.4.1: placeholder jelas berbeda dari angka yang sudah diisi */
input::placeholder{color:#b3ad9c;font-weight:600;opacity:1}