@import url("/css/base.css");
@import url("/css/layout.css");
@import url("/css/modal.css");
@import url("/css/game-setup.css");
@import url("/css/game-content.css");
@import url("/css/history-page.css");
@import url("/css/responsive.css");
@import url("/css/documentation-page.css");

:root {
    --background-color: #1a1a2e; /* Koyu Mavi/Mor */
    --primary-color: #1f1f3a;
    --secondary-color: #2a2a4a;
    --accent-color: #8a2be2; /* Mor Vurgu */
    --text-color: #e0e0e0; /* Açık Gri */
    --text-muted-color: #a0a0c0;
    --border-color: #404060;
    --success-color: #28a745; /* Yeşil */
    --danger-color: #dc3545; /* Kırmızı */
    --warning-color: #ffc107; /* Sarı */
    /* Yeni Soft Renkler */
    --success-soft-bg: rgba(40, 167, 69, 0.6); /* Daha saydam yeşil */
    --danger-soft-bg: rgba(220, 53, 69, 0.6); /* Daha saydam kırmızı */
    --success-soft-text: #c8f7c5; /* Açık yeşilimsi yazı */
    --danger-soft-text: #f7c5c5; /* Açık kırmızımsı yazı */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 15px;
}

.container { 
    max-width: 800px; /* Biraz daha genişletelim */
    margin: auto; 
}

/* Yeni: Ana Başlık ve Logo Stilleri */
.main-header {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala (isteğe bağlı) */
    margin-bottom: 20px; /* Altındaki navigasyondan boşluk */
    gap: 10px; /* Logo ve başlık arası boşluk */
}

/* Yeni: Logo Giriş Animasyonu */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.logo {
    height: 60px; /* Logoyu biraz daha büyüt (50px -> 60px) */
    width: auto; /* Genişlik otomatik ayarlansın */
    transition: transform 0.2s ease-in-out; /* Animasyon için geçiş ekle */
    /* Yeni Giriş Animasyonu */
    animation: logoFadeIn 0.6s ease-out 0.1s forwards;
    /* animation: name duration timing-function delay fill-mode */
}

.logo:hover {
    transform: scale(1.1); /* Hover animasyonu: Hafif büyütme */
}

h1, h2, h3, h4 {
    text-align: center;
    margin-bottom: 15px;
    color: var(--text-color);
}

.section {
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #6a1db2; /* Biraz daha koyu vurgu */
}

input[type="number"] {
     background-color: var(--secondary-color);
     border: 1px solid var(--border-color);
     color: var(--text-color);
     padding: 8px;
     border-radius: 4px;
     width: 70px; /* Genel sayı input genişliği */
     text-align: center;
}

/* ------ Header Bölümü ------ */
.game-header {
    display: flex;
    flex-direction: column; /* Öğeleri alt alta sırala */
    align-items: center;   /* Öğeleri yatayda ortala */
    justify-content: space-evenly; /* Eklendi: Dikeyde eşit dağıt */
    padding-bottom: 10px; /* Mevcut padding kalsın */
}
.header-top {
    display: flex;
    /* justify-content: space-between; // Kaldırıldı */
    flex-direction: column; /* Eklendi: Dikey sıralama */
    align-items: center; /* Zaten vardı, yatayda ortalama */
    /* margin-bottom: 15px; // Kaldırıldı */
    flex-wrap: wrap; /* Küçük ekranda alta kaydır */
    gap: 10px;
}
.team-scores {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
}
.team-scores .score {
    background-color: var(--secondary-color);
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
}
.team-scores .vs {
    color: var(--text-muted-color);
}

/* Yeni: Kazanan Göstergesi Stili */
.winner-indicator {
    font-size: 0.85em; /* Daha küçük font */
    font-weight: bold;
    color: var(--warning-color); /* Farklı bir renk olabilir */
    margin: 0 5px; /* Komşu elementlerden boşluk */
}

/* Yeni: Küçük kazanan göstergesi */
.winner-indicator-small {
    font-size: 0.65em; /* İstenen boyut */
}

.winner-tag {
    font-size: 0.8em;
    background-color: var(--warning-color);
    color: #333;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 10px;
    font-weight: bold;
}
.game-info {
    color: var(--text-muted-color);
}
.part-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}
.tab-btn {
    background: none;
    border: none;
    padding: 10px 15px;
    color: var(--text-muted-color);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Border'ın altına gelsin */
}
.tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Yeni: Tamamlanmış parti sekmesi için stil */
.tab-btn.part-completed {
    /* İsteğe bağlı: Tamamlanmış sekmenin rengini biraz soluklaştırabiliriz */
    /* opacity: 0.8; */
    /* color: var(--text-muted-color); */
}

.tab-btn.part-completed::after {
    content: '🏁'; /* Bitiş bayrağı ikonu (veya 'Bitti') */
    font-size: 0.8em; /* İkonu biraz küçült */
    margin-left: 5px; /* Metinden biraz boşluk bırak */
    background-color: rgba(255, 193, 7, 0.3); /* Şeffaf sarı (warning-color) */
    padding: 1px 4px; /* İç boşluk */
    border-radius: 3px;
    color: var(--warning-color); /* İkon/yazı rengi (daha belirgin sarı) */
}

/* Aktif ve tamamlanmış sekme çakışması için (örn. son parti bittiğinde) */
.tab-btn.active.part-completed {
    /* Aktif stilini koru, ama ::after yine de görünsün */
    /* Ekstra stil gerekirse buraya */
}

/* ------ Puan Giriş Bölümü ------ */
#score-entry h3 { margin-bottom: 20px; }
.score-entry-teams {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde tek sütun */
    gap: 20px; /* Takımlar arası boşluk */
}

.team-entry {
    background-color: var(--secondary-color); /* Hafif farklı arkaplan */
    border-radius: 8px;
    padding: 15px;
    border-top: 3px solid var(--accent-color); /* Üstüne vurgu çizgisi */
}

.team-entry h4 {
    margin-bottom: 15px;
    color: var(--text-color);
    text-align: left; /* Takım ismini sola hizala */
    font-size: 1.1em;
}

.player-score-entry {
    display: grid;
    /* Sabit genişlik (isim) | Sabit genişlik (input) | Kalan alan (cezalar) */
    grid-template-columns: 100px 70px 1fr;
    grid-template-areas: "name input penalties"; /* Tek satır düzeni */
    gap: 10px; /* Sütunlar arası boşluk */
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background-color: var(--secondary-color);
    border-radius: 5px;
}
.player-name {
    grid-area: name;
    font-weight: bold;
    white-space: nowrap; /* Uzun isimlerin taşmasını engelle */
    overflow: hidden; /* Taşan kısmı gizle */
    text-overflow: ellipsis; /* Taşan kısma ... ekle */
    margin-bottom: 0; /* Alt boşluğu kaldır */
}

/* Oyuncu altındaki ceza gösterim alanı */
.round-penalties-display {
    grid-area: penalties; /* Cezaları sağdaki sütuna ata */
    text-align: right;
    min-height: 1.2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.penalty-item {
    font-size: 0.85em;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

.penalty-item.penalty { /* Ceza (+) */
    /* color: var(--danger-color); */ /* Bu satırı kaldır/yorumla */
    /* background-color, border vb. diğer stiller burada olabilir */
}

.penalty-item.reward { /* Ödül (-) */
    /* background-color: var(--success-color); */ /* Kaldırıldı: game-content.css'deki stili eziyordu */
    /* color: white; */                       /* Kaldırıldı: game-content.css'deki stili eziyordu */
}

.score-input { /* Puan giriş inputu */
    grid-area: input; /* Input'u ortadaki sütuna ata */
    width: 100%; /* Sütunun (70px) tamamını kapla */
    padding: 8px 5px; /* İç boşluğu ayarla */
    text-align: center;
}
.penalty-btn {
    padding: 5px 8px;
    font-size: 1.1em;
    line-height: 1;
    min-width: 30px;
}
.penalty-btn.minus {
    background-color: var(--danger-color);
}
.penalty-btn.minus:hover {
    background-color: #b02a37;
}
.penalty-btn.plus {
    background-color: var(--success-color);
}
.penalty-btn.plus:hover {
    background-color: #1e7e34;
}

/* ------ Skor Geçmişi Bölümü ------ */
#score-history h3 { margin-bottom: 20px; }
#score-history-list {
    /* display: flex; kaldırıldı, normal akış */
    /* flex-direction: column; kaldırıldı */
    /* gap: 10px; kaldırıldı */
}

/* Yeni: Parti Özeti Alanı Stilleri */
.part-summary-section {
    background-color: var(--secondary-color); /* Skor geçmişiyle uyumlu */
    padding: 10px 15px;
    margin-bottom: 15px; /* Skor listesinden ayır */
}

.part-summary-section h4 { /* Başlığı küçült */
    margin-bottom: 5px;
    font-size: 0.9em;
    text-align: center;
    color: var(--text-muted-color);
}

.part-summary-section .team-summary-section { /* Takım A ve Takım B için ayrı bloklar */
    margin-bottom: 5px; /* Takımlar arası boşluk */
}

.part-summary-section .team-summary-compact { /* Kompakt takım özeti satırı */
    display: flex;
    align-items: center;
    gap: 2px 0; /* Dikey padding azaltıldı */
    font-size: 0.75em; /* Eklendi: Genel yazı boyutu */
}

.part-summary-section .team-abbr {
    font-weight: bold;
    color: var(--text-muted-color);
    min-width: 30px; /* Daha da daralt */
}

.part-summary-section .team-final-score {
    font-weight: bold;
    /* font-size: 1em; // Kaldırıldı: Üst kuraldan miras alacak */
}

.part-summary-section .team-penalty-compact {
    /* font-size: 0.8em; // Kaldırıldı: Üst kuraldan miras alacak */
    color: var(--text-muted-color);
}

.part-summary-section .toggle-player-details {
    background: none;
    border: none;
    color: var(--text-muted-color);
    font-size: 0.9em; /* Butonu küçült */
    padding: 0 2px; /* Padding azalt */
    margin-left: auto; /* Sağa yasla */
    cursor: pointer;
    line-height: 1;
}
.part-summary-section .toggle-player-details:hover {
    color: var(--accent-color);
}

/* Açıkken yukarı ok */
.part-summary-section .toggle-player-details.open {
    /* transform: rotate(180deg); */ /* İkonu değiştirmek daha iyi */
    content: '▲';
}

.part-summary-section .player-details-container {
    /* display: none; JS ile yönetiliyor */
    display: flex; /* Oyuncu kolonlarını yan yana koy */
    gap: 10px; /* Kolonlar arası boşluk */
    padding: 8px 0 5px 0; /* Dikey boşluk, içeriden başlatma */
    border-top: 1px dashed var(--border-color); /* Üstteki kompakt özetten ayır */
    margin-top: 5px; /* Üstteki kompakt özetten boşluk */
}

.part-summary-section .player-summary-column {
    flex: 1; /* Kolonlar eşit yer kaplasın */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* İçeriği sola daya */
    font-size: 0.8em; /* Kolon içi genel font küçült */
}

.part-summary-section .player-summary-column .player-name {
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--accent-color); /* İsmi vurgula */
    text-align: left; /* İsmi sola daya */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Tam genişlikte taşmayı engelle */
}

.part-summary-section .player-stat-row {
    display: flex;
    align-items: center; /* Dikey hizalama için */
    gap: 5px; /* İkon ve değer arası boşluk */
    width: 100%; /* Kolon genişliğini kullan */
    justify-content: flex-start; /* İkon ve değeri sola daya */
    margin-bottom: 2px; /* Satırlar arası hafif boşluk */
}

.part-summary-section .stat-icon {
    font-size: 0.9em; /* İkon boyutunu ayarla */
    display: inline-block;
    min-width: 1.2em; /* Hizalama için */
    text-align: center;
}

.part-summary-section .stat-icon.penalty-icon {
    color: var(--danger-color);
}

.part-summary-section .stat-icon.reward-icon {
    color: var(--success-color);
}

.part-summary-section .stat-icon.total-icon {
    font-weight: bold;
    color: var(--text-color); /* Toplam ikonu normal renk */
}

.part-summary-section .stat-value {
    /* Genel değer stili */
}

.part-summary-section .stat-value.penalty-value {
    color: var(--danger-soft-text);
}

.part-summary-section .stat-value.reward-value {
    color: var(--success-soft-text);
}

.part-summary-section .stat-value .penalty-item { /* Ceza/Ödül için */
    font-size: 0.95em; /* Kendi font boyutuna göre ayarla */
    padding: 1px 3px; /* Daha küçük padding */
}

.part-summary-section .stat-value.total {
    font-weight: bold;
    color: var(--text-color); /* Toplam değeri vurgula */
}

.history-entry {
    background-color: var(--secondary-color);
    border-radius: 5px;
    overflow: hidden; /* Detaylar gizlenince taşmasın */
}
.history-entry .summary {
    display: flex;
    align-items: center; /* Dikey hizalama eklendi */
    padding: 10px 15px;
    cursor: pointer;
    flex-wrap: wrap;
    gap: 8px;
}

/* Eski .summary .score stilini kaldıralım veya güncelleyelim */
/* .history-entry .summary .score {
     font-weight: bold;
} */

/* Yeni Skor Geçmişi Summary Stilleri */
.history-entry .summary .round-badge {
    background-color: var(--secondary-color); /* Arka plan */
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.7em; /* Değiştirildi: 0.85em -> 0.7em */
    font-weight: bold;
    color: var(--text-muted-color);
    margin-right: auto; /* Diğer elementleri sağa itsin */
}

