/* Komparia Blocks — styling komponen (scoped ke .komparia) */
.komparia{
  --blue:#2563EB; --ink:#0F172A; --slate:#64748B; --cloud:#F8FAFC; --white:#FFFFFF;
  --green:#16A34A; --amber:#F59E0B; --red:#DC2626; --line:#E2E8F0;
  --lt-blue:#DBEAFE; --lt-green:#DCFCE7; --lt-amber:#FEF3C7; --lt-red:#FEE2E2;
  --display:'Plus Jakarta Sans',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'Space Grotesk',ui-monospace,monospace;
  color:#1E293B; line-height:1.6; font-family:var(--body);
}
.komparia *{ box-sizing:border-box; }
.komparia h3,.komparia h4,.komparia h5{ font-family:var(--display); color:var(--ink); letter-spacing:-0.4px; margin:0; }
.komparia a{ text-decoration:none; }
.komparia .kompa-empty{ border:1px dashed var(--amber); background:var(--lt-amber); color:#92400E;
  border-radius:10px; padding:12px 14px; font-size:13.5px; margin:18px 0; }

/* ===== VERDICT BOX ===== */
.komparia .verdict{ margin:18px 0; border:2px solid var(--ink); border-radius:14px; overflow:hidden; }
.komparia .verdict-head{ background:var(--ink); color:#fff; padding:12px 18px; font-family:var(--display); font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.komparia .verdict-body{ padding:6px 0; }
.komparia .vpick{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); }
.komparia .vpick:last-child{ border-bottom:none; }
.komparia .vpick img{ width:64px; height:64px; border-radius:10px; object-fit:cover; background:var(--cloud); flex-shrink:0; }
.komparia .vpick-info{ flex:1; min-width:0; }
.komparia .vbadge{ display:inline-block; font-family:var(--display); font-weight:700; font-size:11px; padding:3px 9px; border-radius:20px; margin-bottom:4px; }
.komparia .vpick h4{ font-size:15px; margin-bottom:2px; }
.komparia .vpick .vp-sub{ font-size:12.5px; color:var(--slate); }
.komparia .vbtn{ background:#EE4D2D; color:#fff; font-family:var(--display); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:9px; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  box-shadow:0 2px 0 #C13A1E; transition:transform .1s; }
.komparia .vbtn:active{ transform:translateY(2px); box-shadow:none; }

/* Label tombol: panjang di layar lebar, ringkas ("Shopee →") di layar kecil */
.komparia .kompa-short{ display:none; }

/* badge palette (shared) */
.komparia .b-green{ background:var(--lt-green); color:#15803D; }
.komparia .b-amber{ background:var(--lt-amber); color:#B45309; }
.komparia .b-blue{ background:var(--lt-blue); color:#1D4ED8; }

/* ===== COMPARISON TABLE ===== */
.komparia .ctable-scroll{ margin:18px 0; overflow-x:auto; border:1px solid var(--line); border-radius:14px; -webkit-overflow-scrolling:touch; }
.komparia table.ctable{ width:100%; border-collapse:collapse; min-width:560px; }
.komparia table.ctable th, .komparia table.ctable td{ padding:13px 14px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--line); }
.komparia table.ctable thead th{ background:var(--cloud); font-family:var(--display); font-weight:700; color:var(--ink); position:sticky; top:0; font-size:13px; border-bottom:2px solid var(--line); }
.komparia table.ctable thead th:first-child{ background:var(--ink); color:#fff; }
.komparia table.ctable tbody th{ font-family:var(--display); font-weight:700; background:var(--cloud); color:var(--slate); font-size:12.5px; }
.komparia .cell-best{ color:var(--green); font-weight:700; }
.komparia .cell-mid{ color:var(--amber); font-weight:600; }
.komparia .cell-low{ color:var(--red); }
.komparia .ct-cta{ background:var(--green); color:#fff; font-family:var(--display); font-weight:700; font-size:12px;
  padding:7px 14px; border-radius:8px; display:inline-block; white-space:nowrap; }
.komparia .ct-winner{ background:#F0FDF4; }

/* ===== PRODUCT BOX / REVIEW CARD ===== */
.komparia .pbox{ margin:18px 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(15,23,42,.06); background:#fff; }
.komparia .pbox-top{ display:flex; gap:0; }
.komparia .pbox-img{ width:200px; flex-shrink:0; background:var(--cloud); display:flex; align-items:center; justify-content:center; padding:18px; }
.komparia .pbox-img img{ width:100%; border-radius:10px; }
.komparia .pbox-main{ flex:1; padding:18px 20px; min-width:0; }
.komparia .pbox-badges{ margin-bottom:8px; }
.komparia .badge{ display:inline-block; font-family:var(--display); font-weight:700; font-size:11.5px; padding:4px 11px; border-radius:20px; margin:0 5px 4px 0; }
.komparia .pbox-main h3{ font-size:20px; margin-bottom:6px; }
.komparia .pbox-main .ptag{ font-size:13.5px; color:var(--slate); margin-bottom:12px; }

.komparia .score-wrap{ display:flex; align-items:center; gap:18px; margin:6px 0 4px; }
.komparia .score-num{ font-family:var(--mono); font-weight:700; font-size:42px; color:var(--green); line-height:1; }
.komparia .score-num small{ font-size:18px; color:var(--slate); }
.komparia .score-bars{ flex:1; }
.komparia .sbar{ display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:3px; }
.komparia .sbar .lbl{ width:70px; color:var(--slate); }
.komparia .sbar .track{ flex:1; height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
.komparia .sbar .fillb{ display:block; height:100%; background:var(--green); border-radius:3px; transition:width .3s ease; }
.komparia .sbar .val{ font-family:var(--mono); font-weight:700; width:26px; text-align:right; color:var(--ink); }

.komparia .proscons{ display:flex; gap:0; border-top:1px solid var(--line); }
.komparia .pc-col{ flex:1; padding:14px 18px; }
.komparia .pc-col.pros{ background:#F0FDF4; }
.komparia .pc-col.cons{ background:#FEF2F2; border-left:1px solid var(--line); }
.komparia .pc-col h5{ font-family:var(--display); font-size:13px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.komparia .pc-col.pros h5{ color:var(--green); } .komparia .pc-col.cons h5{ color:var(--red); }
.komparia .pc-col ul{ list-style:none; margin:0; padding:0; }
.komparia .pc-col li{ font-size:13.5px; padding:3px 0 3px 20px; position:relative; }
.komparia .pc-col.pros li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
.komparia .pc-col.cons li::before{ content:"✕"; position:absolute; left:0; color:var(--red); font-weight:700; }

.komparia .whobox{ margin:0; padding:14px 18px; background:#EFF6FF; border-top:1px solid var(--line); }
.komparia .whobox h5{ font-family:var(--display); font-size:13px; color:var(--blue); margin-bottom:6px; }
.komparia .whobox p{ font-size:13.5px; margin:0; color:#1E3A8A; }

.komparia .pbox-cta{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; background:var(--ink); flex-wrap:wrap; }
.komparia .price{ color:#fff; }
.komparia .price .from{ font-size:11px; color:#94A3B8; text-transform:uppercase; letter-spacing:1px; }
.komparia .price .amt{ font-family:var(--display); font-weight:800; font-size:24px; }
.komparia .price .amt span{ font-size:14px; color:#94A3B8; }
.komparia .cta-btn{ background:#EE4D2D; color:#fff; font-family:var(--display); font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:11px; display:inline-flex; align-items:center; gap:8px; box-shadow:0 3px 0 #C13A1E; transition:transform .1s; }
.komparia .cta-btn:active{ transform:translateY(3px); box-shadow:none; }

/* ===== VERSUS BLOCK ===== */
.komparia .versus{ margin:18px 0; display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; gap:0; }
.komparia .vs-card{ border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; background:#fff; }
.komparia .vs-card.win{ border-color:var(--green); border-width:2px; }
.komparia .vs-card img{ width:90px; height:90px; object-fit:cover; border-radius:10px; background:var(--cloud); margin:0 auto 10px; display:block; }
.komparia .vs-card h4{ font-size:16px; margin-bottom:4px; }
.komparia .vs-score{ font-family:var(--mono); font-weight:700; font-size:28px; color:var(--green); }
.komparia .vs-mid{ display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:18px; color:var(--slate); }
.komparia .vs-btn{ display:block; margin-top:10px; background:var(--green); color:#fff; font-family:var(--display); font-weight:700; font-size:13px; padding:9px; border-radius:9px; }

@media(max-width:640px){
  .komparia .pbox-top{ flex-direction:column; }
  .komparia .pbox-img{ width:100%; }
  .komparia .versus{ grid-template-columns:1fr; }
  .komparia .vs-mid{ padding:8px; }
}

/* Layar tidak terlalu besar: tombol jadi ringkas "Shopee →" */
@media(max-width:600px){
  .komparia .kompa-full{ display:none; }
  .komparia .kompa-short{ display:inline; }
}