/* WCAG: Enter'a basıldığında eklenecek class ile menüyü görünür yap */
/* Masaüstünde klavye ile açılan menü */
@media (min-width: 992px) {
    .main-menu > ul > li.menu-item-has-children.klavye-acik > ul.sub-menu {
        display: block !important;
        top: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Mobilde klavye ile açılan menü */
@media (max-width: 991px) {
    .main-menu > ul > li.menu-item-has-children.klavye-acik > ul.sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
    }
}
/* Klavye ile gezerken hangi menüde olduğunu net görmek için dış çizgi ekle */
/*.main-menu > ul > li.menu-item-has-children > a:focus {
    color: #9932f5 !important;
    outline: 2px dashed #9932f5 !important;
    outline-offset: 4px;
}*/

/* WOW.js Erişilebilirlik Yaması: Klavye kullanıcıları için animasyonlu gizli ögeleri her zaman erişilebilir yap */
.wow {
    visibility: visible !important;
    animation-name: none !important;
}


/* ==================================================================== */
/* WCAG: FORM VE SELECT2 ELEMANLARI İÇİN YÜKSEK KONTRASTLI ODAK (FOCUS) */
/* ==================================================================== */

/* WCAG: SADECE KLAVYE KULLANILIRKEN VE SADECE SELECT2 İÇİN YÜKSEK KONTRAST */
body.klavye-kullaniliyor .select2-container--focus .select2-selection,
body.klavye-kullaniliyor .select2-container--open .select2-selection,
body.klavye-kullaniliyor .select2-search__field:focus {
    box-shadow: none !important; /* Gölgeyi kapalı tutuyoruz */
    /*border: 1.5px solid red !important;  1px ile 2px arası ideal dengeli kalınlık */
    /* En ince 1.2px olsun, ekrana göre esnesin, ama asla 2px'i geçmesin 
            border: clamp(1.2px, 0.1vw, 2px) solid red !important;*/
    border: clamp(1.8px, 0.15vw, 2.2px) solid red !important;
    outline: none; /* Bazı tarayıcıların varsayılan dış çizgisini sıfırlar */
}

/* WCAG: SweetAlert2 Pop-up Butonları İçin Klavye Odak (Focus) Görünürlüğü 
        body.klavye-kullaniliyor .swal2-actions button:focus {
            outline: clamp(1.8px, 0.15vw, 2.2px) solid #002b81 !important; // Spor İstanbul'un lacivert rengi 
            outline-offset: 3px !important;
            box-shadow: 0 0 15px rgba(0, 43, 129, 0.6) !important;
        }
        */

/* WCAG: Tüm Input, Select, Textarea, Radio ve Checkboxlar için Klavye Odak Çerçevesi */
body.klavye-kullaniliyor .form-control:focus,
body.klavye-kullaniliyor .form-select:focus,
body.klavye-kullaniliyor .btn:focus,
body.klavye-kullaniliyor a:focus,
body.klavye-kullaniliyor .form-check-input:focus {
    /* outline: 3px solid #009ef7 !important;  Mavi, kalın ve net bir çerçeve */
    /* outline: clamp(1.8px, 0.15vw, 2.2px) solid #009ef7 !important;  Mavi, kalın ve net bir çerçeve */
    outline: clamp(1.8px, 0.15vw, 2.2px) solid #002b81 !important;
    outline-offset: 1px !important;
    /*box-shadow: 0 0 12px rgba(0, 158, 247, 0.6) !important;  Şık bir parlama efekti */
    /* border-color: #009ef7 !important; */
    border-color: #002b81 !important;
}


/* WCAG: Anket / Likert Ölçeği Gizli Radyo Butonları Odak Çerçevesi */
body.klavye-kullaniliyor .likert-row .d-contents input[type="radio"]:focus + label .likert-circle,
body.klavye-kullaniliyor .likert-row .d-contents input[type="radio"]:focus-visible + label .likert-circle {
    outline: clamp(1.8px, 0.15vw, 2.2px) solid #002b81 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
}




body.klavye-kullaniliyor .location-card:focus-within {
    outline: clamp(1.8px, 0.15vw, 2.2px) solid #002b81 !important;
    outline-offset: 4px !important;
}
body.klavye-kullaniliyor .kvkk-gecmis-kart:focus-within {
    outline: clamp(1.8px, 0.15vw, 2.2px) solid #002b81 !important;
    outline-offset: 4px !important;
}