/* web/assets/sunum.css — sunum modu.
   Öncelik projeksiyon / ekran paylaşımı: uzaktan okunabilen punto, yüksek
   kontrast, adım başına tek ekran. Teknik pano görünümü (hub.css) burada
   kullanılmaz. */

:root {
  --kirmizi: #e30a17;
  --kirmizi-koyu: #b00812;
  --metin: #11151c;
  --metin-soluk: #59616e;
  --zemin: #f4f5f7;
  --kart: #ffffff;
  --cizgi: #dde1e7;
  --yesil: #0f7a3d;
  --yesil-zemin: #e8f6ee;
  --sari: #8a6100;
  --sari-zemin: #fdf4dd;
  --kirmizi-zemin: #fdecec;
  --golge: 0 1px 2px rgba(17, 21, 28, .05), 0 8px 24px rgba(17, 21, 28, .06);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

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

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

.sunum-ust {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.marka { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.marka .ay { width: 26px; height: 26px; border-radius: 6px; background: var(--kirmizi); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.sunum-ust .sag { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sunum-ust a { color: var(--metin-soluk); font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--cizgi); }
.sunum-ust a:hover { color: var(--metin); }

.saglik { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--metin-soluk); }
.saglik .nokta { width: 10px; height: 10px; border-radius: 50%; background: #c6ccd5; }
.saglik.iyi .nokta { background: var(--yesil); }
.saglik.kotu .nokta { background: var(--kirmizi); }

/* adım noktaları */
.noktalar { display: flex; gap: 7px; align-items: center; }
.noktalar button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%;
  border: 1px solid #c6ccd5; background: #fff; cursor: pointer;
}
.noktalar button[aria-current="step"] { background: var(--kirmizi); border-color: var(--kirmizi); transform: scale(1.25); }
.noktalar button.gecildi { background: #c6ccd5; }

/* ------------------------------------------------------------------ adım */

.adimlar { flex: 1; }
.adim { display: none; padding: 34px 28px 120px; max-width: 1280px; margin: 0 auto; width: 100%; }
.adim.aktif { display: block; animation: gir .22s ease-out; }
@keyframes gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.adim-no { font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kirmizi); }
.adim h2 { font-size: 44px; line-height: 1.12; letter-spacing: -.025em; margin: 8px 0 14px; font-weight: 700; }
.adim .ozet { font-size: 23px; line-height: 1.45; color: var(--metin); margin: 0 0 22px; max-width: 34ch; font-weight: 500; }
.adim .neden { font-size: 19px; line-height: 1.62; color: var(--metin-soluk); max-width: 62ch; margin: 0 0 24px; }

@media (max-width: 900px) {
  .adim h2 { font-size: 30px; }
  .adim .ozet { font-size: 19px; max-width: none; }
  .adim { padding: 24px 18px 140px; }
}

.adim.vurgu h2 { color: var(--kirmizi-koyu); }
.adim.vurgu .ozet::before {
  content: "En güçlü iddiamız";
  display: inline-block; margin-right: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--kirmizi); color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}

.iki-kolon { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 1050px) { .iki-kolon { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }

/* ------------------------------------------- telefonlu adımların yerleşimi
   Canlı bileşeni olan adımlarda (2-9) ekran iki hücreye bölünür: solda
   anlatım (`.adim-metin` — adım numarası, başlık, özet ve bütün metin),
   sağda telefon.

   NEDEN BAŞLIK DA SOLA GİRDİ (21.09.2026, ikinci tur). Telefon önce anlatımla
   aynı ızgaradaydı ama ızgara başlığın ALTINDAN başlıyordu; telefon da
   oradan. Telefonun oranı sabit olduğu için (390x812) kısa kalmak doğrudan
   DAR kalmak demek — ölçüldü, 1440x900, 4. adım: üst kenar y=303, alt kenar
   y=766, yani 463 piksel boy ve yalnız 222 piksel en. O ende sohbet baloncuğu
   satır başına 3-4 kelimeye düşüyor ve projeksiyondan okunmuyordu. Başlık
   sola alınınca telefon ekranın en üstünden başlıyor ve alt bara kadar
   uzanıyor: aynı ekranda 709 piksel boy, 340 piksel en (ölçüldü).

   SÜTUN GENİŞLİĞİ ÖLÇÜLÜR, VARSAYILMAZ: `--telefon-en` değerini sunum.js
   yazar — telefonun ölçülen boyundan ve sabit oranından türetir (bkz.
   telefonYuvalariniOlc). Buradaki yedek değer yalnız betik koşmadan önceki
   kaba hâl içindir.

   SOL HÜCRE KENDİ İÇİNDE KAYDIRILIR: sabit alt bar sayfanın üstüne biniyor ve
   uzun adımlarda (5, 7, 8) metnin son satırları barın ALTINDA kalıyordu —
   4. adımda soru düğmelerinin dördüncü satırı yarım görünüyordu (ölçüldü:
   1440x900'de içerik 856'da bitiyor, bar 824'te başlıyor). Sayfanın tamamını
   kaydırmak çözüm değil: o zaman telefon da yukarı kayıp ekrandan çıkıyor.
   Bu yüzden yalnız metin hücresi kaydırılır, telefon yerinde durur. */
.adim-metin { min-width: 0; }

@media (min-width: 1050px) {
  /* `.aktif` ŞART: `.adim { display: none }` kuralını yalnız `.adim.aktif`
     deviriyor. Buradaki seçici `.adim.telefonlu` olsaydı (aynı özgüllük,
     daha sonra gelen kural) telefonlu adımların HEPSİ aynı anda görünürdü —
     ölçüldü: sayfa 7163 piksel kaydırılabiliyordu, bütün adımlar alt alta. */
  .adim.telefonlu.aktif {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--telefon-en, 340px);
    column-gap: 32px;
    align-items: start;
    padding-top: 22px;
    padding-bottom: 14px;
  }
  .adim.telefonlu.aktif > .adim-metin {
    grid-column: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 12px;
    scrollbar-width: thin;
    scrollbar-color: #c6ccd5 transparent;
  }
  .adim.telefonlu.aktif > .adim-metin::-webkit-scrollbar { width: 8px; }
  .adim.telefonlu.aktif > .adim-metin::-webkit-scrollbar-thumb { background: #c6ccd5; border-radius: 999px; }
  .adim.telefonlu.aktif > .adim-metin::-webkit-scrollbar-track { background: transparent; }
  /* Aşağıda devamı varken alt kenar soluklaşır — sunumcu kaydırılacak yer
     olduğunu görür. Sınıfı sunum.js koyup kaldırıyor: dibe inildiğinde
     solma kalkar, yoksa son satır hep yarı görünür kalırdı. */
  .adim.telefonlu.aktif > .adim-metin.kaydirilir {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
  }
  .adim.telefonlu.aktif > .telefon-yuvasi,
  .adim.telefonlu.aktif > .site-yuvasi { grid-column: 2; }

  /* MASAÜSTÜ GÖRÜNÜMÜ (2. adım, 23.09.2026) — sağ hücre telefon değil, bir
     web sitesi taşıyor ve masaüstü sitesi 390 piksellik telefon yuvasına
     sığmaz.

     ÖLÇÜLDÜ (1440x900): telefon yuvası 324 piksel; aynı ekranda masaüstü
     yuvası 952 piksel. Site o yuvada ÖLÇEKLENMEDEN, 952 piksellik gerçek bir
     tarayıcı genişliğinde açılıyor — yani sağ alttaki sohbet baloncuğunun
     yazısı kendi boyunda kalıyor. Küçültülseydi (transform: scale) widget'ın
     14 piksellik yazısı 9 piksele iner ve projeksiyondan okunmazdı.

     `max-width` da büyüyor: 1280 piksellik ortak tavan, 1920'lik ekranda
     siteye de metne de yer bırakmıyordu. Sütun genişliğinin kendisi sabit
     değil, ÖLÇÜLÜYOR (sunum.js → siteYuvalariniOlc): önce metin hücresine
     okunur bir taban ayrılıyor, kalanı site alıyor. */
  .adim.telefonlu.aktif.masaustu { max-width: 1700px; }
}

/* ------------------------------------------------------------ canlı deneme */

.deneme { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge); overflow: hidden; }
.deneme > header {
  padding: 12px 18px; border-bottom: 1px solid var(--cizgi); background: #fafbfc;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-soluk);
}
.deneme .govde { padding: 18px; }

.soru-dugmeleri { display: flex; flex-wrap: wrap; gap: 10px; }
.soru-dugmeleri button {
  font: inherit; font-size: 17px; text-align: left;
  background: #fff; border: 1.5px solid var(--cizgi); border-radius: 11px;
  padding: 11px 15px; cursor: pointer; max-width: 100%;
}
.soru-dugmeleri button:hover { border-color: var(--kirmizi); color: var(--kirmizi-koyu); }
.soru-dugmeleri button[aria-pressed="true"] { border-color: var(--kirmizi); background: var(--kirmizi-zemin); }
.soru-dugmeleri button:disabled { opacity: .5; cursor: progress; }

.dugme {
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  border-radius: 11px; padding: 11px 18px; border: 1.5px solid var(--cizgi); background: #fff; color: var(--metin);
}
.dugme.birincil { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.dugme.birincil:hover { background: var(--kirmizi-koyu); }
.dugme:disabled { opacity: .55; cursor: progress; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ------------------------------------------------- gömülü sohbet penceresi
   Adımın sağ sütununda, 2. adımdakiyle AYNI telefon durur: içinde kurumun
   örnek mobil uygulaması (/mobil/?gomulu=1&kopru=1), onun web görünümü
   katmanında da botun kendi sohbet penceresi. Kutu ölçüleri aşağıdaki
   `.telefon-cercevesi`den gelir — 2. ve 9. adımla birebir aynı kural.

   TARİHÇE (21.09.2026): pencere önce çıplak beyaz bir kutuydu, sonra sunumun
   elle çizdiği bir telefon kasası oldu. İkisi de giriş/çıkış adımlarında aynı
   eksiği taşıyordu — ekranda "Uygulamadan çıkış yap" yazıyor, telefonda
   çıkılacak uygulama görünmüyordu. Kasa çizen kurallar bu yüzden kaldırıldı. */
/* Pencere durumu — hata ve bekleme satırı, telefonun ALTINDA.
   Eskiden pencerenin üstüne beyaz bir örtü olarak biniyordu; artık çerçevenin
   içinde uygulamanın kendisi var ve o da kendi bekleme satırını çiziyor
   (/mobil/ → #wv-durum). Sunumun söyleyeceği tek şey kalıyor: pencere hiç
   açılamadıysa sunumcu bunu görsün. */
.sohbet-durum {
  margin-top: 8px; max-width: 460px; text-align: center;
  color: var(--kirmizi-koyu); font-size: 13px; line-height: 1.4;
}
.sohbet-durum[hidden] { display: none; }

/* NOT: `.sohbet-kolon` / `.uygulama-kolon` / `.goruntulu-kolon` kuralları
   21.09.2026'da kaldırıldı — telefon artık adımın kendi ızgarasında
   (`.adim.telefonlu`), anlatım metniyle aynı kutunun içinde değil. */

/* Cevabın kaynağı, pencerenin yanında ayrıca büyük puntoyla. Pencere okunur
   ama kaynak satırı cevabın en altında kalıyor; salonun arkası kaçırmasın. */
.kaynak-ozeti {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: var(--kirmizi-zemin); border-left: 4px solid var(--kirmizi);
}
.kaynak-ozeti[hidden] { display: none; }
.kaynak-ozeti .etiket {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--kirmizi-koyu);
}
.kaynak-ozeti p { margin: 8px 0 0; font-size: 19px; line-height: 1.5; }
.kaynak-ozeti .baglantilar { font-size: 17px; word-break: break-all; }
.kaynak-ozeti a { color: var(--kirmizi-koyu); }

/* Sistem katmanı yoklamasının sonucu — sohbetin İÇİNE yazılmaz, yanında durur. */
.sistem-sonuc {
  margin-top: 12px; padding: 12px 15px; border-radius: 11px;
  background: #f1f3f6; font-size: 17px; line-height: 1.5;
}
.sistem-sonuc[hidden] { display: none; }
.sistem-blok + .sistem-blok { margin-top: 10px; }
.sistem-etiket { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 4px; }
.sistem-blok pre {
  margin: 0 0 6px; padding: 9px 11px; border-radius: 8px; background: #1f2328; color: #e6edf3;
  font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all;
}

.yaziyor { display: inline-flex; gap: 5px; align-items: center; }
.yaziyor i { width: 8px; height: 8px; border-radius: 50%; background: #9aa3b0; display: inline-block; animation: zipla 1s infinite; }
.yaziyor i:nth-child(2) { animation-delay: .15s; }
.yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes zipla { 0%,60%,100% { transform: translateY(0); opacity: .5 } 30% { transform: translateY(-5px); opacity: 1 } }

/* uyarı — sunum sırasında bir şey bozulursa sunumcu görsün, panik olmasın */
.uyari-satiri {
  margin-top: 14px; padding: 12px 15px; border-radius: 11px;
  background: var(--sari-zemin); border-left: 4px solid var(--sari); color: #6d4d00; font-size: 16px;
}
.uyari-satiri b { display: block; }

/* sunumcu notu — sayfada durur ama varsayılan olarak GİZLİ (N tuşuyla açılır).
   Sunum ekranı projeksiyonda; burada yazan müşteriye değil, sunumu yapan kişiye
   söylenmiştir (bkz. sunum.js → sunumcuNotlariniCevir). Uyarı satırından ayrı
   görünsün diye kesikli çerçeve: "bu, sunumun parçası değil". */
.sunumcu-notu-yuvasi { margin-top: 16px; }
.sunumcu-notu-yuvasi .dugme.kucuk {
  font-size: 13px; padding: 5px 11px; border-style: dashed; color: #6c5aa8; border-color: #b6a8e6;
}
.sunumcu-notu-yuvasi .dugme.kucuk[aria-pressed="true"] { background: #f5f2ff; }
.sunumcu-notu {
  margin-top: 10px; padding: 12px 15px; border-radius: 11px;
  background: #f5f2ff; border: 1px dashed #8d7ad6; color: #43336f; font-size: 15px; line-height: 1.55;
}
.sunumcu-notu[hidden] { display: none; }
.sunumcu-notu .etiket {
  display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #6c5aa8; margin-bottom: 6px;
}
.sunumcu-notu p { margin: 0; }

/* ---------------------------------------------------------------- adım kilidi
   Bir soru sorulurken o adımın bütün düğmeleri kapanır (bkz. sunum.js → Kilit).
   Sunumu yapan kişi neden tıklayamadığını GÖRSÜN diye iki işaret birden var:
   düğmeler soluklaşıp "bekle" imlecine döner, altta da tek satırlık bir
   açıklama çıkar. Gezinme düğmeleri adımın dışında olduğu için etkilenmez. */
.adim.mesgul .soru-dugmeleri button:disabled,
.adim.mesgul .dugme:disabled,
.adim.mesgul .kisi:disabled {
  opacity: .4; cursor: progress; filter: grayscale(1); box-shadow: none;
}
.adim.mesgul .soru-dugmeleri button:disabled:hover,
.adim.mesgul .dugme:disabled:hover { border-color: var(--cizgi); color: inherit; }
.mesgul-satiri {
  margin-top: 16px; padding: 12px 15px; border-radius: 11px;
  display: flex; gap: 12px; align-items: center;
  background: #f1f3f6; border-left: 4px solid #9aa3b0; color: var(--metin-soluk); font-size: 16px;
}
.mesgul-satiri[hidden] { display: none; }

/* ne kanıtlandı */
.kanit-serit {
  margin-top: 26px; display: flex; gap: 14px; align-items: flex-start;
  background: var(--yesil-zemin); border-left: 5px solid var(--yesil);
  border-radius: 0 12px 12px 0; padding: 15px 20px;
}
.kanit-serit .tik { font-size: 22px; line-height: 1.2; }
.kanit-serit b { display: block; font-size: 18px; }
.kanit-serit .olcut { font-size: 15px; color: var(--metin-soluk); margin-top: 4px; }

/* sayı kutuları */
.sayilar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 8px 0 4px; }
.sayi { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 20px; text-align: center; box-shadow: var(--golge); }
.sayi .buyuk { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.sayi .etiket { font-size: 15px; color: var(--metin-soluk); margin-top: 6px; }
.sayi.iyi .buyuk { color: var(--yesil); }
.sayi.dikkat .buyuk { color: var(--sari); }

/* POC'nin hacmi — dört sayı, tek satır.
   23.09.2026: kapak adımı kalkınca dört büyük kutu buraya indi. Sunumda üst
   şeridin ortasında, vitrinde panelin başlığında duruyor; iki sayfa da bu
   dosyayı yüklüyor, tek kural yeter. Şerit DARALINCA SATIR SARAR, gizlenmez:
   sayılar POC'nin büyüklüğünü söyleyen tek yer ve başka yerde geçmiyor. */
.sayi-serit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; min-width: 0; }
.sayi-serit span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap;
  font-size: 13.5px; color: var(--metin-soluk); }
.sayi-serit b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--metin); }
.panel-basi .sayi-serit { margin-top: 10px; }

/* Yapılan görüşmeler — oturum kimliği + görüşme özeti (son adım).
   23.09.2026: POC sahibinin isteğiyle son adımın ana içeriği bu oldu.
   Kartlar gerçek kayıtlardır (scripts/hub/gorusme-kayitlari.mjs). */
.oturumlar { display: grid; gap: 14px; margin: 14px 0 6px; }
.oturum-karti { border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px 16px;
  background: var(--kart); display: grid; gap: 8px; }
.oturum-basi { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.oturum-no { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.oturum-basi .mini { margin: 0; }
.oturum-karti .mini { margin: 0; }
/* Oturum kimliği uzun ve boşluksuz: sarmazsa kartı yatay kaydırmaya sokar. */
.oturum-kimlik { font-size: 12.5px; line-height: 1.45; word-break: break-all;
  background: var(--zemin, #f4f1ee); border-radius: 8px; padding: 6px 9px; margin: 0; }
/* Kapsam listeleri tek satıra indi (silinmedi) — gerekçe sunum-icerigi.mjs'te. */
.kapsam-serit { border-left: 3px solid var(--cizgi); padding-left: 10px; margin-top: 12px; }

/* listeler */
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste li {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 11px;
  padding: 13px 16px; font-size: 17px; display: flex; gap: 12px; align-items: flex-start;
}
.liste li .im { color: var(--metin-soluk); flex: none; }
/* Son adımda "kapsamın ötesinde yapılanlar" listesi: aynı liste biçimi, ama
   madde işareti eksi değil artı ve yeşil — okuyan kişi iki listeyi yan yana
   görünce hangisinin hangisi olduğunu başlığa bakmadan ayırt etsin. */
.liste li .im.arti { color: var(--yesil); font-weight: 700; }
.liste.iki { grid-template-columns: 1fr; }
@media (min-width: 900px) { .liste.iki { grid-template-columns: 1fr 1fr; } }

/* tablo (geniş içerik kendi içinde kayar) */
.kaydir { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 17px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
th { background: #f7f8fa; font-size: 15px; font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.tek { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------------------------------------------------- maskeleme vitrini (6. adım)
   Bağışçının yazdığı cümle ile dil modeline giden cümle YAN YANA durur; salonun
   arkasından okunacak punto ve kalın yıldızlar. Dar ekranda alt alta geçer ve ok
   aşağıyı gösterir — iki kutunun sırası anlamı taşıdığı için asla karışmamalı. */
.maske-vitrin {
  display: grid; gap: 10px; align-items: stretch; margin-top: 12px;
  grid-template-columns: 1fr; 
}
@media (min-width: 900px) { .maske-vitrin { grid-template-columns: 1fr auto 1fr; } }
.maske-kutu {
  background: #fff; border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 12px 14px;
}
.maske-kutu.vurgulu { border-color: var(--yesil); background: #f2fbf5; }
.maske-etiket {
  display: block; font-size: 14px; font-weight: 650; color: var(--metin-soluk);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.maske-kutu .tek { font-size: 17px; line-height: 1.45; margin: 0; word-break: break-word; }
.maske-kutu.vurgulu .tek { font-weight: 650; }
.maske-ok {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--metin-soluk); transform: rotate(90deg);
}
@media (min-width: 900px) { .maske-ok { transform: none; } }

/* ------------------------------------------- temsilciye giden özet (8. adım)
   Gerçek bir devirden okunmuş özet metni. Sohbet penceresinin kendi baloncuğuna
   BENZEMEMELİ: bağışçı bunu hiç görmüyor, bu kutu temsilcinin ekranından
   alınmış bir kayıt. Bu yüzden nötr gri zemin + kesik kenar, sohbet
   baloncuklarının yuvarlak/kırmızı dilinden uzak. */
.ozet-karti {
  margin-top: 12px; background: #f7f8fa; border: 1.5px dashed var(--cizgi);
  border-radius: 12px; padding: 14px 16px;
}
.ozet-karti .ozet-satir { margin: 0 0 6px; font-size: 17px; line-height: 1.45; }
.ozet-karti .ozet-satir:last-child { margin-bottom: 0; }

/* kullanıcı seçimi */
.kisiler { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kisi {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: #fff; border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 13px 15px;
  cursor: pointer; font: inherit; font-size: 16px;
}
.kisi[aria-pressed="true"] { border-color: var(--kirmizi); background: var(--kirmizi-zemin); }
.kisi .ad { font-weight: 650; display: block; }
.kisi .no { font-size: 15px; color: var(--metin-soluk); font-family: ui-monospace, Menlo, monospace; }

/* geri sayım */
.sayac { font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sayac.hazir { color: var(--yesil); }

/* ------------------------------------------------------------------ alt bar */

.sunum-alt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cizgi);
}
.sunum-alt .konum { font-size: 16px; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.sunum-alt .baslikcik { font-weight: 650; font-size: 16px; }
.sunum-alt .sag { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.sunum-alt .tus { font-size: 14px; color: var(--metin-soluk); }
@media (max-width: 700px) { .sunum-alt .baslikcik, .sunum-alt .tus { display: none; } }

.ilerleme { position: fixed; left: 0; bottom: 0; height: 3px; background: var(--kirmizi); z-index: 31; transition: width .22s ease; }

.mini { font-size: 15px; color: var(--metin-soluk); }
.mini code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
h3.baslikcik { font-size: 19px; margin: 26px 0 12px; }

/* ------------------------------------------------------- uygulama içi görünüm
   Telefon /mobil/?gomulu=1 sayfasıdır; o sayfa kendini kutuya sığacak şekilde
   ölçekler. Kutu yüksekliği ekranın yüksekliğine bağlı: projeksiyonda telefon
   olabildiğince büyük, dizüstünde sayfayı taşırmadan.

   BURADAKİ YÜKSEKLİK YALNIZ BAŞLANGIÇ DEĞERİDİR. Gerçek yüksekliği sunum.js
   ölçerek yazıyor (bkz. telefonYuvalariniOlc): `100vh`ten sabit pay düşmek,
   çerçevenin sayfanın en üstünde başladığını varsayıyordu; oysa çerçeve sağ
   kolonda, başlığın altında başlıyor ve alt kenarı sabit alt barın altına
   kayıyordu (ölçüldü 21.09.2026: 56 piksel kırpılma, telefonun alt şeridi ve
   oradaki kademeli iniş düğmesi hiç görünmüyordu). Aşağıdaki değer, betik
   henüz koşmadan da kabaca doğru bir kutu çizilsin diye duruyor. */
.telefon-yuvasi { display: flex; flex-direction: column; align-items: center; }
/* `hidden` niteliği display:flex'i EZEMEZ — açıkça yazılır. 2. adımda telefon
   ve masaüstü yuvaları aynı ızgara hücresini paylaşıyor; kural olmadan ikisi
   birden görünüyor ve site hücrenin altına, ekran dışına düşüyordu
   (ölçüldü 23.09.2026: site y=812, boy 420 px yerine 736 px olmalıydı). */
.telefon-yuvasi[hidden] { display: none; }
.telefon-cercevesi {
  width: 100%; max-width: 460px;
  height: min(calc(100vh - 190px), 1000px); min-height: 420px;
  border: 0; background: transparent; display: block;
}

/* ---- masaüstü web sitesi yuvası (2. adım) ----
   Telefon yuvasının karşılığı: çerçeve sayfanın kendi tarayıcı şeridini
   çiziyor (bkz. /site/ → `.tarayici`), sunum ayrıca kasa çizmiyor. Yükseklik
   telefonla aynı biçimde ÖLÇÜLÜYOR; genişlik ise sağ sütunun kendisidir. */
.site-yuvasi { display: flex; flex-direction: column; align-items: stretch; }
.site-yuvasi[hidden] { display: none; }
.site-cercevesi {
  width: 100%;
  height: min(calc(100vh - 190px), 1000px); min-height: 420px;
  border: 1px solid var(--cizgi); border-radius: 12px; background: #fff; display: block;
  box-shadow: var(--golge);
}

/* Görünüm seçici — aynı yuvada telefon/masaüstü geçişi. */
.gorunum-secici { display: inline-flex; gap: 0; border: 1.5px solid var(--cizgi); border-radius: 11px; overflow: hidden; }
.gorunum-secici .gorunum-dugme {
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  border: 0; background: #fff; color: var(--metin); padding: 10px 16px;
}
.gorunum-secici .gorunum-dugme + .gorunum-dugme { border-left: 1.5px solid var(--cizgi); }
.gorunum-secici .gorunum-dugme:hover { color: var(--kirmizi-koyu); }
.gorunum-secici .gorunum-dugme[aria-pressed="true"] { background: var(--kirmizi); color: #fff; }

/* Görüntülü görüşme adımı (/goruntulu/?gomulu=1) aynı telefon yuvasını
   kullanır — kutu ölçüleri yukarıdaki .telefon-cercevesi'nden gelir. */

/* Görünüm seçicinin altındaki tek satırlık açıklama — seçicinin hemen dibinde
   dursun ki hangi düğmenin ne yaptığı okunmadan geçilmesin. */
.gorunum-not { margin: 8px 0 0; }