/* Verda Trans — portal pelanggan.
   Warna dan huruf mengikuti aplikasi internal (public/css/app.css), supaya
   invoice, pesan WhatsApp, dan halaman ini terlihat datang dari usaha yang sama. */

:root{
  /* Palet "Biru Laut" (Okt 2026): biru laut untuk merek dan tautan, koral
     untuk tombol tindakan, putih kebiruan untuk badan halaman. Cadangan
     palet lama: tag git portal-sebelum-biru-laut. */
  --ground:oklch(0.9743 0.0068 247.89); --surface:oklch(1.0000 0.0000 89.88); --surface-2:oklch(0.9837 0.0051 247.88); --raise:oklch(0.9519 0.0120 247.95);
  --ink:oklch(0.2677 0.0557 251.48); --ink-2:oklch(0.4578 0.0602 250.07); --ink-3:oklch(0.5285 0.0529 255.50);
  --rule:oklch(0.9203 0.0174 248.02); --rule-2:oklch(0.8573 0.0276 249.88); --tepi:oklch(0.6369 0.0423 254.39);
  --brand:oklch(0.4742 0.1408 253.13); --brand-hover:oklch(0.3916 0.1122 252.31); --brand-tekan:oklch(0.3457 0.0978 252.06); --brand-ink:oklch(0.3916 0.1122 252.31); --brand-wash:oklch(0.9528 0.0179 245.39); --on-brand:oklch(1.0000 0.0000 89.88);
  /* Tombol utama: gradasi koral (bata) dengan bayangan berona koral. Warna
     ini hanya untuk satu tindakan utama per layar; navigasi memakai biru. */
  /* Tombol tindakan koral. Setiap titik gradasi diukur untuk tulisan putih
     (WCAG AA 4,5:1): ujung terang #C03E27 5,30:1, tengah #C23D25 5,27:1,
     ujung gelap #AE3320 6,37:1. Ujung terang sebelumnya #D14A2F hanya 4,44:1. */
  --brand-grad:linear-gradient(135deg, oklch(0.5484 0.1702 32.38) 0%, oklch(0.5504 0.1736 32.52) 55%, oklch(0.5046 0.1626 31.63) 100%);
  --brand-grad-hover:linear-gradient(135deg, oklch(0.5504 0.1736 32.52) 0%, oklch(0.5046 0.1626 31.63) 55%, oklch(0.4515 0.1466 31.74) 100%);
  --brand-grad-tekan:linear-gradient(135deg, oklch(0.5046 0.1626 31.63) 0%, oklch(0.4515 0.1466 31.74) 55%, oklch(0.3980 0.1290 31.93) 100%);
  --brand-glow:0 10px 25px -8px rgba(204, 65, 40, .45);
  --bintang:#C23D25;
  --ok:oklch(0.5179 0.0969 172.14); --ok-wash:oklch(0.9502 0.0191 176.43);
  --warn:oklch(0.5423 0.1368 47.12); --warn-wash:oklch(0.9473 0.0245 57.67);
  /* Merah digeser dari 1° ke 7° — bata, bukan merah kebiruan. Seluruh
     halaman ini hangat (krem 47°, emas 41°, tombol 32-22°); merah yang
     terlalu dingin terbaca seperti warna pinjaman dari sistem lain.
     Kontrasnya tetap aman: 6,1:1 di atas putih. */
  --crit:oklch(0.5148 0.1534 31.16); --crit-wash:oklch(0.9489 0.0203 40.53); --on-crit:oklch(1.0000 0.0000 89.88);
  --info:oklch(0.4742 0.1408 253.13); --info-wash:oklch(0.9528 0.0179 245.39);
  --serif:Fraunces, Georgia, "Times New Roman", serif;
  --sans:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
/* Tema gelap dipasang dari dua arah.

   Yang pertama pilihan eksplisit lewat data-theme, yang sudah ada sejak
   palet ini ditulis. Yang kedua setelan perangkat: siapa pun yang
   menyalakan mode gelap di ponselnya mendapatkannya di sini tanpa
   menekan apa pun — dan itu yang selama ini hilang, sebab palet lengkap
   di bawah tidak pernah sekali pun tergambar.

   Penjaganya :not([data-theme="light"]): pilihan terang yang ditulis
   eksplisit harus menang atas perangkat yang sedang gelap, sebagaimana
   data-theme="dark" menang atas perangkat yang sedang terang.

   Kedua blok mendeklarasikan nilai yang sama persis, dan uji portal
   membandingkan keduanya baris demi baris supaya tidak bisa berbeda
   diam-diam. */
:root[data-theme="dark"]{
  --ground:oklch(0.1896 0.0323 256.94); --surface:oklch(0.2281 0.0380 255.56); --surface-2:oklch(0.2548 0.0489 257.49); --raise:oklch(0.2940 0.0523 255.74);
  --ink:oklch(0.9514 0.0138 247.97); --ink-2:oklch(0.8227 0.0326 251.17); --ink-3:oklch(0.7164 0.0460 251.63);
  --rule:oklch(0.3058 0.0497 255.94); --rule-2:oklch(0.3709 0.0574 255.67); --tepi:oklch(0.6150 0.0509 252.54);
  --brand:oklch(0.7394 0.1148 249.26); --brand-hover:oklch(0.8245 0.0795 247.13); --brand-tekan:oklch(0.8935 0.0490 245.55); --brand-ink:oklch(0.8770 0.0562 246.01); --brand-wash:oklch(0.2854 0.0599 253.69); --on-brand:oklch(0.1705 0.0287 41.10);
  /* Di tema gelap tulisan tombol berwarna gelap, jadi gradasinya dijaga tetap
     di sisi terang koral — ujung yang gelap akan menenggelamkan tulisannya. */
  --brand-grad:linear-gradient(135deg, oklch(0.7935 0.1221 37.58) 0%, oklch(0.7388 0.1442 34.94) 50%, oklch(0.6943 0.1593 35.65) 100%);
  --brand-grad-hover:linear-gradient(135deg, oklch(0.8349 0.0942 38.49) 0%, oklch(0.7935 0.1221 37.58) 50%, oklch(0.7388 0.1442 34.94) 100%);
  --brand-grad-tekan:linear-gradient(135deg, oklch(0.7388 0.1442 34.94) 0%, oklch(0.6943 0.1593 35.65) 50%, oklch(0.6459 0.1665 35.94) 100%);
  --brand-glow:0 10px 25px -8px rgba(247, 134, 106, .45);
  --bintang:#F7866A;
  --ok:oklch(0.7564 0.1235 170.06); --ok-wash:oklch(0.2617 0.0351 176.87);
  --warn:oklch(0.7124 0.1340 53.95); --warn-wash:oklch(0.2491 0.0340 55.69);
  --crit:oklch(0.7420 0.1260 32.23); --crit-wash:oklch(0.2395 0.0386 33.10); --on-crit:oklch(0.1736 0.0104 88.81);
  --info:oklch(0.7394 0.1148 249.26); --info-wash:oklch(0.2854 0.0599 253.69);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --ground:oklch(0.1896 0.0323 256.94); --surface:oklch(0.2281 0.0380 255.56); --surface-2:oklch(0.2548 0.0489 257.49); --raise:oklch(0.2940 0.0523 255.74);
  --ink:oklch(0.9514 0.0138 247.97); --ink-2:oklch(0.8227 0.0326 251.17); --ink-3:oklch(0.7164 0.0460 251.63);
  --rule:oklch(0.3058 0.0497 255.94); --rule-2:oklch(0.3709 0.0574 255.67); --tepi:oklch(0.6150 0.0509 252.54);
  --brand:oklch(0.7394 0.1148 249.26); --brand-hover:oklch(0.8245 0.0795 247.13); --brand-tekan:oklch(0.8935 0.0490 245.55); --brand-ink:oklch(0.8770 0.0562 246.01); --brand-wash:oklch(0.2854 0.0599 253.69); --on-brand:oklch(0.1705 0.0287 41.10);
  /* Di tema gelap tulisan tombol berwarna gelap, jadi gradasinya dijaga tetap
     di sisi terang koral — ujung yang gelap akan menenggelamkan tulisannya. */
  --brand-grad:linear-gradient(135deg, oklch(0.7935 0.1221 37.58) 0%, oklch(0.7388 0.1442 34.94) 50%, oklch(0.6943 0.1593 35.65) 100%);
  --brand-grad-hover:linear-gradient(135deg, oklch(0.8349 0.0942 38.49) 0%, oklch(0.7935 0.1221 37.58) 50%, oklch(0.7388 0.1442 34.94) 100%);
  --brand-grad-tekan:linear-gradient(135deg, oklch(0.7388 0.1442 34.94) 0%, oklch(0.6943 0.1593 35.65) 50%, oklch(0.6459 0.1665 35.94) 100%);
  --brand-glow:0 10px 25px -8px rgba(247, 134, 106, .45);
  --bintang:#F7866A;
  --ok:oklch(0.7564 0.1235 170.06); --ok-wash:oklch(0.2617 0.0351 176.87);
  --warn:oklch(0.7124 0.1340 53.95); --warn-wash:oklch(0.2491 0.0340 55.69);
  --crit:oklch(0.7420 0.1260 32.23); --crit-wash:oklch(0.2395 0.0386 33.10); --on-crit:oklch(0.1736 0.0104 88.81);
  --info:oklch(0.7394 0.1148 249.26); --info-wash:oklch(0.2854 0.0599 253.69);
  color-scheme:dark;
}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.lompat{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:5}
.lompat:focus{left:8px}
[hidden]{display:none !important}

/* ---------- kerangka ---------- */
.kepala{position:sticky;top:0;z-index:3;background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.kepala-dalam{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px}
.merek:hover{color:var(--ink)}
.merek b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.1}
.merek small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tautan-lacak{font-weight:600;font-size:14px;min-height:44px;display:flex;align-items:center;color:var(--ink)}
/* Tombol "Ubah" pada ringkasan yang sudah diisi. Bergaris, bukan berisi:
   tombol utama halaman memakai koral padat, dan dua tombol padat di satu
   layar membuat keduanya berebut. Sasaran sentuhnya tetap 44px. */
.ubah-pil{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:44px;padding:0 16px;
  border:1.5px solid var(--brand);border-radius:99px;background:var(--surface);color:var(--brand-ink);
  font-size:14px;font-weight:700;letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(11,92,168,.10);transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.ubah-pil svg{width:16px;height:16px;flex:none}
.ubah-pil:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand);
  transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(11,92,168,.35)}
.ubah-pil:active{transform:translateY(0);background:var(--brand-tekan);border-color:var(--brand-tekan);color:var(--on-brand)}
.ubah-pil:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ubah-pil{transition:none}.ubah-pil:hover{transform:none}}
.kepala-aksi{display:flex;align-items:center;gap:10px}
/* Lacak permintaan sebagai ikon: kaca pembesar berisi lembar pesanan.
   Namanya tetap ada untuk pembaca layar dan sebagai tooltip, dan kaki
   halaman menyediakan tautan bertulisan untuk yang mencari dengan kata. */
.ikon-lacak{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--ink);border:1px solid var(--rule-2);background:var(--surface);text-decoration:none}
.ikon-lacak svg{width:22px;height:22px}
.ikon-lacak:hover{color:var(--brand-ink);border-color:var(--tepi);background:var(--brand-wash)}
/* Di layar lebar, "Lacak pesanan" ditampilkan sebagai pil bertulisan supaya
   fiturnya terbaca. Di ponsel tetap ikon saja untuk menghemat tempat. */
.lacak-teks{display:none}
@media (min-width:720px){
  #tautanLacak{width:auto;padding:0 16px;gap:8px;border-radius:99px;font-size:14px;font-weight:700;text-decoration:none}
  #tautanLacak svg{width:18px;height:18px}
  .lacak-teks{display:inline-block;min-width:100px}  /* lebar terlebar dari Lacak pesanan / Track booking */
}
/* Tombol tema memakai bentuk tombol lacak. Ikonnya menunjuk tema yang akan
   dipasang — bulan di tema terang, matahari di tema gelap — dan dipilih CSS,
   bukan JS, supaya ikut setelan perangkat sejak gambar pertama. */
button.ikon-lacak{padding:0;font:inherit;cursor:pointer}
.ikon-tema .matahari{display:none}
:root[data-theme="dark"] .ikon-tema .bulan{display:none}
:root[data-theme="dark"] .ikon-tema .matahari{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ikon-tema .bulan{display:none}
  :root:not([data-theme="light"]) .ikon-tema .matahari{display:block}
}
.merek small{white-space:nowrap}
/* Di layar sempit kepala halaman memuat merek, pemilih bahasa, dan ikon
   lacak sekaligus; tagline yang paling sedikit gunanya yang mengalah. */
@media (max-width:430px){
  .kepala-dalam{padding:10px 16px;gap:10px}
  .merek small{display:none}
  .merek b{font-size:18px;white-space:nowrap}
  /* Tombol tema menambah 54px pada kepala; jarak antartombol dan lebar
     tombol ID/EN yang mengalah, supaya "Verda Trans" tetap satu baris di
     layar 375px. Sasaran sentuhnya tetap 44px tinggi. */
  .merek{gap:8px}
  .kepala-aksi{gap:6px}
  .kepala .bahasa button{min-width:40px;padding:0 8px}
}
/* Di bawah 375px empat unsur itu tidak muat satu baris; mereknya yang
   turun menjadi dua baris, bukan halaman yang melebar ke samping. */
@media (max-width:374px){ .merek b{white-space:normal} }
.bahasa{display:flex;border:1px solid var(--rule-2);border-radius:999px;overflow:hidden;background:var(--surface)}
/* 44px, seperti tombol lacak di sebelahnya. Sebelumnya 34px — satu-satunya
   sasaran sentuh di bawah ambang pada seluruh portal, dan justru yang paling
   sering ditekan tamu asing. Kepala halaman tidak ikut meninggi: merek di
   sebelah kiri sudah 44px, jadi tingginya tetap 65px dan bilah yang menempel
   di bawahnya tidak perlu digeser. */
.bahasa button{min-width:46px;min-height:44px;padding:0 10px;border:0;background:none;color:var(--ink-3);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;cursor:pointer}
.bahasa button.on{background:var(--ink);color:var(--surface)}
.bahasa button:not(.on):hover{color:var(--ink)}
/* Halaman kebijakan privasi: dirender server tanpa portal.js, jadi pilihan
   bahasanya tautan biasa ke /privasi dan /privacy. */
.bahasa a{display:flex;align-items:center;justify-content:center;min-width:46px;min-height:44px;padding:0 10px;color:var(--ink-3);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-decoration:none}
.bahasa a[aria-current]{background:var(--ink);color:var(--surface)}
.bahasa a:not([aria-current]):hover{color:var(--ink)}
main{flex:1;outline:none}
#app{max-width:1080px;margin:0 auto;padding:0 16px 40px}
.memuat{padding:48px 20px;text-align:center;color:var(--ink-3)}
/* Sedang diperbarui: yang lama tetap berdiri, hanya diredupkan dan
   dimatikan sentuhannya. Tingginya tidak berubah sedikit pun, sehingga
   tidak ada yang meruntuhkan halaman lalu melonjakkannya kembali.

   Redupnya sengaja ditunda seperempat detik. Menekan tombol layanan di
   jaringan yang sehat dijawab dalam puluhan milidetik, dan tanpa tundaan
   ini seluruh layar — katalog, saringan, keterangan tanggal — meredup lalu
   terang kembali dalam sekejap. Yang terbaca bukan "sedang memuat"
   melainkan kedipan, persis keluhan yang membawa perubahan ini. Dengan
   tundaannya, jawaban cepat tidak pernah sempat meredupkan apa pun, dan
   yang meredup hanya permintaan yang memang lambat. Melepas kelasnya tidak
   melewati transisi sama sekali — aturan dasarnya tidak punya transition —
   jadi isi yang baru langsung terang. */
#katalog.memuat-ulang,.saring.memuat-ulang,.bilah-ket.memuat-ulang{opacity:.5;transition:opacity .18s ease .25s}
#katalog.memuat-ulang,.saring.memuat-ulang{pointer-events:none}
/* Tanpa gerak, tundaannya tetap dipakai: yang dihindari kedipannya, bukan
   hanya animasinya. */
@media (prefers-reduced-motion:reduce){
  #katalog.memuat-ulang,.saring.memuat-ulang,.bilah-ket.memuat-ulang{transition:opacity 0s linear .25s}
}
/* Ringkasan beranda dari server (untuk mesin pencari dan tanpa JavaScript);
   diganti portal.js begitu halaman berjalan. */
.seo-awal{max-width:68ch;margin:0 auto;padding:32px 4px 0;color:var(--ink-2);line-height:1.6}
.seo-awal h1{font-size:26px;line-height:1.2;color:var(--ink);text-wrap:balance}
.seo-awal h2{font-size:18px;margin-top:22px;color:var(--ink)}
.seo-awal h3{font-size:15px;margin-top:12px;color:var(--ink)}
.seo-awal ul{padding-left:20px;display:grid;gap:4px}
.seo-awal p,.seo-awal ul{margin-top:8px}
/* ---------- Kebijakan privasi (/privasi, /privacy) ----------
   Dirender server tanpa portal.js (src/services/privasi.js). Satu kolom di
   HP; di layar lebar daftar isi menempel di kiri. */
.pv{max-width:1080px;margin:0 auto;padding:32px 20px 56px}
.pv-ikon{flex:none}
.pv-hero{max-width:760px;padding:16px 0 28px}
.pv-label{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:var(--brand-wash);border-radius:999px;padding:8px 13px}
.pv-hero h1{font-family:var(--serif);font-size:clamp(38px,7vw,58px);font-weight:600;line-height:1.04;letter-spacing:-.01em;color:var(--ink);margin-top:18px;text-wrap:balance}
.pv-lead{font-size:18px;line-height:1.6;color:var(--ink-2);margin-top:16px;max-width:60ch}
.pv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:18px;font-size:14px;color:var(--ink-3)}
.pv-meta a{color:var(--brand);font-weight:600;text-underline-offset:3px}
.pv-ringkas{background:var(--surface);border:1px solid var(--rule);border-radius:20px;padding:24px}
.pv-ringkas h2{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:18px}
.pv-ringkas ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.pv-ringkas li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:start}
.pv-ringkas-ikon{grid-row:span 2;width:42px;height:42px;border-radius:12px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center}
.pv-ringkas b{font-size:15px;color:var(--ink);line-height:1.35}
.pv-ringkas li>span:last-child{font-size:14px;line-height:1.5;color:var(--ink-2)}
.pv-tata{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:36px}
.pv-toc p{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.pv-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pv-toc a{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.35;color:var(--ink-2);text-decoration:none;padding:7px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--surface)}
.pv-toc a:hover{color:var(--ink);border-color:var(--brand)}
.pv-toc a span{font:600 12px var(--mono);color:var(--brand)}
.pv-isi{min-width:0;max-width:74ch}
.pv-bagian{padding:30px 0;border-top:1px solid var(--rule);scroll-margin-top:88px}
.pv-bagian:first-child{border-top:0;padding-top:4px}
.pv-bagian h2{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:24px;line-height:1.25;color:var(--ink);text-wrap:balance}
.pv-no{font:600 12px var(--mono);letter-spacing:.06em;color:var(--brand);min-width:20px}
.pv-bagian-ikon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand-wash);color:var(--brand);flex:none}
.pv-bagian p,.pv-bagian ul,.pv-bagian dl,.pv-bagian .pv-tabel-bungkus{margin-top:12px}
.pv-bagian p,.pv-bagian li,.pv-bagian dd{font-size:16px;line-height:1.65;color:var(--ink-2)}
.pv-bagian b{color:var(--ink)}
.pv-bagian .pv-catatan{font-size:14px;color:var(--ink-3);border-left:3px solid var(--rule-2);padding-left:12px}
.pv-kartu-data{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:0}
.pv-kartu-data div{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px 16px}
.pv-kartu-data dt{font-weight:700;font-size:15px;color:var(--ink)}
.pv-bagian .pv-kartu-data dd{margin:4px 0 0;font-size:14.5px;line-height:1.55}
.pv-centang,.pv-penerima,.pv-hak{list-style:none;padding:0}
.pv-centang{display:grid;gap:10px}
.pv-centang li{position:relative;padding-left:30px}
.pv-centang li::before{content:"";position:absolute;left:5px;top:.5em;width:12px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.pv-penerima{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--surface)}
.pv-penerima li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:13px 16px;border-top:1px solid var(--rule)}
.pv-penerima li:first-child{border-top:0}
.pv-penerima b{font-size:15px}
.pv-bagian .pv-penerima span{font-size:14.5px;line-height:1.55}
.pv-tabel-bungkus{overflow-x:auto;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.pv-tabel{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.pv-tabel th,.pv-tabel td{text-align:left;vertical-align:top;padding:13px 16px;border-top:1px solid var(--rule)}
.pv-tabel thead th{border-top:0;background:var(--surface-2);font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pv-tabel tbody th{width:42%;font-weight:700;color:var(--ink)}
.pv-tabel small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--ink-3)}
.pv-tabel td{color:var(--ink-2)}
.pv-hak{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.pv-bagian .pv-hak li{background:var(--brand-wash);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;line-height:1.45;color:var(--ink)}
.pv-kontak{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center;background:var(--surface);border:1px solid var(--rule-2);border-radius:20px;padding:24px;box-shadow:0 1px 0 var(--rule)}
.pv-kontak h2{font-family:var(--serif);font-size:22px;line-height:1.25;color:var(--ink)}
.pv-kontak p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.pv-tombol-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--brand-grad);color:var(--on-brand);font-weight:700;font-size:15px;text-decoration:none;box-shadow:var(--brand-glow);white-space:nowrap}
.pv-tombol-wa:hover{background:var(--brand-grad-hover);color:var(--on-brand)}
.pv-kontak .pv-nomor{margin:0;font:600 13px var(--mono);color:var(--ink-3)}
.pv-kembali{margin-top:28px}
.pv-kembali a{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;text-decoration:none}
.pv-kembali a:hover{text-decoration:underline;text-underline-offset:3px}
.pv-kaki{border-top:1px solid var(--rule);background:var(--surface-2);padding:20px;text-align:center;font-size:13px;color:var(--ink-3)}
@media (min-width:720px){
  .pv-kontak{grid-template-columns:minmax(0,1fr) auto;padding:28px 32px}
  .pv-kontak .pv-nomor{grid-column:2;text-align:center}
  .pv-penerima li{grid-template-columns:180px minmax(0,1fr);gap:16px}
}
@media (min-width:960px){
  .pv-tata{grid-template-columns:220px minmax(0,1fr);gap:56px}
  .pv-toc{position:sticky;top:96px;align-self:start}
  .pv-toc ol{flex-direction:column;flex-wrap:nowrap;gap:0;border-left:1px solid var(--rule)}
  .pv-toc a{border:0;border-left:2px solid transparent;border-radius:0;background:none;margin-left:-1px;padding:7px 14px}
  .pv-toc a:hover{border-left-color:var(--brand)}
}
/* ---------- Aturan sewa (/aturan-sewa, /rental-terms) ----------
   Dirender server (src/services/aturan.js), kepala & kontak memakai pv-*.
   Disusun untuk dipindai: kartu, tabel biaya, garis waktu refund, dan
   tanya-jawab <details>. Satu kolom di HP, dua/tiga kolom di layar lebar. */
