/* ==========================================================================
   00 ─ YAZI TİPLERİ (kendi sunucumuzda) --------------------------------------

   ⚠ Eskiden Google Fonts'tan geliyordu. Kendi sunucumuza alındı; sebepleri
     ölçülerek karara bağlandı (11.09.2026):

     · BOYUT DEĞİŞMEDİ. Google, Inter ve Sora'yı DEĞİŞKEN FONT olarak
       veriyor: aile+alt küme başına TEK dosya 400-700 arası bütün
       ağırlıkları karşılıyor. 15 ayrı istek gibi görünen şey aslında
       4 benzersiz dosyaydı — toplam 167 KB. Bugün de tam olarak bu
       baytlar iniyordu, sadece başka bir adresten.

     · HIZ KAZANCI. Önce fonts.googleapis.com'a (CSS), sonra
       fonts.gstatic.com'a (dosyalar) ayrı ayrı DNS+TCP+TLS gerekiyordu;
       yalnız CSS isteği ölçümde 180-250 ms sürüyordu ve bu daha font
       inmeye başlamadan önceydi. Artık fontlar sitenin zaten açık olan
       bağlantısından geliyor ve CSS isteği tamamen ortadan kalktı
       (tanımlar bu dosyanın içinde).

     · "Başka sitelerden önbellekte gelir" argümanı ARTIK GEÇERSİZ:
       tarayıcılar 2020'den beri HTTP önbelleğini site bazında ayırıyor.

     · KVKK: ziyaretçinin IP'si artık Google'a gitmiyor.

   `unicode-range` değerleri Google'ın CSS'inden BİREBİR alındı — davranış
   aynı: latin-ext dosyası yalnızca sayfada ğ/ı/ş/İ gibi karakterler
   geçtiğinde indirilir, İngilizce sayfalar onu hiç istemez.

   Ağırlık aralığı `300 700` yazılıyor çünkü dosya değişken font; tarayıcı
   aradaki her ağırlığı tek dosyadan üretir. (CSS'te fiilen 400/500/600/700
   kullanılıyor; 300 hiçbir yerde yok ama aralığı daraltmak bayt
   kazandırmaz.)

   ⚠ Dosyalar bir gün güncellenirse ADI DEĞİŞTİRİLEREK konmalı: bir yıllık
     önbellek süresi veriliyor (public/.htaccess · web.config) ve aynı adla
     değiştirilen dosya ziyaretçilere geç ulaşır.

   ⚠ font-display: OPTIONAL (29 Eylül 2026; önce `swap`).
     Belirti (kullanıcı): "sayfa değişince harfler değişip yükleniyor gibi".
     `swap`, yazı tipi önbellekte olsa bile ilk kareyi beklemeden YEDEK yazı
     tipiyle çiziyor, ardından değiştiriyordu. Ölçüm (headless Chrome, anasayfa
     ↔ kurumsal, 4 geçiş, _testler/denetim.php dışında elle): yerel sunucu
     önbellek başlığı vermeyince her geçişte 172 KB yeniden iniyor ve ilk
     karelerin 1/4'ünde; başlık verilince dosyalar önbellekten gelse de
     ilk karelerin 3/4'ünde Inter/Sora HAZIR DEĞİLDİ.
     `optional` + preload: tarayıcı önceden yüklenen yazı tipini ilk çizimden
     önce kısa bir süre bekliyor; gelmezse o sayfa boyunca yedekle kalıyor ve
     sonradan DEĞİŞTİRMİYOR (kayma da olmuyor), dosya bir sonraki sayfa için
     önbelleğe iniyor. Aynı çözüm Marcon sitesinde de uygulanıyor.
     Bedeli: çok yavaş bağlantıda İLK ziyaretin ilk sayfası yedek yazı tipiyle
     görünebilir. Menüdeki İ/Ş için TR'de Türkçe harf alt kümeleri önceden
     yükleniyor (app/views/layout.php).
   ⚠ 7 Ekim 2026: Türkçe harfler (Ğ ğ İ Ş ş) AYRI, küçük dosyalardan gelir —
     inter-tr.woff2 (3 KB) · sora-tr.woff2 (2,4 KB); tam latin-ext (85 + 12 KB)
     bu harfleri artık kapsamaz (aralıktan çıkarıldı), yalnız başka bir
     genişletilmiş harf geçerse indirilir. Aralıklar ÇAKIŞMAMALI: çakışırsa
     tarayıcı hangi dosyayı isteyeceğini sırayla dener, tam dosya da inebilir.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('../../static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-011D, U+0120-012F, U+0131-015D, U+0160-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('../../static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('../../static/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-011D, U+0120-012F, U+0131-015D, U+0160-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('../../static/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('../../static/fonts/inter-tr.woff2') format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('../../static/fonts/sora-tr.woff2') format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F;
}

/* ==========================================================================
   GFT Logistics — Ana stil dosyası

   TEMA: Aydınlık kurumsal.
   Sayfa gövdesi beyaz / açık gri; sadece belirli bölümler koyu:
   hero (video), küre bölümü, CTA bandı ve footer. Koyu bölümler
   `.zone-dark` sınıfı ile token'ları yeniden tanımlar — bileşenler
   aynı değişkenleri kullandığı için iki temada da doğru görünür.

   Bölümler:
     01 Değişkenler / temel
     02 Tipografi & yardımcılar
     03 Düğmeler
     04 Header & menü
     05 Hero
     06 Kargo takip çubuğu
     08 Hizmet kartları
     09 Küre bölümü
     10 Hakkımızda / sayaçlar
     11 Özellik & değer ızgaraları
     12 Rota (multimodal) bölümü
     13 Formlar & CTA
     14 İç sayfa hero
     15 Hizmet detay
     16 İletişim / kariyer / gizlilik / takip / 404
     17 Footer
     18 Animasyon & duyarlılık
   ========================================================================== */

/* 01 ─ Değişkenler ------------------------------------------------------- */
:root {
  /* Marka */
  --brand:      #E4192B;
  --brand-2:    #FF3D4F;
  --brand-ink:  #B01020;
  --brand-tint: rgba(228, 25, 43, .08);
  --signal:     #1E7FBF;

  /* Koyu zemin sabitleri (hero / footer / küre) */
  --night:      #0A0F18;
  --night-2:    #0F1622;
  --night-3:    #17202E;

  /* ── Aydınlık tema (varsayılan) ── */
  --bg:         #FFFFFF;
  --bg-alt:     #F4F6FA;
  --surface:    #FFFFFF;
  --surface-2:  #F7F9FC;
  --text:       #0E1725;
  --text-strong:#050A12;
  --muted:      #5C6879;
  --line:       rgba(14, 23, 37, .13);
  --line-soft:  rgba(14, 23, 37, .07);

  /* Etiket/overline rengi — kırmızıyı seyrek tutmak için nötr ton.
     Vurgu kırmızısı yalnız çizgi, buton ve tek bir başlıkta kalsın.
     ⚠ Bu renk 12px'lik BÜYÜK HARF etiketlerde kullanılıyor, yani WCAG'a göre
       "normal metin": 4.5:1 şart. Eski #6B7688 beyazda 4.59 ile sınırı zar zor
       geçiyor ama `--bg-alt` bölümlerinde 4.25'e düşüp KALIYORDU — overline'lar
       tam da o bölümlerin içinde. Yeni ton her iki zeminde de geçiyor
       (beyaz 5.04 · #F4F6FA 4.66) ve --muted'dan hâlâ açık. */
  --slate:      #64707F;
  /* Hata kirmizisi markadan BELIRGIN sekilde koyu: odaklanmis alan ile
     hatali alan aynı görünmesin. */
  --danger:      #B42318;
  --danger-tint: #FEF3F2;
  --danger-line: #FECACA;
  --success:      #067647;
  --success-tint: #ECFDF3;
  --success-line: #A7F3D0;

  /* Yükselti basamakları — her yüzey bu üçünden birini kullanır.
     e1: kart · e2: kart:hover · e3: yüzen panel (takip çubugu, modal) */
  --e1: 0 1px 2px rgba(14, 23, 37, .04), 0 10px 26px -14px rgba(14, 23, 37, .16);
  --e2: 0 2px 5px rgba(14, 23, 37, .05), 0 20px 46px -20px rgba(14, 23, 37, .24);
  --e3: 0 4px 10px rgba(14, 23, 37, .05), 0 36px 80px -34px rgba(14, 23, 37, .30);
  --shadow:     var(--e1);
  --shadow-lg:  var(--e3);
  --shadow-red: 0 14px 30px -14px rgba(228, 25, 43, .40);

  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display:    'Sora', var(--font);

  --container:  1280px;
  --gutter:     clamp(20px, 4vw, 48px);
  --radius:     16px;
  --radius-lg:  26px;

  --ease:       cubic-bezier(.22, 1, .36, 1);
  --header-h:   76px;   /* 29 Eyl 2026: 84 → 76 ("menü çok büyük"; bkz. bölüm 04) */
}

/* ── Koyu bölge: aynı token'lar, koyu değerler ── */
.zone-dark {
  --bg:         var(--night);
  --bg-alt:     var(--night-2);
  --surface:    #131B27;
  --surface-2:  #18212F;
  --text:       #EEF2F8;
  --text-strong:#FFFFFF;
  --muted:      #94A2B6;
  --line:       rgba(255, 255, 255, .12);
  --line-soft:  rgba(255, 255, 255, .07);
  --shadow:     0 24px 60px -28px rgba(0, 0, 0, .7);
  --shadow-lg:  0 34px 80px -34px rgba(0, 0, 0, .8);
  color: var(--text);
  background: var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Dekoratif parıltılar taşabiliyor; clip sticky'yi bozmadan yatay taşmayı keser */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* <use> ile çağrılan ikonların varsayılan boyutu (tarayıcı aksi hâlde 300x150 atar) */
.icn { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: middle; }

::selection { background: var(--brand); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #EDF0F5; }
::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 6px; border: 3px solid #EDF0F5; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* 02 ─ Tipografi & yardımcılar ------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* 29 Eylül 2026: bölüm boşlukları ~1/3 azaldı. Belirti (kullanıcı): "aşağıdaki
   alanlar ile aralarda çok boşluk var". Ölçüm (1440 px): her bölümde 89 px
   üst + 89 px alt → iki bölüm arası 178 px. Artık 60 + 60 = 120 px. */
.section { padding: clamp(40px, 4.2vw, 64px) 0; position: relative; background: var(--bg); }
.section--tight { padding: clamp(32px, 3.4vw, 52px) 0; }
.section--alt   { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
/* Arka arkaya iki beyaz bölüm varsa aralarına saç teli çizgi */
.section + .section:not(.section--alt):not(.zone-dark) { border-top: 1px solid var(--line-soft); }
.zone-dark + .section, .section--alt + .section { border-top: 0; }
.section > .container { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display); font-weight: 600; line-height: 1.14;
  margin: 0 0 .6em; letter-spacing: -.022em; color: var(--text-strong);
  /* Öksüz kelimeleri engeller: "…andan" tek başına satırda kalmaz */
  text-wrap: balance;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.h-display { font-size: clamp(2.5rem, 6vw, 5.1rem); line-height: 1.03; letter-spacing: -.034em; }
.h1 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); }
.h2 { font-size: clamp(1.8rem, 3.1vw, 2.72rem); }
.h3 { font-size: clamp(1.35rem, 2.1vw, 1.95rem); }
.h4 { font-size: clamp(1.12rem, 1.5vw, 1.35rem); }

/* Kiril kelimeler daha uzun; RU'da büyük başlıkları bir tık küçült */
html[lang="ru"] .h-display { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
html[lang="ru"] .h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
html[lang="ru"] .h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
html[lang="ru"] .overline,
html[lang="ru"] .counter__label { letter-spacing: .12em; }

.overline {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 16px;
}
.overline::before { content: ''; width: 30px; height: 2px; background: var(--brand); border-radius: 2px; flex: none; }
.zone-dark .overline { color: rgba(255, 255, 255, .62); }
.zone-dark .overline::before { background: var(--brand-2); }

p { text-wrap: pretty; }
.lead { font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--muted); }
.muted { color: var(--muted); }
.accent { color: var(--brand); }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.text-center { text-align: center; }
.mt-6 { margin-top: 44px; }

.section-head {
  /* Başlık kolonu geniş tutuluyor → başlıklar 2 satırda kalır, öksüz kelime olmaz */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
  gap: clamp(22px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.section-head > :last-child { padding-bottom: .4em; }
.section-head--center > :last-child { padding-bottom: 0; }
.section-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 760px; margin-inline: auto; }
.section-head--center .overline { justify-content: center; }

/* Sayfa içi bağlantıların (ör. kariyerdeki "#basvuru") hedefi sabit başlığın
   ALTINDA kalmasın. scroll-margin yalnız kaydırma anında iş görür, düzeni
   etkilemez; o yüzden id'si olan her öğeye verilebiliyor. */
[id] { scroll-margin-top: calc(var(--header-h) + 22px); }

/* Klavyeyle gezinirken tutarlı odak halkası */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px;
}
.zone-dark a:focus-visible, .zone-dark button:focus-visible { outline-color: var(--brand-2); }

/* Dekorasyon */
.glow {
  position: absolute; pointer-events: none; z-index: 0;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-tint), transparent 62%);
  filter: blur(24px);
}
.grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 18%, transparent 76%);
}

/* 03 ─ Düğmeler ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand); --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 27px; border: 1px solid transparent; border-radius: 100px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .93rem; font-weight: 600; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn .icn { width: 18px; height: 18px; transition: transform .35s var(--ease); }
/* Düz kırmızı dolgu yerine ince degrade + üst iç ışık → yüzey "malzeme" gibi okunur */
.btn:not(.btn--ghost) {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,0) 58%);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 18px -10px rgba(228,25,43,.5);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-red); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn:hover .icn { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); border-color: rgba(14,23,37,.26); box-shadow: none; }
.zone-dark .btn--ghost { --btn-fg: #fff; backdrop-filter: blur(8px); }
.zone-dark .btn--ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }

.btn--sm { padding: 11px 20px; font-size: .85rem; }


/* 04 ─ Header ------------------------------------------------------------ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: height .3s var(--ease);
}
/* ⚠ "Aşağı kaydırınca header'da karartılmış bir alan açılıyor gibi" (kullanıcı,
   7 Ekim 2026). İki ayrı sebep çıktı, ikisi de ölçülerek:
   1) Header'ın kendi şeridi: yapışma anında saydam → beyaz zemin, koyu
      degradenin sönmesi ve iki logo birbirine karışıyordu (gri, kirli bant).
      Şimdi beyaz zemin + bulanıklık + çizgi + gölge TEK katmanda (::after),
      0,2 sn'de açılır; yazı/logo rengi geçişin ortasında tek hamlede döner
      (.is-switching, gft.js → header()).
   2) "Resmin üstündeki hafif karanlık açılıyor, resim gözüküyor" (aynı gün,
      ikinci ve üçüncü bildirim). Ölçülen üç ayrı belirti, üçü de giderildi:
      a) Koyu degrade header'ın 56 px ALTINA, resmin üstüne taşıyordu ve
         yapışınca sönüyordu: header'ın altındaki resim bandı +12 parlaklık
         birimi (≈%28) aydınlanıyordu (39/41 px kaydırma görüntüleri).
      b) Degrade resme taşınınca (ara çözüm) bu kez resimle birlikte kaydı:
         header henüz şeffafken, ilk 40 px'de header'ın arkası +14 birim
         aydınlanıyordu — karanlık yine "açılıyordu", yalnız yavaşça.
      c) Beyaz panel %92 + bulanıklıktı: koyu resim içinden sızıyor, header
         resmin üstündeyken GRİ (≈236) görünüyor, resim bitince beyaza
         açılıyordu.
      Kural: degrade HEADER'IN İÇİNDE (64 px, kaymaz, taşmaz); panel TAM
      OPAK beyaz. Header'ın altında, resmin üstünde hiçbir zaman değişen bir
      katman yok — denetim.php bu üç koşula bekçi.
   Beyaz panel sabit 64 px (yapışık yükseklik): header 76 → 64 küçülürken
   panelin alt kenarı resmin üstünde kayıp ince bir beyaz şerit bırakmasın. */
