/* SU AGENCY — web tasarımı ve SEO görünürlüğü (Sections/agency-seo)

   İki konu tek kompozisyonda: TARAYICI ÇERÇEVESİ site tasarımını,
   içindeki ARAMA SONUÇ LİSTESİ görünürlüğü anlatıyor.

   Sayfadaki beşinci kompozisyon, yine ayrı bir dilde:
     hero → daire · flow → yatay yol · results → dikey grafik
     creative → mozaik · seo → TARAYICI + LİSTE

   ANİMASYON: marka satırı aşağıdan yukarı tırmanır, üstündeki satırlar
   sırayla bir basamak aşağı kayar. Döngüyü paylaşan HER ÖĞENİN KENDİ
   keyframe'i var (proje kuralı). Ortak döngü 8 sn.

   Satır yüksekliği tek değişkende (--sh): hem liste yüksekliği hem
   kayma mesafesi ondan hesaplanıyor, ikisi ayrı yazılsaydı satır
   yüksekliği değişince animasyon kayardı. */

.wsx {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 4vw, var(--sp-12));
    align-items: center;
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
}

/* ------------------------------------------------- Tarayıcı çerçevesi */

.wsx__tarayici {
    --sh: 88px;                 /* satır yüksekliği */
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-xl);
    overflow: hidden;
}

.wsx__cubuk {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--ink-50, #f8fafc);
}

