/* Siluet ana sayfa B5 yürüyüş "Kapı" (2026-10-25, orta üçte bir yeniden kurgusu). Sahibi WP6. Şartname: ANA-SAYFA-KURGU.md 2.5 ve 2.10 (G4).
   Kart yok: Koza'nın 9:16 telefon videosu duvarda açılmış bir kapıdır; köşe 0, gölge 0, kenar erimesi 0; alt kenarı zemin çizgisine basar (Kurallar 25 ruhu).
   Kapı ölçüsü JS'te (js/b-yuruyus.js olcuYaz): yükseklik min(100svh - menü - 24 - zemin bandı, 1024 x min(1, 1,35 / DPR)); video hiçbir ekranda dosya pikselinin
   1,35 katından büyük çizilmez (DPR 1'de en çok 1,0). --kw, --kh, --taban, --ad (oda adı boyu) bölüme satır içi yazılır; buradaki değerler yalnız yedek.
   Duvar yazısı (.yd) beş kap: her kap bütün sahneyi kaplar, JS onu kapının merkez çizgisinden kırpar (clip-path); kapı üstte (z 3) olduğundan yazı kapının arkasında kalır.
   Zemin iki katman: .yuruyus__zemin durağın tonu, .yuruyus__zemin2 kapı süpürürken yeni odanın tonu (dikiş kapıyla birlikte yürür).
   Bölüm izdir (ORTAK.md 4): giriş devri G4 (--devir-giris) + yürüyüş yolu 150svh + çıkış devri G5 (--devir-cikis); yol JS'te parça parça doğrusal (süpürmeler 26vh).
   Tablet (600-899): masaüstü kapı düzeni, kapı yoğunluk sınırından (JS), zemin bandı iki satır (haplar; altında sayaç ve not). Telefon (<= 599): kapı tam genişlik, ad lentoda.
   G5 (js/b-kurumsal.js) kancaları: --g5-zemin (.yuruyus__zemin::after), #yuruyus-tuval (brightness), .yuruyus__cerceve (saydamlık, ölçek), .yuruyus__sol (saydamlık). */

.yuruyus {
  --zemin: #EAEBEB;                                  /* ilk durak (Kat holü); JS her durakta yazar */
  --taban: 64px;                                     /* zemin bandı: kapının bastığı çizginin altı (haplar, not) */
  --kh: calc(100svh - 140px);
  --kw: calc(var(--kh) * 9 / 16);
  --ad: 160px;
  --imx: 0; --imy: 0;                                /* imleç derinliği (yalnız duvar yazısı, px) */
  position: relative;
  height: calc(100svh + var(--devir-giris, 0px) + 150svh + var(--devir-cikis, 0px));
  background: transparent;
  pointer-events: none;                              /* bölüm kutusu devirde cephenin altına biner; dokunuşu yalnız zemin ve haplar tutar */
}
.yuruyus__sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }

