<style>
    /* GENEL KONTEYNER VE RENKLER */
    .hafta-konteynir {
        max-width: 900px;
        margin: 20px auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #1a1a1a; 
        color: #e0e0e0; 
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #333;
    }

    .hafta-baslik {
        color: #ff3d3d; 
        text-align: center;
        padding: 15px;
        margin: 0;
        background: #111;
        border-bottom: 2px solid #ff3d3d;
        font-size: 1.4em;
    }

    .tarih-baslik {
        background-color: #252525;
        color: #ffca28; 
        padding: 8px;
        text-align: center;
        margin: 0;
        font-size: 0.95em;
        border-bottom: 1px solid #333;
    }

    /* MAÇ SKOR SATIRI VE LOGOLAR */
    .mac-satiri {
        display: flex;
        align-items: center;
        justify-content: center; 
        padding: 15px;
        background: #1a1a1a;
        border-bottom: 1px solid #333;
    }

    .takim {
        width: 38%; 
        display: flex;
        align-items: center; 
        font-weight: bold;
        font-size: 1.1em;
        color: #fff;
    }
    
    .takim.ev { justify-content: flex-end; text-align: right; }
    .takim.deplasman { justify-content: flex-start; text-align: left; }

    .skor { 
        width: 15%; 
        text-align: center; 
        font-size: 1.5em; 
        font-weight: bold; 
        color: #ffca28; 
        background: #222;
        padding: 8px;
        border-radius: 5px;
        margin: 0 15px;
        border: 1px solid #444;
    }

    .logo {
        width: 32px; 
        height: 32px;
        object-fit: contain;
        vertical-align: middle;
        border: 1px solid #444;
        border-radius: 50%;
        background-color: #fff;
        padding: 2px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    .takim.ev .logo { margin-left: 12px; }
    .takim.deplasman .logo { margin-right: 12px; }

   /* ACCORDION (AÇILIR PANEL) GÜNCELLEME */
    .accordion {
        background-color: #2a2a2a;
        color: #bbb;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        border: none;
        text-align: center;
        outline: none;
        transition: 0.3s;
        font-size: 13px;
        border-bottom: 1px solid #333;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px; /* Yazı ile ok arasındaki boşluk */
    }

    /* Sadece ok ve detay yazısı için yeşil renk */
    .detay-yazisi {
        color: #00FF00; 
        font-weight: bold;
        font-size: 14px;
    }

    .active, .accordion:hover { background-color: #333; color: #fff; }

    .panel {
        background-color: #121212;
        display: none;
        overflow: hidden;
        border-bottom: 1px solid #444;
        padding: 5px 0;
    }

    /* DETAY SATIRLARI (HIZALAMA DÜZELTİLDİ) */
    .detay-satir {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        border-bottom: 1px solid #222;
        font-size: 13px;
    }

    .olay-sol, .olay-sag {
        width: 42%;
        display: flex;
        align-items: center; /* İkon ve yazıyı dikeyde aynı hizaya getirir */
        color: #ccc;
    }

    .olay-sol { justify-content: flex-end; text-align: right; padding-right: 15px; }
    .olay-sag { justify-content: flex-start; text-align: left; padding-left: 15px; }

    .dakika { 
        width: 16%; 
        text-align: center; 
        font-weight: bold; 
        color: #ff3d3d; 
        font-size: 1.1em;
    }

    /* İKONLARIN YAZI İLE HİZALANMASI */
    .ikon {
        width: 16px;
        height: auto;
        margin: 0 6px; /* Yazı ile ikon arasındaki boşluk */
        display: inline-block;
        vertical-align: middle;
    }

    .degisiklik { 
        font-style: italic; 
        color: #888; 
        font-size: 0.9em; 
        display: flex; 
        align-items: center; 
    }

    /* Ev sahibi kısmında ikonların yazının solunda/sağında durma mantığı */
    .olay-sol.degisiklik { justify-content: flex-end; }
    .olay-sag.degisiklik { justify-content: flex-start; }
.bay-satiri {
    display: flex;
    gap: 50px; /* Yazıları iki uca iter, bitişikliği önler */
    align-items: center;
    padding: 10px 20px; /* Kenarlardan biraz nefes alsın */
    background-color: #332b00; 
    border: 1px dashed #ffcc00;
    color: #ffcc00;
    font-weight: bold;
}
/* Mobil Gizleme Sınıfı */
    @media (max-width: 600px) {
        .mobil-gizle {
            display: none;
        }
        table {
            font-size: 14px; /* Mobilde yazılar biraz daha okunaklı olsun */
        }
    }

   


/* Puan Durumu Genel Tasarım GÜNCELLEME (Oval) */
    .puan-tablosu {
        width: 100%;
        border-collapse: separate; 
        border-spacing: 0;
        background-color: #1a1a1a;
        color: #e0e0e0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-top: 20px;
        border: 1px solid #333;
        border-radius: 12px;
        overflow: hidden; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
        
       

    .puan-tablosu thead tr {
        background-color: #2c2c2c;
        color: #00ff00;
        font-weight: bold;
    }

   .puan-tablosu td, .puan-tablosu th {
        padding: 12px 8px;
        border-bottom: 1px solid #2a2a2a; 
        text-align: center;
        /* Şeritlerin her satırda görünmesini garanti altına alıyoruz */
        border-left: 0px solid transparent; 
    }
/* ŞERİT RENKLERİ - TD bazlı uygulama */
    /* 1. Sıra - Turkuaz */
    .sampiyon-ligi td:first-child { border-left: 7px solid #00D4FF !important; }
    /* 2. Sıra - Derin Mavi */
    .sl-eleme td:first-child { border-left: 7px solid #0055FF !important; }
    /* 3. Sıra - Altın Sarısı */
    .avrupa-ligi td:first-child { border-left: 7px solid #FFC107 !important; }
    /* 4. Sıra - Bahar Yeşili */
    .konferans-ligi td:first-child { border-left: 7px solid #00FF88 !important; }
    /* Düşme Hattı - Kan Kırmızı */
    .dusme-hatti td:first-child { border-left: 7px solid #FF3333 !important; }

    /* Takım isimleri sola yaslı */
    .puan-tablosu td.takim-adi {
        text-align: left;
        padding-left: 15px;
    }

    /* Mouse Hover Efekti */
    .puan-tablosu tbody tr:hover {
        background-color: #262626 !important; /* Biraz daha belirgin hover */
        cursor: pointer;
        transition: 0.2s;
    }

    /* Çizgi Renkleri (Genişlik artırıldı) */
    .sampiyon-ligi { border-left: 7px solid #00D4FF !important; } /* Turkuaz */
    .sl-eleme { border-left: 7px solid #0055FF !important; }      /* Derin Mavi */
    .avrupa-ligi { border-left: 7px solid #FFC107 !important; }    /* Altın Sarısı */
    .konferans-ligi { border-left: 7px solid #00FF88 !important; } /* Bahar Yeşili */
    .dusme-hatti { border-left: 7px solid #FF3333 !important; }    /* Kan Kırmızı */

    /* Alt Bilgi Kutusu GÜNCELLEME (Oval) */
    .bilgi-kutusu {
        margin-top: 20px;
        padding: 15px;
        background-color: #111;
        
        /* OVAL KÖŞE VE ÇERÇEVE */
        border: 1px solid #333;
        border-radius: 10px;
        
        font-size: 13px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    /* Alt Bilgi Satırları */
    .bilgi-satiri {
        display: block;
        padding: 6px 0;
        border-bottom: 1px solid #222;
    }
    .bilgi-satiri:last-child { border-bottom: none; }

    /* Mobil Gizleme */
    @media (max-width: 600px) {
        .mobil-gizle {
            display: none;
        }
        .puan-tablosu td, .puan-tablosu th {
            padding: 8px 4px;
            font-size: 13px;
        }
    }
/* Takım isimleri sola yaslı */
    .puan-tablosu td.takim-adi {
        text-align: left;
        padding-left: 15px;
    }

    /* Mouse Hover Efekti */
    .puan-tablosu tbody tr:hover {
        background-color: #262626 !important;
        transition: 0.2s;
    }
/* Navigasyon Buton Grubu */
    .nav-konteynir {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 30px;
        padding: 20px 0;
    }

    .nav-buton {
        background-color: #222;
        border: 1px solid #333;
        border-radius: 8px;
        color: #00ff00; /* Senin yeşilin */
        padding: 12px 20px;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        transition: 0.3s;
        text-align: center;
        min-width: 150px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }

    .nav-buton:hover {
        background-color: #00ff00;
        color: #000;
        border-color: #00ff00;
        transform: translateY(-2px);
    }

    /* Mobilde Butonlar Alt Alta Gelsin */
    @media (max-width: 600px) {
        .nav-konteynir {
            flex-direction: column;
            align-items: center;
        }
        .nav-buton {
            width: 90%;
        }
    }
</style>