/* web/assets/vitrin.css — VİTRİN yerleşimi.
   ==========================================================================
   /vitrin/ sayfası sunum.css'in ÜSTÜNE biner: renkler, düğmeler, soru
   düğmeleri, kanıt şeridi, maskeleme vitrini, devir özeti kartı ve kişi
   seçimi oradan olduğu gibi gelir — vitrin yalnız YERLEŞİMİ değiştirir.

   NEDEN ÜSTE BİNİYOR, KOPYALAMIYOR: iki dosyada iki ayrı düğme/kutu tasarımı
   tutmak, bir gün birinin diğerinden ayrışması demek. Kanıt kutularının
   görünümü (örn. maskeleme vitrininin iki kutusu) sunumun ölçülmüş hâlidir;
   vitrin onu devralır.

   YERLEŞİM
     ┌───────────────────────── üst şerit ─────────────────────────┐
     │ marka · "arayüz örneğidir" · isterleri gizle · sağlık · bağ │
     ├──────────────┬──────────────────────────────────────────────┤
     │  PANEL       │  SAHNE                                       │
     │  (isterler)  │  kurumun web sitesi — tek çerçeve, canlı      │
     │  akordeon    │  (ya da mobil uygulama görünümü)             │
     │  + gezinme   │                                              │
     └──────────────┴──────────────────────────────────────────────┘

   Panel SOLDA çünkü adımların anlatım metinleri "sağdaki ekranda izleyin"
   diye yazıldı ve tarayıcıda o hâliyle ölçüldü (bkz. sablonlar.mjs →
   vitrinSayfasi). Sunumun iskeletiyle de aynı: metin solda, ekran sağda. */

/* ------------------------------------------------------------ genel düzen */

/* Vitrin sayfası KAYMAZ: sahne her zaman ekranda kalmalı, panel kendi içinde
   kaydırılır. Sunum sayfasının kaydırılabilir gövdesiyle karıştırılmasın. */
body[data-kip="vitrin"] { overflow: hidden; }

.vitrin {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vitrin-ust { flex: none; }

/* "Bu bir arayüz örneğidir" uyarısı ekran görüntüsünde bile görünsün: üst
   şeridin ortasında durur, sahnedeki sitenin kendi uyarı şeridini tekrar
   eder (iki yerde birden — biri kırpılsa öteki kalır). */
/* Üst şeritteki panel düğmesi sunumun büyük punto düğmesi değil: bir kenar
   kontrolü, başlığı bastırmamalı. */
.vitrin-ust .dugme.kucuk { font-size: 14px; padding: 7px 13px; }

.ornek-rozet {
  font-size: 13px; line-height: 1.35; color: var(--metin-soluk);
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1250px) { .ornek-rozet { display: none; } }

.vitrin-govde {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--panel-en, 430px) minmax(0, 1fr);
  gap: 0;
}
/* Panel kapalıyken ızgara TEK kolona iner ve sahne o kolonu alır.
   `0 minmax(0,1fr)` + `display:none` YANLIŞTI (canlıda ölçüldü 23.09.2026):
   panel ızgaradan düşünce sahne BİRİNCİ öğe oluyor, yani 0 piksellik kolona
   yerleşiyor ve ekran bomboş kalıyordu. */
/* Dar ekranda (tek kolon) kapalı panel eskisi gibi tamamen gizlenir; geniş
   ekranda aşağıdaki "şerit" kuralları geçerlidir. */
@media (max-width: 900px) {
  .vitrin.panel-kapali .vitrin-govde { grid-template-columns: minmax(0, 1fr); }
  .vitrin.panel-kapali .panel { display: none; }
}

/* ------------------------------------------------ kulakçık + daraltılmış şerit
   Kulakçık panelin sağ kenarında, dikey ortada durur ve sahnenin üstüne
   yarım taşar. Panel kapalıyken ızgaranın ilk kolonu ince bir şeride iner:
   şeritte yalnız Önceki/Sonraki okları ve adım numarası kalır, sahne geri
   kalan genişliğin tamamını alır. */
