/* site.css: page chrome shared by every public page. Tariff strip, header, mega menu, mobile menu,
   footer, popup slot, mobile quick actions, error page (the cookie consent is in consent.css).
   docs/DESIGN-PLAN.md §3 and §4.11, full width per CLAUDE.md (gutters, no centred container). */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-2);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* Pages that do not exist yet: shown as text in development, never as a broken link. */
.is-pending { cursor: default; }

/* ---------- Tariff strip ---------- */
.tstrip {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: var(--band);
  color: var(--on-band);
  font-size: .8125rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.tstrip a { color: inherit; text-decoration: none; }
.tstrip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
}
.ts-main { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; flex: 1 1 auto; }
.ts-prices-link { display: flex; min-width: 0; flex: 1 1 auto; }
.ts-prices-link:hover .ts-prices { text-decoration: underline; text-underline-offset: 3px; }
.ts-prices { display: flex; align-items: center; gap: 0 var(--sp-2); min-width: 0; max-width: none; white-space: nowrap; overflow: hidden; }
.ts-prices b { color: var(--on-band); font-weight: var(--fw-bold); }
.ts-label { color: var(--on-band-muted); }
.ts-sep { color: rgba(255, 255, 255, .3); margin: 0 var(--sp-2); }
.ts-note, .ts-date { color: var(--on-band-muted); }
.ts-note::before, .ts-date::before { content: "·"; margin-right: var(--sp-2); color: rgba(255, 255, 255, .45); }
.ts-full, .ts-date, .ts-more, .ts-aside .ts-app, .ts-aside .ts-lang, .ts-phone span { display: none; }
.ts-chev { display: inline-flex; color: var(--on-band-muted); }
.ts-more { align-items: center; gap: 6px; color: var(--on-band); font-weight: var(--fw-semibold); white-space: nowrap; }
.ts-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ts-aside { display: flex; align-items: center; gap: var(--sp-5); flex: none; }
.ts-phone, .ts-app { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: var(--topbar-h); }
.ts-phone { color: var(--on-band); }
.ts-phone b { font-weight: var(--fw-bold); }
.ts-phone .i, .ts-app .i { color: var(--on-band-muted); }
.ts-phone:hover, .ts-app:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Phone: the phone number stays a call link, compact. */
@media (max-width: 767.98px) {
  .ts-phone b { font-weight: var(--fw-semibold); }
  .ts-phone { gap: 4px; }
  .ts-phone .i { display: none; }
}
/* Phones: the strip is the tariff line only (phone and language are in the mobile menu). */
@media (max-width: 767.98px) { .ts-aside { display: none; } }
@media (min-width: 768px) {
  .tstrip { font-size: .875rem; }
  .ts-phone span, .ts-aside .ts-lang { display: inline-flex; }
  .ts-chev { display: none; }
  .ts-more { display: inline-flex; }
}
@media (min-width: 1280px) {
  .ts-full { display: inline; }
  .ts-short { display: none; }
  .ts-aside .ts-app { display: inline-flex; }
}
@media (min-width: 1440px) { .ts-date { display: inline; } }