.as{display:flex;flex-direction:column;gap:0}
.as-ringkas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.as-ringkas li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:16px}
.as-ringkas-ikon{grid-row:span 2;width:42px;height:42px;border-radius:12px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center}
.as-ringkas b{font-size:15.5px;line-height:1.3;color:var(--ink)}
.as-ringkas li>span:last-child{font-size:14px;line-height:1.45;color:var(--ink-2)}
.as-loncat{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.as-loncat span{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.as-loncat a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:7px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--surface)}
.as-loncat a:hover{color:var(--ink);border-color:var(--brand)}
.as-bagian{padding:44px 0 4px;scroll-margin-top:80px}
.as-kepala{margin-bottom:20px}
.as-kepala h2{font-family:var(--serif);font-size:clamp(26px,4vw,32px);line-height:1.15;color:var(--ink);text-wrap:balance}
.as-kepala p{margin-top:6px;font-size:16px;color:var(--ink-2)}
.as-subjudul{display:flex;align-items:center;gap:10px;margin:28px 0 14px;font-family:var(--serif);font-size:22px;color:var(--ink)}
.as-subjudul svg{color:var(--brand)}
.as-dua,.as-tiga{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.as-kartu{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:20px}
.as-kartu h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--ink);line-height:1.3}
.as-kartu h3 svg{color:var(--brand)}
.as-kartu p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.as-bayar{list-style:none;margin:0;padding:0}
.as-bayar .as-kartu{position:relative}
.as-bayar-no{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand-wash);color:var(--brand);font:700 14px var(--sans);margin-bottom:10px}
.as-centang,.as-strip,.as-silang{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.as-centang li,.as-strip li,.as-silang li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.as-centang li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:6px;border-left:2.2px solid var(--ok);border-bottom:2.2px solid var(--ok);transform:rotate(-45deg)}
.as-strip li::before{content:"";position:absolute;left:4px;top:.72em;width:12px;height:2px;border-radius:2px;background:var(--ink-3)}
.as-silang li::before,.as-silang li::after{content:"";position:absolute;left:4px;top:.7em;width:13px;height:2.2px;border-radius:2px;background:var(--crit);transform:rotate(45deg)}
.as-silang li::after{transform:rotate(-45deg)}
.as-catatan{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--brand-wash);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.as-catatan svg{color:var(--brand);margin-top:2px}
.as-catatan b,.as-catatan a{color:var(--ink)}
/* alur */
.as-alur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;counter-reset:none}
.as-alur li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding-bottom:20px}
.as-alur li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--rule-2)}
.as-alur-no{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);font:700 17px var(--sans)}
.as-alur b{font-size:16.5px;color:var(--ink);padding-top:10px}
.as-alur p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--ink-2)}
/* layanan */
.as-layanan{display:flex;flex-direction:column}
.as-layanan-atas{display:flex;gap:14px;align-items:center}
.as-layanan-ikon{width:52px;height:52px;border-radius:14px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center;flex:none}
.as-layanan h3{font-family:var(--serif);font-size:23px;font-weight:600}
.as-layanan-atas p{margin-top:2px;font-size:14px}
.as-jam{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:16px !important;padding:6px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--rule);font:600 13px var(--mono) !important;color:var(--ink) !important}
.as-sublabel{margin-top:16px !important;font:600 12px var(--mono) !important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3) !important}
.as-pita{margin-top:auto !important;padding-top:16px;font-size:14px !important;font-weight:700;color:var(--brand) !important}
/* biaya */
.as-biaya{border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--surface)}
.as-biaya-baris{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 18px;border-top:1px solid var(--rule)}
.as-biaya-baris:first-child{border-top:0}
.as-biaya-kepala{display:none}
.as-biaya-nama{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink)}
.as-biaya-nama svg{color:var(--brand);flex:none}
.as-biaya-kapan{font-size:14.5px;line-height:1.5;color:var(--ink-2);padding-left:30px}
.as-biaya-besar{font-size:15px;font-weight:700;color:var(--ink);padding-left:30px}
.as-lembur{margin-top:14px;background:var(--surface-2);border:1px solid var(--rule);border-radius:16px;padding:16px 18px}
.as-lembur ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 24px}
.as-lembur li{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--ink-2);border-bottom:1px dashed var(--rule-2);padding-bottom:6px}
.as-lembur li b{color:var(--ink);white-space:nowrap}
/* boleh / tidak */
.as-boleh{border-top:4px solid var(--ok)}
.as-tidak{border-top:4px solid var(--crit)}
/* refund */
.as-refund{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.as-refund li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;border-left:6px solid}
.as-refund b{font-size:18px;color:var(--ink)}
.as-refund span{font-size:14px;color:var(--ink-2)}
.as-refund .as-penuh{background:var(--ok-wash);border-color:var(--ok)}
.as-refund .as-sebagian{background:var(--warn-wash);border-color:var(--warn)}
.as-refund .as-nol{background:var(--crit-wash);border-color:var(--crit)}
.as-dl{margin:18px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--surface)}
.as-dl div{padding:14px 18px;border-top:1px solid var(--rule)}
.as-dl div:first-child{border-top:0}
.as-dl dt{font-weight:700;font-size:15.5px;color:var(--ink)}
.as-dl dd{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
/* tanya-jawab */
.as-faq{display:grid;gap:10px}
.as-faq details{background:var(--surface);border:1px solid var(--rule);border-radius:14px}
.as-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;font-size:16px;font-weight:600;color:var(--ink);min-height:48px}
.as-faq summary::-webkit-details-marker{display:none}
.as-faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand);font:600 18px/1 var(--sans)}
.as-faq details[open] summary::after{content:"\2212"}
.as-faq details[open]{border-color:var(--rule-2)}
.as-faq summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:14px}
.as-faq p{padding:0 18px 16px;font-size:15px;line-height:1.6;color:var(--ink-2)}
/* kontak */
.as .pv-kontak{margin-top:44px}
.as-kontak-tombol{display:flex;flex-wrap:wrap;gap:10px}
.as-tombol-kedua{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);font-weight:700;font-size:15px;text-decoration:none}
.as-tombol-kedua:hover{border-color:var(--brand);color:var(--brand)}
@media (min-width:720px){
  .as-dua{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-tiga{grid-template-columns:repeat(3,minmax(0,1fr))}
  .as-biaya-kepala{display:grid}
  .as-biaya-baris{grid-template-columns:minmax(180px,1fr) minmax(0,1.6fr) minmax(170px,1fr);gap:16px;align-items:center}
  .as-biaya-kepala span{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .as-biaya-kepala{background:var(--surface-2);padding-top:12px;padding-bottom:12px}
  .as-biaya-kapan,.as-biaya-besar{padding-left:0}
  .as-refund{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0}
  .as-refund li{border-left:0;border-top:6px solid;border-radius:0}
  .as-refund li:first-child{border-radius:14px 0 0 14px}
  .as-refund li:last-child{border-radius:0 14px 14px 0}
  .as-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-dl div:nth-child(2){border-top:0}
  .as-dl div:nth-child(even){border-left:1px solid var(--rule)}
}
@media (min-width:960px){
  .as-alur{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .as-alur li{grid-template-columns:minmax(0,1fr);padding-bottom:0}
  .as-alur li:not(:last-child)::after{left:44px;right:-14px;top:21px;bottom:auto;width:auto;height:2px}
  .as-alur-no{grid-row:auto;margin-bottom:12px}
  .as-alur b{padding-top:0}
}
.kaki{border-top:1px solid var(--rule);background:var(--surface-2);padding:36px 20px 24px;font-size:14px;color:var(--ink-2)}
.kaki-dalam{max-width:1080px;margin:0 auto;display:grid;gap:30px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){ .kaki-dalam{grid-template-columns:1.2fr 1fr 1fr;gap:36px} }
.kaki h2{font-family:var(--serif);font-size:20px;margin-bottom:8px}
.kaki p{line-height:1.55;max-width:44ch}
.kaki a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.kaki a:hover{color:var(--ink)}
/* Yang berbentuk tombol atau pil tidak digarisbawahi: bentuknya sudah
   mengatakan ia bisa ditekan. */
.kaki a.tombol,.kaki a.tautan-pil,.kaki a.sos{text-decoration:none}
/* Tombol di kaki halaman tetap berwarna tombol: .kaki a lebih spesifik dari
   .tombol, sehingga tanpa ini tulisannya ikut abu-abu seperti tautan biasa. */
.kaki a.tombol,.kaki a.tombol:hover{color:var(--on-brand)}
.kaki a.tombol.kedua,.kaki a.tombol.kedua:hover{color:var(--ink)}
/* Profil usaha datang sebagai blok .kaya, bukan <p>, jadi judul "Ikuti
   kami" sesudahnya butuh jaraknya sendiri. */
.kaki p + .kaki-judul,.kaki .kaya + .kaki-judul{margin-top:16px}
.kaki-judul{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:8px}
.kaki-ket{font-size:13.5px;margin-bottom:12px}
.sos-baris{display:flex;gap:8px;margin-top:10px}
/* 44 piksel, bukan 40: di bawah itu ikon bulat ini harus dibidik, dan
   ibu jari yang meleset menekan tepi kosong di antaranya. */
.sos{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-2);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
.sos:hover{background:var(--brand-wash);border-color:var(--tepi);color:var(--brand-ink)}
.tautan-pil-baris{display:flex;flex-wrap:wrap;gap:8px}
.tautan-pil{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:600;
  text-decoration:none;cursor:pointer;font-family:inherit}
.tautan-pil svg{color:var(--ink-3);flex-shrink:0}
.tautan-pil:hover{background:var(--brand-wash);border-color:var(--tepi);color:var(--brand-ink)}
.tautan-pil:hover svg{color:var(--brand-ink)}
/* Surel dan nomor telepon di sini adalah tautan setinggi barisan hurufnya
   sendiri — tujuh belas piksel. Di layar sentuh itu bukan sasaran, itu
   bidikan. Barisnya karena itu diberi tinggi 44 piksel dan isinya
   ditengahkan; jaraknya dirapatkan dari 10 menjadi 2 piksel supaya
   daftarnya tidak memanjang sejauh tambahan tingginya. Baris yang bukan
   tautan ikut setinggi itu, sebab daftar kontak yang barisnya berbeda-beda
   tinggi terbaca sebagai salah susun, bukan sebagai hemat tempat. */
.kaki-info{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kaki-info li{display:flex;gap:10px;align-items:center;min-height:44px;line-height:1.45}
.kaki-info svg{color:var(--ink-3);flex-shrink:0}
.kaki-info a{display:inline-flex;align-items:center;min-height:44px}
.kaki .tombol.kecil{display:inline-flex}
/* .kaki .kaki-hak, bukan .kaki-hak: baris hak cipta ini sebuah <p>, dan
   .kaki p{max-width:44ch} lebih spesifik sehingga garisnya menyempit ke
   tengah selebar 44 huruf. */
.kaki .kaki-hak{max-width:1080px;margin:28px auto 0;padding-top:16px;border-top:1px solid var(--rule);
  text-align:center;font-size:13px;color:var(--ink-3)}

/* dua kolom di layar lebar: isi dan ringkasan */
.tata{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .tata{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .tata > aside{position:sticky;top:84px}
}
.sempit{max-width:620px;margin:0 auto}

/* ---------- beranda ---------- */
.pahlawan{display:grid;gap:24px;padding:28px 4px 8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .pahlawan{grid-template-columns:minmax(0,1fr) 440px;align-items:center;padding:56px 4px 24px;gap:56px} }
.pahlawan h1{font-size:clamp(32px,6vw,52px);letter-spacing:-.01em}
.pahlawan .lead{margin-top:14px;font-size:17px;color:var(--ink-2);max-width:48ch}
.janji{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.janji li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.janji svg{flex-shrink:0;margin-top:2px;color:var(--ok)}

/* ---------- mengapa memilih kami ---------- */
.kenapa{margin-top:52px}
.kenapa-kepala{max-width:64ch;margin:0 auto 26px;display:grid;gap:14px;justify-items:center;text-align:center}
.lencana{display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;background:var(--surface);
  border:1px solid var(--rule);box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:13.5px;font-weight:700}
.kenapa-judul{position:relative;display:flex;justify-content:center;width:100%}
.kenapa-judul h2{position:relative;font-size:clamp(28px,4.6vw,46px);line-height:1.12;letter-spacing:-.01em}
.kenapa-judul h2 i{font-style:italic;color:var(--brand)}
/* Nama usaha sebagai bayangan besar di belakang judul: pengingat merek yang
   tidak ikut dibaca — karena itu aria-hidden dan tidak tampil di layar sempit,
   tempat ia hanya akan berebut ruang. */
.bayang{position:absolute;top:-58%;left:50%;transform:translateX(-50%);font-family:var(--serif);font-weight:600;
  font-size:clamp(48px,7.5vw,84px);white-space:nowrap;color:var(--ink);opacity:.085;pointer-events:none;letter-spacing:-.02em}
@media (max-width:760px){ .bayang{display:none} }
.kenapa .lead{color:var(--ink-2);font-size:16px;max-width:60ch}
.kenapa-daftar{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .kenapa-daftar{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .kenapa-daftar{grid-template-columns:repeat(3,minmax(0,1fr))} }
.alasan{display:flex;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--rule);border-radius:16px}
.alasan-ikon{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--brand-wash);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center}
.alasan h3{font-family:var(--sans);font-size:16.5px;font-weight:700;margin:2px 0 6px;line-height:1.3}
.alasan p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* ---------- komponen ---------- */
.kartu{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:18px}
.kartu + .kartu{margin-top:12px}
.kartu h2{font-size:19px}
.kartu-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.catatan{background:var(--brand-wash);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--ink)}
.catatan b{color:var(--brand-ink)}

.fg{display:flex;flex-direction:column;gap:6px}
.fg + .fg,.baris + .fg,.fg + .baris,.baris + .baris{margin-top:14px}
.baris{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.baris.lebar-kiri{grid-template-columns:120px minmax(0,1fr)}
.baris > .fg{margin-top:0}
/* Dua isian bersebelahan yang labelnya bisa turun dua baris ("No.
   penerbangan (opsional)" di layar sempit): label, isian, dan keterangan
   tiap kolom berbagi baris grid yang sama, jadi kotaknya tetap sejajar
   berapa pun tinggi labelnya. Peramban tanpa subgrid tetap seperti dulu. */
@supports (grid-template-rows:subgrid){
  .baris.rata-isian{grid-template-rows:repeat(4,auto);row-gap:0}
  .baris.rata-isian > .fg{grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:0}
  .baris.rata-isian > .fg > :not(label){margin-top:8px}
  .baris.rata-isian > .fg > label{align-self:end}
}
/* Di layar ponsel dua kolom tidak lagi muat: "26/09/2026" bertabrakan
   dengan ikon kalendernya sendiri, dan tahunnya terpotong — pada formulir
   pemesanan, tahun yang tidak terbaca bukan hal sepele. Empat isian
   jadwal karena itu berdiri sendiri-sendiri di bawah 430px. */
@media (max-width:430px){ #formCari .baris{grid-template-columns:minmax(0,1fr)} }
label,.label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.opsional{font-weight:400;color:var(--ink-3)}
.isian{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--tepi);border-radius:10px;background:var(--surface);
  font-size:16px;line-height:1.35}
textarea.isian{resize:vertical;min-height:76px}
.isian:focus{outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent);outline-offset:0;border-color:var(--brand)}
.isian[aria-invalid="true"]{border-color:var(--crit)}
/* Nilai yang ditampilkan, bukan ditanya: jam kembali yang dihitung sendiri
   dan jam jemput yang sudah dipilih di langkah awal. Bentuknya tetap sama
   dengan isian di sebelahnya supaya barisnya sejajar, tapi warnanya
   mengatakan bahwa ia tidak bisa diketik. */
.isian[readonly],.isian-mati{background:var(--raise);color:var(--ink-2);cursor:default}
p.isian-mati{margin:0;display:flex;align-items:center;font-weight:600}
.bantu{font-size:13px;color:var(--ink-3)}
.salah{font-size:13px;color:var(--crit);font-weight:600}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}

.pilihan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* Satu layanan saja yang dibuka: kartunya selebar formulir, bukan separuh. */
.pilihan.tunggal{grid-template-columns:minmax(0,1fr)}
/* Ikon layanan berdiri di kolomnya sendiri, menjangkau kedua baris teks,
   sehingga judul dan keterangannya tetap rata kiri satu sama lain. */
.opsi{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;row-gap:2px;
  align-items:center;padding:12px 14px;border:1px solid var(--tepi);
  border-radius:12px;background:var(--surface);cursor:pointer;min-height:48px}
.opsi input{position:absolute;opacity:0;pointer-events:none}
.opsi .ik{grid-column:1;grid-row:1 / span 2;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand);flex:none}
.opsi b{grid-column:2;font-size:15px;color:var(--ink)}
.opsi > span:not(.ik){grid-column:2;font-size:12.5px;color:var(--ink-2);font-weight:400}
.opsi:has(input:checked){border:2px solid var(--ink);background:var(--brand-wash);padding:11px 13px}
.opsi:has(input:checked) .ik{background:var(--surface);color:var(--ink)}
.opsi:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}

.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:12px;
  border:0;background:var(--brand-grad);color:var(--on-brand);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  box-shadow:var(--brand-glow)}
.tombol:hover{background:var(--brand-grad-hover);color:var(--on-brand)}
.tombol:active{background:var(--brand-grad-tekan)}
/* Tombol kedua tetap datar: bayangan koral adalah penanda tindakan utama. */
.tombol.kedua{box-shadow:none}
.tombol.penuh{width:100%}
/* Satu koral per layar. Tombol "Pilih" di setiap kartu mobil dan tautan
   kontak di kaki halaman memakai biru merek, supaya koral tetap menunjuk
   satu tindakan utama: Cari mobil, lalu Kirim permohonan. */
.harga-baris .tombol.kecil,.harga-baris .tombol.kecil:hover{background:var(--brand);color:var(--on-brand);box-shadow:none}
.harga-baris .tombol.kecil:hover{background:var(--brand-hover)}
.harga-baris .tombol.kecil:active{background:var(--brand-tekan)}
.kaki .tombol.kecil,.kaki .tombol.kecil:hover{background:var(--surface);color:var(--brand-ink);border:1px solid var(--brand);box-shadow:none}
.kaki .tombol.kecil:hover{background:var(--brand-wash)}
.tombol.kedua{background:var(--surface);color:var(--ink);border:1px solid var(--tepi);font-weight:600}
.tombol.kedua:hover{background:var(--surface-2);color:var(--ink)}
.tombol.kecil{min-height:44px;padding:0 16px;font-size:15px}
.tombol[aria-disabled="true"]{opacity:.55;cursor:progress}
.teks-tombol{background:none;border:0;padding:0 4px;min-height:44px;color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.teks-tombol.sebaris{min-height:0;padding:0;font-size:inherit;line-height:inherit;text-align:left}
/* Tautan yang duduk di tengah kalimat setinggi barisan hurufnya sendiri —
   dua puluh dua piksel — dan menaikkannya berarti merenggangkan paragraf
   di sekelilingnya. Wilayah sentuhnya karena itu diperluas lewat bidang
   tak terlihat: tata letaknya tidak bergeser sedikit pun, tetapi jari
   mendapat 44 piksel penuh. Hanya tingginya yang ditambah, sebelas piksel
   ke atas dan ke bawah — lebarnya sudah ratusan piksel. Pola yang sama
   dipakai layar ops untuk angka yang bisa ditekan. */
@media (pointer:coarse){
  .teks-tombol.sebaris{position:relative}
  .teks-tombol.sebaris::after{content:"";position:absolute;left:0;right:0;top:50%;
    height:100%;min-height:44px;transform:translateY(-50%)}
}

.galat{background:var(--crit-wash);color:var(--crit);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600}
.galat:empty{display:none}
#d_galat:not(:empty){margin-bottom:12px}
.sukses{background:var(--ok-wash);color:var(--ok);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600}

.pil{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pil.baru{background:var(--warn-wash);color:var(--warn)}
.pil.dikonfirmasi{background:var(--info-wash);color:var(--info)}
.pil.berjalan{background:var(--ok-wash);color:var(--ok)}
.pil.selesai{background:var(--raise);color:var(--ink-2)}
.pil.batal{background:var(--crit-wash);color:var(--crit)}
.pil.netral{background:var(--raise);color:var(--ink-2)}
.pil.amber{background:var(--warn-wash);color:var(--warn)}
.pil.ok{background:var(--ok-wash);color:var(--ok)}
/* Kartu unggah identitas memakai garis netral seperti kartu lain. Tanda
   kepentingannya cukup satu pil kecil — bingkai emas penuh membuatnya
   terbaca sebagai peringatan, padahal ini cuma langkah wajar berikutnya. */
.identitas-blok.perlu{border:1px solid var(--rule-2);background:var(--surface)}
.id-judul{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pil-langkah{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-ink);background:var(--brand-wash);padding:3px 9px;border-radius:7px}
.unggah-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  min-height:128px;margin-top:12px;padding:18px 16px;border:2px dashed var(--rule-2);border-radius:14px;
  background:var(--surface-2);color:var(--ink-2);cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease}
.unggah-area:hover,.unggah-area.seret{border-color:var(--brand);background:var(--brand-wash);color:var(--ink)}
.unggah-area svg{color:var(--ink-3);margin-bottom:2px}
.unggah-area:hover svg,.unggah-area.seret svg{color:var(--brand-ink)}
.unggah-area b{font-size:15px;color:var(--ink)}
.unggah-syarat{font-size:12px;color:var(--ink-3);margin-top:2px}
.unggah-jaminan{display:flex;align-items:flex-start;gap:7px;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.unggah-jaminan svg{flex:none;margin-top:1px;color:var(--ok)}

/* ---------- pratinjau foto identitas ---------- */
/* Fotonya berdiri dalam bingkai beraspek kartu identitas, dikaburkan sampai
   pemiliknya menekan "Tampilkan" — halaman ini sering dibuka di lobi hotel
   atau di dalam mobil bersama orang lain. */
.id-pratinjau{margin:12px 0 0}
.id-bingkai{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--rule-2);
  background:var(--surface-2);aspect-ratio:16/10}
.id-bingkai img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;
  transition:filter .25s ease, transform .25s ease}
