/* ============================================================
   components.css — Global, her sayfada bulunan bileşenler
   DESIGN.md §8'in birebir uygulaması.

   Katman kuralları:
     · Token yeniden TANIMLANMAZ. Renk hiçbir yerde sabit
       yazılmaz; her şey --bg / --fg / --mute / --line üzerinden
       okunur. Bu yüzden masthead açık perdenin üzerinden
       geçerken tek bir data-act değişikliğiyle tersine döner.
     · Kabuk (.shell) ve ızgara (.grid) layout.css'in malı;
       burada yeniden kurulmaz, yalnızca kullanılır.
     · responsive.css ARTIK YOK — her bileşenin duyarlı
       kuralları kendi bloğunun içinde, hemen altında yaşar.

   Kırılma noktaları:
     1100px  navbar → tam ekran çekmece, mega → akordeon
      900px  layout.css'in genel kırılma noktası (kolonlar)
      600px  masthead CTA'sı ikona iner, footer tek kolon

   JS'siz davranış: hiçbir bileşen görünürlüğünü JS'e borçlu
   değildir. Yalnızca üç katman (.preloader, .cursor, .curtain)
   VARSAYILAN olarak gizlidir ve sadece `html.is-motion`
   altında açılır — JS yoksa ziyaretçi kapanmayan bir perdeyle
   karşılaşmasın diye (§13.2/§13.3).
   ============================================================ */


/* ------------------------------------------------------------
   0. İkon güvenliği
   base.css `svg { fill: currentColor }` diyor; bu kural
   ikonların fill="none" NİTELİĞİNİ ezer (yazar CSS'i sunum
   niteliğinden güçlüdür) ve outline ikonlar dolgulu görünür.
   Kendi ikon yuvalarımızda bunu geri alıyoruz.
   NOT: kalıcı çözüm base.css'te olmalı (bkz. rapor).
   ------------------------------------------------------------ */
.btn svg[fill="none"],
.btn-round svg[fill="none"],
.link-arrow svg[fill="none"],
.navbar__caret[fill="none"],
.mega__icon svg[fill="none"],
.footer__social svg[fill="none"],
.footer__col svg[fill="none"] {
  fill: none;
}


/* ============================================================
   1. İLERLEME RAYI — .progress-rail
   Sayfa okuma ilerlemesi. Masthead gizlenirken bile görünür
   kalması gerektiği için ondan bir kademe yukarıda durur.
   Gradient burada "mevcut durum göstergesi" olarak meşru:
   çubuk tam genişlikte boyanır ve scaleX ile kısılır, böylece
   ilerledikçe ember → violet doğal olarak açılır.

   Besleme sözleşmesi: js/ui.js ister `--progress` (0–1) yazar,
   ister doğrudan satır içi `transform` verir; ikisi de çalışır.
   ------------------------------------------------------------ */
.progress-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: calc(var(--z-masthead) + 1);
  pointer-events: none;
  background: transparent;
}

.progress-rail__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--signal-grad);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}


/* ============================================================
   2. MASTHEAD — .masthead
   Sabit (fixed) üst bar. Rengi kendi data-act'inden okur:
   tokens.css'teki [data-act="light"] seçicisi elemanın
   KENDİSİYLE eşleştiği için js/ui.js sadece niteliği çevirir,
   burada tek bir açık-perde rengi yazmamız gerekmez.
   ------------------------------------------------------------ */
.masthead {
  /* Bileşene özel yerel ölçü — global token DEĞİL.
     Hem masthead yüksekliğini hem çekmecenin üst boşluğunu
     hem de mega menünün tavanını tek yerden belirler. */
  --mast-h: clamp(4.25rem, 3.5rem + 2vw, 5.25rem);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-masthead);
  color: var(--fg);
  background: transparent;
  /* Yüksekliği sabitlemek yerine şeffaf bir çizgi taşırız:
     .is-stuck sınırı görünür olurken düzen zıplamaz. */
  border-bottom: 1px solid transparent;
  transition:
    transform var(--d-base) var(--ease-inout),
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease);
}

/* .masthead__inner yalnızca `shell--wide` taşır (o da yalnız
   max-width verir); yatay kabuk ölçüsünü burada tamamlıyoruz. */
.masthead__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-shell);
  min-height: var(--mast-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  transition: min-height var(--d-base) var(--ease);
}

