/* ==========================================================================
   ENTEGRASYONLAR — resmi kurum logoları, sonsuz kayan bant
   ========================================================================== */

.integrations {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
}

.integrations__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding-block: 28px;
}

.integrations__label {
  /* Büyük harf + harf aralığı nedeniyle ~20 karakterde iki satıra bölünür */
  max-width: calc(20ch + 40px);
  padding-right: 40px;
  border-right: 1px solid var(--line);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* JS içeriği bir kez kopyalar; iz -%50 kayınca başa sarar ve geçiş fark edilmez */
.marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  padding-right: 64px;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track img {
  width: auto;
  height: 25px; /* kaynak logoların yüksekliği ~25–26px; büyütülürse bulanıklaşır */
  filter: grayscale(1) contrast(1.1);
  opacity: .62;
  transition: filter .3s, opacity .3s;
}
.marquee__track img.logo-gib { height: 40px; }
.marquee__track li:hover img { filter: none; opacity: 1; }

@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; row-gap: 24px; }
}

@media (max-width: 720px) {
  .integrations__inner { grid-template-columns: 1fr; gap: 18px; padding-block: 24px; }
  .integrations__label { max-width: none; padding-right: 0; border-right: 0; text-align: center; }
  .marquee__track { gap: 44px; padding-right: 44px; }
  .marquee__track img { height: 24px; }
}