.wsx__nokta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.wsx__nokta--k { background: #f87171; }
.wsx__nokta--s { background: #fbbf24; }
.wsx__nokta--y { background: #34d399; }

.wsx__adres {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    margin-left: var(--sp-3);
    padding: 5px var(--sp-3);
    border-radius: var(--r-full);
    background: #fff;
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--ink-600);
}

.wsx__adres svg { width: 13px; height: 13px; flex: none; color: var(--ink-500); }

/* --------------------------------------------------- Sonuç listesi */

.wsx__liste {
    position: relative;
    /*
     * Yükseklik satır sayısından VE DOLGUDAN. Önce yalnız satır sayısı
     * yazılmıştı; kutu border-box olduğu için üst/alt dolgu yüksekliğin
     * İÇİNDEN gidiyordu ve en alttaki satır 32 px taşıyordu (ölçüldü).
     */
    height: calc(var(--adet) * var(--sh) + 2 * var(--sp-4));
    margin: 0;
    padding: var(--sp-4);
    list-style: none;
}

.wsx__satir {
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    top: calc(var(--sira) * var(--sh) + var(--sp-4));
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    height: var(--sh);
    padding: var(--sp-3);
    border-radius: var(--r-md);
}

.wsx__satir-govde { display: block; flex: 1; min-width: 0; }

.wsx__adres-kucuk {
    display: block;
    font-size: 11px;
    color: var(--ink-500);
}

.wsx__baslik {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    /* Arama sonucu başlıkları mavi olur; taklit değil, tanınan biçim */
    color: #1a0dab;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Açıklama satırları: yazı değil çizgi. Sahte metin yazmak yerine
   soyut çizgi, "burada içerik var" demenin dürüst yolu. */
.wsx__cizgi {
    display: block;
    height: 5px;
    margin-top: 7px;
    border-radius: var(--r-full);
    background: var(--ink-100);
}

.wsx__cizgi--kisa { width: 62%; margin-top: 5px; }

/* ---- Marka satırı: tırmanan ---- */

.wsx__satir--marka {
    background: linear-gradient(135deg,
                rgba(34, 211, 238, 0.14) 0%, rgba(79, 70, 229, 0.10) 100%);
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.32);

    /* Marka satırı --marka-sira basamak yukarı çıkar */
    animation: wsx-tirman 8s var(--ease) infinite;
}

.wsx__satir--marka .wsx__baslik { color: var(--brand-800); font-weight: var(--fw-semibold); }
.wsx__satir--marka .wsx__cizgi  { background: rgba(8, 145, 178, 0.22); }

.wsx__yukari {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
}

.wsx__yukari svg { width: 14px; height: 14px; }

/*
 * TIRMANIŞ. Marka satırı üç basamak yukarı çıkıyor; her basamakta
 * kısa bir duraklama var ki göz takip edebilsin.
 *
 * Değerler `--marka-sira` üzerinden: satır listenin neresindeyse o kadar
 * basamak çıkıyor. Sabit yazılsaydı satır sayısı değişince bozulurdu.
 */
@keyframes wsx-tirman {
    0%, 12%   { transform: translateY(0); }
    22%, 34%  { transform: translateY(calc(var(--marka-sira) * -1 * var(--sh) / 3)); }
    44%, 56%  { transform: translateY(calc(var(--marka-sira) * -2 * var(--sh) / 3)); }
    66%, 100% { transform: translateY(calc(var(--marka-sira) * -1 * var(--sh))); }
}

/*
 * Üstteki satırlar sırayla BİR BASAMAK aşağı kayıyor — marka satırı
 * onları geçtiği anda. Üçü de aynı keyframe'i paylaşmıyor; gecikme
 * `--sira` ile veriliyor, her satır kendi anında iniyor.
 */
.wsx__satir:not(.wsx__satir--marka) {
    animation: wsx-in-3 8s var(--ease) infinite;
}

/* Her satırın kendi zamanlaması: 2. satır 22%'de, 1. satır 44%'te,
   0. satır 66%'da iniyor. Ayrı keyframe'ler, proje kuralı gereği. */
.wsx__satir:not(.wsx__satir--marka):nth-child(3) { animation-name: wsx-in-3; }
.wsx__satir:not(.wsx__satir--marka):nth-child(2) { animation-name: wsx-in-2; }
.wsx__satir:not(.wsx__satir--marka):nth-child(1) { animation-name: wsx-in-1; }

@keyframes wsx-in-3 { 0%, 12%  { transform: translateY(0); } 22%, 100% { transform: translateY(var(--sh)); } }
@keyframes wsx-in-2 { 0%, 34%  { transform: translateY(0); } 44%, 100% { transform: translateY(var(--sh)); } }
@keyframes wsx-in-1 { 0%, 56%  { transform: translateY(0); } 66%, 100% { transform: translateY(var(--sh)); } }

/* --------------------------------------------------- Kontrol listesi */

.wsx__kontroller {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wsx__kontrol {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--ink-900);
}

.wsx__kontrol:first-child { border-top: 0; }

/* Tikler sırayla yanar: kontroller tek seferde değil sırayla yapılır */
.wsx__tik {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-400);
    animation: wsx-tik 8s var(--ease) infinite;
    animation-delay: calc(var(--sira) * (8s / var(--adet)));
}

.wsx__tik svg { width: 15px; height: 15px; }

@keyframes wsx-tik {
    0%, 8%    { background: var(--ink-100); color: var(--ink-400); }
    16%, 92%  { background: var(--brand-600); color: #fff; }
    100%      { background: var(--ink-100); color: var(--ink-400); }
}

/* ------------------------------------------------------------- Alt */

.wsx__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-10));
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.wsx__not {
    flex: 1 1 380px;
    max-width: 72ch;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--ink-600);
}

/* Koyu zeminde */
.section--deep .wsx__kontrol { color: #fff; border-top-color: rgba(255, 255, 255, 0.14); }
.section--deep .wsx__not     { color: var(--ink-300); }
.section--deep .wsx__alt     { border-top-color: rgba(255, 255, 255, 0.14); }

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

@media (max-width: 900px) {
    .wsx { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
    .wsx__tarayici { --sh: 78px; }
}

@media (max-width: 480px) {
    .wsx__tarayici { --sh: 74px; }
    .wsx__baslik   { font-size: var(--fs-xs); }
    .wsx__satir    { padding: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
    /* Tırmanış durur: satırlar son hâllerinde kalır, marka en üstte */
    .wsx__satir--marka { animation: none; transform: translateY(calc(var(--marka-sira) * -1 * var(--sh))); }
    .wsx__satir:not(.wsx__satir--marka) { animation: none; transform: translateY(var(--sh)); }
    .wsx__tik { animation: none; background: var(--brand-600); color: #fff; }
}