/* =========================================================
   Trendhasat - mobil duzeltmeleri
   Tema Bootstrap 5 ile geliyor ama sablonlarda Bootstrap 3'un
   col-xs-* siniflari kullanilmis; bunlarin CSS karsiligi yok.
   Asagidaki kurallar yalnizca <=991px'te devreye girer,
   masaustu gorunumu degistirmez.
   ========================================================= */

@media (max-width: 991px) {

  /* 1) Arama paneli mutlak konumdan cikip akisa girsin.
        Masaustunde basligin uzerine binmesi tasarim geregi;
        mobilde baslik yukseldigi icin logonun uzerine dusuyordu. */
  .sub-header { position: static !important; margin-top: 0 !important; }
  #top-links {
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 12px 15px 4px !important;
    border-radius: 24px;
  }
  #top-links > ul.row { margin: 0; }

  /* 2) Baslik satiri: logo solda, telefon sagda, tek satirda */
  .htop { flex-wrap: nowrap !important; align-items: center; }
  .htop > [class*="col-"] { width: auto !important; }
  #logo img { margin-left: 0 !important; }
  /* .homemenu masaustu menuyu tasir AMA mobil cekmece (.sidenav) da
     onun icindedir; display:none verilirse mobil menu de kapanir.
     Bu yuzden sadece yer kaplamasi sifirlanir. */
  .homemenu { width: 0 !important; padding: 0 !important; }
  .lunsup { margin-left: auto; padding-right: 0 !important; }
  .lunsup ul { margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
  .lunsup ul li { list-style: none; }

  /* 3) Arama: kategori secici ustte, giris+buton altta, tam genislik */
  .wbSearch { width: 100%; }
  /* kategori secici + giris + buton TEK SATIRDA, bitisik hap gorunumu */
  #search_block_top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
  }
  #webibazaar-search-category {
    float: none !important;
    flex: 0 0 auto;
    width: 104px !important;
    min-width: 104px;
    font-size: 12px !important;
    padding: 0 16px 0 11px !important;
    border: 0 !important;
    border-radius: 50px 0 0 50px !important;
  }
  #search_block_top .input-group {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    flex-wrap: nowrap !important;
  }
  #search .form-control {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .input-group-btn { flex: 0 0 auto; display: flex; }
  #search .btn-lg { padding: 0 15px; border-radius: 0 50px 50px 0 !important; }

  /* 4) Merkez banner: gorsel ve metin alt alta */
  .wbcenter { margin-left: 0; margin-right: 0; }
  .wbcenter .centerimg,
  .wbcenter .centertxt { width: 100% !important; }
}

@media (max-width: 767px) {

  /* 5) Slider metni ekrani tasmasin (tema 400px sabit veriyor) */
  .slidertext {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    padding: 0 20px;
  }
  .slidertext h1 { font-size: 24px !important; line-height: 1.2; margin-bottom: 6px; }
  .slidertext p  { font-size: 12px !important; line-height: 18px; }
  .slidertext a.btn { margin-top: 14px !important; padding: 8px 20px; font-size: 12px; }

  /* 6) Baslik olculeri */
  #logo img { max-width: 100px !important; }
  .call-right a { font-size: 15px; }
  .call-right .userdess { font-size: 11px; }
  .header-right .svgbg { width: 34px; height: 34px; }

  /* 7) Yatay tasma kaynaginda cozuldu; html/body uzerine overflow-x
        vermek sayfa kaydirmasini kilitledigi icin kullanilmiyor. */
}

@media (max-width: 575px) {
  .slidertext h1 { font-size: 20px !important; }
  .call-right a { font-size: 14px; }
  #logo img { max-width: 88px !important; }
}

/* ---------------------------------------------------------
   8) Slider: mobilde slayt cok alcak kaldigi icin metin
      gorselin uzerine biniyordu. Slayta sabit yukseklik +
      object-fit verip metnin arkasina okunabilirlik gecisi
      koyuyoruz (gorselin dolu tarafi sagda kaliyor).
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .imgslider .slideimg img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: 78% center;
  }
  .slidertext {
    background: linear-gradient(90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.86) 45%,
      rgba(255,255,255,0)  100%);
  }
  .slidertext .slideff { width: 100%; }

  /* telefon blogu kenara yapismasin */
  .htop .lunsup { padding-right: 4px !important; }
}

