/* ============================================================
   GWM Batam — PT. Majesty Auto Jaya
   Arah visual: "Batam Terrain × Blueprint"
   Paletnya diambil PERSIS dari design plan feed Instagram
   @gwm.majestybatam, supaya situs dan feed terbaca satu sistem.

   Struktur: 1) Token  2) Reset  3) Utilitas  4) Motif blueprint
             5) Komponen  6) Section  7) Pita terang  8) Pita amber
             9) Responsive
   ============================================================ */

/* ---------- 1) DESIGN TOKEN ---------- */
:root {
  /* Situs ini gelap. 'dark' memaksa kontrol bawaan browser (select,
     scrollbar, angka) ikut gelap — tanpa ini dropdown simulasi kredit
     muncul putih dan bocor dari desain. */
  color-scheme: dark;

  /* --- Permukaan ---
     Kedalaman dibangun bertingkat, bukan dengan bayangan. Bayangan tidak
     terbaca di atas navy sepekat ini. */
  --bg:         #0B1420;   /* Midnight Navy — dasar   */
  --surface:    #12202F;   /* Navy Deck — panel       */
  --surface-2:  #1A2C3E;
  --surface-3:  #24394D;

  /* --- Teks --- semua sudah dihitung terhadap --bg
     text 14,8:1 · text-2 8,6:1 · text-3 5,8:1 */
  --text:       #E8E6E1;   /* Paper */
  --text-2:     #9FB3C4;
  --text-3:     #7A93A8;

  /* --- Garis ---
     Memakai Blueprint Line transparan, bukan putih transparan: garisnya
     jadi ikut berwarna biru cetak-biru dan menyatu dengan motif grid. */
  --line:        rgba(92, 135, 166, .20);
  --line-strong: rgba(92, 135, 166, .42);
  /* Garis KONTROL (input, select, tombol outline). WCAG 1.4.11 minta 3:1
     untuk batas komponen interaktif — Blueprint Line ini 4,8:1. */
  --line-input:  #5C87A6;
  /* Sedikit lebih terang dari --line-input meski keduanya "biru cetak-biru".
     Bedanya tugas: --line-input hanya menggambar GARIS, dan WCAG 1.4.11
     cuma menuntut 3:1 untuk itu. --blueprint dipakai untuk TEKS kecil
     (stempel koordinat, kepala tabel, label kontak) yang menuntut 4,5:1.
     Di atas navy polos #5C87A6 masih lolos 4,8:1 — tapi begitu gradasi
     latar menaikkan terangnya, angka itu turun ke 3,9:1 dan gagal. Nilai
     ini menjaganya di 4,8:1 bahkan di titik latar paling terang. */
  --blueprint:   #6C96B4;

  /* --- Barelang Sand --- aksen umum: harga, eyebrow, ikon. 7,3:1 */
  --sand:       #C89B5A;
  --sand-dim:   #6B5533;
  --sand-tint:  rgba(200, 155, 90, .10);

  /* --- Signal Amber --- 8,6:1
     DIPAKAI HEMAT. Aturan yang sama dengan feed Instagram: amber cuma
     boleh mendominasi SATU blok di seluruh halaman — pita penawaran di
     bawah. Di tempat lain amber hanya berupa garis rambut atau angka
     kecil. Kelangkaan inilah yang membuat blok penawaran punya daya
     ledak; begitu amber dipakai di mana-mana, efeknya hilang. */
  --amber:      #E8A33D;
  --amber-ink:  #0B1420;
  --amber-dim:  #7A5518;

  /* WhatsApp — satu-satunya warna jenuh selain amber, jadi tiap titik
     konversi menyala tanpa perlu dibesarkan.
     Teksnya GELAP: putih di atas #25d366 cuma 2:1 dan gagal WCAG. */
  --wa:         #25D366;
  --wa-600:     #1DB954;
  --wa-ink:     #072B14;

  --focus:      #8FD3FF;

  /* --- Cahaya & gradasi ---
     Navy rata terasa mati, jadi diberi cahaya sangat samar. Nilainya
     sengaja kecil (5–11%): lewat ~14% warnanya berubah abu dan kesan
     "navy tengah malam"-nya hilang. */
  /* ANGKA DI BAWAH INI TERIKAT KONTRAS, bukan selera.
     Cahaya seksi menumpuk di atas atmosfer halaman (body::before), dan
     keduanya menaikkan terang latar. Batasnya: --text-3 dipakai untuk teks
     kecil dan hanya 5,8:1 di atas navy polos — begitu latar naik melewati
     luminansi 0,023, teks itu jatuh di bawah ambang WCAG 4,5:1.

     Yang penting dipahami: plafon itu mengikat TITIK PALING TERANG saja.
     Yang membuat gradasi terlihat adalah SELISIH terang-gelap, dan
     menggelapkan sisi gelapnya tidak memakan jatah kontras sama sekali —
     latar lebih gelap justru menaikkan kontras teks terang. Karena itu
     kenaikan keterlihatan dikerjakan dari sisi gelap (lihat body::before),
     bukan dengan menaikkan puncaknya melewati batas.

     Ketiga varian disetel rata di puncak 0,0210 — menyisakan margin ke
     plafon 0,0230. Terukur: text-3 4,62:1, rentang terang-gelap 0,0181.
     Tiap varian sengaja berpuncak SATU warna dominan; kalau biru dan sand
     ditumpuk di titik yang sama keduanya saling menetralkan dan puncaknya
     jadi abu — gradasi kelabu terbaca pudar, bukan kuat. */
  --glow-kuat:
    radial-gradient(60% 52% at 42% -6%, rgba(92, 135, 166, .238), transparent 50%);

  --glow-lembut:
    radial-gradient(46% 38% at 82% 2%, rgba(92, 135, 166, .187), transparent 50%),
    radial-gradient(24% 26% at 2% 98%, rgba(200, 155, 90, .064), transparent 46%);

  /* Condong hangat. Dipakai BERSELANG-SELING dengan dua glow di atas —
     kalau tiap seksi memakai cahaya yang sama persis, halaman sepanjang ini
     tetap terbaca monoton walau gradasinya sudah ada. Sand di sini mewakili
     cahaya sore Barelang, sumber warna hangat satu-satunya di sistem ini. */
  --glow-hangat:
    radial-gradient(46% 40% at 10% -6%, rgba(200, 155, 90, .120), transparent 48%),
    radial-gradient(36% 38% at 98% 92%, rgba(92, 135, 166, .180), transparent 50%);

  /* Kebalikannya untuk pita terang: gelap di tepi atas & bawah, supaya
     peralihan ke seksi navy jadi luluh, bukan garis potong yang tegas. */
  --fade-gelap:
    radial-gradient(94% 42% at 50% 0%, rgba(11, 20, 32, .16), transparent 64%),
    radial-gradient(94% 38% at 50% 100%, rgba(11, 20, 32, .14), transparent 64%);

  /* --- Pita terang (Paper) — hanya simulasi kredit + FAQ --- */
  --lt-bg:        #E8E6E1;
  --lt-surface:   #F6F5F2;
  --lt-surface-2: #DCD9D2;
  --lt-text:      #0B1420;
  --lt-text-2:    #4A5A67;   /* 5,7:1 di atas Paper */
  --lt-line:      #C7C3BA;
  --lt-line-input:#71808C;
  /* Amber MURNI tidak terbaca di atas Paper (1,7:1). Di pita terang,
     aksen teks memakai sand yang digelapkan — 6,4:1. */
  --lt-accent:    #6B4A16;

  --font-head: "IBM Plex Sans Condensed", "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1140px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 20px;
}

