/* SU AGENCY reklam sonuçları — ROAS panosu (Sections/agency-results)

   Sayfadaki diğer bölümler "ne yapıyoruz" anlatıyor; burası "ne çıktı"
   diyor. Biçimi kasten farklı:

     hero            → daire (halka), koyu
     agency-flow     → yatay yol
     agency-results  → DİKEY GRAFİK + platform logoları

   KOYU ZEMİN DENENDİ VE GERİ ALINDI. Bölüm "çok yazı" görünüyordu ve koyu
   bant metni daha da ağırlaştırıyordu. Açık zeminde renk yazıdan değil
   ÜÇ yerden geliyor: platform logoları, sütunların her birinin kendi
   rengi ve ilke rozetleri. Metin de kısaltıldı.

   Sütunlar ölçekli: yükseklik PHP'de en büyük değere oranlanıyor.
   Dekoratif eşit sütunlar rakamı yalanlardı. */

.ajs {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(var(--sp-10), 5vw, var(--sp-16));
    align-items: center;
}

/* --------------------------------------------------------- Sol sütun */

.ajs__baslik {
    font-size: var(--fs-h2);
    /* Ajans tipografisi açık */
    font-weight: var(--fw-light);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink-900);
}

.ajs__lead {
    margin-top: var(--sp-4);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-600);
}

/* ----------------------------------------------- Platform logoları */

.ajs__platformlar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: clamp(var(--sp-6), 3vw, var(--sp-8)) 0 0;
    padding: 0;
    list-style: none;
}

.ajs__platform {
    display: grid;
    place-items: center;
    width: 104px;
    height: 46px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-xs);

    opacity: 0;
    animation: ajs-belir 0.45s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.07s);
}

.ajs__platform img {
    max-width: 100%;
    max-height: 30px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ajs__platform-ad {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--ink-700);
}

/* ------------------------------------------------------- İlkeler */

/*
 * İlkeler artık uzun paragraf değil, ROZET. "Çok yazı" geri bildiriminin
 * ana kaynağı buydu: dört başlık + dört uzun açıklama. Açıklama alanı
 * içerikte duruyor (panelden yazılabilir) ama burada tek satıra sığacak
 * kadar kısa tutuluyor ve renkli bir noktayla ayrışıyor.
 */
.ajs__ilkeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: clamp(var(--sp-6), 3vw, var(--sp-8)) 0 0;
    padding: 0;
    list-style: none;
}

.ajs__ilke {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: #fff;

    opacity: 0;
    animation: ajs-belir 0.5s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.08s + 0.1s);
}

/* Her rozet kendi rengini alır: dört ilke dört ton */
.ajs__no {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: #fff;
}

