body {
            text-align: center;
            margin: 0;
            padding: 50;
            background: linear-gradient(to right, #d5e0ff, #ffdbdb);
            font-family: 'outfit', 'Arial Narrow', Arial, sans-serif;      
    
}


h1.text-center {
    font-size: 3.2rem;
    font-weight: bold;
    color: #FF6F00; /* Turuncu renk */
    letter-spacing: 2px;
    background: linear-gradient(90deg, #FF6F00, #FF9E00);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 5px;
    padding: 5px 0;
}


        
        .note-image {
    max-width: 180px;
    margin: 2px 0;
    border-radius: 50%; /* Yuvarlak çerçeve için */
    padding: 5px; /* Çerçeve kalınlığı */
    background: linear-gradient(45deg, red, orange); /* Kırmızıdan turuncuya geçiş */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Hafif gölge efekti */
}

        .game-container {
            max-width: 700px;
            margin: 0 auto;
        }
      .note-list {
    display: flex;
    justify-content: center;
    padding: 0;
    gap: 10px;
    flex-wrap: wrap;
}

.note-list li {
    list-style-type: none;
    padding: 15px;
    font-size: 18px;
    border: 2px solid #2f2e2d;
    border-radius: 10px;
    width: calc(25% - 10px);
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    background-color: #f7f7f7;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Hover efekti */
.note-list li:hover {
    background-color: #2f2e2d; /* Hoverda arka plan rengini değiştir */
    color: white; /* Yazı rengini beyaz yap */
    border-color: #2f2e2d; /* Kenar rengini daha koyu yap */
    transform: scale(1.05); /* Elemanı biraz büyüt */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Hoverda gölgeyi arttır */
}

/* Seçili notalar için özel stil */
.note-list li.correct {
    background-color: #28a745; /* Doğru seçenekler için yeşil arka plan */
    color: white;
    border-color: #218838; /* Koyu yeşil kenar */
    box-shadow: 0 4px 10px rgba(0, 255, 0, 0.2); /* Yeşil gölge */
}

.note-list li.incorrect {
    background-color: #dc3545; /* Yanlış seçenekler için kırmızı arka plan */
    color: white;
    border-color: #c82333; /* Koyu kırmızı kenar */
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.2); /* Kırmızı gölge */
}

/* Mobil için ekstra ayar */
@media (max-width: 600px) {
    .note-list li {
        width: calc(50% - 10px); /* Mobilde 2 sütun */
    }
}

.modal-title {
    text-align: center; /* Başlığı ortalar */
    width: 100%; /* Genişliği %100 yaparak ortalamayı kolaylaştırır */
}

.kalan-zaman {
    display: inline-block;
    padding: 3px 15px;
    background-color: #d73d3d; /* Badge rengi */
    color: white; /* Yazı rengi */
    border-radius: 12px; /* Kenar yuvarlama */
    font-size: 15px; /* Yazı boyutu */
    font-weight: bold; /* Yazı kalınlığı */
    position: relative;
}

.score-badge {
    display: inline-block;
    padding: 3px 15px;
    background-color: #28a745; /* Badge rengi */
    color: white; /* Yazı rengi */
    border-radius: 12px; /* Kenar yuvarlama */
    font-size: 15px; /* Yazı boyutu */
    font-weight: bold; /* Yazı kalınlığı */
    position: relative;
}

.score-info {
    font-family: Arial, sans-serif; /* Yazı tipi */
    line-height: 1.5; /* Satır aralığı */
    color: #333; /* Yazı rengi */
}

.score-info p {
    font-weight: bold; /* Başlık için kalın yazı */
    margin-bottom: 10px; /* Alt boşluk */
}

.score-info ul {
    padding-left: 20px; /* Soldan iç boşluk */
}

.score-info li {
    margin-bottom: 8px; /* Her bir öğe arasında boşluk */
}

.score-info strong {
    color: #007bff; /* Vurgulamak için mavi renk */
}


.score-change {
    position: absolute;
    font-size: 55px;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* Animasyonları daha pürüzsüz yapalım */
    pointer-events: none; /* Tıklanabilirliği kaldır */
    opacity: 0;
    z-index: 10; /* Ön planda görünmesi için z-index */
    transform: translateY(0); /* Başlangıç konumu */
}

.increase {
    color: #28a745; /* Yeşil tonları */
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 255, 0, 0.5); /* Işık efekti ekliyoruz */
    animation: bounce 0.5s ease-in-out; /* Zıplama animasyonu */
}

.decrease {
    color: #dc3545; /* Kırmızı tonları */
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(255, 0, 0, 0.5); /* Kırmızı ışık efekti */
    animation: shake 0.5s ease-in-out; /* Sarsılma animasyonu */
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Yukarıya doğru zıplama */
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px); /* Sol hareket */
    }
    50% {
        transform: translateX(10px); /* Sağ hareket */
    }
    75% {
        transform: translateX(-10px); /* Sol hareket */
    }
    100% {
        transform: translateX(0);
    }
}








        .note-list li.correct {
            background-color: green;
            color: white;
        }
        .note-list li.incorrect {
            background-color: red;
            color: white;
        }
        #restartBtn {
            display: none;
        }
        #scoreDisplay {
            font-size: 18px;
            margin-bottom: 20px;
        }
        #timerDisplay {
            font-size: 18px;
            margin-bottom: 20px;
            color: rgb(255, 255, 255);
        }
        #startBtn {
            margin-top: 20px;
			font-weight:bold;
			font-size:1.2rem;
			
			
        }
		
		
		#scoreInfoBtn {
            margin-top: 20px;
			background-color:black;
			color:white;
		border:1px solid black;}
		
		
     #progressBar {
    background-color: #f0f0f0;
    border-radius: 15px;
    border: 1px solid #ddd;
    overflow: hidden;
    height: 20px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px; /* Yukarıda biraz boşluk bırakabiliriz */
}

