/* demo 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 sayfa şu bileşenleri OLDUĞU GİBİ kullanıyor: `.iskelet` (+ süreğen döngü
   nabzı), `.iskelet-ust`, `.bas`, `.oz`, `.ikili`, `.dg`, `.dg-cift`, `.cta`,
   `.ayak`. Burada YENİ olan tek şey DÖKÜM: kayıtlı bir oturumun tur tur
   gösterimi (durum + istek + yanıt + meta notu). Vitrin sohbet
   balonunun cam derisi (`anasayfa.css` → `.refik-*`) BURAYA TAŞINMADI ve
   taklit de EDİLMEDİ: bu sayfa bir sohbet penceresi değil, bir kayıt
   dökümü. Aynı görünümü kurmak, ziyaretçiye canlı bir kutu OLDUĞU izlenimi
   verirdi — sayfanın tamamı tam bunun tersini söylüyor.

   Hareket: kendi `@keyframes`i YOK. Süreğen döngü `.iskelet`in nabzından,
   belirme `temel.css`in TEK deseninden (`.ac`) geliyor; ikisi de az-hareket
   kısıtında GÖRÜNÜR karede duruyor. */

/* ⚠️ 29 Eylül: başlık şeridinin "yokluk tonu" kuralı (`.dm-ust svg`) SİLİNDİ —
   şeritteki üç çip artık üç OLGU söylüyor (her derlemede yeniden oynatılıyor ·
   istek ve yük yan yana · doğrudan depodan), yani griye çekilecek yokluk ikonu
   kalmadı. Kural ayrıca ÖLÜYDÜ: `.iskelet-ust` kabı `color:var(--soluk)`
   taşıyor ve `.ikon` `currentColor` ile çiziliyor. */

/* Bölüm sonu notu: akış metni kapağıyla aynı ölçüde kalsın. Kapak piksel
   tokenına bağlı — `ch` yazı tipine bağlıdır ve font değişince sessizce kayar. */
.dm-not{margin-block-start:var(--b4);max-width:var(--olcu-orta);color:var(--soluk)}

/* ---- Kod parçası -------------------------------------------------------- */
/* 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ı.
   ⚠️ Aynı kural `llm-info.css`te de var — yani bu kavramın İKİNCİ yazımı.
   `bilesen.css` paylaşılan bir dosya ve bu turda bana kapalı; tek yazıma
   indirmek ayrı bir iş olarak raporlandı. */

/* Kodun İÇİNDEKİ yer tutucu: kayıt gerçek bir destek adresi basmıştı, sayfa
   onun yerine kodun KENDİ yer tutucusunu gösteriyor (gerekçe sayfada yazılı).
   Ayrı bir ton, ziyaretçi bunu gerçek bir adres sanmasın diye. */
.dm-yer{color:var(--soluk);font-weight:500}

/* ---- Kapı listesi (sıralı, numaralı) ------------------------------------ */
/* `ol` ama işaretçi `temel.css`te kapalı; numara sayaçla basılıyor, elle
   yazılmıyor — araya madde girse numaralar kendiliğinden doğru kalır.
   Deseni `yaklasim.css`in koşul listesiyle aynı gerekçeden geliyor. */
.dm-kapi{
  counter-reset:dmk;
  max-width:var(--olcu-bas);
  border-block-start:1px solid var(--cizgi);
}
.dm-kapi li{
  display:grid;grid-template-columns:var(--b5) minmax(0,1fr);gap:var(--b3);
  align-items:baseline;
  padding-block:var(--b4);border-block-end:1px solid var(--cizgi);
}
.dm-kapi li::before{
  counter-increment:dmk;content:counter(dmk);
  font-family:var(--aile-display);font-size:var(--t3);line-height:1;
  color:var(--soluk);font-variant-numeric:tabular-nums;
}
.dm-kapi h3{font-size:var(--t8);line-height:var(--t8-s);font-weight:500;margin-block-end:var(--b2)}
.dm-kapi p{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);max-width:var(--olcu-orta)}

/* ---- Döküm: grup başlığı ------------------------------------------------ */
/* Dört grup (cevapladı · devretti · bozuldu · reddetti) ve her birinin
   BAŞLIĞINDA tur sayısı var: dördün toplamı sayfanın manşetindeki sayıyı
   tutmak ZORUNDA. Sayı görünür olduğu için içsel bir tutarsızlık gözle
   yakalanabilir — kova toplamı denetimi, ama okuyucunun elinde. */
