/* ==========================================================================
   Delta Motor — Yerlesim: olcu rayi, baslik, kapsayici, bolum, alt bilgi
   ========================================================================== */

/* --- Kapsayici ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.wrap--narrow { max-width: 56rem; }

/* Ray genisligi kadar iceri kaydirilan govde */
.shell {
  padding-left: 0;
  transition: padding-left var(--d-base) var(--e-out);
}

@media (min-width: 1080px) {
  .shell { padding-left: var(--rail-w); }

  /* Olcu rayi olmayan sayfalar (randevu, iletisim) */
  .shell--norail { padding-left: 0; }
}

/* --- Bolum ritmi -------------------------------------------------------- */

.section {
  padding-block: var(--sec-y);
  position: relative;
}

.section--flush-top { padding-top: 0; }
/* Normal bolumden DAHA DAR olmali; `--sec-y` kucultuldugu icin eski deger
   (57px) artik normalin ustunde kaliyordu, orantili indirildi. */
.section--tight { padding-block: clamp(1rem, 1.6vw, 1.6rem); }

.section--band {
  background: var(--c-surface);
  border-block: 1px solid var(--c-line);
}

.section--ink {
  background: var(--c-invert-bg);
  color: var(--c-invert-fg);
  border-block: 1px solid var(--c-line);
}

/* Ters panelde metin tonlari */
.section--ink .lead,
.section--ink .body { color: var(--c-invert-mute); }

.section--ink .label { color: var(--c-invert-faint); }

.section--ink .arrow-link {
  color: var(--c-invert-fg);
  border-color: var(--c-invert-edge);
}

.section--ink .arrow-link:hover {
  color: var(--c-invert-fg);
  border-color: var(--c-invert-fg);
}

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 46rem;
  margin-bottom: var(--s-7);
}

/* 375px'te sayfayi 26px yatay kaydiran tasmanin duzeltmesi (olculdu:
   servis.html "SERVIS RANDEVUNUZDAN ONCE" basligi).
   Grid ogesi varsayilan `min-width: auto` ile MIN-CONTENT'ten daha dar
   olamaz; basliktaki tek bir uzun kelime (382px) kabini (350px) tasirdi.
   `overflow-wrap: break-word` bunu COZMEZ — sarma firsati verir ama
   ogenin min-content katkisini DUSURMEZ. Cozum kabin kendisinde:
   `min-width: 0` ogeye kucululme izni verir, kelime de sarar. */
.section-head > * {
  min-width: 0;
}

.section-head--wide { max-width: 60rem; }

.section-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 860px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-6);
  }
}

/* Sayfa basi (.page-head) kaldirildi — servis, hakkimizda ve iletisim artik
   ortak `.banner` bilesenini kullaniyor (components.css). Bkz. R21. */

/* --- Olcu rayi (imza ogesi) --------------------------------------------
   Sayfanin sol kenarinda sabit gosterge. Kaydirma ilerlemesini doldurur,
   bolum duraklarini mono etiketle isaretler. 1080px alti gizli.
   ----------------------------------------------------------------------- */

.rail {
  display: none;
}

@media (min-width: 1080px) {
  .rail {
    display: block;
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--rail-w);
    z-index: var(--z-rail);
    background: var(--c-bg);
    border-right: 1px solid var(--c-line);
    pointer-events: none;
  }
}

/* Dikey iz — rayin merkez cizgisi */
.rail__track {
  position: absolute;
  top: calc(var(--header-h) + var(--s-6));
  bottom: var(--s-8);
  left: 50%;
  width: 1px;
  background: var(--c-line);
  transform: translateX(-50%);
}

/* Dolgu — kaydirma ilerlemesi, JS --progress (0-1) yazar */
.rail__fill {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--progress, 0) * 100%);
  background: var(--c-blue);
  transition: height 80ms linear;
}

/* Kaydirmayla asagi akan arac ikonu (kullanici istegi 2026-09-02).
   Dikey konum `--progress` (0..1) ile dogrudan orantili — ayni degeri
   `.rail__fill` yuksekligi de kullaniyor, boylece ikon her zaman dolgunun
   ucunda durur. Gecis `.rail__fill` ile AYNI: 80ms linear. Ivmeli bir
   egri binseydi ikon parmagin gerisinde kalirdi (rayin kendi kuralinda
   da ayni gerekce yazili).
   Ray izi 1px genisliginde; ikon `translate(-50%, -50%)` ile izin
   uzerine ortalanir ve tasan kismi gorunur kalir (izde `overflow` yok). */
