/* ==========================================================================
   Synaptix AI — Motion Layer (`fx-` öneki)
   --------------------------------------------------------------------------
   Bağımlılık: design-system.css (token'lar) + ds-motion-fx.js (davranış).
   components.css bu dosyayı @import eder → AYRICA <link> EKLEMEYİN.

   TEMEL SÖZLEŞME (dört ilke, hiçbiri pazarlığa açık değil)
   ------------------------------------------------------------------------
   1) JS KAPALIYKEN İÇERİK GÖRÜNÜR.
      Hiçbir `fx-` sınıfı tek başına içeriği gizlemez. Gizleme yalnızca
      ds-motion-fx.js'in eklediği `.fx-armed` / `.fx-ready` sınıflarıyla
      devreye girer. Betik yüklenmezse sayfa statik ama eksiksiz görünür.

   2) CLS = 0.
      Yalnızca `transform` ve `opacity` anime edilir. Boyut değiştiren tek
      istisna `.fx-accordion` (kullanıcı tetikler → CLS'e sayılmaz) ve
      `grid-template-rows`'tur. `.fx-count` / `.fx-typing` genişliklerini JS
      ölçüp kilitler.

   3) prefers-reduced-motion: reduce → TÜM hareket kapanır, içerik SON
      hâlinde görünür kalır (bkz. dosya sonu). Kullanıcı tetiklemeli durum
      değişimleri (akordeon açılışı, karusel sekmesi) çalışmaya devam eder,
      yalnızca geçiş süresi sıfırlanır.

   4) Görünmeyen çalışmaz.
      IntersectionObserver + `document.hidden` ile ekran dışındaki ve arka
      plan sekmesindeki hiçbir döngü karesi hesaplanmaz.

   SINIF LİSTESİ
     .fx-reveal            görünüme girince aşağıdan yukarı fade-up
     .fx-reveal-stagger    çocukları 60ms gecikmeli sırayla
     .fx-parallax-slow     scroll ile hafif ötelenme (transform only)
     .fx-count             sayı sayma (genişlik kilitli)
     .fx-marquee           sonsuz yatay şerit, hover/odakta durur
     .fx-tilt              mouse ile 3B eğilme (maks 6deg), dokunmatikte kapalı
     .fx-typing            harf harf yazma
     .fx-carousel          otomatik geçişli sekmeli görsel
     .fx-accordion         0fr→1fr yumuşak açılma
   ========================================================================== */

:root {
    --fx-dur:          520ms;   /* giriş animasyonu */
    --fx-dur-fast:     280ms;   /* hover / tilt geri dönüşü */
    --fx-dur-slide:    420ms;   /* karusel kaydırma */
    --fx-dur-panel:    300ms;   /* akordeon açılışı */
    --fx-distance:     18px;    /* fade-up mesafesi */
    --fx-stagger-step: 60ms;    /* stagger adımı */
    --fx-ease:         var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    --fx-tilt-max:     6deg;    /* JS bunu okur, üstünü ASLA aşmaz */
}

/* ==========================================================================
   1. REVEAL — görünüme girince fade-up
   --------------------------------------------------------------------------
   <div class="fx-reveal">…</div>
   <div class="fx-reveal" data-fx-from="left">…</div>   (up | left | right | scale)

   `.fx-armed` yalnızca JS tarafından ve YALNIZCA öğe henüz ekranda değilken
   eklenir (ya da betik ilk boyamadan önce çalıştıysa hepsine). Bu yüzden
   "görünür içerik bir kare için kayboluyor" titremesi oluşmaz.
   ========================================================================== */

.fx-reveal {
    transition:
        opacity   var(--fx-dur) var(--fx-ease),
        transform var(--fx-dur) var(--fx-ease);
    transition-delay: var(--fx-delay, 0ms);
}

.fx-reveal.fx-armed {
    opacity: 0;
    transform: translate3d(0, var(--fx-distance), 0);
    will-change: opacity, transform;
}

.fx-reveal.fx-armed[data-fx-from="left"]  { transform: translate3d(calc(var(--fx-distance) * -1.6), 0, 0); }
.fx-reveal.fx-armed[data-fx-from="right"] { transform: translate3d(calc(var(--fx-distance) *  1.6), 0, 0); }
.fx-reveal.fx-armed[data-fx-from="scale"] { transform: scale(0.96); }