.history-entry .summary .team-abbr {
    font-weight: bold;
    color: var(--text-muted-color);
    margin: 0 5px; /* Skor rozetlerinden hafif boşluk */
}

.history-entry .summary .score-badge {
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 1.1em; /* Skorlar biraz daha büyük */
    font-weight: bold;
    background-color: var(--secondary-color); /* Varsayılan arka plan */
    color: var(--text-color);
    min-width: 50px; /* Minimum genişlik */
    text-align: center;
}


.history-entry .summary .vs-history {
     color: var(--text-muted-color);
     margin: 0 5px;
}

/* Eski .score-diff-tag stilini kaldır */
/* .history-entry .summary .score-diff-tag { ... } */
/* .history-entry .summary .score-diff-tag.winner { ... } */

.history-entry .details {
    padding: 15px; /* Padding'i sadece details'e verelim */
    border-top: 1px solid var(--border-color);
    background-color: var(--primary-color);
}
/* Yeni Detaylar Grid Yapısı */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* İki eşit sütun */
    gap: 20px; /* Sütunlar arası boşluk */
}
.details-team-name {
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 8px;
    text-align: center; /* Takım ismini ortala */
}
.details-player {
    margin-bottom: 5px;
    color: var(--text-muted-color);
}

/* Detaylar içindeki ceza/ödül gösterimi */
.detail-penalty {
    font-size: 0.9em;
    font-weight: bold;
    margin-left: 5px; /* Skordan biraz ayır */
}
.detail-penalty.penalty { /* Ceza (+) */
    /* color: var(--danger-color); */ /* Bu satırı kaldır/yorumla */
    /* background-color, border vb. diğer stiller burada olabilir */
}
.detail-penalty.reward { /* Ödül (-) */
    /* background-color: var(--success-color); */ /* Kaldırıldı: game-content.css'deki stili eziyordu */
    /* color: white; */                       /* Kaldırıldı: game-content.css'deki stili eziyordu */
}

.history-entry .details p { /* Eski p etiketli stilleri kaldıralım veya yorumlayalım */
    /* margin-bottom: 5px; */
}
.toggle-details {
    background: none;
    border: none;
    color: var(--text-muted-color);
    font-size: 1.2em;
    padding: 0 5px;
    margin-left: auto; /* Butonu en sağa it */
    cursor: pointer; /* İmleç ekleyelim */
    line-height: 1; /* Dikey hizalama için */
}

/* Yeni: El düzenleme ve detay butonlarını gruplayan div */
.round-actions {
    display: flex;
    align-items: center;
    gap: 5px; /* Butonlar arası boşluk */
    margin-left: auto; /* Buton grubunu sağa it */
}

/* Yeni: Düzenle butonu için stil */
.edit-round-btn {
    background: none;
    border: none;
    color: var(--text-muted-color);
    font-size: 1em; /* Yazı boyutunu küçült (ikon) */
    padding: 0 3px; /* Padding'i azalt */
    cursor: pointer;
    line-height: 1; /* Dikey hizalama için */
}

.edit-round-btn:hover,
.toggle-details:hover {
    color: var(--accent-color); /* Hover rengi */
}

/* ------ Footer Bölümü ------ */
.game-footer {
    text-align: center;
    margin-top: 20px;
}
.game-footer button {
    width: 80%;
    max-width: 300px;
    padding: 12px;
    font-size: 1.1em;
    /* Aktif durum için geçiş ekle */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.game-footer button:active {
     background-color: #5a0da1; /* Mevcut hover renginden biraz daha koyu */
     transform: scale(0.98); /* Hafif küçülme efekti */
}

/* Pasif (disabled) durum için stil */
.game-footer button:disabled {
    background-color: var(--border-color);
    color: var(--text-muted-color);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none; /* Aktif efekti iptal et */
}

/* Kurulum Adımları Stilleri (Şimdilik kalabilir, sonra kaldırılabilir) */
.setup-step { position: relative; padding-top: 30px; } 
.step-title { position: absolute; top: -1px; left: -1px; background-color: var(--secondary-color); padding: 5px 10px; border: 1px solid var(--border-color); border-bottom-right-radius: 5px; font-size: 0.9em; font-weight: bold; }
.setup-step .player-inputs div, .setup-step > div { margin-bottom: 15px; }
.setup-step button { margin-right: 10px; }
.setup-step input[type="text"] { background-color: var(--secondary-color); border: 1px solid var(--border-color); color: var(--text-color); padding: 8px; border-radius: 4px; width:100%; }

/* ------ Modal Stilleri ------ */
.modal {
    position: fixed; /* Sayfa kaysa bile sabit kal */
    z-index: 1000; /* Diğer her şeyin üzerinde */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* İçerik sığmazsa kaydır */
    background-color: rgba(0, 0, 0, 0.6); /* Yarı saydam siyah arka plan */
    display: flex; /* İçeriği ortalamak için */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--primary-color);
    margin: auto;
    padding: 20px 20px; /* Dikey ve YATAY padding 20px yapıldı */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 450px; /* Genişliği biraz artıralım */
    position: relative;
}

/* Modal Başlığı */
.modal-content h3 {
    margin-bottom: 15px; /* Başlık altı boşluk azaltıldı (varsayılan 15px?) */
    text-align: center; /* Zaten merkezde ama emin olalım */
}

.close-btn {
    color: var(--text-muted-color);
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--text-color);
    text-decoration: none;
}

.modal-body .form-group {
    margin-bottom: 15px;
}

.modal-body label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted-color);
}

#modal-player-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Oyuncular arası boşluk (varsayılan) */
    margin-bottom: 20px; /* Miktar grubundan ayırmak için */
    overflow: hidden; /* Taşma durumunda scroll oluşmasını engelle */
}

#modal-player-options label { 
    margin-left: 5px;
    font-weight: normal;
    color: var(--text-color);
    padding: 5px 8px;
    cursor: pointer;
    display: inline-flex; /* Input ile hizalamak için */
    align-items: center;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s ease;
    box-sizing: border-box; /* Kutu modelini border içeriğe dahil et */
    font-size: 0.85em; /* Yazı boyutunu küçült */
    width: auto; /* Genişliği içeriğe göre ayarla */
    white-space: nowrap; /* Metni satır sonunda kesme, tek satırda tut */
}

#modal-player-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Seçildiğinde stil değişimi */
#modal-player-options input[type="radio"]:checked + label {
    background-color: var(--accent-color);
    color: white;
    font-weight: bold;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(138, 43, 226, 0.4);
    transform: none; /* Transform kullanımını engelle */
}

/* Hover durumu */
#modal-player-options label:hover {
    background-color: var(--border-color);
    border-color: var(--accent-color);
}

.modal-body input[type="number"] {
    width: 100%; /* Modal içinde tam genişlik */
    font-size: 16px; /* OTOMATİK ZOOM ENGELLEMEK İÇİN MİN 16PX */
}

.modal-footer {
    margin-top: 15px; /* Footer üst boşluğu azaltıldı (20px -> 15px) */
    text-align: right;
}
.modal-footer button {
    margin-left: 10px;
    padding: 8px 15px; /* Buton boyutunu küçült (10px 20px -> 8px 15px) */
}

.modal-footer button:disabled {
    background-color: var(--border-color); /* Pasifken daha soluk arkaplan */
    color: var(--text-muted-color);
    cursor: not-allowed;
    opacity: 0.7;
}

/* İkincil Buton Stili (İptal, Ceza Ekle vb.) */
button.secondary-btn {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
}
button.secondary-btn:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}

/* Üst Navigasyon */
.top-nav {
    text-align: center; /* Butonları ortala */
    margin-bottom: 30px; /* İçerikten biraz daha fazla boşluk */
    display: flex; /* Flexbox kullan */
    justify-content: center; /* Yatayda ortala */
    gap: 10px; /* Butonlar arası boşluk (azaltıldı) */
    flex-wrap: wrap; /* Küçük ekranlarda alt satıra geçsin */
}

/* Yeni Navigasyon Buton Stilleri */
.nav-button {
    background-color: var(--secondary-color); /* Hafif belirgin arka plan */
    color: var(--text-muted-color); /* Normal metin rengi */
    border: 1px solid var(--border-color); /* İnce kenarlık */
    padding: 8px 15px; /* İç boşluk */
    border-radius: 6px; /* Hafif yuvarlak köşeler */
    font-size: 0.95em; /* Biraz daha büyük font */
    display: inline-flex; /* İkon ve metni yan yana hizala */
    align-items: center;
    gap: 8px; /* İkon ve metin arası boşluk */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* Geçiş animasyonu */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

.nav-button .icon {
    font-size: 1em; /* İkon boyutu */
    width: 1.2em; /* İkon için sabit genişlik, hizalamayı iyileştirir */
    text-align: center;
}

.nav-button:hover {
    background-color: var(--primary-color); /* Hover'da biraz daha koyu */
    color: var(--text-color); /* Hover'da daha parlak metin */
    border-color: var(--accent-color); /* Hover'da vurgu rengi kenarlık */
}

.nav-button.active {
    background-color: var(--accent-color); /* Aktif butonda vurgu rengi */
    color: white; /* Aktif butonda beyaz metin */
    border-color: var(--accent-color);
    font-weight: 600; /* Aktif butonu biraz kalın yapalım */
}

/* Sayfa Yönetimi */
.page {
    /* Başlangıçta gizli olması gerekiyorsa app.js yönetecek */
     /* display: none; */ 
}

/* Geçmiş Oyunlar Sayfası */
#history-page h2 {
    margin-bottom: 20px;
}

#saved-games-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.saved-game-entry {
    background-color: var(--secondary-color);
    padding: 15px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap; /* Küçük ekranda alt alta */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.saved-game-entry span { 
    flex-basis: 100%; /* Başlangıçta tam genişlik */
}

@media (min-width: 600px) {
    .saved-game-entry span { 
        flex-basis: auto; /* Geniş ekranda yan yana */
    }
}

.saved-game-actions {
    margin-left: auto; /* Butonları sağa it */
    display: flex;
    gap: 10px;
}

.saved-game-actions button {
    padding: 5px 10px; /* Daha küçük butonlar */
    font-size: 0.9em;
}

/* Silme butonu için özel stil */
button.danger {
    background-color: var(--danger-soft-bg);
    color: var(--danger-soft-text);
    border: 1px solid var(--danger-color);
}
button.danger:hover {
    background-color: var(--danger-color);
    color: white;
}

/* Eski media query'yi kaldırabilir veya genel grid yapısı için bırakabiliriz */
/* Şimdilik genel grid yapısını bırakalım, ama içerik değişti */
@media (min-width: 500px) {
    /* Geniş ekranda özel bir grid gerekmiyorsa bu boş kalabilir veya kaldırılabilir */
    /* Örneğin, 4 inputun yan yana sığdığı bir genişlikte 2x2 grid yapılabilir */
    /* #penalty-entry .penalty-inputs {
        grid-template-columns: repeat(2, 1fr);
    } */
}

/* --- Yeni Oyun Kurulum Sayfası Stilleri --- */
#game-setup {
    /* section stili zaten temel arkaplan ve padding sağlıyor */
    padding: 30px; /* Padding'i biraz artıralım */
}

.setup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#setup-title {
    text-align: left;
    margin-bottom: 0; /* Header içinde boşluk olmasın */
    font-size: 1.4em;
}

#step-indicator {
    font-size: 0.9em;
    color: var(--text-muted-color);
}

.progress-bar-container {
    width: 100%;
    background-color: var(--secondary-color);
    border-radius: 5px;
    height: 8px;
    margin-bottom: 30px;
    overflow: hidden;
}

#progress-bar {
    height: 100%;
    width: 33.33%; /* Başlangıçta 1/3 */
    background-color: var(--accent-color);
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

#setup-section-title {
    text-align: left;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--text-muted-color);
}

#setup-inputs-container input[type="text"],
#setup-inputs-container input[type="number"] {
    width: 100%; /* Inputlar tam genişlik kaplasın */
    margin-bottom: 15px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 12px 15px;
    border-radius: 4px;
    font-size: 16px; /* OTOMATİK ZOOM ENGELLEMEK İÇİN MİN 16PX */
}
#setup-inputs-container input::placeholder {
    color: var(--text-muted-color);
}

#setup-inputs-container label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted-color);
}

.setup-navigation {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end; /* Butonları sağa yasla */
    gap: 10px;
}

/* Eski kurulum stillerini kaldır */
/* .setup-step { ... } */
/* .step-title { ... } */
/* .setup-step .player-inputs div, .setup-step > div { ... } */
/* .setup-step button { ... } */
/* .setup-step input[type="text"] { ... } */


/* Geçmiş Oyunlar Sayfası */
/* ... */

/* --- Geçmiş Oyunlar Sayfası Stilleri --- */
#history-page {
    /* .page stili temel display sağlar */
}

.history-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.history-page-header h2 {
    margin-bottom: 0; /* Flex içinde hizalama için */
    text-align: left;
}

/* Ana sayfa butonu için nav-button stilini kullanıyoruz, ek stil gerekirse buraya */
#back-to-main-btn {
    /* Belki farklı bir renk? */
    background-color: var(--secondary-color);
}

.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Akordiyon elemanları arası boşluk */
}

