/* /root/anifehras/frontend/css/responsive.css */
@media (max-width: 1200px) {
    .anime-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 992px) {
    .anime-grid { grid-template-columns: repeat(3, 1fr); }
    .main-content { margin-right: 0; padding: 0 16px 90px; }
    .sidebar { display: none; }
    .bottom-nav { display: flex; }
    .app-bar { padding: 14px 0; }
    :root { --appbar-h: 64px; }
    #page-detail { margin-right: 0; }
    .detail-body { grid-template-columns: 1fr; padding: 0 20px 80px; }
}

@media (max-width: 768px) {
    :root { --blur-amount: var(--blur-amount-mobile); }
    .anime-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .hero { padding: 30px 10px 30px; }
    .hero::before { width: 220px; height: 220px; }
    .hero::after { width: 170px; height: 170px; }
    .app-card { min-width: 160px; padding: 12px 14px; gap: 10px; }
    .app-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
    .app-name { font-size: 12px; }
    .chip { padding: 8px 16px; font-size: 12px; }
    .app-bar-logo-text { font-size: 19px; }
    .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
    .anime-title { font-size: 13px; }
    .anime-details { padding: 10px 12px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .modal-overlay { align-items: flex-end; }
    .modal, #filter-panel { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; max-height: 82vh; transform: translateY(100%); margin: 0; }
    .app-card-type, .result-meta, .anime-meta, .app-meta, .modal-tag, .badge-meta { font-size: 13px !important; }
    .detail-hero { padding: 0; min-height: auto; display: block; border-radius: 0; margin-bottom: 20px; overflow: visible; }
    .detail-backdrop { height: 180px !important; bottom: auto; inset: 0; filter: blur(10px) brightness(0.65); }
    .detail-overlay-gradient { height: 180px !important; inset: 0; background: linear-gradient(to top, var(--bg-deep) 0%, transparent 100%); }
    .detail-content { flex-direction: column; align-items: center; gap: 12px; margin-top: 80px !important; padding: 0 15px; position: relative; z-index: 2; }
    .detail-poster { width: 155px !important; max-width: 155px !important; aspect-ratio: 3/4; z-index: 5; margin: 0 auto; box-shadow: 0 15px 30px rgba(0,0,0,0.6); }
    .detail-title { font-size: 22px; text-align: center; margin-top: 5px; line-height: 1.3; }
    .detail-title-alt { text-align: center; }
    .detail-info { align-items: center; }
    .detail-meta { justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; text-align: center; max-width: 100%; gap: 6px; padding-bottom: 5px; scrollbar-width: none; }
    .detail-meta::-webkit-scrollbar { display: none; }
    #detail-tags { justify-content: flex-start !important; }

    /* =========================================
       JUSTWATCH DESENİ (Mobil)
       Sığdırmaya çalışma, kaydırt!
       ========================================= */
       
    /* 1. Kategori Barı (أنمي/مانجا...) */
    .category-bar { 
        max-width: none !important; 
        justify-content: flex-start !important; 
        padding: 4px 20px; 
    }

    /* 2 & 4. Rozetler, Çipler ve Buton Grupları (Asla alt satıra düşmesin) */
    .app-badges, 
    .category-chips, 
    .modal-anime-tags, 
    .app-content-types, 
    .ad-links, 
    .app-modal-badges { 
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; 
        white-space: nowrap !important; 
        scrollbar-width: none; 
        -webkit-overflow-scrolling: touch; 
        padding-bottom: 4px; 
        /* RTL (Arapça) için flex-start elemanları sağdan başlatır */
        justify-content: flex-start !important;
    }
    
    /* Göz yormaması için kaydırma çubuklarını gizle */
    .app-badges::-webkit-scrollbar, 
    .category-chips::-webkit-scrollbar, 
    .modal-anime-tags::-webkit-scrollbar, 
    .app-content-types::-webkit-scrollbar, 
    .ad-links::-webkit-scrollbar, 
    .app-modal-badges::-webkit-scrollbar { 
        display: none; 
    }
    
    /* İç öğelerin daralıp ezilmesini engelle (Kaydırmanın çalışması için kritik) */
    .app-badges > *, 
    .category-chips > *, 
    .modal-anime-tags > *, 
    .app-content-types > *, 
    .ad-links > *, 
    .app-modal-badges > * {
        flex-shrink: 0;
    }

    /* 3. Karakter/Kadro Kartları (JustWatch tarzı ferah boşluk ve iki satır isim) */
    .person-card { 
        min-width: 95px !important; 
        max-width: 105px !important; 
    }
    .person-name { 
        white-space: normal !important; 
        word-wrap: break-word; 
    }
    .people-scroll { 
        gap: 14px !important; 
        padding-bottom: 12px; 
    }

    .detail-body { padding: 0 15px 100px; }
    .main-content { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
    #toast-root { bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom, 0px)); }
    .filter-actions { position: sticky; bottom: 0; background: var(--bg-deep); padding-top: 12px; margin: 24px -24px 0; padding-left: 24px; padding-right: 24px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--glass-border); }
}

@media (max-width: 420px) {
    .stat-value { font-size: 21px; }
    .stat-label { font-size: 11px; }
    .btn-pill { padding: 10px 24px; font-size: 14px; }
}

@media (max-width: 380px) {
    .anime-grid { gap: 10px; }
    .main-content { padding: 0 10px 85px; }
    .chip { padding: 6px 12px; font-size: 11px; }
}

@media (hover: hover) {
    .chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 18px var(--accent-glow); }
}