/* Yatırım (TASARIM-PLANI 3.5, sahibi P11). META "css": ["sayfa-yatirim"] ile yalnız yatirim.html'e bağlanır.
   WebGL yok. İmza: sayfa başından belge listesine ve "Görüşme talep edin" düğmesine uzanan tek çizgi (.yt-rota: kontrol.js
   ölçer ve kaydırmayla çizer, burada son hâli durur); belge listesinde çizgi işaretlere göre dolan ilerleme hattına dönüşür
   (kontrol.js --oran yazar).
   Yalnız token değişkenleri kullanılır. JS'siz, hareket azaltmada ve dar ekranda aynı içerik aynı sırayla okunur. */

/* ---------- 1 · Sayfa başı: üç ölçü ve statik fotoğraf (perde açılışı, CSS paralaks: hareket.js) ---------- */
.yt-olcu { --olcu-sutun: 3; gap: var(--space-6); margin-top: var(--space-4); }
.yt-olcu .olcu-etiket { font-size: 14px; line-height: 20px; }
.yt-foto { align-self: center; }
.yt-foto .derinlik-tuval { box-shadow: var(--shadow-lg); }
/* Perde (data-perde, clip-path) içteki katmanda: gölge ve künye kırpılmaz; fotoğraf kartın içinde açılır */
.yt-perde { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
/* CSS paralaks (hareket.js data-paralaks): görsel 1,12 ölçekle ±%5 kayar, payı ölçek verir; JS'siz ve hareket azaltmada
   fotoğraf kutuyu tam doldurur, kırpılmaz */
.yt-perde > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-foto .kunye { margin-top: var(--space-3); }
@media (max-width: 1000px) { .yt-foto { max-width: 640px; } }
/* bilesenler.css 900 px altında 2 sütuna iner; üçlü 560 px'e kadar tek satırda kalır, altında alt alta dizilir */
@media (min-width: 561px) and (max-width: 900px) { .yt-olcu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .yt-olcu { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .yt-olcu .olcu-sayi { font-size: clamp(40px, 12vw, 52px); }
}

/* ---------- 2 · Tek çizgi ve 3 · LÜY kutusu ---------- */
.yt-cizgi-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12) clamp(40px, 7vw, 120px); align-items: start; }
.yt-cizgi-yan { position: sticky; top: 112px; display: grid; gap: var(--space-8); }
.yt-cizgi-yan .bolum-bas { margin-bottom: 0; }
html.hareket-yok .yt-cizgi-yan, html:not(.js) .yt-cizgi-yan { position: static; }
.yt-luy { display: grid; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--gold-100); border-radius: var(--radius-lg); background: var(--surface-sun); color: var(--ink-secondary); font-size: 15px; line-height: 24px; }
.yt-luy .tip-ust { color: var(--birim); }
/* Tek başına duran bağlantı: kutusu ≥ 44 px (satır 24 px + 10 px iç boşluk), eksi dış boşlukla yerleşim aynı kalır;
   içindeki p kutu içinde bir ızgara öğesi olduğundan eksi boşluk dışarı taşmaz. */
.yt-luy-baglanti { display: flex; width: fit-content; padding-block: 10px; margin-block: -10px; font-weight: 500; }

/* Rota: sayfa başından belge listesinin hattına ve "Görüşme talep edin" düğmesine uzanan tek çizgi. kontrol.js hero'dan
   belge kutusuna kadar olan bölümleri (.yt-rota) ölçer, tek SVG yolu çizer ve kaydırdıkça uzatır: kenar boşluğundan
   (sol şerit) kilometre taşı sütununa kıvrılır, 13 düğümden geçer, şeride döner; kitle kartlarına (dal), kriterlere, işlem
   sürecinin 5 adımına (dal) bağlanır ve belge kutusuna girip ilerleme hattına dönüşür. Bu çizgi JS kurulunca (data-hazir)
   .tc::before'un yerini alır; JS yoksa, hareket azaltmada ya da ölçüm başarısız olursa çizili durur (son hâl). */