/* Akordiyon Elemanı (Her bir oyun) */
.accordion-item {
    background-color: var(--primary-color); /* section yerine kendi arkaplanı */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden; /* İçerik taşmasın */
}

.accordion-header {
    background-color: var(--secondary-color); /* Başlık arkaplanı */
    padding: 10px 15px; /* Dikey padding azaltıldı */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap; /* Küçük ekranda sığmazsa */
    gap: 10px;
}

.accordion-header:hover {
    background-color: var(--border-color); /* Hover efekti */
}

.game-summary-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9em;
}
.game-summary-info .team-abbr {
     font-weight: bold;
}
.game-summary-info .score-badge {
    font-size: 1em; /* Biraz daha küçük skor */
    padding: 3px 8px;
}

.game-meta-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85em;
    color: var(--text-muted-color);
}

.game-actions {
     display: flex;
    gap: 8px; /* Buton arası boşluğu biraz açalım */
}

.game-actions button {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    font-size: 0.7em;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.game-actions button:hover {
    background-color: var(--primary-color);
    color: var(--accent-color); /* Hover rengi vurgu */
    border-color: var(--accent-color);
}

/* Sil butonu için özel stil */
.game-actions button.danger {
    background-color: var(--danger-soft-bg); /* Soft danger rengi */
    color: var(--danger-soft-text);
    border-color: var(--danger-color);
}

.game-actions button.danger:hover {
     background-color: var(--danger-color); /* Hover'da tam danger */
     color: white;
     border-color: var(--danger-color);
}

/* Akordiyon İçeriği (Partiler) */
.accordion-content {
    padding: 0; /* İç padding'i alt elemanlar yönetecek */
    display: none; /* Başlangıçta gizli */
}

.accordion-item.active .accordion-content {
    display: block;
}

.accordion-item.active .accordion-header {
    /* İsteğe bağlı: Açıkken başlık rengi değişebilir */
    /* background-color: var(--border-color); */
}

/* Parti Akordiyon Elemanı */
.part-accordion-item {
    border-top: 1px solid var(--border-color);
}

.part-accordion-header {
    padding: 12px 20px 12px 30px; /* Soldan biraz içeride */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: rgba(0,0,0, 0.1); /* Hafif farklı arkaplan */
}

.part-accordion-header:hover {
    background-color: rgba(0,0,0, 0.2);
}

.part-summary-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* El Akordiyon İçeriği (El Detayları) */
.part-accordion-content {
    padding: 15px 20px 15px 40px; /* Daha da içeride */
    background-color: rgba(0,0,0, 0.15);
    display: none;
    font-size: 0.9em;
}

.part-accordion-item.active .part-accordion-content {
    display: block;
}

.round-detail-entry {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
}
.round-detail-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Eski Geçmiş Oyunlar Stillerini Kaldır */
/* #saved-games-list { ... } */
/* .saved-game-entry { ... } */
/* .saved-game-actions { ... } */
/* button.danger { ... } - Genel .danger kalabilir veya özel butonlar için düzenlenebilir */

.page-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 0.85em;
    color: var(--text-muted-color);
}

.page-footer a {
    color: var(--accent-color);
    text-decoration: none;
}
.page-footer a:hover {
    text-decoration: underline;
}


/* Geçmiş Oyunlar Sayfası */
/* ... */

/* Responsive Ayarlamalar */
@media (max-width: 600px) {
    /* Footer sticky olunca içeriğin altına girmemesi için game-content'e boşluk ekle */
    #game-content {
        /* Footer yüksekliği + ek boşluk kadar padding */
        /* Gerçek yüksekliğe göre ayarlanabilir */
        padding-bottom: 90px; 
    }

    /* Puan Girişi: Takımları alt alta getir (Bu kalsın) */
    .score-entry-teams {
        grid-template-columns: 1fr; /* Tek sütun */
        gap: 20px; /* Aradaki boşluğu azalt */
    }

    /* Puan Girişi: Oyuncu adı ve inputu TEK SATIRA sığdır */
     .player-score-entry {
        /* Sabit genişlik (isim) | Esnek (input) | Otomatik (cezalar) */
        grid-template-columns: 80px 1fr auto;
        grid-template-areas: "name input penalties"; /* Tek satır */
        gap: 4px 6px; /* Dikey/Yatay boşlukları azalt */
        padding: 6px 8px; /* İç boşluğu azalt */
        align-items: center; /* Dikeyde ortala */
    }
    .player-name {
         font-size: 0.85em; /* Adı daha da küçült */
         margin-bottom: 0; /* Alt boşluğu kaldır */
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         /* max-width: 80px; Artık gereksiz, sütun genişliği sabit */
         grid-area: name; /* Grid alanını tekrar ata */
    }
    .score-input {
        width: 100%; /* Input kalan alanı doldursun (1fr sütunu) */
        padding: 5px; /* Input iç boşluğunu azalt */
        font-size: 16px; /* OTOMATİK ZOOM ENGELLEMEK İÇİN MİN 16PX */
        grid-area: input; /* Grid alanını tekrar ata */
    }
    .round-penalties-display {
        grid-area: penalties; /* Grid alanını tekrar ata */
        align-items: center;
        min-height: auto;
        gap: 3px; /* Ceza arası boşluğu azalt */
    }
    .penalty-item {
        font-size: 0.7em; /* Ceza etiketini daha da küçült */
        padding: 1px 2px;
    }

     /* Header'ı Daha Kompakt Yap (Tekrar Ayarla) */
    .header-top {
        gap: 8px; /* Genel boşluğu azalt */
        /* align-items: baseline; // Baseline yerine merkezde hizala */
        align-items: center; /* Eklendi: Tekrar ortala */
    }
    .team-scores {
        font-size: 0.95em; /* Fontu küçült */
        gap: 4px; /* Takım elemanları arası boşluk azalt */
        flex-grow: 1; 
        justify-content: center; 
    }
    .team-scores .score {
        padding: 2px 5px; /* Skor kutusu iç boşluk çok azalt */
        font-size: 0.95em; /* Skor fontunu küçült */
    }
     .team-scores .vs {
        font-size: 0.8em;
    }
     .winner-indicator { 
        font-size: 0.7em; /* Küçült */
        margin: 0 2px;
    }
     .game-info {
        font-size: 0.8em; /* Oyun bilgisini küçült */
        flex-shrink: 0; 
        /* text-align: right; // Sağ yerine ortala */
        text-align: center; /* Eklendi: Metni ortala */
    }
     .part-round-info {
         display: inline; /* Satırda kalmaya zorla */
         margin-left: 5px;
    }
    /* Parti Sekmeleri (Bu kalabilir) */
     .part-tabs {
        overflow-x: auto; 
        white-space: nowrap;
    }
    .tab-btn {
        padding: 8px 10px; 
        font-size: 0.9em;
    }

    /* Skor Geçmişi Özetini TEK SATIR Yap (Çok Agresif Küçültme) */
    .history-entry .summary {
        flex-direction: row; /* Tekrar satır */
        align-items: center; 
        flex-wrap: wrap; 
        gap: 2px 4px; /* Boşlukları çok azalt */
        padding: 5px 6px; /* İç boşluğu çok azalt */
        /* position: relative; Kaldırıldı */
    }
    .history-entry .summary .round-badge {
         margin-right: 4px; /* Sağ boşluk */
         margin-bottom: 0; 
         font-size: 0.7em; /* Fontu çok küçült -> İstenen boyut */
         padding: 1px 3px; /* Padding çok azalt */
         order: 1; 
         flex-shrink: 0; 
    }
     .history-entry .summary .team-abbr {
        font-size: 0.75em; /* Fontu çok küçült */
        margin: 0 1px;
        order: 2; 
    }
    .history-entry .summary .score-badge {
        font-size: 0.8em; /* Skoru çok küçült */
        padding: 1px 4px; /* Padding azalt */
        min-width: 28px; /* Min genişlik çok azalt */
        order: 3; 
    }
     .history-entry .summary .vs-history {
        margin: 0 2px;
        font-size: 0.75em;
        order: 4; 
    }
     .history-entry .summary .winner-indicator {
        font-size: 0.65em; /* İkonu çok küçült */
        margin: 0 1px;
         order: 5; 
    }
    .history-entry .summary .toggle-details {
         margin-left: auto; /* Tekrar sağa it */
         font-size: 0.9em; /* Buton boyutunu çok küçült */
         padding: 1px 2px; /* Buton padding çok azalt */
         order: 6; 
         /* position: absolute; Kaldırıldı */
         /* top: 8px; */
         /* right: 8px; */
    }
     
    /* Skor geçmişi detaylarını ÇOK küçült */
    .history-entry .details {
         padding: 8px 10px; /* Padding azalt */
    }
    .details-grid {
         grid-template-columns: 1fr;
         gap: 6px; /* Detaylar arası boşluğu azalt */
    }
     .details-team-name { /* Takım adını küçült */
        font-size: 0.9em;
        margin-bottom: 4px; /* Alt boşluğu azalt */
    }
     .details-player {
        font-size: 0.8em; /* Detay fontunu küçült */
    }
     .detail-penalty {
        font-size: 0.7em; /* Ceza fontunu küçült */
    }

    /* Modal içeriğini biraz daralt (Bu kalabilir) */
     .modal-content {
        padding: 20px;
    }

    /* Modal Oyuncu Seçimini 2x2 Grid Yap */
    #modal-player-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px; /* Grid boşluğu */
    }
    #modal-player-options label {
         /* Mobilde ek ayar gerekirse */
         padding: 8px 5px 8px 0; /* Mobil için dikey padding artır */
    }

    /* Geçmiş Oyunlar Akordiyon Başlığını Düzenle (Bu kalabilir) */
    /* ... accordion stilleri ... */

    /* Footer'ı mobil ekranın altına sabitle */
    .game-footer {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--background-color); /* Arkaplan ver */
        padding: 10px 15px 15px 15px; /* Sabitken iç boşluk */
        margin-top: 0; /* Üst boşluğu kaldır */
        border-top: 1px solid var(--border-color); /* Ayırıcı çizgi */
        z-index: 10; /* Diğer elemanların üzerinde kal */
        width: 100%; /* Tam genişlik sağla */
    }

    .game-footer button {
        width: 100%; /* Mobilde tam genişlik */
        max-width: none; /* Maksimum genişliği kaldır */
        padding: 15px; /* Daha büyük dokunma alanı */
        font-size: 1.1em; /* Font boyutu aynı kalabilir */
    }

}

/* Daha dar ekranlar için ek ayar (opsiyonel) */
@media (max-width: 400px) {
     body { padding: 10px; } 
     .container { padding: 0 5px; } 
     .section { padding: 15px; } 
     h1 { font-size: 1.5em; } 
     h2 { font-size: 1.3em; } 
     h3 { font-size: 1.1em; } 

     /* Puan girişini daha da daralt */
     .player-score-entry {
        padding: 5px 6px;
        gap: 3px 5px;
    }
     .player-name {
        font-size: 0.8em;
        max-width: 65px; /* Daha da daralt */
    }
    .score-input {
        padding: 4px; 
        font-size: 16px; /* OTOMATİK ZOOM ENGELLEMEK İÇİN MİN 16PX */
    }
    .penalty-item {
        font-size: 0.65em;
    }

     /* Header'ı daha da daralt (Alt alta gelsin) */
     .header-top {
        flex-direction: column; /* Alt alta getir */
        align-items: center; /* Ortala */
        gap: 5px;
    }
     .team-scores {
        font-size: 0.9em; 
        gap: 4px;
        width: 100%; 
        justify-content: center;
        order: 1;
    }
     .game-info {
        font-size: 0.75em;
        order: 2;
        width: 100%;
        text-align: center;
    }
     .part-round-info {
         display: block; /* Blok yap */
         margin-left: 0;
         text-align: center;
    }
    .tab-btn {
        font-size: 0.85em;
        padding: 6px 8px;
    }

    /* Skor geçmişi özetini daha da daralt */
     .history-entry .summary {
        padding: 4px 5px; 
        gap: 2px 3px; 
    }
    .history-entry .summary .round-badge {
         font-size: 0.7em; /* Değiştirildi: 0.65em -> 0.7em */
         padding: 1px 2px; 
    }
     .history-entry .summary .team-abbr {
        font-size: 0.7em; 
    }
     .history-entry .summary .score-badge {
        font-size: 0.75em; 
        padding: 1px 3px; 
        min-width: 25px; 
    }
    .history-entry .summary .vs-history {
        font-size: 0.7em;
    }
     .history-entry .summary .winner-indicator {
        font-size: 0.6em; 
    }
     .history-entry .summary .toggle-details {
         font-size: 0.8em; 
         padding: 0 1px;
    }

     /* Skor geçmişi detaylarını daha da daralt */
     .history-entry .details {
         padding: 6px 8px;
    }
     .details-grid {
         gap: 4px;
    }
      .details-team-name { /* Takım adını daha da küçült */
        font-size: 0.8em;
        margin-bottom: 3px;
    }
      .details-player {
        font-size: 0.75em; 
    }
     .detail-penalty {
        font-size: 0.65em;
    }

}


/* Eski media query'yi kaldırabilir veya genel grid yapısı için bırakabiliriz */
/* Şimdilik genel grid yapısını bırakalım, ama içerik değişti */
/* @media (min-width: 500px) { ... } */

/* --- Yeni Oyun Kurulum Sayfası Stilleri --- */
/* ... */

/* Geçmiş Oyunlar Sayfası */
/* ... */

