/**
 * Performance Optimizations
 * GPU acceleration, will-change, ve performans iyileştirmeleri
 */

/* ============================================
   GPU ACCELERATION
   ============================================ */

/* Animasyonlu elementler için GPU acceleration */
.card,
.btn,
.nav-link,
.user-dropdown,
.mobile-menu,
.modal {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Hover efektleri için will-change */
.card:hover,
.btn:hover,
.nav-link:hover {
    will-change: transform, box-shadow;
}

/* Scroll için optimize edilmiş elementler */
.modern-header,
.site-header {
    will-change: transform;
    contain: layout style paint;
}

/* ============================================
   LAZY LOADING İYİLEŞTİRMELERİ
   ============================================ */

/* Görseller için lazy loading placeholder */
img[loading="lazy"] {
    background: var(--color-cream-light);
    min-height: 200px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   FONT LOADING OPTİMİZASYONU
   ============================================ */

/* Font display swap - Google Fonts otomatik olarak kullanıyor */
/* Custom font eklenirse buraya @font-face tanımları gelecek */

/* ============================================
   CRITICAL CSS OPTİMİZASYONU
   ============================================ */

/* Above the fold content için optimize edilmiş stiller */
.hero-section,
.modern-header {
    contain: layout style;
}

/* ============================================
   ANIMATION PERFORMANCE
   ============================================ */

/* Sadece transform ve opacity kullan (GPU accelerated) */
@keyframes optimizedFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

/* ============================================
   LAYOUT SHIFT PREVENTION
   ============================================ */

/* Aspect ratio boxes için */
.aspect-ratio-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.aspect-ratio-16-9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aspect-ratio-4-3 {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.aspect-ratio-4-3 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aspect-ratio-1-1 {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
}

.aspect-ratio-1-1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   CONTAIN PROPERTY
   ============================================ */

/* Layout containment için */
.card,
.feature-card,
.member-card {
    contain: layout style paint;
}

/* Content containment için */
article,
section {
    contain: content;
}

/* ============================================
   CONTENT VISIBILITY
   ============================================ */

/* Off-screen content için */
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ============================================
   REDUCE REPAINTS
   ============================================ */

/* Composite layer'a taşı */
.dropdown-menu,
.user-dropdown,
.mobile-menu,
.modal-content {
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* ============================================
   DEBOUNCE SCROLL
   ============================================ */

/* Passive event listeners için hint */
html {
    touch-action: manipulation;
}

/* ============================================
   MINIMIZE LAYOUT THRASHING
   ============================================ */

/* Fixed height elementler */
.modern-header {
    height: 70px;
    min-height: 70px;
}

.site-footer {
    min-height: 400px;
}

/* ============================================
   CRITICAL RENDERING PATH
   ============================================ */

/* Inline critical CSS için placeholder */
.above-fold {
    display: block;
    min-height: 100vh;
}

/* ============================================
   RESOURCE HINTS
   ============================================ */

/* Preconnect, prefetch için CSS hints */
/* Bu kısım HTML head'de kullanılmalı:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
*/

/* ============================================
   WEBP SUPPORT
   ============================================ */

/* WebP destekleyen tarayıcılar için */
@supports (background-image: -webkit-image-set(url("test.webp") 1x)) {
    .hero-section {
        background-image: -webkit-image-set(
            url("hero.webp") 1x,
            url("hero@2x.webp") 2x
        );
    }
}

/* ============================================
   DARK MODE SUPPORT (Gelecek için hazır)
   ============================================ */

/* Dark mode desteği gelecekte eklenecek */
/* @media (prefers-color-scheme: dark) kullanılacak */

/* ============================================
   PRINT OPTIMIZATION
   ============================================ */

@media print {
    /* Gereksiz elementleri gizle */
    .no-print,
    .modern-header,
    .site-footer,
    .btn,
    button,
    nav {
        display: none !important;
    }
    
    /* Sayfa kırılmalarını optimize et */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    img {
        page-break-inside: avoid;
    }
    
    /* Renkleri optimize et */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a {
        text-decoration: underline !important;
    }
    
    /* Link URL'lerini göster */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}