/* Menü yazıları açık renkli fotoğrafta da okunsun. 64 px'te sıfıra iner:
   yapışık panelle AYNI kutu, panelin altında söner — dışında hiçbir yeri
   karartmaz. ⚠ Header'ın altına uzatma, resme (hero) de taşıma (bkz. a, b). */
.header::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 64px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,10,17,.78) 0%, rgba(6,10,17,.62) 30%,
                              rgba(6,10,17,.44) 55%, rgba(6,10,17,.2) 78%, transparent 100%);
  transition: opacity .2s ease-out;
}
.header.is-stuck::before,
body.has-light-header .header::before,
body.is-menu-open .header::before { opacity: 0; }
.header::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 64px; z-index: -1; pointer-events: none;
  background: #fff;   /* ⚠ yarı saydam + backdrop-filter YAPMA (bkz. c) */
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 8px 30px -22px rgba(14,23,37,.45);
  opacity: 0; transition: opacity .2s ease-out;
}
.header.is-stuck { height: 64px; }
.header.is-stuck::after { opacity: 1; }
/* Yapışma/çözülme anında renkler yumuşak geçmez: zeminin yarısına gelindiğinde
   tek hamlede döner (yarı saydam iki logo ve gri üstünde gri yazı olmasın).
   Yalnız bu kısa anda geçerli; menü üzerine gelme efektleri etkilenmez. */
.header.is-switching .logo img { transition: height .3s var(--ease), opacity 0s linear .08s; }
.header.is-switching .nav__link,
.header.is-switching .lang__btn,
.header.is-switching .burger,
.header.is-switching .btn--ghost { transition: color 0s linear .08s, border-color 0s linear .08s, background-color 0s linear .08s; }
.header.is-switching .burger span,
.header.is-switching .burger span::before,
.header.is-switching .burger span::after { transition: transform .35s var(--ease), top .25s, background 0s linear .08s; }

/* Koyu hero'su olmayan sayfalarda (404 vb.) header en tepede de açık tema */
/* Koyu hero yoksa panel en tepede de görünür: header'ın tam boyunu kaplar. */
body.has-light-header .header::after { opacity: 1; height: 100%; }
body.has-light-header .logo .logo--light { opacity: 0; }
body.has-light-header .logo .logo--dark  { opacity: 1; }
body.has-light-header .nav__link,
body.has-light-header .lang__btn { color: var(--muted); }
body.has-light-header .nav__item--active > .nav__link,
body.has-light-header .nav__link:hover { color: var(--text-strong); }
body.has-light-header .lang__btn,
body.has-light-header .burger { border-color: var(--line); }
body.has-light-header .burger span,
body.has-light-header .burger span::before,
body.has-light-header .burger span::after { background: var(--text-strong); }

.header__inner {
  width: 100%; max-width: 1560px; margin-inline: auto;
  padding-inline: var(--gutter); display: flex; align-items: center; gap: 22px;
}

.logo { display: flex; align-items: center; flex: none; position: relative; }
.logo img { height: 36px; width: auto; transition: height .4s var(--ease), opacity .3s; }
.logo .logo--dark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.header.is-stuck .logo .logo--light { opacity: 0; }
.header.is-stuck .logo .logo--dark  { opacity: 1; }
.header.is-stuck .logo img { height: 32px; }

/* Menü — 29 Eylül 2026'da sadeleşti. Belirti (kullanıcı): "daha modern menü
   olsun, bir tık küçültelim, çok büyük menü". Eskiden BÜYÜK HARF, 600 ağırlık,
   .035em aralık: 13.6px'lik büyük harf gözde lowercase 16px'ten iri duruyor ve
   her bağlantı bir etiket gibi bağırıyordu. Artık normal yazım, 500 ağırlık,
   sıfır aralık; header 84 → 76px, logo 40 → 36px. Kırmızı alt çizgi (aktif
   sayfa) yerinde. Türkçe büyük harf dönüşümü de kalktı: "ONLİNE" gibi
   yabancı kelimelerde noktalı İ çıkmıyor. */
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; letter-spacing: -.005em;
  color: rgba(255,255,255,.82); white-space: nowrap;
  transition: color .25s, background .25s;
}
.header.is-stuck .nav__link { color: var(--muted); }
.nav__link:hover, .nav__item.is-open > .nav__link { color: #fff; background: rgba(255,255,255,.12); }
.header.is-stuck .nav__link:hover,
.header.is-stuck .nav__item.is-open > .nav__link { color: var(--text-strong); background: rgba(14,23,37,.05); }
.nav__item--active > .nav__link { color: #fff; }
.header.is-stuck .nav__item--active > .nav__link { color: var(--text-strong); }
.nav__item--active > .nav__link { font-weight: 600; }
.nav__item--active > .nav__link::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 1px;
  height: 2px; background: var(--brand); border-radius: 2px;
}
.nav__caret { width: 10px; height: 10px; opacity: .6; transition: transform .3s; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* Bağlantı ile açılır menü arasındaki boşluk fareyi kaçırıyordu:
   görünmez bir köprü ile hover kesintisiz olur.
   ⚠ ::before kullanılıyor — ::after zaten aktif öğenin kırmızı alt çizgisi.
     Aynı sözde-elemanı iki kural hedeflerse özellikler birleşir ve çizgi
     tam genişlikte 14px'lik bir bloğa dönüşür. */
.nav__item--has-sub > .nav__link { position: relative; }
.nav__item--has-sub > .nav__link::before {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}

.nav__sub {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 268px; padding: 9px; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__item:hover .nav__sub, .nav__item.is-open .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 10px; font-size: .9rem; color: var(--muted);
  transition: background .2s, color .2s, padding-left .2s;
}
.nav__sub a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: 0; transition: opacity .2s; }
.nav__sub a:hover { background: var(--bg-alt); color: var(--text-strong); padding-left: 18px; }
.nav__sub a:hover::before { opacity: 1; }
.nav__sub li.is-active a { color: var(--text-strong); font-weight: 600; }
.nav__sub li.is-active a::before { opacity: 1; }

.header__side { display: flex; align-items: center; gap: 10px; flex: none; }
.header .btn--sm { padding: 10px 18px; font-size: .84rem; }

/* Header'daki hayalet düğme ("Kargom Nerede"): hero üzerindeyken BEYAZ olmalı,
   header beyaza dönünce koyu. Aksi hâlde koyu hero üzerinde okunmuyor. */
.header .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.34); }
.header .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); }
.header.is-stuck .btn--ghost,
body.has-light-header .header .btn--ghost { --btn-fg: var(--text); border-color: var(--line); }
.header.is-stuck .btn--ghost:hover,
body.has-light-header .header .btn--ghost:hover { background: var(--bg-alt); border-color: rgba(14,23,37,.26); }

.lang { position: relative; }
.lang__btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 100px;
  background: transparent; cursor: pointer;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.9);
  transition: border-color .25s, background .25s, color .25s;
}
.header.is-stuck .lang__btn { border-color: var(--line); color: var(--muted); }
.lang__btn:hover { background: rgba(255,255,255,.12); }
.header.is-stuck .lang__btn:hover { background: var(--bg-alt); color: var(--text-strong); }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 150px; padding: 8px; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.lang.is-open .lang__list { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__list a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .88rem; color: var(--muted); }
.lang__list a:hover { background: var(--bg-alt); color: var(--text-strong); }
.lang__list li.is-active a { color: var(--brand); font-weight: 600; }

.burger {
  display: none; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; transition: border-color .25s, background .25s;
}
.header.is-stuck .burger { border-color: var(--line); }
.burger span { position: relative; display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease), top .25s;
}
.header.is-stuck .burger span,
.header.is-stuck .burger span::before,
.header.is-stuck .burger span::after { background: var(--text-strong); }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
/* ⚠ Menü beyaz panelle açılır; header hâlâ şeffaf/koyu modda kalırsa
   beyaz logo beyaz zeminde kaybolur. Menü açıkken header açık temaya geçer. */
body.is-menu-open .header::after { opacity: 1; height: 100%; background: rgba(255, 255, 255, .96); }
body.is-menu-open .logo .logo--light { opacity: 0; }
body.is-menu-open .logo .logo--dark  { opacity: 1; }
body.is-menu-open .lang__btn { color: var(--muted); border-color: var(--line); }
body.is-menu-open .burger { border-color: var(--line); }

body.is-menu-open .burger span { background: transparent !important; }
body.is-menu-open .burger span::before { top: 0; transform: rotate(45deg); background: var(--text-strong); }
body.is-menu-open .burger span::after  { top: 0; transform: rotate(-45deg); background: var(--text-strong); }
body.is-menu-open .burger { border-color: var(--line); }

/* Mobil tam ekran menü */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: #fff; padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
  overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
body.is-menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu__bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 6%, var(--brand-tint), transparent 52%);
}
.mobile-menu__list { list-style: none; margin: 0; padding: 0; position: relative; }
.mobile-menu__list > li { border-bottom: 1px solid var(--line-soft); }
.mobile-menu__list > li > a,
.mobile-menu__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 17px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-strong); text-align: left;
}
.mobile-menu__list > li > a .icn { color: var(--brand); width: 18px; }
.mobile-menu__toggle .icn { width: 16px; color: var(--brand); transition: transform .3s; }
.mobile-menu__group.is-open .mobile-menu__toggle .icn { transform: rotate(45deg); }
/* Alt boşluk listenin İÇİNDE (son madde): kapalıyken `max-height: 0` dolguyu
   kesemiyor, 8 px'lik dolgu ilk bağlantının sol çizgisini "Hizmetler"in altında
   küçük bir çentik olarak gösteriyordu. */
.mobile-menu__sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.mobile-menu__sub > li:last-child { padding-bottom: 8px; }
.mobile-menu__group.is-open .mobile-menu__sub { max-height: 560px; }
.mobile-menu__sub a { display: block; padding: 10px 0 10px 18px; color: var(--muted); font-size: 1rem; border-left: 2px solid var(--line-soft); }
.mobile-menu__sub a:hover { color: var(--brand); border-left-color: var(--brand); }
.mobile-menu__foot { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.mobile-menu__foot a { color: var(--muted); font-size: .95rem; }
.mobile-menu__langs { display: flex; gap: 10px; margin-top: 10px; }
.mobile-menu__langs a {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 100px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--text-strong);
}
.mobile-menu__langs a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 05 ─ Hero -------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
  padding: calc(var(--header-h) + 34px) 0 clamp(96px, 11vh, 140px);
  background: var(--night);
}
/* background-* : gömülü bulanık önizleme (bkz. .page-hero__media'daki eşi). */
.hero__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Sol taraf başlığın okunması için koyu, sağ taraf videoya bırakılır.
       ⚠ Fazla karartma videoyu tamamen yutuyordu — bu değerleri artırma. */
    linear-gradient(100deg, rgba(8,12,20,.90) 0%, rgba(8,12,20,.66) 33%, rgba(8,12,20,.18) 60%, rgba(8,12,20,.10) 100%),
    /* alt kenar: takip çubuğuna yumuşak geçiş — dar tutuluyor ki
       videonun alt yarısı kararmasın */
    linear-gradient(to top, rgba(8,12,20,.90) 0%, rgba(8,12,20,.28) 20%, transparent 36%);
}
/* Tarama çizgisi yerine ince mühendislik ızgarası — daha kurumsal durur */
.hero__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .18;
  background:
    linear-gradient(to right,  rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 96px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 96px;
  mask-image: radial-gradient(130% 100% at 50% 40%, #000 30%, transparent 78%);
}
/* Menü için üst karartma header'ın içinde (bölüm 04). ⚠ Buraya, resme
   eklenmez: resimle kayar, header'ın arkası kaydırırken aydınlanır. */
.hero .container { position: relative; z-index: 4; }
.hero__content { max-width: 900px; }

.hero__overline {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 8px 17px 8px 12px; margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 100px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.hero__overline .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-2);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,61,79,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255,61,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,61,79,0); }
}

.hero__title { margin-bottom: 24px; color: #fff; }
/* ── Başlık maskesi — ANASAYFA ve ALT SAYFALAR için ORTAK ──────────────
   Alt sayfalarda h1'in kendisi .line-mask'ti ve hiçbir overflow kuralı
   yoktu: başlık son yerinin 88px ALTINDA, tamamen görünür hâlde durup
   yukarı kayıyordu. Anasayfada ise .line sarmalayıcısı perdeliyordu.
   Sayfa geçişlerinin birbirini tutmamasının sebebi buydu (13 Eylül 2026).

   ⚠ Düz `overflow:hidden` KOPYALANMAZ. .h-display'in line-height'ı 1.03,
   Türkçe harflerin mürekkebi bu kutuyu aşıyor. Ölçüm (Sora 600, değerler
   font boyutunun %'si, pozitif = kesiliyor):
       İletişim / Online İşlemler   üst +10.5 (İ noktası)  alt +8.5 (ş)
       Kariyer                      üst  -6.5              alt +4.5 (y)
       Sınırları Aş      (anasayfa) üst -10.5              alt +8.5 (ş)
       Sektöre Değer Kat,(anasayfa) üst  -3.5              alt +4.5 (virgül)
   Son iki satır şunu söylüyor: anasayfa BUGÜN zaten kesiyordu.
   Çözüm, kırpma payı kadar padding + aynı kadar NEGATİF margin: kırpma
   kutusu büyür, yerleşim birebir aynı kalır (yükseklik değişmez).

   ⚠ h1 flex OLMALI. Normal akışta komşu negatif margin'ler çakışır
   (margin collapsing): anasayfanın iki satırı arasında -.16 ve -.14
   toplanmaz, yalnız -.16 uygulanırdı ve satır arası ~9px açılırdı.
   Flex düzeninde margin çakışması yoktur. align-items varsayılan
   `stretch` kalmalı; `flex-start` yazılırsa .line daralır ve başlık
   satır sonları kayar. */
.hero__title, .page-hero__title { display: flex; flex-direction: column; }
/* Paylar 36 başlığın (TR+EN, sayfa + hizmet) TAMAMI ölçülerek seçildi.
   Kalan en dar pay, font boyutunun %'si olarak:
       Sora .......  üst 9.5   alt  9.5
       Inter ......  üst 13.0  alt 11.0   (Sora inene kadar çizen yedek)
       system-ui ..  üst 25.0  alt  4.0
   ⚠ .14em'den başlanmıştı; o değerde system-ui ile alt pay TAM 0.0 çıkıyor,
   yani "Denizyolu Taşımacılığı"ndaki ğ kuyruğu kırpma kenarına değiyordu.
   Payı büyütmek görüntüyü değiştirmez — yalnızca zaten var olan mürekkebin
   kırpılmasını önler; küçültmeyin. */
.hero__title .line, .page-hero__title .line {
  display: block; overflow: hidden;
  padding: .20em .06em .18em;
  margin: -.20em -.06em -.18em;
  /* ⚠ Kırpma kutusu YATAYDA da kesiyor. Satıra sığmayan tek bir uzun kelime,
     eskiden (alt sayfalarda maske yokken) taşıp görünürdü; şimdi sessizce
     kesilirdi. Hizmet başlıkları PANELDEN düzenlenebiliyor, yani ileride
     böyle bir kelime girilebilir. Ölçüm: bugünkü en geniş kelime
     "Ammunition" 40px puntoda 243px, en dar kutu (320px ekran) 280px —
     37px pay var, yani bu kural şu an hiçbir başlığı etkilemiyor; yalnızca
     sığmayan kelime olduğunda devreye girer. */
  overflow-wrap: break-word;
}
.hero__title .line > span, .page-hero__title .line > span { display: block; }
.hero__title em { font-style: normal; color: var(--brand-2); }

.hero__sub { max-width: 560px; font-size: clamp(1rem, 1.25vw, 1.14rem); color: rgba(238,242,248,.82); }

.hero__stats {
  display: flex; flex-wrap: wrap; gap: 20px 46px;
  margin-top: clamp(34px, 4vh, 48px); padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 700px;
}
.hero__stat { position: relative; }
.hero__stat:not(:last-child)::after {
  content: ''; position: absolute; right: -23px; top: 3px; bottom: 3px;
  width: 1px; background: rgba(255,255,255,.15);
}
.hero__stat b {
  display: flex; align-items: flex-start; gap: 1px;
  font-family: var(--display); font-size: clamp(1.7rem, 2.3vw, 2.15rem);
  line-height: 1; letter-spacing: -.03em; color: #fff;
}
/* sup'u satır dışına taşırmadan üste hizala */
.hero__stat b sup { font-size: .42em; line-height: 1; vertical-align: baseline; color: var(--brand-2); }
.hero__stat span { display: block; margin-top: 7px; font-size: .74rem; color: rgba(238,242,248,.6); letter-spacing: .09em; text-transform: uppercase; }


/* 06 ─ Kargo takip çubuğu ------------------------------------------------ */
.track-bar { position: relative; z-index: 6; margin-top: -66px; }
.track-bar__inner {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-lg);
  padding: clamp(20px, 3vw, 30px); display: grid; gap: 18px;
}
.track-bar__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.track-bar__head h2 { font-size: 1.18rem; margin: 0 0 3px; }
.track-bar__head p { margin: 0; font-size: .9rem; color: var(--muted); }

