/**
 * SEO & Core Web Vitals CSS
 * Kritik CLS önleme, LCP optimizasyonu ve image aspect ratio koruması
 * 
 * Bu dosya main.css'ten ÖNCE yüklenir (kritik)
 */

/* ============================================================
   CLS PREVENTION: Tüm görseller için aspect ratio rezervasyonu
   ============================================================ */

/* Poster görselleri (2:3 oran) */
img[width="200"][height="300"],
img[width="180"][height="270"],
img[width="140"][height="210"],
img[width="120"][height="180"],
img[width="100"][height="150"],
.video-poster,
.wp-poster img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background-color: #1a1a2e;
    /* CLS: placeholder renk */
    contain: content;
}

/* Backdrop/hero görselleri (16:9 oran) */
img[width="320"][height="180"],
img[width="400"][height="225"],
.wp-ethumb img,
.slider-img-container img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: #1a1a2e;
    contain: content;
}

/* Trend hero kartları (8:9 oran) */
img[width="400"][height="450"],
.trend-hero-img {
    aspect-ratio: 400 / 450;
    object-fit: cover;
    background-color: #1a1a2e;
    contain: content;
}

/* Logo (4:1.7 oran) */
img[width="400"][height="170"] {
    aspect-ratio: 400 / 170;
    object-fit: contain;
}

/* Kategori logoları (16:9 oran) */
img[width="200"][height="112"] {
    aspect-ratio: 200 / 112;
    object-fit: contain;
    background-color: transparent;
}

/* Avatar görselleri (1:1 oran) */
img[width="80"][height="80"] {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

/* ============================================================
   CLS PREVENTION: Skeleton loading placeholders
   ============================================================ */
.img-skeleton {
    background: linear-gradient(90deg, #1a1a2e 25%, #252540 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

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

/* ============================================================
   LCP OPTIMIZATION: Critical content visibility
   ============================================================ */

/* Hero card (en üstteki ilk kart) her zaman tam görünür */
.trend-hero-card:first-child,
.trend-hero-card:first-child .trend-hero-img {
    content-visibility: visible !important;
    contain: none !important;
}

/* Katalog ilk görsel */
.cat-grid-wrapper>a:first-child img {
    content-visibility: visible !important;
    contain: none !important;
}

/* ============================================================
   CLS PREVENTION: Fixed dimensions for UI elements
   ============================================================ */

/* Breadcrumb - sabit yükseklik */
nav[aria-label="breadcrumb"] {
    min-height: 40px;
    contain: layout style;
}

/* Header - sabit yükseklik, layout shift yok */
header {
    contain: layout style;
    will-change: auto;
}

/* Section titles - min height */
.section-title,
.wp-stitle {
    min-height: 2rem;
    contain: layout style;
}

/* ============================================================
   INP OPTIMIZATION: Interaction latency azaltma
   ============================================================ */

/* Tıklanabilir elemanlar için GPU layer */
.video-item-card,
.trend-hero-card,
.wp-ecard,
.wp-hcard,
.slider-item {
    will-change: transform;
    transform: translateZ(0);
    /* GPU layer oluştur */
    backface-visibility: hidden;
}

/* Hover animasyonları için GPU layer - sadece gerektiğinde */
.video-item-card:hover,
.trend-hero-card:hover {
    will-change: transform, box-shadow;
}

/* Hover bittikten sonra GPU layer'ı serbest bırak */
.video-item-card:not(:hover),
.trend-hero-card:not(:hover) {
    will-change: auto;
}

/* ============================================================
   FONT DISPLAY: FOUT önleme
   ============================================================ */
@font-face {
    font-display: swap;
    /* FOUT > FOIT: içerik önce görünür */
}

/* ============================================================
   PRINT STYLES: Gereksiz CSS yükünü azalt
   ============================================================ */
@media print {

    .announcement-bar,
    header nav,
    .hamburger,
    .wp-share,
    .wp-play,
    .swiper-pagination,
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}

/* ============================================================
   ACCESSIBILITY: sr-only helper (SEO friendly hidden content)
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focusable sr-only - for keyboard navigation */
.sr-only:focus,
.sr-only:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}