/* ===========================================================
   ALVEXA — DÜZEN BİLEŞENLERİ
   Header (masaüstü + mobil), dil seçici, mobil menü paneli
   ve footer. Yalnızca tokens.css değişkenleri kullanılır;
   bu dosyada sabit renk yazılmaz.
   =========================================================== */

/* ===========================================================
   1. HEADER — KABUK
   Logo ortada, menü iki yana bölünmüş.

   Header sayfanın üstünde DURMAZ, hero görselinin ÜSTÜNE BİNER
   (referans site nivakgroup.com'daki gibi). Bu yüzden `fixed`
   ve zemini şeffaf — altındaki fotoğraf header'ın arkasından
   devam eder, beyaz bir bant açılmaz.

   80px scroll sonrası js/nav.js `.is-scrolled` ekler: header
   alçalır, beyaz zemine oturur ve gölge alır. O andan sonra
   arkasında fotoğraf olmadığı için yazılar koyu renge döner.

   Hero'su olmayan sayfalarda (404) `--solid` kullanılır.
   =========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition),
              box-shadow var(--transition),
              border-color var(--transition);
}

.site-header.is-scrolled,
.site-header--solid {
  background-color: var(--white);
  box-shadow: var(--shadow-md);
}

/* Mobil panel açıkken gövde kilitlenir ve kaydırma çubuğu
   kaybolur. Header `fixed` olduğu için o boşluğu ayrıca
   telafi etmesi gerekir, yoksa sağa doğru kayar. */
html.has-menu-open .site-header {
  padding-right: var(--scrollbar-w, 0px);
}

/* Grid'in kendisi <nav>. Tek bir gezinme bölgesi olsun diye
   logo da bu nav'ın içinde — logo da bir gezinme bağlantısı. */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-h);
  transition: height var(--transition);
}

.site-header.is-scrolled .site-nav {
  height: var(--header-h-scrolled);
}

.site-nav__side {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
}

/* Referans sitede menü maddeleri ekranın iki ucuna dağılmaz,
   LOGONUN İKİ YANINA yaslanır. Sosyal ikonlar ise en solda
   tek başına durur — onu `margin-right: auto` dışarı iter. */
.site-nav__side--start { justify-content: flex-end; }
.site-nav__side--end   { justify-content: flex-start; }

.site-social--header { margin-right: auto; }

/* -----------------------------------------------------------
   1.1 LOGO
   ----------------------------------------------------------- */
.site-nav__logo {
  display: block;
  justify-self: center;
  line-height: 0;
}

/* Logo SVG'si 2790x1762 (oran 1.58) ve zaten kırpılmış — boş
   kenar payı yok. Slogan satırı lockup yüksekliğinin yalnızca
   %4'ü olduğu için okunabilirlik doğrudan boyuta bağlı. */
.site-nav__logo img {
  width: auto;
  height: 94px;
  transition: height var(--transition);
}

.site-header.is-scrolled .site-nav__logo img {
  height: 66px;
}

/* -----------------------------------------------------------
   1.2 MENÜ BAĞLANTILARI
   Hover ve odakta adaçayı alt çizgi soldan açılır.
   ----------------------------------------------------------- */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--sage-dark);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

/* Bulunulan sayfa */
.site-nav__link.is-active {
  color: var(--sage-dark);   /* --sage beyazda 3.74:1 — AA altı */
  font-weight: var(--fw-semibold);
}

/* -----------------------------------------------------------
   1.3 SOSYAL İKONLAR (header, sol üst)
   ----------------------------------------------------------- */
.site-social {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.site-social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.site-social a:hover {
  color: var(--sage-dark);
  background-color: var(--sage-tint);
}

.site-social svg {
  width: 17px;
  height: 17px;
}

/* Dar masaüstünde menüye yer açmak için sosyal ikonlar kalkar */
@media (max-width: 1199px) {
  .site-social--header { display: none; }
}

/* ===========================================================
   2. DİL SEÇİCİ — TR / EN / RU
   Bayrak yok, dil kodu var. Görünen kod aria-hidden;
   ekran okuyucu dilin tam adını okur.
   =========================================================== */
.lang-switch {
  display: flex;
  align-items: center;
}

.lang-switch__btn {
  padding: var(--sp-2) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--ink-muted);
  transition: color var(--transition-fast);
}

.lang-switch__btn:hover {
  color: var(--sage-dark);
}

