/* ============================================================
   ARDARİUM — ANİMASYON
   Belirme sistemi, metin bölme kutuları, kare dizileri, sahnelerin
   başlangıç durumları.

   Süreler ve eğriler referansın kendi SCSS'inden alındı; her blokta
   ANIMASYON-ENVANTERI.md'deki madde numarası yazılı.
   Hareketi asıl süren GSAP + ScrollTrigger: kod/kod.js.
   ============================================================ */

/* ---------- H1–H4  BELİRME (REVEAL) SİSTEMİ ---------- */
/* Öğe ekrana girince .bekliyor → .belirdi. Süre 1.2 sn,
   eğri cubic-bezier(.645,.045,.355,1), ötelenme 5vh. */

@media screen and (prefers-reduced-motion: no-preference) {

  .belirdi:not(.bolum__sutun):not([class*="bolum__not"]),
  .belirdi.bolum__sutun .bolum__sutun__ic,
  .belirdi .bolum__not {
    transition: var(--aniTimeUzun) var(--aniEgriUzun);
    transition-property: opacity, transform;
  }

  /* H2 — kardeşler sırayla: 0.1 sn × sıra, 19 kademeye kadar */
  .belirdi:nth-child(1)  { transition-delay: .1s; }
  .belirdi:nth-child(2)  { transition-delay: .2s; }
  .belirdi:nth-child(3)  { transition-delay: .3s; }
  .belirdi:nth-child(4)  { transition-delay: .4s; }
  .belirdi:nth-child(5)  { transition-delay: .5s; }
  .belirdi:nth-child(6)  { transition-delay: .6s; }
  .belirdi:nth-child(7)  { transition-delay: .7s; }
  .belirdi:nth-child(8)  { transition-delay: .8s; }
  .belirdi:nth-child(9)  { transition-delay: .9s; }
  .belirdi:nth-child(10) { transition-delay: 1s; }
  .belirdi:nth-child(11) { transition-delay: 1.1s; }
  .belirdi:nth-child(12) { transition-delay: 1.2s; }
  .belirdi:nth-child(13) { transition-delay: 1.3s; }
  .belirdi:nth-child(14) { transition-delay: 1.4s; }
  .belirdi:nth-child(15) { transition-delay: 1.5s; }
  .belirdi:nth-child(16) { transition-delay: 1.6s; }
  .belirdi:nth-child(17) { transition-delay: 1.7s; }
  .belirdi:nth-child(18) { transition-delay: 1.8s; }
  .belirdi:nth-child(19) { transition-delay: 1.9s; }

  /* H3 — sütunlarda ek gecikme (yalnız 36em üstünde) */
  @media screen and (min-width: 36em) {
    .belirdi.bolum__sutun--2 .bolum__sutun__ic { transition-delay: .5s !important; }
    .belirdi.bolum__sutun--3 .bolum__sutun__ic { transition-delay: 1s !important; }
  }

  /* Başlangıç durumları — beş yön */
  .bekliyor { pointer-events: none; }

  .bekliyor.anima--sol:not(.bolum__sutun):not([class*="bolum__not"]),
  .bekliyor.anima--sol.bolum__sutun .bolum__sutun__ic,
  .bekliyor.anima--sol .bolum__not      { opacity: 0; transform: translate3d(-5vh, 0, 0); }

  .bekliyor.anima--sag:not(.bolum__sutun):not([class*="bolum__not"]),
  .bekliyor.anima--sag.bolum__sutun .bolum__sutun__ic,
  .bekliyor.anima--sag .bolum__not      { opacity: 0; transform: translate3d(5vh, 0, 0); }

  .bekliyor.anima--ust:not(.bolum__sutun):not([class*="bolum__not"]),
  .bekliyor.anima--ust.bolum__sutun .bolum__sutun__ic,
  .bekliyor.anima--ust .bolum__not      { opacity: 0; transform: translate3d(0, -5vh, 0); }

  .bekliyor.anima--alt:not(.bolum__sutun):not([class*="bolum__not"]),
  .bekliyor.anima--alt.bolum__sutun .bolum__sutun__ic,
  .bekliyor.anima--alt .bolum__not      { opacity: 0; transform: translate3d(0, 5vh, 0); }

  .bekliyor.anima--sonuk:not(.bolum__sutun):not([class*="bolum__not"]),
  .bekliyor.anima--sonuk.bolum__sutun .bolum__sutun__ic,
  .bekliyor.anima--sonuk .bolum__not    { opacity: 0; }
}

/* B6 — sıralı kardeşler için hazır sınıf */
.sirali > *:nth-child(1)  { transition-delay: .08s; }
.sirali > *:nth-child(2)  { transition-delay: .16s; }
.sirali > *:nth-child(3)  { transition-delay: .24s; }
.sirali > *:nth-child(4)  { transition-delay: .32s; }
.sirali > *:nth-child(5)  { transition-delay: .40s; }
.sirali > *:nth-child(6)  { transition-delay: .48s; }
.sirali > *:nth-child(7)  { transition-delay: .56s; }
.sirali > *:nth-child(8)  { transition-delay: .64s; }
.sirali > *:nth-child(9)  { transition-delay: .72s; }
.sirali > *:nth-child(10) { transition-delay: .80s; }