/* Language switch */
.lang { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); }
.lang-cur { color: inherit; }
.lang-sep { opacity: .45; }
.lang a { color: inherit; opacity: .8; text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.lang a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.tstrip .lang a { min-height: var(--topbar-h); }

/* ---------- Header: a floating liquid glass bar (DECISIONS 28.09.2026) ----------
   The tariff strip stays at the top of the document and scrolls away. The bar floats --hdr-top under
   it, inset by the page gutter, then sticks --hdr-top under the top of the screen while the page
   passes under it. The bar is see-through smoked glass with the white logo and white links on every
   page (the owner's electrip reference): what is under it shows through, blurred. Only the smoke
   density follows the page: site.js samples what is under the bar and sets data-tone="dark" (thin
   smoke over dark content) or "light" (denser smoke over light content, so white text still reads).
   The smoke colours are registered properties, so the change eases (200 ms).
   .site-header--overlay: the page opens with a dark full-bleed block (photo hero, page head band) that
   runs under the bar, so the header takes no room of its own.
   The material is drawn by pseudo layers of the bar, never by the bar itself, so the mega panel (a
   child of the bar) keeps its own backdrop blur. */
@property --g-smoke { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --g-smoke-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }

.site-header {
  /* Over light content: dense enough for white text (with its shadow) on white. */
  --g-smoke: rgba(20, 26, 38, .52);
  --g-smoke-2: rgba(20, 26, 38, .62);
  --g-filter: blur(16px) saturate(180%);
  --g-hover: rgba(255, 255, 255, .14);
  --g-solid: var(--band);
  --tone-dur: 200ms;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--hdr-top) var(--gutter);
  /* The header box is transparent: only the bar takes clicks, the page stays usable beside it. */
  pointer-events: none;
}
/* Over dark content (photo, navy bands, footer): thin smoke, the page shows through clearly. */
.site-header[data-tone="dark"] {
  --g-smoke: rgba(20, 26, 38, .32);
  --g-smoke-2: rgba(20, 26, 38, .42);
}
/* site.js adds hdr-ready after the first reading, so the first paint never animates. */
html.hdr-ready .site-header { transition: --g-smoke var(--tone-dur) var(--ease), --g-smoke-2 var(--tone-dur) var(--ease); }
.site-header--overlay { padding-bottom: 0; margin-bottom: calc(-1 * var(--site-head-h)); }
/* The full screen map does not scroll, so nothing passes under the bar: it floats on a navy strip
   (the continuation of the tariff strip) with thin smoke, never as a grey slab on white. */
.page--map .site-header { background: var(--band); --g-smoke: rgba(20, 26, 38, .32); --g-smoke-2: rgba(20, 26, 38, .42); }
/* Without JavaScript the smoke cannot follow the page: a bar over a dark block stays with it. */
html:not(.js) .site-header[data-tone="dark"] { position: relative; }

.hdr-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--hdr-h);
  padding: 0 var(--hdr-pad-x);
  border-radius: var(--hdr-r);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .4), 0 2px 6px -2px rgba(0, 0, 0, .18);
  pointer-events: auto;
}
/* The glass: what is behind is blurred and saturated, a smoke tint on top, a faint sheen at the top
   left and a highlight along the inner top edge. The only tint of the bar is this layer. */
