/* Ana sayfa (TASARIM-PLANI 2; metinler kaynak/metin/index.md). Sahibi P9.
   Yalnız token değişkenleri; yeni renk yok. Bileşenler (.olcu, .kunye, .rozet, .derinlik, .cip, .onay-halkasi, .logo-duvar,
   .es-yukselti) bilesenler.css'te, uçuşun JS katmanları (.ucus-katman, okuma pusu, pus beyazı, şema plakası, ray çizgisi)
   hareket.css'tedir. Burada yalnız bölüm düzenleri durur.
   Varsayılan düzen durağandır: JS'siz, WebGL'siz ve hareket azaltmada aynı içerik aynı sırayla okunur (5.8). Sabitlenmiş
   düzenler yalnız hareket serbestken açılır: giriş tırmanışı html.js ile, uçuş ucus.js köke data-ucus-etkin koyunca. */

:root { --ust-y: 77px; }                        /* üst çubuk: 76 px + 1 px alt çizgi (site.css .ust-ic) */
@media (max-width: 479px) { :root { --ust-y: 65px; } }

#icerik > section { position: relative; }
.kalkis .tip-ust, .bulut .tip-ust, .ucus .tip-ust, .tek .tip-ust, .alanlar .tip-ust, .portfoy .tip-ust,
.referans .tip-ust, .neden .tip-ust { display: block; margin: 0; color: var(--green-800); }
.tek-bas, .alanlar-bas, .portfoy-bas, .referans-bas, .neden-bas { display: grid; gap: var(--space-4); max-width: 760px; }
.tek-bas .lead, .alanlar-bas .lead, .portfoy-bas .lead, .bilgi-bas .lead { max-width: 60ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; }

/* ============================ 01 · Kalkış (2.3/01) ============================
   Masaüstünde sahne üst çubuğun altında tam taşar, metin sağda sürülmüş tarlanın üzerinde okuma pusunda durur.
   Tırmanış (50svh) yalnız JS ve hareket serbestken: bölüm uzar, iç kısım yapışır; hareket.js metni söndürür ve pus
   beyazını açar (p = 1'de kare pus-gok, 02 ile dikiş yok). Dar ekranda sahne üstte, metin altta kağıt zeminde. */
.kalkis { background: var(--pus-gok); }
.kalkis-yapiskan { position: relative; height: calc(100vh - var(--ust-y)); height: calc(100svh - var(--ust-y)); min-height: 600px; overflow: hidden; isolation: isolate; }
.kalkis-foto { position: absolute; inset: 0; }
.kalkis-foto .derinlik-tuval { height: 100%; }
/* Uzak şerit pusu (1.3: genel pus yok, pus yalnız en uzak şeritte) ve açılışın ilk adımı (üst %40'ta pus 0,85 → taban) */
.kalkis-pus, .kalkis-acilis { position: absolute; inset: 0 0 auto; z-index: 1; pointer-events: none; }
.kalkis-pus { height: 30%; background: linear-gradient(var(--pus-gok), transparent); opacity: .55; }
.kalkis-acilis { height: 40%; background: linear-gradient(var(--pus-gok) 30%, transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .kalkis-acilis { animation: kalkis-acilis var(--sure-giris, 900ms) var(--ease-giris) both; }
}
@keyframes kalkis-acilis { from { opacity: .85; } to { opacity: 0; } }

.kalkis-ic { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-block: 40px 72px; }
.kalkis-metin { position: relative; isolation: isolate; display: grid; gap: var(--space-5); width: min(100%, 47vw, 660px); }
/* Okuma pusu, poster kipi (1.2, 6.9): motorun gölgelendirici perdesiyle AYNI geometri (derinlik-foto.js, okuma bölümü). Perde sağ
   kenara yaslıdır (kutu ve dikey sınır yok): metnin sol kenarının 24 px içinde tam (%90), 360 px solunda sıfır, aradaki düşüş
   iki katlı yumuşak eğridir s(1 - s(w)); dikeyde metnin 36 px içinde tam, 336 px dışında sıfır: sahne kenarı bu eğrinin
   ortasında kalır (kenarda yaklaşık %45–60), kesik kenar ve alt kenar görünmez. Tek maske (yatay × dikey); kart ve bulanıklık yok. Metinle birlikte yükselir ve söner
   (hareket.js metnin dönüşümünü ve opaklığını yazar, motor da aynı opaklığı okur). Motor tuvali görünmeye başlayınca (canvas opacity 1;
   250 ms çapraz geçiş) tuval aynı perdeyi kendi çizer: bu katman aynı sürede, tuvalin easing'ine göre türetilmiş eğriyle söner
   (fotoğrafın görünen payı devir boyunca %8,6–11,5'te kalır); iki pus üst üste binmez, parlama ve sıçrama yok. data-hazir yedek tetiktir. Poster geri gelirse anında geri döner. */
.kalkis-metin {
  --pus-yatay: linear-gradient(90deg, transparent, rgb(0 0 0 / .016) 64px, rgb(0 0 0 / .066) 96px, rgb(0 0 0 / .167) 128px, rgb(0 0 0 / .318) 160px, rgb(0 0 0 / .5) 192px, rgb(0 0 0 / .682) 224px, rgb(0 0 0 / .833) 256px, rgb(0 0 0 / .934) 288px, rgb(0 0 0 / .984) 320px, rgb(0 0 0 / .999) 352px, #000 384px);
  --pus-dikey: linear-gradient(transparent, rgb(0 0 0 / .016) 62px, rgb(0 0 0 / .066) 93px, rgb(0 0 0 / .167) 124px, rgb(0 0 0 / .318) 155px, rgb(0 0 0 / .5) 186px, rgb(0 0 0 / .682) 217px, rgb(0 0 0 / .833) 248px, rgb(0 0 0 / .934) 279px, rgb(0 0 0 / .984) 310px, rgb(0 0 0 / .999) 341px, #000 372px, #000 calc(100% - 372px), rgb(0 0 0 / .999) calc(100% - 341px), rgb(0 0 0 / .984) calc(100% - 310px), rgb(0 0 0 / .934) calc(100% - 279px), rgb(0 0 0 / .833) calc(100% - 248px), rgb(0 0 0 / .682) calc(100% - 217px), rgb(0 0 0 / .5) calc(100% - 186px), rgb(0 0 0 / .318) calc(100% - 155px), rgb(0 0 0 / .167) calc(100% - 124px), rgb(0 0 0 / .066) calc(100% - 93px), rgb(0 0 0 / .016) calc(100% - 62px), transparent);
}
.kalkis-metin::before { content: ""; position: absolute; inset: -336px -100vw -336px -360px; z-index: -1; background: var(--pus-gok); opacity: .9; pointer-events: none;
  -webkit-mask-image: var(--pus-yatay), var(--pus-dikey); mask-image: var(--pus-yatay), var(--pus-dikey);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.kalkis-yapiskan:has(.kalkis-foto canvas[style*="opacity: 1"]) .kalkis-metin::before, .kalkis-yapiskan:has(.kalkis-foto[data-hazir]) .kalkis-metin::before { opacity: 0; transition: opacity 250ms cubic-bezier(.33, .1, .75, .75); }
@media (prefers-reduced-motion: reduce) { .kalkis-yapiskan:has(.kalkis-foto canvas[style*="opacity: 1"]) .kalkis-metin::before, .kalkis-yapiskan:has(.kalkis-foto[data-hazir]) .kalkis-metin::before { transition: none; } }
.kalkis-baslik { font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 72px); line-height: 1.04; font-weight: 500; letter-spacing: -.02em; color: var(--ink); max-width: 17ch; }
.kalkis-lead { max-width: 44ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-secondary); }
.kalkis-dugmeler { margin-top: var(--space-1); }
.kalkis ul.kalkis-kanit { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: var(--space-4) var(--space-8); margin: var(--space-2) 0 0; padding: 0 0 0 7px; list-style: none; }
.kalkis-kanit .olcu-etiket { color: var(--ink-secondary); }
/* Birim (small) rengi --birim (gold-700) sky-50 üzerinde 4,5'e yalnız değiyor; eş yükselti motifi (02) ve okuma pusunun altındaki fotoğraf (01)
   ile 3,9–4,4'e iner. Bu iki yerde birim rengi token karışımıyla koyulaşır (≥ 5:1). */
.kalkis-kanit .olcu-sayi small, .bulut .olcu-sayi small { color: color-mix(in srgb, var(--gold-700) 78%, var(--graphite-900)); }
/* "+" sayının parçasıdır (30+, 1.600+, 40+): sayıyla aynı boyda, aynı renkte ve boşluksuz; yalnız birim (yıl, MW, il) küçük ve renklidir.
   Sayaç (hareket.js) yalnız ilk metin düğümünü (sayı) yazar; "+" ayrı öğe olarak sayıya bitişik durur ve sayımda da görünür kalır. */
.olcu-arti { font: inherit; letter-spacing: inherit; color: inherit; }
.olcu-sayi .olcu-arti + small { margin-left: .18em; }
/* Sayı, "+" ve birim tek satırda kalır (320 px'te "MW" alt satıra düşüyordu): ızgara sütununa sığacak boy (100cqi − birim payı) / 3,4 em */
.bulut-olculer .olcu-sayi, .kalkis-kanit .olcu-sayi { white-space: nowrap; }
.bulut-olculer .olcu-sayi { font-size: min(clamp(40px, 4.4vw, 64px), calc((100cqi - 26px) / 3.4)); }
/* Künye sahnenin sol altında; kaydırma ipucu sağ altta, metin sütununun hizasında */
.kalkis-kunye { max-width: calc(100% - 2 * var(--space-4)); }
.kalkis-ipucu { position: absolute; right: max(var(--space-6), calc((100% - var(--container-max)) / 2)); bottom: var(--space-4); z-index: 2; gap: 8px; min-height: 32px; padding: 0 14px 0 12px; border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink-secondary); box-shadow: var(--shadow-sm); pointer-events: none; }
.kalkis-ipucu i { height: 14px; }
.kalkis-beyaz { position: absolute; inset: 0; z-index: 5; background: var(--pus-gok); opacity: 0; pointer-events: none; }

/* Tırmanış: yalnız masaüstünde, JS varken ve hareket serbestken (hareket azaltmada ve JS'siz ölü kaydırma olmasın) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.hareket-yok) .kalkis { height: calc(150vh - var(--ust-y)); height: calc(150svh - var(--ust-y)); }
  html.js:not(.hareket-yok) .kalkis-yapiskan { position: sticky; top: var(--ust-y); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .kalkis-metin { width: min(100%, 54vw, 620px); }
}

/* Dar ekran: sahne üstte (dikey kırpım), metin altta kağıt zeminde; ilk ekranda H1 ve iki düğme (9.4 P9 kabulü).
   Sahne yüksekliği en çok 56svh; metin bloğuna yer kalacak kadar kısalır. Sabitleme yok. */
@media (max-width: 899px) {
  .kalkis { --kalkis-foto-h: clamp(220px, calc(100svh - var(--ust-y) - 372px), 56svh); background: var(--pus-kagit); }
  .kalkis-yapiskan { height: auto; min-height: 0; overflow: visible; }
  .kalkis-foto { position: relative; }
  .kalkis-foto .derinlik-tuval { height: var(--kalkis-foto-h); }
  .kalkis-pus, .kalkis-acilis, .kalkis-beyaz { bottom: auto; height: var(--kalkis-foto-h); }
  .kalkis-pus { height: calc(var(--kalkis-foto-h) * .3); }
  .kalkis-acilis { height: calc(var(--kalkis-foto-h) * .4); }
  .kalkis-ic { display: block; height: auto; padding-block: 18px 40px; }
  .kalkis-metin { width: auto; gap: 12px; }
  .kalkis-metin::before { display: none; }
  /* Tırmanış yalnız masaüstündedir: metin kaydırmada sönmez (hareket.js'in dar ekran dalı da yazmaz; güvence) */
  .kalkis-metin { opacity: 1 !important; transform: none !important; }
  .kalkis-ust { font-size: 11px; line-height: 15px; letter-spacing: .1em; }
  .kalkis-baslik { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.06; max-width: 16ch; }
  .kalkis-lead { font-size: 15px; line-height: 22px; }
  .kalkis-dugmeler { gap: var(--space-2); margin-top: 2px; }
  .kalkis-dugmeler .bk-btn { padding-inline: var(--space-3); }
  .kalkis ul.kalkis-kanit { margin-top: var(--space-4); }
  .kalkis-ipucu { display: none; }
  /* Künye fotoğrafın sol altında küçük çip olarak kalır (metin bloğunu aşağı itmez) */
  .kalkis .kunye--foto { position: absolute; left: 10px; right: auto; bottom: 10px; display: block; max-width: calc(100% - 20px); margin: 0; padding: 3px 10px 4px 3px; border-radius: 12px; background: var(--surface-card); box-shadow: var(--shadow-sm); font-size: 10px; line-height: 16px; letter-spacing: .05em; }
  .kalkis .kunye--foto .rozet { display: inline-flex; vertical-align: top; min-height: 16px; margin-right: 6px; padding: 0 7px; border-color: transparent; background: var(--pus-gok); font-size: 10px; line-height: 16px; letter-spacing: .06em; }
}
@media (max-width: 359px) { .kalkis-dugmeler .bk-btn { flex: 1 1 100%; } }

/* Künye onay kutusu (CSS-only, JS'siz): yalnız ≤ 599 px'te künye tek satıra kısalır ve dokununca (etiket = onay kutusu) tam metin açılır.
   ≥ 600 px'te kutu hiç yoktur (display: none: sekme durağı da yok). Klavyede kutuya odaklanınca künyede odak halkası görünür. Kutu künye çipinin
   olduğu köşededir: odaklanınca tarayıcı sayfayı kaydırmaz (üstte olsaydı scroll-padding-top nedeniyle uçuş v = 0'a sıçrıyordu). */
.kunye-onay { position: absolute; left: 12px; bottom: 12px; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
@media (min-width: 600px) { .kunye-onay { display: none; } }
.ucus[data-ucus-bitti] .kunye-onay { visibility: hidden; }
@media (max-width: 599px) {
  /* Giriş: rozet ayrı (fotoğrafın sol üstünde), künye metni tek satır çip (sol altta, taşan "…" ile biter, "+" ile açılır). Rozet ve metin
     figürün kendisine göre konumlanır (figcaption konumsuz). */
  .kalkis .kunye--foto { position: static; display: block; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .kalkis .kunye--foto .rozet { position: absolute; top: 12px; left: 12px; z-index: 3; min-height: 24px; margin: 0; padding: 3px 10px; border-color: transparent; background: var(--surface-card); box-shadow: var(--shadow-sm); font-size: 10px; line-height: 16px; letter-spacing: .08em; }
  /* Etiket kutusu = dokunma hedefi: 44 px yüksek (min-height; padding 14 px). Görünen 26 px'lik hap ::before'dur (9 px içeride; yanlarda 6 px
     pay: overflow:hidden gölgeyi ve odak halkasını (5 px) kırpmasın). Hapın ölçüleri ve metnin hapa göre payı (10/32 px, 5 px) eskisiyle aynıdır. */
  .kalkis .kunye-metin { position: absolute; left: 6px; bottom: 3px; z-index: 3; box-sizing: border-box; max-width: calc(100% - 12px); min-height: 44px; padding: 14px 38px 14px 16px; overflow: hidden; font-size: 10px; line-height: 16px; letter-spacing: .05em; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .kalkis .kunye-metin::before { content: ""; position: absolute; inset: 9px 6px; z-index: -1; border-radius: 14px; background: var(--surface-card); box-shadow: var(--shadow-sm); }
  .kalkis .kunye-metin::after { content: "+"; position: absolute; right: 13px; top: 14px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--pus-gok); color: var(--ink); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0; }
  .kalkis .kunye-onay:checked + .kunye-metin { overflow: visible; white-space: normal; text-overflow: clip; }
  .kalkis .kunye-onay:checked + .kunye-metin::after { content: "\2212"; }
  .kalkis .kunye-onay:focus-visible + .kunye-metin::before { box-shadow: var(--focus-ring); }
}

/* ============================ 02 · Bulutun içinde (2.3/02) ============================ */
.bulut { isolation: isolate; background: var(--pus-gok); padding-block: clamp(72px, 9vw, 128px) clamp(80px, 10vw, 136px); }
.bulut::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/ikiz/oz-tuketim-ges-havadan-kagit.svg") 50% 50% / cover no-repeat; opacity: .08; pointer-events: none; }
/* 02 → 03 dikişi: uçuş motor kipinde v = 0'da kâğıt tonunda beyazla açılır (pus-kagit), poster kipinde ve JS'siz düzende pus-gok ile. 02'nin
   dip 220 px'i motor gerçekten çizmeye başlayınca (ucus.js data-ucus-kip="motor" ve yedek poster kalkınca) 0,6 sn'de kâğıda geçer: her kipte dikişte
   ΔRGB ≤ 2 (bölüm sınırında çizgi yok). */
.bulut::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 220px; background: linear-gradient(transparent, var(--pus-kagit)); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease-etiket); }
.bulut:has(+ .ucus[data-ucus-kip="motor"]):not(:has(+ .ucus .ucus-foto.yedek))::after { opacity: 1; }   /* motor çiziyor ve DOM yedek posteri (pus-gok beyazlı) söndü */
/* Ölü kaydırma yok: tırmanış (01) bitince kare pus-gok ile dolar; 02 tırmanışın son 40svh'ine çekilir ve yumuşak kenarla yükselir, ilk satırı beyaz
   0,6 → 1'e giderken girer (eskiden y ≈ 450–700 arası ~300 px bomboş, açık mavi ekran kaydırılıyordu). Yalnız tırmanış varken (masaüstü, JS, hareket serbest).
   Yumuşak kenar (02'nin üstünde 220 px degrade) açılış karesinin altını örtmesin diye kaydırma başlayınca (0 → 240 px) belirir; kaydırmaya bağlı
   animasyon yoksa kenar hiç çizilmez (02 sert kenarla yükselir, açılış karesi bozulmaz). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.hareket-yok) .kalkis + .bulut { margin-top: -40svh; padding-top: clamp(56px, 6vw, 88px); }
  @supports (animation-timeline: scroll()) {
    html.js:not(.hareket-yok) .kalkis + .bulut .bulut-ic::before { content: ""; position: absolute; inset: auto 0 100%; height: 220px; background: linear-gradient(transparent, var(--pus-gok)); opacity: 0; pointer-events: none; animation: bulut-kenar linear both; animation-timeline: scroll(root); animation-range: 0 240px; }
  }
}
@keyframes bulut-kenar { to { opacity: 1; } }
.bulut-ic { display: grid; gap: var(--space-6); }
.bulut-metin { max-width: 30ch; font-family: var(--font-display); font-size: clamp(26px, 2.9vw, 42px); line-height: 1.24; font-weight: 500; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.bulut-olculer { margin-top: clamp(32px, 5vw, 72px); row-gap: clamp(40px, 5vw, 64px); }
.bulut-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); margin-top: clamp(24px, 4vw, 48px); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.bulut-dipnot { max-width: 70ch; }
@media (max-width: 899px) {
  .bulut-metin { font-size: clamp(22px, 6vw, 28px); line-height: 1.3; }
  .bulut-olculer .olcu-etiket { font-size: 14px; line-height: 20px; }
}

/* ============================ 03 · Uçuş (2.3/03, 2.4) ============================
   Ortak tipografi, sonra iki düzen: durağan (varsayılan; JS'siz, WebGL'siz, hareket azaltma: altı halka alt alta kart,
   posterli, ray içindekiler listesi) ve etkin (.ucus[data-ucus-etkin]: yapışkan sahne, sol ray, %32 metin sütunu). */
.ucus { isolation: isolate; background: var(--pus-gok); }
.ucus-h2 { max-width: 22ch; }
.halka-baslik { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.halka-no { display: inline-block; margin-right: .2em; color: var(--accent); font-variant-numeric: tabular-nums; }
.halka-alt { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ink); }
.halka-govde { max-width: 62ch; font-size: 16px; line-height: 26px; color: var(--ink-secondary); }
.halka-dipnot { max-width: 62ch; }
.halka-cipler, .halka-kalemler { gap: var(--space-2); }
.halka-onaylar { gap: var(--space-3) var(--space-6); }
.halka-damga { align-self: start; }
.halka-isler { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.halka-isler li { position: relative; padding-left: 22px; font-weight: 500; font-size: 15px; line-height: 22px; color: var(--ink); }
.halka-isler li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--viz-altyapi); }
.halka-dugmeler { margin-top: var(--space-2); }

