/*! BALİNA DESIGN SYSTEM — balina.css
 * OTOMATİK ÜRETİLDİ: build-css.mjs · elle düzenleme, modül JS'i değişince üzerine yazılır.
 * Amaç: tasarımın İLK BOYAMADA uygulanması (eski tema → yeni tema sıçraması olmasın).
 * Kaynak modüller: balina-ds-step2-header-v2.0.js, balina-ds-step6-footer-v1.1.js, home.js, balina-ds-step3-list-v1.2.js, product-detail.js, company.js
 */

/* ---- Adım 1: token'lar ---- */
:root{
  --bl-black: #000;
  --bl-white: #fff;
  --bl-red: #b60817;
  --bl-fg: #000;
  --bl-fg-secondary: #484848;
  --bl-fg-muted: #767676;
  --bl-fg-disabled: #b3b3b3;
  --bl-bg: #fff;
  --bl-bg-alt: #f6f6f6;
  --bl-line: #e0e0e0;
  --bl-line-strong: #000;
  --bl-accent: #b60817;
  --bl-focus: #b60817;
  --bl-font: 'Archivo','Archivo Narrow','Helvetica Neue',Helvetica,Arial,sans-serif;
  --bl-sp-1: 2px;
  --bl-sp-2: 4px;
  --bl-sp-3: 8px;
  --bl-sp-4: 12px;
  --bl-sp-5: 16px;
  --bl-sp-6: 24px;
  --bl-sp-7: 32px;
  --bl-sp-8: 48px;
  --bl-pad-x: 8px;
  --bl-dur-1: 150ms;
  --bl-dur-2: 200ms;
  --bl-dur-3: 250ms;
  --bl-ease: cubic-bezier(.22,.61,.36,1);
  --bl-z-header: 900;
  --bl-z-panel: 1010;
}

@media(min-width:768px){
  :root{
    --bl-pad-x: 16px;
  }
}

/* ================= balina-ds-step2-header-v2.0.js  (bl-h → html) ================= */

/* =====================================================================
 Ticimax header ayar CSS'i <header> içinde inline <style>; belge
 sırasında bizden sonra geliyor ve id+class zinciriyle yüksek özgüllükte.
 Bu katmanda !important zorunlu.
 ===================================================================== */
:root{
  --bl-header-h: 56px;
  --bl-header-pad: 12px;
  --bl-topbar-h: 26px;
  --bl-logo-h: 34px;
  --bl-icon: 20px;
  --bl-nav-fs: 11px;
  --bl-nav-gap: 18px;
  --bl-row-h: 54px;
  --bl-z-drawer: 1200;
  --bl-z-scrim: 1150;
}

@media (min-width: 1024px){
  :root{
    --bl-header-h: 72px;
    --bl-header-pad: 24px;
    --bl-logo-h: 40px;
  }
}

@media (min-width: 1200px){
  :root{
    --bl-nav-fs: 11px;
    --bl-nav-gap: 22px;
  }
}

@media (min-width: 1440px){
  :root{
    --bl-nav-fs: 12px;
    --bl-nav-gap: 28px;
  }
}

@media (max-width: 1199px){
  :root{
    --bl-nav-fs: 10px;
    --bl-nav-gap: 13px;
  }
}

/* ---------------------------------------------------------------------
 1. YAPI / STICKY
 --------------------------------------------------------------------- */
html #headerNew,
html #headerNew > .header,
html #headerNew .header-wrapper{
  overflow: visible !important;
  background: var(--bl-bg) !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* #masthead'ı flex yapıp tek çocuğu dikeyde ortalıyoruz; tema kaynaklı
 dikey padding/margin kalıntıları böylece etkisiz kalıyor. */
html #masthead.header-main{
  display: flex !important;
  align-items: center !important;
  height: var(--bl-header-h) !important;
  min-height: var(--bl-header-h) !important;
  max-height: var(--bl-header-h) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bl-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  isolation: isolate;
  transition: border-color var(--bl-dur-1) var(--bl-ease);
}
html #masthead.header-main{
  position: sticky !important;
  top: 0;
  z-index: var(--bl-z-header);
}
html.bl-h-scrolled #masthead.header-main{
  border-bottom-color: var(--bl-line) !important;
}

@media (min-width: 1024px){
  html.bl-h-moved #wide-nav.header-bottom{
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }
  html.bl-h-moved #wide-nav.header-bottom > .headerContainer{
    display: none !important;
  }
  html:not(.bl-h-moved) #wide-nav.header-bottom{
    height: 40px !important;
    background: var(--bl-bg) !important;
    border-bottom: 1px solid var(--bl-line) !important;
  }
  html:not(.bl-h-moved) #wide-nav .headerContainer{
    max-width: none !important;
    width: 100% !important;
    padding: 0 var(--bl-header-pad) !important;
    position: relative;
  }
}

/* ---------------------------------------------------------------------
 2. TOPBAR
 --------------------------------------------------------------------- */
html #top-bar.header-top{
  display: flex !important;
  align-items: center !important;
  height: var(--bl-topbar-h) !important;
  min-height: var(--bl-topbar-h) !important;
  max-height: var(--bl-topbar-h) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bl-black) !important;
  color: var(--bl-white) !important;
  font-size: 10px !important;
  border: 0 !important;
}
html #top-bar .headerContainer{
  max-width: none !important;
  width: 100% !important;
  /* Kısayol: dikey padding de sıfırlanmalı, yoksa şerit şişiyor */ padding: 0 var(--bl-header-pad) !important;
  margin: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
}
html #top-bar .flex-col.flex-left,
html #top-bar .flex-col.flex-right{
  display: none !important;
}
html #top-bar .flex-col.flex-center{
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
}
html #top-bar .nav,
html #top-bar .html.custom,
html #top-bar .slider-text{
  width: 100% !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}
html #top-bar .slider-text{
  flex-direction: column !important;
}
html #top-bar .slider-container{
  width: 100% !important;
  max-width: none !important;
  height: var(--bl-topbar-h) !important;
  margin: 0 !important;
}
html #top-bar .slide{
  font-family: var(--bl-font) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--bl-white) !important;
  padding: 0 var(--bl-sp-4) !important;
  line-height: 1;
  width: 100% !important;
  justify-content: center !important;
}
html #top-bar .slide strong{
  color: var(--bl-white) !important;
  font-weight: 700 !important;
  margin-left: 5px !important;
}

/* ---------------------------------------------------------------------
 3. HEADER SATIRI
 --------------------------------------------------------------------- */
html #masthead .header-inner{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--bl-sp-4);
  height: 100% !important;
  min-height: var(--bl-header-h) !important;
  max-width: none !important;
  width: 100% !important;
  /* padding-inline yetmiyor: temanın dikey padding'i header'ı şişiriyordu */ padding: 0 var(--bl-header-pad) !important;
  margin: 0 !important;
  position: relative;
  overflow: visible !important;
}
html #masthead .header-inner > *{
  align-self: center !important;
}
html #masthead .header-inner > .flex-col.flex-left{
  display: flex !important;
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-start;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
html #masthead #hb-logo{
  order: 2;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html #masthead .bl-navholder{
  order: 3;
  display: none;
  min-width: 0;
  position: static !important;
}
html #masthead .header-inner > .flex-col.flex-right{
  display: flex !important;
  order: 4;
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
  align-items: center !important;
  padding: 0 !important;
  margin-left: 0 !important;
}

@media (min-width: 1024px){
  html #masthead .header-inner > .flex-col.flex-left{
    display: none !important;
  }
  html #masthead #hb-logo{
    order: 1;
    margin-right: var(--bl-sp-8) !important;
  }
  html #masthead .bl-navholder{
    order: 2;
    display: block;
    flex: 1 1 auto;
  }
  html #masthead .header-inner > .flex-col.flex-right{
    order: 3;
    flex: 0 0 auto;
  }
}
html #hb-logo a{
  display: block;
  line-height: 0;
}
html #hb-logo img,
html #hb-logo svg{
  height: var(--bl-logo-h) !important;
  max-height: var(--bl-logo-h) !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  object-fit: contain;
}
html #hb-logo img{
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------
 4. AKSİYON İKONLARI
 --------------------------------------------------------------------- */
html #masthead .header-nav.nav-left,
html #masthead .header-nav.nav-right{
  display: flex !important;
  align-items: center !important;
  gap: var(--bl-sp-5) !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 24px;
}

@media (min-width: 1024px){
  html #masthead .header-nav.nav-right{
    gap: var(--bl-sp-6) !important;
  }
}
html #masthead .header-nav > *,
html #masthead #divTopProductSearch,
html #masthead .header-favori-item,
html #masthead .account-item,
html #masthead .cart-item,
html #masthead .mobile-item-button{
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 24px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html #masthead .header-nav .header-button,
html #masthead .header-nav .newMenuBtnClick,
html #masthead .header-nav .newSearcBtnClick,
html #masthead #divTopProductSearch > .newSearcBtnClick,
html #masthead .header-button-useLogin,
html #masthead .header-button-useLogin ul,
html #masthead .header-button-useLogin li{
  display: flex !important;
  align-items: center !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
html #masthead .headerButon,
html #masthead .favori-link,
html #masthead .cart-icon,
html #masthead .header-nav .newMenuBtnClick > a,
html #masthead .newSearcBtnClick > a{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: var(--bl-fg) !important;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html #masthead .headerButon:hover,
html #masthead .favori-link:hover,
html #masthead .header-nav .newMenuBtnClick > a:hover,
html #masthead .newSearcBtnClick > a:hover{
  opacity: .5;
}
html .bl-i{
  font-size: 0 !important;
  line-height: 0 !important;
  width: var(--bl-icon);
  height: var(--bl-icon);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: inherit !important;
}
html .bl-i > svg{
  width: var(--bl-icon);
  height: var(--bl-icon);
  display: block;
  color: inherit;
}
html #masthead .account-title,
html #masthead .header-cart-title,
html #masthead .cart-price,
html #masthead .header-favori-title,
html #masthead .header-favori-count{
  display: none !important;
}
html #masthead .html_1{
  display: none !important;
}
html #masthead .mobile-item-button{
  display: none !important;
}

@media (max-width: 1023px){
  html #masthead .mobile-menu-item,
  html #masthead .mobile-search-item,
  html #masthead .mobile-user-item,
  html #masthead .mobile-cart-item{
    display: flex !important;
  }
  html #masthead .account-item,
  html #masthead .html_1{
    display: none !important;
  }

  /* .cart-item gizlenemez: sepet off-canvas'ı (#checkoutCartProductDiv) bu
   kutunun içinde duruyor ve display:none bir ata alt ağacı tamamen render
   dışı bırakır. Kutuyu akıştan çıkarıp sıfır boyuta indiriyoruz; böylece
   ikon sırasında fazladan boşluk açmıyor ama panel yaşamaya devam ediyor.
   position:static bırakılıyor ki panelin konumlanması bu 0x0 kutuya
   bağlanmasın. */
  html #masthead .cart-item{
    display: block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }
  html #masthead .cart-item > .header-button{
    display: none !important;
  }
  html #masthead #divTopProductSearch > .newSearcBtnClick{
    display: none !important;
  }
}

@media (min-width: 1024px){
  html #masthead #divTopProductSearch > .newSearcBtnClick{
    display: flex !important;
  }
}
html #masthead .cart-item .header-button,
html #masthead .mobile-cart-item .header-button{
  position: relative;
}
html #spnTopSepetToplamUrun,
html .bl-cart-count{
  position: absolute;
  top: -3px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bl-accent) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
html #spnTopSepetToplamUrun.bl-zero,
html .bl-cart-count.bl-zero{
  display: none !important;
}

/* ---------------------------------------------------------------------
 5. ARAMA PANELİ
 --------------------------------------------------------------------- */
html #masthead #divTopProductSearch{
  position: static !important;
  width: auto !important;
}
html #masthead #divTopProductSearch .header-search-form-wrapper{
  position: absolute !important;
  left: 0;
  right: 0;
  top: 100%;
  width: auto !important;
  background: var(--bl-bg) !important;
  border-top: 1px solid var(--bl-line) !important;
  border-bottom: 1px solid var(--bl-line-strong) !important;
  padding: var(--bl-sp-6) var(--bl-header-pad) !important;
  z-index: var(--bl-z-panel);
}
html #masthead #divTopProductSearch .searchform-wrapper{
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line-strong) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  background: transparent !important;
}
html #masthead #ddlAramaKategori,
html #masthead .ButtonMic{
  display: none !important;
}
html #masthead #txtbxArama{
  height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bl-fg) !important;
  font-family: var(--bl-font) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  font-stretch: 92% !important;
  letter-spacing: -.02em !important;
}
html #masthead #txtbxArama::placeholder{
  color: var(--bl-fg-muted) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  font-weight: 600;
}
html #masthead #btnKelimeAra{
  height: 48px !important;
  width: auto !important;
  padding: 0 0 0 var(--bl-sp-4) !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--bl-fg) !important;
}

