/* KOSKERX-SURUM WEBCSS 2026-09-09-7
     Panele yapistirilan surumun yereldeki dosyayla ayni olup olmadigini
     dogrulamak icin. Dosya degisince tarihi/sayiyi artirin, sonra
     `node deploy/panel-surum-kontrol.js` calistirin.
     NOT: @import kuralindan ONCE yorum olabilir, kural olamaz. */

  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

  /* ============================================================
    GORUNUM - Renk ve olcu tokenlari (tum palet buradan yonetilir)
    ============================================================ */
  :root {
    /* Lacivert ve altin ana tonlari kullanici talebiyle guncellendi.
       navy-900/navy-700 kasitli olarak AYNI degere cekildi - eskiden de
       birbirine cok yakin iki koyu lacivert tondu (bkz. eski #06205E/
       #0C2380), tek bir hex verilince ikisini farkli birakmak yeni bir
       "iki farkli lacivert" tutarsizligi yaratirdi. navy-500 (acik/
       sonuk mavi-gri, ikincil metin rolu) ve gold-300/gold-600 (altinin
       acik/koyu varyantlari, hover-koyulasma ve rozet zemini icin)
       KASITLI olarak degistirilmedi - bunlar zaten yeni --ng-gold-500'den
       yeterince ayrisiyor, hiyerarsi bozulmuyor. */
    --ng-navy-900: #001C3D;
    --ng-navy-700: #001C3D;
    --ng-navy-500: #5E718D;
    --ng-gold-300: #E8D1B0;
    --ng-gold-500: #CEA25C;
    --ng-gold-600: #A8823F;
    --ng-line:     #D7DFE9;
    /* Header'daki Uye Girisi / Sepetim buton zemini (50, kullanicinin
       verdigi renk: #f8f9fd, cok acik ucuk mavi) ve hover'i (100, bir
       tik koyusu). */
    --ng-navy-50:  #F8F9FD;
    --ng-navy-100: #EEF1FA;
  --ng-green-50: #E8F5EC;   /* havale fiyati kutusu zemini */
  --ng-green-700: #1E7B45;  /* havale fiyati metni */
    --ng-bg-soft:  #F9FAFB;
    /* Kose yuvarlamasi TAMAMEN kaldirildi (kullanici talebi) - tum kare
       koseli (dikdortgen) elemanlar artik bu iki token uzerinden 0'a
       cekiliyor. Dairesel elemanlar (scroll-to-top, sepet rozeti, sosyal
       ikonlar, slider tutamaci, owl noktalari, yildizlar vb.) bu
       token'lari KULLANMIYOR - onlar dogrudan 50%/100% ile tanimli ve
       tasarim geregi yuvarlak kalmaya devam ediyor. Ileride kose
       yuvarlamasi geri istenirse SADECE bu iki satiri degistirmek yeterli. */
    --ng-radius:      0;
    --ng-radius-img:  0;
    --ng-btn-h:      50px;
    /* Header ve ana icerigin ortak sol/sag bosluk degeri (".header-wrapper > div"
       ve "#divIcerik" ayni degeri kullanir). Duyuru barindaki metnin menu ile
       hizalanmasi da BUNA baglandi (asagida "body #top-bar .headerContainer >
       div.flex-center") - eskiden orada ayri, sabit bir piksel degeri (x=100)
       vardi ve menu paddingi degisince (FAZ 11) o deger gecersiz kalip
       hizasizliga yol acmisti. Tek degiskene baglayinca boyle bir kayma
       bir daha yasanmaz. */
    --ng-gutter:    60px;
  }

  /* Fancybox vurgu rengi - varsayilan turkuaz yerine altin. */
  :root {
    --fancybox-accent-color: #C19C60;
  }
  /* Fancybox'in kendi dusuk cozunurluklu donen daire spinner'i (SVG circle)
     yerine ince altin renginde kayan bir cizgi - urun listesi/galeri
     yukleme gostergeleriyle (.ngLoadBar) ayni dil. */
  .fancybox__spinner {
    width: 100% !important;
    height: 2px !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    color: transparent;
    background: rgba(6,32,94,.06);
    overflow: hidden;
  }
  .fancybox__spinner svg { display: none !important; }
  .fancybox__spinner:after {
    content: '';
    position: absolute;
    top: 0; left: -40%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, #C19C60, transparent);
    animation: ngGaleriYukleniyor 1.1s ease-in-out infinite;
  }

  /* Fancybox modal: beyaz zemin, kapat/ok butonlari alt-ortada. */
  :root {
    --fancybox-bg: #fff;
    --fancybox-color: var(--ng-navy-900);
  }
  .fancybox__container .fancybox__nav .carousel__button.is-prev,
  .fancybox__container .fancybox__nav .carousel__button.is-next,
  .fancybox__container .fancybox__button--close {
    /* Kapatma butonu position:static geliyor - top/left/bottom'un
       etki etmesi icin fixed sart. */
    position: fixed !important;
    top: auto !important;
    bottom: 28px !important;
    left: 50% !important;
    right: auto !important;
    z-index: 40 !important;
  }
  .fancybox__container .fancybox__nav .carousel__button.is-prev {
    transform: translateX(calc(-50% - 100px)) !important;
  }
  .fancybox__container .fancybox__button--close {
    transform: translateX(-50%) !important;
  }
  .fancybox__container .fancybox__nav .carousel__button.is-next {
    transform: translateX(calc(-50% + 100px)) !important;
  }

  /* GLOBAL TIPOGRAFI - Manrope (govde) + Cormorant Garamond (basliklar) +
     0.10em harf araligi tum siteye uygulanir.
     Ikon fontlari (FontAwesome) haric tutulur, aksi halde ikonlar bozulur. */
  body,
  body input,
  body select,
  body textarea,
  body button,
  body a,
  body span,
  body div,
  body p,
  body h1, body h2, body h3, body h4, body h5, body h6,
  body li, body td, body th, body label {
    letter-spacing: normal;
  }

  /* Ikon fontlarinda harf araligi OLMAMALI */
  body .fa, body .fas, body .far, body .fal, body .fab,
  body [class^="fa-"], body [class*=" fa-"],
  body i.fa, body i.fas, body i.far, body i.fal, body i.fab {
    letter-spacing: normal !important;
    font-family: 'FontAwesome', 'Font Awesome 5 Pro', 'Font Awesome 5 Brands' !important;
  }

  /* MARKA ikonlari (.fab) Brands fontunu KULLANMALI.
    Yukaridaki kural hepsine 'FontAwesome' dayatiyordu; o fontta
    fa-whatsapp glifi YOK -> ikon 0px genislik uretiyor, buton
    26x50px dikey elipse donusuyordu ("skew" gorunumu).
    Facebook/Instagram glifleri o fontta oldugu icin onlar etkilenmemisti. */
  body i.fab,
  body .fab,
  body [class*="fa-whatsapp"],
  body [class*="fa-facebook"],
  body [class*="fa-instagram"],
  body [class*="fa-twitter"],
  body [class*="fa-youtube"],
  body [class*="fa-tiktok"],
  body [class*="fa-telegram"] {
    font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', 'FontAwesome' !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }

  /* ::before pseudo-elemani da Brands fontunu kullanmali.
    (Glif ::before icinde basiliyor - sadece elemana kural vermek yetmiyor.) */
  body i.fab::before,
  body .fab::before,
  body [class*="fa-whatsapp"]::before,
  body [class*="fa-facebook"]::before,
  body [class*="fa-instagram"]::before,
  body [class*="fa-twitter"]::before,
  body [class*="fa-youtube"]::before,
  body [class*="fa-tiktok"]::before,
  body [class*="fa-telegram"]::before,
  body .whatsBtn i::before {
    font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
  }

  /* WhatsApp butonu: tam daire, ortalanmis ikon */
  body .whatsBtn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center !important;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box;
  }
  body .whatsBtn i {
    width: auto !important;
    height: auto !important;
    font-size: 26px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Fiyat rakamlarinda daha dar aralik - okunurluk icin */
  body .discountPriceSpan,
  body .regularPriceSpan,
  body .ngListeHavaleTutar,
  body .ngOdemeFiyat,
  body .IndirimliFiyatContent .right_line *,
  body .PiyasafiyatiContent .right_line * {
    letter-spacing: normal;
  }


  *{outline: 0;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
  *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
  /*reset Css*/
  [hidden] { display: none !important; }
  [role="button"] { cursor: pointer; }
  [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }
  [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
  [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
  [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
  ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
  template { display: none; }
  [tabindex="-1"]:focus { outline: none !important; }
  /* html'e max-width:1920px + margin:0 auto verilmiyor - 2560px gibi genis
    ekranlarda tum sayfayi ortalayip iki yanda bosluk birakip duyuru
    barinin/ana bannerin uctan uca gorunmesini engelliyordu. Ic icerik
    bloklari kendi max-width'lerini ayri media query'lerle yonetiyor. */
  html {max-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;  -webkit-box-sizing: border-box; box-sizing: border-box; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent;  }
  body { font-family: 'Manrope', sans-serif; margin: 0; padding: 0;font-size:0.8rem; letter-spacing: normal; }
  button, input { overflow: visible; }
  button, select { text-transform: none; }
  button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
  textarea { overflow: auto; }
  input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -moz-appearance: none; -webkit-appearance: none; margin: 0; }
  input[type="search"] { -webkit-appearance: none; }
  input[type="radio"]:disabled, input[type="checkbox"]:disabled { cursor: not-allowed; }
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; }
  label { display: inline-block; margin-bottom:0; }
  input, button, select, textarea { line-height: inherit; }
  img {display:block; border: none; max-width: 100%; }
  i{font-style: normal;}
  a, area, button, [role="button"], input, label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; }
  a { text-decoration: none;color: #666;transition:background .1s ease-in-out,color .1s ease-in-out;}
  a:active, a:hover { outline-width: 0; }
  h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0; font-weight: normal; font-family: 'Cormorant Garamond', serif; }
  input:-webkit-autofill { -webkit-box-shadow: 0 0 0 50px white inset; -webkit-text-fill-color: #000; }
  input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px white inset; -webkit-text-fill-color: #000; }
  select, input, textarea, button { font-family: 'Manrope', sans-serif !important; letter-spacing: normal; }
  button { -moz-appearance: none;-webkit-appearance: none;}
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 600s ease-in-out 0s; }
  textarea { resize: vertical;overflow: auto;  }
  #divAdminPopupText{float: left;width: 100%;}
  .ProductList ul{margin: 0;padding: 0;}
  .blokSonYazilar ul{margin: 0;padding: 0;list-style: none;}
  .blogKategori ul{margin: 0;padding: 0;list-style: none;}
  .blogCenter ul{margin: 0;padding: 0;list-style: none;}
  .blogRight ul{margin: 0;padding: 0;list-style: none;}
  /*colgrid*/
  .pull-center{display: inline-block;vertical-align:top;}
  .pull-left{float:left;}
  .pull-right{float:right;}
  .row {margin-right: -15px; margin-left: -15px;  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col{padding-right: 15px; padding-left: 15px;  position: relative; width: 100%; min-height: 1px; }
  .col { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .col-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; }
  .col-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.333333%; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.666667%; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.666667%; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.333333%; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .col-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.333333%; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.666667%; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  /*colgrid*/
  .fa-facebook-f:before {content: "\f39e"!important;}
  .hesabimBolumuTutucu i{vertical-align: middle;font-weight: 300;}
  .adminUserLoginBody #mainHolder_Panel1 .newuserForm > div { margin: 0 !important; }
  #cb3DSecureOdeme { margin-right: 8px; }
  #txtbxCep { border: solid 1px #a9a9a9; height: 26px; color: #777777; background-color: transparent; }
  .clear { clear: both; }
  .textarea { font-family: 'Judson', sans-serif; border: solid 1px #a9a9a9; padding: 4px; width: 100%; height: 80px; resize: none; color: #777777; background-color: transparent; transition-duration: 0.2s, 0.2s; -webkit-transition-duration: 0.2s, 0.2s;}
  .textbox { font-family: 'Judson', sans-serif; color: #666666; display: block; font-size: 14px; width: 100%; transition-duration: 0.2s, 0.2s; -webkit-transition-duration: 0.2s, 0.2s;}
  .button {font-family: 'Judson', sans-serif; cursor: pointer; color: #fff; padding: 4px 5px; transition: all 0.3s ease 0s; border: none;  text-align: center; }
  .selectboxx { height: 26px; line-height: 26px; padding: 0 5px; background-color: none !important; width: 100%; margin-bottom: 4px; }
  .validate, .validateSol, .validateOrta {position: absolute;right: 0;left: 0;bottom: 0;background-color: #a94442;color: #fff;border-radius: var(--ng-radius);padding: 0 10px;}
  .validate .validateOk, .validateSol .validateSolOk, .validateOrta .validateOrtaOk {background-color: #a94442;position: absolute;right: 0;bottom: 0;left: 0;height: 10px;display: block;border-radius: var(--ng-radius);}
  .cloudzoom-zoom { z-index: 999; }
  .clearfix { content: ''; clear: both; display: block; float: left; width: 100%; }
  .clearfix:after, .clearfix:before { content: ''; clear: both; display: block; float: left; width: 100%; }
  .KasaOnuFirsatlarContent ul li a.button{border: none!important;}
  /* -----------------------------------Magaza Sayfasi--------------------------------------------*/
  .Magazalar #header{margin-bottom: 50px;}
  .Magazalar .magazaSelect{background: #fff;border: 1px solid #eeeff0;color: #222222;font-size: 13px;margin-right:20px;width: calc(25% - 20px);}
  .Magazalar #searchStore{width: 25%;margin:0;}
  .Magazalar #searchStore input{background: #fff;border: 1px solid #eeeff0;color: #222222;font-size: 13px;width: calc(100% - 115px);}
  .Magazalar #searchStore .buton{width: 105px;background: #222;border-color: #222;}
  .Magazalar #searchStore .buton:hover{color: #222;}
  .Magazalar .magazalarContent{float: left;width: 100%;margin-top: 50px;}
  .Magazalar #nearStores{float: left;width: 100%;}
  .Magazalar #nearStores >h2{font-weight: 600!important;color: #222;font-size:18px;}
  /*------------------------------------iletisim--------------------------------------------*/
  .iletisimContent {float: left;width: 100%;}
  .iletisimContent .row{margin: 0;}
  .iletisimContent .AdBan{float: left;width: 50%;}
  .iletisimContent .iletisimLeft{float:left;padding: 0;margin: 0 0 40px;width: 100%;display:block;}
  .iletisimContent .categoryTitle{float:left;padding: 0;margin: 0 0 30px;width: 100%;text-align:left;}
  .iletisimContent .categoryTitle .categoryTitleText{margin-bottom: 0;font-size: 24px;font-weight: bold;line-height: 80px;text-align:left;}
  .iletisimContent .categoryTitle:after{clear: left;content:'';width: 70px;height: 1px;background:#e5e5e5;float: left; }
  .iletisimContent .iletisimLeft .Left{display: none;}
  .iletisimContent .iletisimLeft .Center{display: none;}
  .iletisimContent .iletisimLeft .span{float: left;width: 100%;margin-top: 20px;}
  .iletisimContent .iletisimLeft .Right{display: block;color: #343434;font-size: 14px;line-height: 20px;}
  .iletisimContent .iletisimLeft .Right:before{color: #bababa;font-size: 20px;font-family: 'FontAwesome';width: 35px;text-align: left;font-weight: 300;float: left;}
  .iletisimContent .iletisimLeft .span.iletisimLeftFirmaAdi .Right{font-size: 20px;font-weight: bold;}
  .iletisimContent .iletisimLeft .span.iletisimLeftTelefon .Right {font-size: 24px;}
  .iletisimContent .iletisimLeft .span.iletisimLeftTelefon .Right:before {content: '\f2a0';}
  .iletisimContent .iletisimLeft .span.iletisimLeftFaks .Right:before {content: '\f1ac';}
  .iletisimContent .iletisimLeft .span.iletisimLeftAdres .Right:before   {content: '\f3c5';}
  .iletisimContent .iletisimLeft .span.iletisimLeftEposta .Right:before  {content: '\f2b6';}
  .iletisimContent .iletisimRight{float:left;padding: 0;margin: 0;width: 100%;}
  .iletisimContent .iletisimRight .iletisimbanka{float:left;padding: 0;width: 100%;margin: 0;}
  .iletisimContent .iletisimRight .iletisimbanka .span{float:left;padding: 0;width: 100%;margin: 0;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div{display: block;font-size: 0;border-bottom: 1px solid #e5e5e5;padding: 0 0 20px;margin: 0 0 20px;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div span{display: inline-block;vertical-align:top;width: auto!important;color: #343434;font-size: 14px;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div div{display: inline-block;vertical-align:top;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div.line1 span{display: block;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div.line1 {text-align:center;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div.line1 .line1{text-align: left;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div.line1 .line4{text-align: right;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div.line1 > div{display: inline-block;vertical-align:top;width: 25%;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div.line1 > div span:nth-child(1){margin-bottom: 10px;}
  .iletisimContent .iletisimRight .iletisimbanka .span > div.line2 > div.line2{float: right;}
  .iletisimContent .iletisimRight .iletisimbanka .span > .line1:nth-child(n+2) {border-top: 4px solid;margin-top: 20px;padding-top: 20px; }
  .iletisimContent .iletisimForm{float: left;width: 50%;padding-left: 80px;}
  .iletisimContent .iletisimForm .rowLeft{float:left;padding: 0;margin: 0;width: 100%;}
  .iletisimContent .iletisimForm .rowLeft .span{float:left;padding: 0;margin: 0 0 10px;width: 100%;}
  .iletisimContent .iletisimForm .rowLeft .span .Center{display: none;}
  .iletisimContent .iletisimForm .rowLeft .span .Left{display: block;font-size: 12px;color: #222222;font-weight: 600;line-height: 30px;}
  .iletisimContent .iletisimForm .rowLeft .span .Right{display: block;position: relative;}
  .iletisimContent .iletisimForm .rowLeft .span .Right input{height: 40px;border-color: #e3e3e3;background: transparent;width: 100%;border-style: solid; border-width: 1px;}
  .iletisimContent .iletisimForm .rowRight{float:left;padding: 0;margin: 0;width: 100%;}
  .iletisimContent .iletisimForm .rowRight .span{float:left;padding: 0;margin: 0 0 10px;width: 100%;}
  .iletisimContent .iletisimForm .rowRight .span .Center{display: none;}
  .iletisimContent .iletisimForm .rowRight .span .Left{display: block;font-size: 12px;color: #222222;font-weight: 600;line-height: 30px;width: auto!important;}
  .iletisimContent .iletisimForm .rowRight .span .Right{display: block;position: relative;width:auto!important;}
  .iletisimContent .iletisimForm .rowRight .span .Right .captchaImageBox{display: block;margin-bottom: 10px;}
  .iletisimContent .iletisimForm .rowRight .span .Right input{height: 40px;border-color: #e3e3e3;background: transparent;padding: 0 10px;border-style: solid; border-width: 1px;}
  .iletisimContent .iletisimForm .rowRight .span .Right textarea{border-color: #e3e3e3;background: transparent;padding:10px;}
  .iletisimContent .iletisimForm .rowRight .iletisimBtn{margin-top: 20px;}
  .iletisimContent .iletisimForm .rowRight .iletisimBtn input{padding: 0;display: block;height: 55px;font-size: 16px;color: #fff;font-weight: normal;text-transform:uppercase;float: left;width: 100%;}
  .iletisimContent .validate .validateOk, .iletisimContent .validateSol .validateSolOk, .iletisimContent .validateOrta .validateOrtaOk{left: 0;right: 0;bottom: 0;width: 100%;height: 2px;background-color: #ff0d0d;border-radius: var(--ng-radius);}
  .iletisimContent .validate, .iletisimContent .validateSol, .iletisimContent .validateOrta{left: 0;right: 0;bottom: 0;top: auto; display: block;border-radius: var(--ng-radius);}
  /*------------------------------------Uye Ol--------------------------------------------*/
  .uyeOlContainer .FormTitle { display: block; margin: 20px 0; font-size: 26px; text-align: center; }
  .uyeOlContainer #FrmYeniUye > .uyeOlCol { margin: 30px 20px 0 0; padding: 30px; background-color: #fff; border: 1px solid #eee; width:calc(50% - 10px); }
  .uyeOlContainer #FrmYeniUye > .uyeOlCol:nth-child(2) {margin-right: 0;}
  .uyeOlContainer .uyeOlRow{margin:0;}
  .uyeOlContainer .uyeOlCol .uyeOlCol{width:auto;padding:0;}
  .uyeOlContainer .uyeOlCol .uyeOlCol-3{padding-left: 0;}
  .uyeOlContainer .uyeOlCol label { font-size: 14px; margin-bottom: 10px; display: inline-block; }
  .uyeOlContainer .uyeOlCol input.textbox { font-size: 14px; display: block; letter-spacing: normal; background-color: #fff !important; height: auto !important; border-radius: var(--ng-radius); box-shadow: none; padding: 15px 0; border: 1px solid #eee !important; font-weight: 400; color: #555 !important; width: 100%; text-indent: 15px; transition-duration: 0.2s, 0.2s; -webkit-transition-duration: 0.2s, 0.2s; }
  .uyeOlContainer .uyeOlCol select.selectboxx { font-size: 14px; display: block; letter-spacing: normal; background-color: #fff !important; height: auto; border-radius: var(--ng-radius); box-shadow: none; padding: 15px 0; border: 1px solid #eee !important; font-weight: 400; color: #555 !important; width: 100%; text-indent: 15px; transition-duration: 0.2s, 0.2s; -webkit-transition-duration: 0.2s, 0.2s; }
  .uyeOlContainer .dateofbirth select.selectboxx { width: 31%; float: left; margin-right: 1%; }
  .uyeOlContainer .gender { float: left; width: 100%; }
  .uyeOlContainer .gender label { float: left; width: 70px; margin-top: 10px; display: block; }
  .uyeOlContainer .gender input { float: left; margin-top: 14px; margin-right: 3px; }
  .uyeOlContainer .intl-tel-input { margin-bottom: 15px; }
  .uyeOlContainer #mainHolder_rblCinsiyet { float: left; }
  .uyeOlContainer input.uyeol { height: auto; padding: 15px 0; line-height: normal; font-weight: 500; font-size: 16px; width: 100%; }
  .uyeOlContainer .intl-tel-input input[type=tel] { padding-left: 48px !important;line-height: 1;}
  .uyeOlContainer .uyeOlColItem.checkboxItem label span {display: inline-block;vertical-align: top;float: left;font-size: 13px;line-height: 14px;width: calc(100% - 26px);}
  .uyeOlContainer .uyeol {width:100%;text-align:center;padding:2px;margin:30px 0;height: 45px;font-size: 15px;line-height: 48px;}
  .uyeOlContainer .uyeOlColItem.checkboxItem label input{margin-left: -20px;}
  .uyeOlContainer .uyeOlColItem.checkboxItem label:before{margin-right: 10px;}
  .uyeOlContainer .uyeOlCol .uyeOlCol{margin-right: 20px;}
  .uyeOlContainer #chkSozlesme{margin: 0!important;}
  .uyeOlContainer #chkSozlesme + label{width: calc(100% - 20px); float: right; line-height: 15px; font-size: 13px;}
  .userContainer {float:left;width: 100%;margin: 30px 0;}
  .userContainer .userDivLeft,
  .userContainer .userDivRight{padding: 0;}
  .userContainer .userMail,
  .userContainer .userSms,
  .userContainer .userSozlesmeDiv{float: left;width: 100%;margin: 10px 0 0;}
  .userContainer .userMail label,
  .userContainer .userSms label,
  .userContainer .userSozlesmeDiv label{width: 93%;float: right;}
  .userContainer #chkSozlesme+label {width: 93%;float: right;}
  .userContainer .userLeftBox, .userContainer .userRightBox{width: 100%;float: left;margin: 0;padding:25px;}
  .userContainer .userLoginBtn, .userContainer .userSignBtn{float: left;width: 100%;}
  .userContainer .uyeGirisBeniHatirla{margin: 20px 0;}
  .userContainer .uyeGirisBeniHatirla input,.userContainer .uyeGirisBeniHatirla span{float: left;}
  .userContainer .uyeGirisBeniHatirla input{width:16px;height:16px;margin-right:10px;}
  .userContainer .userPassBtn{margin: 20px 0;}
  /* ------------------------------------Sifremi Unuttum--------------------------------------------*/
  .pageSifremiUnuttum.SifremiUnuttumContent .SifremiUnuttum p { line-height: 25px; }
  .pageSifremiUnuttum.SifremiUnuttumContent .SifremiUnuttum .userWrapper { float: left;margin-bottom: 20px;}
  /* ------------------------------------Uye Ol Basarili--------------------------------------------*/
  .userLogin{float: left;width: 100%;text-align:center;margin: 50px 0;}
  .userLogin .newuserForm .uyelikonay.basariliUyelik{display: inline-block;vertical-align:top;}
  .userLogin .newuserForm .uyelikonay.basariliUyelik .title{color: #000;}
  .userLogin .newuserForm .uyelikonay.basariliUyelik .title:before{content: '\f00c';font-family: 'FontAwesome';display: block;font-size: 40px;color:#097d2d;font-weight:bold;margin-bottom: 10px;}
  .userLogin .newuserForm .uyelikonay.basariliUyelik .title h4{font-size: 25px; }
  .userLogin .newuserForm .uyelikonay.basariliUyelik .title span{font-size: 15px; margin: 10px 0; display: inline-block; vertical-align: top; }
  .userLogin .newuserForm .uyelikonay.basariliUyelik a{padding: 15px; display: inline-block; vertical-align: top; font-size: 14px; }
  /* ------------------------------------Taksit Secenekleri--------------------------------------------*/
  #divTaksitContainer{float: left;width: 100%;margin-top: 10px;}
  .urunOzellik .taksitWrapper .taksitBlock .taksitBlockContent{max-width: 100%;}
  /*Header-Footer*/
  #header:before { content: '';display:table;}
  #header:after { content: ''; display: table;}
  .hoverr:before { content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 10; clear: none; display: block !important; }
  #header {width: 100%;position: relative;float: left;z-index:1000;background: #fff;}
  .headerContent:before { content: ''; display: block; clear: both; }
  .headerContent:after { content: ''; display: block; clear: both; }/*headerButton*/
  .headerButton{float: right;margin-top: 30px;}
  .favi{float:right;margin: 0 15px;}
  .favi a{float:left;text-align:center;color: #000;font-size: 12px;line-height: 30px;fill:#000;}
  .favi a .svgIcon{display: block;margin: 0 auto;line-height: 0;}
  .favi a span{display: block;}
  /*sepet*/
  .mycart{float: right;z-index:99;position: relative;}
  .mycart > a {display: block;color: #000;font-size: 12px;text-align:center;fill:#000;}
  .mycart .svgIcon {display: block;margin: 0 auto;line-height: 0;}
  /*sepettext*/
  .mycart .sepetTecxt {display:block;float: left;line-height: 30px;}
  .mycart .sepetUrunSayisi {display:block;position: absolute;right: 0;top: -5px;width: 16px;height: 16px;line-height: 16px;background: #000;border-radius:100%;color: #fff;font-size: 11px;}
  .mycart .sepetUrun { display:none;}
  .sepetTopTutar { display: none!important;}.mycart:after { display: none; position: absolute; left: 0; right: 0; bottom: -15px; height: 15px; content: ''; }
  @media(min-width: 768px){.mycart:hover .CartProduct {display: block!important; visibility: visible; opacity: 1; top: 100%; }.mycart:hover:after { display: block; }}.sepetimBody .mycart:hover:after  {display: none;}.uyeGirisWelcome,.uyeGirisUyeAdi{display: none;}
  .headerUyeGiris a, .headerUyeOl a, .headerHesabim, .headerCikis {float: left;color: #000;font-size: 12px;line-height: 30px;}  .headerUyeOl a, .headerCikis{}.usernav { display: none; }.search {float: left;width: 100%;position: relative;}
  .ButtonMic {display: none !important;position: absolute;right: 75px;top: 1px;padding: 0;border: none;border-radius: var(--ng-radius);background: transparent;color: #795f52;font-size: 14px;width: 20px;height: 40px;}
  #txtbxArama { float: left; width: 100%; height: 40px;font-size: 12px;font-weight: normal;border: none;color: #000;padding:0 55px 0 15px;background: #fff;border-radius: var(--ng-radius);letter-spacing: normal; transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
  #txtbxArama::-webkit-input-placeholder { color: #000; }
  #txtbxArama:-moz-placeholder { color: #000; }
  #txtbxArama::-moz-placeholder { color: #000; }
  #txtbxArama:-ms-input-placeholder { color: #000; }
  #txtbxArama:focus { color: #000; }
  #btnKelimeAra {background:transparent; width: 55px; line-height: 40px; font-size: 14px; color: #000; font-weight: normal; text-align: center; text-transform: uppercase; position: absolute; right: 0; top: 0; border: none; border-radius: var(--ng-radius); padding: 0; cursor: pointer; z-index: 9; -moz-appearance: none; -webkit-appearance: none;}/*dilsecenegi*/
  #lang_flag_container { top:0 !important; left:0!important;right: auto;bottom: auto; z-index: 9999 !important; position:relative !important;float:right;margin-left: 25px;}
  #lang_flag_container:after {position: absolute; width: 100%; right: 0; top:18px; height: 20px; content: '';display: none;}
  #lang_flag_container #lang-detail {display: none; left:auto !important;top: 100% !important;right: 0; border-top: none !important; box-shadow: 0 7px 10px -2px rgba(0, 0, 0, .3) !important;box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .3); -webkit-transform: translateY(30px); opacity: 0; visibility: hidden; transform: translateY(30px);}
  #lang_flag_container:hover #lang-detail {display: block!important; visibility: visible; opacity: 1; -webkit-transform: none; transform: none;}
  #lang_flag_container:hover:after {display: block;}
  #lang {float: left; color: #000 !important; font-size: 14px !important;font-weight: normal;padding: 0 0 0 25px!important;line-height: 13px!important;}
  #lang span { font-weight: normal;float: left; line-height: 13px!important;}
  #lang_flag_container:hover #lang { color: #000 !important; font-weight: normal;}
  #langHover { padding:8.5px 0!important;float: left;}
  #langHover.white { background: transparent !important; }
  a#ucSepetim_btnSepetiTemizle { margin-top: 28px; display: inline-block; }
  #lang-detail .language a{font-size:11px!important;text-align: left;}
  #lang-detail .currency a{font-size:11px!important;}
  #lang-detail p{font-size:12px!important;}
  /*Footer*/
  #footer { float: left; width: 100%; position: relative;background: #fff;}
  .FooterSC { float: left; width: 100%; position: relative;}
  .FooterTop { float: left; width: 100%; position: relative;}
  .FooterMiddle { float: left; width: 100%; position: relative;}
  .FooterBottom { float: left; width: 100%; position: relative;}#UpdatePanel1 {position: relative; float: right;width: 100%;}
  #txtbxNewsletterMail {height: 40px;font-size: 12px;color: #000;padding:0 40px 0 10px;background: #fff;border:none;border-radius: var(--ng-radius);display: inline-block;width: 100%; text-align:left;font-weight: normal; opacity: 1;}
  #txtbxNewsletterMail::-webkit-input-placeholder {color: #000;}
  #txtbxNewsletterMail:-moz-placeholder {color: #000;}
  #txtbxNewsletterMail::-moz-placeholder {color: #000;}
  #txtbxNewsletterMail:-ms-input-placeholder {color: #000;}
  #txtbxNewsletterMail:focus {color: #000;}/*footerlink*/
  #footer .linkler{ float: left; width: 100%; position: relative;padding: 55px 0;}
  #footer .linkler .blink { float: left;width:100%;margin:0}
  #footer .linkler .blink ul {margin: 0;padding: 0;list-style: none;}
  #footer .linkler .blink > ul { float: left;width: 100%; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: row;justify-content: space-between;-webkit-flex-direction: row;-ms-flex-direction: row;-moz-flex-direction: row;-o-flex-direction: row;-webkit-justify-content: space-between;-ms-justify-content: space-between;}
  #footer .linkler .blink > ul > li {float: left;}
  #footer .linkler .blink > ul > li:last-child {margin-bottom: 0;}
  #footer .linkler .blink > ul li {display: block;}
  #footer .linkler .blink > ul >li> span{display: table;clear:left; font-size:14px;color: var(--ng-navy-900);font-weight:600;letter-spacing: normal;text-transform:uppercase;margin-bottom: 10px;position: relative;}
  #footer .linkler .blink > ul >li> span .ackapabtn{display: none;}
  #footer .linkler .blink > ul >li >ul{display: inline-block;vertical-align:top;}
  #footer .linkler .blink > ul >li >ul >li >a{float: left;width: 100%;font-size:14px;color: var(--ng-navy-500);font-weight: normal;margin-bottom:10px;}
  #footer .linkler .blink > ul >li >ul >li:last-child >a{margin-bottom: 0;}
  #footer .linkler .blink > ul >li >ul >li >a:hover{text-decoration:underline;}
  @media screen and (min-width:769px) {
    #footer .linkler .blink > ul >li >ul{display: inline-block!important;}
  }/*store*/
  #footer .store{float: left;clear: left;}
  #footer .store ul {padding: 0;margin: 0;list-style: none;}
  #footer .store ul li{float: left;margin-right: 20px;}
  #footer .store ul li:last-child{margin-right: 0;}
  #footer .store ul li a{float: left;color: #c4c4c4;font-size: 17px;}
  #footer .store ul li a i{display: inline-block;vertical-align:top;line-height: 17px;}
  /*yukaribtn*/
  #back-to-top { float: right; position: fixed; right: 1%; bottom: 5%; z-index: 9999;display: none;}
  #back-to-top a {float: left;width: 40px;height: 40px;border-radius: 100%;background: var(--ng-navy-700);fill: #fff; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  #back-to-top a svg{height: 25px;}
  /*Footer*/
  /* ------------------------------------Vitrin urunleri--------------------------------------------*/
  .homeContainer .ProductListContent { float: left; width: 100%; margin:30px 0; position: relative;}
  .homeContainer .ProductListContent .ProductList {display:block;margin: 0 auto;}
  .homeContainer .ProductListContent .ItemOrj { padding: 0 10px; margin-bottom: 20px;width: 25%;max-width: 25%;}
  .homeContainer .ProductListContent .productItem { margin-bottom: 0; }
  /****************************************URUN KART*********************************/
  .categoryContainer .ProductList.PlSc_hrz .ItemOrj {width: 100%;max-width: 100%;-webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%;}
  .categoryContainer .ProductList.PlSc_2 .ItemOrj {width: 50%;max-width: 50%;-webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
  .categoryContainer .ProductList.PlSc_3 .ItemOrj {width: 33.33%;max-width: 33.33%;-webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%;}
  .categoryContainer .ProductList.PlSc_4 .ItemOrj {width: 25%;max-width: 25%;-webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%;}
  .categoryContainer .ProductList.PlSc_5 .ItemOrj {width: 20%;max-width: 20%;-webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%;}

  .ProductListContent { float: left; width: 100%; }
  .categoryContainer .ProductListContent { float: left; width: 100%;}
  .categoryContainer .ProductList { margin: 0 -10px }
  .categoryContainer .ProductListContent .productItem { margin-bottom: 20px;}
  .ItemOrj { float: left;padding: 0 10px;width: 25%;max-width: 25%;-webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%;}
  /*urun*/
  .productItem { width: 100%; position: relative; text-align: center;display: inline-block;float: left;}
  .productItem:hover {box-shadow: none;}
  .productItem .productIcon {width:100%;float: left;}
  /* Kart ekrana ilk girdiginde hafif yukardan-belirerek gelsin - filtre/
     siralama sonrasi liste yenilendiginde de (yeni DOM dugumleri olustugu
     icin) ayni gecis tekrar oynar. */
  .productItem { animation: ngKartGir .45s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes ngKartGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  /*urunresim*/
  .productItem .productImage { position: relative; overflow: hidden; width: 100%;padding:0;float: left;border-radius: var(--ng-radius-img);background: var(--ng-bg-soft);}
  /* Gorsel yuklenirken Ticimax'in dusuk cozunurluklu varsayilan gostergesi
     yerine ince altin renginde kayan bir cizgi - urun detay galerisiyle
     (.ngLoadBar) AYNI tasarim, tutarlilik icin. */
  .productItem .productImage .ngLoadBar { position: absolute; top: 0; left: 0; width: 100%; height: 2px; overflow: hidden; z-index: 2; background: rgba(6,32,94,.06); }
  .productItem .productImage .ngLoadBar:after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--ng-gold-500), transparent); animation: ngGaleriYukleniyor 1.1s ease-in-out infinite; }
  .productItem .productImage.ng-loaded .ngLoadBar { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  .productItem .productImage a, body .productItem .productImage a.Videolu{ display: block; position: relative;padding-bottom: 100%;height: 0;}
  /* Ticimax'in "body .productItem .productImage img { height:auto; width:auto }"
    kurali bizimkini eziyordu (body oneki daha guclu) - ayni onekle yaziliyor. */
  body .productItem .productImage img,
  body .productItem .productImage video,
  body .productItem .productImage .Videolu video {
    position: absolute; top:0; left:0; right:0; bottom:0;
    width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    object-fit: cover; margin: auto; border-radius: var(--ng-radius-img);
    transition: transform 1s ease, opacity .25s ease;
  }
  /* Ticimax'in kendi Owl-carousel gorsel karusel eklentisi, kart uzerinde
     gezinirken slaytlar arasinda gecis yaparken aktif olmayan slaytlarda
     kendi dusuk cozunurluklu gostergesini (load.gif) gosteriyor - canli
     testte 29 kez tespit edildi, "loading spinner" sikayetinin gercek
     kaynagi buydu (ilk yukleme shimmer'imizla ilgisi yok). Gercek gorsel
     Owl tarafindan src'ye yazilana kadar gizli tutup, zaten var olan
     opacity gecisiyle sarsintisiz beliriyor. */
  body .productItem .productImage img[src*="load.gif"] { opacity: 0 !important; }
  /* Gorsel uzerine gelince beliren istenmeyen cerceve/outline icin,
     olasi tum kaynaklara karsi onleyici sifirlama. */
  .productItem .productImage,
  .productItem .productImage a,
  .productItem .productImage .owl-item,
  .productItem .productImage img,
  .productItem .productImage video { outline: none !important; border: none !important; }
  .productItem .productImage *:focus { outline: none !important; }
  /*urunaciklama*/
  .productItem .productDetail { display: block; float: left; width: 100%; text-align: center;padding:12px 8px 0;position: relative;}
  /*urunad*/
  .productItem .productName { position: relative;margin:0 0 6px 0;float:left;width: 100%;}
  /* Urun adi 16px: fiyatin (20px) yaninda daha kucuk boyutlar dengesiz kaliyordu.
     2026-09-08: "text-transform: uppercase" KALDIRILDI (kullanici talebi) -
     urun adi artik panele girildigi haliyle gorunuyor. Urun DETAY
     basliginda da ayni degisiklik daha once yapilmisti; liste kartlarinda
     kalmisti, boylece iki yer arasindaki tutarsizlik da giderilmis oldu. */
  .productItem .productName a { float: none; width: 100%; padding: 0; line-height:23px;height:46px; font-weight: 400; font-size: 16px; color: var(--ng-navy-700);overflow: hidden;text-align:center;white-space: normal;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;text-transform: none;letter-spacing: normal;}
  /*urunfiyat*/
  /* Fiyat blogu sabit yukseklik: uzun fiyatlarda iki fiyat yan yana
    sigmayip alt satira dusunce kartlar kayiyordu - fiyatlar artik her
    zaman alt alta, sabit yukseklikte (tema kurallarini ezmek icin body
    oneki ve !important gerekli). */
  /* MASAUSTU: fiyatlar alt alta, icerige gore esnek yukseklik.
    Onceden 26px sabitti ama icerik 52px'ti -> tasiyor ve ad ile
    fiyat arasi dengesiz gorunuyordu. */
  body .productItem .productPrice {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    height: auto !important;
    min-height: 46px !important;
    float: none !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
    position: relative;
  }
  body .productItem .discountPrice,
  body .productItem .regularPrice {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    /* Uzun fiyatlar karttan tasmasin (mobilde yatay kaydirma yapiyordu) */
    max-width: 100% !important;
    width: auto !important;
    white-space: nowrap;
  }
  body .productItem .productPrice { width: 100% !important; max-width: 100% !important; overflow: hidden; }
  body .productItem .productDetail { overflow: hidden; }
  body .productItem .discountPriceSpan,
  body .productItem .regularPriceSpan {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body .productItem .discountPriceSpan { font-size: 17px; font-weight: 500; line-height: 1.15; }
  body .productItem .regularPriceSpan  { font-size: 13px; font-weight: 400; line-height: 1.15; }
  .productItem .discountPrice {display: inline-block;float: none;vertical-align:middle;margin:0 4px;}
  .productItem .discountPrice span {color: var(--ng-navy-700);font-size: 20px; line-height:1.2;font-weight:500;}
  .productItem .discountKdv, .productItem .regularKdv  {display:none;}
  .productItem .regularPrice { display:inline-block !important;float: none;vertical-align:middle;margin:0 4px;}
  .productItem .regularPrice span {font-size: 15px;color: var(--ng-navy-500);-moz-text-decoration-color: var(--ng-navy-500); text-decoration-color: var(--ng-navy-500); line-height: 1.2; font-weight:400; text-decoration: line-through;}
  /*urunpuan*/
  .productItem .productPoints{float: left;width: 100%;clear: none;margin-bottom: 5px;}
  .productItem .productPoints .rating{margin: 0;}
  .productItem .productPoints .rating i{color: #cacaca;font-size: 17px;margin-right: 1px;}
  .productItem .productPoints .rating i:last-child{margin-right: 0;}
  .productItem .productPoints [data-rating^='1'] .star-1{color: #ff8a00;}
  .productItem .productPoints [data-rating^='2'] .star-1{color: #ff8a00;}
  .productItem .productPoints [data-rating^='2'] .star-2{color: #ff8a00;}
  .productItem .productPoints [data-rating^='3'] .star-1{color: #ff8a00;}
  .productItem .productPoints [data-rating^='3'] .star-2{color: #ff8a00;}
  .productItem .productPoints [data-rating^='3'] .star-3{color: #ff8a00;}
  .productItem .productPoints [data-rating^='4'] .star-1{color: #ff8a00;}
  .productItem .productPoints [data-rating^='4'] .star-2{color: #ff8a00;}
  .productItem .productPoints [data-rating^='4'] .star-3{color: #ff8a00;}
  .productItem .productPoints [data-rating^='4'] .star-4{color: #ff8a00;}
  .productItem .productPoints [data-rating^='5'] i{color: #ff8a00;}
  /*Urun Iconlari*/
  .favori,.examineIcon,.discountIcon div, .discountIcon .discountIcon_s2{ z-index: 3; display: none;}
  .discountIcon span,.mycartIcon a span{font-weight: normal;}
  .favori a, .examineIcon a {display: block;}
  /* Sepete Ekle butonu */
  .productItem .productIcon{display:block !important;width:100%;float:none;margin:0;}
  .productItem .productIcon .mycartIcon{display:block !important;width:100%;z-index:3;}
  .productItem .productIcon .mycartIcon a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:var(--ng-btn-h);background:#fff;border:1px solid var(--ng-line);border-radius: var(--ng-radius);color:var(--ng-navy-700);font-size:16px;font-weight:400;text-align:center;cursor:pointer;transition:all .2s ease;}
  .productItem .productIcon .mycartIcon a:hover{background:var(--ng-navy-700);border-color:var(--ng-navy-700);color:#fff;}
  .productItem .productIcon .examineIcon{display:none !important;}
  /*tukendi*/
  /* ============================================================
    SON DUZELTMELER (FAZ 11)
    ============================================================ */

  /* --- 11.1 ROZETLER: footer disinda, kendi beyaz alaninda --- */
  body .widgetContainer {
    background: #fff !important;
    padding: 56px 0 !important;
    margin: 0 !important;
    float: left;
    width: 100%;
    clear: both;
  }
  /* Son bolum ile rozetler arasinda nefes payi */
  /* Ust cizgi kaldirildi - rozetlerle ustundeki bolum arasinda
    ayirici cizgi istenmiyor. */

  /* Rozetler footer'dan disari tasinince geriye BOS bir kabuk kaliyor:
    .elementor-section (margin-top:100px + padding:20px + height:40px = 140px bosluk).
    Icerigi olmayan bu bolumu gizliyoruz. */
  body .footerTemp > .elementor-section:empty,
  body .footerTemp > .elementor-section:not(:has(.elementor-column)),
  body .footerTemp > .elementor-section.ngBosBolum {
    display: none !important;
  }

  /* Footer ust boslugu - rozet kabugu gizlendigi icin daha olculu */
  body #footer,
  body .footerTemp { padding-top: 40px !important; }

  /* --- 11.2 FOOTER BASLIKLARI: lacivert zeminde okunakli --- */
  body .footerTemp .eTempTitle1,
  body .footerTemp .eTempTitle,
  body .footerTemp .footerMenuTitle,
  body .footerTemp span.footerMenuTitle,
  body #footer .footerMenuTitle,
  body .footerTemp h3,
  body .footerTemp h4,
  body .footerTemp .elementor-heading-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    letter-spacing: normal;
  }
  /* Bulten aciklama metni */
  body .footerTemp .eTempDesc,
  body .footerTemp .eTempTitle2 {
    color: rgba(255,255,255,.72) !important;
  }
  /* Footer menu linkleri */
  body .footerTemp .footerText li a,
  body .footerTemp ul li a {
    color: rgba(255,255,255,.76) !important;
    transition: color .3s ease;
  }
  body .footerTemp .footerText li a:hover,
  body .footerTemp ul li a:hover {
    color: var(--ng-gold-300) !important;
  }
  /* Telif satiri */
  body .footerTemp .footerBottomArea,
  body .footerTemp .footerBottomArea * {
    color: rgba(255,255,255,.55) !important;
  }
  /* Bulten kutusu */
  body .footerTemp #txtbxNewsletterMail,
  body #txtbxNewsletterMail {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    color: #fff !important;
  }
  body .footerTemp .newsbutton,
  body .ebultenDiv .newsbutton {
    background: var(--ng-gold-500) !important;
    color: var(--ng-navy-900) !important;
    font-weight: 600 !important;
    letter-spacing: normal;
  }

  /* --- 11.3 URUN DETAY KUTULARI: tek tip, sade hover --- */
  body .ProductIcon > div,
  body .ProductIcon2 > div,
  body .UAddToCollection,
  body .UIstekListemeEkle,
  body .UKarsilastirma,
  body .FiyatHaberVer,
  body .UrunKargoBedava,
  body .TavsiyeEtBtnContent,
  body .YorumYazbtnContent,
  body .SoruSorbtnContent,
  body .UGelinceHaberVer,
  body .UTelefonlaSiparis {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    background: var(--ng-bg-soft) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ng-radius) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .3s ease, border-color .3s ease !important;
  }
  body .ProductIcon > div:hover,
  body .ProductIcon2 > div:hover,
  body .UAddToCollection:hover,
  body .UIstekListemeEkle:hover,
  body .UKarsilastirma:hover,
  body .FiyatHaberVer:hover,
  body .UrunKargoBedava:hover,
  body .TavsiyeEtBtnContent:hover,
  body .YorumYazbtnContent:hover,
  body .SoruSorbtnContent:hover {
    background-color: #F1F3F7 !important;   /* sadece hafif koyulasma */
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Ikon ve metin: hover'da sadece renk */
  body .ProductIcon > div:hover .boxIcon,
  body .ProductIcon2 > div:hover .boxIcon,
  body .UAddToCollection:hover .boxIcon,
  body .UAddToCollection:hover .box1 i,
  body .SoruSorbtnContent:hover .boxIcon {
    transform: none !important;
    fill: var(--ng-navy-700) !important;
    color: var(--ng-navy-700) !important;
  }
  body .ProductIcon > div:hover > a,
  body .ProductIcon2 > div:hover > a,
  body .UAddToCollection:hover > a,
  body .SoruSorbtnContent:hover > a {
    color: var(--ng-navy-700) !important;
  }
  /* --- TAVSIYE ET / YORUM YAZ / SORULAR: ic <a> cercevesi sorunu ---
    Bu uc kutuda ic <a> elemaninin KENDI 1px lacivert cercevesi var
    (digerlerinde yok). Dis kutuda overflow:hidden oldugu icin o
    cercevenin alt kenari kirpiliyor -> "ice cokmus" gorunum.
    Cozum: ic cerceveyi kaldir, cerceveyi dis kutu tasisin. --- */
  body .TavsiyeEtBtnContent > a,
  body .YorumYazbtnContent > a,
  body .SoruSorbtnContent > a,
  body .TavsiyeEtBtnContent > a:hover,
  body .YorumYazbtnContent > a:hover,
  body .SoruSorbtnContent > a:hover {
    border: none !important;
    border-radius: var(--ng-radius) !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Dis kutular digerleriyle birebir ayni davransin */
  body .TavsiyeEtBtnContent,
  body .YorumYazbtnContent,
  body .SoruSorbtnContent {
    overflow: visible !important;
    border: 1px solid transparent !important;
    border-radius: var(--ng-radius) !important;
    background: var(--ng-bg-soft) !important;
  }
  body .TavsiyeEtBtnContent:hover,
  body .YorumYazbtnContent:hover,
  body .SoruSorbtnContent:hover {
    background-color: #F1F3F7 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Sorular kutusu ic yapisi digerleriyle ayni olsun */
  body .SoruSorbtnContent > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100% !important;
    height: 56px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    color: var(--ng-navy-500) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    letter-spacing: normal;
    text-align: center;
  }

  @media (max-width: 767px) {
    body .widgetContainer { padding: 36px 0 !important; }
    body #footer, body .footerTemp { padding-top: 36px !important; }
  }

  /* ============================================================
    MENU DUZENI (FAZ 10)
    ============================================================ */

  /* --- 10.1 MASAUSTU: acilir menu tam genislik --- */
  /* Sorun: .newHeaderNavigation position:relative + 580px idi,
    menu absolute olarak onun icine hapsoluyordu. */
  @media (min-width: 1042px) {
    body #headerNew .newHeaderNavigation:not(.mobileStyle) {
      position: static !important;   /* menu artik body'e gore konumlanir */
    }
    body #headerNew .header-bottom,
    body #headerNew .header-bottom-nav-wrapper,
    body #headerNew .nav.header-nav.header-bottom-nav,
    /* Asil sinirlayan buydu: .newHeaderNav position:relative idi,
      menu absolute olarak onun 580px'lik kutusuna hapsoluyordu */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .newHeaderNav {
      position: static !important;
    }
    /* Acilir panel: ekran genisliginde */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar > .menu-wrap {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: none !important;
      padding: 26px 0 30px !important;
      /* Cok kategorili menuler ekrandan tasarsa kendi icinde kaydirilir */
      max-height: calc(100vh - 160px);
      overflow-y: auto;
    }
    /* Icerik ortalanmis ve sinirli genislikte - dengeli grid */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-row {
      max-width: 1320px !important;
      width: 100% !important;
      margin: 0 auto !important;
      padding: 0 40px !important;
      display: flex !important;
      gap: 40px;
      align-items: flex-start;
      /* Kapak gorseli olmayan menulerde .menu-list-kolon artik asagidaki
        max-width sinirindan dolayi tum genisligi doldurmuyor - kalan bosluk
        saga yaslanmasin diye kart blogu satirin ortasina aliniyor. */
      justify-content: center;
    }
    /* Kart izgarasi: sabit kart genisligi + saran flex (grid DEGIL).
      Grid'de sutunlar TUM satirlar icin ortak "ray" oldugundan, eksik
      kalan son satirdaki kartlar (orn. 9 kartlik ust satirin altinda 3
      kart kalmasi) mecburen ilk N sutuna, yani SOLA yaslanir - ortalanamaz
      (canli testte "amator" gorunum olarak tarif edildi). Flexbox'ta
      "flex-wrap" her satiri BAGIMSIZ bir birim olarak ele aldigi icin
      "justify-content:center" sadece o eksik satirdaki kartlari kendi
      icinde ortalayabiliyor - Grid'in yapisal olarak yapamadigi bu.
      (Not: bu kuralin altta, #headerNew on-eki olmadan ayni class icin
      tanimlanmis bir flex kopyasi var (~satir 3960) - o kural burasi
      #headerNew ile daha yuksek ozgullukte oldugu icin hep ezilip devre
      disi kaliyordu; asil calisan tanim artik budur.) */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-kolon {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 20px 16px !important;
      flex: 1 1 auto !important;
      width: auto !important;
      /* Satir basina en fazla 7 kart: 7*150px kart + 6*16px ara bosluk.
        Kapak gorseli bu menulerde hic kullanilmadigi icin panelin tum
        genisligi (1240px) karta ayrilabiliyor - 7 kart (1146px) rahatca
        sigar, kenarda da bir miktar nefes payi kalir. 8+ ise mevcut kart
        genisligiyle (150px) zaten sigmiyor - kart kucultmeden bir ust
        sinir koymanin amaci, ekran/panel ne kadar genis olursa olsun tek
        satirin asiri uzayip "kaydirilan bir serit" gibi gorunmesini (goz
        taramasi zorlasir) onlemek; fazla kategori bir sonraki satira,
        ortalanarak (yukaridaki justify-content:center sayesinde) gecer. */
      max-width: 1146px !important;
      padding: 0 !important;
    }
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li {
      /* Grid'deki "sutunun %100'u" mantigi yerine sabit kart genisligi -
        flex'te esnek sutun kavrami olmadigi icin genislik kartin kendisi
        uzerinden verilmeli. */
      width: 150px !important;
      /* Bu <li> display:flex; flex-direction:column oldugu icin yatay
        ortalama justify-content degil align-items ile yapiliyor - tek
        cocuk <a> icerigine gore daraldiginda solda kalmasin diye. */
      align-items: center !important;
    }
    /* Kategori gorselleri sutuna gore olculendigi icin ~193px'e kadar
      cikiyordu - sabit bir ust sinir koyup ortalaniyor. */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .ngVitrinGorsel {
      width: 100% !important;
      max-width: 108px !important;
      height: auto !important;
      aspect-ratio: 1 / 1;
      margin: 0 auto 8px !important;
    }
    /* Kategori adlari okunurluk icin buyutuldu */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a {
      font-size: 13px !important;
      line-height: 1.4 !important;
    }
    /* Sag kapak gorseli - kartlarin YANINDA, altina dusmesin */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image {
      flex: 0 0 220px !important;
      width: 220px !important;
      max-width: 220px !important;
      align-self: flex-start;
      order: 2;
    }
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-kolon {
      order: 1;
    }
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image-row,
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image-list {
      width: 100% !important;
      display: block !important;
    }
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image img {
      width: 100% !important;
      height: auto !important;
      display: block;
      border-radius: var(--ng-radius-img);
    }
    /* Kapak gorseli yoksa kart izgarasi tum genisligi kullansin */
    body #headerNew .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image:empty {
      display: none !important;
    }
    /* Eskiden burada kategori sayisina gore sutun sayisini manuel azaltan
      bir grid-template-columns kurali vardi. flex-wrap kendi genisligine
      gore bir satira kac kart sigacagini otomatik hesapladigi icin (ve
      justify-content:center eksik son satiri da ortaladigi icin) sayima
      gore ayri bir kurala artik gerek yok. */
  }

  /* --- 10.1b KALABALIK KATEGORILER: kaydirma kalsin, cubuk gorunmesin ---
    Cok kategorili menuler (ornek: 17 kategorili Kolye) ekran yuksekligini
    asinca panel "overflow-y:auto" ile kaydirmali oluyor - bu dogru, ama
    varsayilan tarayici scrollbar'i (kalin gri cubuk) panelin sade
    gorunumunu bozuyor. Kaydirma islevi AYNEN kaliyor (mouse tekerlegi,
    trackpad, dokunmatik hepsi calisir) - sadece gorsel cubuk gizleniyor. */
  body #headerNew .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar > .menu-wrap,
  body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNav,
  body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap,
  body #headerNew .newHeaderNavigation.mobileStyle .dropDown-wrap {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* eski Edge/IE */
  }
  body #headerNew .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar > .menu-wrap::-webkit-scrollbar,
  body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNav::-webkit-scrollbar,
  body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap::-webkit-scrollbar,
  body #headerNew .newHeaderNavigation.mobileStyle .dropDown-wrap::-webkit-scrollbar {
    display: none;                /* Chrome/Safari/Edge (Chromium) */
    width: 0;
    height: 0;
  }

  /* --- 10.2 MOBIL: soldan kayan tam ekran menu --- */
  @media (max-width: 1041px) {
    body #headerNew .newHeaderNavigation.mobileStyle {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 2147483000 !important;
      background: #fff !important;   /* panel tam ekran - karartmaya gerek yok */
      display: block !important;
      visibility: hidden;
      opacity: 0;
      transition: opacity .35s ease, visibility 0s linear .35s;
    }
    body #headerNew .newHeaderNavigation.mobileStyle.mobileactive {
      visibility: visible;
      opacity: 1;
      transition: opacity .35s ease, visibility 0s;
    }
    /* Panel: soldan kayarak girer */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNav {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      /* Tam ekran - arkadaki sayfa gorunmesin */
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      background: #fff !important;
      box-shadow: none;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      transform: translateX(-100%);
      transition: transform .38s cubic-bezier(.22,.61,.36,1);
    }
    body #headerNew .newHeaderNavigation.mobileStyle.mobileactive .newHeaderNav {
      transform: translateX(0);
    }
    /* Ust bolum (kapat butonu) */
    body #headerNew .newHeaderNavigation.mobileStyle .newMenuTop {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      width: 100% !important;
      height: 58px !important;
      padding: 0 16px !important;
      background: var(--ng-bg-soft) !important;
      border-bottom: 1px solid var(--ng-line);
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menuCloseBtn {
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      color: var(--ng-navy-700);
      font-size: 20px;
      cursor: pointer;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menuBackBtn {
      display: flex; align-items: center; gap: 8px;
      color: var(--ng-navy-700);
      font-size: 13px;
      letter-spacing: normal;
    }
    /* Menu listesi */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl {
      width: 100% !important;
      padding: 8px 0 40px !important;
      margin: 0 !important;
      list-style: none;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li {
      width: 100% !important;
      border-bottom: 1px solid #F0F2F5 !important;
      background: #fff !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li > a {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      width: 100% !important;
      padding: 0 20px !important;
      line-height: 54px !important;
      color: var(--ng-navy-700) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      letter-spacing: normal;
      text-transform: uppercase;
    }
    /* Vitrin kartlari mobil menude gosterilmez - duz liste daha kullanisli */
    body #headerNew .newHeaderNavigation.mobileStyle .ngVitrinGorsel { display: none !important; }
    body #headerNew .newHeaderNavigation.mobileStyle .ngVitrinAd {
      padding-bottom: 0 !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .ngVitrinAd:after { display: none !important; }
    /* Alt menu panelleri: ana panelin TAM UZERINE gelir.
      Not: 'width:86%' ana panelin ICINDEN hesaplandigi icin alt menu
      daha dar cikiyordu (277px vs 323px). Ana panel zaten dogru
      genislikte oldugu icin alt menuye %100 veriyoruz. */
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap,
    body #headerNew .newHeaderNavigation.mobileStyle .dropDown-wrap {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: auto !important;
      width: 100% !important;
      max-width: none !important;
      min-height: 100vh !important;
      height: auto !important;
      background: #fff !important;
      overflow-y: auto !important;
      padding: 58px 0 40px !important;   /* ust: geri/kapat cubugu yuksekligi */
      z-index: 6 !important;
      /* transform yerine 'left' kullaniyoruz: bazi Ticimax kurallari
        transform'u eziyor, left daha guvenilir calisiyor. */
      left: -100% !important;
      transform: none !important;
      transition: left .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s;
      visibility: hidden;
    }
    /* Sadece ACIK olan alt menu gorunur */
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap.active,
    body #headerNew .newHeaderNavigation.mobileStyle .dropDown-wrap.active,
    body #headerNew .newHeaderNavigation.mobileStyle li.active > .menu-wrap,
    body #headerNew .newHeaderNavigation.mobileStyle li.open > .menu-wrap {
      left: 0 !important;
      transform: none !important;
      visibility: visible !important;
      transition: left .34s cubic-bezier(.22,.61,.36,1), visibility 0s;
    }
    /* Alt menu acikken ana listenin oklari arkadan gorunmesin */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNav:has(.menu-wrap.active) > .newHeaderNavUl,
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl:has(.menu-wrap.active) > li > a,
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl:has(.menu-wrap.active) > li > .nextKolonBtn {
      visibility: hidden;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl:has(.menu-wrap.active) > li > .menu-wrap.active,
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl:has(.menu-wrap.active) > li > .menu-wrap.active * {
      visibility: visible;
    }
    /* JS ile eklenen sinif - :has() destegi olmayan tarayicilar icin */
    body #headerNew .newHeaderNavigation.mobileStyle.ngAltMenuAcik .newHeaderNavUl > li > a,
    body #headerNew .newHeaderNavigation.mobileStyle.ngAltMenuAcik .newHeaderNavUl > li > .nextKolonBtn {
      visibility: hidden !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle.ngAltMenuAcik .menu-wrap.active,
    body #headerNew .newHeaderNavigation.mobileStyle.ngAltMenuAcik .menu-wrap.active * {
      visibility: visible !important;
    }

    /* Ana panel: yatay tasma olmasin, sagda gri serit gorunmesin */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNav {
      overflow-x: hidden !important;
      border: none !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
    }
    /* Oklar panel disina tasmasin */
    body #headerNew .newHeaderNavigation.mobileStyle .nextKolonBtn {
      right: 12px !important;
      z-index: 2 !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .menu-list-kolon,
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .kolon {
      display: block !important;
      grid-template-columns: none !important;
      width: 100% !important;
      padding: 0 !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .kolon > li {
      width: 100% !important;
      border-bottom: 1px solid #F0F2F5;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .kolon > li > a {
      display: flex !important;
      align-items: center;
      width: 100% !important;
      padding: 0 20px !important;
      line-height: 50px !important;
      text-align: left !important;
      font-size: 13px !important;
      letter-spacing: normal;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .menu-list-image {
      display: none !important;
    }
    /* Menu acikken arka plan kaymasin */
    body.menuAcik { overflow: hidden; }
  }

  /* ============================================================
    DUZELTMELER (FAZ 9)
    ============================================================ */

  /* --- 9.2 ARAMA CUBUGU --- */
  /* Sadece GERCEKTEN GORUNEN arama kutusu genisligi sabitleniyor. Disaridaki
     "#divTopProductSearch/.header-search-form/.header-search-form-wrapper"
     kapsayicilari BILEREK disarida birakildi: masaustunde (bkz. FAZ 11) bu
     kapsayicilar ikon-boyutunda kalmali, genislik zorlarsak ikon yaninda
     bos/tiklanabilir buyuk bir alan olusuyordu (canli testte yakalandi). */
  body #divTopProductSearch .searchform-wrapper,
  body #divTopProductSearch .searchform,
  body #divTopProductSearch #divArama {
    width: 340px !important;
    max-width: 100% !important;
  }
  /* Arama, header'in sol padding'i ile hizali baslasin */
  body #headerNew .header-nav-main.nav-left,
  body #headerNew .flex-left .header-nav {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  /* Arama ikonu lacivert (beyaz kaliyordu) */
  body #btnKelimeAra,
  body #btnKelimeAra i,
  body #btnKelimeAra * { color: var(--ng-navy-700) !important; }
  body #btnKelimeAra:hover,
  body #btnKelimeAra:hover i { color: var(--ng-gold-600) !important; }
  body #divTopProductSearch .searchform-wrapper {
    height: 46px !important;
    background: var(--ng-bg-soft) !important;
    border: 1px solid var(--ng-line) !important;
    border-radius: var(--ng-radius) !important;
    /* "overflow:hidden" input/butonun kose disina tasmasini onlemek icin
       eklenmisti (ikisi de zaten transparan zeminli, gorsel olarak fark
       etmiyor) - ama Ticimax'in "Arama Sistemi" (urun onizlemeli acilir
       liste) ozelligi devreye alinca, sonuc paneli (".ticimax-search-content",
       position:absolute) TAM OLARAK bu kutunun icinde konumlaniyor ve
       overflow:hidden onu 46px'lik kutunun disina tasamadigi icin komple
       kirpip goz ile gorunmez hale getiriyordu (Ticimax destek ekibi
       "temanizdaki CSS arama alaninin acilmasini engelliyor" diye dogru
       teshis etmisti). visible yapilinca hem eski gorunum hem yeni arama
       sistemi calisiyor. */
    overflow: visible;
    transition: border-color .3s ease, background .3s ease;
  }
  body #divTopProductSearch .searchform-wrapper:focus-within {
    background: #fff !important;
    border-color: var(--ng-navy-700) !important;
  }
  body #txtbxArama {
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 8px 0 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--ng-radius) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: normal;
    color: var(--ng-navy-700) !important;
    box-shadow: none !important;
  }
  body #txtbxArama::-webkit-input-placeholder { color: var(--ng-navy-500); }
  body #txtbxArama::-moz-placeholder { color: var(--ng-navy-500); }
  body #btnKelimeAra,
  body #divTopProductSearch .ux-search-submit {
    width: 46px !important;
    height: 46px !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--ng-radius) !important;
    color: var(--ng-navy-700) !important;
    box-shadow: none !important;
    transition: color .3s ease;
  }
  body #btnKelimeAra:hover { background: transparent !important; }
  body #btnKelimeAra i { font-size: 15px !important; }

  /* --- 9.3 KATEGORI BARI: hesabim menusu ustte kalsin --- */
  body #headerNew .newHeaderNavigation,
  body #headerNew .header-bottom,
  body #headerNew .newHeaderNav {
    position: relative;
    z-index: 1 !important;
  }
  body #headerNew .header-main,
  body #headerNew #masthead {
    position: relative;
    z-index: 100 !important;
  }
  body #divHeaderUyeV2,
  body #divHeaderUyeV2 .nav-dropdown,
  body #headerNew .account-item,
  body #headerNew .nav-dropdown {
    z-index: 100000 !important;
  }

  /* Hesabim/Sepetim acilir panelleri - lacivert/altin CTA hiyerarsisi
     (Siparis Tamamla/Kesfet=altin, Giris Yap=lacivert, Sepete Git=outline). */

  /* --- Uye Girisi hover-dropdown --- */
  body #divHeaderUyeV2 .nav-dropdown {
    background: #fff;
    border: 1px solid rgba(193,156,96,.35);
    border-radius: var(--ng-radius);
    box-shadow: 0 14px 34px -14px rgba(6,32,94,.28);
  }
  body .MyAccount-navigation-link a {
    color: var(--ng-navy-900) !important;
    font-size: 13px;
    letter-spacing: normal;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
  }
  body .MyAccount-navigation-link a:hover {
    background: rgba(193,156,96,.08);
    color: var(--ng-gold-600) !important;
  }

  /* --- Sepetim sag panel + Hediye Ceki alt-paneli (ayni header/satir siniflarini paylasiyorlar) --- */
  body .miniCartRigth,
  body .miniCartGiftCodeContent {
    font-family: 'Manrope', sans-serif;
  }
  body .miniCartRigthHeader {
    border-bottom: 1px solid rgba(193,156,96,.35);
  }
  body .miniCartRigthHeader .spnCartTxt {
    color: var(--ng-navy-900);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
  }
  body .header-close-btn svg path { fill: var(--ng-navy-700); }
  body .header-close-btn:hover svg path { fill: var(--ng-gold-600); }

  /* Bos sepet durumu */
  body .miniCartBos i.fa-shopping-cart,
  body .miniCartBos .fa-shopping-cart:before { color: var(--ng-gold-500); }
  body .miniCartBosDescriptionTitle {
    color: var(--ng-navy-900);
    font-weight: 600;
    letter-spacing: normal;
  }
  body .miniCartBosDescription { color: #6B7280; }
  body .minicartbos-explore-button {
    border-radius: var(--ng-radius) !important;
    transition: background .25s ease, color .25s ease;
  }
  body .minicart-discover-btn {
    background: var(--ng-gold-500) !important;
    color: #fff !important;
    border-color: var(--ng-gold-500) !important;
  }
  body .minicart-discover-btn:hover { background: var(--ng-gold-600) !important; border-color: var(--ng-gold-600) !important; }
  body .minicart-login-btn {
    background: var(--ng-navy-900) !important;
    color: #fff !important;
    border-color: var(--ng-navy-900) !important;
  }
  body .minicart-login-btn:hover { background: var(--ng-navy-700) !important; border-color: var(--ng-navy-700) !important; }

  /* Genel Toplam satiri (urun listesinin hem ustunde hem altinda ayni sekilde cikiyor) */
  body .miniCartSatir1.totalAmount {
    background: var(--ng-bg-soft);
    border-top: 1px solid var(--ng-line);
    border-bottom: 1px solid var(--ng-line);
  }
  body .miniCartSatir1.totalAmount .miniCartCol1 {
    color: var(--ng-navy-700);
    font-size: 13px;
    letter-spacing: normal;
    text-transform: uppercase;
  }
  body .miniCartSatir1.totalAmount .miniCartCol2 {
    color: var(--ng-navy-900);
    font-weight: 700;
  }

  /* Hizli aksiyon butonlari: Giris Yap / Siparis Tamamla / Sepete Git / (Hediye Cekinde) Ekle */
  body .miniCartSatir2 .checkoutAsGuestButton,
  body .miniCartSatir2 .signInButton {
    border-radius: var(--ng-radius) !important;
    letter-spacing: normal;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  /* Siparis Tamamla / Hediye Cekinde "Ekle" - en onceliki aksiyon */
  body .miniCartSatir2 .fastOrderUrlButton,
  body .miniCartGiftCode .checkoutAsGuestButton:not(.HediyeCekiIptal) {
    background: var(--ng-gold-500) !important;
    color: #fff !important;
    border-color: var(--ng-gold-500) !important;
  }
  body .miniCartSatir2 .fastOrderUrlButton:hover,
  body .miniCartGiftCode .checkoutAsGuestButton:not(.HediyeCekiIptal):hover {
    background: var(--ng-gold-600) !important;
    border-color: var(--ng-gold-600) !important;
  }
  /* Giris Yap - ikincil ama guclu aksiyon */
  body .miniCartSatir2 .signInButton {
    background: var(--ng-navy-900) !important;
    color: #fff !important;
    border-color: var(--ng-navy-900) !important;
  }
  body .miniCartSatir2 .signInButton:hover {
    background: var(--ng-navy-700) !important;
    border-color: var(--ng-navy-700) !important;
  }
  /* Sepete Git / Onceki Odemeyi Iptal Et - en dusuk oncelikli, outline */
  body .miniCartSatir2 .basketUrlButton,
  body .miniCartSatir2 .HediyeCekiIptal {
    background: #fff !important;
    color: var(--ng-navy-900) !important;
    border: 1px solid var(--ng-navy-900) !important;
  }
  body .miniCartSatir2 .basketUrlButton:hover,
  body .miniCartSatir2 .HediyeCekiIptal:hover {
    background: var(--ng-bg-soft) !important;
  }

  /* Hediye Ceki akordeon satiri + acilan panelin metin kutusu */
  body .hediyeCekiBtnContent { border-bottom: 1px solid var(--ng-line); }
  body .hediyeCekiBtnContent a { color: var(--ng-navy-900); transition: background .2s ease; }
  body .hediyeCekiBtnContent a:hover { background: rgba(193,156,96,.06); }
  body .hediyeCekiBtnContent #offer-tag-icon path { fill: var(--ng-gold-500); }
  body .hediyeCekiBtnContent #arrow-icon path { fill: var(--ng-navy-500); }
  body .miniCartGiftInput .textbox {
    border: 1px solid var(--ng-line) !important;
    border-radius: var(--ng-radius) !important;
    color: var(--ng-navy-900);
  }
  body .miniCartGiftInput .textbox:focus {
    border-color: var(--ng-gold-500) !important;
    outline: none;
  }
  body .miniCartPreviousPaymentText { color: var(--ng-navy-700); }

  /* Sepetteki urun satiri */
  body .miniCartDetail .minimarka a {
    color: #8A93A6;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: uppercase;
  }
  body .miniCartDetail .miniurunAdi a {
    color: var(--ng-navy-900);
    font-weight: 500;
  }
  body .miniCartButtonSil a {
    color: #8A93A6;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: uppercase;
    transition: color .2s ease;
  }
  body .miniCartButtonSil a:hover { color: var(--ng-gold-600); }
  body .miniCartButtonSil svg path { fill: currentColor; }
  body .miniCartItemprice .DiscountPrice.lineThrough { color: #9CA3AF; }
  body .miniCartItemprice .CartPrice { color: var(--ng-navy-900); font-weight: 700; }
  body .miniCartHr { border: none; border-top: 1px solid var(--ng-line); }

  /* Adet (+/-) kontrolu */
  body .aMiniSepetAzalt, body .aMiniSepetArtir {
    border-color: var(--ng-line) !important;
    color: var(--ng-navy-900) !important;
    transition: background .2s ease, border-color .2s ease;
  }
  body .aMiniSepetAzalt:hover, body .aMiniSepetArtir:hover {
    background: var(--ng-bg-soft) !important;
    border-color: var(--ng-gold-500) !important;
  }
  body .txtMiniSepetAdet { border-color: var(--ng-line) !important; color: var(--ng-navy-900); }

  /* Giris yapilmis hesap menusu + /Hesabim sayfasi (sol menu, kart grid,
     uye adi satiri) - ayni lacivert/altin temaya cekildi. */

  /* Dropdown'daki uye adi satiri */
  body .header-member-name {
    background: transparent !important;
    border-bottom: 1px solid rgba(6,32,94,.12);
  }
  body .header-member-name span {
    color: var(--ng-navy-900) !important;
    font-weight: 600;
    letter-spacing: normal;
  }

  /* Hesabim sayfasi - karsilama basligi */
  body .hesabimAnasayfaBaslik h2 {
    color: var(--ng-navy-900) !important;
    font-weight: 600;
  }
  body .hesabimAnasayfaBaslik h2 span {
    color: var(--ng-gold-600) !important;
    font-weight: 400;
  }
  body .hesabimAnasayfaBaslik p {
    color: #6B7280 !important;
  }

  /* Hesabim sayfasi - 8 kutulu ozet kart grid'i (Siparislerim, Uyelik
     Bilgilerim, Adres Defterim vb.) - varsayilan gri kutu + hover'da
     tamamen siyaha donen taban davranisi yerine, sitenin diger yerlerinde
     kullanilan "beyaz kart + ince cizgi + hover'da altin kenarlik" dili. */
  body .hesabimAnasayfaMenuler ul li a {
    background: #fff !important;
    border: 1px solid var(--ng-line) !important;
    color: var(--ng-navy-900) !important;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  body .hesabimAnasayfaMenuler ul li a .fa {
    color: var(--ng-gold-500) !important;
  }
  body .hesabimAnasayfaMenuler ul li a:hover {
    background: var(--ng-bg-soft) !important;
    border-color: var(--ng-gold-500) !important;
    color: var(--ng-navy-900) !important;
    box-shadow: 0 10px 24px -16px rgba(6,32,94,.35);
  }
  body .hesabimAnasayfaMenuler ul li a:hover .fa {
    color: var(--ng-navy-900) !important;
  }

  /* Hesabim sayfasi - sol kalici menu (Uyelik Bilgilerim, Siparislerim,
     Iade/Iptal Talepleri, vb. + alt basliklar). ".aktif" sinifi o an
     acik olan sayfayi isaretliyor (AngularJS ng-class ile eklenip
     cikartiliyor). */
  body .solAnaMenu > ul > li > a {
    color: var(--ng-navy-700) !important;
  }
  body .solAnaMenu > ul > li > a i,
  body .solAnaMenu > ul > li > a .fa {
    color: var(--ng-gold-500) !important;
  }
  body .solAnaMenu > ul > li > a:hover {
    color: var(--ng-navy-900) !important;
    background: rgba(193,156,96,.06);
  }
  body .solAnaMenu ul ul a {
    color: var(--ng-navy-500) !important;
  }
  body .solAnaMenu ul ul a:hover {
    color: var(--ng-navy-900) !important;
  }
  body .solAnaMenu a.aktif,
  body .solAnaMenu li.aktif > a {
    color: var(--ng-gold-600) !important;
    font-weight: 600;
  }

  /* --- 9.4 + 9.6 HOVER: hareket yok, sadece yumusak renk gecisi --- */
  /* Guven rozetleri */
  body .widgetContainer .widgetArea ul li .box {
    transition: background .35s ease, border-color .35s ease !important;
  }
  body .widgetContainer .widgetArea ul li .box:hover {
    background: #fff !important;
    border-color: var(--ng-line) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body .widgetContainer .widgetArea ul li .box:hover .iconArea { transform: none !important; }

  /* Urun detay eylem kutulari */
  body .ProductIcon > div,
  body .ProductIcon2 > div,
  body .UAddToCollection,
  body .UIstekListemeEkle,
  body .UKarsilastirma,
  body .FiyatHaberVer,
  body .UrunKargoBedava,
  body .TavsiyeEtBtnContent,
  body .YorumYazbtnContent {
    transition: background .35s ease, border-color .35s ease !important;
  }
  body .ProductIcon > div:hover,
  body .ProductIcon2 > div:hover,
  body .UAddToCollection:hover,
  body .UIstekListemeEkle:hover,
  body .UKarsilastirma:hover,
  body .FiyatHaberVer:hover,
  body .UrunKargoBedava:hover,
  body .TavsiyeEtBtnContent:hover,
  body .YorumYazbtnContent:hover {
    background: #fff !important;
    border-color: var(--ng-line) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body .ProductIcon > div:hover .boxIcon,
  body .ProductIcon2 > div:hover .boxIcon,
  body .UAddToCollection:hover .boxIcon,
  body .UAddToCollection:hover .box1 i {
    transform: none !important;
    fill: var(--ng-gold-600);
    color: var(--ng-gold-600) !important;
  }

  /* Butonlar: sadece renk soluklasmasi */
  body .basketBtn input,
  body .buyfast input,
  body .button,
  body input.uyeol,
  body .userLoginBtn,
  body .userSignBtn,
  body #btnUyeGirisYap,
  body .basketCompletebtn,
  body #koskerxStickyCart button {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, opacity .35s ease !important;
  }
  body .basketBtn input:hover,
  body .buyfast input:hover,
  body .button:hover,
  body input.uyeol:hover,
  body .userLoginBtn:hover,
  body .userSignBtn:hover,
  body #btnUyeGirisYap:hover,
  body .basketCompletebtn:hover,
  body #koskerxStickyCart button:hover {
    transform: none !important;
    box-shadow: none !important;
    opacity: .86;
  }

  /* Odeme kartlari: hover YOK (bilgi kutusu, tiklanabilir degil) */
  body .ngOdemeKart { transition: none !important; }
  body .ngOdemeKart:hover {
    border-color: var(--ng-line) !important;
    box-shadow: none !important;
    transform: none !important;
    background: #fff !important;
  }

  /* Sosyal ikonlar: sadece renk */
  body a.icon-box[title="Facebook"],
  body a.icon-box[title="Instagram"],
  body .icon-box[aria-current="social-media-widget"],
  body #footer .socialdiv ul li a {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease !important;
  }
  body a.icon-box[title="Facebook"]:hover,
  body a.icon-box[title="Instagram"]:hover,
  body .icon-box[aria-current="social-media-widget"]:hover,
  body #footer .socialdiv ul li a:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  body a.icon-box[title="Facebook"]:hover i,
  body a.icon-box[title="Instagram"]:hover i { transform: none !important; }

  /* Yukari cik ve slider oklari */
  body #back-to-top a { transition: background-color .35s ease, border-color .35s ease, fill .35s ease !important; }
  body #back-to-top a:hover { transform: none !important; box-shadow: none !important; }
  body #mainHolder_divDesign .ProductListprev:hover,
  body #mainHolder_divDesign .ProductListnext:hover { transform: none !important; }

  /* Menu vitrin kartlari: gorsel zoom kalsin (o dogal), kart hareketi kalksin */
  body .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover .ngVitrinGorsel {
    transform: none !important;
    box-shadow: 0 4px 14px -8px rgba(6,32,94,.18) !important;
  }

  /* Urun karti hover */
  body .productItem { transition: box-shadow .35s ease !important; }
  body .productItem:hover { transform: none !important; }

  /* --- SEPETE EKLE: beyaz zemin + beyaz yazi = gorunmezdi --- */
  body .basketBtn input,
  body input.btnAddBasketOnDetail {
    background: var(--ng-navy-700) !important;
    border: 1px solid var(--ng-navy-700) !important;
    color: #fff !important;
  }
  body .basketBtn input:hover,
  body input.btnAddBasketOnDetail:hover {
    background: var(--ng-navy-900) !important;
    border-color: var(--ng-navy-900) !important;
    color: #fff !important;
    opacity: 1 !important;
  }
  /* "Hemen Al" rengi burada degil "FORM VE BUTON BUTUNLUGU / Sekmeler"
     bolumunde tanimli (altin/gold) - iki yerde tanimlamak hover'da yazi
     kararma hatasina sebep oluyordu. */

  /* --- 9.7 AKORDEONLAR: yumusak acilis --- */
  /* Not: Panel acilisi jQuery slideDown ile yapiliyor (inline display:none).
    CSS max-height ile cakismamak icin animasyonu JS tarafinda hizlandirmak
    yerine, panelin ICERIGINE yumusak bir belirme veriyoruz. */
  body .urunOzellikTab .urunTab > ul > li .urunDetayPanel > * {
    animation: ngPanelAc .45s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes ngPanelAc {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* +/- ikonunun donen-cizgi animasyonu "Sekmeler" bolumunde tek yerde
     tanimlaniyor (asagida, ~"Sekmeler: Yorumlar / Odeme Secenekleri..."
     basligi altinda) - tekrar/celiski olmasin diye burada ayrica
     tanimlanmiyor. */

  /* --- 9.8 FOOTER LACIVERT --- */
  body #footer,
  body .footerTemp,
  body .footerTemp .elementor-section,
  body .footerTemp .footerBottomArea {
    background: var(--ng-navy-900) !important;
  }
  body #footer *,
  body .footerTemp .footerText,
  body .footerTemp p,
  body .footerTemp span,
  body .footerTemp div {
    color: rgba(255,255,255,.78);
  }
  body #footer .linkler .blink > ul > li > span,
  body .footerTemp .titleH,
  body .footerTemp h3,
  body .footerTemp h4 {
    color: #fff !important;
  }
  body #footer .linkler .blink > ul > li > ul > li > a,
  body .footerTemp a {
    color: rgba(255,255,255,.72) !important;
    transition: color .3s ease;
  }
  body #footer .linkler .blink > ul > li > ul > li > a:hover,
  body .footerTemp a:hover {
    color: var(--ng-gold-300) !important;
  }
  body #txtbxNewsletterMail {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
  }
  body #txtbxNewsletterMail::-webkit-input-placeholder { color: rgba(255,255,255,.55); }  /* Sosyal ikonlar lacivert zeminde */
  body #footer .socialdiv ul li a,
  body a.icon-box[title="Facebook"],
  body a.icon-box[title="Instagram"] {
    border-color: rgba(232,209,176,.38) !important;
    color: var(--ng-gold-300) !important;
  }
  body a.icon-box[title="Facebook"]:hover,
  body a.icon-box[title="Instagram"]:hover {
    background: var(--ng-gold-500) !important;
    border-color: var(--ng-gold-500) !important;
    color: var(--ng-navy-900) !important;
  }
  /* Guven rozetleri lacivert footer'da degilse beyaz kalsin */
  body .widgetContainer { background: transparent; }

  @media (max-width: 767px) {
    body #divTopProductSearch .header-search-form-wrapper,
    body #divTopProductSearch .searchform-wrapper { width: 100% !important; }
  }

  /* ============================================================
    ANASAYFA DUZENI
    ------------------------------------------------------------
    Sorun 1: Banner uctan uca olsun diye .ticiContainer padding'i
              sifirlanmis; ama bu urun kartlarini da kenara yapistiriyordu.
    Sorun 2: Kategori gorselleri ile "En Cok Satan" bloklari bitisikti
              (aralarindaki bosluk 0px olcuLdu).
    Sorun 3: Slider oklari 43px - cok buyuk.
    Sorun 4: Slider gecisi sert.
    ============================================================ */

  /* --- 8.1 Banner uctan uca, icerik bloklari nefes alsin --- */
  /* Once tum hazir blok kapsayicilarina yan bosluk ver */
  /* Yan bosluk 40px -> --ng-gutter (60px): header/menu ve partner bolumu
     ile ayni sol hizaya oturur (Figma taslaginda slider basligi ve kartlar
     40 degil 60px'ten basliyor). */
  body #mainHolder_divDesign .ticiContainer.hazirBlokContent {
    padding-left: var(--ng-gutter) !important;
    padding-right: var(--ng-gutter) !important;
  }
  /* Banner/slider ICEREN bloklar uctan uca kalir - digerleri padding'li.
    Not: t-lr-0 sinifi neredeyse tum bloklarda var, o yuzden istisna
    sadece gercekten slider iceren kapsayicilara verilir. */
  body #mainHolder_divDesign .ticiContainer.hazirBlokContent:has(.anasayfa_tek_slider),
  body #mainHolder_divDesign .ticiContainer.hazirBlokContent:has(.HomePageSlideShowContainer),
  body #mainHolder_divDesign .ticiContainer.hazirBlokContent.anasayfa_tam_genislik,
  body #mainHolder_divDesign .anasayfa_tek_slider,
  body #mainHolder_divDesign .HomePageSlideShowContainer,
  body #pnlSlider {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }  /* --- 8.2 Blok arasi bosluklar --- */
  /* Ticimax'in t-mb-0 sinifi bazi bloklarda bitisiklige yol aciyordu.
    Ardisik blok gruplarina asgari nefes payi veriyoruz. */
  body #mainHolder_divDesign .landing-block + .landing-block {
    margin-top: 0;
  }
  body #mainHolder_divDesign .landing-block.t-mb-0:not(:last-child) {
    margin-bottom: 70px !important;
  }
  /* Urun slider bloklari her zaman ustten ve alttan nefes alsin */
  body #mainHolder_divDesign .sliderBannerContainer {
    margin: 0 0 10px 0;
  }
  body #mainHolder_divDesign .landing-block:has(.sliderBannerContainer) {
    padding-top: 10px;
  }

  /* --- 8.3 SLIDER OKLARI: kucuk, yuvarlak, UI uyumlu --- */
  body #mainHolder_divDesign .owl-carousel .owl-nav .ProductListprev,
  body #mainHolder_divDesign .owl-carousel .owl-nav .ProductListnext,
  body .owl-carousel .owl-nav .ProductListprev,
  body .owl-carousel .owl-nav .ProductListnext,
  body .owl-carousel .owl-nav .InstaGalleryprev,
  body .owl-carousel .owl-nav .InstaGallerynext {
    width: 42px !important;
    height: 42px !important;
    background-size: 16px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(6,32,94,.10) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px -6px rgba(6,32,94,.28);
    opacity: 0;
    transition: opacity .35s ease,
                background-color .3s ease,
                border-color .3s ease,
                transform .35s cubic-bezier(.22,.61,.36,1),
                box-shadow .3s ease;
  }
  /* Oklar sadece uzerine gelince belirsin - daha temiz gorunum */
  body #mainHolder_divDesign .owl-carousel:hover .owl-nav .ProductListprev,
  body #mainHolder_divDesign .owl-carousel:hover .owl-nav .ProductListnext,
  body .owl-carousel:hover .owl-nav .ProductListprev,
  body .owl-carousel:hover .owl-nav .ProductListnext {
    opacity: 1;
  }
  body #mainHolder_divDesign .owl-carousel .owl-nav .ProductListprev:hover,
  body #mainHolder_divDesign .owl-carousel .owl-nav .ProductListnext:hover,
  body .owl-carousel .owl-nav .ProductListprev:hover,
  body .owl-carousel .owl-nav .ProductListnext:hover {
    background-color: #fff !important;
    border-color: var(--ng-gold-500) !important;
    
  }/* Ok konumlari */
  body #mainHolder_divDesign .owl-carousel .owl-nav .ProductListprev,
  body .owl-carousel .owl-nav .ProductListprev { left: 18px !important; }
  body #mainHolder_divDesign .owl-carousel .owl-nav .ProductListnext,
  body .owl-carousel .owl-nav .ProductListnext { right: 18px !important; }  /* Bu sitede oklar "#mainHolder_divDesign .ProductListprev" seciciyle de
    stillendirilmis (46x43px, 12px radius). Ayni ozgullukle eziyoruz. */
  body #mainHolder_divDesign .ProductListprev,
  body #mainHolder_divDesign .ProductListnext {
    width: 42px !important;
    height: 42px !important;
    background-size: 16px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(6,32,94,.10) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px -6px rgba(6,32,94,.28);
    transition: opacity .35s ease, background-color .3s ease,
                border-color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1),
                box-shadow .3s ease;
  }
  /* Ok icindeki metin karakteri (‹ ›) gizlensin - arka plan gorseli kullaniliyor */
  body #mainHolder_divDesign .ProductListprev span,
  body #mainHolder_divDesign .ProductListnext span {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  body #mainHolder_divDesign .ProductListprev:hover,
  body #mainHolder_divDesign .ProductListnext:hover {
    background-color: #fff !important;
    border-color: var(--ng-gold-500) !important;
    
  }  /* --- 8.4 SLIDER GECISI: yavas ve yumusak --- */
  body #mainHolder_divDesign .owl-carousel .owl-stage,
  body .owl-carousel .owl-stage {
    transition-timing-function: cubic-bezier(.25,.46,.45,.94) !important;
  }/* Nokta gostergeler sade: hepsi ayni yuvarlak, sadece renk + hafif
    buyume degisiyor. width yerine transform:scale kullanmak PageSpeed'in
    "non-composited animation" uyarisini da ortadan kaldiriyor. */
  body #mainHolder_divDesign .owl-carousel .owl-dots .owl-dot,
  body .owl-carousel .owl-dots .owl-dot {
    width: 7px !important; height: 7px !important;
    margin: 0 4px !important;
    background: rgba(255,255,255,.45) !important;
    border-radius: 50% !important;
    transform: scale(1);
    transition: background .3s ease, transform .3s ease;
  }
  body #mainHolder_divDesign .owl-carousel .owl-dots .owl-dot.active,
  body .owl-carousel .owl-dots .owl-dot.active {
    background: var(--ng-gold-500) !important;
    width: 7px !important;
    border-radius: 50% !important;
    transform: scale(1.4);
  }
  /* Ticimax'in ".owl-dot span"i butonun tam uzerine oturan beyaz dolgulu
    bir <span> - ustteki background rengi bunun altinda kalip hic
    gorunmuyordu, span'i saydam yapip gercek rengi gosteriyoruz. */
  body #mainHolder_divDesign .owl-carousel .owl-dots .owl-dot span,
  body .owl-carousel .owl-dots .owl-dot span {
    background: transparent !important;
  }

  /* --- 8.5 CEREZ KUTUSU: Manrope fontu ---
    Kullanilan kutuphane CookieConsent (.cm-wrapper / .cm__title).
    Varsayilan fontu -apple-system idi. */
  body .cm-wrapper,
  body .cm-wrapper *,
  body .cm,
  body .cm *,
  body .cm__title,
  body .cm__desc,
  body .cm__btn,
  body .cm__texts,
  body .cm__body,
  body .pm-wrapper,
  body .pm-wrapper *,
  body #cc-main,
  body #cc-main *,
  body [class^="cm__"],
  body [class^="pm__"],
  body [class*="consent"],
  body [class*="cookie"] {
    font-family: 'Manrope', sans-serif !important;
  }
  /* Cerez butonlari da UI diline yaklassin */
  body .cm__btn {
    border-radius: var(--ng-radius) !important;
    font-weight: 600 !important;
    letter-spacing: normal;
    font-size: 12px !important;
    text-transform: uppercase;
  }
  body .cm__title {
    letter-spacing: normal;
    font-weight: 600 !important;
  }

  @media (max-width: 1100px) {
    body #mainHolder_divDesign .ticiContainer.hazirBlokContent {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
  }
  @media (max-width: 767px) {
    body #mainHolder_divDesign .ticiContainer.hazirBlokContent {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }    body #mainHolder_divDesign .landing-block.t-mb-0:not(:last-child) {
      margin-bottom: 44px !important;
    }/* Urun slider oklari mobilde gizli - parmakla kaydiriliyor */
    body #mainHolder_divDesign .owl-carousel:not(.anasayfa_tek_slider) .owl-nav { display: none !important; }
  }

  /* ============================================================
    HEADER ARKA PLANI (duz, cam efekti kaldirildi)
    ============================================================ */
  body #headerNew .header-main,
  body #headerNew.fixed .header-main,
  body #headerNew .header-wrapper {
    background: #fff;
  }
  /* Acilir kategori paneli: duz beyaz + hafif golge */
  body #headerNew .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar > .menu-wrap {
    background: #fff !important;
    border-bottom: 1px solid rgba(6,32,94,.06);
    box-shadow: 0 12px 32px -18px rgba(6,32,94,.28);
  }

  /* ============================================================
    HEADER DIKEY OLCULERI (2026-09-07, Figma)
    ------------------------------------------------------------
    Istenen: duyuru bari ile logo satiri arasi 22px, logo+menu
    satiri 60px, satirin altinda yine 22px. Toplam 22+60+22 = 104px.
    Once .header-main 100px sabit yukseklikteydi (Ticimax'in kendi
    CSS'i) ve icindeki her sey (logo, menu, arama) 100px'e streç
    ediliyordu; padding yoktu. Simdi yukseklik 104'e cekilip
    box-sizing:border-box ile 22/22 padding iceriden alindi, satirin
    kendisi (.header-inner) tam 60px'e sabitlendi.
    Logo goruntusu height:100% ile satira uyuyor; bozulmamasi icin
    object-fit:contain + width:auto veriliyor (eskiden 120x100
    kutusuna sigiyordu, simdi ayni oranla 60px yuksekliginde).
    Esik 1042px: altinda tema kendi mobil header'ina geciyor (orada
    .header-main 50px, ayri bir kural - bkz. "body #headerNew
    .header-main{height:50px}" mobil blogu), ona dokunulmuyor. */
  @media (min-width: 1042px) {
    body #headerNew .header-main,
    body #headerNew.fixed .header-main {
      height: 104px;
      padding-top: 22px;
      padding-bottom: 22px;
      box-sizing: border-box;
    }
    body #headerNew .header-main .header-inner {
      height: 60px;
      min-height: 60px;
    }
    /* Logo, satir yuksekligine YUZDE ile baglanmiyor - bilerek piksel:
       DOM zinciri #hb-logo > a > img seklinde ve aradaki <a> "auto"
       yukseklikte oldugu icin img'deki height:100% cozulemeyip gorsel
       kendi dogal boyutunda (120px) kaliyor, ustelik #hb-logo bir grid
       ogesi olarak min-height:auto tasidigi icin icerigin altina
       inemeyip satiri disaridan tasiriyordu (canli olcumle yakalandi:
       satir 60px iken logo 120px). Zincirin her halkasina acik 60px +
       min-height:0 verilerek bu kirilganlik tamamen kaldiriliyor. */
    body #headerNew .header-main #hb-logo,
    body #headerNew .header-main #hb-logo > a {
      height: 60px;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    body #headerNew .header-main #hb-logo img,
    body #headerNew .header-main #hb-logo svg {
      height: 100%;
      max-height: 60px;
      width: auto;
      object-fit: contain;
      /* Logo dosyasi 375x375 KARE bir SVG, ama icindeki gercek cizim
         yalnizca 234px yuksekliginde (y=66..300) - tuvalin %37'si bos.
         Bu yuzden 60px'lik satirda gorunen yazi sadece ~37px kaliyordu ve
         gozle "cok kucuk" duruyordu (onceki 100px'lik satirda ~62px'ti,
         ustelik 120x100'e yatay GERILMIS/bozuk haldeydi - dosya kare).
         transform:scale LAYOUT'u hic degistirmez (satir 60px kalir, grid
         ortalamasi bozulmaz), sadece cizimi buyutur:
         60 * (234/375) * 1.34 = ~50px gorunur yazi yuksekligi.
         Kalici/temiz cozum: panelden bosluklari kirpilmis bir logo
         yuklemek; o zaman buradaki scale 1'e cekilmeli. */
      transform: scale(1.34);
      transform-origin: center;
    }
  }

  /* ============================================================
    HEADER TEK SATIR DUZENI (FAZ 11) - sadece masaustu
    ------------------------------------------------------------
    DOM tasima WEBJS.txt'teki headerYenidenDuzenle() ile yapiliyor:
    kategori menusu #wide-nav'dan masthead'in sol sutununa, arama
    kutusu sag sutuna (hesabim'dan once) tasiniyor. Burada sadece
    gorsel duzen var.
    ============================================================ */
  @media (min-width: 1500px) {
    /* Esik 1042 degil 1500: 7 kategori + logo ayni satirda 1280-1440px
       arasi (yaygin laptop genislikleri) logoya degecek kadar tasiyordu
       (canli olcumle dogrulandi - 1366px'de sadece 22px, 1280px'de -21px
       yani gercek cakisma vardi). Bu genislik araligi ESKI iki-satirli
       duzende kaliyor (WEBJS.txt'teki matchMedia esigi de ayni). */
    /* Ticimax'in orijinal "logo-center" teknigi (order:1/2/3 + sol/sag
       flex-basis:25%) sadece iki taraf ESIT genislikte oldugunda logoyu
       tam ortalar. Sol tarafa menu (genis), saga sadece 3 ikon (dar)
       gelince bu esitlik bozulup logo kayardi - grid ile 1fr/auto/1fr
       kullanip gercek ortalama saglaniyor ("order" grid'de de gecerli,
       Ticimax'in order:1/2/3 kurallari boylece hala isliyor). */
    body #headerNew .header-main .header-inner.logo-center {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }
    body #headerNew .header-main .header-inner.logo-center > .flex-left {
      justify-self: start;
      min-width: 0;
    }
    body #headerNew .header-main .header-inner.logo-center > .flex-right {
      justify-self: end;
      min-width: 0;
    }

    /* Tasinan kategori menusu: metin logoya degip tasmasin diye
       kirilmasini onluyoruz (white-space:nowrap). DUZELTME: burada
       eskiden "gap:0" + "padding:0 8px" ile kategoriler arasi bosluk
       SABIT ve SIFIRA yakin bir degere zorlaniyordu - bu, Ticimax
       panelindeki "Menu Link Bosluk" (menu_link_gap) ayarini tamamen
       eziyordu, kullanici panelden ne kadar bosluk verirse versin
       kategoriler hep dip dibe gorunuyordu. Asil crowding sorunu zaten
       1280-1440px araliginda olculmustu (bkz. yukaridaki esik yorumu) -
       o aralik ESKI iki-satirli duzende kaldigi icin bu >=1500px
       blogunda boslugu sifirlamaya gerek yoktu; panelin kendi
       degeri (gap) artik gecerli. */
    body #headerNew .header-main .flex-left .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a {
      font-size: 14px;
      letter-spacing: normal;
      white-space: nowrap;
    }
    body #headerNew .header-main .flex-left .newHeaderNavigation:not(.mobileStyle) .menu-wrap {
      z-index: 20;
    }
    /* Logo kenar bosluklari daraltildi - hem daha fazla yer menude kalsin
       hem de sol/sag sutunlara (1fr/1fr) daha fazla pay dussun. */
    body #headerNew .logo-center #hb-logo {
      margin: 0 10px !important;
    }

    /* Arama: Ticimax'in ikon+acilir-panel modu (data-search-icon="true")
       WEBJS'ten aktif ediliyor. "display:none <-> block" gecissiz oldugu
       icin (duyuru seridinde de ayni sorun vardi) daima block birakilip
       genislik animasyonuyla SOLA DOGRU acilip kapaniyor (right:0 sabit
       kalir, genislik 0'dan 340px'e cikarken kutu sola dogru "acilir" -
       icerideki .searchform-wrapper zaten sabit 340px, disaridaki bu
       kapsayici overflow:hidden ile onu genislik arttikca sagdan sola
       ortaya cikartir).
       top:50%+translateY(-50%) BILEREK "top:100%" YERINE kullanildi:
       100% konteyner yuksekligi kadar asagi iniyor, bu da kutuyu
       HEADER'IN ALTINA (ana icerigin uzerine, ayri bir satira)
       dusuruyordu. Dikey ortalama ile kutu HEADER'IN KENDI ICINDE, ikonla
       ayni hizada kalip yatay olarak sola dogru aciliyor.
       #divTopProductSearch'e position:relative verilip konteyner ONA
       cevrildi (asagida) - oncesinde en yakin konumlanmis ata olan
       ".header-main"a kaciyordu, "right:0" da SAYFANIN en sag kenarina
       (Hesabim/Sepetim ikonlarinin da oldugu yere) denk gelip acilirken
       o ikonlarin USTUNE biniyordu (canli testte gorulen "üye Girişi"
       yazisinin uzerine binen metin karisikligi buydu). */
    body #headerNew #divTopProductSearch {
      position: relative;
    }
    body #headerNew #divTopProductSearch .header-search-form-wrapper {
      display: block !important;
      position: absolute !important;
      right: 0;
      left: auto;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      overflow: hidden;
      z-index: 25;
      opacity: 0;
      pointer-events: none;
      transition: width .32s ease, opacity .2s ease;
    }
    body #headerNew #divTopProductSearch.dropactive .header-search-form-wrapper {
      width: 340px;
      opacity: 1;
      pointer-events: auto;
    }
    body #headerNew .flex-right .header-nav.nav-right {
      gap: 16px;
    }
  }

  /* --- 1042-1499px: kategori metinleri iki satira bolunuyordu ---
     Kategori menusu >=1042px'te de (ayni WEBJS headerYenidenDuzenle()
     ile) flex-left icine tasiniyor, ama nowrap sadece >=1500px blogunda
     tanimliydi. Bu aralikta (yaygin laptop genislikleri: 1280/1366px)
     nowrap YOKTU - metin sarilip "Gram Kulce Altin" gibi cok kelimeli
     kategoriler 2-3 satira bolunuyordu (canli ekran goruntusuyle
     dogrulandi). >=1500px blogundaki 14px ile nowrap denendiginde
     1280-1440px'de metin logoya deyecek kadar tasiyordu (bkz. yukaridaki
     esik yorumu, bu yuzden esik 1500'e cekilmisti) - burada onun yerine
     KUCUK punto ile nowrap kullanilipayni tasma riski olmadan tek
     satirda tutuluyor. */
  @media (min-width: 1042px) and (max-width: 1499px) {
    body #headerNew .header-main .flex-left .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a {
      font-size: 11px;
      letter-spacing: normal;
      white-space: nowrap;
    }
  }

  /* Duyuru yazisi <b> etiketiyle geldigi icin tarayici varsayilani 700
     (kalin) uyguluyordu - 550'ye dusuruldu. */
  body #top-bar b {
    font-weight: 400;
  }

  @media (max-width: 767px) {
    /* Eskiden burada cam efekti (backdrop-filter) vardi. KALDIRILDI:
       backdrop-filter, position:fixed alt elemanlar icin "containing
       block" olusturur - Ticimax'in tam ekran mobil menu paneli
       (.newHeaderNav, position:fixed) bu yuzden 50px'lik header kutusunun
       icine hapsolup sadece ustte ince bir serit olarak gorunuyordu
       (headless testte yakalandi). Duz beyaz zemin, ayni okunurluk. */
    body #headerNew .header-main,
    body #headerNew.fixed .header-main {
      background: #fff !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  /* ============================================================
    FORM VE BUTON BUTUNLUGU
    ------------------------------------------------------------
    Olcum sonucu tespit edilen dagiiniklik:
      Fontlar : Arial, Judson, Segoe UI, Manrope  (4 farkli)
      Renkler : #15284B, #0C2380                  (2 farkli lacivert)
      Kose    : 0px, 4px, 85px                    (3 farkli)
    Hepsi tek dile getiriliyor.
    ============================================================ */

  /* --- TUM INPUT / SELECT / TEXTAREA --- */
  body input[type="text"],
  body input[type="email"],
  body input[type="password"],
  body input[type="tel"],
  body input[type="number"],
  body input[type="search"],
  body input.textbox,
  body select,
  body select.selectboxx,
  body textarea,
  body .uyeOlContainer .uyeOlCol input.textbox,
  body .uyeOlContainer .uyeOlCol select.selectboxx,
  body .iletisimContent .iletisimForm .rowLeft .span .Right input,
  body .iletisimContent .iletisimForm .rowRight .span .Right input,
  body .iletisimContent .iletisimForm .rowRight .span .Right textarea,
  body #txtUyeGirisEmail,
  body #txtUyeGirisPassword,
  body #txtQuickTelLogin,
  body #txtGuvenlikKodu {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: normal;
    color: var(--ng-navy-700) !important;
    background: #fff !important;
    border: 1px solid var(--ng-line) !important;
    border-radius: var(--ng-radius) !important;
    padding: 0 16px !important;
    height: 48px !important;
    line-height: 46px !important;
    box-shadow: none !important;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  body textarea,
  body .iletisimContent .iletisimForm .rowRight .span .Right textarea {
    height: auto !important;
    min-height: 120px !important;
    line-height: 1.6 !important;
    padding: 14px 16px !important;
    resize: vertical;
  }
  body input[type="text"]:focus,
  body input[type="email"]:focus,
  body input[type="password"]:focus,
  body input[type="tel"]:focus,
  body input.textbox:focus,
  body select:focus,
  body textarea:focus,
  body #txtUyeGirisEmail:focus,
  body #txtUyeGirisPassword:focus {
    border-color: var(--ng-gold-500) !important;
    box-shadow: 0 0 0 3px rgba(193,156,96,.14) !important;
    outline: none !important;
  }
  body input::-webkit-input-placeholder,
  body textarea::-webkit-input-placeholder { color: var(--ng-navy-500); opacity: 1; }
  body input::-moz-placeholder,
  body textarea::-moz-placeholder { color: var(--ng-navy-500); opacity: 1; }
  body input:-ms-input-placeholder,
  body textarea:-ms-input-placeholder { color: var(--ng-navy-500); }

  /* Select oku */
  body select,
  body select.selectboxx {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E718D' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
    cursor: pointer;
  }

  /* --- ETIKETLER --- */
  body label,
  body .uyeOlContainer .uyeOlCol label,
  body .iletisimContent .iletisimForm .rowLeft .span .Left,
  body .iletisimContent .iletisimForm .rowRight .span .Left {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    color: var(--ng-navy-700) !important;
    text-transform: uppercase;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
  }

  /* --- ANA BUTONLAR (dolu lacivert) --- */
  body .button,
  body input.uyeol,
  body .userLoginBtn,
  body .userSignBtn,
  body .userPassBtn input,
  body #btnUyeGirisYap,
  body .iletisimContent .iletisimForm .rowRight .iletisimBtn input,
  body .basketCompletebtn,
  body .alisverisedevamet,
  body #AdresContent .button,
  body .YeniAdresEkle {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    height: 50px !important;
    line-height: 48px !important;
    padding: 0 26px !important;
    border-radius: var(--ng-radius) !important;
    background: var(--ng-navy-700) !important;
    border: 1px solid var(--ng-navy-700) !important;
    color: #fff !important;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease,
                transform .2s ease, box-shadow .3s ease;
  }
  body .button:hover,
  body input.uyeol:hover,
  body .userLoginBtn:hover,
  body .userSignBtn:hover,
  body #btnUyeGirisYap:hover,
  body .iletisimContent .iletisimForm .rowRight .iletisimBtn input:hover,
  body .basketCompletebtn:hover {
    background: var(--ng-navy-900) !important;
    border-color: var(--ng-navy-900) !important;
    
  }

  /* --- IKINCIL BUTON (cerceveli) --- */
  body .alisverisedevamet,
  body .userPassBtn a,
  body a.YeniAdresEkle {
    background: #fff !important;
    border: 1px solid var(--ng-line) !important;
    color: var(--ng-navy-700) !important;
  }
  body .alisverisedevamet:hover,
  body a.YeniAdresEkle:hover {
    background: var(--ng-navy-700) !important;
    border-color: var(--ng-navy-700) !important;
    color: #fff !important;
  }

  /* --- ONAY KUTULARI --- */
  body input[type="checkbox"],
  body input[type="radio"] {
    width: 17px !important;
    height: 17px !important;
    accent-color: var(--ng-navy-700);
    cursor: pointer;
    vertical-align: middle;
  }
  body .uyeOlContainer .uyeOlColItem.checkboxItem label span,
  body #chkSozlesme + label,
  body .userSozlesmeDiv label,
  body .userMail label,
  body .userSms label {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: normal;
    text-transform: none !important;
    color: var(--ng-navy-500) !important;
    line-height: 1.6 !important;
  }

  /* --- FORM BASLIKLARI --- */
  body .uyeOlContainer .FormTitle,
  body .userLogin .newuserForm .title h4,
  body .iletisimContent .categoryTitle .categoryTitleText {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--ng-navy-900) !important;
  }

  /* --- FORM KUTULARI --- */
  body .uyeOlContainer #FrmYeniUye > .uyeOlCol,
  body .userContainer .userLeftBox,
  body .userContainer .userRightBox {
    background: #fff !important;
    border: 1px solid var(--ng-line) !important;
    border-radius: var(--ng-radius) !important;
  }

  /* --- HATA MESAJLARI --- */
  body .validate, body .validateSol, body .validateOrta {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: normal;
    border-radius: var(--ng-radius) !important;
  }

  /* --- ARAMA KUTUSU (85px yaricap sorunu) --- */
  body #btnKelimeAra,
  body .ux-search-submit {
    border-radius: var(--ng-radius) !important;
    font-family: 'Manrope', sans-serif !important;
  }
  body #txtbxArama {
    font-family: 'Manrope', sans-serif !important;
    letter-spacing: normal;
  }

  /* --- SEPET / ODEME ADIMLARI --- */
  body .Basketstep ul li span,
  body .OdemeMenu ul li a {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    text-transform: uppercase;
  }

  @media (max-width: 767px) {
    body input[type="text"], body input[type="email"], body input[type="password"],
    body input[type="tel"], body input.textbox, body select, body select.selectboxx,
    body #txtUyeGirisEmail, body #txtUyeGirisPassword {
      height: 46px !important;
      line-height: 44px !important;
      font-size: 13px !important;
      padding: 0 14px !important;
    }
    body .button, body input.uyeol, body .userLoginBtn, body .userSignBtn,
    body #btnUyeGirisYap, body .basketCompletebtn {
      height: 48px !important;
      line-height: 46px !important;
      font-size: 12px !important;
      padding: 0 18px !important;
    }
    body label { font-size: 11px !important; }
    body .uyeOlContainer .FormTitle { font-size: 18px !important; }
  }

  /* ============================================================
    GUVEN ROZETLERI
    ------------------------------------------------------------
    Sorun: yukseklikler 39/39/46/47/37px, genislikler 190-316px.
    Uzun metinler iki satira dusup hizayi bozuyordu.
    Cozum: esit yukseklik, esit pay, ortalanmis ikon + metin.
    ============================================================ */
  body .widgetContainer { padding: 8px 0; }

  body .widgetContainer .widgetArea ul {
    display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center !important;
    -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch !important;
    gap: 12px !important;
    width: 100%;
    margin: 0; padding: 0;
    list-style: none;
  }
  body .widgetContainer .widgetArea ul li {
    -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0 !important;
    min-width: 170px;
    max-width: 260px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
  }
  body .widgetContainer .widgetArea ul li .box {
    display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center !important;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center !important;
    gap: 10px !important;
    width: 100%;
    height: 100%;
    min-height: 116px;
    padding: 18px 12px !important;
    background: var(--ng-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--ng-radius);
    text-align: center;
    transition: background .35s ease, border-color .35s ease,
                box-shadow .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
  }
  body .widgetContainer .widgetArea ul li .box:hover {
    background: #fff;
    border-color: var(--ng-gold-500);
    box-shadow: 0 8px 22px -10px rgba(6,32,94,.25);
    transform: translateY(-3px);
  }

  /* Ikon alani: sabit olcu, ortalanmis */
  body .widgetContainer .widgetArea ul li .iconArea {
    -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 40px; height: 40px;
    margin: 0 !important;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }
  body .widgetContainer .widgetArea ul li .box:hover .iconArea {  }
  body .widgetContainer .widgetArea ul li .iconArea svg {
    width: 30px !important;
    height: 30px !important;
    display: block;
  }
  body .widgetContainer .widgetArea ul li .iconArea svg path,
  body .widgetContainer .widgetArea ul li .iconArea svg g {
    fill: var(--ng-navy-500);
    transition: fill .35s ease;
  }
  body .widgetContainer .widgetArea ul li .box:hover .iconArea svg path,
  body .widgetContainer .widgetArea ul li .box:hover .iconArea svg g {
    fill: var(--ng-gold-600);
  }

  /* Metin: sabit iki satir alani, hiza korunur */
  body .widgetContainer .widgetArea ul li .contentArea {
    -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
    width: 100%;
  }
  body .widgetContainer .widgetArea ul li .contentArea .titleH {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
    color: var(--ng-navy-700) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
    letter-spacing: normal;
    text-transform: uppercase;
    text-align: center;
    transition: color .35s ease;
  }
  body .widgetContainer .widgetArea ul li .box:hover .contentArea .titleH {
    color: var(--ng-navy-900) !important;
  }
  /* Satir sonu zorlamalarini kaldir - metin kendi akisinda sarsin */
  body .widgetContainer .widgetArea ul li .contentArea .titleH br { display: none; }

  @media (max-width: 1100px) {
    body .widgetContainer .widgetArea ul li { min-width: 150px; }
    body .widgetContainer .widgetArea ul li .box { min-height: 108px; padding: 14px 8px !important; }
  }
  @media (max-width: 767px) {
    body .widgetContainer .widgetArea ul {
      /* Tema mobilde flex-direction:column veriyordu - satir yonune zorluyoruz */
      -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important; flex-direction: row !important;
      -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important;
      gap: 8px !important;
    }
    body .widgetContainer .widgetArea ul li {
      -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 4px); flex: 0 0 calc(50% - 4px) !important;
      min-width: 0;
      max-width: none;
    }
    /* Tek kalan son rozet tam genislik alsin */
    body .widgetContainer .widgetArea ul li:last-child:nth-child(odd) {
      -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100% !important;
    }
    body .widgetContainer .widgetArea ul li .box {
      min-height: 96px;
      padding: 14px 8px !important;
      gap: 8px !important;
    }
    body .widgetContainer .widgetArea ul li .iconArea { width: 32px; height: 32px; }
    body .widgetContainer .widgetArea ul li .iconArea svg { width: 25px !important; height: 25px !important; }
    body .widgetContainer .widgetArea ul li .contentArea .titleH {
      font-size: 10.5px !important;
      line-height: 14px !important;
      min-height: 28px;
      letter-spacing: normal;
    }
  }

  /* ============================================================
    SOSYAL MEDYA / FOOTER / SEPET BARI
    ============================================================ */

  /* --- 4.1 SOSYAL MEDYA IKONLARI: premium yuvarlak --- */
  body .icon-box[aria-current="social-media-widget"],
  body a.icon-box[title="Facebook"],
  body a.icon-box[title="Instagram"],
  body a.icon-box[title="Twitter"],
  body a.icon-box[title="X"],
  body a.icon-box[title="Youtube"],
  body a.icon-box[title="TikTok"],
  body #footer .socialdiv ul li a {
    display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center !important;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid rgba(232,209,176,.38) !important;
    color: var(--ng-gold-300) !important;
    transition: background .35s cubic-bezier(.22,.61,.36,1),
                border-color .35s ease,
                color .35s ease,
                transform .35s cubic-bezier(.22,.61,.36,1);
  }
  body .icon-box[aria-current="social-media-widget"]:hover,
  body a.icon-box[title="Facebook"]:hover,
  body a.icon-box[title="Instagram"]:hover,
  body a.icon-box[title="Twitter"]:hover,
  body a.icon-box[title="X"]:hover,
  body a.icon-box[title="Youtube"]:hover,
  body a.icon-box[title="TikTok"]:hover,
  body #footer .socialdiv ul li a:hover {
    background: var(--ng-gold-500) !important;
    border-color: var(--ng-gold-500) !important;
    color: var(--ng-navy-900) !important;
    
  }
  body .icon-box[aria-current="social-media-widget"] i,
  body a.icon-box[title="Facebook"] i,
  body a.icon-box[title="Instagram"] i,
  body #footer .socialdiv ul li a i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
  }
  body .icon-box[aria-current="social-media-widget"]:hover i,
  body a.icon-box[title="Facebook"]:hover i,
  body a.icon-box[title="Instagram"]:hover i {
    
  }
  /* Ikonlar arasi bosluk */
  body .footerTemp .appMediaDiv,
  body #footer .socialdiv ul {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    gap: 12px;
  }
  /* --- 4.2 FOOTER ALT BOSLUK (sepet bari engellemesin) --- */
  body #footer,
  body .footerTemp {
    padding-bottom: 80px !important;   /* sepet bari 66px + 14px nefes */
  }

  /* --- 4.3 SEPET BARI: lacivert + UI uyumlu --- */
  body #koskerxStickyCart {
    background: var(--ng-navy-700) !important;
    box-shadow: 0 -6px 24px -8px rgba(6,32,94,.45) !important;
    padding: 10px 16px !important;
    border-top: 1px solid rgba(232,209,176,.18);
  }
  body #koskerxStickyCart img {
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.08);
  }
  /* Urun adi */
  body #koskerxStickyCart > div > div:first-child {
    color: rgba(255,255,255,.78) !important;
    font-size: 12px !important;
    letter-spacing: normal;
    text-transform: uppercase;
  }
  /* Fiyat */
  body #koskerxStickyCartPrice,
  body #koskerxStickyCart > div > div:last-child {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: normal;
  }
  /* Buton */
  body #koskerxStickyCart button {
    background: var(--ng-gold-500) !important;
    color: var(--ng-navy-900) !important;
    border-radius: var(--ng-radius) !important;
    padding: 12px 24px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: normal;
    text-transform: uppercase;
    transition: background .3s ease, transform .2s ease, box-shadow .3s ease;
  }
  body #koskerxStickyCart button:hover {
    background: var(--ng-gold-300) !important;
    
  }

  /* --- 4.4 YUKARI CIK BUTONU --- */
  body #back-to-top {
    right: 16px !important;
    bottom: 96px !important;   /* sepet barinin ustunde kalir */
    z-index: 2147483001 !important;   /* sepet barindan bir tik yukarida */
  }
  body #back-to-top a {
    width: 44px !important;
    height: 44px !important;
    background: var(--ng-navy-700) !important;
    border: 1px solid rgba(232,209,176,.35) !important;
    fill: var(--ng-gold-300) !important;
    box-shadow: 0 6px 20px -8px rgba(6,32,94,.5);
    transition: background .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  }
  body #back-to-top a:hover {
    background: var(--ng-gold-500) !important;
    border-color: var(--ng-gold-500) !important;
    fill: var(--ng-navy-900) !important;
    
  }
  body #back-to-top a svg { height: 22px !important; }

  /* --- 4.5 TICIMAX LOGOSU KALDIRILDI --- */
  body .mobilTicimaxLogo,
  body #ticimaxCopyright,
  body #divTicimaxCopyrightContent {
    display: none !important;
  }

  @media (max-width: 767px) {
    body #footer,
    body .footerTemp { padding-bottom: 130px !important; }  /* mobilde alt nav + sepet bari */
    body #back-to-top { bottom: 140px !important; right: 12px !important; }
    body #back-to-top a { width: 40px !important; height: 40px !important; }
    body .icon-box[aria-current="social-media-widget"],
    body a.icon-box[title="Facebook"],
    body a.icon-box[title="Instagram"],
    body #footer .socialdiv ul li a { width: 38px !important; height: 38px !important; }
    body #koskerxStickyCart button { padding: 10px 16px !important; font-size: 11px !important; }
    body #koskerxStickyCart > div > div:first-child { font-size: 11px !important; }
    body #koskerxStickyCartPrice { font-size: 14px !important; }
  }

  /* ============================================================
    KATEGORI KAPAK BANNER
    ------------------------------------------------------------
    Kategori sayfasinin ustunde genis kapak gorseli.
    Saf gradyan tabanli: fotograf gerektirmez, her ekranda net.
    Hangi kategoride gorunecegi JS tarafindaki KAPAK_BANNERLARI
    listesinden belirlenir.

    Oran sabit (aspect-ratio) - gorsel ezilmez/skew olmaz.
    ============================================================ */
  .ngKapak{
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 24px;
    border-radius: var(--ng-radius);
    overflow: hidden;
    aspect-ratio: 1800/430;              /* oran kilidi */
    background:
      radial-gradient(120% 140% at 88% 18%, rgba(206,162,92,.32) 0%, rgba(206,162,92,.08) 34%, transparent 62%),
      linear-gradient(118deg, #001C3D 0%, #0A2B5C 60%, #001C3D 100%);
    box-shadow: 0 10px 30px -12px rgba(0,28,61,.35);
  }
  /* ince altin ic cerceve */
  .ngKapak:after{
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: var(--ng-radius);
    border: 1px solid rgba(232,209,176,.16);
    pointer-events: none;
  }
  /* ince capraz doku */
  .ngKapak__filtre{
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px, transparent 1px, transparent 9px),
      linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 40%);
  }
  /* sag ustten altin isik huzmesi */
  .ngKapak__isik{
    position: absolute; top: -40%; right: -6%;
    width: 58%; height: 180%;
    background: radial-gradient(ellipse at center, rgba(232,209,176,.26) 0%, rgba(212,184,136,.09) 45%, transparent 72%);
    pointer-events: none;
  }
  .ngKapak__icerik{
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 7%;
  }
  .ngKapak__etiket{
    display: inline-block;
    font-size: 11px; font-weight: 700;
    letter-spacing: normal; text-transform: uppercase;
    color: #E8D1B0;
    border: 1px solid rgba(232,209,176,.42);
    border-radius: var(--ng-radius);
    padding: 6px 14px;
    margin-bottom: 18px;
  }
  .ngKapak__baslik{
    font-family: 'Cormorant Garamond', serif;
    color: #fff;
    font-size: 40px; font-weight: 600; line-height: 1.14;
    margin: 0 0 12px;
    letter-spacing: normal;
    text-shadow: 0 2px 18px rgba(0,0,0,.28);
    max-width: 62%;
  }
  .ngKapak__baslik em{ font-style: normal; color: #E8D1B0; }
  .ngKapak__mesaj{
    color: rgba(255,255,255,.86);
    font-size: 15px; font-weight: 400; line-height: 1.6;
    max-width: 46%;
    margin: 0;
  }
  .ngKapak__cizgi{
    width: 56px; height: 2px;
    background: var(--ng-gold-500);
    margin: 20px 0 0;
    border-radius: var(--ng-radius);
  }

  @media (max-width: 1100px){
    .ngKapak__baslik{ font-size: 30px; max-width: 72%; }
    .ngKapak__mesaj{ font-size: 13.5px; max-width: 58%; }
  }
  @media (max-width: 767px){
    .ngKapak{ aspect-ratio: 16/10; margin-bottom: 18px; border-radius: var(--ng-radius); }
    .ngKapak__icerik{ padding: 0 8%; }
    .ngKapak__etiket{ font-size: 9.5px; padding: 5px 11px; margin-bottom: 12px; letter-spacing: normal; }
    .ngKapak__baslik{ font-size: 21px; max-width: 92%; margin-bottom: 8px; }
    .ngKapak__mesaj{ font-size: 12px; max-width: 88%; line-height: 1.5; }
    .ngKapak__cizgi{ width: 40px; margin-top: 14px; }
  }

  /* ============================================================
     KATEGORI KAPAK - FIGMA OLCULERI (1440x300) + GORSEL + BREADCRUMB
     ------------------------------------------------------------
     Istenen: banner tam sayfa genisliginde (1440) ve 300px yuksekliginde,
     uzerine gorsel yuklenebilir, breadcrumb banner'in SOL UST kosesinde
     banner basligiyla ayni hizada.

     Tam genislik: banner "#divIcerik" (padding: 0 60px) ya da
     ".ngKapakSarici" (ayni padding) icinde duruyor; 100vw KULLANILMADI
     cunku 100vw kaydirma cubugunu da sayar ve dar ekranlarda yatay
     kaydirma yaratir. Bunun yerine kutu, ebeveynin iki yanindaki gutter
     kadar buyutulup ayni miktarda negatif margin ile geri cekiliyor -
     sonuc tam olarak sayfa genisligi, kaydirma cubugu sorunu yok.

     Yukseklik: mobilde oran kilidi (aspect-ratio) korunuyor, masaustunde
     sabit 300px. Tam kenardan kenara uzandigi icin masaustunde kose
     yuvarlakligi kaldirildi (yuvarlak kose ekranin kenarinda tuhaf durur).
     ============================================================ */
  @media (min-width: 1042px) {
    .ngKapak {
      aspect-ratio: auto;
      height: 300px;
      width: calc(100% + var(--ng-gutter) * 2);
      margin-left: calc(var(--ng-gutter) * -1);
      margin-right: calc(var(--ng-gutter) * -1);
      border-radius: 0;
    }
    .ngKapak:after { border-radius: 0; }
    /* Icerik, sayfanin geri kalaniyla ayni sol bosluktan baslar - boylece
       baslik, breadcrumb ve alttaki urun listesi ayni dikey cizgide. */
    .ngKapak__icerik { padding: 0 var(--ng-gutter); }
  }

  /* Gorsel katmani (istege bagli): V2-JS'teki KAPAK_BANNERLARI listesinde
     ilgili kategoriye "gorsel: '...'" yazilirsa basilir. Gorsel yoksa
     mevcut gradyan zemin oldugu gibi gorunur - iki mod da desteklenir. */
  .ngKapak__gorsel {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
  }
  /* Gorsel uzerinde metnin okunur kalmasi icin soldan saga acilan perde.
     Duz siyah yerine site laciverti kullanildi ki gorselsiz moddaki
     gradyanla ayni aileden gorunsun. */
  .ngKapak__perde {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(0,28,61,.86) 0%, rgba(0,28,61,.62) 42%, rgba(0,28,61,.20) 100%);
    z-index: 1;
  }
  .ngKapak__filtre, .ngKapak__isik { z-index: 1; }
  .ngKapak__icerik { z-index: 2; }

  /* Breadcrumb banner'in ICINE tasindi (V2-JS breadcrumbTasi()).
     Konum: sol ust, basligin sol kenariyla AYNI hizada - hizalama
     "ayni padding degeri" ile saglaniyor, ayri bir piksel degeri
     verilmiyor ki gutter degisirse ikisi birlikte kaysin. */
  .ngKapak .categoryTitleText {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    float: none;
    width: auto;
    padding: 16px var(--ng-gutter) 0 !important;
    margin: 0;
  }
  .ngKapak ul.breadcrumb { padding: 0; margin: 0; }
  /* Taban tema "body ul.breadcrumb *{line-height:50px}" veriyor - banner
     icinde 50px'lik satir yuksekligi breadcrumb'i asagi itiyor. */
  .ngKapak ul.breadcrumb *,
  .ngKapak ul.breadcrumb li:after {
    line-height: 22px !important;
    color: rgba(255,255,255,.72);
  }
  .ngKapak ul.breadcrumb li:nth-last-of-type(1) span { color: #fff; }
  .ngKapak ul.breadcrumb a:hover span { color: var(--ng-gold-300, #E8D1B0); }

  @media (max-width: 1041px) {
    .ngKapak .categoryTitleText { padding: 12px 8% 0 !important; }
  }

  /* ============================================================
    LISTEDE HAVALE FIYATI
    ------------------------------------------------------------
    Urun kartinda indirimli fiyatin altinda havale fiyati gosterilir.
    Deger, site ayarlarindaki havale indirim yuzdesinden hesaplanir
    (siteSettings.odemeAyarlari.havaleIndirimYuzde).
    Havale kapaliysa satir hic olusmaz.
    ============================================================ */
  /* Acik yesil tam genislik kutu; urun adi / fiyat / Sepete Ekle ile ayni hizada */
  .ngListeHavale{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 9px 10px;
    background: var(--ng-green-50);
    border-radius: var(--ng-radius);
  }
  .ngListeHavaleEtiket{
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ng-green-700);
    background: none;
    padding: 0;
    line-height: 18px;
  }
  .ngListeHavaleTutar{
    font-size: 15px;
    font-weight: 600;
    color: var(--ng-green-700);
    line-height: 18px;
  }

  .TukendiIco { z-index: 5;border-radius: var(--ng-radius);background:transparent; position: absolute; right: 0; left: 0; top: 0; height: 100%;overflow:hidden;}
  .TukendiIco span {line-height: 40px;background:rgba(255,255,255,0.92);position: absolute;left: 0;bottom: 50%;right: 0;max-width: 200px; border:none;color: var(--ng-navy-900);font-size: 13px;font-weight: 500;padding: 0;border-radius: var(--ng-radius);text-transform:uppercase;margin: 0 auto;}
  /*stokyok*/
  .StokYok .cargoIcon, .StokYok .firsatIcon, .StokYok .newIcon { display: none!important; }
  /*playbuton*/
  body .productItem .divVideoPlayButton { position: absolute; right: 0; left: 0; top: 0;bottom:0;width: 40px;height: 40px;margin: auto; overflow:hidden;}
  body .productItem .divVideoPlayButton a.urunListeVideoPlay{color: #fff;float: left;width: 100%;height: 100%;}
  body .productItem .divVideoPlayButton a.urunListeVideoPlay i{font-family: 'FontAwesome';font-weight: 300;font-size: 40px;display: inline-block;vertical-align:top;margin-top:0;text-shadow:0 0 4px #848484;}
  body .productItem .divVideoPlayButton a.urunListeVideoPlay i.fa-play-circle-o:before{content: '\f144';}
  body .productItem .divVideoPlayButton a.urunListeVideoPlay i.fa-pause-circle-o:before{content: '\f28b';}
  /*ekbutonlar*/
  .productItem .urunListeAdet, .productItem.StokYok .urunListeAdet,.boxBedenlerContent,.productIcon .quickViewIco,.productItem:hover .productIcon .quickViewIco{display:none !important;}
  /*******************************************KATEGORi**********************************/
  .Block_Title { display: none; }
  .noProduct { background: url('/Uploads/Images/urunyok.png') center center no-repeat !important; width: 212px; height: 214px; }
  .noProduct * { display: none !important; }
  #divUstFiltreKategori { display: none; }
  #divUstFiltreMarka { display: none; }
  /*kategoriAciklama*/
  .categorydesign {float: left;width: 100%;text-align: center;margin: 30px 0;}
  .categorydesign .Blok{margin: 0;}
  .leftBlock .categorydesign {display:block;}
  .categorydesign *{color: #8E8F9A;font-size: 22px;font-weight: 400;line-height: 32px;}
  .categorydesign h1{color: #061D4C;font-size: 24px;font-weight: 400;}
  .categorydesign p{margin: 0;}
  .categorydesign strong{font-weight:bold;}
  .categorydesign strong *{font-weight:bold;}
  .categorydesign img {display:inline-block;vertical-align:middle;}  .breadcrumbContent { float: left; }
  body ul.breadcrumb { margin: 0 auto;display: block!important; padding: 0; border-radius: var(--ng-radius);float: none;list-style: none;clear: none;}
  body ul.breadcrumb * { color: #ADADAD; font-size: 13px!important; line-height: 50px!important; float: left; font-weight: 400;}
  body ul.breadcrumb li {font-size: 0!important;float: none!important; vertical-align:middle;}
  body ul.breadcrumb li:after { content: '>'; display: inline-block; margin: 0 5px; color: #ADADAD; font-size: 13px; line-height: 50px; float: left; font-weight:400;}
  body ul.breadcrumb li:nth-last-of-type(1):after { display: none;}
  body ul.breadcrumb li:nth-last-of-type(1) span { color: #3C3436;}
  body a#linkOncekiSayfa {line-height: 30px; display: none; color: #000 ; font-size: 12px!important; font-weight: normal;}
  .leftImage a#linkOncekiSayfa {display: none;}
  /*ustalan*/
  .categoryTitleText {float: left;width: 100%;}
  body.CategoryBody .categoryTitleText {padding: 0 60px;}
  .categoryTitle { float: left; width: 100%;}
  body.CategoryBody .categoryTitle {padding: 0;}
  .urunListRel { width: 100%; float: left; position: relative; margin: 0 0 50px 0;}
  .brandlistselection {display:inline-block;vertical-align: top;float: left;margin:0;width: 100%;}
  .brandlistselection .clear { clear: none;display: none; }
  .brandlistselection ul {padding: 0;margin: 0;list-style: none;}
  .brandlistselection .sortingContent{background:#ddd;}
  .brandlistselection .sortingContent li {float: right; background:transparent;border-radius: var(--ng-radius) !important;}
  .brandlistselection .sortingContent li a {background:transparent;border-radius: var(--ng-radius) !important;padding: 0;}
  .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet {float: right;}
  .blockSelect .sort_hrz{display: none;}
  .blockSelect .sort_2{display: none;}
  .blockSelect .sort_5{display: none;}
  .category-vertical-filters .vertical-filter-panel .list-group{list-style:none;padding: 0;margin: 0;}
  .category-vertical-filters .vertical-filter-panel .list-group ul{list-style:none;padding: 0;margin: 0;}
  body #divSayfalamaUst .category-vertical-filters.top-filters .FiltreUst{display: none;}
  body #divSayfalamaUst .category-vertical-filters.top-filters .tukgo{display: none;}
  body #divSayfalamaUst .category-vertical-filters.top-filters .filtreUygulaBtn{display: none;}
  body #divSayfalamaUst .category-vertical-filters.top-filters .moreNum{display: none;}

  /* ============================================================
     KATEGORI SOL FILTRE PANELI (masaustu, #divLeftBlock)
     ------------------------------------------------------------
     Ticimax bu blok modelinde ("Sol ve Orta Blok") filtreleri
     #divLeftBlock icinde AYRI bir <ul><li> yapisiyla render ediyor.
     Temanin eski CSS'i ise SADECE #divSayfalamaUst icindeki
     ".top-filters" (acilir panel) varyantini stiller - bu ikisi
     farkli DOM agaclari oldugu icin sol sidebar hic stillenmemis
     kaliyordu (varsayilan tarayici checkbox/input gorunumu).
     ============================================================ */
  @media (min-width:1042px) {
    #divLeftBlock.leftBlock { padding-right: 34px; }

    #divLeftBlock .category-vertical-filters .panel { border-bottom: 1px solid var(--ng-line); padding: 20px 0; }
    #divLeftBlock .category-vertical-filters .panel:first-child { padding-top: 0; }
    #divLeftBlock .category-vertical-filters .panel:last-child { border-bottom: none; }
    #divLeftBlock .category-vertical-filters .panel-heading { margin-bottom: 16px !important; position: relative; cursor: pointer; user-select: none; padding-right: 22px !important; transition: margin-bottom .38s cubic-bezier(.22,.61,.36,1); }
    #divLeftBlock .category-vertical-filters .panel.ng-collapsed .panel-heading { margin-bottom: 0 !important; }
    #divLeftBlock .category-vertical-filters .panel-heading:after { content: '\f107'; font-family: 'FontAwesome'; position: absolute; right: 0; top: 0; color: var(--ng-gold-500); font-size: 13px; transition: transform .38s cubic-bezier(.22,.61,.36,1); }
    #divLeftBlock .category-vertical-filters .panel.ng-collapsed .panel-heading:after { transform: rotate(-90deg); }
    #divLeftBlock .category-vertical-filters .panel-title { display: block; font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: uppercase; color: var(--ng-navy-900); }
    #divLeftBlock .category-vertical-filters .ngPanelBody { overflow: hidden; transition: max-height .38s cubic-bezier(.22,.61,.36,1); }
    /* Slide disinda icerik de kendi girisiyle gelsin - panel acildiginda
       (.ng-collapsed kalkinca) veya AJAX ile taze panel eklendiginde
       cocuklar hafif yukardan gelip belirsin. */
    #divLeftBlock .category-vertical-filters .ngPanelBody > * { animation: ngPanelIcerikGir .32s cubic-bezier(.22,.61,.36,1) both; }
    #divLeftBlock .category-vertical-filters .panel.ng-collapsed .ngPanelBody > * { animation: none; }
    @keyframes ngPanelIcerikGir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

    #divLeftBlock .category-vertical-filters .panel-search-textbox { width: 100%; box-sizing: border-box; border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 9px 12px; font-size: 13px; color: #3C3436; margin-bottom: 12px !important; background: #fff; transition: border-color .18s ease; }
    #divLeftBlock .category-vertical-filters .panel-search-textbox:focus { outline: none; border-color: var(--ng-gold-500); }
    #divLeftBlock .category-vertical-filters .panel-search-textbox::placeholder { color: #A8AEB8; }

    #divLeftBlock .category-vertical-filters .list-group-item { padding: 5px 0; cursor: pointer; }
    #divLeftBlock .category-vertical-filters .list-group-item a { display: flex; align-items: center; font-size: 13px; color: #3C3436; font-weight: 400; text-transform: none; letter-spacing: normal; transition: color .18s ease; }
    #divLeftBlock .category-vertical-filters .list-group-item:before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 8px; border: 1px solid #C7CCD3; border-radius: var(--ng-radius); flex: 0 0 auto; box-sizing: border-box; transition: border-color .18s ease, background-color .18s ease; }
    /* Ticimax'in taban CSS'i hover'da ::before'a siyah arkaplan basiyor -
       !important ile ezip sadece kenarligi altin yapiyoruz. */
    #divLeftBlock .category-vertical-filters .list-group-item:hover:before { border-color: var(--ng-gold-500); background: transparent !important; }
    #divLeftBlock .category-vertical-filters .list-group-item.selected:before { background: var(--ng-gold-500); border-color: var(--ng-gold-500); content: '\f00c'; font-family: 'FontAwesome'; font-size: 9px; line-height: 15px; text-align: center; color: #fff; }
    #divLeftBlock .category-vertical-filters .list-group-item.selected:hover:before { background: var(--ng-gold-500) !important; }
    #divLeftBlock .category-vertical-filters .list-group-item.selected a { color: var(--ng-navy-900); font-weight: 500; }

    #divLeftBlock .category-vertical-filters .div-puan .starItem { color: var(--ng-gold-500); margin-right: 5px; font-size: 12px; }

    /* 2026-09-08 - BASLIK SLIDER'IN UZERINE BINIYORDU.
       Sebep: temanin GENEL (kapsamsiz) ".panel-heading{height:15px}" kurali.
       Baslik metni gercekte 18px yuksekliginde, yani kendi kutusundan 3px
       TASIYOR; bizim 16px'lik margin-bottom'umuz da bu tasan 3px'i yiyor,
       geriye ~11px kaliyor (olculdu). Yazi tipi/zoom en ufak degistiginde
       tutamac dairesi (top:-6px ile yukari tasan) basligin uzerine
       biniyor. Yukseklik sabitini kaldirmak, bosluk hesabini gercek metin
       yuksekligine oturtuyor. */
    #divLeftBlock .category-vertical-filters .panel-heading { height: auto !important; }

    /* ".FiyatSlider" max-width:170px ile sinirli (tema kurali) ve ".amount"
       da onun ICINDE olduğu icin tutar yazisi 162px'e sikisiyordu -> uzun
       rakamlarda (ör. "₺1.283.383,00 - ₺3.205.076,00") IKI SATIRA duşup
       panelin yuksekligini degistiriyor, altindaki tum filtreler asagi
       kayiyordu (kullanici ekran goruntusuyle bildirdi). Cozum: genislik
       sinirini SLIDER'A tasimak; tutar satiri panelin tam genisligini
       kullaninca tek satirda kaliyor, dolayisiyla yukseklik sabit. */
    /* 2026-09-09 - TUTAMACLAR USTTEN KIRPILIYORDU.
       Panel govdesi (".ngPanelBody", akordeon animasyonu icin
       "overflow:hidden") 920'den basliyordu; tutamaclar 14 px ve
       "top:-6px" ile raydan yukari tastigi icin 918'den basliyor,
       ust 2 px'i kesiliyordu (canli olculdu). Ust dolgu 4 -> 10:
       ray asagi iniyor, tutamacin tasan kismi govdenin icinde
       kaliyor. Yan dolgu 8: ray artik panel genisligini doldurdugu
       icin uctaki tutamaclar ("margin-left:-7px") yanlardan da
       kirpilmasin. */
    #divLeftBlock .category-vertical-filters .FiyatSlider { padding: 10px 8px 0; max-width: none; }
    /* Ray artik panel genisligini dolduruyor (eskiden 170 px, ortali).
       Sebep: alttaki tutar satiri iki uca yaslandi - ray dar kalsaydi
       rakamlar tutamaclarla hicbir yerde hizalanmazdi. */
    #divLeftBlock .category-vertical-filters .slider-range { height: 3px; background: var(--ng-line); border: none; border-radius: var(--ng-radius); max-width: none; margin: 0; }
    #divLeftBlock .category-vertical-filters .slider-range .ui-slider-range { background: var(--ng-gold-500); }
    #divLeftBlock .category-vertical-filters .slider-range .ui-slider-handle { width: 14px; height: 14px; top: -6px; margin-left: -7px; background: #fff; border: 2px solid var(--ng-navy-900); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); outline: none; cursor: pointer; }
    #divLeftBlock .category-vertical-filters .amount { margin-top: 16px; padding: 0 1px; font-size: 12px; color: #666; width: 100%; text-align: center; }
    /* 2026-09-09 - RAKAMLAR SAGA SOLA OYNUYORDU.
       Tutar satiri TEK bir metin dugumuydu ("₺5.965,00 - ₺7.440.117,00")
       ve ortali oldugu icin basamak sayisi degistikce iki uc birden
       kayiyordu. WEBJS'teki "fiyatAraligiSabitle" metni iki span'a
       boluyor; burasi da kutuyu iki uca yasliyor - kucuk deger hep
       solda, buyuk deger hep sagda sabit.
       "tabular-nums": rakamlarin hepsi ESIT genislikte cizilir, boylece
       ayni basamak sayisinda bile "1" ile "8" arasindaki genislik farki
       yuzunden olusan titreme de biter. */
    #divLeftBlock .category-vertical-filters .amount.ngFiyatAralik {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      text-align: left;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1;
    }

    /* Yuzuk olcusu - checkbox yerine chip gorunumu daha okunakli */
    #divLeftBlock .category-vertical-filters .div-secenek .list-group { display: flex; flex-wrap: wrap; gap: 8px; }
    #divLeftBlock .category-vertical-filters .div-secenek .list-group-item { padding: 0 !important; flex: 0 0 auto !important; width: auto !important; float: none !important; }
    #divLeftBlock .category-vertical-filters .div-secenek .list-group-item:before { display: none; }
    #divLeftBlock .category-vertical-filters .div-secenek .list-group-item a { display: inline-block; min-width: 34px; box-sizing: border-box; text-align: center; padding: 7px 9px; border: 1px solid var(--ng-line); border-radius: var(--ng-radius); transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
    #divLeftBlock .category-vertical-filters .div-secenek .list-group-item:hover a { border-color: var(--ng-gold-500); }
    #divLeftBlock .category-vertical-filters .div-secenek .list-group-item.selected a { background: var(--ng-gold-500); border-color: var(--ng-gold-500); color: #fff; }

    /* #divSayfalamaUst'taki acilir "+FILTRELE" paneli, sol sidebar'daki
       AYNI filtreleri bir daha, tamamen stilsiz ve sayfanin ustune
       bindirerek gosteriyordu (canli test edildi) - sol sidebar zaten
       her zaman gorunur oldugu icin bu ikinci panel sadece kafa karistirici
       bir kopya; #divLeftBlock varsa butonu tamamen gizliyoruz. */
    body:has(#divLeftBlock) .FiltreToggle { display: none; }
  }

  /* ============================================================
     KATEGORI SIRALAMA CUBUGU (masaustu, .sortingContent)
     ------------------------------------------------------------
     Tema, siralama secimlerinin bir <select> kutusu olarak
     geldigini varsayip stilini ona gore (".Slct" sinifina bagli)
     yazmis; Ticimax bunun yerine duz bir <ul><li> listesi
     gonderiyor, ".Slct" hic eklenmiyor, secenekler bosluksuz
     yan yana akiyordu.
     ============================================================ */
  @media (min-width:1042px) {
    body #divSayfalamaUst:not(.Slct) .brandlistselection { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 0; border-top: 1px solid var(--ng-line); border-bottom: 1px solid var(--ng-line); margin-bottom: 24px; }
    /* "width:auto" ile ".sortingContent" ".brandlistselection" (gercek flex
       konteyner) icinde icerigine gore daralan (shrink-to-fit) bir flex-item
       oluyordu - genislik %100'e sabitlenince (kendi ic duzeni hala "display:
       block!important" tabanli float/blok mekanizmasiyla calisiyor, bu SADECE
       disaridan ne kadar genislik aldigini degistiriyor) sol/sag gruplar
       gercekten cubugun iki ucuna yayilabiliyor. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent { display: flex; align-items: center; flex-wrap: wrap; background: transparent; width: 100% !important; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.sortingButton { float: none; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.sortingButton + li.sortingButton { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--ng-line); }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.sortingButton a { display: inline-block; padding: 6px 10px !important; margin: -6px -10px; border-radius: var(--ng-radius) !important; font-size: 12px; letter-spacing: normal; color: #666; white-space: nowrap; background: transparent !important; transition: background-color .18s ease, color .18s ease; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.sortingButton a:hover { color: var(--ng-navy-900); }
    /* font-weight ile "secili" gostermek METIN GENISLIGINI degistirip satirdaki
       diger ogeleri (sag taraftaki urun sayisi/grid ikonlari) kaydiriyordu -
       secim SADECE renk+zeminle gosteriliyor, kalinlik sabit kaliyor. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.sortingButton a.selected { color: var(--ng-navy-900) !important; background: var(--ng-bg-soft) !important; }
    /* Urun adedi ("543 Urun") cubugun EN SAGINDA - taban kural zaten
       "sortingContent li{float:right}" idi, sadece yukseklik/hiza icin
       tamamlaniyor. Grid ikonlari + Siralama dropdown'u (".ngSolGrup",
       JS tarafindan olusturulur) EN SOLDA, ayri bir float:left grup. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet { float: right; display: flex; align-items: center; min-height: 28px; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet span { display: inline-block; line-height: 28px; font-size: 12px; color: #666; white-space: nowrap; }
    /* Grid ikonlari + Siralama dropdown'u birlikte, cubugun solunda. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .ngSolGrup { float: left; display: flex; align-items: center; gap: 14px; min-height: 28px; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect { display: flex; align-items: center; gap: 6px; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--ng-radius) !important; color: #999 !important; background: transparent; transition: background-color .18s ease, color .18s ease; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a:hover { color: var(--ng-navy-900) !important; background: var(--ng-bg-soft); }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a.Active { color: #fff !important; background: var(--ng-navy-900); }
    /* Ticimax'in orijinal ikonlari (font glif veya harici resim) durumdan
       (varsayilan/hover/aktif) BAGIMSIZ hep ayni renkte kalip, secili
       durumda anlasilmaz oluyordu; bir de gorsel olarak sik degildi.
       <i>'yi tamamen gizleyip yerine currentColor + CSS mask ile kendi
       SVG ikonlarimizi koyuyoruz - boylece renk state'i otomatik yansir
       (tek SVG, tum renkler icin - ayri hover/active resmi gerekmez). */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a i { display: none !important; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a { position: relative; }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a:before {
        content: '';
        display: block;
        width: 16px; height: 16px;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
        -webkit-mask-position: center; mask-position: center;
        -webkit-mask-size: contain; mask-size: contain;
        transition: background-color .18s ease;
    }
    /* data-type Ticimax'in kendi kolon-sayisi degeri (1=liste, 2/3/4=izgara) -
       sort_N sinif adlari bu sayilarla ORTUSMUYOR (ör. sort_3'un data-type'i 4),
       o yuzden guvenilir eslesme icin data-type'i kullaniyoruz. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="1"]:before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='3' width='22' height='4' rx='1.4'/%3E%3Crect x='1' y='10' width='22' height='4' rx='1.4'/%3E%3Crect x='1' y='17' width='22' height='4' rx='1.4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='3' width='22' height='4' rx='1.4'/%3E%3Crect x='1' y='10' width='22' height='4' rx='1.4'/%3E%3Crect x='1' y='17' width='22' height='4' rx='1.4'/%3E%3C/svg%3E");
    }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="2"]:before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='9' height='18' rx='2'/%3E%3Crect x='13' y='3' width='9' height='18' rx='2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='9' height='18' rx='2'/%3E%3Crect x='13' y='3' width='9' height='18' rx='2'/%3E%3C/svg%3E");
    }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="3"]:before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='8.8' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='16.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='8.8' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='16.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3C/svg%3E");
    }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="4"]:before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0.5' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='6.2' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='11.9' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='17.6' y='3' width='4.8' height='18' rx='1.2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0.5' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='6.2' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='11.9' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='17.6' y='3' width='4.8' height='18' rx='1.2'/%3E%3C/svg%3E");
    }
    /* sort_5 bu magazada onclick/data-type olmadan geliyor - islevsiz,
       bu yuzden gosterilmiyor. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a.sort_5 { display: none; }

    /* Siralama dropdown'u (Fiyata Gore Artan/Azalan, Urun Adina Gore,
       Stoktakiler) - JS (siralamaDropdownYap()) tarafindan ".ngSolGrup"
       icine, grid ikonlarinin yanina ekleniyor. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .ngSiralamaDropdown {
      position: relative;
    }
    .ngSiralamaBtn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      background: #fff;
      border: 1px solid var(--ng-line);
      border-radius: var(--ng-radius);
      font-size: 12px;
      letter-spacing: normal;
      color: var(--ng-navy-900);
      cursor: pointer;
      transition: border-color .18s ease;
    }
    .ngSiralamaBtn:hover { border-color: var(--ng-gold-500); }
    /* 2026-09-08 - BUTON GENISLIGI SECIME GORE DEGISIYORDU (olculdu:
       "Sirala" 80px, "Urun Adina Gore (A-Z)" 173px) - her secimde cubuktaki
       ogeler yana kayiyordu. Sabit bir genislik veriliyor; etiket uzun
       gelirse tasmak yerine kisaltiliyor, ok her zaman sagda sabit duruyor. */
    .ngSiralamaBtn { min-width: 180px; justify-content: space-between; }
    .ngSiralamaEtiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ngSiralamaOk { flex: 0 0 auto; transition: transform .2s ease; }
    .ngSiralamaDropdown.ng-open .ngSiralamaOk { transform: rotate(180deg); }
    /* 2026-09-08 - PANEL SAGA DOGRU ACILIP EKRANI TASIYORDU.
       Buton cubugun EN SAGINDA duruyor (yeni duzen); "left:0" ile panel
       sagdan disari tasip 80px kirpiliyordu (olculdu: panel sag kenari
       1520, ekran 1440) - secenekler tam okunamiyordu. Sag kenari butonla
       hizalayip SOLA dogru aciyoruz. */
    .ngSiralamaPanel {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: auto;
      right: 0;
      min-width: 220px;
      background: #fff;
      border: 1px solid rgba(193,156,96,.35);
      border-radius: var(--ng-radius);
      box-shadow: 0 14px 34px -14px rgba(6,32,94,.28);
      z-index: 20;
      padding: 6px 0;
    }
    .ngSiralamaDropdown.ng-open .ngSiralamaPanel { display: block; }
    .ngSiralamaPanel li.sortingButton { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; border: none !important; }
    .ngSiralamaPanel li.sortingButton a {
      display: block !important;
      padding: 9px 16px !important;
      margin: 0 !important;
      font-size: 13px;
      letter-spacing: normal;
      color: var(--ng-navy-900) !important;
      white-space: nowrap;
      background: transparent !important;
      transition: background-color .15s ease, color .15s ease;
    }
    .ngSiralamaPanel li.sortingButton a:hover { background: var(--ng-bg-soft) !important; }
    .ngSiralamaPanel li.sortingButton a.selected { color: var(--ng-gold-600) !important; font-weight: 600; background: rgba(193,156,96,.08) !important; }
  }

  /* ============================================================
     SIRALAMA CUBUGU YENI DUZEN + FILTRELER BUTONU (2026-09-07)
     ------------------------------------------------------------
     Istenen duzen:
       SOL  : [Filtreler v] [543 Urun]
       SAG  : [3'lu][4'lu] [Sirala v]
     Onceki duzende ikonlar ve siralama SOLDA, urun adedi SAGDAYDI.
     Konumlandirma float ile: ".sortingContent"un kendi ic duzeni
     Ticimax'in taban temasinda "display:block!important" ile
     dayatildigi icin flex siralamasi (order) burada ise yaramiyor,
     float mekanizmasi kullaniliyor (bkz. yukaridaki aciklama).
     ============================================================ */
  @media (min-width: 1042px) {
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .ngSagGrup {
      float: right;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 28px;
    }
    /* Urun adedi artik sol grubun icinde - taban temadaki float:right
       (yukarida da tanimli) burada sifirlanmali, yoksa gruptan kopup
       cubugun sagina kaciyor. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .ngSolGrup li.appliedFilter.FiltrelemeUrunAdet {
      float: none;
      margin: 0;
    }

    /* Sadece 3'lu ve 4'lu gorunum ikonlari istendi - liste (data-type=1)
       ve 2'li (data-type=2) gizlendi. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="1"],
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="2"] {
      display: none;
    }
    /* IKON-DAVRANIS ESLESMESI DUZELTILDI: Ticimax'in data-type degeri
       satirdaki urun sayisiyla TERS gidiyor - canli olcumle dogrulandi:
       data-type="4" -> satirda 3 urun, data-type="3" -> satirda 4 urun.
       Yukaridaki blokta 3 cubuklu ikon data-type="3"e, 4 cubuklu ikon
       data-type="4"e baglanmisti; yani "3'lu" ikonuna basinca 4'lu
       gorunum aciliyordu. Ikonlar burada dogru davranisla eslestiriliyor. */
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="4"]:before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='8.8' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='16.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='8.8' y='3' width='6.4' height='18' rx='1.5'/%3E%3Crect x='16.3' y='3' width='6.4' height='18' rx='1.5'/%3E%3C/svg%3E");
    }
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent .blockSelect a[data-type="3"]:before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0.5' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='6.2' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='11.9' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='17.6' y='3' width='4.8' height='18' rx='1.2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0.5' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='6.2' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='11.9' y='3' width='4.8' height='18' rx='1.2'/%3E%3Crect x='17.6' y='3' width='4.8' height='18' rx='1.2'/%3E%3C/svg%3E");
    }

    /* Filtreler butonu - siralama butonuyla ayni dil (beyaz zemin, ince
       cizgi, lacivert metin), cubugun EN SOLUNDA. */
    .ngFiltreBtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      background: #fff;
      border: 1px solid var(--ng-line);
      border-radius: var(--ng-radius);
      font-size: 12px;
      font-family: inherit;
      letter-spacing: normal;
      color: var(--ng-navy-900);
      cursor: pointer;
      transition: border-color .18s ease, background-color .18s ease;
    }
    .ngFiltreBtn:hover { border-color: var(--ng-gold-500); }
    .ngFiltreBtn__ikon { flex: 0 0 auto; }
    .ngFiltreBtn__ok { flex: 0 0 auto; transition: transform .2s ease; }
    /* Panel KAPALIYKEN ok yukari bakar (tekrar acmaya davet) ve buton
       "secili" gorunumune gecer - kullanici filtrelerin gizli oldugunu
       cubuga bakinca anlar. */
    .ngFiltreBtn.ng-kapali { background: var(--ng-bg-soft); border-color: var(--ng-navy-900); }
    .ngFiltreBtn.ng-kapali .ngFiltreBtn__ok { transform: rotate(-90deg); }

    /* --- FILTRE PANELI AC/KAPA ---
       Sol sutun gizlenince urun sutunu tam genislige cikar. Urun
       kartlarinin genisligi yuzde tabanli (col-3/col-4) oldugu icin
       kartlar kendiliginden yeniden dizilir, ek bir JS hesabi gerekmez.
       Gecis animasyonu BILEREK YOK: #divLeftBlock float:left ve icerigi
       AJAX ile yeniden uretiliyor; genislik animasyonu sirasinda kartlar
       her karede yeniden akip titriyordu (canli testte goruldu). */
    body.ngFiltreKapali #divLeftBlock { display: none !important; }
    body.ngFiltreKapali #divCenterBlock { width: 100% !important; }

    /* --- FILTRE PANELI "GUNCELLENIYOR" DURUMU ---
       Ticimax bir filtre secildiginde sol panelin tamamini sunucudan
       yeniden getirip bastan ciziyor (GetFilterVariablesV3) - bu istegi
       durduramiyoruz, kendi kodu atiyor. Geriye kalan gorunur etki,
       yeniden cizim anindaki kisa titreme. Panel o an hafifce soluklasip
       tiklama almiyor: kullanici "yenilendi" degil "guncelleniyor"
       goruyor, ustelik yenileme bitmeden ikinci bir secim yapip
       istekleri ust uste bindiremiyor.
       Sinifi V2-JS ekleyip kaldiriyor (ngFiltreYenilenmeBasla/Bitti).
       Gecis kurali DURUM SINIFININ DISINDA, cunku hem solma hem geri
       acilma animasyonlu olsun (durum sinifina konsaydi sinif
       kaldirilinca gecis de kaybolur, panel aniden geri gelirdi). */
    #divLeftBlock .category-vertical-filters {
      transition: opacity .18s ease;
    }
    body.ngFiltreYenileniyor #divLeftBlock .category-vertical-filters {
      opacity: .45;
      pointer-events: none;
    }
  }

  /* ============================================================
     KATEGORI ALT BANNER (1370x475) - guven rozetlerinin USTUNDE
     ------------------------------------------------------------
     V2-JS kategoriAltBanner() uretir ve ".widgetContainer" (guven
     rozetleri) elemaninin HEMEN ONUNE ekler; boylece istenen sira
     olusur: urunler -> alt banner -> guven rozetleri -> footer.

     Olcu: genislik en fazla 1370px (sayfa ortasinda), yukseklik
     475px. Dar ekranlarda genislik daralinca sabit 475px yukseklik
     gorseli asiri kirpacagi icin 1370/475 oraniyla olceklenir.
     ============================================================ */
  /* Yan bosluk BILEREK genel gutter (60px) DEGIL: istenen olcu 1440'lik
     tasarimda 1370px, yani her iki yanda 35px. 60px gutter kullanilsaydi
     1440 ekranda kutuya 1320px kalip 1370'e hic ulasilamazdi. Kucuk bir
     guvenlik boslugu (20px) birakilip genislik max-width ile kilitleniyor. */
  .ngAltBannerSarici {
    width: 100%;
    float: left;
    clear: both;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 48px 0 8px;
  }
  .ngAltBanner {
    position: relative;
    width: 100%;
    max-width: 1370px;
    height: 475px;
    margin: 0 auto;
    border-radius: var(--ng-radius);
    overflow: hidden;
    background:
      radial-gradient(120% 140% at 85% 15%, rgba(206,162,92,.30) 0%, rgba(206,162,92,.07) 36%, transparent 64%),
      linear-gradient(118deg, #001C3D 0%, #0A2B5C 60%, #001C3D 100%);
    box-shadow: 0 14px 36px -18px rgba(0,28,61,.42);
  }
  .ngAltBanner__gorsel {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
  }
  .ngAltBanner__perde {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(0,28,61,.84) 0%, rgba(0,28,61,.58) 44%, rgba(0,28,61,.18) 100%);
    z-index: 1;
  }
  .ngAltBanner__icerik {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 7%;
  }
  .ngAltBanner__etiket {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    letter-spacing: normal; text-transform: uppercase;
    color: #E8D1B0;
    border: 1px solid rgba(232,209,176,.42);
    border-radius: var(--ng-radius);
    padding: 6px 14px;
    margin-bottom: 18px;
  }
  .ngAltBanner__baslik {
    font-family: 'Cormorant Garamond', serif;
    color: #fff;
    font-size: 44px; font-weight: 600; line-height: 1.14;
    letter-spacing: normal;
    margin: 0 0 14px;
    max-width: 62%;
    text-shadow: 0 2px 18px rgba(0,0,0,.28);
  }
  .ngAltBanner__baslik em { font-style: normal; color: #E8D1B0; }
  .ngAltBanner__mesaj {
    color: rgba(255,255,255,.86);
    font-size: 15px; line-height: 1.6;
    max-width: 46%;
    margin: 0 0 24px;
  }
  .ngAltBanner__buton {
    display: inline-block;
    padding: 13px 30px;
    border-radius: var(--ng-radius);
    background: var(--ng-gold-500);
    color: #10203C !important;
    font-size: 13px; font-weight: 600;
    letter-spacing: normal;
    transition: background-color .18s ease, transform .18s ease;
  }
  .ngAltBanner__buton:hover { background: #E8D1B0; transform: translateY(-1px); }

  @media (max-width: 1409px) {
    /* 1370 + 2x20 yan bosluk = 1410px. Bunun altinda kutu daralmaya
       baslar; sabit 475px yukseklik orani bozup gorseli asiri kirpacagi
       icin yukseklik 1370/475 oraniyla olceklenir. */
    .ngAltBanner { height: auto; aspect-ratio: 1370 / 475; }
  }
  @media (max-width: 1041px) {
    .ngAltBannerSarici { margin: 32px 0 4px; }
    .ngAltBanner__baslik { font-size: 30px; max-width: 78%; }
    .ngAltBanner__mesaj { font-size: 13.5px; max-width: 66%; }
  }
  @media (max-width: 767px) {
    .ngAltBannerSarici { padding: 0 10px; }
    .ngAltBanner { aspect-ratio: 3 / 4; }
    .ngAltBanner__icerik { padding: 0 8%; }
    .ngAltBanner__etiket { font-size: 9.5px; padding: 5px 11px; margin-bottom: 12px; }
    .ngAltBanner__baslik { font-size: 22px; max-width: 94%; margin-bottom: 10px; }
    .ngAltBanner__mesaj { font-size: 12.5px; max-width: 94%; margin-bottom: 18px; }
    .ngAltBanner__buton { padding: 11px 22px; font-size: 12px; }
  }

  /* ============================================================
     "URUN BULUNAMADI" DURUMU
     ------------------------------------------------------------
     Ticimax bu durumda #divUrunYok icine TEK BIR DUZ RESIM basiyordu
     (/Scripts/images/urunyok/tr.png) - CSS ile stillendirilemiyordu.
     JS (urunYokGorseliDegistir) icerigi kendi ikon+metin yapimizla
     degistiriyor, burada sadece o yapinin gorunumunu tanimliyoruz.
     ============================================================ */
  #divUrunYok { width: 100%; float: left; }
  .ngUrunYok { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 20px; gap: 14px; }
  .ngUrunYok__ikon { width: 56px; height: 56px; color: var(--ng-gold-500); }
  .ngUrunYok__baslik { font-size: 17px; font-weight: 600; letter-spacing: normal; color: var(--ng-navy-900); text-transform: uppercase; }
  .ngUrunYok__mesaj { font-size: 13px; line-height: 1.6; color: #767E8C; max-width: 340px; }

  /*filtresecili*/
  body #divSayfalamaUst .filterDeleteContent{float: left;margin:0 0 10px;padding:0; width: 100%;}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter{padding: 0;margin: 0 15px 0 0;height: auto;background:transparent;border: 1px solid #666;width: auto;border-radius: var(--ng-radius);}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter a{width: 25px;margin: 0;}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter a i{font-family: 'FontAwesome';line-height: 30px;color: #040404;font-size: 15px;font-weight: 300;}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter a i:before{content: '\f00d';}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter .filter-content span{color: #666;font-size: 12px;text-align: left;margin-top: 7px;font-weight:normal;}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter .filter-content span+span{color: #666;margin-top: 3px;}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir{display: block;}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir a{width: 100%; background:transparent;line-height: 1;margin: 0;padding: 0 5px;}
  body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir a span{line-height:30px;font-weight: normal;font-size: 12px;text-align:center;margin: 0;width: 100%;}
  /*sayfalama*/
  .brandlistselectionBottom { margin-bottom: 0; display: none; }
  #divSayfalamaAlt { width: 100%; margin:0;}
  .pageNumber { float: right; text-align: right; margin:0;display: none;}
  .pageNumber a { }
  .pageNumberContent { }
  .pageNumberBottom { float: right; text-align:center;margin:50px 0;padding:0;width: 100%;display:block;vertical-align: middle;}
  .pageNumberContent, .pageBorder { display: inline-block; vertical-align: top;}
  .pageNumberContent a, .pageBorder a {min-width:34px;height:34px;line-height:32px;font-size:15px;font-weight:500;color: var(--ng-navy-700);background:#fff;border-radius: var(--ng-radius);border:1px solid var(--ng-line);float:left; position: relative;display: block;text-align:center;margin: 0 5px;}
  .pageNumberContent a.butonDisabled, .pageBorder a.butonDisabled {opacity: 1!important;}
  .pageNumberContent a:hover, .pageBorder a:hover {color: #fff;background: var(--ng-navy-700);border-color:var(--ng-navy-700);}
  .pageNumberContent a.SelectedSayfa, .pageBorder a.SelectedSayfa {color: #fff;background: var(--ng-navy-700);border-color:var(--ng-navy-700);}
  .KategoriFilitrelemeContent .Block_Title { display: none; }
  /*******************************************KATEGORi**********************************/
  /*******************************************URUN DETAY********************************/
  .RightDetail > .clear { clear: none; }
  .ProductDetailMain{float:left;width: 100%;}
  .ProductDetailMainRow{float:left;width: 100%;}
  .TopDet { float: left; width: 100%; position: relative;margin:0;}
  .leftImage { width: 1195px; float: left; position: relative;padding:0;}
  .RightDetail { width:calc(100% - 1195px); float: left; position: relative;padding: 0 60px 0 30px;}
  /* Yeni galeri (ngGalleryActive) aktifken sag "buy box" (baslik+fiyat+
     varyant+Sepete Ekle/Hemen Al+ikonlar - .TopList, .MiddleList,
     .BottomList; urunGaleriDuzenle() JS'i tarafindan .ngRightSticky icinde
     birlestiriliyor) sol thumbnail seridiyle AYNI top degerinde sticky -
     gorseller bitene kadar sabit kalir. Akordeon (#divUrunOzellikAlani)
     BILEREK bunun DISINDA, sticky kutudan hemen sonra normal akiskan
     birakiliyor - akordeon icerigi (ör. taksit tablosu) ongorulemez
     sekilde cok buyuyebiliyor, bu da sticky kutunun icindeyken toplam
     yuksekliginin surekli degisip sticky'nin yapisik kalma hesabini
     bozmasina sebep oluyordu (bkz. JS UrunDetayIslemleri() yorumu).
     Sticky bir elemanin ne kadar "yapisik" kalacagi kendi ic-icerigine
     degil, etraf kutusunun (.RightDetail) yuksekligine bagli. Buy box
     tek basina sol taraftaki uzun gorsel yiginindan cok daha kisa oldugu
     icin ".TopDet" flex yapilip ".RightDetail" ".leftImage" ile ayni
     yukseklige geriliyor (align-items:stretch) - boylece sticky'nin
     konteyneri gercekten galeri kadar uzun oluyor. Doldurulmayan fazla
     bosluk normal ve beklenen (kisa bir sticky kenar cubugunun uzun ana
     icerigin yanindaki bosluk birakmasi). */
  .TopDet:has(.leftImage.ngGalleryActive) {
    display: flex;
    align-items: stretch;
  }
  .TopDet:has(.leftImage.ngGalleryActive) .leftImage,
  .TopDet:has(.leftImage.ngGalleryActive) .RightDetail {
    float: none;
  }
  .ngRightSticky {
    position: sticky;
    top: 148px;
    overflow-anchor: none;
  }
  /* .TopList/.MiddleList/.BottomList float:left oldugu icin parent
     yuksekligine katki saglamiyor - overflow:hidden clearfix ile
     .ngRightSticky yuksekligi dogru hesaplaniyor. (max-height+overflow-y:auto
     denendi ama tarayici scrollTop'u otomatik kirpiyor - kaldirildi; asil
     koruma JS'teki akordeonYumusat()'ta.) */
  .ngRightSticky {
    overflow: hidden;
  }
  .ngRightSticky > .TopList,
  .ngRightSticky > .MiddleList,
  .ngRightSticky > .BottomList {
    float: none !important;
  }
  /*Urun Resim*/
  .leftImage .ProductGallery {float: left;width: 100%;}
  .leftImage .ProductGallery .gallery-container {float: left;width: 100%;position: relative;}
  .leftImage .ProductGallery .gallery-container .GalleryArea {float: right;width: 500px;margin: 0;padding: 0;}
  .leftImage .ProductGallery .gallery-container .galleryOwl-thumb {float: left;width: 90px;border: none;background:transparent;height: 100%;display: block;}
  .leftImage .ProductGallery .gallery-container .galleryOwl-thumb .thumb-list {float: left;width: 100%;padding: 0;margin: 0;overflow-y: auto;overflow-x: hidden;max-height: 100%;}
  .leftImage .ProductGallery .gallery-container .galleryOwl-thumb .thumb-list .thumb-item {float: left;clear: left;width: 80px;margin-bottom: 15px;}
  .leftImage .ProductGallery .owl-carousel.galleryOwl .owl-dots{display: none;}
  .UrunDetayLeft { margin: 0 !important; overflow: hidden; }
  .Images,#divVideoGoruntulemeAlan { float: right; width: 500px;padding-bottom:150%; position: relative;display: none!important;}
  .Images img,#vdUrunVideo { max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto;}
  .cloudzoom-blank > div:last-child { display: none !important; }
  .SmallImages {display: flex !important;float: left;width: 100%;flex-flow: wrap;}
  .SmallImages div {float: left;width: 50%;cursor: pointer;padding: 0 10px 10px 0;}
  .SmallImages div img {max-width: 100%;max-height: 100%;}

  /* URUN DETAY GALERISI: sticky thumbnail rail + ortada dikey dizili buyuk
     gorseller. JS (urunGaleriDuzenle) sadece genis ekranda .leftImage'a
     "ngGalleryActive" sinifini ekleyip yeni bir .ngThumbRail olusturuyor;
     bu kurallar sadece o sinif varken devreye giriyor - mobilde/dar
     ekranda eski 2 sutunlu gorsel izgarasi aynen kalir. */
  .leftImage.ngGalleryActive { display: flex; align-items: flex-start; gap: 16px; }
  .leftImage.ngGalleryActive .ngThumbRail {
    position: sticky;
    top: 148px; /* sabitlenmis header (128px) + nefes payi */
    flex: 0 0 78px;
    width: 78px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 168px);
    overflow-y: auto;
    padding: 2px;
  }
  .leftImage.ngGalleryActive .ngThumbRail::-webkit-scrollbar { width: 4px; }
  .leftImage.ngGalleryActive .ngThumbRail::-webkit-scrollbar-thumb { background: rgba(6,32,94,.15); border-radius: var(--ng-radius); }
  .leftImage.ngGalleryActive .ngThumbItem {
    display: block; width: 100%; aspect-ratio: 1; border-radius: var(--ng-radius-img); overflow: hidden;
    cursor: pointer; padding: 0; background: none; flex-shrink: 0;
    border: 1px solid transparent; transition: border-color .2s ease-in-out;
  }
  .leftImage.ngGalleryActive .ngThumbItem.is-active { border-color: var(--ng-navy-900); }
  .leftImage.ngGalleryActive .ngThumbItem img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .leftImage.ngGalleryActive .SmallImages { display: block !important; flex: 1 1 auto; width: auto; min-width: 0; }
  .leftImage.ngGalleryActive .SmallImages .AltImgCapSmallImg {
    width: 100% !important; float: none; margin: 0 0 16px 0 !important; padding: 0 !important; position: relative;
    background: #f5f2ec; overflow: hidden; aspect-ratio: 1;
  }
  /* Urun gorselleri sitede tutarli sekilde 1:1 kare (1000x1000) - aspect-
     ratio:1 sayesinde gorsel henuz yuklenmeden container dogru yukseklikte
     hazir duruyor, aksi halde img yuklenene kadar tum .ngLoadBar'lar ust
     uste ince ince yigilip garip goruntu veriyordu. */
  .leftImage.ngGalleryActive .SmallImages .AltImgCapSmallImg img { width: 100%; height: 100%; max-width: 100%; max-height: none; display: block; object-fit: cover; }
  .leftImage.ngGalleryActive .SmallImages .AltImgCapSmallImg .ngLoadBar {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px; overflow: hidden; z-index: 2;
    background: rgba(6,32,94,.06);
  }
  .leftImage.ngGalleryActive .SmallImages .AltImgCapSmallImg .ngLoadBar:after {
    content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--ng-gold-500), transparent);
    animation: ngGaleriYukleniyor 1.1s ease-in-out infinite;
  }
  .leftImage.ngGalleryActive .SmallImages .AltImgCapSmallImg.ng-loaded .ngLoadBar { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  @keyframes ngGaleriYukleniyor { 0% { left: -40%; } 100% { left: 100%; } }

  .leftImage .productTimer{display: none!important;}
  .DetayYeniUrun {display:none!important;}
  /*sagalan*/
  .RightDetail .TopList { float: left; width: 100%; position: relative;}
  .RightDetail .MiddleList { float: left; width:100%; position: relative;}
  .RightDetail .BottomList { float: left; width:100%; position: relative;}
  /*urunadi*/
  .ProductName { float:left;position: relative;margin:0 0 6px 0;width: 90%;}
  .ProductName h1 { margin: 0; float: left;width: 100%;}
  /* Kullanici talebi: buyuk/kucuk harf aktif olsun (tamamen BUYUK HARF degil,
     urun adinin girildigi haliyle gorunsun). */
  /* Kullanici talebi: baslik Cormorant Garamond (h1 genel kurali) yerine
     govde fontuyla (Manrope, tirnaksiz), daha ince (400) ve biraz daha
     buyuk puntoyla (24px -> 28px) gozuksun. */
  .ProductName h1 span { float: left; width: 100%; display: inline-block; color: var(--ng-navy-700); font-family: 'Manrope', sans-serif; font-size: 28px; font-weight:400;line-height:1.35;text-transform: none;letter-spacing: normal;}
  /*stokkodu*/
  #divUrunKodu {float:left;clear:left; color: #717171; font-size: 14px; font-weight: 400; line-height: 16px; padding: 0;margin:0 0 10px 0;}
  #divUrunKodu span{ display:inline-block;vertical-align:top;color: #717171; font-size: 14px; font-weight: 400; position: relative; line-height: 16px;float: left;}
  #divUrunKodu span:after{content: ':';margin: 0 4px;}
  /*taksitaciklama*/
  #divTaksitAciklama { display:block;float: left;clear:left;margin-top:10px;}
  #divTaksitAciklama .taksitSatir {color: #000; font-size: 14px;line-height: 14px;}
  /*paunver*/
  .RightDetail .puanVer {float:left;clear: left;margin: 0 0 10px 0;}
  .RightDetail #PuanVer{float: left;}
  .RightDetail .PuanVerSag {float: left;color: #000;font-size: 15px;line-height: 15px; margin: 0 0 0 10px;}
  .RightDetail ul.rating { float: left;padding: 0;margin: 0;list-style: none; }
  .RightDetail ul.rating li {float: left; margin-right: 0;width: auto;height: auto;padding: 0 2px 0 0;font-size: 0;}
  .RightDetail ul.rating li i.starItem { font-size: 15px; line-height:15px;height: auto;font-weight: 300;font-family:'FontAwesome';position:static;}
  .RightDetail ul.rating li i.starItem:before { content: '\f005';}
  .RightDetail ul.rating li i.starItem:hover { font-size: 15px; font-weight: 600;}
  .RightDetail ul.rating li.filled i {  font-weight: 600;}
  .RightDetail .rating-stars ul>li.star.hover>i.fa{font-weight:600;}
  .RightDetail .rating-stars ul>li.star.selected>i.fa{font-weight:600;}
  .RightDetail ul.rating li i.starItem, .RightDetail ul.rating li.filled i, .RightDetail .rating-stars ul>li.star.hover>i.fa,
  .RightDetail .rating-stars ul>li.star.selected>i.fa{color: #3C3436;}
  /*markaresmi*/
  .markaresmi { float: left;position: relative; z-index: 1;}
  .markaresmi a { float: left; }
  .markaresmi img { max-width: 100%;float: left;}
  /*magazastok*/
  #divMagazaStok{float:left;clear:left; margin:10px 0 0!important;}
  #divMagazaStok a{display: inline-block;vertical-align:top; color: #000; font-size: 14px; font-weight:normal;line-height: 14px;}
  /*on yazi*/
  #divOnyazi {float:left;width: 100%;}
  #divOnyazi .teksatir{margin-bottom: 10px;float: left;width: 100%;font-size: 14px;font-weight: 400;color: #606060;line-height: 26px;}
  #divOnyazi h2{font-weight:normal;font-size:100%;}
  #divOnyazi * {font-family: 'Judson', sans-serif !important;}
  #divOnyazi strong {font-weight:700;}
  #divOnyazi strong * {font-weight:700;}
  #divOnyazi i {font-family: 'FontAwesome'!important;margin-right: 12px;}
  /*fiyatlar*/
  .urunDetayFiyatContainer{}
  .PriceList { float:left;position:relative;width: 100%;padding: 0;margin:0 0 10px 0;}
  #pnlFiyatlar { display: inline-block; vertical-align: top;float:left;}
  #divIndirimliFiyat {display: block;}
  /*ekbilgi*/
  #divMarka, #divTedarikci, #divUrunStokAdedi, #divToplamStokAdedi, #divBarkod, #divParaPuan, #divTahminiTeslimatSuresi,
  #divIndirimOrani{ float:left;clear:left;margin-bottom:10px;line-height:14px;}
  #divMarka .left_line, #divTedarikci .left_line, #divUrunStokAdedi .left_line, #divToplamStokAdedi .left_line, #divBarkod .left_line, #divParaPuan .left_line, #divTahminiTeslimatSuresi .left_line,
  #divIndirimOrani .left_line{ display: inline-block;vertical-align:top; color: #717171; font-size: 14px; font-weight:400;line-height: 14px;}
  #divMarka .center_line, #divTedarikci .center_line, #divUrunStokAdedi .center_line, #divToplamStokAdedi .center_line, #divBarkod .center_line, #divParaPuan .center_line, #divTahminiTeslimatSuresi .center_line,
  #divIndirimOrani .center_line{ display: inline-block;vertical-align:top; color: #717171; font-size: 14px; font-weight:400;line-height: 14px;}
  #divMarka .right_line,#divMarka .right_line *, #divTedarikci .right_line, #divTedarikci .right_line *, #divUrunStokAdedi .right_line, #divToplamStokAdedi .right_line, #divBarkod .right_line, #divParaPuan .right_line, #divTahminiTeslimatSuresi .right_line,#divIndirimOrani .indirimliOrani,
  #divIndirimOrani .indirimliOrani *{display: inline-block;vertical-align:top; color: #717171; font-size: 14px; font-weight:400;line-height: 14px;width: auto;}
  /*piyasa fiyati*/
  .PiyasafiyatiContent {display:block;float: left;margin-right: 10px;}
  .PiyasafiyatiContent .left_line, .PiyasafiyatiContent .center_line { display: none;}
  .PiyasafiyatiContent .right_line { display: inline-block;vertical-align:top;}
  .PiyasafiyatiContent .right_line * { display: inline-block;vertical-align:top; font-weight:400; text-decoration: line-through;}
  .PiyasafiyatiContent .right_line .spanKdv {display: none!important;vertical-align: top;}
  /*indirimli fiyati*/
  .IndirimliFiyatContent {display: block;float: left;}
  .IndirimliFiyatContent .left_line, .IndirimliFiyatContent .center_line { display: none;}
  .IndirimliFiyatContent .right_line { display: inline-block;vertical-align:top;}
  .IndirimliFiyatContent .right_line * { display: inline-block;vertical-align:top; }
  .IndirimliFiyatContent .right_line .spanKdv {display: none!important;vertical-align:bottom;font-size: 12px;line-height: 1;}
  /*turk lirasi fiyati*/
  #divTurkLirasiFiyat { display: block;}
  #divTurkLirasiFiyat .left_line, #divTurkLirasiFiyat .center_line { display: none;}
  #divTurkLirasiFiyat .right_line { display: inline-block;}
  #divTurkLirasiFiyat .right_line *{ display: inline-block!important;vertical-align:top; }
  /*indirimsiz fiyati*/
  #divIndirimsizFiyat {display: block;}
  #divIndirimsizFiyat .left_line, #divIndirimsizFiyat .center_line { display: none;}
  #divIndirimsizFiyat .right_line { display: inline-block;font-weight: 400; }
  #divIndirimsizFiyat .right_line * {display: inline-block!important;vertical-align:top;}
  #divIndirimsizFiyat .right_line .spanKdv {display: none!important;vertical-align:top;}
  /*kdv dahil fiyati*/
  #divKDVDahilFiyat { display: block;float: left;margin-top: 8px;}
  #divKDVDahilFiyat .left_line { display: inline-block;vertical-align:top;font-weight: 400;margin-right: 5px;}
  #divKDVDahilFiyat .center_line { display: none;}
  #divKDVDahilFiyat .right_line * {display: inline-block!important;vertical-align:top;}
  /*fiyatrenk*/
  .PiyasafiyatiContent .right_line *{color: #A5A7B4; font-size: 24px;}
  .IndirimliFiyatContent .right_line *, #divTurkLirasiFiyat .right_line *, #divIndirimsizFiyat .right_line *, #divKDVDahilFiyat .right_line *, #divIndirimsizFiyat .right_line,
  #divIndirimsizFiyat .left_line{color: #001D3C;}
  .IndirimliFiyatContent .right_line *, #divTurkLirasiFiyat .right_line *, #divIndirimsizFiyat .right_line *,
  #divKDVDahilFiyat .right_line *{font-size: 24px; font-weight: bold;}
  #divKDVDahilFiyat .left_line,#divKDVDahilFiyat .right_line *,#divIndirimsizFiyat .left_line,.IndirimliFiyatContent,.IndirimliFiyatContent .right_line *,
  .PiyasafiyatiContent,.PiyasafiyatiContent .right_line *,#divTurkLirasiFiyat ,#divTurkLirasiFiyat .right_line *,#divIndirimsizFiyat,#divKDVDahilFiyat {line-height: 20px;}
  /* 2026-09-07: Fiyatlar Cormorant Garamond'dan Manrope'a DONDURULDU
     (kullanici talebi degisti; onceki talep fiyatlarin basliklarla ayni
     serif fontta olmasiydi, bu satirlar ondan kalmaydi). Rakamlarda
     Manrope tercih ediliyor cunku tabular/duz rakamlari serif'e gore
     daha okunakli ve sayfadaki diger fiyat gostergeleriyle (odeme
     kartlari, havale rozeti, sticky sepet bari - hepsi Manrope) ayni
     dili konusuyor. */
  .PiyasafiyatiContent .right_line *,
  .IndirimliFiyatContent .right_line *,
  #divTurkLirasiFiyat .right_line *,
  #divIndirimsizFiyat .right_line *,
  #divKDVDahilFiyat .right_line * {
    font-family: 'Manrope', sans-serif;
  }
  /* Odeme Secenekleri sekmesindeki tek cekim / havale tutarlari, kapsayici
     ".urunTabAlt *{font-family:'Judson'}" kurali yuzunden Judson istiyordu -
     Judson bu sitede HIC YUKLENMIYOR (bkz. WhatsApp ikonundaki ayni tur
     hata), yani tarayicinin genel sans fontuna dusuyordu ve ayni sayfadaki
     diger fiyatlardan farkli gorunuyordu. Onlar da Manrope'a alindi. */
  #ltrTekCekim, #ltrHavaleFiyati, .spnMiniumumTaksitTutari {
    font-family: 'Manrope', sans-serif !important;
  }
  /*Stok yok*/
  body #divStokYok{float: left;width: 100%;margin:20px 0 0;font-size: 14px;color: #000;font-weight: normal;text-align: center;padding: 5% 0;background-color: #f2f5f6;border-radius: var(--ng-radius);}
  body #divStokYok:before{content: '\f057';font-family:'FontAwesome';font-weight:300;width: 100%;float: left;font-size: 30px;margin-bottom: 20px;}
  /*Urun ekstrabilgileri*/
  #divEkstraBilgiler { float: left;clear:left;margin-top: 10px;}
  #divEkstraBilgiler img { max-width: 100%;display:block;}
  .btnnostok i.fa{font-family: 'FontAwesome';}
  /*varyasyonlar*/
  #divUrunEkSecenek { float: left;width: 100%;position: relative;margin: 20px 0 0 0;}
  #divUrunEkSecenek .eksecenekLine {clear: none !important;margin:0 0 30px 0;float: left;width: 100%;}
  #divUrunEkSecenek .eksecenekLine:last-child {border: none;padding-bottom: 0;}
  #divUrunEkSecenek .eksecenekLine .left_line {float: left;width:100%;line-height: 20px;color: #3C3436;font-size: 15px;font-weight: 400;margin: 0 0 12px 0;}
  #divUrunEkSecenek .eksecenekLine .center_line {display: none;}
  #divUrunEkSecenek .eksecenekLine .right_line { display: inline-block;vertical-align:top;}
  #divUrunEkSecenek .eksecenekLine .right_line .size_box {float: left;cursor: pointer;text-align:center;font-size: 14px;position: relative;color: #222222;font-weight: 400;margin-right: 10px;}
  #divUrunEkSecenek .eksecenekLine .right_line .size_box img { width: 100%; height: 100%; display:block;}
  /*selectvaryasyon*/
  #divUrunEkSecenek .eksecenekLine.selectvaryasyon {}
  #divUrunEkSecenek .eksecenekLine.selectvaryasyon .left_line {}
  #divUrunEkSecenek .eksecenekLine.selectvaryasyon .center_line {}
  #divUrunEkSecenek .eksecenekLine.selectvaryasyon .right_line {width: 100%;}
  #divUrunEkSecenek .eksecenekLine.selectvaryasyon .right_line select {min-width: 100%;float: left;height: 45px;border:1px solid #EFEFEF;color: #222222;font-size: 15px;font-weight: 400;padding: 0 10px;background: #fff;border-radius: var(--ng-radius);}
  /*resimlivaryasyon*/
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon { }
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .left_line { }
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .right_line { }
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .right_line .size_box { width: 38px; padding: 4px; height: 38px; }
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .right_line .size_box img {border-radius: 50%;}
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .right_line .size_box:hover { }
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .right_line .size_box:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid transparent; border-radius: 100%; }
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .right_line .size_box:hover:after,
  #divUrunEkSecenek .eksecenekLine.resimlivaryasyon .right_line .size_box.selected:after { border-color: #707070; }
  /*kutuvaryasyon*/
  #divUrunEkSecenek .eksecenekLine.kutuluvaryasyon {}
  #divUrunEkSecenek .eksecenekLine.kutuluvaryasyon .right_line{}
  #divUrunEkSecenek .eksecenekLine.kutuluvaryasyon .right_line .size_box{min-width: 90px;height: var(--ng-btn-h);line-height: 48px;text-align: center;border: 1px solid var(--ng-line);border-radius: var(--ng-radius);padding: 0 5px;font-weight:500;color:var(--ng-navy-700);}
  #divUrunEkSecenek .eksecenekLine.kutuluvaryasyon .right_line .size_box:last-child{margin-right: 0;}
  #divUrunEkSecenek .eksecenekLine.kutuluvaryasyon .right_line .size_box:hover {color: #fff;background: var(--ng-navy-700);border-color:var(--ng-navy-700);}
  #divUrunEkSecenek .eksecenekLine.kutuluvaryasyon .right_line .size_box.selected { color: #fff;background: var(--ng-navy-700);border-color:var(--ng-navy-700);}
  /*stokyokvaryasyon*/
  #divUrunEkSecenek .eksecenekLine .right_line .size_box.nostok { position: relative;background: #f5f3f3!important;color: #7a7979!important;border-color: #e4dfdd;}
  #divUrunEkSecenek .eksecenekLine .right_line .size_box.nostok img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
  #divUrunEkSecenek .eksecenekLine .right_line .size_box.nostok:after { content: ''; height: 1px; max-width: 65px;margin:0 auto; background: #cecece; left: 0;right:0; top: 50%; position: absolute;transform:rotate(140deg);-webkit-transform:rotate(140deg);}
  /*ilgili Urunler*/
  #IlgiliUrunDiv { float: left; width: 100%;}
  #IlgiliUrunDiv #divIlgiliUrunler {}
  .TopDet #IlgiliUrunDiv { display: block; float: left;width:100%;margin:0;padding: 0;}
  .TopDet #IlgiliUrunDiv #divIlgiliUrunler { padding: 0; margin: 0; background: transparent; border: none; }
  .TopDet #IlgiliUrunDiv .JKatAdi{float: left;width: 100%;margin: 0!important;padding: 0!important;text-align:left;}
  .TopDet #IlgiliUrunDiv .JKatAdi .bold{padding: 0;margin: 0;text-align:left;}
  .TopDet #IlgiliUrunDiv .JKatAdi .bold:before{display: none;}
  .TopDet #IlgiliUrunDiv .JKatAdi .bold:after{display: none;}
  .TopDet #IlgiliUrunDiv .JKatAdi .bold .satir1{background:transparent;padding: 0!important;margin: 0;border: none;font-size: 13px;line-height: 40px;font-weight: normal;color: #000;}
  .TopDet #IlgiliUrunDiv .clear { display: none; }
  .TopDet #IlgiliUrunDiv ul { float: left;width: 100%;padding: 0;margin: 0;list-style: none;}
  .TopDet #IlgiliUrunDiv ul li { float: left; width:50px;margin-right: 10px;margin-bottom: 10px; border-radius: var(--ng-radius-img);overflow:hidden;}
  .TopDet #IlgiliUrunDiv ul li:hover {}
  .TopDet #IlgiliUrunDiv ul li .productItem { border: none; width: 100%; float: left; padding: 0;box-shadow:none!important; }
  .TopDet #IlgiliUrunDiv ul li .productItem .productTimer {display: none!important;}
  .TopDet #IlgiliUrunDiv ul li .productItem .productImage {padding: 0;}
  .TopDet #IlgiliUrunDiv ul li .productItem .productImage a {}
  .TopDet #IlgiliUrunDiv ul li .productItem .productImage a:before {display: none!important;}
  .TopDet #IlgiliUrunDiv ul li .productItem .productImage img {}
  .TopDet #IlgiliUrunDiv ul li .productItem .productIcon { display: none; }
  .TopDet #IlgiliUrunDiv ul li .productItem .urunListeAdet { display: none !important; }
  .TopDet #IlgiliUrunDiv ul li .productItem .productDetail { padding: 0; margin: 0; display: none; }
  .TopDet #IlgiliUrunDiv ul li .productItem .productDetail:before { display: none; }
  .TopDet #IlgiliUrunDiv ul li .productItem .productDetail:after { display: none; }
  .TopDet #IlgiliUrunDiv ul li .productItem .productName { display: none; }
  .TopDet #IlgiliUrunDiv ul li .productItem .TukendiIco { display: none; }
  .TopDet #IlgiliUrunDiv ul li .productItem .boxBedenlerContent { display: none !important; }
  /*satinal*/
  #divSatinAl { float: left;width: 100%;margin:20px 0;padding: 0;}
  /* Rozetler - Moto Kurye ile Teslimat / Ayni Gun Kargo. "Hemen Al"
     butonunun hemen altinda, IKI ESIT SUTUN halinde (flex:1 1 0 ile hem
     genislik esitleniyor hem de flex row varsayilani "align-items:stretch"
     sayesinde YUKSEKLIK de otomatik esitleniyor - biri iki satira dusse
     bile digeri onunla ayni boya geriliyor). Toplam genislik "Hemen Al"
     ile birebir ayni: ikisi de ayni ust kapsayicida (".MiddleList")
     width:100% ve yatay margin/padding'siz - ekstra hizalama kurali
     gerekmiyor (teslimatRozetleriOlustur() JS'i ile ekleniyor). */
  .ngRozetleri{
    float:left; clear:left; width:100%;
    display:flex;
    gap:10px;
    margin:14px 0 4px;
  }
  .ngRozet{
    flex:1 1 0;
    display:flex; align-items:center; justify-content:center; gap:7px;
    padding:8px 10px;
    background:rgba(193,156,96,.07);
    border:1px solid rgba(193,156,96,.35);
    border-radius: var(--ng-radius);
    color:var(--ng-navy-900);
    font-size:12.5px;
    font-weight:500;
    letter-spacing: normal;
    line-height:1.15;
    text-align:center;
  }
  .ngRozet__ikon{ width:15px; height:15px; flex:0 0 auto; color:var(--ng-gold-500); font-size:14px; line-height:1; text-align:center; }
  /* Moto kurye ikonu kullanici talebiyle yesil */
  .ngRozet__ikon--yesil{ color:#2E9E4B; }
  /* Ana yazi tek satirda kalsin - alt satir (Istanbul'a Ozel) AYRI bir
     blok, geregi kalirsa kendi satirina duser. Boylece uc etiket birlikte
     TEK SATIRA sigar, sadece bu rozet gerekirse iki satir yukseklikte kalir. */
  .ngRozet__yazi{ white-space:nowrap; display:flex; flex-direction:column; }
  .ngRozet__alt{ display:block; color:#9AA3B2; font-size:10.5px; font-weight:400; font-style:normal; white-space:nowrap; }

  /* Info ikonu + tooltip. Masaustunde hover ile acilir; dokunmatikte
     JS'in eklediği ".ng-open" sinifiyla tiklanarak acilir/kapanir. */
  .ngInfoIcon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:15px; height:15px;
    border-radius:50%;
    border:1px solid rgba(193,156,96,.55);
    color:var(--ng-gold-600);
    font-size:9px;
    line-height:1;
    cursor:pointer;
    margin-left:1px;
  }
  .ngInfoIcon .ngTooltip{
    display:none;
    position:absolute;
    bottom:calc(100% + 9px);
    left:50%;
    transform:translateX(-50%);
    width:230px;
    max-width:70vw;
    background:var(--ng-navy-900);
    color:#fff;
    font-size:12px;
    font-weight:400;
    line-height:1.5;
    letter-spacing: normal;
    text-align:left;
    white-space:normal;
    padding:10px 12px;
    border-radius:6px;
    box-shadow:0 10px 26px -8px rgba(6,32,94,.4);
    z-index:30;
  }
  .ngInfoIcon .ngTooltip:after{
    content:'';
    position:absolute;
    top:100%; left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:var(--ng-navy-900);
  }
  .ngInfoIcon:hover .ngTooltip,
  .ngInfoIcon.ng-open .ngTooltip{
    display:block;
  }
  @media (max-width:767px){
    .ngRozetleri{ gap:8px; }
    .ngRozet{ font-size:12px; padding:6px 11px; }
    .ngInfoIcon .ngTooltip{
      left:auto;
      right:-8px;
      transform:none;
      width:200px;
    }
    .ngInfoIcon .ngTooltip:after{
      left:auto;
      right:12px;
      transform:none;
    }
  }

  .BasketBtn { float: left; position: relative;width: 100%;}
  #divAdetCombo .right_line,.RightDetail .riSingle{width: 90px;}
  #txtbxurunSiparisAdedi, #divAdetCombo select,.RightDetail .riSingle a.riUp, .RightDetail .riSingle a.riDown,.basketBtn input,
  .buyfast input{height: 45px!important;}
  .Basketinp p,#divKombinSatinAl a, #divAdetCombo .left_line,.RightDetail .riSingle a.riUp,
  .RightDetail .riSingle a.riDown{line-height: 45px;}
  /*Adet Select*/
  #divAdetCombo { display: block!important;position:relative;float: left;clear: left;}
  #divAdetCombo .center_line { display: none !important; float: left; }
  #divAdetCombo .right_line { float: left;max-width: 100%!important;}
  #divAdetCombo select { width: 100%; padding: 0 10px; text-align: left;}
  /*Adet input*/
  .RightDetail .riSingle { position: relative;display: inline-block;vertical-align:top; border-radius: var(--ng-radius);}
  .RightDetail .riSingle a.riUp, .RightDetail .riSingle a.riDown { width: 30px !important;font-size: 0; background:transparent;top:0;font-weight: normal; position: absolute;margin: 0 !important; float: left; cursor: pointer; text-indent: 0;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  .RightDetail .riSingle a.riUp svg, .RightDetail .riSingle a.riDown svg {width: 10px;}
  .RightDetail .riSingle a.riUp path, .RightDetail .riSingle a.riDown path {fill: #3C3436;}
  .RightDetail .riSingle a.riUp {left:auto;right:0;}
  .RightDetail .riSingle a.riDown {left:0;}
  /*adetveselect*/
  .Basketinp { display: block;position: relative;float: left;clear: left;}
  .BasketBtn .pSatisBirimi, .BasketBtn .left_line.lineTitle2{color: #000;font-size: 14px;font-weight: normal;margin:0;float: left;clear:left;line-height: 40px;display: none!important;}
  #txtbxurunSiparisAdedi_wrapper { float: left; width: 100% !important; position: relative; padding: 0 !important; }
  #txtbxurunSiparisAdedi {width: 100% !important; text-align: center; display: inline-block;padding: 0;  appearance: none; -moz-appearance: none;-webkit-appearance: none;}
  #txtbxurunSiparisAdedi, #divAdetCombo select { background: #fff;color: #3C3436;border:1px solid #EFEFEF;font-size: 18px;font-weight: 400;float: left;margin: 0;border-radius: var(--ng-radius);}
  /*sepete Ekle*/
  #divKombinSatinAl,
  .basketBtn ,
  .buyfast { float: left;margin: 0 0 0 10px;}
  #divKombinSatinAl a,
  .buyfast input,
  .basketBtn input {color: #222222;background: #ffffff!important;border: 1px solid #EFEFEF; font-weight: 500; font-size:16px; width:100%;display: inline-block;vertical-align:top; padding: 0; letter-spacing: normal;border-radius: var(--ng-radius);text-transform:uppercase; -moz-appearance: none;-webkit-appearance: none;}
  .basketBtn{width: calc(100% - 100px);}
  .buyfast input:hover,
  .basketBtn input:hover{color: #FFFFFF;background: #061D4C!important;}
  /*Hemen Al*/
  .buyfast {width: 100%;margin:20px 0 0 0;}
  .buyfast input {}
  /*kombin Al*/
  #divKombinSatinAl {margin: 20px 0 0 0;width: 100%;}
  #divKombinSatinAl a{font-size: 14px;margin: 0!important;}
  /*Iconlar*/
  .ProductIcon {float: left;width: 100%;margin-top: 10px;}
  .ProductIcon .box1 {padding:0; margin: 0;min-width: 0;background:transparent;display:inline-block;vertical-align:top;color: #888888;font-size: 12px;font-weight: 400;}
  .ProductIcon .box1 i {display: none;}
  .ProductIcon .boxIcon {fill:#888888; width:50px;height:50px;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  .ProductIcon .boxIcon svg{height:22px;}

  .ProductIcon > div{float: left;position: relative;margin: 0 5px 10px;width: calc(50% - 10px);background: #FAFAFC; border: 1px solid transparent;}
  .ProductIcon > div > a {float:left;width: 100%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  /*yazdiryorumtavsiye*/
  .ProductIcon2 {float:left;width: 100%;}
  .ProductIcon2 .clear{display: none;}
  .ProductIcon2 #divSocialButtons{float:left;width: 100%;display: flex;align-items: center;gap: 10px;}
  .ProductIcon2 > div{float:left;margin: 0 5px 10px;width: calc(50% - 10px);position: relative;background: #FAFAFC; border: 1px solid transparent;}
  .ProductIcon2 > div > a{margin: 0; padding: 0;font-size: 12px;background:transparent;color:#888888;float:left;width: 100%;font-weight: 400;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  .ProductIcon2 > div > a:hover{color: #000; background:transparent!important;}
  .ProductIcon2 .boxIcon {fill:#888888; width:50px;height:50px;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  .ProductIcon2 .boxIcon svg{height:22px;}

  .ProductIcon > div:hover,
  .ProductIcon2 > div:hover{background: #FFFFFF;border-color: #222222;}
  .ProductIcon > div:hover .box1,
  .ProductIcon2 > div:hover .box1{color: #222222}
  .ProductIcon > div:hover .boxIcon,
  .ProductIcon2 > div:hover .boxIcon{fill: #222222}
  /*paylas*/
  .TopDet .product_social_icon_wrapper{float: left;width: 100%;display: block!important;font-size: 0;margin-top: 10px;}
  .TopDet .product_social_icon_wrapper .PaylasTit{float: left;color: #000;font-size: 14px;font-weight: 600;line-height: 30px;margin-right: 10px;}
  .TopDet .product_social_icon_wrapper ul{display: inline-block;vertical-align:top;list-style: none;padding: 0;margin: 0;}
  .TopDet .product_social_icon_wrapper ul li{float: left;margin-right: 10px;}
  .TopDet .product_social_icon_wrapper ul li:last-child{margin-right: 0;}
  .TopDet .product_social_icon_wrapper ul li a{float: left;fill: #fff;background: #000;font-size: 14px;border-radius: 100%;text-align:center;width: 30px;height: 30px;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  .TopDet .product_social_icon_wrapper ul li a svg{width: 15px;}
  .TopDet .product_social_icon_wrapper ul li:nth-child(1) a{background: #3b5999;}
  .TopDet .product_social_icon_wrapper ul li:nth-child(2) a{background: #55acee;}
  .TopDet .product_social_icon_wrapper ul li:nth-child(3) a{background: #bd081c;}
  .TopDet .product_social_icon_wrapper .UWhatsApp {float: left;margin-right: 0}
  .TopDet .product_social_icon_wrapper .UWhatsApp .whatsApp{float: left;color: #fff;background: #6dc33a;font-size: 0;border-radius: 100%;text-align:center;width: 30px;}
  .TopDet .product_social_icon_wrapper .UWhatsApp .whatsApp i{line-height: 30px;display: inline-block;vertical-align:top;font-size: 14px;}
  /*whatsapp*/
  .socialButons { float: right !important; width: 100%; position: relative; margin: 0 !important;}
  .socialButons iframe { float: left;}
  .product-social { float: left; margin-right: 10px; }
  .product-social span { float: left; line-height: 32px; display: inline-block; color: #000; font-size: 12px; font-weight: 300; margin-right: 5px; }
  .product-social ul { float: left; }
  .product-social ul li { float: left; margin-right: 13px; }
  .product-social ul li a { display: block; color: #323232; font-size: 18px; }
  /*urun ozellik Bolumu*/
  #divUrunOzellikAlani{display: none;}
  .RightDetail #divUrunOzellikAlani{display: block;}
  /* Kullanici talebi: bolum gereksiz yere asagida kaliyordu - ust bosluk daraltildi. */
  .urunOzellikTab{margin: 14px 0 0;display: block;float: left;width: 100%;}
  .urunOzellikTab .urunTab{float: left;width: 100%;}
  .urunOzellikTab .urunTab >ul{list-style:none;padding:0;margin: 0;}
  .urunOzellikTab .urunTab >ul >li{float: left;width: 100%;}
  .urunOzellikTab .urunTab >ul >li > a{cursor: pointer;color: #3C3436;background: transparent;font-size: 14px;line-height: 50px;float: left;width: 100%;font-weight: 700;text-transform: uppercase;}
  .urunOzellikTab .urunTab >ul >li > a span{}
  /* Panel jQuery ile slideDown/slideUp animasyonuyla acilip kapaniyor
     (bkz. WEBJS.txt akordeonYumusat()) - "[onofftip=true] display:block
     !important" gibi bir CSS kurali eklenmemeli, aksi halde onofftip
     degisir degismez jQuery'nin animasyonu BASLAMADAN display'i zorlayip
     KAPANISTA "tik diye kapanma" etkisi yaratir. Panelin varsayilan gizli
     baslangici WEBJS.txt'teki $(".urunDetayPanel").hide() cagrisiyla
     korunuyor - flash riski yok.
     Eski +/- ikonu (FontAwesome glyph degisimi, ani karakter degisimi -
     animasyonlanamaz) asagida "Sekmeler" bolumunde donen cift-cizgi
     ikonuyla degistirildi - content burada artik tanimlanmiyor (kasitli). */
  .urunOzellikTab .urunTab >ul >li .urunDetayPanel{display:none;}
  .urunOzellikTab .urunTab >ul >li[onofftip="true"] > a{background: transparent!important;border-bottom: none;}

  /* Bazi paneller (ör. "Odeme Secenekleri" - onlarca banka/taksit satiri)
     viewport'tan cok daha uzun olabiliyor (1300px+); tek seferde bu kadar
     buyuk bir yukseklik degisimi position:sticky ile birlikte tarayicinin
     scroll'u otomatik "duzeltmeye" calismasina (scroll anchoring, odaklanan
     elemani gorunumde tutma vb.) ve beklenmedik siçramalara sebep olabiliyor.
     Panel yuksekligi bir ust sinirla (viewport'un %70'i) sinirlanip fazlasi
     panelin KENDI icinde kaydiriliyor - boylece tek bir acilis/kapanis asla
     cok buyuk bir reflow yaratmiyor. */
  .urunDetayPanel { float: left; width:100%; clear: none !important;border: none;padding: 0 0 10px 0; max-height: 70vh; overflow-y: auto; }
  .urunTabAlt strong { font-weight: bold; }
  .urunTabAlt #txtOneriMail{margin: 0;height: 30px;padding: 0 10px;width: 100%!important;border-width: 1px;}
  .urunTabAlt #txtOneriNot{margin: 0;padding: 10px;width: 100%!important;background: #fff;}
  .urunTabAlt { font-family: 'Judson',sans-serif !important;padding:0;float:left;width:100%;line-height: 26px;color: #606060;font-size: 14px;font-weight: 400;}
  .urunTabAlt * { font-family: 'Judson',sans-serif !important;line-height: 26px;color: #606060;font-size: 14px;font-weight: 400;}
  .urunTabAlt i { font-family: 'FontAwesome' !important; }
  .urunTabAlt img { max-width: 100% !important; }
  .urunTabAlt iframe { max-width: 100% !important;}
  .urunTabAlt .button { padding: 10px 5px; color: #fff; }

  .tabUrunOneriler ul{list-style: none;padding: 0;margin: 0;}
  .tabUrunOneriler ul li{float: left;width: 100%;}
  .oneriValidate .validate { top: 0; padding: 5px; }
  .urunTabAlt ul li { margin-bottom: 5px; clear: both; }
  .urunTabAlt ul li input { float: left; margin-right: 5px; width: auto !important; }
  .urunTabAlt ul li label { float: left; width: auto !important;line-height: normal;}
  .urunTabAlt ul li input[type="checkbox"] { margin-top: 0; }
  /*------------------------------------Etiketler--------------------------------------------*/
  #divEtiketler { float: left; width: 100%; padding:0 20px 20px; margin:50px 0 0;background: #fff;text-align:center;}
  #divEtiketler .productModuleTitle {float: left; color: #202122; font-size: 15px; font-weight: bold; width: 100%; text-align: center; line-height: 30px; margin:10px 0; }
  #divEtiketler a { color: #696d71; font-size: 13px; }
  #divEtiketler a:hover {text-decoration:underline;}
  /****************************************Slider Alanlar*********************************/
  /*Baslik*/
  /* Figma taslagi: baslik ortali+altin cizgili yerine SOLA yasli, ustunde
     altin renkli kucuk etiket (.ngEyebrow, ör. COK SATANLAR), sagda
     "Tumunu Gor ->" (.ngTumunuGor). Etiket ve baglanti V2-JS
     anasayfaSliderBasliklari() ile ekleniyor. Baslik 30px -> 26px. */
  #mainHolder_divDesign .JKatAdi.categoryTitle, .JKatAdi { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; float: left; position: relative;width: 100%;padding:0!important;margin:0 0 40px 0!important;}
  #mainHolder_divDesign .JKatAdi.categoryTitle > .satir1, .JKatAdi > .satir1 { flex: 1 1 auto; min-width: 0; }
  #mainHolder_divDesign .JKatAdi.categoryTitle .bold, .JKatAdi .bold { display: flex; flex-direction: column; align-items: flex-start; float: none; width: auto; text-align: left; position: relative;}
  /* Kullanici talebi (2026-09-05): baslik 26 -> 30px, etiket ile baslik
     arasi 12 -> 18px, etiket kalinligi 600 -> 500. */
  #mainHolder_divDesign .JKatAdi.categoryTitle .bold .satir1, .JKatAdi .bold .satir1{font-family: 'Cormorant Garamond', serif;line-height: 1.25;color: var(--ng-navy-900);font-size: 30px;font-weight:600;display: block;padding:0!important;position: relative;z-index: 1;}
  /* Eski baslik alti altin cizgi kaldirildi (Figma'da yok) */
  #mainHolder_divDesign .JKatAdi.categoryTitle .bold:after, .JKatAdi .bold:after{ display: none; }
  .ngEyebrow { display: block; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ng-gold-500); line-height: 1; margin-bottom: 18px; }
  .ngTumunuGor { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ng-navy-900); padding-bottom: 6px; white-space: nowrap; transition: color .25s ease; }
  .ngTumunuGor:hover { color: var(--ng-gold-600); }
  .ngTumunuGor__ok { font-size: 17px; line-height: 1; transition: transform .25s ease; }
  .ngTumunuGor:hover .ngTumunuGor__ok { transform: translateX(3px); }
  /*ilerigeributon*/
  #divInstashopResim .owl-carousel .owl-nav{display:block!important;}
  #mainHolder_divDesign .owl-carousel .owl-nav, .owl-carousel .owl-nav {z-index: 2; position: absolute;right:0;left:0;top:40%;}
  #mainHolder_divDesign .owl-carousel .owl-nav .ProductListprev, .owl-carousel .owl-nav .ProductListprev, .owl-carousel .owl-nav .InstaGalleryprev {left:35px;}
  #mainHolder_divDesign .owl-carousel .owl-nav .ProductListnext, .owl-carousel .owl-nav .ProductListnext,.owl-carousel .owl-nav .InstaGallerynext {right:35px;}
  #mainHolder_divDesign .owl-carousel .owl-nav .ProductListprev, .owl-carousel .owl-nav .ProductListprev, .owl-carousel .owl-nav .ProductListnext,.owl-carousel .owl-nav .InstaGalleryprev, .owl-carousel .owl-nav .InstaGallerynext,
  #mainHolder_divDesign .owl-carousel .owl-nav .ProductListnext {border:none;width: 46px;height:43px;cursor: pointer; text-align: center;position: absolute; font-size: 0;display: inline-block; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
  #mainHolder_divDesign .owl-carousel .owl-nav .ProductListprev, .owl-carousel .owl-nav .InstaGalleryprev, .owl-carousel .owl-nav .ProductListprev{background: url('https://cdn.ticimax.cloud/uploads/sayfatasarim/elittasarim31/righticon.svg') no-repeat center;background-size: 43px;}
  #mainHolder_divDesign .owl-carousel .owl-nav .ProductListnext, .owl-carousel .owl-nav .InstaGallerynext, .owl-carousel .owl-nav .ProductListnext{background: url('https://cdn.ticimax.cloud/uploads/sayfatasarim/elittasarim31/lefticon.svg') no-repeat center;background-size: 43px;}
  #mainHolder_divDesign .owl-carousel .owl-nav .ProductListprev:before,.owl-carousel .owl-nav .ProductListprev:before,.owl-carousel .owl-nav .ProductListnext:before,.owl-carousel .owl-nav .InstaGalleryprev:before,.owl-carousel .owl-nav .InstaGallerynext:before,#mainHolder_divDesign .owl-carousel .owl-nav .ProductListnext:before {display: none;}

  body #mainHolder_divDesign .owl-carousel .owl-dots,body .owl-carousel .owl-dots {display: none; float: left; width: 100%; text-align: center; margin-top: 20px; }
  body #mainHolder_divDesign .owl-carousel .owl-dots .owl-dot,body .owl-carousel .owl-dots .owl-dot {width: 10px; height: 10px; background: transparent; border: none; margin: 0 6px; border-radius: 100%; display: inline-block; vertical-align: top; cursor: pointer;}
  body #mainHolder_divDesign .owl-carousel .owl-dots .owl-dot.active,body .owl-carousel .owl-dots .owl-dot.active {background: var(--ng-gold-500);}
  body #mainHolder_divDesign .owl-carousel .owl-dots .owl-dot span,body .owl-carousel .owl-dots .owl-dot span{width: 10px;height: 10px;background: #fff;border-radius: 50%;margin: auto; cursor: pointer;border: none}/*urunslider*/
  .sliderBannerContainer { float: left; width: 100%; position: relative;margin:0;}
  .sliderBannerContainer .Block_Link{display:none;}
  .sliderBannerContainer .ProductList { display: block !important;margin: 0 auto;}
  .sliderBannerContainer .Jbutonlar { display: none; }
  .sliderBannerContainer .jCarouselLite {float: left;width: 100%;}
  /*detayurunslider*/
  .detaySliderContainer {float: left; width: 100%; position: relative;margin:105px 0 0 0;}
  .detaySliderContainer .ProductList { display: block !important;margin: 0 auto;}
  .detaySliderContainer .Jbutonlar { display: none; }
  .detaySliderContainer .jCarouselLite {float: left;width: 100%;}/*sitekodlari*/
  .hesabimAnasayfaMenuler ul li a:hover .fa{color: #fff;}
  .siparisTakipSayfasi { background: #fff; }
  .siparisTakipSayfasi .siparisTakipBaslik { text-align: center; padding: 20px 0 !important; }
  .sepetiTemizle { float: right; line-height: 43px; padding: 0 10px; }
  .popupSepet { width: 99%; }
  .popupSepet #hed div { width: 94%; }
  .sayfaIcerik * { font-family: 'Judson', sans-serif !important; }
  #mainHolder_UrunDetay_imgCookie { display: none !important; }
  .product_social_icon_wrapper { display: none; }
  .HesabimContainer .urunDetayPanel { max-height: 100%; }
  .orders { width: 100%; }
  .TumKategoriler { display: none; }
  .mobilMenuAcButton,.searchClick, .mycartClick, .welcomeOpen { display: none; }
  .userLoginBtn, .userSignBtn { border: none !important; }
  .magazaTeslimatBilgisiContent{display: none;}
  #store_region_container{display: none;}
  #ticimaxCopyright{float: left;width: 100%;}
  section{float: left;width: 100%;}
  .sepetimBody .Basketstep ul li.pasif{opacity: 1;}
  .sepetimBody ul{padding: 0;margin: 0;list-style: none;}
  .sepetimBody .sepetItemB1 span.KampanyaTanimSpan{display: inline-block;}
  /*Site ici scroll alanlar*/
  #divOnyazi::-webkit-scrollbar, .urunTabAlt::-webkit-scrollbar, .SmallImages::-webkit-scrollbar, .SepetBlockInfo::-webkit-scrollbar, .searchContent ul::-webkit-scrollbar, body .kombinContent ul::-webkit-scrollbar, .CartProduct .SProduct::-webkit-scrollbar, .yanResimliMenu .KatMenu1::-webkit-scrollbar, .UrunGuruplari .Block_Text::-webkit-scrollbar, .ProductPreviewContent .ProductPreviewLeft .PreviewallImages::-webkit-scrollbar, .leftBlock .category-vertical-filters .vertical-filter-panel .list-group::-webkit-scrollbar, .mobilMenu .menuIcerikAlan::-webkit-scrollbar, .mobilMenu .navUl > li > ul::-webkit-scrollbar,
  .mobilMenu .navUl > li > ul li ul::-webkit-scrollbar{width: 5px;}
  #divOnyazi::-webkit-scrollbar-track, .urunTabAlt::-webkit-scrollbar-track, .SmallImages::-webkit-scrollbar-track, .SepetBlockInfo::-webkit-scrollbar-track, .searchContent ul::-webkit-scrollbar-track, body .kombinContent ul::-webkit-scrollbar-track, .CartProduct .SProduct::-webkit-scrollbar-track, .yanResimliMenu .KatMenu1::-webkit-scrollbar-track, .UrunGuruplari .Block_Text::-webkit-scrollbar-track, .ProductPreviewContent .ProductPreviewLeft .PreviewallImages::-webkit-scrollbar-track, .leftBlock .category-vertical-filters .vertical-filter-panel .list-group::-webkit-scrollbar-track, .mobilMenu .menuIcerikAlan::-webkit-scrollbar-track, .mobilMenu .navUl > li > ul::-webkit-scrollbar-track,
  .mobilMenu .navUl > li > ul li ul::-webkit-scrollbar-track{ background: #efefef;}
  #divOnyazi::-webkit-scrollbar-thumb, .urunTabAlt::-webkit-scrollbar-thumb, .SmallImages::-webkit-scrollbar-thumb, .SepetBlockInfo::-webkit-scrollbar-thumb, .searchContent ul::-webkit-scrollbar-thumb, .CartProduct .SProduct::-webkit-scrollbar-thumb, body .kombinContent ul::-webkit-scrollbar-thumb, .UrunGuruplari .Block_Text::-webkit-scrollbar-thumb, .yanResimliMenu .KatMenu1::-webkit-scrollbar-thumb, .ProductPreviewContent .ProductPreviewLeft .PreviewallImages::-webkit-scrollbar-thumb, .leftBlock .category-vertical-filters .vertical-filter-panel .list-group::-webkit-scrollbar-thumb, .mobilMenu .menuIcerikAlan::-webkit-scrollbar-thumb, .mobilMenu .navUl > li > ul::-webkit-scrollbar-thumb,
  .mobilMenu .navUl > li > ul li ul::-webkit-scrollbar-thumb{background: #f04873;}
  /*Site ici scroll alanlar*/

  /* Sol filtre panelindeki liste scrollbar'i - taban tema fusya (#f04873)
     ve kalin gri iz (#efefef, paylasilan kural) veriyordu; UI ile uyumlu,
     ince ve iz rengi seffaf (sadece thumb gorunur) bir gorunume cevrildi. */
  .leftBlock .category-vertical-filters .vertical-filter-panel .list-group {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--ng-gold-500) transparent; /* Firefox */
  }
  .leftBlock .category-vertical-filters .vertical-filter-panel .list-group::-webkit-scrollbar {
    width: 3px !important;
  }
  .leftBlock .category-vertical-filters .vertical-filter-panel .list-group::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .leftBlock .category-vertical-filters .vertical-filter-panel .list-group::-webkit-scrollbar-thumb {
    background: var(--ng-gold-500) !important;
    border-radius: var(--ng-radius);
  }
  /*------------------------------------Sabit Renkler--------------------------------------------*/
  /*sepetvebutonrenk*/
  body .button, .baglanButton, .siparisOzetTakip, body.sepetimBody .basketCompletebtn, #AdresContent .button, .BasketPage .OdemeMenu ul li.activeMenu > a , .pageNumberContent a:hover, .menuUstBolum, body .category-vertical-filters.top-filters .FiltreUst, .SepetUst, .urunOzellikTab .urunTab >ul >li[onofftip="true"] > a, .tooltip-inner, .welcome.active,
  .sepetimBody .Basketstep ul li.aktif{ background: var(--ng-navy-700);}
  /*bordercolor*/
  .iletisimContent .iletisimRight .iletisimbanka .span > .line1:nth-child(n+2), body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir, .pageNumberContent a:hover,
  .OdemeMenu ul li.activeMenu{ border-color: #061D4C;}
  /*tooltip*/
  .tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow {border-top-color: #061D4C;}
  .tooltip.right .tooltip-arrow {border-right-color: #061D4C;}
  .tooltip.left .tooltip-arrow {border-left-color: #061D4C;}
  .tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow {border-bottom-color: #061D4C;}
  .baglanButton { border-color: transparent; }
  .Basketstep ul li:before { border: 1px solid #061D4C;}
  .sepetimBody .Basketstep ul li.aktif:after{border-top-color:#061D4C; }
  /*color*/
  .sepetTitle .st_1,body .sepetTitle2 .st_1, body .BasketRigth ul li.genelToplam .tut, body .sepetTitle2 .st_1:before, .sepetTitle .st_1:before, .TeslimatAdresTittle, .Basketstep ul li.gecti span, body #divToplamOdeme, .TeslimatAdresTittle, a.YeniAdresEkle, .Basketstep ul li.onestepsec span, .Basketstep ul li.pasif i, .BasketPage .Basketstep ul li.pasif i, .BasketPage .cargoInformation div.cargoName span, .BasketPage .faturaAdresBtn.active, .adresAyniBtn.active, .BasketPage .sepetItemB4, .BasketPage .AdresItemAlt.AdresItemSelected .AdresItemAltLeft label span.check, .iletisimContent .categoryTitle .categoryTitleText, body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir a span,
  body .siparisUrunUyariSecenek .siparisUrunDurumBaslik,
  body.sepetimBody .mobileAddition > .addition-content > .TotalPrice,
  body.sepetimBody .mobileAddition > .addition-content::before{color: #061D4C;}
  /*HoverRenk*/
  .button:hover, .userLoginBtn:hover, .userSignBtn:hover, .BasketPage .OdemeMenu ul li:hover >a, .BasketPage .alisverisedevamet:hover, .BasketPage #hed div.hediCekForm a:hover, .BasketPage a.YeniAdresEkle:hover, #AdresContent .button:hover, .basketCompletebtn:hover, .KasaOnuFirsatlarContent ul li a.button:hover,
  .ProductIcon2 > div > a:hover{ background: #061D4C;}
  /*colorhover*/
  .BasketPage .AdresItemAlt a:hover, .BasketPage .sepetiTemizle:hover, .BasketPage .sepet-sil:hover:before, .BasketPage .sepetTitle2 a:hover, .baglanButton:hover, .BasketPage .faturaAdresBtn:hover, .adresAyniBtn:hover,.headerSocialConnect .baglanButton a:hover,
  .CartProduct .SProduct li a:nth-child(2):hover *{color: #061D4C;}
  /*bordercolorhover*/
  body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li >a:hover, .BasketPage a.YeniAdresEkle:hover, .OdemeMenu ul li:hover, .BasketPage .OdemeMenu ul li:hover >a,.BasketPage .alisverisedevamet:hover,
  .CartProduct .headerCartBtn:hover{border-color: #061D4C;}
  /*color*/
  .siparisOzetTakip {color: #fff;}
  .BasketDetail table tbody tr td a { display: inherit; }
  .BasketDetail table tbody tr td:last-child a { display: block; }
  .sepetimBody #header:after { display: none; }
  body .alisverisedevamet{background: #fff;}
  /*bordercolor*/
  .KasaOnuFirsatlarContent ul li a.button:hover { border: none !important; }
  .BasketPage a.YeniAdresEkle:hover {color: #fff !important; }
  .baglanButton:hover { background: transparent; }
  body .adresGir .kirmiziButon:hover {background: #9e1a20!important;color: #fff !important;}
  body .adresGir .yesilButon:hover {background:#406d20!important;color: #fff !important;}
  /*------------------------------------Sabit Renkler--------------------------------------------*/
  .divRelatedProductsPopup .ulRelatedProducts{list-style: none;padding: 0;margin: 0;}  #divSliderYani {display: none;}
  body {background: #fff;}
  #divIcerik{padding: 0 60px}
  /*siteozelalan*/
  .blok{width: 100%;float: left;}body .widgetContainer{float: left;width: 100%;}
  body .widgetContainer .widgetArea{float: left;width: 100%;}
  body .widgetContainer .widgetArea ul{float: left;width: 100%;display: flex;justify-content: center;align-items: center;gap: 95px;}
  body .widgetContainer .widgetArea ul li{float: left;width: unset;}
  body .widgetContainer .widgetArea ul li .box{float: left;display: flex;align-items: center;gap: 20px;}
  body .widgetContainer .widgetArea ul li .box .contentArea .titleH{color: #3C3436;font-size: 16px;line-height: 20px;font-weight: 400;}

  body .footerTemp .ebultenWidthContainer .footerTempRow{justify-content: space-between;}
  body .footerTemp .ebultenWidthContainer .elementor-column[data-col="20"]:first-child{width: 30%;}
  body .footerTemp .ebultenWidthContainer .elementor-column[data-col="20"]{width: unset;}
  body .footerTemp .footerBottomArea .footerTempRow .footerTempColumnDiv{align-items: center;}

  /* Favori kalbi sag ALT kosede - sag ust rozetlerle cakismaz */
  .productItem .favori  {display: block!important;position: absolute;right: 12px;top: auto;bottom: 12px;}
  .productItem .favori > a {display: block;font-size: 0;text-align: center;transition: all 0.3s ease-out 0s;}
  .productItem .favori a:before {content: '\f004';font-size: 18px;line-height: 18px;color: var(--ng-navy-500);display: block;font-weight: 100;font-family: 'FontAwesome';}
  .productItem .favori a:hover:before,
  .productItem .favori a.listfavoriAktif:before{font-weight: 600;color: var(--ng-gold-500);}

  .productItem .productLeft{position: absolute;left: 10px;top:10px;z-index: 4;}
  .productItem .productLeft > div{display: block;float: left;clear: left;border-radius: var(--ng-radius);padding: 0 8px;font-weight: 500;height: 24px;line-height: 24px;text-align: center;color: var(--ng-navy-900);font-size: 12px;background: var(--ng-gold-300);overflow: hidden;margin: 0 0 5px;}

  /* Tum rozetler ayni katmanda */
  .productItem .productFaMyEx > div,
  .productItem .productLeft > div,
  .productItem .productFaMyEx .cargoIcon,
  .productItem .productFaMyEx .newIcon,
  .productItem .productFaMyEx .discountIcon{ z-index: 4; position: relative; }
  .productItem .favori{ z-index: 5; }
  .productItem .TukendiIco{ z-index: 6; }

  /* Rozetler gorselin altinda kalmasin */
  .productItem .productFaMyEx{position: absolute;right: 10px;top:10px;z-index: 4;}
  .productItem .productFaMyEx .discountIcon{display: block;float: right;clear: right;border-radius: var(--ng-radius);padding: 0 8px;font-weight: 500;height: 24px;line-height: 24px;text-align: center;color: var(--ng-navy-900);font-size: 12px;background: var(--ng-gold-300);overflow: hidden;margin: 0 0 5px;}
  .productItem .productFaMyEx .newIcon{display: block;float: right;clear: right;border-radius: var(--ng-radius);padding: 0 8px;font-weight: 500;height: 24px;line-height: 24px;text-align: center;color: var(--ng-navy-900);font-size: 12px;background: var(--ng-gold-300);overflow: hidden;margin: 0 0 5px;}
  .productItem .productFaMyEx .cargoIcon{display: block;float: right;clear: right;border-radius: var(--ng-radius);padding: 0 8px;font-weight: 500;height: 24px;line-height: 24px;text-align: center;color: var(--ng-navy-900);font-size: 12px;background: var(--ng-gold-300);overflow: hidden;margin: 0 0 5px;}

  .productDetailLeftWidget{position: absolute;left: 10px;top:10px;}
  .productDetailLeftWidget > div{display: block;float: left;clear: left;font-weight: 400;height: 28px;line-height: 28px;text-align: center;color: #717171;font-size: 16px;background: #FFFFFF;overflow: hidden;margin: 0 0 5px;}

  body .teknikDetay{border: none!important;}

  .UFavorilerimeEkle{font-size: 0;margin: 0;overflow:hidden;float: left;transition: all .3s ease-in-out;position: absolute;right: 0;top: 0;}
  .UFavorilerimeEkle a{background: #FFF;float: left;transition: all .3s ease-in-out;}
  .UFavorilerimeEkle .boxIcon{display: none;}
  .UFavorilerimeEkle .box1{font-size: 0;}
  .UFavorilerimeEkle .box1 i{font-size: 18px;line-height: 22px;text-align: center;width: 100%;color: #000000;font-weight: 500;transition: all .3s ease-in-out;}
  .UFavorilerimeEkle #aFavroriCikarBtn .box1 i,
  .UFavorilerimeEkle:hover .box1 i{font-weight: 600;}

  .header-button a{font-weight: 600;}
  #spnTopSepetToplamUrun{ position: absolute; right: -10px; top: -10px; width: 18px; height: 18px; background: var(--ng-gold-500); border: 1px solid white; border-radius: 100%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
  .header-cart-link{margin-right: 9px;}
  .header-wrapper > div{padding: 0 var(--ng-gutter);}

  body #headerNew .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl {padding: 0;margin: 0;}
  body #divTopProductSearch .searchform-wrapper{border: none;border-bottom: 1px solid rgba(237, 237, 237, 1);}
  body #top-bar .headerContainer > div{width: 33.33%;}
  body #top-bar .headerContainer div.flex-center > div{justify-content: flex-start;}
  /* Duyuru metni 3 esit sutunun ORTASINDA oldugu icin (33.33%'lik sol
     sutundan sonra basliyor) header'daki menu ile sol kenari hizali
     degildi. ONCEKI DENEME (position:absolute + top:0/bottom:0) orta
     sutunu akistan tamamen cikardigi icin konteynerin YUKSEKLIGINI de o
     belirliyordu - abs. elemanlar kendi konteynerinin boyunu ETKILEMEZ,
     bu yuzden konteyner (sadece BOS sol/sag sutunlarla) sifira yakin bir
     yukseklige collapse oldu ve metin bu daracik kutuya "height:100%" ile
     sikisip dikey ortalanamadan #top-bar'in overflow:hidden'iyla yariya
     kadar kirpildi (canli testte tam boyle goruldu). Cozum: sutunu AKISTA
     birakip (yukseklik hesabini bozmadan) sadece sol sutunun genisligini
     0'a indirip orta sutunu container'in gercek sol kenarina kaydiriyoruz
     - sag sutun bos oldugu icin onun genisligini orta sutuna devrediyoruz
     (66.66%).
     DUZELTME: burada ONCEDEN sabit bir piksel degeri (x=100, o anki menu
     konumuna gore elle olculmustu) kullaniliyordu. Menu paddingi sonradan
     degisince (FAZ 11'de anchor paddingi daraltildi) o sabit deger
     gecersiz kaldi ve metin menuyle hizasiz gorunmeye basladi - "canli
     olcup sabit sayi yazma" yaklasiminin kirilgan yani tam olarak bu.
     Yerine, header'in ZATEN kullandigi tek gercek kaynak olan
     "--ng-gutter" degiskeni (bkz. :root, ".header-wrapper > div" da ayni
     degeri kullanir) ile padding veriliyor - boylece iki taraf HER ZAMAN
     ayni sol bosluktan baslar, gutter degeri ileride degisse bile
     otomatik senkron kalir. */
  body #top-bar .headerContainer > div.flex-left {
    width: 0;
    min-width: 0;
  }
  body #top-bar .headerContainer > div.flex-center {
    width: 66.66%;
    padding-left: var(--ng-gutter);
    box-sizing: border-box;
  }
  body .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon .nav-submenu{padding: 0;}

  /* ============================================================
    MENU ANIMASYONLARI
    ------------------------------------------------------------
    Not: Menu orijinalde display:none <-> block ile aciliyordu.
    display ozelligi animasyon KABUL ETMEZ, "tak" diye acilmasinin
    sebebi buydu. Bunun yerine visibility + opacity + transform
    kullaniyoruz; ucu de animasyon kabul eder.
    ============================================================ */

  /* --- 1) Alt menu yumusak acilis (asagi dogru suzulerek) --- */
  .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar > .menu-wrap{
    display: block !important;      /* display artik hic degismiyor */
    visibility: hidden;             /* gorunurlugu bu yonetiyor */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;           /* kapaliyken tiklamayi engelle */
    transition: opacity .28s ease,
                transform .28s ease,
                visibility 0s linear .28s !important;  /* kapanisi animasyon bitince gizle */
  }
  .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar:hover > .menu-wrap{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .28s ease,
                transform .28s ease,
                visibility 0s !important;              /* acilista aninda gorunur ol */
  }

  /* --- 2) Menu linki altinda soldan saga altin cizgi ---
    ONCEKI YONTEM (transform:scaleX) tam piksel yukseklige ragmen bazi
    ekranlarda (ozellikle tam-sayi-olmayan DPR/olcekte) animasyon sirasinda
    GPU'nun katman olceklemesi cizgiyi gecici olarak kalin/bulanik gosterip
    animasyon bitince "tik" diye gercek incelige donmesine sebep oluyordu
    (canli testte tekrar dogrulandi). "width" animasyonu gercek duzen
    genisligini kare kare degistirdigi icin bu olcekleme artefaktini
    tamamen ortadan kaldiriyor. */
  .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a.nav-item-link{
    position: relative;
    /* Ticimax'in taban paketi font-weight:500 veriyor, 400'e dusuruldu. */
    font-weight: 400 !important;
    transition: color .25s ease;
  }
  .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a.nav-item-link:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 0;                       /* kapali: genislik sifir */
    height: 2px;
    background: var(--ng-gold-500);
    transition: width .32s cubic-bezier(.22,.61,.36,1);
  }
  .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li:hover > a.nav-item-link:after{
    width: 100%;                    /* acik: tam genislik */
  }

  /* --- 4) HOVER KOPRUSU: menuden panele inerken menu kapanmasin ---
     Menu linki 130'da bitiyor, acilir panel 152'de basliyor (aradaki
     22px header'in kendi alt dolgusu - olculdu). Imlec o bosluga
     girince ne link ne panel hover'da kaliyordu, panel aniden
     kapaniyordu ("Taki menusune inerken kapaniyor").
     Cozum: linkin ALTINA uzanan gorunmez bir ::before. Sozde eleman
     kendi sahibinin hover'ini surdurdugu icin imlec kopruye girdiginde
     link hala hover kabul edilir, panel acik kalir.
     ::after DEGIL ::before kullanildi - ::after zaten altin alt cizgi.
     SADECE hover'da var: kapaliyken bu serit hic olusmaz, dolayisiyla
     altindaki icerigin (3'lu banner) tiklamasini engellemez.
     Yanlardaki -14px, capraz inen imlecin kacmamasi icin. */
  .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar:hover > a.nav-item-link:before{
    content: '';
    position: absolute;
    left: -14px;
    right: -14px;
    top: 100%;
    height: 26px;   /* olculen 22px bosluk + 4px pay */
    background: transparent;
  }

  /* --- 3) Alt menu ic linkleri de yumusak gecsin --- */
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a{
    transition: color .2s ease, padding-left .2s ease;
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover{
    padding-left: 0;
  }

  /* ============================================================
    MENU VITRIN KARTLARI
    ------------------------------------------------------------
    Alt kategoriler duz metin listesi yerine gorselli kart olarak
    gosterilir. Gorseller JS tarafindaki MENU_GORSELLERI listesinden
    gelir (Ticimax menude alt kategori gorseli tutmuyor).
    ============================================================ */

  /* --- Izgara --- */
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-kolon{
    display: flex !important;
    flex-wrap: wrap;
    gap: 22px 20px;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    padding: 8px 0;
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon{
    display: contents !important;   /* sutun yapisini cozup tek izgaraya al */
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li{
    width: 150px !important;
    margin: 0 !important;
    list-style: none;
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a{
    display: block !important;
    text-align: center;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--ng-navy-700) !important;
    letter-spacing: normal;
    transition: color .3s ease;
  }

  /* --- Kart gorseli --- */
  .ngVitrinGorsel{
    display: block;
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: var(--ng-radius-img);
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--ng-bg-soft);
    box-shadow: 0 1px 3px rgba(6,32,94,.06);
    transition: box-shadow .45s cubic-bezier(.22,.61,.36,1),
                transform  .45s cubic-bezier(.22,.61,.36,1);
  }
  .ngVitrinGorsel img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
  }
  /* Altin ince cerceve - hover'da beliriyor */
  .ngVitrinGorsel:after{
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: var(--ng-radius-img);
    border: 1px solid var(--ng-gold-500);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
  }
  /* Alttan yumusak koyulasma - derinlik hissi */
  .ngVitrinGorsel:before{
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: var(--ng-radius-img);
    z-index: 1;
    background: linear-gradient(to top, rgba(6,32,94,.18), transparent 55%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
  }

  /* --- Hover --- */
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover .ngVitrinGorsel{
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(6,32,94,.16);
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover .ngVitrinGorsel img{
    transform: scale(1.09);
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover .ngVitrinGorsel:after{ opacity: 1; }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover .ngVitrinGorsel:before{ opacity: 1; }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover{
    color: var(--ng-gold-600) !important;
  }

  /* --- Isim alti ortadan disa acilan cizgi --- */
  .ngVitrinAd{
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
  }
  .ngVitrinAd:after{
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: 0;
    height: 1px;
    background: var(--ng-gold-500);
    transition: left .38s cubic-bezier(.22,.61,.36,1),
                right .38s cubic-bezier(.22,.61,.36,1);
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a:hover .ngVitrinAd:after{
    left: 0; right: 0;
  }

  /* ============================================================
    URUN DETAY EYLEM ALANLARI
    ------------------------------------------------------------
    Sorun: Koleksiyona Ekle 17px, digerleri 52px idi. Ikonlar
    karisik (<i> font ikonu + <svg>). Hizalar tutmuyordu.
    Cozum: Tum kutular tek olcu, tek stil, tek hizalama.
    ============================================================ */

  /* --- Kutu ailesi: hepsi ayni --- */
  body .ProductIcon > div,
  body .ProductIcon2 > div,
  body .UAddToCollection,
  body .UIstekListemeEkle,
  body .UKarsilastirma,
  body .FiyatHaberVer,
  body .UrunKargoBedava,
  body .TavsiyeEtBtnContent,
  body .YorumYazbtnContent,
  body .UGelinceHaberVer,
  body .UTelefonlaSiparis,
  body div.YorumYazbtnContent,
  body div.TavsiyeEtBtnContent {
    float: left;
    width: calc(50% - 10px) !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 5px 10px !important;
    padding: 0 !important;
    background: var(--ng-bg-soft) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ng-radius) !important;
    overflow: hidden;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  body .ProductIcon > div:hover,
  body .ProductIcon2 > div:hover,
  body .UAddToCollection:hover,
  body .UIstekListemeEkle:hover,
  body .UKarsilastirma:hover,
  body .FiyatHaberVer:hover,
  body .UrunKargoBedava:hover,
  body .TavsiyeEtBtnContent:hover,
  body .YorumYazbtnContent:hover {
    background: #fff !important;
    border-color: var(--ng-gold-500) !important;
    
  }

  /* --- Kutu ici baglantilar: dikey ortalanmis, esit --- */
  body .ProductIcon > div > a,
  body .ProductIcon2 > div > a,
  body .UAddToCollection > a,
  body .UIstekListemeEkle > a,
  body .UKarsilastirma > a,
  body .FiyatHaberVer > a,
  body .UrunKargoBedava > a,
  body .TavsiyeEtBtnContent > a,
  body .YorumYazbtnContent > a {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center !important;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center !important;
    gap: 8px;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--ng-navy-500) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    transition: color .3s ease;
  }
  body .ProductIcon > div:hover > a,
  body .ProductIcon2 > div:hover > a,
  body .UAddToCollection:hover > a,
  body .UIstekListemeEkle:hover > a,
  body .UKarsilastirma:hover > a,
  body .FiyatHaberVer:hover > a,
  body .UrunKargoBedava:hover > a,
  body .TavsiyeEtBtnContent:hover > a,
  body .YorumYazbtnContent:hover > a {
    color: var(--ng-navy-900) !important;
  }

  /* --- Ikon kutusu: sabit olcu, ortalanmis --- */
  body .ProductIcon .boxIcon,
  body .ProductIcon2 .boxIcon,
  body .UAddToCollection .boxIcon {
    -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    fill: var(--ng-navy-500);
    transition: fill .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
  }
  body .ProductIcon > div:hover .boxIcon,
  body .ProductIcon2 > div:hover .boxIcon,
  body .UAddToCollection:hover .boxIcon {
    fill: var(--ng-gold-600);
    
  }
  body .ProductIcon .boxIcon svg,
  body .ProductIcon2 .boxIcon svg,
  body .UAddToCollection .boxIcon svg {
    width: 19px !important;
    height: 19px !important;
    display: block;
  }

  /* --- Metin --- */
  body .ProductIcon .box1,
  body .ProductIcon2 .box1,
  body .UAddToCollection .box1 {
    -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    text-align: left;
    /* Uzun metinler kutudan tasmasin - 2 satirda kesilir */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 32px;
  }

  /* --- KOLEKSIYONA EKLE: ozel yapi ---
    Bu kutuda ikon ve metin AYNI span icinde (<span class="box1"><i>Koleksiyona Ekle</span>),
    digerlerinde ayri elemanlar. O yuzden ayri duzen gerekiyor. --- */
  body .UAddToCollection .box1{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100%;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    text-align: center !important;
    font-size: 11.5px !important;
    line-height: 16px !important;
  }
  body .UAddToCollection .box1 i{
    flex: 0 0 auto;
    font-size: 17px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
  /* Tek basina kalan son kutu da ayni genislikte kalsin */
  body .ProductIcon2 > div:last-child{ width: calc(50% - 10px) !important; }

  /* --- KOLEKSIYONA EKLE: font ikonunu SVG diline yaklastir --- */
  body .UAddToCollection .box1 i,
  body .UAddToCollection i.fa,
  body .UAddToCollection i[class^="fa"],
  body .UAddToCollection i[class*=" fa"] {
    font-size: 18px !important;
    line-height: 24px !important;
    color: var(--ng-navy-500) !important;
    width: 24px; height: 24px;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    transition: color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
  }
  body .UAddToCollection:hover .box1 i,
  body .UAddToCollection:hover i.fa {
    color: var(--ng-gold-600) !important;
    
  }

  /* --- Favori kalbi (sag ustte, ayri konumda) --- */
  body .UFavorilerimeEkle {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  body .UFavorilerimeEkle:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none;
  }
  body .UFavorilerimeEkle a {
    min-height: 0 !important;
    padding: 6px !important;
    background: #fff !important;
    border-radius: 50%;
    transition: background .3s ease;
  }
  body .UFavorilerimeEkle .box1 i {
    font-size: 19px !important;
    color: var(--ng-navy-500) !important;
    transition: color .3s ease, transform .3s ease;
  }
  body .UFavorilerimeEkle:hover .box1 i {
    color: var(--ng-gold-500) !important;
    
  }

  /* --- Adet + Sepete Ekle + Hemen Al --- */
  body #txtbxurunSiparisAdedi,
  body #divAdetCombo select {
    height: 50px !important;
    border: 1px solid var(--ng-line) !important;
    border-radius: var(--ng-radius) !important;
    color: var(--ng-navy-700) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    transition: border-color .3s ease;
  }
  body #txtbxurunSiparisAdedi:focus { border-color: var(--ng-gold-500) !important; }
  body .RightDetail .riSingle a.riUp,
  body .RightDetail .riSingle a.riDown { height: 50px !important; }
  body .RightDetail .riSingle a.riUp path,
  body .RightDetail .riSingle a.riDown path { fill: var(--ng-navy-500); transition: fill .25s ease; }
  body .RightDetail .riSingle a.riUp:hover path,
  body .RightDetail .riSingle a.riDown:hover path { fill: var(--ng-gold-600); }

  body .basketBtn input,
  body .buyfast input {
    height: 50px !important;
    border-radius: var(--ng-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: normal;
    text-transform: uppercase;
    transition: background .3s ease, border-color .3s ease, transform .2s ease, box-shadow .3s ease;
  }
  body .basketBtn input:hover,
  body .buyfast input:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(6,32,94,.35);
  }
  /* "Hemen Al" altin (gold) renkte, beyaz yazili - background/border/color
     ucu TEK yerde birlikte tanimlaniyor (baska bir kuralin ".buyfast
     input:hover" icin sadece color tanimlayip background/border'i
     unutmasi gibi bir riske karsi). Hover darken (gold-600, ince
     koyulasma) - lighten (gold-300) kullanilsaydi uzerindeki beyaz yazi
     neredeyse gorunmez olurdu. */
  body .buyfast input {
    background: var(--ng-gold-500) !important;
    border-color: var(--ng-gold-500) !important;
    color: #fff !important;
  }
  body .buyfast input:hover {
    background: var(--ng-gold-600) !important;
    border-color: var(--ng-gold-600) !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  /* --- Sekmeler: Yorumlar / Odeme Secenekleri / Urun Onerileri --- */
  body .urunOzellikTab .urunTab > ul > li {
    border-bottom: 1px solid #EFEFEF;
  }
  body .urunOzellikTab .urunTab > ul > li > a {
    position: relative;
    color: var(--ng-navy-700) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: normal;
    text-transform: uppercase;
    line-height: 52px !important;
    transition: color .3s ease;
  }
  body .urunOzellikTab .urunTab > ul > li > a:hover { color: var(--ng-gold-600) !important; }
  /* +/- ikonu iki AYRI cizgiden olusuyor (::before = hep yatay, ::after =
     kapaliyken dikey) - CSS "content" ozelligi ara deger uretemedigi icin
     tek bir FontAwesome glyph'i ('+' <-> '-') ANI ziplardi; burada
     sadece dikey cizgi 90 derece donup yatay cizginin ustune biniyor,
     "+" transform ile yumusakca "-"ya donusuyor. */
  body .urunOzellikTab .urunTab > ul > li > a:before,
  body .urunOzellikTab .urunTab > ul > li > a:after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--ng-gold-500);
    border-radius: var(--ng-radius);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), background .3s ease;
  }
  body .urunOzellikTab .urunTab > ul > li > a:before {
    transform: translateY(-50%);
  }
  body .urunOzellikTab .urunTab > ul > li > a:after {
    transform: translateY(-50%) rotate(90deg);
  }
  body .urunOzellikTab .urunTab > ul > li[onofftip="true"] > a:after {
    transform: translateY(-50%) rotate(0deg);
  }
  body .urunOzellikTab .urunTab > ul > li[onofftip="true"] > a:before,
  body .urunOzellikTab .urunTab > ul > li[onofftip="true"] > a:after {
    background: var(--ng-navy-900);
  }
  body .urunOzellikTab .urunTab > ul > li[onofftip="true"] > a {
    background: transparent !important;
    color: var(--ng-navy-900) !important;
  }

  /* --- Mobil --- */
  @media (max-width: 767px) {
    body .ProductIcon > div,
    body .ProductIcon2 > div,
    body .UAddToCollection,
    body .UIstekListemeEkle,
    body .UKarsilastirma,
    body .FiyatHaberVer,
    body .UrunKargoBedava,
    body .TavsiyeEtBtnContent,
    body .YorumYazbtnContent {
      width: calc(50% - 8px) !important;
      min-height: 50px !important;
      margin: 0 4px 8px !important;
    }
    body .ProductIcon > div > a,
    body .ProductIcon2 > div > a,
    body .UAddToCollection > a {
      min-height: 50px;
      gap: 6px;
      font-size: 11px !important;
      padding: 6px 8px !important;
    }
    body .ProductIcon .boxIcon,
    body .ProductIcon2 .boxIcon,
    body .UAddToCollection .boxIcon { width: 20px !important; height: 20px !important; }
    body .ProductIcon .boxIcon svg,
    body .ProductIcon2 .boxIcon svg { width: 17px !important; height: 17px !important; }
    body .ProductIcon .box1,
    body .ProductIcon2 .box1,
    body .UAddToCollection .box1 { font-size: 11px !important; }
  }

  /* ============================================================
    URUN DETAY - NATIVE "ODEME SECENEKLERI" SEKMESI GIZLE
    ------------------------------------------------------------
    Kullanici talebi: sekme musteriye gorunmesin. Ama SADECE gizle,
    DOM'dan kaldirma - #ltrTekCekim/#ltrHavaleFiyati verisi altta
    duruyor ve .ngOdemeKartlari (asagida) o veriyi okuyarak calisiyor.
    Panelden "Odeme Secenekleri" ayari tekrar kapatilirsa bu kartlarin
    dayandigi veri de kaybolur - bu kural sadece sekmeyi gizler,
    ozelligin kendisini degil.
    ============================================================ */
  #liTabOdemeSecenekleri,
  .TabOdemeSecenekleri,
  #divTabOdemeSecenekleri{
    display: none !important;
  }

  /* ============================================================
    URUN DETAY ODEME KARTLARI
    ------------------------------------------------------------
    Tek cekim ve havale fiyatini yan yana iki kart olarak gosterir.
    Veriler Ticimax'in kendi "Odeme Secenekleri" sekmesinden
    (#ltrTekCekim / #ltrHavaleFiyati) okunur, JS tarafinda islenir.
    Havale aktif degilse kartlar hic olusmaz.
    ============================================================ */
  .ngOdemeKartlari{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    float: left;
    margin: 16px 0 4px;
  }
  .ngOdemeKart{
    border: 1px solid var(--ng-line);
    border-radius: var(--ng-radius);
    padding: 16px 16px 20px;
    text-align: center;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .ngOdemeKart:hover{
    border-color: var(--ng-gold-500);
    box-shadow: 0 6px 18px rgba(6,32,94,.07);
  }
  .ngOdemeBaslik{
    font-size: 15px;
    font-weight: 400;
    color: var(--ng-navy-700);
    margin-bottom: 6px;
  }
  .ngOdemeFiyat{
    font-size: 21px;
    font-weight: 600;
    color: var(--ng-navy-700);
    line-height: 1.3;
    margin-bottom: 14px;
  }
  /* Kullanici talebi: havale fiyati yesil vurgulansin (indirim/avantaj hissi). */
  .ngOdemeHavale .ngOdemeFiyat{
    color: #2E9E4B;
  }
  /* Visa / Mastercard / Troy logolari - ucunun de en-boy orani farkli
     oldugu icin (Visa genis/yassı, Mastercard daha kare, Troy arasi)
     genislik yerine yuksekliğe gore olculendiriliyor, kendi dogal
     oranlarini korurlar. */
  .ngOdemeKartLogo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 34px;
  }
  .ngOdemeKartLogo img{ display: block; width: auto; }
  .ngOdemeKartLogo .ngVisaLogo{ height: 13px; }
  .ngOdemeKartLogo .ngMastercardLogo{ height: 22px; }
  .ngOdemeKartLogo .ngTroyLogo{ height: 16px; }

  /* "Kazancin" rozeti - altin zemin */
  .ngKazanc{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border-radius: var(--ng-radius);
    background: var(--ng-gold-300);
    color: var(--ng-navy-900);
    padding: 0 10px;
    box-shadow: 0 8px 14px -6px rgba(6,32,94,.18);
  }
  .ngKazancEtiket{ font-size: 12px; font-weight: 500; }
  .ngKazancTutar{ font-size: 13px; font-weight: 700; }

  /* --- Sagdaki kapak gorseli (panelden eklenen) --- */
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image{
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image a{
    display: block;
    overflow: hidden;
    border-radius: var(--ng-radius-img);
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image img{
    border-radius: var(--ng-radius-img);
    width: 100%;
    height: auto;
    display: block;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .newHeaderNavigation:not(.mobileStyle) .menu-wrap .menu-list-image a:hover img{
    transform: scale(1.05);
  }
  body .pageNumber .divMoreProducts .button{padding: 0 10px;line-height: 40px;font-size: 16px;color: #FFFFFF;font-weight: 700;margin: 0 0 15px 0;}
  body .pageNumber .productCountBar{display: none!important;}
  body .pageNumber .productCountInfo{color: #0C0C0C;font-size: 14px;font-weight: 400;}

  /*siteozelalan*/
  @media screen and (min-width: 1660px) and (max-width: 1720px){
    .leftImage{width: 1100px;}
    .RightDetail{width: calc(100% - 1100px);}
  }
  @media screen and (min-width: 1540px) and (max-width: 1660px){
    .leftImage{width: 990px;}
    .RightDetail{width: calc(100% - 990px);}
  }
  @media screen and (min-width: 1500px) and (max-width: 1539px){
    .leftImage{width: 950px;}
    .RightDetail{width: calc(100% - 950px);}
  }
  @media screen and (min-width: 1380px) and (max-width: 1500px){
    .leftImage{width: 900px;}
    .RightDetail{width: calc(100% - 900px);}
  }
  @media screen and (min-width: 1300px) and (max-width: 1380px){
    .leftImage{width: 850px;}
    .RightDetail{width: calc(100% - 850px);}
  }
  @media screen and (min-width: 1240px) and (max-width: 1300px){
    .leftImage{width: 750px;}
    .RightDetail{width: calc(100% - 750px); padding: 0 0 0 30px;}
  }
  @media screen and (min-width: 1160px) and (max-width: 1240px){
    .leftImage{width: 650px;}
    .RightDetail{width: calc(100% - 650px);padding: 0 0 0 30px;}
  }

  @media (min-width:1042px) {
    /* 2026-09-08 - DUYURU BARI ARTIK ANIMASYONLA KAPANMIYOR.
       Onceki kurgu: TUM header (#headerNew) sticky idi ve asagi
       kaydirilinca duyuru barinin yuksekligi .gectop sinifiyla 0.5
       saniyede 70 -> 0'a animate ediliyordu. Header sticky oldugu icin
       o yarim saniye boyunca ALTINDAKI her sey yukari suruklenip
       "kademeli kayma" hissi veriyordu (kullanici bildirdi).

       Yeni kurgu: sticky SADECE menu satirinda (.header-main). Duyuru
       bari akista normal bir blok olarak kaliyor ve sayfayla birlikte
       dogal sekilde yukari kayip gidiyor - gozde "gecikme" degil
       "kaydirma" olarak okunuyor. Ne animasyon ne yukseklik hesabi
       gerekiyor; .gectop mekanizmasinin tamami islevsiz kaldi.
       WEBJS hala .gectop ekliyor olabilir; sinif zararsiz, sadece artik
       bagli bir kural yok (kaldirmak icin bkz. HeaderFixed()).
       SADECE ".header-main"e sticky vermek ISE YARAMADI (canli olcum:
       menu satiri scroll 60'ta -12, 800'de -752 - hic yapismadi): sticky
       bir eleman ancak KENDI EBEVEYNININ kutusu icinde gezebilir, header
       kutusu ise sadece kendi yuksekligi kadar - gezecek alan yok.
       Calisan yol: sticky yine tum header'da ama "top" NEGATIF, tam
       duyuru bari yuksekligi kadar (-48px). Header once 48px yukari
       kayip duyuru barini ekrandan cikariyor, sonra menu satiri tam
       0'da sabitleniyor. Tek bir CSS degeri - animasyon, JS, yukseklik
       hesabi yok. Duyuru bari degisirse buradaki -48px de degismeli. */
    #headerNew{
      position: sticky;
      top: -48px;
      z-index: 1000;
      overflow-anchor: none;
    }

    .SmallImages #divVideoGoruntulemeAlan {display: block!important;float: left; width: 50%!important; cursor: pointer; padding: 0;}
    .SmallImages #divVideoGoruntulemeAlan #vdUrunVideo {padding: 0 10px 10px 0;}
    .SmallImages #divThumpVideo {display: none!important}

  }
  @media (min-width:1042px) {
    .sortingContent { display: block !important; }
    .col-5li { width: 20%; }
    .sortingContent li:nth-child(2) {display: none; }
    .categoryContainer .ProductList.PlSc_2 {max-width: 70%;margin: 0 auto;}
    .categoryTitle {position: relative;padding: 0 60px;float: left;width: 100%;z-index: 9;background: #fff;}

    .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet span {line-height: 28px;font-size: 16px;font-weight: 500;color: #3D5C5C;z-index: -1;}
    .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet .blockSelect {margin-right: 0!important;margin: 5px 0;}
    .brandlistselection .sortingContent .blockSelect a{margin: 0 10px; height: 20px; border: none;}
    .brandlistselection .sortingContent .blockSelect a i:before{display: block; height: 20px;line-height: 20px}
    .brandlistselection .sortingContent .blockSelect a.sort_3 i:before{content: url('https://cdn.ticimax.cloud/uploads/sayfatasarim/elittasarim31/uclu.svg');}
    .brandlistselection .sortingContent .blockSelect a.sort_3:hover i:before,
    .brandlistselection .sortingContent .blockSelect a.sort_3.Active i:before{content: url('https://cdn.ticimax.cloud/uploads/sayfatasarim/elittasarim31/uclu-active.svg');}
    .brandlistselection .sortingContent .blockSelect a.sort_4 i:before{content: url('https://cdn.ticimax.cloud/uploads/sayfatasarim/elittasarim31/dortlu.svg');}
    .brandlistselection .sortingContent .blockSelect a.sort_4:hover i:before,
    .brandlistselection .sortingContent .blockSelect a.sort_4.Active i:before{content: url('https://cdn.ticimax.cloud/uploads/sayfatasarim/elittasarim31/dortlu-active.svg');}

    body #divSayfalamaUst.Slct .brandlistselection .sortingContent {background: transparent;width: auto;float: right;padding: 0 !important;margin: 0;}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent select {float: left;height: 30px;font-size: 15px;letter-spacing: normal;color: #222222;font-weight: 400;border: none;background: transparent;border-radius: var(--ng-radius);padding: 0 15px 0 5px;-webkit-appearance: none;-ms-appearance: none;-moz-appearance: none;-o-appearance: none;width: auto;background: url('https://cdn.ticimax.cloud/uploads/sayfatasarim/elittasarim31/FiltreBg.svg') center right no-repeat;overflow: hidden;}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent li { height: auto; padding: 0; border-radius: var(--ng-radius); background: transparent; float: left; margin-right: 30px; }
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet { float: right; }
    body #divSayfalamaUst.Slct li.appliedFilter.FiltrelemeUrunAdet { margin: 0; }
    body #divSayfalamaUst.Slct li.appliedFilter.FiltrelemeUrunAdet span {line-height: 30px;font-weight: 400;float: left;margin: 0 40px 0 0;letter-spacing: normal;color: #F04A4A; }
    body #divSayfalamaUst.Slct .brandlistselection a.filterOrderInStock { padding: 0; background: transparent; color: #252525; font-size: 14px; }
    body #divSayfalamaUst.Slct .brandlistselection a.filterOrderInStock span {  font-weight: 350; display: inline-block; vertical-align: top; text-transform: uppercase; letter-spacing: normal; }
    body #divSayfalamaUst.Slct .brandlistselection a.filterOrderInStock:before { content: ''; width: 15px; height: 15px; border: 1px solid #e6e6e6; float: left;  margin-right: 10px; }
    body #divSayfalamaUst.Slct .brandlistselection a.filterOrderInStock.selected:before { background: #000; border-color: #000; }
    body #divSayfalamaUst .filterDeleteContent { float: left; margin: 0;  padding: 0; width: 100%; }
    body #divSayfalamaUst .filterDeleteContent .appliedFilter {padding: 0;margin: 0 15px 0 0;height: auto;background: transparent;border: 1px solid #666;width: auto;display: flex;align-items: center;justify-content: center;flex-direction: row-reverse;}
    body #divSayfalamaUst .filterDeleteContent .appliedFilter a { width: 25px; margin: 0; }
    body #divSayfalamaUst .filterDeleteContent .appliedFilter a i { font-family: 'FontAwesome'; line-height: 30px; color: #000000; font-size: 15px; }
    body #divSayfalamaUst .filterDeleteContent .appliedFilter a i:before { content: '\f00d'; }
    body #divSayfalamaUst .filterDeleteContent .appliedFilter .filter-content span {color: #666;font-size: 12px;text-align: left;font-weight: normal;margin: 0 4px;}
    body #divSayfalamaUst .filterDeleteContent .appliedFilter .filter-content span + span {color: #666;margin-top: 0;}
    body #divSayfalamaUst .filterDeleteContent .appliedFilter .filter-content {display: flex; align-items: center; justify-content: center; }
    body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir { display: block; border-color: #000; }
    body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir a { width: 100%; background: transparent; line-height: 1; margin: 0; padding: 0 5px; }
    body #divSayfalamaUst .filterDeleteContent .appliedFilter.FiltrelemeKaldir a span { line-height: 30px; font-weight: normal; color: #000; font-size: 12px; text-align: center; margin: 0; width: 100%; }
    .FiltreToggle {float: left;cursor: pointer;line-height: 34px;font-size: 11px;color: #231F20;text-indent: 0;text-transform: uppercase;display: flex;align-items: center;justify-content: center;font-weight: 300;padding: 0;}
    .CategoryText { float: left; width: 100%; margin-top: 120px; }
    .CategoryTextWrap { width: 1600px; margin: 0 auto; max-width: 100%; }
    .CategoryTextContent { font-size: 13px; color: #000000; line-height: 30px; letter-spacing: normal; text-align: center; /*max-height: 120px;*/ overflow: hidden; overflow-y: auto; padding: 0px 100px; }
    body #divSayfalamaUst .filterBlock {float: left;border: none;border-radius: var(--ng-radius);width: 100%;background: rgb(255 255 255);position: relative;top: 34px;right: 0;padding: 0;display: none !important;box-sizing: border-box;z-index: 2;}
    body #divSayfalamaUst .filterBlock.active { display: block !important; }

    body #divSayfalamaUst .category-vertical-filters.top-filters {padding: 30px 25px;margin: 0;background: white;position: absolute;left: 0;right: 0;width: 100%;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .FiltreicerikAlan {display: block;clear: both;margin: auto 0;position: relative;width: 100%;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .panel {width: 20% !important;margin: 0;padding: 0 0 30px 0;position: relative;}
    .category-vertical-filters.top-filters .panel.div-kategori {display: none; }
    body #divSayfalamaUst .category-vertical-filters.top-filters .panel.vertical-top-price-filter { }
    body #divSayfalamaUst .category-vertical-filters.top-filters .panel .panel-heading {padding: 0;border: none;margin: 0;min-width: auto;border-right: none;background-color: transparent !important;margin-bottom: 20px !important;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .panel .panel-heading:after { }
    body #divSayfalamaUst .category-vertical-filters.top-filters .panel .panel-heading a {line-height: 20px;text-align: left;font-size: 18px;padding: 0;font-weight: 400;letter-spacing: normal;color: #3C3436;text-transform: uppercase;}
    body .category-vertical-filters.top-filters .panel .panel-heading a:after { display: none; }
    body #divSayfalamaUst .category-vertical-filters.top-filters .list-group.dropdown > li {float: left;text-align: left;margin: 0;width: 100%;padding: 0;background: transparent !important;margin-bottom: 10px;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .div-kategori .list-group.dropdown > li { width: 100%; }
    body #divSayfalamaUst .category-vertical-filters.top-filters .list-group.dropdown li a {line-height: 16px;font-size: 16px;color: #7C7779;font-weight: 400;letter-spacing: normal;text-transform: uppercase;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .list-group.dropdown li a:hover { text-decoration: underline; }
    body #divSayfalamaUst .category-vertical-filters.top-filters .list-group.dropdown > li ul { display: block; width: 100%;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .list-group.dropdown > li ul > li { width: 100%; }
    body #divSayfalamaUst .category-vertical-filters .vertical-filter-panel .list-group-item:before {display: inline-block;width: 16px;height: 16px;border-color: #838383;margin: 0;margin-right: 4px;vertical-align: top;float: left;}
    body #divSayfalamaUst .category-vertical-filters .vertical-filter-panel .list-group-item:hover:before {background: transparent;content: '\f00c';font-family: fontawesome;font-size: 10px;line-height: 14px;display: block;text-align: center;font-weight: 400;color: #F04A4A;}
    body #divSayfalamaUst .category-vertical-filters .vertical-filter-panel .list-group-item.selected:before {background: transparent;content: '\f00c';font-family: fontawesome;font-size: 10px;line-height: 14px;display: block;text-align: center;font-weight: 400;color: #F04A4A;}
    body #divSayfalamaUst .category-vertical-filters .vertical-filter-panel .list-group-item.list-group-item-image { background: transparent !important; height: auto; }
    body #divSayfalamaUst .category-vertical-filters .vertical-filter-panel .list-group-item a { color: #000; }
    body #divSayfalamaUst .category-vertical-filters.top-filters .list-group.dropdown {top: 100%;width: auto;display: block !important;position: static;box-shadow: none;-webkit-box-shadow: none;border: 0;padding: 0;margin: 0;font-size: 0;max-height: 210px;background: transparent;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .slider-range {background: #AAAAAA;height: 2px;width: 100%;margin: 11px 0 0;border: none;float: left;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .slider-range .ui-slider-range { background: #262626; height: 2px; margin-top: 0; }
    body #divSayfalamaUst .category-vertical-filters.top-filters .slider-range .ui-slider-handle {background: #707070;border-radius: 100%;width: 8px;height: 8px;border: none;margin-top: -3px;margin-right: 0;top: 0;box-shadow: none;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .amount {color: #231F20;font-size: 11px;font-weight: 500;left: 0;padding: 10px 0 0;float: left;width: 100%;text-align: center;margin-bottom: 0;}
    .ticiContainer.categoryContainer .btDetay {display: none; }
    .ProductBody .btListe {display: none !important; }
    .btListe {position: absolute;left: 85px;bottom: 35px;cursor: pointer;color: #FFFFFF;font-weight: 400;padding: 0;color: #231F20;font-size: 11px;line-height: 14px;border-bottom: 1px solid #231F20;font-weight: 500;padding: 2px 0;}
    .FiltreToggle:before {content: "+"; float: left;margin-right: 5px;font-size: 14px;}
    .FiltreToggle.active:before {content: "-";}
    .FiyatSlider {max-width: 170px; margin: 0px auto; }
    .FiyatSlider {max-width: 170px; margin: 0px auto; }
    .panel.div-kategori {float: left;width: auto;padding: 10px 0;overflow: hidden;display: none;}
    .panel-heading {border: none !important; height: 15px; padding: 0 !important; margin: 0 !important; }
    .panel.div-kategori > ul {padding: 30px 60px;background: white;position: absolute;left: 0;width: 320px;max-width: 50%;transform: translate(-100%);transition: .5s all;margin-top: -1px;display: block !important;z-index: 999;height: 100vh;overflow: hidden;}
    .panel.div-kategori li {list-style: none; padding: 0; margin: 0; }
    .panel.div-kategori > ul > li > a {font-size: 11px; line-height: 14px; font-weight: 600; text-transform: uppercase; }
    .panel.div-kategori > ul > li > ul > li {margin-bottom: 8px; }
    .panel.div-kategori > ul > li > ul > li a {font-size: 11px; line-height: 14px; color: #231F20; }
    .panel.div-kategori > ul > li:nth-child(1) {display: block; }
    .panel.div-kategori > ul > li {display: none; }
    .panel.div-kategori .panel-title {float: left; cursor: pointer; line-height: 14px; font-size: 11px; color: #231F20; text-indent: 0; display: flex; align-items: center; justify-content: center; font-weight: 400; }
    h1.categoryName {text-align: center;font-size: 20px;font-weight: 300;line-height: 34px;color: #000;display: inline-block;position: absolute;bottom: 0;width: 100%;left: 0;right: 0;z-index: -1;}
    .panel.div-kategori > ul > li > ul {padding: 20px 0 50px; margin: 0; }
    .panel.div-kategori:hover > ul {transform: translate(0%); }
    .brandlistselection {float: left;width: 100%;}

    .miniCartRigthScroll > .miniCartSatir2:nth-child(1){display:none;}
    .miniCartRigthScroll > .miniCartSatir1:nth-child(1) {display: none; }
    .miniCartRigthScroll > .miniCartSatir1:nth-child(2) {display: none; }
    .miniCartRigthScroll > .miniCartSatir2:nth-of-type(3) {display: none; }

    #divCartMiniContent .miniCartRigth .miniCartRigthScroll{height: 100%;}
    .miniCartRigthScroll .hediyeCekiBtnContent{padding: 1rem 0;}
    .miniCartRigthScroll .hediyeCekiBtnContent a .offers-tab {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;}
    .miniCartRigthScroll .hediyeCekiBtnContent a .offers-tab svg{width: 1.5rem;height: 1.5rem;margin-right: 1rem;}
    .miniCartRigthScroll .hediyeCekiBtnContent a .offers-tab span{font-size: .889rem;letter-spacing: normal;font-weight: 700;line-height: 16px;}
    .miniCartRigthScroll .miniCartContent{padding: .667rem 1.667rem;}
    .miniCartRigthScroll .miniCartContent .miniCartHr{background: #e0dad5;margin: 1.334rem 0 1rem;}
    .miniCartRigthScroll .miniCartContent .miniCartItem{flex-flow: row wrap;padding-top: 33px;}
    .miniCartRigthScroll .miniCartDetail {position:static;}
    .miniCartRigthScroll .miniCartDetail span.minimarka{line-height: 16px;}
    .miniCartRigthScroll .miniCartDetail span.minimarka a{color: #605858;font-size: .889rem;line-height: 16px;letter-spacing: normal;}
    .miniCartRigthScroll .miniCartDetail span.miniurunAdi{line-height: 20px;}
    .miniCartRigthScroll .miniCartDetail span.miniurunAdi a{color: #221d1d;font-size: 1rem;line-height: 20px;letter-spacing: normal;}
    .miniCartRigthScroll .miniCartDetail span.ministokKodu{color: #605858;font-size: .889rem;line-height: 16px;letter-spacing: normal;}
    .miniCartRigthScroll .miniCartDetail .miniCartButtonSil{position:absolute;top: 0;right: 0;z-index: 1;margin: 0;}
    .miniCartRigthScroll .miniCartDetail .miniCartButtonSil a{width: 24px;height: 28px;font-size: 0;max-width: 100%;line-height: 28px;text-align:center;}
    .miniCartRigthScroll .miniCartDetail .miniCartButtonSil a:before{content: '\f00d';font-family: 'FontAwesome';font-weight: 400;font-size: 15px;color:#000;}
    .miniCartRigthScroll .miniCartDetail .miniCartButtonSil svg{display: none;}
    .miniCartRigthScroll .miniCartDetay .adettanim1{color: #605858;font-size: .889rem;line-height: 16px;letter-spacing: normal;}

    .miniCartRigthScroll .miniCartItemprice .DiscountPrice{font-size: 1rem;color: #4e3844;font-weight: 400;}
    .miniCartLeftProduct .miniCartLeftProductIem .productDetail .regularPrice{margin-right: 6px;font-weight: 400;}
    .miniCartLeftProduct .miniCartLeftProductIem .productDetail .discountPrice{color: #AF5071;font-weight: 400;}
    #divCartMiniContent .miniCartLeftProduct .miniCartLeftProductIem{width: 167px;}
  }
  /* ------------------------------------Container--------------------------------------------*/
  .headerContent,body ul.breadcrumb,.navigation > div,.userLoginContent,.hesabimContent,.sepetimBody .headerContent,.sepetimBody #footer .ticiContainer,.ticiContainer{ max-width: 100%; margin: 0 auto;position: relative; clear: both; display: block; }

  .sliderBannerContainer .ProductList{max-width:100%;}
  .detaySliderContainer .ProductList{max-width:100%;}
  .homeContainer .ProductListContent .ProductList{max-width:100%;}
  .markaSlider .jCarouselLite{max-width:100%;}
  /**/
  .headerContent{text-align:center;}
  .innerContainer{}
  #divIcerik.homepage {}
  .UyeOl .ticiContainer{}
  #footer .ticiContainer{}
  .UyeGiris .ticiContainer{}
  .Magazalar .ticiContainer{}
  .sepetimBody .ticiContainer{margin: 0 auto;}
  .sepetimBody .headerContent{}
  .HesabimTakip .ticiContainer{}
  .Iletisimaspx .ticiContainer{}
  .homeContainer .ticiContainer{}
  .ticiContainer.homeContainer {}
  .ticiContainer.pageContainer {}
  .ticiContainer.categoryContainer {}
  .sepetimBody #footer .ticiContainer{}
  .ticiContainer.productDetailContainer {}
  .sepetimBody .footerSslLogo{display: none!important;}
  .sepetimBody .headerContent{box-shadow:none;}
  /**/
  .centerCount.Middle             {width: 100%;padding: 0;}
  .centerCount.userLoginContent   {width: 100%;padding: 0;}
  .centerCount.iletisimContent    {width: 100%;padding: 0;}
  .centerCount.UyeolContent       {width: 100%;padding: 0;}
  .centerCount.HesabimTakip       {width: 100%;padding: 0;}
  /**/
  .leftBlock   {float: left;width: 300px;padding-right: 20px;}
  .rightBlock  {float: right;width:300px;padding-left:20px;}
  .centerCount.LeftMiddle {width: calc(100% - 300px);}
  .centerCount.RightMiddle {width: calc(100% - 300px);}
  .centerCount {float: left;width: 100%;padding: 0;}
  /*SolOrtaSag*/
  .leftBlock.LeftMiddleRight   {width: 25%;}
  .rightBlock.LeftMiddleRight  {width: 25%;}
  .centerCount.LeftMiddleRight {width: 50%;}
  /**/
  .ticiContainer:before, .ticiContainer:after { content: ""; display: table; }
  .ticiContainer:after { clear: both; }
  .ticiContainer { clear: both; zoom: 1; }
  /* ------------------------------------Container--------------------------------------------*/
  /*Tablet ekranina kadar olan windows gorunumu*/
  @media screen and (min-width:1041px) and (max-width:1200px) {
    .leftBlock.LeftMiddle {width: 25%;padding-right: 20px;}
    .centerCount.LeftMiddle {width: 75%;}
    /*SolOrtaSag*/
    .leftBlock.LeftMiddleRight   {width:25%;}
    .rightBlock.LeftMiddleRight  {width:25%;}
    .centerCount.LeftMiddleRight {width:50%;}
    /*OrtaSag*/
    .rightBlock.MiddleRight  {width:25%;}
    .centerCount.MiddleRight {width:75%;}
    .homeContainer .col-5li { width: 25%;}
  }
  @media screen and (min-width: 1160px) and (max-width: 1239px) {
    /* ------------------------------------Container--------------------------------------------*/
    .headerContent,body ul.breadcrumb,.navigation > div,.userLoginContent,.hesabimContent,.sepetimBody .headerContent,.sepetimBody #footer .ticiContainer,.ticiContainer{max-width: 1100px;}
    /* ------------------------------------Container--------------------------------------------*/
    .homeContainer .ProductListContent .ProductList{max-width:1100px;}
    .sliderBannerContainer .ProductList{max-width:1100px;}
    .detaySliderContainer .ProductList{max-width:1100px;}
    .markaSlider .jCarouselLite{max-width:1100px;}
    #divIcerik.homepage{margin: 0 auto;}
  }
  @media screen and (min-width: 1025px) and (max-width: 1159px) {
    /* ------------------------------------Container--------------------------------------------*/
    .headerContent,body ul.breadcrumb,.navigation > div,.userLoginContent,.hesabimContent,.sepetimBody .headerContent,.sepetimBody #footer .ticiContainer,.ticiContainer{max-width: 960px;}
    /* ------------------------------------Container--------------------------------------------*/
    .homeContainer .ProductListContent .ProductList{max-width:960px;}
    .sliderBannerContainer .ProductList{max-width:960px;}
    .detaySliderContainer .ProductList{max-width:960px;}
    .markaSlider .jCarouselLite{max-width:960px;}
    #divIcerik.homepage{margin: 0 auto;}
  }
  @media (min-width: 768px) and (max-width: 1041px) {
    .mobilMenuAcButton{float: left;margin-top: 20px;margin-right: 50px;color: #000;fill: #000;}}
  @media (min-width: 768px) and (max-width: 1024px) {
    /* ------------------------------------Container--------------------------------------------*/
    .headerContent,body ul.breadcrumb,.navigation > div,.userLoginContent,.hesabimContent,.sepetimBody .headerContent,.sepetimBody #footer .ticiContainer,.ticiContainer{max-width: 720px;}
    /* ------------------------------------Container--------------------------------------------*/
    .homeContainer .ProductListContent .ProductList{max-width:720px;}
    .sliderBannerContainer .ProductList{max-width:720px;}
    .detaySliderContainer .ProductList{max-width:720px;}    .markaSlider .jCarouselLite{max-width:720px;}
    #divIcerik.homepage{margin: 0 auto;}
    .headerContent{margin: 0 auto;}
  }
  /* mobil ve tablet ekran olcusune gore 1041px e kadar bunlari uygula */
  @media (max-width:1041px) {
    /******************************************************/
    .navigation{display: none;}
    #divSayfalamaUst .filterBlock{display:block!important;}    body .dropdown-toggle:after { display: none; }
    body #divSayfalamaUst {  padding:0;margin:10px 0;width: 100%;border: none;background: transparent;}
    .urunListRel { width: 100%; }
    body .mobilFilterOpenBtn .button {padding: 0;margin: 0;color: #000;border: 1px solid #c3c3c3; width:calc(50% - 5px);float:left; line-height: 38px;background: #fff;font-size: 14px;display: inline-block;vertical-align:top;font-weight: 500;}
    body .mobilFilterOpenBtn .button:before {content: '';font-family: 'FontAwesome';display: inline-block;vertical-align:top;line-height: 38px;margin-right: 5px;font-weight: 300;}
    body .mobilFilterOpenBtn .button.mobilSiralamBtn {float: left;}
    body .mobilFilterOpenBtn .button.mobilFilterBtn {float: right;}
    body .mobilFilterOpenBtn .button.mobilFilterBtn:before {content: '\f1de';}
    body .mobilFilterOpenBtn .button.mobilSiralamBtn:before {content: '\f15d';}
    body .mobilFilterOpenBtn { margin:0;padding: 0;display: block!important;}
    .categorydesign .uNo{float: right;color: #999a9d;font-size: 12px;}
    body #divSayfalamaUst .filterDeleteContent{display: none;}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent li:nth-child(1):after{display: none;}

    body #divSayfalamaUst.Slct .brandlistselection{position:absolute;left: 0;top: 0;width:calc(50% - 5px);background:transparent;padding: 0;margin: 0;border: none;border-radius: var(--ng-radius);}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent{width: 100%;display: block!important;background:transparent;padding: 0;margin: 0;border: none;border-radius: var(--ng-radius);}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent li{width: 100%;background:transparent;padding: 0;margin: 0;border: none;border-radius: var(--ng-radius);}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent select{width: 100%;height: 40px;font-size: 0;text-indent: 0;border: none;color: #000;font-weight: 500;min-width: auto;border-radius: var(--ng-radius);background: transparent;-webkit-appearance:none;-moz--appearance:none;}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent select option{font-size: 14px;}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent li:nth-child(2){display: none;}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet{display: none;}

    body #divSayfalamaUst:not(.Slct) .brandlistselection{padding: 0;text-align:center;position: absolute;top: 100%;left: 0;right: 0;z-index: 10;border-bottom: none;background: #fff;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent{display: none;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li:not(.appliedFilter){margin: 0;width: 100%;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li a{border:none;text-align:center;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li a span{line-height: 35px;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li.appliedFilter.FiltrelemeUrunAdet{display: none;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li:nth-child(5) {display:none;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li:nth-child(5) a:before{display:none;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li > a{border-bottom: 1px solid #e5e5e5;}
    body #divSayfalamaUst:not(.Slct) .brandlistselection .sortingContent li:nth-child(4) > a{border-bottom:none;}

    body .category-vertical-filters.top-filters{display: block!important;width: 360px; position: fixed;top: 0;right:-100%;bottom: 0;z-index: 9999;background: #f3f5f8;margin: 0;padding: 0;border: none;transition:all .3s ease;}
    body .category-vertical-filters.top-filters ul{list-style: none;padding: 0;margin: 0;}
    body .filterBlock.active .category-vertical-filters.top-filters{right: 0;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .FiltreUst{float: left;width: 100%;line-height: 50px;font-size: 16px;color: #fff;margin-bottom: 10px;padding: 0 10px;position: relative;text-align:center;display: block;}
    body .category-vertical-filters.top-filters .FiltreUst span{display: inline-block;vertical-align:top;position:absolute;left: 0;right: 0;top: 0;bottom: 0;}
    body .category-vertical-filters.top-filters .FiltreUst .closeFilt{float: left;font-size: 25px;position: relative; z-index: 1;}
    body .category-vertical-filters.top-filters .FiltreUst a{float: right;font-size: 13px;position: relative;z-index: 1;color: #fff;display:none;}
    body .category-vertical-filters.top-filters .FiltreUst a.active{display:block;}
    body .category-vertical-filters.top-filters .FiltreUst a i{color: #fff; font-size: 20px;display: inline-block;vertical-align:top;line-height: 50px;margin-left: 5px;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .tukgo{float: left;width: 100%;margin-bottom: 10px;position: relative;padding: 0 10px;display: block;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .FiltreicerikAlan {float: left; width: 100%; max-height: calc(100% - 190px); overflow-y: auto; overflow-x: hidden; }
    body #divSayfalamaUst .category-vertical-filters.top-filters .filtreUygulaBtn {float: left;width: 100%;text-align:center;margin-top: 10px;display: block;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .filtreUygulaBtn span{display: inline-block;vertical-align: top;background: #061d4c;padding: 10px;min-width: 150px;color: #fff;line-height: 30px;font-size: 15px;text-transform: uppercase;}
    body .category-vertical-filters.top-filters .tukgo .filterOrderInStock{float: left;width: 100%;line-height: 50px;font-size: 14px;color: #262324;text-align:left;padding: 0 0 0 15px;background: #fff;}
    body .category-vertical-filters.top-filters .tukgo .filterOrderInStock:before{content: '';float:right;width: 24px;max-height: 24px;position: absolute;top: 0;bottom: 0;right: 32px; border-radius: 100%;background: #c5c7c9;margin:auto 0;background: #fff;box-shadow:0 0 2px 0 #999;z-index: 1;transition:all 0.3s ease;}
    body .category-vertical-filters.top-filters .tukgo .filterOrderInStock:after{content: '';float:right;width: 40px;max-height: 16px;position: absolute;top: 0;bottom: 0;right: 0; border-radius: var(--ng-radius);background: #c5c7c9;margin:auto 15px auto 0;transition:all 0.3s ease;}
    body .category-vertical-filters.top-filters .tukgo .filterOrderInStock.selected:before{right: 15px;}
    body .category-vertical-filters.top-filters .tukgo .filterOrderInStock.selected:after{background: #39d662;}

    body .category-vertical-filters.top-filters .panel .panel-heading{padding: 0;margin: 0;border: none;background: #fff;float: left;width: 100%;}
    body .category-vertical-filters.top-filters .panel .panel-heading a{float: left;width: 100%;text-align:left;color: #262324;font-weight: 500; font-size: 15px;line-height: 50px;padding: 0 10px;text-transform:uppercase;}
    body .category-vertical-filters.top-filters .panel .panel-heading a:after{top: 0;color: #000;font-weight: 300;font-family: 'FontAwesome';right: 10px;}
    body #divSayfalamaUst .category-vertical-filters.top-filters .moreNum{position: absolute;right: 40px;top: 0;bottom: 0;line-height: 50px;font-size: 15px;color: #000;display: block;}
    body .category-vertical-filters.top-filters .panel {float:left;width: 100%;margin-bottom: 10px;padding: 0 10px;}
    body .category-vertical-filters.top-filters .panel:last-child {margin-bottom: 0;}
    body .category-vertical-filters.top-filters .list-group.dropdown{border: none;position:static;box-shadow: none;}
    body .category-vertical-filters.top-filters .list-group.dropdown ul {margin-top: 10px;}
    body .category-vertical-filters.top-filters .list-group.dropdown li{width:100%;margin-right: 0;text-align:left;margin-bottom: 10px;}
    body .category-vertical-filters.top-filters .list-group.dropdown li a{color: #000;line-height: 16px;}
    body .category-vertical-filters.top-filters .vertical-filter-panel .list-group-item a{font-size: 13px;color: #262324;font-weight: normal;float: left;}
    body .category-vertical-filters .vertical-filter-panel .list-group-item:before{border-radius: var(--ng-radius);display: inline-block!important;width: 16px;height: 16px;}
    body .category-vertical-filters .vertical-filter-panel .list-group-item.selected:before{border-color: #000;background: #000;}
    body .category-vertical-filters .vertical-filter-panel .list-group-item.list-group-item-image{background: transparent!important;height: auto;}
    body .category-vertical-filters.top-filters .panel.vertical-top-price-filter{width: 100%;margin:20px 0;}

    body #divSayfalamaUst.Slct .brandlistselection .filterDeleteContent{display: none!important;}
    body #divSayfalamaUst.Slct .brandlistselection .sortingContent li:first-child:before{display: none;}

    body .slider-range{margin: 0 0 15px 10px!important;width: calc(100% - 20px);}
    body .amount{padding: 0;}

    .centerCount{width:100%!important;}
    .leftBlock {display:none!important;}
    .rightBlock {display:none!important;}
    .homeContainer .leftBlock {}
    .homeContainer .rightBlock {}

    .UyeolContent .grid { margin: 30px 18px; }
    .owl-carousel .owl-item img { max-width: 100%; margin: 0 auto;}
    .mobileImageSlider .owl-stage-outer{float: left;width: 100%;}
    .uyeOlContainer #FrmYeniUye > .uyeOlCol{width: 100%;padding: 10px;margin: 10px 10px 0 0;}
    .uyeOlContainer .FormTitle{margin: 10px 0;padding: 10px 0;font-size: 18px;font-weight: 600;}
    .uyeOlContainer .uyeOlCol input.textbox{padding: 10px 0;}
    .uyeOlContainer .uyeOlCol select.selectboxx{padding: 10px 0;}
    .Magazalar .magazaSelect{width: 100%;margin-right: 0;}
    .Magazalar #searchStore{width: 100%;margin-right: 0;}

    /*MobilMenu*/
    .menuUstBolum { width: 100%; display: inline-block; float: left; margin-top:0; border-bottom:1px solid #e8e8e8;}
    .menuUstBolum .CloseBtnMenu { float: right; fill: #fff; width: 50px; text-align: center; margin:0;cursor: pointer;}
    .menuUstBolum .CloseBtnMenu svg{width: 20px;margin-top: 15px;}
    .menuUstBolum .menuBack { float: left; line-height: 50px;fill: #fff; color: #fff;font-size: 15px; text-align: center; margin:0;cursor: pointer;padding-left: 20px;}
    .menuUstBolum .menuBack svg {margin-right: 10px;float: left;margin-top: 15px;width: 20px;}}
  /* Mobil Ekran */
  @media (max-width:767px) {
    body.overflow{overflow: hidden;}
    #divIcerik.homepage{margin: 0 auto;}
    body{}
    #header {min-height: 50px;}
    body.sepetimBody { padding-top: 0; }
    #lang_flag_container{display: none;}
    .userContainer .userLeftBox, .userContainer .userRightBox{padding: 0;}
    .userContainer .userRightBox{margin-top: 20px;}
    .SifremiUnuttumContent .userWrapper.SifremiUnuttum{width: 100%;padding: 0 10px;}
    .headerContent{margin: 0 auto;}
    #divIcerik{padding: 0 10px;margin: 0 auto;}
    .proCategoryTitle.categoryTitleText{padding: 0 10px;}
    #footer .ticiContainer{padding: 0 10px;}
    #divTicimaxCopyrightContent{text-align:center;float: left;width: 100%;margin-bottom: 40px;}
    #divTicimaxCopyrightContent a{display: inline-block;}
    #divTicimaxCopyrightContent img{display: inline-block;vertical-align:top;}/*header click button*/
    .mycart{top: 10px;right: 5px;width: 15px; height: 15px; z-index: 2;}
    .mycart .sepetUrunSayisi{width: 15px;height: 15px;line-height: 15px;background: #000;color: #fff;}    .searchClick{display: block; position: absolute;top: 11px;left: 50px;}
    .welcomeOpen{display: block; position: absolute;top: 11px;right: 50px;}
    .mycartClick{display: block; position: absolute;top: 11px;right: 10px;}.searchClick svg{width: 25px;}
    .welcomeOpen svg{width: 22px;}
    .mycartClick svg{width: 25px;}.menuUstBolum{margin-top: 0;}    .SepetUst { float: left; width: calc(100% + 20px); text-align: center; color: #fff; line-height: 50px; font-size: 16px; margin-left: -10px; margin-right: -10px; margin-top: -10px; }
    .SepetUst span { display: inline-block; vertical-align: top; }
    .SepetUst .seClose { float: left; width: 40px;fill: #fff; position: absolute; left: 0; }
    .SepetUst .seClose svg {width: 20px;margin-top: 15px;}.spanustSepetteUrunYok{font-size:16px;margin:20px 0 0 0;float:left;clear:both;text-align:center;width:100%;font-weight: 900;color: #d0112b;}
    .spanustSepetteUrunYok:before{content:'!';font-size:50px;vertical-align:top;border:1px solid;display: block;width: 100px;height: 100px;line-height: 98px;border-radius: 100%;margin: 0 auto;margin-bottom: 30px;}
    .mycart {background: none !important; padding: 0; margin: 0; border: none;position: absolute;left: auto;bottom: auto;}
    .mycart:before{display: none;}
    .mycart:after{display: none;}
    .mycart .sepetTopTutar { display: none !important; }
    .mycart .sepetUrun { display: none !important;}
    .mycart .sepetTecxt { display: none !important; }
    .mycart .sepetUrunSayisi{ display: block !important; border-radius:100%;text-align:center;font-size: 12px;border: none;position: static;margin: 0;}
    .mycart .sepetUrunSayisi:before{display: none;}
    .mycart .sepetUrunSayisi:after{display: none;}
    .mycart > a {display: block;width: auto;height:auto;padding:0;border: none;margin: 0;background:transparent;}
    .mycart > a:before{display: none;}
    .mycart > a:after{display: none;}
    /*Sabit sayfalar icerik*/
    .spanTittle { font-size: 18px !important; }
    .iletisimContent .iletisimForm{width: 100%;padding: 0;}
    .iletisimContent .AdBan{width: 100%;}
    .iletisimContent .categoryTitle {margin: 0;}
    .iletisimContent .categoryTitle .categoryTitleText{line-height: 65px;}
    .iletisimContent .categoryTitle:before{display:none;}
    .iletisimContent .iletisimRight .categoryTitle {margin-bottom: 10px;}
    .iletisimContent .iletisimRight .categoryTitle .categoryTitleText{line-height: 65px;font-size: 19px;}
    .iletisimContent .iletisimForm .categoryTitle {margin-bottom: 10px;}
    .iletisimContent .iletisimForm .categoryTitle .categoryTitleText{line-height: 65px;font-size: 19px;}
    .iletisimContent .iletisimRight .iletisimbanka .span > div.line2 > div.line2{float: none;display: block;margin: 10px 0 0;}
    .iletisimContent .iletisimLeft .span.iletisimLeftFirmaAdi .Right{font-size: 17px;}
    .iletisimContent .iletisimRight .iletisimbanka .span > div span{font-size: 12px;}
    .iletisimContent .iletisimLeft .Right{font-size: 12px;}
    .iletisimContent .iletisimLeft .span.iletisimLeftTelefon .Right{font-size: 20px;}
    .UyeolContent .grid { width: 100%; margin: 0; padding: 10px; border: none; margin-bottom: 10px; }
    .SifremiUnuttum { width: 100%; margin: 0; padding: 0; }
    .SifremiUnuttum .line { width: 100%; }
    .SifremiUnuttum #mainHolder_txtbxMail { width: 70%; }
    .SifremiUnuttum .button { width: 30%; }
    /*Header Sabitler*/
    .resimliYanMenu { display: none; }    #header { border: none; margin-bottom: 0 !important; padding-top: 0; box-shadow: none; height:auto; position: fixed;left: 0;right: 0;top: 0;}
    #header:before{display: none;}
    #header.homeHeader { border: none;}
    .headerContent {text-align:left;}.search { margin: 0; max-width: 100%; width: 100%; position: relative; padding: 0; display: block; }
    .search:after { display: none; }
    .search:before { display: none; }
    .search .crossclick { display: none; }#txtbxArama { height: 40px; padding-right: 40px; padding-left: 10px; width: 100%; box-shadow: none; font-size: 12px;border-radius: var(--ng-radius); margin:0;border: 1px solid #f1f1f1;text-align: left;}    #btnKelimeAra { width: 40px; height: 40px; right: 0; top:0; line-height: 40px; text-indent: 0;padding: 0; left: auto; border: none;border-radius: var(--ng-radius);text-align:center;}
    .ButtonMic{right:40px;height: 40px;}.headerHesabim, .headerCikis, .headerUyeOl a, .headerUyeGiris a { float: none; display: inline-block!important; font-size: 13px; line-height: 40px; color: #fff; border: none; padding: 0; width: auto; height: auto; margin: 0; font-weight:500;}
    .headerUyeGiris a, .headerHesabim { background: transparent; margin-right: 10px; }
    .headerUyeGiris a:after, .headerHesabim:after, .headerCikis:after, .headerUyeOl a:after, .headerUyeGiris a:before, .headerHesabim:before, .headerCikis:before, .headerUyeOl a:before { display: none; }
    /*urun butonlari*/
    .ProductIcon{margin: 0;float: left;width: 100%;}
    .ProductIcon > div{margin: 0 0 10px;float: left;width: 50%;}
    .ProductIcon2 > div{margin: 0 0 10px;float: left;width: 50%;}
    .ProductIcon > div > a{justify-content: center; -webkit-justify-content: center;}
    .ProductIcon2 > div > a{justify-content: center; -webkit-justify-content: center;}
    .socialButons iframe{margin-right: 10px;}
    .socialButons .UWhatsApp{float: left;margin-right: 10px;}
    .socialButons .UTelegram{float: left;margin-right: 10px;}
    .TopDet .product_social_icon_wrapper{text-align:center;margin: 20px 0 0;float: left;width: 100%;padding: 0;}
    .TopDet .product_social_icon_wrapper .PaylasTit{}/*Footer*/
    .FooterTop,.FooterMiddle,.FooterBottom{}
    #footer .linkler{padding:0;}
    #footer .linkler .blink > ul{display: block;}
    #footer .linkler .blink > ul > li{float: left;width: 100%;}
    #footer .linkler .blink > ul >li >ul{display: none;float: left;width: 100%;border-bottom: 1px solid #d6d6d6;}
    #footer .linkler .blink > ul >li> span{float:left;width: 100%;margin: 0;line-height: 60px;border-bottom: 1px solid #d6d6d6;}
    #footer .linkler .blink > ul >li> span .ackapabtn{float: right;display: block;position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: right;}
    #footer .linkler .blink > ul >li> span .ackapabtn .svgbtn{width: 13px;}
    #footer .linkler .blink > ul >li{float: left;width: 100%;}
    #footer .linkler .blink > ul >li>ul >li{float: left;width: 100%;}
    #footer .linkler .blink > ul >li >ul >li >a{margin-bottom: 0;line-height: 40px;}#ticimaxCopyright{margin-top: 5px!important;font-size: 11px;}
    #back-to-top{bottom: 11%;right: 2%;}
    #back-to-top a{width: 30px;height: 30px;}#footer .store{margin: 0;text-align:center;margin: 10px 0;}
    #footer .store ul{display: inline-block;vertical-align:top;}
    /*kategori*/
    .categoryContainer .categoryTitleText{padding: 0;margin: 0;}
    .ProductBody .categoryTitle{padding: 0;margin: 0;}
    body .category-vertical-filters.top-filters{width: 100%;height: 100%;box-shadow: none;border: none;}
    body ul.breadcrumb{white-space: nowrap;position: relative;}
    body ul.breadcrumb.zindex{z-index: -1;pointer-events: none;}
    body ul.breadcrumb:after{position: absolute;left:0;right: 0;top: 0;bottom: 0;z-index: 99;content: '';display: block;}
    body ul.breadcrumb li:nth-child(1) a:before{display: none;}
    body ul.breadcrumb:before{content: '\f015';font-family: 'FontAwesome';font-weight: 300;line-height: 40px;margin-right: 5px;display:inline-block;vertical-align:top;}
    body ul.breadcrumb * {line-height: 40px!important;font-size: 12px!important;max-width: 25px;text-decoration:none;}
    body ul.breadcrumb li:after {line-height: 40px;font-size: 12px!important;content: '...';margin: 0 2px;}
    body ul.breadcrumb li {font-size: 0!important;}
    body ul.breadcrumb li:nth-last-of-type(1) a span:after{display: none;}
    body ul.breadcrumb li:nth-last-of-type(1) {max-width: 100%;}
    body ul.breadcrumb li:nth-last-of-type(1) *{max-width: 100%;font-size: 12px!important;text-overflow: ellipsis; overflow: hidden}
    body ul.breadcrumb li a span{font-size: 0!important;}
    body ul.breadcrumb li a span:after{content: '\f105';font-family: 'FontAwesome';font-size: 14px!important;display: inline-block;vertical-align:top;line-height: 40px;font-weight: 300;}
    .categoryTitleText{position: relative;z-index: 9;}
    .breadList{position: absolute;left: 0;right: 0;top: 0;background: #fff;padding: 10px 20px;z-index: 999; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2); -ms-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);}    .breadList ul{list-style: none;}
    .breadList .mBread{float: left;width: 100%;}
    .breadList .mBread ul {float: left;width: 100%;list-style: none;padding: 0;margin: 0;}
    .breadList .mBread ul li{float: left;width: 100%;font-size: 0;display: block; margin-right: 0; line-height: 1;}
    .breadList .mBread ul li a{float: left;width: 100%;font-size: 11px;color: #454545; padding:6px 8px;position: relative;}
    .breadList .mBread ul li a:before{content: '\f148';font-family: 'FontAwesome';font-size: 10px;position: absolute;left: -5px;top: 8px; transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .breadList .mBread ul li a span{font-weight: normal;line-height: 15px;}
    .breadList .mBread ul li ul{padding-left: 4px;}
    .breadList .mBread >ul >li >a span{font-weight: 600;}
    .breadList .clbtn{position: absolute;right: 5px;top: 10px;width: 30px;text-align:center;font-size: 18px;color: #000;z-index: 99;}    .categoryContainer .ProductList.PlSc_hrz .ItemOrj {width: 100%;max-width: 100%;-webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%;}
    .categoryContainer .ProductList.PlSc_2 .ItemOrj {width: 50%;max-width: 50%;-webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
    .categoryContainer .ProductList.PlSc_3 .ItemOrj {width: 50%;max-width: 50%;-webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
    .categoryContainer .ProductList.PlSc_4 .ItemOrj {width: 50%;max-width: 50%;-webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
    .categoryContainer .ProductList.PlSc_5 .ItemOrj {width: 50%;max-width: 50%;-webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
    body:not(.sepetimBody) .ItemOrj{width: 50%;max-width: 50%;flex: 0 0 50%;padding: 0 5px;}
    .categoryContainer .ProductList{margin: 0 -5px;}
    .categoryContainer .ProductListContent .productItem{margin-bottom: 10px;}
    body .mobilFilterOpenBtn .button{font-size: 13px;}
    /*urundetay*/
    .leftImage{float: left;width: 100%;}
    .RightDetail{width: 100%;padding: 10px 0 0;}
    body a#linkOncekiSayfa{display: none;}
    body .leftImage a#linkOncekiSayfa {position: absolute;top: 0;left: 0;width: 35px;background: #fff;text-align:center;font-size: 0!important;font-family: 'FontAwesome';color: #000;z-index: 5;line-height: 35px;display: block;}
    body .leftImage a#linkOncekiSayfa:before {content: '\f053';font-size: 20px;display: inline-block;vertical-align:top;line-height: 35px;}
    #divUrunKodu{clear: left;float: left;line-height: 14px;}
    #divUrunKodu span{line-height: 14px;}
    #divTaksitAciklama{clear: left;float: left;}
    .urunOzellik{display: none;}
    .urunOzellikTab{margin: 25px 0;display: block;float: left;width: 100%;}
    .urunOzellikTab .urunTab{float: left;width: 100%;}
    .urunOzellikTab .urunTab >ul{list-style:none;padding:0;margin: 0;}
    .urunOzellikTab .urunTab >ul >li{float: left;width: 100%;border-bottom: 1px solid #EBEBEB;}
    .urunOzellikTab .urunTab >ul >li > a{color: #5a5a5a;font-size: 14px;text-transform:uppercase;line-height: 44px;float: left;width: 100%;padding: 0 15px;font-weight: 500;position:relative;}
    .urunOzellikTab .urunTab >ul >li > a span{font-weight: 500;}
    /* !important yok - masaustu versiyonundaki ayni "kapanista tik diye
       kesilme" hatasi (bkz. urunOzellikTab .urunDetayPanel yorumu). */
    .urunOzellikTab .urunTab >ul >li .urunDetayPanel{display:none;}
    .urunOzellikTab .urunTab >ul >li[onofftip="true"] >a{}
    .urunOzellikTab .divYorumlarV2Slide{width: 100%;margin-bottom: 30px;}
    .urunOzellikTab .divYorumlarV2Ortalama{width: 100%;margin-left: 0;}
    .urunOzellikTab .divYorumlarV2Section1_1a1a{-ms-flex-direction: column; flex-direction: column;}
    .urunOzellikTab .divYorumlar-t1c9k{max-width: 100%;min-width: 0;}
    .urunOzellikTab .taksitWrapper .taksitBlock{width: 100%;padding-left: 0;padding-right: 0;}
    .urunOzellikTab .taksitWrapper .taksitBlock .taksitBlockContent{max-width: 100%;}
    .urunOzellikTab .yorum-item-left{flex: 0 0 100%;}
    .urunOzellikTab .v2YorumFilter{width: 100%;}
    .urunOzellikTab .v2YorumFiltreGrup{display: block;}
    .urunOzellikTab .v2YorumFilter li,.urunOzellikTab .v2YorumFilter ul li{width: 100%;}
    /*mobilicerik*/
    .detaySliderContainer{margin: 10px 0;}
    .sliderBannerContainer{margin: 10px 0;}
    /* ---- DUYURU BARI (mobil) - 393 x 48, 13px, KAYAN YAZI ----
       2026-09-08 kullanici talebi. Onceden burada
       "body #top-bar{display:none}" vardi: duyuru metni tek satirda
       ~700px, 393'lik ekrana sigmadigi icin bar tamamen gizlenmisti.
       Artik gizlenmiyor, metin yatay kayiyor (marquee).
       Kayma SAF CSS: metni tasiyan <b>'ye once "padding-left:100%"
       veriliyor (kendi kutusunun tam genisligi kadar saga itiliyor,
       yani ekranin disinda basliyor), sonra kendi genisligi kadar
       (-100%) sola tasiniyor. Boylece metin sagdan girip soldan
       cikiyor ve bas basa donuyor. JS gerekmiyor.
       SURE 22s: mevcut metin icin okunabilir bir hiz. Panelden metin
       belirgin sekilde uzatilir/kisaltilirsa hiz da degisir - o
       durumda bu sureyi elle ayarlayin (CSS metin uzunlugunu
       bilemez). */
    body #top-bar{
      display: flex !important;
      height: 48px;
      min-height: 48px;
      overflow: hidden;
      padding: 0;
      /* duyuru bari ile menu satiri arasi 10px (Figma 393) - masaustunde
         bosluk YOK, o yuzden sadece burada. Bu bosluk degisirse
         asagidaki sticky "top: -58px" de degismeli. */
      margin-bottom: 10px;
    }
    body #top-bar .flex-row.headerContainer{
      width: 100%;
      height: 48px;
      align-items: center;
    }
    /* Ticimax bu sutunlari mobilde "hide-for-medium" ile gizliyor;
       metni tasiyan SOL sutunu geri aciyoruz. Orta ve sag sutunlar
       zaten bos (canli olcum) - kapali kaliyorlar. */
    body #top-bar .headerContainer > div.flex-left{
      display: flex !important;
      width: 100% !important;
      height: 48px;
      align-items: center;
      overflow: hidden;
    }
    body #top-bar .headerContainer > div.flex-center,
    body #top-bar .headerContainer > div.flex-right{ display: none !important; }
    body #top-bar .nav-left,
    body #top-bar .html_1{
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }
    body #top-bar .html_1 b{
      display: inline-block;
      white-space: nowrap;
      padding-left: 100%;
      font-size: 13px;
      animation: ngDuyuruKay 22s linear infinite;
      will-change: transform;
    }
    @keyframes ngDuyuruKay{
      from{ transform: translateX(0); }
      to  { transform: translateX(-100%); }
    }
    /* Hareket azaltma tercihi acik kullanicida kayma durur; metin
       bastan gorunur ve tasan kismi kirpilir (erisilebilirlik). */
    @media (prefers-reduced-motion: reduce){
      body #top-bar .html_1 b{
        animation: none;
        padding-left: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: calc(100% - 40px);
      }
    }

    body .footerTemp .ebultenWidthContainer .elementor-column[data-col="20"]:first-child{width: 100%;}
    body #spnTopSepetToplamUrun{right: -15px;top: -25px;}

    .header-button a i{display: inline-block;}
    /* ---- MENU + LOGO SATIRI (mobil) - Figma 393, 2026-09-08 ----
       satir ................... 393 x 45
       kenar boslugu ...........  20  -> ic genislik 353
       sol ikon grubu ..........  72 x 28
         menu ikonu ............  28 x 28   (l=20)
         bosluk ................  20
         arama ikonu ...........  24 x 24   (l=68)
       logo ....................  70 x 45   sayfaya gore ORTALI
       sag ikon grubu ..........  66.5 x 25
         kullanici ikonu .......  24 x 24   (l=306.5)
         bosluk ................  20
         sepet ikonu ...........  22.5 x 25 (sag ucu 373'te biter)
       Onceki durum (canli olcum): satir 50, kenar 10, ikonlar
       19.3x22 / 22x22, logo 29x29.

       LOGO NEDEN "absolute": satir uc sutunlu bir flex ve sol grup
       (72) ile sag grup (66.5) esit degil - logo akista birakilirsa
       ortasi 199.25'e duser, sayfanin ortasi ise 196.5. Mutlak
       konumla "left:50% + translateX(-50%)" iki gruptan bagimsiz
       olarak TAM ortaya oturuyor. */
    /* ---- YAPISIK (sticky) HEADER - MOBIL ----
       Masaustundeki ayni kural "@media (min-width:1042px)" icinde
       yazilmisti, yani mobilde header hic yapismiyordu; kullanici
       2026-09-08'de mobilde de olmasini istedi.
       Mantik masaustuyle ayni: sticky TUM header'da ve "top" negatif.
       Header once o kadar yukari kayip duyuru barini ekrandan
       cikariyor, sonra menu satiri tam 0'da sabitleniyor.
       DEGER -58: duyuru bari 48 + altindaki 10 px bosluk. Masaustunde
       bosluk olmadigi icin orada -48. Bu iki sayidan biri degisirse
       digeri de degismeli.
       (Neden sadece ".header-main"e sticky verilmiyor: sticky bir
       eleman ancak KENDI EBEVEYNININ kutusu icinde gezebilir; header
       kutusu kendi yuksekligi kadar oldugu icin gezecek alan olmaz -
       masaustunde canli olarak denenip elendi.) */
    #headerNew{
      position: sticky;
      top: -58px;
      z-index: 1000;
      overflow-anchor: none;
    }
    body #headerNew .header-main{
      height: 45px;
      padding: 0;
    }
    body #headerNew .header-main .header-inner{
      position: relative;
      height: 45px;
      padding: 0 20px;
      align-items: center;
      justify-content: space-between;
    }
    /* --- logo: 70 x 45, sayfaya gore ortali --- */
    body #headerNew .header-main #hb-logo{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
      height: 45px;
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
    }
    body #headerNew .header-main #hb-logo a,
    body #headerNew .header-main #hb-logo img{
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: contain;
    }
    /* --- ikon gruplari: sabit genislik + aralarinda 20 --- */
    body #headerNew .header-main .flex-left,
    body #headerNew .header-main .flex-right{
      height: 45px;
      align-items: center;
      flex: none;
    }
    body #headerNew .header-main .flex-left{ width: 72px; }
    body #headerNew .header-main .flex-right{ width: 66.5px; }
    body #headerNew .header-main .flex-left .header-nav,
    body #headerNew .header-main .flex-right .header-nav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: 100%;
      height: auto;
    }
    /* Ikon kutulari Figma olcusunde; glif kutunun ortasinda durur.
       Kutu ile font-size ayri veriliyor - font-size kutuyu degil
       glifi buyutur, kutu olcusu tiklama alanini belirler. */
    body #headerNew .header-main .mobile-item-button,
    body #headerNew .header-main .mobile-item-button > div,
    body #headerNew .header-main .mobile-item-button a{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    body #headerNew .header-main .mobile-menu-item{ width: 28px; height: 28px; flex: none; }
    body #headerNew .header-main .mobile-search-item{ width: 24px; height: 24px; flex: none; }
    body #headerNew .header-main .mobile-user-item{ width: 24px; height: 24px; flex: none; }
    body #headerNew .header-main .mobile-cart-item{ width: 22.5px; height: 25px; flex: none; }
    body #headerNew .header-main .mobile-menu-item i{ font-size: 26px; line-height: 1; }
    body #headerNew .header-main .mobile-search-item i,
    body #headerNew .header-main .mobile-user-item i{ font-size: 22px; line-height: 1; }
    body #headerNew .header-main .mobile-cart-item i{ font-size: 22px; line-height: 1; }

    /* Favori kalbi rozetlerle cakismasin - sag ALT kose */
    .productItem .favori{right: 8px; top: auto; bottom: 8px;}
    /* Mobil kart */
    .productItem .productDetail{padding:12px 4px 0;}
    .productItem .discountPrice span{font-size:17px;}
    .productItem .regularPrice span{font-size:13px;}
    .productItem .productIcon .mycartIcon a{height:42px;font-size:14px;}
    /* Urun adi 14px'e buyutuldu (iki celisen kural vardi, 11px kazaniyordu) */
    .productItem .productName a{font-size:14px;line-height:20px;height:40px;letter-spacing: normal;}
    .ngListeHavale{gap:4px;margin:0 0 8px;padding:7px 6px;}
    .ngListeHavaleEtiket{font-size:11px;line-height:16px;}
    .ngListeHavaleTutar{font-size:13px;line-height:16px;}
    /* Odeme kartlari (mobil) */
    .ngOdemeKartlari{gap:10px;margin:12px 0 4px;}
    .ngOdemeKart{padding:12px 8px 14px;}
    .ngOdemeBaslik{font-size:13px;}
    .ngOdemeFiyat{font-size:17px;margin-bottom:10px;}
    .ngKazancEtiket{font-size:11px;}
    .ngKazancTutar{font-size:12px;}
    .productItem .productLeft > div,
    .productItem .productFaMyEx .newIcon,
    .productItem .productFaMyEx .discountIcon,
    .productItem .productFaMyEx .cargoIcon{font-size: 11px;height:21px;line-height:21px;padding:0 6px;}
    /* Mobilde fiyatlar alt alta - dar ekranda yan yana sigmiyor */
    body .productItem .productPrice{
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      justify-content:center !important;
      gap:1px !important;
      height:auto !important;
      min-height:40px !important;
      float:none !important;
      text-align:center !important;
      margin:0 0 6px 0 !important;}
    body .productItem .discountPrice,body .productItem .regularPrice{margin:0 !important;}

    #mainHolder_divDesign .owl-carousel .owl-nav, .owl-carousel .owl-nav{display: none!important;}
    #mainHolder_divDesign .JKatAdi.categoryTitle, .JKatAdi{margin: 0 0 20px 0!important;}
    #mainHolder_divDesign .JKatAdi.categoryTitle .bold .satir1, .JKatAdi .bold .satir1{font-size: 23px;}
    .ngEyebrow{font-size: 11px;margin-bottom: 11px;}
    .ngTumunuGor{font-size: 11px;padding-bottom: 3px;}

    body .widgetContainer .widgetArea ul{flex-direction: column;gap: 20px;}
    body .widgetContainer .widgetArea ul li .box .contentArea .titleH br{display: none;}

    body .footerTemp .elementor-section .elementor-container .footerTempRow{gap: 25px;}
    body .footerTemp div[data-element_type="elementor-column"].mobileJustfyRight .appMediaDiv .storeMedia.horizontal,
    body .footerTemp div[data-element_type="widget"].mobileJustfyLeft .footerText li{justify-content: center;}

    body.CategoryBody .categoryTitleText{padding: 0 10px;}

    body .newHeaderNavigation.mobileStyle .newHeaderNavUl{padding: 0;margin: 0;}

  }
  @media screen and (min-width:414px) {
  }
  @media screen and (min-width:375px) and (max-width:413px)  {
  }
  @media screen and (min-width:0px) and (max-width:374px){
  }

  /* ============================================================
     KAYAN BILGI SERIDI (KAYANSERIT.txt)
     ------------------------------------------------------------
     Ana banner altina eklenen, kocak.com.tr'deki gibi kesintisiz
     kayan bilgi seridinin CSS'i. HTML'in kendisi ayri bir dosyada
     (KAYANSERIT.txt) - o dosya SADECE saf HTML, stil kasten BURAYA
     tasindi (Ticimax'in "HTML Icerik" alani <style> bloklarini
     guvenilir islemiyor, kullanicidan "End tag </script> was not
     found" hatasi geldi - digger tum ozel CSS/JS ile ayni kurala
     uyulup HTML'den ayrildi).
     ============================================================ */
  .ngKayanSeritWrap {
    background: #06205E;
    overflow: hidden;
    width: 100%;
    padding: 11px 0;
    box-sizing: border-box;
  }
  .ngKayanSeritTrack {
    display: inline-flex;
    white-space: nowrap;
    animation: ngKayanSeritAkis 26s linear infinite;
    will-change: transform;
  }
  .ngKayanSeritWrap:hover .ngKayanSeritTrack {
    animation-play-state: paused;
  }
  .ngKayanSeritGrup {
    display: inline-flex;
    align-items: center;
  }
  .ngKayanSeritItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 26px;
    color: #fff;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 13px;
    font-weight: 550;
    letter-spacing: normal;
    text-decoration: none;
    white-space: nowrap;
  }
  a.ngKayanSeritItem:hover {
    color: #C19C60;
  }
  .ngKS-ikon {
    font-size: 15px;
    line-height: 1;
  }
  .ngKS-ayrac {
    color: #C19C60;
    opacity: .55;
    font-size: 9px;
  }
  @keyframes ngKayanSeritAkis {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ngKayanSeritTrack { animation: none; }
  }
  @media (max-width: 767px) {
    .ngKayanSeritItem { font-size: 12px; padding: 0 18px; gap: 6px; }
    .ngKS-ikon { font-size: 13px; }
    .ngKayanSeritTrack { animation-duration: 20s; }
  }

  /* Ticimax bu alani #top-bar'in orta sutununa ("flex-center", 3 esit
     sutundan biri, ~%33 genislik) dar bir <div> icine yerlestiriyor.
     Tam genislik bir serit gorunmesi icin klasik "full-bleed" teknigiyle
     bu dar sutundan disari tasiyoruz: genislik viewport'a esitlenip
     (100vw) negatif kenar bosluguyla ortalaniyor - boylece hangi dar
     kutunun icine yerlestirilmis olursa olsun sayfanin tam genisligini
     kapliyor. */
  #top-bar .ngKayanSeritWrap {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 8px 0;
  }
  /* #top-bar'in kendisi 28px'lik sabit bir yukseklikle geliyordu (eski
     tek satirlik duyuru metnine gore) - yeni serit biraz daha dolgulu
     oldugu icin dogal yuksekligine gore serbestce buyumesine izin
     veriyoruz. DIKKAT: buraya "min-height" KONULMADI - konulursa
     ".gectop" kapanma animasyonuyla (max-height:0) cakisip barin asla
     tam sifira inmemesine, kapaniste bos/gorunmez ama hala yer kaplayan
     bir seride sebep oluyordu (canli testte yakalandi: opacity:0 iken
     bile height 28px olarak olculdu). */
  #top-bar { height: auto; }
  #top-bar .flex-row.headerContainer,
  #top-bar .flex-col.flex-center,
  #top-bar .nav.nav-center {
    width: 100%;
    height: 100%;
  }

  /* Urun galerisi thumbnail cercevesi: sabit kalinlik (2px), sadece
     renk yumusak "ease" ile lacivert-cizgiden altina geciyor. */
  .pinchZoomGallery .pinchZoomThumbItem {
    border: 2px solid var(--ng-line) !important;
    transition: border-color .3s ease !important;
  }
  .pinchZoomGallery .pinchZoomThumbItem.active {
    border-color: var(--ng-gold-500) !important;
  }

  /* Kare buyutec mercegi (".ngZoomLens", WEBJS.txt urunGorselBuyutecOlustur()
     tarafindan olusturulur/konumlandirilir - burada sadece gorunumu var).
     Kullanici talebiyle daire -> kare (ince cerceveli, buyuk boy) yapildi;
     asil boyut (LENS_SIZE) JS tarafinda tanimli. */
  .pinchZoomGallery .pinchZoomMain .pinchZoomLink {
    position: relative;
  }
  .pinchZoomGallery .pinchZoomMain .pinchZoomLink {
    position: relative;
  }
  .ngZoomLens {
    position: absolute;
    border-radius: 0;
    border: 1px solid var(--ng-gold-500);
    box-shadow: 0 10px 28px -10px rgba(6,32,94,.4), inset 0 0 0 1px rgba(255,255,255,.6);
    background-repeat: no-repeat;
    background-color: #fff;
    pointer-events: none;
    z-index: 50;
  }

  /* ============================================================
     ANASAYFA URUN SLIDER'I - FIGMA OLCULERI (1380 x 652,5)
     ------------------------------------------------------------
     "En Cok Tercih Edilen Yatirimliklar" bolumu (Ticimax'in kendi
     urun slider blogu, .anasayfa_urun_slider). Kullanici olculeri,
     1440 canvas / 2026-09-08:

       bolum toplami ............... 1380 x 652,5
         baslik konteyneri ......... 1380 x 74
           etiket .................. 140 x 18   13 px  ("COK SATANLAR")
           bosluk ..................        14
           baslik .................. 451 x 42   34 px
           "Tumunu Gor ->" ......... 115 x 18   sagda, DIKEY ORTALI
         bosluk ....................        40
         urun satiri ............... 1380 x 538,5
           her kart ................ 315 x ~517    (4 kart, aralar 40)
                                     2026-09-09: gorsel kareye
                                     cevrilince kart 243'ten 315'e
                                     cikti, ara 136'dan 40'a indi
             gorsel ................ 243 x 243   1:1 KARE (2026-09-09;
                                     onceden 243 x 364,5 / 2:3)
             bosluk ...............        10
             (metin alani, yanlarda 20+20 dolgu -> ic genislik 203)
             urun adi .............. 203 x 24   16 px
             bosluk ...............        10
             fiyat ................. 203 x 24   16 px
             bosluk ...............        10
             havale ................ 203 x 36   14 px
             bosluk ...............        10
             sepete ekle ........... 203 x 40   14 px
             bosluk ...............        10   (kart alt dolgusu)
       18 + 14 + 42 = 74 ; 74 + 40 + 538,5 = 652,5
       364,5 + 10 + 24 + 10 + 24 + 10 + 36 + 10 + 40 + 10 = 538,5
       4 x 243 + 3 x 136 = 1380

     KART GENISLIGI VE ARALAR BURADA DEGIL: Owl Carousel kart
     genisligini JS'te hesaplayip satir ici stille yaziyor
     (kart = (serit - (n-1) x bosluk) / n). Bosluk 136 yapilinca
     kart 243 KENDILIGINDEN cikiyor; ayari WEBJS.txt'teki
     urunSliderBoslugu() degistiriyor. Buradan "width" ezmek
     gorunumu duzeltir ama Owl'un kaydirma koordinatlarini bozar -
     denendi, elendi (bkz. o fonksiyonun yorumu).

     Genislik AKISKAN: kapsayici dolgusu 30 px sabit, icerik akiskan.
     1440 canvasta tam 1380; gercek tarayicida kaydirma cubugu
     yuzunden belge 1425 olur ve kart 239,25'e duser - oran korunur.
     ============================================================ */
  @media (min-width: 1042px) {
    /* Bu blok icin gutter 60 -> 30: is ortakliklari bolumuyle ayni
       "1380" sistemine oturur (genel --ng-gutter'a DOKUNULMUYOR,
       digger bloklar 60'ta kaliyor). */
    body #mainHolder_divDesign .ticiContainer.hazirBlokContent.anasayfa_urun_slider {
      padding-left: 30px !important;
      padding-right: 30px !important;
    }

    /* --- baslik konteyneri: 1380 x 74 --- */
    body .anasayfa_urun_slider .JKatAdi {
      align-items: center !important;   /* "Tumunu Gor" dikeyde ortali */
      /* 74 -> 84: etiket-baslik araligi 14'ten 24'e cikti (18+24+42). */
      min-height: 84px;
      margin: 0 0 40px !important;
    }
    /* "#mainHolder_divDesign" ONEKI + "!important" SART (2026-09-09).
       Bu iki kural yaziliydi ama UYGULANMIYORDU - ikisini de ID tasiyan
       baska kurallar eziyordu (canli olcum):
         etiket  <- "#mainHolder_divDesign .categoryTitle span"     16 px
         baslik  <- "#mainHolder_divDesign .JKatAdi.categoryTitle
                     .bold .satir1"                                 30 px
       Sonuc: urun slider basliklari (etiket 16 / ara 0 / baslik 30)
       ile taki kategorileri basligi (13 / 14 / 34) tutmuyordu;
       kullanici "ayni sekilde duzenlensin" dedi.
       AYNI TUZAK mobilde de yasanmis ve orada zaten bu onekle
       cozulmustu - masaustunde eklenmesi atlanmis. */
    body #mainHolder_divDesign .anasayfa_urun_slider .ngEyebrow,
    body .anasayfa_urun_slider .ngEyebrow {
      font-size: 13px !important;
      line-height: 18px !important;
      height: 18px;
      /* 2026-09-09: 14 -> 24. Figma ust alani 18+14+42=74 diyordu ama
         34 px'lik basligin ustunde 14 px optik olarak "yapisik"
         gorunuyordu (kullanici bildirdi). 24, baslik boyutunun ~0,7'si -
         etiketin baslikla ILISKILI ama AYRI okunmasi icin alisildik
         aralik. Ust alan boylece 84 px oluyor.
         TAKIKATEGORILERI.txt'deki ".ngCokSatanEtiket" de AYNI degeri
         tasiyor - uc bolumun basligi ayni gorunsun diye birlikte
         degistirildi; birini degistiren digerini de degistirmeli. */
      margin-bottom: 24px !important;
    }
    body #mainHolder_divDesign .anasayfa_urun_slider .JKatAdi .bold .satir1,
    body .anasayfa_urun_slider .JKatAdi .bold .satir1 {
      font-size: 34px !important;
      line-height: 42px !important;
    }
    body .anasayfa_urun_slider .ngTumunuGor {
      height: 18px;
      line-height: 18px;
      padding-bottom: 0;
    }

    /* --- gorsel alani: 1:1 KARE (243 x 243) ---
       2026-09-09: onceden 2:3 idi (padding-bottom:150%, 243x364,5).
       Kullanici iki bolumun (yatirimliklar + taki kategorileri)
       gorsellerini kareye cevirmek istedi. Taban temanin kendi degeri
       zaten 100% - kural artik onu DEGISTIRMIYOR, niyeti acik
       birakmak ve ileride tema degisirse kilitlemek icin duruyor. */
    body .anasayfa_urun_slider .productItem .productImage a,
    body .anasayfa_urun_slider .productItem .productImage a.Videolu {
      padding-bottom: 100%;
    }

    /* --- metin alani ---
       2026-09-09: kart 243'ten 315'e cikinca (Owl ara orani 136 -> 40)
       ic olculer de buyuyen karta uyarlandi - eski degerler 243'luk
       karta gore secilmisti ve genis kartta kucuk/seyrek kaliyordu.
       Buyume orani ~%30 (315/243) degil, DAHA OLCULU tutuldu: yazi
       boyutlari bir-iki punto, kutu yukseklikleri 6-8 px arttirildi.
       Tam oranla buyutulseydi urun adi 21 px olurdu - kart bir
       "afis"e donusup liste ritmi bozulurdu. */
    body .anasayfa_urun_slider .productItem .productDetail {
      /* 2026-09-09: yan dolgu 24 -> 0. Urun adi / fiyat / havale rozeti /
         Sepete Ekle butonu artik GORSELLE TAM AYNI genislikte (311 px);
         onceden 24+24 dolgu yuzunden 263 px'te kalip gorselden dar
         duruyorlardi (kullanici "gorsellerin genisligine uyarlanmali"
         dedi). Mobil blok zaten "padding: 0" kullaniyordu - iki
         cozunurluk de artik ayni mantikta. */
      padding: 12px 0 !important;   /* ust 12 (gorselle arasi), yan 0, alt 12 */
    }
    /* Urun adi TEK SATIR (203 x 24). Uzun adlar "..." ile kisalir -
       tasarim sabit yukseklik istedigi icin iki satira izin yok. */
    body .anasayfa_urun_slider .productItem .productName {
      margin: 0 0 12px 0 !important;
    }
    body .anasayfa_urun_slider .productItem .productName a {
      font-size: 17px !important;
      line-height: 26px !important;
      height: 26px !important;
      -webkit-line-clamp: 1 !important;
    }
    /* Fiyat satiri: tek satir, 24 px. Indirimli ve piyasa fiyati
       varsa YAN YANA durur (taban tema alt alta diziyordu). */
    body .anasayfa_urun_slider .productItem .productPrice {
      flex-direction: row !important;
      gap: 8px !important;
      height: 26px !important;
      min-height: 26px !important;
      margin: 0 0 12px 0 !important;
    }
    body .anasayfa_urun_slider .productItem .discountPriceSpan,
    body .anasayfa_urun_slider .productItem .discountPrice span {
      font-size: 17px !important;
      line-height: 26px !important;
    }
    body .anasayfa_urun_slider .productItem .regularPriceSpan,
    body .anasayfa_urun_slider .productItem .regularPrice span {
      font-size: 14px !important;
      line-height: 26px !important;
    }
    /* Havale rozeti (kart buyudu: 36 -> 42, 14 -> 15 px) */
    body .anasayfa_urun_slider .productItem .ngListeHavale {
      height: 42px;
      padding: 0 12px;
      margin: 0 0 12px;
    }
    body .anasayfa_urun_slider .productItem .ngListeHavaleEtiket,
    body .anasayfa_urun_slider .productItem .ngListeHavaleTutar {
      font-size: 15px;
      line-height: 42px;
    }
    /* Sepete Ekle (kart buyudu: 40 -> 48, 14 -> 15 px) */
    body .anasayfa_urun_slider .productItem .productIcon .mycartIcon a {
      height: 48px;
      font-size: 15px;
    }

    /* Altindaki blok ("Kosker Gold..." SEO metni) ile arasi 80 px.
       Genel kural ".landing-block.t-mb-0:not(:last-child){margin-bottom:70px}"
       (1 id + 3 sinif) daha ozgul oldugu icin ":has()" tek basina
       onu ezemiyor - ".t-mb-0" varyanti ayrica yaziliyor.
       Sonraki blok kendi 10 px ust dolgusunu (t-pt-10) tasiyordu, yani
       kutular arasi 80 iken METIN 90'da basliyordu - o dolgu da
       sifirlaniyor (kullanici talebi) ki gorunen bosluk tam 80 olsun.
       Kural sadece BIZIM bolumumuzun ARDINDAN gelen bloga uygulanir
       ("+" komsu seciciyle), ayni sinifi tasiyan diger bloklara degil. */
    body #mainHolder_divDesign .landing-block:has(.anasayfa_urun_slider),
    body #mainHolder_divDesign .landing-block.t-mb-0:has(.anasayfa_urun_slider) {
      margin-bottom: 80px !important;
    }
    body #mainHolder_divDesign .landing-block:has(.anasayfa_urun_slider) + .landing-block {
      padding-top: 0 !important;
    }
  }

  /* ============================================================
     ANASAYFA URUN SLIDER'I - MOBIL (Figma 393)
     ------------------------------------------------------------
     Kullanici olculeri 2026-09-08:
       ic konteyner .............. 353   (393 - 2x20)
       metin konteyneri .......... 353 x 116
         etiket .................. 353 x 18
         bosluk ..................        14
         baslik .................. 353 x 84   34 px
       bosluk ....................        20
       urun alani ................ 353 x 641   (gorsel kare olunca
                                   607'den cikti)
         kart .................... 167 x 294
           gorsel alani .......... 167 x 167   1:1 KARE (2026-09-09;
                                   onceden 167 x 150, icinde 100 x 150)
           bosluk ...............        10
           metin alani ........... 167 x 134
             urun adi ............ 167 x 24   12 px
             bosluk .............         6
             fiyat ...............  57 x 24   12 px
             bosluk .............         6
             havale .............. 167 x 36   12 px
             bosluk .............         6
             sepete ekle ......... 167 x 32   12 px
       18 + 14 + 84 = 116 ; 167 + 10 + 134 = 311
       24 + 6 + 24 + 6 + 36 + 6 + 32 = 134
       2 x 167 + 19 = 353 ; 2 x 311 + 19 = 641  (2x2 izgara)

     NOT: kullanici bolum toplamini 817 verdi ama parcalar
     116 + 20 + 607 = 743 ediyor; aradaki 74 px'in nereye ait
     oldugu HENUZ NETLESMEDI (soruldu, cevap bekleniyor).
     Buradaki olculer parcalarin kendisine gore yazildi.

     KART DIZILIMI (2x2 izgara mi, kaydirmali slider mi) BU BLOKTA
     YOK - o karar beklemede. Bu blok sadece kartin ve basligin
     olculerini veriyor; iki duzende de gecerli.
     ============================================================ */
  @media (max-width: 767px) {
    /* ic genislik 353 (kenar 20) - genel mobil kural 12 px veriyordu */
    body #mainHolder_divDesign .ticiContainer.hazirBlokContent.anasayfa_urun_slider {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

    /* --- baslik konteyneri: 353 x 126 (Figma 116 idi; etiket-baslik
       araligi 14 -> 24 olunca 18+24+84 = 126) --- */
    body .anasayfa_urun_slider .JKatAdi {
      display: block !important;      /* "Tumunu Gor" alt satira, dar ekranda yan yana sigmiyor */
      min-height: 126px;
      margin: 0 0 20px !important;
    }
    /* "#mainHolder_divDesign" ONEKI + "!important" SART (2026-09-09).
       Bu kural yaziliydi ama HIC UYGULANMIYORDU: ID tasiyan
       "#mainHolder_divDesign .categoryTitle span" kurali (16 px +
       "margin-bottom:0 !important") kazaniyordu - CDP ile dogrulandi,
       mobilde etiket 16 px ve baslikla arasi TAM 0 px olculdu.
       Ayni tuzak masaustunde de vardi ve orada onekle cozulmustu;
       mobil kopyasi atlanmis. Baslik ("...satir1") mobilde zaten
       onekle yazildigi icin dogru calisiyordu, sorun sadece etiketteydi. */
    body #mainHolder_divDesign .anasayfa_urun_slider .ngEyebrow,
    body .anasayfa_urun_slider .ngEyebrow {
      font-size: 13px !important;
      line-height: 18px !important;
      height: 18px;
      margin-bottom: 24px !important;
    }
    /* "#mainHolder_divDesign" oneki SART: genel mobil kural
       "#mainHolder_divDesign .JKatAdi.categoryTitle .bold .satir1{font-size:23px}"
       bir ID tasidigi icin sinif tabanli secicimizi eziyordu (olculdu:
       34 yerine 23 px cikti). */
    body #mainHolder_divDesign .anasayfa_urun_slider .JKatAdi .bold .satir1,
    body .anasayfa_urun_slider .JKatAdi .bold .satir1 {
      font-size: 34px !important;
      line-height: 42px !important;   /* iki satir = 84 */
    }
    /* "Tumunu Gor" mobilde BASLIKTA DEGIL, urun izgarasinin ALTINDA
       353 x 54'luk bir buton (Figma 393). Tasima islemi WEBJS
       tumunuGorKonumu() ile yapiliyor - CSS bir elemani baska
       ebeveyne tasiyamaz; burada sadece gorunumu var.
       Gorunum: lacivert dolgulu birincil buton (kullanici talebi) -
       bolumun tek eylem cagrisi oldugu icin ikincil/cerceveli degil. */
    body .anasayfa_urun_slider .ngTumunuGor.ngTumunuGorAlt {
      display: flex !important;
      width: 100%;
      height: 54px;
      margin: 20px 0 0;
      padding: 0;
      float: none;
      clear: both;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--ng-navy-900);
      border: 1px solid var(--ng-navy-900);
      border-radius: var(--ng-radius);
      font-size: 12px;
      line-height: 1;
      color: #fff;
    }
    /* Ok, dolgu uzerinde beyaz kalsin - masaustundeki altin ok acik
       zemine gore secilmisti, lacivertte okunmuyor. */
    body .anasayfa_urun_slider .ngTumunuGor.ngTumunuGorAlt .ngTumunuGor__ok {
      color: #fff;
    }

    /* --- gorsel alani: 167 x 150, gorselin kendisi 100 x 150 ortali ---
       Taban tema kutuyu "padding-bottom" (oran) ile kuruyor; burada
       yukseklik SABIT oldugu icin oran kaldirilip acik yukseklik
       veriliyor. Gorsel mutlak konumlu (genel kural) - genisligi
       100'e sabitleyip yatayda ortaliyoruz. */
    /* 2026-09-09: gorsel alani 167x150 (icinde 100x150 gorsel) idi,
       KAREYE cevrildi - kutu kart genisligi kadar (167x167) ve gorsel
       kutuyu tam dolduruyor. Sabit piksel yerine "aspect-ratio: 1":
       kart genisligi akiskan (calc(50% - 9.5px)), sabit 167 yazsaydik
       360 / 430 px'lik telefonlarda kutu kare olmaktan cikardi. */
    body .anasayfa_urun_slider .productItem .productImage {
      aspect-ratio: 1 / 1;
      height: auto !important;
    }
    body .anasayfa_urun_slider .productItem .productImage .productList-Image-Owl,
    body .anasayfa_urun_slider .productItem .productImage .owl-stage-outer,
    body .anasayfa_urun_slider .productItem .productImage .owl-stage,
    body .anasayfa_urun_slider .productItem .productImage .owl-item,
    body .anasayfa_urun_slider .productItem .productImage .imageItem {
      height: 100% !important;
    }
    /* Kutunun kendi gri zemini (--ng-bg-soft) SAYDAMA cekiliyor.
       O gri, gorsel yuklenirken bosluk gorunmesin diye konmus bir yer
       tutucu; masaustunde gorsel kutuyu tam doldurdugu icin hic
       gorunmuyor, mobilde ise gorsel 100 / kutu 167 oldugu icin iki
       yanda 33,5'er px'lik gri serit birakiyordu (kullanici bildirdi).
       Gorseli 167'ye yaymak alternatifti ama olcu 100x150 ve gorsel
       zaten "cover" ile kirpiliyor - genisletmek kirpmayi artirirdi. */
    body .anasayfa_urun_slider .productItem .productImage {
      background: transparent !important;
    }
    body .anasayfa_urun_slider .productItem .productImage a,
    body .anasayfa_urun_slider .productItem .productImage a.Videolu {
      padding-bottom: 0 !important;
      height: 100% !important;
    }
    /* Gorsel artik kutuyu TAM dolduruyor (eskiden 100 px genislikte,
       yatayda ortalanmisti). "cover" ile ezilmeden ortadan kirpilir. */
    body .anasayfa_urun_slider .productItem .productImage img {
      width: 100% !important;
      height: 100% !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      object-fit: cover;
    }

    /* --- metin alani: 167 x 134 --- */
    /* Gorselle arasindaki 10 px DOLGU degil MARJ: dolgu olsaydi metin
       kutusu 134 yerine 144 olarak olculurdu (kart toplami yine 294
       cikiyordu ama Figma'daki "metin konteyneri 134" karsiligi
       bozuluyordu). */
    body .anasayfa_urun_slider .productItem .productDetail {
      padding: 0 !important;
      margin-top: 10px !important;
    }
    body .anasayfa_urun_slider .productItem .productName {
      margin: 0 0 6px 0 !important;
    }
    body .anasayfa_urun_slider .productItem .productName a {
      font-size: 12px !important;
      line-height: 24px !important;
      height: 24px !important;
      -webkit-line-clamp: 1 !important;
    }
    body .anasayfa_urun_slider .productItem .productPrice {
      flex-direction: row !important;
      gap: 6px !important;
      height: 24px !important;
      min-height: 24px !important;
      margin: 0 0 6px 0 !important;
    }
    body .anasayfa_urun_slider .productItem .discountPriceSpan,
    body .anasayfa_urun_slider .productItem .discountPrice span,
    body .anasayfa_urun_slider .productItem .regularPriceSpan,
    body .anasayfa_urun_slider .productItem .regularPrice span {
      font-size: 12px !important;
      line-height: 24px !important;
    }
    body .anasayfa_urun_slider .productItem .ngListeHavale {
      height: 36px;
      padding: 0 6px;
      margin: 0 0 6px;
    }
    body .anasayfa_urun_slider .productItem .ngListeHavaleEtiket,
    body .anasayfa_urun_slider .productItem .ngListeHavaleTutar {
      font-size: 12px;
      line-height: 36px;
    }
    body .anasayfa_urun_slider .productItem .productIcon .mycartIcon a {
      height: 32px;
      font-size: 12px;
    }

    /* --- 2x2 IZGARA: kaydirmali slider mobilde IZGARAYA cevriliyor ---
       Istenen duzen "4'e bolerek" = 2 sutun x 2 satir
       (2x167 + 19 = 353 ; 2x311 + 19 = 641).
       Owl'un serit yapisi tamamen ezilmiyor, sadece duzeni degistiriliyor:
       stage sarmalayici (flex-wrap) yapilip kaydirma kapatiliyor. Owl
       nesnesi HAYATTA kaliyor - boylece pencere 767'nin ustune
       cikarildiginda (masaustune gecis) kurallar dusunce slider hicbir
       ek is yapmadan geri geliyor. Owl'un satir ici "transform" ve
       "width" degerleri !important ile eziliyor (satir ici stilleri
       ancak boyle asilir).
       Klonlar (loop:true) gizleniyor; DORTTEN sonraki gercek ogelere
       WEBJS "ngIzgaraGizli" sinifini ekliyor (CSS klon olmayanlari
       sayamiyor). Otomatik oynatma da mobilde durduruluyor.
       SONUC: mobilde bu bolumde 9 urunun ILK 4'U gorunur; kalanina
       "Tumunu Gor" ile ulasilir (kullanici 2026-09-08'de bu duzeni
       istedi). */
    /* IKI DURUM DA DESTEKLENIYOR. Canli olcumde mobilde Owl'un
       BASLATILMADIGI (lazy: blok gorunur alana girmeden kurulmuyor)
       gorulду - o halde urunler dogrudan "ul > li" olarak duruyor.
       Kaydirinca Owl kurulunca yapi "ul > .owl-stage-outer > .owl-stage
       > .owl-item > li" haline geliyor. Ikisi icin de ayni izgara
       kurallari yaziliyor; secicileri cakismadigi icin yan yana
       durabiliyorlar. */
    body .anasayfa_urun_slider .ulUrunSlider {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 19px !important;
      padding: 0 !important;
      margin: 0 !important;
      list-style: none;
      /* CSS-ONLY EMNIYET KEMERI (2026-09-08).
         Dorduncu urunden sonrasini gizleyen sinifi (.ngIzgaraGizli)
         WEBJS ekliyor - CSS klon OLMAYAN ogeleri sayamaz, cunku Owl
         loop:true ile basa/sona degisken sayida klon koyuyor
         (olculdu: 19 oge, 10'u klon) ve ":nth-child" klonlari da
         sayar. Ama bu, bolumun dogru gorunmesini TAMAMEN JS'e
         bagimli kiliyordu: WEBJS panele yapistirilmadiginda mobilde
         9 urun 5 satir halinde (izgara 1546 px) goruntulendi.
         Yukseklik siniri bu bagimliligi kaldiriyor - iki tam satir
         gorunur, gerisi kirpilir. JS varsa izgara zaten ayni degeri
         olcuyor, yani kural o durumda hicbir sey degistirmiyor;
         yoksa gorunum yine dogru kaliyor.
         DEGER: kart 311 (gorsel 167 KARE + 10 + metin 134), iki satir
         + 19 ara = 641. Gorsel orani 2:3'ten 1:1'e cevrilince kart
         294'ten 311'e ciktigi icin 607'den guncellendi - bu sayi kart
         yuksekligine BAGLI, kart olculeri degisirse burasi da
         degismeli. */
      max-height: 641px;
      /* !important SART: taban temada ".owl-carousel{overflow:visible}"
         var ve bu kural sinif ozgulluguyle bizimkini eziyordu
         (computed "visible" olarak olculdu) - yukseklik siniri
         uygulanip da kirpma yapilmiyordu. */
      overflow: hidden !important;
    }
    /* Owl KURULMAMIS hal: <li>'ler dogrudan cocuk */
    body .anasayfa_urun_slider .ulUrunSlider > li {
      width: calc(50% - 9.5px) !important;
      flex: 0 0 calc(50% - 9.5px) !important;
      margin: 0 !important;
      /* Owl kurulmadan once Ticimax <li>'leri mutlak konumlu birakiyor -
         mutlak konumlu bir eleman flex ogesi SAYILMAZ, bu yuzden
         flex-basis uygulanmasina ragmen genislik 353'te kaliyordu
         (olculdu). Akisa geri aliniyor. */
      position: static !important;
      float: none !important;
      /* min-width:0 SART - flex ogesinin varsayilani "auto" (icerigin en
         dar hali). Kart icerigi 353'ten dar olamadigi icin flex-basis
         uygulanmasina ragmen oge 353'te kilitleniyordu; her oge kendi
         satirina dusuyordu (olculdu). Partner blogunda da ayni tuzak
         yasanmisti. */
      min-width: 0 !important;
    }
    body .anasayfa_urun_slider .ulUrunSlider > li:nth-child(n+5) {
      display: none !important;
    }
    /* Owl KURULMUS hal */
    body .anasayfa_urun_slider .ulUrunSlider > .owl-stage-outer {
      overflow: visible !important;
      height: auto !important;
      width: 100% !important;
    }
    body .anasayfa_urun_slider .ulUrunSlider > .owl-stage-outer > .owl-stage {
      width: 100% !important;
      transform: none !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 19px !important;
      height: auto !important;
    }
    body .anasayfa_urun_slider .ulUrunSlider > .owl-stage-outer > .owl-stage > .owl-item {
      width: calc(50% - 9.5px) !important;
      margin: 0 !important;
      flex: 0 0 calc(50% - 9.5px) !important;
      min-width: 0 !important;
    }
    body .anasayfa_urun_slider .ulUrunSlider > .owl-stage-outer > .owl-stage > .owl-item.cloned,
    body .anasayfa_urun_slider .ulUrunSlider > .owl-stage-outer > .owl-stage > .owl-item.ngIzgaraGizli {
      display: none !important;
    }
    /* Owl'un kendi clearfix'i (".owl-stage:after" - gorunmez, 0
       yukseklikte bir nokta) stage flex olunca UCUNCU BIR FLEX
       OGESI sayilip yeni bir satir aciyor; satir bos ama gap'i
       geliyor ve izgara olcusu bir satir gap'i kadar buyuk
       cikiyordu (o gun 607 yerine 626 olculdu). */
    body .anasayfa_urun_slider .ulUrunSlider > .owl-stage-outer > .owl-stage:after {
      display: none !important;
    }
    /* Izgarada nokta gostergeler anlamsiz */
    body .anasayfa_urun_slider .ulUrunSlider > .owl-dots { display: none !important; }

    /* Altindaki blok ile arasi 60 px (masaustunde 80 - yukaridaki blok).
       Genel mobil kural 44 px veriyordu. */
    body #mainHolder_divDesign .landing-block:has(.anasayfa_urun_slider),
    body #mainHolder_divDesign .landing-block.t-mb-0:has(.anasayfa_urun_slider) {
      margin-bottom: 60px !important;
    }
  }

  /* ============================================================
     GUVEN VEREN IS ORTAKLIKLARI -> ARTIK BURADA DEGIL
     ------------------------------------------------------------
     Bu bolumun tum CSS'i 2026-09-08'de buradan SILINIP HTML
     blogunun kendi <style>'ina tasindi:
       Website/Anasayfa/ISORTAKLARI.txt
     Gerekce: Figma olculeri (1380x332) degistiginde tek dosya
     yapistirmak yeterli olsun - WEBCSS'i yeniden yapistirmaya
     gerek kalmasin. Ticimax'in HTML blogundaki <style> etiketini
     bozmadigi UCLUBANNER ile canli olarak dogrulandi.
     .ngPartner* ile ilgili bir sey ararken bu dosyada DEGIL,
     ISORTAKLARI.txt icinde arayin.
     ============================================================ */


  /* ============================================================
     EN COK TERCIH EDILEN TAKI KATEGORILERI -> ARTIK BURADA DEGIL
     ------------------------------------------------------------
     Bu bolumun tum CSS'i 2026-09-09'da buradan SILINIP HTML
     blogunun kendi <style>'ina tasindi:
       Website/Anasayfa/TAKIKATEGORILERI.txt
     Gerekce ISORTAKLARI ile ayni: Figma olculeri degistiginde tek
     dosya yapistirmak yeterli olsun, WEBCSS'i yeniden yapistirmaya
     gerek kalmasin. Ayrica eski blok "width:100vw" kullaniyordu -
     o teknik yatay kaydirma yaratiyor (bkz. HAKKIMIZDA.txt).
     ".ngCokSatan*" ile ilgili bir sey ararken bu dosyada DEGIL,
     TAKIKATEGORILERI.txt icinde arayin.
     ============================================================ */

  /* ============================================================
     MOBIL MENU - LACIVERT TASLAK (Figma)
     ------------------------------------------------------------
     FAZ 10.2'deki beyaz tam-ekran panelin ustune gelen gorunum katmani:
     lacivert zemin, ustte logo + hesap/sepet/kapat ikonlari, altin
     Garamond bolum basliklari ("Kategoriler" / "Kurumsal"), beyaz
     ogeler, ince ayirici cizgiler ve sagda ok. Logo/ikon satiri ve
     Kurumsal listesi V2-JS mobilMenuTaslak() ile ekleniyor. Ayni
     seciciler FAZ 10.2'de de var; bu blok dosyada DAHA SONRA geldigi
     icin ayni ozgullukte kazanir. Masaustunde (>=1042px) JS'in ekledigi
     ogeler tamamen gizlenir - menu header'a tasindigi icin orada
     "Kategoriler" yazisi/ikonlar gorunmemeli.
     ============================================================ */
  .newHeaderNavigation:not(.mobileStyle) .ngMobilUst,
  .newHeaderNavigation:not(.mobileStyle) .ngMobilBaslik,
  .newHeaderNavigation:not(.mobileStyle) .ngMobilKurumsal { display: none !important; }

  @media (max-width: 1041px) {
    body #headerNew .newHeaderNavigation.mobileStyle,
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNav {
      background: var(--ng-navy-900) !important;
    }
    /* Ust satir: logo solda, ikonlar sagda (Ticimax'in kendi kapat butonu
       JS ile ikon grubuna tasiniyor). Geri butonu sadece alt menu acikken. */
    body #headerNew .newHeaderNavigation.mobileStyle .newMenuTop {
      display: block !important;
      position: relative !important;   /* Ticimax absolute veriyor - akista dursun */
      top: auto !important; left: auto !important; right: auto !important;
      float: none !important;          /* Ticimax float veriyor - altindaki baslik ustune biniyordu */
      width: 100% !important;
      box-sizing: border-box;
      height: auto !important;
      padding: 22px 28px 6px !important;
      background: transparent !important;
      border-bottom: none !important;
    }
    /* Ticimax kategori listesini mutlak konumlu + sabit yukseklikte
       (height:100%, kendi ic kaydirmasi) tutuyor; bu haliyle "Kurumsal"
       blogu listenin ALTINA giremeyip ustune biniyordu. Liste normal
       akisa aliniyor, panelin kendisi (.newHeaderNav) kaydiriliyor. */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl {
      position: static !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      float: none !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;   /* Ticimax: max-height:40px - satiri eziyordu */
      float: none !important;
    }
    /* Ticimax "resimli menu" modunda (.newHeaderResimli) baglantiyi DIKEY
       flex (alt alta, ortali) diziyor ve satir yuksekligini icteki span'a
       40px olarak veriyor - metin ortada kaliyor, ok alta dusuyordu. */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li > a {
      height: auto !important;
      min-height: 62px;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      text-align: left !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li > a > span {
      flex: 1 1 auto;
      width: auto !important;
      height: auto !important;
      line-height: 62px !important;
      text-align: left !important;
    }
    .ngMobilUst { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
    .ngMobilLogo { display: block; color: var(--ng-gold-500); text-decoration: none; }
    .ngMobilLogo img { height: 46px; width: auto; display: block; }
    .ngMobilLogoYazi {
      display: flex; flex-direction: column; align-items: center; line-height: 1;
      font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 500;
      letter-spacing: .14em; color: var(--ng-gold-500);
    }
    .ngMobilLogoYildiz { font-size: 17px; margin-bottom: 3px; letter-spacing: 0; }
    .ngMobilIkonlar { display: flex; align-items: center; gap: 20px; }
    .ngMobilIkon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #fff; }
    .ngMobilIkon svg { width: 24px; height: 24px; display: block; }
    body #headerNew .newHeaderNavigation.mobileStyle .menuCloseBtn {
      width: 32px; height: 32px; margin: 0; padding: 0;
      display: flex; align-items: center; justify-content: center;
      background: transparent !important; border: none !important;
      color: #fff !important; font-size: 28px; line-height: 1;
      position: static !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menuCloseBtn i { color: #fff !important; }
    body #headerNew .newHeaderNavigation.mobileStyle .menuBackBtn {
      display: none; position: absolute; left: 28px; top: 22px; height: 48px;
      align-items: center; gap: 8px; color: #fff; font-size: 22px; z-index: 8;
    }
    body #headerNew .newHeaderNavigation.mobileStyle.ngAltMenuAcik .menuBackBtn { display: flex; }
    body #headerNew .newHeaderNavigation.mobileStyle.ngAltMenuAcik .ngMobilLogo { visibility: hidden; }

    /* Bolum basliklari */
    .ngMobilBaslik {
      font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600;
      line-height: 1.2; color: var(--ng-gold-500); padding: 56px 28px 10px; letter-spacing: normal;
    }

    /* Kategori listesi */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl { padding: 0 28px 4px !important; }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li {
      background: transparent !important;
      border-bottom: 1px solid rgba(255,255,255,.22) !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li > a {
      padding: 0 !important;
      line-height: 62px !important;
      color: #fff !important;
      font-size: 16px !important;
      font-weight: 400 !important;
      text-transform: none !important;
    }
    /* Sagdaki ince ok - alt menusu olmayan ogelerde CSS ile; alt menulu
       ogelerde Ticimax'in kendi .nextKolonBtn'i ayni gorunume getiriliyor */
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li.nav-item:not(.ulVar) > a.nav-item-link::after,
    .ngMobilKurumsalUl li a::after {
      content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 6px;
      border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg);
    }
    body #headerNew .newHeaderNavigation.mobileStyle .newHeaderNavUl > li.ulVar > a { flex: 1 1 auto; }
    body #headerNew .newHeaderNavigation.mobileStyle .nextKolonBtn {
      position: absolute !important;
      left: auto !important; right: 0 !important; top: 0 !important;
      width: 44px; height: 62px; margin: 0 !important; padding: 0 !important;
      display: flex; align-items: center; justify-content: flex-end; color: #fff !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .nextKolonBtn i { display: none; }
    body #headerNew .newHeaderNavigation.mobileStyle .nextKolonBtn::after {
      content: ''; width: 9px; height: 9px; margin-right: 6px;
      border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg);
    }

    /* Kurumsal listesi (JS ekler) */
    .ngMobilKurumsal { padding: 0 28px 48px; }
    .ngMobilKurumsal .ngMobilBaslik { padding-left: 0; padding-right: 0; }
    .ngMobilKurumsalUl { list-style: none; margin: 0; padding: 0; }
    .ngMobilKurumsalUl li { border-bottom: 1px solid rgba(255,255,255,.22); }
    .ngMobilKurumsalUl li a {
      display: flex; align-items: center; justify-content: space-between;
      line-height: 62px; color: #fff; font-family: 'Manrope', sans-serif;
      font-size: 16px; font-weight: 400; text-decoration: none;
    }

    /* Alt menu paneli (ör. Taki) da lacivert. Ticimax <li>'yi konumlandirdigi
       icin absolute panel, tiklanan satirin hizasindan basliyordu (ustteki
       satirlar acikta kaliyordu) - fixed yapilinca panelin tamamini kaplar
       (.newHeaderNav transform'lu oldugu icin fixed onun icinde kalir). */
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap,
    body #headerNew .newHeaderNavigation.mobileStyle .dropDown-wrap {
      position: fixed !important;
      top: 0 !important; bottom: 0 !important;
      height: 100% !important; min-height: 0 !important;
      width: 100% !important;
      background: var(--ng-navy-900) !important;
      padding: 84px 28px 40px !important;
    }
    /* Ust ikon satiri alt menu panelinin ustunde kalsin */
    body #headerNew .newHeaderNavigation.mobileStyle .newMenuTop { z-index: 8; }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .kolon > li {
      border-bottom: 1px solid rgba(255,255,255,.22);
      height: auto !important; min-height: 0 !important; max-height: none !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .kolon > li > a {
      padding: 0 !important; line-height: 58px !important;
      height: auto !important; min-height: 58px;
      color: #fff !important; font-size: 16px !important; font-weight: 400 !important;
      flex-direction: row !important; align-items: center !important;
      justify-content: space-between !important; text-align: left !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .kolon > li > a > span {
      flex: 1 1 auto; width: auto !important; height: auto !important;
      line-height: 58px !important; text-align: left !important;
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .kolon > li > a::after {
      content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 6px;
      border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg);
    }
    body #headerNew .newHeaderNavigation.mobileStyle .menu-wrap .ngVitrinAd { color: #fff; }
    /* Menu acikken panelin ustunde kalan sabit ogeler (kur widget'i ayni
       z-index'e sahip, WhatsApp butonu ve cerez uyarisi) gizlenir. */
    body:has(.newHeaderNavigation.mobileStyle.mobileactive) #koskerxFiyatWidget,
    body:has(.newHeaderNavigation.mobileStyle.mobileactive) .whatsBtn,
    body:has(.newHeaderNavigation.mobileStyle.mobileactive) #cerekKullanimUyari { display: none !important; }
  }

  /* ============================================================
     SIK SORULAN SORULAR (ANA SAYFA, HTML blogu)
     ------------------------------------------------------------
     Akordeon tarayicinin yerlesik <details>/<summary> etiketiyle
     calisir - JS gerekmez, HTML tek basina da acilir/kapanir. Burasi
     sadece inline stille yapilamayan kucuk dokunuslar: Safari'nin
     kendi ucgen isaretini gizleme (::-webkit-details-marker), acikken
     "+"nin donerek "x"e donusmesi ve acik kartin altin cercevesi. */
  .ngSss summary { list-style: none; }
  .ngSss summary::-webkit-details-marker { display: none; }
  .ngSss .ngSssArti { transition: transform .25s ease; }
  .ngSss details[open] .ngSssArti { transform: rotate(45deg); }
  .ngSss details[open] { border-color: var(--ng-gold-500) !important; }
  .ngSss details > div { animation: ngPanelAc .3s cubic-bezier(.22,.61,.36,1) both; }
  .ngSss a:hover { background: var(--ng-navy-700) !important; opacity: .9; }
  /* MOBILDE SORU VE CEVAPLAR SOLA YASLI (kullanici talebi 2026-09-09).
     Temanin "#mainHolder_divDesign .hazirBlokContent .txrow .txcol-sm
     { text-align: center }" kurali mobilde blok icindeki her seyi
     ortaliyor; akordeon sorulari ve uzun cevap paragraflari ortali
     halde okunmasi zor duruyordu. Bolum basligi ve altindaki aciklama
     ORTALI BIRAKILDI - onlarin kendi satir ici "text-align:center"
     stilleri var, buraya dokunulmuyor.
     "!important" gerekmiyor: ortalama kalitimla geliyor, elemanin
     kendi kurali her zaman kalitimin onune gecer. */
  @media (max-width: 767px) {
    .ngSss summary,
    .ngSss details > div { text-align: left; }
  }

  /* ============================================================
     KATEGORI KAPAK - HTML SABLON MODU
     ------------------------------------------------------------
     Panelin blok yonetimine yapistirilan .ngKapak[data-ng-sablon]
     sablonu: kutu sunucudan gelir (ilk boyamada yerini alir, layout
     shift olmaz), metinleri V2-JS kategoriKapakBanner() doldurup
     "ng-dolu" sinifini ekler. O ana kadar yer tutucu metin gizli. */
  .ngKapakSarici { float: left; clear: both; width: 100%; box-sizing: border-box; padding: 0 var(--ng-gutter); }
  .ngKapak[data-ng-sablon]:not(.ng-dolu) .ngKapak__icerik { visibility: hidden; }
  @media (max-width: 767px) {
    .ngKapakSarici { padding: 0 10px; }
  }
  /* ============================================================
     ANA SAYFA 3'LU BANNER (ana slider + 2 yan banner)
     ------------------------------------------------------------
     Ticimax blogu: .txcol-md-9 (owl slider, 950x540 gorseller) +
     #ticimaxYanBlok.txcol-md-3 (iki .ticimaxYanBlokItem, 480x260).
     Sorunlar: 75/25 sutun oranı gorsel oranlarina uymuyor, t-lr-2
     padding'i + .n2 a{padding-bottom:22px} aralari duzensiz yapiyor,
     genel ".anasayfa_tek_slider{aspect-ratio:1785/803}" kurali ana
     gorseli kirpiyor. Cozum: satir CSS grid'e cevrilir, sutun genislikleri
     GORSEL GENISLIKLERIYLE (950:480) orantili, tum aralar --ng-banner-gap,
     yan sutun iki esit satir, ana slider kendi gorsel oranini (950/540)
     korur. Yan bosluk YOK, uctan uca. Gorsel boyutu degisirse
     asagidaki oranlari (950fr 480fr, 950/540) guncelleyin. */
  :root { --ng-banner-gap: 16px; }@media (max-width: 767px) {
    :root { --ng-banner-gap: 10px; }}

  /* ============================================================
     HEADER DUZENLEMELERI (duyuru bari + sag ikon grubu)
     ------------------------------------------------------------
     Kullanici talebi (2026-09-05):
       1. Duyuru bari biraz daha yuksek (30px -> 38px; 2026-09-07'de 48px)
       2. Duyuru yazisi ince (550 -> 400, yukarida "body #top-bar b")
       3. (KALDIRILDI 2026-09-08) Duyuru metnine verilen 5px sol padding.
          O gun menu linkinin Ticimax'tan gelen 5px sol paddingi vardi ve
          hizayi tutturmak icin duyuru metnine de 5px verilmisti. 2026-09-08'de
          menu linkinin paddingi PANELDEN 0'a cekildi; kural bayatladi ve tam
          tersine 5px kaymaya sebep oluyordu (olculdu: duyuru 85, menu 80).
          Artik ikisi de kapsayicinin 20px'inden basliyor, ek kurala gerek yok.
       4. Arama ikonu 25px'ti, Uye Girisi / Sepetim ikonlari 22px - esitlendi
       5. Ikon ve yazilar siyah yerine site laciverti
       6. Uye Girisi / Sepetim: acik mavi zeminli buton gorunumu
     Masaustu (>=1042px) ile sinirli; mobil header ayri elemanlar kullaniyor.
     ============================================================ */
  /* 2026-09-07: 38px -> 48px. Figma tasariminda duyuru bari 1440x48; panelden
     degistirilmeye calisildi ama etkisi olmadi, cunku Ticimax'in kendi temel
     CSS'indeki "#top-bar{min-height:28px}" kuralini EZEN yer burasi - tek
     dogru mudahale noktasi bu satir. Sayfa asagi kaydirilinca bar kapanirken
     kullanilan max-height:70px (yukarida, .gectop kurali) 48'i rahat kapsiyor,
     degistirmeye gerek yok. Header ofseti WEBJS'te outerHeight() ile dinamik
     okundugu icin (bkz. topBarHeight) orada sabit bir 38 varsayimi yok. */
  body #top-bar { min-height: 48px; }

  @media (min-width: 1042px) {
    /* Ikon boyutu ve rengi */
    body #headerNew #divTopProductSearch .newSearcBtnClick i,
    body #headerNew #divHeaderUyeV2 .account-link i,
    body #headerNew .header-cart-link i {
      font-size: 22px;
      color: var(--ng-navy-900);
    }
    body #headerNew #divTopProductSearch .newSearcBtnClick a {
      color: var(--ng-navy-900);
    }
    /* Buton gorunumu: Uye Girisi ve Sepetim */
    body #headerNew #divHeaderUyeV2 .account-link,
    body #headerNew .header-cart-link {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 40px;
      padding: 0 14px;
      background: var(--ng-navy-50);
      border-radius: var(--ng-radius);
      color: var(--ng-navy-900);
      transition: background-color .25s ease;
    }
    body #headerNew #divHeaderUyeV2 .account-link:hover,
    body #headerNew .header-cart-link:hover {
      background: var(--ng-navy-100);
      color: var(--ng-navy-900);
    }
    /* Buton yazisi: kullanicinin verdigi renk (#122973), token laciverti
       (#001C3D) degil - sadece bu iki yazi icin. */
    body #headerNew #divHeaderUyeV2 .account-title,
    body #headerNew .header-cart-title {
      color: #122973;
      font-size: 12px;
      font-weight: 600;
    }
    /* Sepet ikonunu saran span 30px sabit yukseklikteydi, butonun icinde
       dikey ortalanmasi icin flex'e alindi */
    body #headerNew .header-cart-link .cart-icon {
      display: flex;
      align-items: center;
      height: auto;
    }
    /* Adet rozeti butonun sag ust kosesine oturur */
    body #headerNew .header-cart-link #spnTopSepetToplamUrun {
      top: -7px;
      right: -7px;
    }
  }