/*  SAYFA GEÇİŞİ + KAYDIRMAYA BAĞLI BELİRİŞ
    ═══════════════════════════════════════════════════════════════════════
    İki iş yapar:

    1 · SAYFA GEÇİŞİ. Sayfa açılırken `main` çok hafif yükselerek beliriyor;
        aynı sitede bir bağlantıya basıldığında da gitmeden önce kısa bir
        sönümleme oluyor. Amaç fark edilmemek: 10 px ve ~400 ms.

    2 · BELİRİŞ. Bölümler ve içlerindeki kart/satır grupları görünür alana
        girerken kayan sıralamayla (stagger) beliriyor. Tarayıcı destekliyorsa
        bu KAYDIRMAYA BAĞLI (scrub): ilerleme kaydırma konumundan geliyor,
        zamanlayıcıdan değil. Desteklemiyorsa tek seferlik bir geçişe
        düşüyor (aşağıdaki `@supports` bloğu).

    HİÇBİRİ ZORUNLU DEĞİL: işaretleri betik ekliyor. Betik çalışmazsa ya da
    kullanıcı hareketi kapattıysa her şey olduğu yerde ve görünür kalır.   */

/* ── 1 · Sayfa geçişi ─────────────────────────────────────────────────── */
/*  GSAP varsa giriş/çıkış `hareket.js` içinde kuruluyor; buradakiler yalnız
    CSS yolunda çalışıyor.                                                 */
:root[data-motor="css"][data-gecis] main {
  animation: ktb-sayfa-gir 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ktb-sayfa-gir {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
/*  Çıkışta: bağlantıya basıldı, gitmeden önce kısa sönümleme. */
:root[data-motor="css"][data-gecis="cikiyor"] main {
  animation: none;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

/*  ÇIKIŞ ÇİZGİSİ — GSAP yolunda sayfadan ayrılırken üstte soldan sağa
    süpüren saç teli. Perde/renk basmıyoruz: sayfalar arasında renk
    sıçraması olmuyor, yalnız bir yön duygusu kalıyor.                     */
.ktb-gecis-cizgi {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 90;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-bordo-600) 55%, transparent),
    var(--color-bordo-600));
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
}

/*  BÖLÜNMÜŞ BAŞLIK — her satır kendi maskesinden yukarı giriyor. Maske
    olmadan `yPercent` kayması bir üstteki satırın üstüne taşıyor.
    `padding-bottom` alt uzantılı harflerin (g, y, ş) kırpılmasını önlüyor;
    aynı ölçüde negatif kenar boşluğu satır aralığını olduğu gibi bırakıyor. */
.ktb-satir-maske {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.ktb-satir { display: block; will-change: transform; }

/* ── 2 · Kaydırmaya bağlı beliriş ─────────────────────────────────────── */
@keyframes ktb-belir {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  :root[data-motor="css"] [data-belir],
  :root:not([data-motor]) [data-belir] {
    animation: ktb-belir linear both;
    animation-timeline: view();
    /*  Öge görünür alana girerken ilerliyor; %38'de tamamlanıyor ki
        okunurken hâlâ yarı saydam kalmasın.                              */
    animation-range: entry 4% cover 38%;
  }
  /*  STAGGER: aynı kabın ardışık çocukları biraz daha geç tamamlanıyor.
      Kaydırmaya bağlı olduğu için bu gecikme de kaydırmayla ölçülüyor.   */
  [data-belir-grup] > [data-belir]:nth-child(2)  { animation-range: entry 4% cover 44%; }
  [data-belir-grup] > [data-belir]:nth-child(3)  { animation-range: entry 4% cover 50%; }
  [data-belir-grup] > [data-belir]:nth-child(4)  { animation-range: entry 4% cover 56%; }
  [data-belir-grup] > [data-belir]:nth-child(5)  { animation-range: entry 4% cover 62%; }
  [data-belir-grup] > [data-belir]:nth-child(n+6) { animation-range: entry 4% cover 68%; }
}

/*  Yedek: `animation-timeline` yoksa gözlemci `data-goruldu` ekliyor. */
@supports not (animation-timeline: view()) {
  :root[data-motor="css"] [data-belir] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-belir][data-goruldu] { opacity: 1; transform: none; }
  [data-belir-grup] > [data-belir]:nth-child(2)  { transition-delay: 70ms; }
  [data-belir-grup] > [data-belir]:nth-child(3)  { transition-delay: 140ms; }
  [data-belir-grup] > [data-belir]:nth-child(4)  { transition-delay: 210ms; }
  [data-belir-grup] > [data-belir]:nth-child(5)  { transition-delay: 280ms; }
  [data-belir-grup] > [data-belir]:nth-child(n+6) { transition-delay: 350ms; }
}

/* ── Hareket tercihi ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root[data-gecis] main,
  :root[data-gecis="cikiyor"] main,
  [data-belir],
  .ktb-satir {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ktb-gecis-cizgi { display: none !important; }
}
:root[data-hareket="kapali"] :is(main, [data-belir], .ktb-satir) {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
:root[data-hareket="kapali"] .ktb-gecis-cizgi { display: none !important; }