/* ============ YENİDEN TASARIM ============
   Önceki hal: 10 başlık altında 39 satır, hepsi aynı görünen tek sütun.
   Patron "hepsi düz yazı gibi olmuş" dedi, haklıydı. Üç değişiklik:
   1) girişte konu ızgarası — okuyucu neyin nerede olduğunu bir bakışta görür
   2) TESPİT ve ÖNERİ iki ayrı sütun — veride de iki ayrı akış
      (20 madde yalnız tespit, 16 yalnız öneri)
   3) her konuya gerçek bir fotoğraf bandı
   Ham renk yok; hepsi belirteç. */

/* ---- konu ızgarası ---- */
.bolum-konular { padding-block: var(--bos-6) var(--bos-4); }
.konu-izgara {
  display: grid; gap: var(--bos-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.konu-kart {
  display: flex; flex-direction: column;
  border: 1px solid var(--cizgi); border-radius: var(--kose);
  overflow: hidden; background: var(--zemin-kat);
  transition: border-color var(--gecis), transform var(--gecis);
}
.konu-kart:hover, .konu-kart:focus-visible {
  border-color: var(--vurgu); transform: translateY(-2px);
}
.konu-kart-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zemin-derin); }
.konu-kart-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 34%;
  filter: var(--gorsel-suzgec);
}
.konu-kart-ic { display: flex; flex-direction: column; gap: var(--bos-2); padding: var(--bos-4); }
.konu-kart-ad {
  font-family: var(--yazi-baslik); font-size: var(--ol-s);
  line-height: 1.15; color: var(--metin);
}
.konu-kart-sayac { font-size: var(--ol-3xs); color: var(--metin-silik); }
.konu-kart-sayac b { color: var(--vurgu); font-weight: 700; }
.konu-kart-sayac i { font-style: normal; opacity: 0.5; margin-inline: 0.35em; }

/* ---- konu bölümü ---- */
.konu { margin-block-start: var(--bos-8); scroll-margin-top: 6rem; }
.konu:first-child { margin-block-start: 0; }
.konu-bant { aspect-ratio: 21 / 6; overflow: hidden; border-radius: var(--kose); background: var(--zemin-derin); }
.konu-bant img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 36%;
  filter: var(--gorsel-suzgec);
}
.konu-bas-ic {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bos-5); flex-wrap: wrap;
  padding-block: var(--bos-4);
  border-block-end: 2px solid var(--cizgi);
  margin-block-end: var(--bos-5);
}
.konu-bas-ic h3 {
  font-family: var(--yazi-baslik); font-size: var(--ol-l);
  line-height: 1.05; color: var(--metin);
}
.konu-sayac { display: flex; gap: var(--bos-3); }
.rozet {
  font-size: var(--ol-3xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.28em 0.7em;
  border: 1px solid var(--cizgi); border-radius: var(--kose);
}
.rozet-sorun { color: var(--hata); border-color: var(--hata-cizgi); }
.rozet-cozum { color: var(--vurgu); border-color: var(--cizgi-guclu); }

/* ---- iki akış ---- */
.konu-govde { display: grid; gap: var(--bos-6); }
@media (min-width: 54rem) { .konu-govde { grid-template-columns: 1fr 1fr; gap: var(--bos-8); } }
.akis h4 {
  font-size: var(--ol-3xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: var(--bos-4);
  padding-bottom: var(--bos-2);
}
.akis-sorun h4 { color: var(--hata); border-bottom: 2px solid var(--hata-cizgi); }
.akis-cozum h4 { color: var(--vurgu); border-bottom: 2px solid var(--cizgi-guclu); }

.tespit-liste { display: grid; gap: var(--bos-4); }
.tespit { padding-inline-start: var(--bos-4); border-inline-start: 3px solid var(--cizgi); }
.akis-sorun .tespit { border-inline-start-color: var(--hata-cizgi); }
.akis-cozum .tespit { border-inline-start-color: var(--cizgi-guclu); }
.tespit-metin { font-size: var(--ol-xs); line-height: 1.55; color: var(--metin); }
.tespit-kaynak { margin-top: var(--bos-2); font-size: var(--ol-3xs); color: var(--metin-silik); }
.tespit-kaynak a { color: var(--metin-sonuk); text-decoration: underline; text-underline-offset: 2px; }
.tespit-kaynak a:hover { color: var(--vurgu); }

/* ---- konuya ait video ---- */
.konu-video { margin-top: var(--bos-6); }
/* Kayitlarin cogu DIKEY (telefon) — genislige gore olceklenince sayfayi
   sisiriyordu. Olcut yukseklik: dikey klip de yatay klip de ayni bandi
   kaplar. */
.konu-video video {
  max-height: 20rem; max-width: 100%; width: auto;
  border-radius: var(--kose);
  border: 1px solid var(--cizgi); background: var(--zemin-derin);
}
.konu-video-not { margin-top: var(--bos-2); font-size: var(--ol-3xs); color: var(--metin-silik); }

/* ---- kaynak dipnotu ---- */
.calisma-dipnot {
  padding-block: var(--bos-5); margin-block-start: var(--bos-7);
  border-top: 1px solid var(--cizgi);
  font-size: var(--ol-3xs); color: var(--metin-silik);
  line-height: 1.6; max-width: 60ch;
}

/* "daha" düğmesi: akışın kalanını açar */
.daha {
  margin-top: var(--bos-3); padding: 0; border: 0; background: none;
  font-size: var(--ol-3xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vurgu); cursor: pointer;
  border-bottom: 2px solid var(--cizgi-guclu); padding-bottom: 2px;
}
.daha:hover, .daha:focus-visible { color: var(--vurgu-parlak); }
/* Sütunlar dengesiz olabiliyor (bir konuda 2 tespit / 8 öneri); akışlar
   üstten hizalanır, kısa sütun boşluğu aşağı doğru uzatmaz. */
.konu-govde { align-items: start; }

/* Kendi sayfasi olan konudan o sayfaya baglanti. Butun konularda YOK:
   yalniz esigi gecen konularin sayfasi var (bkz. sayfa-uret.py). */
.konu-sayfa { margin: var(--bos-2) 0 0; font-size: var(--ol-3xs); letter-spacing: 0.06em; }
.konu-sayfa a { color: var(--vurgu); text-transform: uppercase; font-weight: 600; }

/* Ozet seridi tek satira indi; onceki dev bloga gore ayrilan bolum
   boslugu artik orantisiz kaliyordu. Bu bolum dar. */
#tespit-ozeti { padding-block: 0; }
.bolum:has(#tespit-ozeti) { padding-block: var(--bos-6) 0; }