.hdr-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(90% 160% at 14% -70%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(180deg, var(--g-smoke), var(--g-smoke-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 1px rgba(255, 255, 255, .1),
    inset 0 0 18px rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  pointer-events: none;
}
/* Liquid glass rim (Chromium; site.js draws #hdr-glass and sets lg-refract): what passes behind the
   edge, already blurred, bends like the thick edge of a lens (no sharp text in the rim). Never with less transparency or more
   contrast asked for. */
@media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
  html.lg-refract .hdr-bar::before {
    -webkit-backdrop-filter: var(--g-filter) url(#hdr-glass);
    backdrop-filter: var(--g-filter) url(#hdr-glass);
  }
}
/* The edge: a 1 px white rim lit from the top left, with a softer catch light at the bottom right. */
.hdr-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .2) 26%, rgba(255, 255, 255, .1) 58%, rgba(255, 255, 255, .34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.logo { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-xs); }
.logo img { height: 28px; width: auto; }
.logo-text { font-weight: var(--fw-bold); font-size: 1.25rem; color: #FFFFFF; }
.mob-head .logo-text { color: var(--ink); }

.nav { display: none; }
.hdr-actions { display: flex; gap: var(--sp-2); }
.hdr-actions--desktop { display: none; }
.hdr-short { display: none; }
.menu-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-size: .9375rem;
  transition: background-color var(--dur-1) var(--ease);
}
.menu-btn:hover { background: var(--bg-alt); }
.hdr-bar .menu-btn { min-height: 40px; margin-right: -4px; color: #FFFFFF; }
.hdr-bar .menu-btn:hover { background: var(--g-hover); }
/* Focus rings are white on the glass (the mega panel is dark glass too). */
.hdr-bar :focus-visible { outline-color: var(--focus-ring-on-band); }
/* Pills in the bar, solid for clarity; the navy one gets a light hairline on the glass. */
.hdr-bar .hdr-btn { border-radius: var(--r-pill); padding: 0 18px; text-shadow: none; }
.hdr-bar .hdr-btn.btn--secondary { --btn-bd: rgba(255, 255, 255, .28); }

@media (min-width: 1024px) {
  /* Logo left, the menu right after it, the two buttons on the right. */
  .logo img { height: 34px; }
  .menu-btn { display: none; }
  .nav { display: block; margin-left: clamp(24px, 2.8vw, 56px); }
  .nav-list { display: flex; align-items: center; gap: 2px; }
  .hdr-actions--desktop { display: flex; margin-left: auto; }
}
/* 1024-1279 px: short labels; the full one stays for screen readers (the short copy is aria-hidden). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-item .nav-full, .hdr-actions--desktop .hdr-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav-item .nav-short { display: inline-flex; }
  .hdr-actions--desktop .hdr-short { display: inline; }
  .nav-link { padding: 0 10px; }
  .hdr-bar .hdr-btn { padding: 0 14px; }
}
@media (min-width: 1280px) {
  .logo img { height: 36px; }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: #FFFFFF;
  font-size: .9375rem;
  font-weight: var(--fw-ui);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background-color var(--dur-1) var(--ease);
}
.nav-link:hover, .nav-btn[aria-expanded="true"] { background: var(--g-hover); }
.nav-link.is-pending:hover { background: transparent; }
.nav-chev { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.nav-btn[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
/* The label keeps the width of its bold form (data-t), so marking the active page moves nothing. */
.nav-full { display: inline-flex; flex-direction: column; align-items: center; }
.nav-short { display: none; flex-direction: column; align-items: center; }
.nav-full::after, .nav-short::after {
  content: attr(data-t);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--fw-bold);
  pointer-events: none;
  user-select: none;
}
/* Active page: bold, with a short red line under the label. */
.nav-link[aria-current="page"], .nav-item.is-active > .nav-link { font-weight: var(--fw-bold); }
.nav-link[aria-current="page"]::after, .nav-item.is-active > .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-link[aria-current="page"]::after, .nav-item.is-active > .nav-link::after { left: 10px; right: 10px; }
}

/* ---------- Mega menu: the same smoked glass under the bar, denser for reading, same width, corner
   and edge; white text (the panel carries on-band, so the shared light-on-navy helpers apply) ---------- */
.mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: var(--z-mega);
  padding: var(--sp-6);
  border-radius: var(--hdr-r);
  color: var(--on-band-muted);
  text-shadow: none;
  background: linear-gradient(180deg, rgba(20, 26, 38, .8), rgba(20, 26, 38, .86));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .14), 0 28px 56px -18px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.mega.is-open { opacity: 1; transform: none; }

/* No blur, less transparency or more contrast asked for: solid navy bar and panel with white text,
   a stronger edge. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr-bar::before { background: var(--g-solid); }
  .mega { background: var(--band); }
}
@media (prefers-reduced-transparency: reduce) {
  .hdr-bar::before { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mega { background: var(--band); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .hdr-bar { text-shadow: none; }
  .hdr-bar::before { background: var(--band-deep); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hdr-bar::after { padding: 2px; background: #FFFFFF; }
  .mega { background: var(--band-deep); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 2px #FFFFFF, var(--shadow-3); }
}
@media (forced-colors: active) {
  .hdr-bar, .mega { border: 1px solid CanvasText; }
}

/* One rhythm in every panel (owner 29.09.2026: "menüler arasındaki boşluklar tüm menülerde aynı"): 3
   equal columns (two for the links, one for the card), 4 from 1600 px (three for the links); a 24 px
   gap between the link tiles in both directions, the same as between the columns. The links never
   stretch: their rows sit at the top, the chip row follows at a fixed distance, and the card keeps its
   own height (a taller card only lengthens the empty third row under the chips). Source order is links,
   chips, card, so the keyboard reads the left side first; every part is placed explicitly. */
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--sp-6);
  align-items: start;
}
.mm-items {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--mm-rows, 3), auto);
  grid-auto-flow: column;
  gap: var(--sp-6);
}
.mega-grid--no-card .mm-items { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.mm-xl-only { display: none; }
.mm-foot { grid-column: 1 / span 2; grid-row: 2; }
.mega-grid--no-card .mm-foot { grid-column: 1 / -1; }
/* The network panel: the map card is exactly as tall as the links beside it (its own size does not count,
   the map scales to fit) and the province chips run the full width under both. */
.mega-grid--map .mm-foot { grid-column: 1 / -1; }
@media (min-width: 1600px) {
  .mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-items { grid-column: 1 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--mm-rows-xl, 2), auto); }
  .mega-grid--no-card .mm-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-xl-only { display: block; }
  .mm-list--card-top { display: none; }
  .mm-foot { grid-column: 1 / span 3; }
  /* Two link rows are short for the map: the card also takes the chip row's height. */
  .mega-grid--map .mm-foot { grid-column: 1 / span 3; }
}
/* A link: the icon in a soft square of the glass, the title and one line of text. Hover and keyboard
   focus light the row and turn the square white with a navy icon; the arrow slides in. */
