/* CekSpekHP — nuansa gelap teknologi, aksen biru elektrik. Mobile-first. */
[hidden]{display:none!important}

:root{
  --bg:#0b0f17; --panel:#141a26; --panel2:#1a2130; --garis:#242d3d; --garis2:#1b2231;
  --teks:#eaf0fa; --redup:#9fadc4; --samar:#7a8699;
  --aksen:#3b82f6; --aksen2:#60a5fa; --aksen-teks:#04101f; --aksen-lembut:#132239;
  --hijau:#34d399; --kuning:#fbbf24;
  --r:14px; --r2:10px; --bayang:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.4);
  --nav-h:56px; --maks:1120px;
}
html[data-tema="terang"]{
  --bg:#f5f7fb; --panel:#fff; --panel2:#f0f3f9; --garis:#e2e8f0; --garis2:#eef2f7;
  --teks:#0f172a; --redup:#5b6b84; --samar:#8695ab;
  --aksen:#2563eb; --aksen2:#1d4ed8; --aksen-teks:#fff; --aksen-lembut:#e8f0fe;
  --bayang:0 1px 2px rgba(15,23,42,.06),0 8px 22px rgba(15,23,42,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--teks);overflow-x:hidden;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--aksen2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.csp-wrap{width:100%;max-width:var(--maks);margin:0 auto;padding:0 14px}
.csp-lompat{position:absolute;left:-9999px}
.csp-lompat:focus{left:8px;top:8px;z-index:200;background:var(--panel);padding:8px 12px;border-radius:8px}

.csp-top{position:sticky;top:0;z-index:60;background:var(--panel);border-bottom:1px solid var(--garis)}
.csp-top-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 0}
.csp-logo{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--teks);letter-spacing:-.02em}
.csp-logo:hover{text-decoration:none}
.csp-cari{flex:1 1 0;min-width:0}
.csp-cari input{width:100%;padding:9px 12px;border:1px solid var(--garis);border-radius:999px;
  background:var(--bg);color:var(--teks);font:inherit;font-size:14px}
.csp-ikon{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--garis);
  border-radius:10px;background:var(--panel);color:var(--teks);cursor:pointer}
.csp-nav{flex:0 0 100%;margin-top:6px;padding-top:8px;border-top:1px solid var(--garis2);display:none}
.csp-nav.buka{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.csp-nav a{padding:11px 8px;text-align:center;border-radius:9px;background:var(--panel2);color:var(--teks);font-size:14px;font-weight:600}
.csp-nav a:hover{text-decoration:none;color:var(--aksen2)}
.csp-nav a:last-child:nth-child(odd){grid-column:1/-1}

.csp-hero{background:linear-gradient(150deg,var(--aksen-lembut),transparent 65%);border-bottom:1px solid var(--garis2);padding:20px 0 24px}
.csp-eyebrow{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--aksen2)}
.csp-h1{margin:0 0 8px;font-size:25px;line-height:1.18;font-weight:850;letter-spacing:-.03em}
.csp-sub{margin:0 0 14px;color:var(--redup);font-size:15px}

.csp-seksi{margin:24px 0}
.csp-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.csp-judul{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.csp-semua{font-size:13px;font-weight:700;white-space:nowrap}

/* kartu ponsel */
.csp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.csp-kartu{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--garis);
  border-radius:var(--r2);overflow:hidden;color:var(--teks);box-shadow:var(--bayang)}
.csp-kartu:hover{text-decoration:none;border-color:var(--aksen)}
.csp-kartu-gbr{aspect-ratio:3/4;background:var(--panel2);display:grid;place-items:center;overflow:hidden}
.csp-kartu-gbr img{width:100%;height:100%;object-fit:contain;padding:8px}
.csp-kartu-isi{padding:10px 11px}
.csp-kartu-nama{display:block;font-weight:700;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.csp-kartu-meta{display:block;font-size:12px;color:var(--redup);margin-top:3px}
.csp-lencana{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--aksen-lembut);
  color:var(--aksen2);font-size:11px;font-weight:700;margin-top:5px}

/* halaman detail */
.csp-hp-atas{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start;
  background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);padding:14px;box-shadow:var(--bayang)}
.csp-hp-gbr{background:var(--panel2);border-radius:var(--r2);aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden}
.csp-hp-gbr img{width:100%;height:100%;object-fit:contain;padding:6px}
.csp-hp-ring{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.csp-hp-ring div{background:var(--panel2);border-radius:9px;padding:9px 10px}
.csp-hp-ring dt{margin:0 0 2px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--samar)}
.csp-hp-ring dd{margin:0;font-size:13.5px;font-weight:700;overflow-wrap:anywhere}