/* 12px kaydırmadan sonra: yoğunlaşır, arkası bulanıklaşır. */
.masthead.is-stuck {
  background-color: var(--bg);
  /* color-mix desteklenmiyorsa üstteki opak zemin geçerli
     kalır — bileşen hiçbir tarayıcıda bozulmaz. */
  background-color: color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom-color: var(--line-soft);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

.masthead.is-stuck .masthead__inner {
  min-height: calc(var(--mast-h) - clamp(.5rem, 1vw, .9rem));
}

/* Aşağı kaydırırken (25vh sonrası) çekilir, yukarıda geri gelir. */
.masthead.is-hidden {
  transform: translate3d(0, -100%, 0);
}

/* Klavye kullanıcısı gizli bir bara Tab'layamaz: içinde odak
   varsa bar her koşulda görünür kalır (§13.4). */
.masthead.is-hidden:focus-within {
  transform: none;
}

/* Çekmece açıkken başlık satırı opak zemine döner: panel
   hemen ALTINDAN başladığı için ikisi kesintisiz tek bir tam
   ekran katman gibi okunur.
   KRİTİK: backdrop-filter burada kapatılır. Çünkü non-none bir
   backdrop-filter elemanı, konumlanmış torunları için
   "containing block" hâline getirir — çekmece paneli o yüzden
   fixed DEĞİL absolute konumlanıyor (bkz. §7). */
body.is-nav-open .masthead {
  background-color: var(--bg);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.is-nav-open .masthead.is-hidden {
  transform: none;
}

/* MODE.engine.lock() kaydırmayı dondurur; bu satır yalnızca
   emniyet kemeri (native kaydırmalı, 900px altı durum). */
body.is-nav-open {
  overflow: hidden;
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.2vw, 1rem);
  /* Mobil çekmece panelinin ÜSTÜNDE kalmalı (bkz. §7) */
  position: relative;
  z-index: 2;
}


/* ------------------------------------------------------------
   3. KELİME İŞARETİ — .wordmark
   SVG <text> değil, gerçek HTML metin: act temasına uyar,
   Fraunces'i gerçekten kullanır ve harf harf animasyonlanır.
   ------------------------------------------------------------ */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--fg-strong);
  /* Mobil çekmecenin üstünde kalır */
  position: relative;
  z-index: 2;
}

.wordmark__mark {
  display: inline-flex;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'SOFT' 24, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.02em;
}

/* "MO" ve "DE" ayrı iki span: imzayı üreten şey, hover'da
   ikinci hecenin bir tık açılması. Tek hareket, hızlı. */
.wordmark__mark > span {
  transition: transform var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease);
}

.wordmark__mark > span:last-child {
  color: var(--mute);
}

.wordmark:hover .wordmark__mark > span:last-child,
.wordmark:focus-visible .wordmark__mark > span:last-child {
  transform: translateX(.12em);
  color: var(--fg-strong);
}

.wordmark__sub {
  color: var(--mute);
  /* --t-mono'nun altında ama okunur kalan tek istisna:
     kelime işaretinin altındaki imza satırı. */
  font-size: .62rem;
  transition: color var(--d-fast) var(--ease);
}

.wordmark:hover .wordmark__sub {
  color: var(--fg);
}


/* ------------------------------------------------------------
   4. NAVBAR — .navbar
   Masaüstü: yatay liste. Alt çizgi hover'da soldan çizilir;
   aria-current="page" olan bağlantıda ise KALICI bir sinyal
   çizgisi durur (gradient'in nadir göründüğü yerlerden biri).
   ------------------------------------------------------------ */
.navbar__list {
  display: flex;
  align-items: center;
  gap: clamp(.35rem, 1.4vw, 1.75rem);
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .2rem;
  color: var(--mute);
  font-size: var(--t-body-s);
  font-weight: 500;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease);
}

.navbar__link::after {
  content: '';
  position: absolute;
  left: .2rem;
  right: .2rem;
  bottom: .18rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-base) var(--ease-out);
}

.navbar__link:hover,
.navbar__link:focus-visible,
.navbar__link[aria-expanded="true"] {
  color: var(--fg);
}

.navbar__link:hover::after,
.navbar__link:focus-visible::after,
.navbar__link[aria-expanded="true"]::after {
  transform: scaleX(1);
}

/* Mevcut sayfa: tam kontrast + kalıcı sinyal çizgisi */
.navbar__link[aria-current="page"] {
  color: var(--fg-strong);
}