.lang-switch__btn.is-active {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

/* Kodlar arasındaki ince ayraç */
.lang-switch__btn + .lang-switch__btn {
  border-left: 1px solid var(--gray-line);
  margin-left: var(--sp-1);
  padding-left: var(--sp-3);
}

/* ===========================================================
   2.4 AÇIK GÖRSEL ÜSTÜNDEKİ HEADER (ana sayfa)
   Ana sayfanın hero'su AÇIK: parlak gökyüzü, açık perde. Orada
   yazılar koyu kalmalı — beyaz yazı hiç okunmazdı.

   Ama şeffaf header + parlak fotoğraf da yetmiyordu: dil kodları
   (--ink-muted) gökyüzünün üstünde silikleşip kayboluyordu.
   İki önlem alındı:
     1) Üstten inen ÇOK hafif beyaz perde — fotoğraf arkasından
        devam eder, beyaz bir bant açılmaz, ama zemin sabitlenir.
     2) Dil kodları --ink-muted yerine --ink; pasif/aktif ayrımı
        artık renk yerine kalınlıkla veriliyor.
   Her ikisi de yalnızca header şeffafken geçerli; scroll edilip
   beyaz zemine oturunca varsayılana döner.
   =========================================================== */
.site-header:not(.site-header--on-dark):not(.site-header--solid):not(.is-scrolled)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.38) 62%,
    transparent 100%
  );
  pointer-events: none;
}

.site-header:not(.site-header--on-dark):not(.site-header--solid):not(.is-scrolled) .lang-switch__btn {
  color: var(--ink);
}

/* ===========================================================
   2.5 KOYU GÖRSEL ÜSTÜNDEKİ HEADER
   Header artık hero'nun üstüne biniyor. İç sayfaların hero'su
   koyu perdeli olduğu için orada yazı ve logo BEYAZ olmalı;
   ana sayfanınki açık perdeli, orada varsayılan koyu renk
   zaten doğru.

   `.site-header--on-dark` sınıfı hakkimizda / projelerimiz /
   iletisim sayfalarında <header>'a eklenir.

   `:not(.is-scrolled)` kritik: scroll edilince header beyaz
   zemine oturur, arkasında artık fotoğraf yoktur — o anda
   beyaz yazı okunmaz hâle gelirdi. Bu yüzden tüm kurallar
   yalnızca header şeffafken geçerli.
   =========================================================== */
.site-header--on-dark:not(.is-scrolled) .site-nav__link,
.site-header--on-dark:not(.is-scrolled) .lang-switch__btn,
.site-header--on-dark:not(.is-scrolled) .site-social a,
.site-header--on-dark:not(.is-scrolled) .nav-toggle {
  color: var(--text-on-dark);
}

.site-header--on-dark:not(.is-scrolled) .site-nav__link:hover,
.site-header--on-dark:not(.is-scrolled) .site-nav__link:focus-visible,
.site-header--on-dark:not(.is-scrolled) .site-nav__link.is-active,
.site-header--on-dark:not(.is-scrolled) .lang-switch__btn:hover,
.site-header--on-dark:not(.is-scrolled) .lang-switch__btn.is-active,
.site-header--on-dark:not(.is-scrolled) .site-social a:hover {
  color: var(--white);
}

/* Alt çizgi de beyaza döner — adaçayı koyu fotoğrafta sönük kalıyor */
.site-header--on-dark:not(.is-scrolled) .site-nav__link::after {
  background-color: var(--white);
}

/* Sosyal ikon hover'ındaki açık yeşil dolgu koyu zeminde
   leke gibi duruyor; yerine hafif beyaz bir halka. */
.site-header--on-dark:not(.is-scrolled) .site-social a:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

/* Dil kodları arasındaki ayraç çizgisi */
.site-header--on-dark:not(.is-scrolled) .lang-switch__btn + .lang-switch__btn {
  border-left-color: rgba(255, 255, 255, 0.32);
}

/* Logo SVG'si düz siyah (fill="#000"). invert(1) onu tam beyaz
   yapar — ayrı bir beyaz dosya yüklemeye ve dört HTML'de
   <picture> kurmaya gerek kalmıyor. */
.site-header--on-dark:not(.is-scrolled) .site-nav__logo img {
  filter: invert(1);
}

/* Şeffaf header'da yazılar fotoğrafın açık bir yerine denk
   gelirse okunmaz. Üstten aşağı inen ince bir karartma bunu
   her kadrajda garantiye alır; scroll edilince kalkar. */
