/* ================================================================
   VIP LUXE — SITE STILLERI
   ================================================================
   Tum renk, font, olcu ve golge degerleri tokens.css'ten gelir.
   Bu dosyada sabit renk YOKTUR; yeni bir renk gerekiyorsa once
   tokens.css'e anlamsal token olarak eklenir.

   Bolumler:
     1. Temel
     2. Ortak yuzeyler (fotograf ustu cam)
     3. Ust cubuk + dil secici
     4. Butonlar
     5. Hero
     6. Bolumler ve kartlar
     7. Footer
     8. Mobil dock
     9. Duyarli duzen (kirilma noktasi basina TEK blok)
   ================================================================ */

/* 1. Temel ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.15; }
h1 { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -.02em; }
h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 22px; }
h4 { font-size: 18px; font-weight: 600; }
h5 { font-size: 15px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: var(--s-2) var(--s-3); z-index: 100; }
.skip-link:focus { left: var(--s-3); top: var(--s-3); }
.shell { max-width: var(--shell-max); margin: 0 auto; padding-inline: var(--shell-gutter); }

/* 2. Ortak yuzeyler ----------------------------------------------
   Fotograf ustu cam: ust cubuktaki TUM ogeler (marka, nav, dil,
   menu dugmesi, ikincil buton) ve hero'daki yuvarlak dugme ile
   rozetler bu tek tanimi paylasir. Ust cubuk kaydirmada acik
   icerigin uzerinde de yuzdugu icin lacivert cam her iki zeminde
   okunur; ogeye ozel zemin tanimlanmaz. */
.topbar .topbar-brand,
.nav-pill,
.lang-current,
.nav-toggle,
.topbar .btn-outline,
.btn-wa-round {
  background: var(--media-glass);
  border: 1px solid var(--glass-line);
  color: var(--media-ink);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}
.topbar .topbar-brand:hover,
.lang-current:hover,
.nav-toggle:hover,
.topbar .btn-outline:hover,
.btn-wa-round:hover {
  /* Beyaz hover acik zeminde yaziyi yutuyordu; lacivert her iki zeminde okunur. */
  background: var(--media-glass-hover);
  border-color: var(--glass-line-hover);
  color: var(--media-ink);
}
/* Fotograf ustu odak halkasi: acik altin her iki zeminde gorunur. */
.topbar :focus-visible,
.hero :focus-visible {
  outline: 2px solid var(--media-accent);
  outline-offset: 2px;
}

/* 3. Ust cubuk ----------------------------------------------------
   Cubuk kendisi saydam ve serit tasimaz; icerikler gorselin ve
   sayfanin uzerinde yuzer (kaydirmada zemin EKLENMEZ). Marka sol
   ucta, nav ortada, eylemler sag ucta. */
.topbar-wrap {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  padding-inline: var(--shell-gutter);
  padding-block: var(--s-2);
}
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--header-h);
}
/* Marka yazisi: ust cubuk ve footer ayni tipografiyi paylasir;
   cam hap yalnizca ust cubukta (bkz. bolum 2). */
.topbar-brand,
.footer-brand {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .04em; font-size: 17px; white-space: nowrap;
}
.topbar-brand {
  display: inline-flex; align-items: center;
  height: 44px; padding-inline: var(--s-3);
  border-radius: var(--r-pill);
}
/* Nav ortada: iki yanda auto bosluk, marka ve eylemler uclara dayanir. */
.topbar-nav { display: flex; align-items: center; margin-inline: auto; }
.nav-pill {
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  border-radius: var(--r-pill);
}
.nav-link {
  font-size: 14px; font-weight: 500;
  color: var(--media-ink-muted);
  padding: 9px var(--s-3);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.nav-link:hover { color: var(--media-ink); background: var(--glass-bg-subtle); }
/* Aktif: dolgulu kapsayici + altta cizgi gosterge. Yazi olcusu ve
   konumu aktif/pasifte DEGISMEZ; gosterge mutlak konumlanir,
   pill yuksekligi degismez, cubuk kaymaz. */
.nav-link.is-active {
  position: relative;
  color: var(--media-ink);
  background: var(--glass-bg);
  font-weight: 600;
}
.nav-link.is-active::after {
  content: '';
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 25px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--media-accent);
}
.topbar-actions { display: flex; align-items: center; gap: var(--s-2); }
/* .topbar kapsami sart: dugme .btn sinifi da tasir ve .btn
   display'i sonra tanimlandigi icin masaustunde gorunur kaliyordu. */