/* Şemalar (tek hat, bağlantı): satır içi SVG; dolgu yok, çizgiler token renginde, akış güneş sarısı. Desen dolguları
   (kamulaştırma koridoru) öznitelikte kalır. Etiket boyutu kutuya göre ayrıca verilir. */
.sema { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--sky-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sema .sema-ince { stroke-width: 1.1; }
.sema .sema-bara { stroke-width: 3.2; }
.sema .sema-sinir { stroke: var(--graphite-400); stroke-width: 1.2; stroke-dasharray: 5 5; }
.sema .sema-akis, .sema .sema-ok { stroke: var(--gold-500); stroke-width: 2.6; }
.sema .sema-zemin { stroke: var(--graphite-300); stroke-width: 1.4; }
.sema .sema-koridor { stroke: none; }
.sema .sema-kule { stroke-width: 1.4; }
.sema .sema-panel { stroke: var(--sky-500); stroke-width: 2.4; }
.sema .sema-etiket text { fill: var(--ink); stroke: none; font-family: var(--font-sans); font-size: 17px; font-weight: 600; }
.sema--tek-hat { max-width: 560px; }
.sema--tek-hat .sema-etiket text { font-size: 19px; }
.sema-kagit { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 3 / 2; padding: clamp(16px, 3vw, 40px); overflow: hidden; border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); background: var(--ikiz-kagit); }
.sema-kagit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/ikiz/es-yukselti-motif.svg") 0 0 / 480px 480px repeat; opacity: .07; }
/* Dar ekranda çizim küçülür: etiketler viewBox biriminde büyütülür (ekranda ≥ 11 px kalsın) */
@media (max-width: 600px) {
  .halka-gorsel--sema .sema-kagit { padding: 10px; }
  .halka-gorsel--sema .sema-etiket text { font-size: 24px; }
  .sema--tek-hat .sema-etiket text { font-size: 22px; }
}

/* SVG parsel katmanı (halka 01–02 posteri): P3'ün ges-arazi-parsel.svg biçimiyle aynı çizgi dili */
.parsel-svg { display: block; width: 100%; height: 100%; }
.parsel-svg polygon, .parsel-svg polyline, .parsel-svg path, .parsel-svg rect { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.parsel-svg .parsel-elenen { stroke: var(--ikiz-elenen); stroke-width: 1.5; }
.parsel-svg .parsel-secili { stroke: var(--ikiz-secili); stroke-width: 2.6; }
.parsel-svg .parsel-secili:not([fill]) { fill: color-mix(in srgb, var(--ikiz-secili) 16%, transparent); }
.parsel-svg .parsel-guzergah { fill: none; stroke: var(--ikiz-guzergah); stroke-width: 1.8; stroke-dasharray: 9 7; }
.parsel-svg .parsel-guzergah-elenen { fill: none; stroke: var(--ikiz-elenen); stroke-width: 1.5; stroke-dasharray: 6 8; }
.parsel-svg .parsel-kose { fill: none; stroke: var(--ikiz-secili); stroke-width: 3; }
.parsel-svg .parsel-tm { fill: var(--ikiz-kagit); stroke: var(--ikiz-guzergah); stroke-width: 1.8; }
.parsel-svg .parsel-tm-arti { stroke-dasharray: none; }

/* Poster figürleri (durağan düzende görünür; etkin düzende gizli) */
.halka-gorsel { min-width: 0; }
.halka-gorsel .derinlik-tuval { background: var(--pus-kagit); }
.halka-katman { overflow: hidden; }
.halka-ikiz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.halka-katman-rozet { position: absolute; top: 12px; right: 12px; }
.halka-cift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.halka-gorsel--dikey { justify-self: center; width: min(100%, 420px); }
.halka-kunye { align-items: baseline; }
.halka-kunye-ek { flex: 1 1 100%; font-size: 13px; line-height: 19px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--kunye-metin); }
.halka-kunye .katman-dugme { margin-top: var(--space-1); letter-spacing: 0; text-transform: none; }

/* ---------- Uçuş: durağan düzen ---------- */
.ucus:not([data-ucus-etkin]) { padding-block: clamp(72px, 9vw, 128px); }
.ucus:not([data-ucus-etkin]) .ucus-sahne { display: none; }
/* JS, WebGL ve hareket serbestken uçuş etkinleşecek (etkin düzende poster kareleri ve plaka zaten gizli): durağan düzenin
   fotoğrafları hiç indirilmesin. Tembel yüklenen bu kareler, uçuş modülü gelmeden sayfa yüklenirken ya da yaklaşırken iniyor
   ve sonra gizleniyordu (~210 KB). JS'siz, WebGL'siz ve hareket azaltmada gizlenmez: posterli düzen tam okunur. */