.mm-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: var(--sp-3) var(--sp-4) 14px var(--sp-3);
  border-radius: var(--r-md);
  color: var(--on-band);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
a.mm-item:hover, a.mm-item:focus-visible { background: rgba(255, 255, 255, .08); }
.mm-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: var(--on-band);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.mm-ico .i { width: 22px; height: 22px; stroke-width: 1.7; }
a.mm-item:hover .mm-ico, a.mm-item:focus-visible .mm-ico { background: #FFFFFF; box-shadow: none; color: var(--band); }
.mm-item.is-pending .mm-ico { opacity: .55; }
.mm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.mm-title { display: inline-flex; align-items: center; gap: 6px; font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.3; }
.mm-arrow { color: var(--on-band); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
a.mm-item:hover .mm-arrow, a.mm-item:focus-visible .mm-arrow { opacity: 1; transform: none; }
/* Every link keeps room for two lines of text (owner 05.10.2026): rows are the same height in all four
   menus whether a text runs to one line or two; a longer text stops at two lines. */
.mm-desc { color: var(--on-band-muted); font-size: .9375rem; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.mm-item[aria-current="page"] .mm-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.mm-col-card { grid-column: 3; grid-row: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.mega-grid--map .mm-col-card { grid-row: 1; align-self: stretch; contain: size; }
@media (min-width: 1600px) {
  .mm-col-card { grid-column: 4; }
  .mega-grid--map .mm-col-card { grid-row: 1 / span 2; }
}
.mm-list--card-top { margin-bottom: var(--sp-4); }

.mm-card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-md);
  /* A lighter pane of the same glass, so it stands out on the dark panel. */
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: var(--on-band-muted);
  text-decoration: none;
  overflow: hidden;
}
/* Stripe corner from the logo's bar rhythm (the only decorative stripe while the panel is open). */
.mm-card::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 28px;
  pointer-events: none;
  --c: var(--on-band-line);
  background:
    linear-gradient(var(--c), var(--c)) right 0 / 48px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) right 6px / 40px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) right 12px / 32px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) right 18px / 24px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) right 24px / 16px 4px no-repeat;
}
.mm-card-title { color: var(--on-band); font-size: 1.125rem; font-weight: var(--fw-title); line-height: 1.3; padding-right: 56px; }
.mm-card-text { font-size: .9375rem; line-height: 1.45; max-width: 36ch; }
.mm-card-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); }
.mm-card-foot .mm-card-cta, .mm-card-foot .mm-card-phone { margin-top: 0; }
.mm-card-cta { margin-top: auto; }
.mm-card--survey .mm-card-cta { margin-top: var(--sp-4); }
.mm-card-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-3); color: var(--on-band); font-size: 1.25rem; font-weight: var(--fw-bold); text-decoration: none; }
.mm-card-phone:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Small text on the glass stays on the muted tone: 4.5:1 even where the panel lies over a white page. */
.mm-card-meta { font-size: .8125rem; color: var(--on-band-muted); }