.topbar .nav-toggle { display: none; }
.drawer-extra { display: none; }

/* Dil secici: bayrakli acilir liste. */
.lang-switch { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding-inline: 12px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.lang-current .icon { transition: transform .15s; }
.lang-switch.is-open .lang-current .icon { transform: rotate(180deg); }
/* SVG bayrak: emoji yerine (Windows'ta bolgesel gosterge harfleri
   bayrak olarak cizilmiyor, genisligi 0 kaliyordu). */
.lang-flag { display: inline-flex; align-items: center; line-height: 0; }
.flag { display: block; border-radius: var(--r-pill); flex-shrink: 0; }
.lang-code { letter-spacing: .04em; }
.lang-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 172px;
  margin: 0; padding: 6px;
  list-style: none;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  z-index: 60;
}
.lang-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink);
  min-height: 44px;              /* dokunma hedefi */
  transition: background-color .12s, color .12s;
}
.lang-list a:hover { background: var(--surface-2); }
.lang-list a[aria-current="true"] { color: var(--accent-2); font-weight: 600; background: var(--surface-2); }
.lang-list a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.lang-name { white-space: nowrap; }

/* 4. Butonlar ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  height: 52px; padding-inline: 20px;
  border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { height: 40px; padding-inline: var(--s-3); font-size: 13px; }
.btn-block { width: 100%; }
/* Fotograf ustu birincil eylem: lacivert koyu gorselde kayboluyor,
   bu yuzden acik altin + lacivert yazi. Hero'daki buyuk arama
   dugmesi ve ust cubuktaki WhatsApp ayni tanimi kullanir. */
.topbar .btn-primary,
.btn-call {
  background: var(--media-accent);
  border-color: var(--media-accent);
  color: var(--media-accent-ink);
}
.topbar .btn-primary:hover { background: var(--media-ink); border-color: var(--media-ink); color: var(--media-accent-ink); }
.link { color: var(--accent-2); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
.link:hover { color: var(--ink); }
.contact-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.contact-cta-full .btn { flex: 0 0 auto; }
/* Mobilde dock iletisim eylemlerini tasir; eski sabit alt serit
   hicbir genislikte gosterilmez. */
.sticky-cta { display: none; }

/* 5. Hero ---------------------------------------------------------
   Tam ekran: gorsel viewport kenarlarina dayanir, kapsayici
   max-width'i yoktur. 100dvh: mobil adres cubugu acilip
   kapandiginda 100vh icerigi kirpiyordu. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: var(--media-bg);
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Iki katmanli karartma: metnin oturdugu sol-alt koyulasir, sag
   ust acik kalir. Metin her gorselde okunabilir olmali. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: var(--media-scrim);
}
[dir="rtl"] .hero::after { background: var(--media-scrim-rtl); }
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  /* Yatay bosluk topbar ile AYNI kaynaktan gelir; marka, baslik
     ve arac seridi tek hizalama cizgisini paylasir. */
  padding: calc(var(--header-h) + var(--s-5)) var(--shell-gutter) var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-5);
}
/* Oransal genislik: ch ile baslik 4 satira bolunuyordu. */
.hero-head { max-width: min(880px, 68%); color: var(--media-ink); }
[dir="rtl"] .hero-head { text-align: right; }
.hero-eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--media-accent); margin-bottom: var(--s-2);
}
.hero-title {
  color: var(--media-ink); line-height: 1.08;
  font-size: clamp(38px, 5.2vw, 76px); letter-spacing: -.025em;
}
.hero-sub {
  margin-top: var(--s-3); max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; line-height: 1.65;
  color: var(--media-ink-soft);
}
/* Kisa guven bilgileri: tek satir rozet dizisi. */
.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-4); padding: 0; list-style: none;
}
.hero-facts li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: 13px; color: var(--media-ink);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}
.hero-facts .icon { color: var(--media-accent); }
/* Alt sira: sol eylemler, sag arac seridi. */
.hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
.hero-actions { display: flex; align-items: center; gap: var(--s-2); }
.btn-call {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 62px; padding-inline: var(--s-4) var(--s-5);
  border-radius: var(--r-pill);
  border-width: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  box-shadow: var(--shadow-cta);
  transition: transform .15s, box-shadow .15s;
}
.btn-call:hover { transform: translateY(-1px); box-shadow: var(--shadow-cta-hover); }
.btn-call:active { transform: translateY(0); }
.btn-wa-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: var(--r-pill);
  transition: background-color .15s, border-color .15s;
}
/* Arac seridi — sag alt kart dizisi. Genis ekranda alani kullanir,
   dar ekranda 168px okunabilir tabanin altina inmez. */
