/* BUTON KONUMLARI - EN GÜÇLÜ KURALLAR */

/* Canlı Destek Yazısı - Yeşil butonun üzerinde */
.canli-destek-label {
    position: fixed !important;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    right: 25px !important;
    z-index: 10052 !important;
    background: white !important;
    color: #4a9eff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.canli-destek-label .destek-text {
    color: #4a9eff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Dark Mode - Label Uyumu */
body.dark-mode .canli-destek-label {
    background: #2a3142 !important;
    color: #4a9eff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .canli-destek-label .destek-text {
    color: #4a9eff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Ok görününce balon FAB + yukarı ok yığınına göre yukarı */
body:has(#scrollToTop.show) .canli-destek-label {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Canlı destek: ok gizliyken ok ile aynı hizada; ok varken yukarı — yuvarlak, büyük */
.scroll-to-bottom,
#scrollToBottom.scroll-to-bottom {
    position: fixed !important;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    right: 30px !important;
    z-index: 10051 !important;
    width: 60px !important;
    height: 60px !important;
    background: #4a9eff !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transition: bottom 0.25s ease;
}

body:has(#scrollToTop.show) #scrollToBottom.scroll-to-bottom {
    bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
}

.scroll-to-bottom:hover {
    background: #4a9eff !important;
    transform: none !important;
    box-shadow: none !important;
}

.scroll-to-bottom img {
    width: 36px !important;
    height: 36px !important;
}

/* Yukarı ok — en altta; canlı desteğin altında, z-index altta */
.scroll-to-top,
#scrollToTop.scroll-to-top {
    position: fixed !important;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    right: 30px !important;
    z-index: 10050 !important;
    width: 60px !important;
    height: 60px !important;
    background: #4a9eff !important;
    box-shadow: none !important;
}

.scroll-to-top:hover {
    background: #4a9eff !important;
    transform: none !important;
    box-shadow: none !important;
}

.scroll-to-top.show,
#scrollToTop.scroll-to-top.show {
    position: fixed !important;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    right: 30px !important;
}

.scroll-to-top i {
    font-size: 22px !important;
}

/* Dokunmatik (≤1200): yüzen canlı destek — güçlü seçiciler (body.dark-mode .canli-destek-label vb. ezer) */
@media (max-width: 1024px) {
    body.dark-mode #scrollToBottom.scroll-to-bottom,
    body.light-mode #scrollToBottom.scroll-to-bottom,
    body #scrollToBottom.scroll-to-bottom,
    button#scrollToBottom,
    body.dark-mode .canli-destek-label,
    body.light-mode .canli-destek-label,
    .light-mode .canli-destek-label,
    body .canli-destek-label,
    #canliDestekLabel {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .scroll-to-top,
    .scroll-to-top.show {
        right: 16px !important;
        bottom: 96px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .scroll-to-top i {
        font-size: 18px !important;
    }
}