/* ---------- 2) RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Atmosfer sekujur halaman.
   Cahaya per seksi saja tidak cukup: begitu halamannya sepanjang ~13.000 px,
   navy rata di antara seksi tetap terbaca sebagai dinding datar. Lapisan ini
   DIPAKU ke layar (position:fixed), jadi saat digulir isinya yang bergerak
   melewati cahaya — bukan cahayanya yang ikut berjalan. Efeknya seperti
   ruangan yang punya sumber cahaya tetap.

   z-index -2, satu tingkat di bawah cahaya seksi (-1), supaya keduanya
   bertumpuk dan bukan saling menimpa. Seksi berlatar padat (pita Paper,
   footer, panel) menutupinya dengan sendirinya. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* langit dingin dari kiri atas */
    radial-gradient(58% 40% at 5% -10%, rgba(92, 135, 166, .18), transparent 52%),
    /* pantulan hangat dari kanan — matahari sore. Sengaja jauh lebih rendah
       dari lapisan dinginnya: sand terang, dan lapisan ini menempel di
       SELURUH halaman, jadi ia yang paling banyak memakan cadangan kontras
       saat bertemu cahaya seksi. */
    radial-gradient(40% 34% at 102% 16%, rgba(200, 155, 90, .075), transparent 50%),
    /* --- SISI GELAP ---
       Tiga kolam gelap ini yang sebenarnya membuat gradasinya terlihat.
       Menambah terang dibatasi plafon kontras; menggelapkan tidak dibatasi
       apa pun, karena latar yang lebih gelap justru menaikkan kontras teks.
       Jadi jangkauan terang-gelap diperlebar dari sini, bukan dari puncaknya. */
    radial-gradient(115% 62% at 50% 110%, rgba(2, 5, 10, .88), transparent 66%),
    radial-gradient(70% 55% at 102% 102%, rgba(2, 5, 10, .60), transparent 58%),
    radial-gradient(45% 60% at -2% 55%, rgba(2, 5, 10, .42), transparent 55%);
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* WAJIB, dan harus !important.
   Aturan bawaan browser [hidden]{display:none} specificity-nya cuma 0,1,0 —
   kalah dari aturan sesederhana .model-name img (0,1,1). Akibatnya
   this.hidden=true di onerror tidak berefek: gambar rusak tetap tampil
   berikut teks alt-nya, BERSAMAAN dengan teks penggantinya. */
[hidden] { display: none !important; }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- 3) UTILITAS ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Eyebrow memakai Plex Mono, sama seperti label data di feed Instagram.
   Ini yang membuat situs dan feed terasa satu sistem. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand);
  border: 1px solid var(--sand-dim);
  background: var(--sand-tint);
  border-radius: 999px;
  padding: 5px 13px;
}

/* Cap koordinat / label teknis polos — tanpa pil, seperti stempel di
   sudut gambar feed. */
.stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blueprint);
}

.sec { padding: clamp(56px, 8vw, 104px) 0; }

/* Cahaya dipasang lewat ::before, bukan background seksinya, supaya bisa
   melimpah keluar batas seksi tanpa memotong isi. isolation:isolate
   mengurung z-index:-1 di dalam seksi ini saja — tanpa itu cahayanya
   tenggelam ke belakang latar body dan tidak kelihatan sama sekali. */
