@font-face {
    font-family: 'Gilroy-Black';
    src: url('/gilroy/Gilroy-Black.woff') format('woff'),
         url('/gilroy/Gilroy-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap; 
}
@font-face {
    font-family: 'Gilroy-Medium';
    src: url('/gilroy/Gilroy-Medium.woff') format('woff'),
         url('/gilroy/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap; 
}


.references-section {
    background-color: #f8f8f8;
    padding: 60px 0;
    overflow: hidden; 
}
.references-container {
    max-width: 100%;
    margin: 0 auto;
}


.logo-carousel {
    display: flex;
    cursor: grab;
    user-select: none; 
    transform: translateX(0); 
    will-change: transform; 
}


.logo-carousel.scrolling {
    animation-name: scroll-left;
    animation-duration: 20s; 
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.logo-carousel.scrolling:hover {
    animation-play-state: paused;
}

/* Sürükleme aktifken imleci değiştir */
.logo-carousel:active {
    cursor: grabbing;
}


.logo-item {
    
    min-width: calc(20% - 20px); 
    flex-shrink: 0;
    height: 140px;
    
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 0 10px; 
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    max-width: 80%; 
    max-height: 80%;
    object-fit: contain;
    
    -webkit-user-drag: none;
    user-select: none;
}


@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        
        transform: translateX(var(--scroll-width)); 
    }
}


@media (max-width: 768px) {
    .references-section {
        padding: 40px 0;
    }
    .logo-carousel.scrolling {
        animation-duration: 15s;
    }
    .logo-item {
        /* Mobil: Yaklaşık 2.5 logo sığsın */
        min-width: calc(40% - 10px); 
        height: 100px;
        margin: 0 5px;
    }
}