body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: white; /* Arka plan rengi */
    font-family: 'Arial', sans-serif; /* Modern yazı tipi */
}

.quiz-container {
    min-width: 100px; /* Kutunun genişliği */
   min-height: 250px; /* Kutunun yüksekliği */
   max-width: 350px;
   max-height: 600px;
    background-color: #fcd307; /* Sarı arka plan */
    border-radius: 20px; /* Köşeleri yuvarlatma */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Gölgelendirme */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px; /* İçerik için boşluk */
    position: relative; /* İçerik konumlandırması için */
}

.title-container {
    background-color: #ffffff; /* Başlık arka plan rengi beyaz */
    border-radius: 50px; /* Başlık kutusunun köşelerini yuvarlat */
    padding: 10px 20px; /* Başlık kutusu içindeki boşluk */
    margin-bottom: 0; /* Başlık kutusu ile fotoğraf arasındaki boşluk */
}

h1 {
    margin: 0; /* Başlıkta dış boşluğu sıfırla */
    font-size: 25px; /* Başlık boyutu */
    color: #333; /* Başlık rengi */
    text-align: center; /* Başlık ortalanmış */
    font-weight: bold; /* Kalın yazı */
}

.photo-container {
    width: 250px; /* Daire fotoğraf boyutu */
    height: 250px; /* Daire fotoğraf boyutu */
    border-radius: 50%; /* Daire şeklinde yapmak için */
    overflow: hidden; /* Taşmayı önlemek için */
    display: flex;
    justify-content: center; /* İçerik ortalanır */
    align-items: center; /* İçerik ortalanır */
    margin-bottom: 30px; /* Fotoğraf ile butonlar arasındaki boşluk */
    border: 5px solid #ffffff; /* Beyaz çerçeve */
}

.futbolcu-photo {
    width: 100%; /* Fotoğraf genişliği %100 */
    height: 100%; /* Fotoğraf yüksekliği %100 */
    object-fit: cover; /* Daireye tam uyar */
    transition: transform 0.3s; /* Büyüme için geçiş efekti */
}



.buttons {
    display: flex;
    flex-direction: column; /* Butonları dikey hizalama */
    gap: 20px; /* Butonlar arasındaki boşluk */
}

.answer {
    display: flex;
    align-items: center; /* Buton ve ismi yan yana hizalama */
    background-color: #ffffff; /* Arka plan rengi beyaz */
    border-radius: 50px; /* Daha fazla yuvarlatma */
    height: 50px; /* Yüksekliği ayarladık */
    position: relative; /* Konumlandırmayı sağlamak için */
    width: 100%; /* Genişliği %100 olarak ayarladık */
    cursor: pointer; /* Fare ile üzerine gelince el işareti */
    transition: background-color 0.3s, transform 0.3s; /* Arka plan rengi ve boyut geçişi */
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 10px;
    margin: 5px;
    font-weight: bold; /* Kalın yazı */
}

.answer:hover {
    background-color: #f0f0f0; /* Hover efekti için daha açık beyaz */
    transform: scale(1.02); /* Hover sırasında kutunun büyümesi */
}

.answer-button {
    width: 70px; /* Daire içindeki buton genişliği */
    height: 70px; /* Daire içindeki buton yüksekliği */
    border-radius: 50%; /* Daire şeklinde yapmak için */
    background-color: #fcd307; /* Sarı dolgu rengi */
    border: 3px solid #ffffff; /* Beyaz çerçeve */
    display: flex;
    justify-content: center; /* İçerik ortalanır */
    align-items: center; /* İçerik ortalanır */
    font-size: 24px; /* Buton yazı boyutu */
    color: #333; /* Yazı rengi */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s; /* Renk ve boyut geçişi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Buton gölgesi */
    margin-right: 10px; /* Buton ile isim arasında boşluk */
    font-weight: bold; /* Kalın yazı */
}

.answer-button:hover {
    background-color: #e0a500; /* Hover efekti için daha koyu sarı */
    transform: scale(1.05); /* Hover sırasında butonun büyümesi */
}

