/*
                  _   _             _ _ _ _ _        _ 
                 | | | |           | (_|_|_) |      | |
  _ __ ___  _   _| |_| |_   _    __| |_ _ _| |_ __ _| |
 | '_ ` _ \| | | | __| | | | |  / _` | | | | __/ _` | |
 | | | | | | |_| | |_| | |_| | | (_| | | | | || (_| | |
 |_| |_| |_|\__,_|\__|_|\__,_|  \__,_|_| |_|\__\__,_|_|
                                      _/ |             
                                     |__/

Samet Mutlu +05422419932 mutludijital.com.tr
*/
/* Genel stil */
.filter-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 15px;
  margin-bottom: 5px;
}

/* Marka kaydırmalı container */
.marka-container-wrapper {
  margin-bottom: 10px;
}
.marka-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


/* Checkbox gizle */
.filter-checkbox {
  display: none;
}

/* Filtre tag */
.filter-tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #111;
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin: 3px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  user-select: none;
}

/* Seçili checkbox */
.filter-checkbox:checked + .filter-tag {
  background-color: #043c5a;
  color: #fff;
  border-color: #043c5a;
}

/* Kapasite ve garanti içi small etiket */
.kapasite-garanti-row .filter-tag small {
  display: block;
  font-weight: normal;
  color: #555;
  font-size: 10px;
  margin-bottom: 2px;
}
/* Mobilde small'lar gizlenir */
@media (max-width: 768px) {
  .kapasite-garanti-row .filter-tag small {
    display: none;
  }
}

/* Seçili small beyaz */
.filter-checkbox:checked + .filter-tag small {
  color: #fff;
}

/* Seçili filtre kutuları sadece mobilde görünsün */
.selected-filters {
  display: none;
}

@media (max-width: 768px) {
  .selected-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
    padding: 6px 0;
  }

  .selected-filters .filter-chip {
    display: flex;
    align-items: center;
    background-color: #043c5a;
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 20px;
    position: relative;
  }

  .selected-filters .filter-chip .remove-filter {
     appearance: none;
    margin-left: 8px;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
  }

  .selected-filters .filter-chip .remove-filter:hover {
    color: #c00;
  }
}

/* Satır düzeni */
.kapasite-garanti-row {
  margin-top: 15px;
  display: flex;
  gap: 20px;
}
.kapasite-garanti-row > div {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.kapasite-garanti-row .filter-tag {
  margin: 3px 5px 3px 0;
  text-align: center;
}

/* Mobil özel başlıklar */
.mobile-section-title {
  font-weight: bold;
  font-size: 14px;
  margin: 10px 0 4px;
  display: none;
}
@media (max-width: 768px) {
  .mobile-section-title {
    display: block;
  }
}

/* Masaüstü görünüm sadece geniş ekranlarda */
.desktop-filter-bar {
  display: block;
}
@media (max-width: 768px) {
  .desktop-filter-bar {
    display: none !important;
  }
}

/* Mobil filtre/sırala butonları */
.mobile-filter-buttons {
  display: none;
}
@media (max-width: 768px) {
  .mobile-filter-buttons {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 15px 0;
  }
  .mobile-filter-buttons button {
     position: relative;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #043c5a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
   background-color: #fff;
  }
  .mobile-filter-buttons button#openFilter {
    flex: 1;
  }

  .mobile-filter-buttons button#openSort {
    flex: 2;
  }
  .mobile-filter-buttons i {
    font-size: 16px;
    margin-right: 6px;
  }
   .filter-indicator {
    position: absolute;
    top: 5px;
    left: 15px;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    display: none;
  }
}

/* Mobil filtre panel */
#mobileFilterPanel,
#mobileSortPanel {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #fff;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
}
#mobileFilterPanel {
  top: 0;
  left: 0;
  height: 100vh;
  padding: 20px;
}
#mobileSortPanel {
  bottom: 0;
  left: 0;
  padding: 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* Mobil kapatma butonu */
.mobile-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

/* Uygula butonu */
.apply-filter-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #043c5a;
  color: white;
  text-align:center;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  margin-top: 20px;
}
.pagination-button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin: 2px;
  cursor: default;
  transition: all 0.3s;
  white-space: nowrap;
  user-select: none;
  text-align: center;
}

.pagination-button.aktif {
  background-color: #043c5a;
  color: #fff;
  border-color: #043c5a;
  cursor: pointer;
}
.pagination-page-info {
  font-size: 13px; /* küçük puntolu */
  color: #333;
  padding: 4px 0;
  margin: 0 2px;
  white-space: nowrap;
}