/* ===========================================================================
   kabuk.css — header, mobil menü ve footer.

   Kurumsal siteden (akatur-site) kopyalandı — commit 7765bae, main:
     src/components/SiteHeader.astro   → "Header" bölümü
     src/components/Nav.astro          → "Masaüstü menü"
     src/components/Logo.astro         → "Logo kilidi"
     src/components/MobilMenu.astro    → "Mobil menü paneli"
     src/components/SiteFooter.astro   → "Footer"

   KAYNAKTAN İKİ FARK, ikisi de hesaplanan görünümü değiştirmiyor:

   1. KAPSAMLAMA. Astro her bileşenin <style> bloğunu kendiliğinden o bileşene
      kapsıyordu (`[data-astro-cid-…]`). Burada build adımı yok, bu yüzden
      kurallar elle `.site-basligi` / `#mobil-menu` / `.site-altbilgisi` altına
      alındı. Amaç aynı: `.telif`, `.sag`, `.menu` gibi genel adların sayfa
      CSS'ine sızmaması.
   2. ROZET RENGİ. `.rozetler li` kurumsal kaynakta ham `#9da1a8`; burada
      `var(--muted-koyu)` — aynı değer. Gerekçe kuralın yanında yazılı.

   Header ÜST ŞERİDİ YOKTUR ve geri eklenmez (turu 2 kararı). Şerittteki iki
   bilgi kaybolmadı: belge etiketi footer telifinde, telefon ana çubuğun
   sağında (≥1024).
   =========================================================================== */


/* ===========================================================================
   Logo kilidi  (Logo.astro)
   Header, mobil menü başlığı ve footer üçü de kullanır; o yüzden kapsanmadı.
   Ölçüler SINIFLA verilir — inline `style` niteliği CSP style-src 'self' ile
   engelleniyor (kurumsal sitede test edildi, tarayıcı bloke ediyor).
   =========================================================================== */

.kilit {
  display: inline-flex;
  align-items: center;
  gap: var(--logo-ara);
}

/* .boyut-baslik'in kendi override'ı YOK: token varsayılanlarını kullanır
   (mobil 40/24/12 · masaüstü 48/30/16). Tur 2'de logo bu ölçüye büyütüldü. */
.boyut-menu        { --logo-isaret: 32px; --logo-kelime: 19px; --logo-ara: 10px; }
.boyut-footer-ince { --logo-isaret: 36px; --logo-kelime: 22px; --logo-ara: 12px; }
.boyut-footer-tam  { --logo-isaret: 34px; --logo-kelime: 20px; --logo-ara: 10px; }
@media (min-width: 1024px) {
  .boyut-footer-tam { --logo-isaret: 40px; --logo-kelime: 24px; --logo-ara: 13px; }
}

.kilit .isaret { height: var(--logo-isaret); width: auto; }
.kilit .kelime { height: var(--logo-kelime); width: auto; }


/* ===========================================================================
   Header  (SiteHeader.astro)
   =========================================================================== */

/* Sabitlenmez — spesifikasyon §7 "Sabitlenmez (sticky değil)" */
.site-basligi { background: var(--paper); }

/* Altta 1px --ink: sitenin en güçlü yatay çizgisi (spesifikasyon §7) */
.site-basligi .ana-cubuk { border-bottom: 1px solid var(--ink); }

.site-basligi .cubuk-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Tur 2: dikey dolgu 18 → 24px (masaüstü). */
  padding-block: var(--bosluk-18);
}
@media (min-width: 1024px) {
  .site-basligi .cubuk-ic { padding-block: var(--bosluk-24); }
}

.site-basligi .logo-baglantisi {
  display: inline-flex;
  text-decoration: none;
}

/* --- Menü + telefon ------------------------------------------------------ */
.site-basligi .sag {
  display: none;
  align-items: center;
  gap: var(--bosluk-24);
}
@media (min-width: 1024px) {
  .site-basligi .sag { display: flex; }
}

/* Menüden sonra, solunda 1px --line dikey ayırıcı. Yalnızca ≥1024. */
.site-basligi .tel {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bosluk-12);
  padding-left: var(--bosluk-24);
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--ts-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
.site-basligi .tel:hover { color: var(--accent); }

/* Panel başlığındaki rozet — kurumsal sitede yok, panele özgü.
   Telefonun bıraktığı yerde, aynı mono ölçüde. */