.hero-fleet { display: flex; gap: var(--s-2); }
.hero-fleet-card {
  width: clamp(168px, 17vw, 268px);
  display: flex; flex-direction: column; gap: 10px;
  color: var(--media-ink);
}
.hero-fleet-media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  color: var(--media-accent);
  transition: border-color .15s, transform .15s;
}
.hero-fleet-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-fleet-card:hover .hero-fleet-media { border-color: var(--media-accent); transform: translateY(-2px); }
/* Kapasite etiketi. */
.hero-fleet-tag {
  position: absolute; inset-block-end: 10px; inset-inline-start: 10px;
  padding: 6px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background: var(--media-glass-strong); color: var(--media-ink);
}
.hero-fleet-name {
  font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 6. Bolumler ve kartlar ------------------------------------------ */
.section { padding-block: var(--s-7); }
.section + .section { padding-top: 0; }
/* Hero'su olmayan sayfalar: ilk oge sabit ust cubugun ALTINDAN
   baslar. Ic sayfalarda ilk oge breadcrumb kapsayicisidir; ofset
   onceden yalnizca .section'a verildigi icin breadcrumb cubugun
   arkasinda kaliyordu. */
main > .shell:first-child { padding-top: var(--page-offset); }
main > .shell:first-child + .section { padding-top: var(--s-4); }
main > .section:first-child { padding-top: calc(var(--page-offset) + var(--s-4)); }
.section-shell { max-width: var(--shell-max); margin: 0 auto; padding-inline: var(--shell-gutter); }
.section-head { margin-bottom: var(--s-5); display: grid; gap: var(--s-2); }
.section-head.split {
  grid-template-columns: 1fr minmax(0, 40ch);
  align-items: end;
  gap: var(--s-4);
}
.section-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.section-title { font-size: clamp(26px, 2.8vw, 36px); }
.section-body { color: var(--ink-muted); max-width: 54ch; font-size: 15.5px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
/* Kart eylemi en alta sabitlenir: ozet metinleri farkli uzunlukta
   oldugunda butonlar farkli yuksekliklerde kalip izgarayi bozuyordu. */
.card {
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
  transition: border-color .15s;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.card-action { align-self: flex-start; margin-top: auto; }
.card > p:last-of-type { margin-bottom: var(--s-3); }
.card-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.card h5 { margin-bottom: var(--s-2); font-size: 17px; }
.card .section-body { margin-bottom: var(--s-3); font-size: 14.5px; }
/* Cerceveli liste ailesi: istatistik, rotalar, SSS ayni kenarligi paylasir. */
.stat-strip, .routes-list, .faq {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { text-align: center; padding: var(--s-5) var(--s-4); }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat-num { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-label { font-size: 14px; color: var(--ink-muted); margin-top: var(--s-1); }
.route-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
}
.route-row:first-child { border-top: 0; }
.route-from { font-family: var(--font-display); font-weight: 600; }
.route-dur { color: var(--ink-muted); font-size: 14px; }
.route-price { color: var(--accent); font-weight: 700; }
.route-action { display: inline-flex; align-items: center; gap: var(--s-2); }
.vehicle-card { padding: 0; overflow: hidden; }
.vehicle-media {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: var(--surface-2);
  display: block;
}
.vehicle-media-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted);
  background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 12px, var(--bg) 12px, var(--bg) 24px);
}
.vehicle-body { padding: var(--s-4); display: grid; gap: var(--s-2); }
.vehicle-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: 14px; color: var(--ink-muted); }
.vehicle-features li { display: flex; gap: var(--s-1); align-items: center; }
/* Icerik ikonlari tek renk ailesi: vurgu altini. */
.vehicle-features .icon,
.why-item .icon,
.contact-lines .icon { color: var(--accent-2); }
.why-item { display: grid; gap: var(--s-1); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  display: flex; justify-content: space-between; gap: var(--s-3); align-items: center;
  font-family: var(--font-display); font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-answer { padding: 0 var(--s-4) var(--s-3); color: var(--ink-muted); }
.testi-card { display: grid; gap: var(--s-3); }
.testi-card p { font-size: 15px; color: var(--ink); }
.testi-dots { display: flex; gap: 5px; }
.testi-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--accent-2); }
.testi-meta { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-1); font-size: 13px; color: var(--ink-muted); padding-block: var(--s-3); }
.breadcrumb a:hover { color: var(--ink); }
.contact-lines p { display: flex; gap: var(--s-2); align-items: center; padding-block: var(--s-1); }