.rail__vehicle {
  position: absolute;
  left: 50%;
  top: calc(var(--progress, 0) * 100%);
  /* 30px -> 48px (kullanici istegi 2026-09-02). Ust sinir rayin
     genisligi: `--rail-w` 4,5rem = 72px, ikon izin uzerinde ortalandigi
     icin her yana 12px pay kaliyor. Daha buyutulecekse km etiketleriyle
     ortusme kontrol edilmeli — etiketler izin solunda dikey duruyor. */
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  color: var(--c-red);
  transition: top 80ms linear;
}

/* Ikon DIKEY duruyor (kullanici istegi): ray dikey bir yol ve arac onun
   uzerinde asagi iniyor; yandan gorunum yatay kalinca arac yolun uzerinde
   degil yaninda duruyor gibi okunuyordu. 90 derece dondurulunce burun
   ilerleme yonune, yani asagi bakar. Cizimleri yeniden cizmek yerine
   dondurmek yeterli — SVG'ler yandan profil. */
.rail__vehicle-ikon {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

/* `display: block` tarayicinin `[hidden] { display: none }` kuralini
   EZIYOR (sinif secicisi daha guclu): iki ikon birden gorunuyordu,
   olculdu. Gizleme `hidden` nitelikiyle yapildigi icin kural burada
   acikca geri veriliyor. */
.rail__vehicle-ikon[hidden] {
  display: none;
}

/* Kullanicinin gonderdigi scooter silueti PNG olarak geldi; ray ikonu
   KIRMIZI olmali, PNG ise siyah. Bu yuzden gorsel `<img>` degil MASKE
   olarak kullaniliyor: seffaf olmayan pikseller `currentColor` ile
   boyanir, yani ikon rayin renk degiskenine uyar (tema degisse de).
   Gorselin alfa kanali var (RGBA), maske icin sart olan da bu. */
.rail__vehicle-ikon--maske {
  background-color: currentColor;
  -webkit-mask: url('../../public/ikon/maxi-scooter.png') center / contain no-repeat;
  mask: url('../../public/ikon/maxi-scooter.png') center / contain no-repeat;
}

.rail__vehicle-ikon--mt {
  -webkit-mask-image: url('../../public/ikon/racing-motor.png');
  mask-image: url('../../public/ikon/racing-motor.png');
}

/* Hareket azaltmada ikon zipla­madan yerine gider */
@media (prefers-reduced-motion: reduce) {
  .rail__vehicle { transition: none; }
}

/* Bolum duraklari */
/* Duraklar izle ayni dikey araligi paylasir, yoksa baslik altinda kalirlar */
.rail__stops {
  position: absolute;
  top: calc(var(--header-h) + var(--s-6));
  bottom: var(--s-8);
  inset-inline: 0;
  pointer-events: none;
}

.rail-stop {
  position: absolute;
  left: 50%;
  top: calc(var(--at, 0) * 100%);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.rail-stop__dot {
  width: 7px;
  height: 7px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transition: background var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.rail-stop__name {
  position: absolute;
  top: 50%;
  left: calc(50% + 0.8rem);
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink-faint);
  opacity: 0;
  transform: translateY(-50%) translateX(-0.25rem);
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}

/* Kilometre etiketi — ray bir zaman cizelgesine dondugunde kullanilir.
   Bolum adinin AKSINE her zaman gorunur: bir cizelge butun duraklarini ayni
   anda gostermeli, yoksa olcek okunmaz. Adin KARSI tarafinda durur (ad sagda,
   km solda) — 72px'lik ray sutununda ikisi yan yana sigmiyor. */
.rail-stop__km {
  position: absolute;
  top: 50%;
  right: calc(50% + 0.8rem);
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--c-ink-faint);
  transform: translateY(-50%);
  transition: color var(--d-base) var(--e-out);
}

.rail-stop.is-active .rail-stop__km { color: var(--c-ink); }
.rail-stop.is-passed .rail-stop__km { color: var(--c-blue); }

.rail-stop.is-active .rail-stop__dot {
  background: var(--c-red);
  border-color: var(--c-red);
  transform: scale(1.35);
}

.rail-stop.is-active .rail-stop__name {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  color: var(--c-ink);
}

.rail-stop.is-passed .rail-stop__dot {
  background: var(--c-blue);
  border-color: var(--c-blue);
}

/* Alt okuma — yuzde gostergesi */
/* Rayin en altindaki kilometre okumasi VURGULU (kullanici istegi
   2026-09-02): rayin tasidigi tek gercek sayi bu, soluk gri kalinca goze
   girmiyordu. Kirmizi + buyuk punto + kalin.
   OLCULDU — punto rayin genisligiyle SINIRLI: `--rail-w` 4,5rem = 72px.
   13px denendi, "24.000 KM" 75px cikti ve rayi 3px tasirdi (bakim
   sayfasinda motosiklet olcegi tam bu okumaya ulasiyor). 12px + 0,02em
   harf araliginda ayni okuma 67px: 5px pay kaliyor. Punto buyutulecekse
   EN UZUN OKUMA bu kutuda yeniden olculmeli — "0 KM" ile bakmak yaniltir. */
.rail__readout {
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  transform: translateX(-50%);
  /* `left: 50%` sonrasi kullanilabilir genislik yalnizca 36px kaliyor; km
     okumasi ("20.000 KM", tek satirda 61px) ikiye bolunuyordu. Ray 72px
     oldugu icin tek satir rahat siginiyor. */
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-red);
  font-variant-numeric: tabular-nums;
}

