/* ========================================================================= HAREKET — başlangıç durumları (CLAUDE.md §5.1) ⚠ PROGRESSIVE ENHANCEMENT: gizleme durumları YALNIZ .tk-motion altında. Bu sınıfı 'deki inline script ekler ve sadece şu koşulda: JS çalışıyor VE kullanıcı reduced-motion istemiyor. JS patlarsa / kapalıysa sınıf hiç eklenmez → içerik normal görünür. Asla ".tk-reveal { opacity: 0 }" yazma — JS ölürse sayfa boş kalır. ========================================================================= */ /* Ortaya çıkacak öğelerin başlangıcı */ .tk-motion [data-tk-reveal], .tk-motion [data-tk-reveal-group] > * { opacity: 0; /* Yalnız transform + opacity — layout kaydırmaz, CLS = 0 (§5.1/6) */ transform: translateY(24px); will-change: opacity, transform; } /* Animasyon bitince will-change kalkar (bellek/compositor katmanı boşalsın) */ .tk-motion [data-tk-reveal].tk-in, .tk-motion [data-tk-reveal-group].tk-in > * { will-change: auto; } /* --- HERO: LCP elemanı (§5.1/3) --- ScrollTrigger/observer'a BAĞLANMAZ. Boyanmayı geciktirmemek için saf CSS ile, sayfa açılır açılmaz, kısa süreli girer. opacity:0'dan gelen bir LCP elemanı Lighthouse'ta LCP'yi animasyon süresi kadar geciktirir — bu yüzden süre kısa ve gecikme yok. */ .tk-motion .tk-hero__badge, .tk-motion .tk-hero-title, .tk-motion .tk-hero .tk-lead, .tk-motion .tk-hero .tk-btn-row { animation: tk-rise .45s cubic-bezier(.22, .61, .36, 1) both; } .tk-motion .tk-hero-title { animation-delay: .05s; } .tk-motion .tk-hero .tk-lead { animation-delay: .10s; } .tk-motion .tk-hero .tk-btn-row { animation-delay: .15s; } @keyframes tk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Hero görseli hiç animasyonlanmaz — çoğu sayfada LCP adayı odur. */ /* --- Header: kaydırınca yoğunlaşır --- */ .tk-header { transition: box-shadow var(--tk-t-med), background-color var(--tk-t-med); } .tk-header.tk-stuck { background: rgba(255, 255, 255, .96); box-shadow: 0 6px 24px rgba(0, 0, 0, .07); } /* --- Mega menü girişi --- */ .tk-mega { transform-origin: top center; } /* --- Lenis yumuşak kaydırma --- Lenis html'e .lenis sınıflarını kendisi ekler. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* Lenis yoksa (reduced-motion / JS kapalı) tarayıcının kendi yumuşaklığı; çapa bağlantıları yine de akıcı olsun. */ @media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } } /* ========================================================================= HAREKET AZALTMA — mutlak üstünlük (§5.1/1) Kullanıcı tercihi bizim estetiğimizi EZER. .tk-motion zaten eklenmez ama çift emniyet: buradan da her şey sıfırlanır. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .tk-motion [data-tk-reveal], .tk-motion [data-tk-reveal-group] > *, .tk-motion .tk-hero__badge, .tk-motion .tk-hero-title, .tk-motion .tk-hero .tk-lead, .tk-motion .tk-hero .tk-btn-row { opacity: 1 !important; transform: none !important; animation: none !important; } html { scroll-behavior: auto !important; } }