/* =========================================================================
   BrainFit — Hareket
   =========================================================================
   Şablon 85 KB'lık iki animasyon dosyası (animate.min.css + animate.css) ve
   wow.js yüklüyordu. wow.js tüm `.wow` öğelerini önce GİZLİYOR, sonra scroll
   ile açıyordu; script gecikir veya hata verirse içerik kalıcı görünmez
   kalıyordu (canlıda 135 öğe bu risk altındaydı).

   Yeni yaklaşım — JavaScript yok:
     * `.wow` öğeleri VARSAYILAN OLARAK GÖRÜNÜR. İçerik hiçbir koşulda kaybolmaz.
     * Tarayıcı destekliyorsa (animation-timeline: view()) öğeler görüş alanına
       girerken yumuşakça belirir. Desteklemiyorsa sadece görünür kalır.
     * prefers-reduced-motion altında hiç hareket olmaz.
   ========================================================================= */

/* Şablonun sınıfları korunuyor (135 yerde kullanılıyor) ama artık
   görünürlüğü etkilemiyorlar. */
.wow,
.animated {
    visibility: visible;
    opacity: 1;
}

@keyframes bf-reveal-up {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
}

/* Yatay kaydırma bilinçli olarak KULLANILMIYOR.
   Önceki sürüm fadeInLeft/Right için ±20px yatay öteleme yapıyordu. Sağa
   ötelenen öğeler kabın sağ kenarına dayalı olduğunda belgeyi taşırıyordu:
   ana sayfadaki .section-process içindeki .process-item'lar scrollWidth'i
   1280'den 1305'e çıkarıyordu. Yön hissi görsel olarak neredeyse hiç
   fark ettirmediği için her iki varyant da dikey yükselişe alındı; böylece
   bu taşma sınıfı kökten ortadan kalkıyor. */
@keyframes bf-reveal-left {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes bf-reveal-right {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes bf-reveal-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bf-reveal-zoom {
    from { opacity: 0; transform: scale3d(0.97, 0.97, 0.97); }
    to { opacity: 1; transform: none; }
}

/* Scroll ile belirme — yalnızca destekleyen tarayıcılarda devreye girer.
   Desteklemeyen tarayıcı öğeyi olduğu gibi görünür bırakır. */
@supports (animation-timeline: view()) {
    .wow.fadeInUp,
    .wow.fadeInDown,
    .wow.fadeInLeft,
    .wow.fadeInRight,
    .wow.fadeIn,
    .wow.zoomIn {
        animation: bf-reveal-up 0.7s var(--bf-ease-out, ease) both;
        animation-timeline: view();
        animation-range: entry 0% cover 24%;
    }

    .wow.fadeInLeft { animation-name: bf-reveal-left; }
    .wow.fadeInRight { animation-name: bf-reveal-right; }
    .wow.fadeIn { animation-name: bf-reveal-in; }
    .wow.zoomIn { animation-name: bf-reveal-zoom; }

    /* Görünüm alanının üstünde kalan (ilk ekran) öğeler anında görünür.
       DİKKAT: burada önce `animation-timeline: auto` denendi ve çalışmadı.
       Görünüm zaman çizelgesiyle oluşturulmuş bir animasyonun çizelgesi
       sonradan `auto`ya çevrildiğinde Chrome ilerlemeyi başlatmıyor:
       playState "running" kalıyor ama currentTime 0'da donuyor. Sonuç,
       /biz-kimiz hero'sunda iki öğenin opacity:0 ile tamamen görünmez
       kalmasıydı. İlk ekranda beliren bir şey olmadığı için doğru çözüm
       animasyonu hiç kurmamak. */
    /* Hem bölümün İÇİNDEKİ öğeler hem de bölümün KENDİSİ kapsanır:
       /hakkimizda, /sss ve /programlarimiz'da hero <section>'ın kendisi
       `wow fadeInUp` taşıyor. Yalnızca alt öğe seçicisi kullanılsa bu
       bölümler kapsam dışında kalırdı. */
    .page-title-homepage-3 .wow, .page-title-homepage-3.wow,
    .section-hero .wow,      .section-hero.wow,
    .bf-about-hero .wow,     .bf-about-hero.wow,
    .bf-how-hero .wow,       .bf-how-hero.wow,
    .bf-science-hero .wow,   .bf-science-hero.wow,
    .bf-listing-hero .wow,   .bf-listing-hero.wow,
    .bf-article-hero .wow,   .bf-article-hero.wow {
        animation: none;
        opacity: 1;
        transform: none;
        visibility: visible;
    }
}

/* Sınıf adları geriye dönük uyumluluk için tanımlı kalır */
.fadeInUp,
.fadeInDown,
.fadeInLeft,
.fadeInRight,
.fadeIn,
.zoomIn {
    animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
    .wow,
    .animated,
    .fadeInUp,
    .fadeInDown,
    .fadeInLeft,
    .fadeInRight,
    .fadeIn,
    .zoomIn {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}