/**
 * Dil seçici: el (mouse) + top sürükleme demosu
 * Masaüstü offcanvas + mobil drawer
 */

.lang-toggle-modern {
    overflow: visible;
}

.toggle-switch-btn {
    position: relative;
    overflow: visible !important;
}

.toggle-switch-btn .interaction-hint,
.mobile-drawer__language-hint.interaction-hint {
    position: absolute !important;
    top: 50% !important;
    left: 12px !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    pointer-events: none !important;
    opacity: 0;
    transform: translateY(-50%);
    animation: langHandDemoTr 3.4s ease-in-out 0.6s infinite !important;
}

.toggle-switch-btn .interaction-hint.hint-en,
.mobile-drawer__language-hint.interaction-hint.hint-en {
    left: auto !important;
    right: 12px !important;
    animation-name: langHandDemoEn !important;
}

.toggle-switch-btn .interaction-hint i,
.mobile-drawer__language-hint.interaction-hint i {
    font-size: 22px !important;
    color: #fff !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
    transform: rotate(-18deg);
}

/* Top (handle) scroll/sürükleme demosu — elle senkron */
.toggle-switch-btn:not(.is-dragging) .toggle-handle:not(.slided) {
    animation: langKnobDemoTr 3.4s ease-in-out 0.6s infinite;
}

.toggle-switch-btn:not(.is-dragging) .toggle-handle.slided {
    animation: langKnobDemoEn 3.4s ease-in-out 0.6s infinite;
}

.toggle-switch-btn.is-dragging .toggle-handle,
.toggle-switch-btn.is-dragging .interaction-hint,
.toggle-switch-btn:hover .interaction-hint,
.hint-lang-hidden .toggle-switch-btn .interaction-hint,
.hint-lang-hidden .mobile-drawer__language-hint.interaction-hint,
.hint-lang-hidden .toggle-switch-btn .toggle-handle {
    animation: none !important;
}

.hint-lang-hidden .toggle-switch-btn .interaction-hint,
.hint-lang-hidden .mobile-drawer__language-hint.interaction-hint {
    display: none !important;
}

/* Hover'da el kaybolsun ama top demo dursun (masaüstü) */
.toggle-switch-btn:hover:not(.is-dragging) .toggle-handle:not(.slided) {
    animation: langKnobDemoTr 3.4s ease-in-out 0.6s infinite;
}

.toggle-switch-btn:hover:not(.is-dragging) .toggle-handle.slided {
    animation: langKnobDemoEn 3.4s ease-in-out 0.6s infinite;
}

@keyframes langHandDemoTr {
    0% {
        opacity: 0;
        transform: translate(10px, 14px) translateY(-50%) scale(0.92);
    }
    12% {
        opacity: 1;
        transform: translate(10px, 10px) translateY(-50%) scale(1);
    }
    28%,
    34% {
        opacity: 1;
        transform: translate(0, 0) translateY(-50%) scale(0.88);
    }
    52%,
    58% {
        opacity: 1;
        transform: translate(22px, 0) translateY(-50%) scale(0.88);
    }
    74% {
        opacity: 1;
        transform: translate(0, 0) translateY(-50%) scale(1);
    }
    88%,
    100% {
        opacity: 0;
        transform: translate(0, 8px) translateY(-50%) scale(0.95);
    }
}

@keyframes langHandDemoEn {
    0% {
        opacity: 0;
        transform: translate(-10px, 14px) translateY(-50%) scale(0.92);
    }
    12% {
        opacity: 1;
        transform: translate(-10px, 10px) translateY(-50%) scale(1);
    }
    28%,
    34% {
        opacity: 1;
        transform: translate(0, 0) translateY(-50%) scale(0.88);
    }
    52%,
    58% {
        opacity: 1;
        transform: translate(-22px, 0) translateY(-50%) scale(0.88);
    }
    74% {
        opacity: 1;
        transform: translate(0, 0) translateY(-50%) scale(1);
    }
    88%,
    100% {
        opacity: 0;
        transform: translate(0, 8px) translateY(-50%) scale(0.95);
    }
}

@keyframes langKnobDemoTr {
    0%,
    22% {
        transform: translateX(0) scale(1);
    }
    28%,
    34% {
        transform: translateX(0) scale(0.9);
    }
    52%,
    58% {
        transform: translateX(22px) scale(0.9);
    }
    74%,
    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes langKnobDemoEn {
    0%,
    22% {
        transform: translateX(22px) scale(1);
    }
    28%,
    34% {
        transform: translateX(22px) scale(0.9);
    }
    52%,
    58% {
        transform: translateX(0) scale(0.9);
    }
    74%,
    100% {
        transform: translateX(22px) scale(1);
    }
}

/* Mobil: el + top birlikte, soft glow */
@media (max-width: 991px) {
    .mobile-drawer__language-hint.interaction-hint {
        width: 30px;
        height: 30px;
        left: 11px !important;
        animation: langHandDemoTr 3s ease-in-out 0.5s infinite !important;
    }

    .mobile-drawer__language-hint.interaction-hint.hint-en {
        left: auto !important;
        right: 11px !important;
        animation-name: langHandDemoEn !important;
    }

    .mobile-drawer__language-hint.interaction-hint i {
        font-size: 20px !important;
        color: #fff !important;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    }

    .mobile-drawer__language-toggle.toggle-switch-btn:not(.is-dragging) .toggle-handle:not(.slided) {
        animation: langKnobDemoTr 3s ease-in-out 0.5s infinite, mobile-drawer-language-glow 2.2s ease-in-out infinite !important;
    }

    .mobile-drawer__language-toggle.toggle-switch-btn:not(.is-dragging) .toggle-handle.slided {
        animation: langKnobDemoEn 3s ease-in-out 0.5s infinite, mobile-drawer-language-glow 2.2s ease-in-out infinite !important;
    }

    .mobile-drawer__language-toggle.toggle-switch-btn.is-dragging .toggle-handle,
    .hint-lang-hidden .mobile-drawer__language-toggle .toggle-handle {
        animation: mobile-drawer-language-glow 2.2s ease-in-out infinite !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toggle-switch-btn .interaction-hint,
    .mobile-drawer__language-hint.interaction-hint,
    .toggle-switch-btn .toggle-handle {
        animation: none !important;
    }

    .toggle-switch-btn .interaction-hint,
    .mobile-drawer__language-hint.interaction-hint {
        opacity: 0.85;
        transform: translateY(-50%);
    }
}