/* --- Canlı Ziyaretçi Sayacı Stilleri --- */

:root {
    /* Okuma rozeti katmanı değişkenleri (açık mod varsayılan) */
    --czs-okuma-katmani-rgb: 255, 255, 255;
    --czs-okuma-parlaklik: .98;

    /* Metin rengi (açık mod) */
    --czs-okuma-metin: #0f172a;

    /* Küçültüldüğünde ekranda kalacak görünür genişlik */
    --czs-min-gorunur: 72px;

    /* Balon stili değişkenleri */
    --czs-balon-katmani-rgb: 255, 255, 255;
    /* AÇIK: beyaz katman */
    --czs-balon-parlaklik: 0.98;

    /* GA notu stili */
    --czs-not-katmani-rgb: 255, 255, 255;
    --czs-not-parlaklik: 0.98;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Koyu Mod Ayarları */
        --czs-okuma-katmani-rgb: 0, 0, 0;
        --czs-okuma-parlaklik: 1.06;

        /* Metin rengi (koyu mod) */
        --czs-okuma-metin: #e5e7eb;

        /* Balon koyu mod */
        --czs-balon-katmani-rgb: 0, 0, 0;
        --czs-balon-parlaklik: 1.06;

        /* GA notu koyu mod */
        --czs-not-katmani-rgb: 15, 23, 42;
        --czs-not-parlaklik: 1.00;
    }
}

/* --- Site Float Styles --- */
.site-geneli-ziyaretci-sayaci-kapsayici {
    position: fixed;
    right: 16px;
    bottom: 16px;
    margin-bottom: 50px;
    z-index: 1000;
    transform: translateY(22px);
    opacity: 0;
    pointer-events: none;
    transition: right .45s cubic-bezier(.2, .7, 0, 1);
}



/* Gosterildigindeki durum */
.site-geneli-ziyaretci-sayaci-kapsayici:not(.site-geneli-ziyaretci-sayaci--gizli) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform .55s cubic-bezier(0, 0, .2, 1), opacity .55s cubic-bezier(0, 0, .2, 1), right .45s cubic-bezier(.2, .7, 0, 1);
}