.yt-rota { position: relative; isolation: isolate; }
.yt-rota-svg { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.yt-rota-iz, .yt-rota-dolgu, .yt-rota-kol path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.yt-rota-iz { stroke: color-mix(in srgb, var(--green-600) 24%, transparent); stroke-width: 3; }
.yt-rota-dolgu { stroke: var(--green-600); stroke-width: 3; }
/* Dallar (kitle kartları, işlem adımları, bölüm başlıkları): hat kendilerine ulaşınca 0,8 sn'de çizilir */
.yt-rota-kol path { stroke: var(--green-600); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease-giris); }
.yt-rota-kol circle { fill: var(--green-600); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .3s var(--ease-giris) .55s; }
.yt-rota-kol[data-yanik] path { stroke-dashoffset: 0; }
.yt-rota-kol[data-yanik] circle { transform: scale(1); }
/* Şerit işaretleri (eşkenar dörtgen; .tc-asama ile aynı dil): hat ulaşınca dolar */
.yt-rota-isaret { fill: var(--surface-page); stroke: var(--green-600); stroke-width: 2; transition: fill .3s var(--ease-etiket); }
.yt-rota-isaret[data-yanik] { fill: var(--green-600); }
/* 560 px altında şerit ekranın 5 px içindedir (kontrol.js, data-dar): ince kenar ve küçük uç noktası, metne değmesin */
.yt-rota[data-dar] .yt-rota-isaret { stroke-width: 1.5; }
.yt-rota[data-dar] .yt-rota-basi { stroke-width: 1.5; }
/* Hattın ucu: altın nokta, yalnız kaydırırken (hareket azaltmada yok) */
.yt-rota-basi { fill: var(--enerji-darbe); stroke: var(--surface-page); stroke-width: 2; }
.yt-rota-halo { fill: var(--enerji-darbe); opacity: .28; }
/* Kilometre taşı düğümleri ve işlem adımları hat ulaşana dek sönüktür; hat ulaşınca yanar */
.yt-rota[data-hazir] .tc::before { display: none; }
.yt-rota[data-hazir] .tc-dugumler > li:not([data-yanik]) { color: var(--ink-muted); }
.yt-rota[data-hazir] .tc-dugumler > li:not([data-yanik])::before { background: var(--surface-card); color: var(--ink-muted); box-shadow: 0 0 0 3px var(--surface-page), inset 0 0 0 1.5px var(--line-strong); }
.yt-rota[data-hazir] .tc-dugumler > li.tc-altin:not([data-yanik])::before { box-shadow: 0 0 0 3px var(--surface-page), inset 0 0 0 1.5px var(--line-strong); }
.yt-rota[data-hazir] .yt-islem .adimlar > li:not([data-yanik])::before { background: var(--surface-card); color: var(--ink-muted); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.yt-rota[data-hazir] .yt-islem .adimlar > li:not([data-yanik])::after { background: var(--line); }
.yt-rota[data-hazir] .yt-islem .adimlar > li[data-yanik]::after { background: var(--green-600); }
.yt-rota[data-hazir] .tc-dugumler > li, .yt-rota[data-hazir] .tc-dugumler > li::before { transition: color .35s var(--ease-etiket), background-color .35s var(--ease-etiket), box-shadow .35s var(--ease-etiket); }
.yt-rota[data-hazir] .yt-islem .adimlar > li::before, .yt-rota[data-hazir] .yt-islem .adimlar > li::after { transition: color .35s var(--ease-etiket), background-color .35s var(--ease-etiket), box-shadow .35s var(--ease-etiket); transition-delay: calc(var(--s, 0) * 110ms + 300ms); }
@media (prefers-reduced-motion: reduce) {
  .yt-rota-kol path, .yt-rota-kol circle, .yt-rota-isaret, .yt-rota[data-hazir] .tc-dugumler > li, .yt-rota[data-hazir] .tc-dugumler > li::before,
  .yt-rota[data-hazir] .yt-islem .adimlar > li::before, .yt-rota[data-hazir] .yt-islem .adimlar > li::after { transition: none; }
}

/* Kilometre taşları: 13 numaralı düğüm ve 4 aşama işareti. Hattın kendisi rotanın parçasıdır (yukarıda); JS yokken
   .tc::before tam boy yeşil çizgi olarak durur. */
.tc { --tc-x: 14px; position: relative; }
.tc::before { content: ""; position: absolute; left: calc(var(--tc-x) - 1px); top: 8px; width: 2px; height: calc(100% - 22px); background: var(--green-600); }
.tc-liste { position: relative; display: grid; gap: var(--space-8); margin: 0; counter-reset: tc; }
/* Aşama etiketi: çizgi üstünde küçük eşkenar dörtgen işaret */
.tc-asama { position: relative; padding-left: 44px; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.tc-asama::before { content: ""; position: absolute; z-index: 2; left: calc(var(--tc-x) - 5px); top: 3px; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--green-600); background: var(--surface-page); transform: rotate(45deg); }
.tc-dugumler { display: grid; gap: var(--space-5); margin: var(--space-4) 0 0; }
.tc-dugumler > li { counter-increment: tc; position: relative; min-height: 28px; padding: 2px 0 0 44px; font-size: 16px; line-height: 24px; color: var(--ink); }
/* Yanık düğüm: sıra numarası (01–13) action zemininde; son düğüm altın */
.tc-dugumler > li::before { content: counter(tc, decimal-leading-zero); position: absolute; z-index: 2; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: var(--ink-on-action); font-family: var(--font-display); font-size: 11px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--surface-page); }
.tc-altin { font-family: var(--font-display); font-weight: 600; }
.tc-dugumler > li.tc-altin::before { background: var(--enerji-darbe); color: var(--ink); box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--gold-200); }
.tc-grup--son .tc-asama { color: var(--birim); }
.tc-grup--son .tc-asama::before { border-color: var(--olcu-enerji); }
@media (max-width: 1000px) {
  .yt-cizgi-ic { grid-template-columns: minmax(0, 1fr); }
  .yt-cizgi-yan { position: static; }
}