/* --- Baslik ------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-veil);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}

.header.is-stuck {
  border-bottom-color: var(--c-line);
  background: var(--c-veil-solid);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}

/* Ikon dugmeleri ve CTA — logonun ve menunun sagi */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

/* Logo — Delta ucgeni + kelime isareti */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

/* Bosluk itici, olcuye gore YER DEGISTIRIR.
   Mobilde hamburger logonun hemen saginda durur (kullanici karari,
   2026-09-01: panel soldan aciliyor, dugme de o tarafta olmali), bu yuzden
   itici DUGMENIN saginda: `logo | hamburger ....... tema`.
   >=1024px'te hamburger gizlenir; itici logoya doner ve masaustu duzeni
   (logo ....... nav + eylemler) degismeden kalir. Itici tek bir ogede
   durmali — ikisine birden verilirse bosluk ortadan bolunur. */
.burger { margin-right: auto; }

@media (min-width: 1024px) {
  .brand { margin-right: auto; }
}

/* Logo — tek oge, tema ile degisen arka plan gorseli.
   Iki <img> yerine `background-image`: tarayici yalnizca UYGULANAN gorseli
   indirir, gizlenen digerini indirmez. Erisilebilir ad `.brand` uzerindeki
   `aria-label`da durdugu icin oge dekoratif kalabilir.
   Oran 2.27:1 (kaynak 1647x742); genislik yukseklikten turetilir. */
.brand__logo {
  display: block;
  /* Genislik ORANA bagli: acik temadaki mavi.png 1816x923 (1,97:1),
     koyu temadaki 1.png 1647x742 (2,22:1). Tek genislik verilseydi biri
     kutusuna sigmayip yaninda bosluk birakirdi — `contain` gorseli
     kucultur ama kutuyu daraltmaz. 48px yukseklikte: 48x1,97 = 94px. */
  width: 83px;
  height: 42px;
  flex: none;
  background-image: url('../../public/logo/mavi.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

:root[data-theme='dark'] .brand__logo {
  background-image: url('../../public/logo/1.png');
  width: 93px; /* 2,22:1 — bkz. yukaridaki oran notu */
}

/* Footer zemini HER IKI temada da koyu (`--c-invert-bg`). Tema kuralina
   birakilirsa acik temada siyah logo koyu zemine dusup kayboluyor —
   burada her zaman beyaz surum kullanilir. */
.footer .brand__logo,
:root[data-theme='dark'] .footer .brand__logo {
  background-image: url('../../public/logo/1.png');
  width: 132px;
  height: 58px;
}

/* Gezinme */
.nav {
  display: none;
  align-items: center;
  gap: var(--s-5);
}

@media (min-width: 1024px) {
  .nav { display: flex; }
}

.nav__link {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-ink-mute);
  padding-block: var(--s-2);
  transition: color var(--d-fast) var(--e-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}

.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-current {
  color: var(--c-ink);
  font-weight: 600;
}

.nav__link.is-current::after { transform: scaleX(1); }

/* Ozgullugu iki sinifa cikariyoruz: components.css daha sonra yuklendigi icin
   tek sinifla yazilan bu kural .btn { display: inline-flex } tarafindan
   eziliyordu ve CTA mobilde hamburgeri ekran disina itiyordu. */
.header .header__cta { display: none; }

@media (min-width: 1024px) {
  .header .header__cta { display: inline-flex; }
}

/* Mobil menu dugmesi */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  background: none;
  border: 1px solid var(--c-edge-ctl);
  border-radius: var(--r-sm);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .burger { display: none; }
}

.burger__bar {
  display: block;
  height: 2px;
  background: var(--c-ink);
  transition: transform var(--d-base) var(--e-out),
              opacity var(--d-fast) var(--e-out);
}

.burger[aria-expanded='true'] .burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded='true'] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobil panel — dar cekmece (2026-09-01, gelinlik menusu ornek alindi:
   soldan giren dar panel + arkada bulanik karartma; kompakt satirlar).
   Tabela kimligi kucuk puntoda korunur: Archivo 600 / wdth 100 / 16px.
   Panel header'in DISINDA durur — header'daki backdrop-filter fixed
   torunlar icin containing block olusturur (olculdu, bkz. STATE.md).
   Kapali durumda visibility: hidden: odak ve ekran okuyucu disinda. */
