/* Bölüm: kayan özellik şeridi.

   İnce bant, hero'nun hemen altında. Şerit KESİNTİSİZ akar: aynı liste iki
   kez basılır ve animasyon TAM BİR LİSTE BOYU (-50%) ilerleyip başa döner.
   Tek kopyayla döngü başa dönerken bant boşalıyordu.

   Bölüm dikey boşluk almaz: `.section` dolgusu ezilir, bant kendi
   yüksekliğinde kalır — hero ile arasında boşluk olmasın, ikisi tek bir
   bant gibi dursun diye. */

.sc-ticker {
    padding-block: 0;
    overflow: hidden;
}

.tk {
    position: relative;
    padding-block: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Kenarlarda yumuşama: maddeler bandın içinden doğar, kesilmiş gibi
   görünmez. Koyu zeminin rengiyle aynı iki uç maske. */
.tk::before,
.tk::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 84px;
    pointer-events: none;
}

/* Maske rengi bölümün zeminine bağlı: şerit koyu bantta da açık zeminde de
   kullanılıyor. Tek değişkenle yönetiliyor. */
.sc-ticker                                        { --tk-bg: var(--surface-deep); }
.sc-ticker.section--soft                          { --tk-bg: var(--surface-soft); }
.sc-ticker:not(.section--deep):not(.section--soft) { --tk-bg: var(--surface); }

.tk::before { left: 0;  background: linear-gradient(90deg, var(--tk-bg), transparent); }
.tk::after  { right: 0; background: linear-gradient(270deg, var(--tk-bg), transparent); }

.tk__track {
    display: flex;
    width: max-content;
    animation: tk-akis 28s linear infinite;
}

.tk__list {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin: 0;
    padding: 0 var(--sp-6) 0 0;
    list-style: none;
}

.tk__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.tk__icon {
    flex: none;
    width: 16px;
    height: 16px;
    /* Koyu bant üstünde brand-200 → 8:1 üzeri; grafik öğe eşiği 3:1 */
    color: var(--brand-200);
}

.tk__text {
    font-size: 13px;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.005em;
    /* Koyu bant üstünde → 12:1 üzeri */
    color: rgba(255, 255, 255, 0.92);
}

/* Fareyle üstüne gelince durur: okumak isteyen okuyabilsin */
.tk:hover .tk__track { animation-play-state: paused; }

@keyframes tk-akis {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Hareket azaltma tercihi: şerit DURUR ve satır başa sarar.
   Duran bir marquee'de ikinci kopya yinelenmiş içerik olarak görünürdü;
   gizleniyor. */
@media (prefers-reduced-motion: reduce) {
    .tk__track { animation: none; width: 100%; }
    .tk__list[aria-hidden="true"] { display: none; }

    .tk__list {
        flex-wrap: wrap;
        gap: var(--sp-4) var(--sp-6);
        padding: 0 var(--sp-6);
        justify-content: center;
    }

    .tk::before,
    .tk::after { display: none; }
}

@media (max-width: 600px) {
    .tk__list { gap: var(--sp-6); }
    .tk__text { font-size: 12px; }
    .tk::before,
    .tk::after { width: 40px; }
}

/* ─────────────────────────────────── açık zeminde şerit ─────────────── */

/* Hero artık altta beyaza kavuşuyor (bkz. page-header.css dikey geçiş notu);
   hemen ardından koyu bir şerit gelince beyazdan siyaha sert bir dikiş
   oluşuyordu. Açık zeminde şerit metni koyulaşır, ikon marka rengine döner. */

.sc-ticker:not(.section--deep) .tk { border-top-color: var(--border); }

/* Beyaz/açık üstünde ink-700 → 10,4:1 */
.sc-ticker:not(.section--deep) .tk__text { color: var(--ink-700); }

/* Beyaz üstünde brand-700 → 5,36:1; grafik öğe eşiği 3:1 */
.sc-ticker:not(.section--deep) .tk__icon { color: var(--brand-700); }