/* ==========================================================================
   08 · MOTION — hareket katmani
   ==========================================================================
   ILKE: Her hareketin bir isi var. Dekoratif dongu yok.

   | Hareket              | Ne ise yariyor                                |
   |----------------------|----------------------------------------------|
   | Maske ile baslik     | Hiyerarsi: goz once basliga gidiyor          |
   | Kademeli belirme     | Anlati: icerik okunma sirasiyla giriyor      |
   | Buton parlamasi      | Geri bildirim: birincil eylem isaretleniyor  |
   | Manyetik CTA         | Geri bildirim: imlec eylemi cekiyor          |
   | Kart yukselmesi      | Geri bildirim: tiklanabilir oldugu belli     |
   | Gorsel yakinlasmasi  | Geri bildirim: kart hover'da canlaniyor      |
   | Hero derinligi       | Anlati: on plan/arka plan ayrimi             |

   prefers-reduced-motion acikken HEPSI kapanir; icerik daima gorunur.
   ========================================================================== */

/* -------------------------------------------------- Maske ile baslik acilisi
   Baslik asagidan yukari, bir perde arkasindan cikar gibi belirir.
   [data-reveal="mask"] olan ogelerde calisir.                            */

/* DIKKAT: kirpma, gozlemlenen ogenin KENDISINE uygulanmaz.
   clip-path ile sifir yukseklige inen bir oge IntersectionObserver
   tarafindan hic "gorunur" sayilmaz ve animasyon asla tetiklenmez.
   Bu yuzden gozlemlenen sarmalayici normal kalir, kirpma icindeki
   basliga uygulanir. */
[data-reveal="mask"] { opacity: 1; transform: none; }

[data-reveal="mask"] :is(h1, h2, h3) {
  clip-path: inset(0 0 105% 0);
  transition: clip-path 900ms var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="mask"].is-visible :is(h1, h2, h3) { clip-path: inset(0 0 -25% 0); }

/* Basligin ustundeki mono etiket de birlikte gelir */
[data-reveal="mask"] > .eyebrow {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--e-out), transform 600ms var(--e-out);
}
[data-reveal="mask"].is-visible > .eyebrow { opacity: 1; transform: none; }

.no-js [data-reveal="mask"] :is(h1, h2, h3) { clip-path: none; }
.no-js [data-reveal="mask"] > .eyebrow { opacity: 1; transform: none; }

/* ------------------------------------------------------- Buton parlamasi
   Birincil eylem butonlarinda imlec uzerine gelince soldan saga gecen
   ince bir isik. Sadece kor ve orman butonlarinda; her butonda degil.  */

.btn--ember,
.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--ember::after,
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, #fff 34%, transparent) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform 750ms var(--e-out);
}
.btn--ember:hover::after,
.btn--primary:hover::after { transform: translateX(120%); }

/* --------------------------------------------------------- Manyetik CTA
   Imlec butona yaklasinca buton hafifce imlece dogru kayar. Yalnizca
   isaretleme cihazi hassassa (fare) ve hareket azaltma kapaliysa.
   Konum degeri JS tarafindan --mx / --my olarak yazilir.               */

@media (hover: hover) and (pointer: fine) {
  [data-magnetic] {
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition: transform 420ms var(--e-out);
  }
  [data-magnetic]:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(0.98); }
}

/* ------------------------------------------------------ Gorsel canlanmasi
   Kart ustune gelindiginde fotograf cok hafif yakinlasir. Yer tutucu
   deseninde de calisir; asiri degil, 1.05 sinirinda.                   */

.card:hover .card__media img,
.news-lead:hover .news-lead__media img,
.gallery-item:hover .media img { transform: scale(1.05); }

/* ------------------------------------------------------- Hero derinligi
   Sayfa acilisinda arka plan cok yavas geriye cekilir: on plandaki
   metnin oncelikli oldugu hissini verir. Tek seferlik, dongusuz.      */

.hero__backdrop {
  animation: hero-settle 2600ms var(--e-out) forwards;
  transform-origin: 50% 55%;
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ------------------------------------------- Bolum basligi alt cizgisi
   Baslik gorunur olunca altindaki ince cizgi soldan saga cizilir.     */

.section-head__title { position: relative; }
.section-head__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -10px;
  height: 1px;
  width: clamp(48px, 8vw, 96px);
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--e-out) 200ms;
}
[data-reveal].is-visible .section-head__title::after,
.no-js .section-head__title::after { transform: scaleX(1); }

/* ------------------------------------------------------ Yumusak yuzeyler
   Katmanli golge: tek sert golge yerine iki yumusak katman. Zemin
   tonuna boyanir, saf siyah golge kullanilmaz.                         */

.card:hover,
.news-lead:hover,
.feature-tile:hover,
.org-tile:hover,
.event-card:hover {
  box-shadow:
    0 2px 6px -2px color-mix(in srgb, var(--c-ink) 10%, transparent),
    0 18px 40px -18px color-mix(in srgb, var(--c-ink) 30%, transparent);
}

/* ---------------------------------------------------------------- Grain
   Cok hafif doku. SABIT ve pointer-events:none bir katmanda durur;
   kaydirma sirasinda yeniden boyanmadigi icin performansa dokunmaz.   */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- Odak halkasi
   Klavye odagi yumusakca buyur; gorunurlugu artirir.                   */

:focus-visible { transition: outline-offset 140ms var(--e-out); }

/* =========================================================================
   HAREKET AZALTMA
   Kullanici hareket azaltmayi tercih ettiyse HEPSI kapanir. Icerik her
   durumda tam gorunur kalir.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  [data-reveal="mask"] :is(h1, h2, h3) {
    clip-path: none !important;
    transition: none !important;
  }
  [data-reveal="mask"] > .eyebrow {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn--ember::after,
  .btn--primary::after { display: none; }

  [data-magnetic] { transform: none !important; }

  .hero__backdrop { animation: none; transform: none; }

  .section-head__title::after { transform: scaleX(1); transition: none; }

  .card:hover .card__media img,
  .news-lead:hover .news-lead__media img,
  .gallery-item:hover .media img { transform: none; }

  body::after { display: none; }
}