.dm-grup{max-width:var(--olcu-bas)}
.dm-grup + .dm-grup{margin-block-start:var(--b5)}
.dm-grup-bas{
  display:flex;align-items:center;gap:var(--b2);
  font-size:var(--t5);line-height:var(--t5-s);
  font-family:var(--aile-display);font-weight:400;
  padding-block-end:var(--b3);border-block-end:1px solid var(--cizgi);
}
.dm-say{
  margin-inline-start:auto;
  font-family:var(--aile-govde);font-size:var(--tm);line-height:1;font-weight:500;
  letter-spacing:.09em;
  color:var(--soluk);
  border:1px solid var(--cizgi);border-radius:var(--y-hap);
  padding:var(--b1) var(--b2);
}

/* ---- Döküm: tek tur ----------------------------------------------------- */
/* İki hücre: SOLDA ne gönderildi (durum + istek), SAĞDA ne geri döndü (yanıt +
   not). Okuma yönü istek → yanıt, yani bir sohbet balonu dizisi değil bir
   kayıt satırı; sayfanın iddiası da bu. Kolonlar `fr` ile — sabit piksel,
   uzun bir istek dizgisi geldiğinde sol kolonu taşırırdı.
   ⚠️ Her yarım KENDİ kutusunda yığılıyor (`.dm-gonderilen` / `.dm-donen`), dört
   `<p>` doğrudan ızgaraya konmuyor. İlk yazımda konuyordu ve EKRAN GÖRÜNTÜSÜ
   kusuru gösterdi: ızgara satırının yüksekliği SAĞDAKİ uzun yanıttan geliyor,
   o yüzden ikinci satırdaki istek dizgisi yanıtın ORTA hizasına düşüyordu.
   Sayaçlar (taşma, görünmez eleman) bunu göremezdi — hizalama kusuru ölçülen
   hiçbir eşiği ihlal etmiyor. */
.dm-dokum{display:flex;flex-direction:column}
.dm-tur{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:var(--b2) var(--b5);
  align-items:start;
  padding-block:var(--b4);
  border-block-end:1px solid var(--cizgi);
}
.dm-tur:last-child{border-block-end:0}
.dm-gonderilen,.dm-donen{display:flex;flex-direction:column;gap:var(--b2);min-width:0}

/* Durum: HTTP kodu + biçim. */
.dm-durum{color:var(--soluk)}
/* İstek: uzun JSON gövdesi kırılabilsin. */
.dm-istek{
  font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);
  overflow-wrap:anywhere;
}
/* Yanıt: sayfanın en önemli metni — mürekkep tonunda ve temel gövde boyunda,
   yani altındaki nottan ayırt edilebilir. */
.dm-yanit{font-size:var(--t8);line-height:var(--t8-s)}
/* Not: "ne yaptı, ne YAPMADI". */
.dm-meta{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)}

/* `.ikili` bölümü için BURADA kural YOK ve bu bilinçli: bileşenin kendi
   sözleşmesi (`bilesen.css` + `kurulum.html`) madde = `<svg>` + `<span>`
   diyor, başlıkta ikon yok. İlk yazımda `<h3>`e ikon koydum ve ekran
   görüntüsü onu KENDİ SATIRINDA gösterdi; sebep ölçüldü: `temel.css`
   `svg{display:block}` diyor, yani ikon ancak FLEX bir kapta satır içi
   durur — `.ikili li` flex, `.ikili h3` değil. Aynı turda ikinci kusur:
   madde metnini `<span>`siz yazınca `.ikili li`nin flex'i cümle içindeki
   `<em>`i AYRI bir flex öğesi yaptı ve cümle karıştı. İkisi de bileşeni
   sözleşmesine göre kullanınca düzeldi; buraya ezici kural yazmak aynı
   kavramın ikinci yazımı olurdu. */

/* Bölüm sonu düğme çifti: başlık bloğundan sonra gelen ritmi korusun. */
.dm-dg{margin-block-start:var(--b5)}

/* ---- Kırılma ------------------------------------------------------------ */
@media (max-width:991px){
  /* Tur tek kolona düşüyor; sıra belge sırasından geliyor (gönderilen → dönen),
     yani `grid-row` sabitleri yok ve dar ekranda ters çizilme riski de yok. */
  .dm-tur{grid-template-columns:1fr;gap:var(--b3)}
  .dm-kapi li{grid-template-columns:var(--b4) minmax(0,1fr);gap:var(--b2) var(--b3)}
  .dm-kapi li::before{font-size:var(--t4)}
}
@media (max-width:767px){
  .dm-grup-bas{font-size:var(--t6);line-height:var(--t6-s);flex-wrap:wrap}
  /* Sayaç sarma durumunda sağa yapışmayı bıraksın, yoksa tek başına satır olur. */
  .dm-say{margin-inline-start:0}
}