/* Sitenin her sayfasında AYNI olan katman: token'lar, temel öğeler, başlık ve
   altbilgi. Her sayfa bunu yükler, ardından kendi sayfa stilini yükler
   (assets/site.css ana sayfa · assets/blog.css blog ve hukuki sayfalar).

   Neden ayrı dosya: başlık ve altbilgi iki ayrı stil dosyasında ikizlenmişti.
   Altbilgi üç kolona çıkınca `nav` seçicisi üç altbilgi bölmesini de yakaladı ve
   her biri ikinci bir sabit başlık çubuğuna dönüştü. Tek kopya = tek doğru yer. */

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

:root {
  /* Light industrial — mobil uygulamaların temasını yansıtır */
  --bg:        #FFFFFF;
  --surface:   #F7F7F8;   /* app surface */
  --surface-2: #EEF1F4;
  --ink:       #1B1F2B;   /* app text-primary */
  --ink-2:     #5A5E6B;   /* app text-secondary */
  --ink-3:     #6B6F7C;   /* muted — beyazda 5.01:1, yüzeyde 4.68:1 (AA) */
  --navy:      #1E3A5F;   /* kiracı vurgusu — ana marka rengi */
  --navy-dark: #152C49;
  --steel:     #3E5A8C;   /* katlanmış k bacağı */
  --amber:     #DE6016;   /* operasyon vurgusu */
  --amber-dark:#B45309;   /* beyaz üstünde amber metin (AA) */
  --amber-tint:#FEF3C7;   /* app accent-light */
  --border:    #E4E6EA;   /* app border */
  --border-2:  #D6D9DF;
  --r: 16px; --r-field: 12px; --r-photo: 12px;
  --z-nav: 100;
  --pad: clamp(1.25rem, 4vw, 3rem);
  /* Başlık ve altbilgi her sayfada aynı genişlikte durur. İçerik genişliği
     (--maxw) sayfaya göre değişir; site kabuğu değişmez. */
  --chrome-maxw: 1180px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--navy); color: #fff; }

/* ── MARKA ── */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand .wordmark { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

/* ── BAŞLIK ──
   Yalnızca #nav. Çıplak `nav` seçicisi kullanılmaz: altbilgide üç
   <nav class="footer-col"> bölmesi var, onları da yakalar. Konumlandırma
   (fixed / sticky) sayfa stilinde kalır; ana sayfada kahraman görselin
   üstüne biner, belge sayfalarında içeriği aşağı iter. */
#nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem var(--pad);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s;
}
#nav.scrolled { box-shadow: 0 4px 20px rgba(27,31,43,.06); }
#nav .brand { gap: .72rem; }
#nav .brand svg { width: 40px; height: 40px; }
#nav .brand .wordmark { font-size: 1.6rem; }
#nav ul { display: flex; gap: 1.6rem; list-style: none; align-items: center; }
.navlink { color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 600; transition: color .18s; }
.navlink:hover { color: var(--ink); }
.nav-cta {
  background: var(--navy); color: #fff; padding: .62rem 1.3rem; border-radius: var(--r-field);
  font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .18s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--navy-dark); }

/* Dar ekranda hangi tarafın küçüleceğini burası belirler.
   `space-between` iki çocuğa da esneme payı verir; kimse `min-width: auto`yu
   aşamayacağı için ikisi de kendi doğal genişliğinde durur ve toplam genişlik
   ekranı geçtiğinde çakışırlar — `overflow-x: hidden` da bunu kaydırmak yerine
   kırpar, yani "erken erişim düğmesi logonun üstüne biniyor" görüntüsü çıkar.
   Marka küçülebilsin (kelime işareti gerekirse üç noktayla kısalır), gezinme
   tarafı hiç küçülmesin: bir düğme yarısı kesilmiş hâlde kullanılamaz, ama
   kısalmış bir kelime işareti hâlâ okunur ve logo zaten yanında durur. */
#nav .brand { min-width: 0; }
#nav .brand svg { flex: none; }
#nav .brand .wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nav ul { flex: none; }

/* Dil değiştirici — düğme değil, aynı sayfanın öbür dildeki karşılığına giden bir
   bağlantı. Altı çizili duruyor ki gezinme bağlantılarından ayrışsın. */
.lang-switch {
  color: var(--ink-2); font-size: .92rem; font-weight: 600; text-decoration: underline;
  text-underline-offset: .22em; text-decoration-thickness: 1px;
  white-space: nowrap; transition: color .18s;
}
.lang-switch:hover { color: var(--navy); }

/* ── ALTBİLGİ ── */
footer { background: var(--bg); border-top: 1px solid var(--border); padding: clamp(2.75rem, 6vw, 4rem) var(--pad) 2.25rem; }
.footer-grid {
  max-width: var(--chrome-maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 2.5rem 2rem;
}
.footer-brand { max-width: 22rem; }
.footer-tagline { color: var(--ink-3); font-size: .9rem; line-height: 1.6; margin-top: .85rem; }
.footer-col h2 { font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: .9rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer-col a { color: var(--ink-2); font-size: .92rem; text-decoration: none; transition: color .18s; }
.footer-col a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: .2em; }

.footer-legal {
  max-width: var(--chrome-maxw); margin: clamp(2.25rem, 5vw, 3rem) auto 0;
  padding-top: 1.4rem; border-top: 1px solid var(--border);
}
.footer-legal p + p { margin-top: .5rem; }
.footer-kunye { color: var(--ink-3); font-size: .8rem; line-height: 1.7; }
.footer-kunye a { color: var(--ink-3); text-decoration: underline; text-underline-offset: .2em; }
.footer-kunye a:hover { color: var(--navy); }
.footer-rights { color: var(--ink-3); font-size: .8rem; }
.footer-credit { color: var(--ink-3); font-size: .74rem; line-height: 1.6; }
.footer-credit a { color: var(--ink-3); }

@media (max-width: 900px) {
  /* Gezinme bağlantıları dar ekranda gizlenir. Bu kural site.css'te duruyordu —
     yani YALNIZCA ana sayfada. Hukuki sayfalar ve blog blog.css yüklüyor, orada
     karşılığı yoktu, dolayısıyla /gizlilik ve /blog gibi sayfalarda beş bağlantı
     telefonda da görünüyor ve başlığı taşırıyordu. Başlık her sayfada aynı, kuralı
     da başlığın yaşadığı dosyada olmalı: bu dosyanın en başındaki not tam olarak
     bunun için yazılmış. */
  #nav ul li.hide-sm { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* Telefonda başlıkta yalnız üç şey kalıyor: marka, "erken erişim" ve dil.
     Ölçüler bunun için küçülüyor — 320 px'te bile üçü yan yana sığsın diye. */
  #nav { padding: .8rem 1.1rem; }
  #nav ul { gap: .9rem; }
  #nav .brand { gap: .5rem; }
  #nav .brand svg { width: 32px; height: 32px; }
  #nav .brand .wordmark { font-size: 1.25rem; }
  .nav-cta { padding: .55rem 1rem; font-size: .85rem; }
}

/* Hukuki metinler yazdırılır: sayfa kabuğu kâğıda gitmesin, bağlantı hedefleri
   görünür olsun. */
@media print {
  #nav, footer, .post-cta { display: none !important; }
  html, body { background: #fff; color: #000; }
  .prose a::after { content: ' (' attr(href) ')'; font-size: .85em; word-break: break-all; }
  .post, .legal { max-width: none; padding: 0; }
  h1, h2, h3 { break-after: avoid; }
  table, blockquote, li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}