/* ---------------------------------------------------------------------
 6. MASAÜSTÜ NAV
 --------------------------------------------------------------------- */
html .newHeaderNavigation:not(.mobileStyle),
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNav,
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl{
  position: static !important;
}
html #masthead .bl-navholder .newMenuBtnClick,
html #masthead .bl-navholder .newMenuTop,
html .newHeaderNavigation:not(.mobileStyle) > .newMenuBtnClick,
html .newHeaderNavigation:not(.mobileStyle) .newMenuTop{
  display: none !important;
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNav{
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  background: transparent !important;
  overflow: visible !important;
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: var(--bl-nav-gap) !important;
  height: var(--bl-header-h);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: transparent !important;
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li{
  position: static !important;
  display: flex !important;
  align-items: center;
  height: 100%;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a{
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  color: var(--bl-fg) !important;
  font-family: var(--bl-font) !important;
  font-size: var(--bl-nav-fs) !important;
  font-weight: 700 !important;
  font-stretch: 100%;
  letter-spacing: .06em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 11px);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--bl-dur-2) var(--bl-ease);
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li:hover > a::after,
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li:focus-within > a::after{
  transform: scaleX(1);
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a[href*="outlet"]{
  color: var(--bl-accent) !important;
}
html .upTagText,
html .downTagText{
  display: none !important;
}

/* ---------------------------------------------------------------------
 7. MEGA MENÜ
 --------------------------------------------------------------------- */
html .newHeaderNavigation:not(.mobileStyle) .menu-wrap{
  display: block !important;
  position: absolute !important;
  left: 0;
  right: 0;
  top: 100%;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--bl-bg) !important;
  border-top: 1px solid var(--bl-line) !important;
  border-bottom: 1px solid var(--bl-line-strong) !important;
  padding: var(--bl-sp-7) 0 var(--bl-sp-7) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--bl-dur-2) var(--bl-ease), transform var(--bl-dur-2) var(--bl-ease), visibility 0s linear var(--bl-dur-2);
  z-index: var(--bl-z-panel);
}
html .newHeaderNavigation:not(.mobileStyle) .nav-item.ulVar:hover > .menu-wrap,
html .newHeaderNavigation:not(.mobileStyle) .nav-item.ulVar:focus-within > .menu-wrap{
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
html .newHeaderNavigation:not(.mobileStyle) .menu-list-row{
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bl-sp-7) 64px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--bl-header-pad) !important;
}
html .newHeaderNavigation:not(.mobileStyle) .menu-list-row .kolon{
  flex: 0 0 auto;
  min-width: 180px;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: transparent !important;
}
html .newHeaderNavigation .menu-list-row .kolon.bl-empty,
html .bl-empty{
  display: none !important;
}
html .newHeaderNavigation:not(.mobileStyle) .menu-list-row .kolon > li{
  display: block !important;
  text-align: left !important;
  gap: 0 !important;
  background: transparent !important;
}
html .newHeaderNavigation:not(.mobileStyle) .kolon > li.bl-branch > a{
  display: block;
  color: var(--bl-fg) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  padding: 0 0 10px !important;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html .newHeaderNavigation:not(.mobileStyle) .kolon > li.bl-branch > a:hover{
  opacity: .5;
}
html .newHeaderNavigation:not(.mobileStyle) .kolon > li.bl-leaf > a{
  display: block;
  color: var(--bl-fg-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  line-height: 30px !important;
  text-transform: uppercase;
  padding: 0 !important;
  text-decoration: none;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html .newHeaderNavigation:not(.mobileStyle) .kolon > li.bl-leaf > a:hover{
  color: var(--bl-fg) !important;
}
html .newHeaderNavigation:not(.mobileStyle) .kolon > li + li.bl-branch{
  margin-top: 26px;
}
html .newHeaderNavigation:not(.mobileStyle) .kolon > li.bl-branch + li.bl-leaf{
  margin-top: 8px;
}
html .newHeaderNavigation:not(.mobileStyle) .nav-submenu{
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: transparent !important;
}
html .newHeaderNavigation:not(.mobileStyle) .nav-submenu > li{
  gap: 0 !important;
}
html .newHeaderNavigation:not(.mobileStyle) .nav-submenu > li > a{
  display: inline-block;
  color: var(--bl-fg-secondary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
  text-decoration: none;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html .newHeaderNavigation:not(.mobileStyle) .nav-submenu > li > a:hover{
  color: var(--bl-fg) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
html .newHeaderNavigation:not(.mobileStyle) .menu-list-image,
html .newHeaderNavigation:not(.mobileStyle) .menu-list-image-row,
html .newHeaderNavigation:not(.mobileStyle) .nextSubBtn,
html .newHeaderNavigation:not(.mobileStyle) .nextKolonBtn{
  display: none !important;
}
html .bl-menu-foot{
  max-width: none;
  margin: var(--bl-sp-6) 0 0;
  padding: var(--bl-sp-4) var(--bl-header-pad) 0;
  border-top: 1px solid var(--bl-line);
}
html .bl-menu-all{
  display: inline-block;
  color: var(--bl-fg) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html .bl-menu-all:hover{
  opacity: .5;
}
html .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.bl-compact{
  position: relative !important;
}
html .newHeaderNavigation:not(.mobileStyle) li.bl-compact > .menu-wrap{
  left: 0;
  right: auto;
  width: max-content !important;
  min-width: 240px;
  padding: var(--bl-sp-6) var(--bl-sp-6) var(--bl-sp-5) !important;
  border: 1px solid var(--bl-line) !important;
  border-bottom-color: var(--bl-line-strong) !important;
}
html .newHeaderNavigation:not(.mobileStyle) li.bl-compact .menu-list-row{
  display: block !important;
  padding: 0 !important;
}
html .newHeaderNavigation:not(.mobileStyle) li.bl-compact .kolon{
  min-width: 0;
}
html .newHeaderNavigation:not(.mobileStyle) li.bl-compact .bl-menu-foot{
  margin-top: var(--bl-sp-5);
  padding: var(--bl-sp-4) 0 0;
}

/* =====================================================================
 8. MOBİL DRAWER
 ===================================================================== */

/* 8.1 Katmanlar */
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNav{
  z-index: var(--bl-z-drawer) !important;
  background: var(--bl-bg) !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .menu-wrap,
html #headerNew .header .newHeaderNavigation.mobileStyle .dropDown-wrap{
  z-index: calc(var(--bl-z-drawer) + 10) !important;
  background: var(--bl-bg) !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .dropDown-wrap .nav-submenu,
html #headerNew .header .newHeaderNavigation.mobileStyle .menu-list-row .kolon .nav-submenu{
  background: var(--bl-bg) !important;
}
html.bl-drawer-open.bl-hidehead #masthead.header-main,
html.bl-drawer-open.bl-hidehead #top-bar.header-top{
  visibility: hidden !important;
}

/* 8.2 Scrim */
html .bl-scrim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--bl-z-scrim);
  transition: opacity var(--bl-dur-3) var(--bl-ease), visibility 0s linear var(--bl-dur-3);
}
html.bl-drawer-open .bl-scrim{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
html.bl-drawer-open.bl-lock body{
  overflow: hidden !important;
}

/* 8.3 Üst bar */
html #headerNew .header .newHeaderNavigation.mobileStyle .newMenuTop{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--bl-sp-4);
  background: var(--bl-bg) !important;
  height: var(--bl-header-h) !important;
  min-height: var(--bl-header-h) !important;
  padding: 0 var(--bl-header-pad) !important;
  border-bottom: 1px solid var(--bl-line-strong) !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newMenuTop .menuBackBtn{
  order: 1;
  color: var(--bl-fg) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--bl-sp-3);
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newMenuTop .menuBackBtn i{
  font-size: 0 !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newMenuTop .menuCloseBtn{
  order: 2;
  margin-left: auto !important;
  background: transparent !important;
  color: var(--bl-fg) !important;
  font-size: 0 !important;
  width: 24px;
  height: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* 8.4 Satır: [link ..........][ok] tek satır, metin solda ve dikeyde ortada.
 KRİTİK: Ticimax linki flex-direction:column kuruyor (upTag/metin/downTag).
 row'a çevirmeden align-items ve justify-content ters eksende çalışıyor. */
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNavUl{
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  background: var(--bl-bg) !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNavUl > li,
html #headerNew .header .newHeaderNavigation.mobileStyle .kolon > li,
html #headerNew .header .newHeaderNavigation.mobileStyle .dropDown-wrap > li,
html #headerNew .header .newHeaderNavigation.mobileStyle .nav-submenu > li{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: var(--bl-row-h) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bl-bg) !important;
  border-bottom: 1px solid var(--bl-line) !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNavUl > li > a,
html #headerNew .header .newHeaderNavigation.mobileStyle .kolon > li > a,
html #headerNew .header .newHeaderNavigation.mobileStyle .dropDown-wrap > li > a,
html #headerNew .header .newHeaderNavigation.mobileStyle .nav-submenu > li > a{
  order: 1 !important;
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
  height: auto !important;
  min-height: var(--bl-row-h) !important;
  padding: 0 var(--bl-header-pad) !important;
  border: 0 !important;
  line-height: 1.2 !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNavUl li > a > span,
html #headerNew .header .newHeaderNavigation.mobileStyle .kolon li > a > span,
html #headerNew .header .newHeaderNavigation.mobileStyle .nav-submenu li > a > span{
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  display: inline-block !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .nextKolonBtn,
html #headerNew .header .newHeaderNavigation.mobileStyle .nextSubBtn{
  position: static !important;
  order: 2 !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  height: var(--bl-row-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--bl-fg) !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle li > .menu-wrap,
html #headerNew .header .newHeaderNavigation.mobileStyle li > .nav-submenu{
  order: 3 !important;
  flex: 1 1 100% !important;
}

/* 8.5 Tipografi */
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNavUl > li > a{
  color: var(--bl-fg) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNavUl > li > a[href*="outlet"]{
  color: var(--bl-accent) !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .dropDown-wrap > li > a,
html #headerNew .header .newHeaderNavigation.mobileStyle .kolon > li > a{
  color: var(--bl-fg) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .nav-submenu > li > a{
  color: var(--bl-fg-secondary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .newHeaderNavUl.newHeaderDropDown li a{
  border: 0 !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .menu-list-row{
  display: block !important;
  padding: 0 !important;
  max-width: none !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .kolon{
  display: block !important;
  min-width: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
html #headerNew .header .newHeaderNavigation.mobileStyle .bl-menu-foot{
  display: none !important;
}

/* ---------------------------------------------------------------------
 9. ODAK
 --------------------------------------------------------------------- */
html #headerNew a:focus-visible,
html #headerNew button:focus-visible,
html #headerNew input:focus-visible{
  outline: 2px solid var(--bl-focus) !important;
  outline-offset: 2px;
}

/* ================= balina-ds-step6-footer-v1.1.js  (bl-f → html) ================= */
:root{
  --bl-f-pad: 12px;
  --bl-f-block: 40px;
  --bl-f-gap: 28px;
}

@media (min-width: 768px){
  :root{
    --bl-f-pad: 24px;
    --bl-f-block: 64px;
    --bl-f-gap: 48px;
  }
}

/* ---------------------------------------------------------------------
 1. GÖVDE
 --------------------------------------------------------------------- */
html #customFooterContent.footerTemp{
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
  border-top: 1px solid var(--bl-line-strong) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--bl-font) !important;
}
html #customFooterContent :where(div,span,p,a,li,label,input,button,strong,em,h1,h2,h3){
  font-family: var(--bl-font) !important;
}
html #customFooterContent section.elementor-section{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
html #customFooterContent .footerTempContainer.elementor-container{
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 var(--bl-f-pad) !important;
}
html #customFooterContent .footerTempColumnDiv.elementor-column{
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
html #customFooterContent .footerTempWidgetRepeat.elementor-element{
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
}
html #customFooterContent img{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
 2. BÜLTEN
 --------------------------------------------------------------------- */
html #customFooterContent section[data-id="xbdpicw"]{
  padding: var(--bl-f-block) 0 !important;
  border-bottom: 1px solid var(--bl-line) !important;
}
html #customFooterContent section[data-id="xbdpicw"] .footerTempRow{
  display: block !important;
  float: none !important;
}
html #customFooterContent .ebultenDivTemp{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px !important;
  column-gap: 0 !important;
  width: 100% !important;
  float: none !important;
  text-align: left !important;
}

@media (min-width: 900px){
  html #customFooterContent .ebultenDivTemp{
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    column-gap: 64px !important;
    row-gap: 12px !important;
    align-items: end;
  }
  html #customFooterContent .ebultenDivTemp .eTempTitle{
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  html #customFooterContent .ebultenDivTemp .newsletterContent{
    grid-column: 2;
    grid-row: 1;
  }
  html #customFooterContent .ebultenDivTemp .permissionDiv{
    grid-column: 2;
    grid-row: 2;
  }
}
html #customFooterContent .eTempTitle{
  display: block !important;
  width: auto !important;
  float: none !important;
  text-align: left !important;
  row-gap: 0 !important;
}
html #customFooterContent .eTempTitle1{
  display: block !important;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem) !important;
  font-weight: 800 !important;
  font-stretch: 84%;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  color: var(--bl-fg) !important;
  margin: 0 0 8px !important;
}
html #customFooterContent .eTempTitle2{
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--bl-fg-muted) !important;
  margin: 0 !important;
}
html #customFooterContent .newsletterContent{
  position: relative !important;
  width: 100% !important;
  float: none !important;
  max-width: 420px;
}
html #customFooterContent #txtbxNewsletterMail{
  width: 100% !important;
  height: 48px !important;
  padding: 0 56px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bl-fg) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none;
}
html #customFooterContent #txtbxNewsletterMail::placeholder{
  color: var(--bl-fg-muted) !important;
  font-size: 13px !important;
}
html #customFooterContent #btnMailKaydet{
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bl-fg) !important;
  color: var(--bl-bg) !important;
  border: 1px solid var(--bl-fg) !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  transition: background-color var(--bl-dur-1) var(--bl-ease), color var(--bl-dur-1) var(--bl-ease);
}
html #customFooterContent #btnMailKaydet:hover{
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
}
html #customFooterContent #btnMailKaydet::before,
html #customFooterContent #btnMailKaydet::after{
  content: none !important;
}
html #customFooterContent #btnMailKaydet svg{
  width: 18px;
  height: 18px;
  display: block;
}
html #customFooterContent .permissionDiv{
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
  float: none !important;
}
html #customFooterContent .permissionBox{
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--bl-fg-muted) !important;
}
html #customFooterContent .permissionBox input[type="checkbox"]{
  width: 14px !important;
  height: 14px !important;
  margin: 2px 0 0 !important;
  border-radius: 0 !important;
  accent-color: var(--bl-fg);
  flex: 0 0 14px;
}
html #customFooterContent .permission-html{
  color: var(--bl-fg-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
html #customFooterContent .permission-html strong{
  color: var(--bl-fg) !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
 3. LOGO + MENÜ KOLONLARI
 --------------------------------------------------------------------- */
html #customFooterContent section[data-id="qipmfu8"]{
  padding: var(--bl-f-block) 0 !important;
}
html #customFooterContent section[data-id="qipmfu8"] .footerTempRow{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: var(--bl-f-gap) !important;
  float: none !important;
}
html #customFooterContent section[data-id="qipmfu8"] .footerTempRow > *{
  flex: 1 1 160px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
