/* llm-info sayfasına ÖZGÜ yerleşim. Ortak bileşenler `bilesen.css`te kalır —
   buraya kopyalanan bir bileşen aynı kavramın ikinci yazımı olur.
   Bu sayfada süreğen döngü de KENDİ `@keyframes`inden gelmiyor: `.iskelet`in
   `iskeletNabiz`i (bilesen.css) taşıyor, yani burada 0 `@keyframes` var ve
   "donan son kare görünür bir şeyi gizliyor mu" sorusu hiç doğmuyor.

   Sayfanın işi MAKİNE OKUNURLUĞU, o yüzden yerleşim üç yapıya indirildi:
   tanım listesi (`.olgu`), tablo (`.tbl`) ve `<details>` akordeonu. Üçü de
   kendi anlamını etiketiyle taşıyor; süs kutusu yok. */

/* `dl`/`dd` `temel.css`in sıfırlamasında YOK (orada h1-h6,p,figure,ul,ol var) —
   tarayıcı `dd`ye kendi girintisini veriyordu. */
.olgu, .olgu dd { margin: 0; }

/* ---- İÇİNDEKİLER ---------------------------------------------------------- */
/* Makine okuyucusu için sayfanın haritası; insan için de kısa yol. Üst boşluk
   `bilesen.css`in `.bas + *` kuralından geliyor, burada tekrar edilmiyor. */
.icindekiler {
  padding-block-start: var(--b4);
  border-block-start: 1px solid var(--cizgi);
}

.icindekiler h3 {
  color: var(--soluk);
  margin-block-end: var(--b3);
}

.icindekiler ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b2) var(--b5);
}

.icindekiler li {
  font-size: var(--t9);
  line-height: var(--t9-s);
}

.icindekiler a {
  display: inline-block;
  color: var(--soluk);
  padding-block-end: var(--b1);
  border-block-end: 1px solid var(--cizgi);
  transition: color var(--sure-kisa) var(--egri), border-color var(--sure-kisa) var(--egri);
}

.icindekiler a:hover {
  color: var(--murekkep);
  border-block-end-color: var(--murekkep);
}

/* ---- OLGU LİSTESİ (`<dl>`) ------------------------------------------------ */
/* Etiket solda, değer sağda. Sütun genişliği SABİT bir ölçü değil `minmax`:
   uzun bir etiket (ör. "Surfaces that cost nothing per question") satıra
   sığmadığında kendi içinde sarıyor, değer sütununu daraltmıyor. */
/* Üst boşluk BURADA yazılı, `.bas + *` kuralına bırakılmıyor: fiyat bölümünde
   `.olgu` bir tablonun ARDINDAN geliyor (`.bas`ın komşusu değil) ve o kural
   ateşlemeyince liste tablonun son satırına yapışıp aynı tablonun devamı gibi
   okunuyordu (ölçüldü: ekran görüntüsü, 29 Eylül). */
.olgu {
  display: grid;
  margin-block-start: var(--b5);
  border-block-start: 1px solid var(--cizgi);
  max-inline-size: var(--kap);
}

.olgu > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--b2) var(--b5);
  padding-block: var(--b3);
  border-block-end: 1px solid var(--cizgi);
}

.olgu dt {
  font-size: var(--t9);
  line-height: var(--t9-s);
  font-weight: 500;
}

.olgu dd {
  font-size: var(--t9);
  line-height: var(--t9-s);
  color: var(--soluk);
  max-inline-size: var(--olcu-orta);
}

/* ---- TABLO ---------------------------------------------------------------- */
/* Kaydırma KAPTA, sayfada değil: `body{overflow-x:hidden}` zaten sayfa
   kaydırmasını kapatıyor, ama dar ekranda tablonun okunabilmesi için kendi
   kaydırma alanı gerekiyor. Yapışkan başlık YOK — yapışkanlık bir kaydırma
   kabının içinde sayfaya göre değil KABA göre çözülür ve başlığı ilk satırın
   üstüne bindirir (bu depoda ölçülmüş bir hata). */
.tbl-kap {
  margin-block-start: var(--b5);
  overflow-x: auto;
}

.tbl {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t9);
  line-height: var(--t9-s);
}

.tbl caption {
  text-align: start;
  color: var(--soluk);
  padding-block-end: var(--b3);
}

.tbl th,
.tbl td {
  text-align: start;
  vertical-align: top;
  padding-block: var(--b3);
  padding-inline: 0 var(--b4);
  border-block-end: 1px solid var(--cizgi);
}

.tbl thead th {
  font-weight: 500;
  font-size: var(--tm);
  line-height: var(--tm-s);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--soluk);
  border-block-end-color: var(--murekkep);
  white-space: nowrap;
}

.tbl tbody th {
  font-weight: 500;
  white-space: nowrap;
}

.tbl td {
  color: var(--soluk);
}

/* Tablonun ALTINDAKİ dürüstlük satırı tabloya yapışmasın (bu deponun
   `.ikili + .g-kucuk` dersinin tablo karşılığı). */
.tbl-not {
  margin-block-start: var(--b4);
  padding-block-start: var(--b3);
  border-block-start: 1px solid var(--cizgi);
  color: var(--soluk);
  max-inline-size: var(--olcu-bas);
}

/* ---- SINIR LİSTESİ -------------------------------------------------------- */
.sinir-liste {
  display: flex;
  flex-direction: column;
  gap: var(--b3);
  max-inline-size: var(--olcu-bas);
}

.sinir-liste li {
  font-size: var(--t9);
  line-height: var(--t9-s);
  color: var(--soluk);
  padding-inline-start: var(--b4);
  border-inline-start: 1px solid var(--cizgi);
}

.sinir-liste strong {
  color: var(--murekkep);
  font-weight: 500;
}

/* ---- KOD PARÇASI --------------------------------------------------------- */
/* Mono aile YOK (tokens.css kararı), o yüzden `<code>` gövde ailesinde kalıyor
   ve teknik olduğu ZEMİNDEN anlaşılıyor. Kapsam `#ana` ile sayfaya bağlı. */


/* ---- Kırılma ------------------------------------------------------------- */
@media (max-width: 991px) {
  .olgu > div { gap: var(--b2) var(--b4); grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .icindekiler ul { gap: var(--b2) var(--b4); }
}

@media (max-width: 767px) {
  .olgu > div { grid-template-columns: 1fr; gap: var(--b1); }
  .icindekiler ul { grid-template-columns: 1fr; }
  .tbl th,
  .tbl td { padding-inline-end: var(--b3); }
}