#open-penalty-modal-btn {
    width: 100%; /* Buton tam genişlik kaplasın */
    margin-top: 15px; /* Üstündeki elemandan boşluk */
    padding: 12px 15px; /* İç boşluğu ayarla */
    font-size: 1em;
    display: flex; /* İkon ve metni yan yana getirmek için */
    align-items: center;
    justify-content: center;
    gap: 8px; /* İkon ve metin arası boşluk */
}

/* Buton metnini gizlemek için (sadece ikon kalsın istenirse) */
/* 
#open-penalty-modal-btn span {
    display: none;
}
#open-penalty-modal-btn {
    font-size: 1.5em; 
    padding: 10px;
}
*/

/* Duyarlılık ayarları daha sonra eklenebilir */
@media (min-width: 600px) {
    .score-entry-teams {
        grid-template-columns: 1fr 1fr; /* Geniş ekranda iki sütun */
        gap: 30px;
    }

    .team-entry {
       /* Geniş ekran için ek stil gerekirse */
    }

    #open-penalty-modal-btn {
        width: auto; /* Geniş ekranda otomatik genişlik */
    }
}

/* Yeni: Edit modal oyuncu grubu */
.edit-player-score-group {
    margin-bottom: 8px; /* Gruplar arası boşluk (10px -> 8px) */
    padding-bottom: 8px; /* Alt boşluk (10px -> 8px) */
    border-bottom: 1px dashed var(--border-color);
}
.edit-player-score-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.edit-player-name-label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px; /* Input çiftlerinden boşluk (8px -> 6px) */
    color: var(--accent-color); /* Oyuncu ismini vurgula */
}

/* Eski: Edit modal input çifti (label + input) - Artık doğrudan kullanılmıyor */
.edit-input-pair {
    display: block; /* Etiket ve inputu yan yana getir (flex -> block) */
    margin-bottom: 8px; /* Boşluk aynı kalabilir veya biraz daha azaltılabilir */
}
.edit-input-pair label {
    display: none; /* Etiketi Gizle */
}
.edit-input-pair input[type="number"] {
    width: 100%; /* Input tam genişlik kaplasın (auto -> 100%) */
}

/* Yeni: Edit modal inputları yan yana koyan satır */
.player-inputs-row {
    display: flex;
    gap: 15px; /* Yan yana input grupları arası boşluk */
}

/* Yeni: Edit modal ikon + input grubu */
.input-with-icon {
    display: flex;
    align-items: center; /* İkon ve inputu dikeyde ortala */
    gap: 10px; /* İkon ve input arası boşluğu artır (8px -> 10px) */
    flex: 1; /* Satırda eşit yer kaplasınlar */
}

.input-with-icon span { /* İkon stili */
    font-size: 1.1em;
}

.input-with-icon input[type="number"] {
    flex-grow: 1; /* Input kalan alanı doldursun */
    width: auto; /* width: 100% yerine flex-grow kullanalım */
    padding: 5px 8px; /* Yüksekliği azaltmak için padding (özellikle dikey) ayarı (8px -> 5px) */
}


.modal-body label { /* Genel modal label stilini biraz ezelim */
    /* display: block; */ /* edit-input-pair içinde flex yönetecek */
    /* margin-bottom: 8px; */
    /* color: var(--text-muted-color); */
    /* Yukarıdaki .edit-input-pair label gizlendiği için bu genel kuralın etkisi azaldı */
}

#modal-player-options {
   /* ... existing options styles ... */
}

/* --- Yeni: Edit modal için mobil düzenlemeler --- */
@media (max-width: 480px) {
    .player-inputs-row {
        flex-direction: column; /* Input gruplarını alt alta getir */
        gap: 8px; /* Alt alta gruplar arası boşluk */
        align-items: stretch; /* Öğeleri tam genişliğe yay */
    }

    .input-with-icon {
        gap: 10px; /* İkon ve input arası boşluğu artır (5px -> 10px) */
    }

    .input-with-icon span { /* İkon boyutu mobilde biraz küçülebilir */
        font-size: 1em;
    }

    .input-with-icon input[type="number"] {
        padding: 6px 8px; /* Mobil için padding */
    }

    /* Takımlar arası görsel ayrım (3. oyuncunun grubunun üstüne çizgi) */
    #edit-round-player-inputs .edit-player-score-group:nth-child(3) {
        border-top: 1px solid var(--border-color);
        padding-top: 10px; /* Çizgi ile arasında biraz boşluk */
        margin-top: 10px; /* Üstteki gruptan biraz boşluk */
    }
}

/* --- Yeni: Edit modal için masaüstü düzenlemeleri --- */
@media (min-width: 481px) {
    .edit-player-score-group {
        display: flex;
        align-items: center; /* Oyuncu adı ve input satırını dikeyde ortala */
        gap: 15px; /* Label ve input satırı arası boşluk */
    }

    .edit-player-name-label {
        display: inline-block; /* display: block kaldırıldı */
        width: 90px; /* Genişliği artırıldı (70px -> 90px) */
        text-align: right;
        margin-bottom: 0; /* Alt boşluk kaldırıldı */
        flex-shrink: 0; /* Küçülmesin */
    }

    .player-inputs-row {
        flex: 1; /* Kalan alanı doldur */
        gap: 10px; /* İnput grupları arası boşluğu azaltalım */
        display: flex;
        justify-content: space-between; /* Elemanları eşit aralıklarla dağıt */
    }

    .input-with-icon {
        flex: 1; /* Her input eşit yer kaplasın */
        min-width: 0; /* Taşmayı önle */
        gap: 10px; /* İkon ve input arası boşluğu artır (8px -> 10px) */
    }

    .input-with-icon input[type="number"] {
        width: 100%; /* Tam genişlik */
        min-width: 0; /* Taşmayı önle */
        flex-grow: 1; /* Kalan alanı doldur */
        box-sizing: border-box; /* width hesaplamasına padding dahil edilsin */
    }
}

/* ... rest of the css ... */

/* --- Yeni: Modal açıkken body scroll engelleme --- */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    touch-action: none;
}

/* Yeni: Geçmiş oyunlar listesindeki kazanan kupası stili */
.history-winner {
    margin: 0 3px; /* Takım kısaltmasından hafif boşluk */
    font-size: 0.9em; /* İkonu biraz küçültelim */
}

/* --- Dokümantasyon Sayfası İyileştirmeleri --- */
#documentation-page .doc-section {
    background-color: var(--secondary-color); /* Ana bölüm arkaplanından biraz farklı */
    margin-bottom: 15px; /* Bölümler arası boşluk */
}

#documentation-page #doc-toc-section {
    /* background-color: var(--primary-color); */ /* Eski koyu arka plan */
    background-color: #3a3a5a; /* Daha açık, yumuşak mor-gri */
    border: 1px solid #4f4f6f; /* Arka plana uygun hafif border */
    border-radius: 8px;
    padding: 20px; /* Padding ekleyelim */
}

#documentation-page #doc-toc-section h3 {
    color: var(--text-color); /* Başlık rengi açık kalsın */
    text-align: left; /* Başlığı sola hizala */
    margin-bottom: 15px; /* Liste ile araya boşluk */
    border-bottom: 1px solid var(--border-color); /* Başlık altına çizgi */
    padding-bottom: 10px;
}

#documentation-page #doc-toc-section ul {
    list-style: none; /* Liste işaretlerini kaldır */
    padding: 0;
    margin: 0;
}

#documentation-page #doc-toc-section ul li {
    margin-bottom: 8px; /* Liste elemanları arası boşluk */
}

#documentation-page #doc-toc-section ul li a {
    color: var(--text-muted-color); /* Bağlantı rengini yumuşak yapalım */
    text-decoration: none; /* Alt çizgiyi kaldır */
    transition: color 0.2s ease;
}

#documentation-page #doc-toc-section ul li a:hover {
    color: var(--accent-color); /* Hover rengi vurgulu olsun */
    text-decoration: underline; /* Hover'da alt çizgi */
}

#documentation-page details {
    border-radius: 8px; /* Kenarları yuvarlat */
    overflow: hidden; /* İçerik taşmasın */
    border: 1px solid var(--border-color); /* Details etrafına border */
}

#documentation-page summary {
    padding: 15px 20px; /* Daha fazla padding */
    cursor: pointer;
    background-color: var(--primary-color); /* Summary arkaplanı */
    position: relative; /* Okları konumlandırmak için */
    list-style: none; /* Varsayılan oku gizle */
    transition: background-color 0.2s ease;
    display: flex; /* İkon ve başlığı hizala */
    align-items: center; /* Dikey hizala */
}

#documentation-page summary:hover {
    background-color: var(--border-color); /* Hover rengi */
}

#documentation-page summary h3 {
    margin: 0; /* summary içindeki h3'ün margin'ini sıfırla */
    display: inline-block; /* Ok ile aynı hizada durması için */
    font-size: 1.1em;
    color: var(--text-color);
    flex-grow: 1; /* Başlık kalan alanı doldursun */
}

/* Özel Akordiyon Oku */
#documentation-page summary::before {
    content: '❯'; /* Kapalı durum ikonu (veya >) */
    font-size: 1.2em;
    margin-right: 10px;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    color: var(--accent-color);
    line-height: 1; /* Dikey hizalamaya yardımcı */
    flex-shrink: 0; /* İkon küçülmesin */
}

#documentation-page details[open] > summary::before {
    transform: rotate(90deg); /* Açık durum ikonu */
}

/* summary::-webkit-details-marker { display: none; } /* Webkit için ek gizleme (gerekirse) */

#documentation-page details > *:not(summary) {
    padding: 15px 20px 20px 40px; /* İçerik padding'i (soldan oku hizalamak için biraz fazla) */
    background-color: var(--primary-color); /* Açıkken içerik arkaplanı */
    border-top: 1px solid var(--border-color); /* Başlıktan ayır */
}

#documentation-page details ul {
    padding-left: 20px; /* Liste içeriğini biraz içeri al */
    line-height: 1.6; /* Okunabilirliği artır */
}

#documentation-page details p {
     line-height: 1.6;
}

/* SSS Bölümü Özel Stilleri */
#documentation-page .faq-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}
#documentation-page .faq-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#documentation-page .faq-item h4 {
    margin-bottom: 8px;
    color: var(--accent-color);
    font-size: 1em;
    text-align: left;
}

#documentation-page .faq-item p {
     color: var(--text-muted-color); /* SSS cevapları biraz daha soluk */
}

/* --- Yeni: İstatistik Modalı Akordiyon Stilleri --- */

/* Genel Akordiyon Konteyneri */
.stats-accordion {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Akordiyon item'ları arası boşluk */
}

/* Genel Akordiyon Item */
.stats-accordion .accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--secondary-color); /* Item arkaplanı */
    overflow: hidden; /* İçerik taşmasın */
}

/* Genel Akordiyon Başlığı */
.stats-accordion .accordion-header {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.stats-accordion .accordion-header:hover {
    background-color: var(--primary-color);
}

.stats-accordion .accordion-icon {
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
}

.stats-accordion .accordion-item.active > .accordion-header .accordion-icon {
    transform: rotate(180deg); /* Açıkken ikon dönsün */
}

/* Genel Akordiyon İçeriği */
.stats-accordion .accordion-content {
    padding: 15px 20px;
    background-color: var(--primary-color); /* İçerik arkaplanı biraz farklı */
    border-top: 1px solid var(--border-color); /* Başlıktan ayır */
    /* display: none; JS ile yönetiliyor */
}

/* Parti Akordiyonu Özel Stilleri */
.stats-accordion-outer-party {
    gap: 10px; /* Parti item'ları arası daha fazla boşluk */
}

.outer-party-header span:first-child {
    font-weight: bold;
    /* color: var(--accent-color); Bu satırı kaldırarak varsayılan rengi kullanmasını sağla */
}

/* Oyuncu Akordiyonu Özel Stilleri */
.stats-accordion-inner-player {
    padding: 10px; /* İç içe akordiyon için biraz padding */
    background-color: var(--secondary-color); /* Arkaplanı dış item ile aynı */
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Oyuncu item'ları ve başlıklar arası boşluk */
}

.inner-player-header {
    padding: 8px 12px;
    font-size: 0.9em;
}

.inner-player-content {
    padding: 10px 15px 10px 25px; /* Soldan biraz içeriden başlasın */
    font-size: 0.9em;
}

.inner-player-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.6;
}

.inner-player-content ul li {
    margin-bottom: 4px;
    color: var(--text-muted-color);
}

/* Takım Başlığı/Ayırıcı Stilleri */
.inner-team-header {
    font-weight: bold;
    color: var(--text-muted-color);
    font-size: 0.85em;
    text-align: center;
    padding: 5px;
    background-color: var(--primary-color);
    border-radius: 3px;
}

.team-separator {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 8px 0;
}

/* --- Yeni: Parti Bazında Takım Performansı Akordiyon Stilleri --- */

.section-subtitle {
    font-size: 0.9em;
    color: var(--text-muted-color);
    margin-top: 20px; /* Üstteki bölümden boşluk */
    margin-bottom: 10px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.stats-accordion-team-per-part .accordion-header span:first-child {
    /* Parti numarası için özel stil gerekirse */
}

.team-per-part-content {
    padding: 10px 15px !important; /* İçeriğin padding'ini ayarla */
}

.team-stats-per-part-columns {
    display: flex;
    gap: 20px; /* Sütunlar arası boşluk */
}

.team-stats-per-part-columns .team-column {
    flex: 1;
}

.team-stats-per-part-columns h5 {
    font-size: 0.95em;
    margin-bottom: 8px;
    color: var(--text-color);
    text-align: center;
}

.team-stats-per-part-columns ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.7;
}

