/* ==========================================================================
   Düzen: kapsayıcı, grid, header, menü (masaüstü + mobil katman), footer
   Mobil öncelikli. Masaüstü menü 64em (1024 px) ve üstü.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
}
@media (min-width: 64em) {
  .grid { column-gap: var(--s-4); }
}

/* ================================================================ Header */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-3);
  padding-block: var(--s-1);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ------------------------------------------------------- Dil geçişi */

.lang-switch {
  display: flex;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-soft);
  text-decoration: none;
}
.lang-switch__item.is-current { color: var(--ink); }
a.lang-switch__item:hover { color: var(--ink); text-decoration: underline; }
.lang-switch__sep { color: var(--ink-mute); }

/* ------------------------------------------------------ Menü düğmesi */

.nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0 0 var(--s-1);
  background: none;
  border: 0;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------------------------------------------------- Menü: ortak */

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-row { display: flex; align-items: center; }

.nav-link,
.sub-link {
  text-decoration: none;
}
.nav-link[aria-current="page"],
.sub-link[aria-current="page"],
.nav-item.is-active > .nav-row .nav-link {
  text-decoration: underline;
}

.sub-list { list-style: none; margin: 0; padding: 0; }

/* Katman içi dil geçişi yalnızca mobil + JS'de görünür */
.site-nav__lang { display: none; }

/* Kısa linkler de en az 44×44 dokunma alanı */
.nav-link, .sub-link, .site-footer__col a { min-width: 44px; }

/* ------------------------------------ Menü: mobil, JS yokken (düz liste) */

@media (max-width: 63.99em) {
  .site-nav {
    order: 3;
    width: 100%;
    padding-block: var(--s-2) var(--s-3);
    border-top: 1px solid var(--rule);
  }
  .nav-list { display: grid; gap: var(--s-1); }
  .nav-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-serif); font-size: var(--fs-h3); }
  .sub-list { padding-left: var(--s-2); margin-bottom: var(--s-1); }
  .sub-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); }
  .sub-toggle { display: none; }

  /* ----------------------- JS varken: tam ekran katman */

  .js .nav-toggle { display: inline-flex; align-items: center; }

  /* JS varken dil geçişi header'dan katmana taşınır (header tek satır kalır) */
  .js .header-tools .lang-switch { display: none; }
  .js .site-nav__lang {
    display: block;
    margin-top: var(--s-5);
    padding-top: var(--s-2);
    border-top: 1px solid var(--rule);
  }
  .js .site-nav__lang .lang-switch { margin-left: calc(var(--s-1) * -1); }

  /* İsim ve Menü/Kapat düğmesi açık katmanın üstünde kalır */
  .js .wordmark,
  .js .header-tools { position: relative; z-index: 45; }

  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    order: 0;
    width: auto;
    padding: var(--s-7) var(--gutter) var(--s-5);
    border-top: 0;
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-mid) var(--ease), visibility 0s linear var(--dur-mid);
  }
  .js.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur-mid) var(--ease), visibility 0s;
  }

  .js .nav-list {
    gap: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
  }
  .js .nav-link {
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: var(--lh-head);
  }
  .js .sub-list {
    display: grid;
    gap: 0;
    padding-left: 0;
    margin-top: var(--s-1);
  }
  .js .sub-link { font-size: var(--fs-body); }

  /* Katman açıkken sayfa kaymaz */
  .nav-open body { overflow: hidden; }
}

/* ---------------------------------------------------- Menü: masaüstü */

@media (min-width: 64em) {
  .site-header__inner { flex-wrap: nowrap; }

  .site-nav { margin-left: auto; }

  .nav-list {
    display: flex;
    align-items: center;
    gap: var(--s-4);
  }

  .nav-item { position: relative; }

  .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: var(--fs-small);
  }
  .nav-link:hover { text-decoration: underline; }

  /* Alt menü açma düğmesi: ince ok (CSS çizgisi) */
  .sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: 44px;
    margin-right: calc(var(--s-1) * -1);
    padding: 0;
    background: none;
    border: 0;
  }
  .sub-toggle::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
  }
  .sub-toggle[aria-expanded="true"]::before { transform: translateY(3px) rotate(-135deg); }
  .sub-toggle:focus-visible { outline-offset: -2px; }

  .sub-list {
    position: absolute;
    top: 100%;
    left: calc(var(--s-2) * -1);
    width: max-content;
    padding: var(--s-1) var(--s-2);
    background: var(--paper);
    border: 1px solid var(--rule);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
  }
  .has-sub:hover > .sub-list,
  .has-sub:focus-within > .sub-list,
  .has-sub.is-open > .sub-list {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  /* Esc ile kapatıldıysa hover/odak açmaz (JS) */
  .has-sub.is-closed > .sub-list { visibility: hidden; opacity: 0; }

  .sub-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-small);
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
  }
  .sub-list li:last-child .sub-link { border-bottom: 0; }
  .sub-link:hover,
  .sub-link[aria-current="page"] { color: var(--ink); }

  .header-tools { margin-left: var(--s-3); }
}

