/* =========================================================
   MCQ (ÇOKTAN SEÇMELİ) SINAV - ÖZEL CSS
   exam-base.css dosyasını import eder
   ========================================================= */

@import url('exam-base.css');

/* =========================================================
   SAYFA YERLEŞİMİ & KAPSAYICILAR
   ========================================================= */
#online-test-wrap { margin-bottom: var(--spacing-xl); }

/* Balangıç Ekranı */
#online-test-start {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-xl);
  text-align: center;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#start-test-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: var(--primary-color);
  color: #fff !important;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}

#start-test-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99,102,241,0.35);
}

/* Sınav Alanı ve Başlık */
#quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
  font-size: 14px;
}

#online-test-area {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--bg-white);
  padding: var(--spacing-xl);
}

#soru-alani {
  padding: var(--spacing-lg) 0;
  text-align: center;
}

/* =========================================================
   GÖRSEL OPTİMİZASYONU (Soru ve Sonuç Ekranı)
   ========================================================= */
#soru-alani img,
#sonuc-ekrani .card img.img-fluid {
  max-height: 320px;
  width: auto;
  border-radius: 8px;
  margin: 0 auto 24px;
  display: block;
  object-fit: contain;
}

/* =========================================================
   ŞIKLAR / SEÇENEKLER (Options Grid)
   ========================================================= */
.secenek-grid {
  display: flex;
  gap: 12px;
  margin-top: var(--spacing-xl);
  justify-content: center;
  flex-wrap: wrap;
}

.secenek-kart {
  flex: 1 1 calc(25% - 12px);
  min-width: 60px;
  max-width: 120px;
  border: 2px solid var(--border-color);
  padding: 12px;
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--bg-light);
  cursor: pointer;
  transition: var(--transition-fast);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.secenek-kart:hover {
  border-color: var(--primary-color);
  background: var(--primary-50);
  transform: translateY(-2px);
}

/* Seçili ve Sonuç Durumları */
.secenek-kart.selected {
  background-color: var(--primary-50);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.secenek-kart.dogru,
.secenek-kart.dogru-secim {
  background-color: var(--success-light) !important;
  border-color: var(--success-color) !important;
  color: var(--success-color) !important;
}

.secenek-kart.yanlis-secim {
  background-color: var(--danger-light) !important;
  border-color: var(--danger-color) !important;
  color: var(--danger-color) !important;
}

/* =========================================================
   KONTROL BUTONLARI (Önceki, Sonraki, Bitir)
   ========================================================= */
#quiz-controls {
  margin-top: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

#quiz-controls .btn {
  flex: 1;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#onceki-btn {
  background: var(--slate-100) !important;
  color: var(--slate-600) !important;
}
#onceki-btn:hover { background: var(--slate-200) !important; transform: translateX(-3px); }

#sonraki-btn {
  background: var(--primary-color) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.2);
}
#sonraki-btn:hover { background: var(--primary-hover) !important; transform: translateX(3px); }

#bitir-btn {
  background: var(--success-color) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.2);
}
#bitir-btn:hover { background: #059669 !important; transform: translateY(-2px); }

/* =========================================================
   SONUÇ EKRANI & DETAYLAR
   ========================================================= */
#sonuc-ekrani .alert {
  background: var(--success-light);
  border: 1px solid var(--success-color);
  color: var(--success-color);
  padding: 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  margin-bottom: 20px;
}

#detaylar { margin-top: var(--spacing-xl); }
#detaylar .card {
  border-radius: var(--radius-md);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   LİDERLİK TABLOSU
   ========================================================= */
.liderlik-tablosu { margin-top: 30px; overflow-x: auto; }
.liderlik-tablosu table { width: 100%; min-width: 320px; border-collapse: collapse; }
.liderlik-tablosu th, .liderlik-tablosu td { padding: 12px; text-align: center; border: 1px solid var(--border-color); }
.liderlik-tablosu th { background-color: var(--bg-light); font-weight: 700; }

/* =========================================================
   MOBİL UYUM (RESPONSIVE)
   ========================================================= */
@media (max-width: 768px) {
  #quiz-controls {
    flex-direction: column;
    gap: 12px;
  }
  .secenek-kart {
    flex: 1 1 calc(50% - 12px);
    max-width: 100%;
  }
  #soru-alani img,
  #sonuc-ekrani .card img.img-fluid {
    max-height: 200px;
  }
}
/* =========================================================
   SONUÇ EKRANI BUTONLARI (Yeniden Başlat & Detaylı Analiz)
   ========================================================= */

#sonuc-ekrani button,
#sonuc-ekrani .btn,
#detaylar button,
#detaylar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm, 6px);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  margin-right: 12px;
}

/* Yeniden Başlat Butonu (Temanın Ana Mavi Rengi) */
#yeniden-baslat-btn,
.btn-restart {
  background: var(--primary-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}

#yeniden-baslat-btn:hover,
.btn-restart:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99,102,241,0.35);
}

/* Detaylı Analiz Butonu (Şık Koyu Gri/Slate Rengi) */
#detayli-analiz-btn,
.btn-analysis,
#sonuc-ekrani .btn-info {
  background: var(--slate-700) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(51,65,85,0.2);
}

#detayli-analiz-btn:hover,
.btn-analysis:hover,
#sonuc-ekrani .btn-info:hover {
  background: var(--slate-800) !important;
  transform: translateY(-2px);
}

/* Dark Mode Uyumu */
[data-theme="dark"] #detayli-analiz-btn,
[data-theme="dark"] .btn-analysis {
  background: var(--slate-600) !important;
}
[data-theme="dark"] #detayli-analiz-btn:hover,
[data-theme="dark"] .btn-analysis:hover {
  background: var(--slate-500) !important;
}

/* Mobilde Butonların Alt Alta Düzenli Durması İçin */
@media (max-width: 768px) {
  #sonuc-ekrani button,
  #sonuc-ekrani .btn,
  #detaylar button,
  #detaylar .btn {
    display: flex;
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }
}