/* —–––– Genel ayarlar ––––— */
:root{ --sidebar-width: 280px; }

.filter-sidebar{
  box-sizing:border-box;
  width:var(--sidebar-width);
  max-width:100%;
  background:#fff;
  border:1px solid #dadada;
  font-family:'Roboto',Arial,sans-serif;
  padding:20px 16px 12px;
  /* “blok” hâline getir */
  float:left;              /* Masaüstünde sola hizalanır           */
  margin-right:32px;       /* Ürün listesi biraz uzaklaşsın         */
}
.filter-search {display: flex;
  align-items: center;justify-content: center;}
.filter-search::before {content: "";
  flex: 1;               /* Kalan alanı kaplar */
  height: 1px;           /* Çizgi kalınlığı */
  background: #ccc;      /* Çizgi rengi */
  margin-right: 0.5em;    /* Metin-çizgi arası boşluk */}
.filter-search::after {content: "";
  flex: 1;               /* Kalan alanı kaplar */
  height: 1px;           /* Çizgi kalınlığı */
  background: #ccc;      /* Çizgi rengi */
  margin-left: 0.5em;    /* Metin-çizgi arası boşluk */}
#views-exposed-form-portfolio-page-1 .bef-checkboxes .js-form-type-checkbox {width: 100%;}
#views-exposed-form-portfolio-page-1 .bef-checkboxes .js-form-type-checkbox label {
    font-size: 14px;
    font-weight: bold;}
/* —–––– Akordeon başlıkları ––––— */
.filter-sidebar fieldset{
  border:1px solid #e5e5e5;
  margin:0 0 16px 0;
  padding:0;
}
.filter-sidebar legend{
  margin:0;
  padding:10px 0;
  font-size:15px;
  font-weight:600;
  color:#0060b6;
  display:flex;align-items:center;
  user-select:none;
}
.filter-sidebar legend::before{
  content:'▸';
  margin-right:6px;
  transition:transform .25s;
}
.filter-sidebar fieldset.closed legend::before{ transform:rotate(-90deg); }

/* Kapalı alan içeriği gizle */
.filter-sidebar fieldset.closed .fieldset-wrapper{ display:none; }

/* —–––– Liste / input görünümleri ––––— */
.filter-sidebar .form-checkboxes ul{
  list-style:none;          /* Noktaları kaldır                     */
  margin:0; padding:0;
}
.filter-sidebar .form-checkboxes li::marker{ content:''; } /* Tarayıcı ◦ işaretini sıfırla */
.filter-sidebar .form-checkboxes li{ margin-bottom:6px; }
.filter-sidebar .form-checkboxes input[type=checkbox]{ accent-color:#0060b6; cursor:pointer; }
.filter-sidebar .form-checkboxes label{ margin-left:4px;font-size:14px;color:#444;cursor:pointer; }
.filter-sidebar select.form-select{
  width:100%;margin-bottom:12px;
  padding:6px 8px;font-size:14px;
  border:1px solid #cfcfcf;border-radius:4px;background:#fff;
}

/* —–––– Apply butonu ––––— */
.filter-sidebar .form-actions{ padding-top:4px; }
.filter-sidebar .form-actions input[type=submit]{
  width:100%;padding:8px 0;border:none;border-radius:4px;
  background:#0060b6;color:#fff;font-weight:600;cursor:pointer;
  transition:background .2s;
}
.filter-sidebar .form-actions input[type=submit]:hover{background:#004f97;}



/* —–––– Ürün listesi alanı filtreye çarpmasın (masaüstünde) ––––— */
/* Geçerli ürün çıktınız .view, .views-row, .products-grid vb. ise onu yazın */
.view, .products-grid, .view-content{
  /* filtre blok varsa solunda yer açsın */
  margin-left:calc(var(--sidebar-width) + 32px);
}

/* —— BEF–checkboxes içerisindeki UL’den tüm madde işaretlerini kaldır —— */
#views-exposed-form-portfolio-page-1 .bef-checkboxes ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* —— LI’lerin pseudo‐elementleri varsa hepsini sıfırla —— */
#views-exposed-form-portfolio-page-1 .bef-checkboxes ul li::marker,
#views-exposed-form-portfolio-page-1 .bef-checkboxes ul li::before,
#views-exposed-form-portfolio-page-1 .bef-checkboxes ul li::after {
  content: none !important;
  display: none !important;
}
/* — Onay kutusu + label aynı satıra, dikey ortalı — */
#views-exposed-form-portfolio-page-1 .js-form-type-checkbox {
  display: flex !important;
  align-items: center !important;
}

#views-exposed-form-portfolio-page-1 .js-form-type-checkbox input[type="checkbox"] {
  margin-right: 8px !important;  /* kutu ile yazı arası boşluk */
}

#views-exposed-form-portfolio-page-1 .js-form-type-checkbox label {
  margin: 0 !important;          /* varsa fazladan üst-alt boşlukları siler */
}
/* —— Checkbox + Label’ı kesinlikle tek satıra getir —— */
#views-exposed-form-portfolio-page-1 .bef-checkboxes .js-form-type-checkbox {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-bottom: 6px !important;  /* isterseniz alt boşluk */
}

#views-exposed-form-portfolio-page-1 .bef-checkboxes .js-form-type-checkbox input[type="checkbox"] {
  margin: 0 6px 0 0 !important;   /* kutu ile yazı arası boşluk */
}

#views-exposed-form-portfolio-page-1 .bef-checkboxes .js-form-type-checkbox label {
  display: inline-block !important;
  margin: 0 !important;
  line-height: 1 !important;
}
/* —–––– Formu yatay flex konteyner yap ––––— */
#views-exposed-form-portfolio-page-1 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  /* Kaydırmalı mobil halini korumak için overflow: visible */
  overflow: visible !important;
}