.bercahaya { position: relative; isolation: isolate; }
.bercahaya::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glow-kuat);
  pointer-events: none;
  z-index: -1;
}
.bercahaya-lembut::before { background: var(--glow-lembut); }
.bercahaya-hangat::before { background: var(--glow-hangat); }

.sec-head { max-width: 640px; margin-bottom: 40px; }
.sec-head h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin-top: 14px;
}
.sec-head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: 17px;
}

/* Angka harga, tenor, dan garansi harus sejajar antar baris. Tanpa
   tabular-nums, "1" jauh lebih sempit dari "8" dan kolom harga di tabel
   Plat V terlihat bergoyang. */
.num { font-variant-numeric: tabular-nums; }

/* Garis rambut amber — satu-satunya pemakaian amber di luar pita
   penawaran. Panjangnya tetap 34px supaya terbaca sebagai penanda
   sistem, bukan hiasan. */
.rule {
  width: 34px;
  height: 2px;
  background: var(--amber);
  border: 0;
  margin: 0 0 14px;
}

/* ---------- 4) MOTIF BLUEPRINT ---------- */

/* Grid cetak-biru. Dipasang sebagai lapisan ::after supaya bisa ditumpuk
   di atas warna apa pun tanpa mengganggu ::before yang sudah dipakai
   cahaya. pointer-events:none wajib — tanpa itu lapisan ini menelan klik
   ke tombol di bawahnya. */
.blueprint { position: relative; isolation: isolate; }
.blueprint::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(92, 135, 166, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 135, 166, .13) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
  z-index: -1;
}
/* Grid yang memudar ke bawah — untuk hero, supaya isi di bagian bawah
   tidak berebut perhatian dengan garisnya. */
.blueprint-fade::after {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

/* Bracket sudut — motif yang sama dengan bingkai foto di feed.
   Empat sudut dibuat dari dua pseudo-element pada .cb dan dua lagi pada
   <i> di dalamnya, jadi satu span cukup untuk keempatnya. */
.cb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--blueprint);
}
.cb::before, .cb::after,
.cb i::before, .cb i::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  opacity: .8;
}
.cb::before   { top: 8px;    left: 8px;  border-right: 0; border-bottom: 0; }
.cb::after    { top: 8px;    right: 8px; border-left: 0;  border-bottom: 0; }
.cb i::before { bottom: 8px; left: 8px;  border-right: 0; border-top: 0; }
.cb i::after  { bottom: 8px; right: 8px; border-left: 0;  border-top: 0; }

/* ---------- 5) KOMPONEN ---------- */

/* Tombol. Primer = Paper solid di atas navy — 14,8:1. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;              /* target sentuh WCAG 2.5.8 / Apple HIG */
  padding: 12px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #cbc9c3; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-input);
}
.btn-ghost:hover { border-color: var(--text); background: rgba(92, 135, 166, .12); }

.btn-wa { background: var(--wa); color: var(--wa-ink); }
.btn-wa:hover { background: var(--wa-600); }

.btn svg { width: 19px; height: 19px; flex: none; }

/* Kartu */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* Wadah gambar. Kalau berkasnya belum ada, onerror di HTML membuang <img>
   dan menambahkan .ph — labelnya diambil dari atribut data-kosong, jadi
   tiap slot bisa menyebut sendiri foto apa yang kurang. */
.media {
  position: relative;
  margin: 0;
  /* WAJIB, dan bukan basa-basi. aspect-ratio menghitung LEBAR dari
     tinggi. Begitu .ph memasang min-height (340px di hero, 300px di blok
     model) pada kotak beraspek 1,25–1,6, lebar yang dihitung jadi
     425–480px — melewati kolom 335px di layar 375px dan membuat seluruh
     halaman bisa digeser mendatar. max-width mengunci lebarnya; yang
     mengalah tingginya. Hanya terlihat saat fotonya belum ada, tapi
     justru itulah keadaan situs ini sekarang. */
  max-width: 100%;
  /* Rasio tetap WAJIB. Gambar di bawah layar memakai loading=lazy, jadi
     sebelum di-scroll tingginya 0 dan seksinya kolaps — tata letaknya
     melompat saat gambar selesai memuat (CLS). Rasio ini yang menahan
     ruangnya. object-fit di bawah yang mengatur cara mengisinya. */
  aspect-ratio: 16 / 10;
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain = foto cutout mobil tampil utuh, tidak terpotong */
  object-fit: contain;
  border-radius: var(--r);
}

/* Bracket disembunyikan kalau fotonya gagal dimuat — kotak .ph sudah
   punya garis putus-putus sendiri, dua bingkai jadi berantakan. */
.media.ph .cb { display: none; }

/* ---------- SLIDER HERO ----------
   Semua slide memakai kanvas 1680x1200 dengan mobil dijangkarkan ke bawah,
   jadi saat digeser mobilnya tidak melompat-lompat posisinya. */
.hero-media { aspect-ratio: 1.4; }
.hero-media img { object-position: bottom; }

.hero-slider { position: relative; }

.hero-viewport { overflow: hidden; }

.hero-track {
  display: flex;
  /* touch-action pan-y WAJIB. Tanpa itu, geseran mendatar di slider ikut
     menahan gulir tegak halaman — pengunjung HP jadi "tersangkut" begitu
     jempolnya mendarat di area foto. */
  touch-action: pan-y;
}
/* Transisi HANYA dipasang setelah JavaScript siap. Kalau dipasang sejak
   awal, slide pertama ikut teranimasi saat posisi awal dihitung dan
   halamannya terlihat berkedip ketika dimuat. */
