/* --- GENEL AYARLAR --- */
:root {
    
    --primary-blue: #0A2647;    /* Koyu Lacivert */
    --secondary-blue: #144272;  /* Orta Mavi */
    --accent-gold: #FFD700;     /* Altın Sarısı */
    --accent-red: #DC3545;      /* Kırmızı */
    --text-dark: #222222;       /* Koyu Gri/Siyah Metin */
    --text-light: #FFFFFF;      /* Beyaz Metin */
    --bg-light: #F4F7F6;        /* Açık Gri Arkaplan */
    
    --font-montserrat: 'Montserrat', sans-serif;
    --font-roboto: 'Roboto', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-roboto); background-color: var(--bg-light); color: var(--text-dark); }

/* ÖNEMLİ: Genişliği Artırdık (Wide Layout) */
.container { 
    width: 95%; 
    max-width: 1600px; /* Eski değer 1200px idi, şimdi çok daha geniş */
    margin: auto; 
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }

/* --- HEADER DÜZENLEME (PC & MOBİL TAM UYUMLU - V2) --- */

header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #FFFFFF;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: 90px;
    display: flex;
    align-items: center;
}

/* 1. PC GÖRÜNÜMÜ (Varsayılan) */
.header-content {
    display: flex;
    align-items: center;
    width: 95%;
    max-width: 1600px;
    margin: auto;
    height: 100%;
    justify-content: space-between;
}

/* Sol Alan (Logo) */
.header-left {
    flex: 1; 
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.logo img { height: 60px; }

/* Nav Wrapper (PC'de yokmuş gibi davranır) */
.nav-wrapper {
    display: contents; 
}

/* Orta Alan (Linkler ve Animasyon) */
.header-center {
    flex: 2; 
    display: flex;
    justify-content: center;
}
.header-center ul { display: flex; padding: 0; margin: 0; }
.header-center ul li { margin: 0 20px; }

/* Link Stili */
.header-center ul li a {
    font-family: var(--font-montserrat);
    font-weight: 800;
    font-size: 14px;
    color: var(--primary-blue);
    position: relative; /* Animasyon için referans */
    padding-bottom: 5px; /* Çizgi ile yazı arası boşluk */
    transition: color 0.3s;
}

/* --- ÇİZGİ ANİMASYONU GERİ GELDİ --- */
.header-center ul li a::after {
    content: '';
    position: absolute;
    width: 0; /* Başlangıçta görünmez */
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: var(--secondary-blue);
    transition: width 0.3s ease-in-out; /* Kayma efekti */
}

.header-center ul li a:hover::after {
    width: 100%; /* Üzerine gelince dolar */
}

.header-center ul li a:hover { color: var(--secondary-blue); }


/* Sağ Alan (Status Kutusu) */
.header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* --- LEAGUE STATUS (GRİ KUTU GERİ GELDİ) --- */
.league-status {
    display: flex;
    align-items: center;
    background: #f4f7f6; /* Gri Arkaplan */
    padding: 10px 20px;  /* İç boşluk */
    border-radius: 30px; /* Oval köşeler */
    border: 1px solid #eee;
}

.status-dot {
    width: 10px; height: 10px;
    background-color: #2ecc71;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
    animation: pulse 2s infinite;
}

.status-text {
    font-family: var(--font-montserrat);
    font-weight: 800;
    font-size: 13px;
    color: var(--primary-blue);
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Mobil İkon (PC'de Gizli) */
.mobile-menu-icon { display: none; }


/* --- 2. MOBİL GÖRÜNÜM (1024px ve altı) --- */
@media (max-width: 1024px) {
    
    header { height: 70px; padding: 0; }
    
    .header-content {
        display: flex;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center;
        width: 100%;
        padding: 0 20px;
    }

    .header-left { flex: 0 0 auto; }
    .logo img { height: 40px; }

    .mobile-menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 2000;
        margin-left: auto;
    }
    .mobile-menu-icon span {
        height: 3px;
        width: 100%;
        background-color: #0A2647;
        border-radius: 3px;
        transition: 0.3s;
    }

    .mobile-menu-icon.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-menu-icon.open span:nth-child(2) { opacity: 0; }
    .mobile-menu-icon.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .nav-wrapper {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: #fff;
        padding: 80px 20px;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.4s ease;
        z-index: 1500;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
    }

    .nav-wrapper.active { right: 0; }

    .header-center { flex: 0; width: 100%; }
    .header-center ul { flex-direction: column; gap: 25px; text-align: center; }
    .header-center ul li { margin: 0; }
    .header-center ul li a { font-size: 16px; }

    .header-right { flex: 0; width: 100%; justify-content: center; }
    .league-status { width: 100%; justify-content: center; }
}

/* Yeşil Yuvarlak İkon */
.status-dot {
    width: 10px;
    height: 10px;
    background-color: #2ecc71; /* Canlı Yeşil */
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2); /* Etrafında hafif bir hare */
    animation: pulse 2s infinite; /* Canlı yayın hissi için yanıp sönme efekti */
}

.status-text {
    font-family: var(--font-montserrat);
    font-weight: 800; /* Kalın font */
    font-size: 13px;
    color: var(--primary-blue);
    letter-spacing: 0.5px;
}

/* Yeşil nokta için yanıp sönme animasyonu */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}



