/* pages.css v9 - header dan latar satu warna dari gambar referensi, tanpa sambungan */

/* >>>>>>>> 1. VARIABEL + DASAR <<<<<<<< */
:root {
  --amber: #ff9f00;
  --green: #16a34a;
  --red: #dc2626;
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --bg-top: #ffb52e;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--text-main);
  background: #fffaf4;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
}
#app { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--bg-top) 0, #ffc45c 150px, #fff0d2 330px, #fffaf4 540px); }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.page-content::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display: none; }
.chip-row { scrollbar-width: none; }

/* >>>>>>>> 2. HEADER HALAMAN LIHAT SEMUA (TOMBOL KEMBALI) <<<<<<<< */
.daftar-header { display: flex; align-items: center; gap: 10px; }
.back-btn { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #ffffff; color: var(--text-main); font-size: 22px; box-shadow: 0 2px 8px rgba(120, 80, 20, 0.12); }
.back-btn:active { transform: scale(0.94); }
.daftar-title { min-width: 0; }
.daftar-title .logo { font-size: 22px; }

/* >>>>>>>> 3. LOGO WARLOK + BADGE TAMU <<<<<<<< */
.logo-warlok { gap: 8px; }
.warlok-logo { display: block; flex-shrink: 0; border-radius: 10px; box-shadow: 0 2px 6px rgba(240, 138, 0, 0.28); }
.badge-tamu { background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(107, 114, 128, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28); }

/* >>>>>>>> 4. HALAMAN RUTE + TIKET: INFO, DAFTAR, KARTU <<<<<<<< */
.rute-info { display: flex; gap: 10px; margin: 4px 0 12px; padding: 12px 14px; background: #ffffff; border-radius: 16px; box-shadow: 0 2px 8px rgba(120, 80, 20, 0.08); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.rute-info i { flex-shrink: 0; margin-top: 1px; font-size: 22px; color: var(--amber); }
.rute-info b { display: block; margin-bottom: 2px; font-size: 13.5px; color: var(--text-main); }
.rute-count { font-size: 12px; font-weight: 700; color: #b45309; }
.rute-list { display: flex; flex-direction: column; gap: 12px; }
.rute-retry { display: block; min-width: 160px; margin: 16px auto 0; }
.rute-card { display: block; width: 100%; padding: 14px; border: none; border-radius: 18px; background: #ffffff; box-shadow: 0 2px 8px rgba(120, 80, 20, 0.08); color: inherit; font-family: inherit; text-align: left; transition: transform 0.1s; }
.rute-card:active { transform: scale(0.99); }
.rute-card.full .rute-title { color: var(--text-muted); }
.rute-title { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--text-main); overflow-wrap: anywhere; }
.rute-title.big { padding-right: 44px; font-size: 20px; font-weight: 800; }
.rute-me { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 10.5px; font-weight: 800; vertical-align: middle; }
.rute-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rute-tags span { padding: 3px 10px; border-radius: 999px; background: #fff3dc; color: #92580a; font-size: 11.5px; font-weight: 700; }
.rute-host { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rute-av { width: 40px; height: 40px; border-radius: 13px; font-size: 15px; }
.rute-host-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; }
.rute-host .card-meta { margin-top: 2px; }
.rute-when { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #f1e2c8; }
.rute-when b { display: block; font-size: 13.5px; font-weight: 800; }
.rute-when small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; }
.rute-when small.ok { color: var(--green); }
.rute-when small.bad { color: var(--red); }
.rute-when small.mut { color: var(--text-muted); font-weight: 500; }
.rute-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 96px; }
.rdot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; }
.rdot.x { background: #ef4444; }

/* Status di kartu Tiket */
.tk-status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; background: #fff3dc; color: #92580a; font-size: 11.5px; font-weight: 800; text-align: center; }
.tk-status.s2 { background: var(--amber); color: #ffffff; }
.tk-status.s3 { background: #dcfce7; color: #15803d; }
.tk-status.s4 { background: #f3f4f6; color: #6b7280; }

/* >>>>>>>> 5. LEMBAR RUTE (ISI DIGULIR, TOMBOL UTAMA MENEMPEL DI BAWAH) <<<<<<<< */
.sheet.rute-sheet { display: flex; flex-direction: column; height: 92dvh; max-height: 92dvh; padding: 0; overflow: hidden; }
.rute-sheet .sheet-close { z-index: 2; }
.rute-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 20px 16px; }
.rute-foot { flex-shrink: 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: #ffffff; border-top: 1px solid #f3f4f6; }
.rute-foot .btn-primary { width: 100%; min-height: 50px; flex: none; font-size: 15px; }
.rute-foot .btn-primary.btn-secondary { background: #ffffff; color: #f08a00; border: 1.5px solid #ff9f00; }
.btn-primary:disabled { opacity: 0.45; transform: none; cursor: default; }

.rute-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 8px; font-size: 13px; font-weight: 800; color: var(--text-main); }
.rute-lbl small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-align: right; }
.sheet .rute-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); text-align: center; }
.sheet .rute-hint.left { text-align: left; }
.rute-scroll .rute-when { margin-top: 0; padding: 12px 14px; border-top: none; border-radius: 14px; background: #fff8ec; }

/* Titik rute: bernomor karena memang berurutan; satu titik tanpa nomor */
.rute-stops { counter-reset: stop; }
.rute-stops li { counter-increment: stop; position: relative; padding: 0 0 14px 34px; }
.rute-stops li::before { content: counter(stop); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--amber); color: #ffffff; font-size: 12px; font-weight: 800; }
.rute-stops li::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: #fde2b0; }
.rute-stops li:last-child { padding-bottom: 0; }
.rute-stops li:last-child::after { display: none; }
.rute-stops.one li { padding-left: 0; }
.rute-stops.one li::before, .rute-stops.one li::after { display: none; }
.rute-stops li b { display: block; font-size: 14px; font-weight: 700; }
.rute-stops li small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

.rute-mp { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff7ea; }
.rute-mp i { flex-shrink: 0; font-size: 22px; color: #f08a00; }
.rute-mp b { display: block; font-size: 14px; }
.rute-mp small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #92580a; }

/* Tombol "Aku sudah sampai": selalu tampil setelah ikut, aktif hanya pada hari H */
.rute-arrive { margin-top: 14px; }
.rute-arr { width: 100%; min-height: 48px; flex: none; padding: 0 16px; font-size: 15px; }
.rute-arr:disabled { opacity: 0.5; border-style: dashed; cursor: default; }
.rute-arr.done { background: #dcfce7; border: 1.5px solid #22c55e; color: #15803d; opacity: 1; }
.rute-arrive small { display: block; margin-top: 6px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* Kartu tiket di dalam lembar: status, Batal, Lapor, Darurat 112 */
.rute-ticket { margin-top: 18px; padding: 14px; border: 1.5px dashed #f6b84b; border-radius: 16px; background: #fffaf0; }
.rt-joined b { display: block; font-size: 14.5px; font-weight: 800; color: #15803d; }
.rt-joined small { display: block; margin-top: 2px; font-size: 12.5px; color: #92580a; }
.rt-steps { margin: 10px 0 12px; }
.rt-steps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.rt-steps .n { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f3f4f6; color: var(--text-muted); font-size: 11.5px; font-weight: 800; }
.rt-steps li.done { color: #15803d; }
.rt-steps li.done .n { background: #22c55e; color: #ffffff; }
.rt-steps li.now { color: var(--text-main); font-weight: 800; }
.rt-steps li.now .n { background: var(--amber); color: #ffffff; box-shadow: 0 0 0 4px rgba(255, 159, 0, 0.2); }
.rt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-acts .btn-secondary { flex: 1 1 auto; min-height: 42px; padding: 0 14px; font-size: 13px; }
.rute-sos { flex: 1 1 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: #dc2626; color: #ffffff; font-size: 13.5px; font-weight: 800; }
.rute-sos i { font-size: 18px; }
.rute-demo { display: block; width: 100%; margin-top: 10px; padding: 8px; border: 1px dashed #9ca3af; border-radius: 10px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; }

/* Daftar kursi: kosong = hijau, penuh = merah */
.rute-seats { display: flex; flex-direction: column; gap: 6px; }
.rute-seat { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1.5px solid #fecaca; border-radius: 12px; background: #fff5f5; color: inherit; font-family: inherit; font-size: 13.5px; text-align: left; }
.rute-seat .no { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ef4444; color: #ffffff; font-size: 12px; font-weight: 800; }
.rute-seat .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rute-seat.empty { border-color: #bbf7d0; background: #f0fdf4; }
.rute-seat.empty .no { background: #22c55e; }
.rute-seat.empty .nm { color: var(--text-muted); font-weight: 600; }

/* >>>>>>>> 6. PROFIL PESERTA + ULASAN <<<<<<<< */
.pe-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.pe-stat > div { padding: 12px; border-radius: 14px; background: #fff7ea; color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-align: center; }
.pe-stat b { display: block; margin-bottom: 2px; font-size: 18px; font-weight: 800; color: var(--text-main); }
.rute-rv { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fafafa; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.rute-rvh { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; color: var(--text-main); }
.rute-rvh span { color: var(--amber); letter-spacing: 1px; }
#ulasan-sheet .sheet { max-height: 85dvh; }
.rute-stars { display: flex; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.rute-stars button { padding: 4px; border: none; background: none; color: #d1d5db; font-size: 38px; line-height: 1; }
.rute-stars button.on { color: var(--amber); }
.rute-text { display: block; width: 100%; min-height: 96px; margin-bottom: 14px; padding: 12px 14px; border: 1.5px solid #f3e3c6; border-radius: 14px; background: #fffaf2; color: var(--text-main); line-height: 1.5; outline: none; resize: none; }
.rute-text:focus { border-color: var(--amber); }

/* >>>>>>>> 7. CHAT GRUP (HALAMAN PENUH, MASUK DARI KANAN) <<<<<<<< */
.chat-page { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #fff9f0; transform: translateX(100%); transition: transform 0.26s ease; }
.chat-page.in { transform: translateX(0); }
.chat-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: #ffffff; box-shadow: 0 2px 8px rgba(120, 80, 20, 0.08); }
.chat-back { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #fff3dc; color: #92580a; font-size: 22px; }
.chat-head > div { min-width: 0; }
.chat-head b { display: block; font-size: 16px; font-weight: 800; }
.chat-head small { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-muted); }
.chat-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.chat-sys { align-self: center; max-width: 90%; padding: 6px 12px; border-radius: 999px; background: #fde9c8; color: #92580a; font-size: 11.5px; font-weight: 600; line-height: 1.4; text-align: center; }
.chat-msg { align-self: flex-start; max-width: 82%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #ffffff; box-shadow: 0 1px 4px rgba(120, 80, 20, 0.1); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.chat-msg small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: #b45309; }
.chat-msg.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: linear-gradient(145deg, #ffb83d, #ff9f00); color: #ffffff; }
.chat-msg.me small { color: rgba(255, 255, 255, 0.85); }
.chat-foot { flex-shrink: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #ffffff; border-top: 1px solid #f3f4f6; }
.chat-row { display: flex; gap: 8px; }
.chat-row input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1.5px solid #f3e3c6; border-radius: 23px; background: #fffaf2; color: var(--text-main); outline: none; }
.chat-row input:focus { border-color: var(--amber); }
.chat-send { flex-shrink: 0; height: 46px; padding: 0 20px; border-radius: 23px; }
.chat-note { margin-top: 8px; font-size: 11px; color: var(--text-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .chat-page { transition: none; } }

/* >>>>>>>> 8. HEADER KONTRAS (TEKS COKLAT TUA DI ATAS AMBER) <<<<<<<< */
.home-header .logo { color: #2b1700; }
.home-header .logo i { color: #7c2d00; }
.greeting { color: #3d2300; font-weight: 600; }
.bell-btn { color: #2b1700; box-shadow: 0 2px 8px rgba(80, 40, 0, 0.18); }
.bell-btn i { color: #2b1700; }
.search-box { box-shadow: 0 3px 10px rgba(80, 40, 0, 0.16); }
.search-box:focus-within { box-shadow: 0 0 0 2px #2b1700, 0 3px 10px rgba(80, 40, 0, 0.16); }
.wl-ico { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #2b1700; }
.logo .wl-ico i { font-size: 20px; color: #ffd27a; }
.logo-warlok { gap: 10px; }

/* >>>>>>>> 9. BERANDA: KELANA + GUIDE VERIFIED, GESER KIRI <<<<<<<< */
.hsec { margin-top: 14px; }
.hsec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hsec-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--text-main); }
.hsec-ico { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #2b1700; }
.hsec-title .hsec-ico i { font-size: 18px; color: #ffd27a; }
.hsec-head .see-all { min-height: 44px; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; font-size: 13px; }
.hsec-head .see-all i { font-size: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* >>>>>>>> 10. NAVBAR: WARLOK DI TENGAH, TIKET KOSONG <<<<<<<< */
.fab.active { box-shadow: 0 0 0 3px rgba(255, 159, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 2px 4px rgba(150, 80, 0, 0.16); }
.fab i { font-size: 26px; }
.tiket-empty { display: flex; flex-direction: column; align-items: center; margin-top: 56px; padding: 0 24px; text-align: center; }
.tiket-ico { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 4px 14px rgba(120, 80, 20, 0.12); }
.tiket-ico i { font-size: 44px; color: #f08a00; }
.tiket-empty b { font-size: 17px; font-weight: 800; }
.tiket-empty p { margin-top: 6px; max-width: 260px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }

/* >>>>>>>> 11. UI/UX UMUM: TARGET KETUK 44px, FOKUS JELAS, GERAK DIHORMATI <<<<<<<< */
.back-btn, .chat-back { width: 44px; height: 44px; }
.icon-btn { min-width: 36px; min-height: 36px; }
button:focus-visible, a:focus-visible, .nav-item:focus-visible, .fab:focus-visible, .provider-card:focus-visible, .rute-card:focus-visible { outline: 3px solid #2b1700; outline-offset: 2px; }
.provider-card, .rute-card { transition: transform 0.12s, box-shadow 0.12s; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } .provider-card, .rute-card { transition: none; } }

/* >>>>>>>> 12. HEADER: GRADIEN AMBER KE PUTIH DI BAWAH <<<<<<<< */
.home-header, .home-header.stuck { background: linear-gradient(180deg, #ffa61a 0%, #ffb838 60%, #ffffff 100%); padding-bottom: 22px; }
.home-header.stuck.joined { background: linear-gradient(180deg, #ffa61a 0%, #ffb838 60%, #ffffff 100%); }
.home-header .greeting { color: #3d2300; }

/* >>>>>>>> 13. LONCENG LEBIH KECIL <<<<<<<< */
.bell-btn { width: 34px; height: 34px; }
.bell-btn i { font-size: 17px; }
.bell-btn .bell-dot { top: 5px; right: 7px; width: 8px; height: 8px; }

/* >>>>>>>> 14. IKON KELANA, GUIDE, WARLOK: LEMBUT, TIDAK HITAM PEKAT <<<<<<<< */
.hsec-ico, .wl-ico { background: linear-gradient(145deg, #ffe7b3, #ffd27a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.hsec-title .hsec-ico i, .logo .wl-ico i { color: #b45309; }

/* >>>>>>>> 15. KARTU BERANDA: LEBAR PENUH, RATA KIRI-KANAN, SEPERTI GARIS <<<<<<<< */

/* >>>>>>>> 16. ANTI MELAR: ATAS, BAWAH, SAMPING <<<<<<<< */
.page-content, .rute-scroll, .chat-body, .sheet, .sheet-overlay { overscroll-behavior: contain; overscroll-behavior-x: none; touch-action: pan-y; }
.chip-row, .banner-row, .hrow { overscroll-behavior-x: none; }
.chip-row { touch-action: pan-x pan-y; }
.banner-row { touch-action: pan-x; }

/* >>>>>>>> 17. ANTI KEDIP <<<<<<<< */
:root { color-scheme: light; }
html { background: #ffb838; }
.home-header, .provider-card, .rute-card, .sheet, .chat-page, .bottom-nav-container, .banner { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); }
.provider-card:active, .rute-card:active { transform: translateZ(0) scale(0.99); }
img { display: block; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* >>>>>>>> 18. HEADER SOLID, LATAR TERANG (TANPA GRADIEN) <<<<<<<< */
html { background: #fff7e8; }
#app { background: #fff7e8; }
body { background: #fff7e8; }
.home-header, .home-header.stuck, .home-header.stuck.joined { background: #ffc86b; box-shadow: none; padding-bottom: 14px; }
.home-header.stuck { box-shadow: 0 6px 14px -8px rgba(120, 60, 0, 0.35); }

/* >>>>>>>> 19. LONCENG DI TENGAH VERTIKAL HEADER <<<<<<<< */
.home-header { align-items: center; }

/* >>>>>>>> 20. KELANA & GUIDE: GESER KIRI, KARTU PORTRAIT <<<<<<<< */

/* >>>>>>>> 21. BANNER WARLOK: IKON GRUP + ILUSTRASI ORANG BERKUMPUL <<<<<<<< */
.banner { min-height: 140px; }
.banner p { max-width: 56%; }
.banner .ilus-grup { position: absolute; right: 8px; bottom: 6px; width: 150px; height: 112px; pointer-events: none; }
.banner .banner-logo, .banner .banner-tag, .banner h3, .banner p, .banner .banner-btn { position: relative; z-index: 1; }
.wl-ico-b { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #ffffff; box-shadow: 0 2px 6px rgba(160, 80, 0, 0.25); }
.wl-ico-b i { font-size: 22px; color: #ff9f00; }

/* >>>>>>>> 22. UI/UX: fokus, sentuh, dan kontras konsisten <<<<<<<< */
.banner { cursor: pointer; }
.banner-btn { min-height: 40px; }
.see-all { color: #7c2d00; }
.hsec-title { color: #2b1700; }

/* >>>>>>>> 23. KARTU BERANDA: BENTUK SEPERTI FOTO, GESER KIRI (ISI DALAM TIDAK DIUBAH) <<<<<<<< */

/* >>>>>>>> 24. ANTI KEDIP SAAT MASUK <<<<<<<< */
.provider-card, .rute-card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* >>>>>>>> 25. SKALA SPASI (SATU SUMBER) <<<<<<<< */
:root { --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --head: #ffc86b; --head-ink: #2b1700; }

/* >>>>>>>> 26. LATAR: AMBER (SAMA DENGAN HEADER) LALU PUTIH KE BAWAH <<<<<<<< */
html, body { background: #ffffff; }
#app { background: linear-gradient(180deg, var(--head) 0px, var(--head) 190px, #ffffff 680px); }

/* >>>>>>>> 27. HEADER: WARNA SAMA DENGAN LATAR, DIPISAH BAYANGAN, TEKS KONTRAS <<<<<<<< */
.home-header, .home-header.stuck, .home-header.stuck.joined { background: var(--head); margin: 0 -16px 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px var(--sp-3); box-shadow: 0 6px 14px -10px rgba(120, 60, 0, 0.45); }
.home-header .logo, .home-header .logo i { color: var(--head-ink); }
.home-header .greeting { color: #4a2a00; margin-top: 2px; }
.home-header.stuck { box-shadow: 0 6px 14px -8px rgba(120, 60, 0, 0.4); }

/* >>>>>>>> 28. JARAK SEARCH, BANNER, JUDUL, DAN KARTU (PRESISI) <<<<<<<< */
.home-header + .search-box { margin: 0 0 var(--sp-3); }
.search-box { margin: 0 0 var(--sp-3); }
.banner-row { margin: 0 0 var(--sp-3); padding: 0; }
.hsec { margin-top: 0; }
.hsec + .hsec { margin-top: var(--sp-4); }
.hsec-head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin: 0 0 var(--sp-2); }
.hsec-head .see-all { min-height: 32px; padding: 0; }

/* >>>>>>>> 29. KARTU BERANDA: UKURAN SAMA DENGAN LIHAT SEMUA, GESER KIRI <<<<<<<< */
.hrow { display: flex; flex-direction: row; align-items: stretch; gap: 10px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; scroll-snap-type: x mandatory; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; }
.hrow::-webkit-scrollbar { display: none; }
.hrow .provider-card { flex: 0 0 calc(50% - 5px); width: calc(50% - 5px); min-width: 0; scroll-snap-align: start; }
.hrow .empty-note { width: 100%; margin: 24px 0; }
.skel { flex: 0 0 calc(50% - 5px); width: calc(50% - 5px); height: 190px; border-radius: 16px; scroll-snap-align: start; background: linear-gradient(100deg, #f3ead9 30%, #fff8ea 50%, #f3ead9 70%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }

/* >>>>>>>> 30. LATAR DAN HEADER: KONTRAS JELAS, TANPA BAYANGAN SAAT DIAM <<<<<<<< */
:root { --head: #ffb12e; --head-ink: #2b1700; --paper-top: #fff3d9; }
#app { background: linear-gradient(180deg, var(--paper-top) 0%, #ffffff 70%); }
html, body { background: #ffffff; }
.home-header, .home-header.stuck, .home-header.stuck.joined { background: var(--head); }
.home-header { box-shadow: none; }
.home-header.stuck { box-shadow: 0 6px 14px -8px rgba(120, 60, 0, 0.4); }
.home-header.stuck.joined { box-shadow: 0 6px 14px -8px rgba(120, 60, 0, 0.4); }

/* >>>>>>>> 31. JARAK PRESISI: 16 ANTAR BLOK, 12 JUDUL KE KARTU <<<<<<<< */
.home-header + .search-box { margin: var(--sp-3) 0; }
.search-box { margin: 0 0 var(--sp-3); }
.banner-row { margin: 0 0 var(--sp-3); }
.hsec + .hsec { margin-top: var(--sp-3); }
.hrow { padding: 0 16px; }
.rute-page .sticky-bar { margin-top: var(--sp-3); }
.section-head-end { display: flex; align-items: center; justify-content: flex-end; height: 32px; margin: 0 0 var(--sp-2); }
.rute-page .rute-list { margin-top: 0; }

/* >>>>>>>> 32. UI/UX: TARGET SENTUH, RADIUS, DAN KONTRAS KONSISTEN <<<<<<<< */
.chip { min-height: 40px; }
.banner { border-radius: 22px; }
.provider-card, .rute-card { border-radius: 16px; }
.hsec-title { font-size: 18px; font-weight: 800; color: var(--head-ink); }
.see-all { min-height: 44px; }
.rute-count { color: #92400e; }

/* >>>>>>>> 33. SCROLL VERTIKAL TETAP JALAN DARI DALAM BARIS GESER <<<<<<<< */
/* Baris geser hanya boleh pan-x; karena touch-action diwariskan ke anak, scroll ke bawah ikut terkunci.
   Di sini baris geser dan banner mengizinkan pan-x dan pan-y, lalu browser memilih sumbunya sesuai arah jari. */
.hrow, .banner-row { touch-action: pan-x pan-y; }
.hrow .provider-card, .banner .banner-btn { touch-action: pan-x pan-y; }

/* >>>>>>>> 34. HEADER MENYATU DENGAN LATAR (WARNA DIAMBIL DARI GAMBAR REFERENSI) <<<<<<<< */
#app { background: linear-gradient(180deg, #f7c98d 0px, #f9ce97 60px, #fbd3a0 110px, #fddfb9 270px, #feeacf 370px, #fef3e1 470px, #fff9f0 560px, #ffffff 680px); }
.home-header, .home-header.stuck.joined { background: transparent; }
.home-header.stuck { background: #f8cb90; box-shadow: 0 6px 14px -8px rgba(120, 60, 0, 0.35); }

/* >>>>>>>> 35. WARNA: HEADER JINGGA KONTRAS, LATAR KREM MEMUDAR KE PUTIH DI BAWAH <<<<<<<< */
:root { --bg-top: #ff9d00; --head: #ff9d00; --head-ink: #2e1700; --text-main: #3a2a18; --text-muted: #75644f; }
html, body { background: #ffffff; }
#app { background: linear-gradient(180deg, #ff9d00 0%, #ff9d00 36%, #ffc878 64%, #ffe8c6 84%, #ffffff 100%); }
.home-header, .home-header.stuck, .home-header.stuck.joined { background: #ff9d00; box-shadow: none; }
.home-header.stuck { box-shadow: 0 6px 14px -8px rgba(120, 60, 0, 0.4); }
.home-header.stuck.joined { box-shadow: none; }
.sticky-bar.stuck { background: #ff9d00; box-shadow: 0 8px 12px -8px rgba(120, 60, 0, 0.4); }

/* >>>>>>>> 36. BANNER: GRADASI + ILUSTRASI ORANG BERKUMPUL <<<<<<<< */
.banner .ilus-grup { right: 0; bottom: 0; width: 176px; height: 132px; }
.banner p { max-width: 52%; }

/* >>>>>>>> 37. IKON KELANA + GUIDE = IKON HALAMAN WARLOK (34px, ikon 20px, warna sama) <<<<<<<< */
.hsec-ico { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg, #ffe7b3, #ffd27a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.hsec-title .hsec-ico i { font-size: 20px; color: #b45309; }

/* >>>>>>>> 38. WARLOK: BARIS LOKASI KIRI, JUMLAH RUTE KANAN <<<<<<<< */
.rute-page .section-head-end { justify-content: space-between; }
.rute-page .loc-btn { position: relative; }
.rute-page .loc-btn::before { content: ''; position: absolute; inset: -6px -8px; }

/* >>>>>>>> 39. KARTU BERANDA LEBIH KECIL (2,3 KARTU TERLIHAT, KARTU KETIGA MENGINTIP) <<<<<<<< */
.hrow .provider-card, .hrow .skel { flex: 0 0 calc((100% - 20px) / 2.3); width: calc((100% - 20px) / 2.3); }
.hrow .provider-card { padding: 10px; gap: 6px; }
.hrow .provider-card .avatar-initial { width: 56px; height: 56px; border-radius: 18px; font-size: 20px; }
.hrow .provider-card .avatar-check { width: 20px; height: 20px; }
.hrow .provider-card .card-foot { margin-top: 6px; }

/* >>>>>>>> 40. IKON WARLOK DI BANNER = IKON DI HALAMAN WARLOK <<<<<<<< */
.wl-ico-b { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg, #ffe7b3, #ffd27a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.wl-ico-b i { font-size: 20px; color: #b45309; }

/* >>>>>>>> 41. LABEL LOKASI: COKLAT SEBELUM DIPILIH, HITAM "Area | Kota" SESUDAHNYA <<<<<<<< */
.loc-btn { color: #8b5a2b; }
.loc-btn.set { color: #111827; }
.loc-btn > span { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.loc-area { font-size: 11px; font-weight: 600; }
.loc-bar { font-size: 11px; font-weight: 500; opacity: 0.45; }
.loc-city { font-size: 14px; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-btn > i { align-self: center; }

/* >>>>>>>> 42. KARTU BERANDA KELANA + GUIDE: TINT LEMBUT + BARIS BAHASA, GARIS TIDAK TERPOTONG <<<<<<<< */
.hrow { padding: 2px 16px 12px; margin-bottom: -6px; }
.hrow .provider-card { min-height: max-content; height: auto; }
.hrow .card-body { flex: 0 0 auto; }

/* >>>>>>>> 43. TOMBOL RUTE SAYA / KEMBALI DI HEADER WARLOK <<<<<<<< */
.rs-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border-radius: 18px; background: #ffffff; color: #7c2d00; font-size: 13px; font-weight: 700; box-shadow: 0 2px 6px rgba(120, 60, 0, 0.18); }
.rs-btn i { font-size: 17px; color: #f08a00; }
.rs-btn:active { transform: scale(0.97); }

/* >>>>>>>> 44. PENERBANGAN (KERANGKA) <<<<<<<< */
.tb-card { margin-top: 14px; padding: 6px 14px 14px; background: #ffffff; border-radius: 18px; box-shadow: 0 2px 8px rgba(120, 80, 20, 0.1); }
.tb-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1ebe0; }
.tb-row > i { font-size: 22px; color: #f08a00; }
.tb-row small { color: #857462; }
.tb-row b { font-size: 14px; font-weight: 700; color: #6b7280; }
.tb-go { width: 100%; margin-top: 14px; }
.tb-go:disabled { opacity: 0.55; }

/* >>>>>>>> 45. TEKS NYAMAN DI MATA: COKLAT HANGAT, BUKAN HITAM/ABU DINGIN <<<<<<<< */
.search-box input::placeholder { color: #857462; }
.chip { color: #5e4a33; }
.chip.active { background: linear-gradient(145deg, #6b3a0d, #4a2606); color: #fff4e0; box-shadow: 0 4px 10px rgba(74, 38, 6, 0.3); }
.loc-btn { color: #8a5a22; }
.loc-btn.set { color: #2e2417; }
.card-name { color: #33251a; }
.hsec-title { color: #33251a; }
.empty-note { color: #75644f; }

/* >>>>>>>> 46. HARGA: TEKS COKLAT SOFT PADA PIL AMBER MUDA <<<<<<<< */
.card-foot .price, .pf-val .price { background: linear-gradient(145deg, #ffe0a0, #ffc861); color: #6b4423; box-shadow: 0 3px 8px rgba(214, 140, 20, 0.22); }
.card-foot .price .price-unit, .pf-val .price .price-unit { color: rgba(107, 68, 35, 0.82); }
.card-foot .price.free, .pf-val .price.free { background: linear-gradient(145deg, #4ade80, #16a34a); color: #ffffff; }

/* >>>>>>>> 47. AKTIVITAS DI BAWAH BANNER <<<<<<<< */
.akt-row { display: flex; gap: 8px; overflow-x: auto; margin: 10px -16px 6px; padding: 6px 16px 8px; scroll-snap-type: x proximity; scroll-padding: 0 16px; touch-action: pan-x pan-y; overscroll-behavior-x: none; scrollbar-width: none; }
.akt-row::-webkit-scrollbar { display: none; }
.akt-item { flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: none; background: none; font-family: inherit; color: #4a3826; scroll-snap-align: start; }
.akt-ico { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: #ffffff; box-shadow: 0 2px 8px rgba(120, 70, 10, 0.14); }
.akt-ico i { font-size: 26px; color: #c2650a; }
.akt-nm { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.akt-item:active .akt-ico { transform: scale(0.94); }
.akt-skel { background: linear-gradient(100deg, #f3ead9 30%, #fff8ea 50%, #f3ead9 70%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; box-shadow: none; }
.akt-err { margin: 12px 0; width: 100%; }
@media (prefers-reduced-motion: reduce) { .akt-skel { animation: none; } }

/* >>>>>>>> 48. STICKY DEKAT JUDUL: LIHAT SEMUA (SEARCH + AKTIVITAS) DAN WARLOK (TOPIK) <<<<<<<< */
.daftar-header .greeting { display: none; }
.sticky-bar { margin-top: 0; }
.rute-page .sticky-bar { margin-top: 0; }
.sticky-bar .search-box { margin: 0 0 6px; }
.sticky-bar .chip-row { padding: 2px 16px 10px; }
.sticky-bar .chip-row > i, .sticky-bar .chip > i:first-child { font-size: 15px; margin-right: 5px; }
.home-header + .banner-row { margin-top: 12px; }

/* >>>>>>>> 49. SAMBUNGAN HEADER + BAR TANPA GARIS PUTIH <<<<<<<< */
.home-header { margin-bottom: -1px; }
.sticky-bar { background: #ff9d00; top: calc(var(--hdr-h, 64px) - 2px); padding-top: 2px; }

/* >>>>>>>> 50. NAVBAR LEBIH PENDEK, IKON LEBIH BESAR, TOMBOL SWITCH TIMBUL SOFT <<<<<<<< */
.bottom-nav-container { height: calc(54px + env(safe-area-inset-bottom, 0px)); }
.nav-side { padding-top: 5px; }
.nav-item i { font-size: 28px; }
.nav-item::before { width: 40px; height: 40px; }
.fab { filter: none; background: linear-gradient(150deg, #ffc757, #ff9d00); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 2px 4px rgba(150, 80, 0, 0.16); }
.fab:active { transform: translateX(-50%) scale(0.97); box-shadow: inset 0 2px 4px rgba(150, 70, 0, 0.22), 0 1px 2px rgba(150, 80, 0, 0.14); }
.fab.active { box-shadow: 0 0 0 4px rgba(255, 159, 0, 0.28), inset 0 2px 2px rgba(255, 255, 255, 0.65), inset 0 -3px 5px rgba(180, 90, 0, 0.28), 0 3px 6px rgba(150, 80, 0, 0.22); }

/* >>>>>>>> 51. SKELETON AWAL BUKA HALAMAN <<<<<<<< */
.feed-list .skel-feed { width: auto; flex: none; height: 196px; }
.skel-rute { display: block; flex: none; width: auto; height: 150px; margin-bottom: 12px; }

/* >>>>>>>> 52. PERPINDAHAN HALAMAN: GESER MASUK DARI KIRI (MASUK LEBIH DALAM), DARI KANAN (KEMBALI), MEMUDAR (TAB) <<<<<<<< */
@keyframes pgInL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes pgInR { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes pgFade { from { opacity: 0; } to { opacity: 1; } }
.page-content.pg-in-l { animation: pgInL 0.3s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
.page-content.pg-in-r { animation: pgInR 0.3s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
.page-content.pg-fade { animation: pgFade 0.25s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* >>>>>>>> 53. ANTI KEDIP (FLASH) DAN ANTI MELAR (LAYOUT SHIFT / OVERSCROLL) <<<<<<<< */
html, body { background: #ff9d00; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
body { touch-action: manipulation; }
.page-content { overscroll-behavior: none; }
.ph { display: inline-block; width: 1em; height: 1em; line-height: 1; }
.akt-row { min-height: 90px; }
.badge { max-width: 100%; white-space: nowrap; }
.badge-certified { letter-spacing: 0; }

/* >>>>>>>> 54. AKTIVITAS RATA KIRI-KANAN <<<<<<<< */
.akt-row { overflow: visible; justify-content: space-between; gap: 4px; margin: 10px 0 6px; padding: 6px 0 8px; scroll-snap-type: none; }
.akt-item { flex: 1 1 0; width: auto; min-width: 0; }
.akt-ico { width: 48px; height: 48px; border-radius: 16px; }
.akt-ico i { font-size: 25px; }
.akt-nm { max-width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* >>>>>>>> 55. WARLOK + LIHAT SEMUA: BAR STICKY DAN BARIS LOKASI PRESISI <<<<<<<< */
.rute-page .sticky-bar .chip-row { gap: 8px; padding: 2px 16px 8px; }
.rute-page .sticky-bar .chip-row .chip { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; }
.rute-page .sticky-bar .chip-row > :first-child, .rute-page .sticky-bar .chip-row > :last-child { margin-left: 0; margin-right: 0; }
.sticky-bar + .section-head, .rute-page .section-head-end { display: flex; align-items: center; justify-content: space-between; height: 40px; margin: 8px 0 6px; padding: 0; }
.sticky-bar + .section-head .loc-btn, .rute-page .section-head-end .loc-btn { padding: 0; min-height: 40px; }
.sticky-bar + .section-head .see-all { padding: 0; min-height: 40px; }

/* >>>>>>>> 56. BANNER KONTRAS (NAVY) + TOMBOL "LIHAT RUTE" MEMIKAT <<<<<<<< */
:root { --cream: #fff1dc; --ink: #3a1f00; --kartu-ink: #3a2a18; --kartu-muted: #75644f; --card-grad: linear-gradient(180deg, #ffffff 0%, #fff0d2 100%); }
.banner { background: linear-gradient(135deg, #ffffff 0%, #fffaf0 55%, #ffeccb 100%); color: var(--ink); box-shadow: 0 8px 18px -10px rgba(140, 70, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.banner::after { background: radial-gradient(circle, rgba(255, 190, 80, 0.22), rgba(255, 190, 80, 0) 70%); }
.banner h3 { color: #6b3a0d; }
.banner p { color: #75644f; opacity: 1; }
.banner-tag { background: linear-gradient(145deg, #fff3d6, #ffdc96); color: #6b3a0d; box-shadow: 0 1px 3px rgba(180, 100, 0, 0.18); }
.banner-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: linear-gradient(145deg, #ffeab9, #ffc766); color: #4a2606; font-size: 13px; font-weight: 800; box-shadow: 0 3px 10px rgba(255, 176, 45, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.75); animation: btnGlow 2.4s ease-in-out infinite; }
.banner-btn i { font-size: 16px; }
.banner-btn:active { transform: scale(0.96); }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 3px 10px rgba(255, 176, 45, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.75); } 50% { box-shadow: 0 3px 14px rgba(255, 176, 45, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.75); } }

/* >>>>>>>> 57. TULISAN TIDAK PUTIH: KRIM HANGAT DI ATAS WARNA GELAP, COKLAT TUA DI ATAS AMBER <<<<<<<< */
.avatar-initial, .badge-verified, .badge-premium, .badge-tamu, .price.free, .card-foot .price.free, .pf-val .price.free, .chat-badge, .toast, .rt-steps li.done .n, .rute-sos, .rute-seat .no, .mini-rating, .check-verified { color: var(--cream); }
.btn-primary, .chat-msg.me, .tk-status.s2, .rt-steps li.now .n, .fab { color: var(--ink); }
.chip.active { color: var(--cream); }

/* >>>>>>>> 58. KARTU SEMUA LAYANAN (KELANA, PEMANDU, WARLOK): NAVY SOFT, BUKAN PUTIH <<<<<<<< */
.provider-card, .rute-card, .home-card { --text-main: var(--kartu-ink); --text-muted: var(--kartu-muted); background: var(--card-grad); box-shadow: 0 0 0 1px rgba(160, 100, 30, 0.14), 0 3px 8px rgba(120, 70, 10, 0.16); }
.provider-card .card-name, .hsec-title { color: var(--kartu-ink); }
.hsec-title { color: var(--ink); }
.provider-card .card-name { color: var(--kartu-ink); }
.skel, .skel-rute { background: linear-gradient(100deg, #f3e6d0 30%, #fff8ea 50%, #f3e6d0 70%) 0 0 / 200% 100%; }

/* >>>>>>>> 59. AKTIVITAS: BULAT, SAMA DI BERANDA DAN LIHAT SEMUA, RATA KIRI-KANAN (GESER JIKA TIDAK MUAT) <<<<<<<< */
.akt-row { display: flex; justify-content: space-between; gap: 2px; overflow-x: auto; overflow-y: hidden; margin: 10px 0 6px; padding: 5px 0 6px; scroll-snap-type: none; }
.akt-item { flex: 0 0 auto; width: auto; min-width: 46px; max-width: none; color: var(--ink); }
.akt-ico { width: 46px; height: 46px; border-radius: 50%; background: #fff6e6; box-shadow: 0 2px 6px rgba(120, 60, 0, 0.22); }
.akt-ico i { font-size: 24px; color: #b45309; }
.akt-nm { max-width: none; overflow: visible; text-overflow: clip; font-size: 10.5px; font-weight: 700; color: var(--ink); }
.akt-item.active .akt-ico { background: linear-gradient(145deg, #7a4210, #4a2606); box-shadow: 0 0 0 2px #ffd98a, 0 3px 8px rgba(74, 38, 6, 0.4); }
.akt-item.active .akt-ico i { color: #ffe3a8; }
.akt-item.active .akt-nm { font-weight: 800; }
.akt-daftar { margin: 0 0 4px; padding: 4px 0 4px; }
.akt-daftar .akt-ico { width: 42px; height: 42px; }
.akt-daftar .akt-ico i { font-size: 22px; }
.akt-daftar .akt-item { min-width: 42px; }
.akt-skel { background: rgba(255, 241, 220, 0.5); }

/* >>>>>>>> 60. BULAT SERAGAM (SEPERTI "RUTE SAYA"): SEARCH, AKTIVITAS, CHIP WARLOK <<<<<<<< */
.search-box { border-radius: 999px; padding: 0 16px; }
.chip { border-radius: 999px; }
.rute-page .sticky-bar .chip-row .chip { border-radius: 999px; }
.rs-btn { border-radius: 999px; }

/* >>>>>>>> 61. PERMUKAAN PUTIH -> NAVY SOFT (INFO WARLOK, PENERBANGAN, MINI CARD, POPUP, PESAN) <<<<<<<< */
.rute-info, .tb-card, .mini-card { --text-main: var(--kartu-ink); --text-muted: var(--kartu-muted); background: var(--card-grad); color: var(--kartu-ink); box-shadow: 0 0 0 1px rgba(160, 100, 30, 0.14), 0 3px 8px rgba(120, 70, 10, 0.14); }
.tiket-ico, .chat-msg { background: #fff3e0; }
.sheet { --text-main: var(--kartu-ink); --text-muted: var(--kartu-muted); background: #fffaf2; color: var(--kartu-ink); }
.loc-row, .city-row { background: transparent; }
.tb-row { border-bottom-color: rgba(160, 100, 30, 0.2); }
.tb-row b { color: var(--kartu-muted); }
.tb-row small { color: #5d6a8c; }

/* >>>>>>>> 62. KATEGORI WARLOK = IKON AKTIVITAS (6, TANPA "SEMUA"); ILUSTRASI BANNER TERANG <<<<<<<< */
.rute-page .sticky-bar .akt-daftar { margin: 0 0 4px; }
.banner .ilus-grup { filter: drop-shadow(0 3px 4px rgba(120, 60, 0, 0.22)); }
.akt-item:focus-visible .akt-ico { box-shadow: 0 0 0 2px #6b3a0d; }

/* >>>>>>>> 63. AKTIVITAS: "SEMUA" + 6 IKON (7 ITEM) RATA KIRI-KANAN, MUAT TANPA GESER <<<<<<<< */
.akt-row { gap: 0; }
.akt-item { flex: 1 1 0; min-width: 0; min-height: 60px; cursor: pointer; }
.akt-ico { width: 42px; height: 42px; transition: background 0.2s, box-shadow 0.2s, transform 0.12s; }
.akt-ico i { font-size: 22px; }
.akt-daftar .akt-ico { width: 40px; height: 40px; }
.akt-daftar .akt-ico i { font-size: 21px; }
.akt-daftar .akt-item { min-width: 0; }
.akt-nm { font-size: 10px; white-space: nowrap; }
.akt-item.active .akt-nm { color: #4a2606; }

/* >>>>>>>> 64. WARLOK: DAFTAR RUTE JADI GRID 2 KOLOM (PRESISI, TINGGI SAMA) <<<<<<<< */
#rute-list.rute-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
#rute-list > .empty-note, #rute-list > .rute-retry { grid-column: 1 / -1; }
#rute-list .skel-rute { height: 214px; margin: 0; }
#rute-list .rute-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; height: 100%; padding: 12px; border-radius: 16px; }
#rute-list .rute-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.3; }
#rute-list .rute-me { display: block; width: fit-content; margin: 6px 0 0; padding: 2px 8px; font-size: 10px; }
#rute-list .rute-tags { gap: 4px; margin-top: 5px; }
#rute-list .rute-tags span { padding: 2px 8px; font-size: 10.5px; line-height: 1.4; }
#rute-list .rute-host { gap: 8px; margin-top: 10px; margin-bottom: 10px; min-width: 0; }
#rute-list .rute-host > div:last-child { min-width: 0; }
#rute-list .rute-av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 11px; font-size: 12px; }
#rute-list .rute-host-name { gap: 0; font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
#rute-list .rute-host-name .badge { display: none; }
#rute-list .rute-when { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; margin-top: auto; padding-top: 10px; }
#rute-list .rute-when b { font-size: 12.5px; line-height: 1.3; }
#rute-list .rute-when small { font-size: 11.5px; }
#rute-list .rute-dots { justify-content: flex-start; max-width: 100%; gap: 3px; }
#rute-list .rdot { width: 8px; height: 8px; }

/* >>>>>>>> 65. WARNA TERKUNCI: LONCENG, "RUTE SAYA", IKON AKTIVITAS (SATU SUMBER WARNA) <<<<<<<<
   JANGAN diubah di tempat lain. Mau ganti warna? Ubah 7 variabel ini saja; ketiganya ikut berubah.
   Memakai !important agar tambalan berikutnya tidak menimpanya. */
:root { --akt-bg: #fff6e6; --akt-icon: #b45309; --akt-text: #3a1f00; --akt-shadow: 0 2px 6px rgba(120, 60, 0, 0.22); --akt-on-bg: linear-gradient(145deg, #7a4210, #4a2606); --akt-on-ring: #ffd98a; --akt-on-icon: #ffe3a8; }
.akt-ico, .bell-btn, .rs-btn { background: var(--akt-bg) !important; box-shadow: var(--akt-shadow) !important; }
.akt-ico i, .bell-btn i, .rs-btn i { color: var(--akt-icon) !important; }
.rs-btn, .rs-btn span, .akt-nm { color: var(--akt-text) !important; }
.bell-btn { color: var(--akt-icon) !important; }
.bell-dot { border-color: var(--akt-bg) !important; }
.akt-item.active .akt-ico { background: var(--akt-on-bg) !important; box-shadow: 0 0 0 2px var(--akt-on-ring), 0 3px 8px rgba(74, 38, 6, 0.4) !important; }
.akt-item.active .akt-ico i { color: var(--akt-on-icon) !important; }
.akt-ico.akt-skel { background: rgba(255, 241, 220, 0.55) !important; box-shadow: none !important; }

/* >>>>>>>> 66. ANTI KEDIP: KERANGKA SAMA TINGGI DENGAN KARTU ASLI + ISI MUNCUL HALUS <<<<<<<< */
.feed-list .skel-feed { height: var(--feed-h, 196px); }
.muncul { animation: pgFade 0.22s ease-out; }

/* >>>>>>>> 67. KARTU SEMUA LAYANAN (WARLOK, KELANA, PEMANDU) = SATU WARNA: PUTIH KE KRIM (ACUAN: PEMANDU) <<<<<<<< */
.provider-card, .rute-card, .home-card, .mini-card, .rute-info, .tb-card { background: var(--card-grad) !important; }
.banner::after { width: 170px; height: 170px; right: -40px; top: -50px; }
.hrow { min-height: 0; }
.hrow .skel { height: var(--card-h, 160px); }

/* >>>>>>>> 68. REDUCE MOTION: ikuti pengaturan perangkat; semua gerak (geser, kilau, kerangka) berhenti, isi tetap muncul <<<<<<<< */
@media (prefers-reduced-motion: reduce) {
  .page-content.pg-in-l, .page-content.pg-in-r, .page-content.pg-fade, .muncul, .banner-btn, .skel, .skel-rute, .akt-skel, .b { animation: none !important; }
}

/* >>>>>>>> 69. SEMUA TOMBOL MEMAKAI WARNA AKTIVITAS (7 variabel --akt-* di bagian 65; ubah di sana saja) <<<<<<<<
   Tombol biasa (kembali, tutup, sekunder) = gaya aktivitas biasa: latar krem, ikon coklat.
   Tombol aksi utama (Ikut rute, Kirim, Lihat Rute, dst.) = gaya aktivitas aktif: coklat tua, teks krem.
   Tidak diubah (punya arti khusus): Darurat 112 (merah), "Kamu sudah sampai" (hijau), favorit (merah), navbar. */
.back-btn, .chat-back, .sheet-close, .loc-close { background: var(--akt-bg) !important; color: var(--akt-icon) !important; box-shadow: var(--akt-shadow) !important; }
.back-btn i, .chat-back i, .sheet-close i, .loc-close i { color: var(--akt-icon) !important; }
.btn-primary { background: var(--akt-on-bg) !important; color: var(--cream) !important; box-shadow: 0 3px 8px rgba(74, 38, 6, 0.4) !important; }
.banner-btn { background: var(--akt-on-bg) !important; color: var(--cream) !important; }
.btn-primary i, .banner-btn i { color: var(--akt-on-icon) !important; }
.btn-secondary:not(.done) { background: var(--akt-bg) !important; color: var(--akt-text) !important; border: 1.5px solid transparent !important; box-shadow: var(--akt-shadow) !important; }
.btn-secondary:not(.done) i { color: var(--akt-icon) !important; }
.rute-arr:disabled { border: 1.5px dashed rgba(74, 38, 6, 0.35) !important; }

/* Kaki lembar rute: tombol Profil (Kepala Jalan) di sebelah tombol utama */
.rute-foot .rute-btns { display: flex; gap: 10px; }
.rute-foot .rute-prof { flex: 0 0 34%; width: auto; min-height: 50px; padding: 0 12px; font-size: 15px; }
.rute-foot .rute-main { flex: 1 1 0; width: auto; min-width: 0; min-height: 50px; padding: 8px 12px; font-size: 15px; line-height: 1.2; }

/* ---------- PENERBANGAN ---------- */
.tb-card { display: flex; flex-direction: column; gap: 8px; position: relative; margin: 6px 0 14px; padding: 14px; background: #ffffff; border-radius: 18px; box-shadow: 0 2px 8px rgba(120, 80, 20, 0.08); }
.tb-field { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: #fff7ea; }
.tb-field > i { font-size: 22px; color: #f08a00; flex-shrink: 0; }
.tb-field > div { flex: 1; min-width: 0; }
.tb-field small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.tb-field select, .tb-field input { display: block; width: 100%; min-width: 0; padding: 2px 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-main); -webkit-appearance: none; appearance: none; }
.tb-swap { position: relative; z-index: 2; align-self: flex-end; width: 34px; height: 34px; margin: -22px 10px -22px 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #ffffff; color: #f08a00; font-size: 18px; box-shadow: 0 2px 8px rgba(120, 80, 20, 0.18); }
.tb-go { width: 100%; min-height: 50px; margin-top: 4px; font-size: 15px; }
.tb-count { margin: 0 2px 2px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.tb-flight { cursor: default; }
.tb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tb-air { font-size: 15px; font-weight: 800; color: var(--text-main); }
.tb-tag { padding: 3px 9px; border-radius: 10px; background: #f3f4f6; font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.tb-tag.direct { background: #e8f7ee; color: #15803d; }
.tb-times { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tb-times > div:not(.tb-mid) b { display: block; font-size: 20px; font-weight: 800; color: var(--text-main); }
.tb-times > div:not(.tb-mid) small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.tb-times > div:last-child { text-align: right; }
.tb-mid { flex: 1; min-width: 0; text-align: center; }
.tb-mid small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.tb-mid span { display: block; height: 2px; margin-top: 4px; border-radius: 1px; background: linear-gradient(90deg, #ffd08a, #ff9f00); }
.tb-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1e6d3; }
.tb-price b { font-size: 17px; font-weight: 800; color: #f08a00; }
.tb-price small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-align: right; }