/* ══ HALAMAN REVIEW — /review dan /review/<slug> (Dapur Konten, lane C) ══
   v2 (14 Okt 2026, brief C2): tata letak = MOCKUP_G3_Review_KOREKSI.html, TAHAN TEKS PANJANG.

   🔒 TOKEN = SALINAN PERSIS token mockup koreksi (terang & gelap). Terang = palet /p/
      (public_produk.html) dengan nama peran mockup; gelap = token gelap mockup
      (aksen teks #8DB4FF, menutup catatan kontras C v1).
      Tambahan C (bukan di mockup), alasan kontras teks kecil di latar hijau/merah muda:
        --suksesTeks  terang #15803D (= /p/ --hijau-ink, 4,79:1 di hijauBg; mockup #16A34A 3,15:1)
        --bahayaTeks  terang #B42318 (6,28:1 di merahBg; mockup #E5484D 3,58:1)
      Huruf: Plus Jakarta Sans; angka tabular-nums.
   🔴 Tahan teks panjang: semua kolom membungkus (min-width:0 + overflow-wrap), tabel
      lebar menggulir di kotaknya sendiri — nol geser mendatar di halaman. */
:root{
  --bg:#F8FAFC; --surface:#FFFFFF; --surface2:#F9FAFB; --edge:#E5E7EB; --edge2:#F1F5F9;
  --ink:#111827; --ink2:#667085; --ink3:#98A2B3;
  --primary:#0B5CFF; --primaryText:#0B5CFF; --success:#16A34A; --danger:#E5484D;
  --biru:#EFF6FF; --hijauBg:#F0FDF4; --hijauEdge:#BBF7D0; --merahBg:#FEF2F2; --merahEdge:#FECACA;
  --suksesTeks:#15803D; --bahayaTeks:#B42318;
  --tombolIsi:#0B5CFF;   /* latar tombol/pil berteks putih — terang = --primary persis (putih 5,26:1) */
  /* V3 (16 Okt, MOCKUP_Review_V3): bingkai tebal kelebihan/kekurangan, batang abu, garis butir */
  --hijauTebal:#86EFAC; --merahTebal:#FCA5A5; --biruEdge:#BFD3FF; --batangAbu:#CBD5E1;
  --garisButir:rgba(0,0,0,.06);
  --aplWarna:#475569;    /* bawaan kotak huruf aplikasi; nilai sebenarnya diset per kotak dari palet WARNA_APL */
  --aplIkonBg:#EFF6FF; --aplIkon:#1D4ED8;   /* ikon kategori aplikasi (papan D) */
}
html[data-tema="gelap"]{
  --bg:#0B1220; --surface:#111A2E; --surface2:#0F1729; --edge:#22304A; --edge2:#1A253C;
  --ink:#E6EBF2; --ink2:#A3AEC2; --ink3:#7C889E;
  --primary:#3D7BFF; --primaryText:#8DB4FF; --success:#4ADE80; --danger:#FB7185;
  --biru:#16244A; --hijauBg:#0F2A1C; --hijauEdge:#1E4D33; --merahBg:#2A1218; --merahEdge:#4D1E28;
  --suksesTeks:#4ADE80; --bahayaTeks:#FB7185;
  --tombolIsi:#2563EB;   /* C3: dulu --primary #3D7BFF (putih 3,84:1) → putih 5,17:1 */
  --hijauTebal:#2F6B47; --merahTebal:#7A2F3B; --biruEdge:#2B4A8A; --batangAbu:#475569;
  --garisButir:rgba(255,255,255,.07);
  --aplWarna:#475569;
  --aplIkonBg:#16244A; --aplIkon:#8DB4FF;
}

*{box-sizing:border-box; -webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.75; overflow-wrap:anywhere}
a{color:var(--primaryText)}
img{max-width:100%; display:block}
summary{cursor:pointer}
h1,h2,h3{letter-spacing:-.01em}
.angka{font-variant-numeric:tabular-nums}
.label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primaryText); line-height:1.4}
.redup{color:var(--ink2)}
.bungkus{max-width:1200px; margin:0 auto; padding-left:20px; padding-right:20px}
sup{line-height:0}
sup a{text-decoration:none; font-size:12px; font-weight:600}

/* ── Pita atas + kepala ── */
.pita{background:var(--surface2); border-bottom:1px solid var(--edge); font-size:12px; color:var(--ink2); line-height:1.6}
.pita .bungkus{padding-top:6px; padding-bottom:6px; display:flex; flex-wrap:wrap; gap:4px 20px}
header{border-bottom:1px solid var(--edge); background:var(--surface)}
header .bungkus{padding-top:12px; padding-bottom:12px; display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logo img{width:32px; height:32px; object-fit:contain}
.logo b{font-weight:800; font-size:18px}
.nav{display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-left:auto; font-size:15px}
.nav a{padding:8px 10px; color:var(--ink); text-decoration:none}
.nav a.aktif{color:var(--primaryText); font-weight:700; border-bottom:2px solid var(--primary)}
.btn-tema{height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--edge);
  background:var(--surface); color:var(--ink); font:600 14px 'Plus Jakarta Sans',sans-serif; cursor:pointer}

main{display:flex; flex-direction:column; gap:28px; padding-top:20px; padding-bottom:72px}
main.daftar{padding-top:32px}

/* ── Remah ── */
.remah{font-size:13px; color:var(--ink2); display:flex; flex-wrap:wrap; gap:8px; line-height:1.6}
.remah a{color:var(--ink2); text-decoration:none}
.remah .kini{color:var(--ink)}