.panel { position: relative; }
.panel-kulak {
  position: absolute; top: 50%; right: -15px; transform: translateY(-50%);
  z-index: 5; width: 30px; height: 64px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--kart); color: var(--metin-soluk);
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 35, 40, .12);
}
.panel-kulak:hover { color: var(--kirmizi); border-color: var(--kirmizi); }
.panel-kulak:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 2px; }
.gizli-metin {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (min-width: 901px) {
  .vitrin-govde { transition: grid-template-columns .2s ease; }
  .vitrin.panel-kapali .vitrin-govde { grid-template-columns: 58px minmax(0, 1fr); }
  .vitrin.panel-kapali .panel-basi,
  .vitrin.panel-kapali .ister-listesi { display: none; }
  .vitrin.panel-kapali .panel { justify-content: flex-start; padding-top: 6px; }
  .vitrin.panel-kapali .panel-alt {
    border-top: 0; flex-direction: column; align-items: center;
    padding: 10px 6px; gap: 10px;
  }
  .vitrin.panel-kapali .panel-alt .dugme { padding: 8px 0; width: 42px; }
  .vitrin.panel-kapali .panel-alt .dugme-yazi { display: none; }
  .vitrin.panel-kapali .panel-alt .konum { margin: 0; font-size: 13px; order: -1; }
  .vitrin.panel-kapali .panel-alt #geri-dugme { order: 0; }
  .vitrin.panel-kapali .panel-alt #ileri-dugme { order: 1; }
  .vitrin.panel-kapali .panel-kulak span[aria-hidden] { transform: scaleX(-1); }
}
@media (max-width: 900px) { .panel-kulak { display: none; } }
@media (prefers-reduced-motion: reduce) { .vitrin-govde { transition: none; } }

/* --------------------------------------------------------------- panel */

.panel {
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--kart);
  border-right: 1px solid var(--cizgi);
}

.panel-basi { flex: none; padding: 16px 20px 12px; border-bottom: 1px solid var(--cizgi); }
.panel-basi h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.02em; }
.panel-basi .mini { margin: 0; font-size: 13.5px; line-height: 1.5; }

.ister-listesi { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

.panel-alt {
  flex: none; position: static; border-top: 1px solid var(--cizgi);
  padding: 10px 16px; gap: 10px;
}
.panel-alt .dugme { font-size: 15px; padding: 7px 12px; }
.panel-alt .konum { margin-left: auto; font-size: 14px; }

/* ----------------------------------------------------------- ister satırı */

/* Akordeon: her ister her zaman görünür bir BAŞLIK satırıdır; gövdesi yalnız
   açık isterde görünür. `.adim`/`.adim.aktif` kuralı sunum.css'ten gelir ve
   gövdeyi orası açıp kapatır — burada yalnız kabı yeniden çiziyoruz. */
.panel .adim.ister {
  display: block;                       /* başlık kapalıyken de dursun */
  max-width: none; margin: 0; width: auto;
  padding: 0;
  border-bottom: 1px solid var(--cizgi);
}
.panel .adim.ister > .adim-metin { display: none; }
.panel .adim.ister.aktif > .adim-metin {
  display: block;
  padding: 4px 20px 22px;
  animation: gir .18s ease-out;
}

/* Başlık satırı — gezinme düğmesinin kendisi (bkz. sablonlar.mjs: `.noktalar`
   kabı, sunum.js → gezinmeKur onu adıma bağlıyor). Sunum.css'teki nokta
   görünümü (10 piksellik daire) burada tamamen eziliyor. */
.panel .noktalar.ister-basi { display: block; }
/* `height: auto` ŞART: sunum.css'teki nokta düğmesi 11x11 piksel sabit
   yüksekliktedir. Yalnız genişliği ezmek satırları 11 piksele hapsediyor ve
   ister başlıkları üst üste biniyordu (canlıda görüldü 23.09.2026). */
.panel .noktalar.ister-basi button {
  width: 100%; height: auto; display: flex; align-items: flex-start; gap: 11px;
  background: none; border: 0; border-radius: 0; padding: 13px 18px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transform: none;
}
.panel .noktalar.ister-basi button:hover { background: #fafbfc; }
.panel .noktalar.ister-basi button:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: -3px; }
.panel .noktalar.ister-basi button[aria-current="step"] { background: var(--kirmizi-zemin); }
.panel .noktalar.ister-basi button.gecildi .ister-no { background: #c6ccd5; }

.ister-no {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--metin-soluk); color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.panel .noktalar.ister-basi button[aria-current="step"] .ister-no { background: var(--kirmizi); }
.ister-yazi { min-width: 0; }
.ister-ad { display: block; font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.ister-ozet { display: block; font-size: 13px; line-height: 1.45; color: var(--metin-soluk); margin-top: 3px; }
.panel .adim.ister.vurgu .ister-ad { color: var(--kirmizi-koyu); }

/* ------------------------------------------------ panelin içindeki punto
   Sunum projeksiyon için yazıldı: 19-23 piksel gövde, 44 piksellik başlık.
   Panel 430 piksel geniş; aynı punto burada satır başına üç kelime bırakır.
   Kanıt kutularının TASARIMI korunuyor, yalnız ölçeği küçülüyor. */
.panel .adim h2,
.panel .adim .ozet,
.panel .adim .adim-no { display: none; }   /* başlık/özet satırda zaten var */
.panel .adim .neden { font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; max-width: none; }
.panel .adim .mini { font-size: 13px; line-height: 1.5; }
.panel .adim .baslikcik { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-soluk); margin: 16px 0 7px; }
.panel .adim .liste li { font-size: 13.5px; line-height: 1.5; padding: 9px 11px; }
.panel .adim .soru-dugmeleri button { font-size: 13.5px; padding: 8px 11px; }
.panel .adim .dugme { font-size: 14px; padding: 8px 12px; }
.panel .adim .kanit-serit b { font-size: 15px; }
.panel .adim .kanit-serit .olcut { font-size: 12.5px; }
.panel .adim .kaynak-ozeti p { font-size: 14.5px; }
.panel .adim .kaynak-ozeti .baglantilar { font-size: 13px; }
.panel .adim .maske-vitrin { grid-template-columns: 1fr; gap: 8px; }
.panel .adim .maske-kutu .tek { font-size: 13.5px; }
/* Ok dar panelde AŞAĞI bakar. Eskiden `rotate(90deg)` idi: döndürülen öğe
   satırın tamamı kadar genişti, dönünce ~390 px yüksekliğe taşıp altındaki
   isterin başlığını tıklanamaz yapıyordu (29.09.2026, 5 → 6). Döndürmek
   yerine aşağı ok karakteri yazılır. */
.panel .adim .maske-ok { transform: none; font-size: 0; }
.panel .adim .maske-ok::after { content: "↓"; font-size: 22px; }
.panel .vitrinde-gizli { display: none; }
.panel .adim .ozet-karti .ozet-satir { font-size: 13.5px; }
.panel .adim .kisiler { grid-template-columns: 1fr; gap: 8px; }
.panel .adim .kisi { padding: 9px 11px; font-size: 14px; }
.panel .adim .kisi .no { font-size: 13px; }
.panel .adim .sayilar { grid-template-columns: 1fr 1fr; gap: 10px; }
.panel .adim .sayi { padding: 12px; }
.panel .adim .sayi .buyuk { font-size: 28px; }
.panel .adim .sayi .etiket { font-size: 12px; }
.panel .adim .iki-kolon { grid-template-columns: 1fr; gap: 14px; }
.panel .adim .kaydir table td { font-size: 13px; }
.panel .adim .sunumcu-notu { font-size: 13px; }
.panel .adim .mesgul-satiri,
.panel .adim .uyari-satiri,
.panel .adim .sistem-sonuc { font-size: 13.5px; }

/* --------------------------------------------------------------- sahne */

.sahne {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--zemin);
}

.sahne-ust {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--cizgi); background: var(--kart);
}
.sahne-ust .sohbet-durum { margin: 0 0 0 auto; }