/* --- ŞERİTLER --- */
.top-stripe { height: 8px; background: var(--accent-gold); margin-top: 90px; /* Header yüksekliğine göre ayarlandı */ }
.colorful-stripe { height: 8px; background: linear-gradient(to right, var(--primary-blue), #E31C25, var(--accent-gold)); }
.bottom-stripe { height: 10px; background: var(--primary-blue); }

/* --- BANNER (SLIDER) --- */
.banner { 
    height: 600px; 
    position: relative; /* Oklar ve çubuk için referans */
    overflow: hidden; 
    background-color: #000; /* Görsel yüklenmezse siyah zemin */
}

/* Slide Yapısı */
.banner-slide { 
    position: absolute; /* Üst üste binmeleri için */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center; 
    display: flex; 
    align-items: center; 
    opacity: 0; /* Gizli */
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s; /* Yumuşak geçiş */
    z-index: 1;
}

/* Aktif Slide */
.banner-slide.active { 
    opacity: 1; /* Görünür */
    visibility: visible;
    z-index: 2;
}

/* Banner Metinleri */
.banner-text {
    width: 95%;
    max-width: 1600px;
    margin: auto;
    position: relative;
    z-index: 3;
}
.banner-text h2 { 
    font-family: var(--font-montserrat); 
    font-weight: 900; 
    font-size: 64px; 
    line-height: 1.1; 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
    font-style: italic; 
    color: #fff;
}
.banner-text h2 span { color: var(--accent-gold); }
.banner-text p { 
    font-size: 20px; 
    margin-top: 20px; 
    max-width: 700px; 
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
    font-weight: 500; 
    color: #fff;
}

/* --- OKLAR (Buttons) --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3); /* Yarı saydam siyah */
    color: #fff;
    border: none;
    font-size: 30px;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-btn:hover { background: var(--accent-red); }
.prev-btn { left: 30px; }
.next-btn { right: 30px; }

/* --- SÜRE ÇUBUĞU (Progress Bar) --- */
.slider-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px; /* İnce bir çizgi */
    background: rgba(255, 255, 255, 0.2); /* Arka planı silik */
    z-index: 20;
}

.slider-progress-bar {
    height: 100%;
    background: var(--accent-gold); /* Dolarken sarı olsun */
    width: 0%;
}

/* Animasyon Class'ı (JS ile tetiklenecek) */
.slider-progress-bar.animating {
    animation: loadProgress 7s linear forwards; /* 7 saniyede dolsun */
}

@keyframes loadProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Mobil Ayarlar */
@media (max-width: 768px) {
    .banner-text h2 { font-size: 32px; }
    .slider-btn { width: 40px; height: 40px; font-size: 20px; }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
}

/* --- SPONSORLAR (FULL WIDTH & YENİ TASARIM) --- */
.sponsors { 
    background: #fff8ee; /* İstenilen krem rengi */
    padding: 40px 0 60px 0; /* Üst ve alt boşluk */
    overflow: hidden; 
    width: 100%; 
    border-bottom: 1px solid #eee;
}

/* Başlık Tasarımı (Çizgili ve Küçük) */
.sponsors h3 { 
    display: flex; /* Çizgi ve yazıyı hizalamak için */
    align-items: center;
    font-family: var(--font-montserrat); 
    font-weight: 700; 
    font-size: 12px; /* Küçük font */
    color: #d44131; /* Altın/Sarı tonu (Logodaki sarı) */
    letter-spacing: 3px; /* Harf aralığı geniş */
    margin-bottom: 30px; 
    text-transform: uppercase;
}

/* Başlığın solundaki çizgi */
.sponsors h3 span {
    display: inline-block;
    width: 40px; /* Çizgi uzunluğu */
    height: 2px; /* Çizgi kalınlığı */
    background-color: #d44131; /* Çizgi rengi */
    margin-right: 15px; /* Yazı ile çizgi arası boşluk */
}

/* Carousel Alanı */
.sponsor-carousel { 
    width: 100%; /* Sayfayı kapla */
    overflow: hidden; 
    position: relative;
    /* Sağda solda mavilik/gölge olmasın diye maskeleme yok */
}

.sponsor-track { 
    display: flex; 
    /* Genişlik Hesabı: (Logo Genişliği + Boşluk) x Toplam Logo Sayısı (28) */
    /* 180px genişlik + 80px margin = 260px yer kaplar bir logo */
    /* 260px * 28 logo = 7280px */
    width: calc(260px * 28); 
    animation: scroll 40s linear infinite; /* Hız ayarı */
    align-items: center; 
}

.sponsor-track img { 
    width: 180px; /* Logo boyutu */
    height: 90px; 
    margin: 0 40px; /* Logolar arası boşluk */
    object-fit: contain; 
    /* Logoların orijinal rengi görünsün (Siyah beyaz istersen aşağıyı aç) */
    /* filter: grayscale(100%); opacity: 0.8; */
    transition: all 0.3s;
}

/* Mouse ile üzerine gelince durması istenirse: */
/* .sponsor-carousel:hover .sponsor-track { animation-play-state: paused; } */

@keyframes scroll { 
    0% { transform: translateX(0); } 
    /* 14 logo genişliği kadar kaydırınca başa dön (Sonsuz hissi) */
    /* 14 logo * 260px = 3640px */
    100% { transform: translateX(calc(-260px * 14)); } 
}

/* Mobil Ayarlar */
@media (max-width: 768px) {
    .sponsor-track img { 
        width: 120px; 
        height: 60px; 
        margin: 0 20px; 
    }
    .sponsors h3 { font-size: 10px; margin-left: 10px; } /* Mobilde hafif hizalama */
    
    /* Mobil genişlik hesabı: (120+40) * 28 = 4480px */
    .sponsor-track { width: calc(160px * 28); }
    
    @keyframes scroll { 
        0% { transform: translateX(0); } 
        100% { transform: translateX(calc(-160px * 14)); } 
    }
}

/* --- PUAN VE FİKSTÜR GENEL --- */
.content-section { padding: 60px 0; background-color: #f9fbfd; }

/* Üst Başlık Alanı */
.main-section-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 30px; 
}
.title-area { display: flex; align-items: center; gap: 15px; }
.icon-box { 
    width: 40px; height: 40px; background: #d32f2f; color: #fff; 
    font-weight: 900; display: flex; align-items: center; justify-content: center; 
    border-radius: 6px; font-size: 20px; font-family: var(--font-montserrat);
}
.title-area h2 { 
    font-size: 24px; color: #1a3b5d; font-weight: 800; font-style: italic; line-height: 1.2; 
}
.title-area h2 span { font-size: 12px; color: #7f8c8d; font-weight: 600; font-style: normal; letter-spacing: 1px; display: block; }

/* Grup Sekmeleri (Tabs) */
.group-tabs { display: flex; gap: 10px; background: #eef2f7; padding: 5px; border-radius: 10px; }
.group-tab { 
    border: none; background: transparent; padding: 8px 20px; 
    font-family: var(--font-roboto); font-size: 11px; color: #7f8c8d; 
    cursor: pointer; border-radius: 8px; text-align: center; font-weight: 700; transition: all 0.3s;
}
.group-tab span { font-size: 16px; display: block; color: #333; }
.group-tab.active { background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); color: #d32f2f; }
.group-tab.active span { color: #d32f2f; }

/* --- PUAN TABLOSU TASARIMI (Görsel 1) --- */
.standings-wrapper { 
    background: #fff; border-radius: 12px; overflow: hidden; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 60px; 
    border: 1px solid #eee;
}

/* Mavi Header Bar */
.standings-header-bar { 
    background: #204d84; /* Lacivert */
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; 
    color: #fff;
}
.left-badge { display: flex; align-items: center; gap: 15px; }
.badge-yellow { 
    background: #ffca28; color: #204d84; font-size: 11px; font-weight: 800; 
    padding: 4px 10px; border-radius: 4px; font-style: italic;
}
.group-name-display { font-family: var(--font-montserrat); font-weight: 800; font-style: italic; font-size: 18px; }
.right-label { font-size: 12px; font-weight: 600; opacity: 0.9; }

/* Tablo Yapısı */
.table-responsive { overflow-x: auto; }
#standings-table { width: 100%; border-collapse: separate; border-spacing: 0; }
#standings-table th { 
    background: #fcfcfc; color: #8898aa; font-size: 11px; font-weight: 700; 
    padding: 15px; text-align: center; border-bottom: 2px solid #edf2f9; letter-spacing: 1px;
}
#standings-table td { 
    padding: 18px 15px; text-align: center; color: #1a3b5d; font-weight: 600; font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
}
#standings-table .text-left { text-align: left; }
.col-highlight-red { color: #d32f2f !important; }
.col-highlight-blue { color: #204d84 !important; }

/* Puan Sütunu (Sarımsı Arkaplan) */
#standings-table th.col-points, #standings-table td.col-points { 
    background-color: #fbf8e8; font-weight: 900; color: #333; 
}
/* Takım İsmi & Logo */
.team-cell { display: flex; align-items: center; gap: 12px; }
.team-cell img { width: 24px; height: 24px; object-fit: contain; }
/* Son Sıradaki Takım (Düşme Hattı - Kırmızımsı) */
.row-relegation td { background-color: #fff5f5 !important; border-bottom: none; }

/* --- FİKSTÜR TASARIMI (Görsel 2) --- */
.fixture-wrapper { 
    background: #fff; border-radius: 15px; padding: 30px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee;
}
.fixture-top-bar { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 40px; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px;
}
.fixture-title { display: flex; align-items: center; gap: 15px; }
.icon-box-orange { 
    width: 40px; height: 40px; background: #e67e22; color: #fff; 
    font-weight: 900; display: flex; align-items: center; justify-content: center; 
    border-radius: 6px; font-size: 20px; font-family: var(--font-montserrat);
}
.fixture-title h2 { font-size: 22px; color: #204d84; font-weight: 800; font-style: italic; line-height: 1.2; }
.fixture-subtitle { font-size: 12px; color: #e67e22; font-weight: 700; display: block; letter-spacing: 0.5px; }

/* Hafta Scroll Seçici */
.week-scroller-container { 
    background: #f1f3f5; padding: 5px; border-radius: 30px; width: 60%; 
}
.week-scroller { 
    display: flex; justify-content: space-between; overflow-x: auto; 
}
.week-btn { 
    background: transparent; border: none; padding: 8px 0; width: 100%; 
    font-size: 11px; font-weight: 700; color: #8898aa; cursor: pointer; 
    display: flex; flex-direction: column; align-items: center; line-height: 1.2;
    border-radius: 20px; transition: all 0.3s;
}
.week-btn span { font-size: 14px; display: block; }
.week-btn.active { background: #204d84; color: #fff; box-shadow: 0 4px 6px rgba(32, 77, 132, 0.3); }

/* Maç Grid */
.matches-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } /* 2 Maç solda, 1 Dinlenen sağda */
.match-cards-column { display: flex; gap: 20px; } 

/* Maç Kartı */
.fixture-card { 
    background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 25px; 
    display: flex; justify-content: space-between; align-items: center; flex: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); position: relative;
}
.fixture-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: 0.3s; }

/* "Maç Sonucu" Badge */
.match-badge { 
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%); 
    background: #f1f3f5; color: #8898aa; font-size: 10px; font-weight: 700; 
    padding: 4px 12px; border-radius: 10px; border: 1px solid #ddd;
}
.f-team { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 80px; text-align: center; }
.f-team img { width: 45px; height: 45px; object-fit: contain; }
.f-team span { font-size: 13px; font-weight: 700; color: #204d84; }
.f-score { font-size: 28px; font-weight: 900; color: #204d84; font-family: var(--font-montserrat); letter-spacing: 2px; }

/* Bye (Dinlenen) Kartı */
.bye-card { 
    border: 2px dashed #e0e0e0; border-radius: 12px; padding: 20px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    text-align: center; background: #fafafa; height: 100%;
}
.bye-badge { background: #fef3cd; color: #856404; padding: 5px 15px; border-radius: 20px; font-size: 11px; font-weight: 700; margin-bottom: 15px; }
.bye-logo { width: 60px; height: 60px; margin-bottom: 10px; opacity: 0.5; filter: grayscale(100%); }
.bye-team-name { font-weight: 800; color: #aaa; font-size: 16px; margin-bottom: 5px; }
.bye-info { font-size: 10px; color: #ccc; font-weight: 600; }


/* --- FİKSTÜR TARİH VE SAAT DETAYLARI --- */
.f-date-details {
    display: flex;
    flex-direction: column; /* Alt alta dizilim sağlar */
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 120px; /* Alanın sıkışmasını engeller */
    margin: 0 10px;
}

/* 1. Satır: Gün ve Ay (10 EKİM CMT) */
.date-day {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #8898aa; /* Gri tonu */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block; /* Mutlaka blok olmalı */
}

/* 2. Satır: Saat (20:30) - Kutucuklu Alan */
.date-time {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px; 
    font-weight: 800;
    color: #204d84; /* Temanın Laciverti */
    background-color: #f1f3f5; /* Arkaya hafif gri kutu */
    padding: 4px 12px;
    border-radius: 8px;
    letter-spacing: 1px;
    display: inline-block; /* Kutu görünümü için */
    margin-bottom: 4px;
}

/* 3. Satır: Saha İsmi */
.date-venue {
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #e67e22; /* Turuncu */
    font-style: italic;
    text-transform: uppercase;
    max-width: 120px;
    line-height: 1.2;
    display: block;
}

/* Başlamadı Rozeti için Gri Stil */
.badge-pending {
    background: #e9ecef !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}




/* --- BRACKET (ELEME AĞACI) --- */
.bracket-section {
    padding: 50px 0;
    background-color: #0f172a;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    overflow: hidden; 
}

.bracket-header h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.bracket-header h2 span { color: #facc15; }
.bracket-subtitle { color: #facc15; font-weight: 700; margin-bottom: 5px; }
.bracket-note { color: #64748b; font-size: 11px; font-style: italic; }

.bracket-container {
    display: flex;
    justify-content: center; 
    padding: 20px;
    width: 100%;
    height: 780px; /* Kartların rahat sığması için yükseklik */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}

/* SÜTUN YAPISI */
.bracket-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* İÇERİKLERİ YATAYDA ORTALA (Title sorunu çözer) */
    width: 200px;
    flex-shrink: 0; 
    margin: 0 5px;
    height: 100%;
}

/* BAŞLIKLAR (Düzeltildi) */
.bracket-label {
    width: 100%; /* Sütunun tamamını kapla */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center; /* Metni hem yatay hem dikey ortala */
    text-align: center; /* Garanti olsun */
    font-size: 11px;
    font-weight: 700;
    color: #facc15;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.02); /* Hafif belirginlik */
    border-radius: 4px;
}

/* KARTLARI HİZALAYAN ALAN */
.cards-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Kartları dikeyde eşit dağıt */
    width: 100%;
}

/* KART TASARIMI */
.bracket-match-card {
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    position: relative;
    border-left: 4px solid #facc15;
    height: 80px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Boş Kart */
.empty-card {
    background: rgba(255,255,255,0.05);
    border: 1px dashed #475569;
    border-left: none;
    color: #94a3b8;
    align-items: center;
    gap: 4px;
}
.empty-card span { font-size: 9px; line-height: 1.2; }

/* Final Sütunu */
.col-final { width: 250px; }
.col-final .cards-wrapper { justify-content: center; gap: 30px; }

.center-trophy { width: 80px; margin: 0 auto 10px auto; filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.4)); }
.final-card { border-left: none; border-top: 4px solid #facc15; transform: scale(1.15); height: 100px; text-align: center; }
.champion-badge { background: #facc15; color: #000; font-size: 11px; font-weight: 800; padding: 5px 15px; border-radius: 20px; margin: 15px auto 0 auto; display: inline-block; }
.third-place-block { width: 100%; margin-top: 40px; }
.third-place-card { border-left: 4px solid #94a3b8; height: 70px; text-align: center; color: #64748b; }

.match-team-row { display: flex; align-items: center; padding: 3px 0; border-bottom: 1px solid #f1f5f9; }
.match-team-row:last-child { border-bottom: none; }
.match-team-row img { width: 20px; height: 20px; margin-right: 8px; object-fit: contain; }
.t-name { font-size: 10px; font-weight: 700; color: #1e293b; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-meta { font-size: 9px; color: #64748b; margin-bottom: 2px; font-weight: 700; }

@media (max-width: 1200px) {
    .bracket-container { justify-content: flex-start; padding-left: 15px; }
}

/* --- ÖZEL ORTALI BAŞLIK ALANI --- */
.custom-bracket-title-area {
    display: flex;
    flex-direction: column;
    align-items: center; /* Yatayda ortalar */
    justify-content: center;
    text-align: center; /* Metinleri ortalar */
    width: 100%; /* Ekranı tam kaplamasını sağlar */
    margin: 0 auto 30px auto; /* Alttan boşluk bırakır */
    padding: 0 15px; /* Mobilde kenarlara yapışmasın */
}

.custom-bracket-title-area h2 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.custom-bracket-title-area h2 span {
    color: #facc15;
}

.custom-bracket-title-area .bracket-subtitle {
    color: #facc15;
    font-weight: 700;
    margin: 0 0 5px 0;
    font-size: 14px;
    letter-spacing: 1px;
}

.custom-bracket-title-area .bracket-note {
    color: #64748b;
    font-size: 11px;
    font-style: italic;
    margin: 0;
}

/* Mobil Uyum */
@media (max-width: 1024px) {
    .matches-grid { grid-template-columns: 1fr; }
    .match-cards-column { flex-direction: column; }
    .week-scroller-container { width: 100%; overflow-x: auto; }
}
@media (max-width: 768px) {
    .main-section-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .fixture-top-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
    .week-btn { min-width: 50px; margin-right: 5px; }
}

/* --- FOOTER --- */


/* --- YENİ FOOTER TASARIMI --- */
footer {
    background: #222222; /* Koyu Lacivert Arka Plan */
    color: var(--accent-gold); /* Altın Sarısı Metin Rengi */
    text-align: center; /* Metinleri ortala */
    position: relative; /* Şerit için referans noktası */
    padding-bottom: 50px; /* Alt boşluk */
    margin-top: auto; /* Sayfa kısa olsa bile en alta it */
}

/* Üstteki Sarı Şerit */
.footer-top-stripe {
    height: 8px; /* Şerit yüksekliği */
    background: var(--accent-gold); /* Altın Sarısı */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Hafif gölge */
}

/* İçerik Alanı */
.footer-content {
    padding-top: 60px; /* Şeridin altından başlasın */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Başlık ve metin arası boşluk */
}

/* Ana Başlık */
.footer-content h2 {
    font-family: var(--font-montserrat);
    font-weight: 900; /* Kalın font */
    font-size: 32px;
    font-style: italic; /* İtalik */
    letter-spacing: 1px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Yazıya derinlik katmak için gölge */
    margin: 0;
}

/* Telif Hakkı Metni */
.footer-content p {
    font-family: var(--font-roboto);
    font-size: 12px; /* Küçük font */
    font-weight: 500;
    letter-spacing: 3px; /* Geniş harf aralığı */
    opacity: 0.8; /* Hafif şeffaflık */
    text-transform: uppercase; /* Hepsi büyük harf */
    margin: 0;
}

/* --- OYNANMAMIŞ MAÇ TARİH TASARIMI --- */
.f-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px; /* Satırlar arası boşluk */
    min-width: 100px; /* Alanı korumak için */
}

.f-date .date {
    font-family: var(--font-roboto);
    font-size: 11px;
    font-weight: 700;
    color: #8898aa; /* Gri ton */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.f-date .time {
    font-family: var(--font-montserrat);
    font-size: 20px; /* Saat belirgin ve büyük */
    font-weight: 800;
    color: var(--primary-blue); /* Lacivert */
    background: #f1f3f5; /* Arkaya hafif bir kutu */
    padding: 2px 10px;
    border-radius: 6px;
    margin: 2px 0;
}

.f-date .venue {
    font-family: var(--font-roboto);
    font-size: 10px;
    font-weight: 500;
    color: #e67e22; /* Turuncu ton (Saha ismi dikkat çeksin) */
    font-style: italic;
}

/* Oynanmamış maçlarda Badge Rengini Değiştirme (Opsiyonel) */
/* Mevcut .match-badge class'ının yanına ekleyerek kullanabilirsin */
.badge-pending {
    background: #e9ecef !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .footer-content {
        padding-top: 50px;
        gap: 8px;
    }
    .footer-content h2 {
        font-size: 24px; /* Mobilde başlığı küçült */
    }
    .footer-content p {
        font-size: 10px; /* Mobilde metni küçült */
        letter-spacing: 2px;
    }
    footer {
        padding-bottom: 40px; /* Mobilde alt boşluğu azalt */
    }
}

/* --- TAKIM PROFİLİ ÖZEL STİLLERİ --- */

/* Profil Başlık Alanı (Banner) */
.team-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 60px 0;
    color: #fff;
    border-bottom: 4px solid #facc15;
    position: relative;
    overflow: hidden;
}

/* Arka plana hafif desen efekti */
.team-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/golliga.png'); /* Logo watermark */
    background-repeat: no-repeat;
    background-position: right -50px center;
    background-size: 400px;
    opacity: 0.05;
    pointer-events: none;
}

.team-profile-header {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.tp-logo-box {
    width: 120px; height: 120px;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.4);
    border: 4px solid #facc15;
}
.tp-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.tp-info-box h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
}
.tp-label {
    color: #facc15;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 5px;
}

/* GRID YAPISI */
.team-grid-layout {
    display: grid;
    grid-template-columns: 400px 1fr; /* Sol 400px, Sağ kalan alan */
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}
/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .team-grid-layout { grid-template-columns: 1fr; }
}

/* BAŞLIKLAR */
.section-heading-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}
.section-heading-custom h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}
.icon-box-orange {
    width: 30px; height: 30px;
    background: #facc15;
    color: #000;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
    border-radius: 4px;
}

/* --- SOL KOLON: FİKSTÜR KARTLARI --- */
.tf-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}
.tf-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }

.tf-header {
    background: #f1f5f9;
    padding: 6px 12px;
    display: flex; justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.tf-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
}

.tf-team {
    display: flex; align-items: center; gap: 8px; width: 40%;
}
.tf-team.away { justify-content: flex-end; text-align: right; }
.tf-team img { width: 30px; height: 30px; object-fit: contain; }
.tf-team .t-name { font-size: 12px; font-weight: 700; color: #1e293b; text-transform: uppercase; line-height: 1.1; }

.tf-score-area { width: 20%; text-align: center; }
.score-box {
    display: inline-block;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}
.sep { color: #94a3b8; font-weight: bold; margin: 0 2px; }
.vs-badge {
    background: #e2e8f0; color: #64748b; font-size: 10px; font-weight: 700;
    padding: 4px 8px; border-radius: 10px;
}

/* --- SAĞ KOLON: OYUNCU TABLOSU --- */
.player-table-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    overflow-x: auto;
    border-top: 4px solid #facc15;
}
.player-stats-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.player-stats-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    padding: 12px 10px;
    text-align: center;
    border-bottom: 2px solid #e2e8f0;
}
.player-stats-table th.pl-name { text-align: left; padding-left: 15px; }

.player-stats-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}
.player-stats-table tr:last-child td { border-bottom: none; }
.player-stats-table tr:hover td { background: #f8fafc; }

.pl-name { display: flex; align-items: center; gap: 10px; }
.p-icon {
    width: 28px; height: 28px;
    background: #e2e8f0; color: #94a3b8;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}

/* Kart Renkleri */
.p-card-y { color: #facc15; font-weight: bold; }
.p-card-r { color: #ef4444; font-weight: bold; }
.p-card-b { color: #3b82f6; font-weight: bold; } /* Mavi Kart */
.p-goal { color: #10b981; font-weight: 800; font-size: 14px; }

.col-yellow { color: #eab308; }
.col-red { color: #ef4444; }
.col-blue { color: #3b82f6; }

.empty-msg { text-align: center; color: #94a3b8; padding: 20px; font-style: italic; }


/* --- BAY (BYE) GEÇEN HAFTA TASARIMI --- */
.tf-card.bye-week {
    background-color: #f8fafc; /* Çok açık gri zemin */
    border: 1px dashed #cbd5e1; /* Kesikli kenarlık */
    opacity: 0.9;
}

.tf-card.bye-week .tf-header {
    background-color: #e2e8f0;
    color: #64748b;
}

.bye-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px !important;
}

.bye-icon {
    font-size: 24px;
    color: #94a3b8;
    background: #e2e8f0;
    width: 45px; height: 45px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.bye-text {
    display: flex;
    flex-direction: column;
}

.bye-text strong {
    font-size: 14px;
    color: #475569;
    font-weight: 800;
}

.bye-text span {
    font-size: 11px;
    color: #94a3b8;
}
/* --- MOBİL UYUMLULUK DÜZELTMELERİ --- */
@media (max-width: 1024px) {
    .container { width: 95%; }
    .fixtures-grid { grid-template-columns: repeat(2, 1fr); }
    .banner-text h2 { font-size: 48px; }
}

@media (max-width: 768px) {
    header { height: auto; padding: 15px 0; position: relative; }
    .header-content { flex-direction: column; }
    header nav ul { margin-top: 15px; flex-wrap: wrap; justify-content: center; }
    header nav ul li { margin: 5px 10px; }
    .top-stripe { margin-top: 0; }
    
    .fixtures-grid { grid-template-columns: 1fr; }
    .banner { height: 400px; }
    .banner-text h2 { font-size: 32px; }
    
    /* Mobilde tablo kaydırma */
    .standings-container { overflow-x: auto; }
}


/* --- YENİ MOBİL MENÜ SİSTEMİ (Header.php için) --- */

/* Mobil Menü İkonu (Başlangıçta Gizli) */
.mobile-menu-icon {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 2000;
}

.mobile-menu-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--primary-blue);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Nav Wrapper: PC'de normal akışta görünsün */
.nav-wrapper {
    display: contents; /* PC'de flex yapısını bozmaz, yokmuş gibi davranır */
}

/* --- MOBİL GÖRÜNÜM (1024px ve altı) --- */
@media (max-width: 1024px) {
    
    /* Header Ayarları */
    header { height: 70px; padding: 0 15px; }
    .header-content { justify-content: space-between; width: 100%; }
    
    /* Logoyu Sola Yasla */
    .header-left { flex: 0; }
    .logo img { height: 45px; }

    /* İkonu Göster */
    .mobile-menu-icon { display: flex; }

    /* Menü Kapalıyken (Gizle ve Şekillendir) */
    .nav-wrapper {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 70px; /* Header yüksekliği kadar aşağıdan başla */
        left: -100%; /* Ekran dışına it */
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #fff;
        transition: left 0.4s ease; /* Kayma efekti */
        padding: 40px 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        z-index: 1500;
    }

    /* Menü Açıkken (.active class'ı JS ile eklenir) */
    .nav-wrapper.active {
        left: 0; /* Ekrana getir */
    }

    /* Menü Linklerini Mobilde Düzenle */
    .header-center { flex: 0; width: 100%; }
    header nav ul { 
        flex-direction: column; 
        align-items: center; 
        gap: 25px; 
    }
    header nav ul li { margin: 0; }
    header nav ul li a { font-size: 18px; }

    /* Sağ Taraf (Status) Mobilde */
    .header-right { 
        flex: 0; 
        justify-content: center; 
        margin-top: 20px; 
        width: 100%;
    }
    .league-status { width: 100%; justify-content: center; background: #f4f7f6; }

    /* İkon Animasyonu (X şekline dönme) */
    .mobile-menu-icon.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-menu-icon.open span:nth-child(2) { opacity: 0; }
    .mobile-menu-icon.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}


/* --- TEK SÜTUNLUK SAYFA TASARIMI (404, Hakkımızda vb.) --- */

/* Genel İçerik Kutusu */
.single-page-container {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    min-height: 400px;
}

/* 404 Sayfası Özel Tasarımı */
.error-page-content {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-code {
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--font-montserrat);
    margin-bottom: 20px;
}

.error-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.error-text {
    font-size: 16px;
    color: #64748b;
    max-width: 500px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn-home {
    background-color: var(--primary-blue);
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}
.btn-home:hover {
    background-color: var(--secondary-blue);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(10, 38, 71, 0.3);
}

/* Standart Metin Sayfaları İçin (Kurallar, Hakkımızda) */
.text-page-content h2 {
    color: var(--primary-blue);
    font-family: var(--font-montserrat);
    font-weight: 800;
    margin-bottom: 20px;
    font-size: 24px;
    border-bottom: 2px solid #facc15;
    display: inline-block;
    padding-bottom: 5px;
}
.text-page-content p {
    color: #334155;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 15px;
}
.text-page-content ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 20px;
    color: #334155;
}
.text-page-content li { margin-bottom: 10px; }

/* --- SPONSORLARIMIZ SAYFASI ÖZEL STİLLERİ --- */

/* Teşekkür Kutusu */
.thank-you-box {
    text-align: center;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.thank-you-box h2 {
    color: var(--primary-blue);
    font-family: var(--font-montserrat);
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 800;
}
.thank-you-box p {
    color: #475569;
    font-size: 16px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Sponsor Listesi Container */
.sponsor-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Kartlar arası boşluk */
}

/* Sponsor Kartı */
.sponsor-card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.sponsor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #facc15; /* Hoverda sarı kenarlık */
}

/* Kartın Solu: Resim */
.sp-img-box {
    width: 250px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-right: 1px solid #eee;
    flex-shrink: 0; /* Küçülmesini engelle */
}
.sp-img-box img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    /* Logolar renkli olsun istersen filter'ı kaldır */
    /* filter: grayscale(100%); */ 
    transition: filter 0.3s;
}
.sponsor-card:hover .sp-img-box img {
    filter: none; /* Hoverda renklenir */
}

/* Kartın Sağı: Bilgiler */
.sp-info-box {
    padding: 25px;
    flex: 1; /* Kalan alanı kapla */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sp-name {
    font-family: var(--font-montserrat);
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.sp-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
    font-style: italic;
}

/* İletişim Detayları (Grid) */
.sp-details-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sp-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}
.sp-detail-item i {
    color: #facc15; /* İkon rengi */
    width: 20px;
    text-align: center;
}

/* Web Sitesi Butonu */
.btn-sp-web {
    align-self: flex-start; /* Sola yasla */
    background: var(--primary-blue);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    transition: background 0.3s;
}
.btn-sp-web:hover {
    background: var(--secondary-blue);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .sponsor-card { flex-direction: column; text-align: center; }
    .sp-img-box { width: 100%; border-right: none; border-bottom: 1px solid #eee; height: 150px; }
    .sp-details-grid { justify-content: center; flex-direction: column; gap: 10px; }
    .btn-sp-web { align-self: center; width: 100%; justify-content: center; }
}


/* --- KATILIMCILAR SAYFASI (GRID YAPISI) --- */

.participants-grid {
    display: grid;
    /* Masaüstünde yan yana 4 tane */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; /* Kartlar arası boşluk */
    margin-top: 20px;
}

.participant-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none; /* Link alt çizgisini kaldır */
    position: relative;
    overflow: hidden;
}

/* Hover Efekti */
.participant-card:hover {
    transform: translateY(-7px); /* Yukarı doğru hafif kalksın */
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #facc15; /* Kenarlık sarı olsun */
}

/* Logo Alanı */
.pc-logo-box {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.pc-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); /* Logoya hafif gölge */
}

.participant-card:hover .pc-logo-box {
    transform: scale(1.1); /* Hoverda logo büyüsün */
}

/* Takım Adı */
.pc-name {
    font-family: var(--font-montserrat);
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-blue);
    text-transform: uppercase;
    line-height: 1.3;
}

.participant-card:hover .pc-name {
    color: #d32f2f; /* Hoverda isim rengi değişsin */
}

/* "Profili Gör" Butonu (Gizli, Hoverda Çıkan) */
.pc-link-text {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 10px;
    font-weight: 700;
    opacity: 0; /* Başlangıçta gizli */
    transform: translateY(10px);
    transition: all 0.3s;
}

.participant-card:hover .pc-link-text {
    opacity: 1;
    transform: translateY(0);
}

/* --- MOBİL UYUM (RESPONSIVE) --- */
@media (max-width: 992px) {
    /* Tablette yan yana 3 tane */
    .participants-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    /* Büyük telefonda yan yana 2 tane */
    .participants-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .participant-card { padding: 20px 10px; }
    .pc-logo-box { width: 70px; height: 70px; margin-bottom: 15px; }
    .pc-name { font-size: 14px; }
}

@media (max-width: 480px) {
    /* Çok küçük ekranda (opsiyonel) tek sütun veya 2 sütun devam edebilir. 
       2 sütun daha kompakt durur. */
}

/* --- MOBİL UYUMLULUK DÜZELTMELERİ (RESPONSIVE FIX) --- */

@media (max-width: 768px) {

    /* 1. GENEL KAPLAYICI */
    .container {
        width: 95%; /* Kenarlardan biraz boşluk kalsın */
        padding: 0 10px;
    }

    /* 2. BANNER AYARLARI */
    .banner {
        height: 400px; /* Mobilde yüksekliği azalt */
    }
    .banner-text h2 {
        font-size: 36px; /* Yazıyı küçült */
    }
    .banner-text p {
        font-size: 14px;
        padding: 0 20px;
    }
    .slider-btn {
        width: 40px; height: 40px; font-size: 18px; /* Okları küçült */
    }

    /* 3. BÖLÜM BAŞLIKLARI (Puan Durumu & Fikstür Başlığı) */
    .main-section-header, 
    .fixture-top-bar {
        flex-direction: column; /* Alt alta diz */
        align-items: flex-start;
        gap: 15px;
    }

    .title-area, 
    .fixture-title {
        width: 100%;
        display: flex;
        align-items: center;
    }

    /* 4. GRUP SEKMELERİ (Yatay Kaydırma) */
    .group-tabs {
        width: 100%;
        overflow-x: auto; /* Sığmazsa yana kaydır */
        white-space: nowrap; /* Alt satıra inme */
        padding-bottom: 5px; /* Kaydırma çubuğu için yer */
        justify-content: flex-start; /* Sola yasla */
    }
    .group-tab {
        flex-shrink: 0; /* Küçülme */
    }

    /* 5. PUAN DURUMU TABLOSU (En büyük sorun burasıdır) */
    .standings-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .table-responsive {
        width: 100%;
        overflow-x: auto; /* Tablo sığmazsa sadece tablo kayar, site kaymaz */
        -webkit-overflow-scrolling: touch; /* Mobilde akıcı kaydırma */
    }
    #standings-table th, 
    #standings-table td {
        padding: 10px 5px; /* Hücre boşluklarını azalt */
        font-size: 12px; /* Yazıları küçült */
    }
    .team-cell img {
        width: 20px; height: 20px; /* Logoları küçült */
    }

    /* 6. FİKSTÜR ALANI */
    .week-scroller-container {
        width: 100%;
        overflow-x: auto;
    }
    
    /* Maç Kartları Izgarası */
    .matches-grid {
        display: flex;
        flex-direction: column; /* Alt alta diz */
        gap: 20px;
    }
    
    .match-cards-column {
        flex-direction: column; /* Kartları alt alta diz */
        width: 100%;
    }

    /* Maç Kartı Detayları */
    .fixture-card {
        flex-direction: column; /* Takımları alt alta değil, iç içe düzenle */
        padding: 15px;
        text-align: center;
        gap: 10px;
    }
    
    /* Takım İsimleri ve Logolar */
    .f-team {
        width: 100%; /* Tam genişlik */
        justify-content: center;
        margin-bottom: 5px;
    }
    .f-team.away {
        justify-content: center; /* Deplasmanı da ortala */
        text-align: center;
    }
    
    /* Skor ve Tarih Alanı */
    .f-score {
        font-size: 24px;
        margin: 5px 0;
    }
    .f-date-details {
        margin: 10px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 5px 0;
        width: 100%;
    }
    
    /* Maç Sonucu Badge'i */
    .match-badge {
        position: relative;
        top: 0; left: 0;
        transform: none;
        display: inline-block;
        margin-bottom: 10px;
    }

    /* Bay Geçen Takım Kartı */
    .bye-card {
        margin-top: 10px;
    }
}

/* --- HABERLER (LİSTE VE DETAY) --- */

/* Haber Grid Yapısı */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Yan yana 3 tane */
    gap: 30px;
}

/* Haber Kartı */
.news-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #facc15;
}

/* Kart Görseli */
.news-img-box {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.news-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kutuya sığdırır, bozmaz */
    transition: transform 0.5s;
}
.news-card:hover .news-img-box img {
    transform: scale(1.1); /* Hoverda resim zoom yapsın */
}

/* Kart İçeriği */
.news-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Kart boylarını eşitler */
}

.news-date {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.news-date i { color: #facc15; margin-right: 5px; }

.news-title {
    font-family: var(--font-montserrat);
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 10px;
    line-height: 1.4;
    transition: color 0.3s;
}
.news-card:hover .news-title { color: #d32f2f; }

.news-excerpt {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 3 satırdan sonrasını ... koy */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-read-more {
    margin-top: auto; /* Butonu en alta it */
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-blue);
    border-bottom: 2px solid #facc15;
    padding-bottom: 2px;
    transition: all 0.3s;
}
.btn-read-more:hover { color: #d32f2f; border-color: #d32f2f; }


/* --- HABER DETAY SAYFASI --- */
.news-detail-container {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.nd-header-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.nd-content-area {
    padding: 40px;
}

.nd-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.nd-title {
    font-family: var(--font-montserrat);
    font-size: 32px;
    font-weight: 900;
    color: var(--primary-blue);
    margin-bottom: 30px;
    line-height: 1.2;
}

.nd-text {
    font-size: 16px;
    line-height: 1.8;
    color: #334155;
}
.nd-text p { margin-bottom: 20px; }

/* Mobil Uyum */
@media (max-width: 992px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; }
    .nd-header-img { height: 250px; }
    .nd-content-area { padding: 20px; }
    .nd-title { font-size: 24px; }
}


/* =========================================
   SAYFA SONU ÖZEL DÜZENLEMELERİ (MASTER FIX)
   ========================================= */

/* 1. PC VE GENİŞ EKRANLAR İÇİN (YAN YANA GÖRÜNÜM) */
@media (min-width: 1024px) {
    
    .home-dashboard-grid {
        display: grid;
        grid-template-columns: 58% 40%; /* Sol Geniş, Sağ Dar */
        justify-content: space-between;
        align-items: start;
        gap: 20px;
    }

    .fixture-wrapper {
        margin-top: 0 !important;
        height: 100%;
    }

    /* Tabloyu biraz sıkıştır */
    #standings-table th, 
    #standings-table td {
        padding: 12px 8px;
        font-size: 13px;
    }
}

/* 2. MOBİL CİHAZLAR İÇİN (FİKSTÜR DÜZENİ) */
@media (max-width: 768px) {

    /* --- Genel Mobil Ayarları --- */
    .banner { height: 350px; }
    .banner-text h2 { font-size: 32px; }
    
    .main-section-header, 
    .fixture-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Sekmeler kaydırılabilir olsun */
    .group-tabs {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }
    
    /* Tablo kaydırılabilir olsun */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    /* --- FİKSTÜR KARTI (YAN YANA ZORLAMA) --- */
    .fixture-card {
        flex-direction: row !important; /* Yan Yana Diz */
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 5px !important;
        gap: 5px !important;
    }

    /* Takım İsimleri ve Logolar */
    .f-team {
        flex: 1; /* Eşit alan kapla */
        width: auto !important;
        margin-bottom: 0 !important;
        display: flex;
        align-items: center;
        gap: 5px !important;
    }

    /* Ev Sahibi (Sola değil Sağa yaslı olsun ki skora yakın dursun) */
    .f-team:first-child {
        justify-content: flex-end;
        text-align: right;
    }
    
    /* Deplasman (Sola yaslı) */
    .f-team:last-child {
        justify-content: flex-start;
        text-align: left;
    }

    /* İsimleri mobilde sığdır */
    .f-team span, 
    .f-team a {
        font-size: 11px !important; 
        line-height: 1.1;
        font-weight: 700;
        /* Uzun isimleri kesme, gerekirse alta geçsin ama flex onu tutar */
        white-space: normal; 
    }
    
    /* Logoları Mobilde Küçült */
    .f-team img {
        width: 24px !important;
        height: 24px !important;
    }

    /* Skor ve Tarih Alanı (Ortası) */
    .f-score {
        font-size: 15px !important;
        margin: 0 5px !important;
        font-weight: 900;
    }

    /* Başlamamış Maç Saati */
    .date-time {
        font-size: 12px !important;
        padding: 2px 4px !important;
    }
    .date-day {
        font-size: 9px !important;
        display: none; /* Mobilde tarihi gizleyip sadece saati gösterebiliriz yer kazanmak için */
    }
    
    /* Maç Sonucu Badge */
    .match-badge {
        display: none; /* Mobilde 'MS' yazısını gizle, skor yeterli */
    }
}

/* --- FİKSTÜR KUTUSU DÜZENLEMESİ --- */

/* Fikstür kapsayıcısı (Haftalık kutu) */
.week-content {
    /* PHP'den display:none/block gelecek, biz iç yapıyı yönetelim */
    width: 100%;
}

/* Kutu içindeki her bir elemana (Maç kartı veya Bay kartı) alttan boşluk ver */
.week-content > .fixture-card,
.week-content > .bye-card {
    margin-bottom: 15px !important; /* Kartlar arası 15px boşluk */
    display: flex !important; /* Kartın kendi yapısını koru */
}

/* En son kartın altındaki boşluğu kaldır */
.week-content > div:last-child {
    margin-bottom: 0 !important;
}


/* --- MAÇ DETAY SAYFASI --- */

/* 1. SKORBOARD (Üst Alan) */
.match-header {
    background: linear-gradient(135deg, #0A2647 0%, #144272 100%);
    color: #fff;
    padding: 40px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mh-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}
.mh-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.mh-logo {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.mh-logo img { width: 100%; height: 100%; object-fit: contain; }
.mh-team-name {
    font-family: var(--font-montserrat);
    font-size: 20px;
    font-weight: 700;
}

.mh-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
}
.mh-score {
    font-size: 48px;
    font-weight: 900;
    font-family: var(--font-montserrat);
    letter-spacing: 5px;
}
.mh-status {
    background: rgba(255,255,255,0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    margin-top: 10px;
    text-transform: uppercase;
}
.mh-meta {
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.8;
}

/* 2. TAB MENÜ (Özet / Kadrolar) */
.match-tabs {
    display: flex;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.m-tab-btn {
    padding: 20px 30px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}
.m-tab-btn.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}
.m-tab-content { display: none; padding: 40px 0; }
.m-tab-content.active { display: block; }

/* 3. ZAMAN ÇİZELGESİ (TIMELINE) */
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
/* Ortadaki Çizgi */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #e2e8f0;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-event {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
}

/* Sol Taraf (Ev Sahibi) */
.timeline-event.left { left: 0; text-align: right; }
/* Sağ Taraf (Deplasman) */
.timeline-event.right { left: 50%; text-align: left; }

/* Ortadaki Dakika Yuvarlağı */
.t-minute {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 4px solid var(--primary-blue);
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: -20px; /* Sol taraf için */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: var(--primary-blue);
}
.timeline-event.right .t-minute { left: -20px; }

/* Olay Kartı */
.t-content {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: inline-block;
    position: relative;
}
.t-icon { font-size: 16px; margin: 0 5px; }
.t-player { font-weight: 700; color: #0f172a; font-size: 14px; }
.t-desc { font-size: 12px; color: #64748b; }

/* İkon Renkleri */
.icon-gol { color: #2ecc71; }
.icon-sari { color: #facc15; }
.icon-kirmizi { color: #e74c3c; }
.icon-degisiklik { color: #3498db; }

/* 4. KADROLAR */
.lineups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.team-squad h3 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--primary-blue);
    font-family: var(--font-montserrat);
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.player-row {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.player-row:last-child { border-bottom: none; }
.p-num {
    width: 30px;
    height: 30px;
    background: #0A2647;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-right: 15px;
}
.p-name { font-size: 14px; font-weight: 600; }

/* MOBİL UYUM */
@media (max-width: 768px) {
    .match-header { padding: 20px 0; }
    .mh-content { gap: 10px; }
    .mh-logo { width: 60px; height: 60px; padding: 5px; }
    .mh-team-name { font-size: 12px; display: none; } /* Mobilde ismi gizle, logo konuşsun */
    .mh-score { font-size: 32px; }
    
    /* Timeline Mobil: Çizgiyi sola al */
    .timeline-container::after { left: 31px; }
    .timeline-event { width: 100%; padding-left: 70px; padding-right: 25px; }
    .timeline-event.left, .timeline-event.right { left: 0; text-align: left; }
    .t-minute { left: 15px !important; right: auto; } /* Hep solda */
    
    .lineups-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* =========================================
   TAKIM PROFİL SAYFASI ÖZEL STİLLERİ
   ========================================= */

/* 1. SAYFA BAŞLIĞI (HEADER) */
.team-profile-header {
    display: flex;
    align-items: center;
    gap: 30px;
}
.tp-logo-box {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.tp-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tp-info-box h1 {
    font-size: 36px;
    font-family: var(--font-montserrat);
    font-weight: 900;
    margin: 5px 0;
    color: #fff;
    text-transform: uppercase;
}
.tp-label {
    background: #facc15;
    color: #000;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* 2. GENEL IZGARA (GRID) YAPISI */
.team-grid-layout {
    display: grid;
    /* Masaüstünde: Solda 350px (Fikstür), Sağda Kalan Alan (Kadro) */
    grid-template-columns: 380px 1fr; 
    gap: 30px;
    align-items: start; /* Yukarı hizala */
}

/* Başlıklar */
.section-heading-custom {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}
.section-heading-custom h3 {
    font-family: var(--font-montserrat);
    color: var(--primary-blue);
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}
.icon-box-orange {
    width: 36px; height: 36px;
    background: #facc15;
    color: #000;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}


/* 3. FİKSTÜR KARTLARI (SOL SÜTUN) */
.team-fixture-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tf-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: transform 0.2s;
}
/* Oynanmış maçlar biraz daha silik dursun */
.tf-card.played {
    background: #f8fafc; 
}

.tf-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f1f5f9;
}

.tf-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tf-team {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1; /* Eşit alan kapla */
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.tf-team.home { justify-content: flex-end; text-align: right; }
.tf-team img { width: 28px; height: 28px; object-fit: contain; }

.tf-score-area {
    width: 70px; /* Ortadaki alan genişliği */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-weight: 900;
    font-size: 16px;
    color: var(--primary-blue);
}
.vs-badge {
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}
.score-box { background: #0A2647; color: #fff; padding: 2px 8px; border-radius: 4px; }


/* BAY GEÇME KUTUSU */
.tf-card.bye-week {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
}
.bye-content {
    justify-content: flex-start;
    gap: 15px;
}
.bye-icon {
    width: 40px; height: 40px;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #64748b;
}
.bye-text strong { display: block; color: #334155; }
.bye-text span { font-size: 11px; color: #94a3b8; }


/* 4. OYUNCU TABLOSU (SAĞ SÜTUN) */
.player-table-container {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden; /* Köşeler taşmasın */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.player-stats-table {
    width: 100%;
    border-collapse: collapse;
}

.player-stats-table th {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 2px solid #e2e8f0;
}
.player-stats-table th.pl-name { text-align: left; padding-left: 20px; }

.player-stats-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}
.player-stats-table tr:last-child td { border-bottom: none; }

/* Oyuncu İsmi Hücresi */
.player-stats-table td.pl-name {
    text-align: left;
    padding-left: 20px;
}
/* İsim ve İkonu Hizalama */
.pl-name {
    display: flex;
    align-items: center;
    gap: 12px;
}
.p-icon {
    width: 32px; height: 32px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.name {
    font-weight: 700;
    color: var(--primary-blue);
}

/* Gol ve Kart Renkleri */
.p-goal { color: #2ecc71; font-weight: 800; }
.p-card-y { color: #f59e0b; }
.p-card-r { color: #ef4444; }
.p-card-b { color: #3b82f6; }


/* ==================================================
   MOBİL TAŞMA VE HİZALAMA DÜZELTMESİ (FIX)
   ================================================== */

/* 1. GLOBAL TAŞMA ENGELLEYİCİ */
html, body {
    overflow-x: hidden; /* Sayfanın bütünüyle sağa kaymasını engeller */
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Tüm elemanların padding'i genişliğe dahil etmesini sağlar (Çok Önemli!) */
* {
    box-sizing: border-box;
}

/* 2. MOBİL KAPLAYICI (CONTAINER) AYARI */
@media (max-width: 768px) {
    .container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: hidden; /* İçindekilerin taşmasını engeller */
    }

    /* 3. FİKSTÜR KARTI TAŞMA SORUNU */
    .tf-card {
        width: 100%; /* Kart ekran genişliğini geçmesin */
        padding: 10px 5px !important; /* İç boşluğu azalt */
    }

    .tf-match-row {
        width: 100%;
        gap: 5px; /* Takımlar ve skor arası boşluğu azalt */
    }

    .tf-team {
        flex: 1;
        min-width: 0; /* Flex yapısında içeriğin sıkışmasına izin ver (Sihirli Kod!) */
    }
    
    /* Takım isimleri çok uzunsa alta kaymasın, ... koysun */
    .tf-team .t-name {
        font-size: 11px !important;
        white-space: nowrap; /* Alt satıra inme */
        overflow: hidden;
        text-overflow: ellipsis; /* Sığmazsa ... koy */
        display: block; /* Ellipsis için gerekli */
    }

    /* Ev sahibi ismi sağa yaslı sığdırma */
    .tf-team.home .t-name { text-align: right; }
    /* Deplasman ismi sola yaslı sığdırma */
    .tf-team.away .t-name { text-align: left; }

    /* Skor Kutusu */
    .tf-score-area {
        width: auto !important; /* Sabit genişliği iptal et */
        min-width: 50px; /* Minimum bir alan bırak */
    }
    
    /* 4. OYUNCU TABLOSU KAYDIRMA ALANI */
    .player-table-container {
        width: 100%;
        max-width: 100vw; /* Ekran genişliğini asla geçme */
        overflow-x: auto; /* Sığmayan tabloyu kendi içinde kaydır */
        display: block;
        margin-bottom: 20px;
        border-radius: 8px; /* Köşeleri yumuşat */
    }
    
    /* Tabloyu biraz küçült */
    .player-stats-table {
        min-width: 500px; /* Çok daraltma, kaydırma barı çıksın */
    }
}

/* ==========================================================================
   FİKSTÜR HİZALAMA VE MOBİL UYUM (FİNAL DÜZELTME)
   ========================================================================== */

/* 1. GENEL TAŞMA ENGELLEYİCİ */
html, body {
    overflow-x: hidden; 
    max-width: 100%;
}
* { box-sizing: border-box; }

/* 2. TAKIM PROFİLİ TEK SÜTUN DÜZENİ */
.team-single-column-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* 3. FİKSTÜR KARTI GENEL YAPISI (Masaüstü & Mobil Ortak) */
.tf-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0; /* İç boşluğu kaldırdık, satırlardan vereceğiz */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    overflow: hidden; /* Taşmaları gizle */
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Header (Tarih ve Hafta) */
.tf-header {
    background: #f8fafc;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

/* --- KRİTİK HİZALAMA ALANI: MAÇ SATIRI --- */
.tf-match-row {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: space-between; /* Yatayda yay */
    padding: 20px 25px;
    width: 100%;
    gap: 15px; /* Elemanlar arası boşluk */
}

/* Takım Kutuları (SAĞ ve SOL KANATLAR) */
.tf-team {
    flex: 1; /* Mevcut boşluğun yarısını sol, yarısını sağ alsın (Eşitlik sağlar) */
    display: flex;
    align-items: center;
    gap: 15px; /* Logo ve yazı arası boşluk */
    min-width: 0; /* İçeriğin taşmasını engeller */
}

/* Ev Sahibi (Sol Taraf) -> [Logo] [İsim] */
.tf-team.home {
    justify-content: flex-start; /* Sola yasla */
    text-align: left;
}

/* Deplasman (Sağ Taraf) -> [İsim] [Logo] */
.tf-team.away {
    justify-content: flex-end; /* Sağa yasla */
    text-align: right;
}

/* Takım İsimleri */
.tf-team .t-name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Logolar */
.tf-team img {
    width: 40px; 
    height: 40px; 
    object-fit: contain;
    flex-shrink: 0; /* Asla büzüşmesin */
}

/* Skor Alanı (ORTA MERKEZ) */
.tf-score-area {
    width: auto;
    min-width: 90px; /* Sabit bir genişlik ver ki merkez kaymasın */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.score-box {
    font-size: 18px;
    font-weight: 900;
    background: #0f172a;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    min-width: 35px;
    text-align: center;
}
.vs-badge {
    background: #e2e8f0;
    color: #64748b;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
}

/* --- MOBİL UYUMLULUK (Max-Width 768px) --- */
@media (max-width: 768px) {
    
    .container { padding: 0 10px !important; }

    /* Header'ı mobilde biraz sıkıştır */
    .tf-header { padding: 8px 10px; font-size: 10px; }

    /* Maç Satırını Mobilde Daralt */
    .tf-match-row {
        padding: 15px 5px !important; /* Yan boşlukları azalt */
        gap: 5px !important;
    }

    /* Takım Logolarını Mobilde Küçült */
    .tf-team img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Takım İsimlerini Mobilde Küçült */
    .tf-team .t-name {
        font-size: 11px !important;
        /* Uzun isimleri kesip ... koymak için: */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* İsim ve Logo Arası Boşluğu Azalt */
    .tf-team { gap: 6px !important; }

    /* Skor Alanını Mobilde Küçült */
    .tf-score-area { min-width: 60px !important; gap: 4px !important; }
    .score-box { 
        font-size: 14px !important; 
        padding: 4px 8px !important; 
        min-width: 25px !important;
    }

    /* OYUNCU TABLOSU MOBİL AYARI */
    .player-table-container {
        width: 100%;
        overflow-x: auto;
    }
    .player-stats-table th, .player-stats-table td {
        padding: 8px 4px;
        font-size: 11px;
    }
}