/* KPSS konu sayfaları — sorular.css'in üstüne.
 *
 * Soru sayfalarından farkı UZUN OKUMA: anlatım bölümleri, tablolar, kod ve
 * ipucu kutuları. Satır uzunluğu 46rem'le sınırlı (sorular.css), tablo
 * telefonda kendi içinde kayar ki sayfa yatay kaymasın.
 */
.kpss-sayfasi { --kimlik: var(--bordo); }

.kpss-sayfasi .tepe { border-bottom: 4px solid var(--kimlik); }

.icindekiler {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
}
.icindekiler h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  color: var(--soluk);
}
.icindekiler ol { margin: 0; padding-left: 1.2rem; }
.icindekiler li { padding: 0.25rem 0; }
.icindekiler a { color: var(--bordo); text-decoration: none; }
.icindekiler a:hover { text-decoration: underline; }

.anlatim { margin: 2rem 0; scroll-margin-top: 1rem; }
.anlatim h2,
.test-bolumu h2,
.kutu h2,
.kaynakca h2,
.ders-blok h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 0.7rem;
}
.anlatim p { margin: 0 0 0.9rem; }
.anlatim ul { padding-left: 1.2rem; }
.anlatim li { margin: 0.3rem 0; }

.tablo-kap {
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  margin: 1rem 0;
  overflow-x: auto;
}
.tablo-kap table { border-collapse: collapse; font-size: 0.92rem; min-width: 100%; }
.tablo-kap th {
  background: var(--kimlik);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  text-align: left;
  white-space: nowrap;
}
.tablo-kap td {
  background: #fff;
  border-top: 1px solid var(--cizgi);
  padding: 0.55rem 0.7rem;
  vertical-align: top;
}

.kutu {
  border-radius: 16px;
  margin: 2rem 0;
  padding: 1.1rem 1.2rem;
  scroll-margin-top: 1rem;
}
.kutu--kod { background: var(--bordo-koyu); color: #fff; }
.kutu--kod h2 { color: var(--altin); }
.kutu--kod dt {
  color: var(--altin);
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-top: 0.9rem;
}
.kutu--kod dt:first-of-type { margin-top: 0; }
.kutu--kod dd { color: rgba(255, 255, 255, 0.9); margin: 0.2rem 0 0; }
.kutu--ipucu { background: #fdf1dc; border-left: 5px solid var(--altin); }
.kutu--ipucu ul { margin: 0; padding-left: 1.2rem; }
.kutu--ipucu li { margin: 0.4rem 0; }

.test-bolumu { margin-top: 2.5rem; scroll-margin-top: 1rem; }
.test-bolumu .skor { margin: 0.8rem 0; padding-left: 0; padding-right: 0; }

.onceki-sonraki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  margin: 1.5rem 0;
}
.onceki-sonraki a {
  border: 1.5px solid var(--cizgi);
  border-radius: 12px;
  color: var(--bordo);
  font-weight: 600;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  text-decoration: none;
}
.onceki-sonraki .sonraki { margin-left: auto; }

.kaynakca { margin-top: 2rem; }
.kaynakca ol { font-size: 0.9rem; padding-left: 1.3rem; }
.kaynakca li { margin: 0.35rem 0; overflow-wrap: anywhere; }
.kaynakca a { color: var(--bordo); }

.dogrulama-notu,
.kpss-not {
  color: var(--soluk);
  font-size: 0.85rem;
  margin: 1.2rem 0;
}

.ders-blok {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-top: 4px solid var(--kimlik);
  border-radius: 16px;
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
}
.ders-blok h2 a { color: inherit; text-decoration: none; }
.ders-blok ul { padding-left: 1.2rem; }
.ders-blok li a { color: var(--bordo); display: inline-block; padding: 0.3rem 0; }

.kpss-alt {
  border-top: 1px solid var(--cizgi);
  color: var(--soluk);
  font-size: 0.88rem;
  margin: 2rem auto 0;
  max-width: 46rem;
  padding: 1.2rem 1rem 2.5rem;
}
.kpss-alt a { color: var(--bordo); }

/* "Kısaca": sayfanın ilk ekranında soruyu cevaplayan çekirdek bilgiler. */
.kutu--kisaca {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-left: 5px solid var(--kimlik);
  margin-top: 1.4rem;
}
.kutu--kisaca ul { margin: 0; padding-left: 1.2rem; }
.kutu--kisaca li { margin: 0.45rem 0; font-weight: 500; }

.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: öğretmen ve aday testi kâğıda/PDF'e alabilsin. Cevaplar AÇIK
   basılır (çalışma kâğıdı + cevap anahtarı), etkileşim ve gezinti gizlenir. */
@media print {
  .kirinti, .icindekiler, .skor, .cta, .onceki-sonraki, .komsular,
  .kpss-alt, .yazdir { 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; }
  .kutu--kod { background: #fff; color: #000; border: 1px solid #999; }
  .kutu--kod h2, .kutu--kod dt, .kutu--kod dd { color: #000; }
  .soru { break-inside: avoid; box-shadow: none; }
  .cevap.cevap-kapali { max-height: none; opacity: 1; overflow: visible; margin-top: 0.85rem; }
  .cevap-bant { background: none; color: #000; border: 1px solid #999; }
  .cevap-bant b { color: #000; }
  .kaynakca a { color: #000; }
}

.tablo-not { color: var(--soluk); font-size: 0.85rem; margin: -0.4rem 0 1rem; }

/* Kodlama kutusunun alt satırı: "kodlama" sözcüğü yazılım sanılmasın diye
   ne olduğunu açıkça söylüyor (Öner, 23 Eylül). */
.kutu--kod .kutu-not {
  margin: -0.2rem 0 0.9rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* İlgili konular: düz komşu listesinden farkı, NEDEN gidileceğini söylemesi.
   Bağlam içi çapa metni hem okuyucuya hem arama motoruna sinyal. */
.ilgili {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--kimlik);
  border-radius: 14px;
  margin: 1.6rem auto;
  max-width: 46rem;
  padding: 0.9rem 1.1rem;
}
.ilgili h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  color: var(--soluk);
}
.ilgili ul { margin: 0; padding-left: 1.1rem; }
.ilgili li { padding: 0.25rem 0; }
.ilgili a { color: var(--bordo); font-weight: 600; text-decoration: none; }
.ilgili a:hover { text-decoration: underline; }

/* Başkentin künye yazımı yaygın Latin yazımından ayrıldığında ikincisi
   parantezle veriliyor: künye "Vaşington", insanlar "Washington" arıyor. */
.veri .yazim { color: var(--soluk); font-size: 0.9em; }
.veri .rol-isaret { color: var(--bordo); font-weight: 700; text-decoration: none; padding-left: 0.15em; }
/* Bulmaca: cevap sütunu kare biçiminde — harfleri saymak kolay olsun. */
.veri td.kare {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.12em; font-weight: 700; white-space: nowrap;
}
.ara-satir {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  margin: 10px 0 4px;
}
.ara-satir label { font-weight: 600; font-size: 0.95rem; }
.ara-satir select, .ara-satir input {
  font: inherit; padding: 7px 10px; border: 1.4px solid #e3d4cd;
  border-radius: 10px; background: #fff;
}
.ara-satir input { letter-spacing: 0.12em; text-transform: uppercase; }
.ara-satir #arama-durum { color: var(--soluk); font-size: 0.92rem; }