/**
 * static/css/media_fallback.css
 * 2026 Modern Media Fallback Styles
 */

/* ============================================================================
   GÖRSEL FALLBACK STİLLERİ
   ============================================================================ */

/* Fallback uygulanmış görseller */
.media-fallback-applied {
    background-color: #f1f5f9;
    object-fit: contain !important;
    opacity: 0.9;
}

/* Avatar fallback */
.media-fallback-applied.rounded-circle,
.avatar .media-fallback-applied {
    background-color: #e2e8f0;
}

/* Feed kartlarındaki fallback */
.feed-card .media-fallback-applied {
    min-height: 200px;
}

/* ============================================================================
   VİDEO FALLBACK STİLLERİ
   ============================================================================ */

.video-fallback {
    background: linear-gradient(135deg, #1e293b 0%, #23313b 100%);
    color: #cbd5e1;
    min-height: 200px;
}

.video-fallback-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: inherit;
}

.video-fallback i {
    color: #475569;
}

/* ============================================================================
   DARK MODE DESTEĞİ
   ============================================================================ */

html[data-theme='dark'] .media-fallback-applied {
    background-color: #1e293b;
    filter: brightness(0.9);
}

html[data-theme='dark'] .video-fallback {
    background: linear-gradient(135deg, #23313b 0%, #020617 100%);
}

/* ============================================================================
   ANİMASYON (Fallback yüklenirken)
   ============================================================================ */

@keyframes fallbackPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.media-fallback-applied {
    animation: fallbackPulse 2s ease-in-out 1;
}

/* Reduced motion tercihine saygı */
@media (prefers-reduced-motion: reduce) {
    .media-fallback-applied {
        animation: none;
    }
}