/* HC Galeri · Bildirim ve kullanıcı menüsü hover geçişi v1 */

@media (hover: hover) and (pointer: fine) {
    .notification-menu,
    .user-menu {
        isolation: isolate;
    }

    /*
     * Tetikleyici ile mutlak konumlu panel arasındaki 10–12 px boşlukta
     * imlecin menü dışına çıkmasını engelleyen görünmez geçiş alanı.
     */
    .notification-menu::after,
    .user-menu::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        display: block;
        height: 15px;
        opacity: 0;
        pointer-events: none;
    }

    .notification-menu::after {
        z-index: 129;
        width: min(390px, calc(100vw - 20px));
    }

    .user-menu::after {
        z-index: 119;
        width: min(620px, calc(100vw - 24px));
    }

    .notification-menu[open]::after,
    .user-menu[open]::after {
        pointer-events: auto;
    }

    .notification-menu[open] > .notification-menu-trigger,
    .user-menu[open] > summary {
        color: var(--primary);
        border-color:
            color-mix(in srgb, var(--primary) 42%, var(--border));
        background: var(--primary-soft);
    }

    .notification-menu-panel,
    .user-menu-panel {
        pointer-events: auto;
    }
}