/* HC Galeri · Üç header menüsü kesin hover düzeltmesi v3 */

/*
 * pointer:fine kullanılmaz. Masaüstü genişliğinde CSS :hover doğrudan paneli
 * görünür yapar. Böylece JS veya tarayıcı işaretçi raporu sorunlu olsa bile
 * menüler açılır.
 */
@media (min-width: 901px) {
    details.notification-menu,
    details[data-notification-menu],
    details.user-menu,
    details.header-color-similarity-menu,
    details[data-header-color-similarity-menu] {
        position: relative !important;
        isolation: isolate;
    }

    details.notification-menu::after,
    details[data-notification-menu]::after,
    details.user-menu::after,
    details.header-color-similarity-menu::after,
    details[data-header-color-similarity-menu]::after {
        content: "";
        position: absolute;
        top: calc(100% - 1px);
        right: 0;
        z-index: 199;
        display: block;
        height: 22px;
        opacity: 0;
        pointer-events: auto;
    }

    details.notification-menu::after,
    details[data-notification-menu]::after {
        width: min(410px, calc(100vw - 20px));
    }

    details.user-menu::after {
        width: min(640px, calc(100vw - 24px));
    }

    details.header-color-similarity-menu::after,
    details[data-header-color-similarity-menu]::after {
        width: 246px;
    }

    details.notification-menu:hover > .notification-menu-panel,
    details.notification-menu:focus-within > .notification-menu-panel,
    details[data-notification-menu]:hover > .notification-menu-panel,
    details[data-notification-menu]:focus-within > .notification-menu-panel {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    details.user-menu:hover > .user-menu-panel,
    details.user-menu:focus-within > .user-menu-panel {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    details.header-color-similarity-menu:hover > .header-color-similarity-panel,
    details.header-color-similarity-menu:focus-within > .header-color-similarity-panel,
    details[data-header-color-similarity-menu]:hover > .header-color-similarity-panel,
    details[data-header-color-similarity-menu]:focus-within > .header-color-similarity-panel {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    details.notification-menu:hover > summary,
    details.notification-menu:focus-within > summary,
    details[data-notification-menu]:hover > summary,
    details[data-notification-menu]:focus-within > summary,
    details.user-menu:hover > summary,
    details.user-menu:focus-within > summary,
    details.header-color-similarity-menu:hover > summary,
    details.header-color-similarity-menu:focus-within > summary,
    details[data-header-color-similarity-menu]:hover > summary,
    details[data-header-color-similarity-menu]:focus-within > summary {
        color: var(--primary) !important;
        border-color: color-mix(in srgb, var(--primary) 42%, var(--border)) !important;
        background: var(--primary-soft) !important;
    }

    .notification-menu-panel,
    .user-menu-panel,
    .header-color-similarity-panel {
        transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
    }
}