/* fx.css - hareket katmani. Sadece transform/opacity kullanir.
   prefers-reduced-motion altinda tum animasyonlar kapanir. */

/* Grain zaten style.css body::after ile var; burada eklenmez. */

section[id] { scroll-margin-top: 72px; }
section[tabindex="-1"]:focus { outline: none; }

/* Hero basligi: harfler tek tek yumusak gelir */
.fx-ch {
  display: inline-block;
  animation: fx-letter .9s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--fx-d, 0) * 42ms + 140ms);
}

@keyframes fx-letter {
  from { opacity: 0; transform: translateY(.22em); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Hero alt metinleri kademeli gelir (hero .reveal ile acilir) */
.reveal.is-in .hero__stamps { animation: fx-rise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.reveal.is-in .hero__sub    { animation: fx-rise .7s .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.reveal.is-in .hero__meta   { animation: fx-rise .7s .6s cubic-bezier(.2, .7, .2, 1) backwards; }

/* Bolum basliklari kademeli gelir */
.reveal.is-in > .section__head > * {
  animation: fx-rise .6s cubic-bezier(.2, .7, .2, 1) backwards;
}
.reveal.is-in > .section__head > :nth-child(2) { animation-delay: 70ms; }
.reveal.is-in > .section__head > :nth-child(3) { animation-delay: 140ms; }

/* Kart kapsayicilari: kartlar app.js'teki --i ile zaten kademeli; burada
   sadece grid ici yardimci ogeler icin ek bir kademe */
.fx-stagger > * { animation: fx-rise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.fx-stagger > :nth-child(2) { animation-delay: 50ms; }
.fx-stagger > :nth-child(3) { animation-delay: 100ms; }
.fx-stagger > :nth-child(4) { animation-delay: 150ms; }

@keyframes fx-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Bolum numarasi sayaci titresiz dursun */
.section__num { font-variant-numeric: tabular-nums; }

/* Ucak: ucus yayi uzerinde ilerler */
.hero__stamps { position: relative; }

.fx-plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  color: var(--talha);
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

.fx-plane svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Ust menu: aktif bolum */
.topbar__nav a.is-current {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--talha);
}

@media (prefers-reduced-motion: reduce) {
  .fx-ch,
  .reveal.is-in .hero__stamps,
  .reveal.is-in .hero__sub,
  .reveal.is-in .hero__meta,
  .reveal.is-in > .section__head > *,
  .fx-stagger > * {
    animation: none !important;
  }
  .fx-plane { display: none; }
}