:root {
    --primary-red: #ff3b30;
    --primary-black: #0f172a;
    --bg-body: #f3f5f7;
    --glass-bg: rgba(255, 255, 255, 0.95);
    --border-color: #e2e8f0;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-card: 0 4px 12px rgba(0,0,0,0.06);
    --gradient-app: linear-gradient(135deg, #000000 0%, #2d3436 100%);
}

body {
    background-color: var(--bg-body);
    font-family: 'Inter', sans-serif;
    color: var(--primary-black);
    overflow-x: hidden;
    font-size: 13px;
}

/* --- NAVBAR & MENÜ --- */
.premium-navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0.8rem 0;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: var(--shadow-sm);
}
.brand-logo {
    font-family: 'Oswald', sans-serif; font-size: 26px; text-transform: uppercase; color: var(--primary-black);
    text-decoration: none; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px;
}
.modern-search {
    background: #f1f5f9; border: 1px solid transparent; border-radius: 12px; padding: 10px 15px 10px 45px;
    width: 100%; transition: all 0.3s ease; font-size: 14px;
}
.modern-search:focus { background: #fff; border-color: var(--primary-red); box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.1); outline: none; }
.search-container { position: relative; width: 100%; max-width: 400px; }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.btn-icon {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); background: #fff;
    display: flex; align-items: center; justify-content: center; color: #64748b; transition: 0.2s; cursor: pointer; position: relative;
}
.btn-icon:hover { color: var(--primary-red); border-color: var(--primary-red); background: #fff5f5; }

.sub-nav { background: #fff; border-bottom: 1px solid var(--border-color); padding: 0; overflow-x: auto; }
.nav-scroller { display: flex; gap: 5px; padding: 10px 0; }
.nav-item-link {
    padding: 8px 16px; border-radius: 8px; color: #64748b; text-decoration: none; font-weight: 600; font-size: 13px;
    display: flex; align-items: center; gap: 8px; transition: 0.2s;
}
.nav-item-link:hover { background: #f8fafc; color: var(--primary-black); }
.nav-item-link.active { background: #fff1f2; color: var(--primary-red); }

/* --- ORTAK KART YAPISI --- */
.content-card {
    background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); margin-bottom: 20px; overflow: hidden; border: 1px solid rgba(0,0,0,0.02);
}
.section-title { padding: 15px 20px; font-weight: 700; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }

/* --- YENİ: MOBİL UYGULAMA KARTI (Sidebar) --- */
.app-promo-card {
    background: var(--gradient-app);
    color: #fff;
    text-align: center;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
}
.app-promo-image {
    width: 80%;
    margin: 0 auto 15px;
    transform: rotate(-10deg);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    transition: 0.3s;
}
.app-promo-card:hover .app-promo-image { transform: rotate(0deg) scale(1.05); }
.store-btn {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff;
    border-radius: 8px; padding: 8px; width: 100%; margin-bottom: 8px; font-size: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; text-decoration: none;
}
.store-btn:hover { background: #fff; color: #000; }

/* --- YENİ: HAFTANIN OYUNCULARI (Sidebar) --- */
.player-row {
    display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #f1f5f9; transition: 0.2s;
}
.player-row:hover { background: #f8fafc; }
.player-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-right: 12px; }
.rating-box {
    background: #00b894; color: #fff; font-weight: 700; padding: 4px 8px; border-radius: 6px; font-size: 12px;
}

/* --- STORY MODÜLÜ --- */
.story-container { display: flex; gap: 18px; overflow-x: auto; padding: 10px 5px; margin-bottom: 15px; scrollbar-width: none; }
.story-container::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: 72px; transition: transform 0.2s; }
.story-item:hover { transform: translateY(-3px); }
.story-ring { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #ff9f43, #ff3b30, #e056fd); margin-bottom: 6px; position: relative; }
.story-img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; }
.story-title { font-size: 11px; font-weight: 600; color: #2d3436; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 75px; }

/* --- VISUALIZER --- */
.match-tracker-container { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 20px; }
.tracker-header { background: linear-gradient(145deg, #1e293b, #0f172a); color: #fff; padding: 25px; display: flex; justify-content: space-between; align-items: center; }
.tracker-score { font-size: 36px; font-weight: 800; font-family: 'Oswald', sans-serif; letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.live-badge { background: rgba(255, 59, 48, 0.2); color: var(--primary-red); border: 1px solid rgba(255, 59, 48, 0.5); padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; animation: blink 2s infinite; }
.pitch-visualizer { height: 180px; background: #263238; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #37474f; }
/* Pitch Details */
.pitch-lines { position: absolute; top: 15px; bottom: 15px; left: 15px; right: 15px; border: 2px solid rgba(255,255,255,0.08); border-radius: 8px; }
.pitch-center-circle { width: 80px; height: 80px; border: 2px solid rgba(255,255,255,0.08); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pitch-mid-line { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255,255,255,0.08); }
.attack-arrow { position: absolute; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 12px; background: var(--primary-red); padding: 8px 20px; border-radius: 30px; box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4); animation: slideAttack 3s infinite ease-in-out; z-index: 10; }

/* --- MINI TABLE --- */
.mini-table th { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
.mini-table td { font-weight: 600; vertical-align: middle; padding: 10px 5px; }
.rank-cell { width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 50%; font-size: 11px; color: #fff; display: inline-block; }
.rank-cl { background-color: #00b894; } .rank-el { background-color: #0984e3; }

@keyframes blink { 50% { opacity: 0.5; } }
@keyframes slideAttack { 0% { transform: translateX(-40px); opacity: 0; } 20% { transform: translateX(0); opacity: 1; } 80% { transform: translateX(20px); opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
    /* --- HABER BANDI (TICKER) --- */
.news-ticker-wrapper {
    background: #000;
    color: #fff;
    overflow: hidden;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #333;
}
.ticker-title {
    background: var(--primary-red);
    height: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 2;
    position: absolute;
    left: 0;
}
.ticker-content {
    white-space: nowrap;
    animation: ticker-slide 20s linear infinite;
    padding-left: 120px; /* Title genişliği kadar boşluk */
    font-size: 13px;
    font-weight: 500;
}
@keyframes ticker-slide {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* --- CANLI ETKİLEŞİM --- */
.favorite-btn.active {
    color: var(--primary-red) !important;
    animation: heart-beat 0.3s ease-in-out;
}
@keyframes heart-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
        /* --- MEVCUT STİLLER (KORUNDU) --- */
    .calendar-wrapper { padding: 15px 0; border-bottom: 1px solid #f1f5f9; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .calendar-wrapper::-webkit-scrollbar { display: none; }
    .calendar-day { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 70px; border-radius: 14px; border: 1px solid #e2e8f0; margin-right: 10px; cursor: pointer; transition: all 0.2s ease; background: #fff; }
    .calendar-day:hover { transform: translateY(-2px); border-color: var(--primary-red); }
    .calendar-day.active { background: var(--primary-red); color: #fff; border-color: var(--primary-red); box-shadow: 0 4px 10px rgba(255, 59, 48, 0.3); }
    .day-name { font-size: 11px; font-weight: 600; text-transform: uppercase; opacity: 0.8; }
    .day-num { font-size: 18px; font-weight: 700; font-family: 'Oswald', sans-serif; }
    
    .fixture-item { transition: 0.2s; position: relative; }
    .fixture-item:hover { background-color: #f8fafc; }
    .match-time { font-family: 'Oswald', sans-serif; font-size: 16px; color: var(--primary-black); width: 60px; text-align: center; }
    .team-name { font-weight: 600; font-size: 13px; width: 100px; }
    .vs-badge { font-size: 11px; color: #94a3b8; font-weight: 700; background: #f1f5f9; padding: 2px 8px; border-radius: 6px; }
    .league-tag { font-size: 10px; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; display: block; }

    /* Nostalji Kartı */
    .nostalgia-img { filter: sepia(0.8) grayscale(0.2); transition: 0.3s; }
    .nostalgia-card:hover .nostalgia-img { filter: none; }

    /* Dark Mode Toggle Butonu */
    .theme-toggle-btn {
        position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
        background: var(--primary-black); color: #fff; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9999;
        transition: 0.3s; font-size: 20px;
    }
    .theme-toggle-btn:hover { transform: rotate(15deg) scale(1.1); }

    /* --- YENİ EKLENEN STİLLER (TRANSFER & PODCAST & TV) --- */
    
    /* Podcast Kartı */
    .podcast-card {
        background: linear-gradient(to right, #ffffff, #f8fafc);
        border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px;
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 20px; transition: 0.3s;
    }
    .podcast-card:hover { border-color: var(--primary-red); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .play-btn {
        width: 45px; height: 45px; background: var(--primary-red); color: white;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 18px; cursor: pointer; box-shadow: 0 4px 10px rgba(255, 59, 48, 0.3); transition: 0.2s;
    }
    .play-btn:hover { transform: scale(1.1); }
    
    /* Transfer Barometresi */
    .transfer-bar { height: 6px; border-radius: 3px; background: #eee; overflow: hidden; margin-top: 5px; }
    .transfer-fill { height: 100%; border-radius: 3px; transition: width 1s ease-in-out; }
    .reliability-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: #64748b; font-weight: 600; display: inline-block; margin-top: 4px; }
    
    /* TV Kanal Logoları (CSS ile Logo Taklidi) */
    .channel-logo { 
        font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 4px; 
        display: inline-block; letter-spacing: 0.5px; margin-top: 4px; color: #fff;
    }
    .ch-bein { background: #563d7c; /* Mor */ }
    .ch-exxen { background: #000; color: #fbca1f; border: 1px solid #fbca1f; /* Siyah-Sarı */ }
    .ch-tv85 { background: #fff; color: #d63031; border: 1px solid #d63031; /* Beyaz-Kırmızı */ }

    /* Dark Mode Renkleri */
    body.dark-mode { background-color: #121212 !important; color: #e0e0e0; }
    body.dark-mode .content-card, body.dark-mode .sub-nav, body.dark-mode .premium-navbar, body.dark-mode .news-ticker-wrapper { background-color: #1e1e1e !important; border-color: #333 !important; color: #fff; }
    body.dark-mode .section-title { border-color: #333; color: #fff; }
    body.dark-mode .fixture-item:hover { background-color: #252525; }
    body.dark-mode .calendar-day { background-color: #2d2d2d; border-color: #444; color: #fff; }
    body.dark-mode .calendar-day.active { background-color: var(--primary-red); border-color: var(--primary-red); }
    body.dark-mode .text-muted { color: #aaa !important; }
    body.dark-mode .list-group-item { background-color: #1e1e1e; color: #fff; }
    body.dark-mode .list-group-item:hover { background-color: #252525; }
    body.dark-mode .bg-light { background-color: #2d2d2d !important; border-color: #444 !important; color: #fff; }
    body.dark-mode .brand-logo { color: #fff !important; }
    body.dark-mode .podcast-card { background: linear-gradient(to right, #2d2d2d, #1e1e1e); border-color: #444; }
    body.dark-mode .reliability-badge { background: #333; color: #ccc; }