/* ==========================================================================
   site.css — GAYA BERSAMA UNTUK HALAMAN ISI (bukan untuk index.html)
   ==========================================================================
   index.html sengaja TIDAK memakai berkas ini. Halaman itu adalah tujuan
   iklan berbayar, dan seluruh CSS-nya ditulis inline supaya huruf pertama
   tampil tanpa menunggu satu permintaan jaringan pun. Menariknya keluar ke
   sini akan menambah satu RTT tepat di depan pengunjung yang klik-nya sudah
   dibayar.

   Halaman isi (/gps-tracker-mobil/, /harga-gps-tracker/, dst.) berbeda
   sifatnya: pengunjungnya datang dari pencarian, membuka lebih dari satu
   halaman, dan berkas ini sudah ada di cache sejak halaman pertama. Untuk
   mereka, satu stylesheet bersama justru lebih cepat -- dan yang lebih
   penting, tidak ada 12 salinan CSS yang harus diubah satu per satu.

   Token warna, tombol, kartu, dan FAQ SENGAJA sama persis dengan yang inline
   di index.html. Kalau warna merek berubah, ubah di dua tempat: blok :root
   di index.html dan blok :root di sini.
   ========================================================================== */

@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#070F1C;
  --surface:#0C1729;
  --surface-2:#122139;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#EAF1FA;
  --muted:#94A6BF;
  --brand:#3E9BDC;
  --brand-bright:#7CC4F0;
  --brand-deep:#1F6FA8;
  --sky:#8ED2F5;
  --amber:#FFC24B;
  --wa:#25D366;
  --wa-deep:#128C7E;
  --danger:#FF6B6B;
  --radius:18px;
  --maxw:1160px;
  --pad:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.022em;font-weight:800}
p{margin:0}
button,input,select{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:80px 0;position:relative}
section[id]{scroll-margin-top:92px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-bright);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}
.h2{font-size:clamp(27px,3.8vw,38px)}
.lead{color:var(--muted);font-size:clamp(16px,2vw,19px);margin-top:16px;max-width:64ch}

/* ---------- Tombol (identik dengan index.html) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:12px;border:1px solid transparent;
  font-weight:700;font-size:16px;cursor:pointer;
  min-height:52px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--wa{background:linear-gradient(135deg,var(--wa),var(--wa-deep));color:#04121F;box-shadow:0 10px 30px rgba(37,211,102,.26)}
.btn--wa:hover{box-shadow:0 14px 38px rgba(37,211,102,.4)}
.btn--ghost{border-color:var(--line-strong);background:rgba(255,255,255,.04);color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:var(--brand)}
.btn--sky{background:linear-gradient(135deg,#5FD0FF,#0288D1);color:#04121F;box-shadow:0 10px 30px rgba(142,210,245,.25)}
.btn--sky:hover{box-shadow:0 14px 38px rgba(142,210,245,.4)}
.btn--sm{padding:10px 18px;min-height:44px;font-size:15px}

/* ---------- Navigasi ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(7,15,28,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s;
}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(7,15,28,.94)}
.nav__inner{display:flex;align-items:center;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px;letter-spacing:-.03em}
.brand__mark{width:32px;height:32px;flex:none;border-radius:7px}
.brand__x{color:var(--brand-bright)}
.nav__links{display:flex;gap:6px;margin-left:auto}
.nav__links a{padding:9px 14px;border-radius:9px;font-size:15px;font-weight:600;color:var(--muted);transition:color .15s,background .15s}
.nav__links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav__links a[aria-current=page]{color:var(--text);background:rgba(255,255,255,.07)}
.nav__cta{display:flex;gap:10px;align-items:center}
.nav__toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center}
.lbl-narrow{display:none}

/* ---------- Remah roti ---------- */
.crumb{padding:22px 0 0;font-size:14px;color:var(--muted)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.crumb li::after{content:"›";margin-left:8px;color:var(--line-strong)}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--brand-bright)}
.crumb a:hover{text-decoration:underline}
.crumb [aria-current=page]{color:var(--muted)}