.track-tabs { display: flex; gap: 5px; padding: 5px; background: var(--bg-alt); border-radius: 100px; }
.track-tabs button {
  padding: 9px 19px; border: 0; border-radius: 100px; background: transparent; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .3s, color .3s, box-shadow .3s;
}
.track-tabs button .icn { width: 16px; }
.track-tabs button.is-active { background: var(--brand); color: #fff; box-shadow: var(--shadow-red); }

.track-form { display: flex; gap: 12px; flex-wrap: wrap; }
.track-form input {
  flex: 1 1 280px; min-width: 0; padding: 16px 20px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: .95rem;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.track-form input::placeholder { color: #97A2B1; }
.track-form input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--brand-tint); }


/* 08 ─ Hizmet kartları --------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.services--modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .services--modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .services--modes { grid-template-columns: 1fr; } }

.svc {
  position: relative; display: flex; flex-direction: column; min-height: 392px;
  padding: 28px; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: var(--night-2); color: #fff;
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s;
}
.svc:hover { box-shadow: var(--e2); }
.svc__media { position: absolute; inset: 0; z-index: -2; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1s var(--ease); }
.svc:hover .svc__media img { transform: scale(1.13); }
.svc__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,12,20,.97) 20%, rgba(8,12,20,.72) 55%, rgba(8,12,20,.42) 100%);
  transition: background .5s;
}
.svc:hover .svc__media::after { background: linear-gradient(to top, rgba(8,12,20,.96) 14%, rgba(8,12,20,.6) 60%, rgba(8,12,20,.3) 100%); }

/* 29 Eylül 2026: ikon kutusu (.svc__icon) ve "Detaylı Bilgi" satırı (.svc__cta)
   kaldırıldı — kart fotoğraf + numara + başlık + tek cümle. Markup:
   app/views/partials/svc-card.php. Sağ üstteki yazısız ok (.svc__go) kartın
   tıklanabildiğini anlatır; üzerine gelince kırmızıya döner. */
.svc__index { font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .2em; color: rgba(255,255,255,.62); }
.svc__go {
  margin-left: auto; width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-style: normal;
  border: 1px solid rgba(255,255,255,.24); background: rgba(8,12,20,.18); backdrop-filter: blur(6px);
  transition: background .35s, border-color .35s, transform .45s var(--ease);
}
.svc__go .icn { width: 15px; height: 15px; color: #fff; transform: rotate(-45deg); transition: transform .45s var(--ease); }
.svc:hover .svc__go { background: var(--brand); border-color: var(--brand); }
.svc:hover .svc__go .icn { transform: rotate(0); }

.svc__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.svc__body { margin-top: auto; }
/* ⚠ Başlıkta `min-height: 2.5em` VARDI ve kaldırıldı. İki satırlık yer ayırıyordu;
   oysa "Denizyolu Taşımacılığı" gibi mod başlıkları kartta TEK satıra sığıyor →
   başlıkla açıklama arasında bir satırlık (~26px) boş bant kalıyordu.
   Metin bloğu `.svc__body { margin-top: auto }` ile ALTA yaslı olduğu için
   bloğun boyu kısaldıkça blok AŞAĞI iner ve görselden daha fazlası görünür.
   "Detaylı Bilgi" üstündeki boşluk da aynı sebeple 20px → 15px.
   Taşan açıklama "…" ile kesilir; tam metin detay sayfasında.

   ⚠ Ama AÇIKLAMAYA `min-height` GEREKLİ (aşağıda). Blok alta yaslı olduğu için
   açıklaması tek satıra sığan kartın başlığı, iki satıra taşan komşusundan bir
   satır (~23px) aşağıda kalıyordu — hizmet sayfalarındaki geniş kartlarda
   gözle görülüyor. İki satırlık taban veriliyor; başlığa değil yalnız
   açıklamaya, çünkü açıklamalar zaten neredeyse hep iki satır (anasayfadaki
   dört kartın dördü de öyle → orada hiçbir şey değişmiyor). */
.svc__title {
  font-size: 1.32rem; line-height: 1.25; margin-bottom: 8px; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc__text {
  font-size: .92rem; line-height: 1.6; color: rgba(238,242,248,.75); margin-bottom: 0;
  min-height: 3.2em;    /* tam iki satır — kartlar aynı hizada dursun */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.svc:hover .svc__line { transform: scaleX(1); }


/* 08b ─ Anasayfa: açılır mod panelleri (29 Eylül 2026) -------------------
   Dört mod yan yana; üzerine gelinen (ya da klavyeyle odaklanılan) panel
   genişler, fotoğrafını ve içeriğini açar. Markup: app/views/pages/home.php,
   davranış: gft.js → modes(). Marcon'daki sabit ızgaradan bilerek farklı.

   ⚠ İki katman: dar hâlin başlığı (.mode__label) ile açık hâlin içeriği
     (.mode__body) AYRI. Tek katman olsaydı panel genişlerken yazı her karede
     yeniden akar ve satırlar zıplardı. .mode__body'nin genişliği panele değil
     ekrana bağlı (vw) — bu yüzden animasyon boyunca sabit kalır. */
.modes { display: flex; gap: 12px; height: clamp(440px, 62vh, 560px); }
.mode {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); background: var(--night-2); color: #fff;
  box-shadow: var(--shadow);
  transition: flex-grow .8s var(--ease), box-shadow .5s;
}
.mode.is-open { flex-grow: 3.3; box-shadow: var(--e2); }
.mode:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.mode__media { position: absolute; inset: 0; z-index: -2; }
/* Hero'larda konu sağda (sol taraf başlık için boş üretildi) → dar dilimde de o görünsün */
.mode__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.mode.is-open .mode__media img { transform: scale(1); }
.mode__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,12,20,.95) 0%, rgba(8,12,20,.6) 45%, rgba(8,12,20,.42) 100%);
  transition: opacity .6s;
}
.mode.is-open .mode__media::after {
  background: linear-gradient(to top, rgba(8,12,20,.93) 0%, rgba(8,12,20,.5) 40%, rgba(8,12,20,.08) 72%),
              linear-gradient(to right, rgba(8,12,20,.5), transparent 58%);
}
/* açık panelin altında kırmızı çizgi — kartlardaki .svc__line ile aynı dil */
.mode::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .15s;
}
.mode.is-open::after { transform: scaleX(1); }

.mode__no {
  position: absolute; top: 26px; left: 26px;
  font-family: var(--display); font-size: .8rem; font-weight: 600; letter-spacing: .2em;
  color: rgba(255,255,255,.72); transition: color .4s;
}
.mode.is-open .mode__no { color: var(--brand-2); }
.mode__icon {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(8,12,20,.22); backdrop-filter: blur(6px);
}
.mode__icon .icn { width: 20px; height: 20px; color: #fff; }

.mode__label {
  position: absolute; left: 26px; right: 20px; bottom: 30px;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; line-height: 1.28; letter-spacing: -.01em;
  transition: opacity .35s .25s, transform .5s var(--ease) .25s;
}
.mode.is-open .mode__label { opacity: 0; transform: translateY(12px); transition-delay: 0s; }

.mode__body {
  position: absolute; left: 34px; bottom: 34px; width: clamp(300px, 32vw, 470px);
  display: grid; gap: 14px; justify-items: start;
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .25s, transform .4s var(--ease);
}
.mode.is-open .mode__body { opacity: 1; transform: none; transition: opacity .55s .3s, transform .75s var(--ease) .3s; }
.mode__title { font-family: var(--display); font-size: clamp(1.55rem, 2.2vw, 2.15rem); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.mode__lead { font-size: .98rem; line-height: 1.6; color: rgba(238,242,248,.84); max-width: 40ch; }
.mode__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mode__tags span {
  padding: 7px 12px; border-radius: 100px; font-size: .8rem; color: #fff;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
}
.mode__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-size: .9rem; font-weight: 600; }
.mode__cta i {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); box-shadow: var(--shadow-red); transition: transform .35s var(--ease);
}
.mode__cta .icn { width: 16px; height: 16px; color: #fff; }
.mode:hover .mode__cta i { transform: translateX(4px); }

@media (max-width: 1180px) { .mode.is-open { flex-grow: 2.6; } }
/* Telefon/tablet: paneller alt alta, hepsi açık (dokunarak genişletmek dar ekranda anlamsız) */
@media (max-width: 900px) {
  .modes { flex-direction: column; height: auto; gap: 14px; }
  .mode, .mode.is-open { flex: none; height: clamp(340px, 88vw, 420px); }
  .mode__label { display: none; }
  .mode__body { left: 22px; right: 22px; bottom: 24px; width: auto; opacity: 1; transform: none; pointer-events: auto; }
  .mode .mode__media::after, .mode.is-open .mode__media::after {
    background: linear-gradient(to top, rgba(8,12,20,.95) 0%, rgba(8,12,20,.55) 50%, rgba(8,12,20,.15) 100%);
  }
  .mode .mode__media img { transform: none; }
  .mode__no { color: var(--brand-2); }
}
@media (prefers-reduced-motion: reduce) {
  .mode, .mode__media img, .mode__label, .mode__body, .mode::after { transition: none !important; }
}

/* Anasayfa: 4 ana taşıma modu → 4 eşit kolon */


/* 09 ─ Küre -------------------------------------------------------------- */
.globe-section {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 72% 42%, #14203044 0%, transparent 60%), var(--night);
}
.globe-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
/* ⚠ 7 Ekim 2026'ya dek bu ızgara HİÇBİR genişlikte kırılmıyordu: telefonda metin
   sütunu ~150 px kalıyor, "Dünyanın her limanına uzanan bir ağ" kelime kelime,
   liman etiketleri tek tek alt alta diziliyordu (kullanıcı: "tek satır tek satır
   aşağı doğru"). Tablet ve telefonda önce metin, altında küre. */
.globe-wrap { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; margin-inline: auto; }
/* ⚠ Bu blok temel .globe-wrap kuralından SONRA olmalı (özgüllük aynı, sonra
   yazılan kazanır). Önce üstündeydi ve 441–900 px'te küre 620 px'e büyüyordu. */
@media (max-width: 900px) {
  .globe-layout { grid-template-columns: 1fr; gap: 26px; }
  .globe-wrap { max-width: min(440px, 100%); }
}
.globe-wrap canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }

/* GFT amblemi: kürenin dış hatlarıyla eş merkezli filigran. */
.globe-mark {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  width: 104%; height: auto;
  transform: translate(-49.26%, -49.19%);
  color: #fff; opacity: .14;
  pointer-events: none;
}
.globe-wrap canvas:active { cursor: grabbing; }
.globe-hint {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(148,162,182,.65);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.globe-hint .icn { width: 15px; }

/* Öğe sayısı tek kalınca son satırda yalnız bir kutu kalıyordu →
   doğal genişlikte akan etiketler */
.hub-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.hub {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px;
  border: 1px solid var(--line-soft); border-radius: 11px; font-size: .83rem; color: var(--muted);
  background: rgba(255,255,255,.03);
  transition: border-color .3s, color .3s, background .3s;
}
/* ⚠ Bunlar <span>; tıklanabilir değil. Hover'da kenarlık/zemin değişince
   düğme sanılıp tıklanıyordu → yalnız metin hafifçe belirginleşir. */
.hub:hover { color: rgba(255, 255, 255, .92); }
.hub i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.hub--home { color: #fff; border-color: rgba(255,61,79,.45); }
.hub--home i { background: var(--brand-2); box-shadow: 0 0 10px var(--brand-2); }

/* 10 ─ Hakkımızda / sayaçlar --------------------------------------------- */
.about-visual { position: relative; }
.about-visual__img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.about-visual__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-badge {
  position: absolute; right: -18px; bottom: -22px; min-width: 196px;
  padding: 24px 28px; border-radius: var(--radius);
  background: var(--brand); color: #fff; box-shadow: var(--shadow-red);
}
/* sup, vertical-align:super ile satırın dışına taşıp rakamın üstünde
   ayrı bir satır gibi görünüyordu → flex ile üste hizalanıyor */
.about-badge b { display: flex; align-items: flex-start; gap: 1px; font-family: var(--display); font-size: 2.9rem; line-height: 1; letter-spacing: -.04em; color: #fff; }
.about-badge b sup { font-size: .34em; line-height: 1; vertical-align: baseline; }
.about-badge b .icn { width: 40px; height: 40px; }
.about-badge span { font-size: .87rem; opacity: .95; }

/* Doğal genişliği sütundan dar olan görseller için */
.media-fill { border-radius: var(--radius-lg); overflow: hidden; }
.media-fill img { width: 100%; height: auto; }

.counters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
}
.counter { padding: 32px 26px; background: var(--surface); text-align: center; transition: background .35s; }
.counter__num { justify-content: center; }
.counter:hover { background: var(--surface-2); }
.counter__num {
  display: flex; align-items: flex-start; justify-content: center; gap: 2px;
  font-family: var(--display); font-size: clamp(2.3rem, 3.8vw, 3.2rem); font-weight: 600;
  line-height: 1; letter-spacing: -.04em; color: var(--text-strong);
}
.counter__num sup { font-size: .3em; line-height: 1.1; vertical-align: baseline; color: var(--brand); letter-spacing: 0; }
.counter__label { margin-top: 9px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.counter__sub { margin-top: 3px; font-size: .86rem; color: var(--muted); }

/* 11 ─ Değer ızgarası ----------------------------------------------------- */
/* (Anasayfadaki "Güçlü Özelliklerimiz" ızgarası 30 Eylül 2026'da bölümle birlikte kalktı) */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.value {
  padding: 32px 28px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface);
  transition: transform .45s var(--ease), box-shadow .45s, border-color .35s;
}
.value:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(228,25,43,.28); }
.value img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 16px; }
.value h3 { font-size: 1.1rem; margin-bottom: 11px; }
.value p { font-size: .92rem; color: var(--muted); margin: 0; }

