/* Siluet ana sayfa B2 devam eden projeler · ufuk. Sahibi WP3. Şartname: ANA-SAYFA-KURGU.md 2.2 ve 2.10 (G1, G2 bant tarafı).
   Masaüstü: bölümün kendisi iz (100svh + devir payları + --yol), [data-sahne] yapışık 100svh; içinde beş tam ekran pano yan yana (2 px sayfa zemini derzi, köşe ve gölge yok),
   altta sabit film altyazısı bandı (--bant 0 -> bant boyu, JS). Telefon ve hareket azaltma: sabitleme yok, parmakla ve klavyeyle kaydırılan şerit, alt yazı panonun altında. */
@font-face { font-family: "Geist Mono"; src: url("../../fonts/GeistMono-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

.devam {
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --zemin: #F4F1EC;                                     /* sayfa zemini = bant ve derz tonu (data-zemin) */
  --bant-h: clamp(112px, 14.67svh, 132px);              /* 1440x900'de 132, 1280x720'de 112 */
  --yol: 280vh;                                         /* kendi kaydırma yolu; JS ekran oranına göre günceller */
  --gri: #48484D;                                       /* ikinci satır, açık zeminde >= 7:1 */
  position: relative; z-index: 7;
  height: calc(100svh + var(--devir-giris, 0px) + var(--yol) + var(--devir-cikis, 0px));
}
.devam__sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; background: var(--zemin); --bant: 0px; pointer-events: auto; }
/* devir (G1): bölümün kutusu açılışın son 100 vh'sinin üstüne biner; kutu dokunuş tutmaz (açılışın bağlantıları tıklanabilir kalır), yalnız içindeki sahne tutar (bekleme kapısı sahneyi kapatır) */
.devam { pointer-events: none; }
/* G1: giren sahne, çıkan sahnenin (açılış) üstüne ekran dışından kayarak girer; eş kare olması için kendi başlangıcına kadar görünmez (JS .devam--bekle; devir.js bekleme kapısıyla aynı).
   Görünmezlik saydamlıkla, visibility ile değil: bant bağlantısı klavyeyle (Tab) bölüm başlamadan da odaklanabilir kalır, odak gelince JS bandın açık olduğu beklemeye iner. */
.devam--bekle .devam__sahne { opacity: 0; pointer-events: none; }

/* görünmez başlık (masaüstünde bölüm başlığı yalnız ekran okuyucuya) */
.devam__bas { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.devam__baslik { margin: 0; font-weight: 500; }
.devam__say { margin: 0; }

/* ---------- pano rayı ---------- */
.devam__alan { position: absolute; inset: 0; }
.devam__ray { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; column-gap: 2px; }
.devam__pano { position: relative; min-width: 0; height: 100%; }
.devam .devam__kare { position: absolute; inset: 0; margin: 0; cursor: pointer; border-radius: 0; box-shadow: none; }
.devam__kare--foto { overflow: hidden; background: #E4DFD7; }
.devam__kare--foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.devam__kare--bestekar img { object-position: 50% 18%; }       /* = KARE.konum; B3 .kamera__ilk ile aynı */
/* yalnız bölüme yaklaşınca: katman ve ray kendi katmanına çıkar (JS .devam--akt) */
.devam--akt .devam__ray { will-change: transform; }
.devam--akt .kt__gok, .devam--akt .kt__yazi { will-change: translate; }
/* 05: G2 eş karesi. Kamera sahnesindeki .kamera__ilk kendi katmanında çizilir; aynı katman yolu (will-change) iki karenin yeniden örneklemesini birebir aynı yapar (ölçüldü: yoksa piksellerin %2'si farklı) */
.devam--akt .devam__bestekar { will-change: transform; }

/* Pera: sayının altındaki satır, yazı katmanında (bina arkasında değil, gökte); konumu JS yazar */
.devam__sayi-alt { position: absolute; left: 0; top: 0; margin: 0; z-index: 1; translate: var(--sa-x, 0px) var(--sa-y, 0px); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -.012em; color: var(--kt-renk, #2E3E52); white-space: nowrap; visibility: hidden; }
.devam__sayi-alt[data-hazir="1"] { visibility: visible; }
.devam__sayi-alt .devam__m { display: block; }

/* ---------- alt yazı bandı (masaüstü) ---------- */
.devam__bant { position: absolute; left: 0; right: 0; top: calc(100% - var(--bant)); height: var(--bant-h); z-index: 4; background: var(--zemin); }
/* panoların alt kenarı 72 px (bant boyuyla orantılı) yumuşak biçimde bant zeminine erir; bant kapalıyken yok */
.devam__bant::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--bant) * .5455); pointer-events: none;
  background: linear-gradient(to bottom, rgba(244,241,236,0) 0%, rgba(244,241,236,.03) 10%, rgba(244,241,236,.1) 20%, rgba(244,241,236,.2) 30%, rgba(244,241,236,.33) 40%, rgba(244,241,236,.5) 50%, rgba(244,241,236,.67) 60%, rgba(244,241,236,.8) 70%, rgba(244,241,236,.9) 80%, rgba(244,241,236,.97) 90%, #F4F1EC 100%); }
/* beş parçalı 2 px ilerleme çizgisi bandın üst kenarında */
.devam__cizgi { position: absolute; z-index: 2; left: var(--kenar); right: var(--kenar); top: 0; height: 2px; display: flex; gap: 6px; opacity: 0; }
.devam__cizgi i { flex: 1 1 0; display: block; height: 2px; background: rgba(29, 29, 31, .14); overflow: hidden; }
.devam__cizgi b { display: block; height: 100%; background: #1D1D1F; transform-origin: 0 50%; transform: scaleX(0); }

.devam__bant-ic { position: absolute; inset: 2px 0 0 0; padding: 0 var(--kenar); display: grid; align-items: center; column-gap: 28px;
  grid-template-columns: minmax(150px, calc(33vw - var(--kenar) - 28px)) minmax(0, 1fr) max-content; }
.devam__mono { margin: 0; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: #1D1D1F; white-space: nowrap; }
.devam__sol { display: grid; gap: 5px; align-content: center; }
.devam__sira { display: flex; align-items: baseline; gap: .6ch; color: var(--gri); }
.devam__no { display: grid; }
.devam__no > span { grid-area: 1 / 1; }
.devam__orta { display: grid; align-content: center; min-width: 0; }
.devam__yigin { grid-area: 1 / 1; min-width: 0; }
.devam__ad { margin: 0; font-weight: 500; font-size: calc(36px * var(--olcek, 1)); line-height: 1.1; letter-spacing: -.03em; color: #1D1D1F; white-space: nowrap; }
.devam__k { margin: 6px 0 0; font-weight: 400; font-size: calc(17px * var(--olcek, 1)); line-height: 1.35; letter-spacing: -.012em; color: var(--gri); white-space: nowrap; }
.devam__sag { display: grid; justify-items: end; align-content: center; gap: 10px; min-width: 0; max-width: 29vw; }
.devam__kunye { display: grid; justify-items: end; text-align: right; }
.devam__kunye > span { grid-area: 1 / 1; }
.devam__kunye .devam__mono { color: var(--gri); white-space: normal; }
.devam__git { flex: none; }
/* satır maskesi: Türkçe işaretler (İ noktası, ğ yayı) kesilmez */
.devam__m { display: block; overflow: hidden; overflow: clip; padding: .14em 0 .2em; margin: -.14em 0 -.2em; }
.devam__m > span { display: block; will-change: transform; }
.devam__yigin[aria-hidden="true"] .devam__m > span { will-change: auto; }
@media (min-width: 900px) and (max-width: 1099px) { .devam__bant-ic { grid-template-columns: 140px minmax(0, 1fr) max-content; column-gap: 20px; } .devam__sag { max-width: 24vw; } }

/* alt yazı blokları: masaüstünde yalnız bant kaynağı (görünmez); telefonda ve hareket azaltmada panonun altında */
.devam__alt { display: none; }

/* ---------- telefon (<= 899 px) ve hareket azaltma: parmakla ve klavyeyle kaydırılan şerit ---------- */
@media (max-width: 899px) {
  .devam { height: auto; padding: var(--bolum) 0 calc(var(--bolum) * .8); z-index: auto; }
  .devam__sahne { position: relative; height: auto; overflow: visible; background: transparent; visibility: visible !important; }
  .devam__bas { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 var(--kenar); margin-bottom: 22px; }
  .devam__baslik { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; }
  .devam__say { font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--gri); }
  .devam__alan { position: static; }
  .devam__ray { position: relative; inset: auto; display: flex; gap: 2px; padding: 0 var(--kenar) 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding: 0 var(--kenar); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .devam__ray::-webkit-scrollbar { display: none; }
  .devam__pano { flex: 0 0 86vw; display: flex; flex-direction: column; height: auto; scroll-snap-align: start; }
  .devam .devam__kare { position: relative; inset: auto; flex: none; width: 100%; height: 64vh; height: 64svh; }
  .devam__kare--bestekar img { object-position: 100% 18%; }  /* = KARE.konumTel */
  .devam__bant { display: none; }
  .devam__alt { display: grid; grid-template-rows: auto auto auto auto 1fr; flex: 1; padding: 16px 14px 0 0; }   /* sağ pay: komşu panonun alt yazısıyla yapışmaz */
  .devam__alt-ust { display: contents; }
  .devam__alt-no { order: 0; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #1D1D1F; white-space: nowrap; }
  .devam__alt-ad { order: 1; margin: 8px 0 0; font-size: 24px; line-height: 1.1; font-weight: 500; letter-spacing: -.03em; }
  .devam__alt-k { order: 2; margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--gri); min-height: 2.8em; }   /* iki satır yer: künye ve bağ beş panoda aynı hizada */
  .devam__alt-kunye { order: 3; margin-top: 10px; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gri); }
  .devam__alt-git { order: 4; align-self: end; justify-self: start; min-height: 44px; margin-top: 6px; font-size: 16px; }
  .devam__sayi-alt { font-size: 15px; }
}
/* hareket azaltma: masaüstünde de şerit; pano 56vw (en çok 820 px) x 70svh, katman kayması yok, panolar üst üste binmez */
html.az-hareket .devam { height: auto; padding: var(--bolum) 0 calc(var(--bolum) * .8); z-index: auto; }
html.az-hareket .devam__sahne { position: relative; height: auto; overflow: visible; background: transparent; visibility: visible !important; }
html.az-hareket .devam__bas { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 var(--kenar); margin-bottom: 22px; }
html.az-hareket .devam__baslik { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -.03em; }
html.az-hareket .devam__say { font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--gri); }
html.az-hareket .devam__alan { position: static; }
html.az-hareket .devam__ray { position: relative; inset: auto; display: flex; gap: 2px; padding: 0 var(--kenar) 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding: 0 var(--kenar); scrollbar-width: thin; }
html.az-hareket .devam__pano { flex: 0 0 min(56vw, 820px); display: flex; flex-direction: column; height: auto; scroll-snap-align: start; }
html.az-hareket .devam .devam__kare { position: relative; inset: auto; flex: none; width: 100%; height: 70vh; height: 70svh; cursor: auto; }
html.az-hareket .devam__bant { display: none; }
html.az-hareket .devam__alt { display: grid; grid-template-rows: auto auto auto auto 1fr; flex: 1; padding: 16px 16px 0 0; }
html.az-hareket .devam__alt-ust { display: contents; }
html.az-hareket .devam__alt-no { order: 0; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #1D1D1F; white-space: nowrap; }
html.az-hareket .devam__alt-ad { order: 1; margin: 8px 0 0; font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -.03em; }
html.az-hareket .devam__alt-k { order: 2; margin: 6px 0 0; font-size: 16px; line-height: 1.4; color: var(--gri); }
html.az-hareket .devam__alt-kunye { order: 3; margin-top: 10px; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gri); }
html.az-hareket .devam__alt-git { order: 4; align-self: end; justify-self: start; min-height: 44px; margin-top: 6px; }
html.az-hareket .devam__kare--bestekar img { object-position: 50% 18%; }