.site-header--on-dark:not(.is-scrolled)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    to bottom,
    rgba(29, 29, 27, 0.55) 0%,
    rgba(29, 29, 27, 0.28) 60%,
    transparent 100%
  );
  pointer-events: none;
}

/* ===========================================================
   3. HAMBURGER BUTONU
   Üç çizgi; panel açıkken X'e döner.
   =========================================================== */
.nav-toggle {
  display: none;      /* yalnızca <1024px */
  position: relative;
  width: 44px;        /* dokunma hedefi en az 44px */
  height: 44px;
  color: var(--ink);
}

.nav-toggle__bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition),
              opacity var(--transition-fast);
}

.nav-toggle__bar:nth-child(1) { top: 15px; }
.nav-toggle__bar:nth-child(2) { top: 21px; }
.nav-toggle__bar:nth-child(3) { top: 27px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ===========================================================
   4. MOBİL MENÜ PANELİ
   Sağdan kayar. Kapalıyken `inert` niteliği ile sekme
   sırasından da çıkar (js/nav.js yönetir).
   =========================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background-color: var(--overlay);
  opacity: 0;
  visibility: hidden;
  /* Panelle aynı gerekçe: gizlenme sona ertelenir, görünme anlıktır. */
  transition: opacity var(--transition), visibility 0s linear var(--transition);
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition), visibility 0s linear 0s;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);   /* overlay'in üstünde kalmalı */
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
  background-color: var(--ink);
  color: var(--text-on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  /* visibility'yi SÜREYE BAĞLAMA. Süreli bir geçişte panel
     .is-open sınıfını aldığı an hesaplanan değer hâlâ `hidden`
     kalıyordu; nav.js'in aynı karede yaptığı items[0].focus()
     çağrısı sessizce düşüyor ve mobil menü açılınca odak İÇERİ
     HİÇ GİRMİYORDU (odak tuzağı da bu yüzden devre dışı kalıyordu).
     Doğrusu: açılışta anında görünür ol, kapanışta gizlenmeyi
     kayma bitene kadar ertele. */
  transition: transform var(--transition-slow),
              visibility 0s linear var(--transition-slow);
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition-slow),
              visibility 0s linear 0s;
}

.mobile-nav :focus-visible {
  outline-color: var(--taupe);
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.mobile-nav__logo img {
  width: auto;
  height: 40px;
}

.mobile-nav__close {
  position: relative;
  width: 44px;
  height: 44px;
  color: var(--white);
}

.mobile-nav__close::before,
.mobile-nav__close::after {
  content: '';
  position: absolute;
  top: 21px;
  left: 11px;
  width: 22px;
  height: 2px;
  background-color: currentColor;
}

.mobile-nav__close::before { transform: rotate(45deg); }
.mobile-nav__close::after  { transform: rotate(-45deg); }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
}

.mobile-nav__list li + li {
  border-top: var(--border-dark);
}

.mobile-nav__link {
  display: block;
  padding-block: var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
}

.mobile-nav__link:hover,
.mobile-nav__link.is-active {
  color: var(--taupe);
}

/* Dil seçici ve iletişim paneli en alta iter */
.mobile-nav__foot {
  margin-top: auto;
  padding-top: var(--sp-10);
}

.mobile-nav__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--taupe);
}

