:root {
            --theme-color: #ebdf9d;   
            --text-color: #ffffff;    
            --bg-color: #07090d;      
            --live-color: #e50914;    

            --theme-05: color-mix(in srgb, var(--theme-color) 5%, transparent);
            --theme-10: color-mix(in srgb, var(--theme-color) 10%, transparent);
            --theme-15: color-mix(in srgb, var(--theme-color) 15%, transparent);
            --theme-20: color-mix(in srgb, var(--theme-color) 20%, transparent);
            --theme-30: color-mix(in srgb, var(--theme-color) 30%, transparent);
            
            --text-05: color-mix(in srgb, var(--text-color) 5%, transparent);
            --text-10: color-mix(in srgb, var(--text-color) 10%, transparent);
            --text-20: color-mix(in srgb, var(--text-color) 20%, transparent);
            --text-40: color-mix(in srgb, var(--text-color) 40%, transparent);
            --text-60: color-mix(in srgb, var(--text-color) 60%, transparent);
            --text-80: color-mix(in srgb, var(--text-color) 80%, transparent);

            --live-15: color-mix(in srgb, var(--live-color) 15%, transparent);
            --live-30: color-mix(in srgb, var(--live-color) 30%, transparent);
            --live-70: color-mix(in srgb, var(--live-color) 70%, transparent);

            --glass-bg: rgba(0, 0, 0, 0.25);
            --inner-glow: inset 0 1px 1px var(--text-10);
            --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.3);
            --transition-fluid: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        } /* 1400px Max-Width Düzeni */
     body { 
         margin: 0; 
         display: flex; 
         flex-direction: column; 
         align-items: center; 
     }
     .header, .footer, .main-container { 
         max-width: 1400px; 
         width: 100%; 
         margin-left: auto; 
         margin-right: auto; 
         box-sizing: border-box; 
     }
     
     /* =========================================
        MOBİL TV KANALLARI ÖZEL GÖRÜNÜMÜ 
        (Önceliği artırıldı, kesin çalışması için # ID eklendi)
        ========================================= */
     @media screen and (max-width: 768px) {
         #channelGrid.channel-list {
             display: grid !important;
             grid-template-columns: repeat(3, 1fr) !important; /* Yan yana 3 kanal (6 kanal için 2 satır) */
             gap: 10px !important;
             padding: 5px !important;
         }
         #channelGrid .channel-item {
             width: 100% !important;
             height: 65px !important;
             padding: 5px !important;
             display: flex !important;
             align-items: center !important;
             justify-content: center !important;
             border-radius: 8px !important;
             box-sizing: border-box !important;
             margin: 0 !important;
         }
         #channelGrid .channel-item img {
             max-width: 100% !important;
             max-height: 100% !important;
             object-fit: contain !important;
             display: block !important;
         }
     }
     @media screen and (max-width: 480px) {
         #channelGrid .channel-item {
             height: 55px !important;
         }
     }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; scrollbar-width: thin; scrollbar-color: var(--theme-color) rgba(0, 0, 0, 0.2); }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: var(--theme-color); border-radius: 10px; border: 1px solid rgba(0,0,0,0.3); }
        ::-webkit-scrollbar-thumb:hover { background: #ffce54; }

       
        body { min-height: 100vh; display: flex; flex-direction: column; color: var(--text-color); line-height: 1.6; }
        .material-symbols-outlined { vertical-align: middle; font-size: 20px; }

        .header { max-width: 1400px; width: 100%; margin: 0 auto; background: var(--glass-bg); backdrop-filter: blur(2px); border: none; border-radius: 0 0 20px 20px; padding: 1rem 20px; box-shadow: var(--shadow-soft), var(--inner-glow); position: relative; z-index: 1000; }
        .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .current-address-link { display: inline-flex; align-items: center; gap: 6px; background: transparent; text-decoration: none; transition: var(--transition-fluid); }
        .current-address-link .material-symbols-outlined { font-size: 18px; color: var(--theme-color); transition: var(--transition-fluid); }
        .address-text { font-size: 0.85rem; color: var(--text-60); transition: var(--transition-fluid); }
        .address-text strong { color: var(--text-color); font-weight: 500; letter-spacing: 0.5px; margin-left: 2px; transition: var(--transition-fluid); }
        .current-address-link:hover .address-text strong, .current-address-link:hover .material-symbols-outlined { color: var(--theme-color); text-shadow: 0 0 10px var(--theme-30); }
        
        .header-socials { display: flex; gap: 8px; flex-wrap: wrap; }
        .header-socials a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--text-05); border-radius: 50%; color: var(--text-color); text-decoration: none; transition: var(--transition-fluid); }
        .header-socials a:hover { background: var(--theme-color); color: var(--bg-color); transform: scale(1.1); box-shadow: 0 4px 15px var(--theme-20); }
        .header-socials i { font-size: 14px; } 

        .nav-container { display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; text-decoration: none; transition: var(--transition-fluid); }
        .logo:hover { transform: scale(1.02); }
        .logo img { height: 40px; width: auto; object-fit: contain; }

        .nav-toggle { display: none; background: none; border: none; color: var(--text-color); cursor: pointer; padding: 8px; }
        .nav-menu { display: flex; gap: 4px; list-style: none; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 40px; box-shadow: var(--inner-glow); }
        .nav-link { color: var(--text-80); text-decoration: none; display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.85rem; transition: var(--transition-fluid); padding: 8px 16px; border-radius: 30px; }
        .nav-link:hover, .nav-link.active { color: var(--bg-color); background: var(--theme-color); box-shadow: 0 4px 20px var(--theme-20); }
        .nav-link:hover .material-symbols-outlined, .nav-link.active .material-symbols-outlined { color: var(--bg-color); }

        /* =========================================
           MENÜ ANİMASYONLARI
           ========================================= */
        .pulse-anim { animation: pulseAnim 2s infinite; }
        @keyframes pulseAnim { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

        .shake-anim { animation: shakeAnim 2.5s infinite; }
        @keyframes shakeAnim { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); } 20%, 40%, 60%, 80% { transform: translateX(2px); } }

        .glow-anim { animation: glowAnim 1.5s infinite alternate; }
        @keyframes glowAnim { from { box-shadow: 0 0 5px var(--theme-color); } to { box-shadow: 0 0 20px var(--theme-color), inset 0 0 10px var(--theme-color); background: rgba(229, 184, 80, 0.1); color: var(--theme-color); } }

        .bounce-anim { animation: bounceAnim 2s infinite; }
        @keyframes bounceAnim { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } }

        .flash-anim { animation: flashAnim 3s infinite; }
        @keyframes flashAnim { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.5; } }

        .neon-anim { animation: neonAnim 1.5s infinite alternate; border: 1px solid transparent; }
        @keyframes neonAnim { 
            from { box-shadow: 0 0 2px var(--theme-color), 0 0 4px var(--theme-color), inset 0 0 2px var(--theme-color); border-color: rgba(229, 184, 80, 0.3); color: var(--theme-color); } 
            to { box-shadow: 0 0 5px var(--theme-color), 0 0 10px var(--theme-color), inset 0 0 5px var(--theme-color); border-color: var(--theme-color); color: #fff; } 
        }

        .rainbow-anim { 
            background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); 
            background-size: 1800% 1800%; 
            animation: rainbowAnim 8s ease infinite; 
            color: #fff !important; 
            text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        }
        .rainbow-anim .material-symbols-outlined { color: #fff !important; }
        @keyframes rainbowAnim { 0%{background-position:0% 82%} 50%{background-position:100% 19%} 100%{background-position:0% 82%} }
        /* ========================================= */

        .main-container { width: 100%; max-width: 1400px; margin: 1.5rem auto; padding: 0 15px; flex: 1; }
        .layout-container { display: flex; flex-direction: column; gap: 1.5rem; }

        @media (min-width: 1024px) {
            .layout-container { display: grid; grid-template-columns: 2.2fr 1fr; gap: 1.5rem; }
            .player-section { grid-column: 1 / 2; }
            .matchlist-section { grid-column: 1 / 2; }
            .popular-section { grid-column: 2 / 3; }
            .channels-section { grid-column: 2 / 3; }
        }

        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 10px;}
        .section-title { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); letter-spacing: 0.5px; margin: 0; }
        .section-title .material-symbols-outlined { color: var(--theme-color); font-size: 22px; }

        .pagination-controls { display: flex; gap: 6px; align-items: center; }
        .page-btn { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--text-10); color: var(--text-color); padding: 4px 12px; border-radius: 20px; cursor: pointer; font-size: 0.75rem; font-weight: 600; transition: var(--transition-fluid); display: flex; align-items: center; gap: 4px; }
        .page-btn:hover:not(:disabled) { background: var(--theme-color); color: var(--bg-color); border-color: var(--theme-color); }
        .page-btn:disabled { opacity: 0.3; cursor: not-allowed; background: rgba(0,0,0,0.2); }
        .page-btn .material-symbols-outlined { font-size: 14px; }

        .live-stream { background: var(--glass-bg); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft), var(--inner-glow); backdrop-filter: blur(2px); }
        .stream-header { padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); }
        .stream-title { display: flex; align-items: center; gap: 10px; }
        .stream-title h2 { font-size: 1rem; font-weight: 500; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
        
        .live-badge { background: var(--live-color); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 0 10px var(--live-30); }
        .live-badge.upcoming { background: var(--theme-color); color: var(--bg-color); box-shadow: 0 0 10px var(--theme-30); }
        .live-badge.finished { background: var(--text-10); color: var(--text-60); box-shadow: none; }
        .live-badge .material-symbols-outlined { font-size: 12px; }

        .stream-content { background: #000; aspect-ratio: 16/9; width: 100%; position: relative; }
        .stream-content iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: none; } 
        .stream-placeholder { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(20,20,20,0.8) 0%, rgba(0,0,0,1) 100%); }
        .stream-placeholder .material-symbols-outlined { font-size: 3rem; color: var(--text-10); margin-bottom: 0.5rem; }
        .stream-placeholder h3 { color: var(--text-40); font-weight: 400; font-size: 1rem; }
        
        .skeleton-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #050505; display: none; align-items: center; justify-content: center; z-index: 20; }
        .skeleton-loader::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, var(--text-05), transparent); animation: loading 1.5s infinite; }
        @keyframes loading { 100% { left: 100%; } }

        .match-time-badge { width: 75px; flex-shrink: 0; font-size: 0.65rem; font-weight: 700; padding: 4px 8px; border-radius: 20px; text-align: center; display: inline-block; letter-spacing: 0.5px; }
        .match-time-badge.live { background: var(--live-15); color: var(--live-color); animation: pulseText 2s infinite; border: 1px solid var(--live-30); }
        .match-time-badge.upcoming { background: var(--text-05); color: var(--text-80); border: 1px solid var(--text-10); }
        .match-time-badge.soon { background: var(--theme-15); color: var(--theme-color); border: 1px solid var(--theme-30); animation: pulseText 2s infinite; }
        .match-time-badge.finished { background: var(--text-05); color: var(--text-40); border: 1px solid var(--text-05); }
        @keyframes pulseText { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

        .teams-wrapper { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; flex: 1; gap: 10px; width: 100%; }
        .team-container-left { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
        .team-container-right { display: flex; justify-content: flex-start; align-items: center; gap: 8px; min-width: 0; }
        .team-container-left span, .team-container-right span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; font-weight: 500; color: var(--text-color); }
        .team-logo { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; background: #ffffff; border-radius: 50%; padding: 2px; }
        .vs-text { font-size: 0.75rem; font-weight: 700; color: var(--text-40); text-align: center; }

        /* TREND KARTLARI */
        .popular-grid { display: flex; flex-direction: column; gap: 0.6rem; }
        .popular-card { background: var(--glass-bg); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: var(--transition-fluid); box-shadow: var(--shadow-soft), var(--inner-glow); backdrop-filter: blur(2px); position: relative; }
        .popular-card:hover, .selected-match { transform: translateX(4px); background: rgba(0, 0, 0, 0.5); box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 1px 1px var(--text-10), 0 0 10px var(--theme-20); border-left: 2px solid var(--theme-color); }
        
        .popular-league { width: 85px; flex-shrink: 0; font-size: 0.65rem; color: var(--theme-color); text-transform: uppercase; font-weight: 600; background: rgba(0, 0, 0, 0.4); padding: 2px 6px; border-radius: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
        .pin-badge { position: absolute; top: -6px; right: -6px; background: var(--theme-color); color: var(--bg-color); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 5; }
        .pin-badge .material-symbols-outlined { font-size: 13px; transform: rotate(45deg); }

        /* TABS LİSTESİ KARTLARI */
        .match-item { background: var(--glass-bg); padding: 10px 16px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: var(--transition-fluid); box-shadow: var(--shadow-soft), var(--inner-glow); backdrop-filter: blur(2px); }
        .match-item:hover { transform: translateX(4px); background: rgba(0, 0, 0, 0.5); box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 1px 1px var(--text-10), 0 0 10px var(--theme-20); border-left: 2px solid var(--theme-color); }
        .league-name { width: 85px; flex-shrink: 0; font-size: 0.7rem; color: var(--theme-color); text-align: right; font-weight: 500; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

        .sports-filter { background: transparent; border-radius: 16px; }
        .search-container { position: relative; margin-bottom: 1rem; }
        .search-input { width: 100%; padding: 0.8rem 2.5rem 0.8rem 1.2rem; border-radius: 30px; border: none; background: var(--glass-bg); color: var(--text-color); font-size: 0.9rem; box-shadow: var(--shadow-soft), var(--inner-glow); transition: var(--transition-fluid); backdrop-filter: blur(2px); }
        .search-input::placeholder { color: var(--text-40); }
        .search-input:focus { outline: none; background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 1px var(--text-10), 0 0 0 1px var(--theme-color); }
        .search-icon { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--text-60); font-size: 18px;}

        .sports-layout { display: flex; gap: 1rem; align-items: flex-start; }
        .vertical-tabs { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; background: var(--glass-bg); padding: 8px; border-radius: 30px; box-shadow: var(--shadow-soft), var(--inner-glow); backdrop-filter: blur(2px); max-height: 500px; overflow-y: auto; }
        .category-btn { background: transparent; border: none; width: 36px; height: 36px; border-radius: 50%; color: var(--text-60); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fluid); flex-shrink: 0;}
        .category-btn i { font-size: 18px; transition: var(--transition-fluid); }
        .category-btn .material-symbols-outlined { font-size: 20px; transition: var(--transition-fluid); }
        .category-btn:hover { color: var(--text-color); background: var(--text-10); }
        .category-btn.active { color: var(--bg-color); background: var(--theme-color); box-shadow: 0 2px 10px var(--theme-20); }
        
        .match-list-container { flex: 1; min-width: 0; }
        .match-list { display: flex; flex-direction: column; gap: 6px; max-height: 500px; overflow-y: auto; padding-right: 0.5rem; }

        .channel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
        .channel-item { background: var(--glass-bg); border-radius: 12px; padding: 0.8rem; display: flex; justify-content: center; align-items: center; box-shadow: var(--shadow-soft), var(--inner-glow); cursor: pointer; transition: var(--transition-fluid); backdrop-filter: blur(2px); aspect-ratio: 16/10; }
        .channel-item img { width: 100%; height: 100%; object-fit: contain; transition: var(--transition-fluid); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
        .channel-item:hover { transform: translateY(-3px); background: rgba(0, 0, 0, 0.4); box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 1px 1px var(--text-10), 0 0 10px var(--theme-20); }
        .channel-item:hover img { transform: scale(1.05); }

        .ads-img { border-radius: 16px; width: 100%; display: block; margin-bottom: 1.5rem; box-shadow: var(--shadow-soft); transition: var(--transition-fluid); opacity: 0.9; }
        .ads-img:hover { opacity: 1; transform: scale(1.01); }

        .footer { max-width: 1400px; width: 100%; margin: 3rem auto 0; background: var(--glass-bg); border-radius: 24px 24px 0 0; padding: 2rem 20px 1.5rem; backdrop-filter: blur(2px); box-shadow: 0 -5px 30px rgba(0,0,0,0.2), inset 0 1px 1px var(--text-05); }
        .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
        .footer-logo img { height: 45px; width: auto; object-fit: contain; opacity: 0.9; transition: var(--transition-fluid); }
        .footer-logo:hover img { opacity: 1; filter: drop-shadow(0 0 10px var(--theme-20)); }
        
        .footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
        .footer-links a { color: var(--text-60); text-decoration: none; font-weight: 400; font-size: 0.85rem; transition: var(--transition-fluid); }
        .footer-links a:hover { color: var(--text-color); }
        
        .footer-seo { max-width: 800px; margin: 1.5rem auto 0; font-size: 0.75rem; color: var(--text-40); text-align: center; line-height: 1.6; }
        .copyright { text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: var(--text-40); }
        
        /* ============================================================
           VIP BETCONNECT BADGE STİLLERİ
           ============================================================ */
        .provider-wrapper {
            display: flex; justify-content: center; margin-top: 25px;
        }
        .provider-badge {
            display: inline-flex; align-items: center; gap: 12px;
            background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(10px);
            padding: 8px 20px 8px 12px; border-radius: 40px;
            border: 1px solid rgba(229, 184, 80, 0.2); 
            box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.05);
            text-decoration: none; position: relative; overflow: visible;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .provider-badge:hover {
            transform: translateY(-5px) scale(1.02);
            border-color: var(--theme-color);
            box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 20px rgba(229, 184, 80, 0.2), inset 0 0 20px rgba(229, 184, 80, 0.1);
        }
        .provider-badge:hover .provider-icon {
            background: var(--theme-color); color: var(--bg-color);
            box-shadow: 0 0 15px var(--theme-color);
            transform: rotate(360deg);
        }
        .provider-badge:hover .provider-logo-text span {
            text-shadow: 0 0 15px var(--theme-color);
        }
        .provider-icon {
            display: flex; align-items: center; justify-content: center;
            background: rgba(229, 184, 80, 0.1); color: var(--theme-color);
            width: 36px; height: 36px; border-radius: 50%;
            transition: all 0.5s ease; flex-shrink: 0; position: relative;
        }
        .provider-icon::after {
            content: ''; position: absolute; width: 100%; height: 100%;
            border-radius: 50%; border: 1px solid var(--theme-color);
            animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
        }
        @keyframes ping {
            75%, 100% { transform: scale(1.6); opacity: 0; }
        }
        .provider-icon i { font-size: 15px; z-index: 2; }
        .provider-text {
            display: flex; flex-direction: column; text-align: left; line-height: 1.1;
        }
        .provider-powered {
            font-size: 0.6rem; color: var(--text-60); text-transform: uppercase;
            letter-spacing: 2px; font-weight: 500; margin-bottom: 2px;
        }
        .provider-logo-text {
            font-size: 1.1rem; font-weight: 800; color: #ffffff;
            letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
            font-family: 'Poppins', sans-serif; text-transform: none;
        }
        .provider-logo-text span {
            color: var(--theme-color); transition: all 0.3s ease;
        }

        .popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 9999; animation: fadeIn 0.3s ease; }
        .popup-overlay.hidden { display: none !important; }
        .popup-content { position: relative; max-width: 90%; width: 400px; animation: slideUp 0.4s ease; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
        .popup-content img { width: 100%; height: auto; display: block; border-radius: 16px; transition: transform 0.3s ease; }
        .popup-content a:hover img { transform: scale(1.02); }
        .popup-close { position: absolute; top: -15px; right: -15px; background: rgba(20,20,20,0.9); color: var(--text-60); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-fluid); border: 2px solid var(--text-color); z-index: 10;}
        .popup-close:hover { color: #fff; background: var(--live-color); transform: scale(1.1) rotate(90deg); border-color: var(--live-color);}

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        @media (max-width: 992px) {
            .sports-layout { flex-direction: column; }
            .vertical-tabs { width: 100%; flex-direction: row; overflow-x: auto; padding: 6px; border-radius: 16px; }
            .category-btn { flex-shrink: 0; }
        }
        @media (max-width: 768px) {
            .header { border-radius: 0; padding: 0.8rem 15px; }
            .header-top { flex-direction: column; align-items: center; gap: 10px; }
            .nav-container { flex-direction: column; align-items: stretch; }
            .nav-toggle { display: block; position: absolute; top: 10px; right: 15px; }
            .nav-menu { display: none; flex-direction: column; background: transparent; box-shadow: none; margin-top: 10px; padding:0;}
            .nav-menu.active { display: flex; }
            .nav-link { justify-content: center; background: var(--text-05); }
            
            .match-item, .popular-card { padding: 8px 10px; gap: 6px; }
            .match-time-badge { width: 55px; font-size: 0.55rem; padding: 3px 4px; }
            .league-name, .popular-league { width: 60px; font-size: 0.6rem; padding: 2px 4px; }
            .teams-wrapper { gap: 4px; grid-template-columns: 1fr 10px 1fr; }
            .team-container-left span, .team-container-right span { font-size: 0.75rem; }
            .team-logo { width: 18px; height: 18px; }
            .vs-text { font-size: 0.65rem; }
        }

.logo{
   justify-content: center;
}