/* ── ① Judul — selebar penuh ── */
.judul-review{display:flex; flex-direction:column; gap:12px; max-width:900px}
.chips{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; font-weight:600; line-height:1.6}
.chip{padding:3px 10px; border-radius:999px; background:var(--surface2); border:1px solid var(--edge); color:var(--ink2)}
.chip.utama{background:transparent; border-color:var(--primary); color:var(--primaryText); letter-spacing:.04em}
h1{margin:0; font-size:clamp(30px,5vw,42px); line-height:1.15; font-weight:800}
.sub{margin:0; font-size:19px; color:var(--ink2); line-height:1.6}
.meta{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:14px; color:var(--ink2); line-height:1.6}
.meta b{color:var(--ink)}

/* ── ② Pahlawan — banner ≤520 + kartu ringkas, nol stretch ── */
.pahlawan{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start}
.banner-utama{flex:1 1 460px; max-width:520px; aspect-ratio:1/1; border-radius:18px; overflow:hidden;
  background:var(--surface2); border:1px solid var(--edge)}
.banner-utama img{width:100%; height:100%; object-fit:contain}
.pahlawan-kanan{flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:16px}
.kotak{background:var(--surface); border:1px solid var(--edge); border-radius:18px; padding:22px;
  display:flex; flex-direction:column; gap:14px}
.kotak.aksen{border:1.5px solid var(--primary)}
.nilai-kepala{display:flex; align-items:center; gap:18px}
.cincin{width:96px; height:96px; flex:none; border-radius:50%; border:7px solid var(--primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.cincin b{font-size:30px; font-weight:800}
.cincin span{font-size:11px; color:var(--ink2); margin-top:4px}
.nilai-teks{display:flex; flex-direction:column; line-height:1.3}
.nilai-teks .besar{font-size:24px; font-weight:800}
.nilai-teks .kecil{font-size:13px; color:var(--ink2)}
.putusan{margin:0; font-size:16px; line-height:1.65; border-top:1px solid var(--edge); padding-top:14px}
.putusan > a{white-space:nowrap; font-size:14px; font-weight:600}
.harga-kotak{gap:10px}
.harga{font-size:32px; font-weight:800; line-height:1.1}
.catatan-harga{font-size:14px; color:var(--ink2); line-height:1.55}
.tombol{display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:12px;
  text-decoration:none; font-weight:700; font-size:15px; padding:0 14px; text-align:center; line-height:1.3}
.tombol.isi{background:var(--tombolIsi); color:#FFFFFF}
.tombol.garis{border:1px solid var(--edge); color:var(--ink); font-weight:600}

/* ── ③ Kelebihan | Kekurangan — selebar penuh, menumpuk di HP ── */
.plusmin{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:16px; align-items:start}
.plusmin > div{border-radius:16px; padding:20px 22px; min-width:0}
.plusmin .plus{background:var(--hijauBg); border:1px solid var(--hijauEdge)}
.plusmin .min{background:var(--merahBg); border:1px solid var(--merahEdge)}
.plusmin h2{margin:0 0 10px; font-size:18px; font-weight:800; line-height:1.4}
.plusmin .plus h2{color:var(--suksesTeks)}
.plusmin .min h2{color:var(--bahayaTeks)}
.plusmin ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:16px; line-height:1.6}

/* ── ④ Isi + kolom samping lengket ── */
.badan{display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start}
article{flex:999 1 560px; min-width:0; max-width:760px; display:flex; flex-direction:column; gap:44px}
.sisi{flex:1 1 280px; min-width:0; max-width:340px; position:sticky; top:16px; display:flex; flex-direction:column; gap:14px}
article section{display:flex; flex-direction:column; gap:14px; scroll-margin-top:16px}
article h2{margin:0; font-size:28px; font-weight:800; line-height:1.3}
article h3{margin:4px 0 0; font-size:20px; font-weight:700; line-height:1.4}
article p{margin:0; white-space:pre-line}
.ket{margin:0; font-size:13px; color:var(--ink2); line-height:1.6}

.daftar-isi{display:flex; flex-wrap:wrap; gap:6px; font-size:14px; line-height:1.5}
.daftar-isi a{padding:6px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--edge);
  color:var(--ink); text-decoration:none}

.tabel{border:1px solid var(--edge); border-radius:14px; overflow:hidden; background:var(--surface)}
.baris{display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:12px 16px;
  border-bottom:1px solid var(--edge2); font-size:15px; line-height:1.5}
.baris:last-child{border-bottom:0}
.baris .kiri{color:var(--ink2)}
.lencana-unit{display:inline-block; font-size:11px; font-weight:700; color:var(--primaryText); background:var(--biru);
  padding:2px 8px; border-radius:999px; margin-left:6px; line-height:1.5; white-space:nowrap}
.baris.ukur{grid-template-columns:minmax(0,1fr) fit-content(60%) 40px; padding:11px 16px}
.baris.ukur .kanan{display:flex; flex-direction:column}
.baris.ukur .kanan b{font-weight:700}
.baris.ukur .kanan small{font-size:13px; color:var(--ink2); line-height:1.45}
.baris.ukur .no{font-size:12px; text-align:right}
.baris.ukur .no a{text-decoration:none}

.kartu-angka{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:10px}
.kartu-kecil{background:var(--surface); border:1px solid var(--edge); border-radius:12px; padding:14px;
  line-height:1.3; display:flex; flex-direction:column; gap:2px; min-width:0}
.kartu-kecil > span{font-size:12px; color:var(--ink2)}
.kartu-kecil > b{font-size:22px; font-weight:800}
.kartu-kecil > b.panjang{font-size:15px; font-weight:700; line-height:1.45}
.kartu-kecil > small{font-size:13px; color:var(--ink2); line-height:1.45; margin-top:4px}

.port2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:12px}
.port2 > div{border:1px solid var(--edge); border-radius:12px; padding:14px; background:var(--surface);
  display:flex; flex-direction:column; gap:6px}