/* 7. Footer ------------------------------------------------------- */
.footer { background: var(--surface-2); border-top: 1px solid var(--line); margin-top: var(--s-7); }
.footer-grid {
  max-width: var(--shell-max); margin: 0 auto;
  padding: var(--s-6) var(--shell-gutter) var(--s-4);
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-4);
}
.footer-col h6 { margin-bottom: var(--s-2); color: var(--ink-muted); }
.footer-col a,
.footer-social a { color: var(--ink-muted); transition: color .15s; }
.footer-col a { display: block; padding-block: 4px; font-size: 14px; }
.footer-col a:hover,
.footer-social a:hover { color: var(--ink); }
.footer-intro { color: var(--ink-muted); font-size: 14px; margin-block: var(--s-2); }
.footer-social { display: flex; gap: var(--s-2); }
.footer-bottom {
  max-width: var(--shell-max); margin: 0 auto;
  padding: var(--s-3) var(--shell-gutter);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-muted);
}
.ssf-sign { text-align: center; padding: var(--s-3) var(--shell-gutter); font-size: 13px; color: var(--ink-muted); position: relative; }
.ssf-sign-name { color: var(--accent-2); font-weight: 600; cursor: pointer; }
.ssf-card {
  position: absolute; left: 50%; bottom: calc(100% - var(--s-1));
  transform: translateX(-50%);
  width: 260px;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-3);
  box-shadow: var(--shadow-pop);
  text-align: start;
}
.ssf-sign:not(:hover):not(:focus-within) .ssf-card { display: none; }
.ssf-card img { width: 96px; margin-bottom: var(--s-2); }
.ssf-card-title { font-family: var(--font-display); font-weight: 600; }
.ssf-card-blurb { font-size: 13px; color: var(--ink-muted); margin-block: var(--s-1) var(--s-2); }

/* 8. Mobil dock ---------------------------------------------------
   Ekranin altina sabit uc sekme; her biri yukari acilan panel.
   Panel yatayda ORTALANIR (inset-inline: 0 + margin-inline: auto).
   Masaustunde gizlenir: oradaki karsilik ust cubuktur. */
.dock { display: none; }
.dock-bar {
  display: flex;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}
.dock-tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 64px;               /* dokunma hedefi */
  padding: 0;
  border: 0; background: transparent;
  color: var(--ink-muted);
  font-size: 11px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s;
}
/* Aktif sekme yalnizca renk degistirir; ikon olcusu/konumu sabit. */
.dock-tab.is-active { color: var(--accent); font-weight: 600; }
.dock-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -3px; }
.dock-tab .icon, .dock-tab .flag { flex: none; }
.dock-panel {
  position: absolute;
  inset-inline: 0;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100% - 2 * var(--s-3)));
  margin-inline: auto;
  margin-bottom: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  animation: dock-in .16s ease-out;
}
@keyframes dock-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dock-links, .dock-langs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dock-links a, .dock-langs a {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px;               /* dokunma hedefi */
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-size: 15px; color: var(--ink);
  transition: background-color .12s, color .12s;
}
.dock-links a:hover, .dock-langs a:hover { background: var(--surface-2); }
.dock-links a[aria-current="page"],
.dock-langs a[aria-current="true"] { color: var(--accent); font-weight: 600; background: var(--surface-2); }
.dock-links .icon { color: var(--ink-muted); }
.dock-links a[aria-current="page"] .icon { color: var(--accent-2); }
.dock-actions { display: grid; gap: var(--s-2); }
.dock-actions .btn { height: 52px; }
@media (prefers-reduced-motion: reduce) {
  .dock-panel { animation: none; }
}

/* 9. Duyarli duzen -------------------------------------------------
   Her kirilma noktasi TEK blokta; ayni sorgu dosyada tekrar etmez.
   Buyukten kucuge siralidir, kucuk olan buyugu ezer. */

