.ts-media-lazy {
    position: relative;
    overflow: initial;
    display: block;
    width: 100%;
    max-width: 100%;
    isolation: isolate;
}

    .ts-media-lazy::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100% ), linear-gradient(180deg, #eef2f5 0%, #dde5eb 100%);
        transform: translateX(-100%);
        animation: tsSkeletonShimmer 1.2s linear infinite;
        transition: opacity .25s ease;
    }

    .ts-media-lazy.is-loaded::before,
    .ts-media-lazy.is-error::before {
        opacity: 0;
        animation: none;
    }

    .ts-media-lazy > picture {
        display: block;
        width: 100%;
        max-width: 100%;
    }

        .ts-media-lazy > img,
        .ts-media-lazy > video,
        .ts-media-lazy > picture > img {
            display: block;
            width: 100%;
            height: auto;
            opacity: 0;
            transition: opacity .28s ease;
        }

    .ts-media-lazy.is-loaded > img,
    .ts-media-lazy.is-loaded > video,
    .ts-media-lazy.is-loaded > picture > img {
        opacity: 1;
    }

    /* Sabit kutu içindeki cover medya için modifier */
    .ts-media-lazy.ts-media-lazy--cover > img,
    .ts-media-lazy.ts-media-lazy--cover > video,
    .ts-media-lazy.ts-media-lazy--cover > picture,
    .ts-media-lazy.ts-media-lazy--cover > picture > img {
        width: 100%;
        height: 100%;
    }

        .ts-media-lazy.ts-media-lazy--cover > img,
        .ts-media-lazy.ts-media-lazy--cover > video,
        .ts-media-lazy.ts-media-lazy--cover > picture > img {
            object-fit: cover;
        }

    .ts-media-lazy.is-error::after {
        content: "Medya yüklenemedi";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 2;
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255,255,255,.86);
        color: #445160;
        font-size: 12px;
        line-height: 1.35;
    }

@keyframes tsSkeletonShimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-media-lazy::before {
        animation: none;
        transform: none;
    }

    .ts-media-lazy > img,
    .ts-media-lazy > video,
    .ts-media-lazy > picture > img {
        transition: none;
    }
}

/* Lazy skeleton kullanılan sayfalarda AOS başlangıç gizlemesini kapat */
body.lazy-skeleton-mode [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

body.lazy-skeleton-mode [data-aos-delay] {
    transition-delay: 0ms !important;
}