@media (max-width: 575px) {
  .imgslider .slideimg img { height: 220px; }
}

/* ---------------------------------------------------------
   9) Merkez banner: 3.2 oranindaki gorsel mobilde 108px'e
      dusuyor ve icine gomulu yazi ~10px kaliyor. Sabit
      yukseklik + cover ile olcek buyutuluyor; yazi yatayda
      ortali oldugu icin kirpma onu kesmiyor.
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .wbcenter .centerimg img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
  }
}

@media (max-width: 575px) {
  .wbcenter .centerimg img { height: 150px; }
  /* tema burada gorseli %50 yapiyor; tam genislik daha okunakli */
  .wbcenter .centerimg { width: 100% !important; }
  .wbcenter .centertxt { width: 100% !important; }
}

/* ---------------------------------------------------------
   10) Hamburger dugmesi: .homemenu sifir genislige indigi
       icin buton ona gore konumlanip basligin ustune
       tasiyordu (top:-9px). Artik .htop'a gore, solda ve
       dikeyde ortali duruyor; logoya yer acmak icin satira
       sol bosluk veriliyor.
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .htop { position: relative; padding-left: 42px; }
  .homemenu nav.navbar { position: static !important; }
  .homemenu .btn-navbar.navbar-toggler {
    position: absolute !important;
    left: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 8px 6px;
    z-index: 6;
  }

  /* 11) Giris / sepet ikonlari arama kutusunun YANINA alindi.
         align-items:flex-end sayesinde ikonlar, arama girisinin
         bulundugu satirla ayni hizaya oturuyor. */
  #top-links > ul.row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
  }
  #top-links .top-search {
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
    padding: 0 !important;
  }
  #top-links .top-cart {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 0 2px 8px 0 !important;
    margin: 0 !important;
  }
  #top-links .top-cart > li { list-style: none; }
}

/* 12) Slider metni gorselin dolu tarafina tasmasin */
@media (max-width: 767px) {
  .slidertext .slideff { width: 66%; max-width: 66%; }
}

/* ---------------------------------------------------------
   13) Hizmetler blogu: 576-767px arasinda Bootstrap col-sm-3
       devreye girip 4 sutunu ~142px'e sikistiriyor ve metin
       tasiyor. Bu aralikta 2'li duzene aliniyor.
   --------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .deliveryinfo > [class*="col-sm-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 18px;
  }
}

/* =========================================================
   14) MOBIL MENU CEKMECESI
   - Cekmece acilinca hamburger onun ustunde kaliyordu; ustune
     basinca yeniden openNav() tetiklenip menu kaybolup geliyordu.
   - Tasarim sadelestirildi: marka yesili baslik, yumusak
     ayraclar, hover durumu, acilir ok animasyonu.
   ========================================================= */
