/* ═══════════════════════════════════════════════════════════
   REFERANSLAR — müşteri logoları (includes/client_logos.php)
   'marquee': tüm genişliklerde (telefon ve html.lite dahil) ters yönlerde akan 2 şerit.
     Yalnızca transform animasyonu (kompozitörde, ana iş parçacığı karede iş yapmaz); kopya grupla kesintisiz döngü.
     Kenar solması maske ile DURAĞAN satırda (hareketli öğede değil). Hücreler şeffaf (zeminsiz, ince çizgi);
     logolar sitenin koyu zemininde orijinal renkleriyle (filtre yok).
     Bölüm ekran dışındayken / sekme gizliyken duraklar (.is-paused, satır içi betik); dokunup basılı tutunca durur.
     prefers-reduced-motion: animasyon yok → parmakla kaydırılan şeritler (tüm logolar).
   'grid': durağan ızgara (referanslar.php).
   Blur / backdrop-filter kullanılmaz.
   ═══════════════════════════════════════════════════════════ */

.rm-refs { padding-block: 90px; }
.rm-refs .section-head { margin-bottom: 48px; }
.rm-refs ul { list-style: none; margin: 0; padding: 0; }

/* ── Logo hücresi: ŞEFFAF (zemin/plaka yok), yalnızca ince çizgi; logo ORİJİNAL renkleriyle (filtre yok) ── */
.rm-ref {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 170px; height: 76px; padding: 0 16px;
    box-sizing: border-box;
    border-radius: 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .07);
    color: #f2f2f6;
    transition: border-color .35s var(--ease);
}
.rm-ref img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 44px;
    object-fit: contain;
    transition: transform .35s var(--ease);
}
.rm-ref--tall img { max-height: 58px; }
.rm-ref--wide img { max-height: 36px; }

/* Ad yazısı (logosu olmayan müşteri) */
.rm-ref-word {
    font-family: var(--font-head); font-weight: 700;
    font-size: .78rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
    text-align: center; color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

a.rm-ref { -webkit-tap-highlight-color: transparent; }
a.rm-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (hover: hover) {
    .rm-ref:hover { border-color: rgba(255, 255, 255, .16); }
    .rm-ref:hover img { transform: translateY(-2px); }
}

/* ── Şeritler ── */
.rm-refs-marquee { display: grid; gap: 14px; }
.rm-refs-row {
    overflow: hidden;
    padding-block: 6px;                       /* hover'daki translateY(-3px) kırpılmasın */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.rm-refs-track {
    display: flex; width: max-content;
    animation: rm-refs-fwd var(--rm-refs-dur, 48s) linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
.rm-refs-row--rev .rm-refs-track {
    animation-name: rm-refs-rev;
    animation-delay: calc(var(--rm-refs-dur, 48s) * -.37);   /* 2. şerit 1.'nin aynası gibi durmasın */
}
.rm-refs-group { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.rm-refs ul.rm-refs-group { padding-right: 14px; }   /* .rm-refs ul { padding: 0 } ezmesin: kopya grubun ek yeri */

/* Duraklatma: ekran dışı / sekme gizli (JS), fareyle üzerinde, klavye odağı, dokunup basılı tutma */
.rm-refs-marquee.is-paused .rm-refs-track,
.rm-refs-row.is-held .rm-refs-track { animation-play-state: paused; }
@media (hover: hover) {
    .rm-refs-row:hover .rm-refs-track,
    .rm-refs-row:focus-within .rm-refs-track { animation-play-state: paused; }
}
.rm-refs-row:has(a:focus-visible) .rm-refs-track { animation-play-state: paused; }

@keyframes rm-refs-fwd { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes rm-refs-rev { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ── Durağan ızgara (referanslar.php) ── */
.rm-refs-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 1080px;
}
.rm-refs ul.rm-refs-grid { margin-inline: auto; }
.rm-refs-grid .rm-ref { width: 100%; height: 84px; padding: 0 16px; }
.rm-refs-grid .rm-ref img { max-width: 92%; }
.rm-refs-grid .rm-ref-word { white-space: normal; }

@media (max-width: 1024px) {
    .rm-refs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

html.lite .rm-ref, html.lite .rm-ref img { transition: none; }

/* ── Tablet / telefon: aynı şeffaf hücreler, 130×58 ── */
@media (max-width: 768px) {
    .rm-refs { padding-block: 64px; }
    .rm-refs .section-head { margin-bottom: 32px; }
    .rm-refs-grid { gap: 10px; }
    .rm-ref { width: 130px; height: 58px; padding: 0 10px; border-radius: 12px; }
    .rm-ref img { max-height: 34px; }
    .rm-ref--tall img { max-height: 44px; }
    .rm-ref--wide img { max-height: 28px; }
    .rm-ref-word { font-size: .62rem; letter-spacing: .06em; }

    /* Şeritler ekran kenarına kadar taşar */
    .rm-refs-marquee { gap: 10px; margin-inline: calc(50% - 50vw); }
    .rm-refs-row {
        padding-block: 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    }
    .rm-refs-track { animation-duration: var(--rm-refs-dur-m, var(--rm-refs-dur, 30s)); }
    .rm-refs-row--rev .rm-refs-track { animation-delay: calc(var(--rm-refs-dur-m, var(--rm-refs-dur, 30s)) * -.37); }
    .rm-refs-group { gap: 10px; }
    .rm-refs ul.rm-refs-group { padding-right: 10px; }
    .rm-refs-group > li.rm-refs-pad { display: none; }       /* dar ekranda dolgu tekrarı gerekmez */
}
@media (max-width: 560px) {
    .rm-refs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .rm-refs-grid .rm-ref { width: 100%; height: 66px; padding: 0 12px; }
}

/* ── Hareket azaltma: animasyon yok → parmakla kaydırılan şeritler (her logo bir kez) ── */
@media (prefers-reduced-motion: reduce) {
    .rm-refs-row {
        overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .rm-refs-row::-webkit-scrollbar { display: none; }
    .rm-refs-track, .rm-refs-row--rev .rm-refs-track { animation: none; will-change: auto; transform: none; padding-inline: 6%; }
    .rm-refs-group[aria-hidden="true"], .rm-refs-group > li.rm-refs-pad { display: none; }
    .rm-refs-group > li { scroll-snap-align: center; }
    .rm-ref, .rm-ref img { transition: none; }
}

/* ── Alt bağlantı ── */
.rm-refs-more { text-align: center; margin-top: 36px; }
.rm-refs-more a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 600; font-size: .9rem;
    color: var(--accent);
    transition: gap .3s var(--ease), color .3s;
}
.rm-refs-more a:hover { gap: 12px; color: var(--primary-2); }
.rm-refs-more a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 768px) { .rm-refs-more { margin-top: 28px; } }