.site-basligi .panel-rozeti {
  color: var(--muted);
}

/* --- Hamburger: 44×44 dokunma hedefi, çizgiler 22/22/14px, 2px, 5px aralık */
.site-basligi .hamburger {
  width: var(--dokunma-hedefi);
  height: var(--dokunma-hedefi);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}
@media (min-width: 1024px) {
  .site-basligi .hamburger { display: none; }
}
.site-basligi .cizgi {
  display: block;
  height: 2px;
  background: var(--ink);
}
.site-basligi .cizgi-1,
.site-basligi .cizgi-2 { width: 22px; }
.site-basligi .cizgi-3 { width: 14px; }


/* ===========================================================================
   Masaüstü menü  (Nav.astro)
   Öğeler arası 34px, 14.5px/500, aktif öğede 2px --accent alt çizgi.
   =========================================================================== */

.site-basligi .ana-menu {
  display: none;
  gap: 34px;
}
/* Menü yalnızca lg'de yatay açılır; altında hamburger (spesifikasyon §5) */
@media (min-width: 1024px) {
  .site-basligi .ana-menu { display: flex; }
}

.site-basligi .oge {
  font-size: var(--ts-menu);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
/* Hover: 1px --ink alt çizgi. `text-decoration` kullanılıyor çünkü border
   kalınlığını değiştirmek öğeyi 1px oynatırdı (aktif çizgi 2px). */
.site-basligi .oge:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-basligi .oge.aktif { border-bottom-color: var(--accent); }


/* ===========================================================================
   Mobil menü paneli  (MobilMenu.astro)
   =========================================================================== */

#mobil-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mobil-menu[hidden] { display: none; }

/* lg'de yatay menü açıldığı için panel hiç kullanılmaz */
@media (min-width: 1024px) {
  #mobil-menu { display: none !important; }
}

#mobil-menu .panel-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bosluk-12) var(--bosluk-20);
  border-bottom: 1px solid var(--line-dark);
}

#mobil-menu .kapat {
  width: var(--dokunma-hedefi);
  height: var(--dokunma-hedefi);
  display: grid;
  place-items: center;
  color: var(--paper);
}
#mobil-menu .kapat svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

#mobil-menu .menu { padding-inline: var(--bosluk-20); }
#mobil-menu .menu ul { list-style: none; margin: 0; padding: 0; }

#mobil-menu .ana-oge {
  display: block;
  font-size: var(--ts-menu-mobil);
  font-weight: 600;
  line-height: 1;
  padding-block: 19px;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
}
#mobil-menu .ana-oge.aktif { color: var(--accent); }

#mobil-menu .alt-liste { padding-bottom: var(--bosluk-8); }
#mobil-menu .alt-oge {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  padding-block: var(--bosluk-10);
  color: var(--footer-link);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
}
#mobil-menu .alt-oge:hover,
#mobil-menu .alt-oge.aktif { color: var(--paper); }

#mobil-menu .panel-sonu {
  margin-top: auto;
  padding: var(--bosluk-24) var(--bosluk-20) var(--bosluk-32);
}
/* Kaynakta `display: block` yazıp hemen altında `display: grid` ile eziliyordu;
   ölü bildirim kopyalanmadı, hesaplanan değer aynı. */
#mobil-menu .teklif {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--paper);
  text-align: center;
  font-size: var(--ts-buton);
  font-weight: 600;
  line-height: 1;
  padding-block: var(--bosluk-16);
  min-height: 48px;
  text-decoration: none;
}
#mobil-menu .iletisim {
  margin-top: var(--bosluk-16);
  color: var(--footer-link);
  text-align: center;
}
#mobil-menu .iletisim a { color: inherit; text-decoration: none; }
#mobil-menu .iletisim a:hover { color: var(--paper); }


/* ===========================================================================
   Footer  (SiteFooter.astro)
   =========================================================================== */

.site-altbilgisi {
  background: var(--ink);
  color: var(--paper);
}

/* --- İnce biçim ---------------------------------------------------------- */
.site-altbilgisi .ince {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bosluk-16);
  padding-block: var(--bosluk-32);
}
@media (min-width: 768px) {
  .site-altbilgisi .ince {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--bosluk-36);
  }
}

