/* ============================================================
   header.css — modern, hafif çatı
   ① ince lacivert duyuru/yardım şeridi
   ② beyaz ana header (logo + arama + aksiyonlar)
   ③ beyaz kategori navigasyonu (hairline ayraçlı)
   ④ ince güven şeridi
   ============================================================ */

/* ---------- ① Üst şerit ---------- */
.utility-bar{ background:var(--announce-bg-color); color:#B9C5D6; font-size:12.5px; }
.utility-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:38px; }
.ub-msg{ display:inline-flex; align-items:center; gap:8px; color:#B9C5D6; }
.ub-msg strong{ color:#fff; font-weight:700; }
.ub-msg i{ color:#F8A06A; }
.ub-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.ub-links a{
  display:inline-flex; align-items:center; gap:7px;
  color:#B9C5D6; font-weight:600; font-size:12.5px; padding:5px 11px; border-radius:var(--radius-pill);
}
.ub-links a:hover{ color:#fff; background:rgba(255,255,255,.07); }
.ub-links i{ font-size:12px; opacity:.75; }
@media (max-width:991px){ .ub-links{ display:none; } .utility-bar .container{ justify-content:center; } }

/* ---------- ② Ana header ---------- */
#header{ background:var(--header-bg-color); position:relative; z-index:50; }
.header-main .container{ display:flex; align-items:center; gap:28px; min-height:86px; }

.site-brand{ display:flex; align-items:center; flex:0 0 auto; }
.site-brand img{ height:40px; width:auto; }
.site-brand .brand-short{ display:none; }

/* ---------- Arama ---------- */
.header-search{ flex:1 1 auto; max-width:600px; }
.search-form{
  position:relative; display:flex; align-items:center;
  background:var(--light-gray);
  border:1.5px solid transparent;
  border-radius:14px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.search-form:focus-within{
  background:#fff; border-color:var(--primary-color);
  box-shadow:0 0 0 4px rgba(6,25,61,.06);
}
.search-ico{
  flex:0 0 auto; width:44px; display:flex; align-items:center; justify-content:center;
  color:var(--muted-soft); font-size:15px;
}
.search-form:focus-within .search-ico{ color:var(--primary-color); }
.search-input{
  flex:1 1 auto; border:0; outline:none; background:transparent;
  padding:13px 4px 13px 0; font-family:var(--font-body); font-size:14.5px; color:var(--ink); min-width:0;
}
.search-input::placeholder{ color:var(--muted-soft); }
.search-btn{
  flex:0 0 auto; margin:5px; border:0; border-radius:10px;
  background:var(--accent-color); color:#fff;
  padding:9px 20px; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:13.5px;
  transition:background .15s ease;
}
.search-btn:hover{ background:var(--accent-color-600); }
.search-hint{ display:flex; align-items:center; gap:7px; margin-top:7px; padding-left:6px; font-size:11.5px; color:var(--muted); }
.search-hint span{ font-weight:600; }
.search-hint a{ color:var(--primary-color); font-weight:700; }
.search-hint a:hover{ color:var(--accent-color); }

/* ---------- Kullanıcı aksiyonları ---------- */
.header-actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:auto; }
.hdr-action{
  display:flex; align-items:center; gap:10px;
  padding:9px 13px; border-radius:12px; cursor:pointer;
  color:var(--usermenu-btn-color); background:transparent; border:0;
  transition:background .15s ease;
}
.hdr-action:hover{ background:var(--light-gray); color:var(--usermenu-btn-hover-color); }
.hdr-action .ico{
  position:relative; width:24px; height:24px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--primary-color);
}
.hdr-action .lbl{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.hdr-action .lbl small{ font-size:11px; color:var(--muted); font-weight:500; }
.hdr-action .lbl b{ font-size:13px; font-weight:700; color:var(--ink); }
.basket-badge{
  position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 5px;
  background:var(--accent-color); color:#fff; border-radius:999px;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.hdr-divider{ display:none; }

/* ---------- Kullanıcı dropdown ---------- */
.hdr-dropdown{ position:relative; }
.hdr-dd-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:300px;
  background:#fff; border:1px solid var(--seperator-color); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:8px; z-index:80;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.hdr-dropdown:hover .hdr-dd-menu, .hdr-dropdown.open .hdr-dd-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.hdr-dd-menu::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.dd-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ink); }
.dd-item i{ width:18px; text-align:center; color:var(--muted); }
.dd-item:hover{ background:var(--manu-hover-bg); color:var(--primary-color); }
.dd-item:hover i{ color:var(--primary-color); }
.dd-divider{ height:1px; background:var(--seperator-color); margin:6px 4px; }

/* mini login (giriş yapılmamış) */
.dd-login{ padding:8px 8px 10px; }
.dd-login h4{ font-size:15px; margin-bottom:3px; }
.dd-login p{ font-size:12px; color:var(--muted); margin:0 0 12px; }
.dd-login .form-control{
  width:100%; border:1px solid var(--seperator-dark-color); border-radius:10px;
  padding:10px 12px; font-size:13.5px; font-family:inherit; margin-bottom:8px; outline:none;
}
.dd-login .form-control:focus{ border-color:var(--primary-color); }
.dd-login-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:12.5px; }
.dd-login-foot a{ color:var(--primary-color); font-weight:700; }

/* burger (mobil) */
.menu-btn-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--seperator-color);
  background:#fff; border-radius:12px; color:var(--burger-icon-color);
  align-items:center; justify-content:center; font-size:19px; cursor:pointer; flex:0 0 auto;
}
.menu-btn-toggle:hover{ color:var(--burger-icon-hover-color); border-color:var(--seperator-dark-color); }

/* ---------- ③ Kategori navigasyonu ---------- */
#MainMenuBar{
  background:#fff; position:relative; z-index:40;
  border-top:1px solid var(--seperator-color);
  border-bottom:1px solid var(--seperator-color);
}
.mainmenu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.mainmenu > li{ position:relative; }
.mainmenu > li > a{
  display:flex; align-items:center; gap:8px; height:38px; margin:7px 0; padding:0 14px;
  border-radius:10px;
  color:var(--ink); font-size:13.5px; font-weight:600; letter-spacing:.005em;
  transition:color .14s ease, background .14s ease;
}
.mainmenu > li > a:hover, .mainmenu > li.open > a{ color:var(--primary-color); background:var(--manu-hover-bg); }
.mainmenu > li.has-mega > a::after{ content:"\f107"; font-family:FontAwesome; font-size:12px; color:var(--muted-soft); }
.mainmenu .mm-allcats > a{ background:var(--primary-color); color:#fff; padding:0 16px; margin-right:10px; }
.mainmenu .mm-allcats > a:hover{ background:var(--primary-color-600); color:#fff; }
.mainmenu .mm-hot{ color:var(--accent-color); font-size:11px; margin-left:3px; }

/* mega menü */
.mega{
  position:absolute; top:100%; left:0; min-width:560px;
  background:#fff; border:1px solid var(--seperator-color);
  border-radius:16px; box-shadow:var(--shadow-lg);
  padding:18px 20px; z-index:60; margin-top:-4px;
  display:grid; grid-template-columns:1fr 1fr; gap:4px 26px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.mainmenu > li:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink); }
.mega a i{ width:18px; text-align:center; color:var(--muted-soft); transition:color .14s ease; }
.mega a:hover{ background:var(--manu-hover-bg); color:var(--primary-color); }
.mega a:hover i{ color:var(--accent-color); }
.mega-col-head{ grid-column:1/-1; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-soft); padding:4px 10px 6px; }
@media (max-width:991px){ #MainMenuBar{ display:none; } }

/* ---------- ④ Güven şeridi ---------- */
.trust-band{ background:#fff; border-bottom:1px solid var(--seperator-color); }
.trust-band .container{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; flex-wrap:wrap;
}
.trust-item{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--muted);
  padding:4px 14px;
}
.trust-item + .trust-item{ border-left:1px solid var(--seperator-color); }
.trust-item i{ color:var(--accent-color); font-size:13px; }
.trust-item b{ color:var(--primary-color); font-weight:700; }
@media (max-width:991px){ .trust-band{ display:none; } }

/* ---------- AFFIX (sticky) ---------- */
.header-spacer{ display:none; }
#header.affix{
  position:fixed; top:0; left:0; right:0; z-index:200;
  box-shadow:var(--shadow-md); animation:slideDown .28s ease;
  border-bottom:1px solid var(--seperator-color);
}
#header.affix .utility-bar, #header.affix .trust-band,
#header.affix #MainMenuBar, #header.affix .search-hint{ display:none; }
#header.affix .header-main .container{ min-height:66px; }
#header.affix .site-brand img{ height:34px; }
#header.affix .site-brand .brand-short{ height:36px; }
#header.affix + .header-spacer{ display:block; }
@keyframes slideDown{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }

/* ---------- Mobil yan menü ---------- */
#MobileBackdrop{
  position:fixed; inset:0; background:rgba(4,16,34,.5); z-index:299;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
#MobileBackdrop.is-visible{ opacity:1; visibility:visible; }
#MobileSideMenu{
  position:fixed; top:0; left:0; bottom:0; width:312px; max-width:86vw; background:#fff; z-index:300;
  transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
#MobileSideMenu.is-open{ transform:translateX(0); }
.mside-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--seperator-color); }
.mside-head img{ height:32px; }
.mside-close{ width:38px; height:38px; border:0; background:var(--light-gray); border-radius:10px; font-size:18px; color:var(--ink); cursor:pointer; }
.mside-body{ overflow-y:auto; flex:1; padding:8px 0; }
.mside-acc{ border-bottom:1px solid var(--seperator-color); }
.mside-acc-trigger{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; font-weight:700; font-size:14.5px; color:var(--ink); cursor:pointer; }
.mside-acc-trigger i.chev{ transition:transform .2s ease; color:var(--muted); }
.mside-acc.open .mside-acc-trigger i.chev{ transform:rotate(180deg); }
.mside-acc-sub{ max-height:0; overflow:hidden; transition:max-height .26s ease; background:var(--light-gray); }
.mside-acc.open .mside-acc-sub{ max-height:420px; }
.mside-acc-sub a{ display:block; padding:10px 30px; font-size:13.5px; font-weight:500; color:var(--muted); }
.mside-acc-sub a:hover{ color:var(--primary-color); }
.mside-flat a{ display:flex; align-items:center; gap:11px; padding:13px 18px; font-weight:600; font-size:14px; border-bottom:1px solid var(--seperator-color); }
.mside-flat i{ color:var(--accent-color); width:18px; text-align:center; }
.mside-foot{ padding:14px 18px; border-top:1px solid var(--seperator-color); display:flex; gap:8px; }

/* responsive header */
@media (max-width:991px){
  .menu-btn-toggle{ display:inline-flex; width:40px; height:40px; font-size:17px; }
  .header-main .container{ min-height:60px; gap:10px; flex-wrap:wrap; padding-block:8px 12px; }
  .site-brand img{ height:34px; }
  .header-search{ order:3; flex:1 1 100%; max-width:none; }
  .search-hint{ display:none; }
  .hdr-action .lbl{ display:none; }
  .header-actions{ gap:0; }
  .hdr-action{ padding:8px; }
}
@media (max-width:575px){
  .header-main .container{ padding-inline:14px; }
  .site-brand .brand-full{ display:none; }
  .site-brand .brand-short{ display:block; height:38px; }
  .search-input{ padding-block:11px; }
}