:root {
    --primary: #6C5CE7; /* Modern Mor */
    --secondary: #00CEC9; /* Turkuaz */
    --success: #00B894; /* Yeşil */
    --danger: #FF7675; /* Mercan/Kırmızı */
    --warning: #FAB1A0;
    --bg-card: #ffffff;
    --text-main: #2D3436;
}

/* WRAPPER AYNI */
.game-wrapper {
    border: none;
    background: #F0F3F7; /* Açık gri/mavi arka plan */
    transition: background-color 0.4s ease, transform 0.2s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 30px;
    margin-bottom: 40px;
    height: 45rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: 0.4s;
}

/* Arka Plan Renk Efektleri */
.game-wrapper.bg-correct { 
    background-color: #9affc5 !important; /* Açık Yeşil */
    transition: background-color 0.3s ease;
}

.game-wrapper.bg-wrong { 
    background-color: #ffaba3 !important; /* Canlı Kırmızı */
    transition: background-color 0.3s ease;
}

/* Soru alanının arka planı sabit kalsın istersen (isteğe bağlı) */
.bg-correct .question-text-area, .bg-wrong .question-text-area {
    background: rgba(255, 255, 255, 0.9) !important;
}


/* SCREENS */
.screen { display:none; flex:1; }
.screen.active {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

/* CARD */
.result-card {
    background:white;
    padding:30px;
    border-radius:25px;
    text-align:center;
    width:80%;
}

/* QUESTION */
.question-container {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    font-family: 'Nunito', sans-serif;

}

.question-text-area {
    background: var(--bg-card);
	border: 3px solid var(--primary);
	box-shadow: 0 6px 0 var(--primary); /* Deep shadow efekti */
	color: var(--text-main);
	font-weight: 700;
    width:85%;
    min-height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    border-radius:20px;

}

#questionText {
	font-size:2rem;
	font-family: 'Nunito', sans-serif;
}

/* 4 SEÇENEK */
.answers-area {
    width:85%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.btn-answer {
    padding:18px;
    border: 2px solid #E0E0E0;
    border-radius:12px;
	border-bottom: 5px solid #E0E0E0; /* 3D Buton efekti */
    font-size:1.6rem;
    cursor:pointer;
    background: white;
    color: var(--text-main);
	transition: all 0.2s;
	font-weight:600;
	font-family: 'Nunito', sans-serif;
}

.btn-redo {
    padding:18px;
    border: 2px solid #E0E0E0;
    border-radius:12px;
	border-bottom: 5px solid #E0E0E0; /* 3D Buton efekti */
    font-size:1.6rem;
    cursor:pointer;
    background: white;
    color: var(--text-main);
	transition: all 0.2s;
	font-weight:600;
    width: 100%;
    background: var(--secondary);
    color: white;
    border-color: #00b0ad;
	width:100%;
}

.btn-answer:hover {
    transform: translateY(-2px);
}
.btn-answer.correct { 
    background: var(--success) !important; 
    border-color: #008f72 !important;
    color: white;
}
.btn-answer.wrong { 
    background: var(--danger) !important; 
    border-color: #d65a5a !important;
    color: white;
}

    /* Badge & İkonlar */
.bottom-bar {
    background: rgba(255,255,255,0.9);
    padding:15px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
    .badge {
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
    }
    #timer { background: #fff3e0; color: #ef6c00; }
    #progress { background: #e3f2fd; color: #1565c0; }
    .fs-toggle { cursor: pointer; color: #757575; font-size: 1.3rem; transition: 0.2s; }
    .fs-toggle:hover { color: #333; transform: scale(1.1); }

    .hidden { visibility: hidden; pointer-events: none; }

.progress-dots {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:15px;
}

.dot {
    width:28px;
    height:28px;
    border-radius:50%;
    background:#ccc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:bold;
}

.dot.correct { background:#4CAF50; color:white; }
.dot.wrong { background:#f44336; color:white; }

/* BAŞLANGIÇ BUTONU */
.start-button {
    width: 100%;
    padding: 15px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
}

/* BAŞLANGIÇ İKONU */
.start-icon {
    font-size: 3rem;
    color: var(--primary);
}

/* BİTİŞ İKONU */
.finish-icon {
    font-size: 5rem;
    margin-bottom: 20px;
}

/* SONUÇ BAŞLIĞI */
.result-title {
    font-size: 2rem;
    color: var(--primary);
}

/* SKOR KUTUSU */
.score-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    margin: 20px 0;
}

/* SKOR YAZISI */
.score-text {
    font-size: 1.3rem;
    margin: 5px 0;
}

/* SÜRE YAZISI */
.time-text {
    font-size: 1.1rem;
    color: #636e72;
}

/* === Mobil Uyum (Responsive) === */
@media (max-width: 960px) {
.answers-area {grid-template-columns: 1fr;}
.btn-answer {font-size:1.5rem;padding:12px;}

}

@media (max-height: 500px) and (orientation: landscape) {
    .game-wrapper {
        height: auto; /* Yüksekliği serbest bırak */
        min-height: 100vh; /* Ekranı kaplasın */
    }
    
    .question-text-area {
        min-height: 80px; /* Soru alanını daralt */
        padding: 10px;
    }

    #questionText {
        font-size: 1.4rem; /* Yazıyı küçült */
    }

    .answers-area {
        grid-template-columns: 1fr 1fr; /* Şıkları yan yana tut ama... */
        gap: 8px;
    }

    .btn-answer {
        padding: 10px; /* Buton iç boşluğunu azalt */
        font-size: 1.2rem;
    }

#bitis .result-card {
        padding: 15px;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr 2fr; /* Sol tarafa ikon, sağa bilgiler */
        align-items: center;
        gap: 15px;
    }

    /* İkonu küçült */
    .finish-icon {
        font-size: 3rem !important;
        margin-bottom: 0 !important;
        grid-row: span 2;
    }

    /* Başlığı küçült */
    .result-title {
        font-size: 1.4rem !important;
        margin: 5px 0 !important;
    }

    /* Skor kutusunu sadeleştir */
    .score-box {
        padding: 10px !important;
        margin: 5px 0 !important;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .score-text, .time-text {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    /* Butonu daralt */
    .btn-redo {
        padding: 10px !important;
        font-size: 1.1rem !important;
        grid-column: span 2; /* Buton en alta yayılsın */
    }
}