/* =============================================
   Sufirain — İçerik Yer Tutucu ve Beliriş
   Perde artık veriyi beklemediği için içerik gelene kadar (~0,5 sn) kaplar
   boş kalıyor. Yer tutucular sayfanın iskeletini ayakta tutar; gösteri
   yapmazlar, yalnızca "burada bir şey var" der.
   ============================================= */

.sf-ph {
    border-radius: 8px;
    background-color: rgba(23, 21, 17, 0.045);
    background-image: linear-gradient(
        100deg,
        rgba(23, 21, 17, 0) 28%,
        rgba(23, 21, 17, 0.035) 48%,
        rgba(23, 21, 17, 0) 68%
    );
    background-size: 240% 100%;
    background-repeat: no-repeat;
    animation: sf-ph-sweep 2.6s ease-in-out infinite;
}

/* Yer tutucu ölçüleri — sayfa iskeleti içerik gelmeden de ayakta dursun,
   içerik yerleşince zıplama olmasın. */
#rd-hero.sf-ph,
#ds-hero.sf-ph {
    min-height: clamp(240px, 34vw, 340px);
}

#rd-grid-latest.sf-ph,
#ds-grid-1.sf-ph,
#ds-grid-2.sf-ph {
    min-height: clamp(220px, 26vw, 300px);
}

#rd-popular-list.sf-ph,
#ds-popular-list.sf-ph,
#rr-archive-list.sf-ph {
    min-height: 190px;
}

@keyframes sf-ph-sweep {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

/* İçerik yerleşince aşağıdan yumuşakça belirir */
.sf-revealed {
    animation: sf-reveal 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

@keyframes sf-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-ph { animation: none; }
    .sf-revealed { animation: none; }
}