/* ---------- Kepala halaman isi ---------- */
.phead{padding:34px 0 8px;position:relative;overflow:hidden}
.phead::before{
  content:"";position:absolute;inset:-60% -10% auto -10%;height:560px;
  background:radial-gradient(46% 40% at 26% 34%,rgba(62,155,220,.16),transparent 70%),
             radial-gradient(40% 38% at 76% 20%,rgba(142,210,245,.12),transparent 70%);
  pointer-events:none;
}
.phead__in{position:relative;z-index:1;max-width:820px}
.phead h1{font-size:clamp(30px,4.8vw,48px);letter-spacing:-.035em}
.phead h1 em{font-style:normal;color:var(--brand-bright)}
.phead__sub{color:var(--muted);font-size:clamp(16px,2.1vw,19px);margin-top:18px;max-width:62ch}
.phead__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.phead__notes{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;color:var(--muted);font-size:14.5px}
.phead__notes span{display:inline-flex;align-items:center;gap:7px}
.tick{color:var(--brand-bright);flex:none}

/* ---------- Tata letak isi + daftar isi ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:56px;align-items:start;padding:56px 0 40px}
.toc{position:sticky;top:98px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:22px}
.toc h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;counter-reset:toc}
.toc a{display:block;padding:8px 10px;border-radius:9px;font-size:14.5px;color:var(--muted);font-weight:600;line-height:1.4}
.toc a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.toc__cta{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.toc__cta .btn{width:100%}

/* ---------- Prosa ---------- */
.prose{max-width:74ch;font-size:17px;min-width:0}
.prose > * + *{margin-top:20px}
.prose h2{font-size:clamp(24px,3.2vw,32px);margin-top:52px;letter-spacing:-.03em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin-top:34px}
.prose p{color:#C9D6E6}
.prose strong{color:var(--text);font-weight:700}
.prose a{color:var(--brand-bright);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--sky)}
.prose ul,.prose ol{margin:0;padding-left:0;list-style:none;display:grid;gap:12px}
.prose ul li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;color:#C9D6E6}
.prose ul li .tick{margin-top:4px}
.prose ol{counter-reset:n}
.prose ol li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;color:#C9D6E6;counter-increment:n}
.prose ol li::before{
  content:counter(n);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:13.5px;font-weight:800;color:#0A1628;margin-top:2px;
  background:linear-gradient(135deg,var(--brand-bright),var(--brand-deep));
}
.prose blockquote{
  margin:0;padding:20px 22px;border-radius:14px;
  border:1px solid rgba(142,210,245,.28);background:rgba(142,210,245,.08);
  color:var(--text);font-size:15.5px;line-height:1.6;
}
.prose blockquote b{color:var(--sky)}

/* Kotak sorot amber — dipakai untuk angka uang dan peringatan harga. */
.note{
  padding:18px 20px;border-radius:14px;
  background:rgba(255,194,75,.07);border:1px solid rgba(255,194,75,.24);
  color:var(--muted);font-size:15px;line-height:1.6;
}
.note b{color:var(--amber)}

/* ---------- Tabel ----------
   Dibungkus .tablewrap yang menggeser SENDIRI isinya di HP. Tanpa itu tabel
   selebar 5 kolom membuat SELURUH halaman bisa digeser ke samping, dan
   gejalanya tidak terlihat di desktop. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.03)}
tr:last-child td{border-bottom:none}
td b{color:var(--brand-bright);font-weight:700}
td .amber{color:var(--amber);font-weight:700}

/* ---------- Kartu ---------- */
.cards{display:grid;gap:18px;margin-top:28px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card h3{font-size:17px;margin-bottom:9px}
.card p{color:var(--muted);font-size:15px;line-height:1.6}
.card__ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:rgba(62,155,220,.13);border:1px solid rgba(62,155,220,.28);color:var(--brand-bright);
}
.card__ico--danger{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.3);color:var(--danger)}

