:root{
    --navy:#123A5E; --navy2:#0E2C48; --blue:#1E77C9; --green:#2E8B57;
    --amber:#E8920C; --ink:#16232E; --muted:#5E6E7B; --line:#DCE5EC;
    --bg:#EAF1F5; --card:#fff;
    --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{font-family:var(--sans);color:var(--ink);background:var(--bg);display:flex;flex-direction:column;height:100vh;overflow:hidden}

  .topbar{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--navy);color:#fff;border-bottom:3px solid var(--amber);z-index:600;flex:none}
  .mark{flex:none;width:40px;height:40px;object-fit:cover;border-radius:50%;background:#fff;padding:2px}
  .mark-right{margin-left:auto}
  .bus-status{margin:10px 0 2px;padding:9px 11px;border-radius:6px;font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
  .bus-status strong{font-size:12.5px;font-weight:800}
  .bus-status span{color:var(--muted)}
  .bus-status.ok{background:#E9F7EF;border:1px solid #B6E2C6}
  .bus-status.ok strong{color:#1E7C46}
  .bus-status.warn{background:#FDF3E7;border:1px solid #F1D2A3}
  .bus-status.warn strong{color:#9A5B08}
  .brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .brand .eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9FC3E4;font-weight:700}
  .brand h1{margin:0;font-size:16px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Tombol panel samping (js/tab-sidebar.js): ditaruh di bilah atas supaya
     tetap bisa dibuka meski panelnya tertutup. */
  .side-toggle{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
    border-radius:7px;padding:8px 12px;cursor:pointer;
    font-family:var(--sans);font-size:12.5px;font-weight:700}
  .side-toggle:hover{background:rgba(255,255,255,.22)}
  .side-toggle:focus-visible{outline:2px solid #9FC3E4;outline-offset:2px}
  .side-toggle svg{flex:none;display:block}
  /* Layar sempit: sisakan ikonnya saja supaya judul di bilah atas tidak terdesak. */
  @media (max-width:640px){ .side-toggle .sb-txt{display:none} .side-toggle{padding:8px} }

  .layout{flex:1;display:flex;min-height:0}
  /* display:none biarkan panel berhenti menghitung layout.
     Sesudah toggle, js/tab-sidebar.js WAJIB panggil P.map.invalidateSize(). */
  .layout.side-tutup .side{display:none}
  /* Sidebar: bilah tab + panel yang menggulir, dipecah 4 tab (js/tab-sidebar.js). */
  .side{width:360px;flex:none;background:var(--bg);border-right:1px solid var(--line);
        padding:0;display:flex;flex-direction:column;overflow:hidden}
  /* Kolom "Daftar Lokasi" diberi 1.7fr supaya namanya muat satu baris
     tanpa mengubah ukuran huruf — empat kolom rata 1fr memotong nama jadi dua. */
  .tabs{flex:none;display:grid;grid-template-columns:1fr 1.7fr 1fr 1fr;gap:4px;
        padding:10px 12px;background:var(--card);border-bottom:1px solid var(--line)}
  .tab{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted);
       background:none;border:1px solid transparent;border-radius:7px;padding:8px 4px;cursor:pointer}
  .tab:hover{background:#EEF3F7;color:var(--ink)}
  .tab.active{background:var(--navy);color:#fff}
  .tab:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
  .panes{flex:1;min-height:0;overflow-y:auto;padding:14px}
  .pane{display:none;flex-direction:column;gap:12px}
  .pane.show{display:flex}
  .mapwrap{flex:1;min-width:0;position:relative}
  #map{position:absolute;inset:0;background:#cfe1ea}
  /* Basemap "Peta jalan" dibuat abu-abu supaya hanya rute bus yang berwarna.
     HANYA kena lapisan tile; garis rute, panah, penanda halte tetap berwarna.
     Satelit sengaja tidak difilter. */
  .peta-abu{filter:grayscale(1) contrast(1.06) brightness(1.03)}

  .card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px}
  .eyebrow2{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
  .eyebrow2::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--blue)}
  .eyebrow2.bus::before{background:#F2B01E}
  .eyebrow2.umum::before{background:#0F9D8C}
  .intro{font-size:12.5px;color:#41505f;line-height:1.5;margin:0}

  .seg{display:flex;gap:4px;background:#EEF3F7;border:1px solid var(--line);border-radius:6px;padding:4px}
  .seg-btn{flex:1;border:none;background:none;padding:8px 6px;border-radius:4px;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted)}
  .seg-btn.active{background:var(--navy);color:#fff}
  .seg-btn:focus-visible{outline:3px solid #9DC7EC}

  .toggle{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none}
  .toggle:hover{background:#F1F6FA}
  .toggle input{appearance:none;width:38px;height:22px;border-radius:999px;background:#C9D6DF;position:relative;cursor:pointer;transition:background .15s;flex:none}
  .toggle input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
  .toggle input:checked{background:var(--blue)}
  .toggle input:checked::after{transform:translateX(16px)}
  .toggle .sw{width:11px;height:11px;border-radius:3px;flex:none}
  .toggle span.lbl{font-size:14px;font-weight:600}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;border:none;border-radius:6px;background:var(--blue);color:#fff;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer}
  .btn:hover{background:#1868b0}
  .btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
  .btn.ghost:hover{background:#F1F6FA}
  .hint{font-size:12px;color:var(--muted);margin:8px 2px 0;line-height:1.45}

  .search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 10px}
  .search svg{width:16px;height:16px;color:var(--muted);flex:none}
  .search input{flex:1;border:none;outline:none;background:none;padding:10px 0;font-family:var(--sans);font-size:14px;color:var(--ink);min-width:0}
  .empty{font-size:12.5px;color:var(--muted);margin:8px 2px 0}
  /* max-height: 16 halte = ± 780px. Dibatasi & menggulir di dalam kartunya
     sendiri supaya panel tidak memanjang. */
  .hlist{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}
  .hrow{display:flex;align-items:center;gap:6px;width:100%}
  .hbtn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left;background:none;border:none;padding:9px 8px;border-radius:6px;cursor:pointer;font-family:var(--sans);font-size:13.5px;color:var(--ink)}
  .hbtn:hover{background:#F1F6FA}
  .hbtn .pindot{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
  .hbtn .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .maps-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;background:#EEF3F7;color:var(--navy);text-decoration:none;border:1px solid var(--line)}
  .maps-ico:hover{background:#E2ECF3}
  .maps-ico svg{width:19px;height:19px}

  .legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
  .lg{display:flex;align-items:center;gap:8px;font-size:12.5px}
  .lg i{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block}
  .lg i.line{width:16px;height:4px;border-radius:2px}
  /* Item legenda rute yang bisa diklik untuk menyalakan/mematikan jalurnya. */
  .lg-btn{font-family:var(--sans);color:var(--ink);background:none;border:1px solid transparent;cursor:pointer;padding:3px 6px;border-radius:7px;text-align:left}
  .lg-btn:hover{background:#F1F6FA}
  .lg-btn.on{background:#EAF3FA;border-color:#C7D6E1;font-weight:700}
  .lg-btn:focus-visible{outline:2px solid #9DC7EC;outline-offset:1px}

  /* Keterangan penanda (panel Info): simbol mirip peta + penjelasan singkat. */
  .leg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .leg-list li{display:flex;align-items:flex-start;gap:11px;padding:8px 0}
  .leg-list li:first-child{padding-top:0}
  .leg-list li + li{border-top:1px solid var(--line)}
  .leg-sym{flex:none;width:24px;display:flex;align-items:center;justify-content:center;margin-top:1px}
  .leg-sym svg{display:block;filter:drop-shadow(0 1px 1px rgba(6,25,42,.2))}
  .leg-info b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:750;color:var(--ink)}
  .leg-info>span{display:block;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px}
  .leg-info .demo-tag{font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
  /* Huruf pin (T/H/B) diulang di keterangan supaya penanda bisa dikenali
     tanpa membandingkan warna — penting bagi yang sulit bedakan warna. */
  .leg-info .pin-huruf{flex:none;min-width:15px;padding:0 3px;border:1px solid var(--line);border-radius:3px;background:#fff;font-size:9.5px;font-weight:800;line-height:14px;text-align:center;color:var(--muted)}
  .sym-bus{width:22px;height:22px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 3px rgba(6,25,42,.35)}
  .sym-me{width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 3px rgba(30,119,201,.2)}
  /* Garis status jalan: dua lapis (selubung pucat + inti pekat), sama dengan
     di peta. Selubung rgba() bukan color-mix() untuk kompatibilitas peramban
     lama lewat file:// — color-mix baru ada sejak 2023. */
  .sym-jalan{width:20px;height:9px;border-radius:2px;display:flex;align-items:center;justify-content:center}
  .sym-jalan::before{content:"";display:block;width:20px;height:4px;border-radius:2px;background:var(--gj);opacity:.9}
  .sym-jalan-nas{--gj:#E0392B;background:rgba(224,57,43,.25)}
  .sym-jalan-prov{--gj:#1E77C9;background:rgba(30,119,201,.25)}
  /* Jalan kota digambar lebih tipis di peta -> contohnya ikut menipis. */
  .sym-jalan-kota{--gj:#2E8B57;background:rgba(46,139,87,.25)}
  .sym-jalan-kota::before{height:2px}
  .sym-line{width:20px;height:0;border-top:2.5px dashed var(--navy)}
  .leg-routes{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
  .leg-routes-lbl{display:block;font-size:11px;font-weight:700;color:var(--muted);line-height:1.4;margin-bottom:9px}

  .jadwal{background:#FCFAF2;border:1px solid #F0E6C8;border-radius:6px;padding:10px 12px;margin-bottom:8px}
  .jhead{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a6d1e;margin-bottom:8px}
  .jrow{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
  .jrow:last-child{margin-bottom:0}
  .jtime{flex:none;font-family:var(--mono);font-size:12px;font-weight:700;color:#7a4e00;background:#FBEFD0;border:1px solid #F0E0B0;border-radius:6px;padding:3px 8px;white-space:nowrap}
  .jdesc{font-size:12.5px;color:#4A5D6E;line-height:1.4}
  .jdesc b{color:var(--ink)}
  /* Baris "Berikutnya …" pada jadwal Mapan: keberangkatan terdekat dari jam
     resmi di sebelahnya, bukan angka baru. */
  .jnext{display:block;margin-top:3px;font-size:11.5px;color:#7a4e00}

  .rt-item{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:8px}
  .rt-item:last-child{margin-bottom:0}
  .rt-head{display:flex;align-items:center;gap:9px;width:100%;background:#fff;border:none;padding:10px 11px;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);text-align:left}
  .rt-head:hover{background:#F7FAFC}
  .rt-head .cdot{width:12px;height:12px;border-radius:3px;flex:none}
  .rt-head .chev{margin-left:auto;transition:transform .18s;color:var(--muted);font-size:11px}
  .rt-item.open .chev{transform:rotate(180deg)}
  .rt-body{display:none;padding:10px 12px 12px;background:#F9FBFD;border-top:1px solid var(--line)}
  .rt-item.open .rt-body{display:block}
  .leg2{margin-top:8px}
  .leg2 .dir{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-bottom:6px}
  .leg2 .dir.go{background:#E7F5EC;color:#1E7A45}
  .leg2 .dir.back{background:#EEF3F7;color:#4A5D6E}
  /* Label "Satu arah" (Rute Angkutan Barang): warnanya selaras
     dengan ARROW_BARANG (js/rute.js), coklat, beda dari label bus. */
  .leg2 .dir.satu{background:#F3E7DE;color:#6B4226}
  /* Ruas ujung tiap arah: sengaja di luar .chain supaya tidak tenggelam
     sebagai kata terakhir — justru membedakan tempat naik vs tempat menunggu. */
  .leg2 .dir-ket{display:inline-block;margin:0 0 6px 7px;font-size:11px;color:var(--muted)}
  .chain{font-size:12px;line-height:1.7;color:#38485A}
  /* inline-block = peluang patah baris di pemisah; lihat .pop-row .sep. */
  .chain .sep{display:inline-block;color:#B9C4CE;margin:0 3px;font-weight:700}
  .chain b{color:var(--ink)}
  .rt-btn{margin-top:10px;width:100%;padding:9px;border-radius:6px;border:1px solid var(--navy);background:#fff;color:var(--navy);font-weight:700;font-size:13px;cursor:pointer}
  .rt-btn:hover{background:#F1F6FA}
  .rt-btn.on{background:var(--navy);color:#fff}
  .rt-btn:disabled{opacity:.6;cursor:default}
  /* Sakelar Berangkat/Kembali (rute Bus Sekolah):
     netral = dua-duanya tampil; chip menyala = satu arah saja. */
  .rt-filt{display:flex;gap:6px;margin-top:10px}
  .rt-fb{flex:1;padding:7px 8px;border-radius:6px;border:1px solid var(--line);background:#fff;color:#4A5D6E;font-weight:700;font-size:12px;cursor:pointer}
  .rt-fb:hover{background:#F1F6FA}
  .rt-fb.on.go{background:#E7F5EC;border-color:#1E7A45;color:#1E7A45}
  .rt-fb.on.back{background:#EEF3F7;border-color:#4A5D6E;color:#4A5D6E}
  .rt-info{font-size:12px;font-weight:600;color:var(--navy);margin:8px 2px 0;text-align:center;min-height:1px}
  .rt-info:empty{margin:0}

  .note{background:repeating-linear-gradient(135deg,#fff,#fff 10px,#FAFCFE 10px,#FAFCFE 20px);border:1px dashed #B7C7D3}
  .note ul{margin:6px 0 0;padding-left:18px}
  .note li{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:3px}
  .note b{color:var(--ink)}
  .foot{font-size:11px;color:var(--muted);text-align:center;padding:2px 0 4px}

  /* Ringkasan jaringan (panel Info) — angka diisi js/info.js dari data.js. */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .stat{background:#F1F7FB;border:1px solid #D6E6F1;border-radius:6px;padding:9px 11px;display:flex;flex-direction:column;gap:3px}
  .stat-n{font-size:22px;font-weight:800;color:var(--navy);line-height:1}
  .stat-l{font-size:11px;font-weight:600;color:var(--muted);line-height:1.25}

  /* Layanan angkutan (panel Info) — titik warna + keterangan. */
  .svc{display:flex;align-items:flex-start;gap:9px;padding:6px 0}
  .svc + .svc{border-top:1px solid var(--line)}
  .svc-dot{width:11px;height:11px;border-radius:3px;flex:none;margin-top:3px}
  .svc-txt{font-size:12.5px;color:#41505f;line-height:1.5}
  .svc-txt b{color:var(--ink)}

  .bus-wrap{background:none;border:none}
  .bus-ico{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;border:3px solid #fff;box-shadow:0 2px 6px rgba(6,25,42,.4);position:relative}
  /* Titik denyut pada ikon bus dibuat kuning (bukan hijau) agar tidak meniru
     lampu "live" aplikasi pelacakan sungguhan. */
  .bus-ico::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;right:-2px;top:-2px;background:#E8920C;border:2px solid #fff;box-shadow:0 0 0 0 rgba(232,146,12,.45);animation:pulse 2.6s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,146,12,.45)}70%{box-shadow:0 0 0 4px rgba(232,146,12,0)}100%{box-shadow:0 0 0 0 rgba(232,146,12,0)}}
  @media (prefers-reduced-motion: reduce){ .bus-ico::after{animation:none} }
  /* Label arah bus: warnanya sama dengan panah di garis rute (hijau = berangkat,
     biru = kembali). Kalau warna panah di js/rute.js diubah, ubah juga di sini. */
  .bus-dir{position:absolute;top:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;
    font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1.4;
    padding:1px 6px;border-radius:999px;white-space:nowrap;border:1.5px solid #fff;box-shadow:0 1px 3px rgba(6,25,42,.35)}
  .bus-dir.go{background:#1E7A45}
  .bus-dir.back{background:#0B57A4}
  .bus-dir.loop{background:#5E6E7B}

  /* Kartu "Bagikan tampilan" */
  .shareurl{width:100%;border:1px solid var(--line);border-radius:6px;background:#F7FAFC;color:#41505f;
    font-family:var(--mono);font-size:11.5px;padding:9px 10px;outline:none;text-overflow:ellipsis}
  .shareurl:focus{border-color:#9DC7EC;background:#fff}
  .share-warn{font-size:11.5px;color:#9A5B08;background:#FDF3E7;border:1px solid #F1D2A3;border-radius:6px;padding:7px 9px;margin:8px 0 0;line-height:1.45}
  /* Penanda halte/terminal (21×28 px, ditentukan P.pinIcon di js/inti.js).
     Width .pin-label HARUS sama dengan lebar pin agar huruf tidak melenceng. */
  .pin-wrap{background:none;border:none}
  .pin{position:relative;filter:drop-shadow(0 2px 2px rgba(6,25,42,.35))}
  .pin-label{position:absolute;top:3px;left:0;width:21px;text-align:center;font-weight:800;font-size:9px;line-height:12px;color:var(--pin)}
  /* Penanda yang tertimpa tetangganya diangkat ke depan saat disentuh
     (marker riseOnHover di js/titik.js) supaya masih bisa diklik. */
  .leaflet-marker-icon.pin-wrap:hover{z-index:1000!important}

  /* Tooltip tetap pada penanda ujung arah ("Awal arah kembali"), dipasang
     js/rute.js. Ditulis .leaflet-tooltip.rt-tip supaya menang atas gaya bawaan. */
  .leaflet-tooltip.rt-tip{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:6px;
    padding:2px 7px;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink);
    box-shadow:0 1px 4px rgba(6,25,42,.25);white-space:nowrap}
  .leaflet-tooltip.rt-tip::before{display:none}   /* segitiga ekor bawaan: tak perlu, penandanya sudah menempel */

  .route-arrow{background:none!important;border:none!important}
  .route-arrow svg{display:block;filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
  /* Mini-legenda arti warna panah (kontrol Leaflet di pojok bawah peta). */
  .arrow-legend{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:8px;padding:7px 10px 8px;font-family:var(--sans);font-size:12px;color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.18);line-height:1.5}
  .arrow-legend .al-title{font-weight:800;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#5a6b7a;margin-bottom:3px}
  .arrow-legend .al-row{display:flex;align-items:center;gap:7px}
  .arrow-legend svg{flex:none;display:block}
  /* Keterangan kecil saat jalur sedang mengikuti satu bus. */
  .arrow-legend .al-note{margin-top:3px;font-size:10.5px;color:#5a6b7a;max-width:190px;line-height:1.35}
  /* ============ POPUP (halte, terminal, bus) ============
     Kerangka sama: pita warna via --pop + kepala + isi + tombol. */
  .leaflet-popup-content{margin:0;width:215px!important}
  .leaflet-popup-content-wrapper{border-radius:10px;padding:0;overflow:hidden;box-shadow:0 6px 20px rgba(6,25,42,.22)}
  .leaflet-popup-tip{box-shadow:none}
  /* Popup bus terpaksa dibuka DI BAWAH busnya (P.tempatkanPopup di js/bus.js).
     Ekornya pindah ke atas & diwarnai --pop agar menyatu dengan kepala popup. */
  .leaflet-popup.pop-bawah .leaflet-popup-tip-container{top:0;margin-top:-19px;transform:rotate(180deg)}
  .leaflet-popup.pop-bawah .leaflet-popup-tip{background:var(--pop,#fff)}
  /* JANGAN beri popup bilah gulir (max-height + overflow-y:auto).
     Popup peta tidak seharusnya punya gulir — kurangi ISInya. */
  /* Tombol tutup berada di atas kepala berwarna -> dibuat putih. */
  .leaflet-popup-close-button{width:26px!important;height:26px!important;padding:5px 7px 0 0!important;
    font-size:19px!important;color:#fff!important;opacity:.85;font-weight:400!important}
  .leaflet-popup-close-button:hover{opacity:1;background:none!important}

  .pop-body{font-family:var(--sans);--pop:var(--blue)}
  /* Kepala berwarna: nama titik harus terbaca lebih dulu. */
  /* background-size/position: hanya dipakai saat titik.js/popup-halte.js
     menyisipkan foto lewat P.popHeadFotoStyle (js/inti.js). */
  .pop-head{background:var(--pop);color:#fff;padding:8px 30px 9px 11px;background-size:cover;background-position:center}
  .pop-kind{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(255,255,255,.22);border-radius:999px;padding:1px 7px;margin-bottom:4px}
  .pop-title{font-size:14px;font-weight:750;margin:0;line-height:1.25}
  .pop-sub{font-size:11px;margin:2px 0 0;color:rgba(255,255,255,.85)}
  .pop-main{padding:9px 11px 10px;display:flex;flex-direction:column;gap:7px}
  .pop-btn{display:block;text-align:center;text-decoration:none;background:var(--navy);color:#fff;
    font-size:12px;font-weight:700;padding:8px;border-radius:6px}
  .pop-btn:hover{background:#0E3050}

  /* Baris keterangan bus: label kecil di kiri, isinya di kanan. Menggantikan
     rangkaian "↳" yang dulu menumpuk jadi satu paragraf panjang. */
  /* Kolom isi memakai minmax(0,1fr), BUKAN 1fr: grid bawaan tidak menyusut
     di bawah min-content, sehingga kata panjang melebar & terpotong overflow:hidden.
     minmax(0,1fr) + min-width:0 + overflow-wrap memecahnya dengan benar. */
  .pop-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:6px;font-size:11.5px;line-height:1.4;color:var(--ink)}
  .pop-row>*{min-width:0}
  .pop-row>*+*{overflow-wrap:break-word}   /* hanya kolom ISI yang boleh dipenggal */
  /* 58px (dari 52px): label terpanjang "MELEWATI" perlu ± 54px pada ukuran saat ini. */
  .pop-row .k{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:2px;white-space:nowrap}
  .pop-row b{font-weight:750}
  /* Pemisah "›" pada popup bus: inline-block bukan soal tampilan melainkan
     soal pembungkus — teks biasa "›" tidak memberi peluang patah baris
     (kelas QU di UAX#14), kotak sebaris memungkinkannya. */
  .pop-row .sep{display:inline-block;color:#B9C4CE;margin:0 3px;font-weight:700}
  /* white-space:nowrap diganti inline-block + max-width: nama panjang seperti
     "Halte Kapten Tendean (Permata Hijau)" terpotong oleh overflow:hidden
     dengan nowrap. Diganti: nama pendek tetap utuh, nama panjang membungkus
     di dalam kotaknya sendiri. */
  .pop-halte{display:inline-block;max-width:100%;background:#EAF3FA;border:1px solid #C7D6E1;border-radius:4px;
    padding:0 4px;color:var(--navy);overflow-wrap:break-word}

  /* Blok ETA sengaja memakai warna peringatan (kuning), bukan biru "informasi
     resmi", agar tidak terbaca sebagai data GPS sungguhan. */
  .pop-eta{font-size:11.5px;line-height:1.4;background:#FDF3E7;border:1px solid #F1D2A3;border-radius:6px;padding:7px 8px;margin:0;color:#6B4405}
  .pop-eta b{font-weight:800;color:#4A2F03}
  .pop-eta.none{background:#F4F6F8;border-color:#E1E7EC;color:#5E6E7B}
  .eta-demo{display:block;margin-top:5px;padding-top:4px;border-top:1px dashed #E3BE85;font-size:9.5px;line-height:1.35;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#9A5B08}
  .pop-eta.none .eta-demo{border-top-color:#E1E7EC;color:#7B8894}

  /* Rute yang lewat (chip, bisa diklik) + jadwal nyata. Ini INFORMASI RESMI
     (biru/netral), bukan simulasi, jadi warnanya beda dari blok ETA kuning. */
  .pop-rutes{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0}
  .pop-rutes .pr-lbl{width:100%;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:0}
  .pop-none{font-size:11px;color:var(--muted);line-height:1.4}
  .rchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--sans);font-size:11px;font-weight:700;padding:3px 8px 3px 6px;border-radius:999px;cursor:pointer;line-height:1.3}
  .rchip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rc,#888);flex:none}
  .rchip:hover{background:#F1F6FA;border-color:#C7D6E1}
  .rchip.on{background:var(--rc);color:#fff;border-color:var(--rc)}
  .rchip.on::before{background:#fff}
  .rchip:focus-visible{outline:2px solid #9DC7EC;outline-offset:1px}
  .pop-sched{font-size:11px;line-height:1.4;background:#F1F7FB;border:1px solid #D6E6F1;border-radius:6px;padding:7px 8px;margin:0;color:#33505f}
  .pop-sched .sh{display:block;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5E7A8E;margin-bottom:5px}
  .pop-sched .srow{display:flex;gap:6px;align-items:flex-start;margin-top:5px}
  .pop-sched .srow:first-of-type{margin-top:0}
  .pop-sched .stime{flex:none;font-family:var(--mono);font-size:10.5px;font-weight:700;color:#123A5E;background:#E3EFF8;border:1px solid #CBE0EF;border-radius:4px;padding:1px 5px;white-space:nowrap}
  .pop-sched b{color:var(--ink)}

  /* Pita permanen di atas peta: terlihat tanpa perlu membuka sidebar. */
  .demo-banner{position:absolute;left:0;right:0;top:0;z-index:500;background:#9A5B08;color:#fff;font-size:11.5px;font-weight:700;line-height:1.35;padding:7px 12px;text-align:center}
  .demo-banner b{font-weight:800;text-decoration:underline}
  .mapwrap .leaflet-top{margin-top:32px}

  .toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:11px 16px;border-radius:6px;box-shadow:0 8px 24px rgba(9,30,50,.35);z-index:1500;transition:opacity .2s,transform .2s;max-width:88vw}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* Layar memuat */
  .maploading{position:absolute;inset:0;z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#EAF1F5;color:#5E6E7B;font-size:14px;font-weight:600;transition:opacity .3s}
  .maploading.hide{opacity:0;pointer-events:none}
  .maploading .spin{width:34px;height:34px;border:4px solid #C9D6DF;border-top-color:#1E77C9;border-radius:50%;animation:spin .9s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){ .maploading .spin{animation:none} }

  @media (max-width:860px){
    body{overflow:auto}
    .layout{flex-direction:column}
    .mapwrap{order:-1;height:52vh;min-height:340px;flex:none}
    /* Di HP halaman yang menggulir, bukan sidebar; tab tetap sticky di atas. */
    .side{width:100%;border-right:none;border-bottom:1px solid var(--line);overflow:visible}
    .panes{overflow:visible}
    .tabs{position:sticky;top:0;z-index:400}
    .brand h1{font-size:14px;white-space:normal}
  }

  /* utilitas kecil (menggantikan inline style) */
  .mt8{margin-top:8px}
  .mt10{margin-top:10px}
  .mt16{margin-top:16px}
  .c-blue{background:var(--blue)}
  .c-green{background:var(--green)}
  .c-red{background:#E0392B}
  .c-navy{background:var(--navy)}
  .c-amber{background:var(--amber)}
  .c-go{background:#1E7A45}
  .c-back{background:#0B57A4}   /* = ARROW_BACK di js/rute.js */
  .c-sekolah{background:#F2B01E}
  .c-mapan{background:#0F9D8C}
  .demo-tag{font-weight:800;color:#E0392B}