/* 12 ─ Rota bölümü ------------------------------------------------------- */
.route-section { position: relative; overflow: hidden; background: var(--bg-alt); }
.route-canvas { position: relative; margin-top: 46px; }
.route-canvas svg { width: 100%; height: auto; overflow: visible; }
.route-path { fill: none; stroke: rgba(14,23,37,.16); stroke-width: 1.5; stroke-dasharray: 6 8; }
.route-progress { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; }
.route-node circle.ring { fill: none; stroke: rgba(14,23,37,.14); stroke-width: 1.5; }
.route-node circle.core { fill: var(--bg-alt); stroke: #9AA5B4; stroke-width: 2; }
.route-node.is-on circle.core { fill: var(--brand); stroke: var(--brand); }
.route-node.is-on circle.ring { stroke: rgba(228,25,43,.4); }
.route-node text { font-family: var(--font); font-size: 13px; font-weight: 500; fill: var(--muted); }
.route-node.is-on text { fill: var(--text-strong); }
.route-vehicle { transition: opacity .3s; }
/* Renkler markup'taki sabit hex yerine token'dan gelir */
.route-vehicle > circle:first-child { fill: var(--brand); }
.route-vehicle > circle + circle { stroke: rgba(228, 25, 43, .35); }

.route-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 42px; }
.route-step { padding-top: 20px; border-top: 2px solid var(--line-soft); }
.route-step em { display: block; font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.route-step b { display: block; font-family: var(--display); font-size: 1.02rem; margin-bottom: 7px; color: var(--text-strong); }
.route-step span { font-size: .89rem; color: var(--muted); }
/* Koyu zemin eşi — hizmet listesi boş bir hizmet sayfasında süreç bölümü koyu
   çizilir (service-koyu.php → $darkFlow). Zemin --bg-alt token'ından kendiliğinden
   koyulaşır; yalnız açık zemine göre sabit yazılmış çizgiler çevrilir. */
.route-section.zone-dark .route-path { stroke: rgba(255,255,255,.2); }
.route-section.zone-dark .route-node circle.ring { stroke: rgba(255,255,255,.16); }
.route-section.zone-dark .route-node circle.core { stroke: #6B778A; }
.route-section.zone-dark .route-node.is-on circle.core { fill: var(--brand-2); stroke: var(--brand-2); }

/* 12b ─ Rakamlarla GFT ---------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft);
         border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.fact {
  display: flex; flex-direction: column; gap: 5px;
  padding: 28px 24px 26px; background: var(--surface);
  transition: background .35s;
}
.fact:hover { background: #fff; }
.fact__num {
  font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600;
  line-height: 1; letter-spacing: -.03em; color: var(--brand);
}
.fact__label { font-size: .92rem; font-weight: 600; color: var(--text-strong); }
.fact__note { font-size: .82rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 1024px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .facts { grid-template-columns: 1fr; } }

/* 12c ─ Üyelikler bandı --------------------------------------------------- */
.memberships { padding: clamp(38px, 4.2vw, 58px) 0; background: var(--bg-alt); border-top: 1px solid var(--line-soft); }
.memberships__head { text-align: center; margin-bottom: 30px; }
.memberships__head .overline { justify-content: center; }
.memberships__lead { max-width: 640px; margin: 0 auto; font-size: .95rem; color: var(--muted); }

/* Tüm kutular aynı ölçüde, sabit yükseklik. Logolu ve yazılı rozetler yan yana
   düzgün dursun diye kart ölçüsü ortak.
   Masaüstünde tek satır, kutular üye SAYISINA göre eşit bölünür; tablette 3,
   telefonda 2 sütun ve eksik kalan son satır ORTALANIR. (8 Ekim 2026: önce sabit
   6 sütunluk ızgaraydı; Pangea çıkınca masaüstünde sonda boş bir kutu, tablet ve
   telefonda yarım satır kalıyordu. Liste panelden değişebildiği için sayıdan
   bağımsız.) */
.memberships__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.memberships__list li { display: flex; flex: 1 1 0; min-width: 0; }
.member {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  height: 118px; padding: 14px 12px; text-align: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s;
}
a.member:hover { border-color: rgba(228,25,43,.28); transform: translateY(-3px); box-shadow: var(--e1); }

.member__name {
  font-family: var(--display); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2; color: var(--slate);
  transition: color .35s;
}
.member:hover .member__name { color: var(--text-strong); }
.member__note {
  font-size: .71rem; line-height: 1.35; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Resmi logo — farklı en-boy oranlarını optik olarak dengele (yükseklik
   memberships.php → 'logo_h' alanından geliyor) */
.member--logo picture, .member--logo img { display: block; }
.member--logo img {
  max-width: 100%; width: auto; object-fit: contain;
  /* Logolu ve yazılı rozetler aynı optik ağırlıkta okunsun diye logolar
     boştayken nötrleniyor; üzerine gelince kendi rengine dönüyor. */
  filter: grayscale(1) contrast(1.04) opacity(.8);
  transition: filter .4s var(--ease);
}
.member--logo:hover img { filter: grayscale(0) contrast(1) opacity(1); }

@media (max-width: 1100px) { .memberships__list li { flex: 0 0 calc((100% - 24px) / 3); } }
@media (max-width: 560px)  { .memberships__list li { flex: 0 0 calc((100% - 12px) / 2); } .member { height: 104px; } }

/* 12d ─ Teklif formu ------------------------------------------------------ */
.quote-layout {
  display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.quote-aside { position: sticky; top: calc(var(--header-h) + 18px); }
.quote-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.quote-points li { display: flex; gap: 12px; font-size: .93rem; color: var(--muted); }
.quote-points .icn { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--brand); }
.quote-aside__contact {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  display: grid; gap: 12px;
}

.form-step {
  display: flex; align-items: center; gap: 13px;
  margin: 30px 0 4px; padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.form-step--first { margin-top: 4px; padding-top: 0; border-top: 0; }
.form-step__no {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.form-step__title { margin: 0; font-size: 1.06rem; }

/* ⚠ Ozgulukte esitlik: temel .form__row kurali bu dosyada DAHA SONRA geldigi
   icin burayi eziyordu. Cift sinif ile ozgulugu artiriyoruz. */
.form__row.form__row--3 { grid-template-columns: repeat(3, 1fr); }

.field select {
  width: 100%; padding: 14px 17px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .95rem;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235C6879' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color .25s, box-shadow .25s;
}
/* ⚠ Burada bir zamanlar `.field select:focus { … box-shadow: 0 0 0 4px … }`
   vardı. Aynı seçici bölüm 13'te (form alanlarının odak halkası) TEKRAR
   tanımlandığı ve o kural dosyada SONRA geldiği için buradaki hiçbir zaman
   uygulanmıyordu — "yazdım ama olmuyor" tuzağının ta kendisi.
   Odak halkasının tek yetkili yeri: bölüm 13, `.field input:focus, …`. */
.field input[type="date"] { cursor: text; }
/* Takvim simgesi marka rengine yakin bir tona cekiliyor */
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }

/* Taşıma modu seçimi: radyo düğmeleri yerine çip */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-flex; align-items: center; padding: 11px 18px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--surface);
  font-size: .88rem; font-weight: 600; color: var(--muted);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.chip:hover span { border-color: rgba(228,25,43,.4); color: var(--text-strong); }
.chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-red); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }

.quote-flags {
  display: grid; gap: 14px; margin-top: 8px; padding: 20px 22px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-2);
}
.field.is-hidden { display: none; }

@media (max-width: 900px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-aside { position: static; }
  .form__row.form__row--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .form__row.form__row--3 { grid-template-columns: 1fr; } }

/* Rota SVG'si 1200 birimlik viewBox'ı konteyner genişliğine ölçekliyor;
   390px'lik ekranda 13px'lik etiketler ~4px'e düşüp okunamaz hâle geliyordu.
   Adımların tam metni zaten altındaki .route-steps listesinde var. */
@media (max-width: 760px) {
  .route-canvas { display: none; }
}

/* 12e ─ "Hızlı Teklif Al" kutusu ------------------------------------------
   7 Ekim 2026: WhatsApp kutusunun yerine (markup: partials/quick-quote.php,
   davranış: gft.js → quickQuote()). Başlatıcı sitenin teklif düğmesiyle aynı
   kırmızı; panelin başı Kariyer/hizmet panellerindeki koyu degrade. */
.qq__launcher {
  position: fixed; right: 20px; bottom: calc(20px + var(--consent-h, 0px)); z-index: 95;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px 11px 14px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--brand); color: #fff; font-size: .84rem; font-weight: 600;
  box-shadow: var(--shadow-red);
  transition: transform .3s var(--ease), box-shadow .3s, background .3s;
}
.qq__launcher:hover { transform: translateY(-2px); background: var(--brand-ink); }
.qq__launcher .icn { width: 18px; height: 18px; flex: none; }
.qq__launcher-icon, .qq__launcher-close { display: inline-flex; }
.qq__launcher-close { display: none; }
.qq__launcher-label { white-space: nowrap; }
.qq.is-open .qq__launcher { background: var(--night); padding: 11px 12px; box-shadow: var(--e2); }
.qq.is-open .qq__launcher-icon, .qq.is-open .qq__launcher-label { display: none; }
.qq.is-open .qq__launcher-close { display: inline-flex; }

/* Panel — kısa ekranda görünür alana sığar, gövde kendi içinde kayar */
.qq__panel {
  position: fixed; right: 20px; bottom: calc(76px + var(--consent-h, 0px)); z-index: 95;
  width: 384px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 176px);
  max-height: calc(100dvh - 176px);
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: var(--surface); color: var(--text);
  box-shadow: var(--e3), 0 0 0 1px rgba(10, 15, 24, .06);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom right;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.qq__panel[hidden] { display: none; }
.qq.is-open .qq__panel { opacity: 1; transform: none; }

.qq__head {
  flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 16px 20px;
  background: linear-gradient(155deg, #131C29 0%, var(--night) 60%, #1A0D11 100%); color: #fff;
}
.qq__head b { display: block; font-family: var(--display); font-size: 1.06rem; font-weight: 600; }
.qq__head p { margin: 4px 0 0; font-size: .8rem; line-height: 1.45; color: rgba(238, 242, 248, .7); }
.qq__close {
  margin-left: auto; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  transition: background .25s;
}
.qq__close:hover { background: rgba(255, 255, 255, .2); }
.qq__close .icn { width: 15px; height: 15px; }

.qq__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px 18px; }

/* Doğrudan iletişim: arayan ya da e-posta yazmak isteyen formu doldurmasın */
/* Telefon kısa, e-posta uzun: telefon kendi genişliğini alır, kalan e-postanın */
.qq__direct { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.qq__direct a {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 10px;
  border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-2);
  font-size: .78rem; font-weight: 500; color: var(--text-strong); transition: border-color .25s;
}
.qq__direct a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq__direct a:hover { border-color: rgba(228, 25, 43, .35); }
.qq__direct .icn { width: 16px; height: 16px; flex: none; color: var(--brand); }

.qq__form { display: grid; gap: 9px; }
.qq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.qq__form input[type="text"], .qq__form input[type="email"], .qq__form input[type="tel"], .qq__form textarea {
  width: 100%; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: .86rem; color: var(--text-strong);
  transition: border-color .2s, box-shadow .2s;
}
.qq__form textarea { min-height: 58px; resize: vertical; }
.qq__form input:focus, .qq__form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* ⚠ Eleman seçicili: yukarıdaki input[type=…] kuralı (0,2,1) yalnız sınıf +
   öznitelik (0,2,0) taşıyan bir kuralı eziyordu — metin kutuları hiç kızarmıyordu. */
.qq__form input[aria-invalid="true"], .qq__form textarea[aria-invalid="true"] { border-color: var(--danger); }

/* Taşıma modu: dört ikonlu seçim */
.qq__modes { min-width: 0; margin: 0 0 2px; padding: 0; border: 0; }
.qq__modes legend {
  padding: 0; margin-bottom: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}
.qq__modes-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.qq__modes label { position: relative; cursor: pointer; }
.qq__modes input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.qq__modes label span {
  display: grid; justify-items: center; gap: 5px; padding: 9px 4px 8px;
  border: 1px solid var(--line); border-radius: 11px;
  font-size: .72rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted);
  transition: border-color .2s, color .2s, background .2s;
}
.qq__modes .icn { width: 19px; height: 19px; }
.qq__modes label:hover span { border-color: rgba(228, 25, 43, .35); }
.qq__modes input:checked + span { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }
.qq__modes input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-tint); }
.qq__modes.is-invalid label span { border-color: var(--danger); }

.qq__kvkk { display: flex; align-items: flex-start; gap: 9px; margin-top: 2px; font-size: .76rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.qq__kvkk input { flex: none; margin-top: 2px; accent-color: var(--brand); }
.qq__kvkk a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
.qq__kvkk.is-invalid { color: var(--danger); }

.qq__status {
  padding: 9px 11px; border: 1px solid var(--danger-line); border-radius: 10px;
  background: var(--danger-tint); font-size: .8rem; line-height: 1.45; color: var(--danger);
}
.qq__status.is-ok { border-color: var(--success-line); background: var(--success-tint); color: var(--success); }
/* Gönderildi: yalnız teşekkür satırı kalır */
.qq__form.is-done > :not(.qq__status) { display: none; }

.qq__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 3px; }
.qq__actions a { font-size: .78rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.qq__actions a:hover { color: var(--brand); }

@media (max-width: 560px) {
  .qq__launcher { right: 14px; bottom: calc(14px + var(--consent-h, 0px)); gap: 7px; padding: 9px 14px 9px 12px; font-size: .79rem; }
  .qq__launcher .icn { width: 16px; height: 16px; }
  .qq.is-open .qq__launcher { padding: 10px; }
  .qq__panel { right: 12px; left: 12px; bottom: calc(64px + var(--consent-h, 0px)); width: auto; max-width: none; }
  /* iOS 16 pikselin altındaki kutuya dokununca sayfayı yakınlaştırır */
  .qq__form input[type="text"], .qq__form input[type="email"], .qq__form input[type="tel"], .qq__form textarea { font-size: 16px; }
}
/* Kutu açıkken "yukarı çık" düğmesi panelin kenarından taşmasın */
body.qq-open .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 370px) {
  .qq__launcher-label { display: none; }
  .qq__direct { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .qq__panel { transition: none; }
}

/* 13 ─ Formlar & CTA ----------------------------------------------------- */
.cta { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cta__bg { position: absolute; inset: 0; z-index: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8,12,20,.96) 28%, rgba(8,12,20,.7) 100%); }
.cta__inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 60px); padding: clamp(30px, 5vw, 60px); align-items: center;
}