.team-stats-per-part-columns ul li {
     color: var(--text-muted-color);
} 

/* --- Oyun Ayarları Butonu ve Modalı Stilleri --- */

/* Ayarlar İkon Butonu */
.game-info .icon-button {
    background: none;
    border: none;
    color: var(--text-muted-color);
    font-size: 1.1em; /* İkon boyutunu ayarla */
    cursor: pointer;
    padding: 5px; /* Biraz boşluk ver */
    margin-left: 10px; /* Soldaki elemandan ayır */
    vertical-align: middle; /* Dikey hizalama */
    transition: color 0.2s ease;
}

.game-info .icon-button:hover {
    color: var(--accent-color); /* Hover rengi */
}

/* Yeni: part-tabs ve ayar butonunu içeren container */
.part-tabs-container {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    width: 100%; /* Genişliği doldur */
    border-bottom: 1px solid var(--border-color); /* Alt çizgiyi containere taşı */
    /* margin-top: 10px; // Kaldırıldı */
}

/* Mevcut part-tabs stilini güncelle */
.part-tabs {
    display: flex;
    border-bottom: none; /* Alt çizgiyi containere taşıdık */
    flex-grow: 1; /* Kalan alanı doldur */
    /* overflow-x: auto; */ /* Gerekirse scroll eklenebilir */
    /* white-space: nowrap; */ /* Gerekirse scroll eklenebilir */
}

/* Ayarlar butonunu part-tabs'ın sağına al ve küçült */
#game-settings-btn {
    font-size: 0.6em; /* İstenen boyut */
    margin-left: auto; /* Otomatik sol boşluk ile sağa yasla */
    padding: 5px 8px; /* Tıklama alanını ayarla */
    margin-bottom: 0; /* Dikey hizalama için margin sıfırla */
    margin-top: 0;
    /* Mevcut .icon-button stilleri geçerli olacak (background: none, border: none vs.) */
}

/* Oyun Ayarları Modalı */
#game-settings-modal {
    /* Mevcut .modal sınıfı varsa onun stillerini alacaktır */
    /* Eğer yoksa veya özelleştirmek isterseniz: */
    /* display: none; /* Başlangıçta gizli */
    /* position: fixed; 
    /* z-index: 1000; 
    /* left: 0; 
    /* top: 0; 
    /* width: 100%; 
    /* height: 100%; 
    /* overflow: auto;  */
    /* background-color: rgba(0,0,0,0.6); /* Koyu arkaplan */
    /* display: flex; /* İçeriği ortalamak için */
    /* align-items: center;
    /* justify-content: center; */
}

#game-settings-modal .modal-content {
    /* Mevcut .modal-content sınıfı varsa onun stillerini alacaktır */
    /* Eğer yoksa veya özelleştirmek isterseniz: */
    background-color: var(--secondary-color);
    /* padding: 25px; */
    /* border: 1px solid var(--border-color); */
    /* border-radius: 8px; */
    /* width: 90%; */
    /* max-width: 400px; /* Maksimum genişlik */
    /* position: relative; */
}

#game-settings-modal .modal-content h2 {
    margin-top: 0; /* Başlık üst boşluğunu sıfırla */
    margin-bottom: 20px;
    color: var(--accent-color);
}

#game-settings-modal .form-group {
    margin-bottom: 15px; /* Aynı kalsın */
}

#game-settings-modal label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#game-settings-modal input[type="number"] {
    width: 100%; /* Tam genişlik */
    padding: 10px 12px; /* İç boşluk */
    font-size: 16px !important; /* ZOOM ENGELLEMEK İÇİN 16px ve !important */
    box-sizing: border-box; /* Genişlik hesaplamasını garantile */
}

#game-settings-modal #settings-error-msg {
    color: var(--danger-color);
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 0.9em;
    text-align: center;
}

#game-settings-modal button#save-game-settings-btn {
    width: 100%; /* Kaydet butonunu tam genişlik yap */
    margin-top: 10px;
}

/* Mobil uyumluluk için (isteğe bağlı) */
@media (max-width: 480px) {
    #game-settings-modal .modal-content {
        padding: 20px;
    }
}

/* Yeni: Skor Geçmişi Meta Bilgi ve Butonlar */
#score-history-list .round-summary .round-meta-info {
    display: flex;
    align-items: center;
    gap: 8px; /* Butonlar arası boşluk */
    margin-left: auto; /* Grubu sağa yasla */
}

#score-history-list .round-summary .edit-round-btn {
    font-size: 0.6em; /* İstenen boyut */
    background: none;
    border: none;
    color: var(--text-muted-color);
    cursor: pointer;
    padding: 0 3px; /* Hafif padding */
    line-height: 1; /* Dikey hizalama */
    transition: color 0.2s ease; /* Hover efekti için */
}

#score-history-list .round-summary .edit-round-btn:hover {
    color: var(--accent-color); /* Hover rengi */
}

/* Admin Nav Butonu Renkleri */
#admin-login-nav-btn.logged-out .icon {
    color: var(--danger-color); /* Çıkış yapmışken kırmızımsı */
    opacity: 0.7;
}

#admin-login-nav-btn.logged-in .icon {
    color: var(--success-color); /* Giriş yapmışken yeşilimsi */
    opacity: 1;
}

/* Admin Bilgi Modalı Stilleri */
#admin-info-modal .modal-content h4 {
    margin-top: 0;
    margin-bottom: 10px; /* Başlık altı boşluk */
    text-align: center;
}

#admin-info-modal #admin-info-email {
    font-size: 0.9em;
    word-break: break-all; /* Uzun epostalar için */
}

#admin-info-modal #admin-logout-btn {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    /* .danger sınıfı zaten tanımlı olmalı (kırmızı buton) */
}

#admin-info-modal .close-btn {
     top: 15px;
     right: 15px;
}

/* Oyun Ayarları Modalı Footer Düzenlemesi */
#game-settings-modal .modal-footer {
    margin-top: 15px;
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    width: 100%; /* Footer'ın genişliğini garantile */
    box-sizing: border-box; /* Footer için de kutu modelini ayarla */
    padding: 0; /* Footer'ın kendi iç padding'ini SIFIRLA */
}

/* Footer içindeki tüm butonlar için genel stil */
#game-settings-modal .modal-footer button {
    width: 100%; /* Tam genişlik */
    padding: 10px 15px; 
    font-size: 1em; 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    box-sizing: border-box; /* Butonlar için kutu modelini garantile */
    margin: 0; /* Butonun dış margin'ini SIFIRLA */
    border: 1px solid transparent; /* Butonun border'ını sıfırla veya input ile eşitle */
    /* Renk ve diğer stiller zaten uygulanıyor (.danger vb.) */
}

/* Önceki gereksiz kurallar kaldırıldı */

/* Lig Modu Oyuncu Listesi Stilleri */
.league-player-list {
    list-style: none; /* Madde işaretlerini kaldır */
    padding: 0;
}

.league-player-list li {
    display: flex;
    /* İsmi ve butonları aynı satıra al */
    align-items: center; /* Dikeyde ortala */
    justify-content: space-between; /* Aralarına boşluk koy */
    padding: 8px 0; /* Yukarıdan ve aşağıdan boşluk */
    border-bottom: 1px solid var(--border-color); /* Ayırıcı çizgi */
}

.league-player-list li:last-child {
    border-bottom: none; /* Son elemanın alt çizgisini kaldır */
}

.league-player-list .player-name {
    flex-grow: 1; /* İsmin kalan alanı kaplamasını sağla */
    margin-right: 10px; /* Butonlardan boşluk bırak */
}

.league-player-list .player-actions {
    display: flex; /* Butonları yan yana getir */
    gap: 8px; /* Butonlar arası boşluk */
}

.league-player-list .player-actions .icon-button {
    padding: 5px; /* İkon butonları için daha az iç boşluk */
    font-size: 0.65em; /* İstenen ikon boyutu */
    line-height: 1; /* Satır yüksekliğini ayarla */
}

.league-player-list .player-actions .icon-button i {
    vertical-align: middle; /* İkonu dikeyde ortala (gerekirse) */
}

/* Lig Modu - Yeni Oyuncu Ekleme Formu Stilleri */

/* Yeni: Formun kendisi (Butonları ortalamak için) */
.league-add-player #add-league-player-form {
    text-align: center; /* Butonu ve potansiyel mesajları ortala */
}

.league-add-player .form-group {
    display: flex; /* Etiket ve input'u yan yana getir */
    align-items: center; /* Dikeyde ortala */
    gap: 10px; /* Aralarına boşluk koy */
    margin-bottom: 15px; /* Formun altındaki buton veya mesajdan boşluk */
    /* margin-top: 5px; // Kaldırıldı */
    /* display: inline-block; // KALDIRILDI */
    /* width: auto; // KALDIRILDI */
    /* max-width: 200px; // Kaldırıldı, genişliği kapsayıcı belirlesin */
}

.league-add-player label[for="new-player-name"] {
    flex-basis: 80px; /* Etiket için sabit bir genişlik (ayarlanabilir) */
    flex-shrink: 0; /* Etiket daralmasın */
    text-align: right; /* Metni sağa hizala */
    margin-bottom: 0; /* Flex içinde dikey boşluğu kaldır */
    color: var(--text-muted-color); /* Diğer etiketlerle aynı renk */
}

.league-add-player #new-player-name {
    flex-grow: 1; /* Input kalan alanı doldursun */
    /* Kurulum inputları ile aynı stil */
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 12px 15px; /* Kurulum inputları ile aynı padding */
    border-radius: 4px; /* Kurulum inputları ile aynı köşe yuvarlaklığı */
    font-size: 16px; /* Mobil zoom engelleme */
}

/* Yeni: Placeholder stilini ekle */
.league-add-player #new-player-name::placeholder {
    color: var(--text-muted-color);
}

.league-add-player #add-league-player-form button[type="submit"] {
    padding: 8px 15px; /* Dikey padding'i biraz azalt (10px -> 8px) */
    /* Font boyutunu şimdilik değiştirmeyelim, gerekirse ayarlanabilir */
    /* font-size: 0.9em; */
    margin-top: 5px; /* Input grubundan hafif boşluk */
}

/* Başarı/Hata mesajı için */
.league-add-player .status-message {
    margin-top: 10px;
    font-size: 0.9em;
    text-align: center; /* Mesajı ortala */
}
.league-add-player .status-message.info { color: var(--text-muted-color); }
.league-add-player .status-message.success { color: var(--success-color); }
.league-add-player .status-message.error { color: var(--danger-color); }

/* Lig Modu Kurulum Sayfası Stilleri */
.league-setup {
    /* Belki genel setup section stilinden farklı bir border veya padding? Şimdilik boş. */
}
.league-setup-header {
    /* Belki farklı bir başlık rengi? */
}
.league-progress-bar-container {
    /* Standart ile aynı */
}
#league-progress-bar {
    /* Standart ile aynı */
}
#league-setup-inputs-container {
    min-height: 200px; /* İçerik yüklenene kadar veya boşken bir yükseklik verelim */
    /* İçerik stilleri (liste, form vb.) buraya eklenecek */
}
.league-setup-navigation {
    /* Standart ile aynı */
}

/* Lig oyuncu seçimi ve takım atama için ek stiller gerekirse buraya eklenecek */
/* Örn: .player-selection-list, .team-assignment-list */

/* Lig Modu Kurulum Sayfası Stilleri (Devamı) */

/* Navigasyon Buton Görünürlüğünü Garantileme */
.league-setup-navigation button {
    /* Varsayılan buton stilleri (padding, renk vb.) geçerli olacak */
    /* display: none; /* HTML'deki başlangıç stilini ezer (GEREKİRSE) */
    /* JavaScript'in inline style (display: inline-block) eklediğini varsayıyoruz. */
    /* Bu kural sadece JS çalışmazsa veya inline stili ezilirse diye bir yedek olabilir */
    /* Şimdilik JS'e güvenelim, sorun devam ederse burayı aktifleştirebiliriz */
}

/* Lig Oyuncu Seçimi Listesi (Adım 1) */
.player-selection-list {
    list-style: none;
    padding: 0;
    margin: 20px 0; /* Üstten ve alttan boşluk */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Otomatik sığan sütunlar (min 200px) */
    gap: 10px; /* Öğeler arası boşluk */
}

.player-selection-list li {
    background-color: var(--secondary-color);
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer; /* Tüm satıra tıklanabilirlik hissi */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.player-selection-list li:hover {
    background-color: var(--primary-color);
    border-color: var(--accent-color);
}

.player-selection-list input[type="checkbox"] {
    cursor: pointer;
    /* Varsayılan checkbox'ı gizleyip özel stil ekleyebiliriz, şimdilik kalsın */
     width: 1.1em; /* Checkbox boyutunu ayarla */
     height: 1.1em;
     accent-color: var(--accent-color); /* Checkbox rengini tema ile uyumlu yap */
}

.player-selection-list label {
    flex-grow: 1; /* İsim kalan alanı doldursun */
    cursor: pointer;
    font-size: 0.9em; /* Yazı boyutunu küçült */
    color: var(--text-color);
}

/* Seçili oyuncu sayısı bilgisi */
#player-selection-form .selection-info {
    margin-top: 15px;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.9em;
}