.mobile-nav {
  /* Koyu zeminde varsayilan odak rengi (#0B45D0) 2.36:1'de kayboluyor;
     panel kapsaminda odak halkasi acik maviye cekilir (6.63:1). */
  --c-focus: var(--c-blue-invert);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(400px, 88vw);
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  background: var(--c-invert-bg); /* iki temada koyu — footer diliyle ayni */
  color: var(--c-invert-fg);
  border-right: 1px solid var(--c-invert-line);
  box-shadow: var(--sh-lg);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform var(--d-base) var(--e-out),
              visibility 0s linear var(--d-base);
}

.mobile-nav[data-open='true'] {
  transform: none;
  visibility: visible;
  transition: transform var(--d-slow) var(--e-out),
              visibility 0s;
}

/* Karartma: sayfa yerinde kalir, arkada karartilip bulaniklastirilir.
   Tiklamak menuyu kapatir (main.js). */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity var(--d-base) var(--e-out),
              backdrop-filter var(--d-base) var(--e-out),
              visibility 0s linear var(--d-base);
}

html[data-menu-open] .mobile-nav-backdrop {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--d-slow) var(--e-out),
              backdrop-filter var(--d-slow) var(--e-out),
              visibility 0s;
}

@media (min-width: 1024px) {
  .mobile-nav,
  .mobile-nav-backdrop { display: none; }
}

/* Ust satir: beyaz logo + yuvarlak kapatma */
.mobile-nav__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-invert-line);
}

.mobile-nav__logo {
  display: block;
  width: 91px; /* 2.27:1 oran, 40px yukseklik — koyu zeminde beyaz surum */
  height: 40px;
  background: url('../../public/logo/1.png') left center / contain no-repeat;
}

.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-invert-edge);
  border-radius: 50%;
  color: var(--c-invert-mute);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.mobile-nav__close:hover {
  color: var(--c-invert-fg);
  border-color: var(--c-invert-fg);
  transform: rotate(90deg);
}

.mobile-nav__close svg {
  width: 1rem;
  height: 1rem;
}

/* Govde: gruplu baglanti listesi, kendi icinde kayar */
.mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: var(--s-5);
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__list li + li {
  border-top: 1px solid var(--c-invert-line);
}

/* Kompakt baglanti satiri (~47px dokunma hedefi). Solda olcu centigi:
   gelinlik'teki hover cizgisinin Delta karsiligi — aktif sayfada uzar
   ve maviye doner, "buradasin" isareti olcum isaretidir. */
.mobile-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.875rem 0 0.875rem 1.375rem;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  font-variation-settings: 'wdth' var(--wdth-tight);
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-invert-mute);
  transition: color var(--d-fast) var(--e-out),
              padding-left var(--d-base) var(--e-out);
}

.mobile-nav__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 1px;
  background: var(--c-invert-edge);
  transition: width var(--d-base) var(--e-out),
              background var(--d-fast) var(--e-out);
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  color: var(--c-invert-fg);
  padding-left: 1.625rem;
}

.mobile-nav__link:hover::before,
.mobile-nav__link:focus-visible::before {
  width: 12px;
}

.mobile-nav__link.is-current { color: var(--c-blue-invert); }