.fx-reveal.fx-armed.fx-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ==========================================================================
   2. STAGGER — çocuklar sırayla
   --------------------------------------------------------------------------
   <ul class="fx-reveal-stagger">
     <li>…</li><li>…</li><li>…</li>
   </ul>

   Gecikme CSS'te nth-child ile verilir; JS yalnızca `.fx-armed` ekler.
   12'den sonrası sabitlenir — 13. karta 780ms beklemek "yavaş sayfa" hissi
   verir, sıradanlık kazandırmaz.
   ========================================================================== */

.fx-reveal-stagger > * {
    transition:
        opacity   var(--fx-dur) var(--fx-ease),
        transform var(--fx-dur) var(--fx-ease);
    transition-delay: var(--fx-delay, 0ms);
}

.fx-reveal-stagger > .fx-armed {
    opacity: 0;
    transform: translate3d(0, var(--fx-distance), 0);
    will-change: opacity, transform;
}

.fx-reveal-stagger > .fx-armed.fx-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.fx-reveal-stagger > :nth-child(1)  { --fx-delay: 0ms; }
.fx-reveal-stagger > :nth-child(2)  { --fx-delay: calc(var(--fx-stagger-step) * 1); }
.fx-reveal-stagger > :nth-child(3)  { --fx-delay: calc(var(--fx-stagger-step) * 2); }
.fx-reveal-stagger > :nth-child(4)  { --fx-delay: calc(var(--fx-stagger-step) * 3); }
.fx-reveal-stagger > :nth-child(5)  { --fx-delay: calc(var(--fx-stagger-step) * 4); }
.fx-reveal-stagger > :nth-child(6)  { --fx-delay: calc(var(--fx-stagger-step) * 5); }
.fx-reveal-stagger > :nth-child(7)  { --fx-delay: calc(var(--fx-stagger-step) * 6); }
.fx-reveal-stagger > :nth-child(8)  { --fx-delay: calc(var(--fx-stagger-step) * 7); }
.fx-reveal-stagger > :nth-child(9)  { --fx-delay: calc(var(--fx-stagger-step) * 8); }
.fx-reveal-stagger > :nth-child(10) { --fx-delay: calc(var(--fx-stagger-step) * 9); }
.fx-reveal-stagger > :nth-child(11) { --fx-delay: calc(var(--fx-stagger-step) * 10); }
.fx-reveal-stagger > :nth-child(n + 12) { --fx-delay: calc(var(--fx-stagger-step) * 11); }

/* ==========================================================================
   3. PARALLAX — scroll ile hafif ötelenme
   --------------------------------------------------------------------------
   <img class="fx-parallax-slow" data-parallax-strength="0.12" …>

   JS yalnızca `--fx-parallax-y` custom property'sini günceller; kural sabit
   kalır, bu yüzden style yeniden hesaplaması compositor'de kalır.
   `data-parallax-strength` 0–0.3 arası kırpılır; 0.12 varsayılan ~±36px verir.
   Sadece (min-width: 768px) ve pointer:fine olmayan cihazlarda da güvenli —
   ancak mobilde scroll performansı için JS devreyi kapatır.
   ========================================================================== */

.fx-parallax-slow {
    transform: translate3d(0, var(--fx-parallax-y, 0px), 0);
    will-change: transform;
}

/* ==========================================================================
   4. COUNT — sayı sayma
   --------------------------------------------------------------------------
   <span class="fx-count" data-count-to="1240" data-count-suffix="+">1.240+</span>

   HTML'de SON DEĞER yazılıdır: JS kapalıysa doğru sayı görünür, JS açıkken
   de genişlik bu son değerden ölçülüp kilitlenir → sayarken kutu zıplamaz
   (CLS 0). Tabular figürler rakam genişliğini de eşitler.

   Ek nitelikler: data-count-prefix, data-count-decimals, data-count-duration
   ========================================================================== */

.fx-count {
    display: inline-block;          /* min-width uygulanabilsin */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: var(--tracking-tight, -0.02em);
}

/* ==========================================================================
   5. MARQUEE — sonsuz yatay şerit (logo / rozet)
   --------------------------------------------------------------------------
   <div class="fx-marquee" data-fx-marquee aria-label="Bize güvenen markalar">
     <div class="fx-marquee-track">
       <img …><img …><img …>
     </div>
   </div>

   JS parça setini bir kez klonlar (klon aria-hidden="true") ve `.fx-ready`
   ekler; animasyon -50% ilerlediğinde başa döner, dikiş görünmez.
   JS kapalıyken: `.fx-ready` yok → animasyon yok, kap yatay KAYDIRILABİLİR
   kalır, tüm logolar erişilebilir.
   ========================================================================== */

