/* ============================================================
   index-two'daki kategori mega menüsünün
   index.html "Kategorilere Göz At" açılır menüsüne uyarlanması

   - Sadece .yal-mega-panel (yalnızca index.html) için geçerli
   - index.html'in orijinal 9 ikon kartı yorum satırı olarak korunur
   - Masaüstü: alt menü listenin sağına açılır (hover)
   - Mobil   : alt menü öğenin altında akış içinde açılır (tıklama)
   ============================================================ */

/* --- 1) Panel genişliği: 300px liste + 16px dolgu x2 = 332px ---
   NOT: Bootstrap'taki .w-100 kuralı "width:100% !important" içerir.
   O yüzden width değerleri !important ile geçersiz kılınmak zorunda. */
.category-dropdown.yal-mega-panel {
    min-width: 332px;
    max-width: 332px;
    width: 332px !important;
}

/* --- 2) Liste: kaydırma kaldırılır ki alt menü sağa taşabilsin --- */
.category-dropdown .yal-mega {
    width: 100%;
    max-height: none;
    overflow: visible;
}

/* --- 3) Kategori satırı --- */
.category-dropdown .yal-mega > li.has-submenus-submenu > a {
    border-radius: 4px;
    transition: background-color .15s ease;
}

/* --- 4) Alt menü paneli (masaüstü: panelin sağına açılır) --- */
.category-dropdown .yal-mega .submenus-submenu {
    inset-inline-start: 100%;
    inset-block-start: 0;
    width: 300px;
    max-height: 400px;
    height: auto;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* --- 5) Görünürlük: hover VEYA JS'in eklediği sınıf --- */
.category-dropdown .yal-mega li:hover > .submenus-submenu,
.category-dropdown .yal-mega .submenus-submenu.yal-mega-sub--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* --- 6) İmleç listeden panele geçerken alt menü kapanmasın ---
   Pseudo-element li'nin parçası sayılır; hover alanını 16px uzatır. */
@media (min-width: 991.99px) {
    .category-dropdown .yal-mega > li.has-submenus-submenu::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-block-end: 0;
        inset-inline-end: 0;
        width: 16px;
    }
}

/* ============================================================
   MOBİL (991.98px ve altı) — sağa taşma olmasın diye akış içinde
   ============================================================ */
@media (max-width: 991.98px) {
    .category-dropdown.yal-mega-panel {
        min-width: 0;
        max-width: min(320px, calc(100vw - 32px));
        width: min(320px, calc(100vw - 32px)) !important;
    }

    .category-dropdown .yal-mega > li.has-submenus-submenu::after {
        content: none;
    }

    .category-dropdown .yal-mega .submenus-submenu {
        position: static;
        width: 100%;
        max-height: none;
        height: auto;
        display: none;
        visibility: visible;
        opacity: 1;
        box-shadow: none;
        background: var(--gray-50, #f8f9fa);
        border-radius: 4px;
        margin-block: 4px 8px;
    }

    .category-dropdown .yal-mega .submenus-submenu.yal-mega-sub--open {
        display: block;
    }

    /* Dokunmatikte hover yok: tıklama alt menüyü açsın */
    .category-dropdown .yal-mega > li.has-submenus-submenu > a {
        cursor: pointer;
    }

    /* --- Açılır panel mobilde güvenilir biçimde üstte ve dokunulabilir olsun --- */
    .menu-category-wrapper {
        position: relative;
        z-index: 60;
    }

    .category-dropdown.yal-mega-panel {
        z-index: 1050;
        max-height: min(70vh, 520px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* Dokunma alanı: satır yüksekliği ve hedefi büyüt */
    .category-dropdown .yal-mega > li.has-submenus-submenu > a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Panel kapalıyken dokunmayı yakalamasın (hayalet tıklama olmasın) */
    .category-dropdown:not(.active) {
        pointer-events: none;
    }

    .category-button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}