        
@font-face {
    font-family: 'Kahroba';
    src: url('fonts/Kahroba-FD-B.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 🔥 حیاتی برای سرعت لود */
}
        body { background-color: #121212; color: #ffffff; font-family: 'Kahroba', sans-serif; ... }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        .fade-in { animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .slider-container { scroll-snap-type: x mandatory; }
        .slider-item { scroll-snap-align: center; }
        .nav-active { color: #FFC107 !important; }
        .nav-item { transition: all 0.2s; }
        .nav-item:active { transform: scale(0.9); }
        .glass-nav { background: rgba(18, 18, 18, 0.90); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.08); }
        /* --- اصلاح دکمه قلب برای حذف باگ بیضی --- */
        /* --- اصلاح دکمه قلب برای حذف باگ بیضی --- */
        .heart-btn { 
            position: absolute; 
            /* مقادیر top و left حذف شدند تا با کلاس‌های تیل‌ویند فایل JS تداخل نکنند */
            z-index: 20; 
            background: rgba(0,0,0,0.6); 
            border-radius: 50%; 
            
            /* تنظیم ابعاد ثابت برای گرد شدن دقیق (هم‌اندازه با دکمه بعلاوه) */
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            transition: all 0.2s; 
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .heart-btn:active { transform: scale(0.8); }
        
        .heart-active { 
            color: #ef4444 !important; 
            background: rgba(0,0,0,0.6) !important; 
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
        }
        .glass-card { background: rgba(20, 20, 20, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }
        
        .filter-chip { transition: all 0.3s; border: 1px solid #333; }
        .filter-chip-active { background-color: #FFC107; color: black; border-color: #FFC107; font-weight: bold; box-shadow: 0 0 10px rgba(255, 193, 7, 0.3); }
        .filter-chip-inactive { background-color: #1E1E1E; color: #9ca3af; }

        .segmented-control {
            background: rgba(255, 255, 255, 0.05);
            padding: 4px;
            border-radius: 16px;
            display: flex;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .segment-btn {
            flex: 1;
            text-align: center;
            padding: 6px 8px;
            font-size: 11px;
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: #9ca3af;
            position: relative;
            z-index: 1;
        }
        .segment-active {
            background: #FFC107;
            color: #000;
            font-weight: 800;
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        }
        .genre-chip {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #d1d5db;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 10px;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .genre-active {
            background: rgba(255, 193, 7, 0.15);
            border-color: #FFC107;
            color: #FFC107;
            font-weight: bold;
        }
        .movie-card {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            aspect-ratio: 2/3;
        }
        .movie-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 10px;
        }

        /* --- استایل‌های جدید برای پنل فیلتر --- */
        .sort-active {
            background-color: #FFC107 !important;
            color: black !important;
            border-color: #FFC107 !important;
            font-weight: bold;
        }
        .f-genre-chip {
            transition: all 0.2s;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.3);
            color: #9ca3af;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 10px;
        }
        .f-genre-active {
            background: rgba(255, 193, 7, 0.2);
            border-color: #FFC107;
            color: #FFC107;
            font-weight: bold;
        }
        /* سفارشی سازی اسلایدر */
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 18px;
            width: 18px;
            border-radius: 50%;
            background: #FFC107;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(255,193,7,0.5);
            margin-top: -6px; 
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 6px;
            cursor: pointer;
            background: #333;
            border-radius: 4px;
        }
        
        .network-logo-img {
            height: 20px;         /* ارتفاع ثابت برای همه */
            width: auto;          /* عرض خودکار متناسب با ارتفاع */
            max-width: 60px;      /* حداکثر عرض برای جلوگیری از کش آمدن */
            object-fit: contain; /* حفظ تناسب تصویر */
            border-radius: 4px;  /* کمی گرد کردن گوشه‌ها برای زیبایی */
            margin-left: 8px;    /* فاصله از متن کناری */
            display: block;      /* نمایش بلاکی برای چیدمان بهتر */
        }
        
/* --- استایل بج‌های هوشمند و رنگی (اصلاح شده) --- */
        /* --- استایل بج‌های هوشمند (اصلاح نهایی) --- */
.news-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.badge-item {
    padding: 4px 12px; /* کمی بزرگتر برای خوانایی */
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* 🎨 پالت رنگی اختصاصی */

/* 🔴 سریال: قرمز (طبق درخواست شما) */
.badge-سریال { 
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(185, 28, 28, 0.9)); 
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* 🔵 فیلم: آبی رویایی */
.badge-فیلم { 
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.9));
}

/* 🟢 خبر: سبز تیره و رسمی */
.badge-خبر { 
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.95), rgba(4, 120, 87, 0.9));
}

/* 🔥 تریلر: نارنجی آتشین (با انیمیشن) */
.badge-تریلر { 
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.95), rgba(194, 65, 12, 0.9));
    animation: pulse-orange 2s infinite;
}

/* 🟡 باکس آفیس: طلایی */
.badge-باکس_آفیس { 
    background: linear-gradient(135deg, #FFC107, #F59E0B);
    color: black;
    text-shadow: none;
}

/* 🟣 معرفی/نقد: بنفش */
.badge-معرفی, .badge-نقد { 
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(109, 40, 217, 0.9));
}

