/* map.css: the full screen map page /lokasyonlar (DESIGN-PLAN §5.1, map-and-ocpi.md §10).
   Desktop (≥ 1024): 400 px panel on the left edge, the map fills the rest of the screen under the header.
   Phone and tablet: full map, floating search bar with the filter button, the list in a three step bottom sheet.
   Without JavaScript the page is the server rendered list with the filter form (no map area).
   Owner decision 28.09.2026: a simpler, more visual panel. On top one search field and one "Filtreler"
   button (the chips open in a small panel, active ones show as removable chips); picture cards with
   one line of meta and chips; the drawer has one photo, the station's campaigns and venue offers.
   Motion is subtle and only under html.motion (docs/MOTION.md): the filter panel and the drawer
   ease in, cards lift by a pixel on hover. Reduced motion shows everything at once. */

.page--map { --lmap-panel: 400px; --sheet-peek: 112px; }

/* App-like page (layout meta.chrome = 'app', no footer). With JavaScript the document never scrolls:
   the tariff strip and the header keep their own height and the map application fills the rest of the
   viewport; the list panel and the bottom sheet scroll inside themselves. */
html.js body.page--map { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
html.js body.page--map > main { flex: 1 1 auto; min-height: 0; overflow: hidden; overflow: clip; }
html.js body.page--map > main > .lmap { flex: 1 1 auto; min-height: 0; }

/* clip, not only hidden: a focused card in the sheet or a script can never scroll the app container. */
.lmap {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--bg-alt);
}

/* ---------- Without JavaScript: a plain, full width list ---------- */
html:not(.js) .lmap { height: auto; min-height: 0; overflow: visible; background: var(--bg); }
html:not(.js) .lmap-map, html:not(.js) .lmap-sheet-bar { display: none; }
html:not(.js) .lmap-top, html:not(.js) .lmap-panel-body { padding-inline: var(--gutter); }
html:not(.js) .lmap-top { padding-top: var(--sp-6); }
html:not(.js) .lmap-groups .lmap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-3); }
html:not(.js) .lmap-panel-body { padding-bottom: var(--section-y); }
html:not(.js) .lmap-fpanel { margin-top: var(--sp-2); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); }
html.js .lmap-nojs { display: none; }
html.js .lmap-q-go { display: none; }

/* ---------- Panel head: H1 with the live stamp, search, "Filtreler", active chips ---------- */
.lmap-top { position: relative; z-index: 5; background: var(--surface); }
.lmap-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--sp-3); margin-bottom: var(--sp-3); }
.lmap-title { font-size: 1.25rem; line-height: 1.3; font-stretch: var(--stretch-heading); letter-spacing: 0; }
.lmap-live { flex: none; max-width: none; margin: 0; }
.lmap-live:empty { display: none; }

/* Without JavaScript: search, active chips (links) and the filter form one under the other. With it
   the search and the "Filtreler" button share one row (owner request 28.09.2026) and the active
   filter chips take the next row only while a filter is on. */
