/* Features Marquee - Sürekli ve kesintisiz yatay kaydırma */
/* Bu stil dosyası sadece Features Section animasyonu için kullanılır */

.marquee-container {
    padding: 30px;
    overflow: hidden;
    position: relative;
}

.marquee-track {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    width: max-content; /* içerik genişliği kadar olsun */
    will-change: transform;
    animation: marquee-left 40s linear infinite;
}

/* Kartları yatay düzende düzgün göstermek için sabit genişlik */
.marquee-track .feature-card {
    flex: 0 0 320px; /* sabit kart genişliği */
    margin: 0; /* grid boşluklarına gerek yok */
}

/* Kenarlarda içerik taşmasını yumuşatmak isterseniz mask kullanılabilir (opsiyonel) */
/* .marquee-container { mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); } */

@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* içerik iki kez kopyalandığı için yarısı kadar kaydır */
}

/* Responsive ayarlar */
@media (max-width: 1024px) {
    .marquee-track { animation-duration: 45s; }
}

@media (max-width: 768px) {
    .marquee-track { animation-duration: 50s; }
    .marquee-track .feature-card { flex-basis: 280px; }
}

@media (max-width: 480px) {
    .marquee-track { animation-duration: 55s; }
    .marquee-track .feature-card { flex-basis: 240px; }
}

/* Kenarlarda yumuşak fade/blur efekti - mask + fallback overlay */
.features .marquee-container {
    --fade-edge: 80px; /* masaüstü için kenar fade genişliği */
    position: relative;
    overflow: hidden; /* içerik taşmasını gizle */
    /* Destekleyen tarayıcılarda gerçek maskeleme */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-edge), #000 calc(100% - var(--fade-edge)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-edge), #000 calc(100% - var(--fade-edge)), transparent);
}

/* Fallback: mask desteklemeyen tarayıcılar için beyaz overlay ile görsel fade */
.features .marquee-container::before,
.features .marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: var(--fade-edge);
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* Arka plan çok açık tonlarda olduğu için beyaz geçiş doğal durur */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.features .marquee-container::before { left: 0; }
.features .marquee-container::after { right: 0; transform: scaleX(-1); }

/* Track overlay altında kalmalı */
.features .marquee-track { position: relative; z-index: 1; }

/* Responsive: fade genişliğini küçült */
@media (max-width: 1024px) {
    .features .marquee-container { --fade-edge: 64px; }
}
@media (max-width: 768px) {
    .features .marquee-container { --fade-edge: 48px; }
}
@media (max-width: 480px) {
    .features .marquee-container { --fade-edge: 32px; }
}