/* zemin: durak tonu. Saydamlık G4'te 0'dan 1'e (cephenin üstüne yayılır); görünür olduğunda tıklamayı da tutar */
.yuruyus__zemin { position: absolute; inset: 0; z-index: 0; pointer-events: auto; background: var(--zemin); }
.yuruyus__zemin::after { content: ""; position: absolute; inset: 0; background: #FBF9F6; opacity: var(--g5-zemin, 0); pointer-events: none; }
.yuruyus__zemin2 { position: absolute; inset: 0; z-index: 0; visibility: hidden; pointer-events: none; background: transparent; }

/* ---------- duvar yazısı ---------- */
.yuruyus__sol { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.yd { position: absolute; inset: 0; pointer-events: none; }
.yd__blok { position: absolute; top: calc(100% - var(--taban) - var(--kh) / 2); transform: translateY(-50%);
  translate: calc(var(--imx) * 1px) calc(var(--imy) * 1px); }
/* yazı kapının sağında (kapı solda dinlenir): soldan kapının sağ kenarına 56 px; solunda (kapı sağda dinlenir): sağa yaslı, kapının sol kenarına 56 px */
.yd[data-yan="sag"] .yd__blok { left: calc(var(--kenar) + var(--kw) + 56px); right: var(--kenar); text-align: left; }
.yd[data-yan="sol"] .yd__blok { left: var(--kenar); right: calc(var(--kenar) + var(--kw) + 56px); text-align: right; }
/* Mutfak lentoya asılı (üst kenarı kapının üst kenarında), Yatak odası zemin çizgisine oturur ve onun arkasından yükselir */
.yd--ust .yd__blok { top: calc(100% - var(--taban) - var(--kh)); transform: none; }
.yd--alt .yd__blok { top: auto; bottom: var(--taban); transform: none; }

.yuruyus__baslik { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -.03em; color: var(--metin); }
.yuruyus__alt { margin: 8px 0 0; font-size: 17px; line-height: 1.4; color: #48484D; }
.yuruyus__alt + .yd__ad { margin-top: clamp(20px, 4.5vh, 44px); }
.yd__ad { margin: 0; font-size: var(--ad); line-height: .9; font-weight: 300; letter-spacing: -.045em; color: var(--metin); white-space: nowrap; }
/* satır maskesi yalnız dikeyde kırpar (yatay kaymayı kesmez); dolgu ç, ş kuyruğunu ve İ noktasını içine alır */
.yd__m { display: block; clip-path: inset(0 -200vw 0 -200vw); padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.yd__s { display: inline-block; will-change: transform; }
.yd--alt .yd__m:last-child { padding-bottom: .07em; margin-bottom: 0; }   /* son satırın maskesi zemin çizgisinde biter (ad çizginin arkasından yükselir); yuvarlak harflerin alt taşması çizginin üstünde kalır */
.yd__olc { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; font-size: 100px; font-weight: 300; letter-spacing: -.045em; pointer-events: none; }

/* sayaç: zemin bandının solunda (telefonda lentonun üstünde) */
.yuruyus__sayac { position: absolute; left: var(--kenar); bottom: calc(var(--taban) / 2); transform: translateY(50%); margin: 0; font: 400 12px/1.3 "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: #3A3A3C; white-space: nowrap; }

/* ---------- zemin bandı ---------- */
.yuruyus__taban { position: absolute; left: 0; right: 0; bottom: 0; height: var(--taban); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding: 0 var(--kenar); }
/* zemin çizgisi: bütün genişlik 1 px; koyu kısmı yürüyüşün ilerlemesi (--y-ilerleme). G4'te soldan çizilir (--ray-ac) */
.yuruyus__ray { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(29, 29, 31, .22); transform-origin: 0 50%; transform: scaleX(var(--ray-ac, 1)); }
.yuruyus__ray::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--metin); transform-origin: 0 50%; transform: scaleX(var(--y-ilerleme, 0)); }
.duraklar { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; pointer-events: auto; }
.duraklar li { flex: none; }
.duraklar button { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #3A3A3C; background: rgba(255, 255, 255, .62); white-space: nowrap; transition: background-color var(--t-hizli, .45s), color var(--t-hizli, .45s); }
.duraklar button:hover { background: rgba(255, 255, 255, .95); }
.duraklar button:focus-visible { border-radius: 999px; }
.duraklar li.aktif button { background: var(--metin); color: #fff; }
.yuruyus__not { grid-column: 3; justify-self: end; margin: 0; font-size: 13px; color: #48484D; white-space: nowrap; }

/* ---------- kapı ---------- */
.yuruyus__cerceve { position: absolute; z-index: 3; left: var(--kenar); bottom: var(--taban); width: var(--kw); height: var(--kh); transform-origin: 50% 100%; }
.yuruyus__kare { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.yuruyus__kare canvas { width: 100%; height: 100%; display: block; }

/* ---------- G4 kopyası: dizindeki Koza karosunun kopyası (js/b-yuruyus.js klonlar), karodan kapıya büyür; kenar keskin (erime yok) ----------
   Altta kat holü karesi (tuval), üstte karonun kendisi; kapak 0,25-0,60'ta çözülür. Varsayılan gizli; yalnız devir bağlamında (masaüstü, hareket azaltma kapalı) gsap açar. */
.yuruyus__kopya { position: absolute; z-index: 5; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; background: transparent; contain: layout paint; }
.yuruyus__kopya, .yuruyus__kopya *, .yuruyus__kopya *::before, .yuruyus__kopya *::after { transition: none !important; animation: none !important; }
.yuruyus__ilk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.yuruyus__kl { position: absolute; inset: 0; }
.yuruyus__kl > .karo { --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; position: absolute; inset: 0; width: auto; height: auto; margin: 0; grid-area: auto; border-radius: 0; box-shadow: none; overflow: visible; isolation: auto; opacity: 1; filter: none; }
.yuruyus__kopya .karo__yazi, .yuruyus__kopya .karo__durum { opacity: var(--yz, 1); }
.yuruyus__kopya .karo--alt .karo__a::after { opacity: var(--yz, 1); }

/* ---------- masaüstü devir bağlamı (js/b-yuruyus.js sınıfı ekler): haplar G4'te açılana kadar (.yuruyus--acik) dokunuşu tutmaz ---------- */
.yuruyus--devir:not(.yuruyus--acik) .duraklar { pointer-events: none; }

/* ---------- 900-1180 px: zemin bandında sayaç yer bırakmaz; haplar sola, not sağa ---------- */
@media (min-width: 900px) and (max-width: 1180px) {
  .yuruyus__sayac { display: none; }
  .yuruyus__taban { grid-template-columns: auto 1fr; }
  .duraklar { grid-column: 1; }
  .yuruyus__not { grid-column: 2; }
}

/* ---------- telefon ve tablet (<= 899 px): devir yok (G4 kopyası gizli); G5 örtüsü telefonda Kurumsal sahnesinin zemini (#F2EFEA; jüri 3 bulgu 47) ---------- */
@media (max-width: 899px) {
  .yuruyus { height: calc(100svh + 150svh); }
  .yuruyus__kopya { display: none; }
  .yuruyus__zemin::after { background: #F2EFEA; }
  .duraklar button { min-height: 44px; }
}

/* ---------- tablet (600-899 px): masaüstü kapı düzeni. Kapı dosya pikselinden boyutlanır (JS --kw/--kh; 768x1024 DPR 2'de 375x667), artan yükseklik duvara ve zemine
   bölünür. Zemin bandı (--taban >= 100): üst satırda haplar soldan, altında sayaç (solda) ve not (sağda); alçak ekranda (< 600 px yükseklik) yalnız haplar ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  .yuruyus__taban { display: block; padding: 12px var(--kenar) 0; }
  .duraklar { display: flex; flex-wrap: nowrap; }
  .yuruyus__sayac { bottom: calc(var(--taban) - 86px); transform: none; line-height: 18px; }
  .yuruyus__not { position: absolute; right: var(--kenar); top: 68px; line-height: 18px; }
}
@media (min-width: 600px) and (max-width: 899px) and (max-height: 599px) {
  .yuruyus__sayac, .yuruyus__not { display: none; }
  .yuruyus__taban { padding-top: 10px; }
}

/* ---------- telefon (<= 599 px): sahne yapışık, 150svh yol. Kapı tam genişlik, zemin çizgisine basar; ad kapının üstündeki lentoda,
   kapının üst kenarının arkasından yükselir (eski ad onun arkasına iner). Haplar zemin bandında yatay kayan şerit ---------- */
@media (max-width: 599px) {
  .yuruyus { --taban: 64px; --lento: 104px; }
  .yuruyus__cerceve { left: 0; width: 100%; height: calc(100% - 52px - var(--lento) - var(--taban)); }
  /* video kapıyı kaplar (genişlik tam, fazlası dikeyde kırpılır): 390'da 390x693 çizilir, 624 px görünür */
  .yuruyus__kare canvas { position: absolute; left: 50%; top: 50%; width: max(100%, calc((100svh - 52px - var(--lento) - var(--taban)) * 9 / 16)); height: auto; translate: -50% -50%; }
  .yd .yd__blok, .yd[data-yan] .yd__blok { left: var(--kenar); right: var(--kenar); top: 52px; bottom: auto; height: var(--lento); transform: none; translate: none; text-align: left;
    display: flex; flex-direction: column; justify-content: flex-end; }
  .yuruyus__baslik, .yuruyus__alt { display: none; }
  .yd__ad { font-size: var(--ad, 40px); line-height: 1; }
  .yd__m { display: inline-block; padding: .12em 0 0; margin: -.12em 0 0; }   /* maskenin alt kenarı kapının üst kenarı: ad onun arkasından çıkar */
  .yd--alt .yd__m:last-child { padding-bottom: 0; }
  .yuruyus__sayac { top: 68px; bottom: auto; transform: none; }
  .yuruyus__taban { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .yuruyus__not { display: none; }
  /* durak şeridi: ekranın iki kenarına taşar, kesim ekran kenarında solarak olur; etkin hap JS ile ortaya kayar */
  .duraklar { grid-column: 1; min-width: 0; padding: 0 var(--kenar) 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--kenar), #000 calc(100% - var(--kenar)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--kenar), #000 calc(100% - var(--kenar)), transparent 100%); }
  .duraklar::-webkit-scrollbar { display: none; }
}
/* geniş telefon (461-599 px, DPR >= 1,25): kapı en çok 460 css (576 x 1,6 / 2), duvarın ortasında; 460 ve altındaki telefonlar değişmez */
@media (max-width: 599px) and (min-resolution: 1.25dppx) {
  .yuruyus__cerceve { left: calc((100% - min(100%, 460px)) / 2); width: min(100%, 460px); }
}

/* ---------- hareket azaltma: yapışma yok, tek 100svh sahne; kapı durağın yanında, haplar karesini, adını ve duvar tonunu anında değiştirir ---------- */
html.az-hareket .yuruyus { height: auto; }
html.az-hareket .yuruyus__sahne { position: relative; height: 100svh; min-height: 560px; }
html.az-hareket .yuruyus__kopya { display: none; }
html.az-hareket .duraklar button { transition: none; }