.navbar__link[aria-current="page"]::after {
  height: 2px;
  background: var(--signal-grad);
  transform: none;
}

.navbar__caret {
  width: .72em;
  height: .72em;
  flex: 0 0 auto;
  transition: transform var(--d-fast) var(--ease-out);
}

.navbar__link[aria-expanded="true"] .navbar__caret {
  transform: rotate(180deg);
}


/* ------------------------------------------------------------
   5. MEGA MENÜ — .mega
   Masaüstünde masthead'in tam genişliğine oturan bir panel.
   Konumlandırma .masthead'e göredir (fixed olduğu için
   içindeki tek konumlanmış ata odur) → tam bleed.

   Açılma sözleşmesi — tek doğruluk kaynağı butonun
   aria-expanded niteliğidir; js/ui.js onu çevirir, klavye
   desteği ve Escape oradadır (§13.4). Ek olarak masaüstünde
   :hover ile de açılır (JS'siz işaretçi kullanıcısı için).

   :focus-within BİLİNÇLİ olarak kullanılmıyor: butona tıklayan
   kullanıcıda odak butonda kaldığı için panel ui.js kapattıktan
   sonra da açık kalır, yani ikinci tık çalışmaz görünür.
   Klavyeli JS'siz senaryoda altı hizmet zaten her sayfanın
   footer'ında ve services.html'de tam liste hâlinde durur —
   içerik kaybı yok (§13.2).
   ------------------------------------------------------------ */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-mega);
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  max-height: calc(100svh - var(--mast-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    opacity var(--d-fast) var(--ease),
    clip-path var(--d-base) var(--ease-out),
    visibility 0s linear var(--d-base);
}

.navbar__link[aria-expanded="true"] + .mega {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}

.mega__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-shell);
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.35rem, .8vw, .75rem);
}

@media (max-width: 1279px) {
  .mega__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mega__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas:
    'icon index'
    'icon title'
    'icon hint';
  column-gap: 1rem;
  row-gap: .2rem;
  align-content: start;
  padding: 1rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition:
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease);
}

.mega__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  transition: color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}

.mega__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mega__index {
  grid-area: index;
  color: var(--mute);
}

.mega__title {
  grid-area: title;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  transition: transform var(--d-fast) var(--ease-out);
}

.mega__hint {
  grid-area: hint;
  margin-top: .15rem;
  /* Uzun ipuçları menüyü şişirmesin */
  font-size: .68rem;
  letter-spacing: .12em;
  line-height: 1.5;
}

.mega__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
  padding-top: clamp(.9rem, 1.4vw, 1.25rem);
  border-top: 1px solid var(--line-soft);
}

/* Hover ile açılma ve hover süslemeleri yalnızca gerçek
   işaretçide: dokunmatikte "yapışkan hover" oluşmaz. */
@media (hover: hover) and (min-width: 1100px) {
  .navbar__item.has-mega:hover .mega {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition-delay: 0s;
  }

  .mega__item:hover {
    background-color: var(--bg-raise);
    border-color: var(--line);
  }

  .mega__item:hover .mega__icon {
    color: var(--fg-strong);
    border-color: var(--fg);
  }

  .mega__item:hover .mega__title {
    transform: translateX(2px);
  }
}

.mega__item:focus-visible {
  background-color: var(--bg-raise);
  border-color: var(--line);
}


/* ------------------------------------------------------------
   6. BURGER — .burger
   1100px üstünde hiç yok. İki çizgi; açıkken çarpıya döner.
   ------------------------------------------------------------ */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  place-content: center;
  gap: 5px;
  color: var(--fg);
  border-radius: var(--r-xs);
  -webkit-tap-highlight-color: transparent;
}

.burger > span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease-inout);
}

/* Çubuk merkezleri 6.5px arayla: yarısı kadar kaydırıp
   döndürünce tam çarpı olur. */
body.is-nav-open .burger > span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

body.is-nav-open .burger > span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}


/* ------------------------------------------------------------
   7. MOBİL ÇEKMECE (< 1100px)
   .navbar başlık satırının hemen altından başlayıp ekranın
   kalanını kaplayan bir katmana, .mega ise akordeona döner.
   Çekmece açıkken başlık satırı da opak zemine geçtiği için
   ikisi birlikte tam ekran tek bir yüzey olarak okunur.
   Odak tuzağı ve Escape js/ui.js'in sorumluluğunda (§13.4).

   JS'siz not: burger'in kendisi JS gerektirdiği için çekmece
   JS'siz açılmaz; bu senaryoda gezinme footer'daki tam hizmet
   + kurumsal bağlantı listesinden yapılır (footer her sayfada
   ve JS'siz tamamen okunur).
   ------------------------------------------------------------ */
