/* ============================================================
   01-header.css — Header + kategori menüsü (Sephora 1:1)
   GLOBAL: tüm sayfalarda (anasayfa, ürün, kategori, sepet) geçerli.
   Flatsome Header Builder sınıflarını hedefler.

   GERÇEK ÖLÇÜ (sephora.com.tr DOM, 2026-06-01):
   • Üst duyuru çubuğu: 56px, krem #ffedd6, metin 16/400 siyah, ORTALI.
   • Ana satır: 72px, beyaz, KENARLIK ve GÖLGE YOK; logo 178×24; max 1440px.
   • Arama: h48 PILL (radius ~9999), zemin #f2f2f2, KENARLIKSIZ, 16/400,
     sol ikon, placeholder "Ürün,marka,kategori ara...".
   • Sağ ikonlar: 32×32 buton.
   • Kategori nav: 55px satır; link 16/400 siyah, ls .4px, BÜYÜK-HARF YOK,
     padding 8px 0, öğe arası ~40px, hover Bisso kırmızı.
   DÜZELTİLDİ: eski nav 14/600 → 16/400; header min-h 84 → 72; arama
   kenarlıklı #f6f4f2 → KENARLIKSIZ #f2f2f2; header alt kenarlığı kaldırıldı.
   ============================================================ */

/* === ÜST DUYURU ÇUBUĞU — krem, düz, ORTALI === */
.header-top,
#top-bar.header-top,
.top-bar{
  background:var(--bks-cream) !important;   /* Sephora #ffedd6 → Bisso krem #fdeee6 */
  color:var(--bks-text) !important;
  border:0 !important;
  box-shadow:none !important;
  min-height:44px;                          /* gerçek 56px; Flatsome'da kompakt uyarlama */
  font-size:14px;                           /* gerçek metin 16/400 */
  font-weight:400;
  letter-spacing:.2px;
}
#top-bar .flex-row .nav,
.header-top .nav{justify-content:center;}   /* duyuruyu ortala */
.header-top a,.top-bar a{color:var(--bks-text) !important;text-decoration:none;}
.header-top a:hover,.top-bar a:hover{color:var(--bks-red) !important;}

/* === ANA HEADER — beyaz, KENARLIKSIZ, gölgesiz (Sephora gibi) === */
#header .header-main,
.header-main{
  background:var(--bks-bg) !important;
  border-bottom:0 !important;               /* gerçek: kenarlık YOK */
  box-shadow:none !important;
  min-height:72px;                          /* gerçek 72px (eski 84 DEĞİL) */
}
#header,.header{box-shadow:none !important;}
/* Yalnız scroll'da (Flatsome stuck) çok hafif gölge */
.stuck #header .header-main,
#header.stuck .header-main{
  box-shadow:0 2px 12px rgba(10,10,10,.06) !important;
}

/* === LOGO — sola, ince (gerçek 178×24) === */
#logo a{
  font-weight:800;letter-spacing:.16em;
  color:var(--bks-black) !important;
}
#logo img{max-height:28px !important;width:auto;}        /* gerçek logo yüks. 24px */
.stuck #logo img,#header.stuck #logo img{max-height:26px !important;}

/* === ARAMA — Sephora pill: KENARLIKSIZ, zemin #f2f2f2 === */
.header-main .ux-search-box,
.header-main form.searchform,
.header-search-form,
.ux-search-box.relative{
  width:100% !important;
  max-width:640px;
}
.header-main .ux-search-box input.search-field,
.ux-search-box input[type="search"],
form.searchform input[type="search"],
.header-main input.search-field{
  height:48px !important;                   /* gerçek 48 */
  border:0 !important;                      /* gerçek: KENARLIKSIZ */
  background:#f2f2f2 !important;            /* gerçek #f2f2f2 */
  border-radius:var(--bks-r-pill) !important;  /* PILL (radius ~9999) */
  padding:0 20px 0 46px !important;         /* sol ikon boşluğu */
  font-size:16px !important;                /* gerçek 16/400 */
  font-weight:400 !important;
  line-height:48px !important;
  color:var(--bks-text) !important;
  box-shadow:none !important;
  transition:background var(--bks-t-fast);
}
.header-main input.search-field::placeholder{color:var(--bks-grey) !important;opacity:1;}
.header-main .ux-search-box input.search-field:focus,
.ux-search-box input[type="search"]:focus,
.header-main input.search-field:focus{
  background:#ededed !important;            /* odakta kenarlık YOK, hafif koyulaşma */
  border:0 !important;
  box-shadow:none !important;
}
/* Arama ikon/buton — sol, gri, zeminsiz */
.ux-search-box .ux-search-submit,
.ux-search-box button[type="submit"],
form.searchform button[type="submit"]{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  color:var(--bks-grey) !important;
  left:8px;right:auto;width:32px;height:32px;            /* gerçek ikon 32 */
}
.ux-search-box .ux-search-submit .icon-search,
.ux-search-box .icon-search{width:20px;height:20px;}