.answer-name {
    font-size: 18px; /* İsim yazı boyutu */
    color: #555; /* İsim rengi */
    font-weight: bold; /* Kalın yazı */
}

.question-index {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: white; /* Arka plan rengi */
    padding: 5px; /* İçerik için boşluk */
    border-radius: 10px; /* Kenarları yuvarlat */
    z-index: 1; /* Üstte görünmesi için */
}

.question-box {
    background-color: #ffffff; /* Arka plan rengi beyaz */
    border-radius: 10px; /* Kenarları yuvarlat */
    padding: 10px 15px; /* İçerik için yatay ve dikey boşluk */
    position: absolute; /* Konumlandırma için */
    top: 10px; /* Üstten 10px boşluk */
    left: 10px; /* Soldan 10px boşluk */
    z-index: 1; /* Üstte görünmesi için */
}

#questionIndex {
    margin: 0; /* Dış boşluğu sıfırla */
    font-size: 18px; /* Yazı boyutu */
    color: #333; /* Yazı rengi */
    text-align: center; /* Yazıyı ortala */
}

/* Soru numarası için stil */
#questionIndex {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px;
    color: #333;
}

/* Fotoğraf için stil */
.photo-container {
    width: 250px; /* Daire fotoğraf boyutu */
    height: 250px; /* Daire fotoğraf boyutu */
    border-radius: 50%; /* Daire şeklinde yapmak için */
    overflow: hidden; /* Taşmayı önlemek için */
    display: flex;
    justify-content: center; /* İçerik ortalanır */
    align-items: center; /* İçerik ortalanır */
    margin-bottom: 30px; /* Fotoğraf ile butonlar arasındaki boşluk */
    border: 5px solid #ffffff; /* Beyaz çerçeve */
}

.futbolcu-photo {
    width: 100%; /* Fotoğraf genişliği %100 */
    height: 100%; /* Fotoğraf yüksekliği %100 */
    object-fit: cover; /* Daireye tam uyar */
    transition: transform 0.3s; /* Büyüme için geçiş efekti */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #eaeaea; /* Arka plan rengi */
    font-family: 'Arial', sans-serif; /* Modern yazı tipi */
}

.quiz-container {
    width: 350px; /* Kutunun genişliği */
    height: 700px; /* Kutunun yüksekliği */
    background-color: #fcd307; /* Sarı arka plan */
    border-radius: 20px; /* Köşeleri yuvarlatma */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Gölgelendirme */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px; /* İçerik için boşluk */
    position: relative; /* İçerik konumlandırması için */
}

.buttons {
    display: flex;
    flex-direction: column; /* Butonları dikey hizalama */
    gap: 20px; /* Butonlar arasındaki boşluk */
}

.answer {
    display: flex;
    align-items: center; /* Buton ve ismi yan yana hizalama */
    background-color: #ffffff; /* Arka plan rengi beyaz */
    border-radius: 50px; /* Daha fazla yuvarlatma */
    height: 50px; /* Yüksekliği ayarladık */
    position: relative; /* Konumlandırmayı sağlamak için */
    width: 100%; /* Genişliği %100 olarak ayarladık */
    cursor: pointer; /* Fare ile üzerine gelince el işareti */
    transition: background-color 0.3s, transform 0.3s; /* Arka plan rengi ve boyut geçişi */
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 10px;
    margin: 5px;
    font-weight: bold; /* Kalın yazı */
}

.answer:hover {
    background-color: #f0f0f0; /* Hover efekti için daha açık beyaz */
    transform: scale(1.02); /* Hover sırasında kutunun büyümesi */
}