.id-bingkai.kabur img{filter:blur(16px) saturate(.85);transform:scale(1.06);cursor:pointer}
.id-bingkai.kabur::after{content:"";position:absolute;inset:0;background:rgba(23,20,14,.16)}
.id-buka{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);background:rgba(23,20,14,.62);color:#fff;
  font-size:13.5px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.id-buka:hover{background:rgba(23,20,14,.76)}
.id-buka-ik{display:inline-flex}
/* Sesudah dibuka, tombolnya menyingkir ke sudut supaya tidak menutupi
   nomor pada kartu identitasnya. */
.id-bingkai:not(.kabur) .id-buka{left:auto;right:10px;top:10px;transform:none;min-height:34px;padding:0 12px;font-size:12.5px}
/* Tombol buka identitas berdiri di atas foto KTP yang dikaburkan, dan
   sesudah dibuka ia menyingkir ke sudut dengan ukuran yang lebih kecil
   lagi — 40px lalu 34px. Keduanya di bawah ambang sentuh, padahal inilah
   satu-satunya jalan pelanggan melihat identitas yang ia unggah sendiri,
   dan ia selalu dibuka dari telepon. Pemilih varian sudutnya harus
   disebut ulang di sini: kekhususannya lebih tinggi daripada .id-buka
   saja, jadi aturan yang lebih umum tidak akan menyentuhnya. */
