/* Soru sayfaları — MOBİL ÖNCELİKLİ, BilQ kimliğiyle.
 *
 * Renkler ve tipografi uydurulmadı: sitenin ve uygulamanın kendi dili
 * (bordo/altın/krem, Poppins + Inter). İmza öğe CEVAP BANDI — uygulamada ve
 * maraton videolarında ödül anı bordo bant üzerine altın yazıyla gelir;
 * web'de de öyle geliyor. Zemindeki ışın huzmesi de maraton videolarının
 * imzası, burada saf CSS: görsel ağırlığı sıfır.
 *
 * CEVAP display:none İLE GİZLENMEZ: bazı tarayıcı robotları onu "içerik yok"
 * diye okur ve bu sayfaların tüm SEO değeri cevaplarla açıklamalarda. Görsel
 * gizleme yükseklik kırpmayla yapılır, metin belgede kalır.
 */

.soru-sayfasi {
  --bordo: #7d1f35;
  --bordo-koyu: #3a0f1c;
  --altin: #e8a020;
  --krem: #fffaf8;
  --murekkep: #2a0a14;
  --soluk: #6b5860;
  --cizgi: #ecdfd8;

  background: var(--krem);
  color: var(--murekkep);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.soru-sayfasi main,
.tepe,
.skor {
  margin: 0 auto;
  max-width: 46rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ---- Üst bağlantı ---- */
.ust-baglanti {
  color: var(--bordo);
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0.9rem 1rem;
  text-decoration: none;
}

/* ---- Tepe: ışın huzmesi zemin (maraton videolarının imzası) ---- */
.tepe {
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 160, 32, 0.18), transparent 62%),
    repeating-conic-gradient(
      from 0deg at 50% 0%,
      rgba(255, 255, 255, 0.05) 0deg 6deg,
      transparent 6deg 12deg
    ),
    linear-gradient(160deg, var(--bordo), var(--bordo-koyu));
  border-radius: 0 0 22px 22px;
  color: #fff;
  max-width: 100%;
  padding: 0.5rem 1rem 1.5rem;
}

.goz-ustu {
  color: var(--altin);
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 0.35rem;
}

.soru-sayfasi h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

.giris {
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 34rem;
}

.kahraman {
  margin: 1.2rem 0 0;
}

.kahraman img {
  /* Katlamayı tek başına yemesin: ilk soru ekranın altında kalmamalı. */
  max-height: 42vh;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  display: block;
  height: auto;
  width: 100%;
}

/* ---- Skor şeridi: sayfanın kendisi bir test, kahraman öğe oluşan skor ---- */
.skor {
  align-items: center;
  background: var(--krem);
  border-bottom: 1px solid var(--cizgi);
  display: flex;
  gap: 0.75rem;
  max-width: 100%;
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  position: sticky;
  top: 0;
  z-index: 5;
}

.skor-metin {
  color: var(--bordo);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  white-space: nowrap;
}

.skor-cubuk {
  background: var(--cizgi);
  border-radius: 999px;
  flex: 1;
  height: 8px;
  overflow: hidden;
}

.skor-cubuk i {
  background: linear-gradient(90deg, var(--altin), var(--bordo));
  display: block;
  height: 100%;
  transition: width 0.35s ease;
  width: 0;
}

/* ---- Soru kartı ---- */
.sorular {
  list-style: none;
  padding: 0;
}

.soru {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(58, 15, 28, 0.05);
  margin-bottom: 1rem;
  padding: 1rem;
}

