/* locations.css: location pages (DESIGN-PLAN §5.1 list parts, §5.3, §5.18), the station parts of the map
   drawer and the location blocks. No station pages since 29.09.2026.
   Tokens only (base.css + the brand theme); full width with the page gutters, no centred container. */

/* ---------- Page head band and the first section below it ----------
   The breadcrumb, the H1 and the H1 row's control ("Haritada gör", RSS) are in the site's page head band
   (site.css .page-head lays out and colours them on the navy); the first section starts below it. */
.loc-page { padding-block: var(--sp-6) var(--section-y); }
@media (min-width: 768px) { .loc-page { padding-top: var(--sp-8); } }
.loc-crumbs li + li::before { content: "›"; }
.loc-h1-btn { flex: none; }

/* ---------- AC/DC power chips, status chips ---------- */
.loc-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* The AC / DC power chip (.ptag) is a shared component: components.css. */
.sc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
}
.sc .i { width: 14px; height: 14px; stroke-width: 2.2; }
.sc--available { background: var(--status-available-tint); color: var(--status-available); }
.sc--busy { background: var(--status-busy-tint); color: var(--status-busy); }
.sc--fault, .sc--maintenance { background: var(--status-fault-tint); color: var(--status-fault); }
.sc--unknown, .sc--offline { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--status-unknown); }
.sc--soon { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sc-since { font-weight: var(--fw-medium); }

/* ---------- Station card (map list, province pages, new stations) ----------
   One picture, the name, one meta line and a row of chips. The status dot is printed on the map
   page only (DECISIONS 28.09.2026: availability only on maps). */
.lmap-cards, .loc-cards { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cards.loc-cards { display: grid; }
.lcard { min-width: 0; }
.lcard-link {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.lcard-link:hover { border-color: var(--line-hover); box-shadow: var(--shadow-2); }
html.motion .lcard-link:hover { transform: translate3d(0, -1px, 0); }
.lcard-link:hover .lcard-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lcard-link:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.lcard.is-active .lcard-link { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lcard-media { display: grid; place-items: center; width: 80px; height: 80px; overflow: hidden; border-radius: var(--r-md); background: var(--bg-tint); color: var(--muted); }
.lcard-media img { width: 100%; height: 100%; object-fit: cover; }
.lcard-media--art { background: var(--bg-alt); }
.lcard-media--art img { object-fit: contain; object-position: 50% 100%; padding: 6px 6px 0; }
.lcard-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lcard-name { margin: 0; overflow: hidden; color: var(--ink); font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.lcard-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.lcard-place { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard-meta .lstat { flex: none; }
.lcard-km { font-variant-numeric: tabular-nums; }
.lcard-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 5px; }
.lcard-badge { min-height: 24px; padding: 0 9px; }
.lcard-badge .i { width: 14px; height: 14px; }
/* "Kampanya": the brand's red tint (a small badge). "Mekân fırsatı" and "Yeni" stay neutral. */
.badge.lcard-badge--deal { background: var(--accent-tint); color: var(--accent-on-tint); }
.badge.lcard-badge--offer { background: var(--bg-tint); color: var(--ink); }
.badge.lcard-badge--new { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lcard-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.lcard-flag .i { width: 14px; height: 14px; }
.lcard-date { color: var(--muted); font-size: var(--fs-small); }

/* Site status on the map list and drawer: a dot and a short word (never a colour alone). */
.lstat { display: inline-flex; align-items: center; gap: 6px; color: var(--c, var(--muted)); font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: 1.2; white-space: nowrap; }
.lstat-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--c)); }
.lstat--available { --c: var(--status-available); --dot: var(--status-available-fill); }
.lstat--busy { --c: var(--status-busy); }
.lstat--fault, .lstat--maintenance { --c: var(--status-fault); }
.lstat--unknown { --c: var(--muted); }
.lstat--unknown .lstat-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--status-unknown); }
.lstat--soon { --c: var(--ink); }
.lstat--soon .lstat-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- Campaigns and venue offers of a station (map drawer) ---------- */
.ldeals, .loffers { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ldeal { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; border-radius: var(--r-lg); background: var(--bg-alt); }
.ldeal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; max-width: none; }
.badge.ldeal-badge { background: var(--accent-tint); color: var(--accent-on-tint); }
.ldeal-badge .i { width: 14px; height: 14px; }
.ldeal-scope { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.ldeal-benefit { max-width: none; color: var(--ink); font-size: 1.25rem; font-weight: var(--fw-bold); font-stretch: var(--stretch-heading); line-height: 1.2; }
.ldeal-title { margin: 0; color: var(--ink); font-size: .9375rem; font-weight: var(--fw-semibold); line-height: 1.35; }
.ldeal-title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ldeal-title a:hover { color: var(--accent-hover); }
.ldeal-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: none; color: var(--ink-2); font-size: var(--fs-small); }
.ldeal-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ldeal-meta .i { width: 16px; height: 16px; color: var(--muted); }
.ldeal-code { display: flex; align-items: center; gap: 10px; max-width: none; margin-top: 4px; padding: 4px 4px 4px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.ldeal-code-label { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.ldeal-code-value { min-width: 0; overflow: hidden; color: var(--ink); font-family: var(--font-mono); font-size: .9375rem; font-weight: var(--fw-bold); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.ldeal-copy { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 36px; margin-left: auto; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: var(--secondary); color: #FFFFFF; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.ldeal-copy:hover { background: var(--secondary-hover); }
.ldeal-copy .i { width: 16px; height: 16px; }
.loffer { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-alt); }
.loffer-logo { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--r-md); background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.loffer-logo img { width: 100%; height: 100%; object-fit: contain; }
.loffer-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.loffer-venue { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.loffer-title { color: var(--ink); font-weight: var(--fw-bold); line-height: 1.3; }
.loffer-text { color: var(--ink-2); font-size: var(--fs-small); }
.loffer-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--fs-small); }
.loffer-meta .i { width: 16px; height: 16px; color: var(--muted); }
.loffer-terms { margin-top: 2px; font-size: var(--fs-small); }
.loffer-terms > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--ink); font-weight: var(--fw-semibold); list-style: none; cursor: pointer; }
.loffer-terms > summary::-webkit-details-marker { display: none; }
.loffer-terms[open] > summary .i { transform: rotate(180deg); }
.loffer-terms p { color: var(--ink-2); white-space: pre-line; }

/* ---------- Station parts of the map drawer ----------
   Owner decision (29.09.2026): there are no station pages; a station is shown in the map's detail panel
   (map.js, map.css). These base rules are the drawer's device list and the directions menu (the cable note
   is .ld-cable in map.css). */
.st-chargers { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.st-charger { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.st-charger-name { margin: 0; color: var(--ink); font-size: var(--fs-h4); font-weight: var(--fw-title); line-height: 1.3; }
.st-conns { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.st-conn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.st-conn-type { color: var(--ink); font-weight: var(--fw-medium); }
.st-desc { margin-top: var(--sp-3); color: var(--ink-2); white-space: pre-line; }

/* Directions menu (<details>; works without JavaScript) */
.dir-menu { position: relative; }
.dir-menu > summary { list-style: none; cursor: pointer; }
.dir-menu > summary::-webkit-details-marker { display: none; }
.dir-menu .dir-chev, .dir-menu > summary .i:last-child { transition: transform var(--dur-2) var(--ease); }
.dir-menu[open] > summary .i:last-child { transform: rotate(180deg); }
.dir-list { margin: 6px 0 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-3); }
.dir-menu[open] > .dir-list { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 240px; }
.dir-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--ink); font-weight: var(--fw-medium); text-decoration: none; }
.dir-list a:hover, .dir-list a:focus-visible { background: var(--bg-alt); }
.dir-list .i { color: var(--muted); }

/* ---------- Mini maps and the static dot map ---------- */
.mini-map { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-tint); aspect-ratio: 4 / 3; }
.mini-map-static { position: absolute; inset: 0; cursor: pointer; }
.mini-map-static .dotmap { width: 100%; height: 100%; }
/* Higher specificity than .maplibregl-map (position: relative), whose stylesheet loads later. */
.mini-map .mini-map-canvas { position: absolute; inset: 0; }
.mini-map-btn { position: absolute; right: 12px; bottom: 12px; z-index: 2; box-shadow: var(--shadow-2); }
.mini-map.is-live .mini-map-static, .mini-map.is-live [data-mini-load] { display: none; }
.dotmap { display: block; }
.dm-bg { fill: var(--gray-100, #EEF1F6); }
.dm-grid line { stroke: var(--gray-150, #E8EDF6); stroke-width: 1; }
.dm-dot { stroke: #FFFFFF; stroke-width: 2; }
.dm-a { fill: var(--status-available-fill); }
.dm-b { fill: var(--status-busy); }
.dm-f, .dm-m { fill: var(--status-fault); }
.dm-u { fill: #FFFFFF; }
.dm-dot.dm-u { stroke: var(--status-unknown); stroke-dasharray: 2 2; }
.dm-p { fill: #FFFFFF; }
.dm-dot.dm-p { stroke: var(--brand-navy); stroke-dasharray: 2 2; }
.dm-dot.dm-dc { stroke: var(--brand-navy); stroke-width: 2.5; }
.dm-ring { fill: none; stroke: var(--status-selected); stroke-width: 5; stroke-linejoin: round; }
.dm-pin { stroke: #FFFFFF; stroke-width: 2; }
.dm-pin.dm-u { stroke: var(--status-unknown); stroke-dasharray: 3 2; }
/* Province and district previews: no availability colours outside the map page and the home map (CLAUDE.md). */
.st-mapbox--neutral .dm-dot { fill: var(--navy-400, #4B566D); stroke: #FFFFFF; stroke-dasharray: none; }
.st-mapbox--neutral .dm-pin { fill: var(--brand-navy); stroke: #FFFFFF; stroke-dasharray: none; }
.dm-core { fill: #FFFFFF; }
.dm-core-dc { fill: var(--brand-navy); }
.dm-scale-bg { fill: rgba(255, 255, 255, .88); }
.dm-scale-bar { fill: none; stroke: var(--ink); stroke-width: 2; }
.dm-scale-text { fill: var(--ink); font: 600 12px var(--font-sans); }

/* ---------- Province and district pages ---------- */
.area-live { margin-bottom: var(--sp-3); }
.area-live:empty { display: none; }
.area-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--grid-gap); margin: 0 0 var(--sp-6); }
@media (min-width: 768px) { .area-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.area-stat { display: flex; flex-direction: column-reverse; gap: 2px; margin: 0; }
.area-stat dt { color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.area-stat dd { margin: 0; color: var(--ink); font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1.1; }
.area-districts { margin-bottom: var(--sp-8); }
.area-districts .cluster { --cluster: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.chip-n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--bg-tint); color: var(--ink); font-size: .75rem; font-weight: var(--fw-bold); }
.area-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8) var(--grid-gap); align-items: start; }
@media (min-width: 1024px) {
  .area-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .area-side { position: sticky; top: calc(var(--topbar-h-compact) + var(--header-h-compact) + var(--sp-5)); }
}
@media (min-width: 1600px) {
  .area-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .area-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.area-main { min-width: 0; }
.area-list-title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.area-group-title { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-h4); }
.area-group-title a { color: inherit; text-decoration: none; }
.area-group-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lmap-group-n { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: var(--r-pill); background: var(--bg-tint); color: var(--ink); font-size: .75rem; font-weight: var(--fw-bold); }
.area-side { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.area-side-title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.area-price-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.area-pcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.area-pcard b { color: var(--ink); font-size: 1.375rem; font-weight: var(--fw-bold); line-height: 1.1; }
.area-note { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
.area-near .cluster, .area-empty .cluster { --cluster: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.area-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-alt); }
.area-cta p { color: var(--ink-2); }
.area-b2b { font-size: var(--fs-small); }
.area-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-6) 0; }
.area-empty-title { color: var(--ink); font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.area-faq .acc { margin: 0; }

/* ---------- New stations page (views/new-page.js, redesigned 29.09.2026) ----------
   A calm listing page: one H2 size for every section, the band's RSS action, photo cards of the new
   stations and of the sockets added to existing stations beside their live map, or (with neither) a
   drawn empty state beside the network map and its totals, then the "Yakında" cards. No change log
   (owner, 05.10.2026). Maps keep neutral navy pins (CLAUDE.md: availability only on the map page and
   the home map). */
.newst-h2 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2.125rem); line-height: 1.15; }
.newst-page { padding-bottom: clamp(48px, 1.5rem + 3vw, 88px); }
.newst-rss { flex: none; }
.newst-rss .i { width: 18px; height: 18px; }

/* New stations: the H2 with the map link on its baseline, then the cards and the map side by side. */
.newst-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-6); }
.newst-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--grid-gap); }
@media (min-width: 1024px) { .newst-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (min-width: 1600px) { .newst-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.newst-main { min-width: 0; }
/* New sockets under the new stations: their own H2 in the same column, the map stays beside both. */
.newst-group { margin-top: clamp(40px, 1.5rem + 2vw, 64px); }
.newst-group .newst-h2 { margin-bottom: var(--sp-6); }

/* Cards on a six track grid: one per row on phones, two from 640 px, three from 1600 px. The server marks
   the last cards (new-page.js cardClass) so a row never ends with a lone narrow card: an odd last card
   (two columns) or a last single card (three columns) takes the whole row as a wide card, a last pair
   shares the row. */
.newst-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.newst-card { grid-column: span 6; min-width: 0; }
@media (min-width: 640px) {
  .newst-card { grid-column: span 3; }
  .newst-card--solo2 { grid-column: span 6; }
}
@media (min-width: 1600px) {
  .newst-card, .newst-card--solo2 { grid-column: span 2; }
  .newst-card--pair3 { grid-column: span 3; }
  .newst-card--solo3 { grid-column: span 6; }
  /* A shared last row: wider cards, so a flatter photo keeps the row as tall as the others. */
  .newst-card--pair3 .newst-card-media { aspect-ratio: 2 / 1; }
}
.newst-card-link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.newst-card-link:hover { border-color: var(--line-hover); box-shadow: var(--shadow-2); }
html.motion .newst-card-link:hover { transform: translate3d(0, -3px, 0); }
.newst-card-link:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.newst-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.newst-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
html.motion .newst-card-link:hover .newst-card-media img { transform: scale(1.03); }
.newst-card-media--art { background: var(--bg-alt); }
.newst-card-media--art img { object-fit: contain; object-position: 50% 100%; padding: var(--sp-4) var(--sp-4) 0; }
html.motion .newst-card-link:hover .newst-card-media--art img { transform: none; }
/* "Yeni" on the photo: a white pill (a layer over the picture, so it carries the rest shadow). */
.newst-card-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
}
.newst-card-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.newst-card-name { margin: 0; color: var(--ink); font-size: 1.1875rem; font-weight: var(--fw-bold); line-height: 1.3; }
.newst-card-link:hover .newst-card-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.newst-card-place { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.newst-card-place .i { flex: none; width: 16px; height: 16px; }
.newst-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
/* The day it joined the network sits on the card's foot, under a hairline, so feet line up in a row. */
.newst-card-date { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.newst-card-date .i { flex: none; width: 16px; height: 16px; color: var(--muted); }
/* Wide card (the last card alone in its row): photo on the left, text on the right. The photo fills the
   row the text sets (at least 240 px), whatever its own shape. */
@media (min-width: 640px) and (max-width: 1599.98px) {
  .newst-card--solo2 .newst-card-link { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; }
  .newst-card--solo2 .newst-card-media { aspect-ratio: auto; min-height: 240px; }
  .newst-card--solo2 .newst-card-media img { position: absolute; inset: 0; }
  .newst-card--solo2 .newst-card-body { padding: var(--sp-6); }
}
@media (min-width: 1600px) {
  .newst-card--solo3 .newst-card-link { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: none; }
  .newst-card--solo3 .newst-card-media { aspect-ratio: auto; min-height: 260px; }
  .newst-card--solo3 .newst-card-media img { position: absolute; inset: 0; }
  .newst-card--solo3 .newst-card-body { padding: var(--sp-6) var(--sp-8); }
}

/* The live map of the new stations: 4:3 under the cards, a sticky column beside them from 1024 px
   (as tall as the cards, at least 360 px, never taller than the screen under the header). */
.newst-side { min-width: 0; }
.newst-map .mini-map-static { cursor: default; }
@media (max-width: 639.98px) { .newst-side .newst-map { aspect-ratio: 1; } }
@media (min-width: 1024px) {
  .newst-side .newst-map {
    position: sticky;
    top: calc(var(--site-head-h) + var(--sp-4));
    height: clamp(360px, 100%, calc(100vh - var(--site-head-h) - var(--sp-8)));
    aspect-ratio: auto;
  }
}

/* Empty state: the drawing, H2, one sentence and two actions on a mist panel, the network map with its
   totals beside it (under it below 1024 px). Both columns end on the same line. */
.newst-empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 1024px) {
  .newst-empty { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .newst-empty--solo { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1600px) { .newst-empty { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.newst-empty-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
}
@media (min-width: 768px) { .newst-empty-main { padding: var(--sp-8) var(--sp-10) var(--sp-10); } }
@media (min-width: 1280px) { .newst-empty-main { padding: var(--sp-10) var(--sp-12) var(--sp-12); } }
/* The drawing's own transparent margin runs into the panel padding (negative margins). */
.newst-empty-art { width: min(100%, 300px); height: auto; margin: calc(var(--sp-4) * -1) 0 calc(var(--sp-2) * -1) -16px; }
@media (min-width: 1280px) { .newst-empty-art { width: min(100%, 340px); } }
.newst-empty-text { max-width: 42ch; color: var(--ink-2); font-size: var(--fs-intro); line-height: 1.5; }
.newst-empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
@media (max-width: 479.98px) { .newst-empty-actions .btn { flex: 1 1 100%; } }
.newst-net { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.newst-net .newst-map { flex: 1 1 auto; min-height: 300px; border-radius: 0; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .newst-net .newst-map { aspect-ratio: auto; } }
.newst-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.newst-total { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; min-width: 0; padding: var(--sp-4) var(--sp-3) var(--sp-5); text-align: center; }
.newst-total + .newst-total { border-left: 1px solid var(--line); }
.newst-total dt { color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.3; }
.newst-total dd { margin: 0; color: var(--ink); font-size: var(--fs-stat); font-weight: var(--fw-bold); font-stretch: var(--stretch-heading); line-height: 1.05; letter-spacing: -.01em; }

/* "Yakında" cards (this page and the locations.new-stations block): name, place, the estimated month
   on a navy pill (a date, not an action: never red), planned power chips and the admin's short text. */
.newst-soon { padding-block: clamp(48px, 1.5rem + 3vw, 88px); }
.newst-soon .newst-h2 { margin-bottom: var(--sp-6); }
.soon-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.soon-card-title { font-size: var(--fs-h3); }
.soon-card-meta { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--fs-small); }
.soon-card-meta .i { color: var(--muted); }
.soon-card-eta { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-top: var(--sp-1); padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--band); color: var(--on-band); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.soon-card-eta .i { width: 16px; height: 16px; }
.soon-card-tags { margin-top: var(--sp-1); }
.soon-card-desc { color: var(--muted); font-size: var(--fs-small); }

/* ---------- Blocks ---------- */
.loc-teaser-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--grid-gap); align-items: center; }
@media (min-width: 1024px) { .loc-teaser-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
@media (min-width: 1600px) { .loc-teaser-grid { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); } }
.loc-teaser-map { aspect-ratio: 2 / 1; }
.loc-teaser-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.loc-teaser-nums { color: var(--ink-2); }
.loc-teaser-nums b { color: var(--ink); font-size: 1.5rem; font-weight: var(--fw-bold); }
.loc-teaser-search { display: flex; gap: var(--sp-2); }
.loc-teaser-search input { flex: 1 1 auto; min-width: 0; height: var(--control-h); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 1rem; }
.loc-teaser-search input:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 0; border-color: var(--ink); }
.loc-teaser-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.loc-city { display: flex; flex-direction: column; gap: var(--sp-2); }
.loc-city-name { font-size: var(--fs-h4); }
.loc-city-name a { color: inherit; }
.loc-city-nums { color: var(--ink-2); font-size: var(--fs-small); }
.loc-city-nums b { color: var(--ink); font-size: 1.125rem; }
.loc-city .loc-tags { margin-top: 2px; }
.loc-city-districts { color: var(--muted); font-size: var(--fs-small); }
.loc-suggest-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
@media (min-width: 1024px) {
  .loc-suggest-in { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: var(--grid-gap); }
}
.loc-suggest-text { color: var(--ink-2); }
.section--navy .loc-suggest-text { color: var(--on-band-muted); }

/* ---------- Toast (copy, share) ---------- */
.loc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  max-width: min(92vw, 420px);
  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);
}
@media (min-width: 768px) { .loc-toast { bottom: 24px; } }