@media (max-width: 991px) {

  /* --- cakisan hamburger --- */
  #stamenu.active .btn-navbar.navbar-toggler { display: none !important; }

  /* --- govde --- */
  #stamenu .menu-vertical {
    width: 300px;
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    padding-top: 0 !important;
  }

  /* --- baslik seridi --- */
  .sidenav .close-nav {
    background: linear-gradient(135deg, #84B32E 0%, #6D9900 100%) !important;
    padding: 17px 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    letter-spacing: .2px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
  }
  .sidenav .close-nav .categories {
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
  }
  .sidenav .close-nav .closebtn {
    float: none !important;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex !important;
    align-items: center; justify-content: center;
    transition: background .2s;
  }
  .sidenav .close-nav .closebtn:hover { background: rgba(255, 255, 255, .34); }
  .sidenav .close-nav .closebtn i { font-size: 15px; line-height: 1; }

  /* --- ana liste --- */
  #stamenu .menu-vertical .nav.navbar-nav { padding: 4px 0 10px; }
  #stamenu .menu-vertical .nav.navbar-nav > li { border-bottom: 1px solid #f2f2f2; }
  #stamenu .menu-vertical .nav.navbar-nav > li:last-child { border-bottom: 0; }

  #stamenu .menu-vertical .nav.navbar-nav > li > .nav-link {
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: #2b2b2b !important;
    letter-spacing: .2px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: background .18s, color .18s, padding-left .18s;
  }
  #stamenu .menu-vertical .nav.navbar-nav > li > .nav-link:hover,
  #stamenu .menu-vertical .nav.navbar-nav > li > .nav-link:focus {
    background: #f5f9ec !important;
    color: #6D9900 !important;
    padding-left: 25px !important;
  }
  #stamenu .menu-vertical .nav-link .fa-angle-down {
    color: #a5a5a5;
    font-size: 17px;
    transition: transform .22s ease, color .18s;
  }
  #stamenu .menu-vertical .nav-link:hover .fa-angle-down { color: #6D9900; }
  #stamenu .menu-vertical .nav-link[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); }

  /* --- alt menu --- */
  #stamenu .menu-vertical .dropdown-menu {
    border: 0 !important;
    box-shadow: none !important;
    background: #fbfcf8 !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #stamenu .menu-vertical .dropdown-menu a {
    padding: 10px 20px 10px 36px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #5a5a5a !important;
    display: block;
    position: relative;
    text-transform: none !important;
  }
  #stamenu .menu-vertical .dropdown-menu a::before {
    content: "";
    position: absolute;
    left: 22px; top: 50%;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #c6d99b;
    transform: translateY(-50%);
    transition: background .18s;
  }
  #stamenu .menu-vertical .dropdown-menu a:hover { color: #6D9900 !important; }
  #stamenu .menu-vertical .dropdown-menu a:hover::before { background: #6D9900; }

  /* --- "tumunu gor" baglantisi --- */
  #stamenu .menu-vertical .see-all {
    display: block;
    margin: 10px 20px 2px;
    padding: 9px 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #6D9900 !important;
    border: 1px solid #dde8c2;
    border-radius: 24px;
    transition: background .18s, color .18s, border-color .18s;
  }
  #stamenu .menu-vertical .see-all:hover {
    background: #6D9900;
    color: #fff !important;
    border-color: #6D9900;
  }

  /* --- arka plan ortusu --- */
  .w3-overlay { background-color: rgba(0, 0, 0, .45) !important; }
}

/* ---------------------------------------------------------
   15) Sepet butonu mobilde "0 urun - 0,00 TL" metnini de
       basiyor ve 117px yer kapliyordu; bu da arama kutusunu
       eziyordu. Metin duz bir text node oldugu icin
       font-size:0 ile gizlenip yalnizca ikon birakiliyor.
   --------------------------------------------------------- */
@media (max-width: 991px) {
  #top-links .top-cart #cart > .dropdown-toggle {
    font-size: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }
  #top-links .top-cart #cart > .dropdown-toggle svg {
    width: 27px !important;
    height: 27px !important;
  }
  /* acilir sepet paneli normal yazi boyutunu korusun */
  #top-links .top-cart #cart .dropdown-menu {
    font-size: 14px !important;
    min-width: 280px;
  }
}


/* ---------------------------------------------------------
   16) Urun kartindaki "Sepete Ekle" butonu bos gorunuyordu.
       Tema tum ekranlarda `.cartb svg { display:none }` diyor;
       masaustunde yazi gorundugu icin fark edilmiyor, ama
       <=991px'te yazi da gizlenince buton bombos kaliyor.
       Mobilde ikon geri aciliyor.
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .product-thumb .homeadd .cartb svg {
    display: inline-block !important;
    fill: #000;
  }
  .product-thumb .homeadd .cartb {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .product-thumb .homeadd:hover .cartb svg { fill: #fff; }
}

/* ---------------------------------------------------------
   17) Tek satirda 5 kontrol dar ekranda sigmiyordu; kategori
       secici, buton ve ikonlar daraltilarak giris alanina
       yer acildi.
   --------------------------------------------------------- */