html #customFooterContent .bl-f-logocol{
  flex: 0 0 100% !important;
  margin-bottom: 8px !important;
}

@media (min-width: 900px){
  html #customFooterContent .bl-f-logocol{
    flex: 0 0 auto !important;
    width: 180px !important;
    margin-bottom: 0 !important;
  }
}
html #customFooterContent .footerimg{
  float: none !important;
  width: auto !important;
}
html #customFooterContent .footerimg a{
  display: block !important;
  line-height: 0;
}
html #customFooterContent .footerimg img{
  height: 30px !important;
  width: auto !important;
  max-width: none !important;
  mix-blend-mode: multiply;
}
html #customFooterContent .footerMenul{
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html #customFooterContent .footerMenuTitle{
  display: block !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--bl-fg) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
html #customFooterContent .footerMenuAlt{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  width: 100% !important;
}
html #customFooterContent .footerMenuAlt li{
  width: 100%;
}
html #customFooterContent .footerMenuAlt a{
  display: inline-block !important;
  float: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 26px !important;
  color: var(--bl-fg-secondary) !important;
  text-decoration: none !important;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html #customFooterContent .footerMenuAlt a:hover{
  color: var(--bl-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
html #customFooterContent .footerMenuAlt a[href*="outlet"]{
  color: var(--bl-accent) !important;
}

/* Mobil akordiyon */

@media (max-width: 767px){

  /* Sınıf adına güvenmiyoruz: satırı blok yapıp tüm çocukları tam genişliğe
   alıyoruz. Tema mobilde kendi kolon genişliklerini koruyordu. */
  html #customFooterContent section[data-id="qipmfu8"] .footerTempRow{
    display: block !important;
    gap: 0 !important;
  }
  html #customFooterContent section[data-id="qipmfu8"] .footerTempRow > *{
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html #customFooterContent .bl-f-logocol{
    margin: 0 0 24px !important;
  }
  html #customFooterContent .footerMenul > li{
    border-bottom: 1px solid var(--bl-line);
  }
  html #customFooterContent .footerMenuTitle{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0 !important;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  html #customFooterContent .footerMenuTitle::after{
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--bl-dur-2) var(--bl-ease);
    flex: 0 0 auto;
  }
  html #customFooterContent .footerMenul > li.bl-f-open > .footerMenuTitle::after{
    transform: translateY(2px) rotate(-135deg);
  }
  html #customFooterContent .footerMenuAlt{
    display: none !important;
  }
  html #customFooterContent .footerMenul > li.bl-f-open > .footerMenuAlt{
    display: flex !important;
    padding: 0 0 16px !important;
  }
}

/* ---------------------------------------------------------------------
 4. SOSYAL + BANKA
 --------------------------------------------------------------------- */
html #customFooterContent section[data-id="krz5tdg"]{
  border-top: 1px solid var(--bl-line) !important;
  padding: 22px 0 !important;
}
html #customFooterContent section[data-id="krz5tdg"] .footerTempRow{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  float: none !important;
}
html #customFooterContent section[data-id="krz5tdg"] .elementor-column{
  flex: 0 0 auto !important;
  width: auto !important;
}
html #customFooterContent .elementor-column[data-id="8yx20yd"]{
  display: none !important;
}
html #customFooterContent .socialMediaDiv{
  width: auto !important;
  float: none !important;
  row-gap: 0 !important;
}
html #customFooterContent .socialMediaTitle{
  display: none !important;
}
html #customFooterContent .socialMedia{
  width: auto !important;
  float: none !important;
}
html #customFooterContent .socialMedia.horizontal{
  column-gap: 18px !important;
  row-gap: 0 !important;
}
html #customFooterContent .socialMedia li a{
  column-gap: 0 !important;
}
html #customFooterContent .socialMedia li a i{
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  color: var(--bl-fg) !important;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html #customFooterContent .socialMedia li a:hover i{
  opacity: .5;
}
html #customFooterContent .socialMedia li a span{
  display: none !important;
}
html #customFooterContent .mobileVisible{
  display: flex !important;
}
html #customFooterContent .footerBankLogo{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: auto !important;
  float: none !important;
  column-gap: 18px !important;
  row-gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html #customFooterContent .footerBankLogo li{
  max-width: none !important;
  display: flex;
  align-items: center;
}
html #customFooterContent .footerBankLogo li img{
  height: 20px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  mix-blend-mode: multiply;
}
html #customFooterContent .footerBankLogo li img{
  filter: grayscale(1);
  opacity: .5;
  transition: opacity var(--bl-dur-1) var(--bl-ease), filter var(--bl-dur-1) var(--bl-ease);
}
html #customFooterContent .footerBankLogo:hover li img{
  filter: grayscale(0);
  opacity: 1;
}

/* ---------------------------------------------------------------------
 5. ALT ŞERİT
 --------------------------------------------------------------------- */
html #customFooterContent section[data-id="ykimu5e"]{
  border: 0 !important;
  border-top: 1px solid var(--bl-line) !important;
  padding: 18px 0 !important;
}

/* Designed by YUOG — Ticimax logosunun sağında ------------------------- */
html #divTicimaxCopyrightContent{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}
html .bl-f-yuog{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  opacity: .75;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html .bl-f-yuog:hover{
  opacity: 1;
}
html .bl-f-yuog .bl-f-yuog-t{
  font-family: var(--bl-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  white-space: nowrap;
}
html .bl-f-yuog img{
  display: block !important;
  height: 18px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
}
html #customFooterContent .bl-f-legal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--bl-fg-muted);
}
html #customFooterContent .bl-f-legal a{
  color: var(--bl-fg-muted);
  text-decoration: none;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html #customFooterContent .bl-f-legal a:hover{
  color: var(--bl-fg);
}

/* ---------------------------------------------------------------------
 6. ODAK
 --------------------------------------------------------------------- */
html #customFooterContent a:focus-visible,
html #customFooterContent input:focus-visible,
html #customFooterContent .footerMenuTitle:focus-visible{
  outline: 2px solid var(--bl-focus);
  outline-offset: 2px;
}

/* ================= home.js  (bl-hp → html:has(#divIcerik.homepage)) ================= */
:root{
  --bl-hp-pad: 14px;
  --bl-hp-block: 44px;
  --bl-hp-ratio: 3 / 4;
  --bl-hp-lines: 2;
}

@media (min-width: 768px){
  :root{
    --bl-hp-pad: 24px;
    --bl-hp-block: 64px;
  }
}

/* ---------------------------------------------------------------------
 1. İSKELET
 --------------------------------------------------------------------- */
