html, body {
  overflow-x: hidden !important;
  width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Ana Sayfa ve Genel Ayarlar (İsteğe bağlı, kartları merkezlemek için) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f9; /* Açık gri arkaplan */
}
/* Eklenen CSS: Otomatik Kaydırma Animasyonu */

.kullanici-yorumlari,
.kullanici-yorumlari .container,
.marquee-wrapper {
  max-width: 100vw;
  overflow-x: clip;     /* destek yoksa alttaki hidden devreye girer */
  overflow-x: hidden;
}
.marquee-track {
  display: flex;        /* inline-flex yerine */
  width: max-content;   /* içerik kadar genişle */
}

.testimonial {
  flex: 0 0 auto;       /* kartlar sıkışmasın */
}

/* 1. Kaydırma Hızı ve Davranışı */
.marquee-track {
    display: inline-flex;
    animation: scroll-left 40s linear infinite; /* Animasyon hızı ve döngüsü */
    padding-right: 15px; /* Son karttan sonra boşluk */
    /* Kaydırma alanının normal davranışı */
}

/* Yorum kartları üzerine gelindiğinde animasyonu durdurma */
.marquee-track:hover {
    animation-play-state: paused;
}

/* 2. Kaydırma Animasyonu (Keyframes) */
@keyframes scroll-left {
    from {
        transform: translateX(0); /* Başlangıç: Başlangıç pozisyonunda */
    }
    to {
        /* Bitiş: Tüm içeriğin genişliği kadar sola kaydır */
        /* Bu değer, tüm yorum kartlarının toplam genişliğidir. */
        /* Tüm içeriğin kaymasını sağlamak için yaklaşık %50'den başlatılır. */
        transform: translateX(-50%); 
    }
}
/* Yorum Kartı (article.testimonial) Stilini Uygulama */
.testimonial {
    /* Görseldeki gibi kart görünümü */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px 25px; /* İç boşluk */
    margin: 15px; /* Kartlar arası boşluk */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Çok hafif gölge */
    border: 1px solid #eee; /* Hafif sınır */
    width: 300px; /* Kart genişliği */
    position: relative; /* Tırnak işareti için konum */
    overflow: hidden; /* Taşmayı engellemek için */
}

/* 1. Büyük Tırnak İşareti ("") */
.testimonial::before {
    content: '“'; /* Sol tırnak işareti */
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 150px; /* Çok büyük font */
    color: rgba(0, 150, 255, 0.1); /* Açık mavi ve yarı saydam */
    font-weight: 900;
    line-height: 1;
    z-index: 1; /* Diğer içeriğin arkasında kalması için */
}

/* 2. Başlık (Fotoğraf ve İsim) Alanı */
.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative; /* Z-index'i yükseltir */
    z-index: 2;
}

.testimonial-header img {
    /* Danışan Fotoğrafı Stili */
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #ffc107; /* Sarı kenarlık (Hüseyin Bey görselindeki gibi) */
}

.testimonial-header .info h4 {
    /* İsim (Hüseyin Bey) */
    margin: 0;
    font-size: 1.1em;
    color: #333;
    font-weight: 600;
}

.testimonial-header .info span {
    /* Danışan Etiketi */
    font-size: 0.9em;
    color: #6c757d;
}

/* 3. Etiket (Bireysel Terapi) */
.tag {
    /* Görseldeki açık mavi arka plan ve kenarlık */
    display: inline-block;
    background-color: #e6f7ff; /* Çok açık mavi */
    color: #007bff; /* Mavi metin */
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
    margin-bottom: 25px;
}

/* 4. Yıldız Puanlama */
.stars {
    color: #ffc107; /* Sarı renk (Görseldeki gibi) */
    font-size: 1.3em;
    letter-spacing: 3px; /* Yıldızlar arası boşluk */
    margin-bottom: 20px;
    line-height: 1;
}

/* 5. Yorum Metni */
.testimonial p {
    font-size: 1em;
    color: #495057; /* Koyu ama yumuşak gri */
    line-height: 1.6;
    margin: 0;
}
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}
/* Dış wrapper'ı kaymayı engellemek için düzenliyoruz */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex; /* Flexbox'tan faydalanıyoruz */
    justify-content: center;
}

/* .marquee-track'ı hareket ettireceğiz, ama taşmaması için %100 genişlik */
.marquee-track {
    display: flex; /* Yorumlar birbirinin ardına sıralanacak */
    animation: scroll-left 40s linear infinite;
    width: 100%; /* Yalnızca görünür alanda kayar */
}

/* Kaydırma animasyonu */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%); /* Tüm içeriğin kaymasını sağlıyoruz */
    }
}
@media (max-width: 768px) {
    /* Bu, mobilde sağa kaymayı önleyecek */
    body {
        overflow-x: hidden; /* Sağdan taşmayı engelliyoruz */
    }

    /* Animasyonu hızlandırabiliriz veya yavaşlatabiliriz */
    .marquee-track {
        animation: scroll-left 30s linear infinite; /* Hızı kısaltıyoruz */
    }
}
.marquee-track {
    pointer-events: none; /* Sürüklemeyi engelliyoruz */
}