@media (max-width: 991px) {
  #webibazaar-search-category {
    width: 88px !important;
    min-width: 88px !important;
    font-size: 11px !important;
    padding: 0 14px 0 9px !important;
  }
  #search .btn-lg { padding: 0 11px !important; }
  #search .btn-lg svg { width: 19px; height: 19px; }

  #top-links > ul.row { gap: 8px; }
  #top-links .top-cart { gap: 10px; padding: 0 0 8px 0 !important; }
  #top-links .top-cart > li { margin: 0 !important; }
  #top-links .top-cart svg { width: 24px !important; height: 24px !important; }
  #top-links .top-cart #cart > .dropdown-toggle svg { width: 24px !important; height: 24px !important; }
  #top-links .top-cart .huser .dropdown-toggle { padding: 0 !important; }

  /* giris alani asla 90px altina dusmesin */
  #search .form-control { min-width: 90px !important; }
}

@media (max-width: 400px) {
  #webibazaar-search-category { width: 78px !important; min-width: 78px !important; font-size: 10.5px !important; }
  #search .form-control { min-width: 76px !important; font-size: 12px !important; }
}

/* ---------------------------------------------------------
   18) Cekmece son rotuslar: ayraclar tam genislik, dokunma
       alanlari biraz daha rahat, altta ince marka seridi.
   --------------------------------------------------------- */
@media (max-width: 991px) {
  #stamenu .menu-vertical .nav.navbar-nav,
  #stamenu .menu-vertical .navbar-collapse { padding-left: 0 !important; padding-right: 0 !important; }
  #stamenu .menu-vertical .nav.navbar-nav > li { margin: 0 !important; }
  #stamenu .menu-vertical .nav.navbar-nav > li > .nav-link { padding: 15px 20px !important; }

  /* altta ince marka seridi - bos alan bos gorunmesin */
  #stamenu .menu-vertical::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: 6px;
    background: linear-gradient(90deg, #6D9900 0%, #cfe0a6 60%, transparent 100%);
  }

  /* acilir menu ust ayraci */
  #stamenu .menu-vertical .dropdown-menu { border-top: 1px solid #eef2e4 !important; }
}

/* =========================================================
   19) ARAMA CUBUGU - YENIDEN TASARIM
   Onceki hali parcali duruyordu: secici ayri yesil hap,
   giris alani cizgi gibi, buton kenari garip. Artik tek
   parca beyaz hap: [ Kategoriler | giris alani | (o) ]
   Tum ogeler dikeyde ortali.
   ========================================================= */
@media (max-width: 991px) {

  /* satir: her sey dikeyde ortali */
  #top-links > ul.row {
    align-items: center !important;
    gap: 10px;
  }
  #top-links .top-cart {
    padding: 0 !important;
    align-items: center !important;
  }

  .wbSearch { width: 100%; }

  /* tek parca hap */
  #search_block_top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 46px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  }

  /* kategori secici - solda, ince ayrac cizgisiyle */
  #webibazaar-search-category {
    flex: 0 0 auto;
    width: 108px !important;
    min-width: 108px !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid #ededed !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-position: right 9px center !important;
    background-size: 10px auto !important;
    color: #2f2f2f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 24px 0 15px !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  /* giris alani */
  #search_block_top .input-group {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 100%;
    background: transparent;
  }
  #search .form-control {
    flex: 1 1 auto;
    min-width: 0 !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  #search .form-control::placeholder { color: #9b9b9b; }

  /* arama butonu - hap icinde yesil daire */
  .input-group-btn {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    padding-right: 4px;
  }
  #search .btn-lg {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #6D9900 !important;
    transition: background .18s;
  }
  #search .btn-lg:hover { background: #5b8000 !important; }
  #search .btn-lg svg { width: 18px !important; height: 18px !important; fill: #fff; }

  /* yanindaki ikonlar */
  #top-links .top-cart svg { width: 25px !important; height: 25px !important; }
}

@media (max-width: 400px) {
  #webibazaar-search-category {
    width: 96px !important;
    min-width: 96px !important;
    font-size: 11.5px !important;
    padding: 0 22px 0 12px !important;
  }
  #search_block_top { height: 44px; }
  #search .btn-lg { width: 36px !important; min-width: 36px !important; height: 36px !important; }
}