.hero-slider.siap .hero-track {
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.hero-slider.geser .hero-track { transition: none; }

.hero-slide {
  position: relative;
  /* flex-shrink 0 wajib — tanpa itu keenam slide diperas muat sebaris. */
  flex: 0 0 100%;
  margin: 0;
  min-width: 0;
}

/* Tanpa JavaScript slidernya jadi galeri gulir mendatar biasa: tetap bisa
   dipakai, tombolnya disembunyikan supaya tidak ada kendali yang mati. */
.hero-slider:not(.siap) .hero-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.hero-slider:not(.siap) .hero-slide { scroll-snap-align: center; }
.hero-slider:not(.siap) .hero-kendali { display: none; }

.hero-kendali {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.hero-panah {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--line-input);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.hero-panah:hover { background: var(--surface-3); border-color: var(--text-2); }
.hero-panah svg { width: 20px; height: 20px; }

.hero-titik { display: flex; align-items: center; gap: 2px; }
/* Tombol setinggi 44px, tapi titiknya sendiri kecil. Area sentuhnya yang
   dibesarkan lewat padding, bukan titiknya — kalau titiknya ikut membesar,
   deretan ini berubah jadi barisan tombol dan merebut perhatian dari mobil. */
.hero-titik button {
  width: 26px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-titik button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line-input);
  transition: background-color .18s ease, width .18s ease;
}
.hero-titik button[aria-selected="true"]::before {
  width: 22px;
  background: var(--sand);
}

.harga-tempel {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(18, 32, 47, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  /* Padding dipindah ke <a> di dalamnya supaya seluruh kotak badge — bukan
     cuma tulisannya — jadi area yang bisa ditekan menuju halaman model. */
  padding: 0;
  transition: border-color .18s ease, background-color .18s ease;
}
.harga-tempel a {
  display: block;
  padding: 11px 17px;
  text-decoration: none;
}
.harga-tempel:hover { border-color: var(--sand); background: rgba(24, 40, 58, .95); }
.harga-tempel b {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blueprint);
}
.harga-tempel span {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(17px, 2.2vw, 25px);
  font-weight: 700;
  letter-spacing: -.015em;
  margin-top: 3px;
}
.harga-tempel strong { color: var(--sand); font-weight: 700; }

/* Kalau fotonya gagal dimuat, kotak bertanda yang tampil — badge-nya
   ikut disembunyikan supaya tidak menumpuk labelnya. Dua pemilih karena
   badge hero berada di LUAR .media (adik .media di dalam .hero-slide),
   sedangkan di tempat lain masih di dalamnya. */
.media.ph .harga-tempel,
.hero-slide:has(.media.ph) .harga-tempel { display: none; }
.media.ph::after {
  content: attr(data-kosong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Placeholder foto — jelas ditandai, bukan menyamar jadi desain jadi */
.ph {
  display: grid;
  place-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  color: var(--text-3);
  text-align: center;
  padding: 24px;
  min-height: 200px;
}

/* ---------- 6) HEADER ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 20, 32, .90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  position: relative;   /* jangkar untuk panel menu di layar kecil */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
}

.head-aksi { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line-input);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 5px; width: 18px; }
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Kalau berkas logo belum ada, Chrome TIDAK menampilkan teks alt-nya —
   yang muncul ikon rusak. Jadi penggantinya ditangani onerror di HTML:
   <img> disembunyikan, .brand-text ditampilkan. */
/* inline-flex + min-height 44px, bukan inline-block. Logo adalah tautan ke
   beranda dan tingginya cuma 38px kalau mengikuti isinya — di bawah ambang
   44x44. Header sudah setinggi 66px dan isinya rata tengah, jadi ini tidak
   mengubah tampilan sama sekali. */
.brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
}
.brand img {
  display: block;
  height: clamp(17px, 2.6vw, 23px);
  width: auto;
  /* JANGAN tambahkan aspect-ratio di sini. Dengan height tetap dan
     width:auto, aspect-ratio MEMAKSA lebarnya dan logo jadi melar kalau
     angkanya meleset sedikit dari rasio berkas aslinya. */
}
.brand-lockup img { height: 42px; }
.brand-text:not([hidden]) { display: block; }

.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .26em;
  color: var(--text-3);
  margin-top: 5px;
}

.nav { display: flex; align-items: center; gap: clamp(13px, 1.6vw, 21px); }
/* min-height 44px sejak di desktop. Teksnya sendiri cuma setinggi 25px —
   lolos ambang WCAG 24x24, tapi di bawah 44x44 yang dipakai Apple HIG dan
   Material. Tablet 1024px memakai layar sentuh tapi masih kena tata letak
   desktop, jadi butir menu di situ tetap harus nyaman ditekan. Karena
   header sudah setinggi 66px dan .nav rata tengah, penambahan ini tidak
   mengubah tampilannya sama sekali. */
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav a:hover { color: var(--text); }

.nav-foot { flex-wrap: wrap; gap: 14px 22px; }