@media (max-width: 1099px) {
  .burger {
    display: grid;
  }

  .navbar {
    /* ABSOLUTE, fixed değil — bilinçli:
       .masthead hem .is-hidden transform'u hem .is-stuck
       backdrop-filter'ı yüzünden zaman zaman konumlanmış
       torunlar için containing block oluyor. Fixed bir panel o
       durumda masthead kutusuna hapsolur. Absolute ise her iki
       hâlde de aynı yere oturur: başlık satırının hemen altı.
       Yükseklik farkı .is-stuck ile birlikte küçülen başlık
       satırında alt boşluk tarafından soğurulur. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100svh - var(--mast-h));
    /* Masthead'in yığın bağlamı içinde kalır: başlık satırı
       (z:2) panelin üstünde, panel tüm sayfanın üstünde. */
    z-index: 0;
    display: block;
    padding:
      clamp(1.25rem, 4vh, 2.5rem)
      var(--pad-shell)
      calc(env(safe-area-inset-bottom, 0px) + 3rem);
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition:
      opacity var(--d-fast) var(--ease),
      clip-path var(--d-curtain) var(--ease-inout),
      visibility 0s linear var(--d-curtain);
  }

  body.is-nav-open .navbar {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition-delay: 0s;
  }

  .navbar__list {
    display: block;
  }

  /* Satır sınırları + sırayla inen satırlar.
     Azaltılmış hareket bunu base.css killswitch'i susturur. */
  .navbar__item {
    border-top: 1px solid var(--line-soft);
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity var(--d-base) var(--ease-out),
      transform var(--d-base) var(--ease-out);
  }

  .navbar__item:last-child {
    border-bottom: 1px solid var(--line-soft);
  }

  body.is-nav-open .navbar__item {
    opacity: 1;
    transform: none;
  }

  body.is-nav-open .navbar__item:nth-child(1) { transition-delay: 60ms; }
  body.is-nav-open .navbar__item:nth-child(2) { transition-delay: 110ms; }
  body.is-nav-open .navbar__item:nth-child(3) { transition-delay: 160ms; }
  body.is-nav-open .navbar__item:nth-child(4) { transition-delay: 210ms; }
  body.is-nav-open .navbar__item:nth-child(5) { transition-delay: 260ms; }
  body.is-nav-open .navbar__item:nth-child(6) { transition-delay: 310ms; }

  /* Çekmecede bağlantılar display tipografiye geçer:
     menü bir liste değil, bir kapak sayfası gibi okunur. */
  .navbar__link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: .85rem 0;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 96, 'SOFT' 24, 'WONK' 1;
    font-size: var(--t-h3);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: var(--lh-tight);
    color: var(--fg);
  }

  /* Alt çizgi masaüstünde imzaydı; çekmecede satır sınırları
     ritmi zaten kuruyor, sinyal yalnızca mevcut sayfada. */
  .navbar__link::after {
    left: 0;
    right: auto;
    width: 2.25rem;
    bottom: .35rem;
  }

  .navbar__link[aria-current="page"]::after {
    transform: none;
  }

  .navbar__caret {
    width: 1rem;
    height: 1rem;
    color: var(--mute);
  }

  /* --- Mega → akordeon ---
     0fr → 1fr geçişi desteklenmeyen tarayıcıda animasyon
     olmadan açılıp kapanır; işlev aynı kalır. Kapalıyken
     visibility:hidden ile erişilebilirlik ağacından da düşer;
     iç kutu min-height:0 olmadan grid satırı sıfıra inmez. */
  .mega {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    overflow: hidden;
    background: none;
    border: 0;
    opacity: 1;
    clip-path: none;
    visibility: hidden;
    transition:
      grid-template-rows var(--d-base) var(--ease-inout),
      visibility 0s linear var(--d-base);
  }

  .navbar__link[aria-expanded="true"] + .mega {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
  }

  .mega__inner {
    min-height: 0;
    padding-inline: 0;
    padding-block: 0 1rem;
  }

  .mega__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mega__item {
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: .85rem;
    padding: .8rem 0;
    border: 0;
    border-radius: 0;
  }

  .mega__item + .mega__item {
    border-top: 1px solid var(--line-soft);
  }

  .mega__icon {
    width: 2rem;
    height: 2rem;
    border: 0;
  }

  .mega__icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .mega__foot {
    justify-content: flex-start;
    margin-top: .5rem;
  }
}


