/* =========================================================
   JUARA TRANSPORT — Tema Oranye-Hitam (sesuai UI kit referensi)
   Palet resmi referensi: oranye (#facc22 → #f88000), hitam (#000000),
   abu-abu (#616161). Ini dimuat di SEMUA halaman, menimpa variabel
   warna lama di style.css lewat CSS custom properties.
   ========================================================= */

:root{
  /* --- palet resmi referensi: hitam + oranye + abu-abu (TANPA teal) --- */
  --navy-900:#000000;      /* hitam pekat — header aktif, footer, teks judul gelap */
  --navy-800:#1A1A1A;      /* hitam sedikit lebih terang — tombol, ikon, judul */
  --navy-700:#333333;      /* abu gelap — hover/aksen */
  --blue-500:#616161;
  --gold-500:#F88000;      /* oranye utama (ujung gradient referensi) */
  --gold-600:#D96A00;      /* oranye gelap untuk hover */
  --gold-light:#FACC22;    /* oranye terang (ujung gradient satunya, dari referensi) */
  --ink:#000000;           /* teks utama: hitam, sesuai UI kit referensi */
  --ink-soft:#616161;      /* teks sekunder: abu-abu, sesuai UI kit referensi */
  --paper:#F7F7F7;
  --paper-alt:#EFEFEF;
  --line:#E0E0E0;
  --font-display:"Poppins","Segoe UI",sans-serif;
}

/* pastikan gradient tombol oranye pakai 2 warna resmi referensi (terang -> gelap) */
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold-500)) !important;}
.btn-book,.hero-search .hs-submit{background:linear-gradient(135deg,var(--gold-light),var(--gold-500)) !important;}

/* semua tombol "WA" (per-unit di kartu armada, dsb) disamakan jadi gaya "Book" oranye,
   supaya konsisten dengan Beranda. Tombol chat mengambang (.wa-float) TETAP hijau
   karena itu ikon universal WhatsApp, bukan tombol booking. */
.btn-wa{background:linear-gradient(135deg,var(--gold-light),var(--gold-500)) !important;color:var(--white);}
.btn-wa:hover{filter:brightness(1.04);}

/* =========== HERO — foto tunggal, tanpa layer warna/teks =========== */
.hero-simple{position:relative;overflow:hidden;background:var(--navy-900);}
.hero-simple picture{display:block;}
.hero-simple-img{width:100%;height:auto;max-height:540px;object-fit:cover;display:block;}
/* tablet: sedikit lebih pendek dari desktop, tapi tetap lebih tinggi dari HP */
@media (max-width:900px) and (min-width:601px){
  .hero-simple-img{max-height:420px;}
}
@media (max-width:600px){
  .hero-simple-img{max-height:480px;}
}

/* search bar mengambang di bawah hero */
.hero-search-wrap{position:relative;z-index:3;margin-top:-56px;padding:0 20px;}
.hero-search{
  max-width:820px;margin:0 auto;background:var(--white);border-radius:var(--radius-lg);
  box-shadow:0 20px 40px -18px rgba(5,59,62,.35);
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0;overflow:hidden;
}
.hero-search .hs-field{
  display:flex;align-items:center;gap:8px;padding:12px 16px;border-right:1px solid var(--line);
}
.hero-search .hs-field svg{width:17px;height:17px;color:var(--gold-500);flex:none;}
.hero-search .hs-field select,.hero-search .hs-field input{
  border:none;outline:none;font:inherit;font-size:.84rem;color:var(--ink);background:none;width:100%;
}
.hero-search .hs-submit{
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:var(--white);
  border:none;padding:12px 24px;font-family:var(--font-display);font-weight:700;font-size:.88rem;cursor:pointer;
}
.hero-search .hs-submit:hover{filter:brightness(1.05);}

@media (max-width:900px){
  .hero-search{grid-template-columns:1fr;}
  .hero-search .hs-field{border-right:none;border-bottom:1px solid var(--line);}
  .hero-search-wrap{margin-top:-30px;}
}

/* =========== Kartu armada gaya "icon spec row" =========== */
/* pengaman: item grid & elemen flex boleh menyusut di bawah ukuran konten aslinya,
   supaya teks yang "nowrap" (harga, judul) tidak pernah memaksa kartu jadi lebih
   lebar dari kolomnya (penyebab tampilan "meluber" di HP). */
.fleet-grid > *{min-width:0;}
.fleet-card-v2{
  min-width:0;
  background:var(--white);border-radius:var(--radius-lg);padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 26px -14px rgba(5,59,62,.25);
  display:flex;flex-direction:column;gap:10px;
}
.fleet-card-v2 .fcv2-top{min-width:0;}
.fleet-card-v2 h3{
  font-size:.92rem;margin:0 0 3px;line-height:1.25;
  white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.fleet-card-v2 .fcv2-model{font-size:.8rem;color:var(--ink-soft);}
.fleet-card-v2 .fcv2-price{font-size:.72rem;color:var(--ink-soft);min-width:0;text-align:left;
  display:flex;flex-direction:column;gap:8px;padding:8px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);}