/* ---------- HERO ---------- */
.hero { padding: clamp(44px, 6.5vw, 84px) 0 clamp(40px, 6vw, 72px); }
.hero-grid {
  display: grid;
  /* Kolom foto diberi porsi lebih besar dari kolom teks — mobilnya yang
     menjual, bukan paragrafnya. */
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(36px, 6.4vw, 68px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.015em;
  margin-top: 18px;
}
/* Satu kata di judul diberi warna Sand, bukan amber. Amber disimpan
   untuk pita penawaran. */
.hero h1 em { font-style: normal; color: var(--sand); }
.hero-sub {
  color: var(--text-2);
  font-size: clamp(16px, 2vw, 19px);
  margin-top: 20px;
  max-width: 50ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero-note {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-3);
  font-size: 13.5px;
  margin-top: 20px;
}
.hero-note svg { width: 16px; height: 16px; flex: none; color: var(--sand); }
.hero .ph { min-height: 340px; }

/* ---------- STATISTIK ---------- */
.stats {
  border-block: 1px solid var(--line);
  /* Gradasi, bukan warna rata.
     Pemisah antar angka dulu memakai trik "celah 1px yang memperlihatkan
     latar induk". Trik itu MENUNTUT tiap sel berlatar padat — dan latar
     padat itulah yang menutupi gradasinya. Jadi celahnya diganti garis
     batas biasa, dan selnya dibuat tembus. */
  background:
    radial-gradient(64% 190% at 14% 50%, rgba(200, 155, 90, .08), transparent 70%),
    linear-gradient(180deg, #152637 0%, #0F1C2A 100%);
}
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: 0;
}
.stat {
  padding: 30px 22px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.stat span {
  display: block;
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 9px;
}

/* ---------- PLAT V ----------
   Blok pembeda utama situs ini. Angkanya nyata dan bisa dibuktikan dari
   price list resmi, jadi layak diberi ruang sebesar ini. */
.platv {
  border-block: 1px solid var(--line);
  /* Blok terpanjang yang berlatar padat di halaman ini. Diberi gradasi
     diagonal supaya tidak terbaca sebagai bidang datar, dengan pantulan
     sand di sudut kanan atas — sisi yang sama dengan tabel harganya. */
  background:
    radial-gradient(72% 86% at 90% 6%, rgba(200, 155, 90, .10), transparent 68%),
    linear-gradient(158deg, #152637 0%, #101D2B 60%, #0D1826 100%);
}
.platv-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* WAJIB. Anak grid punya min-width:auto secara bawaan, artinya kolomnya
   tidak boleh menyusut di bawah lebar min-content isinya. Tabel Plat V
   diberi min-width 520px di layar sempit, dan angka itu MERAMBAT naik ke
   kolom grid — di layar 375px kolomnya jadi 520px dan seluruh halaman
   bisa digeser mendatar. overflow-x:auto pada .platv-scroll saja tidak
   cukup menahannya. min-width:0 memutus rambatan itu; wadah gulirnya yang
   menampung kelebihan lebar, bukan halamannya. */
.hero-grid > *,
.model > *,
.platv-grid > *,
.lokasi-grid > *,
.contact-grid > *,
.calc-grid > *,
.amber-grid > *,
.model-atas > * { min-width: 0; }

.tabel-platv {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tabel-platv caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blueprint);
  text-align: left;
  padding-bottom: 10px;
}
.tabel-platv th,
.tabel-platv td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.tabel-platv thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom-color: var(--line-strong);
}
/* Kolom pertama (nama varian) rata kiri; sisanya rata kanan supaya
   digit satuan sejajar dan selisihnya langsung terbaca. */
.tabel-platv th:first-child,
.tabel-platv td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  padding-left: 0;
}
.tabel-platv td { color: var(--text-2); }
.tabel-platv .kolom-platv {
  color: var(--text);
  font-weight: 600;
  background: rgba(200, 155, 90, .07);
}
.tabel-platv .hemat {
  color: var(--sand);
  font-weight: 600;
  white-space: nowrap;
  padding-right: 0;
}
.tabel-platv tbody tr:last-child th,
.tabel-platv tbody tr:last-child td { border-bottom: 0; }

.platv-catatan {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.65;
  margin-top: 16px;
  max-width: 62ch;
}

/* ---------- BLOK MODEL ---------- */
.model {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--line);
}
.model:last-of-type { border-bottom: 0; }
/* nth-of-type, BUKAN nth-child: .sec-head ikut terhitung sebagai anak
   .wrap, jadi nth-child menggeser hitungannya satu langkah dan blok
   pertama jadi bergambar-kiri — bertabrakan dengan hero yang teksnya kiri. */
.model:nth-of-type(even) .model-media { order: -1; }

.model .ph { min-height: 300px; }

.model-name {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.model-desc {
  color: var(--text-2);
  margin-top: 16px;
  font-size: 16.5px;
  max-width: 48ch;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 24px;
}
.price b {
  font-family: var(--font-head);
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 700;
  color: var(--sand);
  letter-spacing: -.025em;
}
.price span {
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Harga sebelum potongan. Dicoret DAN diberi label, bukan dicoret saja —
   coretan sendirian sering terbaca sebagai kesalahan cetak. */
.price del {
  color: var(--text-3);
  font-size: 15px;
  text-decoration-thickness: 1px;
}

/* Tabel varian. Tank 300 dan 500 punya enam harga masing-masing; harga
   tunggal saja menyesatkan. */
.variants {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.variant {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.variant span { color: var(--text-2); }
.variant b {
  font-family: var(--font-head);
  font-weight: 600;
  white-space: nowrap;
}
/* Baris varian Plat V ditandai halus supaya keunggulan Batam terlihat
   tanpa perlu membaca keterangan. */
.variant.v-platv span::after {
  content: "PLAT V";
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--sand);
  border: 1px solid var(--sand-dim);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 8px;
  white-space: nowrap;
}
/* Sub-judul di dalam daftar varian (mis. "Diesel") */
.variant-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blueprint);
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--line);
}