#progress {
    height: 100%;
    background: linear-gradient(135deg, #28a745, #80e0a7); /* Yeşil tonlarından oluşan geçiş */
    width: 0%;  /* Başlangıçta %0 */
    border-radius: 15px;
    transition: width 0.3s ease-out; /* Animasyon ekledik */
}

	



#timeButtons {
    margin-bottom: 30px;
}

.alert {
    text-align: center; /* Uyarı mesajını ortalayalım */
    margin-bottom: 10px; /* Uyarı ile butonlar arasında boşluk */
}



.time-btn {
    background: linear-gradient(135deg, #FF6F00, #FF9E00); /* Turuncu geçiş */
    border: none;
    color: white;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 10px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    width: 100%; /* Butonların her biri sütunu tamamen kaplasın */
}

.time-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.time-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.time-btn.selected {
    background: linear-gradient(135deg, #ff460f, #000000);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .col-6 {
        flex: 0 0 50%; /* Mobilde her buton %50 genişlikte olacak */
    }
}





/* Modal'ın arka planını ve genel stilini oluşturuyoruz */
#scoreModal .modal-dialog {
    max-width: 400px; /* Modalın genişliği */
    margin: 30px auto; /* Modalın ortalanması */
}

#scoreModal .modal-content {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease-out; /* Modalın görünür hale gelmesi için animasyon */
}

#scoreModal .modal-header {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Başlık için gradient renk */
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

#scoreModal .modal-title {
    font-size: 24px;
    font-weight: bold;
}

#scoreModal .modal-body {
    text-align: center;
    font-size: 20px;
    color: #333;
    padding: 20px;
}

#scoreModal .modal-footer {
    border-top: none;
    text-align: center;
}

/* Puan yazısını ve animasyonu */
#finalScore {
    font-size: 30px;
    font-weight: bold;
    color: #ff7e5f;
    animation: pulse 1.5s infinite; /* Puan yazısının animasyonu */
}

/* Animasyon efektleri */
@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

/* Yeniden Başla butonu için stil */
#modalRestartBtn {
    background-color: #feb47b;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#modalRestartBtn:hover {
    background-color: #ff7e5f;
    transform: scale(1.1);
}

/* Modal içeriği */
.modal-content {
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Modal başlığı */
.modal-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.modal-title {
    font-size: 20px;
    font-weight: bold;
}

/* Modal kapanış butonu */
.btn-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
}

/* Modal gövdesi */
.modal-body {
    padding: 20px;
    font-size: 16px;
    color: #333;
}

/* Puanlama bilgisi */
.score-info ul {
    list-style-type: none;
    padding-left: 20px;
}

.score-info li {
    margin: 10px 0;
}

.score-info li strong {
    color: #007bff;
}

/* Modal footer */
.modal-footer {
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: center;
}

.modal-footer .btn-secondary {
    background-color: #6c757d;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.modal-footer .btn-secondary:hover {
    background-color: #5a6268;
}

/* Modal geçiş animasyonu */
.modal.fade .modal-dialog {
    transform: translate(0, -50px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal.fade.show .modal-dialog {
    transform: translate(0, 0);
    opacity: 1;
}