/* Hata mesajı */
#player-selection-error,
#assignment-error {
    margin-top: 10px;
    text-align: center;
    font-size: 0.9em;
}

/* Takım Atama Listesi (Adım 2) Stilleri (Opsiyonel İyileştirme) */
.team-assignment-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-assignment-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--secondary-color);
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

.team-assignment-list .player-name {
    flex-grow: 1;
    margin-right: 15px;
    font-size: 0.95em;
}

.team-assignment-list .team-options {
    display: flex;
    gap: 15px;
}

.team-assignment-list .team-options label {
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.team-assignment-list input[type="radio"] {
    cursor: pointer;
     accent-color: var(--accent-color); 
}

/* Takım atama durumu */
#team-assignment-form .assignment-status {
     margin-top: 15px;
     text-align: center;
     color: var(--text-muted-color);
     font-size: 0.9em;
}


/* Ayarlar Formu (Adım 3) Stilleri */
#league-settings-form {
    margin: 20px auto;
    max-width: 350px;
}

#league-settings-form > div {
    margin-bottom: 15px;
}

#league-settings-form label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted-color);
    font-size: 0.9em;
}

#league-settings-form input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px; /* Zoom engelleme */
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
}

/* Animasyonlar */
@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(138, 43, 226, 0); }
  100% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0); }
}

@keyframes subtle-glow {
    0%, 100% {
        box-shadow: 0 0 3px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 7px rgba(255, 215, 0, 0.4), 0 0 12px rgba(138, 43, 226, 0.2);
    }
}

#league-mode-nav-btn {
    /* Daha belirgin bir görünüm için */
    border-color: var(--accent-color); 
    position: relative; /* İconu absolute konumlandırmak için */

    /* Dikkat çekici animasyon */
    animation: subtle-glow 2.5s infinite ease-in-out;
}

/* Aktifken animasyonu durdur veya değiştir */
#league-mode-nav-btn.active {
    animation: none; /* Aktifken animasyonu durdur */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* Aktifken hafif bir parlama */
}

#league-mode-nav-btn .icon i {
    /* Kupa ikonu rengi */
    color: gold; /* Altın rengi */
    /* Hafif parlama efekti */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
    transition: transform 0.2s ease-in-out;
}

#league-mode-nav-btn:hover .icon i {
    transform: scale(1.15); /* Hover'da ikonu hafif büyüt */
}

/* İsteğe bağlı: Lig butonu aktif değilken biraz daha soluk olabilir */
/* #league-mode-nav-btn:not(.active) {
    opacity: 0.9;
} */

/* Responsive Ayarlamalar (Devamı) */
/* ... existing responsive styles ... */

@media (max-width: 600px) {
    /* ... existing mobile styles ... */

    /* Yeni: Lig Oyuncu Ekleme Formunu Mobilde Düzelt */
    .league-add-player .form-group {
        flex-direction: column; /* Etiketi inputun üstüne al */
        align-items: stretch; /* Öğeleri tam genişliğe yay */
        gap: 5px; /* Etiket ve input arası boşluğu azalt */
        margin-bottom: 10px; /* Mobil için alt boşluğu azaltalım */
    }

    .league-add-player label[for="new-player-name"] {
        text-align: left; /* Etiketi sola hizala */
        flex-basis: auto; /* Sabit genişliği kaldır */
        margin-bottom: 5px; /* Input ile arasına boşluk ekle */
        font-size: 0.9em; /* Etiket boyutunu küçült */
    }

    .league-add-player #add-league-player-form button[type="submit"] {
        width: 100%; /* Mobilde butonu tam genişlik yap */
        max-width: 250px; /* Maksimum genişliği ayarla */
        padding: 10px 15px; /* Buton padding'ini ayarla */
    }

    #start-league-setup-btn {
         width: 100%; /* Mobilde butonu tam genişlik yap */
         max-width: 250px; /* Maksimum genişliği ayarla */
         padding: 12px 15px; /* Buton padding'ini ayarla */
    }

    /* ... other existing mobile styles ... */
}

@media (max-width: 400px) {
    /* ... existing narrower mobile styles ... */

    /* Yeni: Lig Yönetim Ekranı Başlıklarını Daha Dar Mobilde Daha Da Küçült */
    #league-player-management h3 {
        font-size: 1em; /* Başlıkları daha da küçült */
    }

    .league-add-player label[for="new-player-name"] {
        font-size: 0.85em; /* Etiketi daha da küçült */
    }

     .league-add-player #add-league-player-form button[type="submit"],
     #start-league-setup-btn {
        font-size: 0.85em; /* Butonları daha da küçült */
        padding: 10px; /* Padding'i daha da azalt */
    }

    .league-start-match p {
        font-size: 0.75em; /* Yazıyı daha da küçült */
    }

    /* ... other existing narrower mobile styles ... */
}

/* Yeni: Lig Maçı Başlatma Bölümü */
.league-start-match {
    text-align: center; /* İçeriği (buton ve paragraf) ortala */
    margin-top: 20px; /* Üst bölümden boşluk */
}

/* Yeni: Lig Maçı Başlat altındaki küçük yazı */
.league-start-match p {
    font-size: 0.85em; 
    color: var(--text-muted-color); 
    margin-top: 8px;
}

/* Mobil Cihazlar İçin Medya Sorgusu (Örnek: 600px altı) */
@media (max-width: 600px) {
    /* ... diğer mobil stiller ... */

    /* Daha spesifik bir seçici ve ek stil ayarları */
    #history-page .history-filter-buttons .filter-btn {
        font-size: 0.7em !important; /* Boyutu zorla uygula */
        padding: 0.3em 0.6em !important; /* İç boşluğu daha da azalt */
        line-height: 1.2 !important;   /* Satır yüksekliğini ayarla */
        box-sizing: border-box; /* Padding'in boyuta eklenmesini sağla */
    }

    /* ... diğer mobil stiller ... */
}

.history-filter-buttons {
    margin-bottom: 1.5rem; /* Liste ile arasına boşluk ARTIRILDI */
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Filtre Butonlarının Yeni Stili (game-actions button'a benzer) */
.history-filter-buttons .filter-btn {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    padding: 5px 10px; /* game-actions ile aynı padding */
    border-radius: 5px;
    line-height: 1;
    font-size: 0.9em; /* Varsayılan font boyutu */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* İkon ve metin arası */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.history-filter-buttons .filter-btn:hover {
    background-color: var(--primary-color);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Aktif Filtre Butonu Stili */
.history-filter-buttons .filter-btn.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: 600;
}

/* ... existing styles ... */

/* --- Lig Modu Puan Durumu Stilleri --- */

.league-ranking-section .ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 0.5em; Eski */
    margin-bottom: 25px; /* Butonlar ve tablo arasındaki mesafeyi artır */
}

.league-ranking-section h3 {
    margin-bottom: 0; /* Başlık altındaki varsayılan boşluğu kaldır */
}

.ranking-switch-buttons {
    display: flex;
    gap: 0.5em;
}

.ranking-switch-btn {
    font-size: 0.7em;
    padding: 0.4em 0.8em; /* Padding biraz artırıldı */
    border: 1px solid var(--border-color); /* Kenarlık rengi değiştirildi */
    background-color: transparent;
    color: var(--text-muted-color); /* Metin rengi değiştirildi */
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    display: inline-flex; /* İkon ve metni hizala */
    align-items: center; /* Dikeyde ortala */
    gap: 0.4em; /* İkon ve metin arasına boşluk */
}

.ranking-switch-btn i {
    /* İkon boyutu gerekirse ayarlanabilir, şimdilik buton font boyutuna göre orantılı */
    /* font-size: 1.1em; */
    line-height: 1; /* Hizalamaya yardımcı olabilir */
}

.ranking-switch-btn:hover {
    background-color: var(--hover-bg-color); /* Hover arka planı */
    color: var(--text-color); /* Hover metin rengi */
    border-color: var(--secondary-color); /* Hover kenarlık */
}

.ranking-switch-btn.active {
    background-color: var(--secondary-color); /* Aktif arka plan */
    color: var(--primary-bg-color); /* Aktif metin rengi */
    border-color: var(--secondary-color); /* Aktif kenarlık */
    font-weight: bold;
}

/* Tablo Konteyneri */
.scrollable-table {
    max-height: 300px; /* Tablo yüksekliğini sınırla */
    overflow-y: auto;  /* Dikey kaydırma çubuğu ekle */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

/* Kompakt Tablo Stilleri */
.compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em; /* Tablo içindeki yazı boyutunu küçült */
}

.compact-table th,
.compact-table td {
    padding: 0.4em 0.5em; /* Hücre içi boşlukları azalt */
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap; /* Hücre içeriğinin alta kaymasını engelle */
}

.compact-table th {
    background-color: var(--secondary-bg-color);
    position: sticky; /* Başlık satırını sabitle */
    top: 0;           /* Kaydırma sırasında en üste yapışsın */
    z-index: 1;       /* Diğer içeriklerin üzerinde kalması için */
}

.compact-table tbody tr:last-child td {
    border-bottom: none; /* Son satırın alt çizgisini kaldır */
}

.compact-table tbody tr:hover {
    background-color: var(--hover-bg-color);
}

/* Özel Hücre Stilleri */
.compact-table td.player-name-cell,
.compact-table td.partners-cell {
    text-align: left;
    white-space: normal; /* İsimlerin sığmazsa alta kaymasına izin ver */
}

.partnership-table th:first-child,
.partnership-table td:first-child {
    width: 60%; /* Partner isimleri için daha fazla alan */
}

/* Yeni: Net Puan Sütunu Renklendirme */
.compact-table td.net-positive {
    color: var(--danger-soft-text); /* Kırmızımsı (daha çok ceza) */
    font-weight: bold;
}

.compact-table td.net-negative {
    color: var(--success-soft-text); /* Yeşilimsi (daha çok ödül) */
    font-weight: bold;
}

.compact-table td.net-zero {
    color: var(--text-muted-color); /* Normalden biraz daha soluk */
}

/* Yeni: Net Puan Sütunu Renklendirme - İsim Değişikliği: Score Renklendirme */
.compact-table td.score-positive { /* Eskiden net-positive */
    color: var(--danger-soft-text); /* Kırmızımsı (Yüksek puan kötü) */
    font-weight: bold;
}

.compact-table td.score-negative { /* Eskiden net-negative */
    color: var(--success-soft-text); /* Yeşilimsi (Düşük puan iyi) */
    font-weight: bold;
}

.compact-table td.score-zero { /* Eskiden net-zero */
    color: var(--text-muted-color); /* Normalden biraz daha soluk */
}

/* ... existing styles ... */

/* Yeni: Lig Modu Oyuncu Seçim Dropdown Stilleri */
.league-player-select-group {
    /* Varsayılan .form-group stilleri yeterli olabilir, gerekirse özelleştirme */
    margin-bottom: 15px;
}

.league-player-select-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted-color);
    font-size: 0.9em; /* Etiketi biraz küçültelim */
}

select.league-player-select {
    width: 100%; /* Tam genişlik */
    padding: 12px 15px; /* Diğer inputlarla aynı iç boşluk */
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 16px; /* Mobil zoom engelleme */
    cursor: pointer;
    /* Tarayıcı varsayılan okunu gizleyip özel ok ekleyebiliriz, şimdilik kalsın */
    /* appearance: none; */ 
    /* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); */
    /* background-repeat: no-repeat; */
    /* background-position: right .7em top 50%; */
    /* background-size: .65em auto; */
}

select.league-player-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.3); /* Vurgu rengiyle hafif glow */
}

/* ... rest of styles ... */

/* Lig Sıralaması Kontrol Butonları */
.ranking-controls {
    display: flex;
    align-items: center;
    margin-left: auto; 
    flex-grow: 1; /* YENİ: Kalan alanı doldur */
    justify-content: flex-end; /* YENİ: İçeriği sağa yasla (margin-left: auto'yu destekler) */
}

.ranking-tab-btn {
    background-color: var(--secondary-color); /* Arka plan rengi */
    color: var(--text-muted-color); /* Normal metin rengi */
    border: 1px solid var(--border-color); /* İnce kenarlık */
    padding: 6px 12px; /* İç boşluk (daha küçük) */
    /* border-radius: 4px; Hafif yuvarlak köşe veya 0px */
    border-radius: 0; /* Keskin köşeler için */
    cursor: pointer;
    font-size: 0.65em; /* İstenen boyut */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-right: 5px; /* Butonlar arası boşluk */
    display: inline-flex; /* İkon ve metni yan yana hizala */
    align-items: center; /* Dikeyde ortala */
    gap: 5px; /* İkon ve metin arası boşluk */
    line-height: 1; /* Satır yüksekliğini ayarla */
}

/* Vurgu rengi kenarlığı kaldır */
.ranking-tab-btn:focus,
.ranking-tab-btn:active {
    outline: none; /* Tarayıcı varsayılan focus halkasını kaldır */
    box-shadow: none; /* Olası focus gölgelerini kaldır */
    border-color: var(--accent-color); /* Odaklanınca kenarlığı vurgula (isteğe bağlı) */
}

.ranking-tab-btn:hover {
    background-color: var(--border-color); /* Hover rengi */
    color: var(--text-color); /* Hover metin rengi */
}

.ranking-tab-btn.active {
    background-color: var(--accent-color); /* Aktif arka plan */
    color: white; /* Aktif metin rengi */
    border-color: var(--accent-color); /* Aktif kenarlık rengi */
}