.badge-new {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  border-radius: 999px;
  padding: 4px 11px;
  margin-left: 8px;
  vertical-align: middle;
}
.badge-hev { background: var(--sand); color: var(--bg); }
.badge-bev { background: var(--blueprint); color: var(--bg); }

.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.specs li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 13px;
}
.model-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Tautan detail sengaja TIDAK dibuat tombol. Kalau "Detail" dan "Tanya
   stok" sama-sama tombol, pelanggan tidak tahu mana yang utama — padahal
   yang menghasilkan penjualan cuma satu: WhatsApp. */
.tautan-detail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: color .18s ease;
}
.tautan-detail::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
.tautan-detail:hover { color: var(--text); }

/* ---------- KEUNGGULAN ---------- */
.poin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.poin {
  background: var(--surface);
  padding: 30px 26px;
}
.poin svg { width: 26px; height: 26px; color: var(--sand); }
.poin h3 {
  font-size: 19px;
  font-weight: 600;
  margin-top: 16px;
}
.poin p {
  color: var(--text-2);
  font-size: 15px;
  margin-top: 9px;
}

.catatan-lengkapi {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 20px;
  max-width: 70ch;
}

/* ---------- GARANSI ----------
   Lima angka resmi dari price list. Ditata seperti panel data di feed:
   angka raksasa condensed + label mono, dipisah garis blueprint. */
.garansi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.garansi {
  position: relative;
  background: var(--bg);
  padding: 28px 22px 26px;
}
.garansi b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.035em;
}
.garansi b i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  margin-left: 6px;
  color: var(--text-2);
}
.garansi .rule { margin: 14px 0 10px; }
.garansi span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.garansi em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--text-3);
  margin-top: 3px;
}

/* ---------- LOKASI ---------- */
.lokasi-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.alamat {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-2);
}
.alamat b {
  display: block;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.peta {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.peta iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Peta Google berlatar terang menyala di halaman navy. Diredam sedikit
     supaya menyatu, tapi tidak sampai sulit dibaca. */
  filter: grayscale(.4) brightness(.86) contrast(1.06);
}

/* ---------- HALAMAN MODEL ---------- */
.remah {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-3);
  margin-bottom: 28px;
}
/* Teks remah roti kecil (11,5px mono) — tanpa tinggi minimum tautannya
   cuma 20px dan gagal ambang WCAG 24x24. Disamakan 44px dengan seluruh
   tautan lain di situs ini supaya tidak ada satu pun target sentuh yang
   menyimpang. */
.remah a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  text-decoration: none;
}
.remah a:hover { color: var(--text); }

.model-atas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.tulisan { max-width: 68ch; }
.tulisan p {
  color: var(--text-2);
  font-size: 16.5px;
  margin-top: 18px;
}
.tulisan p:first-child { margin-top: 0; }

.model-lain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.model-lain {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.model-lain:hover { border-color: var(--line-strong); background: var(--surface-2); }
.model-lain img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  margin-bottom: 12px;
}
.model-lain b {
  display: block;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}
.model-lain span {
  display: block;
  font-family: var(--font-mono);
  color: var(--sand);
  font-size: 12.5px;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* ---------- KONTAK ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.contact-list { list-style: none; margin: 26px 0 0; padding: 0; }
.contact-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list svg { width: 20px; height: 20px; flex: none; color: var(--sand); margin-top: 3px; }
.contact-list b {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blueprint);
  margin-bottom: 3px;
}
.contact-list span,
.contact-list a { color: var(--text-2); font-size: 15px; }
/* min-height 44px, bukan sekadar padding. Dengan padding 6px tingginya
   berhenti di 39px — lolos ambang WCAG 24x24 tapi masih di bawah 44x44
   yang dipakai Apple HIG dan Material. Nomor telepon dan tautan Instagram
   justru yang paling sering ditekan dengan jempol. */
.contact-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}
.contact-list a:hover { color: var(--text); }

/* ---------- FOOTER ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(80% 130% at 12% 0%, rgba(92, 135, 166, .12), transparent 68%),
    linear-gradient(180deg, #142333 0%, #0D1825 100%);
  padding: 44px 0 40px;
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
}
.site-foot p { color: var(--text-3); font-size: 14px; max-width: 44ch; margin-top: 12px; }
.foot-legal {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 24px;
  color: var(--text-3);
  font-size: 13px;
}

/* ---------- TOMBOL WA MENGAMBANG ---------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55);
}

/* ============================================================
   7) PITA TERANG (Paper) — hanya simulasi kredit + FAQ
   Dua seksi paling padat angka dan teks dikumpulkan jadi satu pita,
   supaya peralihannya cuma dua kali dan terasa disengaja. Ini juga
   yang membentuk ritme gelap–terang seperti papan catur di feed.
   ============================================================ */