/* 600px altında masthead CTA'sı yuvarlak ikon butona iner.
   Etiket display:none ile SİLİNMEZ — erişilebilir ad odur;
   yalnızca görsel olarak gizlenir, ekran okuyucuda kalır. */
@media (max-width: 599px) {
  .masthead__actions .btn--signal {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: var(--r-pill);
  }

  .masthead__actions .btn--signal .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* ============================================================
   8. BUTONLAR — .btn
   Hover DOLGU SİLMESİ'dir (::before üzerinden clip-path,
   aşağıdan yukarı) + 4px ikon dürtmesi. translateY YOK:
   buton zıplamaz, dolduğu için "basılmış" hissi verir.
   clip-path tercih edildi çünkü scaleY pill yarıçapını ezer.

   isolation: isolate → ::before, z-index:-1 ile metnin ALTINDA
   ama butonun kendi zemininin ÜSTÜNDE boyanır.
   ------------------------------------------------------------ */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3rem;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-body-s);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--d-base) var(--ease-inout);
}

.btn__label {
  /* Ölçüm/split sırasında satır kırılmasın */
  display: inline-block;
}

.btn__icon {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform var(--d-fast) var(--ease-out);
}

.btn__icon svg {
  width: 1.05em;
  height: 1.05em;
}

/* --- Varyantlar --- */

/* Birincil CTA. Gradient'in izinli olduğu beş yerden biri.
   --signal-grad DEĞİL --signal-grad-ui kullanılır: 14px'lik etiket
   canlı gradyanın ember/flare yarısında beyazla 3.35:1 / 3.58:1
   veriyordu, yani sitenin birincil CTA'sı (masthead, hero, kapanış
   bandı, 404, form gönder) dinlenme durumunda WCAG 1.4.3'ü geçmiyordu.
   Koyultulmuş kademeler 4.7:1 / 5.0:1 / 7.2:1 verir; canlı gradyan
   yalnızca büyük display tipografide (3:1 eşiği) kalır. */
.btn--signal {
  background: var(--signal-grad-ui);
  /* Gradient üzerinde metin her iki perdede de beyaz okunur */
  color: #fff;
}

.btn--signal::before {
  background: var(--fg-strong);
}

/* Tema duyarlı dolgu: koyu perdede kemik/mürekkep,
   açık perdede mürekkep/kemik. */
.btn--solid {
  background: var(--fg);
  color: var(--bg);
}

.btn--solid::before {
  background: var(--bg);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--fg);
}

.btn--ghost::before {
  background: var(--fg);
}

.btn--sm {
  min-height: 2.6rem;
  padding: .6rem 1.15rem;
  font-size: .82rem;
  gap: .55rem;
}

/* --- Etkileşim ---
   Dolgu silmesi yalnızca gerçek işaretçide; dokunmatikte
   parmağın altında kalan "yapışkan hover" olmaz. Klavye
   odağında ise her koşulda çalışır. */
@media (hover: hover) {
  .btn:hover::before {
    clip-path: inset(0 0 0 0);
  }

  .btn:hover .btn__icon {
    transform: translateX(4px);
  }

  .btn--signal:hover {
    color: var(--bg);
  }

  .btn--solid:hover {
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .btn--ghost:hover {
    color: var(--bg);
    border-color: var(--fg);
  }
}

.btn:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.btn--signal:focus-visible {
  color: var(--bg);
}

.btn--solid:focus-visible {
  color: var(--fg);
}

.btn--ghost:focus-visible {
  color: var(--bg);
  border-color: var(--fg);
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: .45;
  pointer-events: none;
}

/* Dokunmatik hedefler ≥46px (§13.8) */
@media (pointer: coarse) {
  /* Telefonda menüyü açan TEK kontrol projenin kendi 46px alt sınırının
     2px altındaydı; motor kontrol güçlüğü olan kullanıcı en kritik
     hedefi ıskalıyordu. */
  .burger {
    width: 46px;
    height: 46px;
  }

  .btn,
  .btn--sm {
    min-height: 46px;
  }

  .btn--sm {
    padding-inline: 1.35rem;
  }

  .navbar__link {
    min-height: 46px;
  }
}


/* ------------------------------------------------------------
   9. SATIR İÇİ OK BAĞLANTISI — .link-arrow
   Metin bağlantısı + ok. Alt çizgi soldan çizilir, ok dürtülür.
   ------------------------------------------------------------ */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .2em;
  color: var(--fg);
  font-size: var(--t-body-s);
  font-weight: 500;
  transition: color var(--d-fast) var(--ease);
}