.form { display: grid; gap: 15px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: grid; gap: 6px; }
.field > label { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field input[type="number"], .field input[type="search"],
.field textarea {
  width: 100%; padding: 14px 17px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .95rem;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
/* Tarih alani: yukseklik diger alanlarla ayni olsun (native ic yerlesim daha kisa) */
.field input[type="date"] { min-height: 54px; }
.field textarea { min-height: 128px; resize: vertical; }
/* Fare ile odaklanınca yumuşak halka… */
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(228, 25, 43, .18);
}
/* …klavye ile odaklanınca HER ZAMAN görünür çerçeve.
   ⚠ Bu kural yukarıdaki :focus kuralından SONRA gelmeli; aynı özgüllükte
     olduğu için önce yazılırsa outline:none tarafından eziliyor. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.field input::placeholder, .field textarea::placeholder { color: #97A2B1; }
/* Hata durumu yalnız input/textarea'ya iniyordu; select, dosya, çip ve
   KVKK onayında hiçbir görsel karşılığı yoktu. */
.field.has-error input,
.field.has-error textarea,
.field.has-error select,
.field--file.has-error input[type="file"] {
  border-width: 2px; border-color: var(--danger); background: var(--danger-tint);
}
.field.has-error > label { color: var(--danger); }
.field.has-error .chip span { border-color: rgba(180, 35, 24, .45); }
.check.has-error { color: var(--danger); }
.check.has-error input { outline: 2px solid var(--danger); outline-offset: 2px; }

.field__error {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--danger);
}
.field__error::before {
  content: '!'; flex: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 15px; text-align: center;
}

/* Zorunlu alan işareti — required özniteliğinden otomatik türer,
   markup'ta ayrıca sınıf gerekmez. */
.field:has(input[required], textarea[required], select[required]) > label::after {
  content: ' *'; color: var(--danger); font-weight: 700;
}
.field__hint { font-size: .78rem; color: var(--muted); }

.field--file input[type="file"] {
  padding: 11px 16px; font-size: .88rem; color: var(--muted); cursor: pointer;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); width: 100%;
}
.field--file input::file-selector-button {
  margin-right: 13px; padding: 8px 16px; border: 0; border-radius: 100px;
  background: var(--brand); color: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}

.check { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: var(--muted); cursor: pointer; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
.check a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Koyu zemin üzerindeki form */
.zone-dark .field input, .zone-dark .field textarea, .zone-dark .field--file input[type="file"] {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff;
}
.zone-dark .field input::placeholder, .zone-dark .field textarea::placeholder { color: rgba(238,242,248,.5); }
.zone-dark .field input:focus, .zone-dark .field textarea:focus { background: rgba(255,255,255,.11); box-shadow: 0 0 0 4px rgba(228,25,43,.22); }
.zone-dark .field > label { color: rgba(238,242,248,.62); }
.zone-dark .check { color: rgba(238,242,248,.7); }
.zone-dark .check a { color: var(--brand-2); }
.zone-dark .field__error { color: #FCA5A5; }

.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 19px; border-radius: 13px; border: 1px solid; font-size: .92rem;
}
.alert .icn { width: 20px; height: 20px; margin-top: 2px; }
.alert--ok  { background: var(--success-tint); border-color: var(--success-line); color: var(--success); }
.alert--err { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }
.zone-dark .alert--ok  { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.34); color: #6EE7B7; }
.zone-dark .alert--err { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.34); color: #FCA5A5; }

/* 14 ─ İç sayfa hero ----------------------------------------------------- */
.page-hero {
  position: relative; min-height: clamp(360px, 50vh, 500px);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 56px) 0 clamp(44px, 5vw, 68px);
  overflow: hidden; background: var(--night);
}
/* background-* : gömülü bulanık önizleme için (satır içi style ile gelir,
   bkz. helpers.php → lqip()). Önizleme 20 piksel genişliğinde; tarayıcı
   büyütürken yumuşattığı için bulanık bir fotoğraf gibi görünür ve üstündeki
   koyu degrade (.page-hero::after) blokluğu iyice gizler. Görsel inince <img> kapatır. */
.page-hero__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
/* Karartma FOTOĞRAFIN değil BÖLÜMÜN katmanı: fotoğraf (.page-hero__media)
   parallax'la kayar, karartma yerinde durur. Kullanıcı (7 Ekim 2026): "sayfanın
   ortasına geldikten sonra aşağı indikçe fotoğrafın en alt kısmında karartı
   yukarı doğru gidiyor ve arkadaki tam resim yavaş yavaş çıkıyor". Karartma
   eskiden .page-hero__media::after idi; parallax onu da fotoğrafla birlikte
   yukarı taşıyordu. ~250 px kaydırmadan sonra alt kenarı bölümün içine
   giriyor, altında karartmasız fotoğraf şeridi açılıyordu (Karayolu, 1536×730:
   en alt 14 px'in parlaklığı 21 → 73). ⚠ Geri .page-hero__media::after YAPMA.
   Fotoğrafın kendi kenarı da görünmesin diye parallax payla sınırlı (gft.js). */
/* Tam kadraj (page-hero.php → $heroTamKadraj): fotoğrafın kendi %4 büyütmesi yok,
   parallax da %2 (gft.js, data-parallax-olcek). İletişim'deki ofis girişinde tavan ve
   amblem ≈2:1 ekranda ancak böyle birlikte sığıyor. */
.page-hero--tam-kadraj .page-hero__media img { transform: none; }
/* Dikey ekranda ayrı yatay kadraj: page-hero.php → $heroFocusDar ve hizmet
   hero'ları (service-koyu.php → $odakDar). Satır içi object-position'ı ezmek
   için !important; yalnız değişkeni taşıyan görselde çalışır. */
@media (max-aspect-ratio: 1/1) {
  .page-hero__media img[style*="--odak-dar"] { object-position: var(--odak-dar) !important; }
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,12,20,.97) 3%, rgba(8,12,20,.6) 58%, rgba(8,12,20,.72) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title { margin: 0; color: #fff; }
.page-hero .overline { color: var(--brand-2); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 16px; font-size: .83rem; color: rgba(238,242,248,.6); }
.crumbs a:hover { color: #fff; }
.crumbs .icn { width: 12px; opacity: .5; }
.crumbs span[aria-current] { color: #fff; }

/* 15 ─ Hizmet detay ------------------------------------------------------ */
.svc-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(30px, 4vw, 58px); align-items: start; }
.svc-detail__img { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 34px; box-shadow: var(--shadow); }
.svc-detail__img img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
/* Sayfadaki tek kırmızı vurgu .sidebar__cta panelinde; spot cümle nötr. */
.svc-detail__lead { font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); margin-bottom: 18px; }
.svc-detail__body p { color: var(--muted); }

.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px; margin: 0; padding: 0; list-style: none; }
.offers li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 17px; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface-2); font-size: .91rem;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.offers li:hover { border-color: rgba(228,25,43,.35); background: #fff; transform: translateX(3px); box-shadow: var(--shadow); }
.offers .icn { width: 17px; height: 17px; margin-top: 3px; color: var(--brand); }

.membership {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  padding: 24px 28px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface-2);
}
.membership img { width: 88px; flex: none; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid var(--line-soft); }
.membership p { flex: 1 1 320px; margin: 0; font-size: .92rem; color: var(--muted); }