/* === SAĞ İKONLAR (Bayiler / Giriş / Favoriler / Sepet) === */
.header-main .header-button .button.icon,
.header-main .header-button a,
.header-main .account-link,
.header-main .header-cart-link,
.header-main li.html.custom a{
  color:var(--bks-black) !important;
}
.header-main .header-button .button.icon,
.header-main .nav-icon{min-width:32px;}                   /* gerçek 32×32 */
.header-main .header-button .button.icon i,
.header-main .nav-icon i,
.header-cart-link i,
.header-main .account-link i{
  font-size:22px !important;color:var(--bks-black) !important;   /* glif ~24 */
}
.header-main .header-button a:hover,
.header-main .account-link:hover,
.header-main .header-cart-link:hover{color:var(--bks-red) !important;}
.header-main .header-button a:hover i,
.header-main .account-link:hover i{color:var(--bks-red) !important;}
/* ikon + alt yazı etiketi */
.header-main .header-button .button.icon .button-label,
.header-main .account-link-text{font-size:12px;font-weight:400;letter-spacing:.2px;}

/* Sepet adedi rozeti — Bisso kırmızısı */
.cart-icon strong,
.header-cart-link .cart-icon b,
.nav-dropdown-default .cart-icon-handle,
li.cart-item .cart-icon strong{
  background:var(--bks-red) !important;color:#fff !important;
  border-color:var(--bks-red) !important;
}

/* === KATEGORİ NAV (alt) — beyaz, 16/400, hover kırmızı === */
.header-bottom{
  background:var(--bks-bg) !important;
  border-top:0 !important;border-bottom:0 !important;     /* gerçek: kenarlık YOK */
  box-shadow:none !important;
  min-height:55px;                                        /* gerçek 55 */
}
.header-bottom-nav.nav > li,
ul.header-nav > li{margin:0 20px;}                         /* gerçek öğe arası ~40px (2×20) */
.header-bottom-nav.nav > li:first-child,
ul.header-nav-main > li:first-child{margin-left:0;}
ul.header-nav > li > a,
.header-bottom-nav > li > a,
.header-nav-main > li > a,
.nav-line > li > a{
  font-size:16px !important;            /* gerçek 16 (eski 14 DEĞİL) */
  font-weight:400 !important;           /* gerçek 400 (eski 600 DEĞİL) */
  letter-spacing:.4px !important;       /* gerçek .4px */
  color:var(--bks-black) !important;
  text-transform:none !important;       /* gerçek: BÜYÜK-HARF yok */
  padding:8px 0 !important;             /* gerçek 8px 0 */
}
ul.header-nav > li > a:hover,
.header-bottom-nav > li > a:hover,
.header-nav-main > li > a:hover{color:var(--bks-red) !important;}
ul.header-nav > li.active > a,
.header-nav > li.current-menu-item > a,
.header-nav > li.current-menu-parent > a{color:var(--bks-red) !important;}
/* Flatsome nav-line alt çizgi vurgusu kırmızı */
.nav-line > li > a:before,
.header-nav.nav-line > li > a:before,
.header-nav.nav-line-grow > li > a:before{background-color:var(--bks-red) !important;}

/* === MEGA / DROPDOWN — beyaz, düz köşe, yumuşak gölge === */
.header-nav .nav-dropdown{
  border:0 !important;
  border-radius:0 !important;            /* Sephora paneli düz köşe (bkz. 11-mega-menu) */
  box-shadow:var(--bks-shadow-pop) !important;
  padding:16px !important;
}
.header-nav .nav-dropdown a{font-size:16px !important;font-weight:400 !important;color:var(--bks-black) !important;}
.header-nav .nav-dropdown a:hover{color:var(--bks-red) !important;}