/* Plugin wrapper container'a MUTLAKA full genişlikte yayılır */
.anka-logo-showcase {
  width: 100% !important;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Flexbox tabanlı grid: son satırdaki eksik logolar bütün olarak ortalanır.
   Container'a full genişlikte yayılır, gap'larla birlikte tam doldurur. */
.anka-logo-showcase .anka-logo-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-column-gap: var(--anka-column-gap, 20px);
  -moz-column-gap: var(--anka-column-gap, 20px);
  column-gap: var(--anka-column-gap, 20px);
  row-gap: var(--anka-row-gap, 20px);
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Öğe genişliği = (100% - toplam boşluk) / sütun sayısı.
   NOT: calc'i "flex" shorthand içinde DEĞİL, width + flex longhand olarak veriyoruz.
   Bazı tarayıcılar (özellikle bazı Safari/WebKit sürümleri) shorthand içindeki
   calc(var()) ifadesini geçersiz sayıp öğeyi içerik boyutuna düşürür → logolar
   ortada/kenarda kümelenir. width ile bu davranış her yerde kararlıdır.
   
   min-width ile minimum genişlik garantisi: gap çok büyükse ve hesaplanan genişlik
   60px'den küçükse, logo minimum 60px kalır ve wrap olur (alt satıra geçer).
   Böylece container'a sığmayan logolar aşağıya sarılır ve son satır ortalı görünür. */
.anka-logo-showcase .anka-logo-grid > .anka-logo-item {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: calc((100% - (var(--anka-columns, 4) - 1) * var(--anka-column-gap, 20px)) / var(--anka-columns, 4));
  min-width: min(60px, 100%);
  max-width: 100%;
}

.anka-logo-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.28s ease, opacity 0.28s ease;
  transition: transform 0.28s ease, opacity 0.28s ease;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.anka-logo-item-inner {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.anka-logo-image-wrap {
  width: 100%;
  min-height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.anka-logo-image-wrap img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 120px;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.anka-logo-title {
  width: 100%;
  text-align: center;
  line-height: 1.4;
}

.anka-logo-showcase.hover-zoom .anka-logo-item:hover {
  -webkit-transform: scale(1.04) translateZ(0);
  transform: scale(1.04) translateZ(0);
}

.anka-logo-showcase.hover-opacity .anka-logo-item:hover {
  opacity: 0.75;
}

.anka-logo-showcase.hover-lift .anka-logo-item:hover {
  -webkit-transform: translateY(-6px) translateZ(0);
  transform: translateY(-6px) translateZ(0);
}

.anka-logo-showcase.is-carousel .anka-logo-swiper {
  width: 100% !important;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.anka-logo-showcase.is-carousel .swiper-wrapper {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.anka-logo-showcase.is-carousel .swiper-slide {
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.anka-logo-showcase-empty {
  padding: 12px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  text-align: center;
}

@media (max-width: 1024px) {
  .anka-logo-showcase .anka-logo-grid > .anka-logo-item {
    width: calc((100% - (var(--anka-columns-tablet, 3) - 1) * var(--anka-column-gap, 20px)) / var(--anka-columns-tablet, 3));
    min-width: min(60px, 100%);
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .anka-logo-showcase .anka-logo-grid > .anka-logo-item {
    width: calc((100% - (var(--anka-columns-mobile, 2) - 1) * var(--anka-column-gap, 20px)) / var(--anka-columns-mobile, 2));
    min-width: min(50px, 100%);
    max-width: 100%;
  }
}

/* Safari iOS fixes */
@supports (-webkit-touch-callout: none) {
  .anka-logo-showcase,
  .anka-logo-showcase * {
    -webkit-text-size-adjust: 100%;
  }

  .anka-logo-showcase .swiper-wrapper,
  .anka-logo-showcase .swiper-slide,
  .anka-logo-showcase .anka-logo-item {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .anka-logo-showcase .anka-logo-item {
    -webkit-font-smoothing: antialiased;
  }
}