/* ------------------------------ */
/* GLOBAL RESET – TEMİZ BAŞLANGIÇ */
/* ------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: #f5f6f7;
    color: #222;
    -webkit-font-smoothing: antialiased;
    padding: 10px;
}

/* Sayfa genel alan */
.w3-content {
    max-width: 2000px !important;
}

/* -------------------------------- */
/* KART TASARIMI (Login – Register) */
/* -------------------------------- */
.w3-card-2,
.w3-card-3,
.w3-card-4 {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 2px !important;     
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
    min-width: 280px; /* küçük ekranlarda daralmasın */
}

/* iç padding */
.w3-container {
    padding: 16px;
}

/* ---------------- */
/* FORM ELEMENTLERI */
/* ---------------- */
.w3-input, input[type=text], input[type=password] {
    background: #fff !important;
    border: 1px solid #d8dce1 !important;
/*    border-radius: 8px !important;*/
    padding: 12px 14px !important;
    font-size: 16px;
    transition: border 0.2s;
}

    .w3-input:focus {
        border-color: #4a90e2 !important;
        outline: none !important;
    }

/* Butonlar */
button, .w3-btn {
    background: #4a90e2 !important;
    color: #fff !important;
/*    border-radius: 10px !important;*/
    border: none !important;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.15s ease;
}

    button:hover, .w3-btn:hover {
        background: #3c7ac7 !important;
    }

/* Kaydol – Giriş linki */
a {
    color: #4a90e2 !important;
    cursor: pointer;
    font-size: 16px;
}

/* -------------------- */
/* RENK PALETİ TASARIMI */
/* -------------------- */
#divPalette table {
    border-collapse: collapse;
    width: 100%;
}

#divPalette td {
    width: 20%;
    height: 60px;
    border: 1px solid black;
/*    border-radius: 6px;*/
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, border 0.2s;
}

    #divPalette td:hover {
        transform: scale(1.1);
        opacity: 0.7;
    }

    #divPalette td.selected {
        border: 3px solid yellow !important;
        transform: scale(1.15);
        opacity: 0.8;
    }

/* ------------------------------ */
/* Haritaya Gözat – Nasıl Oynanır Kartları */
/* ------------------------------ */
.feature-card {
/*    border-radius: 12px;*/
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
/*    text-align: center;*/
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
    cursor: pointer;
    color: #222;
    font-weight: 600;
   
}

    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        background-color: #f0f0f0;
    }

    .feature-card h4 {
        margin-top: 12px;
        font-size: 20px;
    }

/* Sağdaki EN İYİLER komponenti */
.w3-card-2 small,
.w3-card-4 small {
    font-size: 14px;
    color: #6b7280;
}

/* ------------------------ */
/* TABLO & TD AYARLARI     */
/* ------------------------ */
td {       
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
}

/* Sadece 3. td (player-name-cell) sola hizalansın */
.w3-col.m3.right-col .w3-card-3 table.world-league-table tbody td:nth-child(3) {
    text-align: left;
    padding-left: 8px;
}

/* Rütbeliler / Kutular Stil */
.w3-row-padding .w3-col .w3-container.w3-border {
    padding: 20px;
    text-align: center;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    color: white;
}

    .w3-row-padding .w3-col .w3-container.w3-border h4 {
        margin-top: 8px;
        font-size: 18px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

/* ------------------------ */
/* MOBILE UYUMLU TASARIM   */
/* ------------------------ */
@media (max-width: 992px) {
    .w3-col.m3, .w3-col.m2, .w3-col.m7 {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .w3-card-2, .w3-card-3, .w3-card-4 {
        padding: 24px !important;
    }

    .feature-card h4 {
        font-size: 18px;
    }

    .w3-row {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .left-col, .middle-col, .right-col {
        width: 100% !important;
    }

        .left-col .w3-card-3,
        .middle-col .w3-card-2,
        .right-col .w3-card-3 {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
}

@media (max-width: 600px) {
 
    html, body {
    
        padding: 0px;
    }

    .w3-card-2, .w3-card-3, .w3-card-4 {
        padding: 20px !important;
    }
}

  label;p.,mk/* Dünya Ligi tablosu genişlik ayarları */
.w3-col.m3.right-col .w3-card-3 {
    width: 100% !important;
    overflow-x: auto; /* tablo taşarsa yatay scroll */
}

    .w3-col.m3.right-col .w3-card-3 table.world-league-table {
        width: 100%;
        border-collapse: collapse;
    }