/* ============================================= */
/* CLS (Cumulative Layout Shift) PREVENTION    */
/* Google Lighthouse Optimization v1.0         */
/* ============================================= */

/* 
 * AMAÇ: CLS skorunu 0.1'in altına indirmek
 * HEDEF: Layout shift'leri minimize etmek
 * YÖNTEM: Rezerve alan + contain-intrinsic-size
 */

/* ========================================= */
/* 1. ROW CONTAINER - LAYOUT SHIFT FIX      */
/* ========================================= */

/* 
 * Sorun: .row elementi yüklenirken boyut değiştiriyor
 * Çözüm: Minimum yükseklik rezerve et
 */
.service-main-container .row {
    /* Minimum yükseklik - içerik yüklenmeden önce yer ayır */
    min-height: 600px;

    /* Layout containment - tarayıcıya layout hesaplamalarını optimize et */
    contain: layout style;

    /* İçerik yüklenmeden önce tahmini boyut */
    contain-intrinsic-size: auto 600px;

    /* Smooth transition for content loading */
    transition: min-height 0.2s ease-out;
}

/* İçerik yüklendikten sonra min-height'ı kaldır */
.service-main-container .row.content-loaded {
    min-height: unset;
}


/* ========================================= */
/* 2. CONTENT AREA - MD3-CONTENT FIX        */
/* ========================================= */

/* 
 * Sorun: .md3-content içeriği yüklenirken kayıyor
 * Çözüm: Aspect ratio + min-height ile yer rezerve et
 */
.md3-content {
    /* Minimum yükseklik - tipik blog içeriği için */
    min-height: 400px;

    /* Layout containment */
    contain: layout style paint;

    /* İçerik yüklenmeden önce tahmini boyut */
    contain-intrinsic-size: auto 400px;

    /* Prevent layout shift during image loading */
    overflow-anchor: auto;
}

/* İçerik yüklendikten sonra */
.md3-content.content-loaded {
    min-height: unset;
}

/* İçerikteki görseller için aspect ratio koruması */
.md3-content img {
    /* Aspect ratio ile yer rezerve et */
    aspect-ratio: attr(width) / attr(height);

    /* Maksimum genişlik */
    max-width: 100%;
    height: auto;

    /* Layout shift önleme */
    display: block;

    /* Görsel yüklenene kadar placeholder renk */
    background-color: #f1f5f9;
}

/* Görseller için explicit width/height varsa */
.md3-content img[width][height] {
    /* Tarayıcı otomatik aspect ratio hesaplar */
    aspect-ratio: auto;
}


/* ========================================= */
/* 3. SERVICE CONTENT BOX - CONTAINER FIX   */
/* ========================================= */

.service-content-box {
    /* Layout containment */
    contain: layout style;

    /* Minimum yükseklik */
    min-height: 500px;

    /* İçerik yüklenmeden önce tahmini boyut */
    contain-intrinsic-size: auto 500px;
}

.service-content-box.content-loaded {
    min-height: unset;
}


/* ========================================= */
/* 4. FEATURED IMAGE - ASPECT RATIO FIX     */
/* ========================================= */

/* 
 * Sorun: Featured image yüklenirken layout kayıyor
 * Çözüm: Aspect ratio ile yer rezerve et
 */