/* ---------- 4 · Kitle kartları: düğmeler kartın dibinde hizalı ---------- */
.yt-kitle .kitle { display: flex; flex-direction: column; }
.yt-kitle .kitle > * + * { margin-top: var(--space-3); }
.yt-kitle .kitle .dugmeler { margin-top: auto; padding-top: var(--space-6); }

/* ---------- 5 · Yatırımcı hizmetleri bandı ---------- */
/* site.css ardışık düz bölümün üst boşluğunu sıfırlar; bant, renkli kitle bölümünden sonra dengeli boşlukla durur */
.bolum.yt-kitle + .bolum.yt-hizmet:not(.bolum-kart) { padding-block: clamp(56px, 7vw, 96px); }
.yt-hizmet-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: var(--space-4) var(--space-10); align-items: center; padding-block: var(--space-8); border-block: 1px solid var(--line); }
.yt-hizmet-ic .h2 { font-size: clamp(26px, 2.6vw, 36px); }
@media (max-width: 1000px) { .yt-hizmet-ic { grid-template-columns: minmax(0, 1fr); } }
/* İşlem süreci, kriterler bandından (bolum-kart) sonra gelir: üst boşluk geri verilir */
#kriterler + .bolum.yt-islem { padding-top: clamp(80px, 10vw, 144px); }

/* ---------- 6 · Belge hazırlık listesi: ilerleme hattı düğmeye bağlanır ---------- */
.yt-kontrol { --hat-x: 12px; gap: var(--space-5); padding: clamp(24px, 3vw, 40px); border-color: var(--line-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.yt-kontrol-govde { position: relative; display: grid; gap: var(--space-8); padding-left: 44px; }
.yt-alan { margin: 0; padding: 0; border: 0; min-width: 0; }
/* Dikey hat: listenin yanından düğmenin ortasına kadar iner; dolgu --oran ile (her işaret 1/12) */
.yt-hat { position: absolute; left: calc(var(--hat-x) - 1.5px); top: 4px; bottom: 22px; width: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.yt-hat span { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--oran, 0)); transition: transform var(--sure-olcu) var(--ease-olcu), background-color var(--sure-etiket) var(--ease-etiket); }
/* Dirsek: hattın ucundan düğmeye yatay bağlantı */
.yt-kontrol-son { position: relative; display: flex; }
html.js .yt-kontrol-son::before { content: ""; position: absolute; top: calc(50% - 1.5px); left: calc(var(--hat-x) - 44px); width: calc(44px - var(--hat-x)); height: 3px; border-radius: 2px; background: var(--line); transition: background-color var(--sure-etiket) var(--ease-etiket); }
.yt-kontrol[data-tamam] .yt-hat span, html.js .yt-kontrol[data-tamam] .yt-kontrol-son::before { background: var(--enerji-darbe); }
/* 12/12: düğmenin çevresinde altın halka (durağan); tamamlanma anında bir kez genişleyip söner */
.yt-dugme { position: relative; }
.yt-dugme[data-tamam] { box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--enerji-darbe); }
.yt-dugme[data-halka]::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--enerji-darbe); pointer-events: none; animation: yt-halka 1.1s var(--ease-giris) 1 both; }
@keyframes yt-halka { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .yt-dugme[data-halka]::after { display: none; } .yt-hat span { transition: none; } }
.yt-kontrol .kontrol-liste { gap: var(--space-3) var(--space-8); }
.yt-kontrol .kontrol-durum { align-items: center; }
@media (pointer: coarse) { .yt-kontrol .onay { min-height: 44px; align-items: center; } }
@media (max-width: 560px) { .yt-kontrol { padding: var(--space-5) var(--space-4); } .yt-kontrol-govde { padding-left: 36px; } .yt-kontrol { --hat-x: 10px; } }
@media (max-width: 560px) { html.js .yt-kontrol-son::before { left: calc(var(--hat-x) - 36px); width: calc(36px - var(--hat-x)); } }

/* ---------- 7 · Devam eden projeler bağlantısı ---------- */
/* Tek başına duran bağlantı: kutusu ≥ 44 px (gövde satırı 26 px + 9 px iç boşluk), eksi dış boşlukla yerleşim aynı kalır;
   p esnek kutu yapılır ki bağlantının eksi boşluğu üstteki/alttaki boşluklarla birleşmesin. */
.yt-devam { display: flex; margin-bottom: var(--space-6); font-weight: 500; }
.yt-devam a { padding-block: 9px; margin-block: -9px; }