/* ---- Testler sayfası koyu tema + quiz UI (yalnız bu sayfaya özel) ---- */
:root{
  --bg:#0b1220; --panel:#121a2b; --panel-2:#0f1726; --card:#0f1726;
  --text:#e7ecf6; --muted:#9fb0d0; --primary:#2f6df6; --border:#24324c;
  --ok:#1d9a52; --ok-2:#137a3e; --err:#c53a3a; --err-2:#8c2323;
}

html{ color-scheme:dark; background:#0b1220; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),#0e1626 60%,var(--bg)) !important;
  color:var(--text);
  min-height:100dvh;
}

/* ---------- Topbar (style.css’i geçersiz kıl) ---------- */
.nav.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px;
  background:rgba(10,16,30,.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.nav.topbar .brand{display:flex; align-items:center; gap:6px; line-height:1}
.nav.topbar .brand .logo{color:var(--primary); font-weight:800}
.nav.topbar .brand .divider{color:#9fb0d0; opacity:.65; font-weight:700}
.nav.topbar .actions{display:flex; flex-wrap:wrap; gap: clamp(6px, 1vw, 12px);}

/* Butonlar */
.nav.topbar .actions a{
  background:transparent !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:12px;
  padding: clamp(6px,1.2vw,10px) clamp(10px,2vw,14px);
  font-weight:700;
  font-size: clamp(12px,1.6vw,15px);
  white-space:nowrap;
  text-decoration:none;
  transition:.15s ease;
}
.nav.topbar .actions a:hover{ background:#131e33 !important; border-color:#3a527a !important; }
.nav.topbar .actions a.danger{ background:#3a0f12 !important; border-color:#5a1a1f !important; color:#ffb4b4 !important; }
.nav.topbar .actions a.primary{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }

/* Çok dar cihaz: grid yerleşim + Çıkış full width */
@media (max-width:380px){
  .nav.topbar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .nav.topbar .brand{ grid-column:1 / -1; }
  .nav.topbar .actions{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .nav.topbar .actions a{ width:100%; text-align:center; }
  .nav.topbar .actions a.danger{ grid-column:1 / -1; }
}

/* ---------- Sayfa gövdesi ---------- */
.main-container{ max-width:980px; margin:22px auto; padding:0 16px; }
.quiz-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:18px; padding:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
h1{ margin:0 0 12px; font-size:22px; }
#soruSayaci{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:#0e1628; font-size:13px; color:#c7d5ef;
}
#soruMetni{ font-size:18px; line-height:1.5; margin:10px 0 14px; }

/* ---------- Seçenekler ---------- */
#secenekler{
  display:flex; flex-direction:column;
  gap: clamp(8px, 1.4vw, 12px);                /* sabit ama ekranla daralan aralık */
}
.secenek-btn{
  display:block; width:100%; text-align:left;
  padding: clamp(10px,1.6vw,14px) clamp(14px,2vw,18px);
  font-size: clamp(14px,1.6vw,16px);
  color:#0f172a;
  background:#ffffff;                           /* kasıtlı açık buton */
  border:1px solid #d3dae6;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(2,6,23,.08);
  transition: background .15s, border-color .15s, transform .06s;
}
.secenek-btn:hover{ background:#f8fafc; border-color:#c7d4ee; }
.secenek-btn:active{ transform:translateY(1px); }
.secenek-btn:focus-visible{ outline:3px solid rgba(47,109,246,.35); outline-offset:2px; }

/* Cevap verildikten sonra tıklanmasın; ama opaklık düşmesin */
.secenek-disabled{ pointer-events:none; opacity:1; }

/* DOĞRU – her ekranda okuyabilmek için beyaz yazı + gölge */
.secenek-btn.dogru{
  background: linear-gradient(180deg, var(--ok), var(--ok-2));
  border-color: #1ab162;
  color:#ffffff !important;
  font-weight:800;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
/* YANLIŞ – beyaz yazı + gölge */
.secenek-btn.yanlis{
  background: linear-gradient(180deg, var(--err), var(--err-2));
  border-color: #e15555;
  color:#ffffff !important;
  font-weight:800;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

/* çok küçük ekranlarda daha kompakt */
@media (max-width:360px){
  .secenek-btn{ font-size:13.5px; padding:10px 12px; }
  .secenek-btn.dogru, .secenek-btn.yanlis{ font-size:13.2px; }
}

/* ---------- Alt bar ve yön tuşları ---------- */
#oncekiBtn, #sonrakiBtn{
  padding: clamp(8px,1.4vw,12px) clamp(12px,2vw,16px);
  font-size: clamp(13px,1.5vw,15px);
  border-radius:12px;
  margin-top:10px; margin-right:6px;
  border:1px solid var(--border); color:var(--text); background:transparent;
}
#sonrakiBtn{ background:var(--primary); border-color:var(--primary); color:#fff; }
#sonrakiBtn:hover{ filter:brightness(.96); }

.soru-alt-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(6px, 1vw, 10px);
  margin-top:14px;
}
#sureGosterge{ color:#cbd5e1; }
#soruBildir{
  display:inline-block;
  padding: clamp(6px,.9vw,8px) clamp(10px,1.6vw,12px);
  font-size: clamp(12px,1.4vw,13px);
  color:#cbd5e1; border:1px solid var(--border); border-radius:10px; text-decoration:none;
}
#soruBildir:hover{ background:#131e33; border-color:#3a527a; }