/* lazy-box.css — [data-lazy-box] kutuları için iskelet / meşgul durumu / hata şeridi.
   Palet dışına çıkmaz (buz mavisi + yüzey), gradyan YOK. Animasyon: düz açık/koyu değişen opaklık.
   Aynı dosya çekirdekte de bulunur (public/css/lazy-box.css); renkler token yoksa yedek değerlere düşer. */

/* Meşgul (yenileme sürerken): içerik soluk, tıklanamaz */
[data-lazy-box].is-busy:not(.is-loading) { opacity: .55; transition: opacity .12s linear; }
[data-lazy-box].is-busy:not(.is-loading) > * { pointer-events: none; }

/* İskelet (ilk yükleme): dinamik değer yer tutucuları nabız animasyonu alır; ikonlar ve metinler asla gizlenmez */
.lb-skeleton { pointer-events: none; }
.lb-skeleton .skel-bar, .lb-skeleton .lz-bar {
    animation: lb-pulse 1.3s ease-in-out infinite;
}

@keyframes lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .lb-skeleton .skel-bar, .lb-skeleton .lz-bar { animation: none; opacity: .7; }
    [data-lazy-box].is-busy:not(.is-loading) { transition: none; }
}

/* Şablonla bağlanan hidden öğeler, bileşen CSS'indeki display değerine rağmen gizli kalsın */
[data-lazy-box] [hidden] { display: none !important; }

/* Hata şeridi: içerik silinmez, üstte "Tekrar dene" ile gösterilir */
.lb-error {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    padding: .6rem .85rem; margin-bottom: .75rem;
    background: var(--c-white, var(--bg-card, #fff)); color: var(--c-danger, var(--danger, #DC2626));
    border: 1px solid var(--c-danger, var(--danger, #DC2626)); font-size: .9rem;
}