.sahne-yuva { flex: 1; min-height: 0; position: relative; }
.sahne-yuva > [data-gorunum-yuva] { position: absolute; inset: 0; }
.sahne-yuva > [data-gorunum-yuva][hidden] { display: none; }

/* Site çerçevesi yuvayı TAMAMEN doldurur: ölçeklenmez, gerçek bir tarayıcı
   genişliğinde akar — widget'ın yazısı kendi boyunda kalır (sunumda ölçülen
   gerekçenin aynısı, bkz. sunum.js → siteYuvalariniOlc). */
.sahne-yuva .site-cercevesi {
  width: 100%; height: 100%; border: 0; display: block; background: #fff;
}

/* Mobil uygulama görünümü: telefon, yuvanın ortasında, boyuna oturtulur.
   Genişlik boydan türer (390x812 sabit oran) — sunumdaki kuralın aynısı. */
.sahne-yuva .telefon-yuvasi { display: grid; place-items: center; padding: 14px; }
.sahne-yuva .telefon-cercevesi {
  height: 100%; width: auto; aspect-ratio: 390 / 838;
  max-width: 100%; border: 0; display: block; background: transparent;
}

/* ------------------------------------------------------------ dar ekran */

@media (max-width: 1100px) {
  .vitrin-govde { grid-template-columns: 340px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* Tek kolon: panel üstte, sahne altta. Sahneye en az yarım ekran kalır —
     kanıtların yarısı sahnede akıyor, panel onu boğmamalı. */
  body[data-kip="vitrin"] { overflow: auto; }
  .vitrin-govde { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .panel { border-right: 0; border-bottom: 1px solid var(--cizgi); max-height: 52vh; }
  .sahne { min-height: 48vh; }
}

/* ------------------------------------------------ kısa maddeler (29.09.2026)
   Her isterin başında 3-4 madde; uzun anlatım paragrafları vitrinde gizli.
   Yalnız .adim-metin'in DOĞRUDAN çocukları gizlenir: kayıt kartlarının,
   maske kutusunun içindeki satırlar ve canlı sonuç satırları yerinde kalır. */
.panel .madde-listesi { margin: 0 0 14px; padding-left: 20px; }
.panel .madde-listesi li { font-size: 14.5px; line-height: 1.55; margin: 0 0 6px; }
.panel .adim-metin > p.neden,
.panel .adim-metin > p.mini:not([data-maske-not]):not(#maske-bulgu),
.panel .adim-metin > .sunumcu-notu,
.panel .adim-metin > .kanit-serit .olcut { display: none; }

/* Suflör özeti — görüntülü görüşme adımı (30.09.2026) */
.suflor-sonuc { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart); }
.suflor-sonuc .ozet-satir { margin: 6px 0 0; }