/* React Bits, MaskedHeading (JS + CSS) */ .masked-heading { position: relative; width: 100%; margin: 0; /* ğ / y kuyrukları line-box dışına sarkmasın; alan içinde kalsın */ --mh-descender: 0.24em; padding: 0 0 var(--mh-descender); overflow: hidden; box-sizing: border-box; font-family: var(--font-statement), system-ui, sans-serif; text-wrap: balance; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" on, "cv11" on; font-variation-settings: "wght" 700; } .masked-heading__measure { display: block; color: transparent; overflow: visible; line-height: inherit; } .masked-heading__word { display: inline-block; white-space: pre; vertical-align: baseline; overflow: visible; } /* Kelime arası boşluk artık sözde öğeyle değil, gerçek bir metin düğümüyle geliyor (js/masked-heading.js). Sözde öğe içeriği DOM'da bulunmadığı için başlık ekranda doğru görünürken metin içeriği kelimeleri bitişik okuyordu. */ .masked-heading__baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; } /* Betik bu svg'yi başlığın içinde değil, sonunda tutuyor; sıfır boyutlu ve çizilmeyen bir tanım katmanı olduğu için konumu önemsiz, left/top yine de sabitlenip belge akışından tamamen çıkarılıyor. */ .masked-heading__defs { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; } /* inset:0 padding kutusunu da kaplar → kuyruk medya dolgusu içinde kalır */ .masked-heading__reveal { position: absolute; inset: 0; display: block; pointer-events: none; } .masked-heading__clip { position: absolute; inset: 0; display: block; } .masked-heading__media { position: absolute; inset: 0; display: block; } /* Katman terfisi yalnızca sürüklenme döngüsü dönerken istenir; sürekli açık bırakmak, ekran dışındaki başlıklar için de GPU belleği tutuyordu. js/masked-heading.js bu sınıfı görünürlüğe göre açıp kapatır. */ .masked-heading.is-drifting .masked-heading__media { will-change: transform; } .masked-heading__source { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } /* Sayfa yerleşimi, galeri sonuna gömülü, ayrı blok değil */ .masked-embed { display: flex; flex-direction: column; gap: 0; margin-top: clamp(1.25rem, 3vw, 2rem); padding: 0; overflow: visible; background: transparent; } /* Negatif margin kuyrukları bir sonraki satırda kesiyordu */ .masked-embed .masked-heading + .masked-heading { margin-top: 0.02em; } @media (max-width: 700px) { .masked-embed { margin-top: 1rem; } .masked-heading { --mh-descender: 0.28em; font-variation-settings: "wght" 680; } } @media (prefers-reduced-motion: reduce) { .masked-heading__media { will-change: auto; } }