/* /css/header.v1.css
   KILIÇ SPOT — Header System (v1)
   - Desktop: top-right cart + account
   - Mobile: trigger görünür, layout bozulmaz
   - Dropdown z-index & placement stabil
   - Canvas theme ile çakışmayı minimize eder
*/

:root{
  --ks-header-z: 120;
  --ks-backdrop-z: 200;
  --ks-panel-z: 220;

  --ks-header-h: 74px;
  --ks-logo-max: 54px;
  --ks-logo-max-m: 44px;

  --ks-pill-bg: rgba(255,255,255,.08);
  --ks-pill-br: rgba(255,255,255,.14);
  --ks-pill-tx: #fff;
}

/* Header stacking güvenliği */
#header, #header-wrap, #primary-menu, #primary-menu-trigger,
.header-misc, #top-account{
  position: relative;
  z-index: var(--ks-header-z);
}

/* Header height (tema farklıysa çok zorlamasın) */
#header-wrap .container{
  min-height: var(--ks-header-h);
}

/* LOGO: taşma / devleşme engeli */
#logo{
  display:flex;
  align-items:center;
}
#logo img{
  max-height: var(--ks-logo-max);
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Header misc: sağ üst araçlar */
#header-wrap .header-misc{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Cart butonu */
.top-cart-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:12px;
  background: var(--ks-pill-bg);
  border:1px solid var(--ks-pill-br);
  color: var(--ks-pill-tx);
  text-decoration:none;
}
.top-cart-link i{ font-size:18px; line-height:1; }
.top-cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#22c55e;
  color:#0b1220;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(0,0,0,.35);
}

/* Account dropdown */
#top-account{ position:relative; }
#top-account .account-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color: var(--ks-pill-tx);
}

/* Dropdown menü: stabil sağa hizalı, header üstünde */
#top-account .dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  left:auto;
  transform:none !important;

  min-width:230px;
  width:max-content;
  max-width:min(92vw, 320px);

  background:#fff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:8px;

  box-shadow:0 18px 50px rgba(0,0,0,.18);
  z-index: calc(var(--ks-header-z) + 20);
}
#top-account .dropdown-menu .dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:#0f172a !important;
  font-weight:800;
  text-decoration:none;
}
#top-account .dropdown-menu .dropdown-item:hover{
  background:rgba(2,6,23,.04);
}
#top-account .dropdown-divider{
  border-top:1px solid rgba(15,23,42,.10);
  margin:6px 0;
}

/* Desktop: menü alanı sağa çarpmasın + misc sağda sabit */
@media (min-width: 992px){
  #primary-menu .menu-container{ padding-right:140px; }
  #header-wrap .container{
    position:relative;
    padding-right:200px !important;
  }
  #header-wrap .header-misc{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    z-index: calc(var(--ks-header-z) + 10);
  }
}

/* Mobile: logo küçülür, container padding normalleşir */
@media (max-width: 991px){
  #logo img{ max-height: var(--ks-logo-max-m); }
  #header-wrap .container{ padding-right:0 !important; }

  /* Mobilde sağ üst ikonları istersen gizlersin, ama drawer kullanıyorsan genelde kalsın:
     Eğer gizlemek istiyorsan aşağıyı aç:
     #header-wrap .header-misc{ display:none !important; }
  */

  /* Trigger tıklaması rahat olsun */
  #primary-menu-trigger{ padding:0 14px; }
}

/* Tema bazen header'a transform veriyor => dropdown’u bozar, kapat */
#header, #header-wrap{ transform:none !important; }

