/* assets/css/skeleton.css - GÜNCELLENMİŞ SÜRÜM */

/* İskelet Ana Kapsayıcı */
#skeleton-loader {
    display: block;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
}

/* İskelet Kutusu (Daha belirgin gri tonları) */
.skeleton-box {
    background: #e2e8f0; /* Daha koyu bir gri taban */
    /* Shimmer efekti kontrastı artırıldı */
    background-image: linear-gradient(to right, #e2e8f0 0%, #f1f5f9 20%, #e2e8f0 40%, #e2e8f0 100%);
    background-repeat: no-repeat;
    background-size: 2000px 100%; 
    animation: shimmer 1.5s infinite linear;
    border-radius: 6px;
    display: block;
}

/* İskelet Animasyonu */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* İskelet Kart Yapısı */
.skeleton-card {
    background: #ffffff;
    border: 1px solid #cbd5e1; /* Çerçeve rengi koyulaştırıldı */
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Hafif gölge eklendi */
}

.skeleton-img {
    width: 100%;
    height: 220px;
    border-radius: 0; /* Köşeler kartla uyumlu olsun diye sıfırlandı */
    background: #cbd5e1; /* Görsel alanı diğerlerinden bir tık daha koyu */
}

.skeleton-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-title {
    height: 28px; /* Biraz kalınlaştırıldı */
    width: 95%;
    background: #d1d5db; /* Başlık daha belirgin gri */
    margin-bottom: 10px;
}

.skeleton-text {
    height: 14px;
    width: 100%;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-meta {
    height: 12px;
    width: 40%;
    margin-top: auto; /* En alta it */
    background: #e2e8f0;
}

/* Slider Alanı İçin İskelet */
.skeleton-slider {
    width: 100%;
    height: 500px;
    border-radius: 12px;
    margin-bottom: 40px;
    background: #cbd5e1; /* Slider alanı belirgin olsun */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .skeleton-slider {
        height: 300px;
    }
}