.fx-marquee {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.fx-marquee-track {
    display: flex;
    align-items: center;
    gap: var(--space-10, 2.5rem);
    width: max-content;
    padding-block: var(--space-2, 0.5rem);
}

.fx-marquee.fx-ready {
    overflow: hidden;
}

.fx-marquee.fx-ready .fx-marquee-track {
    animation: fx-marquee-scroll var(--fx-marquee-dur, 34s) linear infinite;
    will-change: transform;
}

/* Duraklatma: hover, klavye odağı ve ekran dışı (JS `.fx-paused` ekler).
   WCAG 2.2.2 — 5 saniyeden uzun süren hareket için duraklatma yolu şart. */
.fx-marquee.fx-ready:hover .fx-marquee-track,
.fx-marquee.fx-ready:focus-within .fx-marquee-track,
.fx-marquee.fx-ready.fx-paused .fx-marquee-track {
    animation-play-state: paused;
}

@keyframes fx-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Kenar yumuşatma — şerit kesilmiş gibi değil, sönerek bitsin. */
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
    .fx-marquee.fx-ready {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
}

/* ==========================================================================
   6. TILT — mouse ile hafif 3B eğilme
   --------------------------------------------------------------------------
   <div class="fx-tilt">…</div>

   JS yalnızca (hover: hover) and (pointer: fine) ortamlarda bağlanır →
   dokunmatikte hiçbir dinleyici kurulmaz. Açı `--fx-tilt-max` (6deg) ile
   sınırlıdır. `.fx-reveal` ile AYNI öğede kullanmayın (ikisi de transform
   yazar); dış kapsayıcıya reveal, iç öğeye tilt verin.
   ========================================================================== */

.fx-tilt {
    transform:
        perspective(900px)
        rotateX(var(--fx-tilt-x, 0deg))
        rotateY(var(--fx-tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform var(--fx-dur-fast) var(--fx-ease);
}

.fx-tilt.fx-tilting {
    transition: transform 90ms linear;   /* takip ederken gecikme istemeyiz */
    will-change: transform;
}

/* ==========================================================================
   7. TYPING — harf harf yazma
   --------------------------------------------------------------------------
   <span class="fx-typing"
         data-typing-text="pazarlama|satış|destek">pazarlama</span>

   HTML'deki metin ilk (ve JS kapalıyken tek) değerdir. JS en uzun seçeneği
   ölçüp min-width kilitler → satırın kalanı kaymaz.

   ZORUNLU: statik metin olarak EN UZUN seçeneği yazın (yukarıdaki örnekte
   "pazarlama"). Aksi halde JS ölçtüğü genişliği uygularken kutu bir kez
   büyür ve bu TEK kayma CLS'e yazılır. En uzun metin zaten yazılıysa
   ölçülen genişlik mevcut genişliğe eşittir → kayma sıfırdır.
   ========================================================================== */

.fx-typing {
    display: inline-block;
    white-space: pre;
    text-align: start;
}

.fx-typing.fx-ready::after {
    content: "";
    display: inline-block;
    width: 0.08em;
    height: 1em;
    margin-inline-start: 0.06em;
    vertical-align: -0.12em;
    background: currentColor;
    animation: fx-caret 1.05s steps(1, end) infinite;
}

@keyframes fx-caret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ==========================================================================
   8. CAROUSEL — otomatik geçişli sekmeli görsel
   --------------------------------------------------------------------------
   <div class="fx-carousel" data-fx-carousel data-fx-interval="5200">
     <div class="fx-carousel-viewport">
       <div class="fx-carousel-track">
         <div class="fx-carousel-slide">…1…</div>
         <div class="fx-carousel-slide">…2…</div>
       </div>
     </div>
     <div class="fx-carousel-controls">
       <button type="button" class="fx-carousel-prev" aria-label="Önceki">‹</button>
       <div class="fx-carousel-dots"></div>            <!-- JS doldurur -->
       <button type="button" class="fx-carousel-next" aria-label="Sonraki">›</button>
     </div>
   </div>

   JS kapalıyken: viewport yatay kaydırılabilir + scroll-snap → beş adımın
   hepsi parmakla/scrollbar ile gezilebilir, kontroller gizli kalır.
   ========================================================================== */

.fx-carousel {
    position: relative;
}

.fx-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg, 12px);
}

.fx-carousel-track {
    display: flex;
    align-items: stretch;
}

.fx-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.fx-carousel-controls { display: none; }

.fx-carousel.fx-ready .fx-carousel-viewport {
    overflow: hidden;
    scroll-snap-type: none;
}

.fx-carousel.fx-ready .fx-carousel-track {
    transform: translate3d(calc(var(--fx-index, 0) * -100%), 0, 0);
    transition: transform var(--fx-dur-slide) var(--fx-ease);
    will-change: transform;
}

.fx-carousel.fx-ready .fx-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-5, 1.25rem);
}

