/* =========================================================================
   gosteri.css — EKRAN GÖSTERİSİ (slayt)
   /ek-ders-kutusu/ sayfasındaki iki gösteri bu dosyayla biçimlenir.

   NEDEN AYRI DOSYA: sayfa.css gibi, yalnız ihtiyacı olan sayfada yüklenir.
   Ana sayfa ve yolluk sayfaları bu kuralların hiçbirini kullanmıyor; oraya
   eklenirse her ziyaretçi boşuna indirir.

   BAĞIMLILIK: style.css → sayfa.css → BU DOSYA sırasıyla yüklenir.
   Değişkenler (:root), zemin katmanları, üst bar ve alt bilgi oradan gelir.

   ⚠ TASARIMIN ÖZÜ — İKİ KATMANLI:
     1. CSS-siz/JS-siz hâl: adımlar alt alta duran resimli bir anlatıdır.
        Hiçbir şey gizlenmez, hiçbir şey bozulmaz.
     2. JS gelirse gosteri.js bölüme `gosteri--etkin` sınıfını ekler; ancak
        O ZAMAN adımlar üst üste yığılır ve tek pencere görünümü açılır.
     Sınıf eklenmediği sürece aşağıdaki "tek pencere" kuralları HİÇ
     çalışmaz. Gizleme kuralını JS'in eklediği sınıfa bağlamak bilinçli:
     JS gelmezse ziyaretçi boş bir kutuya değil, okunabilir bir listeye bakar.

   Tüm ölçüler :root değişkenlerinden (SPEC § 5: sabit piksel yok).
   Tek istisna: görsel oranı (--gosteri-oran) — ekran görüntülerinin gerçek
   en-boy oranı, tasarım tercihi değil ölçüm sonucu.
   ========================================================================= */

.gosteri {
  /* Çekilen ekran görüntülerinin ortak oranı (1568×~706 ≈ 20/9).
     Kutu oranı sabit + görsel `contain`: adımlar arası geçişte sayfa
     ZIPLAMAZ. Görsellerin pikselleri birbirinden birkaç piksel farklı
     olduğu için `cover` kullanılmadı — kırpma, tablo kenarını yerdi. */
  --gosteri-oran: 20 / 9;
  margin: var(--bosluk-lg) 0 var(--bosluk-xl);
}

/* =========================================================================
   Adım listesi
   ========================================================================= */
.gosteri__adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gosteri .adim {
  margin: 0 0 var(--bosluk-xl);
}

.gosteri .adim figure {
  margin: 0;
}

/* Görsel çerçevesi — ana sayfadaki cam kart diliyle aynı aile. */
.gosteri__cerceve {
  position: relative;
  aspect-ratio: var(--gosteri-oran);
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yuvarlak);
  overflow: hidden;
}

.gosteri__cerceve img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Adım metni. Genişliği metin bloklarıyla aynı ölçüde tutulur; görselin
   altında satır uzunluğu okunmaz hâle gelmesin. */
.gosteri figcaption {
  max-width: 46rem;
  margin-top: var(--bosluk-md);
}
.gosteri figcaption h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 var(--bosluk-xs);
}
.gosteri figcaption p {
  margin: 0;
  color: var(--renk-metin-yumusak);
  line-height: var(--satir-govde);
}

/* Adım numarası — JS'siz hâlde sırayı görünür kılar (ol'un kendi numarası
   list-style:none ile kapandı). */
.gosteri .adim__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--petrol);
  display: block;
  margin-bottom: var(--bosluk-xs);
}

/* =========================================================================
   JS DEVRALDI — tek pencere görünümü
   Buradan aşağısı yalnız `gosteri--etkin` varken geçerlidir.
   ========================================================================= */
.gosteri--etkin .gosteri__adimlar {
  display: grid;                 /* tüm adımlar aynı hücrede üst üste */
}
.gosteri--etkin .adim {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gecis);
}
.gosteri--etkin .adim[data-etkin] {
  opacity: 1;
  visibility: visible;
}
/* Numara JS'li görünümde kontrol çubuğunda yazıyor; iki kez göstermeyelim. */
.gosteri--etkin .adim__no { display: none; }

/* Metin yüksekliği adımdan adıma değişiyor; kutu en uzun metne göre yer
   ayırmazsa kontrol çubuğu aşağı yukarı zıplar. Grid hücresi zaten en uzun
   adıma göre büyür — üst üste bindirmenin yan faydası. */
.gosteri--etkin figcaption { min-height: 4.5rem; }

