/* styles/responsive.css - DİKEY VE YATAY MOBİL DÜZELTMELERİ */

@media screen and (max-width: 768px) {
    /* --- 1. SİTENİN KOMPLE SAĞA SOLA KAYMASINI ENGELLE --- */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
        position: relative;
    }

    /* --- 2. TABLO TAŞMA SORUNU --- */
    #puan-tablosu-alani {
        width: 100%;
        max-width: 100vw;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        margin-bottom: 15px;
    }
    .puan-tablosu {
        min-width: 100% !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }
    .puan-tablosu th, .puan-tablosu td {
        padding: 6px 3px !important;
    }

    /* --- 3. ELEME AĞACI TAŞMA SORUNU --- */
    #mac-icerik-alani, .bracket-kapsayici, .eleme-agaci, .bracket-wrapper {
        width: 100%;
        max-width: 100vw;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    .bracket-tur, .bracket-round {
        min-width: 130px;
    }

    /* --- 4. GENEL MODAL VE KUTU GENİŞLİKLERİ --- */
    .modal-kutu, .container, .privacy-kutu, .contact-kutu {
        width: 95% !important;
        max-width: 100vw !important;
        padding: 15px !important;
        margin: 10px auto !important;
        box-sizing: border-box;
    }

    /* --- 5. YENİ GAZETE (HABERLER) MOBİL TASARIMI --- */
    #newspaper-modal .modal-kutu {
        padding: 10px !important;
    }
    .newspaper-wrapper {
        padding: 10px !important; /* Dış boşluğu daralt */
    }
    .haber-icerik {
        column-count: 1 !important; /* Mobilde yazıyı tek sütuna indir */
        font-size: 0.95rem !important;
        padding: 0 !important;
    }
    .haber-baslik {
        font-size: 1.3rem !important;
    }
    .gecmis-liste {
        grid-template-columns: 1fr !important; /* Alt haberleri alt alta diz */
        gap: 15px !important;
    }
    .gecmis-item {
        border-right: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-bottom: 1px dashed #ccc;
        padding-bottom: 15px;
    }
    /* Son geçmiş haberin altındaki çizgiyi kaldır */
    .gecmis-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* --- 6. İSTATİSTİK VE TURNUVA RAPORU MOBİL TASARIMI --- */
    /* 5'li MVP kartlarını ve global raporu alt alta diz */
    #modal-istatistik-listesi > div > div > div {
        grid-template-columns: 1fr !important; 
    }
    /* İstatistik modalının içindeki listeyi daha rahat kaydırılır yap */
    #modal-istatistik-listesi {
        max-height: 70vh !important; 
    }
    /* "En Kasap Takım" grid'i mobilde çok uzamasın */
    .rapor-grid-kart {
        grid-column: span 1 !important;
    }
    .canli-ist-sekme-btn {
        font-size: 0.7rem !important;
        padding: 8px 4px !important;
    }

    /* --- 7. FİKSTÜR VE İNCE AYARLAR --- */
    .mac-satiri {
        padding: 8px 5px !important;
    }
    .takim-sol, .takim-sag {
        font-size: 0.8rem !important;
        max-width: 80px; 
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .skor-kutusu {
        padding: 3px 6px !important;
        font-size: 0.85rem !important;
    }
    
    /* Sekme butonlarının sığması için */
    .grup-sekmeleri {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }
    .sekme-btn {
        padding: 8px 2px !important;
        font-size: 0.8rem !important;
        width: 100% !important;
    }
    .sekme-ucunculer, .sekme-eleme {
        grid-column: span 2;
    }

    /* Ana butonları (Sonraki tura geç, Maç Günü tamamla) mobilde daralt */
    #panel-aksiyonlar {
        flex-direction: column;
        gap: 10px;
    }
    #panel-aksiyonlar button {
        width: 100%;
        margin: 0;
    }
}