.site-geneli-ziyaretci-balonu {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border-radius: 1rem;
    border: 1px solid var(--kan-border-color, #e5e7eb);
    box-shadow: 0 6px 24px rgba(2, 6, 23, .14);
    background: rgba(var(--czs-balon-katmani-rgb), 0.5);
    color: var(--kan-text-color, #0f172a);
    backdrop-filter: blur(5px) saturate(110%) brightness(var(--czs-balon-parlaklik));
    -webkit-backdrop-filter: blur(5px) saturate(110%) brightness(var(--czs-balon-parlaklik));
    max-width: 280px;
    will-change: transform, opacity;
    transition: transform .45s cubic-bezier(.2, .7, 0, 1), opacity .3s ease;
}

.site-geneli-ziyaretci-ikon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--kan-primary-color, #3b82f6) 18%, transparent);
    border: 1px solid var(--kan-primary-color, #93c5fd);
    flex: 0 0 auto;
}

.site-geneli-ziyaretci-ikon svg {
    fill: var(--kan-primary-color, #1d4ed8);
    display: block;
}

.site-geneli-ziyaretci-satirlar {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.site-geneli-ziyaretci-satir-1,
.site-geneli-ziyaretci-satir-3 {
    font: 600 12px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    opacity: .8;
}

.site-geneli-ziyaretci-satir-2 {
    font: 800 16px/1.15 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    letter-spacing: .2px;
}

.site-geneli-ziyaretci-satir-2 #site-geneli-ziyaretci-sayisi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3ch;
    /* sayaç en az 3 karakterlik alan tutsun */
    padding: .12rem .45rem;
    margin-right: .25rem;
    border-radius: .6rem;
    background: color-mix(in oklab, var(--kan-primary-color, #3b82f6) 15%, #fff);
    color: color-mix(in oklab, var(--kan-primary-color, #3b82f6) 90%, #1e40af);
    border: 1px solid var(--kan-primary-color, #93c5fd);
}

/* Kapat (X) düğmesi */
.site-geneli-ziyaretci-kapat {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, .4);
    transition: transform .15s ease, opacity .25s ease, filter .25s ease;
}

.site-geneli-ziyaretci-kapat:hover {
    transform: scale(1.05);
}

.site-geneli-ziyaretci-kapat:active {
    transform: scale(.96);
}

/* === Minimize davranışı === */
/* Kutu en sağa yaslanır ve neredeyse tamamen dışarı kayar, sağda sadece sayaç görünür */
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum {
    cursor: pointer;
}

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum * {
    cursor: pointer;
}

/* imleç link gibi olsun */

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-balonu {
    transform: translateX(calc(100% - var(--czs-min-gorunur)));
}

/* Pulse wave animation */
@keyframes sgs-pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* İkonun etrafında sürekli atan bir halka animasyonu (3 saniyede 1) */
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-balonu {
    animation: sgs-pulse-ring 3s infinite;
}

/* Hover durumu: 3px sola kayma efekti */
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum:hover .site-geneli-ziyaretci-balonu {
    transform: translateX(calc(100% - var(--czs-min-gorunur) - 3px));
}

/* Minimize iken yalnız sayı görünsün; metinler gizli, sayaç sağa hizalı */
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-ikon,
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-satir-1,
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-satir-3 {
    display: none !important;
}

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-satirlar {
    display: block !important;
}

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-satir-2 {
    font-size: 0 !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum #site-geneli-ziyaretci-sayisi {
    font-size: 16px !important;
    line-height: 1.2;
    margin-right: 0;
    /* sağ kenara yapışık */
}

/* Ok simgesi (minimize iken görünür) */
.site-geneli-ziyaretci-ok-isareti {
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}

.site-geneli-ziyaretci-ok-isareti svg {
    fill: var(--kan-muted-color, #475569);
    display: block;
}

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum:hover .site-geneli-ziyaretci-ok-isareti {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum.peek .site-geneli-ziyaretci-balonu {
    transform: translateX(calc(100% - var(--czs-min-gorunur) - 3px));
}

.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum.peek .site-geneli-ziyaretci-ok-isareti {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Minimize iken X butonunu animasyonla gizle */
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum .site-geneli-ziyaretci-kapat {
    opacity: 0;
    filter: blur(1px);
    transform: translateY(-6px) scale(.9);
    pointer-events: none;
}

/* Dark mode */
.dark-mode .site-geneli-ziyaretci-balonu {
    border-color: #1a2a48;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    background: rgba(15, 23, 42, 0.5);
    color: #e5e7eb;
}

.dark-mode .site-geneli-ziyaretci-ikon {
    background: #162441;
    border-color: #3357a6;
}

.dark-mode .site-geneli-ziyaretci-ikon svg {
    fill: #99caff;
}

.dark-mode .site-geneli-ziyaretci-satir-2 #site-geneli-ziyaretci-sayisi {
    background: #0f1a33;
    color: #a5c8ff;
    border-color: #3357a6;
}

.dark-mode .site-geneli-ziyaretci-ok-isareti svg {
    fill: #9aa4b2;
}

@media (max-width:480px) {
    .site-geneli-ziyaretci-balonu {
        padding: .65rem .8rem;
        gap: .65rem;
        max-width: 86vw;
    }

    .site-geneli-ziyaretci-satir-1,
    .site-geneli-ziyaretci-satir-3 {
        font-size: 12px;
    }

    .site-geneli-ziyaretci-satir-2 {
        font-size: 15px;
    }

    .site-geneli-ziyaretci-sayaci-kapsayici {
        right: 10px;
        /* ekranın sağına yaslanır */
        bottom: 70px;
        /* alttan biraz boşluk bırakabilirsin */
        margin-bottom: 0;
    }

    .site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum {
        right: 0;
    }

    .site-geneli-ziyaretci-balonu {
        max-width: 94vw;
        /* çok geniş olmasın, ekranı taşırmasın */
    }
}

/* GA notu: balonun dışında, alt sağ köşede küçük ve şık tipografi */
/* Mobil + masaüstü: varsayılan GİZLİ */
.site-geneli-ziyaretci-ga-notu {
    position: fixed;
    right: 20px;
    bottom: 150px;
    font: 500 9px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--kan-muted-color, #64748b);
    background: rgba(var(--czs-not-katmani-rgb), 0.6);
    backdrop-filter: blur(5px) brightness(var(--czs-not-parlaklik));
    -webkit-backdrop-filter: blur(5px) brightness(var(--czs-not-parlaklik));
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--kan-border-color, #e2e8f0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    z-index: 9998;

    /* gizli halde */
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px) scale(.98);
    transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}

/* JS açtığında görünür */
.site-geneli-ziyaretci-ga-notu.gorunur {
    opacity: .85;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* SADECE MASAÜSTÜNDE hover ile göster */
@media (hover:hover) and (pointer:fine) {
    .site-geneli-ziyaretci-sayaci-kapsayici:not(.sh-btt-on):hover+.site-geneli-ziyaretci-ga-notu {
        opacity: .85;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
}


/* Balon minimize edilince her koşulda gizle */
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum+.site-geneli-ziyaretci-ga-notu {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(4px) scale(.98) !important;
}

/* Dark mode */
.dark-mode .site-geneli-ziyaretci-ga-notu {
    background: rgba(15, 23, 42, 0.65);
    border-color: #1e293b;
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Mobil konum ayarı */
@media (max-width:480px) {
    .site-geneli-ziyaretci-ga-notu {
        right: 16px;
        bottom: 146px;
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* Balon minimize edilince gizle */
.site-geneli-ziyaretci-sayaci-kapsayici.kucultulmus-durum+.site-geneli-ziyaretci-ga-notu {
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
}

/* Dark mode uyumu */
.dark-mode .site-geneli-ziyaretci-ga-notu {
    background: rgba(15, 23, 42, 0.65);
    border-color: #1e293b;
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Mobilde hizalama ve konum ayarı */
@media (max-width:480px) {
    .site-geneli-ziyaretci-ga-notu {
        right: 16px;
        bottom: 146px;
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* ==== Back-to-top görünürken balonu yumuşakça flu yap (yaklaşık %60 algısal bulanıklık) ==== */
.site-geneli-ziyaretci-sayaci-kapsayici {
    transition:
        transform .55s cubic-bezier(0, 0, .2, 1),
        opacity .55s cubic-bezier(0, 0, .2, 1),
        right .45s cubic-bezier(.2, .7, 0, 1),
        filter .35s ease,
        backdrop-filter .35s ease;
}

/* .progress-wrap.active-progress veya scroll durumu varken uygulanacak durum */
.site-geneli-ziyaretci-sayaci-kapsayici.site-geneli-scroll-aktif {
    z-index: 999 !important;
    /* BTT butonu (genelde 1000+) altında kalsın */
    pointer-events: none;
}

.site-geneli-ziyaretci-sayaci-kapsayici.site-geneli-scroll-aktif .site-geneli-ziyaretci-balonu {
    /* “%50 bulanık” algısı + opacity */
    filter: blur(4px);
    opacity: 0.5;
    transition: filter .35s ease, opacity .35s ease;
}

/* GA notu da arka plana çekilsin */
.site-geneli-ziyaretci-ga-notu.site-geneli-scroll-aktif-not {
    opacity: 0 !important;
    pointer-events: none !important;
    filter: none;
    transform: translateY(4px) scale(.98);
    transition: opacity .2s ease, transform .2s ease;
}