.blog-featured-image {
    /* Standard OG image aspect ratio (1200x630 = 1.905:1) */
    aspect-ratio: 1200 / 630;

    /* Maksimum genişlik */
    max-width: 100%;
    height: auto;

    /* Layout shift önleme */
    display: block;

    /* Görsel yüklenene kadar placeholder */
    background-color: #f1f5f9;

    /* Smooth loading */
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* Görsel yüklendiğinde */
.blog-featured-image.loaded,
.blog-featured-image[src] {
    opacity: 1;
}


/* ========================================= */
/* 5. SIDEBAR - LAYOUT SHIFT FIX            */
/* ========================================= */

/* Sidebar için minimum yükseklik */
.col-lg-4 {
    /* Layout containment */
    contain: layout style;

    /* Minimum yükseklik */
    min-height: 600px;
}


/* ========================================= */
/* 6. HERO SECTION - BREADCRUMB FIX         */
/* ========================================= */

.ilan-hero-section {
    /* Sabit yükseklik - layout shift önleme */
    min-height: 120px;

    /* Layout containment */
    contain: layout style paint;
}

.minimal-breadcrumb {
    /* Sabit yükseklik */
    min-height: 24px;
}


/* ========================================= */
/* 7. FONT LOADING - FOUT/FOIT PREVENTION   */
/* ========================================= */

/* 
 * Sorun: Web fontları yüklenirken layout kayıyor
 * Çözüm: font-display: swap + size-adjust
 */

/* Poppins font için fallback */
body {
    /* Fallback font stack */
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Font loading sırasında layout shift önleme */
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ========================================= */
/* 8. RESPONSIVE - MOBILE OPTIMIZATION      */
/* ========================================= */

@media (max-width: 991px) {

    /* Mobile'da daha küçük minimum yükseklikler */
    .service-main-container .row {
        min-height: 400px;
        contain-intrinsic-size: auto 400px;
    }

    .md3-content {
        min-height: 300px;
        contain-intrinsic-size: auto 300px;
    }

    .service-content-box {
        min-height: 350px;
        contain-intrinsic-size: auto 350px;
    }

    .col-lg-4 {
        min-height: 300px;
    }

    .ilan-hero-section {
        min-height: 100px;
    }
}

@media (max-width: 767px) {

    /* Extra small screens */
    .service-main-container .row {
        min-height: 300px;
        contain-intrinsic-size: auto 300px;
    }

    .md3-content {
        min-height: 250px;
        contain-intrinsic-size: auto 250px;
    }

    .service-content-box {
        min-height: 280px;
        contain-intrinsic-size: auto 280px;
    }

    .col-lg-4 {
        min-height: 200px;
    }

    .ilan-hero-section {
        min-height: 90px;
    }
}


/* ========================================= */
/* 9. JAVASCRIPT HELPER CLASSES             */
/* ========================================= */

/* 
 * Bu class'lar JavaScript tarafından eklenir
 * İçerik yüklendiğinde min-height kısıtlamalarını kaldırır
 */

.cls-optimized {
    /* İçerik yüklendi, artık doğal boyutları kullan */
    min-height: unset !important;
    contain-intrinsic-size: unset !important;
}

/* Görsel yükleme durumu */
.image-loading {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.image-loaded {
    background: none;
    animation: none;
}


/* ========================================= */
/* 10. PERFORMANCE HINTS                    */
/* ========================================= */

/* 
 * Tarayıcıya performans ipuçları ver
 */

/* ========================================= */
/* 11. DYNAMIC COMPONENT FIXES              */
/* ========================================= */

/* 
 * Sorun: Banner ve reklam elementleri sonradan yükleniyor veya 
 * stilleri inline olarak HTML'den sonra geliyor.
 * Çözüm: Kritik stilleri ve boyutları önceden tanımla.
 */

/* Desktop & Mobile Banner Fix */
.AkademikTR-banner {
    display: block;
    width: 100%;
    /* Minimum yükseklik rezerve et */
    min-height: 80px;
    /* Layout containment */
    contain: layout style;
    /* Başlangıçta görünür olsun (boşluk rezervasyonu için) */
    visibility: visible;
}

/* Mobile App Card Fix */
.md3-app-card {
    display: flex !important;
    flex-direction: column;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    /* Minimum yükseklik rezerve et */
    min-height: 200px;
    /* Layout containment */
    contain: layout style;
}

.ema-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.ema-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
}

.ema-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.ema-info p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .md3-app-card {
        padding: 20px;
    }

    .ema-icon {
        width: 56px;
        height: 56px;
    }
}


/* Scroll performance */
.service-main-container {
    /* Smooth scrolling */
    scroll-behavior: smooth;

    /* Scroll containment */
    overscroll-behavior: contain;
}