/**
 * LazyLoad CSS
 * 1) .lazyload + data-src: JS ile viewport'a girince yüklenir, .lazyloaded ile fade-in.
 * 2) loading="lazy": Tarayıcı native lazy kullanır; JS yüklendikten sonra .lazyloaded ile fade-in.
 * JS kapalıyken native lazy görseller normal görünür (body.js-lazyload yok).
 */

/* JS ile yüklenen görseller (data-src kullanan .lazyload) */
img.lazyload {
    opacity: 0;
    transition: opacity 0.35s ease;
    background: #f0f0f0;
}

img.lazyload.loaded,
img.lazyload.lazyloaded {
    opacity: 1;
    background: transparent;
}

/* Native loading="lazy": JS ile .lazyloaded eklenince fade-in (JS kapalıyken görseller normal görünür) */
body.js-lazyload img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.35s ease;
}

body.js-lazyload img[loading="lazy"].lazyloaded {
    opacity: 1;
}

/* Placeholder: layout shift önlemek için min-height (ihtiyaca göre kullanılabilir) */
.lazyload-wrap {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.lazyload-wrap img.lazyload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Skeleton pulse (isteğe bağlı) */
.lazyload-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: lazyload-pulse 1.2s ease-in-out infinite;
}

@keyframes lazyload-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}