@media (pointer:coarse){
  .id-buka{min-height:44px}
  .id-bingkai:not(.kabur) .id-buka{min-height:44px;padding:0 14px}
}
.id-kaki{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.id-kaki .tombol{flex:none}

/* ---------- gambar dilihat penuh ---------- */
.layar-penuh{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:56px 16px 24px;
  background:rgba(12,10,7,.88);backdrop-filter:blur(3px)}
.layar-penuh img{max-width:min(980px,100%);max-height:100%;object-fit:contain;border-radius:12px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.lp-tutup{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;min-height:42px;
  padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);
  color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.lp-tutup:hover{background:rgba(255,255,255,.2)}
@media (max-width:560px){.layar-penuh{padding:52px 10px 16px}.lp-tutup{top:10px;right:10px}}
.berkas-tersembunyi:focus-visible + .unggah-area{outline:3px solid var(--brand);outline-offset:2px}
@media (hover:none){.unggah-area .bantu{display:none}}

/* ---------- langkah ---------- */
.langkah-kepala{display:flex;align-items:center;gap:6px;padding:14px 0 6px}
.kembali{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--ink);flex-shrink:0}
.kembali:hover{background:var(--raise);color:var(--ink)}
.langkah-kepala .ke{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.langkah-kepala h1{font-size:26px}
.kemajuan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:4px 0 18px}
.kemajuan span{height:4px;border-radius:2px;background:var(--rule-2)}
.kemajuan span.on{background:var(--brand)}


/* ---------- mobil ---------- */
.daftar-mobil{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){ .daftar-mobil{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1040px){ .daftar-mobil{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mobil{background:var(--surface);border:1px solid var(--rule);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.mobil.habis{background:var(--surface-2)}
/* Satu perbandingan sisi untuk semua kartu, berfoto atau belum. Dulu yang
   berfoto memakai 4:3 dan yang belum memakai tinggi tetap 104px, sehingga
   kartu-kartunya berdiri tidak rata dalam satu baris — sesuatu yang bisa
   dibiarkan ketika katalog masih layar kedua, tetapi tidak ketika ia
   menjadi hal pertama yang dilihat pengunjung. */
.gambar-mobil{position:relative;background:var(--raise);color:var(--ink-3);display:flex;align-items:center;justify-content:center;
  height:auto;aspect-ratio:16/10;overflow:hidden}
.gambar-mobil svg{height:54px;width:auto;opacity:.75}
/* contain, bukan cover: siluet kendaraan tampil utuh, tidak terpotong atap
   atau bumpernya. Jarak dalam menyisakan udara di sekelilingnya supaya
   mobilnya tidak menempel ke tepi bingkai. Konsekuensinya harus diterima:
   foto yang perbandingan sisinya jauh dari bingkai akan menyisakan pita
   kosong di dua sisi — itu sebabnya latarnya dibuat sewarna kartu, supaya
   pitanya terbaca sebagai ruang, bukan sebagai gambar yang gagal dimuat. */
.gambar-mobil img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;
  padding:14px;display:block;border-radius:16px}
/* Foto membesar sedikit ketika kursor singgah, dipotong rapi oleh
   bingkainya. Gerakannya pelan dan meredam di ujung, supaya terbaca
   sebagai kartu yang menanggapi, bukan sebagai gambar yang berkedut.
   Hanya pada penunjuk yang benar-benar bisa singgah: di layar sentuh,
   :hover melekat sesudah diketuk dan fotonya tertinggal membesar tanpa
   sebab sampai ada yang lain disentuh. Penanda "tersisa 1 unit" tidak ikut
   membesar — ia keterangan, bukan bagian dari fotonya. */
@media (hover:hover){
  .gambar-mobil img,.gambar-mobil svg{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
  .mobil:hover .gambar-mobil img,.mobil:hover .gambar-mobil svg{transform:scale(1.06)}
}
/* Di layar sentuh tidak ada penunjuk yang bisa singgah, jadi blok
   (hover:hover) di atas tidak pernah terpasang sama sekali — bukan
   zumnya yang gagal, melainkan pemicunya yang memang tidak ada di sana.
   Penggantinya adalah sentuhan itu sendiri: selama jari menekan kartunya
   fotonya membesar, dan kembali begitu jari diangkat atau dipakai
   menggulir. Kelasnya dipasang portal.js dari pointerdown/pointerup,
   bukan dari :active — pada elemen yang bukan tombol, :active tidak bisa
   diandalkan di peramban ponsel. */
@media (hover:none){
  .gambar-mobil img,.gambar-mobil svg{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
  .mobil.tekan .gambar-mobil img,.mobil.tekan .gambar-mobil svg{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .gambar-mobil img,.gambar-mobil svg{transition:none}
  .mobil:hover .gambar-mobil img,.mobil:hover .gambar-mobil svg{transform:none}
  .mobil.tekan .gambar-mobil img,.mobil.tekan .gambar-mobil svg{transform:none}
}
.foto-blok:has(img),.gambar-mobil.besar:has(img){background:var(--surface-2)}
/* Di dalam kartu, pelatnya milik pembungkus — bingkai fotonya sendiri harus
   tembus, kalau tidak ia melukis --raise di atas pelat itu dan pita nama
   berdiri di warna yang sedikit berbeda dari foto di bawahnya. Selisihnya
   kecil, tetapi tepinya terbaca sebagai garis yang tidak diniatkan. */
.foto-blok .gambar-mobil{background:transparent}
/* Foto katalog dipotret di atas latar putih murni — sudutnya terukur
   #FFFFFF pada keempat sisinya. Di tema gelap, bingkai gelap di sekeliling
   foto seperti itu membuat fotonya terbaca sebagai lubang terang yang
   ditempel di kartu, bukan sebagai foto. Jadi bingkainya yang mengikuti
   foto, bukan sebaliknya: alasnya dibuat putih supaya tidak ada sambungan
   antara isi foto dan tepinya, lalu keduanya diredupkan bersama-sama lewat
   filter pada wadahnya — satu angka untuk foto dan alasnya sekaligus,
   sehingga seterang apa pun disetel, sambungannya tidak pernah muncul.

   Kartu tanpa foto tidak ikut: :has(img) menyaringnya, dan gambar
   penggantinya memang seharusnya tetap gelap. */
:root[data-theme="dark"] .foto-blok:has(img),
:root[data-theme="dark"] .gambar-mobil.besar:has(img){background:#FFFFFF;filter:brightness(.92)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .foto-blok:has(img),
  :root:not([data-theme="light"]) .gambar-mobil.besar:has(img){background:#FFFFFF;filter:brightness(.92)}
}
.mobil.habis .gambar-mobil img{opacity:.55;filter:saturate(.4)}
.mobil.habis .gambar-mobil svg{opacity:.35}
/* z-index 1, bukan 2: cukup untuk berdiri di atas foto, dan tidak menyamai
   bilah tanggal yang menempel (z-index 2) sehingga tidak menembusnya. */
.tanda-habis{position:absolute;right:12px;top:10px;z-index:1;background:var(--surface);color:var(--ink-2);box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* Nama kendaraan berdiri di atas fotonya, di dalam pelat yang sama —
   bukan menimpanya. Bedanya menentukan.

   Foto armada tidak diarahkan: mobilnya diletakkan di tengah bingkai oleh
   object-fit, bukan oleh fotografer, sehingga tidak ada yang menjamin pita
   atas fotonya kosong. Nama yang ditimpakan di sana melintang tepat di atap
   mobil — pada armada yang tayang sekarang, "Toyota Kijang Innova Zenix"
   sudah gagal seperti itu, dan pada Veloz baris variannya menyentuh kaca
   depan. Berdiri di luar bingkai, tidak ada foto yang bisa merusaknya.

   Tingginya mengikuti panjang namanya sendiri, tidak dipatok: nama yang
   melipat menurunkan fotonya, bukan menabraknya. Karena itu pula tidak ada
   pemotongan teks — cacat yang justru terlihat pada contoh yang menjadi
   rujukan rancangan ini, yang baris keduanya terpenggal di tengah kata.

   Warnanya tidak memakai token tema, melainkan --ink-pelat yang disetel di
   bawah: pelat foto berwarna putih pada kedua tema, jadi tulisan di atasnya
   harus tetap gelap meski seluruh halaman sedang gelap. Kartu yang belum
   berfoto tidak punya pelat putih itu, dan di sana --ink-pelat kembali
   mengikuti tema. */
.foto-blok{position:relative;background:var(--raise);--ink-pelat:var(--ink);--ink-pelat-2:var(--ink-3)}
.foto-blok:has(img){--ink-pelat:#17140E;--ink-pelat-2:#6B6353}
.judul-foto{padding:13px 16px 0}
.mobil .judul-foto h2{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.18;
  letter-spacing:-.01em;color:var(--ink-pelat);text-wrap:balance}
.judul-foto .spek{font-size:12.5px;line-height:1.35;margin-top:2px;color:var(--ink-pelat-2)}
.mobil.habis .judul-foto{opacity:.7}
@media (max-width:359px){ .mobil .judul-foto h2{font-size:17.5px} }

.mobil-isi{padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px;flex:1}
.mobil h2{font-size:20px}
.spek{font-size:13.5px;color:var(--ink-2);margin-top:2px}
/* Daftar spesifikasi kini menjadi hal pertama di badan kartu, sebab nama dan
   variannya sudah naik ke atas foto. */
.mobil-isi .spek-ikon{margin-top:0}
/* Kisi tiga lajur, bukan aliran yang membungkus: mengalir membuat lajurnya
   tidak pernah sejajar antar kartu, sehingga "5 kursi" pada satu kartu
   berdiri di tempat yang berbeda dari kartu di sebelahnya dan atributnya
   tidak bisa dibandingkan sambil menyapu mata ke bawah. */
.spek-ikon{list-style:none;margin:10px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 10px}
.spek-ikon li{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.spek-ikon svg{color:var(--ink-3);flex-shrink:0}
.asuransi{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:13px;color:var(--ok);font-weight:600}
.asuransi svg{flex-shrink:0;margin-top:2px}
/* Tarif dan satuannya tidak boleh berpisah baris: tombol "Tanggal lain" lebih
   lebar dari "Pilih", dan di sebelahnya "/hari" sempat jatuh sendirian.
   Bila ruangnya kurang, "mulai" yang naik ke baris sendiri, dan di layar
   paling sempit tombolnya turun ke bawah harga. */
.harga-baris{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto}
.harga-baris > div:first-child{flex:1 1 0;min-width:0}
.harga-baris .per .nilai{white-space:nowrap}
.mobil .harga-baris .per .nilai{color:#C23D25}
:root[data-theme="dark"] .mobil .harga-baris .per .nilai{color:#E9663A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mobil .harga-baris .per .nilai{color:#E9663A}}
.harga-baris .tombol{white-space:nowrap;flex-shrink:0}
.harga-baris .per{font-family:var(--mono);font-size:18px;font-weight:600;line-height:1.2}
.harga-baris .per small{font-size:12px;font-weight:500;color:var(--ink-3)}
.mobil.habis .per{color:var(--ink-3);font-weight:500}
.harga-baris .total{font-size:13px;color:var(--ink-2)}

/* ---------- rincian angka ---------- */
.angka{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:4px 0}
.angka > :last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.angka .sub{display:block;font-size:13px;color:var(--ink-2)}
.angka.diskon > :last-child{color:var(--ok);font-weight:600}
.vc-status{display:block;min-height:20px;margin-top:6px;font-size:13.5px;font-weight:600;line-height:1.45}
.vc-status.cek{color:var(--ink-3);font-weight:500}
.vc-status.ok{color:var(--ok)}
.vc-status.salah{color:var(--crit)}
.kartu-ajak .ajak-kode{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.kartu-ajak .ajak-kode .mono{font-size:22px;font-weight:600;letter-spacing:.12em;color:var(--brand);padding:6px 12px;border:1px dashed var(--rule);border-radius:10px}
.kartu-ajak .ajak-hadiah{margin-top:10px;font-size:14px;font-weight:600;color:var(--ok)}
.harga-baris .total s{color:var(--ink-3);font-weight:400}
.harga-baris .hemat{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--ok)}
.harga-baris .per .mulai.spesial{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;font-weight:600;color:var(--ink-2)}
/* Harga kartu dengan diskon (desain Tarif spesial). Warna dan ukuran untuk tema
   gelap; tema terang memakai token yang sama. */
.harga-baris .tarif-spesial{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,#F6DB8C 0%,#E9C46A 100%);color:#0A2540;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 10px -6px rgba(233,196,106,.7)}
.harga-baris .per .nilai .rp-kecil{font-size:13px;font-weight:700;margin-right:4px}
.harga-baris .per .nilai{display:inline-block;font-size:24px;font-weight:800;line-height:1.1}
.harga-baris .per .nilai-coret{display:inline-block;margin-left:8px;font-size:14px;font-weight:500;color:var(--ink-3);vertical-align:2px}
.harga-baris .per .nilai small{font-size:12px;font-weight:500;color:var(--ink-3);-webkit-text-fill-color:var(--ink-3)}
.harga-baris .total-diskon{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:3px 6px;margin-top:6px;font-size:12px;color:var(--ink-3)}
.harga-baris .total-diskon > span:first-of-type{font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.harga-baris .total-diskon s{color:var(--ink-3);font-weight:400;font-size:12px}
.harga-baris .total-diskon .panah{color:var(--ink-3)}
.harga-baris .total-diskon b{font-size:14px;font-weight:700;color:var(--ink)}
.harga-baris .hemat-pill{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-wash);color:var(--ink);font-size:12.5px;font-weight:700}
.harga-baris .hemat-pill svg{color:var(--ok);flex:none}
.harga-baris .hemat-pill b{color:var(--ok);font-weight:700}
:root[data-theme="dark"] .harga-baris .hemat-pill{border-color:rgba(110,231,183,.5);background:rgba(16,122,94,.22);color:#FFFFFF}
:root[data-theme="dark"] .harga-baris .hemat-pill b,:root[data-theme="dark"] .harga-baris .hemat-pill svg{color:#6EE7B7}
:root[data-theme="dark"] .harga-baris .total-diskon b{color:#FFFFFF}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .harga-baris .hemat-pill{border-color:rgba(110,231,183,.5);background:rgba(16,122,94,.22);color:#FFFFFF}
  :root:not([data-theme="light"]) .harga-baris .hemat-pill b,:root:not([data-theme="light"]) .harga-baris .hemat-pill svg{color:#6EE7B7}
  :root:not([data-theme="light"]) .harga-baris .total-diskon b{color:#FFFFFF}
}
/* Rincian harga dengan diskon, versi berani: kartu berbingkai merah muda dengan
   pita warna di atas, stiker PROMO, baris potongan berlatar, dan total besar
   berwarna. Palet sama dengan seksi promo di beranda (merah muda, ungu, kuning). */
.kartu.harga-hemat{--hm-a:#ff2e63;--hm-b:#9b5cff;--hm-c:#ffd166;--hm-ink:#3b0a3d;--hm-teks:#d81b60}
/* Tanpa promo: saudara dari kartu berdiskon dengan palet dingin (biru, hijau
   tosca, kuning) supaya tetap seru tetapi tidak tertukar dengan kartu promo. */
.kartu.harga-biasa{--hm-a:#2f6bff;--hm-b:#14c8b0;--hm-c:#ffd166;--hm-ink:#0b1b3a;--hm-teks:#1f56e0}
.kartu:is(.harga-hemat,.harga-biasa){position:relative;overflow:hidden;border:2px solid var(--hm-a);padding-top:22px;
  box-shadow:0 22px 44px -26px color-mix(in srgb,var(--hm-a) 60%,transparent)}
.kartu:is(.harga-hemat,.harga-biasa)::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:linear-gradient(90deg,var(--hm-a),var(--hm-b),var(--hm-c))}
:root[data-theme="dark"] .kartu.harga-hemat{--hm-teks:#ff7aa2}
:root[data-theme="dark"] .kartu.harga-biasa{--hm-teks:#7fb0ff}
.kartu:is(.harga-hemat,.harga-biasa) .pil-hemat{background:var(--hm-c);color:var(--hm-ink);border:0;font-weight:800;font-size:14px;padding:7px 14px;
  transform:rotate(-3deg);box-shadow:0 10px 22px -10px rgba(0,0,0,.45)}
.kartu:is(.harga-hemat,.harga-biasa) .pil-hemat svg{color:var(--hm-ink)}
:root[data-theme="dark"] .kartu:is(.harga-hemat,.harga-biasa) .pil-hemat,:root[data-theme="dark"] .kartu:is(.harga-hemat,.harga-biasa) .pil-hemat svg{color:var(--hm-ink)}
.kartu.harga-hemat .angka.diskon{align-items:center;margin:8px -6px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(90deg,rgba(255,46,99,.14),rgba(155,92,255,.14));border:1px dashed color-mix(in srgb,var(--hm-a) 55%,transparent)}
.kartu.harga-hemat .angka.diskon > :last-child{color:var(--hm-teks);font-size:18px;font-weight:800}
.stiker-promo{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:6px;background:var(--hm-a);color:#fff;font-style:normal;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;vertical-align:2px;transform:rotate(-4deg)}
.kartu:is(.harga-hemat,.harga-biasa) .angka.jumlah{border-top:2px dashed var(--rule)}
.kartu:is(.harga-hemat,.harga-biasa) .angka.jumlah .chip-hari{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--hm-c);
  color:var(--hm-ink);font-size:12.5px;font-weight:800}
/* Kartu "Pilihan Anda" di samping: label mengikuti warna kartu; angka total lebih kecil. */
.kartu.samping .samping-label{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hm-teks)}
.kartu.samping .harga-kepala{margin-bottom:4px}
.kartu.samping .total-baru{font-size:24px}
.kartu.samping.harga-hemat .angka.diskon{font-size:14px}
.kartu.samping.harga-hemat .angka.diskon > :last-child{font-size:16px}
.kartu.samping .pil-hemat{font-size:12.5px;padding:5px 11px}
.kartu.harga-biasa .angka:not(.jumlah):not(.diskon){align-items:center;margin:6px -6px;padding:9px 12px;border-radius:14px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--hm-a) 12%,transparent),color-mix(in srgb,var(--hm-b) 12%,transparent));
  border:1px dashed color-mix(in srgb,var(--hm-a) 50%,transparent)}
.kartu.harga-biasa .angka:not(.jumlah):not(.diskon) > :last-child{font-weight:800;color:var(--hm-teks)}
.total-baru{display:block;font-size:30px;line-height:1.05;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--hm-a),var(--hm-b));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:560px){
  .total-baru{font-size:26px}
  .kartu:is(.harga-hemat,.harga-biasa) .angka.jumlah .chip-hari{font-size:12px;padding:3px 9px}
}
/* Rincian harga dengan diskon: pil hemat, nama promo, harga coret, catatan. */
.harga-kepala{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:10px}
.pil-hemat{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;
  background:var(--ok-wash);color:var(--ink);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.pil-hemat svg{color:var(--ok);flex:none}
:root[data-theme="dark"] .pil-hemat{color:#fff}
.angka.diskon > :first-child b{font-weight:700}
.angka.jumlah .total-coret{display:block;font-size:13px;font-weight:400;color:var(--ink-3);text-align:right;line-height:1.2}
.not-hemat{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);
  font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.not-hemat svg{flex:none;margin-top:2px;color:var(--brand)}
.angka.jumlah{border-top:1px solid var(--rule);margin-top:8px;padding-top:12px;font-weight:700;align-items:baseline}
.angka.jumlah > :last-child{font-size:20px;font-weight:600}
.angka.sisa > :last-child{color:var(--warn)}
.angka .tanda{font-family:var(--sans);font-size:13px;color:var(--ink-2);white-space:normal}
dl.data{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
dl.data .penuh{grid-column:1 / -1}
dl.data dt{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.dt-ik{display:inline-flex;color:var(--ink-3);flex:none}
dl.data dd{margin:2px 0 0;font-size:15px}
.aturan{margin:0;display:grid;gap:12px;font-size:14.5px}
.aturan dt{font-weight:700}
.aturan dd{margin:2px 0 0;color:var(--ink-2)}

/* ---------- unggah ---------- */
.unggah{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed var(--tepi);border-radius:12px;background:var(--surface-2)}
.unggah.ada{border:1px solid var(--ok);background:var(--ok-wash)}
.unggah img{width:64px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--raise)}
.unggah .ket{flex:1;min-width:0;font-size:14px}
.unggah .ket b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unggah .ket span{font-size:12.5px;color:var(--ink-2)}
.unggah.ada .ket span{color:var(--ok);font-weight:600}
.berkas-tersembunyi{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* ---------- dialog ketentuan ---------- */
.dialog{border:0;padding:0;border-radius:18px;background:var(--surface);color:var(--ink);width:min(640px,calc(100vw - 24px));
  max-height:calc(100vh - 32px);box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.dialog::backdrop{background:rgba(18,16,11,.55)}
.dialog-isi{padding:22px 24px 26px}
.dialog-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.dialog-kepala h2{font-size:24px}
.dialog-kepala .kembali{margin:-8px -10px 0 0}
.ket-judul{font-family:var(--sans);font-size:15px;font-weight:700;margin:6px 0 10px}
.ket-butir + .ket-butir{margin-top:14px}
.ket-butir h4{margin:0 0 2px;font-size:17px;font-weight:500}
.ket-butir p,.ket-pisah p{font-size:15px;color:var(--ink-2)}
.ket-butir b,.ket-pisah b{color:var(--ink)}
.ket-pisah{border-top:1px solid var(--rule);margin-top:18px;padding-top:12px}
@media (max-width:560px){ .dialog{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:18px 18px 0 0} }

/* ---------- status ---------- */
.nomor-besar{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.02em}
/* Cakram centang dulu berdiri di sini. Penggantinya ada di .terkirim-alis:
   baris kecil bernomor dan berjam, yang membuktikan permintaannya benar
   tercatat alih-alih sekadar menggambarkannya. */
.linimasa{list-style:none;margin:0;padding:0}
.linimasa li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px}
.linimasa .rel{display:flex;flex-direction:column;align-items:center}
.linimasa .titik{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule-2);margin-top:4px;background:var(--surface)}
.linimasa .garis{flex:1;width:2px;background:var(--rule)}
.linimasa li:last-child .garis{display:none}
.linimasa .teks{padding-bottom:16px;color:var(--ink-2)}
.linimasa .teks b{display:block;font-size:15px;color:var(--ink-2)}
.linimasa .teks span{font-size:13px}
.linimasa li.capai .titik{background:var(--ok);border-color:var(--ok)}
.linimasa li.capai .garis{background:var(--ok)}
.linimasa li.capai .teks b{color:var(--ink)}
.linimasa li.kini .titik{border:3px solid var(--brand);background:var(--brand-wash);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--brand) 14%, transparent)}
.linimasa li.kini .teks b{color:var(--brand-ink);display:flex;align-items:center;gap:8px}
/* Penanda "sekarang": tanpa ini, tahap berjalan hanya dibedakan warna titik —
   dan warna saja bukan penanda yang bisa diandalkan. */
.tahap-kini{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-ink);background:var(--brand-wash);padding:2px 7px;border-radius:999px}
/* Sebagian sudah dibayar (uang muka atau cicilan): titiknya setengah hijau,
   dan keterangannya lebih tegas dari tahap yang belum tersentuh. */
.linimasa li.sebagian .titik{border-color:var(--ok);background:linear-gradient(90deg,var(--ok) 50%,var(--surface) 50%)}
.linimasa li.sebagian .teks>span:not(.bayar-riwayat){color:var(--ink)}
/* Riwayat singkat di tahap Pembayaran: tanggal · jenis · nominal rata kanan,
   sisa tagihan sebagai baris penutup bergaris atas. */
.bayar-riwayat{display:flex;flex-direction:column;gap:3px;margin-top:4px;max-width:360px}
.bayar-riwayat .bb{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline;font-size:13px;color:var(--ink-2)}
.bayar-riwayat .bt{color:var(--ink-3);font-variant-numeric:tabular-nums}
.bayar-riwayat .bn{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);text-align:right}
.bayar-riwayat .bb.tunggu .bj,.bayar-riwayat .bb.tunggu .bn{color:var(--brand-ink);font-style:italic;font-weight:500}
.bayar-riwayat .bb.tot{border-top:1px solid var(--rule);padding-top:5px;margin-top:3px}
.bayar-riwayat .bb.tot .bj{font-weight:600;color:var(--ink)}
.bayar-riwayat .bb.tot .bn{font-weight:700}
.bayar-riwayat .bb.lunas .bj,.bayar-riwayat .bb.lunas .bn{color:var(--ok)}
.bilah{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.bilah span{height:6px;border-radius:3px;background:var(--rule-2)}
.bilah-teks{margin-top:6px;font:600 12px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.bilah span.on{background:var(--ok)}
.rekening{white-space:pre-line;background:var(--surface-2);border-radius:10px;padding:12px 14px;font-size:14.5px}
.temuan{margin:6px 0 0;padding-left:18px;font-size:14px;color:var(--ink-2)}

.aksi-bawah{display:grid;gap:10px;margin-top:16px}
@media (max-width:899px){
  .lengket{position:sticky;bottom:0;z-index:2;margin:16px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--rule)}
}
.lengket .ringkas-harga{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px}

@media (prefers-reduced-motion:no-preference){
  .muncul{animation:muncul .22s ease-out}
  @keyframes muncul{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
}

@media print{
  .kepala,.kaki,.aksi-bawah,.lengket,.tombol,.teks-tombol,.unggah-blok{display:none !important}
  body{background:#fff;color:#000}
  .kartu{border-color:#bbb;break-inside:avoid}
}

/* teks bergaya dari Master → Portal: paragraf, daftar, tebal, miring, tautan.
   Diberi jarak sendiri supaya tulisan panjang tetap terbaca di kartu. */
.kaya > :first-child { margin-top: 0 }
.kaya > :last-child { margin-bottom: 0 }
.kaya p { margin: 0 0 10px }
.kaya ul { margin: 0 0 10px; padding-left: 20px }
.kaya li { margin: 2px 0 }
.kaya a { color: inherit; text-underline-offset: 3px }

/* =====================================================================
   Tinjauan UI portal (18 Sep 2026).

   1 · State interaktif. Hover tombol sudah lebih gelap; ditambah state
       tekan yang LEBIH GELAP lagi (--brand-tekan, 9,67:1). Tekan yang
       lebih terang menurunkan kontras teks putih ke 3,77:1 tepat saat
       tombolnya ditekan. Kartu layanan dan kartu mobil kini bereaksi
       saat disorot.
   2 · Ponsel. Judul 32px tiga baris ditambah tiga poin keunggulan
       mendorong tombol "Lihat mobil" ke y=849 pada layar 844. Judul
       dikecilkan dan poin keunggulan dibaca sesudah formulir (order),
       sehingga tombolnya berakhir di y=647. Desktop tidak berubah.
   3 · Label bernapas: 6px ke 8px. Header sudah sticky sejak awal.
   4 · Elevasi hanya untuk yang penting dan bisa ditekan: tombol utama
       dan kartu layanan yang terpilih. Bayangan cokelat hangat, bukan
       hitam, supaya menyatu dengan latar krem.
   5 · Ikon isian. Ikon kalender dan panah pilihan bawaan peramban
       ketebalannya tidak bisa diatur (dan ikon kalender tidak tampil di
       iPhone), jadi diganti SVG bergaris 1,75 setebal teksnya.
   ===================================================================== */
.tombol{box-shadow:0 1px 2px rgba(60,44,8,.20),0 8px 18px -10px rgba(60,44,8,.60);
  transition:background-color .15s ease,box-shadow .15s ease,transform .08s ease}
.tombol:hover{box-shadow:0 1px 2px rgba(60,44,8,.22),0 10px 22px -10px rgba(60,44,8,.70)}
.tombol:active{background:var(--brand-tekan);transform:translateY(1px);box-shadow:0 1px 1px rgba(60,44,8,.25)}
.tombol.kedua,.tombol.kedua:hover{box-shadow:none}
.tombol.kedua:active{background:var(--raise);color:var(--ink)}
.tombol[aria-disabled="true"]{box-shadow:none;transform:none}
.opsi{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .08s ease}
.opsi:hover{border-color:var(--ink-2);background:var(--surface-2)}
.opsi:active{transform:translateY(1px)}
.opsi:has(input:checked){box-shadow:0 1px 2px rgba(11,92,168,.10),0 10px 20px -12px rgba(60,44,8,.50)}
.opsi:has(input:checked):hover{background:var(--brand-wash);border-color:var(--ink)}
.mobil{transition:border-color .15s ease,box-shadow .15s ease}
.mobil:hover{border-color:var(--rule-2);box-shadow:0 1px 2px rgba(60,44,8,.06),0 16px 30px -18px rgba(60,44,8,.45)}

.fg{gap:8px}

/* Ikon kalender digambar oleh pembungkus isian (.isi-tgl::after), bukan
   oleh isiannya: Safari iOS tidak menggambar ::-webkit-calendar-picker-indicator,
   dan Chrome Android tidak menggambar latar pada isian tanggal. Penunjuk
   bawaan Chrome tetap ada sebagai bidang klik tak terlihat selebar isian,
   sehingga sentuhan di mana pun membuka kalendernya. */
.isi-tgl{position:relative;display:block}
.isi-tgl::after{content:"";position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;
  /* Topeng, bukan gambar: warnanya --ink, jadi ikut tema gelap baik yang
     dipilih lewat data-theme maupun yang datang dari setelan ponsel. */
  background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317140E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317140E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat}
.isian[type="date"]{position:relative;padding-right:44px}
.isian[type="date"]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer;background:none}
select.isian{-webkit-appearance:none;appearance:none;padding-right:46px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317140E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/20px no-repeat}
:root[data-theme="dark"] select.isian{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EBDF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) select.isian{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EBDF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}}

@media (max-width:560px){
  .pahlawan{gap:16px;padding-top:16px}
  .pahlawan > div:first-child{display:contents}
  .pahlawan h1{font-size:27px;line-height:1.12;order:1}
  .pahlawan .lead{order:2;margin-top:-6px;font-size:15.5px}
  .pahlawan > form{order:3}
  .pahlawan .janji{order:4;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.tombol,.opsi,.mobil{transition:none}.tombol:active,.opsi:active{transform:none}}

/* ---------- halaman "Permintaan terkirim" ---------- */
.terkirim{padding-top:28px;display:grid;gap:16px}
/* Kepala halaman dibaca dari atas ke bawah sebagai satu kalimat: apa yang
   terjadi (alis), kepada siapa (judul), lalu apa berikutnya (lead). */
.terkirim-kepala{display:grid;gap:6px;justify-items:start;margin:10px 0 18px;
  padding-bottom:18px;border-bottom:1px solid var(--rule)}
.terkirim-alis{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.terkirim-alis .mono{color:var(--ink-2);letter-spacing:.06em}
.terkirim-alis .pisah{color:var(--rule-2)}
.terkirim-alis .alis-jam{letter-spacing:.06em;text-transform:none}
/* Titik yang berdenyut pelan: permintaannya bukan cuma terkirim, ia sedang
   ditangani. Denyutnya berhenti bagi yang meminta gerak dikurangi. */
.denyut{position:relative;width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.denyut::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--ok);opacity:.5;
  animation:denyut 2.4s ease-out infinite}
@keyframes denyut{0%{transform:scale(.6);opacity:.55}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.denyut::after{animation:none;opacity:.35}}
@media (prefers-color-scheme:dark){
}
.terkirim-kepala h1{font-size:34px;letter-spacing:-.02em}
.terkirim-lead{font-size:16.5px;color:var(--ink-2);max-width:60ch;line-height:1.55}
/* Di layar sempit alisnya membungkus jadi dua baris; titik pemisahnya
   dilepas supaya tidak ada yang menggantung di ujung baris pertama, dan
   jaraknya yang menggantikan tugasnya. */
@media (max-width:560px){.terkirim-kepala h1{font-size:28px}.terkirim-lead{font-size:15.5px}
  .terkirim-alis{font-size:12px;gap:4px 10px}
  .terkirim-alis .pisah{display:none}}
.ringkasan .kartu-kepala{margin-bottom:14px}
.nomor-baris{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--rule)}
.nomor-baris .nomor-besar{margin-top:2px}
.ringkasan dl.data dd .bantu{font-size:13px}
.tautan-baris{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.tautan-isi{display:flex;gap:8px}
.tautan-isi .isian{font-size:13px;min-width:0}
.teks-tombol.tengah{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink-2)}
.teks-tombol.tengah:hover{color:var(--ink);text-decoration:underline}

/* ---------- pembayaran di halaman lacak ---------- */
.bayar-pilihan{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.bayar-pilihan{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nominal-transfer{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--rule);display:grid;gap:4px}
.nominal-baris{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nominal-baris b{font-size:26px;font-weight:600;letter-spacing:.01em}
.riwayat-bayar{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}
.riwayat-bayar li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:14px}
.riwayat-bayar li:first-child{border-top:0}
.riwayat-bayar .bantu{display:block;font-size:12.5px}
@media (max-width:430px){.nominal-baris b{font-size:22px}}
.nominal-baris b{white-space:nowrap}
/* HP sempit: nominal dan tombol Salin tidak muat berdampingan. Tombol naik
   ke samping label, nominal mendapat satu baris penuh dan tetap besar. */
@media (max-width:380px){
  .nominal-transfer{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
  .nominal-transfer > .bantu:first-child{grid-column:1;grid-row:1}
  .nominal-baris{display:contents}
  .nominal-baris .tombol{grid-column:2;grid-row:1;min-width:44px;padding:0 12px}
  .nominal-baris .salin-teks{display:none}
  .nominal-baris b{grid-column:1 / -1;grid-row:2;font-size:24px;margin-top:2px}
  .nominal-transfer > #pb_untuk{grid-column:1 / -1;grid-row:3}
}

/* Lampiran bukti bayar di Riwayat bukti: miniatur gambar atau label PDF,
   dengan nama berkasnya. Membuka berkas aslinya di tab baru. */
.lampiran-bukti{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:6px 10px 6px 6px;
  border:1px solid var(--rule);border-radius:10px;background:var(--surface-2,var(--surface));
  text-decoration:none;color:var(--ink);max-width:100%}
.lampiran-bukti:hover{border-color:var(--brand)}
.lampiran-bukti:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lampiran-bukti img,.lampiran-bukti .lb-pdf{width:44px;height:44px;border-radius:6px;flex:none;object-fit:cover;background:var(--rule)}
.lampiran-bukti .lb-pdf{display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--brand-ink);background:var(--brand-wash)}
.lampiran-bukti .lb-teks{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.lampiran-bukti .lb-teks>span:first-child{font-size:13px;font-weight:600;color:var(--brand-ink)}
.lampiran-bukti .lb-nama{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}

/* Pembatalan dari halaman lacak */
/* Membatalkan sewa adalah tindakan yang tidak bisa ditarik kembali, jadi
   warnanya merah — tetapi ia bukan tindakan utama halaman ini. Bentuknya
   tetap tombol bergaris: yang berisi penuh merah hanya tombol pengesah di
   dalam dialognya, supaya "batal" tidak pernah tertekan karena refleks.
   Ikonnya sendiri berisi penuh, sesuai permintaan. */
.tombol.kedua.batal-buka{color:var(--crit);border-color:color-mix(in srgb, var(--crit) 42%, var(--rule-2))}
.batal-ik{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--crit);color:var(--on-crit);flex:none}
.batal-ik svg{stroke-width:2.2}
.tombol.kedua.batal-buka:hover{background:var(--crit);border-color:var(--crit);color:var(--on-crit)}
.tombol.kedua.batal-buka:hover .batal-ik{background:color-mix(in srgb, var(--on-crit) 22%, transparent);color:var(--on-crit)}
/* --on-crit, bukan putih: di tema gelap --crit menjadi salem terang dan
   tulisan putih di atasnya hanya 2,4:1. */
.tombol.bahaya{background:var(--crit);border-color:var(--crit);color:var(--on-crit)}
.tombol.bahaya:hover{filter:brightness(.92)}
.tombol.bahaya[disabled]{opacity:.6;cursor:progress}
.batal-alasan{display:flex;flex-direction:column;gap:8px}
.pilihan-alasan{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;cursor:pointer;font-size:14.5px}
.pilihan-alasan:hover{border-color:var(--ink-3)}
.pilihan-alasan:has(input:checked){border-color:var(--warn);background:var(--warn-wash);color:var(--ink)}
.pilihan-alasan input{accent-color:var(--warn);width:18px;height:18px;margin:0}
.batal-perkiraan{margin-top:14px;background:var(--surface-2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;font-size:14px}
.batal-perkiraan>div{display:flex;justify-content:space-between;gap:10px}
.batal-perkiraan>div span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.batal-perkiraan .tot{border-top:1px solid var(--rule);padding-top:6px;margin-top:2px;font-weight:700}
.batal-perkiraan .bantu{margin:4px 0 0}
.setuju-batal{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;cursor:pointer}
.setuju-batal input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--crit)}
/* Kotak persetujuan pembatalan: 42px, dan pembatalan tidak bisa ditarik
   kembali. Dua piksel kurang memang sedikit, tetapi justru di kendali
   seperti inilah ketukan yang meleset paling mahal — dan sasarannya
   labelnya, bukan kotak 15x18 di dalamnya. align-items dipindah ke center
   supaya tinggi tambahannya menjadi ruang sentuh, bukan jarak menggantung
   di bawah tulisannya. */
@media (pointer:coarse){
  .setuju-batal{min-height:44px;align-items:center}
  .setuju-batal input{margin:0}
}
.batal-ringkas{display:grid;gap:8px;margin:12px 0 0}
.batal-ringkas>div{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:14px}
.batal-ringkas dt{color:var(--ink-3)}
.batal-ringkas dd{margin:0;display:flex;flex-direction:column}
.batal-langkah{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-3)}
.batal-langkah li{display:flex;align-items:center;gap:8px}
.batal-langkah li.ok{color:var(--ok);font-weight:600}
@media (max-width:520px){.batal-ringkas>div{grid-template-columns:1fr;gap:0}}
#form-batal,#kartu-batal{scroll-margin-top:96px}

/* Asal transfer pada kartu pembayaran. Dua isian berdampingan di layar
   lebar; di ponsel keduanya turun satu per satu — "Nama pengirim" tidak
   muat di separuh layar 375 px tanpa terpotong saat diketik. */
.kirim-dari{margin-top:4px}
.kirim-dari .baris{gap:10px}
.kirim-dari .bantu{display:block;margin-top:6px}
@media (max-width:430px){.kirim-dari .baris{grid-template-columns:minmax(0,1fr)}}
.asal-kirim{display:block;margin-top:6px;font-weight:600}

/* ===================================================================
   Beranda sebagai katalog.

   Formulir pencarian dulu memenuhi layar pertama dan mobilnya baru
   terlihat sesudah satu klik. Sekarang pahlawannya memendek, formulirnya
   menyusut jadi bilah setinggi satu baris yang menempel di bawah kepala
   halaman, dan sisanya milik mobil.
   =================================================================== */
/* Satu kisi untuk seluruh beranda. Di layar sempit semuanya satu lajur dan
   janji-janji turun ke bawah katalog lewat order; di layar lebar judul dan
   janji berdampingan, sisanya melebar penuh. Yang berpindah letaknya, bukan
   isinya — kalimatnya tetap satu di dalam dokumen. */
.beranda{display:grid;grid-template-columns:minmax(0,1fr);padding:20px 0 0}
.beranda-kepala{padding:0 4px}
.beranda-kepala h1{font-size:clamp(27px,5vw,42px);letter-spacing:-.01em}
/* Di bawah 360px judulnya dikecilkan. Pada lebar itu chip saringan sudah
   mendorong kartu mobil pertama sampai hampir keluar lipatan, dan judul
   adalah satu-satunya blok yang bisa memberi ruang tanpa memotong kalimat
   yang ditulis operator. */
@media (max-width:359px){
  .beranda-kepala h1{font-size:23px;line-height:1.18}
  .beranda-kepala .lead{margin-top:8px;font-size:15px}
}
.beranda-kepala .lead{margin-top:10px;font-size:15.5px;color:var(--ink-2);max-width:48ch}
.beranda > .janji{order:5;margin:30px 4px 0;padding-top:22px;border-top:1px solid var(--rule)}
@media (min-width:900px){
  .beranda{grid-template-columns:minmax(0,1fr) 380px;column-gap:44px;align-items:start;padding:36px 0 0}
  .beranda > .beranda-kepala{grid-column:1;grid-row:1}
  .beranda > .janji{grid-column:2;grid-row:1;order:0;margin:6px 0 0;padding-top:0;border-top:0}
  .beranda > *:not(.beranda-kepala):not(.janji){grid-column:1 / -1}
}

/* Bilah penyaring. Menempel di bawah kepala halaman yang juga menempel,
   jadi tanggalnya tetap terjangkau sejauh apa pun katalognya digulir —
   tanpa perlu kembali ke atas seperti ketika ia masih sebuah formulir. */
/* scroll-margin-top menyisakan ruang untuk kepala halaman yang menempel:
   tanpa itu, "Ubah" pada bilah ringkas menggulirkan bilah penuh tepat ke
   tepi atas layar, dan baris pertamanya tertutup kepala. */
.bilah-cari{position:sticky;top:var(--kepala-h,64px);scroll-margin-top:calc(var(--kepala-h,64px) + 10px);z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:14px;
  padding:10px 11px;margin:6px 2px 0;box-shadow:0 8px 20px -16px rgba(60,44,8,.55)}
.bc-seg{display:flex;border:1px solid var(--tepi);border-radius:10px;overflow:hidden;background:var(--surface);flex:0 0 auto}
.bc-seg label{position:relative;display:block}
.bc-seg input{position:absolute;opacity:0;pointer-events:none}
.bc-seg span{display:flex;align-items:center;gap:7px;min-height:48px;padding:0 14px;
  font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.bc-seg svg{flex-shrink:0;color:var(--ink-3)}
.bc-seg label + label span{border-left:1px solid var(--rule)}
/* Lebar segmen dikunci ke yang terlebar dari kedua bahasa (ID 299px, EN 265px).
   Tanpa ini, kolom tanggal di sebelahnya ikut bergeser setiap bahasa diganti. */
@media (min-width:720px){ .bc-seg{min-width:300px} }
/* Krem di atas putih hanya berbeda 1,16:1 — praktis tidak ada beda
   terangnya, sehingga yang membedakan terpilih dari tidak cuma tebal huruf.
   Isian pekat memberi 17:1, dan memakai pola yang sama dengan pemilih
   bahasa di kepala halaman: yang terpilih berlatar tinta. */
.bc-seg input:checked + span{background:var(--ink);color:var(--surface);font-weight:700}
.bc-seg input:checked + span svg{color:var(--surface)}
.bc-seg input:checked + span{border-left-color:transparent}
.bc-seg input:focus-visible + span{outline:3px solid var(--brand);outline-offset:-3px}
.bc-fg{display:flex;flex-direction:column;gap:3px;flex:1 1 128px;min-width:0}
.bc-fg label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
.bc-fg .isian{min-height:48px;padding:9px 11px;font-size:14px}
/* .bc-fg memasang display:flex, dan aturan pembuat halaman menang atas
   [hidden] bawaan peramban — tanpa baris ini lajur yang disembunyikan
   tetap tergambar. */
.bc-fg[hidden]{display:none}
/* Pilihan durasi memuat dua keterangan sekaligus — "3 hari · 30 Sep" —
   jadi dasarnya lebih lebar daripada lajur tanggal di sebelahnya, yang
   cukup memuat satu. */
#c_fgDurasi{flex:1 1 172px}
/* Tombol saring. Di ujung sebuah bilah tanggal, ikon kaca pembesar sudah
   mengatakan tugasnya, sedangkan kata "Perbarui" memakan sekitar 80px yang
   diambil dari lajur tanggal di sebelahnya. Jadi di layar lebar ia sebuah
   tombol persegi setinggi isian di sampingnya — 52x48 dengan lengkung 10px
   yang sama — dan katanya disembunyikan dengan cara yang menyisakannya di
   pohon aksesibilitas, bukan display:none, supaya nama tombolnya tetap
   "Perbarui" dan tidak bergantung pada title. */
.bc-tbl{flex:0 0 auto;align-self:flex-end;position:relative;gap:0;
  width:52px;min-width:52px;height:48px;min-height:48px;padding:0;border-radius:10px}
.bc-tbl svg{stroke-width:2.4}
/* :not(:active) supaya angkatan sewaktu disentuh tidak menimpa turunnya
   tombol sewaktu ditekan — keduanya sama-sama transform pada satu elemen. */
.bc-tbl:hover:not(:active){transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.bc-tbl:hover:not(:active){transform:none}}
.bc-tbl-teks{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Tablet: pilihan layanan, tiga isian, dan tombol cari tidak muat satu baris
   di bawah ~920px, dan yang turun sendirian ke baris kedua justru tombol
   persegi itu. Pilihan layanan dibuat selebar bilah seperti di ponsel, jadi
   tanggal, jam, dan tombol cari tetap sebaris di bawahnya. */
@media (min-width:621px) and (max-width:919px){
  .bc-seg{flex:1 1 100%}
  .bc-seg label{flex:1} .bc-seg span{justify-content:center}
}
@media (max-width:620px){
  .bc-seg{flex:1 1 100%}
  .bc-seg label{flex:1} .bc-seg span{justify-content:center;padding:0 8px}
  /* Dasar lebar dihitung dari lajurnya, bukan dipatok 128px. Pada layar
     320px ruang dalamnya 260px, sehingga dua isian berdasar 128px beserta
     jaraknya terpaut empat piksel — dan keduanya jatuh ke baris
     sendiri-sendiri, membuat bilahnya 344px alih-alih 250px. */
  .bc-fg{flex:1 1 calc(50% - 4px)}
  /* 16px, bukan 14: isian di bawah 16px membuat Safari iOS memperbesar
     halaman sendiri begitu isian itu disentuh, dan pengunjung mendarat di
     halaman yang tiba-tiba melebar. Ruang yang hilang diambil kembali dari
     jarak dalam dan dari ikon kalendernya, bukan dari ukuran hurufnya —
     pada 320px "27/09/2026" sebelumnya terpotong di belakang ikon itu. */
  .bc-fg .isian{font-size:16px;padding:9px 5px}
  /* Satu baris penuh. Di separuh lajur 320px keterangannya terpotong —
     pilihan terpanjang yang mungkin, "30 days · 28 Aug", butuh 124px
     sementara ruangnya 114px, dan panah pilihannya belum terhitung.
     Karena ia digambar sesudah jam ambil,
     baris penuh ini tidak menambah tinggi bilah sedikit pun: tanggal dan
     jam ambil tetap berbagi satu baris seperti tanggal ambil dan tanggal
     kembali pada sewa lepas kunci. */
  #c_fgDurasi{flex:1 1 100%}
  .bc-fg .isian[type="date"]{padding-right:23px}
  .bc-fg .isi-tgl::after{right:5px;width:14px;height:14px;margin-top:-7px}
  /* Melebar satu baris penuh: di situ ruangnya ada, dan tombol utama
     selebar bilah lebih mudah dijangkau jempol daripada persegi 52px di
     satu sudut. Katanya ikut muncul kembali. */
  .bc-tbl{flex:1 1 100%;width:auto;min-width:0;padding:0 18px;gap:9px}
  .bc-tbl-teks{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
}

/* Bilah ringkas. Bilah penuh berdiri 87px di layar lebar tetapi 271px di
   ponsel — sepertiga layar yang terpakai terus-menerus kalau ia menempel di
   sana. Maka di bawah 1000px yang menempel bukan bilahnya, melainkan
   ringkasan setinggi satu baris: tanggal yang sedang berlaku, lamanya,
   layanannya, dan satu tombol yang membawa kembali ke bilah penuhnya.
   Ia mengapung di atas isi, bukan ikut mengalir, supaya kemunculannya tidak
   mendorong katalog turun setengah baris. */
.bilah-ringkas{display:none}
@media (max-width:999px){
  .bilah-cari{position:static;box-shadow:none}
  .bilah-ringkas:not([hidden]){display:block;position:fixed;left:0;right:0;top:var(--kepala-h,64px);z-index:2;
    padding:0 16px;pointer-events:none}
  .br-dalam{pointer-events:auto;width:100%;max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:10px;
    min-height:52px;padding:7px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);
    box-shadow:0 12px 26px -16px rgba(60,44,8,.6);cursor:pointer;font:inherit;color:inherit;text-align:left}
  .br-dalam:hover{border-color:var(--tepi)}
  .br-teks{flex:1;min-width:0}
  .br-teks b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .br-teks small{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .br-ubah{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
    color:var(--brand-ink);background:var(--brand-wash);border-radius:99px;padding:6px 11px}
  .br-ubah svg{flex-shrink:0}
}
/* Baris keterangan di dalam bilah: sampai kapan mobilnya dipakai di kiri,
   berapa yang tersedia di kanan. Melebar penuh supaya ia selalu jadi baris
   terakhir bilahnya, berapa pun isian yang membungkus di atasnya. */
.bilah-ket{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:2px 2px 0;font-size:13px}
.bilah-ket #c_lama{color:var(--ok);font-weight:500}
.bilah-ket #c_lama[data-nada="sepi"]{color:var(--ink-3);font-weight:400}
.bk-jumlah{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.bk-jumlah:empty{display:none}
/* Sebaris dengan keterangan lamanya, bukan di bawahnya: baris tersendiri
   akan menambah tinggi yang disediakan keterangan ini untuk selamanya,
   padahal ia hanya muncul di ujung daftar durasi. */
.bk-wa{color:var(--ink-3)}
.bk-wa:empty{display:none}
/* Kabar yang paling ingin didengar pemesan pada tahap ini: tidak ada yang
   harus dibayar lebih dulu. Dicetak seperti keterangan kaki — 13px, tinta
   paling pucat — ia terbaca seperti syarat dan ketentuan, justru pesan
   yang paling sering dilewati mata. */
.bayar-tanpa-dp{margin:-2px 0 12px;font-size:14.5px;font-weight:700;color:var(--ink)}
.bk-wa a{color:var(--brand-ink);font-weight:600}
@media (max-width:620px){ .bk-jumlah{margin-left:0} }
/* "mulai" sebelum angkanya: harga itu benar untuk tanggal contoh yang
   sedang tampil, bukan janji untuk tanggal yang belum dipilih. */
.harga-baris .per .mulai{font-size:12px;font-weight:500;color:var(--ink-3);letter-spacing:.02em}

/* ===================================================================
   Bilah saring katalog: kapasitas, urutan harga, dan "tersedia saja".

   Ketiganya bekerja pada hasil yang sudah di tangan — tidak ada permintaan
   baru ke server — sehingga menekannya berakibat seketika. Karena itu pula
   ia tidak ikut menempel: yang menempel bilah tanggal, yang memang
   menentukan permintaan; bilah ini dipakai sekali di awal.

   Ketiganya dulu memakai pil yang bentuknya sama persis, padahal
   pekerjaannya berbeda: yang satu memilih satu dari beberapa, yang satu
   membalik arah, yang satu menyala atau mati. Bentuk yang seragam tidak
   mengatakan apa-apa, jadi masing-masing kini memakai bentuk yang memang
   sudah dikenali sebagai pekerjaan itu.
   =================================================================== */
.saring{margin:12px 2px 4px}
.saring:empty{display:none}
.alat{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:8px 10px;
  box-shadow:0 1px 2px rgba(60,44,8,.05)}
.alat-zona{display:flex;align-items:center;gap:8px;min-width:0}
.alat-kanan{margin-left:auto}
.alat-label{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;flex:none}
.alat-pisah{width:1px;align-self:stretch;background:var(--rule);margin:2px 0}

/* Kapasitas: segmen tersambung, sama seperti pemilih layanan di bilah
   tanggal — satu pertanyaan, bukan empat tombol yang bertetangga. */
.segmen-saring{display:flex;border:1px solid var(--tepi);border-radius:10px;overflow:hidden;background:var(--surface-2)}
/* Lebar bilah saring dikunci ke yang terlebar dari kedua bahasa (ID: segmen 183px,
   tombol urut 161px), supaya tulisan "All" atau "Price: lowest" tidak menggeser kontrol di sebelahnya. */
.segmen-saring{min-width:184px}
.sg{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border:0;
  background:none;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:500;
  white-space:nowrap;cursor:pointer}
.sg + .sg{border-left:1px solid var(--rule)}
.sg:hover{color:var(--ink);background:var(--raise)}
.sg b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3)}
.sg[aria-checked="true"]{background:var(--ink);color:var(--surface);font-weight:700;border-left-color:transparent}
.sg[aria-checked="true"]:hover{background:var(--ink)}
.sg[aria-checked="true"] b{color:var(--surface);opacity:.7}
.sg:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* Urutan harga: setelan yang punya nilai. Namanya di kiri, nilainya
   ditebalkan di kanan — "Termurah dulu" saja bisa dibaca sebagai keadaan
   sekarang maupun sebagai perintah. */
.alat-setel{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;
  border:1px solid var(--tepi);border-radius:10px;background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.alat-setel svg{flex:none;color:var(--ink-3)}
.alat-setel{min-width:161px}
.alat-sakelar{min-width:161px}  /* "Tersedia saja" 156px, "Available only" 161px */
.alat-setel u{text-decoration:none;font-weight:700;color:var(--ink)}
.alat-setel:hover{border-color:var(--ink-3)}
.alat-setel:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* Tersedia saja: sakelar. Keadaannya terbaca dari tombol yang berpindah
   sisi, bukan hanya dari warnanya — yang tidak membedakan warna pun tahu. */
.alat-sakelar{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 13px 0 11px;
  border:1px solid var(--tepi);border-radius:10px;background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.alat-sakelar .rel{width:38px;height:22px;border-radius:99px;background:var(--raise);
  position:relative;flex:none;transition:background .15s}
.alat-sakelar .rel::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.alat-sakelar.on{border-color:var(--ok);color:var(--ink);font-weight:600}
.alat-sakelar.on .rel{background:var(--ok)}
.alat-sakelar.on .rel::after{transform:translateX(16px)}
.alat-sakelar:hover{border-color:var(--ink-3)}
.alat-sakelar.on:hover{border-color:var(--ok)}
.alat-sakelar:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* Di tema gelap --raise dan --surface hampir sewarna dengan kartu, jadi rel
   dan kenopnya lenyap. Relnya diberi garis tepi dan kenopnya terang. */
:root[data-theme="dark"] .alat-sakelar .rel{background:var(--rule-2);box-shadow:inset 0 0 0 1px var(--tepi)}
:root[data-theme="dark"] .alat-sakelar .rel::after{background:var(--ink-2)}
:root[data-theme="dark"] .alat-sakelar.on .rel{background:var(--ok);box-shadow:none}
:root[data-theme="dark"] .alat-sakelar.on .rel::after{background:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .alat-sakelar .rel{background:var(--rule-2);box-shadow:inset 0 0 0 1px var(--tepi)}
  :root:not([data-theme="light"]) .alat-sakelar .rel::after{background:var(--ink-2)}
  :root:not([data-theme="light"]) .alat-sakelar.on .rel{background:var(--ok);box-shadow:none}
  :root:not([data-theme="light"]) .alat-sakelar.on .rel::after{background:var(--ink)}
}

/* Pembatal: garis putus-putus, karena ia mengembalikan — bukan menyetel.
   Muncul hanya ketika memang ada yang bisa dibatalkan. */
.alat-hapus{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px dashed var(--tepi);border-radius:10px;background:transparent;color:var(--ink-3);
  font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.alat-hapus:hover{color:var(--crit);border-color:var(--crit)}
.alat-hapus:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.hp-pendek{display:none}

@media (pointer:coarse){ .sg,.alat-setel,.alat-sakelar,.alat-hapus{min-height:44px} }

/* Di layar sempit seluruh alat digeser mendatar sebagai satu kotak. Karena
   ia memang satu kotak — bukan enam tombol lepas — tepinya yang terpotong
   sendiri mengatakan bahwa barisnya masih berlanjut. */
@media (max-width:620px){
  .saring{overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-right:-16px;padding-right:16px}
  .saring::-webkit-scrollbar{display:none}
  .alat{flex-wrap:nowrap;width:max-content;gap:8px;padding:7px 9px}
  .alat-zona{flex:none}
  .alat-kanan{margin-left:0}
  .hp-panjang{display:none}
  .hp-pendek{display:inline}
}
.tautan-saring{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tautan-saring:hover{color:var(--brand-hover)}

/* ---------- ulasan setelah sewa selesai ----------
   Bintang adalah tombol radio 44px: satu ketuk jari, terbaca pembaca layar
   ("4 / 5, Baik"). Warnanya dari token merek, jadi ikut tema gelap. */
.jebakan{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.bintang-baris{display:flex;gap:2px;align-items:center}
.bintang-baris.besar{gap:6px;margin-top:10px}
.bintang{display:inline-grid;place-items:center;width:40px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--tepi);border-radius:8px}
.bintang svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.bintang-baris.besar .bintang{width:52px;height:52px}
.bintang-baris.besar .bintang svg{width:40px;height:40px}
.bintang.on{color:var(--brand)}
.bintang.on svg{fill:currentColor}
.bintang:focus-visible{outline:3px solid var(--brand);outline-offset:1px}
@media (hover:hover){ .bintang-baris:not(.statis) .bintang:hover{color:var(--brand)} }
.bintang-baris.statis .bintang{cursor:default;width:26px;height:26px}
.bintang-baris.statis .bintang svg{width:22px;height:22px}
.bintang-baris.besar.statis .bintang{width:40px;height:40px}
.bintang-baris.besar.statis .bintang svg{width:34px;height:34px}
.u-label-nilai{margin-top:4px;font-weight:600;color:var(--ink-2);min-height:22px}
.ulasan-lanjut{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.ulasan-lanjut:empty{display:none}
.u-judul{font-size:17px;margin-bottom:10px;line-height:1.35}
.u-aspek{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--rule)}
.u-aspek:first-of-type{border-top:0}
.u-aspek > span{font-size:15px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--tepi);background:var(--surface);color:var(--ink);
  font:inherit;font-size:14.5px;cursor:pointer}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{border:2px solid var(--ink);background:var(--brand-wash);font-weight:700;padding:0 13px}
.chip:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.u-masalah .chip[aria-checked="true"]{border-color:var(--warn);background:var(--warn-wash)}
.skala{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.skala .chip{padding:6px 0 5px;min-width:0;border-radius:8px;min-height:58px;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1}
.skala .chip .nps-wajah{width:22px;height:22px;flex:none}
/* Wajah diberi warna lembut per kelompok (kecewa, netral, senang); angka tetap
   warna teks, dan kelompoknya juga terbaca dari bentuk mulutnya. */
.skala .nps-d .nps-wajah{color:var(--crit)}
.skala .nps-p .nps-wajah{color:var(--warn)}
.skala .nps-r .nps-wajah{color:var(--ok)}
.skala .chip[aria-checked="true"]{padding:5px 0 4px}
.skala-ujung{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:400px){ .skala{grid-template-columns:repeat(6,minmax(0,1fr))} }
.u-centang{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:15px;cursor:pointer}
.u-centang input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand);flex-shrink:0}
.ulasan-selesai{text-align:center}
.ulasan-selesai .bintang-baris{justify-content:center}
.kartu-ulasan{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kartu-ulasan.ajak{border-color:var(--brand);background:var(--brand-wash)}
/* ---------- Halaman panduan (landing.js): remah roti, daftar mobil, kartu layanan ---------- */
.lp-remah{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);margin-bottom:4px}
.lp-remah a{color:var(--ink-2);text-decoration:none;font-weight:600}
.lp-remah a:hover{color:var(--brand)}
.lp-aksi{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.lp-aksi .lp-pesan,.pv-kontak .lp-pesan{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.lp-armada{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lp-mobil{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:14px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:14px}
.lp-mobil b{display:block;font-size:16px;color:var(--ink)}
.lp-mobil div>span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.lp-harga{display:flex;flex-wrap:wrap;gap:6px 14px}
.lp-harga span{font-size:14px;color:var(--ink-2);margin:0}
.lp-harga b{display:inline;font-family:var(--mono);font-size:15px;color:var(--ink)}
a.lp-tautan{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.lp-tautan:hover{border-color:var(--brand);transform:translateY(-2px)}
.lp-lanjut{margin:10px 0 0;font-weight:700;color:var(--brand)}
.lp-kaitan{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lp-kaitan a{display:inline-block;padding:9px 16px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none}
.lp-kaitan a:hover{border-color:var(--brand);color:var(--brand)}
.lp-testi{margin:0}
.lp-testi blockquote{margin:0 0 10px;font-size:15px;line-height:1.55}
.lp-testi figcaption{font-size:13px;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){a.lp-tautan{transition:none}a.lp-tautan:hover{transform:none}}

/* ---------- Disclaimer: satu potongan per sewa, yang terbesar yang dipakai ----------
   Bentuk penuh (langkah Data penyewa) memakai token tema supaya terbaca di
   terang dan gelap; bentuk ringkas ada di dalam kartu gelap promo dan hadiah. */
.cat-besar{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;
  background:var(--info-wash);border:1px solid color-mix(in srgb,var(--info) 30%,transparent);border-left:4px solid var(--info)}
.cat-besar-ikon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--info);color:var(--on-brand,#fff)}
.cat-besar-isi{min-width:0}
.cat-besar-isi b{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
.cat-besar-isi p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.cat-besar-contoh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px}
.cat-besar-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cat-pil{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px;padding:6px 10px;border-radius:999px;font-size:12.5px;font-weight:700;border:1.5px solid var(--rule)}
.cat-pil i{font-style:normal;font-weight:600;color:var(--ink-3)}
.cat-pil.kalah{background:var(--surface);color:var(--ink-3)}
.cat-pil.kalah s{text-decoration-thickness:1.5px}
.cat-pil.menang{background:var(--ok-wash);border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ink)}
.cat-pil.menang i{color:var(--ok)}
.cat-pil em{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:11.5px;font-weight:800;color:#fff;background:var(--ok);padding:2px 8px;border-radius:999px}
:root[data-theme="dark"] .cat-pil em{color:#06251c}
.cat-lawan{font-size:12px;font-weight:700;color:var(--ink-3)}
.cat-besar.ringkas{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:9px 12px;border-radius:12px;border:1px dashed rgba(255,255,255,.4);
  background:rgba(255,255,255,.07);font-size:12.5px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.92)}
.cat-besar.ringkas svg{flex:none}
@media (max-width:560px){
  .cat-besar{padding:12px}.cat-besar-ikon{width:34px;height:34px}
  .cat-besar-contoh{flex-direction:column;align-items:flex-start;gap:6px}
  .cat-lawan{margin-left:14px}
}

/* ---------- Promo: seksi "Hemat X%" di bawah bilah pencarian ----------
   Saudara dari seksi hadiah ulasan, dengan palet panas (merah muda → ungu),
   lencana angka besar yang berdenyut pelan, dan stiker pil di sudut.
   Kelas berawalan pm- (promo-* sudah dipakai kartu mobil). */
.pm-sek{margin:18px 0 0}
.pm-kartu{--pm-a:#3b0a3d;--pm-b:#7a1b5e;--pm-c:#ff2e63;--pm-d:#ffd166;--pm-e:#9b5cff;
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;
  padding:30px 34px;border-radius:26px;color:#fff;isolation:isolate;
  background:radial-gradient(800px 380px at 110% -10%,rgba(255,46,99,.55),transparent 60%),
    radial-gradient(700px 360px at -10% 120%,rgba(155,92,255,.5),transparent 60%),
    linear-gradient(135deg,var(--pm-a),var(--pm-b));
  box-shadow:0 30px 60px -30px rgba(59,10,61,.75)}
.pm-kartu::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 10px,transparent 10px 24px)}
.pm-kartu::after{content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:hadiah-kilau 7s ease-in-out infinite}
/* Stiker: pil putih dengan titik berdenyut, sedikit miring — bukan pita. */
.pm-stiker{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--pm-a);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;transform:rotate(-4deg);box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.pm-stiker i{width:8px;height:8px;border-radius:50%;background:var(--pm-c);box-shadow:0 0 0 0 rgba(255,46,99,.6);animation:pm-titik 1.8s ease-out infinite}
.pm-stiker.buruan{background:var(--pm-d)}
@keyframes pm-titik{0%{box-shadow:0 0 0 0 rgba(255,46,99,.6)}100%{box-shadow:0 0 0 10px rgba(255,46,99,0)}}
.pm-atas{margin:0 0 8px;padding-right:110px;font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--pm-d)}
.pm-judul{font-family:var(--sans);font-weight:900;font-size:clamp(30px,4.2vw,52px);line-height:1;letter-spacing:-.03em;margin:0;color:#fff}
.pm-sorot{background:linear-gradient(90deg,var(--pm-d),var(--pm-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-ket{margin:14px 0 0;max-width:46ch;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.88)}
.pm-chip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pm-chip span{border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;backdrop-filter:blur(4px)}
.pm-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:12px 20px;border-radius:999px;font-weight:800;font-size:15px;
  color:var(--pm-a);background:var(--pm-d);text-decoration:none;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);transition:transform .15s}
.pm-cta:hover{transform:translateY(-2px)}
.pm-kanan{display:flex;justify-content:center}
.pm-lencana{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:min(100%,260px);aspect-ratio:1;border-radius:50%;
  color:#fff;text-align:center;padding:20px;
  background:radial-gradient(circle at 30% 30%,var(--pm-c),#c2185b 55%,#7a1b5e 100%);
  box-shadow:0 0 0 10px rgba(255,255,255,.08),0 0 0 22px rgba(255,255,255,.04),0 30px 60px -20px rgba(0,0,0,.6);
  animation:pm-denyut 3.5s ease-in-out infinite}
@keyframes pm-denyut{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.04) rotate(-6deg)}}
.pm-lencana-label{font-family:var(--mono);font-size:12px;letter-spacing:.3em;font-weight:700;opacity:.85}
.pm-lencana-angka{font-family:var(--sans);font-weight:900;font-size:clamp(42px,5.5vw,64px);line-height:1;letter-spacing:-.04em}
.pm-lencana-sub{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--pm-d);color:var(--pm-a);padding:4px 10px;border-radius:999px;margin-top:4px}
@media (max-width:860px){
  .pm-kartu{grid-template-columns:1fr;padding:24px 18px 22px;border-radius:22px}
  .pm-stiker{top:14px;right:14px}
  .pm-atas{padding-right:0;margin-top:40px}
  .pm-kanan{order:1;margin-top:20px}
  .pm-lencana{width:190px}
}
@media (prefers-reduced-motion:reduce){.pm-kartu::after,.pm-lencana,.pm-stiker i{animation:none}.pm-cta{transition:none}}

/* ---------- Hadiah ulasan: banner beranda "Review → Voucher" ----------
   Kartu gelap bergradasi dengan angka besar dan tiket miring; warnanya
   sendiri (--hd-*) supaya sama menohoknya di tema terang dan gelap. */
.hadiah{max-width:1320px;margin:36px auto 0;padding:0 16px;box-sizing:border-box}
.hadiah-kartu{--hd-a:#0b1b3a;--hd-b:#17307a;--hd-c:#ff5c7a;--hd-d:#ffd166;--hd-e:#5ef2d6;
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;
  padding:34px 36px;border-radius:28px;color:#fff;isolation:isolate;
  background:radial-gradient(900px 400px at 110% -20%,rgba(94,242,214,.35),transparent 60%),
    radial-gradient(700px 360px at -10% 120%,rgba(255,92,122,.45),transparent 60%),
    linear-gradient(135deg,var(--hd-a),var(--hd-b));
  box-shadow:0 30px 60px -30px rgba(11,27,58,.7)}
.hadiah-kartu::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 10px,transparent 10px 24px)}
.hadiah-kartu::after{content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:hadiah-kilau 6s ease-in-out infinite}
@keyframes hadiah-kilau{0%,55%{left:-40%}100%{left:130%}}
.hadiah-stiker{position:absolute;top:18px;right:18px;background:var(--hd-d);color:#1a1200;font-weight:800;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;transform:rotate(6deg);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hadiah-atas{margin:0 0 8px;font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--hd-e)}
.hadiah-judul{font-family:var(--sans);font-weight:900;font-size:clamp(32px,4.6vw,56px);line-height:1;letter-spacing:-.03em;margin:0;color:#fff}
.hadiah-sorot{background:linear-gradient(90deg,var(--hd-d),var(--hd-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.hadiah-ket{margin:16px 0 0;max-width:46ch;font-size:16px;line-height:1.55;color:rgba(255,255,255,.86)}
.hadiah-chip{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hadiah-chip span{border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;backdrop-filter:blur(4px)}
.hadiah-kanan{display:flex;flex-direction:column;gap:18px;align-items:center}
.hadiah-tiket{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:min(100%,300px);padding:22px 28px;border-radius:22px;transform:rotate(-4deg);color:#1a1200;
  background:linear-gradient(135deg,var(--hd-d),#ffb13d);box-shadow:0 24px 50px -18px rgba(0,0,0,.55);
  -webkit-mask:radial-gradient(14px at 0 50%,transparent 97%,#000) 0/51% 100% no-repeat,radial-gradient(14px at 100% 50%,transparent 97%,#000) 100%/51% 100% no-repeat;
  mask:radial-gradient(14px at 0 50%,transparent 97%,#000) 0/51% 100% no-repeat,radial-gradient(14px at 100% 50%,transparent 97%,#000) 100%/51% 100% no-repeat;
  animation:hadiah-goyang 5s ease-in-out infinite}
@keyframes hadiah-goyang{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}
.hadiah-tiket-label{font-family:var(--mono);font-size:12px;letter-spacing:.3em;font-weight:700;opacity:.75}
.hadiah-angka{font-family:var(--sans);font-weight:900;font-size:clamp(48px,6vw,72px);line-height:1;letter-spacing:-.04em}
.hadiah-tiket-sub{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.hadiah-langkah{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%}
.hadiah-langkah li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px}
.hadiah-langkah b{display:block;font-size:14px}
.hadiah-langkah small{display:block;font-size:12.5px;color:rgba(255,255,255,.72)}
.hadiah-no{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;color:#1a1200;background:var(--hd-e)}
.hadiah-langkah li:nth-child(2) .hadiah-no{background:var(--hd-d)}
.hadiah-langkah li:nth-child(3) .hadiah-no{background:var(--hd-c);color:#fff}
@media (max-width:860px){
  .hadiah-kartu{grid-template-columns:1fr;padding:26px 20px 22px;border-radius:22px}
  .hadiah-stiker{top:14px;right:14px}
  .hadiah-tiket{transform:rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){.hadiah-kartu::after,.hadiah-tiket{animation:none}}

/* Voucher hadiah ulasan: kartu kode untuk sewa berikutnya. Gayanya satu
   keluarga dengan banner beranda. */
.kartu-voucher{margin-top:12px;text-align:center;border:0;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(500px 260px at 110% -20%,rgba(94,242,214,.35),transparent 60%),radial-gradient(400px 240px at -10% 120%,rgba(255,92,122,.45),transparent 60%),linear-gradient(135deg,#0b1b3a,#17307a);
  box-shadow:0 24px 50px -24px rgba(11,27,58,.7)}
.kartu-voucher h2{color:#fff}
.kartu-voucher .bantu{color:rgba(255,255,255,.8)}
.kartu-voucher.ajak{text-align:left;padding:12px 16px;background:linear-gradient(135deg,#17307a,#0b1b3a);box-shadow:none}
.kartu-voucher.ajak p{color:#fff}
.kartu-voucher.ajak p{margin:0;font-size:14px}
.kartu-voucher-ikon{color:#ffd166;margin-bottom:6px}
.kartu-voucher-potongan{margin:6px 0 12px;font-family:var(--sans);font-size:clamp(30px,8vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(90deg,#ffd166,#ff5c7a);-webkit-background-clip:text;background-clip:text;color:transparent}
.kartu-voucher-potongan small{display:block;margin-top:4px;font-size:13px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.75);-webkit-text-fill-color:rgba(255,255,255,.75)}
.kartu-voucher-kode{display:inline-flex;align-items:center;gap:10px;background:#ffd166;color:#1a1200;border-radius:12px;padding:10px 14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.kartu-voucher-kode b{font-size:22px;letter-spacing:.1em}
.kartu-voucher-kode .tombol.kedua{background:#1a1200;color:#ffd166;border-color:transparent}
.kartu-voucher .bantu{margin-top:10px}
.kartu-ulasan .bintang-baris{margin-top:6px;margin-left:-4px}

/* ---------- kartu "kalau menyewa lagi" ---------- */
.pref-pilihan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pref-pilihan li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2)}
.pref-urut{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);
  font-weight:700;font-size:13px;flex-shrink:0}
.pref-nama{flex:1;min-width:0;font-weight:600;font-size:15px}
.pref-utama{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--brand-wash);color:var(--brand-ink);
  font-size:12px;font-weight:700}
.pref-hapus{width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--ink-3);font-size:22px;line-height:1;cursor:pointer}
.pref-hapus:hover{color:var(--crit);background:var(--surface)}
.pref-pemilih{margin-top:10px;padding:12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface-2)}
.pref-daftar{margin-top:10px;max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.pref-merek-nama{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.pref-daftar .chip[disabled]{opacity:.45;cursor:not-allowed}
.pref-lain{margin-top:16px}
.pref-lain summary,.pref-kartu > summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.pref-kartu > summary.u-judul{margin-bottom:0}
.pref-atr{margin-top:12px}
.pref-atr > span{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}

/* Kartu driver di formulir ulasan */
.u-driver-kepala{display:flex;gap:12px;align-items:flex-start}
.u-driver-ikon{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand)}
.u-driver .bintang-baris.besar{margin-top:14px}
.u-driver-rinci{margin-top:10px;border-top:1px solid var(--rule);padding-top:4px}

/* ---------- testimonial pelanggan (fase 3) ---------- */
.testimoni{margin-top:52px}
.testimoni-kepala{max-width:64ch;margin:0 auto 22px;display:grid;gap:8px;justify-items:center;text-align:center}
.testimoni-kepala h2{font-size:clamp(24px,3.6vw,36px);line-height:1.15}
.testimoni-daftar{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .testimoni-daftar{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .testimoni-daftar{grid-template-columns:repeat(3,minmax(0,1fr))} }
.testi{margin:0;display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--surface);border:1px solid var(--rule);border-radius:16px}
.testi-bintang{display:flex;gap:2px;font-size:16px;line-height:1;color:var(--tepi)}
.testi-bintang .on{color:var(--bintang)}
.testi blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.testi figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.testi figcaption span{color:var(--ink-3)}
.u-tarik{margin-top:16px;font-size:13.5px;color:var(--ink-2)}

/* ---------- rekening tujuan transfer ---------- */
.rek-kartu{border:1px solid var(--rule);border-radius:14px;background:var(--surface);overflow:hidden}
.rek-daftar{list-style:none;margin:0;padding:0}
.rek-baris{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;
  border-top:1px solid var(--rule);position:relative}
.rek-baris:first-child{border-top:0}
.rek-baris::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 3px 3px 0;background:var(--bank)}
.rek-bank{justify-self:start;font-weight:700;font-size:13px;letter-spacing:.02em;padding:4px 10px;border-radius:999px;
  color:var(--bank-tinta,#fff);background:var(--bank);border:0;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.rek-no{font-size:16.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Baris rekening adalah satu tombol besar: ketuk untuk memilih sekaligus
   menyalin nomornya. Statusnya di kanan berganti: Pilih & salin → Dipilih →
   Tersalin, dengan ikon yang ikut berganti. */
.rek-pilih{width:100%;min-height:60px;background:none;border:0;border-top:1px solid var(--rule);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.rek-pilih:first-child{border-top:0}
.rek-pilih:hover{background:var(--surface-2)}
.rek-pilih[aria-checked="true"]{background:var(--brand-wash)}
.rek-pilih:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.rek-salin{display:inline-flex;align-items:center;gap:7px;justify-self:end;min-height:40px;padding:0 12px;border-radius:10px;
  border:1.5px solid var(--rule-2);background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s}
.rek-salin svg{flex:none}
.rek-salin svg + svg{display:none}
.rs-pilih,.rs-ok{display:none}
.rek-pilih[aria-checked="true"] .rek-salin{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.rek-pilih[aria-checked="true"] .rek-salin svg:first-child{display:none}
.rek-pilih[aria-checked="true"] .rek-salin svg + svg{display:inline}
.rek-pilih[aria-checked="true"] .rs-salin{display:none}
.rek-pilih[aria-checked="true"] .rs-pilih{display:inline}
.rek-pilih.tersalin .rek-salin{background:var(--ok);border-color:var(--ok);color:var(--on-brand)}
.rek-pilih.tersalin .rek-salin svg:first-child,.rek-pilih.tersalin .rek-salin svg{display:none}
.rek-pilih.tersalin .rek-salin svg + svg{display:inline}
.rek-pilih.tersalin .rs-salin,.rek-pilih.tersalin .rs-pilih{display:none}
.rek-pilih.tersalin .rs-ok{display:inline}
.rek-pilih.gagal .rek-salin{background:var(--crit-wash);border-color:var(--crit);color:var(--crit)}
.rek-an-baris{grid-column:2 / -1;margin-top:-6px}
.rek-an{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;background:var(--surface-2);border-top:1px solid var(--rule)}
.rek-an b{font-size:16px;color:var(--ink)}
.rek-an-ket{margin-top:4px;font-size:12.5px}
.rek-catatan{padding:0 14px 12px;margin:0;background:var(--surface-2)}
@media (max-width:480px){
  .rek-baris{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .rek-bank{grid-column:1}
  .rek-no{grid-column:1;grid-row:2;font-size:16px}
  .rek-salin{grid-column:2;grid-row:1 / span 2;align-self:center}
  .rek-salin-teks{display:none}
  .rek-an-baris{grid-column:1 / -1;margin-top:0}
}
/* 320–360px: nomor rekening panjang (13+ digit) tetap satu baris. */
@media (max-width:360px){
  .rek-baris{padding:12px 10px 12px 14px;column-gap:8px}
  .rek-no{font-size:15px;letter-spacing:0}
  .rek-salin{min-width:42px;padding:0 10px}
}
.rek-gagal{display:none;font-weight:700;color:var(--crit)}
@media (max-width:420px){ .rek-gagal{display:inline} }

/* ---------- rekening tujuan yang dipilih pelanggan ---------- */
.ke-daftar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.ke-daftar{grid-template-columns:repeat(2,1fr)}}
.ke-pilih{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:8px 12px;border-radius:12px;
  border:1px solid var(--tepi);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ke-pilih b{font-size:14.5px;display:inline-flex;align-items:center;gap:7px}
.ke-pilih b::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--bank);box-shadow:0 0 0 2px var(--surface)}
.ke-pilih span{font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
.ke-pilih[aria-checked="true"]{border-color:transparent;background:var(--brand-grad);color:var(--on-brand);box-shadow:var(--brand-glow)}
.ke-pilih[aria-checked="true"] span{color:var(--on-brand);opacity:.85}
.ke-pilih:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ke-pilih[aria-checked="true"] b::before{box-shadow:0 0 0 2px var(--on-brand)}

/* ---------- cara bayar: transfer atau scan QRIS ---------- */
.cara-bayar{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:16px 0 4px;padding:4px;border:1px solid var(--rule);
  border-radius:12px;background:var(--surface-2)}
.cara-bayar button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:9px;
  background:none;color:var(--ink-2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease}
.cara-bayar button svg{flex:none;color:var(--ink-3)}
.cara-bayar button:hover{background:var(--surface);color:var(--ink)}
.cara-bayar .cb-centang{display:none}
/* Tab terpilih memakai gradasi yang sama dengan chip bank terpilih, jadi
   pelanggan langsung tahu sedang berada di cara bayar yang mana. */
.cara-bayar button[aria-checked="true"]{background:var(--brand-grad);color:var(--on-brand);font-weight:700;box-shadow:var(--brand-glow)}
.cara-bayar button[aria-checked="true"] svg{color:var(--on-brand)}
.cara-bayar button[aria-checked="true"] .cb-centang{display:block}
.cara-bayar span{white-space:nowrap}
/* Di layar HP sempit, tanda centang dilepas agar label tetap satu baris;
   gradasi tab sudah cukup jelas menandai pilihan. */
@media (max-width:420px){
  .cara-bayar button{gap:6px;padding:0 6px;font-size:14px}
  .cara-bayar button[aria-checked="true"] .cb-centang{display:none}
}
.cara-bayar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.qris-blok{margin-top:14px}
/* QRIS selalu di atas putih: pemindai butuh kontras penuh, juga di mode gelap. */
.qris-gambar{margin:12px auto 12px;max-width:340px;padding:14px;border:1px solid var(--rule);border-radius:16px;background:#fff;text-align:center}
.qris-gambar img{display:block;width:100%;height:auto;image-rendering:auto}
.qris-gambar figcaption{margin-top:8px;font-size:13px;color:var(--ink-2)}
.qris-langkah{margin:14px 0 0;padding-left:20px;font-size:14.5px;color:var(--ink-2);display:grid;gap:6px}
.qris-langkah b{color:var(--ink)}

/* Disclaimer biaya tambahan sewa lepas kunci (hargaBlok di portal.js). */
.catatan-biaya{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--surface-2);border-left:3px solid var(--brand);font-size:14px;line-height:1.5}
.catatan-biaya b{display:block;margin-bottom:2px}
.catatan-biaya span{color:var(--ink-2)}

/* =====================================================================
   Tampilan "Biru Laut" (Okt 2026)
   Kepala dan hero biru laut, badan putih kebiruan, kartu putih bersih,
   tombol tindakan koral (--brand-grad). Cadangan tampilan sebelumnya:
   tag git portal-sebelum-biru-laut.
   ===================================================================== */
body{overflow-x:clip}
/* Kepala halaman: pita biru di semua halaman portal. */
.kepala{border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.kepala .merek,.kepala .merek:hover,.kepala .tautan-lacak{color:#FFFFFF}
.kepala .merek small{color:rgba(255,255,255,.82)}
.kepala .ikon-lacak{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#FFFFFF}
.kepala .ikon-lacak:hover{background:#FFFFFF;border-color:#FFFFFF;color:#0A3A66}
.kepala .bahasa{background:transparent;border-color:rgba(255,255,255,.42)}
.kepala .bahasa button,.kepala .bahasa a{color:rgba(255,255,255,.86)}
.kepala .bahasa button.on,.kepala .bahasa a[aria-current]{background:#FFFFFF;color:#0A3A66}
.kepala .bahasa button:not(.on):hover,.kepala .bahasa a:not([aria-current]):hover{color:#FFFFFF}
.kepala :focus-visible{outline-color:#FFFFFF}

/* Hero beranda: biru laut selebar layar. Kiri judul; kanan pemandangan
   Bali (bali-siluet.svg) dengan dua mobil tanpa bingkai dan janji di
   bawahnya, mengikuti desain yang disetujui pemilik. */
.hero-laut{grid-column:1 / -1;position:relative;display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:center;
  margin:-20px calc(50% - 50vw) 0;padding:28px calc(50vw - 50% + 4px) 92px;color:#FFFFFF;
  /* Latar: ilustrasi pemandangan Bali datar (bali-pemandangan.svg) di
     kanan, dengan biru tua pekat di kiri supaya judul kontras. */
  background:linear-gradient(90deg,#0A3F74 0%,#0B4A86 30%,rgba(11,74,134,.55) 46%,rgba(11,74,134,0) 62%),
    url("/portal/aset/bali-siluet.webp") right bottom / 100% auto no-repeat,#0B4A86}
:root[data-theme="dark"] .hero-laut{background:linear-gradient(90deg,#061A33 0%,#082A4E 30%,rgba(8,42,78,.6) 46%,rgba(8,42,78,.15) 62%),url("/portal/aset/bali-siluet.webp") right bottom / 100% auto no-repeat,#082A4E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-laut{background:linear-gradient(90deg,#061A33 0%,#082A4E 30%,rgba(8,42,78,.6) 46%,rgba(8,42,78,.15) 62%),url("/portal/aset/bali-siluet.webp") right bottom / 100% auto no-repeat,#082A4E}}
.hero-laut .beranda-kepala{padding:0}
.hero-laut .beranda-kepala h1{color:#FFFFFF;font-size:clamp(32px,5.2vw,58px);line-height:1.06;letter-spacing:-.012em;text-wrap:balance}
.hero-laut .beranda-kepala h1 .emas-kata{background:linear-gradient(180deg,#FFF3C4 0%,#F3D68A 42%,#D9A93E 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hero-laut .beranda-kepala h1{text-shadow:0 2px 16px rgba(0,0,0,.28)}
.hero-laut .beranda-kepala .lead.hero-subjudul{font-family:'Dancing Script',cursive;font-style:italic;font-size:clamp(22px,2.7vw,30px);font-weight:600;line-height:1.2;margin:6px 0 2px;max-width:none;background:linear-gradient(100deg,#B98A22 0%,#E9BE55 30%,#FFF3C4 45%,#F3D68A 55%,#D9A73A 75%,#A8781A 100%);background-size:220% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.hero-laut .beranda-kepala .lead.hero-subjudul{position:relative;display:inline-block;width:auto;max-width:100%}
.hero-laut .beranda-kepala .lead.hero-subjudul::after{content:"";position:absolute;left:18%;right:18%;bottom:-6px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent 0%,#C9A24A 20%,#FFF3C4 50%,#E9BE55 80%,transparent 100%);transform:rotate(-2deg);transform-origin:left center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
@keyframes subjudul-kilau{0%{background-position:100% 50%}100%{background-position:-100% 50%}}
@media (prefers-reduced-motion:no-preference){.hero-laut .beranda-kepala .lead.hero-subjudul{animation:subjudul-kilau 4.5s linear infinite}}
.hero-laut .beranda-kepala .lead,.hero-laut .beranda-kepala .lead *{color:#E4EEF8}
.hero-laut .beranda-kepala .lead{font-size:clamp(15.5px,1.5vw,19px);line-height:1.55;max-width:46ch}
.hero-laut .beranda-kepala .lead a{color:#FFFFFF}
/* Dua mobil sejajar, sama tinggi, alas rata; mobil kiri di depan. */
.hero-mobil{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;max-width:620px;margin:0 auto;padding-bottom:4px}
.hero-mobil img{display:block;height:auto;flex:0 0 auto;filter:drop-shadow(0 16px 14px rgba(2,14,30,.45))}
.hero-mobil .hm-kiri{width:54%;position:relative;z-index:2}
.hero-mobil .hm-kanan{width:54%;margin-left:-12%;position:relative;z-index:1;transform:translateY(-2%)}
.hero-mobil::after{content:"";position:absolute;left:4%;right:4%;bottom:0;height:10%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(2,14,30,.42),rgba(2,14,30,0));z-index:0}
.hero-laut .janji{margin:18px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.hero-laut .janji li{color:#FFFFFF;font-size:15px;line-height:1.45;font-weight:500}
.hero-laut .janji svg{width:24px;height:24px;padding:5px;margin-top:-1px;border-radius:50%;background:#7FE0C6;color:#063A2E}
/* Janji: di hero untuk layar lebar, di bawah katalog untuk ponsel. */
.hero-laut .janji-hero{display:none}
@media (min-width:900px){
  .hero-laut{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:36px;margin-top:-36px;padding-top:40px;padding-bottom:116px}
  .hero-laut .janji-hero{display:grid}
  .beranda > .janji{display:none}
}
@media (max-width:899px){
  .hero-mobil{max-width:420px}
  /* Di ponsel teks dan foto bertumpuk: lapisannya dibuat merata dari atas
     ke bawah, pekat di bagian judul. */
  .hero-laut{background:linear-gradient(180deg,#0A3F74 0%,#0B4A86 38%,rgba(11,74,134,.25) 62%,rgba(11,74,134,0) 75%),
    url("/portal/aset/bali-siluet.webp") 58% bottom / auto 52% no-repeat,#0B4A86}
}
/* Bilah pencarian: kartu putih yang menimpa tepi bawah hero. */
.bilah-cari{background:var(--surface);border:0;border-radius:20px;padding:14px;margin:-74px 2px 0;
  box-shadow:0 24px 60px -28px rgba(10,40,80,.5),0 2px 6px rgba(10,40,80,.06)}
@media (min-width:900px){.bilah-cari{margin-top:-86px;padding:16px 18px}}
.bc-seg{border:0;background:var(--raise);border-radius:14px;padding:4px;gap:4px}
.bc-seg label + label span{border-left:0}
.bc-seg span{border-radius:11px;font-weight:600;color:var(--ink)}
.bc-seg svg{color:var(--brand)}
.bilah-cari .isian{border-radius:12px}
.bc-tbl{border-radius:14px}

/* Katalog. */
/* isolation: lencana promo (z-index 2) di dalam kartu tetap di dalam kartu,
   sehingga tidak menembus bilah pencarian yang menempel (z-index 2). */
.mobil{border-radius:22px;border-color:var(--rule);box-shadow:0 14px 34px -24px rgba(10,40,80,.42);transition:transform .18s ease,box-shadow .2s ease;isolation:isolate}
.mobil:not(.habis):hover{transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(10,40,80,.5)}
.foto-blok:has(img){--ink-pelat:#0F2740;--ink-pelat-2:#3D5A78}
.spek-ikon{display:flex;flex-wrap:wrap;gap:7px}
.spek-ikon li{background:var(--raise);border-radius:10px;padding:6px 10px;font-weight:600;color:var(--ink-2)}
.spek-ikon svg{color:var(--brand)}
.harga-baris{border-top:1px dashed var(--rule);padding-top:12px}
.harga-baris .per{font-family:var(--sans);font-weight:800;font-size:21px}
.tombol{border-radius:12px}

/* Keunggulan dan kartu lain. */
.alasan{border-radius:20px}
.alasan-ikon{width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,var(--brand-wash),color-mix(in srgb,var(--brand-wash) 60%,var(--brand) 12%));color:var(--brand)}

/* Kaki halaman biru tua. */
.kaki{background:#0A2A4A;color:#D6E4F2;border-top:0;
  --ink:oklch(1.0000 0.0000 89.88);--ink-2:oklch(0.9126 0.0243 248.09);--ink-3:oklch(0.7983 0.0424 249.48);--rule:oklch(0.3468 0.0679 253.01);--rule-2:oklch(0.4129 0.0736 252.47);--tepi:oklch(0.5728 0.0618 251.29);--surface:oklch(0.3198 0.0739 251.80);--surface-2:oklch(0.3016 0.0740 252.69);--brand-wash:oklch(0.3579 0.0823 251.70);--brand-ink:oklch(1.0000 0.0000 89.88)}
.kaki h2{color:#FFFFFF}
.kaki a{color:#D6E4F2}
.kaki a:hover{color:#FFFFFF}
.kaki .tautan-pil{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#FFFFFF}
.kaki .tautan-pil svg{color:#9CCBF7}
.kaki .tautan-pil:hover{background:#FFFFFF;color:#0A2A4A}
.kaki .tautan-pil:hover svg{color:#0B5CA8}
:root[data-theme="dark"] .kaki{background:#061628}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kaki{background:#061628}}
@media (prefers-reduced-motion:reduce){.mobil{transition:none}.mobil:not(.habis):hover{transform:none}}
/* Pilihan layanan yang aktif: biru merek, bukan tinta pekat. */
.bc-seg input:checked + span{background:var(--brand);color:var(--on-brand);font-weight:700}
.bc-seg input:checked + span svg{color:currentColor}
:root[data-theme="dark"] .bc-seg input:checked + span{color:#0A1422}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bc-seg input:checked + span{color:#0A1422}}
.hero-mobil{isolation:isolate}
/* Layar lebar: kolom mobil lebih lebar dan mobil lebih besar. */
@media (min-width:900px){
  .hero-laut{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr)}
  .hero-mobil{max-width:700px}
  .hero-mobil .hm-kiri,.hero-mobil .hm-kanan{width:60%}
  .hero-mobil .hm-kanan{margin-left:-20%}
}

/* =====================================================================
   Penyempurnaan "Biru Laut" (sesuai desain pemilik, 13 Okt 2026)
   - Kepala dan hero satu gradasi mendatar yang sama, tanpa garis batas.
   - Hierarki huruf: judul serif besar, lead 18px, janji 15.5px.
   - Satu aksi utama: tombol Cari Mobil berteks, koral.
   - Sasaran sentuh >= 44px, jarak berkelipatan 8px, kontras WCAG.
   ===================================================================== */
:root{--laut-grad:linear-gradient(90deg,#0A3A6A 0%,#0C4782 38%,#115A9C 68%,#1A6AAD 100%)}
:root[data-theme="dark"]{--laut-grad:linear-gradient(90deg,#051528 0%,#072748 38%,#0B3A69 68%,#104A82 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--laut-grad:linear-gradient(90deg,#051528 0%,#072748 38%,#0B3A69 68%,#104A82 100%)}}

/* Kepala */
.kepala,:root[data-theme="dark"] .kepala{background:var(--laut-grad);box-shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kepala{background:var(--laut-grad)}}
.kepala-dalam{padding:12px 20px}
.kepala .merek b{font-size:20px;letter-spacing:.005em}
.kepala .merek small{letter-spacing:.2em;color:rgba(255,255,255,.78)}
.kepala-aksi{gap:8px}
/* Bahasa sebagai teks "ID | EN": yang aktif putih tebal, lainnya redup. */
.kepala .bahasa{border:0;background:none;border-radius:0;align-items:center}
.kepala .bahasa button,.kepala .bahasa a{min-width:40px;background:none;font:600 15px/1 var(--sans);letter-spacing:.02em;color:rgba(255,255,255,.62)}
.kepala .bahasa button.on,.kepala .bahasa a[aria-current]{background:none;color:#FFFFFF;font-weight:700}
.kepala .bahasa button + button,.kepala .bahasa a + a{position:relative}
.kepala .bahasa button + button::before,.kepala .bahasa a + a::before{content:"";position:absolute;left:0;top:50%;height:18px;margin-top:-9px;border-left:1.5px solid rgba(255,255,255,.45)}
.kepala .bahasa button:not(.on):hover,.kepala .bahasa a:not([aria-current]):hover{color:#FFFFFF}
/* Tema sebagai pil putih berteks. */
.kepala .pil-tema{width:auto;gap:8px;padding:0 16px;border-radius:999px;background:#FFFFFF;border-color:#FFFFFF;color:#0A3A66;font:600 14.5px/1 var(--sans)}
.kepala .pil-tema svg{width:19px;height:19px}
.kepala .pil-tema:hover{background:#E6F1FB;border-color:#E6F1FB;color:#0A3A66}
.tema-teks{white-space:nowrap;display:inline-block;min-width:87px}  /* lebar terlebar dari Mode terang / Light mode, supaya pil tidak bergeser saat bahasa diganti */
/* WhatsApp: lingkaran hijau resmi. */
/* Tombol WhatsApp memakai bentuk ikon lacak: garis netral, bukan hijau padat.
   Ikon putih di atas hijau #25D366 hanya 1,98:1, di bawah 3:1 yang disyaratkan
   untuk ikon bermakna. Hijau merek tidak dipakai di kepala supaya koral dan
   biru tetap satu-satunya aksen di layar. */
.kepala-wa{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule-2);transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.kepala-wa svg{width:22px;height:22px}
.kepala-wa:hover{background:var(--brand-wash);color:var(--brand-ink);border-color:var(--tepi)}
/* Tombol WhatsApp tetap memesan tempatnya di header ketika belum tampil; jika
   baru muncul setelah skrip berjalan, grup kanan header tidak ikut bergeser. */
.kepala-wa[hidden]{display:flex !important;visibility:hidden}
@media (max-width:620px){
  .kepala-dalam{padding:10px 14px}
  .kepala .merek small{display:none}
  .kepala .pil-tema{width:44px;padding:0;justify-content:center}
  .tema-teks{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .kepala .bahasa button,.kepala .bahasa a{min-width:34px;font-size:14px}
}
@media (max-width:380px){ .kepala .ikon-lacak:not(.pil-tema){display:none} }

/* Hero: gradasi yang sama dengan kepala, pemandangan di kanan. */
.hero-laut,:root[data-theme="dark"] .hero-laut{
  background:linear-gradient(90deg,rgba(10,58,106,.5) 0%,rgba(12,71,130,.14) 38%,rgba(12,71,130,0) 56%),
    url("/portal/aset/bali-siluet.webp") right bottom / 100% auto no-repeat,var(--laut-grad)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-laut{
  background:linear-gradient(90deg,rgba(5,21,40,.5) 0%,rgba(7,39,72,.14) 38%,rgba(7,39,72,0) 56%),
    url("/portal/aset/bali-siluet.webp") right bottom / 100% auto no-repeat,var(--laut-grad)}}
:root[data-theme="dark"] .hero-laut{
  background:linear-gradient(90deg,rgba(5,21,40,.5) 0%,rgba(7,39,72,.14) 38%,rgba(7,39,72,0) 56%),
    url("/portal/aset/bali-siluet.webp") right bottom / 100% auto no-repeat,var(--laut-grad)}
.hero-laut .beranda-kepala h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.6vw,58px);line-height:1.07;
  letter-spacing:-.015em;max-width:15ch;text-shadow:0 2px 24px rgba(3,18,36,.25)}
.hero-laut .beranda-kepala .lead{margin-top:16px;font-size:clamp(16px,1.45vw,19px);line-height:1.55;max-width:34rem;font-weight:400}
.hero-laut .beranda-kepala .lead,.hero-laut .beranda-kepala .lead *{color:#DCE9F7}
.hero-laut .beranda-kepala .lead b,.hero-laut .beranda-kepala .lead strong{color:#FFFFFF;font-weight:600}
.hero-laut .janji{gap:14px 16px;margin-top:22px}
.hero-laut .janji li{font-size:15.5px;line-height:1.45;color:#EAF2FB;font-weight:500;gap:12px}
.hero-laut .janji li{align-items:center;gap:12px}
.hero-laut .janji .judul{color:#E9C46A;font-weight:700}
.hero-laut .janji svg{width:32px;height:32px;padding:7px;margin-top:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 34%),radial-gradient(circle at 50% 55%,#1C3E6B 0%,#0B2446 62%,#061830 100%);color:#F6DC8E;stroke-width:3.2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 1.5px #F3D68A,0 0 0 3px #B8892F,0 6px 12px -4px rgba(0,0,0,.55),0 0 14px rgba(233,196,106,.25);filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
@media (min-width:900px){
  .hero-laut{padding-top:48px;padding-bottom:124px;column-gap:40px}
}

/* Kotak pencarian */
.bilah-cari{border-radius:18px;padding:16px 18px 12px;gap:12px;
  box-shadow:0 22px 48px -24px rgba(8,36,70,.42),0 1px 3px rgba(8,36,70,.08)}
.bc-seg{background:var(--raise);border-radius:12px;padding:4px}
.bc-seg span{min-height:50px;padding:0 18px;border-radius:9px;font-size:15px;font-weight:600;color:var(--ink)}
.bc-seg svg{color:var(--brand-ink)}
.bc-seg input:checked + span{background:var(--brand-ink);color:var(--on-brand);box-shadow:0 4px 10px -6px rgba(11,74,134,.8)}
.bc-seg input:focus-visible + span{outline:3px solid color-mix(in srgb,#0B4A86 45%,transparent);outline-offset:2px}
:root[data-theme="dark"] .bc-seg{background:var(--raise)}
:root[data-theme="dark"] .bc-seg span{color:var(--ink)}
:root[data-theme="dark"] .bc-seg svg{color:var(--brand)}
:root[data-theme="dark"] .bc-seg input:checked + span{background:var(--brand);color:#0A1422}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bc-seg{background:var(--raise)}
  :root:not([data-theme="light"]) .bc-seg span{color:var(--ink)}
  :root:not([data-theme="light"]) .bc-seg input:checked + span{background:var(--brand);color:#0A1422}}
.bc-fg label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.bilah-cari .isian{min-height:50px;border-radius:10px;border-color:var(--tepi);font-size:16px}
/* Tombol utama berteks di semua lebar: satu aksi utama yang jelas. */
.bc-tbl{width:auto;min-width:0;height:54px;min-height:54px;padding:0 26px;gap:10px;border-radius:12px;
  background:var(--brand-grad);font-size:18px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 12px 24px -12px rgba(207,69,45,.75)}
.bc-tbl:hover{background:var(--brand-grad-hover)}
.bc-tbl-teks{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
.bilah-ket{font-size:13.5px}
.bilah-ket #c_lama{color:var(--ok);font-weight:600}
.bilah-ket .bk-jumlah{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
@media (prefers-reduced-motion:reduce){.kepala-wa{transition:none}.kepala-wa:hover{transform:none}}
/* Ponsel: jarak 8px supaya Ambil dan Kembali tetap berdampingan
   (keduanya calc(50% - 4px)). */
@media (max-width:620px){ .bilah-cari{gap:8px;padding:14px 14px 10px} }

/* Mobil hero: proporsional, berlapis, dan menyatu dengan latar. */
.hero-laut,:root[data-theme="dark"] .hero-laut{background-size:auto,auto 82%,auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-laut{background-size:auto,auto 82%,auto}}
.hero-mobil{max-width:520px;padding-bottom:10px}
.hero-mobil img{filter:saturate(.9) contrast(1.03) drop-shadow(0 10px 10px rgba(2,14,30,.35))}
.hero-mobil .hm-kiri{width:58%}
.hero-mobil .hm-kanan{width:50%;margin-left:-15%;transform:none;margin-bottom:6px;filter:saturate(.85) brightness(.94) contrast(1.02) drop-shadow(0 8px 8px rgba(2,14,30,.3))}
/* Panggung cahaya dan bayangan alas. */
.hero-mobil::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:auto -8% -6% -8%;height:46%;
  background:radial-gradient(50% 50% at 50% 70%,rgba(176,214,248,.28) 0%,rgba(176,214,248,.08) 55%,rgba(176,214,248,0) 75%)}
.hero-mobil::after{left:8%;right:6%;bottom:2px;height:9%;background:radial-gradient(closest-side,rgba(2,14,30,.5),rgba(2,14,30,0))}
.hero-laut .janji li{font-size:15px}
@media (min-width:900px){
  .hero-mobil{max-width:540px}
  .hero-mobil .hm-kiri{width:58%}
  .hero-mobil .hm-kanan{width:50%;margin-left:-15%}
  .hero-laut .janji-hero{max-width:560px;margin-left:auto;margin-right:auto}
}
/* Panggung cahaya mobil sengaja lebih lebar dari mobilnya; luapannya
   dipotong di tepi hero supaya tidak menimbulkan geser horizontal
   (terukur di 1024px: 1046 > 1024). */
.hero-laut{overflow-x:clip}

/* Beranda selebar desain pemilik: kepala, hero, pencarian, dan katalog
   memakai lebar isi 1320px (halaman lain tetap 1080px), sehingga logo,
   judul, dan kotak pencarian berbagi satu garis kiri. */
html.ruang-beranda #app{max-width:1320px}
html.ruang-beranda .kepala-dalam{max-width:1320px}
@media (min-width:1200px){
  html.ruang-beranda #app{padding-left:32px;padding-right:32px}
  html.ruang-beranda .kepala-dalam{padding-left:32px;padding-right:32px}
}
@media (min-width:900px){
  .hero-laut{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:48px}
  .hero-laut .beranda-kepala h1{max-width:none;font-size:clamp(36px,3.9vw,58px)}
  .hero-laut .beranda-kepala .lead{max-width:36rem}
}
@media (min-width:1200px){
  .hero-mobil{max-width:640px}
  .bilah-cari{padding:18px 22px 12px}
  .bc-seg span{padding:0 24px}
}
/* Layar besar: isi beranda hingga 1440px dan tombol cari lebih lebar,
   mendekati proporsi desain pemilik (pilihan layanan · tanggal · jam · tombol). */
html.ruang-beranda #app{max-width:1440px}
html.ruang-beranda .kepala-dalam{max-width:1440px}
@media (min-width:900px){
  .bilah-cari .bc-fg{flex:1 1 0;min-width:140px}
  .bilah-cari .bc-tbl{flex:0 1 250px;min-width:172px;justify-content:center}
}
/* 900–1199px: tombol cari ringkas supaya tetap sebaris dengan isian. */
@media (min-width:900px) and (max-width:1199px){
  .bilah-cari .bc-tbl{flex:0 0 auto;padding:0 20px}
  .bc-seg span{padding:0 14px}
}
@media (min-width:900px) and (max-width:1199px){ .bilah-cari .bc-fg{min-width:118px} .bilah-cari{column-gap:10px} }
@media (max-width:620px){ .bc-seg label{flex:1 1 0;min-width:0} .bc-seg span{padding:0 8px;gap:6px;justify-content:center} }
@media (max-width:359px){ .bc-seg span{font-size:13.5px;gap:5px;padding:0 6px} }
.telp-baris{display:grid;grid-template-columns:minmax(104px,118px) minmax(0,1fr);gap:8px}
.telp-baris .telp-kode{padding-right:28px;font-size:15px}
/* Hero memakai satu gambar dua mobil (hero-duo.webp): lebar mengikuti kolom hero. */
.hero-mobil .hm-duo{width:100%;max-width:none;height:auto;margin:0;transform:none;position:relative;z-index:1;filter:drop-shadow(0 16px 14px rgba(2,14,30,.45))}
/* Kendaraan dikecilkan dan judul disesuaikan dengan kolom gambar. */
.hero-mobil{max-width:320px;margin:0 auto}
@media (min-width:900px){
  .hero-mobil{max-width:470px;margin:0 0 0 auto}
  .hero-laut{align-items:center}
  .hero-laut .beranda-kepala h1{font-size:clamp(34px,3.5vw,50px);line-height:1.1}
  .hero-laut .beranda-kepala .lead{max-width:30rem}
}
@media (min-width:1200px){ .hero-mobil{max-width:490px} }
/* Mobil diturunkan ke sepertiga bawah hero, daftar keunggulan di bawahnya. */
@media (min-width:900px){
  .hero-laut .hero-panggung{margin-top:44px}
  .hero-laut .janji-hero{margin-top:10px}
}
/* Susunan hero mengikuti usulan: judul dan kendaraan mulai dari garis atas
   yang sama, kendaraan ±39% lebar layar di kanan, keunggulan di bawahnya. */
@media (min-width:900px){
  .hero-laut{align-items:start;padding-top:64px}
  .hero-laut .hero-panggung{margin-top:0}
  .hero-laut .janji-hero{margin-top:16px}
  .hero-laut .beranda-kepala h1{font-size:clamp(38px,4.2vw,60px);line-height:1.06}
  .hero-laut .beranda-kepala .lead{max-width:34rem}
}
@media (min-width:1200px){
  .hero-laut{grid-template-columns:minmax(0,1fr) minmax(0,.68fr);column-gap:48px}
  .hero-mobil{max-width:560px}
}
@media (min-width:900px){ .hero-laut .beranda-kepala .lead{max-width:40rem} }
@media (min-width:1200px){ .hero-laut .beranda-kepala .lead{max-width:46rem;font-size:17px} }

/* Halus saat pertama dibuka dan saat bahasa diganti: isi halaman tidak tampil
   sebelum render pertama siap, dan gambar yang datang belakangan memudar masuk
   dari kosong, tidak muncul tiba-tiba. */
html.js:not(.siap) #app{opacity:0}
#app{transition:opacity .18s ease-out}
#app img,#katalog img,.kepala img{transition:opacity .2s ease-out}
img.tunggu{opacity:0}
@media (prefers-reduced-motion:reduce){#app,#app img,#katalog img,.kepala img{transition:none}}
.rs-gagal{display:none}
.rek-pilih.gagal .rs-gagal{display:inline}
.rek-pilih.gagal .rs-salin,.rek-pilih.gagal .rs-pilih,.rek-pilih.gagal .rs-ok{display:none}

.rek-pilih.gagal .rek-salin-teks{display:inline}

/* Layar 380–420px (mis. 390px): merek dan grup kanan kepala tidak muat satu baris
   sehingga tombol WhatsApp keluar dari layar sekitar 21px. Jarak dan padding
   dirapatkan sedikit hanya pada lebar ini. */
@media (max-width:420px){ .kepala-dalam{padding-left:12px;padding-right:12px;gap:8px} .merek{gap:6px} .kepala-aksi{gap:3px} .merek b{font-size:17px} .kepala .bahasa button{padding:0 6px} }
/* Gerak kartu mobil: satu kurva dan satu durasi untuk kartu dan fotonya, supaya
   terasa sebagai satu gerakan. Bayangan kartu tidak lagi ikut dianimasikan
   (animasi box-shadow memaksa peramban menggambar ulang setiap bingkai, itu
   yang membuat gerakannya tersendat). Foto diberi lapisan sendiri dan zoom
   yang lebih kecil. */
@media (hover:hover){
  .mobil{transition:transform .6s cubic-bezier(.22,.61,.36,1),border-color .3s ease}
  .mobil:not(.habis):hover{transform:translateY(-3px);box-shadow:0 14px 34px -24px rgba(10,40,80,.42)}
  #app .gambar-mobil img,#app .gambar-mobil svg{transition:transform .7s cubic-bezier(.22,.61,.36,1);backface-visibility:hidden;transform-origin:50% 55%}
  .mobil:not(.habis):hover .gambar-mobil img,.mobil:not(.habis):hover .gambar-mobil svg{transform:scale(1.04)}
}
@media (hover:none){
  .mobil{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
  #app .gambar-mobil img,#app .gambar-mobil svg{transition:transform .7s cubic-bezier(.22,.61,.36,1);backface-visibility:hidden;transform-origin:50% 55%}
  .mobil.tekan:not(.habis) .gambar-mobil img,.mobil.tekan:not(.habis) .gambar-mobil svg{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  #app .mobil,#app .gambar-mobil img,#app .gambar-mobil svg{transition:none}
  .mobil:not(.habis):hover,.mobil.tekan{transform:none}
  .mobil:not(.habis):hover .gambar-mobil img,.mobil:not(.habis):hover .gambar-mobil svg,.mobil.tekan .gambar-mobil img,.mobil.tekan .gambar-mobil svg{transform:none}
}
/* Tombol "Pilih" (navy dengan tulisan emas dari logo; kontras 9,4:1 di atas
   putih) dan "Tanggal lain" (garis perak di tema gelap, garis biru navy di
   tema terang). Saat dihover, tombol menjadi emas penuh dengan tulisan navy.
   "Cari Mobil" tetap koral. */
.mobil:not(.habis) .tombol.kecil{background:linear-gradient(100deg,#CC4B2A 0%,#B8361F 50%,#A82E1A 100%);color:#FFFFFF;border-color:transparent;box-shadow:0 10px 22px -12px rgba(184,54,31,.7)}
.mobil:not(.habis) .tombol.kecil:hover{background:linear-gradient(100deg,#B98A22 0%,#E9BE55 40%,#F7DC8C 55%,#D9A73A 75%,#A8781A 100%);color:#1A1306;border-color:transparent}
/* Di ponsel tidak ada hover. Saat tombol ditekan (tap), warnanya langsung
   menjadi emas yang sama dengan hover di desktop. */
.mobil:not(.habis) .tombol.kecil:active{background:linear-gradient(100deg,#B98A22 0%,#E9BE55 40%,#F7DC8C 55%,#D9A73A 75%,#A8781A 100%);color:#1A1306;border-color:transparent}
/* Di tema gelap, navy di atas latar kartu yang juga gelap tidak terbaca. Di
   sana tombol kembali emas penuh dengan tulisan navy (kontras 9,3:1). */
:root[data-theme="dark"] .mobil:not(.habis) .tombol.kecil{background:linear-gradient(100deg,#CC4B2A 0%,#B8361F 50%,#A82E1A 100%);color:#FFFFFF;border-color:transparent;box-shadow:0 10px 22px -12px rgba(184,54,31,.7)}
:root[data-theme="dark"] .mobil:not(.habis) .tombol.kecil:hover{background:linear-gradient(90deg,#051528 0%,#072748 38%,#0B3A69 68%,#104A82 100%);color:#EBD9A8;border-color:#C9A24A}
:root[data-theme="dark"] .mobil:not(.habis) .tombol.kecil:active{background:#0A2540;color:#EBD9A8;border-color:#C9A24A}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mobil:not(.habis) .tombol.kecil{background:linear-gradient(100deg,#CC4B2A 0%,#B8361F 50%,#A82E1A 100%);color:#FFFFFF;border-color:transparent;box-shadow:0 10px 22px -12px rgba(184,54,31,.7)}
  :root:not([data-theme="light"]) .mobil:not(.habis) .tombol.kecil:hover{background:linear-gradient(90deg,#051528 0%,#072748 38%,#0B3A69 68%,#104A82 100%);color:#EBD9A8;border-color:#C9A24A}
  :root:not([data-theme="light"]) .mobil:not(.habis) .tombol.kecil:active{background:#0A2540;color:#EBD9A8;border-color:#C9A24A}
/* Mode gelap: frame kendaraan memakai biru laut (dari kepala situs).
   Header laut dengan judul emas; footer sedikit lebih dalam dari badan kartu. */
:root[data-theme="dark"] .mobil .judul-foto{background:#0B3A69}
:root[data-theme="dark"] .mobil .judul-foto .spek{color:#D5E0EE}
:root[data-theme="dark"] .mobil .mobil-isi{background:#0D2B4D}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mobil .judul-foto{background:#0B3A69}
  :root:not([data-theme="light"]) .mobil .judul-foto .spek{color:#D5E0EE}
  :root:not([data-theme="light"]) .mobil .mobil-isi{background:#0D2B4D}
}
}
.mobil.habis .tombol.kedua.kecil{background:transparent;color:#E9C46A;border:1.5px solid #C9A24A;box-shadow:none}
.mobil.habis .tombol.kedua.kecil:hover{background:rgba(201,162,74,.12)}
:root[data-theme="light"] .mobil.habis .tombol.kedua.kecil{background:transparent;color:#7A5A14;border:1.5px solid #9A7422}
:root[data-theme="light"] .mobil.habis .tombol.kedua.kecil:hover{background:rgba(154,116,34,.08)}
/* "Pilih" dan "Tanggal lain" di kartu mobil dibuat berukuran sama: lebar,
   tinggi, dan tebal garis yang sama. */
.mobil .tombol.kecil{box-sizing:border-box;width:124px;min-width:124px;height:44px;min-height:44px;padding:0 16px;border-width:1.5px;justify-content:center}
/* Promo dari pengaturan Ops (Diskon portal). Warna mengikuti tema: emas
   dari logo untuk pita, koral untuk angka potongan. */
.promo-pita{position:relative;z-index:3;width:100%;margin:14px auto 0;max-width:1320px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;box-sizing:border-box}
.promo-pita .promo-kiri{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 16px;border-radius:14px;
  background:linear-gradient(90deg,#F3D68A 0%,#E9C46A 55%,#C9A24A 100%);color:#0A2540;box-shadow:0 12px 24px -18px rgba(10,40,80,.6);flex:1 1 320px;min-width:0}
.promo-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.promo-besar{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:600;line-height:1.1}
.promo-sub{font-size:13px;font-weight:500;opacity:.85}
.promo-sisa{background:#D9573C;color:#fff;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;white-space:nowrap}
.promo-stiker{position:absolute;top:12px;left:12px;z-index:2;background:#C23D25;color:#fff;font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px;box-shadow:0 6px 14px -8px rgba(194,61,37,.8)}
@media (prefers-reduced-motion:reduce){.promo-stiker{transition:none}}
.promo-pita .promo-kiri{flex:0 1 auto;max-width:760px}
.promo-pita .promo-sisa{margin-left:auto}
.promo-pita .promo-sisa{margin:6px 0 0;align-self:flex-start;background:#0A2540;color:#E9C46A;font-size:12px;padding:5px 11px}
/* Di dalam hero, promo berada tepat di bawah paragraf pembuka. */
.hero-teks .promo-pita{padding:0;margin:20px 0 0;max-width:none;width:auto;display:block}
.hero-teks .promo-pita .promo-kiri{max-width:none;width:fit-content;max-width:100%}
/* Tulisan promo dibuat menonjol: kotak navy dengan bingkai emas, angka
   potongan besar miring dengan gradien emas-koral, dan chip sisa hari koral. */
.promo-pita .promo-kiri{background:linear-gradient(135deg,#0A2540 0%,#0C4782 100%);color:#fff;border:1.5px solid #E9C46A;box-shadow:0 18px 34px -20px rgba(233,196,106,.55)}
.promo-pita .promo-label{color:#E9C46A;font-size:12.5px;letter-spacing:.16em}
.promo-pita .promo-besar{font-size:clamp(22px,2.6vw,28px);font-weight:600;color:#fff;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.promo-angka{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.7em;line-height:1;background:linear-gradient(90deg,#F3D68A 0%,#E9C46A 45%,#F08A6E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-pita .promo-sub{color:rgba(255,255,255,.82);font-size:13.5px}
.promo-pita .promo-sisa{background:#D9573C;color:#fff;font-weight:700;font-size:13px;padding:6px 12px}
/* Banner promo (desain Promo Avanza): bingkai emas, label pil emas ber-mahkota,
   angka persen besar bergradasi emas, dan baris tanggal dalam kapsul. */
.promo-pita .promo-kiri{border:2px solid transparent;background:linear-gradient(#0A2540,#0A2540) padding-box,linear-gradient(90deg,#F6DB8C,#C9A24A,#F6DB8C) border-box;border-radius:26px;padding:16px 26px 16px}
.promo-pita .promo-label{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:6px 14px 5px;border-radius:999px;background:linear-gradient(90deg,#F6DB8C 0%,#E9C46A 60%,#D9B25A 100%);color:#0A2540;font-size:12px;font-weight:800;letter-spacing:.12em;box-shadow:0 6px 14px -8px rgba(233,196,106,.7)}
.promo-pita .promo-label svg{flex:none}
.promo-pita .promo-besar{font-family:var(--serif);font-style:normal;font-size:clamp(22px,2.6vw,28px);font-weight:600;margin-top:6px;flex-wrap:nowrap;white-space:nowrap}
.promo-pita .promo-angka{font-family:var(--serif);font-style:italic;font-size:1.7em;font-weight:600;background:linear-gradient(180deg,#FFF0B8 0%,#F3D68A 45%,#E9B44C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.promo-pita .promo-sub{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:8px;padding:5px 12px 5px 10px;border-radius:999px;border:1px solid rgba(233,196,106,.45);background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);font-size:13px;font-weight:600}
.promo-pita .promo-sub svg{color:#E9C46A;flex:none}

/* Pemilih jam ambil: tombol yang membuka dialog. Jamnya naik-turun per jam dan
   menitnya hanya 00 atau 30, supaya pilihannya terlihat sekali pandang. */
.jam-tombol{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;font-weight:600}
.jam-tombol svg{flex:none;color:var(--ink-2)}
/* Panel jam: popover kecil di bawah tombol, seperti pemilih tanggal. Bukan
   dialog modal, jadi tidak ada latar gelap dan halaman tetap bisa digulir. */
.jam-pop{position:fixed;inset:auto;margin:0;padding:0;border:1px solid var(--rule-2);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 18px 40px -18px rgba(10,37,64,.45);max-height:calc(100vh - 24px);overflow:auto}
.jam-pop:not(:popover-open){display:none}
.jam-isi{padding:14px 16px 12px}
.jam-judul{margin:0 0 4px;font-size:18px;font-weight:600;color:var(--ink)}
.jam-pop .bantu{margin:0 0 6px;font-size:14px;color:var(--ink-2)}
.jam-atur{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0 10px}
.jam-panah{width:64px;height:30px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.jam-panah:hover:not(:disabled){background:var(--brand-wash);color:var(--brand)}
.jam-panah:disabled{opacity:.3;cursor:default}
.jam-baris{display:flex;align-items:center;gap:14px}
.jam-kotak{min-width:92px;height:60px;display:grid;place-items:center;border:1.5px solid var(--rule-2);border-radius:16px;background:var(--surface);color:var(--ink);font-size:36px;font-weight:600;font-variant-numeric:tabular-nums}
.jam-titik{font-size:26px;font-weight:600;color:var(--ink-3)}
.jam-menit{display:flex;flex-direction:column;gap:8px}
.jam-chip{min-width:64px;min-height:30px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rule-2);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:16px;cursor:pointer}
.jam-chip:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.jam-chip.aktif{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.jam-chip:disabled{opacity:.3;cursor:default}
.jam-kaki{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--rule)}
.jam-kaki .tombol{min-width:112px;min-height:40px}
.jam-catatan{margin:0 0 10px;color:var(--ink-2);font-size:13px;line-height:1.5}
.jam-catatan p{margin:0}
/* Reset: pil berwarna biru tipis, tanpa garis bawah. Tampil sebagai tombol
   sekunder di sebelah Simpan yang koral. */
.jam-reset{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--brand-wash);color:var(--brand-ink);font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer}
.jam-reset:hover{background:var(--brand);color:var(--on-brand)}
.jam-reset:active{background:var(--brand-tekan);color:var(--on-brand)}
.jam-reset:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent);outline-offset:2px}
/* Panel durasi (dengan driver): stepper hari dengan pintasan 1·2·3·5·7.
   Memakai bentuk yang sama dengan panel jam ambil. */
.dur-baris{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0 10px}
.dur-btn{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--rule-2);background:var(--surface);color:var(--ink);font:inherit;font-size:22px;font-weight:500;line-height:1;cursor:pointer;display:grid;place-items:center}
.dur-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.dur-btn:disabled{opacity:.3;cursor:default}
.dur-angka{display:flex;flex-direction:column;align-items:center;gap:2px}
.dur-kotak{min-width:96px;height:64px;font-size:34px}
.dur-satuan{font-size:13px;color:var(--ink-2);font-weight:600;letter-spacing:.02em}
.dur-pil{display:flex;justify-content:center;flex-wrap:nowrap;gap:6px;padding-bottom:10px}
.dur-pil .jam-chip{min-width:40px;min-height:34px;padding:0 6px;font-size:15px}
.dur-ringkas{margin:0 0 10px;text-align:center;font-size:14px;font-weight:600;color:var(--ink)}
/* Kotak angka durasi bisa diketik: rata tengah, dengan cincin fokus. */
.dur-kotak{width:96px;padding:0;text-align:center;font-family:inherit;outline:none}
.dur-kotak:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent)}
/* Kotak jam bisa diketik: rata tengah, dengan cincin fokus. */
input.jam-kotak{width:104px;padding:0;text-align:center;font-family:inherit;outline:none;color:var(--ink)}
input.jam-kotak:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent)}
/* Pesan jam di luar jam operasional: di bawah kotak jam, tidak menggeser isi. */
.jam-galat{min-height:18px;margin:6px 0 0;max-width:260px;text-align:center;font-size:13px;line-height:1.4;color:var(--crit)}
/* Kotak angka jam dan durasi: bentuk tetap bulat di ponsel. Tampilan native
   browser dimatikan, highlight seleksi (kotak biru persegi) disembunyikan,
   dan lebar kotak durasi disamakan dengan kotak jam. */
input.jam-kotak,input.dur-kotak{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;border-radius:16px;background-clip:padding-box}
input.dur-kotak{width:96px}
input.jam-kotak::selection,input.dur-kotak::selection{background:transparent;color:inherit}
/* Lambang di header: sedikit lebih besar dan tegas; tetap sejajar dengan nama. */
.merek > img{width:46px;height:46px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px rgba(60,40,0,.28))}
.kepala .merek > img{filter:drop-shadow(0 0 6px rgba(227,179,71,.45))}
/* Judul kendaraan: latar navy dengan huruf serif emas, sejalan dengan tombol
   Pilih. Berlaku sama di tema terang dan gelap. */
.mobil .judul-foto{background:#0A2540;padding:14px 18px 12px}
.mobil .judul-foto h2{font-size:20px;font-weight:600;color:#F5C25B;letter-spacing:-.005em}
.judul-foto .spek{font-size:13px;color:rgba(255,255,255,.78);letter-spacing:.01em}
/* Tanda unit baru: bintang runcing koral dengan duri tak seragam, teks putih
   miring. Bintangnya berdenyut membesar-mengecil; bentuk memotong bayangan. */
.judul-foto .tanda-baru{display:inline-grid;place-items:center;vertical-align:middle;margin-left:12px;width:56px;height:48px;background:#CC3A2C;color:#FFFFFF;font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.01em;line-height:1;transform:rotate(-7deg);clip-path:polygon(50.0% 0.0%,55.6% 14.4%,63.6% 8.2%,64.4% 21.8%,78.8% 10.4%,74.9% 25.1%,82.4% 26.5%,75.7% 36.9%,97.6% 34.5%,85.6% 44.4%,93.0% 50.0%,80.6% 54.8%,95.7% 64.8%,80.8% 65.7%,80.7% 72.3%,69.3% 69.3%,79.4% 90.5%,66.3% 82.1%,63.6% 91.8%,55.0% 81.3%,50.0% 99.0%,44.5% 84.8%,37.6% 88.0%,36.9% 75.7%,20.6% 90.5%,24.5% 75.5%,15.2% 75.3%,22.4% 64.1%,4.3% 64.8%,15.9% 55.4%,12.0% 50.0%,23.0% 45.7%,2.4% 34.5%,17.9% 33.7%,13.6% 23.5%,27.1% 27.1%,21.2% 10.4%,34.0% 18.6%,37.3% 11.0%,45.4% 20.8%);animation:tanda-baru-denyut 1.2s ease-in-out infinite}
.judul-foto .tanda-baru span{display:block;transform:rotate(-16deg)}
@keyframes tanda-baru-denyut{0%,100%{transform:rotate(-7deg) scale(1)}50%{transform:rotate(-7deg) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.judul-foto .tanda-baru{animation:none}}
/* Tombol Pilih di kartu yang tersedia ikut berdenyut, lewat cincin bayangan saja
   supaya tidak bentrok dengan transform hover. Berhenti saat disorot. */
@keyframes tombol-pilih-denyut{0%{box-shadow:0 0 0 0 rgba(194,61,37,.6)}70%{box-shadow:0 0 0 12px rgba(194,61,37,0)}100%{box-shadow:0 0 0 0 rgba(194,61,37,0)}}
.mobil:not(.habis) .harga-baris .tombol.kecil{animation:tombol-pilih-denyut 1.6s ease-out infinite}
.mobil:not(.habis) .harga-baris .tombol.kecil:hover{animation:none}
@media (prefers-reduced-motion:reduce){.mobil:not(.habis) .harga-baris .tombol.kecil{animation:none}}
.galat.blok{margin:0 2px 14px}
.galat.atas{margin-top:10px}

/* Kalender tanggal (tanpa pilihan jam): panel gelap membulat, hari terpilih emas. */
.tgl-tombol{display:flex;align-items:center;width:100%;text-align:left;font-variant-numeric:tabular-nums}
.kal-pop{margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible}
.kal-pop::backdrop{background:transparent}
.kal-isi{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:18px;padding:14px 14px 10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);font-family:var(--sans)}
.kal-judul{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.kal-judul h3{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.kal-judul h3 span{font-weight:400;color:var(--ink-2)}
.kal-nav{width:34px;height:34px;border-radius:50%;border:0;background:var(--raise);color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.kal-nav:disabled{opacity:.35;cursor:default}
.kal-kisi,.kal-hari{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.kal-kisi{font-size:12px;font-weight:600;color:var(--ink-3);padding:4px 0 6px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.kal-hari{row-gap:4px}
.kal-hari button,.kal-hari span{height:36px;border-radius:12px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.kal-hari button:hover{background:var(--raise)}
.kal-hari button.ini{box-shadow:inset 0 0 0 1px var(--ink-3)}
.kal-hari button.on{background:linear-gradient(135deg,#F3D68A 0%,#E9C46A 60%,#C9A24A 100%);color:#0A2540;font-weight:700;box-shadow:0 6px 14px -8px rgba(233,196,106,.8)}
.kal-hari button:disabled{color:var(--ink-3);opacity:.45;cursor:default;background:transparent}
.kal-kaki{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.kal-ini{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:6px 4px}
.kal-ini svg{color:#E9C46A}
.kal-ini:disabled{opacity:.4;cursor:default}
.kal-tutup{border:0;background:transparent;color:var(--ink-3);font:inherit;font-size:14px;cursor:pointer;padding:6px 4px}
@media (prefers-reduced-motion:no-preference){.kal-hari button{transition:background .15s ease}}
/* Syarat durasi diskon di kartu: pil minimal sewa (navy, bingkai emas, angka emas)
   dan ajakan hijau gelap dengan teks putih, supaya kontras dan mencolok. */
.harga-baris .syarat-minimal{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 12px 5px 8px;border-radius:999px;background:#0A2540;border:1px solid #C9A24A;color:#FFFFFF;font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;max-width:100%;box-shadow:0 6px 14px -8px rgba(10,37,64,.6)}
.harga-baris .syarat-minimal svg{color:#F6DC8E;flex:none}
.harga-baris .syarat-minimal b{color:#F6DC8E;font-size:16px;font-weight:800;margin:0 2px}
.harga-baris .syarat-ajakan{display:inline-block;white-space:nowrap;margin-top:8px;margin-left:6px;padding:7px 14px;border-radius:999px;background:linear-gradient(90deg,#0F6B4E 0%,#14866A 100%);color:#FFFFFF;font-size:14px;font-weight:700;line-height:1.3;box-shadow:0 6px 14px -8px rgba(15,107,78,.7)}
/* Tombol Tanggal lain di kartu yang tidak tersedia: emas lembut, berbeda dari Pilih
   yang solid koral. Teks cokelat emas di tema terang (8:1), emas di tema gelap. */
.mobil.habis .harga-baris .tombol.kedua.kecil{background:linear-gradient(180deg,#FBF6E6 0%,#F1E3BD 100%);color:#5C400A;border:1.5px solid #C9A24A;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 14px -10px rgba(154,116,34,.6)}
.mobil.habis .harga-baris .tombol.kedua.kecil:hover{background:linear-gradient(180deg,#F7EDCF 0%,#E9D39A 100%)}
:root[data-theme="dark"] .mobil.habis .harga-baris .tombol.kedua.kecil{background:linear-gradient(180deg,rgba(233,196,106,.16),rgba(233,196,106,.05));color:#F3D68A;border-color:#C9A24A;box-shadow:none}
:root[data-theme="dark"] .mobil.habis .harga-baris .tombol.kedua.kecil:hover{background:rgba(233,196,106,.26)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mobil.habis .harga-baris .tombol.kedua.kecil{background:linear-gradient(180deg,rgba(233,196,106,.16),rgba(233,196,106,.05));color:#F3D68A;border-color:#C9A24A;box-shadow:none}
  :root:not([data-theme="light"]) .mobil.habis .harga-baris .tombol.kedua.kecil:hover{background:rgba(233,196,106,.26)}
}

/* Label kata kunci di awal H1 hero (labelHero di portal.js) */
.beranda-kepala h1 .hero-kunci{display:block;font-family:var(--mono);font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 12px;opacity:.88;text-shadow:none}
@media (max-width:599px){.beranda-kepala h1 .hero-kunci{font-size:11px;letter-spacing:.11em;margin-bottom:9px}}
/* Tautan ke halaman kendaraan di kartu mobil */
.judul-foto .detail-mobil{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--brand);text-decoration:none}
.judul-foto .detail-mobil:hover{text-decoration:underline}
/* Halaman kendaraan: foto dan nama mobil bertautan di daftar tarif */
.lp-foto{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:12px;display:flex;justify-content:center}
.lp-foto img{width:100%;max-width:640px;height:auto;aspect-ratio:4/3;object-fit:contain}
.lp-mobil b a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.lp-mobil b a:hover{color:var(--brand)}

/* ---------- Lokasi kantor di kaki halaman (petaKaki di portal.js) ----------
   Kaki halaman selalu biru gelap: peta versi gelap, pin dan label emas. */
.kaki .sos-baris + .kaki-judul{margin-top:22px}
.kaki-lokasi{margin-top:10px;max-width:420px;border-radius:14px;overflow:hidden;border:1px solid rgba(214,228,242,.22);background:#0F2C4C;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.kaki-peta{position:relative;display:block;aspect-ratio:16/9;background:#0F1E31;border-bottom:1px solid rgba(214,228,242,.16)}
.kaki-peta:focus-visible{outline:2px solid #F3D68A;outline-offset:-2px}
.kaki-peta img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.lokasi-titik{position:absolute;left:50%;top:50%;width:30px;height:39px;transform:translate(-50%,-100%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.lokasi-titik svg{display:block}
.lokasi-titik svg path{fill:#F3D68A;stroke:#0A2A4A;stroke-width:2.5}
.lokasi-titik svg circle{fill:#0A2A4A}
.lokasi-nama{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);white-space:nowrap;background:#FFFFFF;color:#0A2340;
  font-family:var(--serif);font-weight:600;font-size:13px;line-height:1;padding:7px 11px;border-radius:6px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.lokasi-nama::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#FFFFFF}
.lokasi-atribusi{position:absolute;right:6px;bottom:5px;font-size:10px;line-height:1.2;color:#A9BCD3;background:rgba(10,30,50,.75);padding:1px 6px;border-radius:4px}
.kaki-peta-aksi{display:flex;flex-wrap:wrap;gap:10px;padding:12px}
.kaki a.peta-tombol{flex:1 1 170px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 12px;border-radius:10px;
  border:1px solid rgba(214,228,242,.5);color:#FFFFFF;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.kaki a.peta-tombol:hover{color:#FFFFFF;background:rgba(214,228,242,.1);border-color:#D6E4F2}
.kaki a.peta-tombol.utama{background:#F3D68A;border-color:#F3D68A;color:#0A2340}
.kaki a.peta-tombol.utama:hover{background:#F8E3AC;border-color:#F8E3AC;color:#0A2340}
.kaki a.peta-tombol:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.kaki a.peta-tombol{transition:none}}