html:has(#divIcerik.homepage) #divIcerik.homepage,
html:has(#divIcerik.homepage) #divIcerik.homepage #mainHolder_divDesign{
  overflow-x: clip;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage section.landing-block{
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .ticiContainer.hazirBlokContent{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .txrow{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .bl-hp-empty{
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage *,
html:has(#divIcerik.homepage) #divIcerik.homepage *::before,
html:has(#divIcerik.homepage) #divIcerik.homepage *::after{
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------------------
 2. HERO SLIDER + BANNER BLOKLARI
 --------------------------------------------------------------------- */
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="sliderblok"] .txrow,
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="resimblok"] .txrow{
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="sliderblok"] .txrow > *,
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="resimblok"] .txrow > *{
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .blokResimLink{
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .blokResimLink img,
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="sliderblok"] img,
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="resimblok"] img{
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .anasayfa_tek_slider,
html:has(#divIcerik.homepage) #divIcerik.homepage .anasayfa_tek_slider .owl-stage-outer{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-carousel,
html:has(#divIcerik.homepage) #divIcerik.homepage .jCarouselLite{
  position: relative;
}

/* Noktalar: sadece hero slider'da */
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="urunblok"] .owl-dots,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductList .owl-dots,
html:has(#divIcerik.homepage) #divIcerik.homepage .jCarouselLite .owl-dots{
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="sliderblok"] .owl-dots{
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 12px 0 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-dot{
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-dot span{
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  background: var(--bl-line) !important;
  border-radius: 0 !important;
  transition: background-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-dot.active span{
  background: var(--bl-fg) !important;
}

/* Oklar */
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-nav.disabled{
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bl-bg) !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  color: var(--bl-fg) !important;
  font-size: 0 !important;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--bl-dur-2) var(--bl-ease), border-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-carousel:hover .owl-prev,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-carousel:hover .owl-next,
html:has(#divIcerik.homepage) #divIcerik.homepage .jCarouselLite:hover .ProductListprev,
html:has(#divIcerik.homepage) #divIcerik.homepage .jCarouselLite:hover .ProductListnext,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductList:hover .ProductListprev,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductList:hover .ProductListnext{
  opacity: 1;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev:hover,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next:hover,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev:hover,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext:hover{
  border-color: var(--bl-fg) !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev::after,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next::after,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev::after,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext::after{
  content: none !important;
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev > span,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next > span,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev > span,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext > span{
  font-size: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev svg,
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next svg,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev svg,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext svg{
  width: 14px;
  height: 14px;
  display: block;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev{
  left: 10px;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext{
  right: 10px;
}

@media (max-width: 767px){
  html:has(#divIcerik.homepage) #divIcerik.homepage .owl-prev,
  html:has(#divIcerik.homepage) #divIcerik.homepage .owl-next,
  html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListprev,
  html:has(#divIcerik.homepage) #divIcerik.homepage .ProductListnext{
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
 3. ÜRÜN VİTRİNLERİ
 --------------------------------------------------------------------- */
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="urunblok"]{
  padding: var(--bl-hp-block) 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="urunblok"] .hazirBlokContent{
  padding: 0 var(--bl-hp-pad) !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .sliderBannerContainer,
html:has(#divIcerik.homepage) #divIcerik.homepage .ProductList.kategoriBlock,
html:has(#divIcerik.homepage) #divIcerik.homepage .jCarouselLite{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .ulUrunSlider{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Vitrin başlığı */
html:has(#divIcerik.homepage) #divIcerik.homepage .JKatAdi{
  display: block !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .JKatAdi::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .JKatAdi::after{
  content: none !important;
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .JKatAdi span{
  display: inline !important;
  float: none !important;
  background: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .JKatAdi span::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .JKatAdi span::after{
  content: none !important;
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .JKatAdi .satir1{
  font-family: var(--bl-font) !important;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem) !important;
  font-weight: 800 !important;
  font-stretch: 84%;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .clear{
  clear: both;
}

/* ---------------------------------------------------------------------
 4. ÜRÜN KARTI
 --------------------------------------------------------------------- */
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productImage{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: var(--bl-hp-ratio);
  height: auto !important;
  overflow: hidden !important;
  background: var(--bl-bg-alt);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productImage > a{
  display: block !important;
  width: 100%;
  height: 100%;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productImage img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
  transition: transform var(--bl-dur-3) var(--bl-ease);
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem:hover .productImage img{
  transform: scale(1.04);
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productDetail{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 10px 4px 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productDetail > *{
  position: static !important;
  float: none !important;
  transform: none !important;
  text-align: left !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productMarka{
  display: block !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productMarka{
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  margin: 0 0 5px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Ad: iki satıra kadar yayılır, tek satırda boş satır rezerve edilmez */
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productName{
  display: block !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productName a{
  display: -webkit-box !important;
  -webkit-line-clamp: var(--bl-hp-lines);
  -webkit-box-orient: vertical;
  width: 100% !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
  letter-spacing: 0 !important;
  color: var(--bl-fg) !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem:hover .productName a{
  opacity: .6;
}

@media (min-width: 768px){
  html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productName a{
    font-size: 13px !important;
  }
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productPrice{
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productPrice > *{
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: baseline;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .discountKdv,
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem [class*="Kdv"],
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem [class*="KDV"]{
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-now,
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-was{
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--bl-font) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-now{
  order: 1;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-was{
  order: 2;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--bl-fg-muted) !important;
  text-decoration: line-through !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productPrice.bl-hp-sale .bl-hp-now{
  color: var(--bl-accent) !important;
}

@media (min-width: 768px){
  html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-now{
    font-size: 13px !important;
  }
  html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-was{
    font-size: 12px !important;
  }
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-now *,
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .bl-hp-was *{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: inherit !important;
}

/* İndirim etiketi */
html:has(#divIcerik.homepage) #divIcerik.homepage .bl-hp-off{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  background: var(--bl-accent) !important;
  color: #fff !important;
  font-family: var(--bl-font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  border: 0 !important;
  pointer-events: none;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .bl-hp-off-dup{
  display: none !important;
}

/* Kart aksiyonları */
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .urunListeAdet,
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .mycartIcon,
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .examineIcon,
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productItemVariantDetail{
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .productIcon{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 4 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-end;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori{
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori a{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--bl-fg) !important;
  background: rgba(255,255,255,.9) !important;
  border: 0 !important;
  opacity: .8;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori a::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori a::after{
  content: none !important;
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori a > *:not(.bl-hp-heart){
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem:hover .favori a{
  opacity: 1;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori a svg{
  width: 16px;
  height: 16px;
  display: block;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori a[class*="Aktif"],
html:has(#divIcerik.homepage) #divIcerik.homepage .productItem .favori a[class*="aktif"]{
  color: var(--bl-accent) !important;
  opacity: 1;
}

/* ---------------------------------------------------------------------
 5. ÖZEL HTML BLOKLARI
 --------------------------------------------------------------------- */
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"]{
  padding: var(--bl-hp-block) 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] .hazirBlokContent{
  padding: 0 var(--bl-hp-pad) !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage h2.section-title,
html:has(#divIcerik.homepage) #divIcerik.homepage .section-title{
  font-family: var(--bl-font) !important;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem) !important;
  font-weight: 800 !important;
  font-stretch: 84%;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  text-align: left !important;
  color: var(--bl-fg) !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage h2.section-title::before,
html:has(#divIcerik.homepage) #divIcerik.homepage h2.section-title::after,
html:has(#divIcerik.homepage) #divIcerik.homepage .section-title::before,
html:has(#divIcerik.homepage) #divIcerik.homepage .section-title::after{
  content: none !important;
  display: none !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .balinainfo-card{
  background: transparent !important;
  border: 1px solid currentColor !important;
  padding: 24px !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage .balinainfo-card-title,
html:has(#divIcerik.homepage) #divIcerik.homepage h3.balinainfo-card-title{
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  margin: 0 0 10px !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] a.button,
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] button:not(.owl-dot),
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] input[type="button"],
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] input[type="submit"]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px !important;
  background: var(--bl-fg) !important;
  color: var(--bl-bg) !important;
  border: 1px solid var(--bl-fg) !important;
  border-radius: 0 !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--bl-dur-1) var(--bl-ease), color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] a.button:hover,
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] button:not(.owl-dot):hover{
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="boshtml"] img{
  max-width: 100% !important;
  height: auto !important;
}

/* ---------------------------------------------------------------------
 6. BLOK RİTMİ
 --------------------------------------------------------------------- */
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="resimblok"],
html:has(#divIcerik.homepage) #divIcerik.homepage section[id^="sliderblok"]{
  padding: 0 !important;
  margin: 0 !important;
}
html:has(#divIcerik.homepage) #divIcerik.homepage a:focus-visible,
html:has(#divIcerik.homepage) #divIcerik.homepage button:focus-visible{
  outline: 2px solid var(--bl-focus);
  outline-offset: 2px;
}

/* ================= balina-ds-step3-list-v1.2.js  (bl-l → html:has(#divIcerik.categoryContainer)) ================= */
:root{
  --bl-l-pad: 12px;
  --bl-l-gap-x: 2px;
  --bl-l-gap-y: 26px;
  --bl-l-bar-h: 48px;
  --bl-l-top: 0px;
  --bl-l-lines: 2;
  --bl-cols: 2;
  --bl-l-ratio: 3 / 4;
  --bl-z-lpanel: 1400;
  --bl-z-lscrim: 1380;
}

@media (min-width: 768px){
  :root{
    --bl-l-pad: 24px;
    --bl-l-gap-x: 4px;
    --bl-l-gap-y: 34px;
    --bl-l-bar-h: 52px;
  }
}

/* ---------------------------------------------------------------------
 1. SAYFA İSKELETİ
 --------------------------------------------------------------------- */
html:has(#divIcerik.categoryContainer) #divIcerik.ticiContainer,
html:has(#divIcerik.categoryContainer) #mainHolder_divBlocks,
html:has(#divIcerik.categoryContainer) #divCenterBlock,
html:has(#divIcerik.categoryContainer) #ProductListMainContainer,
html:has(#divIcerik.categoryContainer) .ProductListContent{
  overflow: visible !important;
}
html:has(#divIcerik.categoryContainer) #divIcerik.ticiContainer{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html:has(#divIcerik.categoryContainer) #divCenterBlock{
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.categoryContainer) #ProductListMainContainer,
html:has(#divIcerik.categoryContainer) .ProductListContent{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-col-collapsed{
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  float: none !important;
}

/* ---------------------------------------------------------------------
 2. BAŞLIK + STICKY BAR
 --------------------------------------------------------------------- */
html:has(#divIcerik.categoryContainer) .bl-listhead{
  padding: var(--bl-sp-6) var(--bl-l-pad) var(--bl-sp-5);
}
html:has(#divIcerik.categoryContainer) .bl-cat-title{
  margin: 0;
  font-family: var(--bl-font);
  font-size: clamp(1.25rem, 1rem + 1.111vw, 2rem);
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bl-fg);
}
html:has(#divIcerik.categoryContainer) .bl-listbar{
  position: sticky;
  top: var(--bl-l-top, 0px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bl-sp-4);
  height: var(--bl-l-bar-h);
  padding: 0 var(--bl-l-pad);
  background: var(--bl-bg);
  border-top: 1px solid var(--bl-line);
  border-bottom: 1px solid var(--bl-line);
}
html:has(#divIcerik.categoryContainer) .bl-listbar-l,
html:has(#divIcerik.categoryContainer) .bl-listbar-r{
  display: flex;
  align-items: center;
  gap: var(--bl-sp-5);
  min-width: 0;
}

@media (min-width: 768px){
  html:has(#divIcerik.categoryContainer) .bl-listbar-l,
  html:has(#divIcerik.categoryContainer) .bl-listbar-r{
    gap: var(--bl-sp-6);
  }
}
html:has(#divIcerik.categoryContainer) .bl-lb-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bl-fg);
  font-family: var(--bl-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.categoryContainer) .bl-lb-btn:hover{
  opacity: .5;
}
html:has(#divIcerik.categoryContainer) .bl-lb-num{
  display: none;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  align-items: center;
  justify-content: center;
  background: var(--bl-accent);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html:has(#divIcerik.categoryContainer) .bl-lb-btn.has-filters .bl-lb-num{
  display: inline-flex;
}
html:has(#divIcerik.categoryContainer) .bl-lb-total{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bl-fg-muted);
  white-space: nowrap;
}

@media (max-width: 479px){
  html:has(#divIcerik.categoryContainer) .bl-lb-total{
    display: none;
  }
}
html:has(#divIcerik.categoryContainer) .bl-cols{
  display: flex;
  align-items: center;
  gap: var(--bl-sp-2);
}
html:has(#divIcerik.categoryContainer) .bl-cols button{
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bl-fg);
  opacity: .3;
  cursor: pointer;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.categoryContainer) .bl-cols button:hover{
  opacity: .6;
}
html:has(#divIcerik.categoryContainer) .bl-cols button.is-active{
  opacity: 1;
}
html:has(#divIcerik.categoryContainer) .bl-cols svg{
  width: 15px;
  height: 15px;
  display: block;
}

/* ---------------------------------------------------------------------
 3. GRID
 --------------------------------------------------------------------- */
html:has(#divIcerik.categoryContainer) #ProductPageProductList.ProductList{
  display: grid !important;
  grid-template-columns: repeat(var(--bl-cols), minmax(0, 1fr)) !important;
  column-gap: var(--bl-l-gap-x) !important;
  row-gap: var(--bl-l-gap-y) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
html:has(#divIcerik.categoryContainer) #ProductPageProductList > *{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
 4. ÜRÜN KARTI
 --------------------------------------------------------------------- */
html:has(#divIcerik.categoryContainer) .productItem{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html:has(#divIcerik.categoryContainer) .productImage{
  position: relative !important;
  display: block !important;
  order: 1;
  width: 100% !important;
  aspect-ratio: var(--bl-l-ratio);
  height: auto !important;
  overflow: hidden !important;
  background: var(--bl-bg-alt);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html:has(#divIcerik.categoryContainer) .productImage > a{
  display: block !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.categoryContainer) .productImage img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  display: block !important;
  margin: 0 !important;
  transition: transform var(--bl-dur-3) var(--bl-ease);
}
html:has(#divIcerik.categoryContainer) .productItem:hover .productImage img{
  transform: scale(1.04);
}

/* --- Detay bloğu: Ticimax ortalıyor ve fiyatı akış dışına alıyordu --- */
html:has(#divIcerik.categoryContainer) .productDetail{
  position: static !important;
  order: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  padding: 10px 6px 0 !important;
  margin: 0 !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
}
html:has(#divIcerik.categoryContainer) .productDetail > *,
html:has(#divIcerik.categoryContainer) .productDetail > * > *{
  position: static !important;
  float: none !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  text-align: left !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html:has(#divIcerik.categoryContainer) .productMarka{
  display: block !important;
  width: 100% !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
}
html:has(#divIcerik.categoryContainer):not(.bl-l-brand) .productMarka{
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .productName{
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* İki satıra kadar yayılır; tek satırda boş satır rezerve edilmez, bu yüzden
 ad ile fiyat arasında ölü boşluk kalmaz. */
html:has(#divIcerik.categoryContainer) .productName a{
  display: -webkit-box !important;
  -webkit-line-clamp: var(--bl-l-lines, 2);
  -webkit-box-orient: vertical;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  min-height: 0 !important;
  color: var(--bl-fg) !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}

@media (min-width: 768px){
  html:has(#divIcerik.categoryContainer) .productName a{
    font-size: 13px !important;
  }
}
html:has(#divIcerik.categoryContainer) .productItem:hover .productName a{
  opacity: .6;
}

/* Fiyat: bloklar width:100% geliyordu, flex-wrap her birini tam satıra itiyordu */
html:has(#divIcerik.categoryContainer) .productPrice{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
}
html:has(#divIcerik.categoryContainer) .productPrice > *{
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: baseline;
}
html:has(#divIcerik.categoryContainer) .discountKdv,
html:has(#divIcerik.categoryContainer) .productPrice [class*="Kdv"],
html:has(#divIcerik.categoryContainer) .productPrice [class*="KDV"]{
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .productPrice .bl-now,
html:has(#divIcerik.categoryContainer) .productPrice .bl-was{
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--bl-font) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
html:has(#divIcerik.categoryContainer) .productPrice .bl-now{
  order: 1;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.categoryContainer) .productPrice .bl-was{
  order: 2;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--bl-fg-muted) !important;
  text-decoration: line-through !important;
}
html:has(#divIcerik.categoryContainer) .productPrice.bl-sale .bl-now{
  color: var(--bl-accent) !important;
}

@media (min-width: 768px){
  html:has(#divIcerik.categoryContainer) .productPrice .bl-now{
    font-size: 13px !important;
  }
  html:has(#divIcerik.categoryContainer) .productPrice .bl-was{
    font-size: 12px !important;
  }
}
html:has(#divIcerik.categoryContainer) .productPrice .bl-now *,
html:has(#divIcerik.categoryContainer) .productPrice .bl-was *{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: inherit !important;
}

/* Rozetler ---------------------------------------------------------------
 Ticimax indirim / yeni / fırsat / çok satan / kargo rozetlerinin HEPSİNİ
 .productIcon'un (aksiyon kutusu) içine koyuyor. O kutuyu sağ üste alıp
 flex satır yaptığımız için "Yeni Ürün" kalp ikonunun yanına düşüp havada
 duruyordu. Rozetler artık sol üstte kendi yığınında. */
html:has(#divIcerik.categoryContainer) .bl-badges{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
  max-width: calc(100% - 44px);
  /* sağ üstteki kalbin altına girmesin */ pointer-events: none;
}
html:has(#divIcerik.categoryContainer) .bl-badges > *{
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  font-family: var(--bl-font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html:has(#divIcerik.categoryContainer) .bl-badges > *::before,
html:has(#divIcerik.categoryContainer) .bl-badges > *::after{
  content: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-badges .bl-off{
  background: var(--bl-accent) !important;
  color: #fff !important;
}
html:has(#divIcerik.categoryContainer) .bl-badges .bl-badge{
  background: var(--bl-fg) !important;
  color: var(--bl-bg) !important;
}
html:has(#divIcerik.categoryContainer) .bl-badges .bl-badge-alt{
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
  box-shadow: inset 0 0 0 1px var(--bl-line-strong) !important;
}

/* Yığın dışında kalmış bir indirim etiketi olursa yine de doğru dursun */
html:has(#divIcerik.categoryContainer) .productItem > .bl-off{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  background: var(--bl-accent) !important;
  color: #fff !important;
}
html:has(#divIcerik.categoryContainer) .bl-off-dup{
  display: none !important;
}

/* --- Aksiyonlar: top/right !important olmadan Ticimax'ın bottom'ı kazanıyordu --- */
html:has(#divIcerik.categoryContainer) .urunListeAdet,
html:has(#divIcerik.categoryContainer) .productIcon .mycartIcon,
html:has(#divIcerik.categoryContainer) .productIcon .examineIcon,
html:has(#divIcerik.categoryContainer) .productItemVariantDetail{
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .productIcon{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  text-align: right !important;
}
html:has(#divIcerik.categoryContainer):not(.bl-l-fav) .productIcon{
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .productIcon .favori{
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
}
html:has(#divIcerik.categoryContainer) .productIcon .favori a{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--bl-fg) !important;
  background: rgba(255,255,255,.9) !important;
  border: 0 !important;
  opacity: .8;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.categoryContainer) .productIcon .favori a::before,
html:has(#divIcerik.categoryContainer) .productIcon .favori a::after{
  content: none !important;
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .productIcon .favori a > *:not(.bl-heart){
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .productItem:hover .productIcon .favori a{
  opacity: 1;
}
html:has(#divIcerik.categoryContainer) .productIcon .favori a .bl-heart{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
html:has(#divIcerik.categoryContainer) .productIcon .favori a svg{
  width: 16px;
  height: 16px;
  display: block;
}
html:has(#divIcerik.categoryContainer) .productIcon .favori a[class*="Aktif"],
html:has(#divIcerik.categoryContainer) .productIcon .favori a[class*="aktif"]{
  color: var(--bl-accent) !important;
  opacity: 1;
}
html:has(#divIcerik.categoryContainer) .productIcon .favori a[class*="Aktif"] svg,
html:has(#divIcerik.categoryContainer) .productIcon .favori a[class*="aktif"] svg{
  fill: currentColor;
}

/* ---------------------------------------------------------------------
 5. PANELLER
 --------------------------------------------------------------------- */
html:has(#divIcerik.categoryContainer) .bl-panel{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(88vw, 380px) !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 0 var(--bl-sp-7) !important;
  background: var(--bl-bg) !important;
  border: 0 !important;
  border-left: 1px solid var(--bl-line-strong) !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  z-index: var(--bl-z-lpanel);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--bl-dur-3) var(--bl-ease), visibility 0s linear var(--bl-dur-3);
  float: none !important;
}
html:has(#divIcerik.categoryContainer).bl-filter-open .bl-panel-filter,
html:has(#divIcerik.categoryContainer).bl-sort-open .bl-panel-sort{
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
html:has(#divIcerik.categoryContainer) .bl-panel-dup{
  display: none !important;
}

/* Panel'in ATASI gizliyse panel hiç render edilmez ------------------------
 Ticimax'ın sol kolonu (#divLeftBlock) Bootstrap'in hidden-xs/hidden-sm/
 hidden-md sınıflarını taşıyor → 1200px ALTINDA display:none !important.
 Panelimiz o kolonun çocuğu olduğu için mobil/tablette 0×0 kalıyordu:
 FİLTRELE'ye basınca sadece scrim geliyor, panel gelmiyordu.
 Zinciri yalnızca panel için açıyoruz; kolonun diğer blokları gizli kalır,
 yüksekliği 0 olduğu için sayfa akışında yer kaplamaz. */
html:has(#divIcerik.categoryContainer) .bl-unhide{
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}
html:has(#divIcerik.categoryContainer) .bl-unhide > *:not(.bl-panel-path):not(.bl-panel){
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-lscrim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--bl-z-lscrim);
  transition: opacity var(--bl-dur-3) var(--bl-ease), visibility 0s linear var(--bl-dur-3);
}
html:has(#divIcerik.categoryContainer).bl-filter-open .bl-lscrim,
html:has(#divIcerik.categoryContainer).bl-sort-open .bl-lscrim{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
html:has(#divIcerik.categoryContainer).bl-filter-open body,
html:has(#divIcerik.categoryContainer).bl-sort-open body{
  overflow: hidden !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--bl-sp-5);
  background: var(--bl-bg);
  border-bottom: 1px solid var(--bl-line-strong);
}
html:has(#divIcerik.categoryContainer) .bl-panel-title{
  font-family: var(--bl-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bl-fg);
}
html:has(#divIcerik.categoryContainer) .bl-panel-close{
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bl-fg);
  cursor: pointer;
}
html:has(#divIcerik.categoryContainer) .bl-panel-close svg{
  width: 18px;
  height: 18px;
  display: block;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .Block_Title,
html:has(#divIcerik.categoryContainer) .bl-panel-filter .mobilFilterOpenBtn{
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .Block_Text,
html:has(#divIcerik.categoryContainer) .bl-panel-filter .category-vertical-filters{
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .panel{
  margin: 0 !important;
  padding: var(--bl-sp-6) var(--bl-sp-5) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line) !important;
  box-shadow: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .panel-heading{
  padding: 0 !important;
  margin: 0 0 var(--bl-sp-4) !important;
  background: none !important;
  border: 0 !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .panel-title{
  display: block !important;
  font-family: var(--bl-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--bl-fg) !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .panel-search{
  padding: 0 !important;
  margin: 0 0 var(--bl-sp-4) !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .panel-search-textbox{
  width: 100% !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
  font-family: var(--bl-font) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .panel-search-textbox:focus{
  border-color: var(--bl-line-strong) !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .bl-nosearch .panel-search{
  display: none !important;
}

/* Filtre seçenekleri — DİKEY LİSTE (mobil + masaüstü aynı) ---------------
 Önce yan yana sarmalayan "çip" düzeniydi: Ticimax'ın onay kutusu
 (li::before) float:left olduğu için çipin üstüne/soluna kaçıyor,
 seçenekler 5'li satırlara bölünüyordu. Artık her seçenek tam satır:
 [onay kutusu] [etiket] — dokunma alanı 44px, hizalama dikeyde ortalı. */
html:has(#divIcerik.categoryContainer) .bl-panel-filter .list-group{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-height: none !important;
  overflow: visible !important;
  /* panelin kendisi kayar */ background: none !important;
  border: 0 !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement:last-child{
  border-bottom: 0 !important;
}

/* Onay kutusu: temanın float'lı ::before'u yerine hizalı kare */
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement::before{
  content: '' !important;
  float: none !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bl-line-strong) !important;
  border-radius: 0 !important;
  background: var(--bl-bg) !important;
  box-sizing: border-box !important;
  transition: background-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement:hover::before{
  background: var(--bl-bg-alt) !important;
}

/* Etiket: çip değil, düz satır metni */
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement > a{
  display: block !important;
  flex: 1 1 auto !important;
  float: none !important;
  width: auto !important;
  padding: 13px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--bl-fg-secondary) !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: normal !important;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement:hover > a{
  color: var(--bl-fg) !important;
}

/* Renk/görsel varyantı: yuvarlak örnek satırın başında kalsın */
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement .item-bg{
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid var(--bl-line) !important;
  margin: 0 !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement.list-group-item-image{
  background-position: 26px center !important;
  background-size: 18px 18px !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement.list-group-item-image > a{
  padding-left: 26px !important;
}

/* Seçili: kutu dolu + etiket koyu */
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement[class*="ecili"]::before,
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement[class*="ctive"]::before,
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement.selected::before{
  background: var(--bl-fg) !important;
  border-color: var(--bl-fg) !important;
  content: '' !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement[class*="ecili"] > a,
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement[class*="ctive"] > a,
html:has(#divIcerik.categoryContainer) .bl-panel-filter .liFiltreElement.selected > a{
  color: var(--bl-fg) !important;
  font-weight: 700 !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-sort .sortingContent{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-sort .sortingButton{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line) !important;
}
html:has(#divIcerik.categoryContainer) .bl-panel-sort .sortingButton > a{
  display: flex !important;
  align-items: center;
  min-height: 50px;
  padding: 0 var(--bl-sp-5) !important;
  color: var(--bl-fg) !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  background: none !important;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.categoryContainer) .bl-panel-sort .sortingButton > a:hover{
  opacity: .5;
}
html:has(#divIcerik.categoryContainer) .bl-panel-sort .appliedFilter,
html:has(#divIcerik.categoryContainer) .bl-panel-sort .blockSelect,
html:has(#divIcerik.categoryContainer) .brandlistselection .blockSelect{
  display: none !important;
}
html:has(#divIcerik.categoryContainer) .bl-listbar :focus-visible,
html:has(#divIcerik.categoryContainer) .bl-panel :focus-visible{
  outline: 2px solid var(--bl-focus);
  outline-offset: 2px;
}

/* ================= product-detail.js  (bl-p → html:has(#ProductDetailMain)) ================= */
:root{
  --bl-p-pad: 14px;
  --bl-p-top: 0px;
  --bl-p-ratio: 3 / 4;
  --bl-p-gap: 2px;
  --bl-p-max: 1500px;
  --bl-p-gallery: 900px;
  --bl-p-thumb: 60px;
  --bl-p-lines: 2;
  --bl-p-peek: 100%;
}

@media (min-width: 768px){
  :root{
    --bl-p-pad: 24px;
    --bl-p-gap: 4px;
  }
}

@media (min-width: 1024px){
  :root{
    --bl-p-thumb: 72px;
  }
}

/* ---------------------------------------------------------------------
 1. İSKELET
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) #divIcerik.productDetailContainer,
html:has(#ProductDetailMain) #mainHolder_divBlocks,
html:has(#ProductDetailMain) #divCenterBlock,
html:has(#ProductDetailMain) #contentProductDetail,
html:has(#ProductDetailMain) .ProductDetail,
html:has(#ProductDetailMain) #ProductDetailMain{
  overflow: visible !important;
}
html:has(#ProductDetailMain) #divIcerik.productDetailContainer{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html:has(#ProductDetailMain) #divCenterBlock,
html:has(#ProductDetailMain) #contentProductDetail,
html:has(#ProductDetailMain) .ProductDetail,
html:has(#ProductDetailMain) #ProductDetailMain,
html:has(#ProductDetailMain) .ProductDetailMainRow{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .clear,
html:has(#ProductDetailMain) .ResetClear{
  clear: both;
}
html:has(#ProductDetailMain) #divIcerik .tooltip{
  display: none !important;
}
html:has(#ProductDetailMain) .bl-p-empty,
html:has(#ProductDetailMain) .bl-p-srchide,
html:has(#ProductDetailMain) .bl-p-off-hide{
  display: none !important;
}

/* ---------------------------------------------------------------------
 2. BREADCRUMB
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) .categoryTitle .proCategoryTitle{
  padding: 14px var(--bl-p-pad) !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  overflow: hidden;
}
html:has(#ProductDetailMain) ul.breadcrumb{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  max-width: var(--bl-p-max);
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
  font-size: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html:has(#ProductDetailMain) ul.breadcrumb::-webkit-scrollbar{
  display: none;
}
html:has(#ProductDetailMain) ul.breadcrumb li{
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  white-space: nowrap;
}
html:has(#ProductDetailMain) ul.breadcrumb li a{
  font-family: var(--bl-font) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) ul.breadcrumb li a:hover{
  color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) ul.breadcrumb li:last-of-type a{
  color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) ul.breadcrumb li + li::before{
  content: '/';
  font-size: 10px;
  color: var(--bl-fg-muted);
  margin: 0 8px;
  flex: 0 0 auto;
}
html:has(#ProductDetailMain) ul.breadcrumb li:last-of-type{
  padding-right: var(--bl-p-pad) !important;
}
html:has(#ProductDetailMain) #linkOncekiSayfa{
  display: none !important;
}

/* ---------------------------------------------------------------------
 3. ÜST BLOK
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) .TopDet{
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 1024px){
  html:has(#ProductDetailMain) .TopDet{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 440px);
    align-items: start;
    column-gap: 40px;
    max-width: var(--bl-p-max);
    margin: 0 auto !important;
    padding: 0 var(--bl-p-pad) !important;
  }
  html:has(#ProductDetailMain) .TopDet > .leftImage{
    grid-column: 1;
  }
  html:has(#ProductDetailMain) .TopDet > .RightDetail{
    grid-column: 2;
    padding: 0 0 40px !important;
  }
  html:has(#ProductDetailMain) .TopDet > .RightDetail{
    position: sticky;
    top: calc(var(--bl-p-top, 0px) + 16px);
    align-self: start;
  }
}

/* GALERİ */
html:has(#ProductDetailMain) .leftImage{
  display: block !important;
  width: 100% !important;
  max-width: var(--bl-p-gallery);
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
html:has(#ProductDetailMain) .Images,
html:has(#ProductDetailMain) .Images.imageZoomPreview{
  display: block !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bl-bg-alt);
}
html:has(#ProductDetailMain) #imgUrunResim{
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: zoom-in;
}
html:has(#ProductDetailMain) .SmallImages#divThumbList{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin: 6px 0 0 !important;
  padding: 0 var(--bl-p-pad) !important;
  overflow-x: auto;
  scrollbar-width: none;
}
html:has(#ProductDetailMain) .SmallImages#divThumbList::-webkit-scrollbar{
  display: none;
}
html:has(#ProductDetailMain) .SmallImages.bl-p-single{
  display: none !important;
}
html:has(#ProductDetailMain) .AltImgCapSmallImg,
html:has(#ProductDetailMain) .AltVideoThumb{
  box-sizing: border-box !important;
  width: var(--bl-p-thumb) !important;
  flex: 0 0 var(--bl-p-thumb) !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bl-line) !important;
  background: var(--bl-bg-alt);
  cursor: pointer;
  transition: border-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) .AltImgCapSmallImg:hover,
html:has(#ProductDetailMain) .AltVideoThumb:hover{
  border-color: var(--bl-fg-muted) !important;
}
html:has(#ProductDetailMain) .AltImgCapSmallImg.bl-p-thumb-on,
html:has(#ProductDetailMain) .AltVideoThumb.bl-p-thumb-on{
  border-color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) .AltImgCapSmallImg img,
html:has(#ProductDetailMain) .AltVideoThumb img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  opacity: 1 !important;
  cursor: pointer;
}

@media (min-width: 1024px){
  html:has(#ProductDetailMain) .SmallImages#divThumbList{
    padding: 0 !important;
  }
  html:has(#ProductDetailMain) .leftImage{
    display: grid !important;
    grid-template-columns: var(--bl-p-thumb) minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
  }
  html:has(#ProductDetailMain) .leftImage > .Images{
    grid-column: 2;
    grid-row: 1;
  }
  html:has(#ProductDetailMain) .leftImage > .SmallImages#divThumbList{
    grid-column: 1;
    grid-row: 1;
    flex-direction: column !important;
    overflow: visible !important;
    margin: 0 !important;
  }
}
html:has(#ProductDetailMain) .RightDetail{
  display: block !important;
  width: 100% !important;
  float: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 24px var(--bl-p-pad) 40px !important;
}
html:has(#ProductDetailMain) .TopList,
html:has(#ProductDetailMain) .MiddleList,
html:has(#ProductDetailMain) .BottomList{
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
 4. BAŞLIK / KOD / ÖN YAZI
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) .ProductName{
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .ProductName h1{
  font-family: var(--bl-font) !important;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.375rem) !important;
  font-weight: 600 !important;
  font-stretch: 92%;
  letter-spacing: -.015em !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  color: var(--bl-fg) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .productcode{
  display: block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  color: var(--bl-fg-muted) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .productcode > span{
  display: none !important;
}
html:has(#ProductDetailMain) .Formline.puanVer:empty{
  display: none !important;
}
html:has(#ProductDetailMain) #divOnyazi{
  margin: 0 0 20px !important;
  padding: 14px !important;
  border: 1px solid var(--bl-line) !important;
}
html:has(#ProductDetailMain) #divOnyazi .left_line{
  display: block !important;
  width: 100% !important;
  float: none !important;
}
html:has(#ProductDetailMain) #divOnyazi img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------
 5. FİYAT
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) .PriceList{
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .bl-p-price{
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 28px !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .bl-p-now{
  font-family: var(--bl-font);
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bl-fg);
}
html:has(#ProductDetailMain) .bl-p-price.is-sale .bl-p-now{
  color: var(--bl-accent);
}
html:has(#ProductDetailMain) .bl-p-was{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bl-fg-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
html:has(#ProductDetailMain) .bl-p-off{
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid var(--bl-accent);
  background: transparent;
  color: var(--bl-accent);
  font-family: var(--bl-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  border-radius: 0;
  white-space: nowrap;
}
html:has(#ProductDetailMain) .urunDetayFiyatContainer,
html:has(#ProductDetailMain) #divIndirimliFiyat{
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
html:has(#ProductDetailMain) .PriceList .Formline{
  display: flex !important;
  align-items: baseline;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: auto !important;
  float: none !important;
}
html:has(#ProductDetailMain) .PriceList .left_line.lineTitle,
html:has(#ProductDetailMain) .PriceList .center_line,
html:has(#ProductDetailMain) .spanKdv,
html:has(#ProductDetailMain) #divKDVDahilFiyat,
html:has(#ProductDetailMain) #divTurkLirasiFiyat{
  display: none !important;
}

/* ---------------------------------------------------------------------
 6. BÖLÜM BAŞLIKLARI
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) .JKatAdi{
  display: block !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .JKatAdi::before,
html:has(#ProductDetailMain) .JKatAdi::after{
  content: none !important;
  display: none !important;
}
html:has(#ProductDetailMain) .JKatAdi > span,
html:has(#ProductDetailMain) .JKatAdi span.bold{
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .JKatAdi span.bold::before,
html:has(#ProductDetailMain) .JKatAdi span.bold::after{
  content: none !important;
  display: none !important;
}
html:has(#ProductDetailMain) .JKatAdi .satir1{
  font-family: var(--bl-font) !important;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem) !important;
  font-weight: 800 !important;
  font-stretch: 84%;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) #productDetailRelated .JKatAdi{
  display: none !important;
}

/* ---------------------------------------------------------------------
 7. RENK VARYANTLARI
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) #productDetailRelated{
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 28px !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) #productDetailRelated .JKatAdi{
  flex: 0 0 100%;
  margin: 0 0 11px !important;
}
html:has(#ProductDetailMain) #productDetailRelated .satir1,
html:has(#ProductDetailMain) .eksecenekLine .left_line{
  font-family: var(--bl-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-stretch: 100% !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
}
html:has(#ProductDetailMain) #productDetailRelated > a{
  display: block !important;
  box-sizing: border-box !important;
  width: 56px;
  flex: 0 0 56px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bl-line) !important;
  box-shadow: none !important;
  background: var(--bl-bg-alt);
  transition: border-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) #productDetailRelated > a:hover{
  border-color: var(--bl-fg-muted) !important;
}
html:has(#ProductDetailMain) #productDetailRelated > a.bl-p-current{
  border-color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) #productDetailRelated > a img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
 8. VARYASYON ÇİPLERİ
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) #divUrunEkSecenek{
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
}
html:has(#ProductDetailMain) .eksecenekLine{
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
}
html:has(#ProductDetailMain) .eksecenekLine:last-child{
  margin-bottom: 0 !important;
}
html:has(#ProductDetailMain) .eksecenekLine .left_line{
  display: block !important;
  width: auto !important;
  float: none !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .eksecenekLine .center_line{
  display: none !important;
}
html:has(#ProductDetailMain) .eksecenekLine .right_line{
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .size_box{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  min-width: 48px;
  height: 44px;
  margin: 0 !important;
  padding: 0 14px !important;
  background-color: var(--bl-bg) !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--bl-fg-secondary) !important;
  font-family: var(--bl-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--bl-dur-1) var(--bl-ease), color var(--bl-dur-1) var(--bl-ease), background-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) .size_box:hover{
  border-color: var(--bl-fg) !important;
  color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) .size_box.selected{
  background-color: var(--bl-fg) !important;
  border-color: var(--bl-fg) !important;
  color: var(--bl-bg) !important;
}
html:has(#ProductDetailMain) .size_box.passive,
html:has(#ProductDetailMain) .size_box.disabled,
html:has(#ProductDetailMain) .size_box[class*="pasif"],
html:has(#ProductDetailMain) .size_box[class*="Pasif"]{
  color: var(--bl-fg-disabled) !important;
  border-color: var(--bl-line) !important;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 9. SATIN ALMA
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) #divSatinAl{
  margin: 0 0 28px !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) #divSatinAl,
html:has(#ProductDetailMain) #divSatinAl *{
  box-shadow: none !important;
  text-shadow: none !important;
}
html:has(#ProductDetailMain) .BasketBtn{
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 48px;
  gap: 6px;
  align-items: start;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .BasketBtn > *{
  min-height: 0 !important;
  align-self: start !important;
}
html:has(#ProductDetailMain) .Basketinp{
  grid-column: 1;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  overflow: visible !important;
}
html:has(#ProductDetailMain) .Basketinp .riSingle,
html:has(#ProductDetailMain) .Basketinp .RadInput{
  display: inline-flex !important;
  position: relative !important;
  align-items: stretch;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  height: 48px !important;
  width: auto !important;
  min-width: 96px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  background: var(--bl-bg) !important;
  overflow: hidden !important;
}
html:has(#ProductDetailMain) .Basketinp .riSingle > *{
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  transform: none !important;
}
html:has(#ProductDetailMain) .Basketinp .qtyMinus{
  order: 1;
  flex: 0 0 30px !important;
}
html:has(#ProductDetailMain) #txtbxurunSiparisAdedi{
  order: 2;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  flex: 0 0 34px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  text-indent: 0 !important;
  color: var(--bl-fg) !important;
  -webkit-text-fill-color: var(--bl-fg) !important;
  font-family: var(--bl-font) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}
html:has(#ProductDetailMain) .Basketinp .qtyPlus{
  order: 3;
  flex: 0 0 30px !important;
}
html:has(#ProductDetailMain) .Basketinp .qtyPlus,
html:has(#ProductDetailMain) .Basketinp .qtyMinus{
  display: flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  min-width: 30px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bl-fg) !important;
  font-size: 0 !important;
  cursor: pointer;
  transition: opacity var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) .Basketinp .qtyPlus:hover,
html:has(#ProductDetailMain) .Basketinp .qtyMinus:hover{
  opacity: .5;
}
html:has(#ProductDetailMain) .Basketinp svg{
  width: 12px;
  height: 12px;
  display: block;
}
html:has(#ProductDetailMain) .Basketinp i{
  font-size: 10px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}
html:has(#ProductDetailMain) .basketBtn{
  grid-column: 2;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .Addtobasket{
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  background: var(--bl-fg) !important;
  color: var(--bl-bg) !important;
  border: 1px solid var(--bl-fg) !important;
  border-radius: 0 !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--bl-dur-1) var(--bl-ease), color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) .Addtobasket:hover{
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) .UFavorilerimeEkle{
  grid-column: 3;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
}
html:has(#ProductDetailMain) #aFavoriEkleBtn{
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  outline: none !important;
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
  font-size: 0 !important;
  cursor: pointer;
  transition: border-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) #aFavoriEkleBtn::before,
html:has(#ProductDetailMain) #aFavoriEkleBtn::after{
  content: none !important;
}
html:has(#ProductDetailMain) #aFavoriEkleBtn:hover{
  border-color: var(--bl-line-strong) !important;
}
html:has(#ProductDetailMain) #aFavoriEkleBtn .box1{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0 !important;
}
html:has(#ProductDetailMain) #aFavoriEkleBtn svg{
  width: 17px;
  height: 17px;
  display: block;
}
html:has(#ProductDetailMain) #aFavoriEkleBtn i{
  font-size: 15px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
html:has(#ProductDetailMain) .buyfast{
  grid-column: 1 / -1;
  margin: 6px 0 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .buyfastbutton{
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  background: transparent !important;
  color: var(--bl-fg) !important;
  border: 1px solid var(--bl-fg) !important;
  border-radius: 0 !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--bl-dur-1) var(--bl-ease), color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) .buyfastbutton:hover{
  background: var(--bl-fg) !important;
  color: var(--bl-bg) !important;
}
html:has(#ProductDetailMain) .BottomList .ProductIcon{
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--bl-line);
}
html:has(#ProductDetailMain) .BottomList .ProductIcon > div{
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:has(#ProductDetailMain) .BottomList .ProductIcon a{
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--bl-fg-muted) !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  cursor: pointer;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) .BottomList .ProductIcon a:hover{
  color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) .BottomList .ProductIcon .box1{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  text-indent: 0 !important;
  font-family: var(--bl-font) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: inherit !important;
}
html:has(#ProductDetailMain) .BottomList .ProductIcon i{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: inherit !important;
}
html:has(#ProductDetailMain) .ProductIcon2:empty{
  display: none !important;
}

/* ---------------------------------------------------------------------
 10. SEKMELER
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) .urunOzellik,
html:has(#ProductDetailMain) .urunTab,
html:has(#ProductDetailMain) .urunTab ul,
html:has(#ProductDetailMain) .urunDetayPanel,
html:has(#ProductDetailMain) .urunTabAlt{
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:has(#ProductDetailMain) .urunOzellik{
  margin: 26px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html:has(#ProductDetailMain) .urunTab{
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
html:has(#ProductDetailMain) .urunTab ul{
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  column-gap: 16px;
  row-gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-bottom: 1px solid var(--bl-line);
}
html:has(#ProductDetailMain) .urunTab li{
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  float: none !important;
  list-style: none !important;
}
html:has(#ProductDetailMain) .urunTab li a{
  display: block !important;
  white-space: nowrap;
  padding: 15px 0 !important;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  font-family: var(--bl-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  text-decoration: none !important;
  background: none !important;
  cursor: pointer;
  transition: color var(--bl-dur-1) var(--bl-ease);
}

@media (min-width: 1200px){
  html:has(#ProductDetailMain) .urunTab ul{
    column-gap: 20px;
  }
  html:has(#ProductDetailMain) .urunTab li a{
    font-size: 11px !important;
    letter-spacing: .06em !important;
  }
}
html:has(#ProductDetailMain) .urunTab li a:hover{
  color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) .urunTab li.active a{
  color: var(--bl-fg) !important;
  border-bottom-color: var(--bl-fg);
}
html:has(#ProductDetailMain) .urunDetayPanel{
  padding: 26px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
html:has(#ProductDetailMain) .urunTabAlt{
  font-family: var(--bl-font) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--bl-fg-secondary) !important;
  max-width: 68ch;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .odemeSecenekItem{
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  font-size: 13px !important;
  color: var(--bl-fg-secondary) !important;
}
html:has(#ProductDetailMain) .odemeSecenekItem b{
  color: var(--bl-fg) !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------------------
 11. BENZER / SON ZİYARET EDİLENLER
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) #BenzerUrunDiv,
html:has(#ProductDetailMain) .SonZiyaretEdilenUrunler{
  position: relative;
  z-index: 1;
  background: var(--bl-bg);
  clear: both;
}
html:has(#ProductDetailMain) #BenzerUrunDiv{
  border-top: 1px solid var(--bl-line);
  margin-top: 48px !important;
  padding: 40px var(--bl-p-pad) 0 !important;
}
html:has(#ProductDetailMain) #divBenzerUrun{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--bl-p-gap);
  row-gap: 28px;
  max-width: var(--bl-p-max);
  margin: 0 auto !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) #divBenzerUrun > .JKatAdi{
  grid-column: 1 / -1;
}

@media (min-width: 768px){
  html:has(#ProductDetailMain) #divBenzerUrun{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 34px;
  }
}
html:has(#ProductDetailMain) .SonZiyaretEdilenUrunler{
  border-top: 1px solid var(--bl-line);
  margin-top: 48px !important;
  padding: 40px var(--bl-p-pad) 56px !important;
}
html:has(#ProductDetailMain) .SonZiyaretEdilenUrunler .ProductList{
  position: relative;
  max-width: var(--bl-p-max);
  margin: 0 auto !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .SonZiyaretEdilenUrunler .jCarouselLite{
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#ProductDetailMain) .ulUrunSlider{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html:has(#ProductDetailMain) .SonZiyaretEdilenUrunler .owl-dots{
  display: none !important;
}
html:has(#ProductDetailMain) .owl-nav.disabled{
  display: none !important;
}
html:has(#ProductDetailMain) .ProductListprev,
html:has(#ProductDetailMain) .ProductListnext{
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 3;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bl-bg) !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--bl-fg) !important;
  font-size: 0 !important;
  cursor: pointer;
  transition: border-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#ProductDetailMain) .ProductListprev:hover,
html:has(#ProductDetailMain) .ProductListnext:hover{
  border-color: var(--bl-fg) !important;
}
html:has(#ProductDetailMain) .ProductListprev::before,
html:has(#ProductDetailMain) .ProductListprev::after,
html:has(#ProductDetailMain) .ProductListnext::before,
html:has(#ProductDetailMain) .ProductListnext::after{
  content: none !important;
  display: none !important;
}
html:has(#ProductDetailMain) .ProductListprev > span,
html:has(#ProductDetailMain) .ProductListnext > span{
  font-size: 0 !important;
}
html:has(#ProductDetailMain) .ProductListprev svg,
html:has(#ProductDetailMain) .ProductListnext svg{
  width: 14px;
  height: 14px;
  display: block;
}
html:has(#ProductDetailMain) .ProductListprev{
  left: 0;
}
html:has(#ProductDetailMain) .ProductListnext{
  right: 0;
}
html:has(#ProductDetailMain) .ProductListprev.disabled,
html:has(#ProductDetailMain) .ProductListnext.disabled{
  display: none !important;
}

/* KART */
html:has(#ProductDetailMain) .productItem{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html:has(#ProductDetailMain) .productItem .productImage{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: var(--bl-p-ratio);
  height: auto !important;
  overflow: hidden !important;
  background: var(--bl-bg-alt);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html:has(#ProductDetailMain) .productItem .productImage > a{
  display: block !important;
  width: 100%;
  height: 100%;
}
html:has(#ProductDetailMain) .productItem .productImage img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
  transition: transform var(--bl-dur-3) var(--bl-ease);
}
html:has(#ProductDetailMain) .productItem:hover .productImage img{
  transform: scale(1.04);
}
html:has(#ProductDetailMain) .productItem .productDetail{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: left !important;
  padding: 10px 6px 0 !important;
  margin: 0 !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
}
html:has(#ProductDetailMain) .productItem .productDetail > *{
  position: static !important;
  float: none !important;
  transform: none !important;
  text-align: left !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html:has(#ProductDetailMain) .productItem .productMarka{
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  margin: 0 0 5px !important;
  height: auto !important;
  min-height: 0 !important;
}
html:has(#ProductDetailMain) .productItem .productName{
  display: block !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html:has(#ProductDetailMain) .productItem .productName a{
  display: -webkit-box !important;
  -webkit-line-clamp: var(--bl-p-lines);
  -webkit-box-orient: vertical;
  width: 100% !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  min-height: calc(var(--bl-p-lines) * 1.35em);
  color: var(--bl-fg) !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html:has(#ProductDetailMain) .productItem .productPrice{
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
html:has(#ProductDetailMain) .productItem .productPrice > *{
  flex: 0 0 auto !important;
  width: auto !important;
}
html:has(#ProductDetailMain) .productItem .discountKdv{
  display: none !important;
}
html:has(#ProductDetailMain) .productItem .discountPriceSpan{
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bl-fg) !important;
  font-variant-numeric: tabular-nums;
}
html:has(#ProductDetailMain) .productItem .productStokKodu,
html:has(#ProductDetailMain) .productItem .productBarcode,
html:has(#ProductDetailMain) .productItem .ItemV3_col3,
html:has(#ProductDetailMain) .productItem .urunListeAdet,
html:has(#ProductDetailMain) .productItem .productIcon,
html:has(#ProductDetailMain) .productItem .productItemVariantDetail{
  display: none !important;
}

/* ---------------------------------------------------------------------
 12. GİZLENENLER
 --------------------------------------------------------------------- */
html:has(#ProductDetailMain) .ArkadasiniDavetetBlock{
  display: none !important;
}
html:has(#ProductDetailMain) .middleTopBlock:empty,
html:has(#ProductDetailMain) .middleBottomBlock:empty{
  display: none !important;
}
html:has(#ProductDetailMain) a:focus-visible,
html:has(#ProductDetailMain) input:focus-visible,
html:has(#ProductDetailMain) .size_box:focus-visible{
  outline: 2px solid var(--bl-focus);
  outline-offset: 2px;
}

/* =====================================================================
 13. MOBİL
 ===================================================================== */

@media (max-width: 1023px){
  html:has(#ProductDetailMain) .categoryTitle .proCategoryTitle{
    padding: 10px var(--bl-p-pad) !important;
  }
  html:has(#ProductDetailMain) .TopList{
    display: flex !important;
    flex-direction: column !important;
  }
  html:has(#ProductDetailMain) .TopList > .ProductName{
    order: 1;
  }
  html:has(#ProductDetailMain) .TopList > .productcode{
    order: 2;
  }
  html:has(#ProductDetailMain) .TopList > .Formline.puanVer{
    order: 3;
  }
  html:has(#ProductDetailMain) .TopList > #divOnyazi{
    order: 4;
  }
  html:has(#ProductDetailMain) .TopList > .PriceList{
    order: 5;
  }
  html:has(#ProductDetailMain) .TopList > *{
    order: 6;
  }
  html:has(#ProductDetailMain) .RightDetail{
    padding: 20px var(--bl-p-pad) 32px !important;
  }
  html:has(#ProductDetailMain) .ProductName h1{
    font-size: 17px !important;
  }
  html:has(#ProductDetailMain) .productcode{
    margin: 0 0 16px !important;
  }
  html:has(#ProductDetailMain) .bl-p-price{
    margin: 0 0 22px !important;
  }
  html:has(#ProductDetailMain) #productDetailRelated{
    margin: 0 0 24px !important;
  }
  html:has(#ProductDetailMain) #divUrunEkSecenek{
    margin: 0 0 24px !important;
  }
  html:has(#ProductDetailMain) #divSatinAl{
    margin: 0 0 22px !important;
  }

  /* Favori butonu mobilde ÖKSÜZ kalıyordu: Ticimax onu .leftImage'in içine
   koyuyor, position:static verilince galerinin hemen altında, ürün adının
   üstünde tek başına duruyordu (ölçüm: x=0, y=636, galeri altı 636).
   Artık galerinin sağ üstüne biniyor — liste kartlarındaki kalple aynı dil. */
  html:has(#ProductDetailMain) .leftImage{
    position: relative !important;
  }
  html:has(#ProductDetailMain) .UFavorilerimeEkle{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    float: none !important;
    width: 40px !important;
    height: 40px !important;
  }
  html:has(#ProductDetailMain) #aFavoriEkleBtn{
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,.92) !important;
    border-color: transparent !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  }
  html:has(#ProductDetailMain) .urunTab ul{
    display: block !important;
    border-bottom: 0 !important;
    column-gap: 0;
    row-gap: 0;
  }
  html:has(#ProductDetailMain) .urunTab li{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--bl-line) !important;
  }
  html:has(#ProductDetailMain) .urunTab li a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    white-space: normal;
    padding: 16px 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
  }
  html:has(#ProductDetailMain) .urunTab li.active a{
    border-bottom: 0 !important;
  }
  html:has(#ProductDetailMain) .urunTab li i,
  html:has(#ProductDetailMain) .urunTab li em,
  html:has(#ProductDetailMain) .urunTab li b,
  html:has(#ProductDetailMain) .urunTab li span[class*="icon"],
  html:has(#ProductDetailMain) .urunTab li span[class*="arrow"]{
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--bl-fg) !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  html:has(#ProductDetailMain) .urunDetayPanel{
    padding: 0 0 20px !important;
  }
  html:has(#ProductDetailMain) .urunTabAlt{
    font-size: 13px !important;
  }
  html:has(#ProductDetailMain) .ProductListprev,
  html:has(#ProductDetailMain) .ProductListnext{
    display: none !important;
  }
  html:has(#ProductDetailMain) #BenzerUrunDiv{
    margin-top: 36px !important;
    padding-top: 32px !important;
  }
  html:has(#ProductDetailMain) .SonZiyaretEdilenUrunler{
    margin-top: 36px !important;
    padding: 32px var(--bl-p-pad) 40px !important;
  }

  /* MOBİL GALERİ */
  html:has(#ProductDetailMain) #divMobileImageList{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:has(#ProductDetailMain) #divMobileImageList img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  html:has(#ProductDetailMain) #divMobileImageList .owl-item{
    background: var(--bl-bg-alt);
  }
  html:has(#ProductDetailMain) #divMobileImageList .owl-dots{
    display: flex !important;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 0;
  }
  html:has(#ProductDetailMain) #divMobileImageList .owl-dot span{
    display: block !important;
    width: 6px;
    height: 6px;
    background: var(--bl-line) !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  html:has(#ProductDetailMain) #divMobileImageList .owl-dot.active span{
    background: var(--bl-fg) !important;
  }

  /* CSS yedeği: owl yeniden kurulamadıysa native kaydırma + snap */
  html:has(#ProductDetailMain).bl-p-peekcss #divMobileImageList .owl-stage-outer{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html:has(#ProductDetailMain).bl-p-peekcss #divMobileImageList .owl-stage-outer::-webkit-scrollbar{
    display: none;
  }
  html:has(#ProductDetailMain).bl-p-peekcss #divMobileImageList .owl-stage{
    transform: none !important;
    width: auto !important;
    display: flex !important;
    transition: none !important;
  }
  html:has(#ProductDetailMain).bl-p-peekcss #divMobileImageList .owl-item{
    flex: 0 0 var(--bl-p-peek) !important;
    width: var(--bl-p-peek) !important;
    margin: 0 0px 0 0 !important;
    scroll-snap-align: start;
  }
}

/* Sticky sepet barı */
html:has(#ProductDetailMain) .bl-p-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--bl-p-pad);
  background: var(--bl-bg);
  border-top: 1px solid var(--bl-line-strong);
  transform: translateY(110%);
  transition: transform var(--bl-dur-3) var(--bl-ease);
}
html:has(#ProductDetailMain).bl-p-bar-on .bl-p-bar{
  transform: none;
}
html:has(#ProductDetailMain).bl-p-bar-on body{
  padding-bottom: 72px !important;
}
html:has(#ProductDetailMain) .bl-p-bar-price{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
html:has(#ProductDetailMain) .bl-p-bar-now{
  font-family: var(--bl-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bl-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:has(#ProductDetailMain) .bl-p-bar-now.is-sale{
  color: var(--bl-accent);
}
html:has(#ProductDetailMain) .bl-p-bar-was{
  font-size: 11px;
  color: var(--bl-fg-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:has(#ProductDetailMain) .bl-p-bar button{
  flex: 1 1 auto;
  height: 46px;
  padding: 0 16px;
  background: var(--bl-fg);
  color: var(--bl-bg);
  border: 1px solid var(--bl-fg);
  border-radius: 0;
  font-family: var(--bl-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 1024px){
  html:has(#ProductDetailMain) .bl-p-bar{
    display: none !important;
  }
  html:has(#ProductDetailMain).bl-p-bar-on body{
    padding-bottom: 0 !important;
  }
}

/* ================= company.js  (bl-st → html:has(#divIcerik.pageContainer)) ================= */
:root{
  --bl-st-pad: 16px;
  --bl-st-measure: 68ch;
}

@media (min-width: 768px){
  :root{
    --bl-st-pad: 32px;
  }
}

/* ---------------------------------------------------------------------
 1. SAYFA KABI
 --------------------------------------------------------------------- */
html:has(#divIcerik.pageContainer) #divIcerik{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 72px !important;
  background: var(--bl-bg) !important;
  overflow: visible !important;
}
html:has(#divIcerik.pageContainer) #divIcerik #divCenterBlock,
html:has(#divIcerik.pageContainer) #divIcerik .ticiContainer,
html:has(#divIcerik.pageContainer) #divIcerik .staticContent,
html:has(#divIcerik.pageContainer) #divIcerik .pageContent{
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body{
  max-width: var(--bl-st-measure);
  margin: 0 auto !important;
  padding: 0 var(--bl-st-pad) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-empty{
  display: none !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .middleTopBlock:empty,
html:has(#divIcerik.pageContainer) #divIcerik .middleBottomBlock:empty{
  display: none !important;
}

/* Yapıştırılmış artıkları sustur */
html:has(#divIcerik.pageContainer) #divIcerik font{
  font: inherit !important;
  color: inherit !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body *{
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--bl-font) !important;
  max-width: 100% !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body *{
  text-align: left !important;
}

/* ---------------------------------------------------------------------
 2. BREADCRUMB
 --------------------------------------------------------------------- */
html:has(#divIcerik.pageContainer) #divIcerik .categoryTitle .proCategoryTitle{
  padding: 14px var(--bl-st-pad) !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  overflow: hidden;
}
html:has(#divIcerik.pageContainer) #divIcerik ul.breadcrumb{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
  font-size: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html:has(#divIcerik.pageContainer) #divIcerik ul.breadcrumb::-webkit-scrollbar{
  display: none;
}
html:has(#divIcerik.pageContainer) #divIcerik ul.breadcrumb li{
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  white-space: nowrap;
}
html:has(#divIcerik.pageContainer) #divIcerik ul.breadcrumb li a{
  font-family: var(--bl-font) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.pageContainer) #divIcerik ul.breadcrumb li a:hover{
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik ul.breadcrumb li:last-of-type a{
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik ul.breadcrumb li + li::before{
  content: '/';
  font-size: 10px;
  color: var(--bl-fg-muted);
  margin: 0 8px;
  flex: 0 0 auto;
}
html:has(#divIcerik.pageContainer) #divIcerik #linkOncekiSayfa{
  display: none !important;
}

/* ---------------------------------------------------------------------
 3. TİPOGRAFİ
 --------------------------------------------------------------------- */
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body{
  font-family: var(--bl-font) !important;
  font-size: 16px;
  line-height: 1.75;
  color: var(--bl-fg-secondary);
  padding-top: 8px !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body p{
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--bl-fg-secondary) !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body p:last-child{
  margin-bottom: 0 !important;
}

/* Sayfa başlığı */
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-title{
  display: block !important;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem) !important;
  font-weight: 800 !important;
  font-stretch: 84%;
  letter-spacing: -.03em !important;
  line-height: 1.05 !important;
  text-transform: uppercase;
  color: var(--bl-fg) !important;
  margin: 40px 0 28px !important;
  padding: 0 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line) !important;
  background: none !important;
}

@media (min-width: 768px){
  html:has(#divIcerik.pageContainer) #divIcerik .bl-st-title{
    margin: 56px 0 36px !important;
  }
}

/* Ara başlıklar */
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h2,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h3,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h4{
  font-family: var(--bl-font) !important;
  color: var(--bl-fg) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h2:not(.bl-st-title){
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem) !important;
  font-weight: 800 !important;
  font-stretch: 88%;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  text-transform: uppercase;
  margin: 44px 0 14px !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h3{
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  margin: 44px 0 14px !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h3{
  padding-top: 28px !important;
  border-top: 1px solid var(--bl-line) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h3.bl-st-first{
  padding-top: 0 !important;
  border-top: 0 !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h4{
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 28px 0 10px !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h2 strong,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h3 strong,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body h4 strong{
  font-weight: inherit !important;
  color: inherit !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body strong,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body b{
  font-weight: 600 !important;
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body em,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body i{
  font-style: italic;
}

/* Listeler */
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body ul,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body ol{
  margin: 0 0 18px !important;
  padding: 0 0 0 20px !important;
  list-style-position: outside;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body ul{
  list-style: none !important;
  padding-left: 0 !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body ul > li{
  position: relative;
  padding-left: 18px !important;
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--bl-fg-secondary) !important;
  background: none !important;
  list-style: none !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body ul > li::before{
  content: '';
  position: absolute;
  left: 0;
  top: .78em;
  width: 7px;
  height: 1px;
  background: var(--bl-fg);
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body ol > li{
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--bl-fg-secondary) !important;
}

/* Linkler */
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body a{
  color: var(--bl-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body a:hover{
  color: var(--bl-accent) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-contact{
  display: inline-block !important;
  font-size: 16px !important;
  color: var(--bl-fg) !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--bl-line);
  padding-bottom: 1px;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-contact:hover{
  border-bottom-color: var(--bl-fg);
}

/* Görsel, tablo, alıntı */
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 24px 0 !important;
  border: 0 !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body table{
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 0 24px !important;
  font-size: 14px !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body th,
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body td{
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line) !important;
  padding: 12px 12px 12px 0 !important;
  text-align: left !important;
  vertical-align: top;
  background: none !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body th{
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--bl-fg) !important;
  border-bottom-color: var(--bl-line-strong) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body blockquote{
  margin: 24px 0 !important;
  padding: 0 0 0 20px !important;
  border-left: 1px solid var(--bl-line-strong) !important;
  font-size: 17px !important;
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .bl-st-body hr{
  border: 0 !important;
  border-top: 1px solid var(--bl-line) !important;
  margin: 36px 0 !important;
}

/* ---------------------------------------------------------------------
 4. FORMLAR
 --------------------------------------------------------------------- */
html:has(#divIcerik.pageContainer) #divIcerik input[type="text"],
html:has(#divIcerik.pageContainer) #divIcerik input[type="email"],
html:has(#divIcerik.pageContainer) #divIcerik input[type="tel"],
html:has(#divIcerik.pageContainer) #divIcerik input[type="number"],
html:has(#divIcerik.pageContainer) #divIcerik input[type="password"],
html:has(#divIcerik.pageContainer) #divIcerik select,
html:has(#divIcerik.pageContainer) #divIcerik textarea{
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px;
  margin: 0 0 12px !important;
  padding: 0 14px !important;
  background: var(--bl-bg) !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--bl-font) !important;
  font-size: 14px !important;
  color: var(--bl-fg) !important;
  transition: border-color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.pageContainer) #divIcerik textarea{
  height: auto;
  min-height: 140px;
  padding: 14px !important;
  resize: vertical;
}
html:has(#divIcerik.pageContainer) #divIcerik input:focus,
html:has(#divIcerik.pageContainer) #divIcerik select:focus,
html:has(#divIcerik.pageContainer) #divIcerik textarea:focus{
  border-color: var(--bl-line-strong) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik input::placeholder,
html:has(#divIcerik.pageContainer) #divIcerik textarea::placeholder{
  color: var(--bl-fg-muted);
}
html:has(#divIcerik.pageContainer) #divIcerik label{
  display: block;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--bl-fg-muted) !important;
  margin: 0 0 7px !important;
}
html:has(#divIcerik.pageContainer) #divIcerik button:not(.owl-dot),
html:has(#divIcerik.pageContainer) #divIcerik input[type="submit"],
html:has(#divIcerik.pageContainer) #divIcerik input[type="button"],
html:has(#divIcerik.pageContainer) #divIcerik a.button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 28px !important;
  background: var(--bl-fg) !important;
  color: var(--bl-bg) !important;
  border: 1px solid var(--bl-fg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--bl-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--bl-dur-1) var(--bl-ease), color var(--bl-dur-1) var(--bl-ease);
}
html:has(#divIcerik.pageContainer) #divIcerik button:not(.owl-dot):hover,
html:has(#divIcerik.pageContainer) #divIcerik input[type="submit"]:hover,
html:has(#divIcerik.pageContainer) #divIcerik a.button:hover{
  background: var(--bl-bg) !important;
  color: var(--bl-fg) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik iframe{
  display: block;
  width: 100% !important;
  border: 0 !important;
  filter: grayscale(1);
  margin: 24px 0;
}

/* ---------------------------------------------------------------------
 5. AKORDİYON (SSS)
 --------------------------------------------------------------------- */
html:has(#divIcerik.pageContainer) #divIcerik .panel,
html:has(#divIcerik.pageContainer) #divIcerik .panel-group,
html:has(#divIcerik.pageContainer) #divIcerik .accordion,
html:has(#divIcerik.pageContainer) #divIcerik details{
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bl-line) !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:has(#divIcerik.pageContainer) #divIcerik .panel-heading,
html:has(#divIcerik.pageContainer) #divIcerik summary{
  background: none !important;
  border: 0 !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  font-family: var(--bl-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bl-fg) !important;
  cursor: pointer;
  list-style: none;
}
html:has(#divIcerik.pageContainer) #divIcerik summary::-webkit-details-marker{
  display: none;
}
html:has(#divIcerik.pageContainer) #divIcerik .panel-body{
  padding: 0 0 18px !important;
  border: 0 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--bl-fg-secondary) !important;
}
html:has(#divIcerik.pageContainer) #divIcerik a:focus-visible,
html:has(#divIcerik.pageContainer) #divIcerik input:focus-visible,
html:has(#divIcerik.pageContainer) #divIcerik button:focus-visible{
  outline: 2px solid var(--bl-focus);
  outline-offset: 2px;
}

/* ================= ilk boyama varsayılanları ================= */

@media (min-width: 768px){
  :root{
    --bl-cols: 4;
  }
}