/* Performans Optimizasyonları - Kasma Sorunlarını Giderme */

/* 1. Backdrop-filter optimizasyonu - Mobilde devre dışı */
@media (max-width: 991px) {
    .canvasof-modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.7) !important;
    }
    
    .mobile-bottom-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* 2. Will-change optimizasyonu - Sadece animasyonlu elementlerde */
* {
    will-change: auto;
}

/* Header için will-change'i kaldır */
header,
header *,
.navbar,
.navbar * {
    will-change: auto !important;
}

.portfolio-box,
.gallery-box,
[data-anime],
.hero-section,
.swiper-slide {
    will-change: transform, opacity;
}

/* Animasyon tamamlandıktan sonra will-change'i kaldır */
.anime-complete,
.swiper-slide-active {
    will-change: auto;
}

/* 3. Transform optimizasyonu - GPU hızlandırma */
.hero-section {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.navbar-collapse,
.mobile-bottom-menu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 4. Scroll performans optimizasyonu */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 5. Animasyon optimizasyonu - Mobilde azalt */
@media (max-width: 767px) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Sadece gerekli animasyonları koru */
    .chat-bubble-pulse {
        animation: pulse 2s infinite !important;
    }
    
    .mobile-bottom-menu-item.active .mobile-bottom-menu-icon {
        animation: bottomMenuPulse 0.3s ease !important;
    }
}

/* 6. Görsel optimizasyonu */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 7. Overflow optimizasyonu */
* {
    box-sizing: border-box;
}

/* 8. Repaint optimizasyonu - Fixed elementler */
.mobile-bottom-menu,
.chat-bubble-container {
    contain: layout style paint;
}

/* Header için contain kullanma - görünürlük sorunlarına neden olabilir */
header {
    contain: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
}

header .navbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 99 !important;
}

header .header-top-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 100 !important;
}

/* Mobilde header-top-bar gizle */
@media (max-width: 767px) {
    header .header-top-bar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    header .header-top-bar + .navbar {
        top: 0 !important;
    }
}

/* 9. Scroll event optimizasyonu */
@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;
    }
}

/* 10. Parallax devre dışı - Mobilde */
@media (max-width: 991px) {
    [data-parallax-background-ratio],
    [data-parallax-liquid] {
        background-attachment: scroll !important;
        transform: none !important;
    }
}

/* 11. Marquee animasyon optimizasyonu */
@media (max-width: 767px) {
    .marquees-text {
        animation: none !important;
        transform: none !important;
    }
}

/* 12. Swiper optimizasyonu */
.swiper {
    will-change: transform;
}

.swiper-wrapper {
    will-change: transform;
}

.swiper-slide {
    will-change: auto;
}

.swiper-slide-active {
    will-change: transform;
}

/* 13. Navbar collapse performans */
.navbar-collapse {
    contain: layout style;
    will-change: auto;
}

.navbar-collapse.show {
    will-change: auto;
}

/* 14. Chat bubble optimizasyonu */
.chat-bubble-container {
    contain: layout style paint;
    will-change: auto;
}

.chat-bubble-btn {
    will-change: transform;
}

.chat-bubble-btn:hover {
    will-change: transform;
}

/* 15. Grid ve Masonry optimizasyonu */
.grid,
.grid-item {
    will-change: auto;
}

.grid-item.anime-complete {
    will-change: auto;
}