html.js:not(.hareket-yok):not(.gl-yok) .ucus:not([data-ucus-etkin]) :is(.ucus-poster, .halka-gorsel--plaka) { display: none; }
.ucus:not([data-ucus-etkin]) .ucus-metinler { display: grid; gap: var(--space-8); }
.ucus:not([data-ucus-etkin]) .ucus-bas { display: grid; gap: var(--space-4); }
/* Halka rayı içindekiler listesine dönüşür */
.ucus:not([data-ucus-etkin]) .halka-ray ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ucus:not([data-ucus-etkin]) .halka-ray a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; transition: border-color .2s ease-out, color .2s ease-out; }
.ucus:not([data-ucus-etkin]) .halka-ray a:hover { border-color: var(--action); color: var(--link); }
.ucus:not([data-ucus-etkin]) .halka-ray-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-50); color: var(--green-800); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ucus:not([data-ucus-etkin]) .ucus-sayac, .ucus:not([data-ucus-etkin]) .halka-ray-tamam { display: none; }
.ucus:not([data-ucus-etkin]) .ucus-atla { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(-1 * var(--space-4)); font-size: 14px; font-weight: 600; color: var(--link); text-underline-offset: 4px; }
.ucus:not([data-ucus-etkin]) .ucus-halkalar { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.ucus:not([data-ucus-etkin]) .halka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3.4vw, 48px); border: 1px solid var(--line-subtle); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--ust-y) + 16px); }
.ucus:not([data-ucus-etkin]) .halka-metin { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
@media (max-width: 899px) {
  .ucus:not([data-ucus-etkin]) .halka { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: 20px 16px 24px; border-radius: var(--radius-lg); }
  .ucus:not([data-ucus-etkin]) .halka-ray a { padding-right: 12px; font-size: 13px; }
  .halka-baslik { font-size: 24px; }
  .halka-govde { font-size: 15px; line-height: 24px; }
}
@media (max-width: 479px) { .ucus:not([data-ucus-etkin]) .halka-ray ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ucus:not([data-ucus-etkin]) .halka-ray a { width: 100%; } }

/* ---------- Uçuş: etkin düzen (ucus.js) ----------
   Bölüm 100svh + 530vh (dar ekranda 420vh). Sahne yapışkan; metin katmanı bölümü kaplayan tek hücreli ızgaradır ve her
   çocuğu (başlık, ray, halkalar, "Uçuşu atlayın") kendi başına yapışır. Etkin halka metni .etkin sınıfıyla görünür;
   diğerleri saydam kalır ama klavyeyle odaklanabilir (ucus.js odaklanan halkaya gider). */
.ucus[data-ucus-etkin] {
  --ucus-sol: calc(24px + 24px + clamp(32px, 3vw, 56px));            /* ray (24 + 24 px) ve metin sütunu arası */
  --ucus-gen: clamp(340px, 32vw, 520px);
  --ucus-h2: clamp(24px, 2.2vw, 32px);
  --ucus-bas-ust: calc(var(--ust-y) + 28px);
  --ucus-bas-yuk: calc(16px + 10px + 3 * 1.15 * var(--ucus-h2) + 36px);  /* üst satır + boşluk + en çok 3 satır H2 + pay */
  position: relative; height: calc(100vh + 530vh); height: calc(100svh + 530vh); padding: 0;
}
.ucus[data-ucus-etkin] .ucus-sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ucus[data-ucus-etkin] .ucus-tuval { position: absolute; inset: 0; }
.ucus[data-ucus-etkin] .ucus-tuval .derinlik-tuval { height: 100%; aspect-ratio: auto; border-radius: 0; }
/* Sahnenin üst kenarındaki uzak pus: kenarda saydam başlar (48 px'te tam) ki 02 → 03 dikişinde sahnenin ilk satırı motorun kâğıt beyazıyla aynı olsun */
.ucus[data-ucus-etkin] .ucus-pus { position: absolute; inset: 0 0 auto; height: calc(var(--ust-y) + 12%); background: linear-gradient(transparent, var(--pus-gok) 48px, transparent); opacity: .5; pointer-events: none; }
.ucus[data-ucus-etkin] .ucus-etiketler { position: absolute; inset: 0; pointer-events: none; }
.ucus[data-ucus-etkin] .ucus-rozet { position: absolute; top: calc(var(--ust-y) + 16px); right: 24px; z-index: 3; margin: 0; }
.ucus[data-ucus-etkin] .ucus-rozet .rozet { border-color: transparent; box-shadow: var(--shadow-sm); }
.ucus[data-ucus-etkin] .ucus-kunye { max-width: min(calc(100% - 2 * var(--space-4)), 620px); }
.ucus[data-ucus-etkin] .ucus-kunye .kunye-ek { text-transform: none; letter-spacing: .02em; }

.ucus[data-ucus-etkin] .ucus-metinler { position: absolute; inset: 0; display: grid; grid-template: 100% / 100%; width: auto; max-width: none; margin: 0; padding: 0; pointer-events: none; }
.ucus[data-ucus-etkin] .ucus-metinler > * { grid-area: 1 / 1; position: sticky; top: 0; height: 100vh; height: 100svh; margin: 0; }
/* Bölüm başlığı: halka 01'de sol üstte (okuma pusu onu da kapsar), sonra söner */
.ucus[data-ucus-etkin] .ucus-bas { box-sizing: border-box; display: grid; align-content: start; gap: 10px; width: calc(var(--ucus-sol) + var(--ucus-gen)); padding: var(--ucus-bas-ust) 0 0 var(--ucus-sol); transition: opacity var(--sure-etiket) var(--ease-etiket), visibility var(--sure-etiket); }
.ucus[data-ucus-etkin] .ucus-bas .h2 { max-width: none; font-size: var(--ucus-h2); line-height: 1.15; }
.ucus[data-ucus-etkin]:not([data-ucus-halka="1"]) .ucus-bas { opacity: 0; visibility: hidden; }
/* Halka rayı: solda dikey, numaralı; ad ekran okuyucuya kalır. Sayaç masaüstünde görsel olarak gizli (ray aynı bilgiyi verir). */
.ucus[data-ucus-etkin] .halka-ray { --ray-x: 11px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); width: max-content; padding: var(--ust-y) 0 0 24px; pointer-events: none; }
.ucus[data-ucus-etkin] .halka-ray ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.ucus[data-ucus-etkin] .halka-ray a { display: flex; align-items: center; min-height: 44px; color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-full); }
.ucus[data-ucus-etkin] .halka-ray-no { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface-card); font-size: 11px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--sure-etiket) var(--ease-etiket), border-color var(--sure-etiket) var(--ease-etiket), color var(--sure-etiket) var(--ease-etiket), transform var(--sure-etiket) var(--ease-etiket); }
.ucus[data-ucus-etkin] .halka-ray a:hover .halka-ray-no { border-color: var(--action); color: var(--link); }
.ucus[data-ucus-etkin] .halka-ray a.gecti .halka-ray-no { border-color: var(--accent); color: var(--green-800); }
.ucus[data-ucus-etkin] .halka-ray a[aria-current="step"] .halka-ray-no { border-color: var(--action); background: var(--action); color: var(--ink-on-action); transform: scale(1.12); }
.ucus[data-ucus-etkin] .halka-ray a:focus-visible { outline: none; }
.ucus[data-ucus-etkin] .halka-ray a:focus-visible .halka-ray-no { box-shadow: var(--focus-ring); }
.ucus[data-ucus-etkin] .halka-ray-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ucus[data-ucus-etkin] .ucus-sayac { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 6/6: ray tek kesintisiz hatta döner, "Tek elden" rayın boyunca yazılır */
.ucus[data-ucus-etkin] .halka-ray-tamam { margin: 0; padding-left: 4px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--energy-ink); }
/* "Uçuşu atlayın": sağ altta her zaman görünür, odakta belirginleşir (5.6) */
.ucus[data-ucus-etkin] .ucus-atla { position: sticky; top: auto; bottom: 24px; z-index: 4; align-self: end; justify-self: end; display: inline-flex; align-items: center; height: auto; min-height: 44px; margin: 0 24px 24px 0; padding: 0 18px; border-radius: var(--radius-full); background: var(--surface-card); box-shadow: var(--shadow-sm); color: var(--link); font-size: 14px; line-height: 20px; font-weight: 600; text-underline-offset: 4px; pointer-events: auto; }
.ucus[data-ucus-etkin] .ucus-atla:hover { color: var(--link-hover); }
.ucus[data-ucus-etkin] .ucus-atla:focus-visible { outline: none; background: var(--action); color: var(--ink-on-action); box-shadow: var(--focus-ring); }
/* Halkalar: aynı yapışkan kutuda üst üste; etkin olan görünür */
.ucus[data-ucus-etkin] .ucus-halkalar { padding: 0; list-style: none; pointer-events: none; }
.ucus[data-ucus-etkin] .halka { position: absolute; inset: 0; display: block; }
.ucus[data-ucus-etkin] .ucus-poster, .ucus[data-ucus-etkin] .halka-gorsel--plaka { display: none; }
.ucus[data-ucus-etkin] .halka-metin { position: absolute; left: var(--ucus-sol); top: calc(var(--ust-y) + (100svh - var(--ust-y)) / 2); display: grid; gap: 14px; width: var(--ucus-gen); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity var(--sure-etiket) var(--ease-etiket); }
.ucus[data-ucus-etkin] .halka-metin.etkin { opacity: 1; pointer-events: auto; }
/* Halka 01 bölüm başlığının altında başlar (çakışmasın) */
.ucus[data-ucus-etkin] .halka[data-halka="1"] .halka-metin { top: calc(var(--ucus-bas-ust) + var(--ucus-bas-yuk)); transform: none; }
.ucus[data-ucus-etkin] .halka-baslik { font-size: clamp(22px, 2vw, 30px); }
.ucus[data-ucus-etkin] .halka-govde { font-size: 15px; line-height: 23px; }
.ucus[data-ucus-etkin] .halka-onaylar { gap: 10px 18px; }
.ucus[data-ucus-etkin] .sema--tek-hat { max-width: 100%; }
/* Halka 05 şema plakası (ucus.js halka 05 posterinin SVG'sini sahneye kopyalar): büyük ölçekte etiketler küçülür */
.ucus-plaka .sema-etiket text { font-size: 14px; }
/* Pencere evrelerinde (≥ 900 px, yatay) rozet ve künye pencereyi izler: halka 01 pafta penceresi (arazi, v 0–52; pencere tam kadraja açılırken
   eski yerlerine kayar) ve halka 06 alpedo penceresi (sağda 44vw × 76vh). ucus.js geometriyi (--pencere-x/y/w/h, 0–1) ve ağırlığı
   (--ucus-pencere-o, 0–1; pencere evresi dışında '0') .ucus-ek sarmalayıcısına yazar; rozet ve künye kalıtımla okur. --g (0 ya da 1) ağırlık
   sıfırken bayat geometriyi etkisiz kılar: etkin pencere = geometri × --g, tam kadraj = (0, 0, 1, 1). Rozet pencerenin sağ üst köşesinde içeride
   (12 px; pencere üst çubuğa değince varsayılan yerinde durur), künye pencerenin 12 px altında ve sol kenarı pencereyle aynı; pencere tam kadraja
   açılınca künye sahnenin sol altındaki varsayılan yerine iner (translate, kendi yüksekliğini bilmeden). Yalnız motor kipinde: poster kipinde
   arazi tam kadrajdadır (pencere yok), alpedo CSS'teki son penceredir (statik, aşağıda). */
