/* ══ KARTU NILAI RELATIF KELAS HARGA — /review/<slug> (ketokan owner 26 Okt) ══
   Acuan: MOCKUP_Nilai_Relatif_Kelas.html v2 (CSS & warna aspek disalin dari sana).
   Dimuat HANYA bila review berformat nilai_dasar "relatif_kelas" (public_review.html) —
   review lama tak pernah memuat berkas ini. Semua kelas berawalan .nk / .na- (nol tabrakan
   dengan review.css).
   Tema: mekanisme situs = html[data-tema="gelap"] (review.js, bawaan TERANG). Varian gelap
   mockup dipasang di sana — BUKAN prefers-color-scheme: halaman review sendiri tak mengikuti
   tema OS, jadi kartu gelap di halaman terang akan terjadi bila memakai media query.
   Permukaan/garis/teks = token review.css (--surface, --edge, --ink, --ink2, --bg). */
:root{
  --nk-biru:#1D4ED8; --nk-biruBg:#EFF6FF;
  --c-perf:#7C3AED; --b-perf:#F3E8FF; --c-layar:#2563EB; --b-layar:#DBEAFE;
  --c-bat:#16A34A;  --b-bat:#DCFCE7;  --c-des:#DB2777;   --b-des:#FCE7F3;
  --c-key:#0D9488;  --b-key:#CCFBF1;  --c-harga:#D97706; --b-harga:#FEF3C7;
}
html[data-tema="gelap"]{
  --nk-biru:#60A5FA; --nk-biruBg:#172554;
  --c-perf:#C4B5FD; --b-perf:#2E1065; --c-layar:#93C5FD; --b-layar:#172554;
  --c-bat:#86EFAC;  --b-bat:#052E16;  --c-des:#F9A8D4;   --b-des:#500724;
  --c-key:#5EEAD4;  --b-key:#042F2E;  --c-harga:#FCD34D; --b-harga:#451A03;
}

.nk{background:var(--surface); border:1px solid var(--edge); border-radius:16px; padding:18px; min-width:0}
.nk-kepala{display:flex; gap:16px; align-items:center; border:1px solid var(--edge); border-radius:14px; padding:16px;
  background:linear-gradient(135deg, var(--nk-biruBg), transparent 70%)}
.nk-cincin{width:82px; height:82px; flex:none; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--nk-biru) var(--nk-isi, 0%), var(--edge) 0)}
.nk-cincin::before{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface)}
.nk-cincin b{position:relative; font-size:30px; font-weight:800; color:var(--nk-biru)}
.nk-kepala-teks{min-width:0}
.nk-kepala-teks b{display:block; font-size:16px; color:var(--ink)}
.nk-kepala-teks small{display:block; color:var(--ink2); font-size:12.5px}
.nk-kelas{display:inline-flex; gap:5px; align-items:center; margin-top:7px; background:var(--surface); border:1px solid var(--edge);
  color:var(--nk-biru); font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; max-width:100%; overflow-wrap:anywhere}

.nk-kisi{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px}
.nk-aspek{border:1px solid var(--edge); border-radius:12px; padding:12px; display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px}
.nk-ikon{width:40px; height:40px; border-radius:11px; display:grid; place-items:center}
.nk-ikon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.nk-isi{min-width:0}
.nk-atas{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:14px; font-weight:700; color:var(--ink)}
.nk-atas em{font-style:normal; font-size:17px; font-weight:800}
.nk-garis{height:7px; background:var(--edge); border-radius:4px; margin:6px 0; overflow:hidden}
.nk-garis i{display:block; height:100%; border-radius:4px}
.nk-alasan{margin:0; font-size:12.5px; color:var(--ink2); line-height:1.45; overflow-wrap:anywhere}

.na-performa .nk-ikon{background:var(--b-perf); color:var(--c-perf)}   .na-performa em{color:var(--c-perf)}   .na-performa .nk-garis i{background:var(--c-perf)}
.na-layar .nk-ikon{background:var(--b-layar); color:var(--c-layar)}    .na-layar em{color:var(--c-layar)}     .na-layar .nk-garis i{background:var(--c-layar)}
.na-baterai .nk-ikon{background:var(--b-bat); color:var(--c-bat)}      .na-baterai em{color:var(--c-bat)}     .na-baterai .nk-garis i{background:var(--c-bat)}
.na-desain .nk-ikon{background:var(--b-des); color:var(--c-des)}       .na-desain em{color:var(--c-des)}      .na-desain .nk-garis i{background:var(--c-des)}
.na-keyboard .nk-ikon{background:var(--b-key); color:var(--c-key)}     .na-keyboard em{color:var(--c-key)}    .na-keyboard .nk-garis i{background:var(--c-key)}
.na-nilai_harga .nk-ikon{background:var(--b-harga); color:var(--c-harga)} .na-nilai_harga em{color:var(--c-harga)} .na-nilai_harga .nk-garis i{background:var(--c-harga)}

.nk-catatan{margin-top:12px; font-size:12px; color:var(--ink2); background:var(--bg); border:1px dashed var(--edge); border-radius:10px;
  padding:9px 11px; display:flex; gap:8px; line-height:1.45}
.nk-catatan svg{flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; margin-top:1px}

/* HP: satu kolom (mockup panel 390). */
@media (max-width:640px){
  .nk{padding:14px}
  .nk-kisi{grid-template-columns:minmax(0,1fr)}
}