.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-base) var(--ease-out);
}

.link-arrow__icon {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform var(--d-fast) var(--ease-out);
}

.link-arrow__icon svg {
  width: 1em;
  height: 1em;
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--fg-strong);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: scaleX(1);
}

.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
  transform: translateX(4px);
}

@media (pointer: coarse) {
  .link-arrow {
    min-height: 46px;
  }
}


/* ------------------------------------------------------------
   10. YUVARLAK İKON BUTONU — .btn-round
   Kaydırma okları, galeri kontrolleri, ikon aksiyonları.
   ------------------------------------------------------------ */
.btn-round {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease);
}

.btn-round svg {
  width: 1.15rem;
  height: 1.15rem;
}

.btn-round:hover,
.btn-round:focus-visible {
  color: var(--bg);
  background-color: var(--fg);
  border-color: var(--fg);
}

.btn-round[aria-disabled="true"],
.btn-round:disabled {
  opacity: .35;
  pointer-events: none;
}

@media (pointer: coarse) {
  .btn-round {
    width: 46px;
    height: 46px;
  }
}


/* ============================================================
   11. MARQUEE — .marquee
   js/motion.js çocukları klonlayarak rayı 2× genişliğe
   doldurur ve kaydırma hızıyla modüle ederek kaydırır.

   JS yoksa VEYA azaltılmış hareket isteniyorsa (`is-motion`
   sınıfı hiç eklenmez) şerit yatay olarak elle kaydırılabilir
   hâle gelir: içerik hiçbir koşulda kırpılıp kaybolmaz (§13.2).
   ------------------------------------------------------------ */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Kenarlarda sert kesim yerine yumuşama */
  -webkit-mask-image: linear-gradient(
    90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(
    90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: max-content;
  /* Her karede gerçekten değişen ikinci (ve son) katman */
  will-change: transform;
}

.marquee__item {
  flex: 0 0 auto;
  white-space: nowrap;
}

html:not(.is-motion) .marquee {
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

html:not(.is-motion) .marquee::-webkit-scrollbar {
  display: none;
}

html:not(.is-motion) .marquee__track {
  will-change: auto;
}


/* ------------------------------------------------------------
   12. FİGÜR — .figure
   Stok fotoğrafın yerini alan üretilen (generative) kompozisyon
   ya da gerçek görsel. CLS yok: hem canvas hem <img> kutusu
   4/3 en-boy oranını taşır, <img> ayrıca width/height alır.
   ------------------------------------------------------------ */
.figure {
  position: relative;
  display: grid;
  gap: .7rem;
  margin: 0;
}

.figure__canvas,
.figure__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--bg-raise);
  /* Saç teli çerçeve: kenarı zeminden ayırır, düzeni etkilemez */
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.figure__img {
  object-fit: cover;
}

.figure__cap {
  color: var(--mute);
}


/* ------------------------------------------------------------
   13. GRAIN — .noise
   feTurbulence SVG'si data-URI olarak döşenir. İçeriğin
   ÜSTÜNDE (z: 5) ama masthead'in ALTINDA (z: 100) durur ve
   hiçbir tıklamayı yakalamaz.
   ------------------------------------------------------------ */
.noise {
  position: fixed;
  inset: 0;
  z-index: var(--z-noise);
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------
   14. ÖZEL İMLEÇ — .cursor
   Yalnızca html.is-motion altında ve ince işaretçide görünür;
   azaltılmış hareketle kaba işaretçide tamamen kapalı
   (base.css §7 de .cursor'u ayrıca gizler).

   NATIVE İMLEÇ GİZLENMEZ. Bilinçli karar: js/ui.js herhangi
   bir nedenle çalışmazsa ziyaretçi imleçsiz kalmasın. Katman
   `mix-blend-mode: difference` ile her zeminde okunan bir
   halka + nokta olarak eşlik eder.

   Durum sözleşmesi: js/ui.js aktif değeri .cursor üzerine
   `data-cursor="link|view|drag|hide"` olarak yazar (§5'teki
   aynı değerler). Etiket metni yazıldığında halka kendiliğinden
   büyür — yani yalnızca etiket yazan bir uygulama da doğru
   görünür.
   ------------------------------------------------------------ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  display: none;
  pointer-events: none;
  mix-blend-mode: difference;
  color: var(--bone-100);
  transition: opacity var(--d-fast) var(--ease);
}

html.is-motion .cursor {
  display: block;
}

.cursor__dot,
.cursor__ring,
.cursor__label {
  position: absolute;
  top: 0;
  left: 0;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: var(--r-pill);
  background: currentColor;
  transition: opacity var(--d-fast) var(--ease);
}

.cursor__ring {
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  opacity: .55;
  transition:
    width var(--d-base) var(--ease-out),
    height var(--d-base) var(--ease-out),
    margin var(--d-base) var(--ease-out),
    opacity var(--d-fast) var(--ease);
}

.cursor__label {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem;
  text-align: center;
  color: currentColor;
}

/* Etiket boşsa hiç yer tutmaz */
.cursor__label:empty {
  display: none;
}

/* Etiket doluysa halka etiketi çevreleyecek kadar açılır */
.cursor:has(.cursor__label:not(:empty)) .cursor__ring {
  width: 5.5rem;
  height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem;
  opacity: .9;
}

.cursor:has(.cursor__label:not(:empty)) .cursor__dot {
  opacity: 0;
}

.cursor[data-cursor="link"] .cursor__ring {
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  opacity: .9;
}

.cursor[data-cursor="drag"] .cursor__ring {
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  opacity: .9;
}

.cursor[data-cursor="hide"] {
  opacity: 0;
}

@media (pointer: coarse), (hover: none) {
  .cursor,
  html.is-motion .cursor {
    display: none !important;
  }
}


/* ------------------------------------------------------------
   15. ÖN YÜKLEYİCİ — .preloader
   Varsayılan: display:none. JS'siz ziyaretçi asla kapanmayan
   bir perde görmez (§13.2). Kaba işaretçide de kapalı: mobilde
   ilk boyaya bir şey eklemeyiz.

   Kapatma sözleşmesi: js/ui.js `.is-done` ekler, `hidden`
   niteliği yazar veya düğümü kaldırır — üçü de çalışır
   ([hidden] base.css'te display:none !important).
   ------------------------------------------------------------ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: none;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  /* Perde her zaman koyu: preloader anında sayfanın act teması
     henüz gözlemlenmemiş olabilir. */
  background: var(--ink-900);
  color: var(--bone-200);
  transition:
    opacity var(--d-base) var(--ease),
    clip-path var(--d-curtain) var(--ease-inout);
}

html.is-motion .preloader {
  display: grid;
}

.preloader__mark {
  font-size: clamp(2.75rem, 12vw, 7rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--bone-100);
}

.preloader__count {
  color: var(--mute-dark);
}

/* İlerleme çubuğu: perdenin altına yatan tek saç teli.
   js/ui.js `--progress` (0–1) yazar ya da transform verir. */
.preloader__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--signal-grad);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform var(--d-fast) linear;
}

