/* ═══════════════════════════════════════════════════════════════════ SECTION · YIĞIN · scope: .hm-yigin ═══════════════════════════════════════════════════════════════════ */ .hm-yigin{background:var(--bg)} .t52-home .hm-yigin{padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(28px,3vw,48px)} /* ⚠️ overflow BURADA visible KALMALI — sticky bir atada kesilirse çalışmaz. Yalnız yatay dolgu eklendi; kesme yok, yapışma bozulmuyor. */ .hm-yigin .yigin{position:relative;max-width:var(--maxw);margin:0 auto} .hm-yigin{--yigin-bosluk:var(--bo-6); --yigin-adim:36px} .hm-yigin .kat{position:sticky; top:calc(var(--rail-ust, 14px) + var(--rail-h, 72px) + var(--yigin-bosluk) + var(--i) * var(--yigin-adim)); display:block} .hm-yigin .kat + .kat{margin-top:16svh} .hm-yigin .kutu{position:relative;display:block;overflow:hidden;isolation:isolate; margin:0 var(--edge); transform-origin:50% 0; filter:blur(var(--yig-bulanik, 0px)); will-change:transform,filter,clip-path; height:clamp(420px, 34vw, 480px); border-radius:var(--rail-r); text-decoration:none;color:inherit} /* PERDE KATMANI · sönme buradan gelir, kartın opacity'sinden DEĞİL. z-index 6: yazının (2) ve okunabilirlik perdesinin (1) de üstünde — kart arkaya düştüğünde içindeki her şey birlikte söner. */ .hm-yigin .kutu::after{content:"";position:absolute;inset:0;z-index:6; pointer-events:none;background:var(--bg); opacity:var(--yig-perde, 0);border-radius:inherit} /* ── FOTOĞRAF · kutuyu tamamen kaplar, oran ASLA esnetilmez ────────── Kutu 1600×864'ten daha dar/uzun olabilir; cover kırpar, germez. object-position yatayda sağa kaydırılıyor: yazı solda duruyor, yüz sağda kalsın diye. */ .hm-yigin .ph{position:absolute;inset:0;z-index:0;display:block} .hm-yigin .ph img{width:100%;height:100%;object-fit:cover;object-position:72% 42%;display:block} .hm-yigin .ph-koyu{display:none} html.dark .hm-yigin .ph-acik{display:none} html.dark .hm-yigin .ph-koyu{display:block} /* ── PERDE · tek yönlü, soldan gelir ──────────────────────────────── Okunabilirlik gölgeyle değil perdeyle çözülür. Yazı bandında opaklık ≥ %86, sağa doğru tamamen kaybolur. */ .hm-yigin .perde{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg, color-mix(in srgb, var(--surface) 94%, transparent) 0%, color-mix(in srgb, var(--surface) 88%, transparent) 34%, color-mix(in srgb, var(--surface) 40%, transparent) 58%, transparent 78%)} html.dark .hm-yigin .perde{ background:linear-gradient(100deg, color-mix(in srgb, #0c0d0f 92%, transparent) 0%, color-mix(in srgb, #0c0d0f 86%, transparent) 34%, color-mix(in srgb, #0c0d0f 38%, transparent) 58%, transparent 78%)} /* ── YAZI · sol alt, hero ile AYNI dikey çizgi ─────────────────────── */ /* Yazı dolgusu KUTUYA GÖRE. Eskiden sayfa kenarına göreydi (--edge + --bo-5) çünkü kutu kenardan kenaraydı; çerçeveye girince o değer kutunun kendi dolgusunun ÜSTÜNE binip yazıyı iki kez içeri itiyordu. Artık ölçü kutunun içinden veriliyor. */ .hm-yigin .wrap{position:relative;z-index:2;height:100%; display:flex;align-items:flex-end; padding:0 clamp(24px, 3vw, 56px) clamp(24px, 3vw, 48px)} .hm-yigin .txt{max-width:min(54%, 680px);min-width:0} .hm-yigin .cizgi{display:block;width:24px;height:1px;background:var(--aksan-2);margin:0 0 var(--bo-4)} /* line-height 1.04 → 1.06 (18.09.2026): büyük başlık sayfada dokuz yerde basılıyor, altısı 1.06 üçü 1.04'tü — tek ölçek. text-wrap:balance da eklendi. */ .hm-yigin h2{font-size:calc(var(--bas-xl) * 1.15);line-height:1.06;letter-spacing:-.028em; font-weight:var(--bas-w);color:var(--fg);margin:0 0 var(--bo-4);text-wrap:balance} .hm-yigin .tek{margin:0 0 var(--bo-5);font-size:calc(var(--yazi-l) * 1.16);line-height:1.62; color:var(--muted);text-wrap:pretty;max-width:62ch} .hm-yigin .bag{display:inline-flex;align-items:center;gap:var(--bo-2); font-size:var(--yazi-m);font-weight:600;letter-spacing:.02em;color:var(--fg); padding-bottom:6px;border-bottom:1px solid var(--line); transition:border-color .24s ease,gap .24s ease} /* Hover'da yalnız çizgi rengi ve okun payı değişir; kutu kımıldamaz. */ .hm-yigin .kutu:hover .bag{border-color:var(--aksan-2);gap:var(--bo-4)} .hm-yigin .kutu:focus-visible{outline:2px solid var(--aksan-2);outline-offset:-4px} /* Hareket azaltma: geri çekilme tamamen kapanır — paneller ölçüsünü ve netliğini korur, yalnız üst üste binerler. */ @media(prefers-reduced-motion:reduce){ .hm-yigin .kutu{transform:none;filter:none;clip-path:none} .hm-yigin .kutu::after{opacity:0} } /* Eski çerçevede 1024px'te ayrı bir kademe vardı; kutu bir tık kısalıyor, yazı sütunu genişliyordu. Yığında da aynı kademe geri geldi. */ @media(max-width:1024px){ .hm-yigin .kutu{height:clamp(420px, 46vw, 470px)} .hm-yigin .txt{max-width:min(62%, 520px)} } @media(min-width:901px){ .t52-home:not(.kutu) .hm-yigin .ph img{transform:scale(1.42);transform-origin:100% 30%} .t52-home:not(.kutu) .hm-yigin .p-piezo .ph img{transform:scale(1.28)} .t52-home:not(.kutu) .hm-yigin .p-meme .ph img{transform:scale(1.3)} .t52-home:not(.kutu) .hm-yigin .perde{background:linear-gradient(100deg, color-mix(in srgb, var(--surface) 94%, transparent) 0%, color-mix(in srgb, var(--surface) 86%, transparent) 30%, transparent 52%)} html.dark .t52-home:not(.kutu) .hm-yigin .perde{background:linear-gradient(100deg, color-mix(in srgb, #0c0d0f 92%, transparent) 0%, color-mix(in srgb, #0c0d0f 84%, transparent) 30%, transparent 52%)} } /* ── DAR EKRAN ────────────────────────────────────────────────────── Yapışma KORUNUR (istenen davranış alt alta birleşme). Yalnız yükseklik düşer, yazı sütunu genişler ve perde daha erken doyar — 390px'te yazı bandı kutunun neredeyse tamamı. */ @media(max-width:900px){ /* Dar ekranda rail 64px'e iniyor (:root'ta ayarlı) — formül aynı kaldığı için yeniden yazmaya gerek yok, yalnız boşluk ve adım bir kademe düşer. */ .hm-yigin{--yigin-bosluk:var(--bo-4); --yigin-adim:26px} .hm-yigin .kutu{height:clamp(440px, 124vw, 480px)} .hm-yigin .wrap{padding:0 var(--bo-5) var(--bo-5)} /* Kenar payı --edge ile geliyor (1100px altı 32px, 767px altı 20px) — üst çubuk da aynı değeri kullanıyor, ikisi hizada kalıyor. Kutular arası boşluk bir kademe düşer, yığın fazla dağılmasın. */ .hm-yigin .kat + .kat{margin-top:14svh} .hm-yigin .txt{max-width:100%} .hm-yigin .ph img{object-position:64% 34%} .hm-yigin .perde{background:linear-gradient(170deg, color-mix(in srgb, var(--surface) 30%, transparent) 0%, color-mix(in srgb, var(--surface) 84%, transparent) 46%, color-mix(in srgb, var(--surface) 95%, transparent) 100%)} html.dark .hm-yigin .perde{background:linear-gradient(170deg, color-mix(in srgb, #0c0d0f 28%, transparent) 0%, color-mix(in srgb, #0c0d0f 82%, transparent) 46%, color-mix(in srgb, #0c0d0f 94%, transparent) 100%)} } /* Hareket azaltma: yapışma KAPANIR. Sticky bir animasyon değil ama üst üste binen katmanlar hareket duyarlılığı olan kullanıcıda rahatsız edici; paneller sıradan blok olarak alt alta akar. */ @media(prefers-reduced-motion:reduce){ .hm-yigin .kat{position:static} }