/* =========================================================================
   Clients / Brand Marquee Slider
   Seamless infinite marquee of trusted luxury & institutional partners
   ========================================================================= */

.clients {
  position: relative;
  z-index: 4;
  padding: clamp(2.2rem, 3.8vh, 3.2rem) 0 clamp(2.2rem, 3.8vh, 3.2rem);
  background: var(--paper);
  border-top: 1px solid rgba(201, 154, 75, 0.16);
  border-bottom: 1px solid rgba(20, 19, 17, 0.05);
  box-shadow: inset 0 8px 18px -10px rgba(20, 19, 17, 0.025);
  overflow: hidden;
}

.clients__inner {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 var(--edge);
  text-align: center;
  margin-bottom: clamp(1.1rem, 2vh, 1.6rem);
}

.clients__title {
  display: inline-block;
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 auto;

  /* Varaktan siyaha lüks editoryal gradyen */
  background: linear-gradient(
    115deg,
    #141312 0%,     /* Derin editoryal siyah */
    #2e271c 12%,    /* Siyah-bronz geçiş */
    #7c571c 25%,    /* Koyu varak */
    #c79848 38%,    /* Parlak varak altın */
    #edd49e 50%,    /* Varak altın ışıltı tepe noktası */
    #c79848 62%,    /* Varak altın */
    #704d16 75%,    /* Koyu varak */
    #24201a 88%,    /* Siyah-bronz gölge */
    #141312 100%    /* Derin editoryal siyah */
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: clientsVarakBlackShimmer 12s ease-in-out infinite alternate;
  filter: drop-shadow(0 1px 1px rgba(20, 19, 17, 0.12));
}

@keyframes clientsVarakBlackShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Multi-Row Infinite Marquees */
.clients-marquees {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vh, 1.35rem);
}

.clients-marquee {
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  padding: 0.35rem 0;
}

.clients-marquee__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(3rem, 6vw, 6rem);
  padding-right: clamp(3rem, 6vw, 6rem);
  animation: marqueeScroll 68s linear infinite;
  will-change: transform;
}

.clients-marquee__track--reverse {
  animation: marqueeScrollReverse 72s linear infinite;
}

.clients-marquee:hover .clients-marquee__track {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes marqueeScrollReverse {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Individual Brand Logo Item */
.clients-marquee__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  flex-shrink: 0;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s var(--ease-spring);
  cursor: pointer;
}

.clients-marquee__item:hover {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 4px 14px rgba(20, 19, 17, 0.08));
  transform: translateY(-3px) scale(1.05);
}

.clients-marquee__item img,
.clients-marquee__item svg {
  height: clamp(34px, 4.2vw, 46px);
  max-height: 48px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Dairesel / armalı logolar için optik denge */
.clients-marquee__item--badge img,
.clients-marquee__item--badge svg {
  height: clamp(38px, 4.8vw, 50px);
  max-height: 52px;
}

@media (prefers-reduced-motion: reduce) {
  .clients-marquee__track {
    animation-duration: 80s;
  }
  .clients-marquee__track--reverse {
    animation-duration: 90s;
  }
}