.fleet-card-v2 .fcv2-price-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.fleet-card-v2 .fcv2-price-label{color:var(--ink-soft);}
.fleet-card-v2 .fcv2-price-row b{font-family:var(--font-display);font-size:.95rem;color:var(--ink);font-weight:700;}

/* desktop & tablet: nama mobil dan harga dibesarkan sedikit supaya lebih terbaca/estetik */
@media (min-width:601px){
  .fleet-card-v2 h3{font-size:1.15rem;}
  .fleet-card-v2 .fcv2-price{font-size:.8rem;}
  .fleet-card-v2 .fcv2-price-row b{font-size:1.1rem;}
}
.fleet-card-v2 .fcv2-photo{height:150px;display:flex;align-items:center;justify-content:center;}
.fleet-card-v2 .fcv2-photo img{max-width:100%;max-height:100%;object-fit:contain;}
.fcv2-specs{display:flex;flex-wrap:wrap;gap:14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.fcv2-specs .fcv2-spec{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.68rem;color:var(--ink-soft);flex:1;min-width:52px;text-align:center;}
.fcv2-specs .fcv2-spec svg{width:20px;height:20px;color:var(--ink-soft);}
.btn-book{
  display:flex;align-items:center;justify-content:center;gap:6px;width:auto;margin:0 auto;text-align:center;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-500));
  color:var(--white);font-family:var(--font-display);font-weight:600;font-size:.85rem;
  padding:9px 22px;border-radius:999px;box-shadow:0 8px 16px -8px rgba(248,128,0,.5);box-sizing:border-box;
  white-space:nowrap;
}
.btn-book svg{width:15px;height:15px;flex:none;}
.btn-book:hover{filter:brightness(1.04);}

/* tombol booking per-unit (halaman Armada, Lepas Kunci, Dengan Sopir): auto-width, di tengah kartu — bukan melebar penuh */
.fleet-actions{display:flex;justify-content:center;}
.fleet-actions .btn-wa.btn-block{width:auto;padding:11px 26px;}
@media (max-width:600px){
  .fleet-actions .btn-wa.btn-block{padding:8px 18px;font-size:.78rem;}
}

/* baris harga (Lepas kunci /24 jam, >12 jam/hari, dst) - pastikan label & angka
   selalu 1 baris & tidak ada yang "hilang" karena tertindih/wrap (desktop/tablet) */
.fleet-price .row{flex-wrap:nowrap;gap:6px;min-width:0;}
.fleet-price .row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fleet-price .row b{flex:none;white-space:nowrap;}
@media (max-width:600px){
  /* di HP: susun label di atas, harga di bawah (bukan sejajar) supaya label seperti
     "+BBM (10 jam)" tampil utuh, tidak lagi kepotong titik-titik */
  .fleet-price .row{
    flex-direction:column;align-items:flex-start;gap:0;font-size:.66rem;padding:3px 0;
  }
  .fleet-price .row span{
    overflow:visible;text-overflow:clip;white-space:normal;color:var(--ink-soft);
  }
  .fleet-price .row b{font-size:.86rem;margin-top:1px;}
}

/* =========== Section tanya-jawab / kontak cepat dengan ilustrasi =========== */
.ask-section{
  background:var(--white);border:1.5px dashed var(--gold-500);border-radius:var(--radius-lg);
  padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
}
.ask-illustration{display:flex;align-items:center;justify-content:center;}
.ask-illustration svg{width:100%;max-width:320px;height:auto;}
.ask-form input{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:999px;font:inherit;
  margin-bottom:12px;box-sizing:border-box;
}
.ask-form input:focus{outline:none;border-color:var(--navy-800);}
.ask-form .btn-book{margin-top:4px;border:none;}
.ask-form .kicker{
  display:inline-block;color:var(--navy-800);font-weight:700;background:var(--paper-alt);
  border-radius:999px;margin-bottom:10px;
}
@media (max-width:800px){
  .ask-section{grid-template-columns:1fr;padding:26px;text-align:center;}
  .ask-illustration svg{max-width:220px;}
}

@media (max-width:600px){
  .fleet-card-v2{padding:14px;gap:10px;}
  .fleet-card-v2 h3{font-size:.82rem;}
  .fleet-card-v2 .fcv2-price{font-size:.6rem;}
  .fleet-card-v2 .fcv2-price-row b{font-size:.72rem;}
  .fleet-card-v2 .fcv2-photo{height:100px;}
  .fcv2-specs{gap:6px;padding:8px 0;}
  .fcv2-specs .fcv2-spec{font-size:.58rem;min-width:0;}
  .fcv2-specs .fcv2-spec svg{width:16px;height:16px;}
  .btn-book{padding:8px 6px;font-size:.75rem;gap:5px;}
  .btn-book svg{width:13px;height:13px;}
  .btn-book-extra{display:none;}
}

