/* ========================================================================= sille.tr — Hareket katmanı Kural: hareket anlam taşır (mekânsal süreklilik, hiyerarşi). Süsleme değil. GSAP yüklenirse ScrollTrigger devralır; yüklenmezse IntersectionObserver ile aynı sınıflar çalışır. JS yoksa her şey görünür kalır (no-js kilidi). ========================================================================= */ /* --- Kaydırmada açılma ---------------------------------------------------- */ /* JS çalışıyorsa .js sınıfı 'e eklenir; ancak o zaman gizle. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-soft); } .js [data-reveal="left"] { transform: translate3d(-24px, 0, 0); } .js [data-reveal="right"] { transform: translate3d(24px, 0, 0); } .js [data-reveal="scale"] { transform: scale(.955); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* Sıralı açılma (stagger) — CSS gecikmesi, DB önerisi 60ms aralık */ .js [data-stagger] > * { opacity: 0; transform: translate3d(0, 16px, 0) scale(.965); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-soft); } .js [data-stagger].is-revealed > * { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .js [data-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; } .js [data-stagger].is-revealed > *:nth-child(2) { transition-delay: 60ms; } .js [data-stagger].is-revealed > *:nth-child(3) { transition-delay: 120ms; } .js [data-stagger].is-revealed > *:nth-child(4) { transition-delay: 180ms; } .js [data-stagger].is-revealed > *:nth-child(5) { transition-delay: 240ms; } .js [data-stagger].is-revealed > *:nth-child(6) { transition-delay: 300ms; } .js [data-stagger].is-revealed > *:nth-child(7) { transition-delay: 340ms; } .js [data-stagger].is-revealed > *:nth-child(8) { transition-delay: 380ms; } .js [data-stagger].is-revealed > *:nth-child(n+9) { transition-delay: 420ms; } /* --- Hero giriş koreografisi ---------------------------------------------- */ .js .hero__title, .js .hero__sub, .js .hero__actions, .js .hero__meta, .js .page-hero__title, .js .page-hero__sub, .js .breadcrumb { opacity: 0; transform: translate3d(0, 26px, 0); animation: hero-in var(--d-slower) var(--e-soft) forwards; } .js .breadcrumb { animation-delay: 60ms; } .js .hero__title, .js .page-hero__title { animation-delay: 140ms; } .js .hero__sub, .js .page-hero__sub { animation-delay: 280ms; } .js .hero__actions { animation-delay: 400ms; } .js .hero__meta { animation-delay: 520ms; } @keyframes hero-in { to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Hero başlığındaki kelimeler tek tek gelir (JS kelimeleri sarmalar) */ .js .hero__title .word { display: inline-block; overflow: hidden; vertical-align: bottom; } .js .hero__title .word > span { display: inline-block; transform: translate3d(0, 105%, 0); animation: word-up 900ms var(--e-soft) forwards; } @keyframes word-up { to { transform: translate3d(0, 0, 0); } } /* --- Kaydırma ipucu ------------------------------------------------------- */ @keyframes scroll-hint { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 35% { transform: scaleY(1); transform-origin: top; opacity: 1; } 70% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } } /* --- Yükleniyor dönmesi --------------------------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } /* --- Sayaç ---------------------------------------------------------------- */ .stat__value { font-variant-numeric: tabular-nums; } /* --- Görsel yüklenme ------------------------------------------------------ */ img[loading="lazy"] { transition: opacity var(--d-slow) var(--e-out); } /* --- Nazik yüzey vurguları ------------------------------------------------ */ .hover-lift { transition: transform var(--d-base) var(--e-soft), box-shadow var(--d-base) var(--e-out); } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } /* ========================================================================= Hareketi azalt: her şey anında ve yerinde. Hiçbir içerik gizli kalmaz. ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal], .js [data-stagger] > *, .js .hero__title, .js .hero__sub, .js .hero__actions, .js .hero__meta, .js .page-hero__title, .js .page-hero__sub, .js .breadcrumb { opacity: 1 !important; transform: none !important; animation: none !important; } .js .hero__title .word > span { transform: none !important; animation: none !important; } .hero__scroll::after { animation: none; } .hero__media, .page-hero__media { transform: none !important; } }