/* The network panel's card is only the dot map of the network (lib/netmap.js), and the whole card is one
   link to the map page (owner 29.09.2026). Türkiye is a faint dot grid, the station cells are white:
   never a status colour (DECISIONS 28.09.2026). Hover and focus lighten the pane and the grid, and the
   corner arrow steps out. */
.mm-card--map { justify-content: center; align-items: stretch; padding: var(--sp-5) var(--sp-4); transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.mm-card--map::after { display: none; }
a.mm-card--map:hover, a.mm-card--map:focus-visible { background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.mm-netmap { display: block; flex: 1 1 0; width: 100%; min-height: 0; }
.mm-netmap-land { fill: none; stroke: #FFFFFF; stroke-opacity: .26; stroke-linecap: round; transition: stroke-opacity var(--dur-2) var(--ease); }
a.mm-card--map:hover .mm-netmap-land, a.mm-card--map:focus-visible .mm-netmap-land { stroke-opacity: .36; }
.mm-netmap-site { fill: #FFFFFF; transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
/* A province chip under the pointer or in focus lights its own cells and dims the rest (site.js). */
.mm-netmap.is-focus .mm-netmap-site { opacity: .3; }
.mm-netmap.is-focus .mm-netmap-site.is-on { opacity: 1; transform: scale(1.35); }
.mm-map-go { position: absolute; top: 12px; right: 12px; color: var(--on-band); opacity: .72; transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
a.mm-card--map:hover .mm-map-go, a.mm-card--map:focus-visible .mm-map-go { opacity: 1; transform: translateX(3px); }
/* Opening the panel lights the network from its busiest cell outwards (--d from lib/netmap.js). */
@keyframes mm-site-in { from { opacity: 0; transform: scale(.25); } }
html.motion .mega.is-open .mm-netmap-site { animation: mm-site-in 420ms var(--ease-out, ease-out) var(--d, 0ms) backwards; }
@media (forced-colors: active) {
  .mm-netmap-land { stroke: CanvasText; }
  .mm-netmap-site { fill: CanvasText; }
}
.mm-app-row { display: flex; align-items: center; gap: var(--sp-4); margin-top: auto; padding-top: var(--sp-2); flex-wrap: wrap; }
.qr-tile { display: inline-flex; padding: 8px; border-radius: var(--r-sm); background: #FFFFFF; flex: none; }
.qr-tile img { width: 96px; height: 96px; }
/* Brands without an app QR code: the phone drawing (app-phone.svg) stands in its slot. */
.mm-app-art { width: 128px; flex: none; }
.mm-badges { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.mm-badges img { height: 40px; }
/* App card with the phone (profile app.screen): the real app screen rises from the lower right corner,
   title, text, QR and badges stay on the left as one block, so the card has no empty middle
   (owner 29.09.2026). */
.mm-card--phone { min-height: 300px; }
.mm-card--phone::after { display: none; }
/* Left column: title, text, then the QR code with the two store badges under it; right: the phone. */
.mm-card--phone > :not(.mm-app-phone) { position: relative; z-index: 1; max-width: 54%; }
.mm-card--phone .mm-card-title { padding-right: 0; }
.mm-card--phone .mm-app-row { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--sp-3); padding-top: var(--sp-4); }
.mm-card--phone .qr-tile { padding: 6px; }
.mm-card--phone .qr-tile img { width: 88px; height: 88px; }
.mm-card--phone .mm-badges img { height: 36px; }
.mm-app-phone {
  position: absolute;
  right: -7%;
  bottom: -12%;
  z-index: 0;
  width: 62%;
  max-width: 290px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .4));
}

.mm-card--post { gap: var(--sp-3); }
.mm-card--post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); }
.mm-card--post:hover .mm-card-title { text-decoration: underline; text-underline-offset: 3px; }
.mm-card--post::after { display: none; }

/* The row under the links: chips on the glass (translucent white, the current page filled white). The
   network panel's provinces carry their location count in a small inner pill. */
.mm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4) 0 0 var(--sp-3);
  border-top: 1px solid var(--on-band-line);
}
.mm-foot-label { color: var(--on-band-muted); font-size: .875rem; font-weight: var(--fw-semibold); }
.mm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: var(--on-band);
  font-size: .875rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mm-chip:has(.mm-chip-n) { padding-right: 5px; }