.preloader.is-done {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

@media (pointer: coarse) {
  .preloader,
  html.is-motion .preloader {
    display: none !important;
  }
}


/* ------------------------------------------------------------
   16. SAYFA GEÇİŞ PERDESİ — .curtain
   İki panel aşağıdan yukarı kapanır (70ms arayla), yeni sayfa
   yüklenince aynı yönde açılır. Varsayılan gizli; yalnızca
   html.is-motion altında vardır.
   ------------------------------------------------------------ */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: none;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}

html.is-motion .curtain {
  display: grid;
}

.curtain__panel {
  background: var(--ink-900);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--d-curtain) var(--ease-inout);
}

/* is-in  = perde KAPALI (geçişsiz kurulum)
   is-out = perde AÇILIYOR (animasyonla çekilir)
   Bunlar js/ui.js'in yazdığı sınıflar; CSS'te karşılığı yoktu, bu yüzden
   her sayfa varışında geçiş TERS oynuyordu: yeni sayfa boyanıyor, sonra
   siyah perde üzerini kapatıp geri çekiliyordu (~1.3s siyah ekran). */
.curtain.is-in .curtain__panel {
  transform: scaleY(1);
  transition: none;
}

.curtain.is-out .curtain__panel {
  transform: scaleY(0);
}

