/**
 * Modüler görsel skeleton — tek dosyadan yönetilir.
 *
 * Kullanım:
 *   <div class="skeleton-media [skeleton-media--pad-4] [skeleton-media--img-absolute]">
 *     <span class="skeleton-media__block" aria-hidden="true"></span>
 *     <img class="skeleton-media__img" src="..." alt="">
 *   </div>
 *
 * Yükleme: skeleton_media_img_attrs() (includes/function.php) ile img onload/onerror + js/image-skeleton.js yedek.
 * İframe (iletişim haritası): skeleton_media_iframe_attrs() + .skeleton-media__iframe.
 * Renk/parlaklık: aşağıdaki :root değişkenleri.
 */
:root {
    --skeleton-media-base: #f2f4f7;
    --skeleton-media-highlight: rgba(255, 255, 255, 0.82);
    --skeleton-media-sweep-duration: 1.4s;
    /* İskelet → fotoğraf: daha uzun ve yumuşak çapraz geçiş */
    --skeleton-media-reveal-out: 0.55s;
    --skeleton-media-reveal-in: 0.85s;
    --skeleton-media-reveal-in-delay: 0s;
    --skeleton-media-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.skeleton-media {
    position: relative;
    background-color: var(--skeleton-media-base);
    transition: background-color var(--skeleton-media-reveal-in) var(--skeleton-media-reveal-ease);
}

.skeleton-media__block {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background-color: var(--skeleton-media-base);
    overflow: hidden;
    pointer-events: none;
    transition:
        opacity var(--skeleton-media-reveal-out) var(--skeleton-media-reveal-ease),
        visibility 0s linear var(--skeleton-media-reveal-out);
}

.skeleton-media__block::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 60%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        var(--skeleton-media-highlight) 45%,
        transparent 90%
    );
    animation: skeleton-media-sweep var(--skeleton-media-sweep-duration) ease-in-out infinite;
    transform: translateX(0);
}

@keyframes skeleton-media-sweep {
    0% {
        transform: translateX(-20%);
    }
    100% {
        transform: translateX(350%);
    }
}

.skeleton-media--pad-4 .skeleton-media__block {
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-media__block::after {
        animation: none;
        display: none;
    }
    .skeleton-media,
    .skeleton-media__block,
    .skeleton-media__img,
    .skeleton-media__iframe {
        transition-duration: 0.15s;
        transition-delay: 0s !important;
    }
}

.skeleton-media__img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--skeleton-media-reveal-in) var(--skeleton-media-reveal-ease) var(--skeleton-media-reveal-in-delay);
}

.skeleton-media__iframe {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    border: 0;
    opacity: 0;
    transition: opacity var(--skeleton-media-reveal-in) var(--skeleton-media-reveal-ease) var(--skeleton-media-reveal-in-delay);
}

.skeleton-media > a {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.skeleton-media > a .skeleton-media__img {
    width: 100%;
    height: 100%;
}

.skeleton-media--img-absolute .skeleton-media__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.skeleton-media--loaded {
    background-color: transparent;
}

.skeleton-media--loaded .skeleton-media__block {
    opacity: 0;
    visibility: hidden;
}

.skeleton-media--loaded .skeleton-media__block::after {
    animation: none;
}

.skeleton-media--loaded .skeleton-media__img {
    opacity: 1;
}

.skeleton-media--loaded .skeleton-media__iframe {
    opacity: 1;
}

/* Tüm iç img (kartta <a><img> dahil); sadece .skeleton-media__img sınıfına bağlı kalmayın */
.skeleton-media:not(.skeleton-media--loaded) img {
    opacity: 0 !important;
}

.skeleton-media:not(.skeleton-media--loaded) iframe.skeleton-media__iframe {
    opacity: 0 !important;
}

.skeleton-media.skeleton-media--loaded img {
    opacity: 1 !important;
}

.skeleton-media.skeleton-media--loaded iframe.skeleton-media__iframe {
    opacity: 1 !important;
}