.answer-button {
    width: 70px; /* Daire içindeki buton genişliği */
    height: 70px; /* Daire içindeki buton yüksekliği */
    border-radius: 50%; /* Daire şeklinde yapmak için */
    background-color: #fcd307; /* Sarı dolgu rengi */
    border: 3px solid #ffffff; /* Beyaz çerçeve */
    display: flex;
    justify-content: center; /* İçerik ortalanır */
    align-items: center; /* İçerik ortalanır */
    font-size: 24px; /* Buton yazı boyutu */
    color: #333; /* Yazı rengi */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s; /* Renk ve boyut geçişi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Buton gölgesi */
    margin-right: 10px; /* Buton ile isim arasında boşluk */
    font-weight: bold; /* Kalın yazı */
}

.answer-button:hover {
    background-color: #e0a500; /* Hover efekti için daha koyu sarı */
    transform: scale(1.05); /* Hover sırasında butonun büyümesi */
}

.question-index {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: white; /* Arka plan rengi */
    padding: 5px; /* İçerik için boşluk */
    border-radius: 10px; /* Kenarları yuvarlat */
    z-index: 1; /* Üstte görünmesi için */
}

.question-box {
    background-color: #ffffff; /* Arka plan rengi beyaz */
    border-radius: 10px; /* Kenarları yuvarlat */
    padding: 10px 15px; /* İçerik için yatay ve dikey boşluk */
    position: absolute; /* Konumlandırma için */
    top: 10px; /* Üstten 10px boşluk */
    left: 10px; /* Soldan 10px boşluk */
    z-index: 1; /* Üstte görünmesi için */
}

#questionIndex {
    margin: 0; /* Dış boşluğu sıfırla */
    font-size: 18px; /* Yazı boyutu */
    color: #333; /* Yazı rengi */
    text-align: center; /* Yazıyı ortala */
}

.score-container {
    text-align: center; /* Metni ortala */
    margin-top: 20px; /* Üstten boşluk */
}

#scoreText {
    font-size: 24px; /* Skor metni boyutu */
    color: #333; /* Metin rengi */
}

#correctCount, #incorrectCount {
    font-size: 18px; /* Doğru ve yanlış sayısı boyutu */
    color: #555; /* Metin rengi */
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.start-button {
    animation: pulse 1s infinite; /* Animasyonu sürekli tekrar ettir */
    background-color: #ffffff; /* Yeşil arka plan */
    color: rgb(0, 0, 0); /* Yazı rengi beyaz */
    border: 5px solid #ffffff; /* Beyaz çerçeve */
    border-radius: 25px; /* Yuvarlatılmış köşeler */
    padding: 10px 20px; /* İç boşluk */
    font-size: 20px; /* Yazı boyutu */
    cursor: pointer; /* Fare ile üzerine gelince el işareti */
    transition: background-color 0.3s; /* Renk geçişi */
}

.start-button:hover {
    background-color: #fbff00; /* Hover efekti için daha koyu yeşil */
}

.start-title {
    background-color: #ffffff; /* Başlık arka plan rengi beyaz */
    border-radius: 50px; /* Başlık kutusunun köşelerini yuvarlat */
    padding: 10px 20px; /* Başlık kutusu içindeki boşluk */
    margin-bottom: 30px; /* Başlık kutusu ile buton arasındaki boşluk */
    text-align: center; /* Başlık ortalanmış */
    color: #000000; /* Başlık rengi */
    font-size: 28px; /* Başlık boyutu */
    font-weight: bold; /* Kalın yazı */
}

 /* Başlangıç ekranındaki gibi daire şeklinde ve kenarlıklı fotoğraf */
 .photo-container, .question-photo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Daire şeklinde görünmesi için */
    border: 5px solid white; /* Beyaz kenarlık */
    width: 250px; /* Genişlik ayarı */
    height: 250px; /* Yükseklik ayarı */
    overflow: hidden; /* Taşan kısımları gizle */
    margin: 20px auto; /* Ortalamak için */
}

.photo-container img, .question-photo-container img {
    width: 100%; /* Resmi kapsayacak şekilde ayarla */
    height: 100%; /* Resmi kapsayacak şekilde ayarla */
    object-fit: cover; /* Resmi orantılı şekilde kes */
}