/* Yatay taşmaları kes (header kaynaklı scroll bar olmasın) */
html, body{ width:100%; overflow-x:hidden; }
/* Mobilde içerikteki ikinci logo (section-home) görünmesin */
@media (max-width: 991px){
  #section-home{ display:none !important; }
}
/* Hamburger (mobil trigger) net ve modern */
@media (max-width: 991px){
  #primary-menu-trigger{
    width:44px; height:44px;
    display:flex !important;
    align-items:center; justify-content:center;
    border-radius:12px;
    background: rgba(2,6,23,.06);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
  }
  #primary-menu-trigger i{
    font-size:20px;
    color:#0f172a !important;
    opacity:1 !important;
  }
}
/* Mobil header düzeni: daha premium */
@media (max-width: 991px){
  #header{ background:#fff !important; }
  #header-wrap{ background:#fff !important; border-bottom:1px solid rgba(15,23,42,.08); }

  #header-wrap .container{
    display:flex;
    align-items:center;
    justify-content:center;   /* logo ortada */
    min-height:64px;
    position:relative;
  }

  /* logo ortada, taşmasın */
  #logo{
    margin:0 !important;
    float:none !important;
    display:flex;
    align-items:center;
    justify-content:center;
    height:64px;
  }
  #logo img{
    max-height:40px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain;
    display:block;
  }

  /* hamburger solda dursun */
  #primary-menu-trigger{
    position:absolute !important;
    left:12px; top:50%;
    transform:translateY(-50%);
    margin:0 !important;
  }

  /* sağ taraftaki sepet/kullanıcı alanını mobilde kapat (istersen açarız) */
  .header-misc{ display:none !important; }
}
/* =========================================
   KILIÇ SPOT — Account Dropdown (Hover Safe)
   - Hover gap yok
   - Menüye geçerken kapanmaz
   - Bootstrap .show ile de uyumlu
   ========================================= */

/* Temanın overflow/transform saçmalıklarını bastır */
#header, #header-wrap { overflow: visible !important; transform: none !important; }
#top-account { position: relative; z-index: calc(var(--ks-header-z) + 30); }

/* Toggle */
#top-account-toggle{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 10px;
  border-radius:12px;
  cursor:pointer;
}

/* Hover köprüsü: ikon ile menü arasında görünmez alan */
#top-account::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top:100%;
  height:14px;              /* kritik: hover gap'i kapatır */
  background:transparent;
}

/* Menü konumu: gap yok (10px değil 0–4px) */
#top-account .dropdown-menu{
  position:absolute !important;
  top:calc(100% + 6px) !important;  /* çok az boşluk */
  right:0 !important;
  left:auto !important;
  transform:none !important;

  min-width:230px;
  max-width:min(92vw, 320px);
  padding:10px;
  border-radius:14px;

  background:#fff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18) !important;

  /* default kapalı */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  transform: translateY(-2px);
  z-index: calc(var(--ks-header-z) + 40);
}

/* Menü açılma koşulları:
   1) #top-account hover
   2) #top-account focus-within (klavye)
   3) Bootstrap'in verdiği .show */
#top-account:hover .dropdown-menu,
#top-account:focus-within .dropdown-menu,
#top-account .dropdown-menu.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}

/* Menü itemler */
#top-account .dropdown-menu .dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  color:#0f172a !important;
  font-weight:900;
  text-decoration:none;
}
#top-account .dropdown-menu .dropdown-item:hover{
  background: rgba(2,6,23,.04);
}

/* Divider */
#top-account .dropdown-divider{
  border-top:1px solid rgba(15,23,42,.10);
  margin:8px 0;
}

/* Menü dışına tıklama / JS kapatma vs. için:
   Bootstrap show yoksa hover/focus biter bitmez kapanır. */

/* Mobilde hover mantığı güvenilmez: mobilde hover açmayı KAPAT */
@media (max-width: 991px){
  #top-account::after{ display:none; }
  #top-account:hover .dropdown-menu{ /* mobilde hover ile açılmasın */
    opacity:0; visibility:hidden; pointer-events:none;
  }
}
/* Hamburger (mobil) ikon rengi: full siyah */
#primary-menu-trigger i,
#primary-menu-trigger i:before{
  color:#000 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#000; /* iOS/Safari inadı */
}

/* Eğer tema svg kullanıyorsa */
#primary-menu-trigger svg,
#primary-menu-trigger svg *{
  fill:#000 !important;
  stroke:#000 !important;
  opacity:1 !important;
}