/* Görsele tıklayınca tam boy açılır: imleç bunu söylesin. */
.gosteri--etkin .gosteri__cerceve { cursor: zoom-in; }

/* =========================================================================
   Kontrol çubuğu (JS ekler)
   ========================================================================= */
.gosteri__kontrol {
  display: flex;
  align-items: center;
  gap: var(--bosluk-sm);
  flex-wrap: wrap;
  margin-top: var(--bosluk-md);
}

.gosteri__dugme {
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.6rem;
  background: rgba(255,255,255,0.8);
  color: var(--renk-metin);
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.gosteri__dugme:hover { border-color: var(--petrol); background: #fff; }
.gosteri__dugme:focus-visible {
  outline: 2px solid var(--renk-odak);
  outline-offset: 2px;
}

/* "3 / 8" sayacı */
.gosteri__sayac {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--renk-metin-yumusak);
  min-width: 4ch;                /* 1/8 → 8/8 geçişinde çubuk kaymasın */
}

/* Nokta göstergeleri */
.gosteri__noktalar {
  display: flex;
  gap: var(--bosluk-xs);
  margin-left: auto;             /* çubuğun sağ ucuna */
}
.gosteri__nokta {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 1px solid var(--petrol);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.gosteri__nokta[aria-current="true"] { background: var(--petrol); }
.gosteri__nokta:focus-visible {
  outline: 2px solid var(--renk-odak);
  outline-offset: 2px;
}

/* İlerleme çubuğu — otomatik ilerleme açıkken doluyor. Kullanıcı duraklatınca
   ya da elle gezinince JS `hidden` yapar; "duruyor mu akıyor mu" belirsiz
   kalmasın. */
.gosteri__ilerleme {
  height: 2px;
  background: var(--renk-cizgi);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--bosluk-sm);
}
.gosteri__ilerleme span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--petrol);
}
.gosteri__ilerleme[hidden] { display: none; }

/* =========================================================================
   Tam boy görüntüleyici
   <dialog> seçildi: odak tuzağı, Esc ve arka planın inertliği tarayıcıdan
   gelir — panel bileşeninde olduğu gibi (style.css § .mk-panel).
   ========================================================================= */
.gosteri-buyut {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  padding: 0;
  background: rgba(20,19,17,0.92);
}
.gosteri-buyut::backdrop { background: rgba(20,19,17,0.92); }
.gosteri-buyut img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gosteri-buyut__kapat {
  position: absolute;
  top: var(--bosluk-md);
  right: var(--bosluk-md);
  font: inherit;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 0.6rem;
  background: rgba(255,255,255,0.9);
  color: var(--renk-metin);
  cursor: pointer;
}

/* =========================================================================
   Açılır sarmalayıcı (.sayfa__acilir)
   SSS bloğuyla AYNI görünür ama ayrı sınıftır: araclar/sss-sema-denetim.js
   yalnız `sayfa__sss` taşıyan <details>'leri FAQPage şemasında arar. Görünüm
   ortak, anlam ayrı — sınıfı paylaşsaydık denetim burayı da soru sanardı.
   ========================================================================= */
.sayfa__acilir {
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.8rem;
  background: rgba(255,255,255,0.62);
  margin-bottom: var(--bosluk-sm);
}
.sayfa__acilir > summary {
  cursor: pointer;
  padding: var(--bosluk-md);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-sm);
  transition: background var(--gecis);
}
.sayfa__acilir > summary::-webkit-details-marker { display: none; }
.sayfa__acilir > summary::before {
  content: "+";
  flex: 0 0 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--petrol);
  text-align: center;
}
.sayfa__acilir[open] > summary::before { content: "−"; }
.sayfa__acilir > summary:hover { background: rgba(43,182,196,0.07); }
.sayfa__acilir > div {
  padding: 0 var(--bosluk-md) var(--bosluk-md);
}

/* =========================================================================
   Hareket azaltma
   Otomatik ilerlemeyi JS zaten kapatıyor; burada geçiş de sıfırlanır.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .gosteri--etkin .adim { transition: none; }
}

/* =========================================================================
   Dar ekran
   ========================================================================= */
@media (max-width: 720px) {
  /* Noktalar telefonda hem küçük hedef hem de çubuğu ikinci satıra itiyor.
     Sayaç + ileri/geri zaten aynı bilgiyi taşıyor. */
  .gosteri__noktalar { display: none; }
  .gosteri--etkin figcaption { min-height: 6rem; }
}