/* ═══════════════════════════════════════════════════════════════════ SECTION · MOZAİK · scope: .hm-mozaik ═══════════════════════════════════════════════════════════════════ */ .hm-mozaik{position:relative;overflow:hidden;background:var(--bg); height:100svh;min-height:620px} .t52-home .hm-mozaik{padding-top:0;padding-bottom:0} /* ── SAHNE · döndürülmüş ızgara ────────────────────────────────────── Referans: rotate(-28deg). Döndürülmüş dikdörtgen kabı doldurabilsin diye sahne kaptan geniş tutulur (%150 en / %190 boy) ve merkeze oturtulur; aksi hâlde köşelerde boşluk kalır. */ /* Yükseklik İÇERİKTEN gelir (satır sayısı × kare boyu). Sabit %190 verildiğinde satırlar ortalanıp alt-üstte boş bant bırakıyordu. */ .hm-mozaik .sahne{position:absolute;top:50%;left:50%; width:150%;height:auto; transform:translate(-50%,-50%) rotate(-28deg); display:flex;flex-direction:column;justify-content:center; gap:var(--bo-4);pointer-events:none} .hm-mozaik .satir{display:flex;flex:none;gap:var(--bo-4); will-change:transform} .hm-mozaik .kume{display:flex;flex:none;gap:var(--bo-4)} /* kare oranı referanstan: 360 / 466.66 */ .hm-mozaik .kare{flex:none;display:block;overflow:hidden; width:clamp(210px,25vw,400px);aspect-ratio:360 / 467; /* referans: 1440'ta 360px = %25 */ border-radius:2px;background:var(--panel)} /* RENKLİ DOKU — kareler artık gri tona indirilmiyor; fotoğraflar kendi rengiyle okunuyor. Bütünlüğü grayscale değil, ortak parlaklık/kontrast ayarı + üstteki perde sağlıyor. */ .hm-mozaik .kare img{display:block;width:100%;height:100%;object-fit:cover; filter:brightness(.94) contrast(1.04) saturate(1.02)} html:not(.dark) .hm-mozaik .kare img{filter:brightness(1.02) contrast(.98) saturate(1.04)} /* ── PERDE ────────────────────────────────────────────────────────── Şerit tek başına gürültülü; perde onu zemine bağlar ve metni okunur kılar. Referanstaki yeşil yerine sitenin kendi koyu tonu kullanılır. */ .hm-mozaik .perde{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(130% 100% at 46% 46%, rgba(12,13,15,.04) 0%, rgba(12,13,15,.16) 62%, rgba(12,13,15,.30) 100%), linear-gradient(180deg, rgba(12,13,15,.16) 0%, rgba(12,13,15,0) 38%, rgba(12,13,15,.26) 100%)} html:not(.dark) .hm-mozaik .perde{ background: radial-gradient(130% 100% at 46% 46%, rgba(243,243,242,.04) 0%, rgba(243,243,242,.16) 62%, rgba(243,243,242,.30) 100%), linear-gradient(180deg, rgba(243,243,242,.16) 0%, rgba(243,243,242,0) 38%, rgba(243,243,242,.26) 100%)} /* ── YAZI ─────────────────────────────────────────────────────────── Referans düzeni: küçük satır sol-ortada, dev başlık sağ-altta. */ /* .yazi artık yalnız mutlak konumlu dev başlığı taşıyor — üstteki tek satırlık giriş metni kaldırıldı (05.08.2026), flex kurgusuna gerek kalmadı. */ .hm-mozaik .yazi{position:absolute;inset:0;z-index:2; padding:0 calc(var(--edge) + var(--bo-5))} /* ALT SÖNÜM · başlık fotoğrafın üstünde duruyor. Ölçüldü: light modda akan gradyan satır zemine karışıp 1.58:1'e düşüyordu — AA'nın büyük metin için istediği 3:1'in çok altı (dark'ta 11.47:1, sorun yoktu). Genel perdeyi güçlendirmek şeridi yok ediyordu. Sağ alt köşeye radyal sönüm denendi: 1.58 → 2.49:1, yine yetmedi; köşeyi 3:1'e çıkarmak için gereken yarıçap mozaiğin dörtte birini yutuyordu. Çözüm: İSTANBUL bölümündeki alt sönümün aynısı — şerit aşağı doğru sayfa zeminine karışır, başlık temiz zemine oturur. Hem kontrast çözülür hem iki bölüm aynı dili konuşur. z-index:-1 → .yazi'nin kendi yığın bağlamı içinde perdenin ÜSTÜNDE, metnin ALTINDA kalır. */ .hm-mozaik .yazi::before{content:"";position:absolute;left:0;right:0;bottom:0; height:46%;z-index:-1;pointer-events:none; background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 22%, transparent) 30%, color-mix(in srgb, var(--bg) 66%, transparent) 56%, var(--bg) 74%)} html:not(.dark) .hm-mozaik .yazi::before{ background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 30%, rgba(255,255,255,.46) 56%, rgba(255,255,255,.80) 74%)} .hm-mozaik .dev{position:absolute;right:calc(var(--edge) + var(--bo-5)); bottom:calc(var(--edge) + var(--bo-5));margin:0;text-align:right; /* SİTE FONTU · Figtree. Önce Playfair Display (serif) kullanılmıştı — springs.estate'i birebir eşleştirmek için. Ama sitenin kimliği baştan sona Figtree; tek bölümde ayrı bir aile kullanmak tip sistemini deliyordu. Ölçü, ağırlık ve renk dili de artık ayırt edici değil: sayfadaki bütün büyük başlıklar tek ölçüde (--bas-xl), tek ağırlıkta (--bas-w) ve aynı «düz satır + akan gradyan satır» kalıbında. Bu bölümün tek farkı KONUM: sağ alta yaslı. Önce tamamı düz şampanyaydı — sayfadaki tek istisna oydu, kaldırıldı. */ font-family:var(--sans); font-size:var(--bas-xl); line-height:1.06;letter-spacing:-.028em;font-weight:var(--bas-w); color:var(--fg);text-wrap:balance} /* ── AŞAĞI OKU · referansta sol altta ── */ .hm-mozaik .asagi{position:absolute;left:calc(var(--edge) + var(--bo-5)); bottom:calc(var(--edge) + var(--bo-5));z-index:2; width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; box-sizing:border-box;border:1px solid var(--line-strong);border-radius:999px; color:var(--fg);font-size:14px;text-decoration:none; transition:background-color .24s ease,border-color .24s ease,color .24s ease} .hm-mozaik .asagi:hover{background:var(--gold-soft);border-color:var(--aksan-2);color:var(--aksan-2)} .hm-mozaik .asagi:focus-visible{outline:2px solid var(--aksan-2);outline-offset:3px} @media(max-width:900px){ /* 820 → 900 · site geneli tek kırılma noktası (18.09.2026) */ .hm-mozaik{height:88svh;min-height:520px} .hm-mozaik .sahne{width:210%;height:210%} .hm-mozaik .yazi{padding:0 var(--bo-5)} .hm-mozaik .dev{right:var(--bo-5);bottom:calc(var(--bo-7) + 44px)} .hm-mozaik .asagi{left:var(--bo-5);bottom:var(--bo-5)} } @media(prefers-reduced-motion:reduce){ .hm-mozaik .satir{transform:none !important} }