.soru-ust {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.sayac {
  color: var(--soluk);
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
}

.sayac b {
  color: var(--bordo);
  font-size: 1.05rem;
}

/* Zorluk pili gerçek bilgi taşır: sayfa kolaydan zora ilerliyor. */
.zorluk {
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.22rem 0.6rem;
}

.zorluk--kolay { background: #e8f6ec; color: #2e7d43; }
.zorluk--orta { background: #fdf1dc; color: #a06a10; }
.zorluk--zor { background: #fbe9ed; color: var(--bordo); }

.soru h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.85rem;
}

.siklar {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 44 px: parmakla rahat basılan en küçük hedef. */
.sik {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--cizgi);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 1rem;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
}

.sik:hover { border-color: rgba(125, 31, 53, 0.4); }

/* FLEX TAŞMASI: esnek öğe varsayılan olarak içeriğinden dar olamaz. Uzun bir
   şık metni düğmeyi kabından geniş yapıyor, o da tüm sayfayı genişletip
   telefonda yatay kaydırma açıyordu (390 px'de başlık bile kesiliyordu). */
.sik-metin {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sik-harf {
  align-items: center;
  background: #f6efec;
  border-radius: 8px;
  color: var(--bordo);
  display: flex;
  flex: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.sik.dogru { background: #eef8f1; border-color: #2e7d43; }
.sik.dogru .sik-harf { background: #2e7d43; color: #fff; }
.sik.yanlis { background: #fdeef0; border-color: #b3261e; }
.sik.yanlis .sik-harf { background: #b3261e; color: #fff; }

/* ---- İMZA: cevap bandı (uygulamadaki ödül anının web karşılığı) ---- */
.cevap {
  margin-top: 0.85rem;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.cevap.cevap-kapali {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
}

.cevap-bant {
  align-items: baseline;
  background: linear-gradient(120deg, var(--bordo), var(--bordo-koyu));
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0.65rem 0.85rem;
}

.cevap-bant span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
  text-transform: uppercase;
}

.cevap-bant b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--altin);
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
}

.aciklama {
  border-left: 3px solid var(--altin);
  color: #3d3634;
  margin: 0;
  padding-left: 0.8rem;
}

/* ---- Çağrı ---- */
.cta {
  background: var(--bordo);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(125, 31, 53, 0.25);
  color: #fff;
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin: 1.5rem 0;
  min-height: 44px;
  padding: 0.95rem 1rem;
  text-align: center;
  text-decoration: none;
}

/* ---- Komşu sayfalar ---- */
.komsular {
  border-top: 3px solid var(--bordo);
  margin-top: 2.5rem;
  padding-top: 1rem;
}

.komsular h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.komsular ul { list-style: none; padding: 0; }
.komsular li { margin: 0.2rem 0; }

.komsular a {
  color: var(--bordo);
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 0;
  text-decoration: none;
}

.komsular a:hover { text-decoration: underline; }
.hub-baglanti { font-weight: 700; }

.atif {
  border-top: 1px solid var(--cizgi);
  color: var(--soluk);
  font-size: 0.82rem;
  margin-top: 2rem;
  padding: 1rem 0 2rem;
}

.alt-baglanti { color: var(--soluk); font-size: 0.95rem; margin-top: 1.5rem; }
.alt-baglanti a { font-weight: 700; }

/* ---- Tepe sayfa (/soru-bankasi/) ---- */
.ozet {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.ozet li {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--altin);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}

.ozet b { color: var(--bordo); }

.konu-izgara {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
}

/* Kimlik rengi kartı ayırır; zemin her kartta aynı kalır. */
.konu-kart a {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  color: inherit;
  display: block;
  min-height: 44px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kart-gorsel {
  aspect-ratio: 3 / 2;
  border-bottom: 4px solid var(--kimlik, var(--bordo));
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.kart-govde { padding: 0.9rem 1rem 1rem; }

/* Görseli olmayan kart (KPSS) yalnız renk şeridiyle ayrılır. */
.konu-kart a:not(:has(.kart-gorsel)) {
  border-left: 5px solid var(--kimlik, var(--bordo));
}

.konu-kart a:hover {
  box-shadow: 0 10px 24px rgba(58, 15, 28, 0.12);
  transform: translateY(-2px);
}

.konu-kart h3 {
  color: var(--kimlik, var(--bordo));
  font-family: 'Poppins', sans-serif;
  font-size: 1.08rem;
  margin: 0 0 0.3rem;
}

.konu-kart p {
  color: var(--soluk);
  margin: 0 0 0.6rem;
}

.konu-say {
  background: #f6efec;
  border-radius: 999px;
  color: var(--kimlik, var(--bordo));
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
}

.soru-sayfasi h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  margin: 2rem 0 0.8rem;
}

/* Klavye ile gezen görsün. */
.sik:focus-visible,
.cta:focus-visible,
.komsular a:focus-visible,
.konu-kart a:focus-visible,
.ust-baglanti:focus-visible {
  outline: 3px solid var(--altin);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cevap,
  .skor-cubuk i,
  .konu-kart a { transition: none; }
}

@media (min-width: 40rem) {
  .tepe { padding: 1rem 2rem 2rem; }
  .soru-sayfasi main,
  .skor { padding-left: 2rem; padding-right: 2rem; }
  .soru-sayfasi h1 { font-size: 2.3rem; }
  .konu-izgara { grid-template-columns: 1fr 1fr; }
}

/* ---- Gömülü videolar (tıklanana kadar yalnız kapak) ---- */
.videolar { margin: 2.5rem 0 1rem; }
.videolar h2 { font-family: 'Poppins', sans-serif; font-size: 1.3rem; margin: 0 0 0.8rem; }
.video-izgara {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.video-kart { margin: 0; }
.video-kart .yt-kapak,
.video-kart iframe {
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  border-radius: 14px;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.video-kart--dikey .yt-kapak,
.video-kart--dikey iframe { aspect-ratio: 9 / 16; }
.yt-kapak img { height: 100%; object-fit: cover; width: 100%; }
.yt-oynat {
  align-items: center;
  background: rgba(125, 31, 53, 0.92);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1.4rem;
  height: 58px;
  justify-content: center;
  left: 50%;
  padding-left: 4px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
}
.video-kart figcaption { font-size: 0.9rem; font-weight: 600; margin-top: 0.45rem; }

/* ---- Görsel quiz (bayrak) ---- */
.soru-gorsel {
  background: #f6efec;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  display: block;
  height: auto;
  margin: 0 auto 0.85rem;
  max-height: 200px;
  max-width: 100%;
  object-fit: contain;
  padding: 0.5rem;
  width: min(18.75rem, 100%);
}
.seviye-baslik {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  margin: 2rem 0 0.6rem;
  scroll-margin-top: 4rem;
}
.bayrak-izgara {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  list-style: none;
  margin: 0.6rem 0 1.5rem;
  padding: 0;
}
.bayrak-izgara figure { margin: 0; text-align: center; }
.bayrak-izgara img {
  aspect-ratio: 3 / 2;
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  height: auto;
  object-fit: contain;
  width: 100%;
}
.bayrak-izgara figcaption { font-size: 0.88rem; font-weight: 600; margin-top: 0.3rem; }
.bolge-atla { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.bolge-atla a {
  border: 1.5px solid var(--cizgi);
  border-radius: 999px;
  color: var(--bordo);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  text-decoration: none;
}

/* ---- Alt gezinti: sayfalar birbirine bağlı ---- */
.alt-gezinti { margin: 0 auto; max-width: 46rem; padding: 0 1rem; }
.alt-gezinti ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.alt-gezinti a {
  color: var(--bordo);
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0.7rem 0;
  text-decoration: none;
}
.alt-gezinti a:hover { text-decoration: underline; }

/* Soru listesinin bölüm başlığı: sayfa h1'inden sonra h3'e atlamamak için
   (başlık hiyerarşisi ekran okuyucunun gezinti ağacı). */
.liste-basligi {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soluk);
  margin: 1.6rem 0 0.6rem;
}

.liste-not { color: var(--soluk); font-size: 0.92rem; margin: 0 0 0.9rem; }

/* Yazdır düğmesi kpss.css'tekiyle aynı; soru sayfaları onu yüklemiyor. */
.yazdir {
  background: none;
  border: 1.5px solid var(--bordo);
  border-radius: 10px;
  color: var(--bordo);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0.8rem;
}
.yazdir:hover { background: var(--bordo); color: #fff; }

/* YAZDIRMA: cevaplar AÇIK basılır (çalışma kâğıdı + cevap anahtarı),
   etkileşim ve gezinti gizlenir. Kâğıtta ışın huzmesi ve bordo zemin
   mürekkep yakar; tepe düz siyah-beyaza döner. */
@media print {
  .site-nav, .kirinti, .skor, .cta, .komsular, .kpss-alt, .alt-gezinti,
  .yazdir, .liste-not, .alt-baglanti, .kahraman { display: none !important; }
  .soru-sayfasi { background: #fff; font-size: 11pt; }
  .tepe { background: none; color: #000; border: 0; padding: 0; }
  .tepe .giris, .goz-ustu { color: #000; }
  .soru { break-inside: avoid; page-break-inside: avoid; }
  .cevap { max-height: none !important; overflow: visible !important; }
  .cevap-bant { background: none; color: #000; border: 1px solid #000; }
  a { text-decoration: none; color: #000; }
}