/* ═══════════════════════════════════════════════════════════════════════ HAYAT MAKKAH · NAVİGASYON v8 — Perde ======================================================================= Mega menü perde gibi iner. Bütün seçiciler .nv07- ön ekiyle izoledir; nav grubunun tamamı bu ön eki paylaşır (hero büyük markayı .nv07-marka kutusuna indiriyor). Etkin olmayan alternatifin CSS dosyası 's sökülür. ═════════════════════════════════════════════════════════════════════ */ /* ── ORTAK ATOMLAR ────────────────────────────────────────────────────── Marka yuvası · chevron · tema · dil · CTA · hamburger · mobil akordeon. Her alternatifte aynıdır; yerleşim ve ölçü alternatifin kendi dosyasında ezilir. Ölçüler token'lardan gelir, sabit piksel yoktur. ═════════════════════════════════════════════════════════════════════ */ /* Marka yuvası — hero'nun büyük yazısı .nv07-marka kutusuna iner. İki logo üst üste durur; hangisinin görüneceğini söyler. */ .nv07-marka{ position:relative;display:flex;align-items:center; gap:clamp(.7rem,1.4vw,1.15rem);flex:none; color:var(--mrk); } /* İKİ LOGO AYNI YÜKSEKLİKTE. Tek token tutulur; genişlikler kendi oranlarından türer. Ayrı ayrı yükseklik verilseydi biri değişince öteki geride kalırdı — 25 Ağu 2026'da tam olarak bu oldu (Emlak Konut 2.9rem, Hayat Makkah 4.1rem). */ .nv07-marka{--nv07-logo-h:clamp(2.5rem,4.8vh,3.3rem)} /* Emlak Konut · kurumsal logo (oran 2.404) */ .nv07-mrk-ek{ /* flex:none ŞART. Marka kutusu flex satırı; varsayılan flex-shrink:1 ile maskeler eziliyordu (ölçüldü: 82 px yerine 24 px). */ flex:none;display:block;background:currentColor; block-size:var(--nv07-logo-h); inline-size:calc(var(--nv07-logo-h) * 2.404); -webkit-mask:url(../logo/emlak-konut-sade.png) no-repeat center/contain; mask:url(../logo/emlak-konut-sade.png) no-repeat center/contain; } .nv07-mrk-ayrac{ inline-size:1px;block-size:calc(var(--nv07-logo-h) * .74); background:var(--cizgi);flex:none; } /* Hayat Makkah · YATAY kilit: amblem SOLDA, kelime SAĞDA ve İKİ SATIR. Harfler dizilmedi — kurumsal yollar marka-amblem.svg ile marka-yazi-cift-.svg dosyalarından olduğu gibi alındı; amblem/oluk oranı markanın kendi yatay kilidinden ölçüldü (0,1335). Yazı bloğu amblemin %78'i kadar: öndeki amblemden büyük durmaz. Üç dilde de TOPLAM YÜKSEKLİK aynı (amblem boyu) — yalnız genişlik değişir, dil değişince şerit yerinden oynamaz. Varsayılan İngilizce; dil şeridi ile geliyor. */ .nv07-mrk-hm{ flex:none;display:block;background:currentColor; block-size:var(--nv07-logo-h); inline-size:calc(var(--nv07-logo-h) * 3.304); /* HAYAT / MAKKAH */ -webkit-mask:url(../logo/hm-kilit-yatay-2satir.svg) no-repeat center/contain; mask:url(../logo/hm-kilit-yatay-2satir.svg) no-repeat center/contain; } html[lang="tr"] .nv07-mrk-hm{ /* HAYAT / MEKKE */ inline-size:calc(var(--nv07-logo-h) * 2.810); -webkit-mask-image:url(../logo/hm-kilit-yatay-2satir-tr.svg); mask-image:url(../logo/hm-kilit-yatay-2satir-tr.svg); } html[lang="ar"] .nv07-mrk-hm{ /* حياة مكة */ inline-size:calc(var(--nv07-logo-h) * 1.970); -webkit-mask-image:url(../logo/hm-kilit-yatay-2satir-ar.svg); mask-image:url(../logo/hm-kilit-yatay-2satir-ar.svg); } /* DAR ŞERİT — iki logo yan yana sığmıyor. 390 px'te marka 280 px yer istiyor, oysa sağdaki tema/dil/menü kümesine kadar 165 px var: ölçüldü, MAKKAH yazısı düğmelerin altında kalıyordu. Şeritte projenin kendi markası kalır; Emlak Konut ortaklar şeridinde görünmeye devam eder. */ @media (max-width:34rem){ .nv07-mrk-ek,.nv07-mrk-ayrac{display:none} .nv07-marka{--nv07-logo-h:clamp(2rem,8.6vw,2.6rem)} } /* chevron */ .nv07-chv{opacity:.5;flex:none;transition:transform 260ms var(--egri)} [aria-expanded="true"] > .nv07-chv,[open] > summary .nv07-chv{transform:rotate(180deg)} html[dir="rtl"] .nv07-ok{transform:scaleX(-1)} /* tema anahtarı */ .nv07-tema{ display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem; border:0;border-radius:50%;background:none;color:inherit;cursor:pointer; opacity:.72;transition:opacity var(--mikro) } .nv07-tema:hover{opacity:1} .nv07-tema-i{display:none;line-height:0} html[data-tema="acik"] .nv07-tema-a,html[data-tema="koyu"] .nv07-tema-g{display:block} .nv07-ar-et{font-size:var(--yz-kck);font-weight:600} /* dil seçici */ .nv07-dil{position:relative} .nv07-dil-dgm{ display:inline-flex;align-items:center;gap:.3rem;min-block-size:2.75rem; padding-inline:.7rem;border:0;border-radius:var(--yr-l);background:none;color:inherit; cursor:pointer;font-size:var(--yz-kck);font-weight:600;letter-spacing:.06em; opacity:.78;transition:opacity var(--mikro) } .nv07-dil-dgm:hover,.nv07-dil-dgm[aria-expanded="true"]{opacity:1} .nv07-dil-mn{ position:absolute;z-index:6;inset-block-start:calc(100% + .45rem);inset-inline-end:0; min-inline-size:11rem;padding:.35rem;border-radius:var(--yr-m); background:var(--z1);border:1px solid var(--cizgi2);color:var(--mrk);display:grid; opacity:0;visibility:hidden;transform:translateY(-.25rem); transition:opacity 180ms,transform 240ms var(--egri),visibility 0s 240ms } .nv07-dil[data-acik="1"] .nv07-dil-mn,.nv07-dil:focus-within .nv07-dil-mn{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity 160ms,transform 240ms var(--egri),visibility 0s } .nv07-dil-mn button{ display:flex;align-items:center;gap:.55rem;min-block-size:2.85rem;padding-inline:.8rem; border:0;border-radius:var(--yr-m);background:none;cursor:pointer;text-align:start; inline-size:100%;transition:background-color var(--mikro) } .nv07-dil-mn button:hover{background:var(--z2)} .nv07-dil-mn button span{font-size:var(--yz-etk);font-weight:700;letter-spacing:.08em;inline-size:1.5rem;color:var(--mrk3)} .nv07-dil-mn button em{font-style:normal;font-size:var(--yz-dgm)} .nv07-dil-mn button[aria-current="true"] span{color:var(--aksan)} /* birincil eylem */ .nv07-cta{ display:inline-flex;align-items:center;min-block-size:2.75rem;padding-inline:1.25rem; border-radius:var(--yr-l);background:var(--mrk);color:var(--z1); font-size:var(--yz-gvd);font-weight:600;white-space:nowrap; transition:opacity var(--mikro),background-color var(--gecis) var(--egri),color var(--gecis) var(--egri) } .nv07-cta:hover{opacity:.86} /* hamburger */ .nv07-hb{ display:inline-flex;align-items:center;gap:.5rem;min-block-size:2.75rem;padding-inline:.6rem; border:0;border-radius:var(--yr-l);background:none;color:inherit;cursor:pointer; font-size:var(--yz-dgm);font-weight:600 } .nv07-hb-c{display:grid;gap:5px;inline-size:1.15rem} .nv07-hb-c i{display:block;block-size:1.5px;background:currentColor;transition:transform 300ms var(--egri)} .nv07-hb[aria-expanded="true"] .nv07-hb-c i:first-child{transform:translateY(3.25px) rotate(45deg)} .nv07-hb[aria-expanded="true"] .nv07-hb-c i:last-child{transform:translateY(-3.25px) rotate(-45deg)} /* mega panel iç ızgarası */ .nv07-mg-iz{display:grid;gap:.5rem} .nv07-mg-k4{grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem} .nv07-mg-k2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem} .nv07-mg-k1{grid-template-columns:minmax(0,1fr);gap:.15rem} .nv07-mg-oge{display:grid;gap:.5rem;padding:.8rem;border-radius:var(--yr-m);transition:background-color var(--mikro)} .nv07-mg-oge:hover{background:var(--z2)} .nv07-mg-gor{display:block;overflow:hidden;border-radius:var(--yr-s);aspect-ratio:4/3;background:var(--z3)} .nv07-mg-gor img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 700ms var(--egri)} .nv07-mg-oge:hover .nv07-mg-gor img{transform:scale(1.045)} .nv07-mg-mtn{display:grid;gap:.1rem} .nv07-mg-mtn b{font-size:var(--yz-gvd);font-weight:600} .nv07-mg-mtn em{font-style:normal;font-size:var(--yz-kck);color:var(--mrk3);line-height:1.4} /* mobil akordeon (details/summary — betiksiz çalışır) */ .nv07-mb-nav{padding:.5rem 1.15rem 1.5rem;display:grid;gap:.1rem} .nv07-mb-grp > summary,.nv07-mb-lnk{ display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:3.35rem; cursor:pointer;list-style:none;font-size:var(--yz-gir);font-weight:500; border-block-end:1px solid var(--cizgi2) } .nv07-mb-grp > summary::-webkit-details-marker{display:none} .nv07-mb-ic{display:grid;padding-block:.25rem .65rem} .nv07-mb-ic a{min-block-size:2.9rem;display:flex;align-items:center;font-size:var(--yz-gvd);color:var(--mrk2)} /* telefon — canlı siteden alınan gerçek numara (013 518 1891). Rakam grubu RTL'de ters dizilmesin diye içinde durur. */ .nv07-tel{ display:inline-flex;align-items:center;gap:.45rem;min-block-size:2.75rem;padding-inline:.7rem; border-radius:var(--yr-l);color:inherit;font-size:var(--yz-dgm);font-weight:600;white-space:nowrap; opacity:.82;transition:opacity var(--mikro),background-color var(--mikro) } .nv07-tel:hover{opacity:1} /* solid ağırlık: light glif 16 px'te dağılıyordu (23 Ağu 2026 ölçümü) */ .nv07-tel-i{inline-size:.9rem;block-size:.9rem;fill:currentColor;flex:none;opacity:.6} .nv07-tel-n{font-variant-numeric:tabular-nums;letter-spacing:.01em} /* ═══════════════════════════════════════════════════════════════════════ v8 · PERDE — mega menü sahneye dönüşür ======================================================================= Şerit sadedir; asıl olay açılıştadır. Bir başlığa gelince ekranın üst yarısını kaplayan bir perde iner: solda büyük satırlar, sağda o bölümün rendersı. Perde alt kenarından açılır (clip-path), kutu büyümesi gibi değil sahne perdesi gibi. Görsel CSS'ten gelir ve YALNIZ [data-acik="1"] iken tanımlıdır; menü açılmadan tek bayt inmez. ═════════════════════════════════════════════════════════════════════ */ :root{--nav-h:4.25rem} /* 25 Ağu 2026 · Beyefendi: "navigasyon kutusu da turkbilisim gibi olsun, radiuslu". Şerit kenardan kenara değil: hero kutusuyla AYNI çerçeve payında duran, yuvarlatılmış yüzen bir kutu. Cam zemin ve bulanıklık korunuyor; alt çizgi yok. */ .nv07{ position:fixed;inset-block-start:var(--nv07-cerceve);z-index:80;color:var(--mrk); inset-inline:var(--nv07-cerceve); border-radius:var(--yr-xl); background:color-mix(in oklab,var(--z1) 88%,transparent); border:1px solid var(--cizgi2); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2); } .nv07{ --nv07-cerceve:var(--cerceve) } .nv07-ic{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem; block-size:var(--nav-h);inline-size:100%; max-inline-size:calc(var(--serit-w) + 2 * var(--serit-kenar));margin-inline:auto; padding-inline:calc(var(--serit-kenar) + var(--serit-pd)) } .nv07-sol{display:flex;align-items:center;gap:.85rem;min-inline-size:0} /* Sabit 5.2rem genişlik kaldırıldı: iki logo o kutuya sığmıyor, marka bloğu 83 px'e kilitleniyordu (ölçüldü). Genişlik artık içeriğinden gelir. */ .nv07-marka{flex:none} .nv07-nav{display:flex;justify-content:center;min-inline-size:0} .nv07-liste{display:flex;align-items:center;gap:clamp(.1rem,.8vw,.6rem);list-style:none;margin:0;padding:0} .nv07-oge{position:static} .nv07-lnk{ position:relative;display:inline-flex;align-items:center;gap:.3rem;min-block-size:var(--nav-h); padding-inline:.55rem;border:0;background:none;cursor:pointer;color:var(--mrk2); font-size:var(--yz-dgm);font-weight:500;white-space:nowrap;transition:color var(--mikro) } .nv07-lnk::after{ content:"";position:absolute;inset-block-end:-1px;inset-inline:.55rem;block-size:1px; background:var(--mrk);transform:scaleX(0);transition:transform 340ms var(--egri) } .nv07-lnk:hover,.nv07-lnk[aria-expanded="true"],.nv07-lnk[aria-current="true"]{color:var(--mrk)} .nv07-lnk[aria-expanded="true"]::after{transform:scaleX(1)} /* ── perde ── */ .nv07-mg{ position:absolute;inset-block-start:100%;inset-inline:0;z-index:3; background:var(--z1);border-block-end:1px solid var(--cizgi2); clip-path:inset(0 0 100% 0);visibility:hidden; transition:clip-path 560ms var(--egri),visibility 0s 560ms } .nv07-oge[data-acik="1"] .nv07-mg{ clip-path:inset(0 0 0 0);visibility:visible; transition:clip-path 620ms var(--egri),visibility 0s } .nv07-mg-ic{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem); inline-size:100%;max-inline-size:calc(var(--serit-w) + 2 * var(--serit-kenar));margin-inline:auto; padding:clamp(1.5rem,3vw,2.6rem) calc(var(--serit-kenar) + var(--serit-pd)) clamp(1.75rem,3vw,2.8rem); align-items:center } .nv07-mg-k2,.nv07-mg-k4{grid-template-columns:minmax(0,1fr);gap:0} .nv07-mg-oge{ display:grid;gap:.1rem;padding:.85rem .2rem;border-radius:0; border-block-end:1px solid var(--cizgi2);background:none; transform:translateY(.6rem);opacity:0; transition:transform 520ms var(--egri),opacity 420ms var(--egri),padding-inline-start 300ms var(--egri) } .nv07-oge[data-acik="1"] .nv07-mg-oge{transform:translateY(0);opacity:1} .nv07-oge[data-acik="1"] .nv07-mg-oge:nth-child(2){transition-delay:70ms} .nv07-oge[data-acik="1"] .nv07-mg-oge:nth-child(3){transition-delay:140ms} .nv07-oge[data-acik="1"] .nv07-mg-oge:nth-child(4){transition-delay:210ms} .nv07-mg-oge:hover{background:none;padding-inline-start:.65rem} .nv07-mg-mtn b{font-size:var(--yz-alt);font-weight:600} .nv07-mg-mtn em{font-size:var(--yz-kck)} /* Görsel iki katmanlıdır: üzerine gelinen alt başlığın render'ı öne geçerken öteki söner. Dosya adı CSS'te DEĞİL betikte durur (nav-v8.js → GORSEL): görsel ancak o başlığa gelinince isteniyor, menü hiç açılmazsa tek bayt inmiyor. */ .nv07-mg-gorsel{ position:relative;aspect-ratio:16/10;border-radius:var(--yr-l);overflow:hidden;background:var(--z2); opacity:0;transform:scale(1.02); transition:opacity 620ms var(--egri),transform 1000ms var(--egri) } .nv07-oge[data-acik="1"] .nv07-mg-gorsel{opacity:1;transform:scale(1)} .nv07-mg-kare{ position:absolute;inset:0;display:block;background:no-repeat center/cover; opacity:0;transform:scale(1.05); transition:opacity 560ms var(--egri),transform 1600ms var(--egri) } .nv07-mg-kare[data-acik="1"]{opacity:1;transform:scale(1)} .nv07-ar{display:flex;align-items:center;gap:.3rem} .nv07-cta{min-block-size:2.65rem;padding-inline:1.3rem;font-size:var(--yz-gvd)} .nv07-hb{display:none} .nv07-panel{ position:absolute;inset-block-start:100%;inset-inline:0;z-index:5;background:var(--z1); border-block-end:1px solid var(--cizgi2); max-block-size:calc(100svh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transform:translateY(-.4rem); transition:opacity 240ms var(--egri),transform 380ms var(--egri),visibility 0s 380ms } .nv07-panel[data-acik="1"]{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 200ms,transform 380ms var(--egri),visibility 0s} .nv07-panel-alt{padding:0 1.15rem 1.5rem;display:grid} .nv07-panel-alt .nv07-cta{justify-content:center;min-block-size:3.1rem;border-radius:var(--yr-l);font-size:var(--yz-gvd)} @media(max-width:1099px){ .nv07-nav,.nv07-mg{display:none} .nv07-hb{display:inline-flex} .nv07-ic{grid-template-columns:1fr auto} .nv07-cta{display:none} } @media(min-width:1100px){.nv07-panel{display:none}} @media(max-width:1240px){.nv07-mg-gorsel{display:none}.nv07-mg-ic{grid-template-columns:minmax(0,1fr)}} /* ═══════════════════════════════════════════════════════════════════════ AÇILIR MENÜ · KATMAN — bütün alternatifler · DOSYA SONUNDA ======================================================================= Hero'nun büyük marka yazısı gövdeye taşınıyor ve z-index:120 alıyor — şeridin 80'inin ÜSTÜNDE. Bu bilinçli: yazının şeride inebilmesi için gerekli. Hero, bir açılır açıkken onu 70'e indiriyor: html[data-nav-acik="1"][data-marka="ek"] .hro-mrk-kap{z-index:70} Ama bu kural bayrağına bağlı ve o bayrağı BETİK yazıyor. Saf CSS ile açılan alternatiflerde (v3) bayrak hiç yazılmıyor; sonuç: mega menü büyük yazının ALTINDA kalıyordu (24 Ağu 2026, ölçüldü). Karşılığı burada, aynı koşulla ve saf CSS ile kuruluyor. .nv07 ile marka bloğu gövdenin KARDEŞ çocukları olduğu için `~` ulaşabiliyor. Yalnız yazı HÂLÂ BÜYÜKKEN (data-marka="ek") uygulanır: şeride indikten sonra yazı zaten şeridin içindedir, panelle çakışmaz — o durumda indirmek logoyu camın altında bırakırdı. .nv07'nin kendi z-index'ine DOKUNULMAZ: 80'den çıkarmak şeridi hero görselinin altına düşürüyor ve menü tıklanamaz oluyor (denendi, ölçüldü). ═════════════════════════════════════════════════════════════════════ */ html[data-marka="ek"] .nv07:has(.nv07-oge:hover) ~ [data-hro-mrk-kap], html[data-marka="ek"] .nv07:has(.nv07-oge:focus-within) ~ [data-hro-mrk-kap], html[data-marka="ek"] .nv07:has(.nv07-dil:hover) ~ [data-hro-mrk-kap], html[data-marka="ek"] .nv07:has(.nv07-mbd[open]) ~ [data-hro-mrk-kap]{z-index:60}