.ucus-ek { display: contents; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .ucus[data-ucus-etkin] .ucus-ek { display: block; position: absolute; inset: 0; pointer-events: none; }
  .ucus[data-ucus-etkin] .ucus-ek > .ucus-rozet, .ucus[data-ucus-etkin] .ucus-ek > .ucus-kunye { pointer-events: auto; }
  .ucus[data-ucus-etkin][data-ucus-kip="motor"] .ucus-ek {
    --g: min(1, calc(var(--ucus-pencere-o, 0) * 1000));
    --pen-ust: calc(var(--pencere-y, .12) * var(--g));
    --pen-alt: calc(1 - var(--g) * (1 - var(--pencere-y, .12) - var(--pencere-h, .76)));
    --pen-sol: calc(var(--pencere-x, .52) * var(--g));
    --pen-sag: calc((1 - var(--pencere-x, .52) - var(--pencere-w, .44)) * var(--g));
  }
  .ucus[data-ucus-etkin][data-ucus-kip="motor"] .ucus-ek .ucus-rozet {
    top: max(calc(var(--ust-y) + 16px), calc(var(--pen-ust) * 100% + 12px));
    right: max(24px, calc(var(--pen-sag) * 100% + 12px));
  }
  .ucus[data-ucus-etkin][data-ucus-kip="motor"] .ucus-ek .ucus-kunye {
    left: max(16px, calc(var(--pen-sol) * 100%));
    right: auto; bottom: auto;
    top: calc(var(--pen-alt) * 100% + 12px);
    translate: 0 calc(-1 * max(0px, calc(var(--pen-alt) * 100svh + 28px + 100% - 100svh)));
  }
  /* Künye "Uçuşu atlayın"a (sağ alt) değmesin: alpedoda pencerenin altında genişlik 44% − 176 px */
  .ucus[data-ucus-etkin][data-ucus-sahne="alpedo"] .ucus-ek .ucus-kunye { max-width: calc(44% - 176px); }
  /* Poster kipi, halka 06: alpedo CSS'teki son pencerede (hareket.css .ucus-foto), künye ve rozet aynı geometride */
  .ucus[data-ucus-etkin][data-ucus-kip="poster"][data-ucus-sahne="alpedo"] .ucus-ek .ucus-kunye { left: 52%; right: auto; top: calc(88% + 12px); bottom: auto; }
  .ucus[data-ucus-etkin][data-ucus-kip="poster"][data-ucus-sahne="alpedo"] .ucus-ek .ucus-rozet { top: calc(12% + 12px); right: calc(4% + 12px); }
}

@media (max-width: 899px) {
  .ucus[data-ucus-etkin] {
    /* Kağıt panel: halka metinlerinin doğal yüksekliği (--m1…--m6, px) + 52 px (üst 40: ray şeridi, alt 12). Yükseklikler genişliğe göre
       satır kırılması basamaklarıyla ölçülmüştür (aşağıdaki tablo); halka 03 tek hat şemasıdır, genişlikle doğrusal büyür. Panel kutusu en uzun
       halkaya göre sabittir (390 px'te 04: 350 px); kısa halkalarda kâğıt kutunun içinde aşağı iner (--ucus-dy-N, en çok 40 px = şeridin
       sahneye taşan payı). Tuval boyutu hiçbir halkada değişmez (fotoğraf zıplamaz, DOM katmanları aynı kutuyu bilir) ve tuval altı = en uzun
       halkanın kâğıt üstü + 40 px: halka 04'te kâğıt bu 40 px'e biner, öbürlerinde tuval altına oturur. Metin kutusu hiçbir halkada tuvale binmez
       (ucus.js okuma pusu metin kutusu ile tuvalin kesişimidir; mobilde pus çıkmaz). */
    --m1: 381px; --m2: 282px; --m3: calc(.275 * 100vw + 100px); --m4: 386px; --m5: 289px; --m6: 273px;
    --ucus-sarkma: 40px;
    --ucus-panel-h: calc(max(var(--m1), var(--m2), var(--m3), var(--m4), var(--m5), var(--m6)) + 52px);
    --ucus-panel-ust: calc(100svh - var(--ucus-panel-h));
    --ucus-sahne-h: max(170px, calc(100svh - var(--ucus-panel-h) + var(--ucus-sarkma)));   /* üst sınır yok: tuval altı her zaman en uzun halkanın kâğıt üstü + 40 px (künye ve kâğıt buna bağlı) */
    --ucus-dy-1: min(var(--ucus-sarkma), calc(var(--ucus-panel-h) - 52px - var(--m1)));
    --ucus-dy-2: min(var(--ucus-sarkma), calc(var(--ucus-panel-h) - 52px - var(--m2)));
    --ucus-dy-3: min(var(--ucus-sarkma), calc(var(--ucus-panel-h) - 52px - var(--m3)));
    --ucus-dy-4: min(var(--ucus-sarkma), calc(var(--ucus-panel-h) - 52px - var(--m4)));
    --ucus-dy-5: min(var(--ucus-sarkma), calc(var(--ucus-panel-h) - 52px - var(--m5)));
    --ucus-dy-6: min(var(--ucus-sarkma), calc(var(--ucus-panel-h) - 52px - var(--m6)));
    --ucus-dy: var(--ucus-dy-1);
    height: calc(100vh + 420vh); height: calc(100svh + 420vh);
    overflow: clip;   /* kısa halkada kâğıt kutusunun alt payı (translate) bölümden sonraki bölüme taşmaz */
  }
  .ucus[data-ucus-halka="2"] { --ucus-dy: var(--ucus-dy-2); }
  .ucus[data-ucus-halka="3"] { --ucus-dy: var(--ucus-dy-3); }
  .ucus[data-ucus-halka="4"] { --ucus-dy: var(--ucus-dy-4); }
  .ucus[data-ucus-halka="5"] { --ucus-dy: var(--ucus-dy-5); }
  .ucus[data-ucus-halka="6"] { --ucus-dy: var(--ucus-dy-6); }
  /* Metin yüksekliği tablosu (px, ölçüm: halka metinlerinin çocuklarının birleşik kutusu; basamak = o genişlikten itibaren). Yeni metin ya da yazı
     tipi gelirse yeniden ölçülür. */
  @media (min-width: 320px) { .ucus[data-ucus-etkin] { --m1: 362px; --m4: 339px; --m5: 270px; } }
  @media (min-width: 330px) { .ucus[data-ucus-etkin] { --m1: 328px; --m2: 263px; } }
  @media (min-width: 350px) { .ucus[data-ucus-etkin] { --m1: 289px; --m4: 325px; --m6: 254px; } }
  @media (min-width: 370px) { .ucus[data-ucus-etkin] { --m2: 248px; --m4: 297px; --m5: 251px; } }
  @media (min-width: 380px) { .ucus[data-ucus-etkin] { --m1: 255px; --m6: 202px; } }
  @media (min-width: 400px) { .ucus[data-ucus-etkin] { --m5: 229px; } }
  @media (min-width: 410px) { .ucus[data-ucus-etkin] { --m4: 278px; } }
  @media (min-width: 420px) { .ucus[data-ucus-etkin] { --m1: 236px; } }
  @media (min-width: 430px) { .ucus[data-ucus-etkin] { --m2: 229px; } }
  @media (min-width: 450px) { .ucus[data-ucus-etkin] { --m2: 195px; } }
  @media (min-width: 470px) { .ucus[data-ucus-etkin] { --m4: 250px; --m5: 210px; } }
  @media (min-width: 480px) { .ucus[data-ucus-etkin] { --m6: 183px; } }
  @media (min-width: 490px) { .ucus[data-ucus-etkin] { --m5: 188px; } }
  @media (min-width: 510px) { .ucus[data-ucus-etkin] { --m1: 217px; } }
  @media (min-width: 600px) { .ucus[data-ucus-etkin] { --m4: 222px; } }
  @media (min-width: 730px) { .ucus[data-ucus-etkin] { --m1: 183px; } }
  /* Sahne ve kağıt panel aynı anda yapışıp aynı anda bırakır: panelin doğal yeri tuval altından 40 px yukarıdır (margin-top), sahne de
     kalan payı taşır (margin-bottom). Böylece bölüme girerken ve çıkarken panel sahnenin üstüne fazladan binmez. */
  .ucus[data-ucus-etkin] .ucus-sahne { height: var(--ucus-sahne-h); margin-bottom: calc(100svh - var(--ucus-sahne-h)); }
  .ucus[data-ucus-etkin] .ucus-rozet { top: calc(var(--ust-y) + 8px); right: 12px; }
  .ucus[data-ucus-etkin] .ucus-rozet .rozet { min-height: 20px; padding: 2px 8px; font-size: 10px; letter-spacing: .08em; }
  .ucus[data-ucus-etkin] .ucus-metinler > * { top: var(--ucus-panel-ust); height: var(--ucus-panel-h); margin-top: var(--ucus-panel-ust); }
  /* Kâğıt (ray, halka metinleri, "Uçuşu atlayın") halkaya göre aşağı iner; künye kâğıt üstünü izler. Yalnız translate: yerleşim değişmez. */
  .ucus[data-ucus-etkin] .halka-ray, .ucus[data-ucus-etkin] .ucus-halkalar, .ucus[data-ucus-etkin] .ucus-atla { translate: 0 var(--ucus-dy); transition: translate var(--sure-etiket) var(--ease-etiket); }
  .ucus[data-ucus-etkin] .ucus-sahne .ucus-kunye { translate: 0 calc(var(--ucus-dy) - var(--ucus-sarkma)); transition: translate var(--sure-etiket) var(--ease-etiket), opacity var(--sure-etiket) var(--ease-etiket); }
  /* Başlık halka 01'de sahnenin üstünde, okuma pusunda; kaydırma v ≈ 10'u geçince (ray --ucus-p ≥ 0,02) çekilir: sahne parsellere kalır
     (H2 sahnenin büyük bölümünü kaplıyordu). Bölüm başlığı belgede ve ekran okuyucuda durur; ray sayacı ve halka metni bağlamı taşır. */
  .ucus[data-ucus-etkin] .ucus-bas { top: 0; height: var(--ucus-sahne-h); width: auto; margin: 0 0 calc(100svh - var(--ucus-sahne-h)); padding: calc(var(--ust-y) + 40px) 16px 0; gap: 6px; }
  .ucus[data-ucus-etkin] .ucus-bas .h2 { font-size: 22px; line-height: 1.2; max-width: 20ch; }
  .ucus[data-ucus-etkin] .ucus-metinler:has(> .halka-ray[style*="--ucus-p"]:not([style*="--ucus-p: 0.00"], [style*="--ucus-p: 0.01"])) > .ucus-bas { opacity: 0; visibility: hidden; }
  /* Ray: kağıt panelin üstünde ince ilerleme çubuğu, "Halka 02 / 06" ve 6/6'da "Tek elden"; sağ üstte "Uçuşu atlayın" (şerit 36 px) */
  .ucus[data-ucus-etkin] .halka-ray { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 12px; width: auto; padding: 20px 16px 0; background: var(--pus-kagit); box-shadow: 0 -1px 0 var(--line-subtle); }
  .ucus[data-ucus-etkin] .halka-ray::before, .ucus[data-ucus-etkin] .halka-ray::after { content: ""; position: absolute; left: 16px; right: 156px; top: 10px; height: 3px; border-radius: 2px; }
  .ucus[data-ucus-etkin] .halka-ray::before { background: var(--line); }
  .ucus[data-ucus-etkin] .halka-ray::after { background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--ucus-p, 0)); }
  .ucus[data-ucus-etkin] .halka-ray[data-tamam]::after { background: var(--energy); transform: none; }
  .ucus[data-ucus-etkin] .halka-ray ol { display: none; }
  .ucus[data-ucus-etkin] .ucus-sayac { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
  .ucus[data-ucus-etkin] .halka-ray-tamam { padding: 0; writing-mode: horizontal-tb; transform: none; }
  .ucus[data-ucus-etkin] .halka-metin, .ucus[data-ucus-etkin] .halka[data-halka="1"] .halka-metin { left: 16px; right: 16px; top: 40px; bottom: calc(12px + var(--ucus-dy-1)); width: auto; gap: 5px; align-content: center; align-content: safe center; transform: none; }
  /* Metin kutusunun alt payı halkanın kendi kâğıt inişidir (kutu kâğıtla birlikte iner; metin kâğıdın içinde 40 üst, 12 alt payla ortalanır) */
  .ucus[data-ucus-etkin] .halka[data-halka="2"] .halka-metin { bottom: calc(12px + var(--ucus-dy-2)); }
  .ucus[data-ucus-etkin] .halka[data-halka="3"] .halka-metin { bottom: calc(12px + var(--ucus-dy-3)); }
  .ucus[data-ucus-etkin] .halka[data-halka="4"] .halka-metin { bottom: calc(12px + var(--ucus-dy-4)); }
  .ucus[data-ucus-etkin] .halka[data-halka="5"] .halka-metin { bottom: calc(12px + var(--ucus-dy-5)); }
  .ucus[data-ucus-etkin] .halka[data-halka="6"] .halka-metin { bottom: calc(12px + var(--ucus-dy-6)); }
  .ucus[data-ucus-etkin] .halka-baslik { font-size: 20px; }
  .ucus[data-ucus-etkin] .halka-no { color: var(--green-700); }   /* 20 px yarı kalın: büyük metin sayılmaz, kağıtta ≥ 4,5 */
  .ucus[data-ucus-etkin] .halka-alt { font-size: 14px; line-height: 20px; }
  .ucus[data-ucus-etkin] .halka-govde { font-size: 13px; line-height: 19px; }
  .ucus[data-ucus-etkin] .halka-dipnot { font-size: 11px; line-height: 15px; }
  .ucus[data-ucus-etkin] .halka-metin .cip { min-height: 26px; padding: 2px 10px 2px 8px; font-size: 12px; line-height: 18px; }
  /* Halka 04'ün yedi kalemi: sıkı çipler (24 px, 4 px boşluk); en uzun halka olduğu için panel yüksekliğini bu belirler */
  .ucus[data-ucus-etkin] .halka-kalemler { gap: 4px 6px; }
  .ucus[data-ucus-etkin] .halka-kalemler .cip { min-height: 24px; padding: 1px 9px 1px 7px; font-size: 11.5px; line-height: 17px; gap: 6px; }
  .ucus[data-ucus-etkin] .halka-onaylar { gap: 6px 12px; }
  .ucus[data-ucus-etkin] .halka-metin .onay-halkasi { min-height: 28px; padding-left: 36px; font-size: 13px; }
  .ucus[data-ucus-etkin] .halka-metin .onay-halkasi::before { width: 28px; height: 28px; margin-top: -14px; }
  .ucus[data-ucus-etkin] .halka-metin .onay-halkasi::after { left: 9px; width: 10px; height: 6px; margin-top: -5px; border-width: 0 0 2px 2px; }
  .ucus[data-ucus-etkin] .halka-dugmeler { gap: 8px; }
  .ucus[data-ucus-etkin] .halka-dugmeler .bk-btn { padding-inline: 12px; font-size: 13px; }
  .ucus[data-ucus-etkin] .sema--tek-hat { max-width: 100%; margin-top: 10px; }
  .ucus[data-ucus-etkin] .ucus-metinler > .ucus-atla { top: var(--ucus-panel-ust); bottom: auto; align-self: start; height: auto; min-height: 44px; margin: calc(var(--ucus-panel-ust) + 4px) 4px calc(100svh - var(--ucus-panel-ust) - 48px) 0; padding: 0 12px; background: transparent; box-shadow: none; font-size: 13px; }
}

