:root{
  --biru:#1546a8;
  --biru-tua:#0f2a66;
  --biru-tipis:#eef3fb;
  --biru-muda:#2f6be0;
  --oranye:#f28c00;
  --oranye-tua:#d97800;
  --teks:#1b2436;
  --abu:#5f6b80;
  --latar:#f5f7fa;
  --garis:#e2e7ef;
  --wa:#1fa855;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Open Sans",system-ui,sans-serif;color:var(--teks);background:#fff;line-height:1.6;font-size:16px}
h1,h2,h3,h4,.mont{font-family:Montserrat,system-ui,sans-serif;line-height:1.2;letter-spacing:-.015em;font-weight:700}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--biru-muda);outline-offset:2px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ikon{width:20px;height:20px;flex:none}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;text-decoration:none;border-radius:10px;padding:13px 22px;border:0;cursor:pointer;transition:background .15s,box-shadow .15s,color .15s}
.btn-biru{background:var(--biru);color:#fff}
.btn-biru:hover{background:var(--biru-tua)}
.btn-oranye,.btn-wa{background:var(--biru);color:#fff}
.btn-oranye:hover,.btn-wa:hover{background:var(--biru-tua)}
.btn-garis{background:#fff;color:var(--biru);box-shadow:inset 0 0 0 1.5px #c9d5ea}
.btn-garis:hover{box-shadow:inset 0 0 0 1.5px var(--biru)}
.tautan{display:inline-flex;align-items:center;gap:6px;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:var(--biru);text-decoration:none}
.tautan:hover{color:var(--biru-tua);text-decoration:underline}
.tautan svg{width:16px;height:16px}

/* header */
.kepala{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--garis)}
.kepala .wrap{display:flex;align-items:center;gap:28px;height:78px}
.kepala .logo img{height:50px;width:auto}
.kepala nav{display:flex;gap:22px;font-weight:600;font-size:15px;white-space:nowrap}
.kepala nav a{text-decoration:none;color:#3a4558}
.kepala nav a:hover{color:var(--biru)}
.kepala .kanan{display:flex;gap:12px;margin-left:auto}
.kepala .btn{padding:11px 20px;font-size:14px}
.cs{background:var(--biru);color:#fff;white-space:nowrap}
.cs:hover{background:var(--biru-tua)}
.cs b{font-weight:700}

/* hero */
.hero{padding:28px 0 0}
.pita{position:relative;border-radius:24px;overflow:hidden;background:var(--biru-tua);color:#fff;padding:48px 24px 150px;text-align:center;isolation:isolate}
.pita:after{content:"";position:absolute;z-index:-1;left:50%;bottom:132px;width:62%;height:36px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.35),rgba(0,0,0,0))}
.hero-mobil{position:relative;max-width:560px;margin:18px auto 0}
.hero-mobil img{width:100%;height:auto;transition:opacity .3s}
.hero-mobil .h-elf{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.pita[data-unit="Elf Long 19 seat"] .h-elf{opacity:1}
.pita[data-unit="Elf Long 19 seat"] .h-hiace{opacity:0}
.pita h1{font-size:clamp(30px,4vw,46px);font-weight:700;max-width:17em;margin:0 auto}
.pita p{font-size:18px;opacity:.8;margin:14px auto 0;max-width:40em}
.pita .lencana{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;margin-bottom:18px}
.pita .lencana i{width:8px;height:8px;border-radius:50%;background:#ffb547}

/* kotak pesan */
.pesan-box{position:relative;z-index:2;max-width:1060px;margin:-140px auto 0;background:#fff;border-radius:16px;box-shadow:0 18px 48px rgba(15,42,102,.14);padding:0 28px 24px}
.pilih-unit{display:flex;gap:4px;justify-content:center;transform:translateY(-50%);background:#fff;border:1px solid var(--garis);border-radius:12px;padding:5px;width:max-content;margin:0 auto -20px}
.pilih-unit button{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:8px;padding:10px 20px;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:#3a4558;cursor:pointer}
.pilih-unit button span{display:grid;place-items:center}
.pilih-unit button svg{width:18px;height:18px}
.pilih-unit button[aria-pressed="true"]{background:var(--biru);color:#fff}
.pesan-atas{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--garis);margin-bottom:20px}
.pesan-atas b{font-family:Montserrat,sans-serif;font-size:17px}
.pesan-atas a{font-weight:700;color:var(--biru);text-decoration:none;font-size:15px}
.isian{display:grid;grid-template-columns:2.6fr 1.15fr .8fr 1.2fr auto;gap:12px;align-items:stretch}
.kolom{min-width:0;position:relative;border:1px solid #d5dce8;border-radius:10px;padding:9px 14px 8px;background:#fff}
.kolom:focus-within{border-color:var(--biru);box-shadow:0 0 0 3px rgba(21,70,168,.12)}
.kolom label{display:block;font-size:12px;color:var(--abu);line-height:1.3}
.kolom select,.kolom input{width:100%;border:0;background:transparent;font-weight:700;font-size:15px;padding:3px 0 1px;outline:0;appearance:none;-webkit-appearance:none}
.kolom select{padding-right:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235f6b80' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") right 2px center no-repeat}
.isian .btn{padding:0 24px;min-height:58px}
.estimasi{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:16px;padding:14px 2px 0;border-top:1px solid var(--garis);font-size:15px}
.estimasi .total{font-family:Montserrat,sans-serif;font-weight:700;font-size:22px;color:var(--teks)}
.estimasi small{color:var(--abu);font-size:13px}

.fakta{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);max-width:1060px;margin:28px auto 0;color:var(--abu);font-size:15px}
.fakta li{padding:2px 20px;border-left:1px solid var(--garis)}
.fakta li:first-child{border-left:0;padding-left:0}
.fakta b{display:block;font-family:Montserrat,sans-serif;font-size:18px;color:var(--teks)}

/* bagian umum */
.bagian{padding:88px 0}
.bagian.abu{background:var(--latar)}
.judul{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:40px}
.judul h2{font-size:clamp(26px,3vw,36px)}
.judul p{color:var(--abu);max-width:38em;margin-top:10px}
.judul.tengah{flex-direction:column;align-items:center;text-align:center}
.judul.tengah p{margin-left:auto;margin-right:auto}

/* armada */
.armada{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mobil{background:#fff;border:1px solid var(--garis);border-radius:16px;padding:24px 26px 22px;display:flex;flex-direction:column}
.mobil-atas{display:flex;justify-content:space-between;gap:16px}
.mobil h3{font-size:22px;font-weight:700}
.mobil .merek{font-size:14px;color:var(--abu)}
.mobil .mulai{text-align:right;font-size:13px;color:var(--abu);white-space:nowrap}
.mobil .mulai b{display:block;font-family:Montserrat,sans-serif;font-size:19px;color:var(--teks)}
.mobil .mulai b small{font-size:12px;font-weight:600;color:var(--abu)}
.foto-mobil{position:relative;aspect-ratio:16/9;margin:8px 0 4px}
.foto-mobil img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.foto-mobil.putar{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.foto-mobil.putar.geser{cursor:grabbing}
.foto-mobil.putar img{pointer-events:none;-webkit-user-drag:none}
.chip-360{position:absolute;left:0;bottom:6px;display:inline-flex;align-items:center;gap:6px;background:var(--biru-tipis);border-radius:8px;padding:5px 10px;font-size:13px;font-weight:600;color:var(--biru)}
.chip-360 svg{width:22px;height:10px}
.spek{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--garis);padding-top:14px;margin-top:6px}
.spek div{padding:0 12px;border-left:1px solid var(--garis);font-size:13px;color:var(--abu)}
.spek div:first-child{padding-left:0;border-left:0}
.spek b{display:block;font-size:15px;color:var(--teks);font-weight:600}
.mobil .aksi{display:flex;gap:10px;margin-top:20px}
.mobil .aksi .btn{flex:1}

/* paket trip */
.daftar-paket{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.paket{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--garis);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.paket:hover{box-shadow:0 12px 28px rgba(15,42,102,.10)}
.foto-paket{position:relative;aspect-ratio:4/3;overflow:hidden;background:#dfe6f1}
.foto-paket img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.paket:hover .foto-paket img{transform:scale(1.04)}
.chip-baris{position:absolute;z-index:1;left:12px;right:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--teks);font-size:12px;font-weight:600;border-radius:6px;padding:4px 8px}
.chip svg{width:13px;height:13px;color:var(--biru)}
.isi-paket{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.isi-paket h3{font-size:16px;font-weight:700;line-height:1.3;margin-bottom:4px}
.wilayah{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--abu)}
.wilayah svg{width:14px;height:14px;flex:none}
.bawah-paket{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--garis)}
.wilayah + .bawah-paket{margin-top:auto}
.isi-paket .wilayah:last-of-type{margin-bottom:14px}
.harga-paket small{display:block;font-size:12px;color:var(--abu);line-height:1.2}
.harga-paket b{font-family:Montserrat,sans-serif;font-weight:700;font-size:19px;color:var(--teks);white-space:nowrap}
.isi-paket .btn{padding:9px 16px;font-size:14px;flex:none;background:var(--biru-tipis);color:var(--biru)}
.isi-paket .btn:hover{background:var(--biru);color:#fff}
.paket-lain{background:var(--biru-tipis);border:1px dashed #b9c8e3}
.paket-lain .isi-paket{padding:24px 22px;gap:10px}
.paket-lain .ik-lain{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#fff;color:var(--biru);margin-bottom:auto}
.paket-lain .ik-lain svg{width:28px;height:28px}
.paket-lain h3{margin-top:24px;font-size:20px}
.paket-lain p{color:var(--abu);font-size:15px;margin-bottom:8px}
.paket-lain .isi-paket .btn{padding:11px 18px;background:var(--biru);color:#fff}

/* layanan */
.layanan{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.kartu{padding:26px 0;border-top:1px solid #d9e0eb;display:flex;flex-direction:column;gap:8px}
.kartu .ik{display:none}
.kartu h3{font-size:18px}
.kartu p{color:var(--abu);font-size:15px}
.kartu .tautan{margin-top:auto;padding-top:4px;color:var(--biru)}

/* harga */
.alat{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.tab{display:flex;gap:4px;border-bottom:2px solid var(--garis)}
.tab button{border:0;background:transparent;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:var(--abu);padding:12px 16px;margin-bottom:-2px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tab button[aria-pressed="true"]{color:var(--biru);border-bottom-color:var(--biru)}
.cari{position:relative;margin-left:auto;flex:0 1 300px}
.cari input{width:100%;font-size:15px;padding:11px 16px 11px 42px;border:1px solid #cfd7e4;border-radius:999px;background:#fff}
.cari input:focus{outline:0;border-color:var(--biru);box-shadow:0 0 0 3px rgba(21,70,168,.12)}
.cari svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--abu)}
.tabel{background:#fff;border:1px solid var(--garis);border-radius:16px;overflow:hidden}
.tabel .baris{display:grid;grid-template-columns:1fr 190px 130px;align-items:center;gap:20px;padding:15px 26px;border-top:1px solid var(--garis)}
.tabel .kepala-tabel{color:var(--abu);font-size:13px;font-weight:600;border-top:0;padding-top:13px;padding-bottom:13px}
.tabel .grup{background:var(--latar);font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:var(--teks);padding:10px 26px;border-top:1px solid var(--garis)}
.tabel .rute b{display:block;font-weight:600}
.tabel .rute span{font-size:13px;color:var(--abu)}
.tabel .rp{font-family:Montserrat,sans-serif;font-weight:700;font-size:17px;text-align:right}
.tabel .rp small{font-family:"Open Sans",sans-serif;font-size:12px;font-weight:400;color:var(--abu)}
.tabel .kepala-tabel .rp{font-size:14px}
.tabel .pesan{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:var(--biru);text-decoration:none;background:var(--biru-tipis);border-radius:8px;padding:7px 14px}
.tabel .pesan:hover{background:var(--biru);color:#fff}
.tabel .pesan svg{width:16px;height:16px}
.tabel [hidden]{display:none}
.kosong{display:none;padding:32px 26px;text-align:center;color:var(--abu)}
.kosong a{color:var(--biru);font-weight:700}
.catatan{font-size:14px;color:var(--abu);margin-top:16px}

/* alasan */
.alasan{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.alasan div{display:flex;flex-direction:column;gap:10px}
.alasan .ik{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:var(--latar)}
.alasan .ik svg{width:30px;height:30px}
.alasan h3{font-size:18px;font-weight:700;color:var(--biru)}
.alasan p{color:var(--abu);font-size:15px}

/* cara pesan */
.langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:n;list-style:none}
.langkah li{position:relative;border-top:2px solid var(--biru);padding:22px 8px 0 0;counter-increment:n}
.langkah li:before{content:"Langkah " counter(n);display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:var(--biru);margin-bottom:10px}
.langkah h3{font-size:18px;margin-bottom:6px}
.langkah p{color:var(--abu);font-size:15px}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.faq-kiri{position:sticky;top:110px}
.faq-kiri h2{font-size:clamp(26px,3vw,36px)}
.faq-kiri p{color:var(--abu);margin:12px 0 24px}
.faq{display:grid;border-top:1px solid var(--garis)}
.faq details{border-bottom:1px solid var(--garis)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-family:Montserrat,sans-serif;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--biru);border-bottom:2px solid var(--biru);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding:0 40px 22px 4px;color:var(--abu)}

/* pita wa */
.pita-wa{background:var(--biru-tua);color:#fff;overflow:hidden}
.pita-wa .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
.pita-wa img{width:100%;max-width:500px}
.pita-wa h2{font-size:clamp(26px,3vw,34px)}
.pita-wa p{margin-top:10px;opacity:.75}
.pita-wa .nomor{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pita-wa .nomor a{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--teks);text-decoration:none;border-radius:10px;padding:12px 18px;font-family:Montserrat,sans-serif;font-weight:700}
.pita-wa .nomor a svg{color:var(--biru)}
.pita-wa .nomor a:hover{box-shadow:0 0 0 3px rgba(255,255,255,.5)}

/* footer */
footer{background:#fff;padding:56px 0 28px;font-size:15px}
.kaki{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:32px}
.kaki img{height:48px;width:auto;margin-bottom:14px}
.kaki p{color:var(--abu);max-width:26em}
.kaki h4,.kaki .kaki-judul{font-size:14px;color:var(--teks);margin-bottom:14px}
.kaki ul{list-style:none;display:grid;gap:8px;color:var(--abu)}
.kaki a{text-decoration:none}
.kaki a:hover{color:var(--biru)}
.kaki .sos{display:flex;gap:10px;margin-top:16px}
.kaki .sos a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--latar)}
.kaki .sos svg{width:20px;height:20px}
.kredit{margin-top:32px;font-size:12px;color:var(--abu);line-height:1.6}
.kredit a{text-decoration:underline}
.hak{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--garis);margin-top:40px;padding-top:20px;font-size:14px;color:var(--abu)}

/* tombol melayang */
.wa-melayang{position:fixed;right:20px;bottom:20px;z-index:45;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--wa);color:#fff;box-shadow:0 10px 28px rgba(31,168,85,.4)}
.wa-melayang svg{width:32px;height:32px}
.bar-hp{display:none}

@media (max-width:1280px){
  .kepala .kanan .btn-garis{display:none}
}
@media (max-width:1080px){
  .kepala nav{display:none}
  .isian{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .isian .kolom:first-child{grid-column:1/-1}
  .isian .btn{grid-column:1/-1;min-height:52px}
  .fakta{grid-template-columns:1fr 1fr;gap:16px 0}
  .fakta li:nth-child(3){border-left:0;padding-left:0}
  .daftar-paket{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  body{font-size:15px}
  .wrap{padding:0 16px}
  .kepala .wrap{height:64px}
  .kepala .logo img{height:40px}
  .kepala .kanan .btn-garis{display:none}
  .kepala .cs{padding:9px 14px;font-size:13px}
  .kepala .cs .teks-cs{display:none}
  .hero{padding:12px 0 0}
  .pita{border-radius:20px;padding:28px 14px 135px}
  .pita:after{bottom:110px}
  .hero-mobil{margin-top:10px}
  .pita .lencana{display:none}
  .pita h1{font-size:30px}
  .pita p{font-size:16px}
  .pesan-box{margin-top:-118px;padding:0 16px 18px;border-radius:18px}
  .pilih-unit{width:100%;padding:6px}
  .pilih-unit button{flex:1;justify-content:center;padding:10px 8px;font-size:14px}
  .pilih-unit button span{display:none}
  .pesan-atas{display:none}
  .isian{margin-top:4px}
  .isian .kolom:nth-child(4){grid-column:1/-1}
  .estimasi{flex-direction:column;align-items:flex-start;gap:2px}
  .bagian{padding:64px 0}
  .judul{margin-bottom:28px}
  .armada,.langkah{grid-template-columns:1fr;gap:16px}
  .layanan{grid-template-columns:1fr}
  .kartu{padding:18px 0}
  .faq-kiri .btn{display:none}
  .faq-kiri p{margin-bottom:0}
  .faq summary{padding:16px 18px;font-size:15px}
  .faq details p{padding:0 18px 16px}
  .langkah li{padding:18px 0 4px}
  .daftar-paket{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;gap:14px;margin:0 -16px;padding:4px 16px 18px;scrollbar-width:none}
  .daftar-paket::-webkit-scrollbar{display:none}
  .paket{flex:0 0 78%;scroll-snap-align:start}
  .mobil{padding:20px 18px}
  .spek{grid-template-columns:1fr 1fr;gap:12px 0}
  .spek div:nth-child(3){padding-left:0;border-left:0}
  .alat{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .tab{min-width:0;overflow-x:auto;scrollbar-width:none}
  .tab::-webkit-scrollbar{display:none}
  .cari{margin-left:0;flex:auto}
  .tabel .kepala-tabel{display:none}
  .tabel .baris{grid-template-columns:1fr auto;grid-template-areas:"rute rp" "rute pesan";gap:6px 14px;padding:14px 16px}
  .tabel .rute{grid-area:rute}
  .tabel .rp{grid-area:rp;font-size:16px}
  .tabel .pesan{grid-area:pesan;padding:5px 12px;font-size:13px}
  .tabel .grup{padding:10px 16px}
  .alasan{gap:24px}
  .pita-wa .wrap{grid-template-columns:1fr;gap:20px;padding-top:40px;padding-bottom:40px}
  .pita-wa img{max-width:320px;margin:0 auto}
  .kaki{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr;gap:24px}
  .faq-kiri{position:static}
  .kaki > div:first-child{grid-column:1/-1}
  footer{padding-bottom:100px}
  .wa-melayang{display:none}
  .bar-hp{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;gap:8px}
  .bar-hp a{flex:1;box-shadow:0 10px 28px rgba(15,47,115,.25)}
  .bar-hp .btn-garis{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== tambahan untuk halaman dalam ===== */

/* menu HP */
.menu-hp{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--garis);border-radius:10px;background:#fff;cursor:pointer}
.menu-hp svg{width:20px;height:20px}
.kepala nav a[aria-current="page"]{color:var(--biru)}

/* remah roti */
.remah{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:16px;list-style:none}
.remah a{text-decoration:none;color:#fff}
.remah a:hover{text-decoration:underline}
.remah li+li:before{content:"/";margin-right:6px;opacity:.6}

/* kepala halaman dalam */
.pita-kecil{background:var(--biru-tua);color:#fff;border-radius:24px;padding:44px 48px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:center;margin-top:28px;overflow:hidden}
.pita-kecil h1{font-size:clamp(28px,3.6vw,42px);font-weight:700}
.pita-kecil p{opacity:.8;font-size:17px;margin-top:12px;max-width:34em}
.pita-kecil .gambar img{width:100%;height:auto}
.pita-kecil .gambar.foto img{border-radius:16px;aspect-ratio:4/3;object-fit:cover}
.pita-kecil .label-harga{display:inline-flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pita-kecil .label-harga span{background:rgba(255,255,255,.1);border-radius:8px;padding:7px 12px;font-size:14px}
.pita-kecil .label-harga b{font-family:Montserrat,sans-serif}
.pita-kecil.tanpa-gambar{grid-template-columns:1fr}

/* tata letak isi + samping */
.tata{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start;padding:56px 0 88px}
.samping{position:sticky;top:100px;display:grid;gap:16px}
.konten h2{font-size:24px;margin:40px 0 12px}
.konten h2:first-child{margin-top:0}
.konten h3{font-size:18px;margin:24px 0 8px}
.konten p{color:#3a4558;margin-bottom:14px;max-width:44em}
.konten ul.titik{margin:0 0 16px 20px;color:#3a4558}
.konten ul.titik li{margin-bottom:6px}
.konten a{color:var(--biru)}

/* fakta ringkas */
.ringkas{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--garis);border-radius:16px;margin-bottom:36px}
.ringkas div{padding:18px 20px;border-left:1px solid var(--garis);font-size:14px;color:var(--abu)}
.ringkas div:first-child{border-left:0}
.ringkas b{display:block;font-family:Montserrat,sans-serif;font-size:17px;color:var(--teks);margin-top:2px}

/* kota yang dicakup */
.kota{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:16px}
.kota li{background:var(--latar);border:1px solid var(--garis);border-radius:8px;padding:6px 12px;font-size:14px}

/* kartu pesan di samping */
.kartu-pesan{border:1px solid var(--garis);border-radius:16px;padding:22px;background:#fff;box-shadow:0 18px 48px rgba(15,42,102,.08)}
.kartu-pesan .atas small{display:block;font-size:13px;color:var(--abu)}
.kartu-pesan .atas b{font-family:Montserrat,sans-serif;font-size:26px;font-weight:700}
.kartu-pesan .atas span{font-size:14px;color:var(--abu)}
.kartu-pesan .isian-kecil{display:grid;gap:10px;margin:18px 0 14px}
.kartu-pesan .isian-kecil .dua{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kartu-pesan .btn{width:100%}
.kartu-pesan .estimasi{margin-top:14px}
.kartu-pesan .pilih-unit{transform:none;width:100%;margin:0 0 4px}
.kartu-pesan .pilih-unit button{flex:1;justify-content:center;padding:9px 8px;font-size:14px}
.kartu-pesan .pilih-unit button span{display:none}
.kartu-bantu{border:1px solid var(--garis);border-radius:16px;padding:20px 22px;font-size:15px;color:var(--abu)}
.kartu-bantu b{display:block;color:var(--teks);font-family:Montserrat,sans-serif;margin-bottom:4px}
.kartu-bantu a{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;color:var(--biru);text-decoration:none}
.kartu-bantu a svg{width:18px;height:18px}

/* tautan terkait */
.terkait{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.terkait a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid #d9e0eb;text-decoration:none}
.terkait a:hover b{color:var(--biru)}
.terkait b{font-family:Montserrat,sans-serif;font-weight:600;font-size:16px}
.terkait span{white-space:nowrap;font-size:14px;color:var(--abu)}

.kaki{grid-template-columns:1.3fr repeat(4,1fr)}
.konten .terkait{grid-template-columns:1fr 1fr}

/* judul kartu jadi tautan */
.isi-paket h3 a,.mobil h3 a,.kartu h3 a{text-decoration:none}
.isi-paket h3 a:hover,.mobil h3 a:hover,.kartu h3 a:hover{color:var(--biru)}
.tabel .rute b a{text-decoration:none}
.tabel .rute b a:hover{color:var(--biru);text-decoration:underline}

/* faq di halaman dalam */
.konten .faq{margin-top:4px}

/* 404 */
.hilang{text-align:center;padding:120px 0}
.hilang h1{font-size:40px}
.hilang p{color:var(--abu);margin:12px 0 28px}

@media (max-width:1080px){
  .menu-hp{display:inline-flex}
  .kepala nav.buka{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--garis);padding:8px 24px 16px}
  .kepala nav.buka a{padding:12px 0;border-bottom:1px solid var(--garis)}
  .kepala .wrap{position:relative}
  .tata{grid-template-columns:1fr;gap:32px}
  .samping{position:static}
  .terkait{grid-template-columns:1fr 1fr}
  .kaki{grid-template-columns:1fr 1fr 1fr}
  .kaki > div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .kepala nav.buka{padding:4px 16px 12px}
  .pita-kecil{grid-template-columns:1fr;padding:28px 20px;border-radius:20px;margin-top:12px;gap:20px}
  .pita-kecil p{font-size:16px}
  .tata{padding:32px 0 64px}
  .ringkas{grid-template-columns:1fr 1fr}
  .ringkas div{padding:14px 16px}
  .ringkas b{font-size:15px}
  .ringkas div:nth-child(3){border-left:0;border-top:1px solid var(--garis);grid-column:1/-1}
  .terkait,.konten .terkait{grid-template-columns:1fr}
  .kaki{grid-template-columns:1fr 1fr}
  .konten h2{font-size:21px}
}

/* animasi muncul saat di-scroll (dipasang lewat app.js) */
.js-anim .muncul{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--tunda,0ms)}
.js-anim .muncul.tampil{opacity:1;transform:none}
.js-anim .gambar-muncul{opacity:0;transform:scale(.96);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-anim .gambar-muncul.tampil{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .muncul,.js-anim .gambar-muncul{opacity:1;transform:none;transition:none}}

/* ===== kerapian (25 Okt) ===== */
.tabel-bawah{margin-top:18px}
.layanan a.kartu{text-decoration:none;color:inherit}
.layanan a.kartu h3{display:flex;justify-content:space-between;align-items:center;gap:12px}
.layanan a.kartu h3 svg{width:18px;height:18px;flex:none;color:var(--biru);transition:transform .2s}
.layanan a.kartu:hover h3{color:var(--biru)}
.layanan a.kartu:hover h3 svg{transform:translateX(4px)}
.kartu-bantu a{display:flex;width:max-content}

@media (max-width:1080px){
  .tata .samping{order:-1}
}
@media (max-width:760px){
  /* bagian atas: tombol unit masuk ke dalam kotak, tidak menggantung */
  .pita{padding-bottom:52px}
  .pita:after{bottom:34px}
  .pesan-box{margin-top:-40px;padding-top:16px}
  .pesan-box .pilih-unit{transform:none;margin:0 0 14px;width:100%}
  /* kartu armada: harga di bawah judul, sejajar untuk kedua unit */
  .mobil-atas{flex-direction:column;gap:4px}
  .mobil .mulai{text-align:left}
  .mobil .mulai b{display:inline;margin-left:4px}
  /* pita kontak: tanpa gambar di HP */
  .pita-wa img{display:none}
  /* footer ringkas di HP */
  .kaki > div:nth-child(3),.kaki > div:nth-child(4){display:none}
  .hak{flex-direction:column;gap:4px}
  .kartu-bantu{display:none}
  .tabel-bawah .btn{width:100%}
}

/* bar WA bawah di HP: muncul setelah melewati bagian atas, supaya tidak menutupi tombol pesan */
@media (max-width:760px){
  .bar-hp{transform:translateY(140%);transition:transform .3s ease}
  .bar-tampil .bar-hp{transform:none}
}

/* tab wilayah bisa digeser sampai ukuran tablet (dulu cuma <=760px, bikin halaman melebar di 761-1080px) */
@media (max-width:1080px){
  .alat{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .tab{min-width:0;overflow-x:auto;scrollbar-width:none}
  .tab::-webkit-scrollbar{display:none}
  .tab button{flex:none}
  .cari{margin-left:0;flex:auto}
}
/* seluruh kartu paket bisa diklik ke halaman detail; tombol Pesan tetap ke WhatsApp */
.paket{position:relative}
.paket .isi-paket h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.paket .bawah-paket .btn{position:relative;z-index:2}
.paket:hover .isi-paket h3 a{color:var(--biru)}