/* ============================================================ 11-mega-menu.css — Mega menü / dropdown (Sephora.com.tr düzeni) Flatsome'in GERÇEK nav sınıflarını hedefler: .header-nav > li.menu-item-has-children (tetikleyici) ul.nav-dropdown (açılan panel) ul.nav-dropdown li a (linkler) Tam genişlik "mega" görünümü için menü öğesine .bks-mega, çok-sütun liste için panele .bks-mega-cols yardımcı sınıfı eklenir. ── RE-DOĞRULAMA (2026-06-01, "en-eski bölüm" rotasyonu; CANLI anasayfa "Makyaj" üzerine GERÇEK hover ile panel açıldı; Chrome computed-style; vw1920; ekran görüntüsü scrim'in 0 3200px box-shadow'u yüzünden YİNE DONDU → DOM ölçümüne güvenildi). TÜM ÖLÇÜLER BİREBİR DOĞRULANDI, DEĞİŞMEDİ: panel w1905 #fff radius0 border-top0 KENDİ-gölge-yok + scrim rgba(0,0,0,.5) 0 3200px; transition 0s .24s; max-h680. İç UL 1440 ORTALI (margin 0 232.5) pad 32/24 flex-col-wrap align-content/items flex-start row-gap16 col-gap40 overflow-hidden max-h680. Sütun li 246 adım 286 (x257/543/829). Yaprak histogramı: 36×(14/500/lh20/ls.35) link + 14×(14/700) başlık; 400-ağırlık yaprak YOK; renkli/pembe yaprak YOK (hepsi #000). sarmalayıcı 16/400 pad8/0 → li h36 (anchor↔leaf farkı doğrulandı). Tetikleyici "Makyaj" açıkken #000/400 border-bottom0 ::after none (SİYAH, alt-çizgi YOK). promo img=0. İYİLEŞTİRME (ölçü değil): mega linkleri + tetikleyiciye :focus-visible Bisso-kırmızı odak halkası (05/06/07 ile tutarlı); cols'a overflow:hidden + align-items:flex-start (Sephora items-start / overflow-hidden computed sınıflarıyla hizalı). GERÇEK ÖLÇÜ — sephora.com.tr "Makyaj" mega menü DOM'undan (Chrome, innerWidth 1920, 2026-06-01 09:10 — CANLI panel GERÇEKTEN AÇILDI: anasayfa header'ında "Makyaj" üzerine hover ile mega mount edildi, computed-style ölçüldü; 50 link / 5 sütun. Ekran görüntüsü scrim'in dev box-shadow'u yüzünden dondu → DOM ölçümüne güvenildi): • PANEL sarmalayıcı: div.visible.flex.absolute.left-0.w-full .delay-moderate2.max-h-headerPanel.top-headerDesktop → TAM GENİŞLİK (ölçülen 1905), zemin #fff, border-radius 0, border-top 0 (çizgi YOK), panelin KENDİ görünür gölgesi YOK. Açılınca SAYFA rgba(0,0,0,.5) scrim ile kararıyor → box-shadow ÖLÇÜLEN birebir: rgba(0,0,0,0) 0 0 0 0, rgba(0,0,0,0) 0 0 0 0, rgba(0,0,0,.5) 0px 3200px 0px 3200px (0 3200px hilesi). Panel kategori navinin hemen ALTINA yapışık (ölçülen top 184, sticky header top-headerDesktop). max-height 680px. • İÇ KAPSAYICI: ul.flex.flex-col.flex-wrap.w-maxWidth.max-h-headerPanel .m-auto.mt-0.py-2.px-1.5.justify-start → genişlik 1440px ORTALI (margin 0 232.5 = m-auto), zemin saydam, padding ÖLÇÜLEN 32px 24px; display flex / flex-direction column / flex-wrap wrap / align-content flex-start / justify-content flex-start / row-gap 16px / column-gap 40px / max-height 680px. • SÜTUN (li): genişlik 246px; sütun adımı 286px (=246+40); x ölçülen 257 / 543 / 829 / 1115 / 1401 = 5 sütun. Tek-link li yüksekliği 36px, dikey adım 52px (36 + row-gap 16). ⚠️ EN ÖNEMLİ DÜZELTME (bu çalıştırma 2026-06-01 09:10): • LİNK GÖRÜNEN METNİ artık 14px / 500 / #000 / line-height 20px / letter-spacing .35px (eski "16px/400/lh24/ls.4" YANLIŞTI → o değer yalnız SARMALAYICISININ computed fontu idi; GÖRÜNEN metin içindeki

/ yaprağında: ÖLÇÜLEN 14/500/lh20/ls.35). Yaprak ağırlık histogramı: 36×500 (normal link) + 14×700 (başlık), 400 yaprak YOK → normal link 500, başlık 700. dolgusu 8px 0 (li 36 = 20 lh + 8 + 8). Link ve başlık artık aynı 14px/lh20/ls.35; TEK fark ağırlık (500 ↔ 700). • KALIN BAŞLIK (kategori başlığı): yaprak 14px / 700 / #000 / line-height 20px / letter-spacing .35px / margin-bottom 0 / tt yok. (DOĞRULANDI — değişmedi.) • VURGU: bu "Makyaj" panelinde renkli/pembe link YOK (tüm metin #000, rgb(0,0,0)). Eski pembe rgb(217,34,130) "Sephora Collection/Özel Setler" başka üst-kategori menüsündeydi. .bks-accent yardımcısı opsiyonel Bisso kırmızısı olarak KORUNDU (varsayılan kullanılmaz). • TETİKLEYİCİ (açık nav öğesi): ÖLÇÜLEN renk #000, font-weight 400, border-bottom 0, ::after content:none → Sephora navi açıkken SİYAH kalır, ALT ÇİZGİ YOK. Eski "kırmızı alt-çizgi" Sephora'da YOK → KALDIRILDI. Renk hover/aktif kırmızısı (Bisso marka kuralı, 01 ile tutarlı) KORUNDU; çizgi atıldı (Sephora'nın sade görünümüne yakın). • Geçiş: panel transition ÖLÇÜLEN "0s 0.24s" → transition-delay .24s (Sephora "delay-moderate2"; nav üstünde gezerken titremesin). • Yazı tipi: avantGardeGothic → Bisso sistem font yığını (--bks-font). DOĞRULANAN (değişmedi, ÖLÇÜLEN birebir): panel w-full 1905, bg #fff, radius 0, border-top 0, panel kendi gölgesi none, scrim rgba(0,0,0,.5) (0 3200px); iç kapsayıcı 1440 ORTALI (margin 0 232.5) padding 32/24 flex-col-wrap align-content flex-start row-gap16 col-gap40 max-h680; sütun li 246 adım 286 (x 257/543/829/1115/1401); panelde promo görseli YOK. ÖNCEKİ DÜZELTMELER (korundu): iç kapsayıcı 1440 (header/footer hizalı); border-top 0; radius 0; panel kendi gölgesi none → ayrım .bks-mega-scrim sayfa-karartması; sütunlar panelin doğrudan çocuğuysa 1440 ortalama padding:32px max(24px, calc((100%-1440px)/2)) ile. ============================================================ */ /* === TETİKLEYİCİ: üst nav öğesi açıkken Bisso kırmızı vurgu (renk) === Sephora tetikleyiciyi SİYAH bırakır (ÖLÇÜLEN #000/400, alt-çizgi YOK); renk hover/aktif kırmızısı 01-header ile tutarlı Bisso marka kuralıdır. Eski kırmızı ALT-ÇİZGİ Sephora'da olmadığı için KALDIRILDI. */ .header-nav > li.menu-item-has-children > a, .header-bottom-nav > li.menu-item-has-children > a{ position:relative; } .header-nav > li.current-dropdown > a, .header-nav > li.menu-item-has-children:hover > a, .header-bottom-nav > li.current-dropdown > a{ color:var(--bks-red) !important; } /* === AÇILAN PANEL (genel/küçük dropdown) — beyaz, ince çizgi, yumuşak gölge === Not: TAM GENİŞLİK mega için aşağıdaki .bks-mega bu stilleri ezer. Sephora'da yalnız mega panel vardır; küçük dropdown bu güvenli varsayılan. */ .header-nav .nav-dropdown, ul.nav-dropdown, .nav-dropdown.nav-dropdown-default{ background:var(--bks-bg) !important; border:1px solid var(--bks-line) !important; border-radius:8px !important; box-shadow:var(--bks-shadow-pop) !important; padding:14px 16px !important; margin-top:0 !important; font-family:var(--bks-font); } /* açılış animasyonu — yumuşak indir + soldur */ .nav-dropdown{ transition:opacity var(--bks-t), transform var(--bks-t) !important; } .nav-dropdown:not(.nav-dropdown-default){ will-change:opacity,transform; } /* === LİNKLER (tüm dropdown'larda ortak) === GERÇEK ÖLÇÜ 2026-06-01: GÖRÜNEN link metni 14/500/#000 lh20 ls.35 (eski 16/400/lh24/ls.4 = yalnız sarmalayıcısıydı; yaprak

/ 14/500). dikey dolgusu 8px → li 36px (20 lh + 8 + 8). */ ul.nav-dropdown li a, .nav-dropdown li > a{ font-size:14px !important; font-weight:500 !important; color:var(--bks-black) !important; line-height:20px !important; letter-spacing:.35px; text-transform:none !important; padding:8px 0 !important; border:0 !important; transition:color var(--bks-t-fast) !important; } /* yaprak metin sarmalayıcısı (Sephora içinde

/) — devral */ .nav-dropdown li a > span, .nav-dropdown li a > p{ font:inherit !important; letter-spacing:inherit !important; color:inherit !important; margin:0 !important; } ul.nav-dropdown li a:hover, .nav-dropdown li > a:hover{ color:var(--bks-red) !important; background:transparent !important; } /* liste sıfırlama */ ul.nav-dropdown, .nav-dropdown ul{ list-style:none; } .nav-dropdown li{ border:0 !important; } /* alt-başlık (kalın kategori başlığı) — Sephora 14/700/#000 lh20 ls.35 mb0 (GERÇEK ÖLÇÜ 2026-06-01: yaprak 14/700/lh20/ls.35/mb0 DOĞRULANDI; link ile aynı 14px/lh20/ls.35, ayrım yalnız ağırlık 700 ↔ 500) */ .nav-dropdown.nav-dropdown-bold > li > a, .nav-dropdown li.menu-item-has-children > a:first-child, .nav-dropdown .nav-dropdown-col > .menu-item-has-children > a, .nav-dropdown .bks-mega-title{ font-size:14px !important; font-weight:700 !important; color:var(--bks-black) !important; letter-spacing:.35px; line-height:20px !important; text-transform:none !important; margin-bottom:0 !important; } /* öne-çıkan / vurgulu link (Sephora bazı menülerde pembe rgb(217,34,130)) → Bisso kırmızı. "Makyaj" panelinde YOK (tüm metin #000); yardımcı olarak korundu — her ağırlıkta (500 link de, 700 başlık da) kırmızı olur. */ .nav-dropdown li.highlight > a, .nav-dropdown li.bks-accent > a, .nav-dropdown a.bks-accent, .nav-dropdown .bks-accent, .nav-dropdown li.menu-item.callout > a{ color:var(--bks-red) !important; } .nav-dropdown li.bks-accent.bks-mega-title, .nav-dropdown .bks-mega-title.bks-accent{ font-weight:700 !important; } /* === ERİŞİLEBİLİRLİK: klavye odak halkası (Bisso kırmızı) === ÖLÇÜ DEĞİL — 05/06/07 ile tutarlı klavye erişilebilirliği iyileştirmesi. Sephora mega linklerinde net bir odak göstergesi yok; Tab ile gezilince Bisso kırmızı 2px halka çıkar. Yalnız :focus-visible → fareyle tıklamada halka GÖRÜNMEZ, klavyede görünür. Eleman kendi köşesini korur. */ .header-nav > li.menu-item-has-children > a:focus-visible, .header-bottom-nav > li.menu-item-has-children > a:focus-visible, ul.nav-dropdown li a:focus-visible, .nav-dropdown li > a:focus-visible{ outline:2px solid var(--bks-red) !important; outline-offset:2px !important; color:var(--bks-red) !important; border-radius:2px; } /* === TAM GENİŞLİK MEGA PANEL === Menü öğesine .bks-mega ver: öğe position:static olur, dropdown header genişliği boyunca yayılır (Sephora w-full panel). */ .header-nav > li.bks-mega, .header-bottom-nav > li.bks-mega{ position:static !important; } .header-nav > li.bks-mega > .nav-dropdown, li.bks-mega > ul.nav-dropdown, ul.nav-dropdown.bks-mega{ left:0 !important; right:0 !important; width:100% !important; max-width:none !important; margin:0 !important; border:0 !important; /* Sephora: çizgi YOK */ border-radius:0 !important; /* Sephora: düz tam-genişlik panel */ background:var(--bks-bg) !important; /* beyaz */ /* Sephora 1:1 — GERÇEK ÖLÇÜ 2026-06-01: panelin KENDİ gölgesi YOK (DOM computed box-shadow 3. katmanı sadece scrim). Ayrım sayfa-karartma scrim'i ile sağlanır → .bks-mega-scrim (aşağıda). */ box-shadow:none !important; padding:0 !important; /* iç sarmalayıcı padding verir */ max-height:680px !important; /* Sephora ölçülen panel sınırı */ /* Sephora "delay-moderate2": GERÇEK ÖLÇÜ transition "0s 0.24s" → panel açılırken .24s gecikir (nav üstünde gezerken titremesin). */ transition-delay:.24s !important; } /* mega panel iç sarmalayıcı — ORTALI, gerçek Sephora genişliği 1440px */ li.bks-mega > ul.nav-dropdown, ul.nav-dropdown.bks-mega{ display:block; } li.bks-mega > ul.nav-dropdown > .container, li.bks-mega > ul.nav-dropdown > .bks-mega-inner, ul.nav-dropdown.bks-mega > .container, ul.nav-dropdown.bks-mega > .bks-mega-inner{ max-width:1440px !important; /* Sephora ölçülen iç kapsayıcı; header/footer ile hizalı */ margin:0 auto !important; padding:32px 24px !important; /* Sephora gerçek padding */ } /* === ÇOK-SÜTUN LİSTE (Sephora flex-col + flex-wrap) === Düz