/* =====================================================================
   LikedWin — Müşteri Yorumları
   3 sütun dikey sonsuz kayar (kartlar 2x kopyalanır), üst/alt fade maske.
   (shadcn/motion React bileşeninin bizim PHP + saf CSS yapımıza uyarlaması.)
   site.css değişkenlerini kullanır.
   ===================================================================== */

.tstm {
    position: relative;
    padding: clamp(52px, 6vw, 92px) 0;
    background: var(--bg);
    overflow: hidden;
}

/* ---------- Başlık (görünürken yumuşak yükselir) ---------- */
.tstm__head {
    max-width: 560px; margin: 0 auto; text-align: center;
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
.tstm.is-visible .tstm__head { opacity: 1; transform: none; }

/* Rozet — diğer bölüm rozetleriyle (neden/karşılaştırma/SSS) aynı dil */
.tstm__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 15px 6px 7px; margin-bottom: 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    border: 1px solid var(--brand-line);
    box-shadow: 0 4px 14px -6px rgba(37, 68, 216, .28), inset 0 1px 0 #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--brand);
}
.tstm__eyebrow i {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 6px;
    background: var(--brand-soft); color: var(--brand); font-size: 11px;
}
.tstm__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; line-height: 1.12;
    letter-spacing: -.03em; color: var(--ink); margin: 0;
}
.tstm__sub {
    font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; color: var(--muted);
    font-weight: 500; margin: 16px auto 0; max-width: 460px;
}

/* ---------- 3 sütun + üst/alt fade maske ---------- */
.tstm__cols {
    display: flex; justify-content: center; gap: 24px;
    margin-top: clamp(34px, 4vw, 52px);
    max-height: 740px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
/* Sütunlar container'ı doldurur (üstteki compare bölümüyle aynı genişlik: kenardan kenara) */
.tstm__col { flex: 1 1 0; min-width: 0; }
.tstm__col--md,
.tstm__col--lg { display: none; }   /* tablet/masaüstünde açılır (aşağıda) */

/* Kayan iz: kartlar 2 kez basılır → -50% ile kusursuz döngü */
.tstm__track {
    display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px;
    animation: tstmScroll var(--dur, 16s) linear infinite;
    will-change: transform;
}
.tstm__col:hover .tstm__track { animation-play-state: paused; }
@keyframes tstmScroll { to { transform: translateY(-50%); } }

/* ---------- Kart ---------- */
.tstm__card {
    width: 100%; box-sizing: border-box;
    padding: 32px 30px 28px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 18px 42px -22px rgba(37, 68, 216, .18), 0 2px 8px -5px rgba(16, 24, 40, .08);
}
.tstm__text { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink); font-weight: 450; }
.tstm__person { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.tstm__ava {
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    object-fit: cover; background: var(--brand-soft); display: block;
}
.tstm__ava--ini {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand); font-weight: 800; font-size: 15px; letter-spacing: -.02em;
}
.tstm__meta { display: flex; flex-direction: column; min-width: 0; }
.tstm__name { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.tstm__role { font-size: 13px; color: var(--muted); font-weight: 500; line-height: 1.3; }

/* ---------- Responsive: mobil 1, tablet 2, masaüstü 3 sütun ---------- */
@media (min-width: 768px)  { .tstm__col--md { display: block; } }
@media (min-width: 1024px) { .tstm__col--lg { display: block; } }

@media (max-width: 480px) {
    .tstm__cols { gap: 16px; }
    .tstm__card { padding: 26px 24px 24px; }
}

/* ---------- Hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce) {
    .tstm__track { animation: none; }
    .tstm__head { opacity: 1; transform: none; transition: none; }
    .tstm__cols { max-height: 560px; }
}