.lmap-form { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
html.js .lmap-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); }
html.js .lmap-search { grid-column: 1; grid-row: 1; }
html.js .lmap-fbtn { grid-column: 2; grid-row: 1; }
html.js .lmap-active { grid-column: 1 / -1; grid-row: 2; }
.lmap-search {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-alt);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.lmap-search:hover { border-color: var(--line-hover); }
.lmap-search:focus-within { border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.lmap-search-ico { display: flex; padding: 0 6px 0 12px; color: var(--muted); }
.lmap-q { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1rem; text-overflow: ellipsis; }
.lmap-q:focus { outline: none; }
.lmap-q::-webkit-search-cancel-button { display: none; }
.lmap-q::placeholder { color: var(--muted); opacity: 1; }
.lmap-q-clear { display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin-right: 4px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); }
.lmap-q-clear:hover { background: var(--bg-tint); color: var(--ink); }
.lmap-q-go { height: 40px; margin-right: 4px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--secondary); color: #FFFFFF; font-weight: var(--fw-semibold); }
.lmap-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  right: -1px;
  z-index: 40;
  max-height: min(60vh, 380px);
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(var(--shadow-tint), .06);
}
.ls-group { padding: 8px 10px 4px; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.ls-opt { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.ls-opt[aria-selected="true"], .ls-opt:hover { background: var(--bg-alt); }
.ls-main { color: var(--ink); font-weight: var(--fw-semibold); }
.ls-sub { color: var(--muted); font-size: var(--fs-small); }
.ls-empty { padding: 10px; color: var(--muted); font-size: var(--fs-small); }

/* The one "Filtreler" control: a disclosure button with the number of active filters. */
.lmap-fbtn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.lmap-fbtn:hover { border-color: var(--ink); }
.lmap-fbtn[aria-expanded="true"], .lmap-fbtn.is-set { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lmap-fbtn-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ink); color: #FFFFFF; font-size: .75rem; font-weight: var(--fw-bold); line-height: 1; }

/* Active filters: removable chips under the search bar. */
.lmap-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.achip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #FFFFFF;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.achip::before { content: ""; position: absolute; inset: -6px 0; }
.achip .i { width: 16px; height: 16px; opacity: .8; }
.achip:hover { background: var(--navy-700, #273149); }
.achip:hover .i { opacity: 1; }
.achip-clear { position: relative; min-height: 32px; padding: 0 6px; border: 0; background: none; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.achip-clear::before { content: ""; position: absolute; inset: -6px 0; }
.achip-clear:hover { color: var(--accent-hover); }
html.motion .achip { animation: lmap-chip-in 160ms var(--ease-out, ease) both; }
@keyframes lmap-chip-in { from { opacity: 0; transform: scale(.92); } }

/* Filter panel. Without JavaScript it is part of the form; with it a small popover under the bar. */
.lmap-fpanel { display: flex; flex-direction: column; min-width: 0; }
.lmap-fhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.lmap-fpanel-title { color: var(--ink); font-size: 1rem; font-weight: var(--fw-bold); }
.lmap-fclose { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); }
.lmap-fclose:hover { background: var(--bg-alt); color: var(--ink); }
.lmap-fbody { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-4); }
.fgroup { min-width: 0; margin: 0; padding: 0; border: 0; }
.fgroup-title { margin: 0 0 var(--sp-2); padding: 0; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.fgroup-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lmap-ffoot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.lmap-fclear { font-size: var(--fs-small); }
.lmap-apply { margin-left: auto; }

html.js .lmap-fpanel {
  position: absolute;
  top: calc(var(--control-h) + var(--sp-2));
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: min(620px, calc(100dvh - 240px));
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(var(--shadow-tint), .06);
}
html.js .lmap-fpanel.is-open { display: flex; }
html.js .lmap-fpanel:focus { outline: none; }
html.js .lmap-fhead { padding: var(--sp-3) var(--sp-4) 0 var(--sp-5); }
html.js .lmap-fbody { flex: 1 1 auto; min-height: 0; padding: var(--sp-2) var(--sp-5) var(--sp-4); overflow: auto; overscroll-behavior: contain; }
html.js .lmap-ffoot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); }
html.motion .lmap-fpanel.is-open { animation: lmap-pop 180ms var(--ease-out, ease) both; transform-origin: 50% 0; }
@keyframes lmap-pop { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); } }

