/* DiSCPROFiL · rapor örnekleri giriş sunumu — görünüm
   Renkler ve yazı ölçeği katalog sayfasının kendi değişkenlerinden gelir; sunum
   ayrı bir tasarım dili kurmaz. Dört kategori rengi katalogdaki kart renkleriyle
   BİREBİR aynıdır, böylece slayttaki renk katalogdaki bölümü işaret eder.
   Sabit 16:9 YOK: geniş ekranda sunum düzeni, dar ekranda akan okunabilir düzen. */

.sunum {
  --kisi: #0097cb; --gorev: #b18b16; --iliski: #18866a; --karsilastirma: #3a66ab;
  max-width: 1480px; margin: auto; padding: 24px 32px 40px;
}
.sunum[hidden] { display: none !important; }

/* ---- üst şerit: ilerleme + çıkış ---- */
.s-ust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.s-ilerleme { flex: 1 1 220px; min-width: 160px; }
.s-ilerleme-cubuk { height: 6px; border-radius: 6px; background: #dce6ee; overflow: hidden; }
.s-ilerleme-dolgu { height: 100%; width: 0; background: var(--blue); border-radius: 6px; transition: width .25s ease; }
.s-sayac { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.s-cikis { margin-left: auto; }

/* ---- slayt gövdesi ---- */
.s-sahne {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(22px, 4vw, 48px); box-shadow: 0 15px 55px #1630470a;
  border-top: 4px solid var(--tone, var(--blue));
}
.s-ustbaslik { color: var(--tone, var(--blue)); text-transform: uppercase; font-size: 12px; letter-spacing: 2px; font-weight: 800; }
.s-baslik { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -1.2px; line-height: 1.14; margin: 10px 0 6px; }
.s-mesaj { font-size: clamp(16px, 1.5vw, 19px); color: #3d5467; max-width: 70ch; margin: 0 0 26px; }

/* ---- ortak parçalar ---- */
.s-kutu { background: #f6f9fb; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.s-kutu h3 { margin: 0 0 6px; font-size: 16px; }
.s-kutu p { margin: 6px 0 0; font-size: 14px; color: #4a6070; }
.s-sinir { margin-top: 24px; border-left: 4px solid var(--tone, var(--blue)); background: #eef8fc; border-radius: 0 12px 12px 0; padding: 14px 20px; font-size: 14px; }
.s-etiket { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tone, var(--blue)); background: #eef4f8; background: color-mix(in srgb, var(--tone, #008cc5) 10%, white); border-radius: 20px; padding: 4px 10px; }
.s-izgara { display: grid; gap: 16px; }
.s-izgara.d2 { grid-template-columns: repeat(2, 1fr); }
.s-izgara.d3 { grid-template-columns: repeat(3, 1fr); }
.s-izgara.d4 { grid-template-columns: repeat(4, 1fr); }
.s-soru { font-size: 13px; font-weight: 750; color: var(--tone, var(--blue)); margin: 0 0 8px; }

/* açılış */
.s-surec { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #fff; }
.s-surec strong { display: block; font-size: 16px; margin-bottom: 4px; }
.s-surec span { font-size: 13px; color: #4a6070; }

/* dallanma */
.s-kok { text-align: center; font-weight: 800; background: #eef8fc; border: 1px solid #cfe9f6; border-radius: 14px; padding: 14px; margin-bottom: 8px; }
.s-dal-cizgi { height: 22px; border-left: 2px dashed #bcd3e2; width: 0; margin: 0 auto; }
.s-dal { border: 1px solid var(--line); border-top: 4px solid var(--dal); border-radius: 14px; padding: 16px; background: #fff; }
.s-dal strong { display: block; color: var(--dal); font-size: 15px; }
.s-dal span { font-size: 14px; display: block; margin-top: 6px; }

/* karşılaştırma */
.s-kolon { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: #fff; }
.s-kolon.vurgu { background: #f7fcff; border-color: #cfe9f6; }
.s-kolon h3 { margin: 0; font-size: 19px; }
.s-kolon .ozet { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.s-kolon ul { margin: 0; padding-left: 18px; font-size: 14px; }
.s-kolon li { margin: 7px 0; }

/* akış */
.s-adim { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff; }
.s-adim-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #eef4f8; background: color-mix(in srgb, var(--dal, #008cc5) 12%, white); color: var(--dal, var(--blue)); font-weight: 800; }
.s-ok { text-align: center; color: #9db4c4; font-size: 22px; line-height: 1; margin: 4px 0; }
.s-kullanim { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.s-cip { font-size: 13px; background: #eef3f7; border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; }

/* ikili modül */
.s-modul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.s-modul li { padding: 7px 0 7px 18px; position: relative; border-top: 1px solid var(--line); }
.s-modul li:before { content: "›"; position: absolute; left: 2px; color: var(--tone, var(--blue)); font-weight: 800; }

/* uyarılar */
.s-uyari { display: grid; gap: 10px; margin-top: 18px; }
.s-uyari div { font-size: 14px; background: #fff8e8; border: 1px solid #f0e0b8; border-radius: 12px; padding: 12px 16px; }

/* senaryo seçimi */
.s-senaryo { text-align: left; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #fff; color: var(--ink); display: block; width: 100%; transition: .15s; }
.s-senaryo:hover { border-color: var(--dal); transform: translateY(-1px); box-shadow: 0 6px 18px #16304710; }
.s-senaryo strong { display: block; font-size: 16px; color: var(--dal); }
.s-senaryo .soru { font-size: 13px; color: #4a6070; margin: 4px 0 10px; }
.s-zincir { font-size: 13px; margin: 0; }
.s-zincir dt { font-weight: 750; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-top: 8px; }
.s-zincir dd { margin: 2px 0 0; }
.s-git { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 750; color: var(--dal); }

/* ---- oynatıcı ---- */
.s-oynatici { margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-oynatici .grup { display: flex; align-items: center; gap: 8px; }
.s-dugme { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 14px; }
.s-dugme:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.s-dugme:disabled { opacity: .45; cursor: not-allowed; }
.s-dugme.ana { background: var(--blue); border-color: var(--blue); color: #fff; }
.s-dugme.ana:hover:not(:disabled) { background: #0079ac; color: #fff; }
.s-ses-durum { font-size: 12px; color: var(--muted); min-width: 92px; font-variant-numeric: tabular-nums; }
.s-oynatici label { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--ink); text-transform: none; letter-spacing: 0; }
.s-oynatici input[type=range] { width: 108px; accent-color: var(--blue); }
.s-hata { width: 100%; font-size: 13px; background: #fff3f3; border: 1px solid #f0cfcf; border-radius: 10px; padding: 10px 14px; color: #8b2b2b; }

/* ---- döküm ---- */
.s-dokum { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
.s-dokum h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.s-dokum p { margin: 0; font-size: 15px; line-height: 1.7; max-width: 76ch; }

/* ---- alt gezinme ---- */
.s-alt { margin-top: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-noktalar { display: flex; gap: 6px; margin: 0 auto; }
.s-nokta { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; font-weight: 800; padding: 0; }
.s-nokta[aria-current=true] { background: var(--blue); border-color: var(--blue); color: #fff; }

.s-geri-sunum { margin: 0 0 18px; }

/* ---- dar ekran: sabit oran yok, akan düzen ---- */
@media (max-width: 1100px) {
  .s-izgara.d4 { grid-template-columns: repeat(2, 1fr); }
  .s-izgara.d3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sunum { padding: 18px 16px 32px; }
  .s-izgara.d2, .s-izgara.d3, .s-izgara.d4 { grid-template-columns: 1fr; }
  .s-sahne { padding: 20px 18px; border-radius: 18px; }
  .s-baslik { font-size: 25px; letter-spacing: -.6px; }
  .s-mesaj { font-size: 16px; }
  .s-oynatici { gap: 8px; }
  .s-oynatici .grup { flex: 1 1 100%; }
  .s-oynatici input[type=range] { width: 100%; flex: 1; }
  .s-noktalar { order: 3; width: 100%; justify-content: center; margin: 6px 0 0; }
  .s-alt .s-dugme { flex: 1 1 45%; }
}

/* ---- hareket azaltma tercihi ---- */
@media (prefers-reduced-motion: reduce) {
  .s-ilerleme-dolgu, .s-senaryo, .s-kutu { transition: none !important; }
  .s-senaryo:hover { transform: none; }
}

/* ---- yazdırma: sunum çıkmaz, katalog ve rapor çıkar ---- */
@media print { .sunum, .s-geri-sunum { display: none !important; } }

/* Ekran okuyucuya görünür, gözle görünmez duyuru bölgesi. */
.s-gizli { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Slayt kutusu programatik olarak odaklanıyor (geçişte ekran okuyucu başlığı
   okusun diye). Fare/geçiş odağında kalın halka çıkmasın, klavye odağında çıksın. */
.s-sahne:focus:not(:focus-visible) { outline: none; }
.s-sahne:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

/* ---- KONTRAST (Codex bulgusu, 1 Ekim) ----------------------------------
   Katalogdan gelen kategori renkleri KENARLIK ve vurgu için yeterli, ama
   11–16 px metinde beyaz üstünde WCAG 2.2'nin istediği 4,5:1'i karşılamıyordu:
   #0097cb → 3,34:1 · #b18b16 → 3,19:1 · beyaz/#008cc5 düğme → 3,78:1.
   Çözüm: renk kimliği aynı kalsın, YAZI için aynı tonun koyusu kullanılsın.
   Ölçülen yeni oranlar: #007fab 4,54:1 · #917212 4,55:1 · #007eb1 4,55:1.
   (#18866a 4,51:1 ve #3a66ab 5,72:1 zaten geçiyordu, dokunulmadı.) */
.sunum {
  --kisi-yazi: #007fab; --gorev-yazi: #917212;
  --iliski-yazi: #18866a; --karsilastirma-yazi: #3a66ab;
  --mavi-yazi: #007eb1;
}
.s-ustbaslik, .s-soru, .s-dal strong, .s-senaryo strong, .s-git,
.s-modul li:before, .s-etiket, .s-adim-no { color: var(--tone-yazi, var(--mavi-yazi)); }
.s-dugme.ana { background: var(--mavi-yazi); border-color: var(--mavi-yazi); }
.s-dugme.ana:hover:not(:disabled) { background: #006b96; }
.s-nokta[aria-current=true] { background: var(--mavi-yazi); border-color: var(--mavi-yazi); }
.s-ilerleme-dolgu { background: var(--mavi-yazi); }
.s-sahne, .s-sinir { border-color: var(--line); }
.s-mesaj, .s-kutu p, .s-senaryo .soru { color: #3d5467; }   /* 7,2:1 */
.s-zincir dt, .s-sayac, .s-kolon .ozet, .s-ses-durum { color: #5a6f80; }  /* 4,6:1 */
.s-dal strong { color: var(--dal-yazi, var(--dal)); }
.s-adim-no { color: var(--dal-yazi, var(--dal)); }
.s-senaryo strong, .s-senaryo .s-git { color: var(--dal-yazi, var(--dal)); }

/* ---- 9. slayt: yedi seçenek + tek ayrıntı (Codex yoğunluk bulgusu) ---- */
.s-secenekler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.s-secenek {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 24px; padding: 9px 16px; font-size: 14px; font-weight: 700;
}
.s-secenek:hover { border-color: var(--dal); }
.s-secenek[aria-selected=true] {
  background: var(--dal-yazi); border-color: var(--dal-yazi); color: #fff;
}
.s-senaryo-detay {
  border: 1px solid var(--line); border-left: 4px solid var(--dal);
  border-radius: 0 16px 16px 0; background: #fff; padding: 20px 22px;
}
.s-senaryo-detay .soru { margin: 0 0 12px; font-size: 17px; font-weight: 750; color: var(--dal-yazi); }
.s-senaryo-detay .s-dugme { margin-top: 16px; }
.s-senaryo-detay:focus-visible { outline: 3px solid var(--mavi-yazi); outline-offset: 3px; }
@media (max-width: 760px) {
  .s-secenek { flex: 1 1 calc(50% - 8px); text-align: center; }
  .s-senaryo-detay { padding: 16px 18px; }
}

/* ---- SLAYT ÜZERİ VURGU (anlatımla senkron) ----------------------------------
   Ses hangi noktadan bahsediyorsa o parça halkalanır. GEPOSB sunumundaki
   göstergenin aynısı; hareket azaltma tercihinde nabız kapanır. */
.s-vurgu {
  box-shadow: 0 0 0 2px var(--tone, #008cc5), 0 0 0 7px color-mix(in srgb, var(--tone, #008cc5) 16%, transparent);
  border-radius: 16px;
  transition: box-shadow .25s, background-color .25s;
  scroll-margin-top: 90px;
}
.s-kutu.s-vurgu, .s-surec.s-vurgu, .s-dal.s-vurgu, .s-kolon.s-vurgu, .s-adim.s-vurgu { background: #f6fbfe; }
@keyframes s-nabiz {
  0%, 100% { box-shadow: 0 0 0 2px var(--tone, #008cc5), 0 0 0 7px color-mix(in srgb, var(--tone, #008cc5) 16%, transparent); }
  50%      { box-shadow: 0 0 0 2px var(--tone, #008cc5), 0 0 0 11px color-mix(in srgb, var(--tone, #008cc5) 8%, transparent); }
}
@media (prefers-reduced-motion: no-preference) { .s-vurgu { animation: s-nabiz 1.8s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .s-vurgu { transition: none; animation: none; } }

/* ---- KONTROL ŞERİDİ (kullanılabilirlik bulguları 1 ve 4) --------------------
   Şerit slaytın ÜSTÜNDE ve yapışkan: sesli bir sunumun başlatma düğmesi her
   ekranda, her slaytta kaydırmadan görünür. Önceki yerleşimde mobilde 1240.
   pikseldeydi. Dokunma hedefleri 44 px'in altına düşmez. */
.s-kontrol {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fffffff2; backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 14px;
  box-shadow: 0 4px 14px #16304710;
}
.s-kontrol .s-dugme { min-height: 44px; }
.s-kontrol .s-ikon { min-width: 44px; padding: 9px 12px; font-size: 17px; line-height: 1; }
.s-oynat { flex: 0 1 auto; }
.s-kontrol .s-ses-durum { margin-left: auto; }
#s-ayar-dugme { margin-left: 0; }

.s-ayarlar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; margin: -6px 0 14px;
}
.s-ayarlar label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 650; color: var(--ink); text-transform: none; letter-spacing: 0; }
.s-ayarlar input[type=range] { width: 120px; accent-color: var(--mavi-yazi); }
.s-ayarlar .s-dugme { min-height: 40px; }

/* Nokta gezinmesi: dokunma hedefi en az 44 px */
.s-nokta { width: 44px; height: 44px; font-size: 13px; }
.s-alt { justify-content: center; }

@media (max-width: 760px) {
  .s-kontrol { gap: 8px; padding: 8px 10px; border-radius: 14px; }
  .s-oynat { flex: 1 1 auto; justify-content: center; }
  .s-kontrol .s-ses-durum { flex: 1 1 100%; margin: 0; text-align: center; order: 9; }
  .s-ayarlar { flex-direction: column; align-items: stretch; }
  .s-ayarlar input[type=range] { width: 100%; }
  .s-noktalar { flex-wrap: wrap; }
  /* Yapışkan şeridin altına güvenli alan payı (çentikli telefonlar). */
  .sunum { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}