/* ═══════════════════════════════════════════════════════════ VITONELLA — PERFORMANCE BOOST CSS Bu dosyayı her sayfanın 'ine ekle: ═══════════════════════════════════════════════════════════ */ /* ── 1. Font Display Swap (FOUT yerine FOIT önler, hızlı text göster) ── */ @font-face { font-display: swap; } /* ── 2. Header backdrop-filter: sadece scroll'da etkinleştir ── */ .main-header { /* backdrop-filter'ı CSS variable üzerinden kontrol ediyoruz */ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 15, 14, 0.95); /* blur olmadan daha opak */ transition: background 0.25s ease, backdrop-filter 0.25s ease; /* GPU katmanına taşı — reflow önler */ transform: translateZ(0); will-change: background; } /* JS header-scrolled class eklenince blur aktif olur */ .main-header.scrolled { backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); background: rgba(10, 15, 14, 0.8); } /* ── 3. Glassmorphism kartlarda blur'u azalt (20→12px, %40 daha hızlı) ── */ .glass-card, .feature-card, .about-card, .pricing-card, [class*="card"] { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* GPU layer */ transform: translateZ(0); } /* ── 4. Scroll Reveal — JS yerine CSS ile (FOUC yok) ── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* GPU layer — jank önler */ will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: translateY(0); will-change: auto; /* animasyon bitti, GPU'yu serbest bırak */ } /* Stagger delays — çocuk elementler sırayla açılır */ .reveal-stagger > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger > *:nth-child(5) { transition-delay: 320ms; } .reveal-stagger > *:nth-child(6) { transition-delay: 400ms; } /* ── 5. Content Visibility — ekran dışı bölümleri atla ── */ .section-offscreen { content-visibility: auto; contain-intrinsic-size: 0 500px; /* tahmini yükseklik */ } /* ── 6. Animasyonlarda sadece transform/opacity kullan (layout tetikleme) ── */ .btn { /* translateY zaten var ama transform: translateZ(0) ekle */ transform: translateZ(0); will-change: transform, box-shadow; } /* ── 7. Smooth scroll — sadece kullanıcı hareket ettirmiyorsa ── */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ── 8. Image lazy loading skeleton ── */ img[loading="lazy"] { background: var(--bg-elevated, #182320); min-height: 4px; } /* ── 9. Font rendering optimize ── */ body { text-rendering: optimizeSpeed; /* optimizeLegibility yavaş, sadece büyük başlıklarda kullan */ } h1, h2, h3, .logo-text { text-rendering: optimizeLegibility; }