/* Filter chips (checkbox and radio inputs inside labels; the GET form works without JavaScript). */
.fchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--chip-h);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fchip::before { content: ""; position: absolute; inset: -4px 0; }
.fchip:hover { border-color: var(--ink); }
.fchip-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.fchip:has(.fchip-input:focus-visible) { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.fchip-box { display: none; }
.fchip-n { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.fchip:has(.fchip-input:checked) { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }
.fchip:has(.fchip-input:checked) .fchip-box { display: inline-flex; }
.fchip:has(.fchip-input:checked) .fchip-n { color: rgba(255, 255, 255, .8); }
.fchip.is-zero { border-color: var(--line); color: var(--muted); }
.fchip-soon:not([hidden]) { display: contents; }

/* "Listeyi haritayla güncelle": a switch in the filter panel (JavaScript only). */
.fswitch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--ink-2); font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; }
.fswitch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.fswitch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--gray-300, #C5CCD8); transition: background-color var(--dur-2) var(--ease); }
.fswitch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease); }
.fswitch input:checked + .fswitch-track { background: var(--ink); }
.fswitch input:checked + .fswitch-track::after { transform: translateX(16px); }
.fswitch:has(input:focus-visible) .fswitch-track { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Panel body: notes, list, drawer ---------- */
.lmap-panel { position: relative; z-index: 4; display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.lmap-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.lmap-note { display: flex; align-items: flex-start; gap: var(--sp-2); max-width: none; margin: var(--sp-3) 0 0; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.lmap-note { background: var(--bg-alt); color: var(--ink-2); }
.lmap-note .i { flex: none; margin-top: 1px; }
.lmap-listhead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-2);
  background: var(--surface);
}
.lmap-count { max-width: none; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
/* "Konumumu kullan": the list is sorted by distance from the reader (the map has the same control). */
.lmap-near { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.lmap-near::before { content: ""; position: absolute; inset: -6px 0; }
.lmap-near:hover { color: var(--accent-hover); }
.lmap-list { min-height: 120px; }
.lmap-groups { display: flex; flex-direction: column; gap: var(--sp-5); }
.lmap-group-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-h4); font-stretch: var(--stretch-text); letter-spacing: 0; }
.lmap-group-title a { color: inherit; text-decoration: none; }
.lmap-group-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lmap-sub { margin: var(--sp-3) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.lmap-soon { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.lsoon { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border: 1px dashed var(--ink); border-radius: var(--r-lg); }
.lsoon-name { color: var(--ink); font-weight: var(--fw-semibold); }
.lsoon-meta { color: var(--muted); font-size: var(--fs-small); }
.lmap-more { margin-top: var(--sp-3); }

/* Empty result: the empty map drawing, ways out, the nearest stations. */
.lmap-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0 var(--sp-2); text-align: center; }
.lmap-empty-art { width: min(220px, 70%); height: auto; }
.lmap-empty-title { color: var(--ink); font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.lmap-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.lmap-empty-sub { align-self: stretch; margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-align: left; }
.lmap-empty .lmap-cards { width: 100%; text-align: left; }

/* End of the list panel: only the copyright line (owner decision 29.09.2026), quiet, on the panel's padding. */
.lmap-foot { max-width: none; margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Drawer (site detail), in place of the list ---------- */
.lmap-detail { outline: none; }
html.motion .lmap.has-detail .lmap-detail { animation: lmap-drawer-in 220ms var(--ease-out, ease) both; }
@keyframes lmap-drawer-in { from { opacity: 0; transform: translate3d(12px, 0, 0); } }
.ld { display: flex; flex-direction: column; padding-bottom: var(--sp-4); }
.ld-bar { position: sticky; top: 0; z-index: 3; padding: var(--sp-2) 0; background: var(--surface); }
.ld-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-2) 0 0; border: 0; background: none; color: var(--ink); font-weight: var(--fw-semibold); }
.ld-back:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* One picture per station: the first photo, or the drawing when there is none. */
.ld-photo { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-tint); }
.ld-photo img { width: 100%; height: 100%; object-fit: cover; }
.ld-photo--art { background: var(--bg-alt); }
.ld-photo--art img { object-fit: contain; object-position: 50% 100%; padding: var(--sp-3) var(--sp-4) 0; }
/* Head (owner request 29.09.2026: no live stamp, a clear order): the name, one line per fact (place,
   access, opening hours), then the site's status and its power chips on one row between hairlines. */
.ld-head { display: flex; flex-direction: column; gap: 6px; padding-top: var(--sp-5); }
.ld-title { margin-bottom: 2px; font-size: 1.375rem; line-height: 1.25; font-stretch: var(--stretch-heading); outline: none; overflow-wrap: anywhere; }
.ld-meta { display: flex; align-items: flex-start; gap: var(--sp-2); max-width: none; margin: 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.45; font-variant-numeric: tabular-nums lining-nums; }
.ld-meta > .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.ld-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-3) 0; border-block: 1px solid var(--line); }
.ld-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); max-width: none; margin: 0; }
.ld-state .lstat { gap: var(--sp-2); font-size: var(--fs-small); }
.ld-power { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: none; margin: 0 0 0 auto; }
.ld-flag { display: flex; align-items: flex-start; gap: var(--sp-2); max-width: none; margin: var(--sp-3) 0 0; padding: 10px var(--sp-3); border-radius: var(--r-sm); background: var(--bg-alt); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.45; }
.ld-flag .i { flex: none; margin-top: 2px; }
.ld-loading { color: var(--muted); }
/* Directions (the one red button) and share on one line, "Uygulamada şarj et" below; all 48 px tall. */
.ld-actions { display: grid; grid-template-columns: minmax(0, 1fr) var(--control-h); gap: var(--sp-2); margin-top: var(--sp-4); }
.ld-actions > .dir-menu { min-width: 0; }
.ld-actions > .dir-menu > summary { width: 100%; }
.ld-actions > .ld-share { width: var(--control-h); height: var(--control-h); padding: 0; }
.ld-actions > .ld-app { grid-column: 1 / -1; }
/* Sections below the actions (owner request 29.09.2026: tidier, more modern), each opened by a hairline,
   with a light heading. Their content shares one shape: a box with a hairline and 12 px corners whose
   rows are split by hairlines. */
