/* ==========================================================================
   WAR BENSIN BALI — peta & chrome atas
   Basemap difilter jadi abu-kotor (fotokopi); overlay warna traffic Google
   TIDAK difilter supaya kelas lancar/padat/macet tetap akurat.
   ========================================================================== */
#map{position:absolute;inset:0;z-index:0;background:#EDEDED}
/* Basemap lightgrey polos: jalan abu, tanpa filter kontras dan tanpa butiran
   kertas. Sebelumnya `grayscale(1) contrast(1.3)` + grain `multiply` menumpuk
   di ATAS basemap tapi DI BAWAH overlay, sehingga warna garis lalu lintas
   Google tidak pernah tampil apa adanya. Sekarang tidak ada lapisan apa pun
   antara basemap dan overlay. */
.leaflet-osmBase-pane .leaflet-tile{filter:grayscale(1) brightness(1.04)}

.top{position:absolute;z-index:500;top:12px;left:12px;right:12px;display:flex;gap:10px;
  align-items:center;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;background-color:var(--acc);background-image:var(--grain);
  border:3px solid var(--ink);padding:6px 13px 6px 9px;box-shadow:var(--sh-1);white-space:nowrap;
  transform:rotate(-1deg);color:#fff}
.brand svg{width:28px;height:28px;flex:none;color:var(--acc-fill)}
.brand b{display:block;font-family:var(--display);text-transform:uppercase;font-size:17px;
  font-weight:400;letter-spacing:1px;line-height:1;color:#fff;text-shadow:2px 2px 0 var(--ink)}
.brand i{display:block;font-style:normal;font-family:var(--type);font-size:10.5px;
  color:#FFE4E4;line-height:1.3;margin-top:3px}
.search{flex:1;min-width:0;position:relative;max-width:520px}
.search svg{position:absolute;left:12px;top:14px;width:20px;height:20px;color:var(--ink);stroke-width:2.4}
.search input{width:100%;height:48px;border:3px solid var(--ink);background-color:var(--surface);
  box-shadow:var(--sh-1);padding:0 14px 0 42px;font-size:15px;color:var(--ink)}
.search input::placeholder{color:var(--mut);font-family:var(--type)}

.banner{position:absolute;z-index:490;top:72px;left:12px;margin:0;display:inline-flex;
  align-items:center;gap:10px;background-color:var(--acc-fill);border:3px solid var(--ink);
  padding:6px 12px;box-shadow:var(--sh-1);font-size:12px;color:var(--ink);font-family:var(--type);
  transform:rotate(.5deg)}
.banner b{font-family:var(--mono);font-weight:600}
.banner .sep{width:3px;height:16px;background:var(--ink);flex:none}
.banner svg{width:15px;height:15px;flex:none;stroke-width:2.4;vertical-align:-2px}
.live{display:inline-flex;align-items:center;gap:6px}
.live u{width:8px;height:8px;background:var(--acc);border:1.5px solid var(--ink);flex:none;
  text-decoration:none;animation:beat 2.8s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}

.side{position:absolute;z-index:480;top:120px;left:12px;bottom:12px;width:398px;display:flex;
  flex-direction:column;background-color:var(--surface);background-image:var(--grain);
  border:3px solid var(--ink);box-shadow:var(--sh-2);overflow:hidden;
  transition:transform .2s ease,opacity .2s ease}
.side.hide{transform:translateX(-16px);opacity:0;pointer-events:none}
.side .head{padding:10px 13px;border-bottom:3px solid var(--ink);display:flex;
  align-items:baseline;justify-content:space-between;gap:10px;background-color:var(--ink)}
.side .head h2{margin:0;font-family:var(--display);text-transform:uppercase;font-size:15px;
  font-weight:400;letter-spacing:.6px;color:var(--acc-fill)}
.side .head .n{font-size:11px;color:#D8D0BF;font-family:var(--type)}
.filters{display:flex;gap:6px;padding:9px 11px;border-bottom:3px solid var(--ink);flex-wrap:wrap;
  background-color:var(--surface-2)}
.list{overflow-y:auto;overscroll-behavior:contain;padding:9px;flex:1}
.row{width:100%;text-align:left;border:2.5px solid var(--ink);background-color:var(--surface);
  padding:9px 10px;cursor:pointer;margin-bottom:7px;display:block;
  transition:transform .08s,background-color .12s}
.row:hover{background-color:var(--acc-soft)}
.row:active{transform:translate(2px,2px)}
.row[aria-current="true"]{background-color:var(--acc-soft);box-shadow:4px 4px 0 var(--acc)}
.row .nm{font-size:13.5px;font-weight:700;line-height:1.25;text-transform:uppercase;letter-spacing:.2px}
.row .sub{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.4;font-family:var(--type)}
.row .metrics{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;align-items:center}
.side .more{margin:8px;border:3px solid var(--ink);background-color:var(--acc-fill);
  min-height:46px;font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;
  font-size:13px;font-weight:400;color:var(--ink);cursor:pointer;box-shadow:var(--sh-1)}
.side .more:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.side .more[hidden]{display:none}

.legend{position:absolute;z-index:470;right:12px;bottom:12px;background-color:var(--surface);
  background-image:var(--grain);border:3px solid var(--ink);box-shadow:var(--sh-1);padding:11px 13px;
  font-size:12px;color:var(--ink-2);max-width:262px;transform:rotate(.6deg)}
.legend h3{margin:0 0 8px;font-family:var(--marker);font-size:12.5px;font-weight:400;
  color:var(--ink);letter-spacing:.4px;text-transform:uppercase}
.legend .li{display:flex;align-items:center;gap:8px;margin:5px 0;font-family:var(--type)}
.legend .li u{width:18px;height:6px;border:1.5px solid var(--ink);flex:none;text-decoration:none}

/* Penanda SPBU. Status dikodekan lewat BENTUK dan warna sekaligus, supaya tetap
   bisa dibedakan tanpa melihat warna:
     buka      kotak penuh hijau
     tutup     kotak kertas, tengkorak merah
     24 jam    hijau dengan cincin kuning hazard ganda
     tak data  garis putus-putus abu */
.pin{width:32px;height:32px;position:relative}
.pin .b{position:absolute;inset:0;border:3px solid var(--ink);display:grid;place-items:center;
  background-color:var(--surface);box-shadow:2px 2px 0 rgba(19,19,19,.55)}
.pin svg{width:19px;height:19px;color:var(--ink);fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.pin.open .b{background-color:var(--open);color:#fff}
.pin.open svg{color:#fff}
.pin.shut .b{background-color:var(--surface);color:var(--shut)}
.pin.shut svg{color:var(--shut)}
.pin.tf .b{background-color:var(--open);
  box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--acc-fill),2px 2px 0 rgba(19,19,19,.55)}
.pin.tf svg{color:#fff}
.pin.unk .b{background-color:var(--surface);border-style:dashed;color:var(--unk)}
.pin.unk svg{color:var(--unk)}
.pin.sel{transform:scale(1.2) rotate(-3deg);z-index:900}
.pin.sel .b{box-shadow:0 0 0 3px var(--acc),3px 3px 0 rgba(19,19,19,.5)}

/* Stiker dekoratif: ditempel di area peta yang kosong, tidak bisa diklik. */
.sticker{position:absolute;z-index:460;pointer-events:none;opacity:.9}
.sticker svg{width:40px;height:40px;stroke-width:2}
.sticker.s1{left:50%;bottom:20px;transform:translateX(-34px) rotate(-13deg);color:var(--acc)}
.sticker.s2{left:50%;bottom:16px;transform:translateX(14px) rotate(10deg);color:var(--ink)}