.csp-spek{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);overflow:hidden;box-shadow:var(--bayang)}
.csp-spek h3{margin:0;padding:10px 13px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--aksen2);background:var(--aksen-lembut);border-bottom:1px solid var(--garis)}
.csp-spek table{width:100%;border-collapse:collapse;font-size:14px}
.csp-spek th{width:34%;text-align:left;vertical-align:top;padding:10px 13px;font-weight:700;color:var(--redup);
  font-size:13px;border-bottom:1px solid var(--garis2)}
.csp-spek td{padding:10px 13px;border-bottom:1px solid var(--garis2);overflow-wrap:anywhere}
.csp-spek tr:last-child th,.csp-spek tr:last-child td{border-bottom:0}

.csp-pil-baris{display:flex;flex-wrap:wrap;gap:7px}
.csp-pil{padding:7px 12px;border:1px solid var(--garis);border-radius:999px;background:var(--panel);font-size:13px;font-weight:600;color:var(--teks)}
.csp-pil:hover{text-decoration:none;border-color:var(--aksen);color:var(--aksen2)}
.csp-remah{font-size:12px;color:var(--samar);margin:14px 0 8px;overflow-wrap:anywhere}
.csp-remah a{color:var(--redup)}

.csp-prosa{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);padding:16px;margin:22px 0}
.csp-prosa h2{margin:0 0 8px;font-size:18px;font-weight:800}
.csp-prosa h3{margin:15px 0 6px;font-size:15.5px;font-weight:800}
.csp-prosa p,.csp-prosa li{font-size:14.5px;color:var(--redup)}
.csp-prosa p{margin:0 0 10px}
.csp-prosa ul,.csp-prosa ol{margin:0 0 10px;padding-left:20px}

.csp-faq details{border:1px solid var(--garis);border-radius:var(--r2);background:var(--panel);padding:11px 13px;margin-bottom:7px}
.csp-faq summary{font-weight:700;font-size:14.5px;cursor:pointer;list-style:none}
.csp-faq summary::-webkit-details-marker{display:none}
.csp-faq summary::after{content:"+";float:right;color:var(--aksen2);font-weight:800}
.csp-faq details[open] summary::after{content:"−"}
.csp-faq p{margin:8px 0 0;font-size:14px;color:var(--redup)}

.csp-paginasi{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:20px 0}
.csp-paginasi a,.csp-paginasi span{min-width:38px;padding:8px 10px;text-align:center;border:1px solid var(--garis);
  border-radius:9px;background:var(--panel);font-size:14px;font-weight:600;color:var(--teks)}
.csp-paginasi .kini{background:var(--aksen);border-color:var(--aksen);color:var(--aksen-teks)}
.csp-paginasi a:hover{text-decoration:none;border-color:var(--aksen)}

.csp-bnav{position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--nav-h);display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--panel);border-top:1px solid var(--garis);padding-bottom:env(safe-area-inset-bottom)}
.csp-bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--redup)}
.csp-bnav a:hover{text-decoration:none}
.csp-bnav a.kini{color:var(--aksen2)}

.csp-kaki{background:var(--panel);border-top:1px solid var(--garis);margin-top:28px;padding:22px 0 calc(var(--nav-h) + 24px)}
.csp-kaki-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.csp-kaki h4{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--samar)}
.csp-kaki ul{margin:0;padding:0;list-style:none}
.csp-kaki li{margin-bottom:6px}
.csp-kaki a{font-size:13.5px;color:var(--redup)}
.csp-kaki-brand{grid-column:1/-1}
.csp-kaki-brand p{margin:6px 0 0;font-size:13px;color:var(--redup)}
.csp-kaki-bawah{grid-column:1/-1;margin-top:14px;padding-top:12px;border-top:1px solid var(--garis);font-size:12px;color:var(--samar)}

@media (min-width:760px){
  :root{--nav-h:0px}
  .csp-bnav{display:none}
  .csp-nav{flex:1 1 auto;display:flex!important;gap:2px;margin:0;padding:0;border:0;justify-content:flex-end}
  .csp-nav a{background:transparent;padding:8px 10px}
  .csp-ikon.csp-burger{display:none}
  .csp-h1{font-size:32px}
  .csp-grid{grid-template-columns:repeat(4,1fr)}
  .csp-hp-atas{grid-template-columns:200px 1fr}
  .csp-hp-ring{grid-template-columns:repeat(4,1fr)}
  .csp-kaki-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .csp-kaki-brand{grid-column:auto}
}