.ajs__ilke:nth-child(1) .ajs__no { background: var(--brand-600); }
.ajs__ilke:nth-child(2) .ajs__no { background: var(--indigo-600); }
.ajs__ilke:nth-child(3) .ajs__no { background: #0891b2; }
.ajs__ilke:nth-child(4) .ajs__no { background: #7c3aed; }

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

/* Açıklama rozette gizli; içerikte durur, ekran okuyucu da okur.
   Görsel olarak tek satırlık rozet metni yeterli. */
.ajs__ilke-metin {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@keyframes ajs-belir {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------- Grafik */

.ajs__grafik {
    margin: 0;
    padding: clamp(var(--sp-6), 3vw, var(--sp-8));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background:
        /* Yatay ızgara: grafik olduğunu söyleyen ayrıntı */
        repeating-linear-gradient(180deg,
            rgba(15, 23, 42, 0.06) 0, rgba(15, 23, 42, 0.06) 1px,
            transparent 1px, transparent 25%),
        #fff;
    box-shadow: var(--sh-md);
}

.ajs__sutunlar {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: clamp(var(--sp-3), 1.6vw, var(--sp-6));
    height: clamp(240px, 24vw, 320px);
}

/*
 * SÜTUN ÜÇ SATIRLIK BİR IZGARADIR: değer · çizim alanı · etiket.
 *
 * Önce flex kolonuydu ve çubuğun `height: var(--yuk)` yüzdesi SÜTUNUN
 * TAMAMINA çözülüyordu. Sütunda yazılar da olduğu için %100'lük çubuk
 * sığmayıp küçültülüyordu: 15× ve 20× İKİSİ DE 251 px çıktı, grafik
 * rakamı yalanladı. Ölçüldü.
 *
 * Izgarada orta satır (`1fr`) çizim alanı; yüzde ona çözülüyor.
 */
.ajs__sutun {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    flex: 1;
    justify-items: center;
    height: 100%;
    max-width: 96px;
}

.ajs__deger {
    align-self: end;
    margin-bottom: var(--sp-2);
    font-size: clamp(1.4rem, 0.9rem + 1.5vw, 2.1rem);
    font-weight: var(--fw-light);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    white-space: nowrap;
}

.ajs__birim {
    font-size: 0.62em;
    font-weight: var(--fw-medium);
    color: var(--brand-700);
}

/*
 * Çubuk. Yükseklik `--yuk` ile geliyor (PHP'de oranlandı), animasyon
 * 0'dan oraya büyüyor — TEK SEFERLİK. Döngüye alınsaydı sayfa boyunca
 * oynayıp okumayı bölerdi.
 *
 * HER SÜTUN KENDİ RENGİNDE (`data-renk`): tek renkli dört çubuk grafiği
 * cansız bırakıyordu. Renkler marka ailesinden; dördü de beyaz zeminde
 * grafik nesnesi eşiğini (3:1) geçiyor.
 */
.ajs__cubuk {
    align-self: end;
    width: 100%;
    height: var(--yuk);
    border-radius: var(--r-md) var(--r-md) 4px 4px;
    background: linear-gradient(180deg, var(--ust) 0%, var(--alt) 100%);

    transform-origin: bottom;
    transform: scaleY(0);
    animation: ajs-buyu 0.85s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.12s + 0.2s);
}

.ajs__sutun[data-renk="0"] .ajs__cubuk { --ust: #67e8f9; --alt: #0891b2; }
.ajs__sutun[data-renk="1"] .ajs__cubuk { --ust: #38bdf8; --alt: #0369a1; }
.ajs__sutun[data-renk="2"] .ajs__cubuk { --ust: #818cf8; --alt: #4338ca; }
.ajs__sutun[data-renk="3"] .ajs__cubuk { --ust: #c084fc; --alt: #6d28d9; }

@keyframes ajs-buyu {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.ajs__etiket {
    margin-top: var(--sp-3);
    font-size: 11.5px;
    line-height: 1.3;
    text-align: center;
    color: var(--ink-600);
}

.ajs__eksen {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-600);
}

/* ----------------------------------------------------------- Alt şerit */

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

/* Sonuçların değişkenliği burada yazılı; küçük ama silik değil */
.ajs__not {
    flex: 1 1 380px;
    max-width: 72ch;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--ink-600);
}

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

@media (max-width: 980px) {
    .ajs {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(var(--sp-8), 5vw, var(--sp-10));
    }

    /* Grafik metnin ALTINA iner: önce iddia okunur, sonra rakam görülür */
    .ajs__grafik { order: 2; }
    .ajs__soz    { order: 1; }
}

@media (max-width: 560px) {
    .ajs__sutunlar { height: 200px; gap: var(--sp-2); }
    .ajs__etiket   { font-size: 10px; }
    .ajs__platform { width: 88px; height: 42px; }
    .ajs__platform img { max-height: 24px; }
    .ajs__alt      { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .ajs__ilke     { opacity: 1; animation: none; }
    .ajs__platform { opacity: 1; animation: none; }
    .ajs__cubuk    { transform: scaleY(1); animation: none; }
}