/* H5 — süslü bölümün üstü ve altı ayrı ayrı açılıyor */
.bolum--susulu::before,
.bolum--susulu::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3em;
  background: var(--colVurguAcik);
  transform-origin: 50% 50%;
  transition: transform 1.2s var(--aniEgriUzun);
}
.bolum--susulu::before { top: 0; }
.bolum--susulu::after  { bottom: 0; }
.bekliyor-sus-ust::before   { transform: scaleY(0); transform-origin: 50% 0; }
.bekliyor-sus-alt::after    { transform: scaleY(0); transform-origin: 50% 100%; }

/* ---------- E1–E2  METİN BÖLME ---------- */
/* Başlık kelimelere bölünüyor; her kelime taşmayı kırpan bir kutunun
   içinde duruyor ve aşağıdan yukarı yükseliyor. */

.kelime-kap { display: inline-flex; overflow: hidden; padding: 0 0 .07em; vertical-align: bottom; }
.kelime     { display: inline-flex; line-height: 1.1; transform-origin: 0 100%; will-change: transform; }

/* Eski adlandırma karşılığı — referanstaki .t-s / .t-p */
.t-s { display: inline-flex; overflow: hidden; padding: 0 0 .07em; }
.t-p { display: inline-flex; line-height: 1.1; transform-origin: 0 100%; }

@media screen and (prefers-reduced-motion: reduce) {
  .kelime, .t-p { transform: none !important; opacity: 1 !important; }
}

/* Bölünmüş başlığın satır yüksekliği kutulardan geliyor */
.baslik--bolunmus { line-height: 1; }

/* ---------- E3  ANA BAŞLIK PERDESİ ---------- */
/* Aynı başlık iki kez basılıyor; biri aşağıdan açılırken öteki
   yukarıdan kapanıyor. Klonu JS üretiyor. */
.js-ana-baslik { position: relative; overflow: hidden; }
.js-ana-baslik .kopya { position: absolute; inset: 0; }
.js-ana-baslik .kap.baslik-sabit { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); }

/* ---------- E4  YATAY KAYAN BAŞLIK ---------- */
.js-kayan-baslik { overflow: hidden; }
.js-kayan-baslik .bolum__baslik1,
.js-kayan-baslik .bolum__baslik2 {
  position: relative; white-space: nowrap; min-width: 100%; font-weight: 500;
}
.js-kayan-baslik em, .js-kayan-baslik i, .js-kayan-baslik strong {
  display: inline-block; width: fit-content; font-style: inherit; font-weight: inherit;
}

