#keyword-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc; /* İnce siyah border eklemek için */
  height: 37px;
  border-radius: .25rem;
}

#server-filter {
    padding: 10px;
    font-size: 16px;
    margin-left: 22px;
    max-width: 200px; /* Genişliği butonlarla aynı yap */
    border: 1px solid #000; /* İnce siyah border eklemek için */
    height: 47px;
    width: 200px;
}

#sort-buttons {
    display: flex;
    align-items: center;
}

.sort-button {
    padding: 10px;
    font-size: 16px;
    margin-left: 22px;
    border: 2px solid #000; /* İnce siyah border eklemek için */
    background-color: #DDE2E6;
    color: #000;
    cursor: pointer;
    height: 47px; /* Diğer filtreleme alanlarının yüksekliğiyle eşleştir */
    width: 200px; /* Mevcut genişliğinin 2 katı */
}

.sort-button.active {
    background-color: #000;
    color: #DDE2E6;
}

.product-row-wrapper {
    display: flex;
    justify-content: flex-start; /* Satırları sola hizalamak için */
    width: 100%;
}

.product-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Satırları sola hizalamak için */
    margin-bottom: 2px;
    max-width: 1280px; /* Dört kart ve aralarındaki boşluklar kadar genişlik */
}

.item-card {
    background-color: #27293D;
    color: #DDE2E6;
    padding: 10px;
    border-radius: 10px;
    width: 30%; /* Kart genişliği - 4 kart bir satırda */
    height: 360px; /* Kart yüksekliği */
    margin: 4.4px;
    text-align: left; /* Tüm içeriği sola dayalı yap */
    display: block;
    position: relative;
    box-sizing: border-box; /* Padding ve border kartın boyutlarına dahil edilir */
    overflow: hidden; /* İçeriğin taşmasını engelle */
    border: 2px solid #424649; /* Altın rengi border */
    transition: transform 0.2s ease; /* Hover efekti için geçiş süresi */
    cursor: pointer; /* Tıklanabilir olduğunu göster */
    margin-top: 12px;
    margin-left: 15px;
    margin-right: 15px;
}

/* Ürün kartı hover durumu */
.item-card:hover {
    transform: scale(1.05); /* Biraz büyütme efekti */
    background-color: #27293D; /* Daha mat bir renk */
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5); /* Altın rengi hafif bir gölge */
}

/* Ürün başlığı */
.item-card h3 {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #DDE2E6; /* Beyaz renk */
}

.item-image {
    width: 45px;
    height: 45px;
    display: block;
    margin: 0 auto 10px;
}

.item-price {
  margin: 0;
  color: #DDE2E6;
  font-size: 20px; /* Font büyüklüğü */
}

#load-more-container {
    display: flex;
    justify-content: center; /* Satırları ortalamak için */
    width: 100%;
    margin-top: 2px; /* Ürün içeriklerinin bittiği noktaya taşımak için */
}

#load-more {
    padding: 15px 20px;
    font-size: 16px;
    border: 2px solid #000;
    background-color: #DDE2E6;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    width: 100%; /* Düğme genişliği - 4 kart genişliğinde */
}

.suggestion-item {
    padding: 3px;
    cursor: pointer;
}

.suggestion-item:hover {
    background: #f0f0f0;
}

/* Category link */
.category-link {
    color: white;
    text-decoration: none;
}

.category-link:hover {
    text-decoration: underline;
}
/* Layout container */
#layout-container {
    display: flex;
}

/* Accordion menu container */
#accordion-menu-container {
    flex: 0 0 220px; /* Accordion menünün genişliği */
}

/* Content area */
#content-area {
    flex: 1;
    margin-left: 10px;
}

/* Other styles for the search and filter container */
#search-container {
    display: flex;
    justify-content: flex-start; /* Arama alanını sola hizala */
    width: 100%; /* Genişliği full yap */
    margin-left: 0px; /* product-row ile hizalamak için */
    padding: 0px 0;
    position: relative; /* Öneri listesinin konumunu ayarlamak için gerekli */
}

#suggestion-list {
    background: white;
    max-height: 400px;
    overflow-y: auto;
    position: absolute;
    top: 67px; /* Arama alanının hemen altına yerleştir */
    width: 32.6%; /* Arama alanı genişliğiyle aynı */
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Hafif bir gölge ekle */
    margin-left: 10px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.suggestion-item:hover {
    background-color: #9e9393; /* Öneri listesinin arka plan rengini değiştirme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Gölgeyi biraz arttırma */
}

.suggestion-thumbnail {
    width: 32px; /* Resim boyutunu biraz daha büyük yaptık */
    height: 32px;
    margin-right: 10px;
}