.band-light {
  color-scheme: light;
  background-color: var(--lt-bg);
  background-image: var(--fade-gelap);
  color: var(--lt-text);
}
.band-light .sec-head p { color: var(--lt-text-2); }
.band-light .stamp { color: #5A6B78; }
.band-light .eyebrow {
  color: var(--lt-accent);
  border-color: #C4A87D;
  background: rgba(200, 155, 90, .16);
}
.band-light .card {
  background: var(--lt-surface);
  border-color: var(--lt-line);
}
.band-light .btn-primary { background: var(--lt-text); color: var(--lt-bg); }
.band-light .btn-primary:hover { background: #1E3247; }
.band-light .btn-ghost { color: var(--lt-text); border-color: var(--lt-line-input); }
.band-light .btn-ghost:hover { background: var(--lt-surface-2); border-color: var(--lt-text); }
/* Grid blueprint di atas Paper harus jauh lebih tipis — di latar terang
   garis 13% terbaca sebagai kotak-kotak buku tulis, bukan cetak biru. */
.band-light.blueprint::after,
.band-light .blueprint::after {
  background-image:
    linear-gradient(rgba(11, 20, 32, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 20, 32, .05) 1px, transparent 1px);
}

/* Kalkulator */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.field .hint {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--lt-text-2);
  font-size: 12.5px;
  margin-top: 3px;
}

.field select, .field input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  font: inherit;
  font-size: 16px;   /* 16px, bukan 15px: di bawah itu iOS auto-zoom saat difokus */
  color: var(--lt-text);
  background: var(--lt-surface);
  border: 1px solid var(--lt-line-input);
  border-radius: var(--r-sm);
}
/* Tinggi 44px bukan untuk memperbesar batangnya, tapi memperbesar area
   yang bisa disentuh. Bawaan browser cuma ~16px — nyaris mustahil digeser
   dengan jempol di layar HP. */
.field input[type="range"] {
  width: 100%;
  height: 44px;
  accent-color: #0B1420;
  cursor: pointer;
}

.calc-out {
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--r);
  padding: 26px;
}
.calc-out .lead {
  font-family: var(--font-mono);
  color: var(--lt-text-2);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.calc-out .amount {
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 8px 0 2px;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--lt-line);
  font-size: 14.5px;
}
.calc-row span { color: var(--lt-text-2); }
.calc-row b { font-weight: 600; }
.calc-note {
  color: var(--lt-text-2);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 18px;
}

/* FAQ */
.faq { max-width: 800px; }
.faq details {
  border-bottom: 1px solid var(--lt-line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: 17.5px;
  font-weight: 600;
  padding: 18px 40px 18px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 26px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--lt-text-2);
  border-bottom: 2px solid var(--lt-text-2);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { color: var(--lt-text-2); padding-bottom: 20px; max-width: 68ch; }

/* ============================================================
   8) PITA AMBER — SATU-SATUNYA di seluruh halaman
   Aturan 3 dari design plan feed: amber hanya boleh dominan sekali.
   Kalau nanti ada blok baru yang ingin "menonjol", pakai Barelang Sand,
   JANGAN amber — begitu amber muncul dua kali, blok ini kehilangan
   seluruh dayanya.
   ============================================================ */
.band-amber {
  background: var(--amber);
  color: var(--amber-ink);
  position: relative;
  isolation: isolate;
}
/* Grid tetap ada supaya sistemnya terbaca, tapi dalam navy 8% — persis
   seperti post penutup di feed. */
.band-amber::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 20, 32, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 20, 32, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
  z-index: -1;
}
.band-amber h2 {
  font-family: var(--font-head);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.02em;
}
.band-amber .stamp { color: rgba(11, 20, 32, .72); }
.band-amber p { color: rgba(11, 20, 32, .82); }
.band-amber .rule { background: var(--amber-ink); }
.band-amber .btn-primary { background: var(--amber-ink); color: var(--amber); }
.band-amber .btn-primary:hover { background: #1E3247; }
.band-amber .btn-ghost { color: var(--amber-ink); border-color: rgba(11, 20, 32, .45); }
.band-amber .btn-ghost:hover { background: rgba(11, 20, 32, .08); border-color: var(--amber-ink); }

.amber-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.amber-list { list-style: none; margin: 0; padding: 0; }
.amber-list li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(11, 20, 32, .22);
  font-size: 15.5px;
}
.amber-list li:last-child { border-bottom: 0; }
.amber-list svg { width: 19px; height: 19px; flex: none; margin-top: 4px; }
.amber-list b { font-weight: 600; }

/* ---------- ARTIKEL ---------- */
.artikel-kepala { max-width: 62ch; }
.artikel-kepala h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin-top: 14px;
}
.artikel-ringkas {
  color: var(--text-2);
  font-size: 17.5px;
  margin-top: 16px;
}
.artikel-kepala .stamp { margin-top: 18px; }

/* 68ch, BUKAN selebar .wrap. Teks panjang selebar 1140px memaksa mata
   melompat balik terlalu jauh tiap ganti baris; 60-75 karakter adalah
   rentang yang nyaman dibaca. Tabel dan grid di dalamnya sengaja
   dilepas dari batas ini lewat aturan di bawah. */
.artikel-isi {
  max-width: 68ch;
  margin-top: 40px;
}
.artikel-isi > p {
  color: var(--text-2);
  font-size: 16.5px;
  margin-top: 16px;
}
.artikel-h2 {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-top: 44px;
}
.artikel-h2 + .rule { margin-top: 14px; }

/* Tabel perbandingan butuh ruang lebih dari kolom teks. */
.artikel-isi .platv-scroll,
.artikel-isi .artikel-poin {
  max-width: none;
  width: min(100%, 900px);
  margin-top: 26px;
}

/* Catatan kejujuran: dipakai untuk menandai batas isi artikel — fakta yang
   sengaja TIDAK ditulis karena belum terverifikasi. Dibedakan supaya tidak
   terbaca sebagai bagian dari uraian. */
