/* SU AGENCY pazaryeri akışı (Sections/agency-flow)

   Hero'daki 360° halkasının kardeşi. Orası "hepsi tek ekipte" diyor,
   burası "hepsi bir SIRA" diyor: ürün yüklenir → mağaza kurulur →
   kampanya kurgulanır → reklam açılır → arama görünürlüğü güncellenir.

   ANİMASYON KURALI: döngüyü paylaşan her öğenin KENDİ keyframe'i vardır.
   Ortak döngü 8 sn. Adım sayısı `--adet` ile geliyor; ışığın ve
   yanıp sönmenin zamanlaması ona bölünüyor, adım eklenince CSS'e
   dokunmak gerekmiyor. */

.aja {
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
}

/* --------------------------------------------------- Kanal logoları

   İKİ ŞERİT, TERS YÖNLERDE. Üstte yurt içi sola, altta yurt dışı sağa
   kayar. Aynı yöne aksalardı tek bir kalın bant gibi görünür, "iki ayrı
   pazar" ayrımı kaybolurdu. Her şeridin KENDİ keyframe'i var — döngüyü
   paylaşan her öğe kendi karesini alır, proje kuralı.

   Logolar ÖNCEDEN optik olarak eşitlendi: mürekkep kırpılıp geometrik
   ortalaması sqrt(en x boy) = 76 px'e sabitlendi. Kare marka işareti
   76x76, geniş kelime logosu daha alçak ama daha geniş olur. "Aynı
   yükseklik" optik eşitlik demek değil — Meta/Facebook logolarında
   aynı tuzağa düşülmüştü. Bu yüzden burada sabit ölçü yok, üst sınır
   var; her logo kendi oranında duruyor. */

.aja__serit { margin-bottom: var(--sp-6); }

.aja__serit:last-of-type { margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-12)); }

.aja__serit-etiket {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-500);
}

/* Uçlar yumuşasın: logolar kenarda kesilmesin, akıp gitsin */
.aja__ray {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0, #000 7%, #000 93%, transparent 100%);
}

.aja__kanallar {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    width: max-content;
    margin: 0;
    padding: var(--sp-2) 0;
    /*
     * DİKİŞ. Liste DÖRT kez basılıyor, kayma bir kopya kadar (-%25).
     * Flex boşluğu yalnızca öğelerin ARASINA girdiği için son boşluk
     * eksik kalıyor ve her turda zıplama oluyor (ugc duvarında 8 px
     * olarak ölçülmüştü). Sağdaki dolgu eksiği tamamlıyor: genişlik
     * 4n*logo + 4n*boşluk, dörtte biri tam bir kopya.
     */
    padding-right: var(--sp-8);
    list-style: none;
    will-change: transform;
}

.aja__serit--sol .aja__kanallar { animation: aja-serit-sol 42s linear infinite; }
.aja__serit--sag .aja__kanallar { animation: aja-serit-sag 34s linear infinite; }

@keyframes aja-serit-sol {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}

@keyframes aja-serit-sag {
    from { transform: translateX(-25%); }
    to   { transform: translateX(0); }
}

.aja__kanal {
    display: grid;
    place-items: center;
    flex: none;
    height: 76px;
}

.aja__kanal img {
    max-width: 168px;
    max-height: 76px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.aja__kanal-ad {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink-700);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    /* Şeritler durur; ilk kopya olduğu yerde okunur kalır */
    .aja__serit--sol .aja__kanallar,
    .aja__serit--sag .aja__kanallar { animation: none; transform: none; }
}

/* ---------------------------------------------------------- Akış yolu */

.aja__yol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--adet), minmax(0, 1fr));
    /* Boşluk değişkende: çizgi ve ışık aynı değeri kullanıyor (bkz. --kenar) */
    --bosluk: var(--sp-5);
    gap: var(--bosluk);
    margin: 0;
    padding: 0;
    list-style: none;

    /*
     * İLK VE SON NOKTANIN MERKEZİNE OLAN UZAKLIK.
     *
     * Önce `calc(100% / var(--adet) / 2)` yazılmıştı — grid BOŞLUĞUNU
     * saymıyor. 1013 px'lik yolda sütun ortası 101 px çıkıyordu, oysa
     * noktanın merkezi 93 px'te. Çizgi ve ışık her iki uçtan 8 px
     * kayıyordu. Ölçüldü.
     *
     * Doğrusu: toplam genişlikten boşluklar düşülür, sütuna bölünür,
     * yarısı alınır.
     */
    --kenar: calc((100% - (var(--adet) - 1) * var(--bosluk)) / var(--adet) / 2);
}

/* Adımları birleştiren çizgi. Noktaların tam ortasından geçsin diye
   üstten 31px (nokta 62px'in yarısı). */
