/**
 * canli-ziyaretci.css
 *
 * Hero eyebrow'daki "Şu an N ziyaretçi sitede" canlı sayaç için nabız atan
 * yeşil nokta. Google Analytics / Hotjar tarzı standart "live" göstergesi.
 *
 * Markup (views/frontend/home.php):
 *   <span class="eyebrow eyebrow-canli" x-data="canliZiyaretci(N)">
 *       <span class="canli-dot" aria-hidden="true"></span>
 *       Şu an <span x-text="sayi">N</span> ziyaretçi sitede
 *   </span>
 *
 * Uppercase override: eyebrow base'i UPPERCASE çeviriyor; uzun cümlede
 * bu okunabilirliği bozuyor. Bu varyantta normal case kullanıyoruz.
 */

.eyebrow.eyebrow-canli {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
    gap: 8px;
    /* Base eyebrow border'i çok soluk (--brand-primary-light); canlı badge'in
       daha "status pill" hissi vermesi icin emerald tonunda belirgin border. */
    border: 1.5px solid rgba(16, 185, 129, 0.45);
}

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

@keyframes canli-dot-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}

/* Reduced-motion saygısı: animasyonu duraklat ama nokta görünür kalsın. */
@media (prefers-reduced-motion: reduce) {
    .canli-dot {
        animation: none;
    }
}