/* Koyu zeminde dil seçici renkleri */
.mobile-nav .lang-switch__btn {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.mobile-nav .lang-switch__btn:hover {
  color: var(--taupe);
}

.mobile-nav .lang-switch__btn.is-active {
  color: var(--white);
}

.mobile-nav .lang-switch__btn + .lang-switch__btn {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.mobile-nav__contact {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.mobile-nav__contact a:hover {
  color: var(--taupe);
}

/* Panel açıkken arka plan kaymasın.
   --scrollbar-w js/nav.js tarafından ölçülüp yazılır; kaydırma
   çubuğunun kaybolmasından doğan yatay sıçramayı önler. */
html.has-menu-open {
  overflow: hidden;
  padding-right: var(--scrollbar-w, 0px);
}

/* ===========================================================
   5. KIRILIM: 1024px
   Altında masaüstü menüsü gizlenir, hamburger görünür.
   =========================================================== */
@media (max-width: 1023px) {
  .site-nav__side .site-nav__list,
  .site-nav__side .lang-switch,
  .site-social--header {
    display: none;
  }

  /* --end artık flex-start hizalı (masaüstünde logoyu
     kucaklıyor). Mobilde sıra bir tek hamburgerde kalıyor,
     o da sağ uçta durmalı. */
  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .site-nav__logo img {
    height: 70px;
  }

  .site-header.is-scrolled .site-nav__logo img {
    height: 54px;
  }
}

/* 1024px üstünde mobil panel tamamen devre dışı */
@media (min-width: 1024px) {
  .mobile-nav,
  .nav-overlay {
    display: none;
  }
}

/* ===========================================================
   6. FOOTER
   Koyu zemin, dört bölüm + alt şerit.
   =========================================================== */
.site-footer {
  background-color: var(--ink);
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
}

.site-footer :focus-visible {
  outline-color: var(--taupe);
}

.site-footer a:hover {
  color: var(--taupe);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: var(--sp-12);
  padding-block: var(--section-y-sm);
}

/* -----------------------------------------------------------
   6.1 Marka sütunu
   ----------------------------------------------------------- */
.site-footer__logo {
  display: inline-block;
  line-height: 0;
}

.site-footer__logo img {
  width: auto;
  height: 62px;
}

.site-footer__tagline {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--taupe);
}

.site-footer__about {
  margin-top: var(--sp-4);
  max-width: 42ch;
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
}

/* -----------------------------------------------------------
   6.2 Başlıklar ve listeler
   ----------------------------------------------------------- */
.site-footer__heading {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--white);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--text-on-dark-muted);
}

.site-footer__list a {
  display: inline-block;
}

/* -----------------------------------------------------------
   6.3 Sosyal ikonlar (footer)
   ----------------------------------------------------------- */
.site-social--footer {
  margin-top: var(--sp-6);
  gap: var(--sp-3);
}

.site-social--footer a {
  width: 38px;
  height: 38px;
  border: var(--border-dark);
  border-radius: var(--radius-full);
  color: var(--text-on-dark-muted);
}

.site-social--footer a:hover {
  color: var(--ink);
  background-color: var(--taupe);
  border-color: var(--taupe);
}

/* -----------------------------------------------------------
   6.4 Alt şerit — telif + yasal linkler
   ----------------------------------------------------------- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: var(--border-dark);
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
}

/* Telif + yapımcı kredisi. Kredi tek parça sarar; dar ekranda
   "|" ayracı satır başında yalnız kalmaz. */
.site-footer__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.site-footer__sep {
  opacity: 0.45;
}

/* Bağlantı, sönük telif metninden ayrışsın */
.site-footer__credit a {
  color: var(--text-on-dark);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
}

/* -----------------------------------------------------------
   6.5 Footer — dar ekran
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 639px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -----------------------------------------------------------
   6.6 Footer — DOKUNMA ALANLARI (PROMPT 8)
   Ölçüldü: footer bağlantıları 20px, yasal bağlantılar 14px,
   sosyal ikonlar 38px yüksekliğindeydi — parmakla hedeflemesi
   zor. Dar ekranda satır arasındaki boşluk bağlantının KENDİ
   dolgusuna çevriliyor: hedef 44px'e çıkıyor, footer'ın görsel
   ritmi ise neredeyse aynı kalıyor.
   ----------------------------------------------------------- */
/* Kırılım DEĞİL cihaz sorusu: 768px'lik bir tablet de parmakla
   kullanılıyor. Virgül CSS'te "veya" demek — dar ekran YA DA kaba
   işaretçi (dokunmatik) olan her yerde geçerli. */
@media (max-width: 1023px), (pointer: coarse) {
  .site-footer__list {
    gap: 0;
  }

  .site-footer__list a {
    padding-block: var(--sp-3);   /* 20px metin + 2×12px = 44px */
    /* "Home" gibi kısa çeviriler yatayda 44px'in altında kalıyordu.
       Fazlalık sola hizalı sütunun içine taşar, görsel etkisi yok. */
    min-width: 44px;
  }

  .site-footer__legal {
    gap: 0 var(--sp-6);
  }

  .site-footer__legal a {
    display: inline-block;
    padding-block: 15px;          /* 14px metin + 2×15px = 44px */
  }

  /* "Aycom" kısa bir kelime: dikeyde dolgu, yatayda da birkaç
     piksel gerek. Negatif dış boşluk yerleşimi kaydırmadan
     tıklama alanını genişletiyor. */
  .site-footer__credit a {
    display: inline-block;
    padding-block: 14px;
    padding-inline: 4px;
    margin-inline: -4px;
  }

  .site-social--footer a {
    width: 44px;
    height: 44px;
  }
}