/* ============================================================ mz-v2-ust.css — Mezad V2 · onaylanan tasarimin ust bolumu. KAYNAK: tasarim artboard'u "Main.dc.html" (.util / .head / .navbar) ve "CategoryDesktop.dc.html" (breadcrumb navbar). Renk/olcu degerleri oradan birebir alinmis, tokenlara baglanmistir. NEDEN AYRI DOSYA: Onceki denemede eski limon_ilan markup'i korunup uzerine !important ile renk yamalari yazildi; sonuc tasarimin kendisi degil, eski iskeletin boyanmis hali oldu. Bu dosya bunun tersini yapar: markup YENIDEN yazildi (inc/mz-ust.php), butun siniflar "mz-" onekli. style.css bu siniflarin hicbirini secmez, dolayisiyla burada tek bir !important'a ihtiyac yoktur ve eski kurallarla catisma da olmaz. YON: yalnizca mantiksal ozellikler (inline-start/end, padding-inline). Ayri bir RTL dosyasi yoktur; arapca kendiliginden dogru akar. ============================================================ */ /* ---------- 1. Ust hizmet seridi (.util) ---------- */ .mz-util { background: var(--mz-ink, #1f2933); color: #cfd6dd; font-size: 12.5px; } .mz-util .mz-in { max-inline-size: 1320px; margin-inline: auto; padding: 7px 20px; display: flex; align-items: center; gap: 18px; } .mz-util .mz-bosluk {flex: 1;} .mz-util a {color: #cfd6dd; text-decoration: none;} .mz-util a:hover {color: #ffffff;} .mz-util .mz-oge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .mz-util .mz-slogan { color: #9aa5ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Sloganin dili sayfanin dilinden farkli olabilir (ornegin arapca sayfada latin harfli bir pazar sloganı). Izole edilmezse sonundaki noktalama isareti cumlenin basina kayiyor. */ unicode-bidi: isolate; } /* Dil secici: tasarimdaki kucuk hap rozetleri. */ /* DIL DUGMELERI ARAPCADA TERS SIRAYA DUSUYORDU (sahip, 2026-09-12). DOM sirasi her zaman TR EN AR RU. Sayfa arapcada aldigi icin flex satirinin baslangici SAGA geciyor ve dugmeler ekranda RU AR EN TR olarak diziliyordu. Olculdu (1500x900): /tr -> ekranda soldan saga: TR EN AR RU /ar -> ekranda soldan saga: RU AR EN TR Telefonda da ayni (asagidaki .mz-mobil-diller). SAHIBIN KARARI: bu serit dilden BAGIMSIZ sabit kalsin - dugmeler her dilde ayni yerde bulunsun. "direction: ltr" yalnizca bu kutunun eksenini sabitler; icindeki metinler (TR/EN/AR/RU) latin harfli oldugu icin iki yonlu (bidi) bir sorun cikmiyor. KAPSAM GENISLETILDI (sahip, 2026-09-14): "يبقى هيدر اللغات ثابت بنفس الطريقة بكل اللغات ... لا يتحول الى اليمين". Ilk halde yalnizca dugme kutusu LTR'ydi; dugmelerin SIRASI dogruydu ama kutunun YERI hala aynali: olculdu (bh.mezad.net, canli HTML) 1180px /tr -> .mz-diller sol kenari 75px /ar -> .mz-diller sol kenari 992px (sagda) Sahibin istedigi satirin TAMAMININ her dilde ayni gorunmesi; "yalnizca dil dugmeleri" secimini ben dar yorumlamistim. Simdi hizmet satirinin kabi (.mz-in) LTR: cocuklar her dilde DOM sirasinda dizilir; /ar'da olculen sira /tr ile birebir ayni. Kabin icindeki arapca etiket ("اللغة") tek bir arapca kosu oldugu icin bidi algoritmasi onu dogru cizer - lakin bu bir varsayim degil, yonV-1180-ar lakabiyla goruntusu alindi. Sayfanin GERI KALANI arapcada RTL kalmaya devam ediyor; kapsam bu satirla sinirli. */ .mz-util .mz-in {direction: ltr;} .mz-diller {display: flex; gap: 2px; direction: ltr;} .mz-diller a { padding: 3px 8px; border-radius: 5px; font-weight: 600; line-height: 1.4; } .mz-diller a:hover {background: rgba(255, 255, 255, .10);} .mz-diller a.mz-acik { background: var(--mz-brand, #c0392b); color: #ffffff; } .mz-diller a.mz-acik:hover {background: var(--mz-brand, #c0392b);} /* Ulke bayragi + adi. */ .mz-ulke img { inline-size: 18px; block-size: 13px; object-fit: cover; border-radius: 2px; display: inline-block; } /* Uye alani ust seritte. */ .mz-util .mz-sayac { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 16px; block-size: 16px; padding-inline: 4px; margin-inline-start: 4px; border-radius: 999px; background: var(--mz-danger, #e74c3c); color: #ffffff; font-size: 10.5px; font-weight: 700; line-height: 1; unicode-bidi: isolate; } .mz-util .mz-avatar { inline-size: 22px; block-size: 22px; border-radius: 50%; object-fit: cover; } /* ---------- 2. Ana ust bolum (.head) ---------- */ .mz-head { background: var(--mz-yuzey, #ffffff); border-block-end: 1px solid var(--mz-cizgi, #e4e7eb); } .mz-head .mz-in { max-inline-size: 1320px; margin-inline: auto; padding: 16px 20px; display: flex; align-items: center; gap: 22px; } /* Logo: tasarimda gorsel degil, halka + yazi markasi. Boylece beyaz zeminde kaybolan beyaz logo sorunu da kokten ortadan kalkar. */ .mz-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; } .mz-logo:hover {text-decoration: none; color: inherit;} .mz-logo .mz-halka { inline-size: 34px; block-size: 34px; border-radius: 50%; border: 5px solid var(--mz-star, #f5b50a); flex: none; } .mz-logo .mz-marka { font-size: 23px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; color: var(--mz-ink, #1f2933); display: block; unicode-bidi: isolate; } .mz-logo .mz-marka .mz-net {color: var(--mz-brand, #c0392b);} .mz-logo .mz-slogan-kucuk { font-size: 11px; color: var(--mz-muted, #7b8794); margin-block-start: 1px; display: block; white-space: nowrap; } /* Yonetimden yuklenen gorsel logo kullanilmak istenirse. */ .mz-logo img.mz-logo-gorsel { max-block-size: 42px; inline-size: auto; } /* Arama: tasarimin imzasi — 2px marka kenarli tek parca kutu. */ .mz-ara-form {flex: 1; min-inline-size: 0; margin: 0;} .mz-ara { display: flex; block-size: 46px; border: 2px solid var(--mz-brand, #c0392b); border-radius: 9px; overflow: hidden; background: var(--mz-yuzey, #ffffff); } .mz-ara .mz-kapsam { position: relative; display: flex; align-items: center; background: var(--mz-zemin, #f4f5f7); border-inline-end: 1px solid var(--mz-cizgi, #e4e7eb); flex: none; max-inline-size: 210px; } .mz-ara .mz-kapsam select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; background: transparent; color: #3e4c59; font-size: 14px; font-weight: 600; font-family: inherit; block-size: 100%; padding-inline: 16px 34px; max-inline-size: 210px; cursor: pointer; outline: none; text-overflow: ellipsis; } .mz-ara .mz-kapsam .mz-ok { position: absolute; inset-inline-end: 14px; font-size: 9px; color: var(--mz-faint, #9aa5ae); pointer-events: none; } .mz-ara input[type="text"] { flex: 1; min-inline-size: 0; border: 0; padding-inline: 16px; font-size: 15px; font-family: inherit; color: var(--mz-ink, #1f2933); background: transparent; outline: none; box-shadow: none; } .mz-ara input[type="text"]::placeholder { color: var(--mz-muted, #7b8794); opacity: 1; } .mz-ara .mz-git { background: var(--mz-brand, #c0392b); color: #ffffff; border: 0; padding-inline: 26px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; } .mz-ara .mz-git:hover {background: var(--mz-brand-koyu, #a5271b);} /* "Ilan ver" — tasarimda turuncu vurgu, koyu murekkep yazi. */ .mz-cta { background: var(--mz-vurgu, var(--mz-accent, #f39c12)); color: var(--mz-vurgu-yazi, var(--mz-ink, #1f2933)); font-weight: 800; font-size: 15px; padding: 12px 22px; border-radius: 9px; white-space: nowrap; text-decoration: none; flex: none; display: inline-block; line-height: 1.2; } .mz-cta:hover, .mz-cta:focus { filter: brightness(.94); color: var(--mz-vurgu-yazi, var(--mz-ink, #1f2933)); text-decoration: none; } /* ---------- 3. Yatay kategori cubugu (.navbar) ---------- */ .mz-nav { background: var(--mz-yuzey, #ffffff); border-block-end: 1px solid var(--mz-cizgi, #e4e7eb); } .mz-nav .mz-in { max-inline-size: 1320px; margin-inline: auto; padding-inline: 20px; display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; color: #3e4c59; overflow-x: auto; scrollbar-width: none; } .mz-nav .mz-in::-webkit-scrollbar {display: none;} .mz-nav a { padding-block: 12px; border-block-end: 3px solid transparent; color: #3e4c59; text-decoration: none; white-space: nowrap; flex: none; } .mz-nav a:hover { color: var(--mz-brand, #c0392b); text-decoration: none; } .mz-nav a.mz-acik { color: var(--mz-brand, #c0392b); border-block-end-color: var(--mz-brand, #c0392b); } .mz-nav .mz-bosluk {flex: 1; min-inline-size: 12px;} /* ---------- 4. Masaustu / mobil ayrimi ---------- Bu ust bolumun ARAMA ve KATEGORI bantlari yalnizca md ve uzeri icin tasarlandi; mobilde temanin mevcut mobil header'i calismaya devam eder. Kategori seridi (.mz-nav-yol) ise BILEREK her genislikte gorunur - kullanici araclari orada. SARMALAYICI HICBIR GENISLIKTE KUTU DEGIL. "block" DEGIL, "contents", ve "none" da DEGIL: - contents (none degil): mobil gizlemeyi sarmalayiciya vermek, icindeki kategori seridini de birlikte goturuyordu. Gizleme artik gizlenmesi gereken bantlarin KENDISINDE (asagida). - contents (block degil): icerideki .mz-ust-sabit position:sticky kullaniyor ve yapiskan bir oge ASLA ebeveyninin kutusunu terk edemez. Bu sarmalayici yalnizca baslik kadar yuksek oldugu icin, sayfa onun altina kayar kaymaz baslik da onunla birlikte yukari kayip gidiyordu - olctugumde top: -562px cikti, yani hic yapismiyordu. "display: contents" sarmalayicinin kutusunu kaldirir; cocuklar dogrudan sayfanin akisina girer. */ .mz-ust-masaustu {display: contents;} @media (max-width: 991px) { /* Mobilde gizlenen: hizmet seridi, arama basligi ve kategori-DISI sayfalardaki duz yatay kategori cubugu. Bunlar masaustu olculerine gore tasarlandi ve telefonda temanin kendi mobil header'i zaten var; ikisi birden basilirsa cift menu cikar. Kategori yolu seridi (.mz-nav-yol) bu listede YOK - o mobilde de gorunmeli, kullanici araclari onun icinde. */ .mz-util, .mz-head, .mz-ust-sabit > .mz-nav:not(.mz-nav-yol) {display: none;} } /* Dar masaustunde arama kutusu kategori kapsamini birakir. */ @media (max-width: 1180px) { .mz-ara .mz-kapsam {display: none;} .mz-logo .mz-slogan-kucuk {display: none;} .mz-head .mz-in {gap: 16px;} .mz-cta {padding-inline: 16px; font-size: 14px;} } /* ============================================================ YAPISKAN UST BOLUM ("Sticky Header" ayari) NEDEN CSS, NEDEN EKLENTI DEGIL: Tema bu isi js/jquery.sticky.js ile yapiyordu; main.js icinde $(".sticky").sticky() cagrisi var ve hedefi ESKI header'in icindeki
. V2 ust bolumu eski header'i basmadigi icin o oge artik yok - yani ayar acik oldugu halde baslik yapismiyordu. Bu benim yol actigim bir gerilemeydi. Eklentiyi yeni markup'a baglamak yerine CSS'e geciliyor: eklenti ogeyi bir sarmalayiciya alip yuksekligini sabitliyor, mobilde yerlesimi bozabiliyor ve kaydirma sirasinda is yapiyor. position:sticky'nin bunlarin hicbiri yok. KOYU HIZMET SERIDI (.mz-util) ARTIK YIGININ ICINDE - 2026-09-12. Burada onceden "BILEREK yapismaz: ekranin ustunden ~150px goturmek yerine yalnizca ise yarayan iki serit kalir" yaziyordu. O benim karariymdi ve sahip geri aldi: dil dugmeleri kaydirinca ekrandan cikiyor ve ancak sayfa basina donulunce geri geliyordu; sahip "ثابت لا يختفي" istedi. Serit inc/mz-ust.php icinde .mz-ust-sabit kutusunun ilk cocugu olarak tasindi, yani ucu alt alta pimleniyor - kendine ayrica position:sticky VERILMEDI, cunku iki kardesin ayni top:0'a yapismasi z-index yarisini geri getirirdi (inceleme bulgusu P1). ============================================================ */ /* TEK YAPISKAN YIGIN. Ayar KAPALI iken bu sarmalayici kutu OLMAMALI: icindeki kategori seridi position:sticky ve yapiskan bir oge ebeveyninin kutusunu terk edemez. Kutu olsaydi serit basligin bittigi yerde birakilir, sayfa boyunca yapismazdi. display:contents kutuyu kaldirir. Ayar ACIK iken tam tersi gerekiyor: baslik ile serit AYNI kutuda olmali. Ikisi ayri kardes olarak ayni top:0'a yapistiginda - inceleme bulgusu P1 - z-index 1020 olan baslik, z-index 900 olan seridin uzerine biniyor ve yeterince kaydirildiginda kategori yolu ile kullanici araclari opak basligin ALTINDA kalip erisilemez oluyordu. Tek kutuda ikisi alt alta yapisir; yarisacak z-index yok, secilecek ofset yok (baslik yuksekligi LPanel logosuna gore degistigi icin sabit bir ofset zaten yanlis olurdu). */ .mz-ust-sabit {display: contents;} .mz-ust-sabit.mz-sabit { display: block; position: sticky; inset-block-start: 0; /* Sayfa icerigi seridin uzerine binmesin; ilan sayfasindaki yapiskan serit (9997) bunun ustunde kalacak sekilde secildi. */ z-index: 1020; background: var(--mz-yuzey, #ffffff); } /* Yigin icindeyken serit KENDI basina yapismaz. Yapissaydi, pimlenmis ebeveynin kutusu icinde top:0'a dogru kayip basligin uzerine binerdi - ebeveyn zaten pimli oldugu icin serit'in ayrica yapismasina gerek de yok. */ .mz-ust-sabit.mz-sabit .mz-nav-yol {position: static;} /* Yapistiginda hafif bir golge: serit ile icerik ayrissin. */ .mz-ust-sabit.mz-sabit { box-shadow: 0 1px 0 rgba(31, 41, 51, .04); } /* --------------------------------------------------------------------- MOBILDE YAPISMAZ - MOBIL BASLIK ZATEN PIMLI Preview olcumu (390px, kategori sayfasi, 1200px kaydirma sonrasi): .mz-ust-sabit.mz-sabit sticky top:0 z=1020 yukseklik 53 .mz-mobil-ust sticky top:0 z=1025 yukseklik 119 Ikisi de top:0'a pimlendigi icin, mobil baslik hem daha yuksek katmanda hem daha uzun olarak seridi TAMAMEN ortuyordu: kaydirma sonrasi kirilim yolu ve kullanici cubugu (favoriler, kayitli aramalar, son gezilenler) gorunmez ve tiklanamaz hale geliyordu. Kaydirmadan once ust uste binmiyorlar; kusur yalnizca kaydirinca ortaya cikiyor - tek ekran kontrolu bunu yakalamaz. Cozum: mobilde serit YAPISMAZ. Ikisini alt alta pimlemek 390px'lik bir ekranda 172px kalici alan demekti; kalici basligi mobil baslik tasiyor, serit icerikle birlikte kaysin. Cubuk yine ERISILEBILIR - yalnizca pimli degil (992px alti icin gereken buydu). */ @media (max-width: 991px) { .mz-ust-sabit.mz-sabit { position: static; box-shadow: none; } } @supports (animation-timeline: scroll()) { /* Destekleyen tarayicilarda golge yalnizca yapisikken gorunur. */ .mz-ust-sabit.mz-sabit { animation: mz-sabit-golge linear both; animation-timeline: scroll(); animation-range: 0 120px; } @keyframes mz-sabit-golge { from {box-shadow: 0 1px 0 rgba(31, 41, 51, .04);} to {box-shadow: 0 4px 14px rgba(31, 41, 51, .10);} } } @media (prefers-reduced-motion: reduce) { .mz-ust-sabit.mz-sabit {animation: none;} } /* ============================================================ LOGO + ARAMA SERIDI ASAGI KAYDIRIRKEN GIZLENIR (LPanel > Mezad V2 Arayuzu > "v2_ust_gizle"; sahip karari 2026-09-03) GIZLENEN TEK BANT .mz-head. Hizmet seridi, kirilim yolu ve ilan sayfasindaki yapiskan serit bu kuralin disinda - onlar kendi davranislarini surdurur. NEDEN NEGATIF UST BOSLUK, NEDEN transform DEGIL: transform ogeyi yalnizca boyar, kutusunu yerinde birakir. Kutu yerinde kalsaydi yapiskan sarmalayici kucullmez ve altindaki her sey basligin birakmadigi 79px'in altinda asili kalirdi. Negatif bosluk kutuyu akistan geri alir: sarmalayici gercekten kuculur, alttakiler kendiliginden yukari oturur ve ilan seridinin olcumu de dogru cikar. YUKSEKLIK DEGISKENDEN: baslik yuksekligi LPanel'e yuklenen logoya gore degisiyor, sabit sayi yanlis olurdu. Degiskeni JS yaziyor; yazilamazsa 79px yedegi devreye girer. "visibility" GECIKMELI: gizlenme animasyonu bitene kadar oge gorunur kalir, sonra sekme sirasindan da cikar - aksi halde ekranda olmayan arama kutusuna Tab ile gidilebiliyordu. Geri gelirken gecikme yok, aninda gorunur. ============================================================ */ @media (min-width: 992px) { /* "flow-root" ZORUNLU, sus degil. Olcerek bulundu: kutu duz "block" iken cocugun ust boslugu EBEVEYNIN boslugu ile BIRLESIYOR (margin collapsing). Negatif bosluk o zaman bandi kutunun ICINDE yukari almiyor, KUTUYU yukari aliyor - kutu da yapiskan oldugu icin aninda top:0'a geri pimleniyor ve ekranda hicbir sey degismiyordu. Testte tam bu cikti: sinif uygulanmis, "visibility: hidden" islemis, ama baslik hala 0-83px'te duruyordu. flow-root yeni bir blok bicimlendirme baglami acar, bosluklar birlesmez, negatif bosluk bandi kutunun icinde yukari alir ve kutu gercekten kuculur. */ .mz-ust-sabit.mz-sabit.mz-ust-gizlenir {display: flow-root;} .mz-ust-sabit.mz-ust-gizlenir .mz-head { transition: margin-block-start .2s ease, visibility 0s linear 0s; } html.mz-ust-gizli .mz-ust-sabit.mz-ust-gizlenir .mz-head { margin-block-start: calc(-1 * var(--mz-head-yuk, 79px)); visibility: hidden; pointer-events: none; transition: margin-block-start .2s ease, visibility 0s linear .2s; } } /* ---- MOBIL: YALNIZCA ARAMA SATIRI ---- Sahip 2026-09-03: "اذا امكن اخفاء هيدر البحث اثناء التصفح داخل الاعلانات فقط البحث" ve sorulunca kapsam "mobil, tum sayfalar". Gizlenen .mz-mobil-ara-form (67px); logo/dil/hesap seridi (.mz-mobil-serit, 52px) YERINDE KALIR - sahibin degismeyen kurali. Ayni "flow-root" gerekcesi burada da gecerli. */ @media (max-width: 991px) { .mz-mobil-ust {display: flow-root;} .mz-mobil-ust .mz-mobil-ara-form { transition: margin-block-start .2s ease, visibility 0s linear 0s; } html.mz-ust-gizli .mz-mobil-ust .mz-mobil-ara-form { margin-block-start: calc(-1 * var(--mz-ara-yuk, 67px)); visibility: hidden; pointer-events: none; transition: margin-block-start .2s ease, visibility 0s linear .2s; } } @media (prefers-reduced-motion: reduce) { .mz-ust-sabit.mz-ust-gizlenir .mz-head, html.mz-ust-gizli .mz-ust-sabit.mz-ust-gizlenir .mz-head, .mz-mobil-ust .mz-mobil-ara-form, html.mz-ust-gizli .mz-mobil-ust .mz-mobil-ara-form {transition: none;} } } /* ============================================================ KIRILIM YOLU + ACILIR KARDES LISTELERI KAYNAK: CategoryDesktop.dc.html (.crumb / .dd) Kategori sayfasinda duz kategori cubugunun yerini alir. Her basamagin uzerine gelindiginde o basamagin KARDESLERI acilir. Tamamen CSS: :hover ve :focus-within. JavaScript yok, klavye ile gezenler icin de calisir. ============================================================ */ .mz-nav-yol .mz-in { gap: 0; font-size: 13px; font-weight: 400; overflow: visible; /* acilir liste kirpilmasin */ } .mz-nav-yol .mz-ayrac { color: var(--mz-cizgi, #cfd6dd); font-size: 12px; padding-inline: 2px; flex: none; } .mz-kirilim { position: relative; display: inline-flex; align-items: center; gap: 5px; /* Dikey dolgu 9px'ten 6px'e indi: serit 48px'ten 36px'e cekilirken basamagin kendi yuksekligi (13px x 1.5 + 18px = 37.5px) seridi ICERIDEN 36px'in uzerine itiyordu. */ padding: 6px 10px; font-weight: 600; white-space: nowrap; flex: none; border-radius: 6px 6px 0 0; } .mz-kirilim > a, .mz-kirilim .mz-kirilim-ad { color: #3e4c59; text-decoration: none; padding: 0; border: 0; } .mz-kirilim .mz-ok { font-size: 9px; color: var(--mz-faint, #9aa5ae); font-style: normal; line-height: 1; } .mz-kirilim.mz-acilir:hover, .mz-kirilim.mz-acilir:focus-within { background: var(--mz-brand-acik, #faf6f5); cursor: pointer; } .mz-kirilim.mz-acilir:hover > a, .mz-kirilim.mz-acilir:focus-within > a, .mz-kirilim.mz-acilir:hover .mz-ok, .mz-kirilim.mz-acilir:focus-within .mz-ok {color: var(--mz-brand, #c0392b);} /* --- Acilir liste --- */ .mz-kirilim .mz-dd { display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0; min-inline-size: 210px; max-block-size: 392px; overflow-y: auto; background: var(--mz-yuzey, #fff); border: 1px solid var(--mz-cizgi, #e4e7eb); border-block-start: 2px solid var(--mz-brand, #c0392b); border-radius: 0 6px 6px 6px; box-shadow: 0 8px 20px rgba(31, 41, 51, .13); padding-block: 6px; z-index: 1040; } /* RTL'de kutu basamagin sag kenarindan acilir. */ [dir="rtl"] .mz-kirilim .mz-dd {border-radius: 6px 0 6px 6px;} /* COK OGELI LISTE: TEK SUTUN YETMIYOR (canli olcum, 2026-09-02) ------------------------------------------------------------ Basamak menuleri kardeslerden cocuklara gecince uzadi. Canli preview'de "سيارة" basamagi 68 marka aciyor; tek sutunda icerik 2430px ve kutu 392px, yani ~6 ekran kaydirma - hem yorucu hem de isaretci menuden ciktigi anda menu kapandigi icin kirilgan. (Ayni sayfada kardes kuralinda liste 16 ogeydi: bu kusur cocuga gecisin getirdigi YENI bir kusur, o yuzden ayni pakette kapandi.) COLUMNS DEGIL GRID. CSS multicol, yuksekligi sinirli ve dikey kaydirilan bir kapta sutunlari YANA tasirir - kaydirma ekseniyle kavga eder. Grid satir satir dolar, dikey kaydirmayla uyumludur. Bedeli: alfabetik liste asagi degil once yana okunur. 68 ogede uc sutun tercih edildi cunku tek sutunda liste zaten okunmuyordu. GENISLIK EKRANA GORE: panel basamaktan acilir ve dar masaustunde ekran disina tasabilir. Bu yuzden iki sutun 992px'ten, uc sutun 1300px'ten sonra. Mantiksal ozellikler kullanildigi icin RTL'de panel yine basamagin sag kenarindan sola dogru acilir. */ .mz-kirilim .mz-dd.mz-dd-cok { max-block-size: min(60vh, 520px); } @media (min-width: 992px) { .mz-kirilim .mz-dd.mz-dd-cok { display: none; /* acilana kadar; asagidaki kural grid yapar */ min-inline-size: 430px; } .mz-kirilim.mz-acilir:hover .mz-dd.mz-dd-cok, .mz-kirilim.mz-acilir:focus-within .mz-dd.mz-dd-cok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } } @media (min-width: 1300px) { .mz-kirilim .mz-dd.mz-dd-cok {min-inline-size: 640px;} .mz-kirilim.mz-acilir:hover .mz-dd.mz-dd-cok, .mz-kirilim.mz-acilir:focus-within .mz-dd.mz-dd-cok { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Sutunlara bolununce uzun marka adi komsu sutuna tasmasin. */ .mz-kirilim .mz-dd.mz-dd-cok a { overflow: hidden; text-overflow: ellipsis; } .mz-kirilim.mz-acilir:hover .mz-dd, .mz-kirilim.mz-acilir:focus-within .mz-dd {display: block;} .mz-kirilim .mz-dd a { display: block; padding: 7px 16px; font-size: 13px; font-weight: 400; color: #3e4c59; white-space: nowrap; text-decoration: none; } .mz-kirilim .mz-dd a:hover, .mz-kirilim .mz-dd a:focus { background: var(--mz-brand-acik, #faf6f5); color: var(--mz-brand, #c0392b); text-decoration: none; } .mz-kirilim .mz-dd a.mz-acik { color: var(--mz-brand, #c0392b); font-weight: 700; background: var(--mz-brand-acik, #faf6f5); } /* Yapiskan baslikta acilir liste kesilmesin. */ .mz-ust-sabit.mz-sabit {overflow: visible;} /* ============================================================ LPANEL LOGOSU "Logo" / "Mobil Logo" ayari doluysa halka + yazi markasinin yerine o gorsel basilir. Olculer yazi markasinin kapladigi alana gore secildi ki iki durumda da ust bolumun yuksekligi degismesin. ============================================================ */ .mz-logo .mz-logo-img { max-block-size: 44px; max-inline-size: 240px; inline-size: auto; block-size: auto; display: block; } .mz-logo.mz-logo-gorsel {gap: var(--mz-space-3, 12px);} /* ============================================================ ULKE SECICI ACILIR LISTESI Kirilim yolundaki .mz-dd ile ayni dili konusur; farki: koyu hizmet seridinin uzerinde durdugu icin kendi zeminini tasir. ============================================================ */ .mz-util .mz-ulke.mz-acilir {position: relative; padding: 0;} .mz-util .mz-ulke-zirr { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; padding: 3px 0; } .mz-util .mz-ulke-zirr img {inline-size: 16px; block-size: 12px; object-fit: cover; border-radius: 2px;} .mz-ulke-dd { display: none; position: absolute; inset-block-start: 100%; inset-inline-end: 0; min-inline-size: 232px; /* KENDI ICINDE KAYAR (26 Eylul). 26 pazar acilinca liste ekrandan tasiyordu ve kaydirma yoktu; "Daha fazla goster" gorunmez oldu. Yukseklik ekranla sinirli, fazlasi kutunun icinde kayar; overscroll-behavior kaydirma sona gelince sayfaya gecmesin diye (yoksa sayfa kayar, imlec kutudan cikar, liste kapanir). Alt bilgideki ulke secici ayni uc ozellikle zaten kayiyordu. */ max-block-size: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain; padding-block: 0; background: var(--mz-yuzey, #fff); border: 1px solid var(--mz-cizgi, #e4e7eb); border-block-start: 2px solid var(--mz-brand, #c0392b); border-radius: 0 0 6px 6px; box-shadow: 0 8px 20px rgba(31, 41, 51, .16); z-index: 1060; } /* Ilk ve son satir KAYARKEN DE gorunur kalir: "Tum ulkeler" ustte, "Daha fazla goster" altta. Sahibin istedigi tam olarak bu iki satira ulasmakti. Zemin rengi sart - yoksa kayan satirlar yapiskan satirin arkasindan gorunur. */ .mz-ulke-dd .mz-dd-ust, .mz-ulke-dd .mz-dd-alt { position: sticky; z-index: 1; background: var(--mz-yuzey, #fff); } .mz-ulke-dd .mz-dd-ust {inset-block-start: 0;} .mz-ulke-dd .mz-dd-alt {inset-block-end: 0;} .mz-util .mz-ulke.mz-acilir:hover .mz-ulke-dd, .mz-util .mz-ulke.mz-acilir:focus-within .mz-ulke-dd {display: block;} .mz-ulke-dd a, .mz-ulke-dd .mz-dd-pasif { display: flex; align-items: center; gap: 9px; padding: 7px 14px; font-size: 13px; color: #3e4c59; text-decoration: none; white-space: nowrap; } .mz-ulke-dd img {inline-size: 18px; block-size: 13px; object-fit: cover; border-radius: 2px; flex: none;} .mz-ulke-dd a:hover {background: #faf6f5; color: var(--mz-brand, #c0392b);} .mz-ulke-dd a.on {color: var(--mz-brand, #c0392b); font-weight: 700; background: #faf6f5;} /* Ilk ve son satir listeden ayrilsin: ikisi de ulke-sec sayfasina gider. */ .mz-ulke-dd .mz-dd-ust { border-block-end: 1px solid #f0f2f4; font-weight: 600; color: var(--mz-ink, #1f2933); } .mz-ulke-dd .mz-dd-alt { border-block-start: 1px solid #f0f2f4; font-weight: 600; color: var(--mz-brand, #c0392b); justify-content: space-between; } .mz-ulke-dd .mz-dd-alt i {font-size: 10px;} [dir="rtl"] .mz-ulke-dd .mz-dd-alt i {transform: scaleX(-1);} .mz-ulke-dd .mz-dd-ara { padding: 8px 14px 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--mz-faint, #9aa5ae); border-block-start: 1px solid #f0f2f4; margin-block-start: 4px; } /* Yakinda acilacak pazarlar tiklanamaz; goz de bunu anlamali. */ .mz-ulke-dd .mz-dd-pasif {color: var(--mz-faint, #9aa5ae); cursor: default;} .mz-ulke-dd .mz-dd-pasif img {opacity: .55;} /* ============================================================ BIRLESIK SERIT (sahibin karari, 2026-08-29) Kirilim yolu ile koyu kullanici arac seridi TEK bant oldu. Once iki ayri bant vardi: ekranin ust ~96 pikselini birlikte yiyorlardi ve ikisinde de ayni yere giden iki "Favorilerim" baglantisi bulunuyordu. Birlesmenin ikinci faydasi bir hatayi kapatiyor: iki YAPISKAN bant varken bir bolum bagina tiklandiginda hedef baslik ustteki bandin altinda kaliyordu, cunku dusulecek yukseklik iki degisken bandin toplamiydi. Tek serit = tek ve bilinen yukseklik; asagida bir degiskene yazilip capa payi olarak kullaniliyor. ============================================================ */ /* BEYAZ SERIT + 36px (sahibin karari, 2026-09-02) ------------------------------------------------------------ Sahip iki sey istedi ve ikisi TEK degisiklikle karsilaniyor: "لون الشريط الكحلي لا اريده ان يكون لونه الاساسي هو اللون الكحلي حتى لا يفصل الصفحه فتبان اصغر ... اريده باللون الابيض" "اريد تغيير شريط المسار ايضا حتى يكون بشكل انسب واصغر" Marka rengi KAYBOLMUYOR, 2px'lik alt cizgiye tasindi. Sebep: bu serit ulke paletinin ekrandaki tek buyuk yuzeyiydi; tamamen beyaza cevrilseydi sa.mezad.net ile tr.mezad.net gorsel olarak ayirt edilemezdi. 2px sayfayi yatay kesmeden pazari soyluyor. UCUNCU KAZANC - BIR HATA DA BURADA KAPANIYOR. Serit koyu iken mz-kullanici-cubugu.css'teki taban kurallari yanlis zeminde calisiyordu: onlar ACIK zemin icin yazilmis (":hover -> background: var(--mz-yuzey,#fff)"), ama asagidaki koyu-serit blogu ayni dugmenin yazisini BEYAZ tutuyordu. Sonuc beyaz uzerine beyaz - sahibin bildirdigi "يوجد كسر بالالوان ... تصبح الكلمه باللون الابيض والخيار باللون الابيض". Serit beyaz olunca taban kurallari DOGRU zemine dusuyor; hata yamanmiyor, sebebi ortadan kalkiyor. Bu yuzden asagida koyu serit icin yazilmis renk bloklari kaldirildi - ustlerine yeni kural yigmak yerine. */ :root { --mz-yol-yuk: 36px; } /* Pimli dil seridinin yuksekligi: kategori yolu seridi (.mz-nav-yol) "Sticky Header" ayari KAPALIYKEN bunun ALTINA pimlenir. Olculdu (bh.mezad.net, 2026-09-14): .mz-util 38px, .mz-mobil-serit 52px. Yazi boyutu ya da dugme olcusu degisirse burasi da degismeli; tests/mz_dil_dugme_sirasi_test.mjs gercek araligi olcuyor. */ :root { --mz-util-yuk: 38px; --mz-mobil-serit-yuk: 52px; } /* Bu yapisma "Sticky Header" ayari KAPALI iken gecerlidir; ayar acik oldugunda serit .mz-ust-sabit.mz-sabit yigininin icinde pimlenir ve yukarida position:static'e cekilir. */ .mz-nav-yol { position: sticky; inset-block-start: 0; z-index: 900; background: var(--mz-yuzey, #fff); color: var(--mz-ink, #1f2933); border-block-end: 2px solid var(--mz-brand, #3f475f); } .mz-nav-yol .mz-in { min-block-size: var(--mz-yol-yuk); /* Serit'in KENDISI kaydirma kabi DEGIL: icindeki mutlak konumlu acilir listeler (kirilim menusu, arac panelleri) kirpilmasin. */ overflow: visible; gap: 0; } /* ---------- DIL SERIDI HER ZAMAN PIMLI (sahip, 2026-09-14) ---------- Sahip: "طلبت ان يكون هيدر اللغات ثابت في الاعلى لا يختفي ابدا". OLCULEN KUSUR (bh.mezad.net, 1180px ve 390px, 600px kaydirma): .mz-diller top -593 EKRAN DISI, yapiskan ata YOK .mz-mobil-diller top -584 EKRAN DISI, yapiskan ata YOK Serit yapiskan yigin (.mz-ust-sabit.mz-sabit) ICINE alinmisti ve o yigin yalnizca LPanel "Sticky Header" ayari ACIKKEN kutu oluyor. Bahreyn'de ayar kapali: sinif basilmiyor, hicbir sey yapismiyor. "Her zaman" istenmisti; "ayar acikken" teslim edilmisti. Testim de fiksturde sinifi kendisi basiyordu, yani bu hali hic olcmemisti. COZUM .mz-nav-yol ile AYNI kalip (yukarida): kendi basina pimli, yigin icindeyken static. Ayar acikken yigin onu tasir ve iki kardesin ayni top:0'a yapisma yarisi (inc/mz-ust.php'deki uyari) dogmaz; ayar kapaliyken yigin "contents" oldugu icin kutusu yok, serit sayfa akisinda tek basina pimlenir - olctugumde top 7. KATEGORI YOLU SERIDI ALTINA PIMLENIR. .mz-nav-yol da top:0'a yapisiyor; ikisi ayni cizgide olunca yol seridi dil seridinin ALTINDA kaliyor ve tiklanamiyordu (kategori sayfasinda olculdu: elementFromPoint dil seridini verdi). Ofset dil seridinin yuksekligi kadar; token yukarida. */ @media (min-width: 992px) { .mz-util { position: sticky; inset-block-start: 0; z-index: 1000; /* yol seridinin (900) ustunde, pimli yiginin (1020) altinda */ } .mz-ust-sabit.mz-sabit .mz-util {position: static;} .mz-ust-sabit:not(.mz-sabit) .mz-nav-yol {inset-block-start: var(--mz-util-yuk);} } @media (max-width: 991px) { /* Mobilde pimlenen .mz-mobil-serit'tir (mz-v2-mobil.css); yol seridi onun altina iner. Ayar tek oldugu icin .mz-sabit'in yoklugu mobil sinifin da yoklugu demektir. */ .mz-ust-sabit:not(.mz-sabit) .mz-nav-yol {inset-block-start: var(--mz-mobil-serit-yuk);} } /* ILAN SAYFASININ KIRILIM SERIDI YIGININ DISINDA (inc/mz-ilan-kirilim.php). Yukaridaki iki kural sadece yigin ICINDEKI seridi asagi indiriyor; disaridaki top:0'da kalip pimli bandin ARKASINA giriyordu - tr.mezad.net ilan sayfasinda olculdu (2026-09-14): serit 0..38, elementFromPoint bandi verdi, tiklanamiyor. Ayar ACIKKEN de boyleydi (band = yigin), yani kusur dil seridinden ONCE de vardi; dil seridi onu ayar kapaliyken de gorunur kildi. Ofset sabit sayi OLAMAZ: ayar acikken band yigin (logoya gore degisir; baslik gizlenince kuculur). O sayfada zaten calisan olcum var: mzUstBosluk --mz-yol-ust yaziyor (kirilim seridi HARIC pimli bandin alti; kendini sayarsa her olcumde asagi kayardi). Betik yokken yedek dil seridinin token'i - ayar kapali varsayilan. */ @media (min-width: 992px) { .mz-nav-yol-ilan {inset-block-start: var(--mz-yol-ust, var(--mz-util-yuk));} } @media (max-width: 991px) { .mz-nav-yol-ilan {inset-block-start: var(--mz-yol-ust, var(--mz-mobil-serit-yuk));} } /* Kaydirma yalnizca basamaklarin kabinda. */ .mz-yol-kaydir { display: flex; align-items: center; min-inline-size: 0; overflow-x: auto; /* DIKEY TASMA KAPALI. Acik birakilsa - ya da "visible" yazilsa - tarayici onu "auto"ya cevirir ve fare tekerlegi sayfayi degil bu kabi kaydirir. Ayni tuzak ilan sayfasinda da yasandi. */ overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .mz-yol-kaydir::-webkit-scrollbar { display: none; } @media (min-width: 992px) { /* Masaustunde acilir menuler calisiyor; kap kirpmamali. Uzun basamak adi kaydirma yerine kisaltiliyor. */ .mz-yol-kaydir { overflow: visible; } .mz-nav-yol .mz-kirilim-ad { max-inline-size: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Acik zeminde okunur renkler. Once burada koyu serit icin yazilmis bir blok vardi (beyaz yazi, yari saydam beyaz cip). Serit beyaza donunce o blok yalnizca gereksiz degil ZARARLIYDI: taban kurallarinin verdigi beyaz cipin uzerine beyaz yazi biniyordu. Kaldirildi. Basamak yolu gri, BULUNULAN basamak koyu ve kalin - "buradasin" bilgisi renkle degil agirlikla veriliyor, boylece ulke paleti degisince de dogru kaliyor. */ .mz-nav-yol .mz-kirilim > a, .mz-nav-yol .mz-kirilim .mz-kirilim-ad, .mz-nav-yol .mz-yol-magaza { color: var(--mz-gri, #6b7683); font-weight: 400; } .mz-nav-yol .mz-kirilim > a:hover, .mz-nav-yol .mz-kirilim:hover .mz-kirilim-ad, .mz-nav-yol .mz-yol-magaza:hover { color: var(--mz-ink, #1f2933); text-decoration: none; } .mz-nav-yol .mz-kirilim:last-of-type > a, .mz-nav-yol .mz-kirilim:last-of-type .mz-kirilim-ad { color: var(--mz-ink, #1f2933); font-weight: 600; } .mz-nav-yol .mz-ayrac { color: var(--mz-faint, #9aa5ae); } .mz-nav-yol .mz-ok { color: var(--mz-faint, #9aa5ae); } /* "Magazalar" bagi .mz-kirilim'in ICINDE degil, bu yuzden onun "padding: 0; border: 0" sifirlamasini ALMIYOR: duz kategori cubugu icin yazilmis ".mz-nav a" kurali ona 12+12px dikey dolgu ve 3px alt cizgi veriyor - toplam 46.5px. Serit 48px iken bu gorunmuyordu; 36px'te seridi ICERIDEN geri sisirirdi. Olculdu, tahmin edilmedi. */ .mz-nav-yol .mz-yol-magaza { padding-block: 6px; padding-inline: 10px; border-block-end: 0; border-radius: var(--mz-radius-sm, 8px); flex: none; } .mz-nav-yol .mz-yol-magaza:hover { background: rgba(31, 41, 51, .07); } /* ACILAN BASAMAK. Serit koyu iken burada ozel bir renk blogu vardi; artik gerekmiyor. 440-514 satirlarindaki TABAN kurallari zaten acik zemin icin yazilmisti ve serit beyaz olunca dogru calisiyorlar. Yeni kural eklemek yerine eskisi silindi - tek dogru yer birden fazla olsun istemiyoruz. Tek kalan: cipin marka tonundan turememesi. --mz-brand-acik color-mix ile "markanin %10'u + beyaz" oldugundan bazi paletlerde neredeyse beyaz cikiyor ve beyaz serit uzerinde acildigi belli olmuyor. Bu yuzden cip seridin USTUNE notr bir katman koyuyor - marka rengi ne olursa olsun bir kademe koyu. */ .mz-nav-yol .mz-kirilim.mz-acilir:hover, .mz-nav-yol .mz-kirilim.mz-acilir:focus-within { background: rgba(31, 41, 51, .07); } .mz-nav-yol .mz-kirilim.mz-acilir:hover > a, .mz-nav-yol .mz-kirilim.mz-acilir:focus-within > a, .mz-nav-yol .mz-kirilim.mz-acilir:hover .mz-kirilim-ad, .mz-nav-yol .mz-kirilim.mz-acilir:focus-within .mz-kirilim-ad, .mz-nav-yol .mz-kirilim.mz-acilir:hover .mz-ok, .mz-nav-yol .mz-kirilim.mz-acilir:focus-within .mz-ok { color: var(--mz-ink, #1f2933); } /* Arac cubugu bu seridin icinde: kendi bant zemini ve yuvarlak koseleri gereksiz. Renk vermiyoruz - mz-kullanici-cubugu.css'teki taban kurallari (marka rengi yazi, beyaz hover cipi) artik dogru zeminde. Burada yalnizca YERLESIM var. */ .mz-nav-yol .mz-kc { display: flex; align-items: center; gap: 2px; flex: none; } /* Arac dugmelerinin bir kismi : duz kategori cubugu icin yazilmis ".mz-nav a" kurali (0,1,1) onlara 12+12px dolgu ve 3px alt cizgi veriyor ve ".mz-kc-dugme" (0,1,0) ozgullukte kaybediyor. Olculdu: dugme 45.5px, yani 36px'lik seridi tek basina 47.5px'e cikariyordu. Ayni kural