/* body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #09162E;
}
    */

.tabs-container-anime {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px 0px 5px 0px;

}

.coupon-icon {
    margin-right: 20px;
}

.tabs-anime.simu {
    display: flex;
    gap: 5px;
}

.container-anime {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.tabs-anime {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.tab-anime {
    padding: 10px 20px;
    border: 1px solid #333;
    background-color: #fff;
    cursor: pointer;
    margin-right: 10px;
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.tab-anime.active {
    border: 1px solid red;
}

.sub-menu {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.pist-option {
    padding: 8px 15px;
    border: 1px solid #333;
    background-color: #fff;
    cursor: pointer;
    margin-right: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pist-option:hover {
    background-color: #f0f0f0;
}

.pist-option.active {
    background-color: #d3d3d3;
    font-weight: bold;
}

.race-track-anime {
    background: linear-gradient(to bottom, #0ce344, #008523); /* Varsayılan Yeşil Zemin */
    min-height: 400px;
    position: relative;

    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    min-width: 800px;
}

.race-track-anime.kum {
    background: linear-gradient(to bottom, #CBAA87, #BF9A75); /* Varsayılan kum rengi Zemini */
}

.race-track-anime.cim {
    background: linear-gradient(to bottom, #0ce344, #008523); /* Varsayılan Yeşil Zemin */
}


.race-track-anime.sentetik {
    background: linear-gradient(to bottom, #E6CCC9, #D4AA97); /* Varsayılan sentetik Zemini */
}


/* Pist çizgileri */
.race-track-anime::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(var(--lane-height, 100px) - 10px),
        white calc(var(--lane-height, 100px) - 10px),
        white var(--lane-height, 100px)
    );
    opacity: 0.3;
}

/* Bitiş çizgisi */
.finish-line {
    position: absolute;
    right: 20px;
    top: 0;
    width: 10px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        black,
        black 20px,
        white 20px,
        white 40px
    );
}

.horse-anime {
    position: absolute;
    display: flex;
    align-items: center;
    transition: left 0.1s linear;
    z-index: 1; /* Atların temel z-index değeri */
}

/* Her at için farklı z-index değerleri */
#horse1 { z-index: 9; }
#horse2 { z-index: 8; }
#horse3 { z-index: 7; }
#horse4 { z-index: 6; }
#horse5 { z-index: 5; }
#horse6 { z-index: 4; }
#horse7 { z-index: 3; }
#horse8 { z-index: 2; }
#horse9 { z-index: 1; }


.horse-image-anime {
    width: 200px; /* Masaüstü için genişlik */
    height: 57px; /* En-boy oranı korunarak yükseklik (100 / 3.52 ≈ 28) */
    object-fit: contain; /* Görselin bozulmasını önler */
}

.horse-image-anime.galloping {
    animation: gallop 0.5s infinite alternate;
}
/* At koşu animasyonu */
@keyframes gallop {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); } /* Küçültülmüş boyutla orantılı animasyon */
}

.horse-info-anime {
    position: absolute;
    left: -105px; /* Atın soluna yerleştir (küçültülmüş boyutla orantılı) */
    top: 5px; /* Atın kalçasının hafif üstüne */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 4px 8px; /* Küçültülmüş boyutla orantılı padding */
    border-radius: 12px; /* Görsele uygun yuvarlak köşeler */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10; /* Bilgi kutucuğu her zaman en üstte */
}

.horse-name-anime {
    font-weight: bold;
    margin-right: 8px;
    font-size: 12px; /* Küçültülmüş boyutla orantılı font */
}

.horse-speed-anime {
    padding: 2px 4px;
    border-radius: 3px;
    color: white;
    font-size: 10px; /* Küçültülmüş boyutla orantılı font */
    background: #54d226;
}

/* Artı değerler için yeşil, eksi değerler için kırmızı */
.horse-speed-anime[data-speed^="-"] {
    background-color: #ec1c23; /* Kırmızı */
}

.horse-speed-anime[data-speed^="+"], .horse-speed-anime[data-speed="0"] {
    background-color: #54d226; /* Yeşil */
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

#distance-select {
    padding: 10px;
    margin-right: 20px;
    font-size: 16px;
    border-radius: 5px;
    border: 2px solid #333;
}

.start-button {
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.start-button:hover {
    background-color: #555;
}

/* Atların başlangıç pozisyonları */
#horse1 { top: 30px; left: 110px; }
#horse2 { top: 90px; left: 110px; }
#horse3 { top: 150px; left: 110px; }
#horse4 { top: 210px; left: 110px; }
#horse5 { top: 270px; left: 110px; }
#horse6 { top: 330px; left: 110px; }
#horse7 { top: 390px; left: 110px; }
#horse8 { top: 450px; left: 110px; }
#horse9 { top: 510px; left: 110px; }

/* Mobil ekranlar için responsive tasarım */
@media (max-width: 768px) {
    .container-anime {
        padding: 0px;
    }

    .tabs-anime.simu {
        display: flex
    ;
        gap: 5px;
        flex-wrap: wrap;
        margin-bottom: 0px;
        margin-top: 10px;
    }
    .tab-anime {
        padding: 5px 3px;
        font-size: 10px;
        margin-right: 3px;
    }

    .pist-option {
        padding: 5px 8px;
        font-size: 10px;
        margin: 3px;
    }

    .race-track-anime {
        width: 100%; /* Genişlik 360px olarak sabitlendi */
        min-width: 350px; /* Minimum genişlik de 360px */
        overflow-x: hidden; /* Yatay kaydırmayı kaldırdık */
    }


    /* Pist çizgileri */
    .race-track-anime::before {
        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 90px, /* Daha uzun çizgiler için artırıldı */
            white 90px,
            white 100px
        );
    }

    /* Bitiş çizgisi */
    .finish-line {
        right: 10px; /* Daha dar pist için sağ boşluk azaltıldı */
        width: 8px;
        background: repeating-linear-gradient(
            to bottom,
            black,
            black 30px,
            white 30px,
            white 60px
        );
    }

    .horse-info-anime {
        left: -42px;
    }

    .horse-name-anime {
        font-size: 9px;
        margin-right: 4px;
    }

    .horse-speed-anime {
        font-size: 7px;
        padding: 1px 3px;
    }

    .horse-image-anime {
        width: 100px;
        height: 28px;
    }

    #distance-select {
        padding: 6px;
        font-size: 12px;
        width: 80px;
    }

    .start-button {
        padding: 6px 12px;
        font-size: 12px;
    }

   /* Atların pozisyonlarını pist çizgilerinin üzerine ayarla */
   #horse1 { top: 75px; left: 45px; }  /* 90px çizgisi */
   #horse2 { top: 175px; left: 45px; } /* 190px çizgisi */
   #horse3 { top: 275px; left: 45px; } /* 290px çizgisi */
   #horse4 { top: 375px; left: 45px; } /* 390px çizgisi */
   #horse5 { top: 475px; left: 45px; } /* 490px çizgisi */
   #horse6 { top: 575px; left: 45px; } /* 590px çizgisi */
   #horse7 { top: 675px; left: 45px; } /* 590px çizgisi */
   #horse8 { top: 775px; left: 45px; } /* 590px çizgisi */
   #horse9 { top: 875px; left: 45px; } /* 590px çizgisi */

    /* Popup için mobil ayarlar */
    .modal-content {
        padding: 20px;
        max-width: 300px;
    }

    .modal-content h2 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .modal-content p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .close-button {
        padding: 10px 20px;
        font-size: 14px;
    }
    span.horse-id {
        display: none;
    }

}



/* Popup (Modal) Stilleri */
.modal {
    display: none; /* Varsayılan olarak gizli */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Daha koyu bir arka plan karartması */
    z-index: 1000; /* En üstte */
    justify-content: center;
    align-items: center;
    opacity: 0; /* Animasyon için başlangıç opacity'si */
    transition: opacity 0.3s ease-in-out; /* Açılma/kapanma animasyonu */
}

.modal.show {
    display: flex; /* Popup'ı göster */
    opacity: 1; /* Görünür hale getir */
}

.modal-content {
    background: linear-gradient(135deg, #ffffff, #f0f0f0); /* Hafif bir gradient arka plan */
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Daha belirgin gölge */
    max-width: 450px;
    width: 90%;
    position: relative;
    transform: scale(0.8); /* Animasyon için başlangıç ölçeği */
    transition: transform 0.3s ease-in-out; /* Ölçek animasyonu */
}

.modal.show .modal-content {
    transform: scale(1); /* Popup açıldığında normal boyuta dön */
}

.modal-content h2 {
    margin: 0 0 20px;
    color: #2c3e50; /* Daha koyu bir renk */
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-content p {
    margin: 0 0 25px;
    font-size: 20px;
    color: #34495e; /* Daha yumuşak bir renk */
    font-weight: 500;
    line-height: 1.5;
}

.close-button {
    padding: 12px 25px;
    background-color: #e74c3c; /* Kırmızı tonlu buton */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.close-button:hover {
    background-color: #c0392b; /* Koyu kırmızı */
    transform: translateY(-2px); /* Hafif bir yükselme efekti */
}

.close-button:active {
    transform: translateY(0); /* Tıklama anında normal konuma dön */
}