.mobile-nav__link.is-current::before {
  width: 16px;
  height: 2px;
  background: var(--c-blue-invert);
}

/* Alt satir: atolye durumu + eylem dugmeleri */
.mobile-nav__foot {
  flex: none;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5)
           calc(var(--s-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-invert-line);
}

.mobile-nav__status {
  display: grid;
  gap: var(--s-1);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-invert-mute);
  font-variant-numeric: tabular-nums;
}

.mobile-nav__tel {
  color: var(--c-blue-invert);
  font-weight: 500;
  /* 12px satir tek basina kucuk dokunma hedefi birakir; padding hedefi
     buyutur, negatif margin gorsel ritmi korur. */
  display: inline-block;
  padding-block: var(--s-3);
  margin-block: calc(-1 * var(--s-2));
  justify-self: start;
}

/* Randevu Al + Giris/Kayit yan yana. Dugme metni tasarsa once padding
   kisilir (asagida), etiket kisaltmak son care. */
.mobile-nav__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.mobile-nav__actions .btn {
  padding-inline: var(--s-3);
}

/* Satirlarin kademeli girisi — panel soldan girdigi icin satirlar da
   soldan suzulur; ters yon panelin hareketine karsi calisirdi.
   NOT: gecikme merdiveni bes baglantilik duz listeye sabittir; satir
   eklenirse merdiven de guncellenmeli (7 sayfada ayni markup). */
.mobile-nav__list li,
.mobile-nav__foot {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 120ms var(--e-out), transform 120ms var(--e-out);
}

.mobile-nav[data-open='true'] .mobile-nav__list li,
.mobile-nav[data-open='true'] .mobile-nav__foot {
  opacity: 1;
  transform: none;
  transition-duration: var(--d-base), var(--d-base);
}

.mobile-nav[data-open='true'] .mobile-nav__list li:nth-child(1) { transition-delay: 120ms; }
.mobile-nav[data-open='true'] .mobile-nav__list li:nth-child(2) { transition-delay: 160ms; }
.mobile-nav[data-open='true'] .mobile-nav__list li:nth-child(3) { transition-delay: 200ms; }
.mobile-nav[data-open='true'] .mobile-nav__list li:nth-child(4) { transition-delay: 240ms; }
.mobile-nav[data-open='true'] .mobile-nav__list li:nth-child(5) { transition-delay: 280ms; }
.mobile-nav[data-open='true'] .mobile-nav__foot { transition-delay: 320ms; }

/* Panel acikken sayfa durumu — yalniz mobil */
@media (max-width: 1023.98px) {
  .header .header__login { display: none; }

  html[data-menu-open],
  html[data-menu-open] body { overflow: hidden; }

  /* WhatsApp dugmesi karartmanin ustunde yuzmesin; JS'teki fade'i
     beklemeden aninda gizlenir. */
  html[data-menu-open] .wa {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
}

/* Hareket azaltmada panel, karartma ve satirlar aninda acilir;
   gecikmeler sabit ms oldugu icin token indirimi yetmez, sifirlanir. */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav-backdrop,
  .mobile-nav__list li,
  .mobile-nav__foot {
    transition: none !important;
  }

  .mobile-nav[data-open='true'] .mobile-nav__list li,
  .mobile-nav[data-open='true'] .mobile-nav__foot { transition-delay: 0ms; }
}

/* --- Alt bilgi ---------------------------------------------------------- */

/* Alt bilgi bilerek sikistirilmistir: sayfanin sonu, ikinci bir anasayfa
   degil. Dikey bosluklar ve tipografi bir kademe kucuk. */
.footer {
  background: var(--c-invert-bg);
  color: var(--c-invert-fg);
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid var(--c-line);
}

.footer__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }
  .footer__brand { grid-column: auto; }
}

.footer__brand .brand__name { color: var(--c-invert-fg); }

.footer__brand .brand__mark {
  width: 1.5rem;
  height: 1.5rem;
}

.footer__tagline {
  margin-top: var(--s-3);
  max-width: 24rem;
  color: var(--c-invert-mute);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.footer__title {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-invert-faint);
  margin-bottom: var(--s-3);
}

.footer__list {
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--c-invert-mute);
}

.footer__list a {
  transition: color var(--d-fast) var(--e-out);
}

.footer__list a:hover { color: var(--c-invert-fg); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-invert-line);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--c-invert-faint);
}