.ld-block { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.ld-block > h3, .ld-help > h3 { margin: 0 0 var(--sp-3); color: var(--ink); font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: 0; }
.ld-devs, .ld-box, .ld-near { overflow: hidden; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
/* Devices: per device its name, then one row per connector in three aligned columns (power chip, socket,
   state with how long it has been so); the cable note closes the list as one plain line under a hairline
   (sites with a socketed AC point only). The live state of
   each connector is shown here, on the map only. A charger QR link marks its device. */
.ld .st-chargers { gap: 0; }
.ld .st-charger { padding: var(--sp-3) var(--sp-4); border: 0; border-radius: 0; background: none; }
.ld .st-charger + .st-charger { border-top: 1px solid var(--line); }
.ld .st-charger.is-highlight { background: var(--bg-alt); box-shadow: inset 3px 0 0 var(--ink); }
.ld .st-charger-name { margin: 0 0 var(--sp-2); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.3; }
.ld .st-conns { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--sp-2) var(--sp-3); }
.ld .st-conn { display: grid; grid-column: 1 / -1; grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-columns: subgrid; align-items: center; column-gap: var(--sp-3); min-height: 32px; }
.ld .st-conn-type { min-width: 0; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.3; overflow-wrap: anywhere; }
.ld-cstat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.ld-cstat .lstat { font-size: var(--fs-small); }
.ld-since { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: 1.25; }
/* Socketed AC points at the site: one calm line under the devices (no box, no warning colour). */
.ld-cable { display: flex; align-items: flex-start; gap: var(--sp-2); max-width: none; margin: 0; padding: 10px var(--sp-4); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.45; }
.ld-cable > .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
/* Tariff: one box, a row per side (power chip left, price right in tabular figures with a lighter unit),
   then the note and a quiet foot ("Vergiler dahil." and the small "Tüm tarifeler" link). */
.ld-box > * + * { border-top: 1px solid var(--line); }
.ld-prices { margin: 0; padding: 0; list-style: none; }
.ld-price { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-4); }
.ld-price + .ld-price { border-top: 1px solid var(--line); }
.ld-price-v { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.ld-price-v b { font-size: 1.25rem; font-weight: var(--fw-bold); line-height: 1.2; }
.ld-unit { color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.ld-box-note { max-width: none; margin: 0; padding: var(--sp-3) var(--sp-4); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.45; }
.ld-box-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--sp-3); max-width: none; margin: 0; padding: 10px var(--sp-4); color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.ld-more { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ink); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ld-more::before { content: ""; position: absolute; inset: -10px -4px; }
.ld-more .i { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.ld-more:hover { color: var(--accent-hover); }
html.motion .ld-more:hover .i { transform: translateX(3px); }
/* Address: the pin, the text and a copy icon button on one row; the site's description under it. */
.ld-addr { display: grid; grid-template-columns: 20px minmax(0, 1fr) 40px; align-items: center; gap: var(--sp-3); }
.ld-addr > .i { color: var(--muted); }
.ld-addr-text { max-width: none; margin: 0; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.ld-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.ld-icon-btn:hover { border-color: var(--ink); background: var(--bg-alt); }
.ld-icon-btn:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.ld-desc { max-width: none; margin: var(--sp-3) 0 0 calc(20px + var(--sp-3)); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; white-space: pre-line; }
/* Nearby stations: rows with the name, district and distance, and a chevron; a row selects that station. */
.ld-near li + li { border-top: 1px solid var(--line); }
.ld-near-link { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: 10px var(--sp-3) 10px var(--sp-4); color: var(--ink); text-decoration: none; transition: background-color var(--dur-1) var(--ease); }
.ld-near-link:hover { background: var(--bg-alt); }
.ld-near-link:hover .ld-near-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ld-near-link:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: -3px; }
.ld-near-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.ld-near-name { overflow: hidden; font-weight: var(--fw-semibold); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ld-near-meta { color: var(--muted); font-size: var(--fs-small); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.ld-near-link > .i { flex: none; color: var(--muted); transition: transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease); }
.ld-near-link:hover > .i { color: var(--ink); }
html.motion .ld-near-link:hover > .i { transform: translateX(2px); }
/* Help card at the end: "Sorun mu var?" with the report link and the call centre side by side. */
.ld-help { margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-alt); }
.ld-help-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
.ld-help-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; transition: border-color var(--dur-1) var(--ease); }
.ld-help-btn:hover { border-color: var(--ink); }
.ld-help-btn:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.ld-help-btn .i { flex: none; width: 18px; height: 18px; color: var(--muted); }
.lmap-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sheet-visible, 0px) + 16px);
  z-index: 50;
  max-width: min(92%, 420px);
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--band);
  color: var(--on-band);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  transform: translateX(-50%);
  box-shadow: var(--shadow-2);
}