.sidebar { position: sticky; top: calc(var(--header-h) + 14px); display: grid; gap: 20px; }
.sidebar__card { padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.sidebar__card .h4 { display: flex; align-items: center; gap: 10px; }
.sidebar__card .h4 .icn { color: var(--brand); }
/* .overline ile aynı görsel dil: nötr etiket, kırmızı sadece çizgi/buton. */
.sidebar__title { font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
.sidebar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sidebar__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 11px; font-size: .9rem; color: var(--muted);
  transition: background .25s, color .25s, padding-left .25s;
}
.sidebar__list a .icn { width: 13px; opacity: 0; transition: opacity .25s; }
.sidebar__list a:hover { background: var(--bg-alt); color: var(--text-strong); padding-left: 18px; }
.sidebar__list a:hover .icn { opacity: 1; }
.sidebar__list li.is-active a { background: var(--brand); color: #fff; font-weight: 600; }
.sidebar__list li.is-active a .icn { opacity: 1; }

.sidebar__cta { padding: 28px 24px; border-radius: var(--radius); background: linear-gradient(150deg, var(--brand), var(--brand-ink)); color: #fff; text-align: center; box-shadow: var(--shadow-red); }
.sidebar__cta h3 { font-size: 1.12rem; margin-bottom: 9px; color: #fff; }
.sidebar__cta p { font-size: .88rem; opacity: .92; margin-bottom: 18px; }
.sidebar__cta .btn { --btn-bg: #fff; --btn-fg: var(--brand-ink); }

/* 15b ─ Hizmet detay — "Koyu Ritim" düzeni --------------------------------
   views/pages/service-koyu.php ile gelir. Fikri: anasayfayı canlı kılan şey
   AÇIK ve KOYU bölümlerin dönüşümlü gitmesi; alt sayfa da aynı nabza uyar.
   Hangi hizmetin bu düzeni kullandığını app/config.php → services.new_layout
   belirler, o yüzden eski .svc-detail kuralları da yerinde duruyor.          */

/* Hero: görsel ilk ekranı kaplar. Menü zaten .page-hero üzerinde şeffaf
   durduğu için ek bir kural gerekmiyor — yalnızca yükseklik büyüyor. */
/* Görsel EKRANI TAM KAPLAR. Sabit bir oran (88vh gibi) büyük ekranlarda altta
   beyaz bir şerit bırakıyordu: 1440p'de hero 900px'te duruyor, ekran 1300px
   oluyordu. 'svh' = adres çubuğu AÇIKKEN kalan yükseklik; masaüstünde 'vh' ile
   aynıdır, mobilde ise sayfa açılır açılmaz doğru ölçüyü verir ve kaydırırken
   yükseklik zıplamaz. min-height olduğu için içerik sığmazsa bölüm büyür. */
.page-hero--full {
  min-height: 100vh;        /* svh bilmeyen eski tarayıcı yedeği */
  min-height: 100svh;
  /* Hizalama anasayfa hero'sunun (.hero) birebir aynısı: içerik dikeyde
     ORTALANIR, alt boşluk üstten fazla olduğu için optik olarak birkaç piksel
     yukarıda durur. Önce alta yaslıydı ve büyük ekranda başlık neredeyse
     ekranın dibinde kalıyordu. */
  align-items: center;
  padding: calc(var(--header-h) + 34px) 0 clamp(96px, 11vh, 140px);
}
/* Başlık, cümle ve düğmeler anasayfa hero'sunun sınıflarını kullanır
   (.h-display · .hero__sub) — sayfalar arası bütünlük için
   alt sayfaya ayrı bir ölçek tanımlanmıyor. Tek fark başlığın alt boşluğu:
   .hero__title'daki 24px'in karşılığı. */
.page-hero--full .page-hero__title { margin-bottom: 24px; }
/* Tek fark ölçü (satır uzunluğu): anasayfadaki cümle kısa, alt sayfalarınki
   uzun. 560px'de beş satıra iniyordu; punto ve satır aralığı aynı kalıyor. */
.page-hero--full .hero__sub { max-width: 62ch; }
/* Tam ekran hero'lu sayfalarda bölüm ritmi sıkılır. Sitenin standardı
   clamp(56px, 6.2vw, 104px); iki bölüm arasında 208px ediyordu ve modüller
   birbirinden kopuk duruyordu. Burada 128px'e iniyor.
   ⚠ '+' kuralı bu satırdan SONRA gelmeli: ikisinin özgüllüğü eşit, sonra
     yazılan kazanır. */
.page-hero--full ~ .section { padding-block: clamp(38px, 4.2vw, 64px); }
/* Hero'nun hemen altındaki bölüm bir tık daha yakın başlar. */
.page-hero--full + .section { padding-top: clamp(34px, 3.4vw, 58px); }
/* Kısa hero'daki karartma (üstten .97) bu yükseklikte fotoğrafı tamamen
   yutuyordu. Burada karartma YATAY: sol taraf metin için koyu, sağ taraf
   fotoğrafın nefes aldığı yer. Alttaki ikinci katman da kırıntı yazıların
   (künye çizgisi, düğmeler) okunurluğunu garanti eder. */
.page-hero--full::after {
  background:
    linear-gradient(102deg, rgba(8,12,20,.93) 0%, rgba(8,12,20,.62) 42%,
                            rgba(8,12,20,.26) 72%, rgba(8,12,20,.52) 100%),
    linear-gradient(to top, rgba(8,12,20,.82) 0%, rgba(8,12,20,.2) 38%, transparent 62%);
}
/* $heroDim = true olan sayfalar (iletişim, teklif al): soluk fotoğraflar için
   ek karartma. .page-hero--dim kuralı dosyada YUKARIDA kaldığı için tek başına
   ezilirdi; iki sınıfı birlikte hedefliyoruz. */
.page-hero--full.page-hero--dim::after {
  background:
    linear-gradient(102deg, rgba(8,12,20,.95) 0%, rgba(8,12,20,.74) 42%,
                            rgba(8,12,20,.46) 72%, rgba(8,12,20,.66) 100%),
    linear-gradient(to top, rgba(8,12,20,.86) 0%, rgba(8,12,20,.3) 38%, transparent 62%);
}
/* 14c ─ Kargo takip hero'su: hareketli rota haritası (7 Ekim 2026) --------
   Fotoğraf yerine noktalı dünya haritası + hublardan İstanbul'a akan ışıklar
   (app/views/partials/track-map.php). Harita, İstanbul ekranda --fx/--fy
   noktasına gelecek şekilde yerleşir: 360 birimlik genişlikte İstanbul
   x=209 (%58,06), y=34 (%9,44 — genişliğe oranla, çünkü birim kare). */
.track-map {
  --mw: max(150vw, 1500px);          /* ≈ 6 px/derece (1440'ta) */
  --fx: 66%; --fy: 44%;
  position: absolute; width: var(--mw); aspect-ratio: 360 / 133;
  left: calc(var(--fx) - var(--mw) * .5806);
  top: calc(var(--fy) - var(--mw) * .0944);
}
/* .page-hero__media img kuralı (cover + scale 1.04) noktaları rotalardan
   %4 kaydırırdı: burada ikisi de kutuya birebir oturmalı. */
.track-map > img, .track-map > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; transform: none;
}
.track-map__dots { opacity: .55; }
/* Haritanın üst ve alt kenarı keskin kesilmesin: yumuşakça kaybolur.
   ⚠ Maske YALNIZ durağan nokta katmanında. Bütün .track-map'e konunca her
   karede maske + harita birlikte yeniden çiziliyordu: ana iş parçacığı
   %4,5'ten %24'e çıktı (ölçüm, 7 Ekim 2026). */
.track-map__dots {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
}
.track-map__lines path { fill: none; stroke: rgba(238, 242, 248, .2); stroke-width: .2; }
/* Işık = geniş soluk hale + iz + kısa parlak uç (yuvarlak uçlu, "baş" gibi
   görünür). Üçü aynı süre/gecikmeyle (--t/--g, satır içi) birlikte ilerler.
   pathLength=100: ön uç yolun başından (0) sonuna gider, sonra yolun dışına
   çıkıp görünmez bekler (%78-100) — rotalar aynı anda yanıp sönmesin.
   ⚠ SMIL denendi: aynı görüntü Chrome'da 5 kat iş yükü — bkz. track-map.php. */
.track-map__glow, .track-map__trail, .track-map__core {
  fill: none; stroke-linecap: round; stroke-dasharray: var(--l) 300;
  animation: trackRun var(--t, 10s) linear var(--g, 0s) infinite;
}
.track-map__glow  { --l: 16;  stroke: rgba(255, 255, 255, .07); stroke-width: 1.4; }
.track-map__trail { --l: 16;  stroke: rgba(255, 255, 255, .24); stroke-width: .42; }
.track-map__core  { --l: 2.5; stroke: #fff; stroke-width: .72; }
@keyframes trackRun { 0% { stroke-dashoffset: var(--l); } 78%, 100% { stroke-dashoffset: -100; } }
.track-map__hubs circle { fill: #EEF2F8; opacity: .85; }
/* SVG içinde px = harita birimi (1°): 1.7 birim ≈ 10 px (1440 genişlikte). */
.track-map__labels text, .track-map__home-label {
  font-size: 1.7px; font-weight: 600; letter-spacing: .14px; text-transform: uppercase;
  fill: rgba(238, 242, 248, .55);
}
.track-map__home-label { font-size: 1.9px; font-weight: 700; fill: #fff; }
.track-map__badge { fill: var(--night); stroke: var(--brand); stroke-width: .22; }
.track-map__emblem { fill: var(--brand); }
.track-map__pulse {
  fill: none; stroke: var(--brand); stroke-width: .25;
  transform-box: fill-box; transform-origin: center;
  animation: trackPulse 3.2s ease-out infinite;
}
@keyframes trackPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
/* Hero ekrandan çıkınca gft.js → trackMap() durdurur. */
.track-map.is-paused * { animation-play-state: paused !important; }
@media (max-width: 760px) {
  /* Telefonda İstanbul yazıların ÜSTÜNDEKİ boş alanda (künyenin altında kalınca
     amblem "Kargom Nerede" yazısıyla çakışıyordu). */
  /* 7 Ekim 2026 akşam: İstanbul yazının ALTINDAKİ boş alanda. %17'de üst
     menünün arkasında kalıyordu (ölçüm: rozet hero'nun 19–36. pikselinde,
     menü 68 px). Hero artık 440 px, yazı ~245 px'te bitiyor → İstanbul %76. */
  .track-map { --mw: 1000px; --fx: 50%; --fy: 76%; }
  .track-map__labels, .track-map__home-label { display: none; }
}
/* ⚠ 7 Ekim 2026: harita animasyonu "hareketi azalt" ayarında da ÇALIŞIR (önce
   ışıklar ve nabız gizleniyordu). Kullanıcı: "telefon ayarlarını değiştiremeyiz
   ki her kullanıcının". Genel sıfırlama kuralı da haritayı hariç tutar
   (aşağıda, dosyanın sonundaki prefers-reduced-motion bloğu). */

/* ⚠ .page-hero__glow KALDIRILDI — geri eklemeyin.
   Hero'nun sol alt köşesine (menünün hemen altına) %34 opaklıkta kırmızı,
   60px bulanık bir leke koyuyordu; alt sayfaların ve hizmet sayfalarının
   HEPSİNDE görünüyordu. Kullanıcı: "sol altta saçma bir kırmızılık var,
   tüm sayfalarda o olmasın, kötü duruyor."
   Not: sayfa gövdelerindeki `.glow` süslemeleri (%8 --brand-tint) ve koyu
   bantlardaki `.svc-band__glow` YERİNDE — onlar rahatsız etmiyor. */

/* .section-head varsayılan olarak ALTA hizalıdır (align-items: end) ve site
   genelinde doğrusu budur. Ama hizmet girişinde sol kolon iki satırlık bir
   başlık, sağ kolon kısa bir paragraf olduğunda paragraf kutunun dibine
   yapışıp "aşağıda kalmış" gibi duruyordu (ölçüldü: karayolu sayfasında
   paragrafın üstü başlığın üstünden 54px aşağıdaydı).
   Burada üste hizalanır ve sağ kolon, sol koldaki overline bloğu kadar
   aşağı itilir → paragraf her sayfada başlıkla aynı hizada başlar. */
/* Hizmet girişi — TEK BLOK, TAM GENİŞLİK (14 Eylül 2026).
   Öncesi iki sütunluydu: solda kalın cümle, sağda açıklama paragrafı. Cümle
   kısa bir slogan olduğu sürece bu denge kuruyordu; slogan yerine tam bir
   cümle yazılınca ikisi de uzun oldu ve "yan yana iki metin bloğu" gibi
   durmaya başladı, hiçbiri baskın çıkmıyordu.
   Paragraf hero'ya (başlığın altına) taşındı. Boşalan sağ sütun kapatılmadı:
   söz artık kapsayıcının TAMAMINI yatay olarak kaplıyor ve kalın (700)
   yazılıyor. Ayrıntı zaten aşağıdaki "Sunulan Hizmetler" kartlarında.
   ⚠ Ölçü DARALTILMAZ (max-width / margin-left:auto YOK). Bir ara blok sağa
     yaslanmıştı — yanlış anlaşılmaydı, geri alındı: istenen tam genişlik.
     43px punto ve 1280px kapsayıcıda satır ~58 karakter düşüyor; büyük
     puntoda bu rahat okunan bir ölçü.
   ⚠ 7 Ekim 2026 — BU DA DEĞİŞTİ: "header altındaki kısmı sevemedim…
     marconda çok güzel yapmıştık şık". Tek cümle + çip sırası sağ yarıyı
     boş bırakıyordu. Şimdi iki sütun: solda söz + künye listesi, sağda
     markalı koyu hizmet paneli (.svc-nav). Sağ sütun METİN DEĞİL gezinme
     kartı — "yan yana iki metin bloğu" sorunu bu yüzden geri gelmiyor. */
.svc-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 392px);
  gap: clamp(36px, 6vw, 92px); align-items: center;
}
.svc-intro__title { font-weight: 700; margin-bottom: 0; font-size: clamp(1.7rem, 2.75vw, 2.45rem); }

/* Künye: hizmetin öne çıkanları (eski çip sırası). İki sütunlu, ince
   çizgilerle ayrılmış liste — teknik föy gibi okunur; tıklanabilir
   sanılmasın diye hover yok. */
.svc-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 36px);
  margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; list-style: none;
}
.svc-facts li {
  display: flex; align-items: center; gap: 13px; padding: 15px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .96rem; font-weight: 500; line-height: 1.4; color: var(--text-strong);
}
.svc-facts li:nth-child(-n+2) { border-top: 1px solid var(--line-soft); }
.svc-facts__ic {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
}
.svc-facts__ic .icn { width: 15px; height: 15px; }

/* Markalı hizmet paneli — Kariyer'deki .career-panel ile aynı kabuk
   (koyu degrade, sağ altta kırmızı ışıma, soluk amblem). Amblem burada
   sağ ALTTA: sağ üstte başlık okunun tam arkasına düşüyordu. */
.svc-nav {
  position: relative; overflow: hidden;
  padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 30px) clamp(16px, 1.6vw, 22px);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: linear-gradient(155deg, #131C29 0%, var(--night) 55%, #1A0D11 100%);
}
.svc-nav::after {
  content: ''; position: absolute; inset: auto -70px -100px auto; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(228,25,43,.24), transparent 66%);
  pointer-events: none;
}
.svc-nav__mark {
  position: absolute; right: -38px; bottom: -42px; width: 170px; height: auto;
  color: #fff; opacity: .05; pointer-events: none;
}
.svc-nav > :not(.svc-nav__mark) { position: relative; z-index: 1; }
.svc-nav__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; font-family: var(--display); font-size: 1.08rem; font-weight: 600; color: #fff;
}
.svc-nav__list { list-style: none; margin: 0; padding: 0; }
.svc-nav__list a {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 10px; align-items: center;
  padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .9rem; line-height: 1.35; color: rgba(238, 242, 248, .7);
  transition: color .25s, padding .3s var(--ease);
}
.svc-nav__list em {
  font-style: normal; font-family: var(--display); font-size: .76rem; font-weight: 600;
  letter-spacing: .04em; color: rgba(255, 61, 79, .75);
}
.svc-nav__list .icn { width: 15px; height: 15px; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--ease); }
.svc-nav__list a:hover { color: #fff; }
.svc-nav__list a:hover .icn { opacity: .8; transform: none; }
/* Bulunulan hizmet: beyaz ve kalın, numara tam kırmızı, solda kırmızı çizgi */
.svc-nav__list a[aria-current="page"] { color: #fff; font-weight: 600; padding-left: 12px; }
.svc-nav__list a[aria-current="page"]::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px;
  border-radius: 2px; background: var(--brand-2);
}
.svc-nav__list a[aria-current="page"] em { color: var(--brand-2); }
.svc-nav__list a[aria-current="page"] .icn { opacity: .9; transform: none; color: var(--brand-2); }

@media (max-width: 960px) {
  .svc-intro { grid-template-columns: 1fr; }
  /* Tablette panel tam genişlik → liste iki sütun, boy yarıya iner */
  .svc-nav__list { columns: 2; column-gap: 28px; }
  .svc-nav__list li { break-inside: avoid; }
}
@media (max-width: 560px) {
  .svc-facts { grid-template-columns: 1fr; }
  .svc-facts li:nth-child(2) { border-top: 0; }
  .svc-nav__list { columns: 1; }
}

/* Koyu hizmet bandı: arkada hizmetin kendi görseli soluk, üstünde cam kartlar */
.svc-band { overflow: hidden; }
.svc-band__media { position: absolute; inset: 0; z-index: 0; }
.svc-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.svc-band__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,15,24,.94), rgba(10,15,24,.8));
}
.svc-band__glow {
  left: -160px; top: 14%; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(228,25,43,.26), transparent 62%);
  filter: blur(60px);
}
/* Hizmetler sayfası (15 Eylül 2026): koyu bantta .svc kartının alt kenarı
   zeminle aynı tona düşüyor, kart sınırı seçilmiyordu. Açık zeminde bu işi
   gölge görüyor; koyu zeminde gölge görünmediği için ince bir kenar çizgisi.
   Kenarlık padding kutusunun dışında: görsel (.svc__media, inset:0) örtmez. */
.svc-band .svc { border: 1px solid rgba(255, 255, 255, .1); }
.svc-band .svc:hover { border-color: rgba(255, 61, 79, .42); }

.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
/* Bir hizmetin iki (demiryolu) ya da tek maddesi olabiliyor; üç kolonluk
   ızgarada yanlarında boş sütun kalıyordu. Özgüllük bilerek iki sınıflı:
   aşağıdaki medya sorgusundaki .svc-cards kuralı bunları ezmesin. */