/* Uçuş künyesi ≤ 599 px: sahnenin sol altında tek satır çip (ucus.js içeriği yazar: ilk öğe fotoğraf künyesi, ".kunye-ek" şematik canlandırma ya da
   maket notu). Kapalıyken ek satır yalnız görsel olarak gizlidir (ekran okuyucu okur); çipe dokununca (etiket = onay kutusu) ek satır açılır. */
@media (max-width: 599px) {
  /* Etiket kutusu = dokunma hedefi: 44 px yüksek (hero künyesiyle aynı kalıp). Görünen 26 px'lik hap ::before'dur (9 px içeride); zemin ve
     gölge hareket.css'in [data-ucus-kunye] kuralından (≤ 600) ve .kunye--foto'dan gelir, burada hapa taşınır. */
  .ucus[data-ucus-etkin] .ucus-sahne .ucus-kunye { box-sizing: border-box; left: 12px; bottom: 3px; max-width: calc(100% - 24px); min-height: 44px; padding: 14px 32px 14px 10px; border-radius: 0; background: none; box-shadow: none; font-size: 10px; line-height: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ucus[data-ucus-etkin] .ucus-kunye::before { content: ""; position: absolute; inset: 9px 0; z-index: -1; border-radius: 14px; background: var(--surface-card); box-shadow: var(--shadow-sm); }
  .ucus[data-ucus-etkin] .ucus-kunye > :first-child { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ucus[data-ucus-etkin] .ucus-kunye .kunye-ek { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ucus[data-ucus-etkin] .ucus-kunye::after { content: "+"; position: absolute; right: 7px; top: 14px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--pus-gok); color: var(--ink); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0; }
  .ucus[data-ucus-etkin] .kunye-onay:checked + .ucus-kunye > :first-child { overflow: visible; white-space: normal; text-overflow: clip; }
  .ucus[data-ucus-etkin] .kunye-onay:checked + .ucus-kunye .kunye-ek { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .ucus[data-ucus-etkin] .kunye-onay:checked + .ucus-kunye::after { content: "\2212"; }
  .ucus[data-ucus-etkin] .kunye-onay:focus-visible + .ucus-kunye::before { box-shadow: var(--focus-ring); }
}

/* ---------- Uçuş etiketleri (kontrat 1; plan 2.3/03, 2.4) ----------
   Sahneye izdüşümle iğnelenen DOM etiketleri. ucus.js konumu --x / --y (CSS px, motor izdusum), görünürlüğü .gorunur ve
   parsel durumunu data-durum (gizli | aday | elendi | secildi) ile yazar; görünüm buradadır. Etiket kabı aria-hidden'dır,
   aynı bilgi metinde ve çiplerdedir. Durağan poster figürlerinde aynı sınıflar yüzdeyle (--u, --v) konumlanır (--poster). */
.ucus-etiket { --e-renk: var(--accent); position: absolute; left: 0; top: 0; z-index: 2; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-card); box-shadow: var(--shadow-sm); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .03em; color: var(--ink); white-space: nowrap; pointer-events: none; }
.ucus-etiketler .ucus-etiket, .ucus-etiketler .ucus-kose { translate: var(--x, -9999px) var(--y, -9999px); opacity: 0; transition: opacity var(--sure-etiket) var(--ease-etiket); }
.ucus-etiketler .ucus-etiket { transform: translate(-50%, calc(-100% - 13px)); }
.ucus-etiketler .ucus-etiket.gorunur, .ucus-etiketler .ucus-kose.gorunur { opacity: 1; }
/* Sap ve bağlantı noktası: etiket noktanın 13 px üstünde (data-yon="sol": solunda) */
.ucus-etiketler .ucus-etiket::before { content: ""; position: absolute; left: 50%; top: calc(100% + 13px); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--e-renk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface-card) 90%, transparent); }
.ucus-etiketler .ucus-etiket::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 13px; margin-left: -.75px; background: var(--e-renk); }
.ucus-etiketler .ucus-etiket[data-yon="sol"] { transform: translate(calc(-100% - 22px), -50%); }
.ucus-etiketler .ucus-etiket[data-yon="sol"]::before { left: calc(100% + 22px); top: 50%; }
.ucus-etiketler .ucus-etiket[data-yon="sol"]::after { left: 100%; top: 50%; width: 22px; height: 1.5px; margin: -.75px 0 0; }
/* Parsel: numara rozeti + durum sözcüğü (Aday · Elendi · Seçildi); yalnız geçerli durumun sözcüğü görünür */
.ucus-etiket--parsel { --e-renk: var(--sky-600); padding-right: 4px; }
.ucus-etiket--parsel i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sky-700); color: var(--ink-on-action); font-style: normal; font-size: 11px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ucus-etiket--parsel b { display: none; font-weight: 600; }
.ucus-etiket--parsel[data-durum="aday"] .e-aday, .ucus-etiket--parsel[data-durum="elendi"] .e-elendi, .ucus-etiket--parsel[data-durum="secildi"] .e-secildi { display: inline; }
.ucus-etiket--parsel[data-durum="elendi"] { --e-renk: var(--graphite-400); color: var(--ink-secondary); }
.ucus-etiket--parsel[data-durum="elendi"] i { background: var(--graphite-100); color: var(--ink-secondary); box-shadow: inset 0 0 0 1px var(--graphite-300); }
.ucus-etiket--parsel[data-durum="secildi"] { --e-renk: var(--green-600); border-color: var(--green-600); }
.ucus-etiket--parsel[data-durum="secildi"] i { background: var(--green-700); }
.ucus-etiketler .ucus-etiket--parsel[data-durum="gizli"] { opacity: 0; }
/* TM: kadraj kenarında simge ve rakamsız kapasite halkaları (SVG); halkalar bağlantı noktasındadır */
.ucus-etiket--tm { --e-renk: var(--sky-600); padding-inline: 12px; }
.ucus-tm-halka { position: absolute; left: calc(100% + 22px); top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; overflow: visible; fill: none; stroke: var(--sky-600); stroke-width: 1.5; pointer-events: none; }
.ucus-tm-halka circle:nth-of-type(1) { opacity: .28; }
.ucus-tm-halka circle:nth-of-type(2) { opacity: .5; }
.ucus-tm-halka circle:nth-of-type(3) { opacity: .85; }
.ucus-tm-halka .tm-kutu { fill: var(--surface-card); stroke: var(--ink); stroke-width: 1.8; }
.ucus-tm-halka path { stroke: var(--ink); stroke-width: 1.8; }
.ucus-etiketler .ucus-etiket--tm::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ucus-etiketler .ucus-etiket--tm.gorunur .ucus-tm-halka circle { transform-origin: center; transform-box: fill-box; animation: ucus-halka 1.1s var(--ease-giris) both; }
  .ucus-etiketler .ucus-etiket--tm.gorunur .ucus-tm-halka circle:nth-of-type(2) { animation-delay: .15s; }
  .ucus-etiketler .ucus-etiket--tm.gorunur .ucus-tm-halka circle:nth-of-type(1) { animation-delay: .3s; }
}
@keyframes ucus-halka { from { opacity: 0; transform: scale(.45); } }
.ucus-etiket--nokta { --e-renk: var(--green-600); color: var(--green-800); border-color: var(--green-200); }
.ucus-etiket--capa { --e-renk: var(--graphite-600); }
/* Köşe işaretleri: seçili parselin dört köşesinde (izdüşüm noktası L'nin köşesidir) */
.ucus-kose { --k: 22px; position: absolute; left: 0; top: 0; z-index: 2; width: var(--k); height: var(--k); box-sizing: border-box; border: 0 solid var(--green-600); pointer-events: none; }
.ucus-kose--tl { border-width: 3px 0 0 3px; }
.ucus-kose--tr { border-width: 3px 3px 0 0; transform: translateX(-100%); }
.ucus-kose--br { border-width: 0 3px 3px 0; transform: translate(-100%, -100%); }
.ucus-kose--bl { border-width: 0 0 3px 3px; transform: translateY(-100%); }
/* Durağan poster figürleri (halka 01–03, ikiz katmanının içinde): aynı etiketler yüzdeyle konumlanır, sap ve nokta yoktur */
.poster-etiketler { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ucus-etiket--poster { left: var(--u); top: var(--v); transform: translate(-50%, -50%); }
.ucus-etiket--poster.ucus-etiket--tm { transform: translate(calc(-100% - 10px), -50%); }
.ucus-etiket--poster .ucus-tm-halka { left: calc(100% + 10px); width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.ucus-etiket--poster .tm-kutu, .ucus-etiket--poster .ucus-tm-halka path { display: none; }
/* Dar posterde parsel etiketleri numaraya iner (P2 ile P3 çakışmasın); "Seçildi" kalır, anlam lejanttadır */
@media (max-width: 599px) {
  .ucus-etiket--poster { min-height: 20px; padding: 2px 8px; font-size: 11px; line-height: 14px; }
  .ucus-etiket--poster.ucus-etiket--parsel { padding: 2px; }
  .ucus-etiket--poster.ucus-etiket--parsel[data-durum="elendi"] b { display: none; }
  .ucus-etiket--poster.ucus-etiket--parsel[data-durum="secildi"] { padding-left: 8px; }
}
/* Parsel lejantı: etiketlerin iğnelenmediği yerlerde (dar ekranda etkin uçuş, dar durağan poster) durum anlamı */
.halka-lejant { display: none; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-secondary); }
.halka-lejant li { display: inline-flex; align-items: center; gap: 6px; }
.halka-lejant li::before { content: ""; flex: none; width: 14px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--sky-600); border-radius: 2px; background: color-mix(in srgb, var(--sky-500) 14%, transparent); }
.halka-lejant .lejant-elendi::before { border-color: var(--graphite-400); background: repeating-linear-gradient(135deg, var(--graphite-300) 0 1.5px, transparent 1.5px 4px); }
.halka-lejant .lejant-secildi::before { border-color: var(--green-600); background: color-mix(in srgb, var(--green-600) 18%, transparent); }
/* Dar ekranda etiketler iğnelenmez (ucus.js): anlam lejanttadır ve yalnız motor kipinde (parseller sahnede çizilirken) gösterilir; poster kipinde
   sahnede parsel yoktur, lejant olmayan öğeleri anlatmasın. Yer poster kipinde de ayrılır (visibility): motor hazır olunca metin bloğu kaymaz (CLS). */