.suggestion-divider {
    border: none;
    border-top: 1px solid #ccc;
    margin: 5px 0;
}

#filter-buttons-container {
    border: 2px solid #424649;
    border-radius: .25rem;
    margin-left: 10px; /* Filtre alanını sağa dayalı yap */
    height: 65px;
}

#filter-buttons {
    display: flex;
    height: 37;
    margin-left: 10px;
    padding-top: 5px;
}

#sorting-buttons{
    justify-content: flex-end;
    display: flex;
    justify-content: right; /* Satırları ortalamak için */
    padding-right: 5px;
}

.filter-button {
    margin-right: 15px;
}

.selected-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #28a745; /* Yeşil arka plan */
    color: #DDE2E6;
    padding: 5px 10px;
    border-bottom-right-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

/* Seçili kategori rengi */
.category-link.selected {
    color: #5dd1e5;
}

/* Tıklanamaz kategori */
.category-name {
    color: #DDE2E6;
    cursor: default;
}

/* Banner alanı cssleri */
.breadcrumb {
    background-color: #f5f5f5; /* Arka plan rengi */
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: #0073aa; /* Link rengi */
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.accordion-button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1  5px;
    transition: 0.4s;
}

.accordion-button.active, .accordion-button:hover {
    background-color: #ccc;
}

.accordion-panel {
    padding: 0 10px;
    display: none;
    background-color: white;
    overflow: hidden;
}

.page-title, .os-breadcrumb-wrap {
    text-align: center; /* Ortala */
    color: white; /* Yazı rengi beyaz */
    font-size: 25px;
}

/* WooCommerce breadcrumb yazı rengi */
.os-breadcrumb-wrap a {
    color: white; /* Linklerin rengi beyaz */
    text-decoration: none;
}

.os-breadcrumb-wrap a:hover {
    text-decoration: underline;
}

.price-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    height: 37px; /* price-container kadar yükseklik */
    background-color: #27293D; /* %50 siyah opaklık */
    z-index: 1; /* Üstte görünmesi için z-index ayarı */
    display: flex; /* Flexbox düzeni */
    justify-content: space-between; /* Resimler sola, parça adedi sağa dayalı */
    align-items: center; /* Dikey ortalama */
    padding: 0 10px; /* Sağ ve sol boşluk */
}

.set-items {
    display: flex; /* Flexbox düzeni */
    gap: 5px; /* Resimler arasına boşluk */
    align-items: center; /* Dikey ortalama */
    margin-top: 0px;
}

.set-item-image {
    width: 25px;
    height: 25px;
    object-fit: cover; /* Resmi sabit boyutlara sığdırmak için */
    border-radius: 3px; /* Hafif yuvarlak köşeler */
}

.set-item-count {
    color: #DDE2E6; /* Beyaz yazı rengi */
    font-size: 12px; /* Yazı boyutu */
    font-weight: bold; /* Kalın yazı */
    margin-top: 0px;
}

/* Akordion menü cssleri */
.accordion {
color: #1D1D2E;
width: 300px;
font-size: 20px !important; /* Yazı boyutu */
}

.accordion-item {
border: none;
background-color: #1D1D2E;
margin-bottom: 15px;
}

.accordion-header {
display: flex; /* Yazı ve ikonu yatay hizala */
justify-content: space-between; /* Yazı ve ikonu iki uca yerleştir */
align-items: center; /* Dikey olarak ortala */
border-radius: 10px; /* Köşeleri yuvarla */
transition: background-color 0.3s ease; /* Hover efekti geçiş süresi */
padding: 10px 15px; /* İçerik etrafındaki boşluk */
background-color: #27293D;
color: #DDE2E6;
border: 2px solid #424649;
height: 50px;
margin-bottom: 15px;
}

.accordion-header:hover {
    background-color: #2d3047; /* Hover durumunda arka plan rengi */
}

.toggle-icon {
    width: 10px; /* Ok genişliği */
    height: 10px; /* Ok yüksekliği */
    display: flex;
    border-right: 2px solid #495057;
    border-bottom: 2px solid #495057;
    transform: translateY(-70%) rotate(45deg);
    margin-top: 10px;
}

.accordion-header .toggle-icon {
    font-size: 25px; /* İkon boyutu */
    margin-right: 10px;
}

.accordion-header:hover .toggle-icon {
    color: #000; /* Hover durumunda ikon rengi altın */
    transform: translateY(-70%) rotate(225deg);
    margin-top: 10px;
}

.accordion-header.active .toggle-icon {
    transform: translateY(-70%) rotate(225deg);
    margin-top: 10px;
}

