/**
 * SEO için Görüntü Optimizasyonu CSS
 * Tarih: 29.05.2025
 */

/* Tüm resimlerin boyut oranlarını koruma */
img {
    aspect-ratio: attr(width) / attr(height);
    max-width: 100%;
    height: auto;
}

/* Lazy loaded görseller için stil */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img.lazy:not([height]) {
    min-height: 200px;
}

img.loaded {
    opacity: 1;
}

/* Görüntü yükleme animasyonu */
.img-placeholder {
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: 5px;
    min-height: 200px;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

/* Responsive görüntü boyutları */
.project-item img,
.team-item img,
.testimon-slider img,
.post-box .post-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Kategori ve ürün görselleri için boyutlandırma */
.product-item img {
    height: 250px;
    width: 100%;
    object-fit: contain;
}

/* Logo optimizasyonu */
.logo img {
    max-height: 60px;
    width: auto;
}

/* Hero/slider görselleri */
.hero-slider img,
.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WebP destek testi */
.webp .webp-bg {
    background-image: var(--webp-bg);
}

.no-webp .webp-bg {
    background-image: var(--fallback-bg);
}

/* Mobil için görüntü optimizasyonu */
@media (max-width: 767px) {
    .product-item img {
        height: 180px;
    }
    
    .project-item img {
        height: 220px;
    }
}