.site-altbilgisi .kilit-blok {
  display: flex;
  align-items: center;
  gap: var(--bosluk-16);
  flex-wrap: wrap;
}

/* §8: mono, masaüstü 11px / 0.18em, mobil 10px / 0.16em, uppercase */
.site-altbilgisi .alt-satir {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-link);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .site-altbilgisi .alt-satir { font-size: 11px; letter-spacing: 0.18em; }
}

.site-altbilgisi .telif {
  font-size: var(--ts-telif);
  line-height: var(--lh-telif);
  color: var(--muted-koyu);
}

/* --- Tam biçim ----------------------------------------------------------- */
.site-altbilgisi .tam { padding-block: var(--bosluk-32); }
@media (min-width: 1024px) {
  .site-altbilgisi .tam { padding-block: var(--bosluk-48); }
}

/* §8: mobilde dikey yığın 24px aralık; masaüstü 1.2fr 1fr 1fr 1fr, 44px */
.site-altbilgisi .sutunlar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-24);
}
@media (min-width: 768px) {
  .site-altbilgisi .sutunlar { grid-template-columns: 1fr 1fr; gap: var(--bosluk-32); }
}
@media (min-width: 1024px) {
  .site-altbilgisi .sutunlar {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: var(--bosluk-44);
  }
}

.site-altbilgisi .marka-blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bosluk-8);
}
.site-altbilgisi .kurulus {
  margin-top: var(--bosluk-4);
  color: var(--muted-koyu);
}

/* §8 sütun başlıkları: mono 10.5px, 0.1em. Renk --muted-koyu:
   --muted koyu zeminde 3.53:1 ile AA'yı geçemiyor (01.09.2026 ölçümü). */
.site-altbilgisi .sutun-basligi {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted-koyu);
  font-weight: 400;
  margin-bottom: var(--bosluk-12);
}
.site-altbilgisi .sutun ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-8);
}
/* Afordans (10.09.2026, kurumsal site commit a1b3cbd): dinlenmede alt çizgi.
   Footer'daki dokuz link düz metinden ayırt edilemiyordu; renk tek başına
   sinyal WCAG 1.4.1 açısından da zayıf. `.yer-adres` link DEĞİL, çizgisiz
   kalır — ayrım tam da bu: adres bilgi, telefon/e-posta tıklanır. */
.site-altbilgisi .sutun a {
  color: var(--footer-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--ts-liste);
  line-height: 1.5;
}
.site-altbilgisi .sutun a:hover { color: var(--paper); }

.site-altbilgisi .iletisim-listesi { gap: var(--bosluk-14); }
.site-altbilgisi .iletisim-listesi li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-altbilgisi .yer-etiketi { color: var(--muted-koyu); }
.site-altbilgisi .yer-adres {
  color: var(--footer-link);
  font-size: var(--ts-liste);
  line-height: 1.5;
}

/* §8 alt satır: üstte 1px --line-dark, 38px üst boşluk, 22px iç boşluk */
.site-altbilgisi .alt-serit {
  margin-top: var(--bosluk-32);
  padding-top: var(--bosluk-22);
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-16);
}
@media (min-width: 1024px) {
  .site-altbilgisi .alt-serit {
    margin-top: 38px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* §6 Rozet, koyu zemin: kenarlık --line-dark, metin #9DA1A8 */
.site-altbilgisi .rozetler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-8);
}
@media (min-width: 1024px) {
  .site-altbilgisi .rozetler { gap: var(--bosluk-10); }
}
/* KOPYADAN TEK BİLİNÇLİ FARK: kurumsal kaynakta bu satır `color: #9da1a8`
   diye ham yazılı (SiteFooter.astro:266) — ama değer `--muted-koyu`nun birebir
   aynısı ve oradaki yorum bile token'ın değerini anıyor, yani niyet token'dı.
   "Renk yalnızca tokens.css'ten gelir" doğrulaması bu tek satıra takılıyordu;
   hesaplanan renk değişmeden token'a bağlandı. Kurumsal tarafta da
   düzeltilirse bu fark kendiliğinden kapanır. */
.site-altbilgisi .rozetler li {
  border: 1px solid var(--line-dark);
  color: var(--muted-koyu);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px var(--bosluk-12);
}
@media (min-width: 1024px) {
  .site-altbilgisi .rozetler li { font-size: 10.5px; padding: 9px var(--bosluk-16); }
}