/* references.css — sonsuz kayan slogan bandı
   ------------------------------------------------------------
   Eskiden marka logoları kayıyordu; artık tek satırlık büyük
   slogan yazısı kayıyor (includes/references.php).
   Marka logoları: partners bölümü (sections.css içinde).
   ------------------------------------------------------------ */

.references-section {
    background: #fff;
    padding: 40px 0 34px;
    overflow: hidden;
}

.marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
    flex-shrink: 0;
    padding-inline: clamp(20px, 3vw, 45px);
    animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* --- Kayan yazı --- */
.marquee--text .marquee-track { gap: clamp(40px, 6vw, 90px); }
.marquee-text {
    white-space: nowrap;
    font-size: clamp(18px, 2.1vw, 30px);
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #c9c9c9;
    text-transform: uppercase;
    transition: color var(--dur-fast);
}
.marquee--text:hover .marquee-text { color: #a8a8a8; }

/* --- (Eski) logo bandı için hâlâ geçerli stiller --- */
.marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    white-space: nowrap;
    color: #b9b9b9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity var(--dur-fast), filter var(--dur-fast);
}
.marquee-item:hover { opacity: 1; filter: grayscale(0); }
.marquee-item img { height: 100%; width: auto; object-fit: contain; }

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

@media (max-width: 650px) {
    .references-section { padding: 26px 0 22px; }
    .marquee-text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}