/* ---------- Harga ringkas ---------- */
.pricebar{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.pricebar div{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--surface)}
.pricebar div.is-hot{border-color:rgba(62,155,220,.5);background:linear-gradient(170deg,rgba(62,155,220,.09),var(--surface))}
.pricebar span{display:block;color:var(--muted);font-size:14px;font-weight:700}
.pricebar b{display:block;font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.035em;margin-top:4px;white-space:nowrap}
.pricebar i{display:block;font-style:normal;color:var(--muted);font-size:14px;margin-top:4px}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-top:26px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-weight:700;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:27px;width:11px;height:11px;
  border-right:2.5px solid var(--brand-bright);border-bottom:2.5px solid var(--brand-bright);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq p{color:var(--muted);font-size:15.5px;padding-bottom:22px;max-width:70ch}

/* ---------- Tautan antar halaman ----------
   Bagian ini bukan hiasan. Halaman yang tidak ditautkan dari mana pun praktis
   tidak ada bagi mesin pencari, dan blok inilah yang menyambungkan seluruh
   halaman isi satu sama lain tanpa bergantung pada menu navigasi saja. */
.related{border-top:1px solid var(--line);background:var(--surface);padding:64px 0}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.related__grid a{
  display:block;padding:20px 22px;border-radius:15px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);transition:border-color .2s,transform .2s;
}
.related__grid a:hover{border-color:var(--brand);transform:translateY(-3px)}
.related__grid b{display:block;font-size:16px;font-weight:700}
.related__grid span{display:block;color:var(--muted);font-size:14px;margin-top:6px;line-height:1.5}

/* ---------- CTA akhir ---------- */
.final{text-align:center;background:radial-gradient(55% 60% at 50% 0%,rgba(62,155,220,.14),transparent 65%),var(--bg);padding:80px 0}
.final h2{font-size:clamp(27px,4.2vw,42px)}
.final .lead{margin:18px auto 0}
.final__cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface);padding:56px 0 32px;font-size:15px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot__grid p{color:var(--muted);font-size:14.5px;margin-top:14px;max-width:38ch}
.foot h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:800}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot a{color:var(--text);font-size:15px}
.foot a:hover{color:var(--brand-bright)}
.foot__bot{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- Tombol WA melayang ---------- */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:99px;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 12px 34px rgba(37,211,102,.4);min-height:56px;
}
.fab:hover{transform:translateY(-2px)}
.fab svg{flex:none}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width:1040px){
  /* Daftar isi melekat dicabut lebih dulu daripada kolomnya runtuh: pada
     lebar ini ia sudah terlalu sempit untuk judul seksi yang panjang.

     `minmax(0,1fr)`, BUKAN `1fr`. Nilai `1fr` sendiri berarti
     `minmax(auto,1fr)`, dan `auto` di sini adalah lebar isi TERLEBAR di
     dalamnya -- yaitu tabel yang `min-width:520px`. Akibatnya kolomnya
     melebar melampaui layar dan SELURUH halaman bisa digeser ke samping,
     meski tabelnya sendiri sudah dibungkus `overflow-x:auto`. Gejalanya nol
     di desktop dan 132px di layar 390px. */
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{position:static;margin-bottom:36px;order:-1}
}
@media (max-width:980px){
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .related__grid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
/* Navigasi runtuh di 860px, bukan 760px — isi bilahnya butuh ~812px, dan
   tablet potret (768–860px) akan melebarkan seluruh halaman tanpa ini. */
@media (max-width:860px){
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:74px;
    background:rgba(7,15,28,.98);border-bottom:1px solid var(--line);padding:12px;gap:2px;margin:0;
  }
  .nav__links.is-open a{padding:14px;font-size:16px}
  .nav__toggle{display:flex}
  .nav__cta .btn--ghost{display:none}
  .nav__cta .btn{white-space:nowrap}
  .lbl-wide{display:none}
  .lbl-narrow{display:inline}
}
@media (max-width:760px){
  body{font-size:16px}
  .section,.related,.final{padding:56px 0}
  .layout{padding:36px 0 28px}
  /* Label panjang harus boleh patah di HP: `nowrap` bawaan .btn membuat satu
     tombol berlabel panjang melebarkan SELURUH halaman. */
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .phead__cta .btn{flex:1 1 100%}
  .prose{font-size:16.5px}
  .fab span{display:none}
  .fab{padding:16px;border-radius:50%}
}
@media (max-width:560px){
  .cards--2,.cards--3,.related__grid,.pricebar,.foot__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}