/* ============================================================ Sayfa başı */

.page-head {
  padding-top: var(--s-7);
  padding-bottom: var(--s-5);
}
.page-head__crumb { margin-bottom: var(--s-2); }
.page-head__crumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.page-head__crumb a:hover { text-decoration: underline; }
.page-head__title { max-width: 18ch; }

.page-body > * { max-width: var(--text-w); }

/* ================================================================ Footer */

.site-footer {
  margin-top: var(--section-gap);
  padding-block: var(--s-7) var(--s-4);
  background: var(--night);
  color: var(--night-ink);
}
.site-footer .label { color: var(--night-ink); margin-bottom: var(--s-2); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: var(--s-5);
}
.site-footer__name {
  margin: 0 0 var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: var(--lh-head);
}
.site-footer__tagline {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
}
.site-footer__col ul { display: grid; gap: 0; }
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
}

/* Sosyal hesaplar (footer + İletişim): satır içi metin linkler, dar ekranda alt satıra kırılır.
   Dikey boşluk 44 px dokunma hedefinden gelir; ikon, çerçeve, ayraç yok (CLAUDE.md §4.2). */
.social-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-3);
  row-gap: 0;
  margin: 0;
  padding: 0;
}
/* Dokunma alanı en az 44×44 px; kısa adlarda (X) görünür aralığı bozmamak için görünmez katmanla genişletilir */
.social-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.social-links a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.site-footer__social { margin-top: var(--s-5); }
.site-footer__social .label { margin-bottom: 0; }
.site-footer__social a { font-size: var(--fs-small); }

.site-footer__bottom {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-night);
  font-size: var(--fs-small);
}
.site-footer__bottom p { margin: 0; }

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-4);
  }
  .site-footer__id { grid-column: 1 / span 6; }
  .site-footer__col { grid-column: span 3; }
}

/* ======================================================== Kaydırma davranışı
   JS varken header yapışkan: aşağı kaydırınca gizlenir, yukarı kaydırınca döner
   (main.js → html.header-hidden, --header-h). Transform kullanılmaz; kullanılsaydı
   mobil menü katmanının (position: fixed) referansı header olurdu.
   Yapışkan öğeler (dizin, bölüm başlıkları) --sticky-top ile header'ın altından kayar. */

:root { --sticky-top: 0px; }

.js .site-header {
  position: sticky;
  top: 0;
  transition: top var(--dur-mid) var(--ease);
}
.js.header-hidden .site-header { top: calc(var(--header-h, 0px) * -1 - 1px); }

.js { --sticky-top: var(--header-h, 0px); }
.js.header-hidden { --sticky-top: 0px; }

.is-sticky {
  position: sticky;
  top: calc(var(--sticky-top) + var(--s-3));
  transition: top var(--dur-mid) var(--ease);
}

/* ================================================================= Hareket
   Başlangıç durumları yalnızca html.js varken. main.js GSAP'i başlatınca html.anim-ready;
   GSAP yüklenmezse, hareket azaltılmışsa veya 2,5 sn içinde başlamazsa html.anim-off → her şey görünür. */

.js [data-anim] { opacity: 0; transform: translateY(12px); }
.js [data-anim-mask] { clip-path: inset(100% 0 0 0); }

.js.anim-off [data-anim] { opacity: 1; transform: none; }
.js.anim-off [data-anim-mask] { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1; transform: none; }
  .js [data-anim-mask] { clip-path: none; }
}

/* Açılış (manşet, [data-hero]): CSS animasyonu — JS/GSAP yüklenmesini beklemez, ilk boyamayla başlar.
   LCP görseli (portre) böylece ağ yavaş olsa da geç görünmez. Sıra: style="--i: n". */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-unmask {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes hero-settle {
  from { transform: scale(1.04); }
  to   { transform: none; }
}

.js [data-hero] [data-anim] {
  opacity: 1;
  transform: none;
  animation: hero-rise var(--dur-slow) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.js [data-hero] [data-anim-mask] {
  clip-path: none;
  animation: hero-unmask 1.1s var(--ease) 100ms both;
}
.js [data-hero] [data-anim-mask] img {
  animation: hero-settle 1.4s var(--ease) 100ms both;
}

.js.anim-off [data-hero] [data-anim],
.js.anim-off [data-hero] [data-anim-mask],
.js.anim-off [data-hero] [data-anim-mask] img { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-hero] [data-anim],
  .js [data-hero] [data-anim-mask],
  .js [data-hero] [data-anim-mask] img { animation: none; }
}

/* Footer alt satır: telif + KVKK linki */
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.site-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }