/* ============================================================================
   soru_sablonu.css — kazanım testinin GÖRSEL DİLİ, akışkan düzende.

   NEDEN BİREBİR KOPYA DEĞİL: kaynak şablon (matai_kazanim_test_app.html) sabit
   tuval üzerine kurulu — `#stage{width:1440px;height:810px}` ve her öğe mutlak
   koordinatta (`.soruBant{left:1324px;top:153px}`), ekrana transform:scale ile
   letterbox olarak sığdırılıyor. Öğrenci portalı ise akışkan/duyarlı bir sayfa
   ve telefondan da açılıyor; sınav metinleri de kazanım testindekinden uzun
   olabiliyor. Sabit tuval taşınsaydı sınav 1440×810 kutuya hapsolur, mobilde
   okunmaz hale gelir, uzun metin taşardı.

   Bu yüzden taşınan şey YERLEŞİM değil, MARKA DİLİ. Değerler kaynaktan
   ÖLÇÜLEREK alındı (uydurulmadı):
     --baslik / .opt .l arka planı : #0002A9   (lacivert)
     .soruBant                     : #0002A9, border-radius 12px,
                                     box-shadow 0 3px 9px rgba(0,0,0,.28)
     .intro / .soru / .opt         : 24px  (.soru weight 600, .opt weight 400)
     .opt .l  (şık harf kutusu)    : 53×53, border-radius 9px, weight 700
     .opts gap                     : 14px / 44px
   Punto sabit 24px yerine clamp() ile ölçekleniyor — sabit tuval olmadığı için
   ölçeği ekran belirlemeli.

   Görseller (bant, oklar, yıldız) /js/shared/soru_sablonu_varlik.js içinde;
   ikisi de TEK KAYNAK, iki uygulama da buradan okur.
   ============================================================================ */

:root {
  --sbl-lacivert: #0002A9;
  --sbl-metin: #111827;
  --sbl-cizgi: #e5e7eb;
  --sbl-punto: clamp(15px, 1.05rem + 0.35vw, 24px);
}

/* ── Soru kartı: beyaz zemin, yumuşak gölge ─────────────────────────────── */
.sbl-kart {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .10);
  border: 1px solid var(--sbl-cizgi);
  padding: clamp(16px, 3vw, 30px);
  position: relative;
}

/* ── "N. Soru" lacivert rozeti (kaynakta .soruBant) ─────────────────────── */
.sbl-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sbl-lacivert); color: #fff;
  border-radius: 12px; box-shadow: 0 3px 9px rgba(0, 0, 0, .28);
  padding: 9px 18px; min-width: 116px;
  font-weight: 700; font-size: clamp(13px, .9rem + .2vw, 17px);
  letter-spacing: .3px;
  /* Kaynakta sağ üstte mutlak konumlu; burada akışta ama sağa yaslı. */
  float: right; margin: 0 0 10px 14px;
}

/* ── Soru metni ─────────────────────────────────────────────────────────── */
.sbl-intro { font-size: var(--sbl-punto); line-height: 1.55; color: var(--sbl-metin); }
.sbl-soru  { font-size: var(--sbl-punto); line-height: 1.5; font-weight: 600;
             margin-top: 10px; color: var(--sbl-metin); }

/* ── Şıklar ─────────────────────────────────────────────────────────────── */
.sbl-siklar { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

.sbl-sik {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; padding: 10px 14px; border-radius: 14px;
  border: 2px solid transparent; background: #fff;
  font-size: var(--sbl-punto); font-weight: 400; color: #000;
  transition: background .12s, border-color .12s;
}
.sbl-sik:hover { background: #f5f6ff; }
/* `.selected` — öğrenci portalının KENDİ seçim sınıfı. selectOption() onu
   takıyor; JS'i değiştirip iki yerde seçim durumu tutmamak için burada
   karşılanıyor (tek kaynak: seçim mantığı portalda kalıyor). */
.sbl-sik.secili, .sbl-sik.selected { border-color: var(--sbl-lacivert); background: #eef0ff; }

/* Şık harf kutusu — kaynakta 53×53/r9/700; burada punto ile ölçekleniyor. */
.sbl-sik .harf {
  flex: 0 0 auto;
  width: clamp(34px, 2rem + 1.2vw, 53px); height: clamp(34px, 2rem + 1.2vw, 53px);
  border-radius: 9px; background: var(--sbl-lacivert); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: clamp(14px, .9rem + .3vw, 22px);
}
.sbl-sik .deger { min-width: 0; }

/* ── İleri / geri okları ────────────────────────────────────────────────── */
.sbl-oklar { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.sbl-ok { border: none; background: none; padding: 0; cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center;
          min-width: 44px; min-height: 44px;      /* dokunma hedefi */
          border-radius: 12px; }
.sbl-ok img { width: clamp(74px, 7vw, 113px); height: auto; display: block; }
.sbl-ok:disabled { opacity: .35; cursor: default; }
.sbl-ok:focus-visible { outline: 3px solid var(--sbl-lacivert); outline-offset: 3px; }

/* ── Mobil: rozet akışa girsin, float sarma bozmasın ────────────────────── */
@media (max-width: 560px) {
  .sbl-rozet { float: none; display: flex; width: 100%; margin: 0 0 12px; }
  .sbl-siklar { gap: 10px; }
  .sbl-oklar { gap: 8px; }
}

/* Yazdırmada gezinme okları kâğıda basılmaz. */
@media print { .sbl-oklar { display: none !important; } }