/* SU AGENCY — pazaryerinde yapılan işler (Sections/market-work)

   Solda CANLI BİR ÜRÜN KARTI, sağda işlerin listesi.

   GIF DEĞİL, HTML/CSS. Ürün görseli ve kanal logosu gerçek dosyalar,
   hareket burada: her ölçüde net kalıyor, dosya bir GIF'in onda biri
   kadar, metin seçilebilir ve ekran okuyucu okuyabiliyor.

   DÖNGÜ. Kartlar üst üste duruyor ve sırayla öne geliyor. Toplam süre
   kart sayısıyla ölçekleniyor (kart başına 5,5 sn) — kart eklenince
   CSS'e dokunmak gerekmiyor. Her kartın gecikmesi `--sira`, her rozetin
   kendi gecikmesi `--r` üzerinden.

   ANİMASYON KURALI: döngüyü paylaşan her öğe KENDİ keyframe'ini alır.
   Burada iki keyframe var — kart girişi ve rozet yanışı — ve ikisi de
   `animation-delay` ile ayrılıyor, ortak bir kare paylaşmıyorlar. */

.pzi {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 5vw, var(--sp-14));
    align-items: start;
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
}

/* ----------------------------------------------------------- Sahne */

.pzi__sahne {
    /* Kart başına 5,5 sn; döngünün tamamı buradan hesaplanıyor */
    --tur: calc(var(--adet) * 5.5s);

    position: relative;
    /* Kartlar üst üste durduğu için yükseklik sabit olmalı; en uzun
       kart (üç rozetli) buna göre ölçüldü */
    min-height: 470px;
}

.pzi__kart {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-lg);

    opacity: 0;
    /*
     * ZAMANLAMA `linear`, `--ease` DEĞİL. Kartlar çapraz geçiyor;
     * yumuşatılmış eğride sönen ve açılan kartın opaklıkları toplamı
     * geçiş ortasında 1'in altına düşüyor ve gözle görülür bir kararma
     * oluyordu (ölçüldü: 0,224). Doğrusal eğride toplam 1'de kalıyor.
     */
    animation: pzi-kart var(--tur) linear infinite;
    animation-delay: calc(var(--sira) * var(--tur) / var(--adet));
}

/*
 * Kart girişi. Görünür kalma payı kart sayısına bölünüyor:
 * dört kartta her biri döngünün ~%25'inde önde durur. Yüzdeler
 * `--adet`'e bağlı yazılamadığı için (keyframe yüzdesi değişken almaz)
 * dört karta göre ayarlandı ve şema `max: 4` ile bunu koruyor.
 */
/*
 * ÇAPRAZ GEÇİŞ. Kartlar döngünün %25'i arayla başlıyor.
 *
 * Kilit nokta: sönmenin BAŞLADIĞI an, bir sonraki kartın açılmaya
 * başladığı an olmalı. Sönme %25'te BİTİYOR olsaydı arada hiçbir kartın
 * görünmediği bir boşluk kalırdı (ilk denemede ölçüldü). Şimdi eski kart
 * %25 → %29 arasında sönerken yeni kart %0 → %4 arasında (yani aynı
 * pencerede) açılıyor; iki opaklığın toplamı geçiş boyunca 1'de kalıyor.
 */
@keyframes pzi-kart {
    0%        { opacity: 0; transform: translateY(14px) scale(0.98); }
    4%, 25%   { opacity: 1; transform: translateY(0) scale(1); }
    29%, 100% { opacity: 0; transform: translateY(-10px) scale(0.99); }
}

.pzi__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

/* Kanal logosu: optik olarak eşitlenmiş şerit dosyalarından geliyor,
   bu yüzden sabit ölçü verilmiyor, yalnızca üst sınır. */
.pzi__kanal img {
    max-width: 104px;
    max-height: 26px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Kartın örnek olduğunu söyler: gerçek bir müşteri listesi değil */
.pzi__etiket {
    flex: none;
    font-size: 11px;
    color: var(--ink-500);
}

.pzi__gorsel {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #fff;
}

.pzi__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pzi__ad {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    color: var(--ink-900);
}

/* ---- Rozetler: yapılan işi yazar, sonucu değil ---- */

.pzi__rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--sp-3) 0 0;
    padding: 0;
    list-style: none;
}

.pzi__rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--r-full);
    background: var(--brand-50);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    /* brand-800 · brand-50 = 6,93:1 */
    color: var(--brand-800);

    opacity: 0;
    animation: pzi-rozet var(--tur) var(--ease) infinite;
    /* Kartın kendi gecikmesi + rozetin sırası */
    animation-delay: calc(var(--sira) * var(--tur) / var(--adet) + var(--r) * 0.5s + 0.4s);
}

.pzi__rozet svg { width: 11px; height: 11px; flex: none; }

/* Rozet penceresi kartınkiyle aynı bitiyor: kendi gecikmesi kadar
   kaydığı için dar tutulursa son rozet kart hâlâ ekrandayken sönüyordu. */
@keyframes pzi-rozet {
    0%        { opacity: 0; transform: translateY(5px); }
    3%, 26%   { opacity: 1; transform: translateY(0); }
    29%, 100% { opacity: 0; transform: translateY(0); }
}

/* ------------------------------------------------------- İş listesi */

.pzi__isler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-4) var(--sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pzi__is {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: var(--sp-3);
    align-items: start;
}

.pzi__no {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-50);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--brand-800);
}

.pzi__is-ad {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--ink-900);
}

.pzi__is-metin {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-600);
}

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

.pzi__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);
}

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

/* Koyu zeminde */
.section--deep .pzi__is-ad   { color: #fff; }
.section--deep .pzi__is-metin,
.section--deep .pzi__not     { color: var(--ink-300); }
.section--deep .pzi__alt     { border-top-color: rgba(255, 255, 255, 0.14); }

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

@media (max-width: 900px) {
    .pzi {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: var(--sp-8);
    }

    /* Kart telefonda büyümesin: 340 px zaten okunur bir ölçü */
    .pzi__sahne { width: min(100%, 340px); }
    .pzi__isler { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    /*
     * Döngü durur. Kartlar üst üste olduğu için hepsi birden görünür
     * kalsaydı üst üste binmiş bir yığın çıkardı: yalnızca ilki açık,
     * diğerleri gizli.
     */
    .pzi__kart  { animation: none; opacity: 0; }
    .pzi__kart:first-child { opacity: 1; transform: none; }
    .pzi__rozet { animation: none; opacity: 0; }
    .pzi__kart:first-child .pzi__rozet { opacity: 1; transform: none; }
}