a.mm-chip:hover, a.mm-chip:focus-visible { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.mm-chip[aria-current="page"] { background: #FFFFFF; box-shadow: none; color: var(--band); }
.mm-chip.is-pending { color: var(--on-band-muted); }
.mm-chip-n {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
}
.mm-chip[aria-current="page"] .mm-chip-n { background: var(--bg-tint); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(18, 24, 38, .16);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}
.nav-scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------- Page head band: the dark top of every inner page ----------
   <section class="page-head" data-header-tone="dark"><div class="page-head-inner">breadcrumb (any crumb
   markup), <h1 class="page-head-title">, optional <div class="page-head-aside"> (stepper, tabs,
   actions)</div></section>, or ctx.site.ui.pageHead(). Full bleed navy with the city drawing along the
   bottom; as the page's first block the glass bar floats over its top (the layout lays the header over
   a first block marked data-header-tone="dark"). One H1, no subtitle, no eyebrow. */
.page-head {
  /* The drawing is scaled down as a whole (owner 29.09.2026: the band took too much room) and stays
     centred on the bottom edge, cropped at the sides on narrow screens. */
  --page-head-art: url("/assets/illustrations/backdrop-city-narrow.svg");
  --page-head-art-size: 720px 288px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* A strip of the drawing stays visible under the title: 84 px on phones, 72-80 px from 768 px. */
  padding: var(--sp-8) var(--gutter) 84px;
  background: var(--page-head-art) 50% 100% / var(--page-head-art-size) no-repeat, var(--band);
  color: var(--on-band-muted);
}
/* As the first block the glass bar lies over the band: the path and the title start under it. Compact
   heights including the bar (owner 29.09.2026: "asıl içeriğe yer kalsın"): at least 220 px on phones (a
   third title line grows it), 228 px from 768, 236 px from 1280, 248 px from 1600. */
.site-header--overlay ~ main .page-head { padding-top: calc(var(--site-head-h) + var(--sp-3)); min-height: 220px; }
@media (min-width: 768px) {
  .page-head { --page-head-art: url("/assets/illustrations/backdrop-city.svg"); --page-head-art-size: 1680px 294px; padding-bottom: 72px; }
  .site-header--overlay ~ main .page-head { padding-top: calc(var(--site-head-h) + var(--sp-4)); min-height: 228px; }
}
@media (min-width: 1280px) {
  .page-head { padding-bottom: 76px; }
  .site-header--overlay ~ main .page-head { min-height: 236px; }
}
@media (min-width: 1600px) {
  .page-head { --page-head-art-size: 1920px 336px; padding-bottom: 80px; }
  .site-header--overlay ~ main .page-head { min-height: 248px; }
}
.page-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-3) var(--grid-gap);
}
.page-head-title, .page-head h1 {
  margin: 0;
  max-width: none;
  color: var(--on-band);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  overflow-wrap: anywhere;
}
.page-head-aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
@media (min-width: 1024px) {
  .page-head-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .page-head-inner > * { grid-column: 1; }
  .page-head-inner > .page-head-aside { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; }
  .page-head-inner:has(> nav) > .page-head-aside { grid-row: 1 / span 2; }
}
/* Breadcrumb of any module inside the band: small and light on the navy. */
.page-head-inner > nav { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.4; }
.page-head-inner > nav :is(ol, ul) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.page-head-inner > nav li { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--on-band-muted); }
.page-head-inner > nav li::before, .page-head-inner > nav li::after, .page-head-inner > nav .i { color: var(--on-band-subtle); }
.page-head-inner > nav a { color: var(--on-band-muted); text-decoration: none; }
.page-head-inner > nav a:hover { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; }
.page-head :focus-visible { outline-color: var(--focus-ring-on-band); }
/* Controls of any module in the aside read on the navy: light buttons, chips and links. */
.page-head .btn--secondary { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bg-hover: var(--bg-tint); --btn-bg-press: var(--line); }
.page-head .btn--outline { --btn-fg: var(--on-band); --btn-bd: var(--on-band); --btn-bg-hover: var(--band-raised); }
.page-head .chip { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: var(--on-band); }
.page-head a.chip:hover { border-color: var(--on-band); background: rgba(255, 255, 255, .14); }
.page-head .chip[aria-current="true"], .page-head .chip[aria-current="page"] { border-color: var(--on-band); background: var(--on-band); color: var(--ink); }
.page-head .link { color: var(--on-band); }
@media print {
  .page-head { min-height: 0 !important; padding: 0 0 var(--sp-4) !important; background: none !important; color: #000; }
  .page-head-title, .page-head h1 { color: #000 !important; }
  .page-head-inner > nav, .page-head-aside { display: none !important; }
}
/* ---------- Mobile menu (below 1024 px) ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu:not([hidden]) { animation: mm-in var(--dur-3) var(--ease); }
@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mob-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.mob-body { display: flex; flex-direction: column; gap: var(--sp-5); padding-block: var(--sp-5) var(--sp-8); }
.hdr-actions--mobile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.hdr-actions--mobile .btn { min-height: var(--control-h-lg); white-space: normal; text-align: left; justify-content: space-between; }
.hdr-actions--mobile .hdr-full { display: inline; }
.hdr-actions--mobile .hdr-short { display: none; }
.mob-list { border-top: 1px solid var(--line); }
.mob-row { border-bottom: 1px solid var(--line); }
.mob-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.mob-link::-webkit-details-marker { display: none; }
.mob-link > span:first-child { flex: 1 1 auto; }
.mob-price { color: var(--muted); font-size: .875rem; font-weight: var(--fw-medium); flex: none; }
.mob-chev { transition: transform var(--dur-2) var(--ease); }
.mob-acc[open] .mob-chev { transform: rotate(180deg); }
.mob-sub { display: flex; flex-direction: column; padding: 0 0 var(--sp-3); }
.mob-sub-link { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-2); border-radius: var(--r-sm); color: var(--ink); font-weight: var(--fw-medium); text-decoration: none; }
a.mob-sub-link:hover { background: var(--bg-alt); }
.mob-sub-link.is-pending { color: var(--muted); }
.mob-foot { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.mob-call { justify-content: flex-start; }
.mob-lang { color: var(--ink); }
html.menu-open { overflow: hidden; }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--band);
  color: var(--on-band-muted);
  font-size: .9375rem;
}
/* Three thin stripes on the top edge (logo bar rhythm). */
.site-footer::before {
  content: "";
  display: block;
  height: 8px;
  background:
    linear-gradient(var(--on-band-line), var(--on-band-line)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--on-band-line), var(--on-band-line)) 0 3px / 100% 2px no-repeat,
    linear-gradient(var(--on-band-line), var(--on-band-line)) 0 6px / 100% 2px no-repeat;
}
.site-footer a { color: var(--on-band-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; }
.ft-top {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-12) var(--sp-8);
}
.ft-logo { display: inline-flex; }
.ft-logo img { height: 48px; width: auto; }
.ft-brand { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.ft-descriptor { color: var(--on-band); max-width: 34ch; line-height: 1.5; }
/* EPDK licence number under the descriptor (owner 29.09.2026): a quiet fact line, not a badge. */
.ft-license { display: inline-flex; align-items: center; gap: 8px; color: var(--on-band-muted); font-size: var(--fs-small); }
.ft-license .i { flex: none; color: var(--on-band-subtle); }
.ft-slogan { color: var(--on-band-subtle); font-size: .875rem; }
.ft-badges { margin-top: var(--sp-2); }
.ft-badges img { height: 40px; }
.ft-cols { display: grid; gap: 0; }
.ft-col { border-top: 1px solid var(--on-band-line); }
.ft-col:last-child { border-bottom: 1px solid var(--on-band-line); }
.ft-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  color: var(--on-band);
  font-size: .875rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.ft-title::-webkit-details-marker { display: none; }
.ft-chev { transition: transform var(--dur-2) var(--ease); }
.ft-col[open] .ft-chev { transform: rotate(180deg); }
.ft-links { display: flex; flex-direction: column; padding-bottom: var(--sp-3); }
.ft-link { display: flex; align-items: center; min-height: 44px; }
.ft-link.is-pending { color: var(--on-band-subtle); }
.ft-title--static { cursor: default; min-height: 0; margin-bottom: var(--sp-2); }
.ft-contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.site-footer .ft-phone { color: var(--on-band); font-size: 2rem; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -.01em; }
.ft-mails { display: flex; flex-direction: column; gap: 2px; }
.ft-mails a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
/* The first icon lines up with the mail icons above (tap box wider than the 24 px glyph). */
.ft-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); margin-left: calc((24px - var(--tap)) / 2); }
.ft-social a { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r-sm); color: var(--on-band); }
.ft-social a:hover { background: var(--band-raised); }

