icinde seviyesinde duran bir blok; genisligi zaten kaydirma cubugu HARIC gorunum genisligi. `100vw` kaydirma cubugu genisligi kadar yatay tasma uretirdi (bu temada .k-container disindaki bolumler -- .k-hero dahil -- ayni sekilde calisiyor). Olculdu: 390/768/1024/1440/1920'de scrollWidth == clientWidth. ⚠ ORAN 43/24, 16/9 DEGIL. Kaynak 5504x3072 = tam olarak 43:24 (1.7917). `16/9` yazsaydik object-fit:cover yatayda ~%0.8 kirpardi; 43/24 ile KIRPMA SIFIR. Turevler de 43'un katlarinda uretildi (1290/1935/2795), yani her boyutta tam sayi yukseklik. ⚠ `100vh` / `min-height:100vh` KULLANILMIYOR -- mobil tarayici cubuklari yuzunden zipliyor. Yukseklik yalnizca orandan geliyor. ⚠ `max-height` de KULLANILMIYOR: devreye girdiginde object-fit:cover dikeyde kirpar ve metnin ALTINDAKI PIKSELLER gorunum yuksekligine gore degisir -- yani kontrast garantisi gorunum yuksekligine bagimli hale gelirdi. Oran sabit, olcum deterministik. ⚠ KOYU YER TUTUCU ZEMIN .kvl-mband USTUNDE DEGIL .kvl-mband__pic USTUNDE. Ilk surumde bolumun kendisindeydi; yigin duzeninde (metin gorselin ALTINDA) metin o koyu zeminin uzerine dusuyordu ve grey-900 murekkep ink zemin uzerinde ~1.3:1 okunuyordu. Zemin yalnizca fotografin kutusunda. ⚠ METIN KONUMU KIRPILMAMIS KAREDEN YENIDEN OLCULDU (piksel, tahmin degil). Beyaz metin, ortalanmis blok, bant yuksekliginin yuzdesine gore (en aydinlik %5 / en aydinlik %1): y 0% -> 5.05 / 1.01 tavan armaturleri blogun icinde y 8% -> 5.99 / 1.02 armatur kuyrugu hala iceride y 12% -> 7.27 / 1.92 y 16% -> 6.34 / 5.75 <-- SECILEN: tavan ile ekran arasindaki duz beton duvar, armaturlerin ALTINDA, ekranin USTUNDE y 20% -> 5.74 / 4.88 y 24% -> 4.89 / 1.65 aplikler giriyor y 40%+ -> 2.2 ve alti acik mese masa, AA IMKANSIZ ⛔ Renkli kaplama / gradyan filtre YOK -- fotografin kendi rengi. ⛔ Parallax / ken-burns / otomatik hareket YOK. ⚠ 768px ALTINDA UZERINE YAZILMIYOR. 390px'de 43:24 bant 218px kalir. Daha kare mobil kirpmalar (4:3, 3:2, 5:4, 16:9 -- dordu de olculdu) tavan armaturlerini ve pencere gogunu kadraja sokuyor: en iyi konumda bile en aydinlik %5 icin 2.5:1. Karartmak fotografi yok etmek olurdu. Metin gorselin ALTINA iniyor: beyaz sayfa zemininde grey-900 = 14.1:1. ========================================================================== */ .kvl-mband { position: relative; /* r61: ustteki Essentials paftasina BITISIK. Eskiden `var(--section-y)` idi ve dogruydu -- o zaman Essentials bandi sayfa zeminiyle ayni renkti, marj iki bolum arasindaki sinirin yerini tutuyordu. R59 ile Essentials pafta zemini aldi; sinir artik zeminin kendisinde, marj amacsiz beyaz serit birakiyordu. ⚠ ALT kenar degismedi: altta beyaz zeminli Ankara blogu var, orada bosluk hala gorevini yapiyor. */ margin-top: 0; } .kvl-mband__pic { position: relative; display: block; background: var(--ink); /* gorsel yuklenene kadar kutu koyu kalsin */ } /* ⚠ VINYET -- kullanici istegi ("alttan ustten vignet, black"). YANLARDAN DEGIL, yalnizca ust ve alt. TEK katman, tek psodo-oge. ⚠ GORSELE GOMULMEDI, CSS'te: (a) 390px'den 1920px'e bant yuksekligi 3 kat degisiyor, gomulu vinyetin orani her boyutta bozulurdu, (b) geri alinabilir, (c) ayni dosya baska yerde vinyetsiz kullanilir. ⚠ ORTA BOLGE (%34-%68) TAMAMEN SEFFAF: masa ve sehir manzarasi karartilmiyor. Sahne zaten alacakaranlik; fazlasi camur yapar. ⚠ Ust alttan GUCLU degil, ust metnin oturdugu taraf oldugu icin daha GENIS yayiliyor (%34'e kadar); alt daha kisa (%68'den sonra) ama biraz daha yogun -- alt kenarda zemin/hali acik gri ve bandin bir sonraki (beyaz) bolume gecisini yumusatiyor. ⚠ pointer-events:none -- altindaki baglantiyi engellemez. */ .kvl-mband__pic::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .30) 20%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .32) 82%, rgba(0, 0, 0, .60) 100% ); } .kvl-mband__img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 2; /* mobil kirpma (kaynak 4608x3072) */ object-position: 50% 50%; } /* Yigin duzen (<768px): metin gorselin ALTINDA, sayfa zemininde. */ .kvl-mband__text { padding: var(--space-8) var(--gutter) 0; text-align: center; color: var(--text-primary); } .kvl-mband__t { margin: 0; font-family: var(--text-heading-font); font-size: clamp(26px, 6.6vw, 34px); line-height: 1.06; letter-spacing: var(--ls-tight); font-weight: var(--weight-semibold); color: var(--text-heading); } .kvl-mband__link { display: inline-block; margin-top: var(--space-5); font-size: var(--size-body); line-height: var(--lh-body); letter-spacing: var(--ls-ui); color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .kvl-mband__link::after { content: '\2009\203A'; /* ince bosluk + tek acili tirnak = baglanti isareti */ display: inline-block; transition: transform var(--duration-fast) var(--ease-standard); } .kvl-mband__link:hover { color: var(--text-link-hover); } .kvl-mband__link:hover::after { transform: translateX(2px); } /* -------------------------------------------------------------------------- >= 768px: kirpilmamis YUKSEK bant, metin fotografin uzerinde. 768px'de bant 429px, 1440'ta 796px, 1920'de 1061px. -------------------------------------------------------------------------- */ @media (min-width: 768px) { .kvl-mband__img { aspect-ratio: 43 / 24; } /* Bant yukseldikce ayni yuzde daha cok PIKSEL kaplar; masaustunde vinyet biraz daha guclu ama hala olculu. Mobilde (temel deger) daha hafif -- bant dar oldugu icin ayni yuzde orada zaten agir hissediliyor. */ .kvl-mband__pic::after { background: linear-gradient( to bottom, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .34) 20%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .34) 82%, rgba(0, 0, 0, .64) 100% ); } .kvl-mband__text { position: absolute; left: 0; right: 0; top: 16%; /* yuzde: bant yuksekligiyle birlikte olceklenir */ z-index: 2; padding: 0 var(--gutter); color: var(--text-inverse); } .kvl-mband__t { /* Apple olcegi: bant yukseldikce baslik da buyur. 768'de 34px, 1440'ta 58px, 1920'de 60px (tavan). */ font-size: clamp(30px, 4vw, 60px); line-height: 1.04; color: var(--text-inverse); } .kvl-mband__link { margin-top: clamp(var(--space-5), 1.4vw, var(--space-7)); font-size: var(--size-body-lg); color: var(--text-inverse); } /* ⛔ Fotograf uzerinde hover'da RENK degistirmek kontrasti dusurur (krem/bordo koyu fotograf uzerinde AA'nin altina iner). Renk beyaz kaliyor, yalnizca isaret 2px kayiyor. */ .kvl-mband__link:hover { color: var(--text-inverse); } /* Bordo odak halkasi koyu fotograf uzerinde okunmaz; acik halka. */ .kvl-mband__link:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); } } @media (prefers-reduced-motion: reduce) { .kvl-mband__link::after, .kvl-mband__link:hover::after { transform: none; transition: none; } } /* -------------------------------------------------------------------------- IKI KATEGORI BAGLANTISI (.kvl-mband__links) Bant artik Toplanti Masalari + Toplanti Koltuklari terimlerine birden baglaniyor (gerekce ve olcum: template-parts/home/meeting-band.php basligi). ⚠ AYIRAC YOK: dikey cizgi, nokta, egik cizgi, altcizgi -- hicbiri. Iki baglanti yalnizca BOSLUKLA ayrilir; `.kvl-mband__link::after` zaten her birine tekil acili tirnak isareti koyuyor, ikinci bir grafik isaret ritmi bozardi. ⚠ `flex-wrap` sart: 390px'de iki uzun TR kategori adi tek satira sigmaz, alt alta iner. `align-items: baseline` iki farkli uzunluktaki etiketin taban cizgisini hizada tutar. ⚠ Ust marj artik BAGLANTIDA degil SARMALAYICIDA: iki baglantinin her birine ayri marj verilseydi sarma durumunda (alt alta) ikisinin arasi da o marj kadar acilirdi. Satir arasi `gap`'ten geliyor. -------------------------------------------------------------------------- */ .kvl-mband__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-4) var(--space-7); margin-top: var(--space-5); } /* Ozgulluk (0,2,0) taban ve medya sorgusundaki `.kvl-mband__link` marjini ikisini de ezer -- marj sarmalayiciya tasindi. */ .kvl-mband__links .kvl-mband__link { margin-top: 0; } @media (min-width: 768px) { /* Fotograf uzerindeki blokta baslikla arasi, tek baglantili surumdeki ile AYNI kalsin diye ayni clamp. */ .kvl-mband__links { margin-top: clamp(var(--space-5), 1.4vw, var(--space-7)); } }