/* <=1024: tablet — ust cubuk menu dugmesine, arac seridi izgaraya. */
@media (max-width: 1024px) {
  .topbar { position: relative; gap: var(--s-2); }
  .topbar-nav, .topbar-actions { display: none; }
  .topbar .nav-toggle {
    display: inline-flex; margin-inline-start: auto;
    width: 44px; padding: 0; border-radius: var(--r-pill);
  }
  /* Cekmece de fotograf ustu yuzey: icindeki cam ogeler ve
     altin buton ust cubukla ayni gorunur. */
  .topbar-nav.is-open {
    display: flex;
    position: absolute; top: calc(100% + var(--s-2)); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: var(--s-1);
    background: var(--media-glass-strong);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-md); padding: var(--s-3);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-float);
  }
  .topbar-nav.is-open .nav-pill {
    flex-direction: column; align-items: stretch;
    background: none; border: 0; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  /* Cekmecede baglanti tam genislik: gosterge ortada kaliyordu,
     metnin baslangicina hizalanir. */
  .topbar-nav.is-open .nav-link.is-active::after { inset-inline-start: var(--s-3); transform: none; }
  .topbar-nav.is-open .drawer-extra {
    display: flex; flex-direction: column; gap: var(--s-2);
    margin-top: var(--s-2); padding-top: var(--s-2);
    border-top: 1px solid var(--glass-line);
  }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Serit basligin altina iner ve kaydirma yerine sarilan izgaraya
     doner: yatay kaydirmada ucuncu arac ekran disinda kaliyordu.
     nowrap sart: wrap sutun yonunde kalirsa izgara satiri sisiyordu. */
  .hero-bottom { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--s-4); }
  .hero-fleet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-2);
  }
  .hero-fleet-card { width: auto; min-width: 0; }
}

/* <=900: dock devrede — ust cubukta yalnizca ortalanmis marka kalir;
   sayfa baglantilari, dil ve iletisim dock'a tasinir. */
@media (max-width: 900px) {
  .dock { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; }
  .topbar .nav-toggle { display: none; }
  .topbar { justify-content: center; }
  /* Sayfa sonu dock'un altinda kalmasin. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Dikey ekranda 16:9 gorsel yanlardan kirpiliyor; odak saga ve
     biraz yukari: aracin on kismi gorunur kalir. */
  .hero-media { object-position: 72% 42%; }
  .section { padding-block: var(--s-6); }
  .section + .section { padding-top: 0; }
  .section-head { margin-bottom: var(--s-4); }
  .card { padding: var(--s-3); }
  .hero-facts { gap: 6px; }
  .hero-facts li { padding: 6px 10px; font-size: 12px; }
}

/* <=768: telefon yatay / kucuk tablet. */
@media (max-width: 768px) {
  .hero { min-height: auto; }
  /* Ust bosluk SABIT cubugun yuksekligini icermeli; yoksa marka
     hero metninin uzerine biniyordu. */
  .hero-inner { padding-block: calc(var(--header-h) + var(--s-3)) var(--s-4); gap: var(--s-4); }
  .hero-head { max-width: 100%; }
  .hero-actions { width: 100%; }
  .btn-call { flex: 1 1 auto; justify-content: center; height: 56px; font-size: 18px; padding-inline: var(--s-3); }
  .btn-wa-round { width: 56px; height: 56px; flex: 0 0 auto; }
  .section-head.split { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat + .stat { border-inline-start: 0; border-top: 1px solid var(--line); }
  .route-row { grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-2); }
  .route-dur { grid-column: 1; }
}

/* <=600: dar telefon — uc arac alt alta satir kart (solda gorsel,
   sagda ad); 2+1 sutunda tek kartin yalniz kalmasi onlenir. */
@media (max-width: 600px) {
  .hero-fleet { grid-template-columns: 1fr; }
  .hero-fleet-card {
    display: grid; grid-template-columns: 132px minmax(0, 1fr);
    align-items: center; gap: var(--s-2);
  }
  .hero-fleet-tag { inset-block-end: 6px; inset-inline-start: 6px; padding: 4px 8px; font-size: 12px; }
  .hero-fleet-name { white-space: normal; font-size: 15px; }
  /* Iki iletisim butonu 324px'e sigmayip sayfayi 61px tasiriyordu:
     tam genislik, alt alta (birincil ustte). */
  .contact-cta-full { flex-direction: column; }
  .contact-cta-full .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .ssf-card { position: static; transform: none; width: 100%; margin-top: var(--s-2); }
}

/* <=480: en dar — gorsel kirpmasi daha sert, odak biraz daha saga. */
@media (max-width: 480px) {
  .hero-media { object-position: 78% 44%; }
}