.svc-cards.svc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-cards.svc-cards--1 { grid-template-columns: minmax(0, 620px); }
.svc-card {
  padding: clamp(22px, 2.2vw, 28px);
  border: 1px solid rgba(255, 255, 255, .11); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(12px);
  transition: border-color .35s, background .35s, transform .4s var(--ease);
}
.svc-card:hover {
  border-color: rgba(255, 61, 79, .42); background: rgba(255, 255, 255, .09);
  transform: translateY(-4px);
}
.svc-card__icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.svc-card__icon .icn { width: 24px; height: 24px; color: var(--brand-2); }
.svc-card__title { display: block; margin-top: 18px; font-family: var(--display); font-size: 1.06rem; font-weight: 600; color: #fff; }
.svc-card__text  { display: block; margin-top: 7px; font-size: .9rem; color: var(--muted); }

/* ⚠ .svc-flow / .flow-step KALDIRILDI (7 Ekim 2026): hizmet sayfasındaki süreç
   bölümü artık anasayfadakinin aynısı (partials/route.php → .route-section).
   Koyu zemin eşi bölüm 12'deki .route-section.zone-dark kurallarında. */

/* Spot cümlesi (slogan) olmayan hizmetlerde giriş tek sütun: başlık yerine
   metnin kendisi biraz büyütülür. Başlığa hizmet adını yazmak h1'i tekrar
   ederdi. */
/* ⚠ .svc-intro-solo KALDIRILDI (14 Eylül 2026). Açıklama paragrafı artık
   hero'da; giriş bölümünün "başlıksız tek sütun" yedek hâline gerek kalmadı.
   Yerine gelen kural: .svc-intro (bkz. yukarısı). */

/* Sık sorulan sorular (7 Ekim 2026, Marcon'daki gibi): solda başlık, sağda
   açılır-kapanır <details> listesi — JS gerekmez, klavyeyle de açılır.
   Aynı anda tek soru açık: name="sss" (eski tarayıcıda gft.js → sss()). */
.svc-faq__inner {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.svc-faq__list { display: grid; gap: 12px; }
.faq__item {
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  transition: border-color .3s, box-shadow .3s;
}
.faq__item[open] { border-color: rgba(228, 25, 43, .28); box-shadow: var(--shadow); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--text-strong);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icn { flex: none; width: 18px; height: 18px; color: var(--brand); transition: transform .3s var(--ease); }
.faq__item[open] summary .icn { transform: rotate(45deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius); }
.faq__item p { margin: 0; padding: 0 22px 20px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
@media (max-width: 900px) {
  .svc-faq__inner { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .faq__item summary { padding: 16px 18px; font-size: .96rem; }
  .faq__item p { padding: 0 18px 18px; }
}

/* Teklif bandı: solda metin, sağda iki düğme (anasayfadaki .cta kabuğu) */
.svc-cta { align-items: center; }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

@media (max-width: 1024px) {
  .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) { .svc-cta__actions { justify-content: flex-start; } }
@media (max-width: 620px) {
  .svc-cards, .svc-cards.svc-cards--2, .svc-cards.svc-cards--1 { grid-template-columns: 1fr; }
}

/* ══ 7 Ekim 2026 — telefon düzeni (Marcon'daki mobil dil) ═══════════════════
   Kullanıcı: "butonlar da çok büyük gibi, headerdaki resimlerde tam gözükmüyor
   mobilde … marcon güzeldi mobil olarak da".
   1) Hero telefonda EKRANI KAPLAMAZ, içerik kadar yüksek olur. 100svh dikey
      ekranda 16:9 fotoğrafın yalnız ~%26'sını gösteriyordu; içerik boyunda
      (~460 px) yaklaşık yarısı görünür. Masaüstü kararı ("tam ekran hero")
      değişmedi.
   2) Kırıntı yolu telefonda gizli (Marcon'da da yok; menü + başlık yeter).
   3) Düğmeler bir tık küçük. (Hero düğmeleri sonra tamamen kaldırıldı.)
   4) Dil seçici üst menüde görünür (Marcon gibi "TR" düğmesi ☰'un yanında). */
@media (max-width: 760px) {
  /* TEK BOY (7 Ekim 2026 akşam) — kullanıcı: "telefonda her sayfanın header
     bitişi farklı farklı … hepsi aynı olsun". İçerik boyunda iken 286–414 px
     arası değişiyordu. Şimdi bütün alt sayfa ve hizmet hero'ları 440 px; yazı
     ÜSTTEN, hepsinde aynı noktadan başlar, fotoğraf altta görünür (Marcon'un
     telefon düzeni). 440 = en uzun içerik (EN Tedarik Zinciri, 360 px'te 368)
     + alt boşluk + pay. Daha uzun bir metin girilirse o sayfa uzar, kesilmez
     (min-height). Anasayfa ayrı: video + rakamlar + takip çubuğu, içerik boyu. */
  .page-hero--full {
    min-height: 440px; align-items: flex-start;
    padding: calc(var(--header-h) + 26px) 0 40px;
  }
  .page-hero--full .crumbs { display: none; }
  .page-hero--full .page-hero__title { margin-bottom: 14px; }
  /* Yazı üstte → karartma üstte koyu, altta açık (fotoğraf nefes alır) */
  .page-hero--full::after {
    background: linear-gradient(to bottom, rgba(8,12,20,.74) 0%, rgba(8,12,20,.62) 45%,
                                           rgba(8,12,20,.5) 78%, rgba(8,12,20,.6) 100%);
  }
  .page-hero--full.page-hero--dim::after {
    background: linear-gradient(to bottom, rgba(8,12,20,.82) 0%, rgba(8,12,20,.72) 45%,
                                           rgba(8,12,20,.6) 78%, rgba(8,12,20,.68) 100%);
  }
  /* Kargo takip haritası: zemin zaten koyu; karartma yalnız yazının arkasında.
     Önce bütün hero .5–.9 karartılıyordu ve ışıklar seçilmiyordu
     ("kargom nerede çok gözükmüyor animasyon"). */
  .page-hero--full.page-hero--anim::after {
    background: linear-gradient(to bottom, rgba(8,12,20,.78) 0%, rgba(8,12,20,.6) 42%,
                                           rgba(8,12,20,.1) 62%, transparent 100%);
  }
}
/* 7 Ekim 2026 (akşam) — kullanıcı: "telefonda headerdaki yazı fontları çok büyük,
   1 tık küçültelim", rozet "o alanı küçültelim". Ölçüm (390 px): başlık 40 px,
   cümle 16 px, rozet 168×39 px idi. Başlık 31–36 px (Marcon'daki telefon ölçeği),
   cümle 15 px, rozet ~31 px yükseklik. Anasayfa ve alt sayfalar AYNI ölçek.
   ⚠ Rozet yazısı .72rem'in ALTINA inmesin: 10,6 px denendi, sitenin en küçük
   yazısı oluyordu (öteki etiketler 11,5–11,8 px). Küçülme dolgudan geliyor. */
@media (max-width: 760px) {
  .hero__title, .page-hero__title { font-size: clamp(1.9rem, 8.6vw, 2.25rem); }
  .hero__sub { font-size: .94rem; line-height: 1.6; }
  .hero__overline {
    gap: 8px; padding: 6px 13px 6px 10px; margin-bottom: 16px;
    font-size: .72rem; line-height: 1.3; letter-spacing: .15em;
  }
  .hero__overline .dot { width: 6px; height: 6px; }
  /* Anasayfa mod kartlarındaki "İthalat + İhracat + Transit" vb. etiketler
     telefonda gizli — kullanıcı: "onların içeriğindeki … alanları mobilde
     gözükmesin". Başlık, kısa açıklama ve "Detay" kalır. */
  .mode__tags { display: none; }
  /* iOS Safari 16 pikselin altındaki form alanına dokununca sayfayı
     yakınlaştırıyor ve geri açmıyor. Ölçüm (390 px): iletişim, teklif, kariyer
     ve takip formlarının bütün alanları 15,2 px idi. Hızlı teklif kutusu da
     burada (önce yalnız ≤560 px'te 16 idi — yatay iPhone 667 px'te yine
     yakınlaşıyordu); bülten footer bölümünde (temel kuralı orada, aşağıda).
     (Seçiciler temel kuralla aynı özgüllükte ve SONRA.) */
  .field input[type="text"], .field input[type="email"], .field input[type="tel"],
  .field input[type="date"], .field input[type="number"], .field input[type="search"],
  .field select, .field textarea, .track-form input,
  .qq__form input[type="text"], .qq__form input[type="email"], .qq__form input[type="tel"],
  .qq__form textarea { font-size: 16px; }
}
@media (max-width: 560px) {
  .btn { gap: 8px; padding: 12px 19px; font-size: .86rem; }
  .btn .icn { width: 16px; height: 16px; }
  .btn--sm { padding: 10px 16px; font-size: .82rem; }
}
@media (max-width: 1100px) {
  .lang__btn { min-height: 42px; padding: 0 12px; gap: 5px; font-size: .72rem; }
  .lang__btn .icn { width: 14px; height: 14px; }
}
@media (max-width: 370px) {
  .qq__launcher { min-width: 42px; min-height: 42px; justify-content: center; }
}

/* 16 ─ İletişim / kariyer / gizlilik / takip / 404 ------------------------ */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.contact-card {
  padding: 32px 28px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--surface); display: grid; gap: 16px; align-content: start; box-shadow: var(--shadow);
  transition: border-color .35s, transform .4s var(--ease);
}
.contact-card:hover { border-color: rgba(228,25,43,.3); transform: translateY(-4px); }
.contact-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.06rem; margin: 0; }
.contact-card__icon { width: 20px; height: 20px; flex: none; color: var(--brand); }
.contact-row { display: flex; align-items: flex-start; gap: 13px; font-size: .93rem; color: var(--muted); }
.contact-row .icn { width: 19px; height: 19px; margin-top: 3px; color: var(--brand); }
.contact-row a:hover { color: var(--brand); }
.zone-dark .contact-row a:hover { color: #fff; }

/* ── Harita bloğu ────────────────────────────────────────────────────────
   Google Maps gömme çerçevesi renk olarak özelleştirilemez (bunun için ücretli
   Maps JavaScript API gerekir). Bunun yerine çerçeveyi tasarlıyoruz:
   sekmeler, doygunluğu düşürülmüş görünüm (üzerine gelince canlanır) ve
   üstte yüzen adres kartı.                                                   */
.map-block {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lg);
}
.map-block__bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
.map-block__tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.map-block__tabs button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 0; border-radius: 100px; background: transparent; cursor: pointer;
  font-size: .87rem; font-weight: 600; color: var(--muted);
  transition: background .3s, color .3s, box-shadow .3s;
}
.map-block__tabs button .icn { width: 17px; height: 17px; }
.map-block__tabs button:hover { color: var(--text-strong); background: rgba(14,23,37,.05); }
.map-block__tabs button.is-active { background: var(--brand); color: #fff; box-shadow: var(--shadow-red); }

.map-block__stage { position: relative; }
.map-block__pane { display: none; position: relative; }
.map-block__pane.is-active { display: block; }
.map-block__pane iframe {
  display: block; width: 100%; height: clamp(360px, 46vh, 520px); border: 0;
  filter: saturate(.35) contrast(1.04);
  transition: filter .5s var(--ease);
}
.map-block__pane:hover iframe,
.map-block__pane:focus-within iframe { filter: none; }

/* Sağ altta: Google'ın kendi bilgi paneli sol üstte çıkıyor, çakışmasın */
.map-card {
  position: absolute; right: 20px; bottom: 20px; z-index: 2;
  display: flex; gap: 14px; max-width: 380px;
  padding: 18px 20px; border-radius: var(--radius);
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-lg);
}
.map-card__badge {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--brand); color: #fff;
}
.map-card__badge .icn { width: 20px; height: 20px; }
.map-card__body { display: grid; gap: 4px; min-width: 0; }
.map-card__body b { font-family: var(--display); font-size: .97rem; color: var(--text-strong); }
.map-card__body > span { font-size: .84rem; color: var(--muted); line-height: 1.55; }
.map-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.map-card__actions .btn { padding: 9px 16px; font-size: .8rem; }

@media (max-width: 640px) {
  .map-card { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 14px 16px; position: static; margin: 12px; }
  .map-card__actions .btn { flex: 1 1 auto; justify-content: center; }
  .map-block__pane iframe { height: 320px; filter: none; }
}

/* Soluk/geniş-alçak hero görselleri için ek karartma */
.page-hero--dim::after {
  background:
    linear-gradient(to top, rgba(8,12,20,.98) 3%, rgba(8,12,20,.78) 55%, rgba(8,12,20,.85) 100%),
    linear-gradient(105deg, rgba(8,12,20,.5), transparent 60%);
}

.docs { display: grid; gap: 11px; }
.doc {
  display: flex; align-items: center; gap: 17px; padding: 20px 24px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  transition: border-color .3s, background .3s, transform .35s var(--ease), box-shadow .35s;
}
.doc:hover { border-color: rgba(228,25,43,.35); transform: translateX(4px); box-shadow: var(--shadow); }
.doc__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--brand-tint); color: var(--brand); }
.doc__icon .icn { width: 21px; height: 21px; }
.doc h2 { font-size: .97rem; margin: 0 0 2px; font-family: var(--font); font-weight: 600; line-height: 1.45; }
/* ⚠ Sade `.doc span` yazılırsa .doc__icon'u da yakalar (daha özgül + sonra
   geliyor) ve ikon marka kırmızısı yerine gri çizilirdi. */
.doc h2 + span { font-size: .8rem; color: var(--muted); }
.doc__go { margin-left: auto; flex: none; color: var(--muted); }
.doc__go .icn { width: 18px; height: 18px; }

.tracking-panel { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--e3); }
.tracking-panel iframe { display: block; width: 100%; height: 850px; border: 0; background: #fff; }

/* Sonuç başlığı — panelin bir ÇIKTI alanı olduğunu belli eder */
.tracking-panel__head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate);
}
.tracking-panel__head > .icn { width: 16px; height: 16px; color: var(--brand); }
.tracking-panel__q {
  margin-left: auto; letter-spacing: .02em; text-transform: none;
  font-size: .88rem; font-weight: 400; color: var(--muted);
}
.tracking-panel__q b { font-family: var(--display); font-weight: 600; color: var(--text-strong); }

/* Sorgu yokken: gömülü aracın kendi arama ekranı yerine markalı boş durum */
.track-empty {
  min-height: 400px; display: grid; place-items: center; text-align: center;
  padding: clamp(44px, 6vw, 80px) 24px;
  background: radial-gradient(120% 85% at 50% 0%, var(--surface-2), var(--surface) 68%);
}
.track-empty__ico {
  display: grid; place-items: center; width: 76px; height: 76px;
  margin: 0 auto 22px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
}
.track-empty__ico .icn { width: 32px; height: 32px; }
.track-empty h3 { margin: 0 0 10px; }
.track-empty p { max-width: 470px; margin: 0 auto; color: var(--muted); font-size: .95rem; }
.track-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.track-format {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; border: 1px solid var(--line-soft); border-radius: 100px;
  background: var(--surface); font-size: .84rem; color: var(--muted);
}
.track-format .icn { width: 16px; height: 16px; color: var(--brand); flex: none; }

.disclaimer {
  margin-top: 24px; padding: 22px 26px;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-alt);
  font-size: .88rem; color: var(--muted);
}
.disclaimer b { display: block; color: var(--slate); margin-bottom: 7px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.disclaimer a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.error-page { min-height: 78vh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 60px) 0 90px; }
.error-code {
  font-family: var(--display); font-size: clamp(6rem, 19vw, 14rem); line-height: .85; letter-spacing: -.06em;
  background: linear-gradient(160deg, var(--text-strong) 25%, var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page .hub { background: var(--surface); border-color: var(--line-soft); }
.error-page .hub:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.error-page .hub i { background: var(--brand); }

.career-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 64px); align-items: start; }

/* Kariyer paneli — fotoğraf yerine markalı bilgi kartı */
.career-panel {
  position: relative; overflow: hidden; margin-top: 34px;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: linear-gradient(155deg, #131C29 0%, var(--night) 55%, #1A0D11 100%);
}
.career-panel::after {
  content: ''; position: absolute; inset: auto -60px -90px auto; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(228,25,43,.28), transparent 66%);
  pointer-events: none;
}
.career-panel__mark {
  position: absolute; right: -34px; top: -30px; width: 190px; height: auto;
  color: #fff; opacity: .06; pointer-events: none;
}
.career-panel > * { position: relative; z-index: 1; }

.career-panel__quote {
  margin: 0 0 26px; max-width: 22ch;
  font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.3; color: #fff;
}
.career-panel__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 20px 0; border-block: 1px solid rgba(255,255,255,.12);
}
.career-panel__stats b {
  display: block; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--brand-2);
}
.career-panel__stats span { display: block; margin-top: 5px; font-size: .78rem; line-height: 1.4; color: rgba(238,242,248,.68); }

.career-panel__langs { margin: 18px 0 22px; font-size: .8rem; line-height: 1.7; color: rgba(238,242,248,.55); }

