/**
 * Lazy Loading Styles
 * Görseller yüklenirken ve yüklendikten sonraki animasyonlar
 */

/* Lazy load class - yüklenmeden önce */
.lazy-load {
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Yüklenme sırasında hafif blur efekti (opsiyonel) */
.lazy-load:not(.loaded) {
    filter: blur(5px);
    transform: scale(1.02);
}

/* Görsel yüklendikten sonra */
.lazy-load.loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* Hata durumunda */
.lazy-load.error {
    opacity: 0.5;
    background-color: #f5f5f5;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,.03) 10px,
        rgba(0,0,0,.03) 20px
    );
}

/* Placeholder için özel stil */
.lazy-load[src*="data:image/svg"] {
    background-color: #f0f0f0;
}

/* Skeleton loading animation (opsiyonel) */
.lazy-load.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* Reduced motion için - accessibility */
@media (prefers-reduced-motion: reduce) {
    .lazy-load {
        transition: none;
        filter: none;
        transform: none;
    }

    .lazy-load.skeleton {
        animation: none;
    }
}

/* Mobil için optimizasyon */
@media (max-width: 768px) {
    .lazy-load:not(.loaded) {
        filter: blur(3px); /* Mobilde daha az blur */
    }
}