/* Bölüm: marka logo şeridi. */

.lg-title {
    margin-bottom: var(--sp-6);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink-600);
}

.section--deep .lg-title { color: var(--ink-300); }

.lg-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.75rem, 1rem + 3vw, 4rem);
}

.lg-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-8);
}

.lg-item {
    display: grid;
    place-items: center;
    min-height: 42px;
    /* Logolar tek tip görünsün diye griye alınır; üzerine gelince rengine döner */
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

a.lg-item:hover,
.lg-item:hover {
    filter: grayscale(0);
    opacity: 1;
}

.lg-item img {
    max-height: 38px;
    max-width: 160px;
    object-fit: contain;
}

.lg-item__text {
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    color: var(--ink-700);
    white-space: nowrap;
}

.section--deep .lg-item__text { color: rgba(255, 255, 255, 0.82); }

.lg-note {
    margin-top: var(--sp-6);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-500);
}

@media (max-width: 560px) {
    .lg-list { gap: var(--sp-6); }
    .lg-item img { max-height: 30px; }
    .lg-item__text { font-size: 0.9375rem; }
}

/* ============================================================
   "marquee" varyantı — kenardan kenara kayan şerit

   Altı referans logosu sabit şeritte durağan duruyordu; kayan şerit
   hem canlı hem de logo sayısı arttıkça kendiliğinden yer açıyor.

   TEKNİK (Sections/ticker ile aynı): liste İKİ KEZ basılır, ray %50
   kayıp başa döner — kopya tam olarak gerçeğin bittiği yerde başladığı
   için dikiş görünmez. Kopya `aria-hidden`, ekran okuyucu tekrar okumaz.
   ============================================================ */

/* BÖLÜM TAŞMAYI KESER.

   Şerit `100vw` ile kapsayıcıdan taşıyor ama `vw` KAYDIRMA ÇUBUĞUNU DA
   sayar: 1440 px pencerede içerik alanı 1425 px, şerit 1440 px çıkıyor ve
   sayfa 8 px yatay kayıyordu. Ölçüldü.

   Çözüm şeridi daraltmak değil (tam genişlik istiyoruz), taşmayı bölümde
   kesmek. Bölümün dikeyde taşan bir içeriği yok, kesmek güvenli. */
.sc-logos--marquee { overflow: hidden; }

.lg-marquee {
    position: relative;
    /* Kapsayıcıdan taş: logolar ekran kenarından girip çıksın */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;

    /* Kenarlarda yumuşak geçiş: logo aniden kesilmesin */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0, #000 8%, #000 92%, transparent 100%);
}

.lg-marquee__track {
    display: flex;
    width: max-content;
    animation: lg-kay 34s linear infinite;
}

/* Üzerine gelince durur: ziyaretçi bir markayı okumak isteyebilir */
.lg-marquee:hover .lg-marquee__track { animation-play-state: paused; }

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

.lg-list--marquee {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    /* İki liste arasında da aynı boşluk kalsın */
    padding-right: clamp(2rem, 1rem + 3vw, 3.5rem);
    margin: 0;
    list-style: none;
}

.lg-list--marquee .lg-item {
    flex: none;
    /* Kendi zemini olan logolar (pembe suluboya, siyah kare) beyaz çipe
       oturur; şeffaf olanlar da aynı çipte durunca şerit tek dilde
       konuşur. Zeminleri silmek marka işaretini bozmak olurdu. */
    width: 168px;
    height: 76px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    /* Griye alma burada YOK: referans logoları renkleriyle daha güvenilir
       duruyor ve altısı da farklı marka; gri şerit hepsini aynılaştırıyor. */
    filter: none;
    opacity: 1;
}

.lg-list--marquee .lg-item img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.section--deep .lg-list--marquee .lg-item {
    border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 620px) {
    .lg-list--marquee .lg-item { width: 132px; height: 62px; }
    .lg-marquee__track { animation-duration: 26s; }
}

/* Hareket azaltma: şerit durur, logolar sarılarak dizilir */
@media (prefers-reduced-motion: reduce) {
    .lg-marquee { width: auto; margin-left: 0; transform: none;
                  -webkit-mask-image: none; mask-image: none; }
    .lg-marquee__track { animation: none; width: 100%; }
    .lg-list--marquee { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .lg-list--marquee[aria-hidden="true"] { display: none; }
}