:root{
  --biru:#27448a; --biru-gelap:#1d3570; --oranye:#f7931e;
  --garis:#e3e6ea; --teks:#222; --abu:#8a8f98; --wa:#25d366;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Lato','Segoe UI',Roboto,Arial,sans-serif;color:var(--teks);
  background:linear-gradient(160deg,#fff 60%,#eceef1);min-height:100vh}
.wrap{max-width:480px;margin:0 auto;padding:18px 16px 110px}
.kartu{background:#fff;border:1px solid #bfc3c9;border-radius:10px;padding:24px 20px 32px;
  box-shadow:0 2px 8px rgba(0,0,0,.04)}
.judul{display:block;font-size:1.1rem;margin:18px 0 10px}
.kartu form>.judul:first-child{margin-top:0}
.judul em{color:#666;font-weight:700}

/* Dari / Ke */
.grup-kota{position:relative}
.baris-kota{display:flex;border:1px solid var(--garis);border-radius:8px;overflow:hidden;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);margin-bottom:36px}
.baris-kota:last-child{margin-bottom:0}
.awalan{flex:0 0 118px;display:flex;align-items:center;justify-content:center;
  color:var(--abu);font-size:1.15rem;border-right:1px solid var(--garis)}
.baris-kota select{flex:1;border:0;background:transparent;padding:26px 36px 26px 14px;font:inherit;
  font-size:1.05rem;color:var(--teks);appearance:none;outline:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 0h14L7 8z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 14px center}
.tukar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;border:0;background:var(--oranye);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .35s}
.tukar.putar{transform:translate(-50%,-50%) rotate(180deg)}
.tukar:hover{filter:brightness(1.05)}

/* Penumpang */
.label-ganda{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}
.label-ganda .judul{margin:0 0 10px}
.penumpang{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.kotak-num{display:flex;border:1px solid var(--garis);border-radius:8px;overflow:hidden;height:88px}
.ikon{flex:0 0 52px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--garis)}
.ikon img{width:30px;height:auto;opacity:.55}
.kotak-num input{width:100%;min-width:0;border:0;padding:0 8px;font:inherit;font-size:1.1rem;
  color:#555;outline:0;-moz-appearance:textfield}
.kotak-num input::-webkit-outer-spin-button,.kotak-num input::-webkit-inner-spin-button{-webkit-appearance:none}

/* Select tunggal */
select.tunggal{width:100%;border:1px solid var(--garis);border-radius:6px;padding:20px 36px 20px 14px;
  font:inherit;font-size:1.05rem;color:#555;background:#fff;appearance:none;outline:0;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 0h14L7 8z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 14px center}
select:focus,.kotak-num:focus-within{border-color:var(--biru)}
.baris-kota:focus-within{border-color:var(--biru)}

.btn-cari{display:block;width:100%;margin-top:56px;padding:22px;border:0;border-radius:6px;
  background:var(--biru);color:#fff;font:inherit;font-size:1.35rem;font-weight:700;letter-spacing:.12em;cursor:pointer}
.btn-cari:hover{background:var(--biru-gelap)}
.btn-tutup{display:block;width:100%;margin-top:16px;padding:20px;border:0;border-radius:6px;
  background:var(--biru);color:#fff;font:inherit;font-size:1.2rem;cursor:pointer}

.pesan-error{margin:18px 0 -30px;color:#b3261e;font-size:.95rem}
.daftar-error{color:#b3261e;padding-left:18px}

/* WhatsApp melayang */
.wa{position:fixed;right:18px;bottom:60px;width:64px;height:64px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:20}

/* Hasil */
.ringkas{color:var(--abu);margin:-4px 0 16px}
.jadwal{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;border-top:1px solid var(--garis)}
.jadwal small{display:block;color:var(--abu);margin-top:4px}
.badge{background:#eef2fb;color:var(--biru);font-size:.75rem;padding:2px 8px;border-radius:10px;margin-left:6px}
.harga{font-weight:700;color:var(--biru);white-space:nowrap}

.tersembunyi{display:none}
@media(min-width:600px){.wrap{padding-top:40px}}

/* Tombol pesan di hasil */
.kanan{text-align:right}
.btn-pesan{display:inline-block;margin-top:8px;padding:9px 22px;border-radius:6px;background:var(--oranye);
  color:#fff;text-decoration:none;font-weight:700}
.btn-pesan:hover{filter:brightness(1.06)}

/* Form pemesanan */
.ringkasan{background:#f4f7fd;border:1px solid #d5def2;border-radius:8px;padding:14px 16px;margin-bottom:6px}
.ringkasan .rute{font-weight:700;color:var(--biru);font-size:1.05rem}
.ringkasan p{margin:4px 0;font-size:.95rem}
.ringkasan .total{font-weight:700;color:var(--biru);font-size:1.1rem;margin-top:8px}
.sub{font-size:1.05rem;margin:26px 0 4px;color:var(--biru);font-weight:700}
.kartu-penumpang{border:1px solid var(--garis);border-radius:8px;padding:14px;margin-top:12px;background:#fafbfd}
.kartu-penumpang h4{margin:0 0 10px;font-size:.98rem}
.kartu-penumpang h4 span{font-weight:400;color:var(--abu)}
.field{display:block;margin-top:12px}
.field>span{display:block;font-size:.92rem;margin-bottom:6px}
.field>span i{color:#b3261e;font-style:normal}
.field>small{display:block;color:var(--abu);margin-top:4px;font-size:.8rem}
.field input,.field textarea{width:100%;border:1px solid var(--garis);border-radius:6px;padding:14px;
  font:inherit;font-size:1rem;color:#333;background:#fff;outline:0}
.field input:focus,.field textarea:focus{border-color:var(--biru)}
.field textarea{resize:vertical;min-height:80px}
.btn-kirim-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:28px;
  padding:20px;border:0;border-radius:6px;background:var(--wa);color:#fff;font:inherit;font-size:1.15rem;
  font-weight:700;cursor:pointer}
.btn-kirim-wa:hover{background:#1ebe5b}
.btn-kirim-wa img{width:28px;height:28px}
.catatan{color:var(--abu);font-size:.85rem;text-align:center;margin:10px 0 0}

/* Rincian harga */
.rincian{width:100%;border-collapse:collapse;margin-top:10px;font-size:.95rem}
.rincian td{padding:6px 0}
.rincian td:last-child{text-align:right;white-space:nowrap}
.rincian .bayar td{border-top:1px dashed #b9c4de;padding-top:10px;font-weight:700;color:var(--biru);font-size:1.1rem}