/* ===========================================
   PERFORMANCE OPTIMIZATION CSS
   =========================================== */

/* 1. HARDWARE ACCELERATION - GPU kullanımı için */
.animated,
.wow,
[class*="fade"],
[class*="slide"],
[class*="bounce"],
[class*="zoom"] {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 2. SMOOTH SCROLLING - Kaydırma performansı */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 3. OPTIMIZED TRANSITIONS - Daha hızlı geçişler */
* {
    transition-duration: 0.2s !important;
    transition-timing-function: ease-out !important;
}

/* 4. REDUCED MOTION - Kullanıcı tercihi */
@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;
    }
}

/* 5. OPTIMIZED ANIMATIONS - Daha az CPU kullanımı */
.animated {
    animation-duration: 0.6s !important;
    animation-fill-mode: both;
}

/* 6. LAZY LOADING - Görsel yükleme optimizasyonu */
img {
    loading: lazy;
    content-visibility: auto;
}

/* 7. CONTAINER QUERIES - Daha iyi performans */
.performance-container {
    contain: layout style paint;
}

/* 8. SCROLL OPTIMIZATION - Kaydırma sırasında donma önleme */
.scroll-optimized {
    transform: translateZ(0);
    will-change: scroll-position;
}

/* 9. FADE ANIMATIONS - Daha hızlı fade efektleri */
.fade-in {
    animation: optimizedFadeIn 0.4s ease-out;
}

.fade-out {
    animation: optimizedFadeOut 0.3s ease-in;
}

@keyframes optimizedFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes optimizedFadeOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
}

/* 10. SLIDE ANIMATIONS - Optimized slide effects */
.slide-in-left {
    animation: optimizedSlideInLeft 0.5s ease-out;
}

.slide-in-right {
    animation: optimizedSlideInRight 0.5s ease-out;
}

@keyframes optimizedSlideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes optimizedSlideInRight {
    from {
        opacity: 0;
        transform: translate3d(100px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 11. HOVER OPTIMIZATION - Hover efektleri için */
.hover-optimized {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hover-optimized:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 12. BUTTON OPTIMIZATION - Buton animasyonları */
.btn-optimized {
    transition: all 0.2s ease-out;
    will-change: transform, background-color;
}

.btn-optimized:hover {
    transform: translateY(-1px);
}

.btn-optimized:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* 13. CARD OPTIMIZATION - Kart animasyonları */
.card-optimized {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    will-change: transform;
}

.card-optimized:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 14. MODAL OPTIMIZATION - Modal performansı */
.modal-optimized {
    animation: optimizedModalIn 0.3s ease-out;
}

@keyframes optimizedModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 15. LOADING OPTIMIZATION - Yükleme animasyonları */
.loading-optimized {
    animation: optimizedSpin 1s linear infinite;
}

@keyframes optimizedSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 16. RESPONSIVE OPTIMIZATION - Mobil performans */
@media (max-width: 768px) {
    .animated {
        animation-duration: 0.4s !important;
    }
    
    * {
        transition-duration: 0.15s !important;
    }
}

/* 17. DISABLE ANIMATIONS ON LOW-END DEVICES */
@media (max-width: 480px) {
    .animated,
    .wow {
        animation: none !important;
        transition: none !important;
    }
}

/* 18. FOCUS OPTIMIZATION - Odaklanma performansı */
.focus-optimized:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    transition: outline 0.1s ease-out;
}

/* 19. SCROLL PERFORMANCE - Kaydırma performansı */
.scroll-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 20. IMAGE OPTIMIZATION - Görsel performansı */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* 21. TEXT OPTIMIZATION - Metin performansı */
.text-optimized {
    text-rendering: optimizeSpeed;
    font-display: swap;
}

/* 22. LAYOUT OPTIMIZATION - Layout performansı */
.layout-optimized {
    contain: layout;
    content-visibility: auto;
}

/* 23. PAINT OPTIMIZATION - Boyama performansı */
.paint-optimized {
    contain: paint;
    will-change: auto;
}

/* 24. COMPOSITE OPTIMIZATION - Kompozit performansı */
.composite-optimized {
    transform: translateZ(0);
    will-change: transform;
}

/* 25. MEMORY OPTIMIZATION - Bellek optimizasyonu */
.memory-optimized {
    contain: strict;
    content-visibility: auto;
}