.career-panel__offices { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.career-panel__offices li { display: flex; gap: 11px; align-items: flex-start; }
.career-panel__offices .icn { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--brand-2); }
.career-panel__offices span { display: grid; gap: 1px; font-size: .84rem; color: rgba(238,242,248,.65); }
.career-panel__offices b { font-size: .88rem; font-weight: 600; color: #fff; }

@media (max-width: 480px) {
  .career-panel__stats { grid-template-columns: 1fr; gap: 16px; }
}
.form-panel { padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }

/* 17 ─ Footer ------------------------------------------------------------ */
/* Alt boşluk 88 px: sağ alttaki sabit "Hızlı Teklif Al" düğmesi ekranın altından
   ~64 px yükseğe kadar uzanıyor. 32 px iken sayfanın en altında footer'ın son
   satırındaki bağlantı ("Kargom Nerede") düğmenin altında kalıyor, tıklanamıyordu
   (masaüstü, 7 Ekim 2026). */
.footer { position: relative; padding: clamp(60px, 7vw, 92px) 0 88px; background: var(--night); overflow: hidden; }
.footer__glow { position: absolute; left: 50%; top: -170px; transform: translateX(-50%); width: 880px; height: 320px; background: radial-gradient(ellipse, rgba(228,25,43,.16), transparent 68%); pointer-events: none; }
.footer .container { position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.55fr .95fr .7fr 1.15fr; gap: clamp(24px, 3.2vw, 48px); }
.footer__logo img { height: 44px; width: auto; margin-bottom: 20px; }
.footer__about { font-size: .92rem; color: var(--muted); max-width: 340px; }
.footer__title { font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
/* E-bülten şeridi (7 Ekim 2026, Marcon'daki footer formu) — footer'ın en üstünde */
.footer__news {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 18px clamp(28px, 5vw, 64px);
  align-items: center; padding-bottom: clamp(30px, 4vw, 44px); margin-bottom: clamp(34px, 4.6vw, 54px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.footer__news-text p { margin: 8px 0 0; font-size: .95rem; color: var(--muted); max-width: 46ch; }
.newsletter { display: grid; gap: 11px; }
.newsletter__row { display: flex; gap: 10px; }
.newsletter__row input {
  flex: 1 1 auto; min-width: 0; padding: 14px 18px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  font: inherit; font-size: .93rem; color: #fff; transition: border-color .2s, background .2s;
}
.newsletter__row input::placeholder { color: rgba(238, 242, 248, .45); }
.newsletter__row input:focus { outline: none; border-color: var(--brand-2); background: rgba(255, 255, 255, .08); }
.newsletter__row input[aria-invalid="true"] { border-color: #ff7a85; }
.newsletter__row .btn { flex: none; }
.newsletter__kvkk { display: flex; gap: 9px; align-items: flex-start; font-size: .78rem; line-height: 1.45; color: rgba(238, 242, 248, .6); cursor: pointer; }
.newsletter__kvkk input { flex: none; margin-top: 2px; accent-color: var(--brand-2); }
.newsletter__kvkk a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.newsletter__kvkk.is-invalid { color: #ff9aa3; }
.newsletter__status { margin: 0; font-size: .86rem; color: #ff9aa3; }
.newsletter__status.is-ok { color: #7BF1A8; }
.newsletter.is-done .newsletter__row, .newsletter.is-done .newsletter__kvkk { display: none; }
@media (max-width: 900px) { .footer__news { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .newsletter__row { flex-direction: column; }
  .newsletter__row .btn { justify-content: center; }
}
/* iOS yakınlaştırmasın — telefonun tamamında (yatay iPhone 667 px dahil) */
@media (max-width: 760px) {
  .newsletter__row input { font-size: 16px; }
}

.footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__menu a { font-size: .91rem; color: var(--muted); transition: color .25s, padding-left .25s; }
.footer__menu a:hover { color: #fff; padding-left: 6px; }
.footer__details { display: grid; gap: 13px; font-size: .91rem; color: var(--muted); }
.footer__details strong { color: #fff; font-weight: 700; display: block; font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 3px; }
.footer__details a:hover { color: #fff; }

.socials { display: flex; gap: 9px; margin-top: 24px; list-style: none; padding: 0; }
.socials a {
  width: 41px; height: 41px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: var(--muted);
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.socials a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); }
.socials .icn { width: 17px; height: 17px; }

.footer__bottom {
  margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; justify-content: space-between;
  font-size: .84rem; color: var(--muted);
}
.footer__bottom a:hover { color: #fff; }
/* "Powered By IVMIA Technology" — bağlantı olduğu belli olsun diye bir tık açık */
.footer__credit { color: rgba(238, 242, 248, .82); font-weight: 600; }

/* ── Sabit düğmeler ────────────────────────────────────────────────────
   Ekranın sağ alt köşesinde tek bir dikey yığın var:
       Hızlı Teklif Al      bottom: 20px   (en altta, z 95; mobilde 14px)
       Yukarı çık           bottom: 76px   (onun üstünde, z 89; mobilde 64px)
   ⚠ Mobildeki sol alt "Kargom Nerede" düğmesi (.fab) 7 Ekim 2026'da kaldırıldı
     (kullanıcı: "kargom nerede mobilde sol altta gözüküyor o çıkmasın").
     Kargo takip menüde ve sayfa içindeki kutuda duruyor.
   ⚠ Bu değerler burada, tek yerde tutulur. Başka bir blokta
     `.to-top { bottom: … }` yazmayın; aynı özgüllükte olduğu için
     dosyada sonra gelen kural diğerini sessizce eziyordu.            */

/* ── Çerez onayı bandı ────────────────────────────────────────────────
   Ekranın altına yapışır; yüksekliği JS tarafından `--consent-h` olarak
   yazılır ve yukarıdaki iki sabit düğme (Hızlı Teklif · Yukarı çık)
   o kadar yukarı kayar — bant onların üstünü kapatmasın.
   z-index 200: hepsinin üstünde, ama modal değil; sayfa kullanılabilir
   kalır (KVKK bandı ziyaretçiyi siteye almamazlık edemez).              */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: rgba(10, 15, 24, .97);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .7);
  transform: translateY(100%);
  transition: transform .38s var(--ease);
}
.consent.is-open { transform: translateY(0); }
.consent__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
}
.consent__text { min-width: 0; }
.consent__title {
  display: block; font-family: var(--display); font-size: .98rem;
  font-weight: 600; color: #fff; margin-bottom: 4px;
}
.consent__text p { margin: 0; font-size: .88rem; line-height: 1.6; color: rgba(238, 242, 248, .78); }
.consent__text a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 3px; }
.consent__text a:hover { color: #fff; }
.consent__actions { display: flex; gap: 10px; flex: none; margin-left: auto; }
/* ⚠ İki düğme de aynı boyutta: reddetmek kabul etmek kadar kolay olmalı,
   yoksa alınan rıza KVKK/GDPR açısından geçerli sayılmıyor. */
.consent__actions .btn { white-space: nowrap; }
.consent__actions .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, .34); }
.consent__actions .btn--ghost:hover { background: rgba(255, 255, 255, .1); }

@media (max-width: 860px) {
  .consent__inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px var(--gutter); }
  .consent__actions { margin-left: 0; }
  .consent__actions .btn { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

.to-top {
  position: fixed; right: 16px; bottom: calc(76px + var(--consent-h, 0px)); z-index: 89;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  display: grid; place-items: center; cursor: pointer; color: var(--text-strong);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s, transform .35s var(--ease), visibility .35s, background .3s, color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.to-top .icn { width: 17px; height: 17px; }
/* ⚠ Telefona özel konum/ölçü kuralları temel kurallardan SONRA durmalı.
   Önce hızlı teklif ve "telefon düzeni" bloklarındaydılar; aynı özgüllükteki
   temel .to-top ve .footer__menu kuralları dosyada daha aşağıda olduğu için
   onları eziyordu (yukarı çık düğmesi 46 px/76 px, footer listeleri 10 px
   boşluk + 16 px dolgu kalıyordu). */
@media (max-width: 560px) {
  .to-top { right: 14px; bottom: calc(64px + var(--consent-h, 0px)); width: 42px; height: 42px; }
}
/* Dokunma hedefleri (ölçüldü, 360 px): footer bağlantıları 18 px, alt satır
   bağlantıları 23 px yüksekti — parmakla yan yana olana basılıyordu. Görünüm
   aynı kalır, yalnız tıklanabilir alan büyür (satır aralığı düşürülerek). */
@media (max-width: 760px) {
  .footer__menu { gap: 0; }
  .footer__menu a { display: inline-block; padding: 8px 0; }
  .footer__bottom a { display: inline-block; padding: 10px 0; }
}

/* 18 ─ Animasyon & duyarlılık -------------------------------------------- */
/* .85s fazla ağır kalıyordu; içerik kaydırmanın gerisinde sürükleniyordu */
/* ⚠ Başlangıç (gizli) durumları `.js` sınıfına BAĞLI — koşulsuz yazmayın.
   Sınıfı layout.php'deki satır içi betik koyar; JavaScript kapalıysa ya da
   gft.js hiç inmezse sınıf da konmaz ve içerik animasyonsuz, olduğu gibi
   görünür. Koşulsuz yazılırsa bu öğeleri açan TEK yer reveal() olduğu için
   JS'siz ziyaretçide hero spot metni, düğmeler ve bütün kartlar kalıcı
   olarak opacity:0 kalır — sayfanın yarısı boş görünür.
   13 Eylül 2026'da alt sayfa başlıkları da maskeye alınınca aynı risk
   h1'leri de kapsar olmuştu (öncesinde maskesizdiler, en azından
   görünüyorlardı); bu yüzden kural o turda `.js`e bağlandı. */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translateX(-26px); }
.js [data-reveal="right"] { transform: translateX(26px); }
.js [data-reveal="zoom"]  { transform: scale(.96); }

/* ⚠ Düz 105% DEĞİL, `100% + sabit em`. Kırpma kutusu artık altta .18em
   daha uzun (bkz. .line kuralı); 105% ile bekleyen metnin tepesi o payın
   içinde görünürdü. Gereken kayma = %100 + .18em (alt pay) + .105em (İ
   noktasının satır kutusunu aştığı miktar) = %100 + .285em; .38em ile
   ~%9.5 (40px puntoda 3.8px) emniyet kalıyor.
   ⚠ Alt payı büyütürsen BURAYI da büyüt — yoksa bekleyen başlığın tepesi
   payın içinde bir şerit hâlinde görünür.
   ⚠ Yüzde YAZILMAZ: yüzde span'in yüksekliğine bağlıdır, o da satır
   sayısıyla büyür. %132 denendi — tek satırda doğru, iki satırlı hizmet
   başlığında bekleme payı 44.9px'e çıkıp animasyonun ilk %20'sini boşa
   harcıyordu. Sabit em, satır sayısından bağımsız olarak hep aynı payı
   verir (ölçüldü: 1 ve 2 satırda da 4.5px). */
/* display:block KOŞULSUZ (yerleşim JS'siz de aynı kalmalı); metni aşağı
   koyan transform ise `.js`e bağlı — yoksa JS'siz ziyaretçide başlık
   maskenin altında kalıp hiç görünmez. Gerekçe: [data-reveal] bloğu. */
.line-mask > span { display: block; }
.js .line-mask > span {
  transform: translateY(calc(100% + .38em));
  transition: transform .8s var(--ease); transition-delay: var(--d, 0ms);
}
/* ⚠ `.js` önekiyle: aksi hâlde bu kural ile `.js .line-mask > span` AYNI
   özgüllükte (0,2,1) olur ve hangisinin kazandığı yalnızca sıraya kalırdı
   — dosyanın beş kez düştüğü kaskad tuzağı (bkz. §4). Böyle (0,3,1). */
.js .is-in .line-mask > span, .js .line-mask.is-in > span { transform: none; }

/* ── Header duyarlılığı ────────────────────────────────────────────────
   Ölçülen: logo 217 + nav 713 + sağ blok 388 + boşluklar ≈ 1466px.
   Yani 1466'nın altında header taşıyor ve sağdaki düğmeler kesiliyordu
   (1280px'te 186px taşma). Ayrıca eski kurulumda 1025-1240 arasında
   hiçbir CTA kalmıyordu.

   Yeni sıra:
     ≤1500  "Kargom Nerede" gizlenir  (aynı bağlantı Online Hizmetler
             menüsünde zaten var), logo ve nav bir tık daralır
     ≤1300  nav iyice sıkışır
     ≤1100  nav yerini hamburgere bırakır
     ≤479   "Teklif Al" gizlenir       (mobil menüde var)
   "Teklif Al" mümkün olan en geniş aralıkta görünür kalır. */
@media (max-width: 1500px) {
  .header__track { display: none; }
  .logo img { height: 36px; }
  .header.is-stuck .logo img { height: 32px; }
  .nav__link { padding: 10px 11px; }
}
@media (max-width: 1300px) {
  .header__inner { gap: 18px; }
  .nav__link { padding: 9px 8px; font-size: .81rem; letter-spacing: .02em; }
  .nav__caret { width: 9px; height: 9px; }
}
@media (max-width: 1100px) {
  /* Dil seçici telefonda da görünür (7 Ekim 2026, Marcon gibi) — yalnız menü gizli */
  .nav { display: none; }
  /* Menüyü sağa iten `.nav { margin-left: auto }` gizlenince "Teklif Al" ve ☰
     logonun hemen yanına yapışıyordu (Ekim 2026 genel kontrolünde görüldü). */
  .header__side { margin-left: auto; }
  .burger { display: flex; }
  .logo img { height: 34px; }
  .header.is-stuck .logo img { height: 30px; }
}
@media (max-width: 479px) {
  .header__quote { display: none; }
  .logo img, .header.is-stuck .logo img { height: 30px; }
}

@media (max-width: 1180px) {
  .svc-detail { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .career-layout { grid-template-columns: 1fr; }
  .cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  /* Marka kolonu tam genişlik + kalan 3 kolon 3'lü ızgara →
     "İletişim Bilgileri" son satırda tek başına kalmıyor. */
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__col--brand { grid-column: 1 / -1; }
  .hero__stats { gap: 16px 32px; }
  .hero__stat:not(:last-child)::after { right: -16px; }
}

/* Dar ekranda üç rakam yan yana sığmıyor → ikili ızgara, ayraçlar kapalı */
@media (max-width: 640px) {
  .hero__stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 18px; margin-top: 30px; padding-top: 22px;
  }
  .hero__stat::after { display: none !important; }
  .hero__stat span { font-size: .72rem; letter-spacing: .06em; }
  /* Telefonda yalnız ilk iki rakam, tek satır (8 Ekim 2026). Kullanıcı: "3 Stratejik
     Ofis … mobilde gözükmesin, alt satıra kayıyor, kalabalık gözüküyor". Üçüncü ve
     sonrakiler masaüstü/tablette görünür; sıra Panel → Metinler → Hero rakamları. */
  .hero__stat:nth-child(n+3) { display: none; }
  .split { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 768px) {
  :root { --header-h: 68px; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  /* Anasayfa hero'su telefonda içerik kadar (önce 90svh) — bkz. "telefon düzeni" */
  .hero { min-height: 0; padding: calc(var(--header-h) + 26px) 0 96px; }
  .track-bar { margin-top: -44px; }
  .about-badge { right: 12px; bottom: -16px; padding: 18px 20px; min-width: 0; }
  .about-badge b { font-size: 2.1rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .tracking-panel iframe { height: 620px; }
  /* ⚠ .map-frame diye bir sınıf yok; gerçek bileşen .map-block__pane */
  .map-block__pane iframe { height: 320px; }
  .services:not(.services--modes) { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Kargo takip haritası (.track-map) hariç: sitenin vitrin animasyonu, ayardan
     bağımsız akar (7 Ekim 2026, bkz. bölüm 14c). Video ve küre JS'te. */
  *:not(.track-map, .track-map *), *:not(.track-map *)::before, *:not(.track-map *)::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .line-mask > span { transform: none !important; }
  /* Hero rozetindeki kırmızı nabız da ayardan bağımsız atar — kullanıcı:
     "yanıp sönen şey mobilde yanıp sönmüyor". Küçük, yerinde duran bir ışık;
     hareket hassasiyeti yaratan kayma/parallax değil. (Yukarıdaki genel
     sıfırlamanın özgüllüğü 0,1,0 — bu kural 0,2,0 olduğu için kazanır.) */
  .hero__overline .dot { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}

@media print {
  /* ⚠ .qq (hızlı teklif kutusu; önceden WhatsApp kutusu) position:fixed —
     listede olmadığı için ilk sayfanın köşesine basılıyordu. */
  .header, .footer, .to-top, .mobile-menu, .hero__media, .track-bar,
  .qq { display: none !important; }
  body { background: #fff; color: #000; }

  /* ⚠ AÇILIŞ ANIMASYONLARI BASKIDA SIFIRLANMALI (13 Eylül 2026).
     `[data-reveal]` öğeleri `opacity:0` başlar ve onları açan tek yer
     IntersectionObserver'dır — yani yalnızca ZİYARETÇİ O NOKTAYA KADAR
     KAYDIRDIYSA açılırlar. Sıfırlama olmadan, sayfayı açıp hemen yazdıran
     biri ilk ekranın altındaki her şeyi BOŞ kâğıt olarak basıyordu.
     Aynı şey hero başlığı için de geçerli: `.line-mask` maskesi kırptığı
     için başlık da basılmazdı. (prefers-reduced-motion bloğunda aynı
     sıfırlama zaten var; baskıda unutulmuştu.) */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .line-mask > span { transform: none !important; }
  /* Alt sayfa hero'su ekranda 100svh; kâğıtta koca bir kara blok olarak ilk
     sayfanın tamamını yiyor ve beyaz yazılar görünmüyordu. Baskıda düz bir
     başlık bloğuna indirgenir. */
  .page-hero__media, .page-hero::after, .crumbs, .hero__overline,
  .page-hero { min-height: 0 !important; padding: 0 0 18px !important; background: #fff !important; }
  .page-hero__title, .page-hero .hero__sub { color: #000 !important; }
  .page-hero__title { font-size: 26pt !important; }

  /* ⚠ ANASAYFA hero'su aynı derdi yaşıyordu ama düzeltme yalnızca alt
     sayfalara yazılmıştı: .hero hâlâ 100svh + koyu zemin, başlık ise #fff.
     Tarayıcılar zemin rengini varsayılan olarak basmadığı için anasayfa
     çıktısı "bir sayfa boşluk + görünmeyen beyaz başlık" oluyordu.
     Alt sayfalarla aynı indirgeme burada da uygulanır. */
  .hero__veil, .hero__scan, .hero__stats { display: none !important; }
  .hero { min-height: 0 !important; padding: 0 0 18px !important; background: #fff !important; }
  .hero__title, .hero__sub { color: #000 !important; }
  .hero__title em { color: #000 !important; }
  .hero__title { font-size: 26pt !important; }
}