#refresh-league-stats-btn {
    margin-left: auto; /* Diğer butonlardan ayırıp sağa yasla */
    margin-right: 0; /* Sağdaki boşluğu kaldır */
}

#refresh-league-stats-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* YENİ: Lig Tablosu Sıralama İkonları */
th.sortable-header {
    cursor: pointer; /* Tıklanabilir olduğunu belirt */
}

th.sortable-header .sort-icon {
    display: inline-block; /* Yan yana durması için */
    margin-left: 5px; /* Başlık metninden boşluk */
    width: 1em; /* Sabit genişlik vererek hizalamayı kolaylaştır */
    text-align: center;
}

th.sortable-header .sort-icon i {
    font-size: 0.7em; /* Boyutu küçült */
    color: #999; /* Rengi biraz soluklaştır (header textinden farklı) */
    transition: color 0.2s ease;
}

th.sortable-header:hover .sort-icon i {
    color: var(--text-color); /* Hover durumunda rengi netleştir */
}

th.sortable-header.active-sort .sort-icon i {
    color: var(--accent-color); /* Aktif sıralama ikon rengi (vurgu rengi) */
}

@media (max-width: 600px) {
    /* ... existing mobile styles ... */

    .ranking-tab-btn {
        font-size: 0.55em; /* Mobil için daha küçük font */
        padding: 5px 8px; /* Mobil için padding'i de biraz azaltalım */
        gap: 3px; /* İkon ve metin arasını azalt */
    }
    
    .ranking-controls {
         /* Mobilde özel ayar gerekirse buraya */
         /* Örneğin gap azaltılabilir: gap: 5px; */
    }

    /* ... other existing mobile styles ... */
}

/* Lig Oyuncu Listesi Scroll Stili */
.league-player-list-section .league-player-list {
    /* Yaklaşık 10 oyuncu sığacak bir yükseklik.
       Tam değer, liste öğelerinin (li) yüksekliğine bağlı olarak ayarlanabilir. */
    max-height: 350px; /* Bu değeri ihtiyaca göre ayarlayabilirsiniz */
    overflow-y: auto;  /* Yalnızca dikey kaydırma çubuğu, içerik taşarsa çıkar */
    padding-right: 5px; /* Kaydırma çubuğu için sağda küçük bir boşluk */
    border: 1px solid var(--border-color); /* İsteğe bağlı: Liste etrafına bir kenarlık */
    border-radius: var(--border-radius);
    margin-top: 0.5em; /* Üstteki başlıktan biraz boşluk */
}

/* Opsiyonel: Kaydırma çubuğu görünümünü iyileştirme (Webkit tarayıcılar için) */
.league-player-list-section .league-player-list::-webkit-scrollbar {
    width: 8px;
}

.league-player-list-section .league-player-list::-webkit-scrollbar-track {
    background: var(--background-color-secondary); /* Arka plan rengi */
    border-radius: 4px;
}

.league-player-list-section .league-player-list::-webkit-scrollbar-thumb {
    background-color: var(--text-muted-color); /* Kaydırma çubuğu rengi */
    border-radius: 4px;
    border: 2px solid var(--background-color-secondary); /* Kenarlık gibi görünmesi için */
}

.league-player-list-section .league-player-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-color); /* Hover rengi */
}

/* Lig oyuncu listesi öğeleri için stiller (varsa üzerine yazabilir) */
.league-player-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4em 0.6em;
    border-bottom: 1px solid var(--border-color-light);
}

.league-player-list li:last-child {
    border-bottom: none;
}

.league-player-list .player-name {
    flex-grow: 1;
    margin-right: 0.8em;
}

.league-player-list .player-actions button {
    margin-left: 0.5em;
    padding: 4px;
    font-size: 0.6em;
}

/* Renkli Butonlar */
.danger {
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}
.danger:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.warning {
    color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}
.warning:hover {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

/* Yeni: Skor girişi başlık alanı için düzen */
.score-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* Başlık ve içerik arası boşluk */
    position: relative; /* Responsive title için */
}

/* Yeni: Hızlı Eylem Butonu Boyutlandırması */
#open-quick-action-btn {
    font-size: 0.75em; /* İstenen boyut */
    padding: 6px 8px;  /* Boyuta uygun padding */
    /* Mevcut icon-button stillerini (background, border vs.) korur */
}

/* Yeni: Yıldırım ikonu için stiller */
#open-quick-action-btn .fa-bolt {
    color: #ffcc00;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

#open-quick-action-btn:hover .fa-bolt {
    color: #ffd700;
}

/* Full width için yardımcı sınıf */
.full-width {
    width: 100%;
    box-sizing: border-box;
}

/* Oyuncu profil sayfası stil eklentileri - Başarımlar kartı için */

/* Başarımlar kartı stilleri */
.profile-card.achievements-card {
    background-color: var(--card-bg-color);
    margin-bottom: 15px;
    grid-column: span 2;
}

/* Başarımlar listesi konteyner stili */
.player-achievements {
    margin-top: 10px;
}

/* Tek bir başarım öğesi */
.achievement-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    background-color: rgba(var(--primary-color-rgb), 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.achievement-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Başarım ikonu */
.achievement-icon {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    color: white;
    font-size: 1.2em;
}

.achievement-icon .fa-bolt {
    color: #ffcc00; /* Yıldırım ikonu için altın sarısı */
}

/* Başarım detayları */
.achievement-details {
    flex: 1;
}

.achievement-name {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--text-color);
}

.achievement-count {
    display: block;
    font-size: 0.9em;
    color: var(--text-muted-color);
}

/* Toast Stilleri */
.toast-container {
    position: fixed;
    bottom: 20px; /* Üstten alta aldık */
    left: 50%; /* Merkeze almak için */
    transform: translateX(-50%); /* Merkeze almak için */
    z-index: 9999;
    width: 90%; /* Mobil için genişlik */
    max-width: 400px; /* Maksimum genişlik */
}

.toast {
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toast-slide-up 0.3s ease-out;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.toast i {
    font-size: 1.1em;
}

.toast-success {
    background-color: var(--success-color);
    color: white;
}

.toast-error {
    background-color: var(--danger-color);
    color: white;
}

.toast-info {
    background-color: var(--info-color);
    color: white;
}

.toast-fade-out {
    animation: toast-fade-out 0.3s ease-in forwards;
}

@keyframes toast-slide-up {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes toast-fade-out {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .toast-container {
        bottom: 10px;
        width: 95%;
    }
    
    .toast {
        padding: 10px 14px;
        font-size: 0.85em;
        gap: 6px;
    }
    
    .game-actions button {
        font-size: 0.65em;
        padding: 3px 6px;
        height: 22px;
        gap: 3px;
    }
}

/* Hızlı Eylem Modalı Dropdown Stili */
#quick-action-modal #quick-action {
    width: 100%; /* Tam genişlik */
    padding: 10px 12px; /* Diğer input/selectlerle benzer padding */
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 1em; /* Temel font boyutu, gerekirse ayarlanabilir */
    cursor: pointer;
    /* Tarayıcı varsayılan okunu gizleyip özel ok ekleyebiliriz, şimdilik kalsın */
}

#quick-action-modal #quick-action:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.3); /* Vurgu rengiyle hafif glow */
}

/* Hızlı Eylem Modalı Oyuncu Seçenekleri */
#quick-action-player-options {
    display: flex;
    flex-wrap: nowrap;
    margin: 15px 0;
    overflow-x: auto;
    width: 100%;
}

#quick-action-player-options .radio-option {
    display: inline-block;
    margin-right: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

#quick-action-player-options input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

#quick-action-player-options label {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--secondary-color);
    color: white;
    border: 1px solid var(--border-color);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
}

/* Seçildiğinde stil değişimi */
#quick-action-player-options input[type="radio"]:checked + label {
    background-color: var(--accent-color);
    color: white;
    font-weight: bold;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(138, 43, 226, 0.4);
}

/* Hover durumu */
#quick-action-player-options label:hover {
    background-color: var(--border-color);
    border-color: var(--accent-color);
}

/* Mobil cihazlar için daha kompakt stil */
@media (max-width: 480px) {
    #quick-action-player-options label {
        max-width: 80px;
        padding: 5px;
        font-size: 0.9em;
    }
}

/* Full width için yardımcı sınıf */
.full-width {
    width: 100%;
    box-sizing: border-box;
}

/* Hızlı Eylem Açıklaması Stilleri */
.quick-action-description {
    margin-top: 15px;
    padding: 12px 15px; /* İç boşluğu biraz ayarladım */
    background-color: var(--secondary-color); /* Tema ile uyumlu arka plan */
    border-radius: 5px;
    border-left: 4px solid var(--accent-color); /* Vurgu rengi ile sol kenarlık */
    font-size: 0.9em;
    color: var(--text-muted-color); /* Açıklama metni için uygun renk */
}

.quick-action-description ul {
    margin: 8px 0;
    padding-left: 20px; /* Liste elemanları için içten boşluk */
    list-style-position: inside; /* Madde işaretlerini içeri alır */
}

.quick-action-description ul li {
    margin-bottom: 4px; /* Liste elemanları arası boşluk */
    color: var(--text-muted-color); /* Liste elemanı metin rengi */
}

.quick-action-description .highlight {
    font-weight: bold;
    color: var(--accent-color); /* Vurgulanan metin için tema vurgu rengi */
}

/* ... existing code ... */
#quick-action-player-options label {
    font-size: 0.85em; /* Yazı boyutunu küçült */
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* Maksimum genişlik, sığmazsa ... ile kısaltılır (ayarlanabilir) */
    cursor: pointer;
}

/* Hızlı Eylem Modalı Geri Bildirim Alanı */
#quick-action-modal .modal-feedback {
    font-size: 0.75em; /* Kullanıcının istediği 0.5em'e yakın, okunabilir bir boyut */
    padding: 6px 8px;
    margin-top: 10px;
    margin-bottom: 5px; /* Footer'a çok yakın olmasın */
    border-radius: 4px;
    text-align: center;
    display: none; /* Başlangıçta gizli */
}

#quick-action-modal .modal-feedback.error {
    background-color: var(--danger-soft-bg);
    color: var(--danger-soft-text);
    border: 1px solid var(--danger-color);
}

#quick-action-modal .modal-feedback.info {
    background-color: var(--success-soft-bg);
    color: var(--success-soft-text);
    border: 1px solid var(--success-color);
}

/* Full width için yardımcı sınıf */
.full-width {
    width: 100%;
    box-sizing: border-box;
}

/* Yeni: Hızlı Eylem Modalındaki Mevcut El Eylemleri Listesi */
#current-round-quick-actions-container h5 {
    font-size: 0.75em;
    margin-bottom: 5px;
    color: var(--text-color);
    text-align: left; /* Başlığı sola al */
}

.current-quick-actions-list {
    list-style: none;
    padding-left: 0;
    font-size: 0.6em; /* İstenen font boyutu */
    max-height: 100px; /* Çok uzarsa scroll edilebilir olsun */
    overflow-y: auto; /* Dikey scroll */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px;
    background-color: var(--background-color); /* Arkaplanı ana arkaplanla aynı yapalım */
}

.current-quick-actions-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 2px; /* Padding biraz azaltıldı */
    border-bottom: 1px dashed var(--border-color); 
}

.current-quick-actions-list li:last-child {
    border-bottom: none;
}

.current-quick-actions-list .delete-pending-action-btn {
    padding: 2px 5px; /* Buton iç boşluğu */
    font-size: 0.9em; /* Buton içindeki ikonun boyutu (0.6em'e göre) */
    line-height: 1; /* Satır yüksekliği */
    min-width: auto; /* Otomatik genişlik */
}

/* Genel yardımcı sınıf: Çok küçük butonlar için */
.very-small-btn {
    padding: 2px 5px !important; /* Yüksek öncelik */
    font-size: 0.8em !important; /* Yüksek öncelik, genel buton fontuna göre daha küçük */
    line-height: 1 !important; /* Yüksek öncelik */
}

.very-small-btn i {
    font-size: 0.9em; /* Buton içindeki ikon için, butonun kendi font boyutuna göre */
}

/* Düzenleme modalı içeriğini genişlet */
.modal-content {
    background-color: var(--primary-color);
    margin: auto;
    padding: 20px 20px; /* Dikey ve YATAY padding 20px yapıldı */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 450px; /* Genişliği biraz artıralım */
    position: relative;
}

/* El düzenleme modalı için özel genişlik */
#edit-round-modal .modal-content {
    max-width: 550px; /* Daha geniş bir modal */
    padding: 20px 15px; /* Daha az yatay iç boşluk */
}

/* Yeni: Edit modal oyuncu grubu - Daha basit yapı */
.edit-player-score-group {
    margin-bottom: 12px; /* Gruplar arası boşluk */
    padding-bottom: 8px; /* Alt boşluk */
    border-bottom: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: 100px 1fr; /* Sabit isim genişliği, esnek içerik */
    gap: 10px;
    align-items: center;
}

.edit-player-score-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Oyuncu isim etiketi - daha net ve kısıtlı */
.edit-player-name-label {
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Uzun isimler için üç nokta */
    max-width: 100px;
    color: var(--accent-color); /* İsmi vurgula */
}

/* İnput satırı - grid yerine flex ile daha iyi kontrol */
.player-inputs-row {
    display: flex;
    gap: 8px; /* İnputlar arası boşluk */
    flex-wrap: nowrap; /* Satırda kal */
}