/* Bottom bar: one calm row from 1280 px (copyright left; legal links, cookie preferences and language
   right). Below that a tidy stack: legal links, a hairline, then copyright left and language right. */
.ft-bottom { background: var(--band-deep); color: var(--on-band-subtle); font-size: var(--fs-small); }
.ft-bottom-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "legal legal" "copy lang";
  align-items: center;
  column-gap: var(--sp-6);
  padding-block: var(--sp-2);
}
.ft-legal { grid-area: legal; padding-block: var(--sp-2); border-bottom: 1px solid var(--on-band-line); }
.ft-legal ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); margin: 0; padding: 0; list-style: none; }
.ft-legal-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-band-muted); line-height: 1.3; text-align: left; }
.ft-legal-link.is-pending { color: var(--on-band-subtle); }
.ft-cookie-btn { padding: 0; border: 0; background: none; cursor: pointer; }
.ft-cookie-btn:hover { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; }
.ft-copy { grid-area: copy; color: var(--on-band-subtle); }
.ft-lang { grid-area: lang; color: var(--on-band); }

@media (min-width: 768px) {
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .ft-col, .ft-col:last-child { border: 0; }
  .ft-title { min-height: 0; margin-bottom: var(--sp-3); cursor: default; pointer-events: none; }
  .ft-chev { display: none; }
  .ft-link { min-height: 36px; }
  .ft-legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); }
}
@media (min-width: 1024px) {
  .ft-top { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--grid-gap); padding-block: var(--sp-16) var(--sp-12); }
  .ft-logo img { height: 56px; }
}
@media (min-width: 1280px) {
  .ft-bottom-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "copy legal lang"; column-gap: var(--sp-8); padding-block: var(--sp-3); }
  .ft-legal { padding-block: 0; border-bottom: 0; }
  .ft-legal ul { justify-content: flex-end; }
  .ft-lang::before { content: ""; width: 1px; height: 16px; margin-right: var(--sp-6); background: var(--on-band-line); }
}
@media (min-width: 1600px) {
  .ft-top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr) minmax(0, 4fr); }
}