/* =========== Perkecil font di seluruh halaman (di LUAR kartu armada), lebih estetik =========== */
.kicker{font-size:.72rem;padding:4px 11px;}
h2{font-size:clamp(1.3rem,2.3vw,1.8rem);}
.section-head{max-width:600px;}
.section-head p{font-size:.9rem;}
.info-card h3{font-size:.94rem;}
.info-card p{font-size:.82rem;}
.service-card h3{font-size:1.1rem;}
.service-card p{font-size:.86rem;}
.service-card ul li{font-size:.84rem;}
.service-card .price-from{font-size:.78rem;}
.service-card .price-from b{font-size:1.15rem;}
.step h3{font-size:.92rem;}
.step p{font-size:.8rem;}
.testi-quote{font-size:.86rem;}
.testi-who b{font-size:.84rem;}
.testi-who span{font-size:.74rem;}
.rating-note{font-size:.8rem;}
.ask-form h2{font-size:1.25rem;}
.ask-form p{font-size:.86rem;}
.hero-search .hs-field select,.hero-search .hs-field input{font-size:.86rem;}
.hero-search .hs-submit{font-size:.88rem;}
@media (max-width:900px){
  h2{font-size:clamp(1.2rem,3vw,1.5rem);}
  .section-head p{font-size:.86rem;}
}

/* --- section headline biru-tua (setelah Armada Kami): lebih kecil & profesional --- */
.headline-cta{padding:44px 0;}
.headline-cta h2{
  color:var(--white);font-size:clamp(1.3rem,2.6vw,1.9rem);max-width:22ch;margin-bottom:.4em;
}
.headline-cta h2 em{color:var(--gold-500);font-style:normal;}
.headline-cta .hero-lead{font-size:.86rem;max-width:52ch;color:rgba(255,255,255,.88);}
.headline-cta .hero-actions{margin-top:18px;gap:10px;}
.headline-cta .hero-actions .btn{padding:9px 18px;font-size:.82rem;}
.headline-cta .hero-trust{margin-top:22px;gap:26px;}
.headline-cta .hero-trust .stat b{font-size:1.15rem;}
.headline-cta .hero-trust .stat span{font-size:.7rem;color:rgba(255,255,255,.72);}

/* desktop: konten di-tengah-kan supaya tidak menggantung di kiri (ruang kanan kosong) */
@media (min-width:901px){
  .headline-cta .container{max-width:760px;text-align:center;}
  .headline-cta h2{margin-left:auto;margin-right:auto;max-width:none;}
  .headline-cta .hero-lead{margin:0 auto;}
  .headline-cta .hero-actions{justify-content:center;}
  .headline-cta .hero-trust{justify-content:center;}
}

/* =========== Header: menu 1 baris rapi, gaya underline oranye ala referensi =========== */
@media (min-width:901px){
  .main-nav{gap:2px;}
  .main-nav a{white-space:nowrap;font-size:.92rem;padding:10px 14px;color:var(--ink);border-bottom:2.5px solid transparent;border-radius:0;}
  .main-nav a:hover{background:none;border-bottom-color:rgba(255,138,0,.4);}
  .main-nav a[aria-current="page"]{background:none;color:var(--navy-800);border-bottom-color:var(--gold-500);}
}

/* =========== Footer sederhana satu baris, gaya referensi =========== */
.footer-simple{color:#CCCCCC;}
.footer-simple-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 20px;
}
.footer-simple-nav{display:flex;flex-wrap:wrap;gap:4px;}
.footer-simple-nav a{padding:8px 12px;font-size:.84rem;color:#CCCCCC;border-radius:999px;}
.footer-simple-nav a:hover{color:var(--white);background:rgba(255,255,255,.08);}
.footer-simple .footer-social{margin:0;}
.footer-simple .footer-social a{background:var(--navy-700);}
.footer-simple .footer-social a:hover{background:var(--gold-500);}
.footer-simple .footer-social svg{color:var(--white);}
.footer-simple .footer-bottom{color:#999999;border-top-color:rgba(255,255,255,.14);}

/* =========== Page-header (banner judul di halaman Armada, Kontak, dll) =========== */
.page-header .breadcrumb{color:#CCCCCC;}
.page-header .breadcrumb a{color:#CCCCCC;}
.page-header p{color:#D9D9D9;}
.cta-band p{color:#D9D9D9;}
@media (max-width:800px){
  .footer-simple-row{flex-direction:column;text-align:center;}
  .footer-simple-nav{justify-content:center;}
}

/* =========== Tombol chat WA mengambang: latar hitam, ikon putih =========== */
.wa-float{background:var(--navy-900);box-shadow:0 10px 26px -8px rgba(0,0,0,.5);}
.wa-float svg{color:var(--white);}