/**
 * urun-canli-izleyici.css
 *
 * Ürün detay sayfasındaki "N kişi şu anda bu ürünü inceliyor" sosyal kanıt
 * pill'i. Soft yeşil tint + nabız atan yeşil nokta + tabular-nums ile
 * hizalanmış güçlü sayı. Sayı her değiştiğinde küçük "bump" animasyonu —
 * göz değişimi yakalasın, sayfa canlı dursun.
 *
 * Markup (views/frontend/urun.php, stok-uyari'nin altı / cta-row'un üstü):
 *   <div class="urun-canli-izleyici" x-data="urunCanliIzleyici(N)">
 *       <span class="ucz-dot" aria-hidden="true"></span>
 *       <span class="ucz-text">
 *           <strong class="ucz-sayi" x-text="sayi" :class="{ bumping }">N</strong>
 *           kişi şu anda bu ürünü inceliyor
 *       </span>
 *   </div>
 *
 * V1.5 — sahte sayaç (server seed + client drift). V2'de urun_goruntuleme
 * tablosundan gerçek session count'a swap edilecek (urun.php seed bloğu
 * tek noktadan değişir).
 */

.urun-canli-izleyici {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--r-md);
    /* Soft yeşil gradient — yan yana stok-uyari (amber) ile çakışmasın diye
       belirgin ama yumuşak ton. brand-primary-soft (#f0fdf4) zaten emerald
       ailesi; sağda beyaza solarak "shimmer" hissi. */
    background: linear-gradient(135deg, var(--brand-primary-soft) 0%, #ffffff 100%);
    border: 1px solid var(--brand-primary-light);
    margin: 14px 0 18px;
    font-size: 14px;
    color: var(--c-text);
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.06);
}

.urun-canli-izleyici .ucz-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: ucz-pulse 1.8s ease-out infinite;
}

.urun-canli-izleyici .ucz-text {
    flex: 1;
    min-width: 0;
}

.urun-canli-izleyici .ucz-sayi {
    font-weight: 800;
    color: var(--brand-primary-dark);
    font-variant-numeric: tabular-nums;
    /* Bump animasyonu için inline-block şart — span default inline'da
       transform tutmaz. */
    display: inline-block;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Hafif highlight — sayının hemen ayırt edilmesi için. */
    padding: 0 2px;
}

.urun-canli-izleyici .ucz-sayi.bumping {
    transform: scale(1.18);
}

/* Pulse keyframe — canli-ziyaretci ile aynı kuralı paylaşır ama component
   scope'u izole olsun diye namespace'lenmiş ad. (İki component aynı sayfada
   render edilmiyor ama tutarlılık için.) */
@keyframes ucz-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}

/* Reduced-motion saygısı — animasyon kapatılır ama görsel kaybolmaz. */
@media (prefers-reduced-motion: reduce) {
    .urun-canli-izleyici .ucz-dot,
    .urun-canli-izleyici .ucz-sayi {
        animation: none;
        transition: none;
    }
}

/* Mobilde biraz sıkıştır — stok-uyari/havale label'i ile birlikte üst üste
   geldiklerinde dikey yığın çok yer kaplamasın. */
@media (max-width: 480px) {
    .urun-canli-izleyici {
        padding: 9px 12px;
        font-size: 13px;
        gap: 9px;
    }
    .urun-canli-izleyici .ucz-dot {
        width: 8px;
        height: 8px;
    }
}