.fx-carousel-prev,
.fx-carousel-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-target, 44px);
    min-height: var(--tap-target, 44px);
    padding: 0;
    border: 1px solid var(--border, #e2e4ee);
    border-radius: var(--radius-full, 9999px);
    background: var(--surface, #fff);
    color: var(--text, #101323);
    font-size: var(--text-lg, 1.25rem);
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--fx-dur-fast) var(--fx-ease),
        border-color var(--fx-dur-fast) var(--fx-ease);
}

.fx-carousel-prev:hover,
.fx-carousel-next:hover { background: var(--surface-hover, #f8f9fc); border-color: var(--border-strong, #878da8); }

.fx-carousel-prev:focus-visible,
.fx-carousel-next:focus-visible,
.fx-carousel-dot:focus-visible {
    outline: var(--focus-ring-width, 3px) solid var(--focus-ring, #2c4ced);
    outline-offset: 2px;
}

.fx-carousel-dots {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

/* Görsel nokta küçük, dokunma hedefi 44px: kutuyu şeffaf dolgu büyütür. */
.fx-carousel-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target, 44px);
    height: var(--tap-target, 44px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.fx-carousel-dot::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full, 9999px);
    background: var(--border-strong, #878da8);
    transition:
        background-color var(--fx-dur-fast) var(--fx-ease),
        transform var(--fx-dur-fast) var(--fx-ease);
}

.fx-carousel-dot[aria-selected="true"]::before {
    background: var(--accent, #2c4ced);
    transform: scale(1.35);
}

/* ==========================================================================
   9. ACCORDION — 0fr → 1fr yumuşak açılma
   --------------------------------------------------------------------------
   <div class="fx-accordion" data-fx-accordion>
     <div class="fx-accordion-item">
       <h3 class="fx-accordion-heading">
         <button type="button" class="fx-accordion-trigger">Soru?</button>
       </h3>
       <div class="fx-accordion-panel">
         <div class="fx-accordion-content">Cevap…</div>
       </div>
     </div>
   </div>

   JS kapalıyken TÜM paneller açıktır (grid-template-rows varsayılanı 1fr) →
   SSS içeriği tarayıcıya ve arama motoruna eksiksiz görünür. Kapalı
   varsayılana yalnızca `.fx-ready` eklendikten sonra geçilir.
   ========================================================================== */

.fx-accordion-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--fx-dur-panel) var(--fx-ease);
}

.fx-accordion-panel > * {
    min-height: 0;
    overflow: hidden;
}

.fx-accordion.fx-ready .fx-accordion-item:not(.fx-open) > .fx-accordion-panel {
    grid-template-rows: 0fr;
}

/* CLS 0 için: JS'in "hepsi açık -> birini bırak" geçişi bir düzen kaymasıdır.
   `scripting: enabled` destekleyen tarayıcıda kapanmayı CSS ÜSTLENİR; ilk
   stil hesabında olur, kayma ölçülmez. Destek yoksa kural düşer ve yukarıdaki
   `.fx-ready` yolu devreye girer (küçük bir kayma pahasına, ama içerik yine
   doğru). `:has()` de aynı tarayıcı kuşağında olduğu için ikisi tek blokta.

   Yazar HANGİ maddenin açık başlayacağını `class="… fx-open"` ile işaretlerse
   o madde açık kalır; işaretlemezse ilk madde açık başlar — ds-motion-fx.js
   tam olarak aynı kuralı uygular, yani JS ile CSS aynı sonucu verir.

   BİLİNEN RİSK: `scripting: enabled` "betik çalışabilir" der, "ds-motion-fx.js
   yüklendi" demez. Betik 404 verirse ilk madde dışındaki cevaplar kapalı ve
   açılamaz kalır. Bu yüzden fx- bileşeni kullanan her sayfa dosyayı doğrudan
   <script src="ds-motion-fx.js" defer> ile bağlar; aynı origin'den gelir
   (CSP: script-src 'self'). Eskiden ds-motion.js içinde ikinci bir yedek
   yükleyici vardı, ancak o dosyayı hiçbir sayfa yüklemediği için yol ölüydü;
   ds-motion.js kaldırıldı, tek bağlanma yolu yukarıdaki <script> etiketidir. */
@media (scripting: enabled) {
    .fx-accordion:has(> .fx-accordion-item.fx-open) .fx-accordion-item:not(.fx-open) > .fx-accordion-panel {
        grid-template-rows: 0fr;
    }

    .fx-accordion:not(:has(> .fx-accordion-item.fx-open)) .fx-accordion-item:not(:first-child) > .fx-accordion-panel {
        grid-template-rows: 0fr;
    }
}

.fx-accordion-heading { margin: 0; }

.fx-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    width: 100%;
    min-height: var(--tap-target, 44px);
    padding: var(--space-4, 1rem) 0;
    border: 0;
    background: none;
    color: var(--text, #101323);
    font: inherit;
    font-weight: var(--weight-semibold, 600);
    text-align: start;
    cursor: pointer;
}

.fx-accordion-trigger:focus-visible {
    outline: var(--focus-ring-width, 3px) solid var(--focus-ring, #2c4ced);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 6px);
}

/* Ok işareti — CSS ile, ek varlık yok. */
.fx-accordion-trigger::after {
    content: "";
    flex: 0 0 auto;
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.1em, -0.1em);
    transition: transform var(--fx-dur-panel) var(--fx-ease);
}

.fx-accordion-item.fx-open > .fx-accordion-heading .fx-accordion-trigger::after {
    transform: rotate(225deg) translate(-0.1em, -0.1em);
}

/* grid-template-rows animasyonu desteklenmiyorsa (çok eski tarayıcı):
   geçişsiz aç/kapa. İçerik yine erişilebilir, yalnızca yumuşaklık kaybolur. */
@supports not (grid-template-rows: 0fr) {
    .fx-accordion.fx-ready .fx-accordion-item:not(.fx-open) > .fx-accordion-panel {
        display: none;
    }
}

/* ==========================================================================
   10. prefers-reduced-motion — HEPSİ KAPANIR, İÇERİK SON HÂLİNDE KALIR
   --------------------------------------------------------------------------
   Buradaki kural yalnızca DEKORATİF hareketi siler. Kullanıcının kendi
   tetiklediği durum değişimleri (akordeon açma, karusel sekmesi) çalışmaya
   devam eder — yalnızca anında olur. ds-motion-fx.js aynı sorguyu okur ve
   otomatik ilerlemeyi, yazmayı, sayımı, parallax'ı ve tilt'i hiç başlatmaz.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fx-reveal,
    .fx-reveal.fx-armed,
    .fx-reveal-stagger > *,
    .fx-reveal-stagger > .fx-armed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .fx-parallax-slow {
        transform: none !important;
        will-change: auto !important;
    }

    .fx-marquee.fx-ready {
        overflow-x: auto !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .fx-marquee .fx-marquee-track {
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .fx-tilt,
    .fx-tilt.fx-tilting {
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .fx-typing.fx-ready::after { animation: none !important; opacity: 1; }

    .fx-carousel.fx-ready .fx-carousel-track {
        transition: none !important;
        will-change: auto !important;
    }

    .fx-carousel-dot::before,
    .fx-accordion-trigger::after,
    .fx-accordion-panel {
        transition: none !important;
    }
}

/* ==========================================================================
   11. YAZDIRMA — hareket kalıntısı bırakma
   ========================================================================== */

@media print {
    .fx-reveal,
    .fx-reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .fx-parallax-slow { transform: none !important; }

    .fx-marquee,
    .fx-marquee.fx-ready {
        overflow: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .fx-marquee-track { animation: none !important; flex-wrap: wrap; }

    .fx-carousel.fx-ready .fx-carousel-viewport { overflow: visible !important; }
    .fx-carousel.fx-ready .fx-carousel-track { transform: none !important; flex-wrap: wrap; }
    .fx-carousel-controls { display: none !important; }

    .fx-accordion.fx-ready .fx-accordion-item:not(.fx-open) > .fx-accordion-panel {
        grid-template-rows: 1fr;
        display: grid;
    }
}