.portfolio-title {
    font-size: 15px;
    color: #232323;
    top: 0px;
    text-align: justify;
    line-height: 1.3;
    transition: all 0.3s ease !important;
}

/* Sadece data-filter="*" olan link */
.portfolio-filter a[data-filter="*"].js-not-ready {
    color: #828282 !important;
    border-bottom: 0px !important;
}

/* Sadece data-filter="*" olan link */
.portfolio-filter a[data-filter="*"].js-not-ready:hover {
    color: #232323 !important;
    border-bottom: 1px solid #232323 !important;
}

.portfolio-country {
    font-size: 14px;
    color: #939393;
    text-align: left;
    top: 0px;
    line-height: 1.3;
    transition: all 0.3s ease !important;
}

.potfolio-title-wrapper {
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: left;
    color: black;
    padding-top: 0.3em;
}

.portfolio-image {
    position: relative;
    width:100%;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.portfolio-image img {
    position: absolute;
    inset: 0; /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portfolio-image .div-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Eski Safari için fallback istersen: */
    @supports not (aspect-ratio: 1 / 1) {
        .portfolio-image::before {
            content: "";
            display: block;
            padding-top: 100%; /* genişlik %100 → kare */
        }
    }
}

.div-gradient {
    transition: opacity 0.2s linear;
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.6) 0%, /* altta daha koyu */
    rgba(0, 0, 0, 0.3) 40%, /* ortalarda yarı şeffaf */
    rgba(0, 0, 0, 0) 80% /* yukarıda tamamen şeffaf */
    );
}

#references-title {
    padding: 3rem 0rem;
}

@media( min-width: 576px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
        font-size: 14px;
    }

    .portfolio-country {
        font-size: 13px;
    }
}

@media( min-width: 620px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
/*        font-size: 12px;*/
    }

    .portfolio-country {
/*        font-size: 11px;*/
    }
}

@media( min-width: 700px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
        font-size: 14px;
    }

    .portfolio-country {
        font-size: 13px;
    }
}

@media( min-width: 850px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
        font-size: 17px;
    }

    .portfolio-country {
        font-size: 16px;
    }
}

@media( min-width: 991px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
/*        font-size: 13px;*/
    }

    .portfolio-country {
/*        font-size: 12px;*/
    }
}

@media( min-width: 1199px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
/*        font-size: 12px;*/
    }

    .portfolio-country {
/*        font-size: 11px;*/
    }
}

@media( min-width: 1400px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
/*        font-size: 14px;*/
    }

    .portfolio-country {
/*        font-size: 13px;*/
    }
}

@media( min-width: 1600px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
/*        font-size: 16px;*/
    }

    .portfolio-country {
/*        font-size: 15px;*/
    }
}

@media( min-width: 1700px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
/*        font-size: 17px;*/
    }

    .portfolio-country {
/*        font-size: 16px;*/
    }
}

@media( min-width: 1900px ) {
    #references-title {
        padding: 2rem 0.6rem;
    }

    .portfolio-title {
        font-size: 20px;
    }

    .portfolio-country {
        font-size: 19px;
    }
}

/* Kapsayıcı flex zaten, genişliğini sabitleyelim */
.potfolio-title-wrapper {
    width: 100%;
}

/* Title / Country: kutudan fazla genişleyemesin */
.portfolio-title,
.portfolio-country {
    position: relative;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

    /* Kayacak olan iç span */
    .portfolio-title .scroll-inner,
    .portfolio-country .scroll-inner {
        display: inline-block;
    }

    /* Sadece taşanlarda açılacak animasyon */
    .portfolio-title.has-marquee .scroll-inner,
    .portfolio-country.has-marquee .scroll-inner {
        animation-name: marquee-x;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: var(--marquee-duration, 8s);
    }

/* X ekseninde sağa–sola kayma */
@keyframes marquee-x {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--marquee-distance, 40px)));
    }
}