section.references
{
    padding: 3rem;
    position: relative;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(var(--offset));
    --move-final: calc(-100% + var(--offset));
}

section.references > h1
{
    font-size: 8vw;
    letter-spacing: -0.4vw;
    padding-left: 5%;
    line-height: 1;
    padding-bottom: 3%;
}



section.references > div.content
{
    padding-top: 10%;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10vw;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 30s linear infinite;
}

section.references > div.content:hover
{
    animation-play-state: paused;
}

section.references > div.content img
{
    height: 60px;
    transition: scale 0.35s ease;
}

section.references > div.content img.ybelediyesi,
section.references > div.content img.cty,
section.references > div.content img.ti,
section.references > div.content img.osi
{
    height: 150px;
}

section.references > div.content img.u,
section.references > div.content img.disa
{
    height: 100px;
}

section.references > div.content img.ygroup
{
    height: 125px;
}


section.references > div.content img:hover
{
    scale: 1.25;
}


@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }


    85% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--move-final), 0, 0);
        opacity: 0;
    }
}


@media screen and (max-width: 720px)
{
    section.references
    {
        padding: 1rem;
    }

    section.references > div.slider
    {
        border-radius: 0;
        box-shadow: none;
    }

    section.references > div.content img
    {
        scale: 0.6;
    }

    section.references > div.content img:hover
    {
        scale: 0.75;
    }

    section.references > div.content
    {
        gap: 0;
        transform: translate3d(0, var(--move-initial), 0);
        flex-direction: column;
        width: 100%;
        height: 70vh;
        animation: marquee 7s linear infinite;
    }

    section.references > div.content img.besa,
    section.references > div.content img.beyturk,
    section.references > div.content img.cevlan,
    section.references > div.content img.y
    {
        height: 60px;
    }

    section.references
    {
        padding: 0;
        --offset: 20vh;
        --move-final: calc(-125% + var(--offset));
    }

    @keyframes marquee {
        0% {
            transform: translate3d(0, var(--move-initial), 0);
            opacity: 0;
        }

        15% {
            opacity: 1;
        }


        85% {
            opacity: 1;
        }
        100% {
            transform: translate3d(0, var(--move-final), 0);
            opacity: 0;
        }
    }


}