* { box-sizing: border-box; }
        
        #preloader {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #05070a;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.8s ease, visibility 0.8s;
        }

        .main-loader {
            width: 80px;
            height: 80px;
            border: 6px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top: 6px solid #003399;
            border-right: 6px solid #f8971d;
            border-bottom: 6px solid #00ff00;
            animation: main-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        }

        @keyframes main-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loader-hidden { opacity: 0; visibility: hidden; }

        body {
            margin: 0;
            padding: 0;
            background: #05070a;
            color: white;
            font-family: 'Montserrat', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .header {
            text-align: center;
            margin-bottom: 50px;
            animation: fadeInUp 1s ease forwards;
            opacity: 0;
        }

        .header h1 {
            font-size: 3rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 5px;
            margin: 0;
            background: linear-gradient(to right, #fff, #888);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .portal {
            display: flex;
            gap: 30px;
            padding: 20px;
            z-index: 2;
            animation: fadeInUp 1s ease 0.3s forwards;
            opacity: 0;
        }

        /* KARTLARIN TEMEL YAPISI */
        .card {
            width: 280px;
            height: 400px;
            border-radius: 20px;
            background: linear-gradient(145deg, #bdc3c7, #dee1e3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        /* PULSE EFEKTİ (Dışa yayılan dalga) */
        .card::after {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 20px;
            z-index: -1;
            opacity: 0;
            transition: 0.3s;
        }

        .card:hover::after {
            animation: card-pulse 1.5s infinite;
            opacity: 1;
        }

        /* Turnuva Renklerine Göre Pulse Atamaları */
        .cl:hover::after { border: 4px solid #003399; box-shadow: 0 0 20px #003399; }
        .el:hover::after { border: 4px solid #f8971d; box-shadow: 0 0 20px #f8971d; }
        .conf:hover::after { border: 4px solid #00ff00; box-shadow: 0 0 20px #00ff00; }

        @keyframes card-pulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.15); opacity: 0; }
        }

        .card:hover {
            transform: translateY(-15px) scale(1.05);
        }

        .card img {
            width: 150px;
            height: 150px;
            object-fit: contain;
            margin-bottom: 30px;
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
        }

        .card span {
            font-size: 0.8rem;
            color: #222;
            text-transform: uppercase;
            font-weight: 900;
            letter-spacing: 1px;
            border: 2px solid #222;
            padding: 8px 16px;
            border-radius: 30px;
            transition: 0.3s;
        }

        .card:hover span {
            background: #222;
            color: #fff;
        }

        .uefa-footer-link { position: absolute; bottom: 30px; left: 30px; z-index: 1000; animation: fadeInUp 1s ease 0.6s forwards; opacity: 0; }
        .uefa-footer-img { width: 80px; }

        .ismail-credit {
            position: absolute; bottom: 30px; right: 30px; z-index: 1000;
            font-size: 12px; color: #fff; text-decoration: none;
            background: linear-gradient(90deg, #003399, #0055ff);
            padding: 10px 20px; border-radius: 30px; font-weight: 700;
            animation: fadeInUp 1s ease 0.6s forwards; opacity: 0;
        }

        @keyframes fadeInUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* --- GENEL RESPONSIVE AYARLARI --- */

@media (max-width: 1024px) {
    .portal { gap: 20px; }
    .card { width: 240px; height: 350px; }
}

@media (max-width: 768px) {
    body {
        overflow-y: auto !important; /* Sayfanın aşağı kaymasına izin ver */
        height: auto;
        min-height: 100vh;
        display: block; /* Flex-center'dan normal akışa geç */
        padding: 40px 20px;
    }

    .header {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .header h1 {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .portal {
        flex-direction: column; /* Kartları alt alta diz */
        align-items: center;
        gap: 40px;
        margin-bottom: 100px; /* Footer'a yer aç */
    }

    .card {
        width: 100%;
        max-width: 300px;
        height: 380px;
    }

    /* FOOTER DÜZENLEMESİ (MOBİLDE EN ALTA) */
    .uefa-footer-link {
        position: relative; /* Sabit değil, akışa dahil et */
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        opacity: 1 !important;
        animation: none;
    }

    .ismail-credit {
        position: relative; /* Sabit değil, akışa dahil et */
        bottom: 0;
        right: 0;
        display: block;
        width: fit-content;
        margin: 0 auto 40px auto; /* Ortala ve alt boşluk bırak */
        text-align: center;
        opacity: 1 !important;
        animation: none;
    }

    /* HARİTA SAYFASI İÇİN (EĞER BU CSS'İ ORAYA DA KOYARSAN) */
    .ucl-navbar {
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        justify-content: center !important;
    }

    .tournament-switcher {
        bottom: 15px !important;
        width: fit-content !important;
        gap: 15px !important;
    }
}

/* Çok küçük telefonlar için */
@media (max-width: 480px) {
    .header h1 { font-size: 1.6rem; }
    .card { height: 350px; }
    .card img { width: 120px; }
}