/* Cookie consent banner and preferences dialog: consent.css. */

/* ---------- Popup slot (filled by the campaigns module) ---------- */
.popup-slot:empty { display: none; }

/* ---------- Mobile quick actions (home, below 768 px) ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-cta);
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.sticky-cta-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.sticky-cta .btn { width: 100%; }
@media (min-width: 768px) { .sticky-cta { display: none !important; } }

/* ---------- Error pages ---------- */
.err-in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding-block: var(--sp-8); }
.err-code {
  color: var(--line-hover);
  font-size: clamp(4rem, 3rem + 6vw, 8rem);
  font-weight: var(--fw-bold);
  font-stretch: var(--stretch-display);
  line-height: 1;
  letter-spacing: -.02em;
}
.err .cluster { --cluster: var(--sp-2); }
/* The drawing (lib/illustrations.js) sits in the left column from 768 px; on phones below the message. */
.err-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: var(--grid-gap); }
.err-art { display: flex; justify-content: center; padding-bottom: var(--sp-8); }
.err-art .il { width: min(100%, 360px); }
@media (min-width: 768px) {
  .err-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .err-art { order: -1; padding-bottom: 0; }
  .err-art .il { width: min(100%, 600px); }
}

/* ---------- Drawings (public/assets/illustrations, lib/illustrations.js) ---------- */
.il { display: block; max-width: 100%; height: auto; }