/* İkon ve input grubu - daha net ve sabit */
.input-with-icon {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Taşmayı önle */
}

.input-with-icon span {
    display: inline-block;
    width: 20px; /* Sabit ikon genişliği */
    text-align: center;
    flex-shrink: 0; /* İkon küçülmesin */
}

.input-with-icon input[type="number"] {
    flex: 1;
    min-width: 0; /* Taşmayı önle */
    font-size: 16px; /* OTOMATİK ZOOM ENGELLEMEK İÇİN MIN 16PX */
}

/* Hızlı eylem etiketleri alanı */
.round-quick-actions-container {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%; /* Tam genişlik */
    margin-left: 0; /* Sola yasla */
}

/* Hızlı eylem etiketi */
.quick-action-tag {
    font-size: 0.6em; /* İstenen boyut */
    background-color: var(--secondary-color);
    color: var(--text-muted-color);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: 1px solid var(--border-color);
    margin-bottom: 3px; /* Alt boşluk ekle */
}

.quick-action-tag:hover {
    background-color: var(--danger-soft-bg);
    color: var(--danger-soft-text);
    border-color: var(--danger-color);
}

.quick-action-tag i {
    font-size: 0.9em;
}

/* Mobil görünüm için basitleştirilmiş düzen */
@media (max-width: 480px) {
    .edit-player-score-group {
        grid-template-columns: 80px 1fr; /* Daha dar isim sütunu */
    }
    
    .edit-player-name-label {
        font-size: 0.9em; /* Biraz daha küçük yazı */
        max-width: 80px;
    }
    
    .player-inputs-row {
        flex-wrap: wrap; /* Sığmazsa alt satıra geçebilir */
    }
    
    .input-with-icon {
        flex-basis: calc(33.33% - 5px); /* Üçe böl */
        min-width: 0;
    }
    
    .input-with-icon input[type="number"] {
        font-size: 0.9em; /* Yazıyı biraz küçült */
        padding: 4px; /* Padding'i azalt */
    }
}

/* Hızlı Eylemler için Stillemeler */
.quick-action-tag {
    display: inline-block;
    background-color: var(--secondary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.55em; /* 0.65em'den 0.55em'e düşürüldü */
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quick-action-tag:hover {
    background-color: var(--secondary-color-darker);
}

/* Finalize edilmiş hızlı eylemler için stil */
.quick-action-tag.finalized {
    background-color: #555;
    color: #eee;
    border-color: #666;
    padding-right: 8px;
    cursor: pointer;
    position: relative;
}

.quick-action-tag.finalized:hover {
    background-color: #777;
    box-shadow: 0 0 3px rgba(255,255,255,0.3);
}

/* Silme işlemi sırasında eklenen deleting sınıfı için efekt */
.quick-action-tag.deleting {
    background-color: #c72c2c;
    color: white;
    text-decoration: line-through;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.round-quick-actions-container {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
}

/* Zoom sorununu çözmek için input stilleri */
input[type="number"], 
input[type="text"], 
textarea, 
select {
  font-size: 16px !important; /* Mobil tarayıcılar 16px altındaki inputlara zoom yapar */
  -webkit-text-size-adjust: 100%; /* Safari zoom davranışını engeller */
  text-size-adjust: 100%; /* Genel zoom davranışını engeller */
}

/* El düzenleme modalı için ek stil */
#edit-round-modal input {
  font-size: 16px !important;
}

/* Input alanlarına focus olunduğunda zoom olmaması için */
@media (max-width: 480px) {
  .input-with-icon input[type="number"] {
    font-size: 16px !important; /* Zorunlu 16px minimum font size */
    padding: 4px; /* Padding'i azalt */
    width: 100%; /* Tam genişlik */
    min-height: 36px; /* Minimum yükseklik */
  }
}

/* ... existing code ... */

/* Silme işlemi sırasında eklenen deleting sınıfı için efekt */
.quick-action-tag.deleting {
    background-color: #c72c2c;
    color: white;
    text-decoration: line-through;
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* El düzenleme modalında oyuncu containerını düzenle */
.edit-round-player-container {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.03);
}

.edit-round-player-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.edit-round-player-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.edit-round-player-inputs .input-group {
    display: flex;
    flex-direction: column;
}

.edit-round-player-inputs label {
    font-size: 0.8em;
    margin-bottom: 2px;
    color: var(--text-muted-color);
}

.edit-round-player-inputs input {
    width: 100%;
    padding: 5px;
}

.player-quick-actions {
    margin-top: 5px;
}

/* ... existing code ... */

/* --- Quick Action Player Options Row --- */
.player-options-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden; /* Scroll oluşmasını engelle */
    margin-bottom: 10px;
}

.player-options-row label {
    flex: 1;
    margin: 0 2px;
    text-align: center;
    font-size: 0.55em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 25%;
    padding: 5px 2px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg-color);
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box; /* Kutu modelini düzelt */
}

.player-options-row label.selected,
.player-options-row input[type="radio"]:checked + label {
    background-color: rgba(75, 181, 67, 0.8);
    color: white;
    font-weight: bold;
    transform: none; /* Scale yerine arka plan değişimi yeterli */
    z-index: 1;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.player-options-row input[type="radio"] {
    display: none;
}

/* ... existing code ... */

/* Player Profile Recent Games Accordion Header - Mobile Optimization */
.recent-game-header {
    display: flex;
    flex-wrap: nowrap; /* Tek satırda kalmasını zorla */
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px; /* İç boşlukları biraz azaltabiliriz */
    gap: 4px; /* Elementler arası boşluk (8px -> 4px) */
}

.recent-game-header .game-summary-info {
    order: 1;
    flex-grow: 1; /* Mümkün olduğunca genişlesin */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Uzun metinler için ... */
    font-size: 0.85em; /* Biraz küçültebiliriz (0.9em -> 0.85em) */
    min-width: 80px; /* Çok küçülmesini engelle */
}

.recent-game-header .game-date {
    order: 2;
    flex-shrink: 0; /* Küçülmesin, sabit kalsın */
    font-size: 0.75em; /* (0.8em -> 0.75em) */
    white-space: nowrap;
}

.recent-game-header .game-header-actions {
    order: 3;
    display: flex; /* İçindeki butonları yan yana getirir */
    gap: 5px; /* Butonlar arası boşluk */
    flex-shrink: 0;
}

.recent-game-header .game-header-actions .action-btn,
.recent-game-header .game-header-actions .icon-button { /* player-profile-ui.js'deki class'lara göre ayarla */
    padding: 3px 5px; /* Buton iç boşluklarını azalt (4px 6px -> 3px 5px) */
    font-size: 0.75em; /* Buton yazı boyutunu azalt (0.8em -> 0.75em) */
}
.recent-game-header .game-header-actions .icon-button i {
    font-size: 1em; /* İkon boyutunu yazıya göre ayarla */
}


.recent-game-header .toggle-details-icon {
    order: 4;
    font-size: 1em; /* İkon boyutunu ayarla */
    padding-left: 5px; /* Soluna biraz boşluk */
    flex-shrink: 0;
}

/* Daha küçük ekranlar için ek medya sorguları gerekebilir */
@media (max-width: 480px) {
    .recent-game-header .game-summary-info {
        font-size: 0.75em; /* (0.8em -> 0.75em) */
        min-width: 60px; /* existing */
    }
    /* Yeni: game-summary-info içindeki elemanları küçült */
    .recent-game-header .game-summary-info .team-abbr {
        font-size: 0.9em; /* 0.75em'e göre */
        margin: 0 1px;
    }
    .recent-game-header .game-summary-info .score-badge {
        font-size: 0.9em; /* 0.75em'e göre */
        padding: 1px 3px;
        min-width: auto; /* min-width'i kaldır */
    }
    .recent-game-header .game-summary-info .vs-history {
        font-size: 0.9em; /* 0.75em'e göre */
        margin: 0 1px;
    }

    .recent-game-header .game-date {
        font-size: 0.65em; /* (0.7em -> 0.65em) */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70px; /* Tarih için maksimum genişlik, taşarsa ... olur */
    }
    .recent-game-header .game-header-actions {
        gap: 3px; /* (5px -> 3px) */
    }
    .recent-game-header .game-header-actions .action-btn,
    .recent-game-header .game-header-actions .icon-button {
        padding: 2px 3px; /* (2px 4px -> 2px 3px) */
        font-size: 0.65em; /* (0.7em -> 0.65em) */
    }
    .recent-game-header .toggle-details-icon {
        padding-left: 3px; /* (5px -> 3px) */
        font-size: 0.9em; /* (1em -> 0.9em) */
    }
    .recent-game-header {
        gap: 2px; /* (3px -> 2px) */
        padding: 5px 6px; /* (6px 8px -> 5px 6px) */
    }

    .profile-header h2 {
        font-size: 1.3em;
    }

    .profile-actions button {
        width: 100%; /* Butonlar tam genişlik kaplasın */
        margin-bottom: 5px;
    }
    .profile-actions button:last-child {
        margin-bottom: 0;
    }


    .profile-card {
        padding: 12px;
    }

    .profile-card h3 {
        font-size: 1em;
    }

    .achievement-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9em;
    }
    .achievement-details .achievement-name {
        font-size: 0.9em;
    }

    .achievement-details .achievement-count {
        font-size: 0.75em;
    }
    
    /* Profildeki akordiyon içerikleri için daha da küçültme */
    .profile-page-container .part-accordion-header {
        padding: 8px 12px 8px 15px;
        font-size: 0.85em;
    }
    .profile-page-container .part-accordion-header .team-abbr,
    .profile-page-container .part-accordion-header .score-badge {
        font-size: 0.9em; /* İçindeki skor yazılarını da orantılı küçült */
    }

    .profile-page-container .part-accordion-content {
        padding: 8px 12px 8px 20px;
        font-size: 0.8em;
    }
}
/* End Player Profile Recent Games Accordion Header */

/* ========== Player Profile Page Responsive Adjustments ========== */

/* Genel Profil Sayfası Konteyneri */
@media (max-width: 768px) {
    .profile-page-container {
        margin-top: 10px;
        padding: 0 10px;
    }

    .profile-header {
        margin-bottom: 20px;
        gap: 10px;
    }

    .profile-header h2 {
        font-size: 1.5em; /* Mobil için başlık boyutu */
    }

    .profile-actions button {
        padding: 7px 12px;
        font-size: 0.85em;
    }

    /* Profil Kartları Grid */
    .profile-card-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
        gap: 15px;
    }

    .profile-card {
        padding: 15px; /* Kart içi boşluğu azalt */
    }

    .profile-card h3 {
        font-size: 1.1em; /* Kart başlığı boyutu */
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    /* Başarımlar Kartı ve Öğeleri */
    .achievement-item {
        padding: 8px;
        margin-bottom: 6px;
    }

    .achievement-icon {
        width: 35px;
        height: 35px;
        font-size: 1em; /* İkon içindeki yazı/ikon boyutu */
        margin-right: 10px;
    }

    .achievement-details .achievement-name {
        font-size: 0.95em;
    }

    .achievement-details .achievement-count {
        font-size: 0.8em;
    }

    /* Eş İstatistikleri Kartı (Basit liste varsayımı) */
    .partner-stats-card li {
        font-size: 0.85em;
    }

    /* Profildeki Son Oyunlar Bölümü */
    .recent-games-section-profile .section-header {
        flex-direction: column; /* Arama ve filtreleri alt alta getir */
        align-items: stretch; /* Tam genişliğe yay */
        gap: 10px;
        margin-bottom: 10px;
    }

    .recent-games-section-profile .search-input-profile {
        max-width: none; /* Tam genişlik alsın */
        width: 100%;
    }

    .recent-games-section-profile .filter-buttons-profile {
        justify-content: center; /* Filtre butonlarını ortala */
    }
     .recent-games-section-profile .filter-buttons-profile button {
        font-size: 0.8em;
        padding: 6px 10px;
    }

    /* Profildeki akordiyon içerikleri için genel küçültme */
    .profile-page-container .part-accordion-header {
        padding: 10px 15px 10px 20px; /* Daha az padding */
        font-size: 0.9em;
    }
    .profile-page-container .part-accordion-content {
        padding: 10px 15px 10px 25px; /* Daha az padding */
        font-size: 0.85em;
    }
    .profile-page-container .round-detail-entry {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .profile-header h2 {
        font-size: 1.3em;
    }

    .profile-actions button {
        width: 100%; /* Butonlar tam genişlik kaplasın */
        margin-bottom: 5px;
    }
    .profile-actions button:last-child {
        margin-bottom: 0;
    }


    .profile-card {
        padding: 12px;
    }

    .profile-card h3 {
        font-size: 1em;
    }

    .achievement-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9em;
    }
    .achievement-details .achievement-name {
        font-size: 0.9em;
    }

    .achievement-details .achievement-count {
        font-size: 0.75em;
    }
    
    /* Profildeki akordiyon içerikleri için daha da küçültme */
    .profile-page-container .part-accordion-header {
        padding: 8px 12px 8px 15px;
        font-size: 0.85em;
    }
    .profile-page-container .part-accordion-header .team-abbr,
    .profile-page-container .part-accordion-header .score-badge {
        font-size: 0.9em; /* İçindeki skor yazılarını da orantılı küçült */
    }

    .profile-page-container .part-accordion-content {
        padding: 8px 12px 8px 20px;
        font-size: 0.8em;
    }
}

/* ========== End Player Profile Page Responsive Adjustments ========== */