/* —–––– Her fieldset’i sabit genişlik+yükseklikte kutu yap ––––— */
#views-exposed-form-portfolio-page-1 fieldset {
  flex: 0 0 200px;        /* isterseniz 180px–220px arası ayarlayın */
  max-height: 300px;      /* dikeyde 300px’den sonra scroll */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 12px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

/* —–––– İnce, sade scrollbar stili ––––— */
#views-exposed-form-portfolio-page-1 fieldset::-webkit-scrollbar {
  width: 6px;
}
#views-exposed-form-portfolio-page-1 fieldset::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
#views-exposed-form-portfolio-page-1 fieldset::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
#views-exposed-form-portfolio-page-1 fieldset::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* —–––– Legend (başlık) her zaman görünür ––––— */
#views-exposed-form-portfolio-page-1 fieldset legend {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  padding-bottom: 4px;
}

/* 1) Form container’da tüm kutuları üstte hizala */
#views-exposed-form-portfolio-page-1 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  align-items: flex-start !important;
      flex-direction: row;
    justify-content: space-between;
}

/* 2) Tüm fieldset’leri sabit genişlik ve sabit küçük yükseklikli kutu yap */
#views-exposed-form-portfolio-page-1 fieldset {
  flex: 0 0 157px !important;    /* yatayda 200px, isterseniz 180-220 arası değiştirin */
  height: 224px !important;      /* dikeyde 180px yüksekliğe sabitleyin */
  overflow-y: auto !important;   /* iç kaydırma çıksın */
  overflow-x: hidden !important; /* yataydaki taşmaları gizle */
  padding: 6px 6px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

/* 3) Başlık hep görünür (scroll sırasında üstte kalsın) */
#views-exposed-form-portfolio-page-1 fieldset legend {
  position: sticky !important;
  top: 0;
  background: #fff;
  z-index: 2;
  padding-bottom: 4px;
}
.fieldset-legend {    font-size: 1rem;}
#views-exposed-form-portfolio-page-1 fieldset legend {

    text-align: center;
}

#views-exposed-form-portfolio-page-1 fieldset legend {
  
    height: 42px;
}

/* —— Masaüstüde collapse ve yükseklik ayarı —— */
@media (min-width: 992px) {
	  /* .closed eklenince gizle */
  #views-exposed-form-portfolio-page-1 fieldset.closed .fieldset-wrapper {
    display: none !important;
  }
  /* Başlangıçta tüm içerikleri gizle */
  #views-exposed-form-portfolio-page-1 fieldset.closed .fieldset-wrapper {
    display: none !important;
  }
  /* Kapalı halinde sadece başlık yüksekliği kadar gözüksün */
  #views-exposed-form-portfolio-page-1 fieldset.closed {
    height: 42px !important;    /* legend’in yüksekliği */
    overflow: hidden;           /* içeriği taşırma */
  }
  /* Açık olduğunda normal akışa dönsün */
  #views-exposed-form-portfolio-page-1 fieldset:not(.closed) {
    height: 224px !important;
  }
}

/* —–––– Mobil görünüm (< 992 px) ––––— */
@media(max-width:991px){
  /* Paneli gizle / göster (JS .open sınıfı ekler) */
  .filter-sidebar{
    position:fixed;
    top:0; left:-100%;
    height:100vh; overflow-y:auto;
    z-index:1040; transition:left .3s ease-in-out;
    margin:0;          /* float & margin kaldır */
  }
  .filter-sidebar.open{ left:0; }

  /* Ürün listesi yine tam genişliğe yayılsın */
  .filter-sidebar + *{ margin-left:0 !important; }
  .view, .products-grid, .view-content{ margin-left:0; }
  #views-exposed-form-portfolio-page-1 {
    flex-direction: column !important;
    gap: 3px !important;
  }
  #views-exposed-form-portfolio-page-1 fieldset {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Başlangıçta tüm içerikleri gizle */
  #views-exposed-form-portfolio-page-1 fieldset .fieldset-wrapper {
    display: none;
  }

  /* .open sınıfı eklenince göster */
  #views-exposed-form-portfolio-page-1 fieldset.open .fieldset-wrapper {
    display: block;
  }

  /* Başlık yanına + / – ikonları ekleyelim */
  #views-exposed-form-portfolio-page-1 fieldset legend {
    position: relative;
    padding-right: 20px;
  }
  #views-exposed-form-portfolio-page-1 fieldset legend::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  #views-exposed-form-portfolio-page-1 fieldset.open legend::after {
    content: '–';
  }
   /* --- Fieldset’i tamamen otomatik yüksekliğe al, önceki sabit yükseklikleri kaldır */
  #views-exposed-form-portfolio-page-1 fieldset {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
   flex: 0 0 0 !important;
  }

  /* --- Başlangıçta tüm içerikleri gizle */
  #views-exposed-form-portfolio-page-1 fieldset .fieldset-wrapper {
    display: none !important;
  }

  /* --- .open eklenince içeriği göster, fieldset de yeniden boyutlansın */
  #views-exposed-form-portfolio-page-1 fieldset.open .fieldset-wrapper {
    display: block !important;
  }
.fieldset-legend::before {}
.fieldset-legend::after {}
  /* --- Legend’ler satır satır, blok gibi dizilsin */
  #views-exposed-form-portfolio-page-1 fieldset legend {
    display: block !important;
    cursor: pointer;
           
  }
  .col-xs-12 {width: 100%;}
  
}
.col-xs-12 {width: 100%;}
.views-exposed-form {width: 100%;}
.views-exposed-form .content {width: 100%;}
.scroll-to-top {
    bottom: 115px !important;
    right: 50px !important;
}