/* =========================================================================== Beylik Kebap — beylikkebap.com 🔴 BÜTÜN RENKLER `:root`TAN. Tek tek kodlanmış renk yok. Sebep ölçülmüş bir hata: Proweb'in /tanitim sayfasına başka bir temadan ikinci bir mavi taşınmıştı, rengi tek tek kurcalamak çözmedi; 16 renk `:root`a bağlanınca çözüldü (runbook §1 Ö11). PALET ESKİ SİTEDEN ALINDI ve korundu: kırmızı #df363c eski CSS'te 10 yerde (haber kutuları, vurgular) altın #ffc833 eski CSS'te haber başlıklarının rengi krem #fffeea eski CSS'in zemin rengi Firma tabelası ve logosu kırmızı-altın; değiştirmek markayı kırmak olurdu. Değişen şey renk değil, KULLANIM: eskiden kırmızı sadece kutu zeminiydi, burada çağrıları taşıyor; krem gövde zemini oldu. 🔴 TİTREME ÖNLEMİ (runbook §9.25): Google Fonts YOK, `html` zemini sitenin kendi zemini, `@view-transition` açık. Üçü de aşağıda. 🔴 HAREKET: bu repoda Framer Motion YOK (PHP, React yok, AGENTS.md kural 3). Karşılığı CSS geçişleri + `@keyframes` + `animation-timeline: view()`. Hepsi dosyanın sonundaki `prefers-reduced-motion` bloğuyla kapanıyor — hareket bir süs, erişilebilirliğin önüne geçmez (runbook §1 Ö11, Ö12). =========================================================================== */ :root { --kor: #1b1412; /* kömür — gövdedeki en koyu zemin */ --kor-ac: #2a1f1b; --gece: #120d0b; --kirmizi: #df363c; /* eski sitenin kendi kırmızısı */ --kirmizi-koy: #b4252b; --altin: #ffc833; /* eski sitenin kendi altını */ --altin-koy: #d9a01f; --murekkep: #241c18; --duman: #6f6159; --cizgi: #e9e0d5; --krem: #fdf8ef; /* eski sitenin krem zemini */ --krem-koy: #f6eddf; --kagit: #ffffff; --golge: 0 1px 2px rgba(36, 28, 24, .07), 0 10px 28px rgba(36, 28, 24, .09); --golge-kalk: 0 3px 8px rgba(36, 28, 24, .13), 0 22px 52px rgba(36, 28, 24, .20); --yuvarlak: 14px; --yuvarlak-s: 9px; --kapsa: 1240px; } /* 🔴 BEYAZ KARE ÖNLEMİ (runbook §9.25/2). Tarayıcı eski sayfayı söküp yeniyi çizene kadar belge kökünün varsayılan rengini boyuyor; sitenin zemini krem olduğu için araya beyaz bir kare giriyordu. Tek satır. */ html { background: var(--krem); } /* 🔴 SAYFA GEÇİŞİ (runbook §9.25/3). Destekleyen tarayıcı kısa bir çapraz geçiş yapıyor, desteklemeyen satırı görmezden geliyor. `reduce motion` açıkken en altta kapatılıyor. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* 🔴 GOOGLE FONTS YOK (runbook §9.25/1). Eski site `Dancing Script` için `fonts.googleapis.com`a gidiyordu ve yazı tipi takası her sayfa geçişinde metni yeniden çizdiriyordu. Buradaki yığın işletim sisteminin kendi fontları — indirme yok, takas yok, titreme yok. */ body { margin: 0; background: var(--krem); color: var(--murekkep); font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* kayan şerit taşmasın */ } img { max-width: 100%; height: auto; display: block; } a { color: var(--kirmizi-koy); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { color: var(--kor); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; } h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); font-weight: 800; } h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; } h3 { font-size: 1.12rem; font-weight: 700; } p { margin: 0 0 1em; } svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 🔴 Klavye odağı GÖRÜNÜR kalmalı. `outline:none` erişilebilirliği sessizce bozar. */ :focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 3px; border-radius: 4px; } .atla { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--kirmizi); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .atla:focus { left: 0; } .kapsa { max-width: var(--kapsa); margin: 0 auto; padding: 0 16px; } /* ------------------------------------------------------------------ üst bant */ .ustbant { background: var(--gece); color: #cdbba8; font-size: 13.5px; padding: 8px 0; } .ustbant .kapsa { display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; } .ustbant .oge { display: inline-flex; gap: 7px; align-items: center; } .ustbant svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--altin); } .ustbant a { color: var(--altin); font-weight: 700; } .ustbant em { font-style: normal; color: #9c8a79; } @media (max-width: 900px) { .ustbant .gizle { display: none; } } /* ------------------------------------------------------------------ başlık */ .baslik { position: sticky; top: 0; z-index: 40; background: rgba(253, 248, 239, .95); backdrop-filter: saturate(170%) blur(10px); border-bottom: 1px solid var(--cizgi); } .baslik .kapsa { display: flex; align-items: center; gap: 18px; min-height: 74px; } .marka { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; line-height: 1; text-decoration: none; } .marka:hover { text-decoration: none; } .marka b { font-size: 1.34rem; letter-spacing: .04em; color: var(--kirmizi); font-weight: 800; } .marka i { font-style: normal; font-size: 1.34rem; letter-spacing: .04em; color: var(--kor); font-weight: 800; } .marka em { grid-column: 1 / -1; font-style: normal; font-size: .68rem; letter-spacing: .34em; color: var(--duman); font-weight: 700; margin-top: 4px; } .menu { margin-left: auto; display: flex; align-items: center; gap: 14px; } .menu ul { display: flex; gap: 1px; list-style: none; margin: 0; padding: 0; } /* 🔴 SEÇİCİ `.menu ul a`, `.menu a` DEĞİL. Sipariş düğmesi de `.menu` içinde duruyor; `.menu a { display:block }` yazılınca o kural (0,1,1) aşağıdaki `.wa-mobil { display:none }` kuralını (0,1,0) yener ve WHATSAPP İKONU İKİ KERE görünür. proweb.com.tr'de CANLIDA, medikalde ve yaylalar'da yerelde yaşandı — üç kez. Kural çift sınıfla yazıldığı için artık yenilemez, ama seçici yine de dar tutuluyor. */ .menu ul a { display: block; padding: 9px 10px; border-radius: var(--yuvarlak-s); color: var(--murekkep); font-weight: 600; font-size: 14.5px; } .menu ul a:hover { background: var(--krem-koy); text-decoration: none; } .menu ul a.acik { color: var(--kirmizi); background: var(--krem-koy); } .menu-dugme { display: none; margin-left: auto; background: none; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-s); padding: 9px; color: var(--kor); cursor: pointer; } .menu-dugme svg { width: 22px; height: 22px; } @media (max-width: 1100px) { .menu-dugme { display: inline-flex; } .menu { position: absolute; inset: 74px 0 auto; margin: 0; display: none; flex-direction: column; align-items: stretch; gap: 10px; background: var(--krem); border-bottom: 1px solid var(--cizgi); padding: 12px 16px 18px; box-shadow: var(--golge); } .menu.goster { display: flex; } .menu ul { flex-direction: column; gap: 2px; } .menu ul a { padding: 12px; font-size: 16px; } } /* ------------------------------------------------------------------ düğmeler */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; background: var(--kirmizi); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; } .dugme:hover { background: var(--kirmizi-koy); text-decoration: none; box-shadow: var(--golge); } .dugme:active { transform: translateY(1px); } .dugme .ikon, .dugme .ikon-wa { width: 18px; height: 18px; flex: 0 0 auto; } .dugme-ana { background: var(--kor); } .dugme-ana:hover { background: var(--gece); } .dugme-altin { background: var(--altin); color: var(--kor); } .dugme-altin:hover { background: var(--altin-koy); } .dugme-wa { background: #1b8a4b; } .dugme-wa:hover { background: #15693a; } .dugme-wa .ikon-wa { fill: currentColor; stroke: none; } .dugme-hayalet { background: transparent; color: var(--kor); border-color: var(--cizgi); } .dugme-hayalet:hover { background: var(--krem-koy); color: var(--gece); } .dugme-ters { background: rgba(255, 255, 255, .13); color: #fff; border-color: rgba(255, 255, 255, .42); } .dugme-ters:hover { background: rgba(255, 255, 255, .24); } .dugme-kucuk { padding: 9px 16px; font-size: 14px; } /* 🔴 WHATSAPP İKİ MOD — ortak/whatsapp.php iki bağlantı birden basıyor, hangisinin görüneceğine BU BLOK karar veriyor. Sunucuda cihaz tahmini yapılmıyor (sayfalar önbellekli, ilk isteği yapanın modu herkese kilitlenirdi). Eşik 601px: mobiweb7'nin `min-[601px]` değeriyle birebir. 🔴 SINIF ADI İKİ KEZ YAZILI, YAZIM HATASI DEĞİL. `.wa-mobil.wa-mobil` seçiciyi (0,2,0) yapıyor ve "element + sınıf" biçimindeki HER kuralı (0,1,1) yeniyor. Sebep ölçülmüş ve ÜÇ KEZ tekrarlanmış bir hata: proweb.com.tr `.menu a { display:block }` → WhatsApp ikonu CANLIDA iki kez medikal `.menu a { display:block }` → aynısı, yerelde yakalandı yaylalar `.yuzen a { display:grid }` → aynısı, yine yerelde Her seferinde "bu sefer dikkat ederim" çözüm olmadı; kuralın kendisi yenilemez hâle getirildi. 🔴 BU SİTEDE WHATSAPP NUMARASI HENÜZ YOK (config.php) — düğme hiç basılmıyor. Kural yine de burada duruyor: numara girildiği an doğru çalışması gerekiyor ve o gün bu bloğu hatırlayacak kimse olmayabilir. */ .wa-mobil.wa-mobil { display: inline-flex; } .wa-masaustu.wa-masaustu { display: none; } @media (min-width: 601px) { .wa-mobil.wa-mobil { display: none; } .wa-masaustu.wa-masaustu { display: inline-flex; } } /* Yüzen şeritte düğmeler dairesel ve ortalanmış; `grid` orada gerekli. */ .yuzen .wa-mobil.wa-mobil, .yuzen .wa-masaustu.wa-masaustu { display: none; } .yuzen .wa-mobil.wa-mobil { display: grid; } @media (min-width: 601px) { .yuzen .wa-mobil.wa-mobil { display: none; } .yuzen .wa-masaustu.wa-masaustu { display: grid; } } /* ------------------------------------------------------------------ bölümler */ .bolum { padding: 72px 0; } .bolum-krem { background: var(--krem-koy); } .bolum-koyu { background: var(--kor); color: #d9c9b8; } .bolum-koyu h2, .bolum-koyu h3 { color: #fff; } .bolum-baslik { margin-bottom: 10px; } .bolum-giris { color: var(--duman); max-width: 74ch; margin: 0 0 34px; font-size: 17px; } .bolum-koyu .bolum-giris { color: #c0ab96; } /* Başlık yanındaki kırmızı çubuk — eski sitenin imzasıydı, korundu. */ .cubuk { position: relative; padding-left: 18px; } .cubuk::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .18em; width: 5px; border-radius: 3px; background: var(--kirmizi); } .sayfabasi { background: var(--kor); color: #d9c9b8; padding: 34px 0 40px; position: relative; overflow: hidden; } .sayfabasi h1 { color: #fff; margin: 12px 0 8px; } .sayfabasi .altbaslik { color: #c0ab96; max-width: 80ch; margin: 0; font-size: 17px; } .kirinti { font-size: 13.5px; color: #a8947f; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .kirinti a { color: var(--altin); } .kirinti em { font-style: normal; color: #a8947f; } .bos-uyari { background: var(--krem-koy); border: 1px dashed var(--cizgi); border-radius: var(--yuvarlak); padding: 18px 20px; color: var(--duman); } .yazi { max-width: 76ch; } .yazi p { font-size: 17.5px; line-height: 1.78; } /* =========================================================================== KAHRAMAN BÖLÜMÜ 🔴 TAM EKRAN FOTOĞRAF KULLANILMADI, bilerek. Elimizdeki en büyük fotoğraf 650x488 (ürün), galeri 599x450 (ölçüldü); tam ekran bir kahramanda retina ekranda bulanık çıkıyor. Onun yerine koyu zemin + ALTTA KAYAN ŞERİT: fotoğraflar kendi ölçülerinde, keskin duruyor ve görsel güç fotoğraf büyüklüğünden değil AKIŞTAN geliyor. Firmadan yüksek çözünürlüklü fotoğraf gelirse `.kahraman` bir arka plan görseli alır; düzen buna hazır. =========================================================================== */ .kahraman { position: relative; background: var(--kor); color: #d9c9b8; overflow: hidden; } /* Arkadaki hareketli ışık — tek bir degrade, GPU'da dönüyor, görsel indirmiyor. Kömür ateşinin rengi: kırmızı + altın. */ .kahraman::before { content: ""; position: absolute; inset: -40% -10%; z-index: 0; background: radial-gradient(42% 46% at 20% 26%, rgba(223, 54, 60, .42), transparent 62%), radial-gradient(46% 50% at 80% 70%, rgba(255, 200, 51, .26), transparent 64%); animation: kor 24s ease-in-out infinite alternate; } @keyframes kor { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.12); } } .kahraman-ic { position: relative; z-index: 2; padding: 74px 0 52px; max-width: 76ch; } .kahraman h1 { color: #fff; } .kahraman .uste { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--altin); font-weight: 700; margin-bottom: 16px; } .kahraman .uste::before { content: ""; width: 34px; height: 2px; background: var(--altin); } .kahraman .slogan { font-size: 1.18rem; color: #d9c9b8; margin-top: 14px; } .kahraman-dugmeler { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; } /* Ölçü satırı — sayılar JS ile sayılıyor (site.js). */ .olcu { display: flex; flex-wrap: wrap; gap: 34px; margin: 38px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); list-style: none; } .olcu b { display: block; font-size: 2.1rem; line-height: 1; color: var(--altin); font-weight: 800; font-variant-numeric: tabular-nums; } .olcu span { font-size: 13.5px; color: #b9a492; } @media (max-width: 900px) { .kahraman-ic { padding: 46px 0 34px; } } /* =========================================================================== KAYAN ŞERİT — sonsuz yatay akış (Ö12 · runbook §9.32) 🔴 LİSTE İKİ KEZ BASILIR (PHP tarafında), CSS yarısı kadar kaydırır. Kopya olmadan akış sonunda boşluk görünür ve "zıplama" olur. Süre `--sure` değişkeniyle sayfadan veriliyor: liste uzadıkça süre de uzuyor, yoksa 12 fotoğraf okunamaz hızda geçiyor. 🔴 Fareyle üzerine gelince DURUYOR: bir yemeğe bakmak isteyen ziyaretçinin akışı kovalaması gerekmesin. Klavyeyle odaklanınca da durur. =========================================================================== */ .serit { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } .serit-ic { display: flex; gap: 14px; width: max-content; animation: kay var(--sure, 60s) linear infinite; } .serit:hover .serit-ic, .serit:focus-within .serit-ic { animation-play-state: paused; } @keyframes kay { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .serit figure { margin: 0; flex: 0 0 auto; width: 300px; border-radius: var(--yuvarlak); overflow: hidden; background: var(--kor-ac); box-shadow: var(--golge); position: relative; } .serit img { width: 300px; height: 225px; object-fit: cover; transition: transform .4s ease, filter .4s ease; } .serit figure:hover img { transform: scale(1.07); filter: saturate(1.12); } .serit figcaption { position: absolute; inset: auto 0 0; padding: 26px 14px 11px; background: linear-gradient(to top, rgba(18, 13, 11, .94), rgba(18, 13, 11, 0)); color: #fff; font-weight: 700; font-size: 14px; } .kahraman .serit { padding-bottom: 52px; } /* =========================================================================== KAYDIRINCA BELİRME — TAMAMEN CSS, JAVASCRIPT YOK (Ö12 · runbook §9.31) 🔴 BU YAYLALARHAFRIYAT'TA ÖNCE JAVASCRIPT İLE YAZILDI VE YANLIŞTI. İlk kurguda `.bel` ögeleri `opacity: 0` ile başlıyor, bir betik kaydırmayı izleyip `.gor` sınıfını ekliyordu. Üç ayrı emniyet katmanına rağmen sayfa test ortamında BEMBEYAZ kaldı: çizim hattı aralıklı çalışınca ne IntersectionObserver, ne `requestAnimationFrame`, ne kaydırma olayı güvenilir geldi. Katman eklemek çözüm değildi — kurgunun kendisi yanlıştı. 🔴 DOĞRU KURAL: İÇERİĞİN GÖRÜNÜRLÜĞÜ ASLA BETİĞE BAĞLANMAZ. Süs olan şey (belirme) betiğe bağlanabilir, görünürlük bağlanamaz. Eski Mobicoo sitesinin ölüm sebebi tam olarak buydu. İçerik VARSAYILAN OLARAK GÖRÜNÜR. `opacity: 0` yalnız keyframe'in `from` adımında geçiyor, taban kural olarak değil. Destekleyen tarayıcıda efekt var, desteklemeyende içerik doğrudan görünür. Takılabilecek bir yer yok çünkü ortada betik yok. 🔴 `--gec` KADEMELİ GECİKMESİ KULLANILMIYOR (runbook §9.32). Her öge KENDİ konumuna göre belirdiği için ızgaradaki kartlar zaten sırayla giriyor; satır içi bir gecikme değişkeni ölü koddu ve iki siteden temizlendi. =========================================================================== */ @keyframes belir { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .bel { animation: belir linear both; animation-timeline: view(); /* Öge ekranın altından girerken başlar, üçte birini geçmeden biter. */ animation-range: entry 0% cover 22%; } } } /* ------------------------------------------------------------------ kategori kartları */ .kat-izgara { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .kat-kart { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } /* 🔴 KARTLARDA DERİNLİK (Ö12/6): `translateY(-4px)` + görselde hafif `scale`. */ .kat-kart:hover { box-shadow: var(--golge-kalk); transform: translateY(-4px); border-color: #dbcdb9; } .kat-kapak { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--krem-koy); } .kat-kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .kat-kart:hover .kat-kapak img { transform: scale(1.06); } .kat-govde { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .kat-govde h3 { margin: 0; } .kat-govde p { margin: 0; font-size: 14.5px; color: var(--duman); flex: 1; } .kat-git { font-size: 14px; font-weight: 700; color: var(--kirmizi); display: inline-flex; align-items: center; gap: 6px; } .kat-git svg { width: 15px; height: 15px; transition: transform .2s ease; } .kat-kart:hover .kat-git svg { transform: translateX(4px); } /* Kartın tamamı tıklanabilir ama metin yine seçilebilir. */ .ortu { position: absolute; inset: 0; } /* ------------------------------------------------------------------ menü kalemleri */ /* 🔴 85 KALEM AYNI IZGARADA. Eski sitede kalemler `` içinde üçerli satırlara elle dizilmişti; dar ekranda tablo yan yana kaymaya devam ediyor ve telefonda yatay kaydırma çıkıyordu. Burada ızgara kendi sarıyor. */ .kalem-izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); } .kalem { margin: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); box-shadow: var(--golge); transition: box-shadow .22s ease, transform .22s ease; } .kalem:hover { box-shadow: var(--golge-kalk); transform: translateY(-4px); } .kalem-gorsel { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--krem-koy); } .kalem-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .kalem:hover .kalem-gorsel img { transform: scale(1.07); } .kalem figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .kalem figcaption b { color: var(--kor); font-size: 15.5px; line-height: 1.3; } .kalem-not { font-size: 13.5px; color: var(--duman); line-height: 1.5; flex: 1; } .kalem-fiyat { margin-top: auto; align-self: flex-start; font-weight: 800; font-size: 15px; color: var(--kirmizi); background: #fdeceb; border: 1px solid #f6cdc7; border-radius: 999px; padding: 4px 13px; font-variant-numeric: tabular-nums; } /* 🔴 "İKRAM" ROZETİ, `0 TL` DEĞİL. İkramlar ve Çay ikramı eski sitede fiyatsız basılıyordu; sıfır fiyat yazmak yanlış bilgi olurdu. */ .kalem-ikram { color: #7a5a12; background: #fff6dd; border-color: #f0dca6; } /* 🔴 GÖRSELSİZ KALEM DÜZENİ BOZMAZ. AZ ÇORBA'nın fotoğrafı eski sitede de yoktu; kart yazıyla duruyor ve ızgaradaki yüksekliği kendi dolduruyor. */ .kalem-gorselsiz { background: var(--krem-koy); justify-content: center; min-height: 148px; } .kalem-gorselsiz figcaption { padding: 22px 18px; } /* ------------------------------------------------------------------ mozaik galeri */ /* 🔴 MOZAİK, EŞİT IZGARA DEĞİL (Ö12/3). 52 fotoğrafın hepsi aynı ölçüde basılınca katalog gibi duruyordu; birkaç karenin iki kat yer kaplaması sayfaya ritim veriyor. Hangi karelerin büyüyeceği `:nth-child` ile SABİT — rastgele olsaydı her yüklemede düzen değişir, sayfa huzursuz olurdu. */ /* 🔴 SÜTUN SAYISI SABİT, `auto-fill` DEĞİL. Geniş kareler (2×2) ancak sütun sayısı bilinirse tam bölen bir blok oluşturuyor; `auto-fill` ile sütun sayısı ekrana göre değişince `:nth-child` kuralı rastgele yerlere düşüyor ve ızgarada delikler kalıyordu (Karayaka'da ölçüldü, runbook §9.34-f). 🔴 `grid-auto-flow: dense` KALDIRILDI: delikleri doldurmak için kareleri geriye tıkıştırıyor, fotoğraf sırasını bozuyordu. Blok tam böldüğü için artık doldurulacak delik de yok. Hangi karenin genişleyeceğine PHP karar veriyor: son blok eksikse geniş kare verilmiyor — CSS kaç kare olduğunu bilmiyor. */ .mozaik { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 172px; } .mozaik a { position: relative; display: block; border-radius: var(--yuvarlak-s); overflow: hidden; background: var(--krem-koy); } .mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .mozaik a:hover img { transform: scale(1.08); } .mozaik a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27, 20, 18, .55), transparent 55%); opacity: 0; transition: opacity .25s ease; } .mozaik a:hover::after { opacity: 1; } /* Geniş kare — yalnız DÖRT sütunda. Üç ve iki sütunda beşli blok tam bölmüyor; orada ızgara düpedüz eşit kalıyor. */ .mozaik a.genis { grid-column: span 2; grid-row: span 2; } @media (max-width: 1100px) { .mozaik { grid-template-columns: repeat(3, 1fr); } .mozaik a.genis { grid-column: auto; grid-row: auto; } } @media (max-width: 760px) { .mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 136px; } } /* ------------------------------------------------------------------ videolar */ /* 🔴 KAPAK ÖNCE, VİDEO SONRA. Beş videonun hepsi `