/* ---------- Map area ---------- */
.lmap-map { position: absolute; inset: 0; z-index: 1; }
.lmap .lmap-canvas { position: absolute; inset: 0; }
.lmap-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  max-width: calc(100% - 24px - 260px);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--status-unknown)); box-sizing: border-box; }
.lg-a { --c: var(--status-available-fill); }
.lg-b { --c: var(--status-busy); }
.lg-f { --c: var(--status-fault); }
.lg-u::before { background: #FFFFFF; border: 2px dashed var(--status-unknown); }
.lg-p::before { background: #FFFFFF; border: 2px dashed var(--brand-navy); }
.lg-ac::before { background: #FFFFFF; border: 2px solid var(--brand-navy); }
.lg-dc::before { background: var(--brand-navy); }
.lmap.is-stale .lmap-legend { opacity: .8; }

/* MapLibre controls in the brand's shapes */
.lmap .maplibregl-ctrl-group { border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.lmap .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.lmap .maplibregl-ctrl-group button:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.lmap .maplibregl-ctrl-group button:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.lmap .lmap-ctrl-btn { display: grid; place-items: center; color: var(--ink); }
.lmap .lmap-ctrl-btn:hover { background: var(--bg-alt); }
.lmap .maplibregl-ctrl-attrib { font-size: 11px; }
.lmap .maplibregl-canvas:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: -3px; }

/* ---------- Desktop: panel on the left edge, map beside it ---------- */
@media (min-width: 1024px) {
  .lmap { display: grid; grid-template-columns: var(--lmap-panel) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lmap-top { grid-column: 1; grid-row: 1; padding: var(--sp-5) var(--sp-5) var(--sp-3) var(--gutter); border-right: 1px solid var(--line); }
  html.js .lmap-top { border-bottom: 1px solid var(--line); }
  .lmap-q { font-size: .9375rem; }
  .lmap-panel { grid-column: 1; grid-row: 2; border-right: 1px solid var(--line); }
  .lmap-panel-body { padding: 0 var(--sp-5) var(--sp-6) var(--gutter); }
  .lmap-map { position: relative; inset: auto; grid-column: 2; grid-row: 1 / span 2; }
  .lmap-sheet-bar { display: none; }
  .lmap.is-nomap { grid-template-columns: minmax(0, 1fr); }
  .lmap.is-nomap .lmap-map { display: none; }
  /* Without JavaScript there is no map: the list and the filter form use the full width. */
  html:not(.js) .lmap { display: block; }
  html:not(.js) .lmap-top, html:not(.js) .lmap-panel { border-right: 0; }
  html:not(.js) .lmap-top { padding-right: var(--gutter); }
  /* The drawer takes the whole panel; the list, search and filters come back with the back button. */
  .lmap.has-detail .lmap-top { display: none; }
  .lmap.has-detail .lmap-panel { grid-row: 1 / span 2; }
}
@media (min-width: 1600px) {
  .page--map { --lmap-panel: 440px; }
}

/* ---------- Phones and tablets: full map, floating search bar, bottom sheet ---------- */
@media (max-width: 1023.98px) {
  html.js .lmap-top {
    position: absolute;
    top: 12px;
    left: var(--gutter);
    right: var(--gutter);
    z-index: 5;
    background: none;
    pointer-events: none;
  }
  html.js .lmap-top > * { pointer-events: auto; }
  html.js .lmap-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.js .lmap-search { border-color: transparent; background: var(--surface); box-shadow: var(--shadow-2); }
  html.js .lmap-search:focus-within { border-color: var(--ink); }
  html.js .lmap-fbtn { border-color: transparent; box-shadow: var(--shadow-2); }
  html.js .lmap-fbtn[aria-expanded="true"], html.js .lmap-fbtn.is-set { border-color: var(--ink); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--ink); }
  html.js .lmap-active {
    flex-wrap: nowrap;
    margin: 0 calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.js .lmap-active::-webkit-scrollbar { display: none; }
  html.js .lmap-active > * { flex: none; box-shadow: var(--shadow-1); }
  html.js .achip-clear { border-radius: var(--r-pill); background: var(--surface); }
  html.js .lmap-fpanel { max-height: calc(100dvh - 190px); }

  html.js .lmap-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% - 64px);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-3);
    transform: translateY(calc(100% - var(--sheet-peek)));
    transition: transform var(--dur-3) var(--ease);
    will-change: transform;
  }
  html.js .lmap-panel.is-dragging { transition: none; }
  .lmap-sheet-bar { flex: none; }
  .lmap-sheet-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 60px;
    padding: 10px var(--gutter) 12px;
    border: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: none;
    color: var(--ink);
    font-weight: var(--fw-semibold);
    touch-action: none;
    cursor: grab;
  }
  .lmap-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--gray-300, #C5CCD8); }
  html.js .lmap-panel-body { padding: 0 var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
  html.js .lmap-listhead { justify-content: flex-start; padding-top: 0; }
  /* The sheet bar already shows the count; it stays for screen readers (it is the live result count). */
  html.js .lmap-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.js .lmap-legend { display: none; }
  /* Controls and the attribution stay above the sheet. */
  .lmap .maplibregl-ctrl-bottom-right, .lmap .maplibregl-ctrl-bottom-left {
    bottom: calc(var(--sheet-visible, var(--sheet-peek)) + 4px);
    transition: bottom var(--dur-3) var(--ease);
  }
  .lmap.is-nomap .lmap-map { display: none; }
  html.js .lmap.is-nomap .lmap-panel { transform: none; height: calc(100% - 132px); border-radius: 0; box-shadow: none; }
  html.js .lmap.is-nomap .lmap-sheet-bar { display: none; }
}
/* Narrow phones: the filter button shows its icon and count (the word stays for screen readers). */
@media (max-width: 479.98px) {
  html.js .lmap-fbtn { padding: 0 12px; }
  html.js .lmap-fbtn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .lmap-panel, .lmap .maplibregl-ctrl-bottom-right, .lmap .maplibregl-ctrl-bottom-left { transition: none; }
}