/* ⚪️ پیش‌فرض */
.badge-default { background: rgba(255, 255, 255, 0.2); }

@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

/* چیدمان مجله‌ای */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.news-item-hero {
    grid-column: span 2;
}
.dir-rtl { direction: rtl; }
        
        video {
    user-select: auto !important;
    -webkit-user-select: auto !important;
    pointer-events: auto !important;
}

.news-card {
    position: relative;
    height: 280px;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
}

.bg-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.news-overlay {
    position: absolute;
    bottom: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    width: 100%;
}

/* --- اصلاحیه برای رفع مشکل کلیک دکمه‌ها --- */

/* 1. بالا آوردن نوار نگهدارنده دکمه‌ها */
#stickyFilterBar {
    position: sticky !important;
    top: 53px !important;
    z-index: 40 !important; /* قبلاً 9999 بود، الان کردیم 40 */
    background-color: #121212;
    pointer-events: auto !important;
}

.segmented-control {
    pointer-events: auto !important;
    touch-action: manipulation;
}

.segment-btn {
    position: relative;
    z-index: 41 !important; /* قبلاً 10002 بود، الان کردیم 41 */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* --- اصلاحیه نهایی برای نمایش صحیح صفحه جزئیات --- */
/* چون دکمه‌های فیلتر z-index: 10002 دارند، این باید بیشتر باشد */
#detailView {
    z-index: 100 !important; /* این لایه الان قطعا بالاتر از 41 قرار میگیره */
}

/* =========================================
   استایل‌های گرافیکی متن خبر (استایل مجله‌ای)
   ========================================= */

/* کانتینر اصلی متن خبر */
.news-body {
    font-size: 15px; 
    line-height: 2; /* فاصله خطوط بیشتر برای خوانایی بهتر در متن‌های طولانی */
    color: #e5e7eb; /* خاکستری روشن برای جلوگیری از خستگی چشم در بک‌گراند مشکی */
    text-align: justify; /* تراز کردن متن برای ظاهر رسمی و مجله‌ای */
    margin-top: 20px;
    padding-bottom: 30px;
}

/* بولد کردن‌های هوش مصنوعی (تگ b) */
.news-body b, 
.news-body strong {
    color: #FFC107; /* استفاده از رنگ طلایی تم خودت برای کلمات کلیدی */
    font-weight: 800;
}

/* شاهکار: تبدیل نقل‌قول به باکس‌های مجله‌ای (Pull Quotes) */
.news-body blockquote {
    position: relative;
    margin: 35px 0;
    /* چون فارسی راست‌چین است، پدینگ سمت راست رو بیشتر دادم */
    padding: 20px 20px 20px 40px; 
    /* گرادیان محو از راست به چپ */
    background: linear-gradient(to left, rgba(255, 193, 7, 0.08) 0%, transparent 100%);
    border-right: 4px solid #FFC107; /* نوار طلایی در سمت راست */
    border-radius: 12px 0 0 12px;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.9;
    color: #ffffff;
}

/* آیکون واترمارک نقل‌قول (بدون نیاز به عکس خارجی) */
.news-body blockquote::before {
    content: '"';
    position: absolute;
    top: -15px;
    right: 10px;
    font-size: 5rem;
    font-family: Georgia, serif; /* فونت سریف برای آیکون نقل‌قول زیباتر است */
    color: rgba(255, 193, 7, 0.15); /* هاله کم‌رنگ طلایی */
    line-height: 1;
}

/* استایل‌دهی به عکس‌های احتمالی داخل متن خبر */
.news-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* =========================================
   استایل‌های فوق‌حرفه‌ای مجله (Premium Magazine)
   ========================================= */

.magazine-lead {
    font-size: 1.05rem;
    line-height: 2.2;
    color: #ffffff;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    padding: 20px;
    border-radius: 16px;
    border-right: 3px solid #FFC107;
    margin-bottom: 25px;
    text-align: justify;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.magazine-heading {
    color: #FFC107;
    font-size: 1.25rem;
    font-weight: 900;
    margin: 40px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 10px rgba(255,193,7,0.2);
}

.magazine-heading::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 20px;
    background: #FFC107;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255,193,7,0.5);
}

.magazine-quote {
    position: relative;
    margin: 35px 0;
    padding: 25px 25px 25px 45px;
    background: linear-gradient(to left, rgba(255, 193, 7, 0.08) 0%, transparent 100%);
    border-right: 4px solid #FFC107;
    border-radius: 20px 0 0 20px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 2.1;
    color: #ffffff;
    box-shadow: inset -20px 0 30px -20px rgba(255, 193, 7, 0.08);
    text-align: justify;
}

.magazine-quote::before {
    content: '"';
    position: absolute;
    top: -15px;
    right: 15px;
    font-size: 6rem;
    font-family: Georgia, serif;
    color: rgba(255, 193, 7, 0.15);
    line-height: 1;
}

.magazine-p {
    font-size: 0.95rem;
    line-height: 2.3;
    color: #d1d5db;
    margin-bottom: 20px;
    text-align: justify;
}

.magazine-meta {
    background: #1a1a1a;
    border-right: 3px solid #4b5563;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 15px 0;
}