.curtain.is-active .curtain__panel {
  transform: scaleY(1);
}

.curtain.is-active .curtain__panel:last-child {
  transition-delay: 70ms;
}


/* ============================================================
   17. FOOTER — .footer
   Bağlantı çöplüğü değil, tasarlanmış kapanış perdesi:
   dev bir cümle, dört sütun, künye.
   ------------------------------------------------------------ */
.footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 6vw, 6.5rem) clamp(1.5rem, 2vw, 2.25rem);
  background: var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* Dev cümle konteynere ölçeklenir: kapsayıcı kabuk bir
   konteyner ilan edilir, punto cqi ile okunur. Destek yoksa
   vw'lik ilk satır geçerli kalır. */
.footer > .shell {
  container-type: inline-size;
}

.footer__statement {
  font-size: clamp(2.35rem, 9.5vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--fg-strong);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-wrap: balance;
}

@supports (container-type: inline-size) {
  .footer__statement {
    font-size: clamp(2.35rem, 10.5cqi, 9.5rem);
  }
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3.5rem);
  padding-block: clamp(2.5rem, 4vw, 4rem);
}

.footer__brand {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.footer__brand .wordmark__mark {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.footer__col {
  display: grid;
  gap: .9rem;
  align-content: start;
}

.footer__col > h2 {
  color: var(--mute);
  font-weight: 500;
}

.footer__col ul {
  display: grid;
  gap: .55rem;
}

.footer__col a {
  display: inline-block;
  color: var(--mute);
  font-size: var(--t-body-s);
  transition: color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease-out);
}

.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--fg-strong);
  transform: translateX(4px);
}

/* İletişim bloğu build.mjs'ten <address> olarak gelir */
.footer__col address {
  display: grid;
  gap: .35rem;
  color: var(--mute);
  font-size: var(--t-body-s);
  line-height: 1.75;
}

.footer__col address a {
  font-size: inherit;
}

/* Sosyal ikonlar: yuvarlak, saç teli çerçeveli */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition:
    color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease);
}

.footer__social a:hover,
.footer__social a:focus-visible {
  color: var(--bg);
  background-color: var(--fg);
  border-color: var(--fg);
  /* Emniyet: sosyal ikon bir sütunun içine taşınırsa
     .footer__col a'nın yatay dürtmesini almasın. */
  transform: none;
}

.footer__social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem var(--gap);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--line-soft);
  color: var(--mute);
}

@media (max-width: 1099px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 599px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

@media (pointer: coarse) {
  .footer__col a {
    display: flex;
    align-items: center;
    min-height: 46px;
  }

  .footer__social a {
    width: 46px;
    height: 46px;
  }
}


/* ============================================================
   18. KAPANIŞ BANDI — .cta-act
   Her sayfa bununla kapanır. Gradient burada YALNIZCA
   .btn--signal dolgusunda ve bandın arkasındaki yumuşak
   parıltıda görünür — dekorasyon değil, kapanış vurgusu.
   Parıltı radial maske ile elde edilir; blur filtresi yok,
   çünkü sabit ama pahalı bir katman istemiyoruz.
   ------------------------------------------------------------ */
.cta-act {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-act::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(140%, 1500px);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: var(--signal-grad-soft);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
  pointer-events: none;
}

/* Ortalanmış banda göre eyebrow'un öndeki saç teli de ortalanır */
.cta-act .act-head__eyebrow {
  justify-content: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.cta-act__title {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: -.028em;
  color: var(--fg-strong);
  max-width: 26ch;
  margin-inline: auto;
}

.cta-act__text {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  font-size: var(--t-body-l);
}

.cta-act__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 1.5vw, 1.15rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

@media (max-width: 599px) {
  /* Telefonda iki CTA tam genişlik yığına döner:
     hedefler büyük, hiyerarşi net. */
  .cta-act__actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ============================================================
   19. BASKI — yardımcı katmanlar kâğıda gitmez
   ------------------------------------------------------------ */
@media print {
  .progress-rail,
  .noise,
  .cursor,
  .curtain,
  .preloader,
  .burger,
  .mega {
    display: none !important;
  }

  .masthead {
    position: static;
    border-bottom-color: currentColor;
  }

  .footer__statement {
    font-size: 2.5rem;
  }

  .cta-act::before {
    display: none;
  }
}