/* BASINDA BİZ — haber listesi. Ham renk yok, hepsi belirteç. */

/* Kompakt rozetler: küme başlığının YANINDA, düğme görünümünde.
   Önceki hal tam genişlikte üç sütunlu dev bir bloktu ve bir ekranın
   üçte birini yiyordu. Rakamlar `data-sayac` ile sayarak yükseliyor
   (animasyon.js'in genel kancası). */
.basin-kume-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bos-5); flex-wrap: wrap;
}
.basin-rozetler { display: flex; gap: var(--bos-3); flex-wrap: wrap; }
.basin-rozet {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  padding: 0.35em 0.9em;
  border: 1px solid var(--cizgi-guclu); border-radius: 999px;
  font-size: var(--ol-3xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--metin-sonuk);
  white-space: nowrap;
}
.basin-rozet b {
  font-family: var(--yazi-baslik); font-weight: 400;
  font-size: var(--ol-s); line-height: 1; color: var(--vurgu);
  font-variant-numeric: tabular-nums;
}

.basin-kume { margin-block-start: var(--bos-8); }
.basin-kume:first-child { margin-block-start: 0; }
.basin-kume-bas {
  padding-block-start: var(--bos-4); margin-block-end: var(--bos-5);
}
.basin-not {
  margin-top: var(--bos-2); color: var(--metin-silik);
  font-size: var(--ol-2xs); max-width: 62ch; line-height: 1.5;
}

.basin-liste {
  display: grid; gap: 0;
  border-block-start: 1px solid var(--cizgi);
}
@media (min-width: 54rem) {
  .basin-liste { grid-template-columns: 1fr 1fr; column-gap: var(--bos-8); }
}
.basin-oge { border-block-end: 1px solid var(--cizgi); }
.basin-oge a {
  display: block; padding-block: var(--bos-4);
  transition: padding-inline-start var(--gecis), border-color var(--gecis);
}
.basin-oge a:hover, .basin-oge a:focus-visible { padding-inline-start: var(--bos-3); }
.basin-ust {
  display: flex; gap: var(--bos-3); flex-wrap: wrap; align-items: baseline;
  font-size: var(--ol-3xs); color: var(--metin-silik);
}
.basin-kaynak {
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vurgu);
}
.basin-konu {
  border: 1px solid var(--cizgi); border-radius: var(--kose);
  padding: 0.1em 0.55em;
}
.basin-oge h3 {
  margin-top: var(--bos-2);
  font-family: var(--yazi-baslik); font-weight: 400;
  font-size: var(--ol-m); line-height: 1.22; color: var(--metin);
}
.basin-oge a:hover h3 { color: var(--vurgu); }
.basin-alinti {
  margin-top: var(--bos-2); color: var(--metin-sonuk);
  font-size: var(--ol-2xs); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Eleştiri kümesi ayrı okunur: kırmızı çizgi, "meyve veren ağaç" notu. */
.basin-kume--elestiri .basin-kume-bas h2 { color: var(--hata); }
.basin-kume--elestiri .basin-kaynak { color: var(--hata); }


/* ---- haber görseli ----
   Kaynağın og:image'i indirilip yerele alındı (araclar/basin-gorsel.py);
   sıcak bağlantı kırılgan. Görseli olmayan haber yalnız metinle çizilir. */
.basin-oge a { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--bos-4); }
.basin-oge--gorselsiz a { grid-template-columns: 1fr; }
.basin-foto {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--kose); background: var(--zemin-derin);
  border: 1px solid var(--cizgi);
}
.basin-foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--gorsel-suzgec);
  transition: transform var(--gecis);
}
.basin-oge a:hover .basin-foto img { transform: scale(1.05); }
.basin-govde { display: block; min-width: 0; }
@media (max-width: 34rem) {
  .basin-oge a { grid-template-columns: 5.5rem 1fr; gap: var(--bos-3); }
}