.accordion-content {
  display: none;
  padding: 10px 15px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #27293D;
  color: #DDE2E6;
  border: 2px solid #424649;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  cursor: pointer;
}

input[type="checkbox"] {
  margin-right: 5px;
}

.filter-btn {
  padding: 8px 15px;
  width: 100%;
}

#product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch; /* Satırları sağa hizalamak için */
  width: 100%;
  margin-left: 10px;
}

/* Checkbox alanını büyütme ve düzenleme */
.server-filter {
    text-align: left; /* Tüm içeriği sola hizala */
}

.server-filter label {
    display: flex; /* Esnek kutu modeliyle içerikleri hizala */
    align-items: center; /* Checkbox ve metni dikey olarak hizala */
    padding: 10px; /* Tıklama alanını büyüt */
    cursor: pointer; /* Tıklanabilir olduğunu gösterir */
    font-size: 16px !important; /* Yazı boyutunu büyüt */
    border-radius: 10px; /* Hafif yuvarlatılmış köşeler */
    margin-bottom: 5px; /* Alt boşluk */
    transition: background-color 0.3s ease; /* Hover efekti geçiş süresi */
}

.server-filter label:hover {
    background-color: #2d3047; /* Hover durumunda arka plan rengi */
    color: #DDE2E6; /* Hover durumunda metin rengi */
}

.server-filter input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid #F74A66;
    border-radius: 4px;
    margin-right: 14px; /* Checkbox ile metin arasına 20px boşluk */
    transform: scale(1.5); /* Checkbox'ı büyüt */
    cursor: pointer; /* Tıklanabilir olduğunu gösterir */
    position: relative;
    outline: none; /* Kenarlıkları kaldır */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* Hover geçiş süresi */
}


.server-filter input[type="checkbox"]:hover {
  border-color: #F74A66;
}

.server-filter input[type="checkbox"]:checked {
  background-color: #F74A66;
  border-color: #F74A66;
}

input[type="checkbox"]:checked {
    background-color: #F74A66;
    border-color: #F74A66;
}

.server-filter input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%; /* Adjusted to move the checkmark slightly higher */
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.newest {
  weight: 37px;
}

.oldest {
  weight: 37px;
}

.price-desc {
  weight: 37px;
}

.price-asc {
  weight: 37px;
}

.os-row, .row {
  margin-left: -5px !important;
  margin-right: -5px !important;
}


.user-product-indicator img.user-icon {
    width: 20px; /* İkon genişliği */
    height: 20px; /* İkon yüksekliği */
    display: block;
}

.user-icon {
    width: 20px;
    height: 20px;
}

.online-status {
    background-color: #00ff00; /* Yeşil renk */
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Daire şeklinde */
    display: inline-block;
}

/* Kullanıcının kendi ürünü olduğunu gösteren alan */

/* Kullanıcı online durumunu gösteren ikon */
.user-status-indicator .online-status {
    background-color: #00ff00; /* Yeşil renk (online durumu) */
    width: 10px; /* Daire genişliği */
    height: 10px; /* Daire yüksekliği */
    border-radius: 50%; /* Tam daire şekli */
    display: inline-block; /* Çizgisel düzen */
    position: absolute;
    top: 10px; /* Kartın üstünden mesafe */
    left: 10px; /* Kartın solundan mesafe */
    z-index: 10; /* Kartın üzerinde görünsün */
}

/* Fiyat alanı */
.price-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #27293D; /* Siyah arka plan */
    padding: 5px 10px; /* İçerik çevresindeki boşluk */
    display: flex; /* Flex düzen */
    justify-content: space-between; /* Fiyat ve kategori bilgisini ayır */
    align-items: center; /* Dikey ortalama */
    box-sizing: border-box;
    border-top: 1px solid #424649; /* Sadece üst sınır */
    height: 50px;
}

/* Kullanıcının kendi ürününü gösteren yazı */
.user-product-indicator {
    background-color: #27293D; /* Yeşil arka plan */
    color: #DDE2E6; /* Beyaz metin */
    padding: 2px 8px; /* İçerik çevresindeki boşluk */
    border-radius: 5px; /* Köşeleri yuvarla */
    font-weight: bold; /* Kalın yazı */
    font-size: 12px; /* Yazı boyutu */
    border: 2px solid #424649;
}

/* Fiyat ve "Own" yazısını yatay hizalamak için */
.price-and-own {
    display: flex; /* Flex düzen */
    align-items: center; /* Dikey ortalama */
    gap: 10px; /* Fiyat ve yazı arasında boşluk */
}