/* ==== apps/modules/web/3400/10_sinav_ac_ogrenci.php dosyasindan tasindi ==== */
/* ── Üst çubuk ─────────────────────────────────────────────────────────── */
.sq-header {
  position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 1002;
  background: linear-gradient(135deg,#0f2a52,#1a3a6e);
  border-bottom: 1px solid rgba(56,189,248,0.22);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
  display: flex; align-items: center;
}
.sq-header button {
  width: 44px; height: 44px; background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-left: 4px;
}
.sq-header button:hover { background: rgba(56,189,248,0.12); }
.sq-header-ad {
  position: absolute; left: 60px; right: 16px; color: #e2e8f0;
  font-size: 14px; font-weight: 600; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Yapışkan navigasyon ───────────────────────────────────────────────── */
.sq-nav {
  position: fixed; top: 50px; left: 0; right: 0; z-index: 1001;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem;
}
.sq-ok {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid #e5e7eb; background: #fff; color: #4f46e5;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.sq-ok:hover:not(:disabled) { background: #eef2ff; }
.sq-ok:disabled { color: #d1d5db; cursor: default; }
.sq-sayac { flex-shrink: 0; font-size: 13px; color: #6b7280; white-space: nowrap; }
.sq-sayac b { font-size: 15px; color: #111827; }

/* Çipler taşarsa yatay kayar — sayfa gövdesi yatay kaymaz */
.sq-cipler {
  display: flex; gap: .3rem; overflow-x: auto; flex: 1; min-width: 0;
  padding-bottom: 2px; scrollbar-width: thin;
}
.sq-cip {
  flex-shrink: 0; min-width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #e5e7eb; background: #fff; color: #6b7280;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.sq-cip:hover { border-color: #4f46e5; color: #4f46e5; }
.sq-cip.aktif { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.sq-cip.cizimli::after {
  content: ''; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: #22c55e; margin: -6px auto 0;
}

/* ── Gövde ─────────────────────────────────────────────────────────────── */
.sq-govde {
  position: absolute; top: 100px; bottom: 0; left: 0; right: 0;
  overflow-y: auto; overflow-x: hidden;
  background: #f8fafc; padding: 1rem 1rem 4rem; text-align: left;
  -webkit-overflow-scrolling: touch;
}
.sq-ustbilgi {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1rem; font-size: 12px; color: #6b7280;
}
.sq-pill {
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
  padding: .15rem .55rem; border-radius: 6px; font-weight: 700;
}
.sq-pill-tip { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.sq-soru-say, .sq-tarih { font-weight: 600; }
.sq-tarih i { margin-right: .25rem; }
.sq-uyari {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 8px; padding: .55rem .8rem; font-size: 12.5px;
  margin-bottom: 1rem; line-height: 1.5;
}
.sq-uyari i { margin-right: .35rem; }

/* ── Soru bloğu ────────────────────────────────────────────────────────── */
.sq-soru {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  margin-bottom: 1.1rem; overflow: hidden;
  scroll-margin-top: 12px;                 /* çipe basınca başlık gizlenmesin */
}
.sq-soru.hedef { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79,70,229,.18); }
.sq-soru-bas {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; background: #f9fafb; border-bottom: 1px solid #f3f4f6;
}
.sq-soru-no {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: #4f46e5; color: #fff;
  font-size: 12.5px; font-weight: 800; line-height: 26px; text-align: center;
}
.sq-soru-etiket { font-size: 12px; font-weight: 600; color: #6b7280; }

/* Puan rozeti — kart başlığının sağında */
.sq-puan {
  margin-left: auto; flex-shrink: 0;
  padding: .2rem .6rem; border-radius: 8px;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sq-puan-dogru  { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.sq-puan-yanlis { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.sq-puan-bos    { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.sq-puan-notr   { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }

/* Öğrenci cevabı / doğru cevap — rozetin yanında, küçük */
.sq-cvp {
  flex-shrink: 0; font-size: 11.5px; color: #6b7280;
  background: #fff; border: 1px solid #e5e7eb;
  padding: .15rem .45rem; border-radius: 6px;
}
.sq-cvp b { color: #111827; }
.sq-cvp-dogru { border-color: #a7f3d0; background: #f0fdf4; }
.sq-cvp-dogru b { color: #047857; }

/* Dar ekranda başlık sarmalansın, rozet kaymasın */
.sq-soru-bas { flex-wrap: wrap; row-gap: .35rem; }
.sq-soru-govde { padding: .8rem; overflow-x: auto; }

/* ── Cevap alanı (yalnızca yayındaki ödevlerde) ────────────────────────── */
.sq-cevap {
  order: 2;                       /* soru gövdesinin ALTINDA dursun */
  padding: .7rem .8rem; border-top: 1px solid #f3f4f6; background: #fafafa;
}
.sq-cevap-baslik {
  font-size: 11.5px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: .45rem;
}
.sq-siklar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.sq-sik {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid #d1d5db; background: #fff;
  font-size: 14px; font-weight: 800; color: #6b7280;
  cursor: pointer; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.sq-sik:hover { border-color: #0d9488; color: #0d9488; }
.sq-sik.secili { background: #0d9488; border-color: #0d9488; color: #fff; }
.sq-sik-sil {
  background: none; border: none; color: #d1d5db;
  font-size: 15px; cursor: pointer; padding: 0 .4rem; margin-left: .2rem;
}
.sq-sik-sil:hover { color: #dc2626; }

.sq-cevap-durum {
  margin-top: .45rem; font-size: 11.5px; font-weight: 600; color: #047857;
}
.sq-cevap-durum i { margin-right: .25rem; }
/* Açık uçlu bilgi notu — kaldırılan çizim/foto/metin düğmelerinin yerinde */
.sq-cevap-bilgi {
  color: #4338ca; background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 8px; padding: .5rem .7rem; line-height: 1.5; font-weight: 600;
}

/* Kart içi sıralama: başlık → soru → cevap */
.sq-soru { display: flex; flex-direction: column; }
.sq-soru-bas   { order: 0; }
.sq-soru-govde { order: 1; }
.sq-soru-govde img, .sq-soru-govde table { max-width: 100%; }
.sq-soru-yok {
  padding: 1.5rem; text-align: center; color: #991b1b;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; font-size: 13.5px;
}
.sq-son { text-align: center; color: #9ca3af; font-size: 12.5px; padding: 1rem 0 2rem; }

/* Tablet ve üstünde çipler daha rahat, gövde ortalanmış */
@media (min-width: 768px) {
  .sq-govde { padding: 1.2rem 2rem 4rem; }
  .sq-soru-govde { padding: 1.1rem; }
}