/* ============================================================ 07-markalar.css — Markalar sayfası (A–Z) — Sephora 1:1 Üstte sayfa başlığı (H2) + A–Z harf navigasyonu (alt çizgili), altta harf bölümleri + %25 (4'e kadar) sütunlu marka listesi. .bks-* yardımcıları (özel sayfa) + Sephora'nın gerçek sınıfları (.brand-list/.brand-list-title/.brand-list-navigation/ .brand-categories/li.category/.category-link/.brand-subcategories/ .sub-category-link) + WooCommerce product_brand arşivi hedeflenir. GERÇEK ÖLÇÜ — sephora.com.tr/a-dan-z-ye-markalar/ DOM (getComputedStyle), 2026-06-01 18:17 (RE-DOĞRULAMA — "en eski bölüm" rotasyonu; Chrome computed-style vw1920): TÜM TİPOGRAFİ/ÖLÇÜ BİREBİR DEĞİŞMEDİ (başlık 32/400 lh36.48 ls1px #0a0a0a w1380; nav mt50 + iç ul border-bottom 1px #979797 pb20, pad-right 5px; scroll-link 20/400 lh29 ls21px #000 BÜYÜK-HARF, 27 link A–Z+"#", li.category flex/wrap; harf başlığı 25/400 lh40 ls.5 #000 flex-basis100%; sütun flex 0 1 25% mt20; marka 15/400 lh28 ls.5 #000 inline; gruplar arası 45px; font AvantGardeMedium→--bks-font. SAYIM doğrulandı: 1 başlık · 27 harf bölümü · 27 nav linki · 38 sütun · 140 marka). DÜZELTME (ölçü): sütun max-width 25% → **none** (canlı computed max-width:none; flex-grow:0 zaten %25'te tutar → 1:1). İYİLEŞTİRME: A–Z atlama ofseti tek değişkene alındı `scroll-margin-top:var(--bks-anchor-offset,96px)`. CANLI BULGU: Sephora
STATIC (sticky değil) + scroll-behavior:AUTO (anında jump, hash yok) → smooth-scroll EKLENMEDİ (1:1 anında); offset yalnız Bisso sticky-header güvenliği için kalır. 2026-06-01 — YENİDEN ÖLÇÜLDÜ (Chrome, innerWidth 1920, masaüstü): 2026-06-01 (RE-DOĞRULAMA — "en eski bölüm" rotasyonu): TÜM ÖLÇÜLER DEĞİŞMEDİ, canlı computed-style ile birebir doğrulandı → başlık 32/400 lh36.48 ls1px #0a0a0a w1380; nav margin-top 50 + iç `ul` border-bottom 1px #979797 pb20 (nav kabı padding-right 5px, iç ul w1375); scroll-link 20/400 lh29 ls21 #000; li.category flex/wrap gap normal(0); harf başlığı 25/400 lh40 ls.5 #000 flex-basis100% w1380; sütun flex 0 1 25% width 345 max-width:none mt20 ("A" grubu 2 sütun: x263/608 adım 345 = gap 0); marka linki 15/400 lh28 ls.5 #000 inline. SAYIM: 1 başlık · 27 harf bölümü · 27 nav linki · 38 sütun · 140 marka. YENİ (ölçü değil, iyileştirme): A–Z nav harf bölümüne atladığında sticky Bisso header (üst bar + ana satır + kategori nav ≈ 96px) harf başlığını ÖRTMESİN diye hedeflere `scroll-margin-top:96px` + klavye için `:focus-visible` odak halkası (Bisso kırmızı) eklendi. - YENİ BULGU: Sayfada artık **H2 BAŞLIK VAR** → `h2.brand-list-title` "A'DAN Z'YE MARKALAR": **32px / 400**, line-height **36.48px** (~1.14), letter-spacing **1px**, text-transform **none** (metin zaten BÜYÜK-HARF), renk **rgb(10,10,10) = #0a0a0a**, margin 0, TAM-GENİŞLİK (1380px). *(Eski not "Sephora bu sayfada başlık KULLANMAZ / H1 YOK" → DÜZELTİLDİ: H1 hâlâ yok ama H2 başlık eklenmiş. Başlık → nav arası boşluk 50px.)* - GERÇEK YAPI (doğrulandı; .brand-list.row çocukları sırayla): h2.brand-list-title → sayfa başlığı (margin 0) div.brand-list-navigation.row → A–Z nav kabı (block, margin-top 50px) > ul → ASIL AYRAÇ: border-bottom 1px #979797 + padding-bottom 20px > li.brand-list-navigation-item (display list-item) > a.scroll-link → harf linki div.brand-list-items → harf bölümleri sarmalayıcı > ul.brand-categories → harf bölümü (27 adet: A…Z + "#") > li.category [display:FLEX, wrap, row] ← sütunları dizen flex kabı > a.category-link → harf başlığı (TAM GENİŞLİK) > ul.brand-subcategories → SÜTUN (flex-basis %25), bölümde 1–4 sütun > li.sub-category > a.sub-category-link → marka linki (27 bölüm, 38 sütun, 140 marka linki ölçüldü.) - Kapsayıcı (div.brand-list.row): **max-width 1440px**, ölçülen içerik **1380px**, margin **40px 30px** (40 dikey + 30 yan), padding 0, display block. - A–Z nav AYRACI inner `ul`'da: border-bottom **1px solid #979797** (rgb 151,151,151), padding-bottom **20px**, margin 0. Kap `.brand-list-navigation` margin-top **50px** (başlık → nav boşluğu). Harf linki `a.scroll-link`: **20px / 400**, line-height **29px**, **letter-spacing 21px**, BÜYÜK-HARF, **#000**, alt-çizgi yok. (Aralık 21px ls'ten gelir.) - Harf bölümü (ul.brand-categories): display block; **margin-bottom 45px**. - li.category (flex kap): display **flex**, flex-wrap wrap, flex-direction row, **gap 0**. - Harf başlığı (a.category-link): TAM-GENİŞLİK (1380) **25px / 400**, line-height **40px**, letter-spacing **.5px**, BÜYÜK-HARF, **#000**, margin 0. - Sütun (ul.brand-subcategories): **flex-basis %25** (1380'de = ölçülen **345px**), flex-grow 0, flex-shrink 1, margin-top **20px**. SÜTUN ARASI BOŞLUK **0** (x=263/608, adım 345 = genişlik 345). *(Sabit width değil; 345 yalnızca computed sonuç.)* - Marka linki (a.sub-category-link): **15px / 400**, line-height **28px**, letter-spacing **.5px**, text-transform none, text-decoration none, **#000**, display inline. li.sub-category: margin-top **15px**, padding-bottom **15px**. - Yazı tipi: Sephora özel (AvantGarde); Bisso sistem yığını (--bks-font). Hover: kırmızı #c8102e. NOT: --bks-maxw token'ı (1320) diğer dosyalarda kullanıldığı için DEĞİŞTİRİLMEDİ; bu sayfada gerçek 1440px değeri yerel yazıldı. Canlı temaya DOKUNULMAZ; sadece referans CSS. ============================================================ */ /* === SAYFA KAPSAYICISI (gerçek max 1440px, içerik 1380, yan 30px) === */ .bks-brands-page, .tax-product_brand .page-wrapper .row.brand-list, .brand-list.row{ max-width:1440px !important; /* GERÇEK 1440 (token 1320 DEĞİL) */ width:auto; margin:40px auto !important; /* GERÇEK 40px dikey, yatay ortalı */ padding:0 30px; /* GERÇEK yan boşluk 30px → içerik ~1380px */ } /* === SAYFA BAŞLIĞI (H2) — GERÇEK: 32/400 ls1px #0a0a0a, alt boşluk 50px === */ .bks-brands-title, h2.brand-list-title, .brand-list .brand-list-title, .bks-brands-page > h1, .tax-product_brand .page-title h1, .page-title .markalar-title{ font-size:32px; /* GERÇEK 32px (eski 28 DÜZELTİLDİ) */ font-weight:400; /* GERÇEK 400 (ince) */ line-height:1.14; /* GERÇEK 36.48px / 32 */ letter-spacing:1px; /* GERÇEK 1px (eski .5px DÜZELTİLDİ) */ text-transform:none; /* GERÇEK none (metin zaten BÜYÜK-HARF) */ color:var(--bks-black); /* GERÇEK rgb(10,10,10) = #0a0a0a */ margin:0 0 50px; /* GERÇEK: başlık→nav boşluğu 50px */ padding:0; } /* === A–Z HARF NAVİGASYONU (üst) === */ /* AYRAÇ inner ul'da: 1px #979797 + padding-bottom 20px. Kap div ise margin-top 50px. */ .brand-list-navigation, .brand-list-navigation.row{ margin:0 0 0; /* başlık zaten 50px alt boşluk verdi (margin collapse → 50) */ padding:0; } .bks-az-nav, ul.bks-az-nav, .brand-az-index, .brand-list-navigation ul, .brand-list-navigation > ul{ list-style:none; display:flex; flex-wrap:wrap; /* GERÇEK: wrap */ justify-content:flex-start; /* GERÇEK: justify normal → flex-start */ align-items:flex-start; gap:0; /* GERÇEK: gap normal (0) — aralık letter-spacing'den */ margin:0; /* GERÇEK margin 0 (boşluk başlıktan / kaptan) */ padding:0 0 20px; /* GERÇEK alt boşluk 20px */ border-bottom:1px solid #979797; /* GERÇEK ÖLÇÜ: rgb(151,151,151) */ } .bks-az-nav{ margin:50px 0 0; } /* Bisso tek-ul: üst boşluğu ul taşır (başlık margin 0 ise) */ .bks-az-nav li, .brand-az-index li, li.brand-list-navigation-item{ margin:0;padding:0;list-style:none;display:list-item; } .bks-az-nav a, .bks-az-nav .scroll-link, .brand-az-index a, li.brand-list-navigation-item a, a.scroll-link{ display:inline-block; /* flex kabında block'a dönüşür; trailing ls korunur */ min-width:0; /* GERÇEK min-width 0 */ height:29px; font-size:20px; /* GERÇEK 20px */ font-weight:400; /* GERÇEK 400 (ince) */ line-height:29px; /* GERÇEK 29px */ letter-spacing:21px; /* GERÇEK 21px → havalı harf aralığı */ text-transform:uppercase; color:#000; /* GERÇEK rgb(0,0,0) */ background:transparent; border:0; border-radius:0; margin:0; padding:0; text-decoration:none; transition:color var(--bks-t-fast); } .bks-az-nav a:hover, .bks-az-nav .scroll-link:hover, .brand-az-index a:hover, li.brand-list-navigation-item a:hover, a.scroll-link:hover{ color:var(--bks-red); } /* Bisso uyarlama */ .bks-az-nav a.is-empty, .brand-az-index a.is-disabled{ color:#cfcfcf;pointer-events:none; } /* === HARF BÖLÜMLERİ SARMALAYICI === */ .brand-list-items{ display:block;margin:0;padding:0; } /* === HARF BÖLÜMÜ (ul.brand-categories) === */ .bks-az-section, ul.brand-categories, .brand-list .brand-categories{ list-style:none; display:block; margin:0 0 45px; /* GERÇEK: gruplar arası 45px */ padding:0; } /* Harf bölümü içi flex kabı (başlık + sütunlar) — Sephora'da li.category */ .bks-az-group, li.category, .brand-categories > li.category{ display:flex; /* GERÇEK: flex */ flex-wrap:wrap; /* GERÇEK: wrap */ flex-direction:row; align-content:flex-start; justify-content:flex-start; gap:0; /* GERÇEK: sütun arası boşluk 0 (4×345=1380) */ list-style:none; margin:0; padding:0; } /* Harf başlığı (A, B, C… #) — TAM GENİŞLİK */ .bks-az-letter, a.category-link, .brand-categories .category-link{ flex:0 1 100%; /* GERÇEK: tam genişlik (1380px) */ display:block; width:100%; font-size:25px; /* GERÇEK 25px */ font-weight:400; /* GERÇEK 400 (ince) — 800 DEĞİL */ letter-spacing:.5px; /* GERÇEK .5px */ line-height:40px; /* GERÇEK 40px */ text-transform:uppercase; color:#000; /* GERÇEK rgb(0,0,0) */ margin:0; padding:0; text-decoration:none; } /* === A–Z ATLAMA HEDEFİ — sticky header ofseti + klavye odağı (İYİLEŞTİRME) === */ /* CANLI BULGU (2026-06-01): Sephora'nın KENDİ markalar sayfasında
STATIC (sticky/fixed DEĞİL) ve html/body scroll-behavior:AUTO → A–Z linki ANINDA atlar (hash YOK; JS scrollIntoView). Bu yüzden smooth-scroll EKLENMEZ (1:1 = anında). Ancak Bisso/Flatsome'da sticky header sık açıktır; açıkken harf başlığını örtmesin diye atlama hedeflerine üst boşluk bırakılır. Tek kaynak: --bks-anchor-offset (Bisso gerçek sticky header yüksekliği; varsayılan 96px = üst bar 56 + ana satır 72'nin örtüşmeli ~yaklaşımı). scroll-margin yalnız atlama hedefi olunca etkir → başka yeri bozmaz. */ .bks-az-section, ul.brand-categories, .bks-az-letter, a.category-link, li.category, .bks-az-anchor{ scroll-margin-top:var(--bks-anchor-offset,96px); /* sticky header güvenliği (Sephora header static; offset Bisso tarafı içindir) */ } .bks-az-nav a:focus-visible, a.scroll-link:focus-visible, a.sub-category-link:focus-visible, .bks-brand-list a:focus-visible{ outline:2px solid var(--bks-red); /* klavye erişilebilirliği — Bisso kırmızı odak halkası */ outline-offset:2px; color:var(--bks-red); } /* === MARKA LİSTESİ — SÜTUNLAR === */ /* Sephora aynası: her ul.brand-subcategories bir SÜTUN (flex-basis %25, 0 gap) */ ul.brand-subcategories, .brand-categories .brand-subcategories{ flex:0 1 25%; /* GERÇEK flex-basis %25 (1380'de = 345px) */ max-width:none; /* GERÇEK ÖLÇÜ max-width:none (eski 25% DÜZELTİLDİ — flex-grow:0 zaten %25'te tutar; son satırda az sütun büyümez) */ width:auto; /* 345 COMPUTED sonuçtur; sabit width YAZILMAZ */ list-style:none; margin:20px 0 0; /* GERÇEK margin-top 20px */ padding:0; } li.sub-category, .brand-subcategories li{ list-style:none; margin:15px 0 0; /* GERÇEK: satır üstü 15px */ padding:0 0 15px; /* GERÇEK: alt boşluk 15px */ } a.sub-category-link, .brand-subcategories li a{ display:inline; /* GERÇEK: inline */ font-size:15px; /* GERÇEK 15px */ font-weight:400; /* GERÇEK 400 */ letter-spacing:.5px; /* GERÇEK .5px */ line-height:28px; /* GERÇEK 28px */ text-transform:none; /* GERÇEK: none (içerik zaten karışık/BÜYÜK gelir) */ color:#000; /* GERÇEK rgb(0,0,0) (gri DEĞİL) */ text-decoration:none; /* GERÇEK: alt-çizgi yok */ transition:color var(--bks-t-fast); } a.sub-category-link:hover, .brand-subcategories li a:hover{ color:var(--bks-red); } /* Bisso uyarlama */ /* === ALTERNATİF: tek düz