/* === v2: Anasayfa Markalar — 6'lı Kare Grid (Web + Mobil) === */
.brands-block .brands-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 12px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* Kare hücre */
.brands-block .brand-cell {
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.brands-block .brand-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Logo kırpılmadan sığsın */
.brands-block .brand-cell img {
  max-width: 72% !important;
  max-height: 72% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Karanlık mod kenarlığı yumuşat */
@media (prefers-color-scheme: dark) {
  .brands-block .brand-cell {
    background: #111 !important;
    border-color: rgba(255,255,255,.08) !important;
  }
}

/* Küçük ekranlarda da 6 sütun kalsın; sadece aralık/ölçek ayarı yapalım */
@media (max-width: 576px) {
  .brands-block .brands-grid {
    gap: 10px !important;
    padding: 0 8px !important;
  }
  .brands-block .brand-cell img {
    max-width: 80% !important;
    max-height: 80% !important;
  }
}

/* === v3: /markalar Sayfası — 6'lı Kare Grid (Web + Mobil) === */
.brands-page .brands-grid--page {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 12px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* Kare hücreler */
.brands-page .brands-grid--page .brand-cell {
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  aspect-ratio: 1 / 1 !important; /* Kare */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.brands-page .brands-grid--page .brand-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Logolar kırpılmadan sığsın */
.brands-page .brands-grid--page .brand-cell img {
  max-width: 72% !important;
  max-height: 72% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Karanlık mod desteği */
@media (prefers-color-scheme: dark) {
  .brands-page .brands-grid--page .brand-cell {
    background: #111 !important;
    border-color: rgba(255,255,255,.08) !important;
  }
}

/* Mobil görünüm: 6 sütun devam */
@media (max-width: 576px) {
  .brands-page .brands-grid--page {
    gap: 10px !important;
    padding: 0 8px !important;
  }
  .brands-page .brands-grid--page .brand-cell img {
    max-width: 80% !important;
    max-height: 80% !important;
  }
}

/* === Fix: "Daha Fazlasını Gör" butonu === */
.brands-block .brands-more {
  /* buton grid içinde ise tüm satırı kaplasın */
  grid-column: 1 / -1 !important;
  text-align: center !important;
  margin-top: 12px !important;
}

.brands-block .brands-more a,
.brands-block .btn-more {
  display: inline-block !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: #231F20 !important;  /* istersen #ED1C24 yap */
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: 0 !important;
}

.brands-block .brands-more a:hover,
.brands-block .btn-more:hover {
  opacity: .9;
}

/* === Marka kutularını optimize et (web) === */
.brands-block .brands-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 12px !important;
}

/* Daha küçük kare kutular */
.brands-block .brand-cell {
  aspect-ratio: 1 / 1 !important;
  max-width: 150px;             /* kutu boyutunu küçülttük */
  max-height: 150px;
  margin: 0 auto;
  background: transparent !important;  /* beyaz zemin görüntüsü yok */
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logolar kutuya daha iyi otursun */
.brands-block .brand-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  display: block;
  padding: 0 !important;
  margin: 0 auto;
}

/* Mobilde biraz daha büyük logolar */
@media (max-width: 576px) {
  .brands-block .brand-cell {
    max-width: 80px;
    max-height: 80px;
  }
}

/* === Web için marka logolarını 150x150 px yap === */
.brands-block .brands-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  padding: 0 12px !important;
  justify-content: center;
  align-items: center;
}

/* Kare hücreler: 150x150 */
.brands-block .brand-cell {
  width: 150px !important;
  height: 150px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Logolar kutuya tam otursun */
.brands-block .brand-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  display: block;
}

/* Mobilde logolar daha küçük (isteğe bağlı) */
@media (max-width: 576px) {
  .brands-block .brand-cell {
    width: 100px !important;
    height: 100px !important;
  }
  .brands-block .brand-cell img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* === Markalar — 6'lı kare grid (web + mobil) === */
.brands-block .brands-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  padding: 0 8px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-items: center !important; /* Hücreleri ortala */
  align-items: center !important;
}

/* Kare hücreler — web boyutu */
.brands-block .brand-cell {
  width: 150px !important;
  height: 150px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Logolar kutuya taşmadan otursun */
.brands-block .brand-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  display: block !important;
}

/* === Mobil görünüm: 6 sütun + logolar 75x75 === */
@media (max-width: 576px) {
  .brands-block .brand-cell {
    width: 75px !important;
    height: 75px !important;
  }

  .brands-block .brand-cell img {
    width: 100% !important;
    height: 100% !important;
  }

  /* Mobilde grid taşmasını engelle */
  .brands-block .brands-grid {
    gap: 8px !important;
    padding: 0 4px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* === Markalar — Web: 6 sütun, Mobil: 4 sütun === */
.brands-block .brands-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important; /* Web için 6 sütun */
  gap: 14px !important;
  padding: 0 8px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-items: center !important;
  align-items: center !important;
}

/* Kare hücreler — web boyutu */
.brands-block .brand-cell {
  width: 150px !important;
  height: 150px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Logolar kutuya taşmadan otursun */
.brands-block .brand-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  display: block !important;
}

/* === Mobil görünüm: 4 sütun + logolar 75x75 === */
@media (max-width: 576px) {
  .brands-block .brands-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* Mobilde 4 sütun */
    gap: 10px !important;
    padding: 0 4px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .brands-block .brand-cell {
    width: 75px !important;
    height: 75px !important;
  }

  .brands-block .brand-cell img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* === Anasayfa & /markalar sayfası — Web: 6 sütun, Mobil: 4 sütun === */
.brands-block .brands-grid,
.brands-page .brands-grid--page {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  padding: 0 8px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-items: center !important;
  align-items: center !important;
}

.brands-block .brand-cell,
.brands-page .brands-grid--page .brand-cell {
  width: 150px !important;
  height: 150px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.brands-block .brand-cell img,
.brands-page .brands-grid--page .brand-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  display: block !important;
}

/* Mobil görünüm: 4 sütun + logolar 75x75 */
@media (max-width: 576px) {
  .brands-block .brands-grid,
  .brands-page .brands-grid--page {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding: 0 4px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .brands-block .brand-cell,
  .brands-page .brands-grid--page .brand-cell {
    width: 75px !important;
    height: 75px !important;
  }

  .brands-block .brand-cell img,
  .brands-page .brands-grid--page .brand-cell img {
    width: 100% !important;
    height: 100% !important;
  }
}