@media (max-width: 899px) { .ucus[data-ucus-etkin] .halka-lejant { display: flex; visibility: hidden; } .ucus[data-ucus-etkin][data-ucus-kip="motor"] .halka-lejant { visibility: visible; } .ucus[data-ucus-etkin] .ucus-etiketler { display: none; } }
@media (max-width: 599px) { .ucus:not([data-ucus-etkin]) .halka-lejant { display: flex; } }

/* Halka rayı tek hat durumu (kontrat 3; plan 2.4, 510–520): 6/6'da ucus.js rayın köküne data-tamam koyar; numaralı halkalar küçülüp
   dolar, ray kesintisiz enerji hattına döner (hattın kendisi hareket.css'te), "Tek elden" yazısı hat boyunca yazılır. */
.ucus[data-ucus-etkin] .halka-ray[data-tamam] a .halka-ray-no { transform: scale(.5); border-color: var(--energy); background: var(--energy); color: transparent; box-shadow: 0 0 0 5px var(--energy-soft); }
.ucus[data-ucus-etkin] .halka-ray[data-tamam] a:hover .halka-ray-no { border-color: var(--energy); color: transparent; }
.ucus[data-ucus-etkin] .halka-ray[data-tamam] .halka-ray-tamam { color: var(--energy-ink); }

/* Halka 06 penceresi (kontrat 2): motor kipinde tuvalin penceresi çerçevelenir (gölge). Geometri ucus.js PENCERE ile aynı; P8
   açılışı sürmek isterse --pencere-x/y/w/h (0–1), --pencere-r (px) ve --ucus-pencere-o yazar. Poster kipinde gölge .ucus-foto'dadır. */
.ucus-pencere { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .ucus[data-ucus-etkin] .ucus-pencere { display: block; position: absolute; z-index: 1; left: calc(var(--pencere-x, .52) * 100%); top: calc(var(--pencere-y, .12) * 100%); width: calc(var(--pencere-w, .44) * 100%); height: calc(var(--pencere-h, .76) * 100%); border-radius: var(--pencere-r, 32px); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--sure-etiket) var(--ease-etiket); }
  .ucus[data-ucus-etkin][data-ucus-kip="motor"][data-ucus-sahne="alpedo"] .ucus-pencere { opacity: var(--ucus-pencere-o, 1); }
}

/* ---------- Uçuş sonu bağlayıcısı (düzeltme-1) ----------
   Pencere kağıda erirken (ucus.js data-ucus-bitti: rozet ve künye söndü) sahnenin boş yarısı "Tek elden" hattını taşır: altı halka tek enerji
   hattında, hat sahneden çıkıp 04'e sürer (başlık 04'ün üst satırıyla aynı: "Tek elden uçtan uca"). Süs katmanıdır (aria-hidden); aynı bilgi
   ray ve halka metinlerinde vardır. Yalnız etkin uçuşta çizilir; durağan düzende (JS'siz, WebGL'siz, hareket azaltma) yoktur. */
.ucus-zincir { display: none; }
.ucus[data-ucus-etkin] .ucus-zincir { display: block; position: absolute; z-index: 2; left: 52%; right: 0; top: calc(var(--ust-y) + (100vh - var(--ust-y)) / 2); top: calc(var(--ust-y) + (100svh - var(--ust-y)) / 2); transform: translateY(-50%);
  --zincir-pay: clamp(24px, 4vw, 64px); padding-right: var(--zincir-pay); pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 240ms var(--ease-etiket), visibility 0s linear 240ms; }