/* ---------- E5  SONSUZ AKAN ŞERİT ---------- */
.js-serit { overflow: hidden; }
.js-serit__ray { display: flex; width: max-content; }
.js-serit__ray > * {
  flex: 0 0 auto;
  padding-right: .35em;
  font-family: var(--fontBaslik); font-variation-settings: 'wdth' 88;
  text-transform: uppercase;
  white-space: nowrap;
}
.js-serit.calisiyor .js-serit__ray > * { animation: serit-ak 10s linear infinite; }
@keyframes serit-ak {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* ---------- E8  SVG ÇİZGİ + DOLGU ---------- */
.js-cizim { position: relative; }
.js-cizim__kontur { fill: none; stroke: currentColor; stroke-width: 1; }
.js-cizim__dolgu  { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }

/* ---------- F1  GÖRSEL KAPLAMA SAHNESİ ----------
   REFERANSIN REÇETESİ (.js-image-cover):
     .strip__image  → height: 35em; max-height: 100vh   (akışta duran kutu)
     .strip__image picture → position: fixed; left/top 50%; width: 100vw;
                             height: max(100vh, 100%); translate(-50%,-50%)
   Yani fotoğraf EKRANA SABİT ve tam ekran; akıştaki kutu clip-path ile onu
   kırpıyor. Kaydırdıkça kırpma daralıyor, fotoğraf kendi kutusuna oturuyor.

   Bizde bu CSS hiç yazılmamıştı: kutu akışta duruyor ve JS onu iki katına
   büyütüyordu — fotoğraf bölümün dışına taşıyor, yarısı şeridin altında
   kalıyordu. Şimdi birebir referans. */
.js-gorsel-kapla { position: relative; transform: scaleZ(1); }
/* transform: scaleZ(1) — referansta da aynen bu. İçindeki
   position:fixed fotoğrafın kapsayan bloğu bu bölüm oluyor:
   ekrana değil bölüme göre konumlanıyor, bölümden çıkınca
   ekranda kalmıyor. */
.js-gorsel-kapla .bolum__gorsel { will-change: clip-path; }
.js-gorsel-kapla.js-sabit { position: fixed; left: 0; right: 0; top: 0; }

@media screen and (min-width: 60em) {
  .js-gorsel-kapla .bolum__gorsel {
    height: 35em;
    max-height: 100vh;
  }
  .js-gorsel-kapla .bolum__gorsel > .gorsel-kutu {
    position: fixed; z-index: 1;
    left: 50%; top: 50%;
    width: 100vw; height: max(100vh, 100%);
    aspect-ratio: auto;
    overflow: visible;
    transform: translate3d(-50%, -50%, 0);
  }
}

/* ---------- F4  YATAY SAHNE DİZİSİ ----------
   REFERANSIN REÇETESİ (.js-scroll-n-clip):
     kapsayıcı  → height: 100vh; overflow: hidden
     her sahne  → position: absolute; top/left 0; width 100%; height 100vh;
                  transform: translate(100vw, 0);  ilki: transform: none
     görsel     → img { height: 100vh; width: 100%; object-fit: cover }

   Bizde yazılmamıştı: sahneler normal akışta, her biri 2560 px yüksekliğinde
   duruyordu. Sabitleme 17.879 px sürüyor, ekran uzun süre bomboş kalıyor ve
   fotoğraflar ekrana sığmıyordu. */
@media screen and (min-width: 50em) {
  .js-sahne-dizisi { position: relative; height: 100vh; }

  .js-sahne-dizisi > .bolum {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100vh;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    transform: translate3d(100vw, 0, 0);
  }
  .js-sahne-dizisi > .bolum:first-child { transform: none; }

  .js-sahne-dizisi > .bolum > .kap { width: 100%; }
  .js-sahne-dizisi .bolum__gorsel { height: 100vh; }
  .js-sahne-dizisi .bolum__gorsel .gorsel-kutu {
    aspect-ratio: auto;
    height: 100%;
  }

  /* İlk sahne tam kaplama: görsel bütün genişliği alıyor, başlık üstünde.
     JS ilk görseli ekranın yarısına kırpıp sola kaydırıyor (F4), bu yüzden
     tam genişlik olmak zorunda. */
  .js-sahne-dizisi > .bolum--gorsel { grid-template-columns: 1fr; }
  .js-sahne-dizisi > .bolum--gorsel > .kap {
    position: absolute; left: 0; right: 0; bottom: var(--vpad); z-index: 2;
    color: var(--colBeyaz);
  }
  .js-sahne-dizisi > .bolum--gorsel::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(12, 12, 12, .5), rgba(12, 12, 12, 0) 55%);
    pointer-events: none;
  }
}

/* ---------- F2  GÖRSEL KAYDIRMA SAHNESİ ----------
   REFERANSIN REÇETESİ (.js-image-slide):
     .strip            → transform: scaleZ(1); overflow: hidden
     .strip__image picture → position: fixed; left/top 0; width/height 100%
     .strip__image img → height:100vh; width:100%; object-fit:cover;
                         transform: scale3d(1.2,1.2,1)
   JS fotoğrafı (sütun genişliği − ekran genişliği) kadar sola kaydırıyor.
   Bu sayı NEGATİF; fotoğraf ekran genişliğinde olduğu için sütun kadarı
   ekranda kalıyor. Bizde fotoğraf akışta ve sütun kadar dar olduğu için
   aynı kaydırma onu tamamen ekranın dışına atıyordu. */
.js-gorsel-kaydir { overflow: hidden; transform: scaleZ(1); }

@media screen and (min-width: 50em) {
  .js-gorsel-kaydir .bolum__gorsel > .gorsel-kutu {
    position: fixed; z-index: 1;
    left: 0; top: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
  }
  .js-gorsel-kaydir .bolum__gorsel > .gorsel-kutu img,
  .js-gorsel-kaydir .bolum__gorsel > .gorsel-kutu video {
    height: 100%; width: 100%; object-fit: cover;
    transform: scale3d(1.2, 1.2, 1);
  }
}

/* ---------- F3  KIRP VE KAYDIR ---------- */
.js-kirp-kaydir { overflow: hidden; }

/* ---------- F4  YATAY SAHNE DİZİSİ ---------- */
.js-sahne-dizisi { overflow: hidden; }
.js-sahne-dizisi .bolum { will-change: transform; }

/* ---------- F10  SAVRULMA ---------- */
.js-savrul { position: relative; }
.js-savrul__oge { will-change: transform, opacity; }

/* ---------- G7  EKRANDA KALAN SÜTUN ---------- */
.js-goz-onunde { will-change: transform; }

/* ---------- I4  AKORDEON ---------- */
[data-akordeon-govde] { display: none; }

/* ---------- B5  HAREKETİ AZALT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .bekliyor { opacity: 1 !important; transform: none !important; }
}