.aja__yol::before {
    content: "";
    position: absolute;
    top: 31px;
    left: var(--kenar);
    right: var(--kenar);
    height: 2px;
    background: var(--ink-200);
}

/* Yol boyunca ilerleyen ışık: "akış" sözünün kendisi.

   TAŞIMA `background-position` İLE YAPILIR, `translateX` İLE DEĞİL.
   İlk denemede ışık 74 px genişliğinde bir kutuydu ve
   `translateX(calc(100% * var(--adet) * 1.6))` ile itiliyordu; ama
   `translateX` yüzdesi ÖĞENİN KENDİ genişliğine çözülüyor. 74 × 8 = 592 px
   yol alıyordu, oysa ilk noktadan son noktaya **827 px** var — ışık yolun
   dörtte birini hiç görmüyordu. Ölçüldü.

   Şimdi öğe yolun tamamını kaplıyor, ışık onun ARKA PLANI.
   `background-position` yüzdesi (öğe genişliği − arka plan genişliği)
   aralığına çözülür; yani %0 → %100 tam olarak kat edilmesi gereken
   mesafe. Adım sayısı değişse de kendiliğinden doğru kalıyor. */
.aja__isik {
    position: absolute;
    /* Çizginin (31px) tam üstünde dursun: 31 − 6/2 = 28 */
    top: 28px;
    left: var(--kenar);
    right: var(--kenar);
    height: 6px;
    background-image: linear-gradient(90deg,
                rgba(34, 211, 238, 0) 0%,
                var(--brand-400, #22d3ee) 50%,
                rgba(34, 211, 238, 0) 100%);
    background-size: 88px 100%;
    background-repeat: no-repeat;
    animation: aja-isik 8s linear infinite;
}

@keyframes aja-isik {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

.aja__adim {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Adım noktası. Yanıp sönme sırayla: her adım döngünün kendi diliminde
   marka rengine dönüyor, sonra sönüyor. */
.aja__nokta {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-500);
    box-shadow: var(--sh-sm);
    animation: aja-yan 8s var(--ease) infinite;
    animation-delay: calc(var(--sira) * (8s / var(--adet)));
}

.aja__nokta svg { width: 24px; height: 24px; }

@keyframes aja-yan {
    0%, 14%, 100% {
        border-color: var(--brand-500, #06b6d4);
        color: var(--brand-700);
        box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.16), var(--sh-sm);
    }
    22%, 99% {
        border-color: var(--border);
        color: var(--ink-500);
        box-shadow: var(--sh-sm);
    }
}

.aja__ad {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--ink-900);
}

.aja__metin {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-600);
}

.aja__not {
    margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-500);
}

.aja__cta {
    margin-top: var(--sp-6);
    text-align: center;
}

/* Koyu zeminde */
/* .aja__kanal buradan ÇIKARILDI: artık kart değil, çerçevesiz logo —
   kutu çizmek şeridi bozuyordu. Seçici listesinden madde silerken
   virgülün de gitmesi şart, aksi halde kural bir sonrakiyle birleşir
   (header'da bir kez başımıza geldi). */
.section--deep .aja__nokta { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.section--deep .aja__serit-etiket { color: var(--ink-400); }
.section--deep .aja__yol::before { background: rgba(255, 255, 255, 0.18); }
.section--deep .aja__ad    { color: #fff; }
.section--deep .aja__metin { color: var(--ink-300); }
.section--deep .aja__not   { color: var(--ink-300); }

/* ------------------------------------------------------------ Ölçüler */

/* Beş sütun 900 px altında sıkışıyor: yol dikeye döner, çizgi sola geçer.
   Bu düzende ışık animasyonu anlamını kaybediyor (yatay ilerliyor),
   o yüzden gizlenir. */
@media (max-width: 900px) {
    .aja__yol {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
    }

    .aja__yol::before {
        top: 0;
        bottom: 0;
        left: 31px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .aja__isik { display: none; }

    .aja__adim {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        column-gap: var(--sp-4);
        align-items: start;
        text-align: left;
    }

    .aja__nokta { grid-row: span 2; margin-bottom: 0; }
    .aja__ad    { align-self: center; }
    .aja__metin { grid-column: 2; margin-top: var(--sp-1); }
}

@media (max-width: 480px) {
    /* Sabit en/boy YAZILMAZ: logolar optik olarak eşitlenmiş halde
       geliyor, ölçüyü zorlamak o dengeyi bozardı. Yalnızca üst sınır. */
    .aja__kanal { height: 58px; }
    .aja__kanal img { max-width: 128px; max-height: 58px; }
    .aja__nokta { width: 52px; height: 52px; }
    .aja__nokta svg { width: 21px; height: 21px; }
    .aja__yol::before { left: 26px; }
    .aja__adim { grid-template-columns: 52px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .aja__isik  { display: none; }
    .aja__nokta { animation: none; }
}