.ucus[data-ucus-bitti] .ucus-zincir { visibility: visible; opacity: 1; transition: none; }
.ucus-zincir { --zincir-hale: 0 0 6px var(--pus-kagit), 0 0 14px var(--pus-kagit), 0 0 22px var(--pus-kagit); }
.ucus-zincir-baslik { text-shadow: var(--zincir-hale); margin: 0 0 clamp(22px, 2.6vw, 36px); font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ucus-zincir-hat { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
/* Hat: ilk düğümün ortasından sahnenin sağ kenarına (hat sahneyi terk eder ve 04'e geçer) */
.ucus-zincir-hat::before { content: ""; position: absolute; left: 13px; right: calc(-1 * var(--zincir-pay, 0px)); top: 11px; height: 4px; border-radius: 2px; background: var(--energy); }
.ucus-zincir-hat li { position: relative; display: grid; justify-items: start; align-content: start; min-width: 0; }
.ucus-zincir-hat i { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--energy); box-shadow: 0 0 0 5px var(--energy-soft); color: var(--ink); font-style: normal; font-size: 11px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ucus-zincir-hat span { display: block; margin-top: 14px; padding-right: 8px; font-size: clamp(11.5px, 1vw, 13px); line-height: 1.4; font-weight: 600; color: var(--ink-secondary); text-shadow: var(--zincir-hale); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .ucus[data-ucus-bitti] .ucus-zincir-baslik { animation: zincir-gir 520ms var(--ease-giris) both; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat::before { transform-origin: 0 50%; animation: zincir-cizgi 900ms var(--ease-giris) 120ms both; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat li { animation: zincir-gir 520ms var(--ease-giris) both; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat li:nth-child(1) { animation-delay: 160ms; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat li:nth-child(2) { animation-delay: 250ms; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat li:nth-child(3) { animation-delay: 340ms; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat li:nth-child(4) { animation-delay: 430ms; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat li:nth-child(5) { animation-delay: 520ms; }
  .ucus[data-ucus-bitti] .ucus-zincir-hat li:nth-child(6) { animation-delay: 610ms; }
}
@keyframes zincir-gir { from { opacity: 0; translate: 0 10px; } }
@keyframes zincir-cizgi { from { transform: scaleX(0); } }
@media (min-width: 900px) and (max-width: 1199px) { .ucus[data-ucus-etkin] .ucus-zincir { left: 48%; } }
/* Dar ekran: sahne alanı (üst çubuğun altında, kağıt panelin üstünde) ortasında; ≤ 479 px yalnız numaralar (adlar ray ve panelde) */
@media (max-width: 899px) {
  .ucus[data-ucus-etkin] .ucus-zincir { --zincir-pay: 16px; left: 16px; top: calc(var(--ust-y) + (var(--ucus-panel-ust) + var(--ucus-dy-6) - var(--ust-y)) / 2); }   /* halka 06'nın kâğıt üstünün üstündeki görünen sahne */
  .ucus-zincir-baslik { margin-bottom: 18px; font-size: 20px; }
  .ucus-zincir-hat span { margin-top: 10px; font-size: 11.5px; padding-right: 4px; }
}
@media (max-width: 479px) { .ucus-zincir-hat span { display: none; } }

/* ============================ 04 · Tek elden (2.3/04) ============================ */
.tek { background: var(--green-50); padding-block: clamp(80px, 10vw, 136px); }
.tek-h3 { margin: clamp(48px, 6vw, 80px) 0 var(--space-6); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; font-weight: 600; color: var(--ink); }
.tek-ayaklar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tek-ayaklar li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.tek-ayaklar h4, .tek-asamalar h4 { font-size: 19px; line-height: 26px; font-weight: 600; color: var(--ink); }
.tek-ayaklar p { font-size: 15px; line-height: 22px; color: var(--ink-secondary); }
/* Aşama çizgisi: kartların üstünden geçen tek hat (data-ciz ile kaydırmada çizilir); düğümler kartın üst kenarında */
.tek-asamalar-kap { position: relative; }
.tek-cizgi { position: absolute; left: 12px; right: 12px; top: 0; width: calc(100% - 24px); height: 2px; overflow: visible; pointer-events: none; }
.tek-cizgi path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tek ol.tek-asamalar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 28px 0 0; list-style: none; }
.tek-asamalar li { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); transition: border-color .2s ease-out, box-shadow .28s; }
.tek-asamalar li::before { content: ""; position: absolute; left: var(--space-6); top: -35px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 50%; background: var(--green-50); }
.tek-asamalar a { color: var(--ink); text-decoration: none; }
.tek-asamalar a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tek-asamalar li:hover { border-color: var(--action); box-shadow: var(--shadow-md); }
.tek-asamalar li:hover a { color: var(--link); }
.tek-asamalar li:focus-within { box-shadow: var(--focus-ring); }
.tek-asamalar a:focus-visible { outline: none; }
.tek-asama-no { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-800); }
.tek-asamalar p { font-size: 15px; line-height: 23px; color: var(--ink-secondary); }
.tek-luy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4) var(--space-8); align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--line-subtle); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.tek-luy-cip { margin: 0; border-color: var(--gold-300); background: var(--gold-50); color: var(--ink); font-weight: 600; white-space: nowrap; }
.tek-luy-cip::before { background: var(--energy); }
.tek-luy-metin { max-width: 70ch; font-size: 16px; line-height: 25px; color: var(--ink-secondary); }
@media (max-width: 1099px) {
  .tek-ayaklar, .tek-asamalar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tek-cizgi { display: none; }
  .tek ol.tek-asamalar { padding-top: 0; }
  .tek-asamalar li::before { display: none; }
  .tek-luy { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 639px) {
  .tek-ayaklar { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .tek-ayaklar li { padding: var(--space-5); }
  /* Aşamalar tek sütun; çizgi dikey (kartların solunda sürekli hat, düğümler kart başında) */
  .tek ol.tek-asamalar { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-left: 28px; }
  .tek-asamalar::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 26px; width: 2px; border-radius: 2px; background: var(--accent); }
  .tek-asamalar li::before { display: block; left: -28px; top: 26px; }
  .tek-asamalar li { padding: var(--space-5); }
}

/* ============================ 05 · Çalışma alanları (2.3/05) ============================ */
.alanlar { background: var(--pus-kagit); padding-block: clamp(80px, 10vw, 136px); }
.alanlar-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.alanlar-kart { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.alanlar-gorsel { position: relative; margin: 0 0 var(--space-2); }
.alanlar-gorsel .derinlik-tuval { box-shadow: var(--shadow-sm); }
/* Yer tutucu (LQIP yerine gradyan): görsel inene kadar (yavaş bağlantı, loading="lazy") kutu bembeyaz ve gölgeli boş kalmasın. Renkler
   fotoğrafın görünen kırpımının beş yatay bandının ortalamasıdır (scratchpad/renk_hesap.py); marka rengi değil, içerikten türeyen ipucudur.
   Görsel gelince üstünü tamamen örter. */
.alanlar-gorsel[data-yuva="kart-ges"] .derinlik-tuval { background: linear-gradient(180deg, #b6bdc6 0%, #979aa0 25%, #6d7893 50%, #596684 75%, #808080 100%); }
.alanlar-gorsel[data-yuva="kart-res"] .derinlik-tuval { background: linear-gradient(180deg, #e8dbc2 0%, #f0d3ac 25%, #d0b19c 50%, #2e4446 75%, #46545e 100%); }
.alanlar-gorsel[data-yuva="kart-altyapi"] .derinlik-tuval { background: linear-gradient(180deg, #e0e9e3 0%, #d8e1db 25%, #d8dfdb 50%, #cdd6d0 75%, #b7c2bc 100%); }
.alanlar-kart:nth-child(1) .derinlik-tuval img { object-position: 45% 60%; }
.alanlar-kart:nth-child(2) .derinlik-tuval img { object-position: 40% 55%; }
/* Altyapı kartı (maket-sebeke, TM kırpımı): kadraj sahneler.json kart 0,42 · 0,55 · 1,4; motor hazır olunca --derinlik-olcek ve dönüşüm merkezini kendi eşlemesiyle ezer */
.alanlar-gorsel[data-yuva="kart-altyapi"] { --derinlik-olcek: 1.3; }
.alanlar-gorsel[data-yuva="kart-altyapi"] .derinlik-tuval img { object-position: 46% 50%; transform-origin: 50% 46%; }
/* Rozet fotoğrafın üstünde (sol üst), kaynak ve künye metni altında */
.alanlar-kunye .rozet { position: absolute; top: 12px; left: 12px; z-index: 3; border-color: transparent; box-shadow: var(--shadow-sm); }
.alanlar-kunye { min-height: 32px; }
.alanlar-portfoy { display: inline-flex; align-items: center; gap: 8px; align-self: start; margin: 0; padding: 4px 12px; border-radius: var(--radius-full); background: var(--gold-50); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.alanlar-portfoy::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--viz-res); }
.alanlar-baslik { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; font-weight: 600; color: var(--ink); }
.alanlar-baslik { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; padding-bottom: 4px; justify-self: start; align-self: start; }
.alanlar-metin { font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
.alanlar-baglanti { display: inline-flex; align-items: center; gap: 8px; align-self: start; min-height: 44px; margin-top: auto; font-weight: 600; font-size: 15px; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.alanlar-baglanti::after { content: "→"; text-decoration: none; transition: transform .28s var(--ease-giris); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .alanlar-kart { transition: transform .35s var(--ease-giris); }
  .alanlar-kart:hover { transform: translateY(-4px); }
  .alanlar-baslik { transition: background-size .5s var(--ease-giris); }
  .alanlar-kart:hover .alanlar-baslik { background-size: 100% 2px; }
  .alanlar-kart:hover .alanlar-baglanti::after { transform: translateX(4px); }
}
/* Ortadaki (RES) kartın posterindeki data-paralaks bare özniteliğini hareket.js okur (yPercent ±5, ölçek 1,12; yalnız dokunmatik ve dar
   ekran, plan 2.3/05). İnce işaretçide motor posteri kadrajla eşler (transform-origin, --derinlik-olcek): orada GSAP dönüşümü uygulanmaz. */
@media (hover: hover) and (pointer: fine) { .alanlar-kart img[data-paralaks] { transform: scale(var(--derinlik-olcek, 1)) !important; } }
@media (max-width: 899px) {
  /* Yatay kaydırmalı kartlar (scroll-snap); sayfa taşmaz, kaydırma yalnız şeritte. Seçici ul.alanlar-kartlar: site.css'in
     `ul[class] { padding: 0 }` kuralı (0,1,1) tek sınıflı seçiciyi eziyordu; ilk kartın sol boşluğu (16 px) bu yüzden sıfırdı. */
  ul.alanlar-kartlar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); gap: var(--space-4); margin-inline: calc(-1 * var(--space-6)); padding: 4px var(--space-6) var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-6); scrollbar-width: thin; }
  .alanlar-kart { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  ul.alanlar-kartlar { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); }
}

/* ============================ 06 · Portföy (2.3/06) ============================ */
.portfoy { background: var(--pus-gok); padding-block: clamp(80px, 10vw, 136px); }
.portfoy-ic { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); margin-top: clamp(32px, 4vw, 56px); }
.portfoy-harita .harita-tuval { background: var(--surface-card); box-shadow: var(--shadow-sm); border-color: var(--line-subtle); }
/* Poster inene kadar Türkiye'nin yaklaşık siluetini (yeşil leke) gösterir; poster gelince örtülür; canlı harita hazırsa (data-hazir) hiç görünmez (yatay ve dikey band için ayrı boy) */
.portfoy-harita:not([data-hazir]) .harita-tuval { background: radial-gradient(ellipse 47% 27% at 52% 52%, #8fb897 0%, #a9c9b0 45%, #cfe0d3 78%, transparent 100%), var(--surface-card); }
@media (max-width: 699px) { .portfoy-harita:not([data-hazir]) .harita-tuval { background: radial-gradient(ellipse 49% 36% at 50% 50%, #7fae88 0%, #a4c7ab 50%, #cfe0d3 80%, transparent 100%), var(--surface-card); } }
.portfoy-dipnot { margin-top: var(--space-3); }
.portfoy-liste { display: grid; gap: var(--space-6); justify-items: start; }
.portfoy-tablo { width: 100%; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.portfoy-tablo caption { padding-bottom: var(--space-3); text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-800); }
.portfoy-tablo th, .portfoy-tablo td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.portfoy-tablo thead th { padding-block: 0 10px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.portfoy-tablo tbody th { font-weight: 600; color: var(--ink); }
.portfoy-tablo td { color: var(--ink-secondary); }
.portfoy-tablo th:last-child, .portfoy-tablo td:last-child { padding-right: 0; }
.portfoy-tablo thead th:last-child, .portfoy-guc { width: 42%; }
.portfoy-guc span { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; }
.portfoy-cubuk { display: block; width: calc(var(--oran, 0) * 100%); height: 6px; margin-top: 6px; border-radius: 3px; background: var(--viz-ges); font-style: normal; }
.portfoy-tablo tfoot th, .portfoy-tablo tfoot td { border-bottom: 0; padding-top: 16px; }
.portfoy-tablo tfoot th { font-weight: 600; color: var(--ink); }
.portfoy-tablo tfoot .portfoy-guc span { font-family: var(--font-display); font-size: 18px; }
/* Satır başı proje kartına bağlanır (klavye odağı). Satır üstü/odak ve harita işaretinden gelen vurgu (bk:proje-vurgu; P6 satıra
   data-vurgu yazar): çubuk kalınlaşır, ad bağlantı rengine döner; renk tek başına anlam taşımaz (çubuk boyu ve halka da değişir). */
.portfoy-tablo tbody th a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s var(--ease-giris), color .2s ease-out; }
.portfoy-tablo tbody a:hover, .portfoy-tablo tbody a:focus-visible, .portfoy-tablo tbody tr[data-vurgu] th a { background-size: 100% 1.5px; color: var(--link); }
.portfoy-tablo tbody a:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--focus-ring); }
/* Dokunma hedefi (≤ 800 px ve kaba işaretçi; bilesenler.css'teki ".kunye a" kalıbıyla aynı eşik): satır içi bağlantının kutusu yalnız
   yazı yüksekliğidir (18 px). padding-block, kutuyu satır yüksekliği boyunca 46 px yapar (hücrenin 14 px'lik üst/alt payına taşar; satır
   yüksekliği ve alttaki satırın bağlantısı etkilenmez, komşu kutular 16 px'ten fazla ayrık). Altçizgi (background) yazının altında kalsın
   diye content-box'a bağlanır. İnce işaretçide ve geniş ekranda bağlantı yazı kadardır (odak halkası sıkı kalır). */
@media (pointer: coarse), (max-width: 800px) {
  .portfoy-tablo tbody th a { padding-block: 14px; background-origin: content-box; }
}
.portfoy-cubuk { transition: height .25s var(--ease-giris), box-shadow .25s var(--ease-giris); }
.portfoy-tablo tbody tr:hover .portfoy-cubuk, .portfoy-tablo tbody tr:focus-within .portfoy-cubuk, .portfoy-tablo tbody tr[data-vurgu] .portfoy-cubuk { height: 10px; margin-top: 4px; box-shadow: 0 0 0 3px var(--energy-soft); }
.portfoy-tablo tbody tr[data-vurgu] .portfoy-guc span { color: var(--link); }
/* ≥ 1000 px: başlık ve tablo aynı satırda (tablo başlığın sağında, "BUGÜN" ile aynı üst hizada), imza haritası altta tam kap genişliğinde
   (12:5, 1440'ta ~1240 × 517 px; Projeler'deki harita da böyle). .portfoy-ic ve .portfoy-liste kutusuz (display: contents) olur; öğeler
   .kap ızgarasına yerleşir. DOM sırası başlık, harita, tablo, düğme kalır (harita bu genişlikte odaklanabilir öğe içermez: nabız noktaları
   yalnız < 700 px'te görünür). Düğme başlığın hemen altında (sol sütun), ikinci satır (1fr) tablonun fazla yüksekliğini emer: sol sütun
   boş kalmaz. < 1000 px: tek sütun, sıra başlık, harita, tablo, düğme. */
@media (min-width: 1000px) {
  .portfoy > .kap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .portfoy-ic, .portfoy-liste { display: contents; }
  .portfoy-bas { grid-column: 1; grid-row: 1; }
  .portfoy-liste > .bk-btn { grid-column: 1; grid-row: 2; justify-self: start; margin-top: var(--space-6); }
  .portfoy-tablo { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .portfoy-harita { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(40px, 4.5vw, 64px); }
  .portfoy-dipnot { max-width: 80ch; }
}

/* Harita posteri: ≥ 700 px yatay poster (2:1; etiketleri ve ışık sütunları posterde). Dar ekranda dikey poster (780×1000) yalnız haritanın
   bulunduğu orta bant kadar gösterilir (üst/alt boşluk kırpılır: --kes-a başlangıç, --kes-o oran; poster P6'nındır, harita bandı ~%36–64).
   Canlı harita (≥ 1024 px, ince işaretçi) yüklenince (data-hazir) poster söner ve işaretler gizlenir. */
.portfoy-harita { --kes-a: 21; --kes-o: .58; min-width: 0; }   /* sayı: yüzde değil (nokta ve çip konumu calc ile) */
.portfoy-harita .harita-tuval { width: 100%; }   /* min-height + aspect-ratio tuvali sütundan geniş yapmasın (1024 px'te tablonun üstüne biniyordu) */
@media (max-width: 699px) {
  .portfoy-harita .harita-tuval { aspect-ratio: 78 / 58; height: auto; min-height: 0; }
  .portfoy-harita .harita-tuval .sahne-poster { object-fit: cover; object-position: 50% 50%; }
}
/* Nabız noktaları ve adlı bayraklar: yalnız dikey posterde (dar ekran). CSS ile çalışır: <details name> dokununca kartı açar, bir başkası
   açılınca öncekini kapatır. Konum, dikey posterdeki pin TABANIDIR (--x, --y; poster yüzdesi, SAYI) ve bant kırpımına göre çevrilir.
   KAYNAK: kaynak/js/harita-poster.js > POSTER['harita-poster-dikey.webp'].pin (tabanX, tabanY; --yt = tepeY; P6). Aşağıdaki tablo o değerlerin
   kopyasıdır (sayfa-projeler.css'teki tabloyla aynı): P6 posteri yenileyince burası aynı anda güncellenmezse noktalar pinlerin üstünden kayar.
   Kabul: nokta merkezi ile pin tabanı ≤ 2 px (360–699 px). Değerler satır içi stile yazılmaz; poster yenilenince bu tablo ve
   sayfa-projeler.css tablosu birlikte güncellenir.
   Dokunma alanı her pinde 44 × 44 px (summary kutusu). Yan yana duran üç pinde (Alpedo, Konuklu, Ulaçlı; 390 px'te ~30 px, 320 px'te ~25 px
   arayla) kutular örtüşür. Öncelik sırası: (1) noktanın kendisi ve halkası (.portfoy-nokta-isaret, z-index 1: her noktanın ~20 px'lik çevresi
   kendi kartını açar, komşunun kutusu o alanı alamaz; 320 px'te de), (2) örtüşen kutu bölgesini DOM'da en son gelen (ortadaki Konuklu) alır:
   orta pin tam 44 px, dıştakiler (Alpedo, Ulaçlı) dışa doğru 44 px'e uzanır. Noktanın merkezi hiçbir yöne kaymaz. Ad çipleri de summary'nin
   içindedir ve 44 px yüksek dokunma alanı taşır (.portfoy-nokta-ad::after). Aynı projeler 44 px yüksek tablo satırlarında da bağlıdır.
   Halka kaydırmayla bir kez belirir ve yerine oturur (5 sn'yi aşan hareket yok); tepe çapı en yakın komşuyla aralığın altında kalır.
   ADLAR: harita.js poster kipi (adlı çipler) bu sayfada mobilde ve hareket azaltmada yüklenmediği için ad statik katmanda da görünür:
   her <summary> içindeki .portfoy-nokta-ad çipi, tuvalin boş üst (%10) ya da alt (%90) satırında bayrak gibi kılavuzun bir yanına uzanır
   (--sag/--sol); üst satırdakiler kılavuzu sütun tepesine (--yt), alt satırdakiler noktanın kenarına bağlar. Konum cqw'dedir (tuval yüksekliği
   = genişlik × 58/78): 320–699 px'te aynı yerleşim. Çip summary'nin içinde olduğundan dokununca aynı kartı açar; ad aria-label'dadır. */
.portfoy-noktalar { display: none; position: absolute; inset: 0; z-index: 2; container-type: inline-size; }
@media (max-width: 699px) { .harita:not([data-hazir]) .portfoy-noktalar { display: block; } }
.portfoy-nokta[data-proje="bergama-ges"]      { --x: 8.19;  --y: 45.72; }
.portfoy-nokta[data-proje="insuyu-ges"]       { --x: 33.33; --y: 54.32; --yt: 42.63; }
.portfoy-nokta[data-proje="konuklu-ges"]      { --x: 60.65; --y: 58.51; --yt: 48.87; }
.portfoy-nokta[data-proje="alpedo-cati-ges"]  { --x: 52;    --y: 58.99; }
.portfoy-nokta[data-proje="ulacli-ges"]       { --x: 69.01; --y: 56.11; }
.portfoy-nokta { --zw: 44px; --zh: 44px; --ty: calc((var(--y) - var(--kes-a)) / var(--kes-o)); --bir: .74359cqw; pointer-events: none; position: absolute; left: calc(var(--x) * 1%); top: calc(var(--ty) * 1%); }   /* --bir: tuval yüksekliğinin %1'i */
.portfoy-nokta--dar .portfoy-nokta-isaret { width: 10px; height: 10px; }   /* dar noktalar: işaret 10 px (komşuya değmesin); dokunma kutusu yine 44 px */
.portfoy-nokta[open] { z-index: 3; }
.portfoy-nokta > summary { pointer-events: auto; min-height: 0; position: relative; left: calc(var(--zw) / -2); top: calc(var(--zh) / -2); display: grid; place-items: center; width: var(--zw); height: var(--zh); border-radius: 50%; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.portfoy-nokta > summary::-webkit-details-marker { display: none; }
.portfoy-nokta > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.portfoy-nokta-isaret { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--energy); box-shadow: 0 0 0 3px var(--surface-card), var(--shadow-sm); transition: transform .25s var(--ease-giris); }
.portfoy-nokta-isaret::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--energy); border-radius: 50%; opacity: .5; }
.portfoy-nokta--dar .portfoy-nokta-isaret::after { inset: -5px; border-width: 1.5px; }   /* 20 px: en dar aralığın (320 px'te ~24 px) altında */
.portfoy-nokta[open] .portfoy-nokta-isaret { transform: scale(1.3); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .portfoy-nokta-isaret::after { animation: portfoy-nabiz linear both; animation-timeline: view(); animation-range: entry 25% cover 50%; }
  }
}
@keyframes portfoy-nabiz { 0% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.1); opacity: .6; } 100% { transform: scale(1); opacity: .5; } }
/* Ad çipi (harita.js poster kipi çipiyle aynı görünüm: 28 px, pill, kart zemini) ve kılavuzu (1 px mürekkep + beyaz hale) */
.portfoy-nokta-ad { position: absolute; left: 50%; top: calc(50% + (var(--sat) - var(--ty)) * var(--bir)); display: flex; align-items: center; height: 28px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-card); box-shadow: var(--shadow-sm); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: box-shadow .15s ease-out, border-color .15s ease-out; }
.portfoy-nokta-ad--ust { --sat: 10; }
.portfoy-nokta-ad--alt { --sat: 90; }
/* Görünmez: çipin dokunma kutusu 28 → 44 px yüksek (yanlara taşmaz: aynı satırdaki çipler 30 px'ten fazla ayrık). Tuvalin kenarına yakın çipte
   (320 px'te kenara 7,4 px kalır; tuval taşanı keser) pay kenara 7, haritanın içine 11 px verilir: kutu her genişlikte tam 44 px. */
.portfoy-nokta-ad--ust::after { content: ""; position: absolute; inset: -7px 0 -11px; }
.portfoy-nokta-ad--alt::after { content: ""; position: absolute; inset: -11px 0 -7px; }
.portfoy-nokta-ad--sag { transform: translate(-14px, -50%); }
.portfoy-nokta-ad--sol { transform: translate(calc(-100% + 14px), -50%); }
.portfoy-nokta-ad::before { content: ""; position: absolute; width: 1px; margin-left: -.5px; background: var(--ink); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .8); }   /* 1 px: 2x/3x ekranda her çizgi aynı kalınlıkta (1,25 px kenarda 2 ya da 3 aygıt pikseline yuvarlanıyordu) */
.portfoy-nokta-ad--sag::before { left: 13px; }
.portfoy-nokta-ad--sol::before { left: calc(100% - 13px); }
.portfoy-nokta-ad--ust::before { top: 100%; height: calc(((var(--yt) - var(--kes-a)) / var(--kes-o) - var(--sat)) * var(--bir) + 2.04cqw - 19px); }   /* çipin altından, sütunun görünen ucunun (posterdeki kutu tepesinin 2,04 cqw altı: ışıma payı poster gibi ölçeklenir) 5 px üstüne */
.portfoy-nokta-ad--alt::before { bottom: 100%; height: calc((var(--sat) - var(--ty)) * var(--bir) - 22px); }   /* çipin üstünden noktanın kenarına (8 px) */
.portfoy-nokta[open] .portfoy-nokta-ad { border-color: var(--energy); box-shadow: 0 0 0 2px var(--energy), var(--shadow-sm); }
.portfoy-nokta-kart { position: absolute; left: 0; top: 24px; pointer-events: none; display: grid; gap: 2px; width: max-content; max-width: 210px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: var(--shadow-overlay); transform: translateX(-50%); font-size: 12px; line-height: 17px; color: var(--ink-secondary); }
.portfoy-nokta-kart b { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.portfoy-nokta-guc { font-weight: 600; color: var(--energy-ink); }
.portfoy-nokta--sol .portfoy-nokta-kart { left: -22px; transform: none; }
.portfoy-nokta--kuzey .portfoy-nokta-kart { top: auto; bottom: 100%; margin-bottom: 14px; }
@container (max-width: 300px) { .portfoy-nokta-kart { padding: 6px 12px; } .portfoy-nokta-kart b { line-height: 18px; } }   /* 320 px: açık kart üst satırdaki çiplere inmez */
@media (max-width: 400px) {
  .portfoy-tablo { font-size: 14px; }
  .portfoy-tablo th, .portfoy-tablo td { padding-right: 8px; }
  .portfoy-tablo tfoot .portfoy-guc span { font-size: 16px; white-space: normal; }
}

/* ============================ 07 · Referanslar (2.3/07) ============================ */
.referans { background: var(--pus-kagit); padding-block: clamp(72px, 9vw, 120px); }
.referans-bant { display: block; margin-top: clamp(28px, 3.5vw, 48px); color: inherit; text-decoration: none; }
.referans-bant .logo-duvar { grid-template-columns: repeat(auto-fit, minmax(min(150px, 40%), 1fr)); }
/* Kayan bant (5.4 data-kayan): yalnız ince işaretçide ve hareket.js logoları çoğalttıktan sonra ([data-kayan-kopya]).
   Bant yalnız kaydırma hızıyla ilerler, durunca durur. Kopyalar ekran okuyucudan gizlidir. Dokunmatikte, JS'siz ve hareket
   azaltmada ızgara kalır: kopyalar gizlenir, kayma sıfırlanır; dokunmatikte logolar kaydırmayla sırayla renklenir. */
@media not all and (hover: hover) and (pointer: fine) {
  .referans-bant .logo-duvar[data-kayan-kopya] { transform: none !important; }
  .referans-bant .logo-duvar[data-kayan-kopya] > [aria-hidden="true"] { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  html.js:not(.hareket-yok) .referans-bant[data-kayan] { overflow: hidden; margin-inline: -8px; padding: 4px 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  html.js:not(.hareket-yok) .referans-bant .logo-duvar[data-kayan-kopya] { display: flex; width: max-content; gap: 0; }
  html.js:not(.hareket-yok) .referans-bant .logo-duvar[data-kayan-kopya] > li { flex: none; width: 200px; margin-right: var(--space-4); }
}
html.hareket-yok .referans-bant .logo-duvar > [aria-hidden="true"] { display: none; }
.referans-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }

/* ============================ 08 · Neden Baykara (2.3/08) ============================ */
.neden { background: var(--green-50); padding-block: clamp(80px, 10vw, 136px); }
.neden-sutunlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gutter); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.neden-sutunlar li { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 2px solid var(--accent); }
.neden-sutunlar h3 { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.neden-sutunlar p { font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
.neden-guvenceler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.neden-guvenceler .onay-halkasi { display: flex; min-height: 76px; padding: 14px 16px 14px 68px; border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-secondary); }
.neden-guvenceler .onay-halkasi::before { left: 16px; }
.neden-guvenceler .onay-halkasi::after { left: 30px; }
.neden-guvenceler .onay-halkasi span { display: grid; gap: 2px; }
.neden-guvenceler strong { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.neden-alt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.neden-ekip { display: grid; gap: var(--space-6); justify-items: start; }
.neden-ekip-metin { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.neden-bag, .neden-sayi { white-space: nowrap; }
.neden-sayi { font-weight: 600; font-size: 1.3em; line-height: 1; color: var(--green-800); font-variant-numeric: tabular-nums; }
.neden-gtu { overflow: hidden; margin: 0; border: 1px solid var(--line-subtle); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.neden-gtu-cizim { position: relative; aspect-ratio: 16 / 9; background: var(--ikiz-kagit); border-bottom: 1px solid var(--line-subtle); }
.neden-gtu-cizim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.neden-gtu-cizim .neden-gtu-parsel { position: absolute; inset: 0; width: 100%; height: 100%; }
.neden-gtu-cizim img:first-child { opacity: .55; }
.neden-gtu-metin { display: grid; gap: var(--space-2); padding: var(--space-6); }
.neden-gtu-metin h3 { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.neden-gtu-metin p:not(.dipnot) { font-size: 15px; line-height: 23px; color: var(--ink-secondary); }
@media (max-width: 1099px) {
  .neden-sutunlar, .neden-guvenceler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .neden-alt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .neden-sutunlar { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .neden-guvenceler { gap: var(--space-3); }
  .neden-guvenceler .onay-halkasi { min-height: 64px; padding: 12px 12px 12px 60px; font-size: 13px; line-height: 18px; }
  .neden-guvenceler .onay-halkasi::before { left: 12px; }
  .neden-guvenceler .onay-halkasi::after { left: 26px; }
  .neden-guvenceler strong { font-size: 14px; line-height: 19px; }
}
@media (max-width: 379px) { .neden-guvenceler { grid-template-columns: minmax(0, 1fr); } }

/* ============================ 09 · Bilgi Merkezi (2.3/09) ============================
   Kapaklar makalenin konusundan türeyen eş yükselti çizimleridir (P3, assets/img/ikiz/kapak-*.svg). */
.bilgi { background: var(--pus-kagit); padding-block: clamp(72px, 9vw, 120px); }
.bilgi-bas { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-8); margin-bottom: clamp(28px, 3.5vw, 48px); }
.bilgi-bas > div { display: grid; gap: var(--space-3); }
.bilgi .makale-kart { overflow: hidden; }
.bilgi .makale-kart::before { content: ""; display: block; aspect-ratio: 16 / 9; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5); border-bottom: 1px solid var(--line-subtle); background: var(--ikiz-kagit) 50% 50% / cover no-repeat; }
.bilgi .makale-kart[href*="hisse-devri"]::before { background-image: url("../img/ikiz/kapak-lisanssiz-ges-hisse-devri.svg"); }
.bilgi .makale-kart[href*="finansmani"]::before { background-image: url("../img/ikiz/kapak-proje-finansmani-gostergeler.svg"); }
.bilgi .makale-kart[href*="mahsuplasma"]::before { background-image: url("../img/ikiz/kapak-saatlik-mahsuplasma-oztuketim.svg"); }
.bilgi .makale-kart .h3 { font-size: 20px; line-height: 28px; }

/* ============================ 10 · İniş (2.3/10) ============================ */
/* Alt bilgi (site.css .alt) üstünde --space-24 dış boşluk taşır: iniş bölümünün altında beyaz şerit kalmasın diye gold-50 zemin alt bilgiye kadar
   sürer (negatif alt kenar boşluğu, boşlukla toplamı sıfır); iç boşluk aynı kalır. */
.inis { background: var(--gold-50); padding-block: clamp(80px, 10vw, 136px); margin-bottom: calc(-1 * var(--space-24)); }
.inis-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.inis-metin { display: grid; gap: var(--space-5); justify-items: start; }
.inis-h2 { max-width: 14ch; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.06; font-weight: 500; letter-spacing: -.025em; color: var(--ink); }
.inis-lead { max-width: 40ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-secondary); }
.inis-iletisim { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.inis-iletisim a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-400); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.inis-iletisim a:hover { color: var(--link); text-decoration-color: currentColor; }
.inis-dugme { margin-top: var(--space-2); }
.inis-gorsel .derinlik-tuval { box-shadow: var(--shadow-lg); background: linear-gradient(180deg, #999fa5 0%, #84888d 25%, #6d7381 50%, #5e6573 75%, #6b6b6d 100%); }
@media (max-width: 899px) { .inis-ic { grid-template-columns: minmax(0, 1fr); } }

/* ============================ Yazdırma ============================ */
@media print {
  .kalkis, .kalkis-yapiskan, .ucus[data-ucus-etkin] { height: auto !important; }
  .kalkis-beyaz, .kalkis-acilis, .kalkis-ipucu, .ucus-sahne { display: none !important; }
}