.artikel-catatan {
  margin-top: 26px;
  padding: 16px 18px;
  border-left: 2px solid var(--sand-dim);
  background: var(--sand-tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-2);
  font-size: 15px;
}

.artikel-cta {
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.artikel-cta > p {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 600;
}
.artikel-cta .model-cta { margin-top: 18px; }

/* --- indeks artikel --- */
.artikel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 36px;
}
.artikel-kartu {
  display: block;
  background: var(--surface);
  padding: 30px 26px;
  text-decoration: none;
  transition: background .18s ease;
}
.artikel-kartu:hover { background: var(--surface-2); }
.artikel-kartu h2 {
  font-size: 21px;
  font-weight: 600;
  text-transform: none;
  margin-top: 14px;
}
.artikel-kartu p {
  color: var(--text-2);
  font-size: 15px;
  margin-top: 10px;
}
.artikel-kartu .tautan-detail { margin-top: 18px; display: inline-block; }

/* ---------- 9) RESPONSIVE ---------- */
@media (max-width: 900px) {
  .hero-grid,
  .model,
  .model-atas,
  .contact-grid,
  .lokasi-grid,
  .platv-grid,
  .amber-grid,
  .calc-grid { grid-template-columns: 1fr; }

  /* Di satu kolom, foto SELALU di atas teks — termasuk model bernomor
     genap yang di desktop fotonya di kiri. Keduanya harus disebut
     eksplisit: menulis `order: 0` pada aturan genap tidak membatalkan apa
     pun, dan karena teks lebih dulu di DOM, fotonya justru terlempar ke
     bawah tombol. */
  .model:nth-of-type(even) .model-media,
  .model-media { order: -1; }

  .stats .wrap { grid-template-columns: repeat(2, 1fr); }
  /* Dua kolom: yang di kiri tiap baris tidak boleh bergaris kiri, dan
     baris kedua butuh garis atas sebagai gantinya. */
  .stat:nth-child(2n+1) { border-left: 0; }
  .stat:nth-child(n+3)  { border-top: 1px solid var(--line); }

  /* Tinggi 44px sudah diatur di aturan dasar .nav a. */

  /* Menu jadi panel dropdown di balik tombol hamburger. Bukan strip yang
     digeser mendatar: butir di luar layar tidak terlihat sama sekali dan
     tidak ada tanda apa pun bahwa strip itu bisa digeser. */
  .nav-toggle { display: inline-flex; }

  /* Tombol WhatsApp menyusut jadi ikon saja, memberi ruang untuk hamburger. */
  .head-wa span { display: none; }
  .head-wa { width: 44px; min-height: 44px; padding: 0; }

  .site-head .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0 20px;
    background: rgba(11, 20, 32, .98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .8);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .28s ease, visibility .28s;
  }
  /* Batas tinggi mengikuti layar, bukan angka mati — di HP posisi
     mendatar (tinggi ~375px) angka tetap akan membuat butir terbawah
     terpotong dan tidak bisa dijangkau karena overflow disembunyikan. */
  .site-head .nav.terbuka {
    max-height: min(78vh, 520px);
    visibility: visible;
    overflow-y: auto;
    padding: 10px 20px 18px;
  }
  .site-head .nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15.5px;
  }
  .site-head .nav a:hover { background: var(--surface-2); }
}

@media (max-width: 720px) {
  /* Tabel Plat V punya lima kolom. Di bawah lebar ini kolomnya terhimpit
     dan angka membungkus di tengah-tengah. Dibiarkan menggulir mendatar
     DI DALAM wadahnya sendiri — halaman tetap tidak ikut bergeser. */
  .platv-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabel-platv { min-width: 520px; }
}

@media (max-width: 600px) {
  /* Sedikit lebih jangkung dari rasio berkasnya — selisihnya jadi ruang
     tambahan di atas mobil, karena badge harga di layar sempit relatif
     lebih tinggi dibanding kotaknya. */
  .hero-media { aspect-ratio: 1.25; }

  /* Harga ditumpuk, bukan disandingkan. Di lebar 335px, "Rp 1.125.000.000"
     berdampingan dengan keterangan varian membuat keduanya terhimpit dan
     membungkus tidak beraturan. */
  .price {
    display: block;
    margin-top: 18px;
  }
  .price span, .price del {
    display: block;
    margin-top: 3px;
  }

  .model { padding: 30px 0 36px; }
  .model-desc { margin-top: 14px; font-size: 15.5px; }
  .specs { margin-top: 18px; }
  .model-cta {
    margin-top: 20px;
    gap: 4px;
    flex-direction: column;
    align-items: stretch;
  }
  .model-cta .btn-wa { width: 100%; }
  .tautan-detail { justify-content: center; }

  .variants { margin-top: 14px; }
  .variant { font-size: 14.5px; padding: 10px 0; }
  /* Di layar sempit, nama varian + pil "PLAT V" + harga tidak muat
     sebaris. Ditumpuk supaya harganya tetap utuh. */
  .variant {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
  }
}

@media (max-width: 480px) {
  .hero-cta .btn, .model-cta .btn, .band-amber .btn { width: 100%; }
  .stat { padding: 22px 14px; }
  .garansi { padding: 22px 18px; }
  /* Bracket sudut ikut mengecil — pada kotak selebar 335px, bracket 14px
     terlihat seperti cacat cetak, bukan bingkai. */
  .cb::before, .cb::after, .cb i::before, .cb i::after {
    width: 10px;
    height: 10px;
  }
}