/* SU AGENCY — marka konumlandırma ve strateji (Sections/agency-strategy)

   Sayfanın KAPANIŞI ve SEKİZİNCİ kompozisyonu:
     hero → daire · flow → yatay yol · results → dikey grafik
     creative → mozaik · seo → tarayıcı · social → telefon
     ugc → dikey akan duvar · strategy → DİKEY BASAMAK

   Görsel dil bilerek SAKİN. Yukarıdaki yedi bölüm hareketli; kapanışta
   göz dinlenmeli ve okumaya geçmeli. Tek hareket rayın bir kez dolması.

   `agency-flow` de bir yol anlatıyor ama YATAY ve döngüsel: orada iş
   akışı sürekli dönüyor, burada üç soru bir kez cevaplanıyor. Eksen ve
   döngü farkı ikisini ayırıyor.

   MOBİLDE HİÇBİR ŞEY GİZLENMİYOR — satırlar zaten alt alta. Kreatör
   duvarında (ugc) üçüncü sütunu gizlemek zorunda kalmıştık; burada
   yapı en baştan dikey kurulduğu için o bedel yok. */

.str {
    margin: clamp(var(--sp-8), 4vw, var(--sp-12)) 0 0;
    padding: 0;
    list-style: none;
}

.str__asama {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: clamp(var(--sp-4), 2vw, var(--sp-6));
}

/* --------------------------------------------------------------- Ray */

.str__ray {
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    /*
     * `height: 100%` YAZILMAZ. Izgara satırının yüksekliği içerikten
     * geldiği için yüzde `auto`ya çözülüyordu; `1fr` de 0 oluyor ve
     * bağlantı çizgisi hiç çizilmiyordu (ölçüldü: yükseklik 0 px).
     * Izgara öğesi zaten varsayılan olarak satırı kaplar.
     */
}

.str__nokta {
    width: 13px;
    height: 13px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--brand-600);
    box-shadow: 0 0 0 4px var(--brand-50);

    /* Noktalar sırayla yanar: üç soru aynı anda cevaplanmıyor */
    transform: scale(0.4);
    opacity: 0;
    animation: str-nokta 0.45s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.55s + 0.1s);
}

@keyframes str-nokta {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/*
 * Çizgi yukarıdan aşağı doğru DOLUYOR. `height` yerine `scaleY`:
 * yükseklik animasyonu her karede yerleşimi yeniden hesaplatır,
 * dönüşüm hesaplatmaz.
 */
.str__cizgi {
    width: 2px;
    align-self: stretch;
    margin: 5px 0;
    border-radius: 1px;
    background: linear-gradient(var(--brand-300), var(--brand-100));

    transform: scaleY(0);
    transform-origin: top;
    animation: str-cizgi 0.5s var(--ease) forwards;
    animation-delay: calc(var(--sira) * 0.55s + 0.35s);
}

@keyframes str-cizgi {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ------------------------------------------------------------- Gövde */

.str__govde {
    position: relative;
    padding: 0 0 clamp(var(--sp-8), 4vw, var(--sp-12));

    opacity: 0;
    animation: str-gir 0.5s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.55s + 0.2s);
}

.str__asama:last-child .str__govde { padding-bottom: 0; }

@keyframes str-gir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hayalet numara: sıralamayı söyler, okumayı bölmez */
.str__no {
    position: absolute;
    top: -0.22em;
    right: 0;
    font-size: clamp(3.25rem, 2rem + 5vw, 6rem);
    font-weight: var(--fw-light);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--brand-50);
    pointer-events: none;
    user-select: none;
}

.str__soru {
    margin: 0;
    /* Soru başlığı bölüm başlığından küçük kalmalı: h2 zaten üstte */
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.str__ad {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* brand-800 · beyaz = 7,27:1 */
    color: var(--brand-800);
}

.str__metin {
    margin: var(--sp-3) 0 0;
    max-width: 62ch;
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink-600);
}

/* ----------------------------------------------------------- Kalemler */

.str__kalemler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
}

.str__kalem {
    padding: 7px var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: #fff;
    font-size: var(--fs-sm);
    line-height: 1.3;
    color: var(--ink-700);

    opacity: 0;
    animation: str-kalem 0.4s var(--ease-out) forwards;
    /* Aşamanın gecikmesi + kalemin kendi sırası */
    animation-delay: calc(var(--sira) * 0.55s + var(--k) * 0.05s + 0.45s);
}

@keyframes str-kalem {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ Kapanış */

.str__kapanis {
    max-width: 68ch;
    margin: clamp(var(--sp-8), 4vw, var(--sp-10)) 0 0;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-800);
}

.str__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}

.str__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 .str__soru     { color: #fff; }
.section--deep .str__no       { color: rgba(255, 255, 255, 0.09); }
.section--deep .str__ad       { color: var(--brand-300); }
.section--deep .str__metin,
.section--deep .str__not      { color: var(--ink-300); }
.section--deep .str__kapanis  { color: #fff; border-top-color: rgba(255, 255, 255, 0.14); }
.section--deep .str__kalem    { background: rgba(255, 255, 255, 0.06);
                                border-color: rgba(255, 255, 255, 0.16);
                                color: var(--ink-200); }
.section--deep .str__nokta    { box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.22); }

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

@media (max-width: 640px) {
    .str__asama { grid-template-columns: 16px minmax(0, 1fr); }

    /* Hayalet numara dar ekranda soru metnine giriyordu */
    .str__no {
        position: static;
        display: block;
        margin-bottom: var(--sp-1);
        font-size: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .str__nokta,
    .str__cizgi,
    .str__govde,
    .str__kalem { animation: none; opacity: 1; transform: none; }
}