.port2 b{font-size:13px} .port2 span{font-size:15px; line-height:1.6; white-space:pre-line}

.panel{border:1px solid var(--edge); border-radius:14px; padding:18px; background:var(--surface);
  display:flex; flex-direction:column; gap:12px}
.judul-grafik{font-size:14px; font-weight:700; line-height:1.5}
.judul-grafik span{font-weight:400; color:var(--ink2)}
.batang{display:flex; flex-direction:column; gap:4px}
.batang .atas{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:14px; line-height:1.45}
.batang .nama{display:flex; flex-direction:column; min-width:0; color:var(--ink2)}
.batang .nama b{font-weight:400}
.batang .nama small{font-size:12px; color:var(--ink2)}
.batang.ini .nama b{font-weight:700; color:var(--ink)}
.batang .skor{flex:none; color:var(--ink2)}
.batang .skor a{font-size:12px; text-decoration:none}
.jalur{height:10px; border-radius:999px; background:var(--edge2)}
.isi-batang{height:10px; border-radius:999px; background:var(--ink3)}
.batang.ini .isi-batang{background:var(--primary)}
.pil-apl{display:flex; flex-wrap:wrap; gap:6px}
.pil-apl span{font-size:14px; padding:5px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--edge); line-height:1.5}

.cocok-panel{padding:6px 18px; gap:0}
.cocok{padding:14px 0; border-bottom:1px solid var(--edge2); display:flex; flex-direction:column; gap:6px}
.cocok:last-child{border-bottom:0}
.cocok-atas{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.cocok .keb{flex:1 1 220px; min-width:0; font-weight:700; font-size:15px; line-height:1.5}
.meteran{display:flex; gap:4px; flex:none}
.meteran i{display:block; width:22px; height:10px; border-radius:3px; background:var(--edge)}
.meteran i.on{background:var(--primary)}
.cocok .lbl{font-size:13px; color:var(--ink2); width:110px; text-align:right; line-height:1.4}
.ket-cocok{font-size:14px; color:var(--ink2); line-height:1.55}

.unit{background:var(--surface); border:1.5px solid var(--primary); border-radius:18px; padding:22px}
.unit h2{font-size:24px}
/* C3b/c: 3 kolom × 2 baris (maks 6 foto), 2 kolom di HP, tegak 3:4 = foto asli 1200×1600. height:auto WAJIB — tanpa itu atribut
   height="…" di <img> jadi tinggi CSS tetap dan aspect-ratio diabaikan (dulu: kotak sempit memanjang). */
.foto-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.foto-grid a{display:block; min-width:0}
.foto-grid img{aspect-ratio:3/4; width:100%; height:auto; object-fit:cover; border-radius:10px; background:var(--surface2); border:1px solid var(--edge)}
.judul-qc{font-size:13px; font-weight:700; color:var(--ink2)}
.qc{display:flex; flex-wrap:wrap; gap:6px}
.qc span{font-size:13px; padding:4px 10px; border-radius:999px; font-weight:600; line-height:1.5;
  background:var(--surface2); border:1px solid var(--edge); color:var(--ink2)}
.qc span.lulus{background:var(--hijauBg); border-color:var(--hijauEdge); color:var(--suksesTeks)}

.gulir{overflow-x:auto; border:1px solid var(--edge); border-radius:14px; background:var(--surface)}
.gulir .lebar{min-width:560px}
.banding{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 110px; gap:12px; padding:12px 16px;
  font-size:15px; line-height:1.5; border-bottom:1px solid var(--edge2)}
.banding:last-child{border-bottom:0}
.banding.kepala-tabel{font-size:12px; color:var(--ink2); padding:11px 16px; border-bottom:1px solid var(--edge)}
.banding .laptop{display:flex; flex-direction:column; gap:2px; min-width:0}
.banding .laptop b{font-weight:400}
.banding.ini .laptop b{font-weight:700}
.banding .laptop small{font-size:13px; color:var(--ink2); line-height:1.45}
.banding a,.banding .tautan-ket{font-size:14px}
.banding .tautan-ket{color:var(--ink2)}

.galeri3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.galeri3 figure{margin:0}
.galeri3 img{aspect-ratio:4/5; width:100%; height:auto; object-fit:contain; border-radius:12px; background:var(--surface2); border:1px solid var(--edge)}
.galeri3 figcaption{font-size:12px; color:var(--ink2); margin-top:4px; line-height:1.4}

.rincian{display:grid; grid-template-columns:130px minmax(0,1fr) 36px; gap:12px; align-items:center; font-size:15px; line-height:1.4}
.rincian .isi-batang{background:var(--primary)}
.rincian .angka{text-align:right; font-weight:700}
.total-nilai{display:flex; justify-content:space-between; border-top:1px solid var(--edge); padding-top:10px; font-weight:800}
.putusan-penuh{border-left:3px solid var(--primary); padding:2px 0 2px 16px; display:flex; flex-direction:column; gap:10px}

details{background:var(--surface); border:1px solid var(--edge); border-radius:12px; padding:14px 16px}
details summary{font-weight:700; font-size:16px; line-height:1.5}
details p{margin:8px 0 0; font-size:16px; color:var(--ink2); line-height:1.7}
#faq{gap:10px}
.sumber{gap:8px}
.sumber h2{font-size:20px}
.sumber ol{margin:0; padding-left:22px; font-size:14px; color:var(--ink2); display:flex; flex-direction:column; gap:4px; line-height:1.6}
.sumber li{scroll-margin-top:16px}

/* Kolom samping: kecil dan tetap kecil. */
.sisi .kotak{border-radius:16px; padding:18px; gap:10px}
.sisi-nilai{display:flex; align-items:center; justify-content:space-between; font-weight:800; line-height:1.4}
.sisi-nilai b{font-size:22px; color:var(--primaryText)}
.sisi-harga{font-size:14px; color:var(--ink2); line-height:1.5; display:flex; flex-direction:column}
.sisi-harga b{color:var(--ink); font-size:18px}
.sisi .tombol{min-height:44px; font-size:14px}
.judul-sisi{font-weight:800; line-height:1.4}
.lain{font-size:14px; color:var(--ink); text-decoration:none; line-height:1.45; display:flex; flex-direction:column}
.lain small{font-size:12px; color:var(--ink2)}

footer{border-top:1px solid var(--edge); background:var(--surface)}
footer .bungkus{padding-top:24px; padding-bottom:24px; display:flex; flex-wrap:wrap; gap:12px 32px; font-size:14px; color:var(--ink2); line-height:1.6}
footer b{color:var(--ink)}

/* ── Daftar /review ── */
.judul-daftar{display:flex; flex-direction:column; gap:8px; max-width:780px}
.judul-daftar h1{font-size:clamp(28px,4.5vw,40px)}
.judul-daftar p{margin:0; color:var(--ink2); font-size:17px}
.sorot{text-decoration:none; color:var(--ink); border:1px solid var(--edge); border-radius:18px; overflow:hidden;
  background:var(--surface); display:flex; flex-wrap:wrap}
.sorot .gbr{flex:1 1 420px; min-height:260px; background:var(--surface2)}
.sorot .gbr img{width:100%; height:100%; min-height:260px; object-fit:cover}
.sorot .isi{flex:1 1 360px; min-width:0; padding:24px; display:flex; flex-direction:column; gap:10px; justify-content:center; line-height:1.5}
.sorot .judul{font-weight:800; font-size:28px; line-height:1.2}
.sorot .nilai-bar{display:flex; align-items:center; gap:12px}
.lencana{border-radius:50%; border:4px solid var(--primary); display:flex; align-items:center; justify-content:center;
  font-weight:800; background:var(--surface); color:var(--ink); line-height:1}
.lencana.besar{width:52px; height:52px}
.lencana.kecil{width:40px; height:40px; border-width:3px; font-size:13px}
.saring{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.saring form{flex:1 1 260px; display:flex}
.saring input[type=search]{flex:1; height:44px; border-radius:10px; border:1px solid var(--edge); background:var(--surface);
  color:var(--ink); padding:0 14px; font:400 15px 'Plus Jakarta Sans',sans-serif; min-width:0}
.pil-baris{display:flex; flex-wrap:wrap; gap:6px}
.pil{display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; text-decoration:none;
  font-size:14px; border:1px solid var(--edge); color:var(--ink); background:var(--surface)}
.pil.aktif{background:var(--tombolIsi); color:#FFFFFF; font-weight:600; border-color:var(--tombolIsi)}
.pil-kat{display:flex; align-items:center; min-height:36px; padding:0 12px; border-radius:8px; background:var(--surface2);
  border:1px solid var(--edge); color:var(--ink); text-decoration:none; font-size:13px}
.pil-kat.aktif{background:var(--tombolIsi); border-color:var(--tombolIsi); color:#FFFFFF; font-weight:600}
.grid-kartu{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr)); gap:18px}
.kartu{text-decoration:none; color:var(--ink); border:1px solid var(--edge); border-radius:14px; overflow:hidden;
  background:var(--surface); display:flex; flex-direction:column}
.kartu .gbr{aspect-ratio:16/9; background:var(--surface2); position:relative}
.kartu .gbr img{width:100%; height:100%; object-fit:cover}
.kartu .gbr .lencana{position:absolute; right:10px; bottom:10px}
.kartu .isi{padding:14px; display:flex; flex-direction:column; gap:6px; line-height:1.4}
.kartu .meta-k{font-size:12px; color:var(--ink2)}
.kartu .judul{font-weight:700; font-size:16px; line-height:1.35}
.kartu .harga-k{color:var(--ink2); font-size:13px}
.kosong{border:1px dashed var(--edge); border-radius:14px; padding:32px 16px; text-align:center; color:var(--ink2)}
.halaman{display:flex; justify-content:center; flex-wrap:wrap; gap:6px}
.halaman a,.halaman span{min-width:44px; height:44px; padding:0 14px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--edge); color:var(--ink); text-decoration:none}
.halaman .kini{background:var(--tombolIsi); border-color:var(--tombolIsi); color:#FFFFFF; font-weight:600}

/* Layar sempit: flex-wrap di atas sudah menumpuk kolom; di sini hanya penyetelan. */
@media(max-width:900px){
  .sisi{position:static; max-width:none}
}
@media(max-width:640px){
  .bungkus{padding-left:16px; padding-right:16px}
  .baris{grid-template-columns:110px minmax(0,1fr); gap:10px; padding:12px 14px}
  .baris.ukur{grid-template-columns:minmax(0,1fr) fit-content(55%) 28px}
  .rincian{grid-template-columns:100px minmax(0,1fr) 32px}
  .galeri3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cocok .lbl{width:auto; text-align:left}
  .kotak,.unit{padding:18px}
  .logo b{font-size:16px}
  .foto-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  /* C3b kepala HP: baris 1 = logo + tombol tema ikon (kanan); baris 2 = menu satu baris, geser mendatar.
     Tombol tetap di dalam <nav> (markup sama dengan desktop) tapi diposisikan absolut terhadap
     .bungkus — karena itu .nav TIDAK boleh position:relative (tombol akan ikut tergulir/terpotong). */
  header .bungkus{position:relative; gap:6px 0; padding-top:10px; padding-bottom:6px}
  .logo{flex:1 0 100%; min-width:0; min-height:36px; padding-right:48px}
  .logo b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .nav{flex:1 0 100%; min-width:0; margin-left:0; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none; white-space:nowrap; line-height:1.4}
  .nav a:first-child{padding-left:0}
  .btn-tema{position:absolute; top:10px; right:16px; width:36px; height:36px; padding:0;
    display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1}
  .btn-tema span{display:none}
  .btn-tema::before{content:"\263E"}               /* terang → ☾ (ke gelap); nama = aria-label */
  html[data-tema="gelap"] .btn-tema::before{content:"\2600\FE0E"}   /* gelap → ☀ (teks, bukan emoji) */
}

/* ══ REVIEW V3 (16 Okt 2026) — MOCKUP_Review_V3.html, hanya review berformat V3 ══
   Semua aturan dibatasi kelas V3 (.v3-isi, .bv3, .g3-…) — blok G3 dan halaman format
   lama tidak terpengaruh satu piksel pun. Token sama dengan C3 (terang & gelap). */
.v3-isi{display:flex; flex-direction:column; gap:36px}
.v3-isi h2{margin:0; font-size:28px; font-weight:800; line-height:1.3}
.v3-isi h3{margin:0}
.v3-isi p{margin:0; white-space:pre-line}

/* Banner utama 21:9 — foto di belakang, gradien gelap kiri, teks putih. Tanpa foto =
   gradien penuh (bukan kotak kosong). Teks di atas gradien TETAP (bukan token): diukur
   terhadap foto terburuk (putih) oleh gerbang kontras skrip terapkan. */
.bv3{position:relative; aspect-ratio:21/9; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,#1E293B 0%,#0F172A 55%,#1E3A8A 100%)}
.bv3 > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bv3-gradien{position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(15,23,42,.92) 0%,rgba(15,23,42,.84) 46%,rgba(15,23,42,0) 76%)}
.bv3-isi{position:absolute; left:56px; top:0; bottom:0; max-width:44%; display:flex; flex-direction:column;
  justify-content:center; gap:12px; color:#FFFFFF}
.bv3-label{font-size:14px; letter-spacing:.14em; color:#BFDBFE; font-weight:700; text-transform:uppercase; line-height:1.4}
.bv3-nama{font-size:clamp(28px,4vw,50px); font-weight:800; line-height:1.05}
.bv3-chip{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; font-weight:700}
.bv3-chip span{background:rgba(255,255,255,.15); border-radius:8px; padding:4px 10px; line-height:1.4}
.bv3-maskot{position:absolute; right:18px; bottom:16px; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.9); border-radius:999px; padding:5px 12px 5px 6px;
  font-size:12px; font-weight:800; color:#0F172A; line-height:1.3}
.bv3-maskot img{width:26px; height:26px; border-radius:50%; background:#0B5CFF; object-fit:contain}

/* Tiga kartu: Nilai · Harga · Dibanding harga baru (kartu ketiga bisa tak ada → 2 kolom) */
.v3-kartu{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:16px}
.v3-kartu .kotak{border-radius:16px; padding:18px 20px; gap:8px}
.v3-kartu .v3-nilai{flex-direction:row; align-items:center; gap:16px}
.cincin.kecil{width:84px; height:84px}
.cincin.kecil b{font-size:28px}
.v3-nilai-teks{display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.4}
.v3-nilai-teks .besar{font-size:22px; font-weight:800}
.v3-nilai-teks .redup{font-size:14px; line-height:1.5}
.v3-harga .harga{font-size:30px}
.v3-harga .catatan-harga{font-size:13px}
.v3-harga .tombol{min-height:42px; margin-top:4px}
.v3-kartu .v3-baru{background:var(--hijauBg); border-color:var(--hijauEdge)}
.v3-baru .label{color:var(--suksesTeks)}
.v3-baru-baris{display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.45}
.v3-baru-baris .atas{display:flex; justify-content:space-between; gap:10px}
.v3-baru .jalur{background:transparent}
.isi-batang.abu{background:var(--batangAbu)}
.isi-batang.hijau{background:var(--success)}
.v3-hemat{color:var(--suksesTeks); font-weight:800; line-height:1.5}

/* Kelebihan & kekurangan — judul besar, dua kolom bingkai tebal, butir berikon SVG */
.v3-plusmin{display:flex; flex-direction:column; gap:12px}
.v3-plusmin h2{font-size:30px}
.v3-dua{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:16px; align-items:start}
.v3-dua > div{border-radius:18px; padding:20px 22px; min-width:0}
.v3-dua > .plus{background:var(--hijauBg); border:2px solid var(--hijauTebal)}
.v3-dua > .min{background:var(--merahBg); border:2px solid var(--merahTebal)}
.v3-dua h3{font-size:22px; font-weight:800; line-height:1.4}
.v3-dua h3 span{font-size:15px; font-weight:600}
.v3-dua > .plus h3{color:var(--suksesTeks)}
.v3-dua > .min h3{color:var(--bahayaTeks)}
.v3-plusmin ul{list-style:none; margin:8px 0 0; padding:0}
.v3-plusmin li{display:flex; gap:12px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--garisButir);
  font-size:16px; line-height:1.6}
.v3-plusmin li:last-child{border-bottom:0}
.v3-plusmin li > span:last-child{min-width:0; padding-top:5px}
.ikon-butir{flex:none; width:34px; height:34px; border-radius:10px; background:var(--surface);
  display:flex; align-items:center; justify-content:center}
.ikon-butir svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.plus .ikon-butir{color:var(--suksesTeks)}
.min .ikon-butir{color:var(--bahayaTeks)}
.v3-dua > .tipis{border-width:1px; border-color:var(--hijauEdge); padding:18px 22px}
.v3-dua > .min.tipis{border-color:var(--merahEdge)}
.v3-dua > .tipis h3{font-size:19px}
.v3-dua > .tipis ul{margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:4px; line-height:1.6}

/* Aplikasi — REVISI B (c): pil NAMA saja (kotak dua huruf dibuang), tanpa logo merek */
.kotak.v3-apl{gap:14px; padding:20px 22px}
.v3-apl h2{font-size:26px}
.v3-apl-judul{font-weight:700; font-size:14px; color:var(--ink2); line-height:1.4}
.v3-apl-baris{display:flex; flex-wrap:wrap; gap:10px}
.apl{display:inline-flex; align-items:center; max-width:100%; min-width:0; border:1px solid var(--edge);
  border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; line-height:1.35; overflow-wrap:anywhere}
/* Ikon aplikasi (22 Okt, papan D "D1, ikon asli"): logo ASLI 22×22 radius 6 di kiri nama — warna &
   bentuk tak diubah; padding kiri 6 / kanan 12. Pil tanpa logo = .apl di atas, persis. Ikon kategori
   = kotak 32×32 radius 8, biru muda, garis 18px stroke 2; "Kurang cocok" = lingkaran coret merah. */
.apl.ada-logo{gap:8px; padding:4px 12px 4px 6px}
.apl.ada-logo img{flex:none; width:22px; height:22px; border-radius:6px; object-fit:contain; display:block}
.apl-kepala{display:flex; align-items:center; gap:10px; min-width:0}
.apl-ikon{flex:none; width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--aplIkonBg); color:var(--aplIkon)}
.apl-ikon svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.apl-ikon.tidak{background:var(--merahBg); color:var(--bahayaTeks)}

/* REVISI A §4.4 TEKS LURUS (ketokan owner 16 Okt: "teks melompat karena tempat gambar kosong").
   .bergambar = desktop: teks KIRI, gambar KANAN, selalu (nol zig-zag); HP: menumpuk, teks dulu.
   .penuh = tanpa gambar → teks selebar penuh, rata kiri; panel grafik di bawah teks. */
.selang{display:flex; flex-direction:column; gap:16px}
.selang > .teks{min-width:0; display:flex; flex-direction:column; gap:12px; text-align:left}
.selang > .visual{min-width:0; display:flex; flex-direction:column; gap:16px}
.v3-panel{min-width:0}
@media(min-width:900px){
  .selang.bergambar{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:start}
}
.v3-cocok-dua{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:12px 24px}
.cocok-panel{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:4px 24px}

/* KARUSEL kecil (§4.4): geser jari / panah. Tanpa JS tetap bisa digeser (scroll-snap) dan
   tiap gambar tetap tautan ke berkasnya. Satu gambar = tanpa kendali. */
.karusel{min-width:0}
.karusel-jalur{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:4px}
.karusel-butir{flex:0 0 100%; min-width:0; margin:0; scroll-snap-align:start}
.karusel-galeri .karusel-butir{flex-basis:calc((100% - 24px) / 3)}
.karusel-foto .karusel-butir{flex-basis:calc((100% - 60px) / 6)}
a.lb{display:block; position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--edge);
  background:var(--surface2); cursor:zoom-in}
a.lb:focus-visible{outline:3px solid var(--primary); outline-offset:2px}
.karusel a.lb img{width:100%; height:100%; object-fit:cover}
.karusel-bagian a.lb{aspect-ratio:16/10}
.karusel-bagian a.lb img{object-fit:contain}
.karusel-foto a.lb{aspect-ratio:3/4}
/* Banner galeri: IG kini 4:5 (1080×1350, ketokan 22 Okt). Bingkai 4:5 + contain → 4:5 penuh, 1:1 lama
   utuh dengan pita atas-bawah. Nol terpotong. */
.karusel-galeri a.lb{aspect-ratio:4/5}
.karusel-galeri a.lb img{object-fit:contain}
.karusel figcaption{font-size:13px; color:var(--ink2); margin-top:6px; line-height:1.5}
.karusel-kendali{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:8px}
.karusel-kendali[hidden]{display:none}
.karusel-hitung{font-size:13px; color:var(--ink2); min-width:44px; text-align:center}
.karusel-panah{width:38px; height:38px; border-radius:50%; border:1px solid var(--edge); background:var(--surface);
  color:var(--ink); font:inherit; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center}
.karusel-panah:disabled{opacity:.4; cursor:default}
.karusel-panah:focus-visible{outline:3px solid var(--primary); outline-offset:2px}

/* LIGHTBOX (review.js): latar gelap tetap di kedua tema — teks putih / #BFDBFE di atas
   rgba(2,6,23,.94) (dikunci tes kontras). Banner utama tidak pernah masuk ke sini.
   REVISI B (f): latar ≥90% gelap; gambar diskalakan review.js (pasRuang) mengisi panggung —
   sisi pembatasnya ≥90% layar; tombol ✕ menumpang di atas gambar, keterangan ringkas di bawah. */
html.lb-kunci,html.lb-kunci body{overflow:hidden}
.lb-tirai{position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; color:#FFFFFF;
  background:rgba(2,6,23,.94); opacity:1; transition:opacity .2s ease}
.lb-tirai[hidden]{display:none}
.lb-tirai.redup-awal{opacity:0}
.lb-panggung{position:relative; flex:1 1 auto; min-height:0; overflow:hidden; touch-action:none;
  display:flex; align-items:center; justify-content:center; padding:8px 8px 0}
.lb-bingkai{margin:0; max-width:100%; max-height:100%; display:flex; transform-origin:0 0}
.lb-bingkai.bergerak{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.lb-gambar{max-width:100%; max-height:calc(100vh - 56px); max-height:calc(100dvh - 56px); width:auto; height:auto; object-fit:contain;
  user-select:none; -webkit-user-drag:none; transform-origin:50% 50%; cursor:zoom-in}
.lb-gambar.diperbesar{cursor:grab}
.lb-tombol{position:absolute; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(15,23,42,.75); color:#FFFFFF; font:inherit; font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.lb-tombol:focus-visible{outline:3px solid #BFDBFE; outline-offset:2px}
.lb-tombol[hidden]{display:none}
.lb-tutup{top:10px; right:12px}
.lb-kiri{left:12px; top:50%; transform:translateY(-50%)}
.lb-kanan{right:12px; top:50%; transform:translateY(-50%)}
.lb-bawah{flex:none; padding:6px 16px 10px; text-align:center; font-size:14px; line-height:1.45;
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px}
.lb-bawah a{color:#BFDBFE}
.lb-hitung{color:#CBD5E1}
@media(prefers-reduced-motion:reduce){
  .lb-tirai,.lb-bingkai.bergerak{transition:none}
  .karusel-jalur{scroll-behavior:auto}
}
.v3-chip{display:flex; flex-wrap:wrap; gap:10px}
.v3-chip span{background:var(--edge2); border-radius:10px; padding:6px 12px; font-size:14px; line-height:1.45}
.v3-chip b{font-weight:800}
.v3-dalam{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; font-size:15px; line-height:1.5}
.v3-dalam span{color:var(--ink2)}
.v3-blok{display:flex; flex-direction:column; gap:14px}
.v3-prosa{max-width:820px; display:flex; flex-direction:column; gap:12px}
.v3-grafik2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); gap:16px}
.batang.gpu.ini .isi-batang{background:var(--success)}

/* Grafik pesaing (§4.4): satu panel per metrik bersatuan, angka mutlak, nol baseline 100. */
.relatif .batang:not(.ini) .isi-batang{background:var(--batangAbu)}

.v3-baterai{flex-direction:row; flex-wrap:wrap; align-items:center; gap:18px}
.v3-wh{text-align:center; line-height:1}
.v3-wh b{font-size:40px; font-weight:800; display:block}
.v3-wh span{font-size:13px; color:var(--ink2)}
.v3-baterai-kartu{flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:8px}

.v3-cocok{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:16px; line-height:1.55}
.v3-cocok li{display:flex; gap:10px}
.v3-cocok .tanda{flex:none; width:16px; font-weight:800}
.v3-cocok.ya .tanda{color:var(--suksesTeks)}
.v3-cocok.tidak .tanda{color:var(--bahayaTeks)}

.v3-unit{background:var(--surface2); border:1px solid var(--biruEdge); display:flex; flex-direction:column; gap:12px}
.v3-unit h2{font-size:28px}
.v3-qc{align-items:center; gap:8px}
.v3-qc > b{font-size:13px; margin-right:4px}
details.qc-sisa{background:none; border:0; padding:0; display:inline}
details.qc-sisa summary{display:inline; font-size:13px; font-weight:600; color:var(--ink2); line-height:1.5}
details.qc-sisa[open] span{display:inline-block; margin:6px 6px 0 0}

.v3-rincian{gap:8px; font-size:14px; max-width:640px}
.apl-kat{display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid var(--edge2)}
.apl-status{font-size:12px; font-weight:700; border-radius:999px; padding:2px 10px; margin-left:6px; white-space:nowrap}
.apl-kat[data-status="lancar"] .apl-status{background:var(--hijauBg); color:var(--suksesTeks)}
.apl-kat[data-status="terbatas"] .apl-status{background:var(--edge2); color:var(--ink)}
.apl-tidak{color:var(--ink2); font-size:15px; margin:0; min-width:0}
.apl-tidak-baris{padding-top:10px; border-top:1px solid var(--edge2)}
.apl-tidak b{color:var(--ink)}
.v3-faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.faq-kartu{border:1px solid var(--edge); border-radius:12px; padding:12px 16px; background:var(--surface);
  display:flex; flex-direction:column; gap:4px; min-width:0; line-height:1.5}
.faq-kartu p{color:var(--ink2); font-size:15px; line-height:1.65}

/* Blok G3 KOREKSI di bawah halaman V3 (saklar TAMPIL_BLOK_G3) */
.g3-pemisah{border-top:3px solid var(--primary); padding-top:16px}
.g3-blok{display:flex; flex-direction:column; gap:28px}
.judul-review .h1{margin:0; font-size:clamp(30px,5vw,42px); line-height:1.15; font-weight:800}

@media(max-width:900px){
  .karusel-foto .karusel-butir{flex-basis:calc((100% - 24px) / 3)}
  .karusel-galeri .karusel-butir{flex-basis:calc((100% - 12px) / 2)}
}
@media(max-width:640px){
  .v3-isi{gap:28px}
  .v3-isi h2{font-size:24px}
  .v3-plusmin h2{font-size:26px}
  /* REVISI B (e): foto TIDAK ditutup gradien penuh. Foto di atas (3:2, utuh terlihat), teks di
     bawahnya di atas gradien gelap yang HANYA selebar blok teks. Foto ±63% bidang banner. */
  .bv3{aspect-ratio:auto; min-height:0; border-radius:14px; display:flex; flex-direction:column}
  .bv3 > img{position:relative; inset:auto; height:auto; aspect-ratio:3/2}
  .bv3.tanpa-foto{min-height:220px}
  .bv3-gradien{display:none}
  .bv3-isi{position:relative; left:auto; max-width:none; padding:14px 16px 52px; gap:8px;
    background:linear-gradient(180deg,rgba(15,23,42,.94) 0%,#0F172A 100%)}
  .bv3-maskot{bottom:12px; right:12px}
  .bv3-label{font-size:12px}
  .bv3-nama{font-size:24px}
  .bv3-chip{font-size:12px; gap:6px}
  .v3-dua > div{padding:16px}
  .v3-plusmin li{font-size:15px}
  .v3-dalam,.v3-faq{grid-template-columns:minmax(0,1fr)}
  .karusel-foto .karusel-butir{flex-basis:calc((100% - 12px) / 2)}
  .karusel-galeri .karusel-butir{flex-basis:85%}
  .lb-panggung{padding:4px 4px 0}
  .lb-kiri{left:6px} .lb-kanan{right:6px}
}

/* ══ REVISI B (KONTRAK_REVIEW_V3 §5 + papan C, 17 Okt) ══════════════════════════════════
   (b) lencana UNIT INI sekali sebagai legenda; baris unit ini = garis biru kiri.
   Papan C: tabel bagian dalam · tabel pembanding 8 baris (bergulir mendatar DI DALAM
   kotaknya saja di HP — halaman tetap nol scroll mendatar) · 3 kotak perbandingan harga. */
.tersembunyi{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.legenda-unit{margin:0 0 10px; font-size:14px; color:var(--ink2); line-height:1.6}
.legenda-unit .lencana-unit{margin-right:6px}
.baris.unit-ini{box-shadow:inset 3px 0 0 var(--primary)}

.v3-tabel-dalam{width:100%; border-collapse:collapse; font-size:15px}
.v3-tabel-dalam th,.v3-tabel-dalam td{padding:9px 4px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--edge2); line-height:1.5}
.v3-tabel-dalam th{color:var(--ink2); font-weight:500; width:38%}
.v3-tabel-dalam td{font-weight:600}
.v3-tabel-dalam tr:last-child th,.v3-tabel-dalam tr:last-child td{border-bottom:0}
.v3-upgrade{margin:0; background:var(--hijauBg); border:1px solid var(--hijauEdge); color:var(--ink);
  border-radius:10px; padding:10px 12px; font-size:15px; line-height:1.6}
.v3-upgrade b{color:var(--suksesTeks)}

.v3-gulir{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--edge); border-radius:12px;
  background:var(--surface); max-width:100%}
.v3-gulir:focus-visible{outline:3px solid var(--primary); outline-offset:2px}
.v3-tabel-pesaing{width:100%; min-width:760px; border-collapse:collapse; font-size:14px}
.v3-tabel-pesaing th,.v3-tabel-pesaing td{padding:9px 12px; text-align:left; vertical-align:top;
  border-top:1px solid var(--edge2); line-height:1.45}
.v3-tabel-pesaing thead th{background:var(--surface2); border-top:0; font-weight:700}
.v3-tabel-pesaing thead th small{display:block; font-weight:500; font-size:12px; color:var(--ink2)}
.v3-tabel-pesaing tbody th{color:var(--ink2); font-weight:500; white-space:nowrap}
.v3-tabel-pesaing th.ini{color:var(--primaryText)}
.v3-tabel-pesaing td.ini{font-weight:700}

.v3-harga3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.kotak-harga{display:flex; flex-direction:column; gap:4px; border:1px solid var(--edge); border-radius:12px;
  padding:14px 16px; background:var(--surface); min-width:0}
.kotak-harga .label{font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink2); line-height:1.4}
.kotak-harga b{font-size:24px; font-weight:800; line-height:1.2; overflow-wrap:anywhere}
.kotak-harga .ket{font-size:13px; color:var(--ink2); line-height:1.45}
.kotak-harga.bekas{border:2px solid var(--primary)}
.kotak-harga.bekas .label{color:var(--primaryText)}
.kotak-harga.selisih{background:var(--hijauBg); border-color:var(--hijauEdge)}
.kotak-harga.selisih .label,.kotak-harga.selisih b,.kotak-harga.selisih .ket{color:var(--suksesTeks)}
@media(max-width:640px){
  .v3-harga3{grid-template-columns:minmax(0,1fr)}
  .v3-tabel-dalam th{width:44%}
}