/*
 * HC Galeri · Keşfet Düzeni geniş hover paneli v1.5
 * - Kapalı görünüm: 8px çentik
 * - Açık görünüm: toplam 200px
 * - Çentik, panelin doğal yüksekliğini alır
 * - Panel alt açıklamaları açık durumda her zaman görünür
 */
@media (min-width: 601px) {
    .hc-explore-sort-drawer[data-explore-sort-drawer] {
        position: fixed !important;
        z-index: 8400 !important;
        top: 50% !important;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: 8px 192px !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(82vh, 520px) !important;
        transform: translateY(-50%) !important;
        overflow: visible !important;
        pointer-events: none !important;
        isolation: isolate !important;
        box-sizing: border-box !important;
    }

    .hc-explore-sort-drawer[data-explore-sort-drawer]
    > .hc-explore-sort-handle[data-explore-sort-handle] {
        position: relative !important;
        z-index: 3 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        inset: auto !important;
        display: block !important;
        width: 8px !important;
        min-width: 8px !important;
        max-width: 8px !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-right: 1px solid color-mix(in srgb, var(--border) 86%, transparent) !important;
        border-radius: 0 7px 7px 0 !important;
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--surface) 94%, transparent),
                color-mix(in srgb, var(--surface) 86%, transparent)
            ) !important;
        box-shadow:
            0 1px 0 color-mix(in srgb, var(--border) 82%, transparent),
            3px 10px 28px color-mix(in srgb, var(--text) 7%, transparent) !important;
        cursor: pointer !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        transition: background .18s ease, box-shadow .18s ease !important;
        box-sizing: border-box !important;
    }

    .hc-explore-sort-drawer[data-explore-sort-drawer]
    > .hc-explore-sort-handle[data-explore-sort-handle] > span {
        position: absolute !important;
        top: 50% !important;
        left: 2px !important;
        width: 3px !important;
        height: 18px !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--text) 32%, transparent) !important;
        transform: translateY(-50%) !important;
    }

    .hc-explore-sort-drawer[data-explore-sort-drawer]
    > .hc-explore-sort-panel[data-explore-sort-panel] {
        position: relative !important;
        z-index: 2 !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        inset: auto !important;
        display: block !important;
        width: 192px !important;
        min-width: 192px !important;
        max-width: 192px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(82vh, 520px) !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid var(--border) !important;
        border-left: 0 !important;
        border-radius: 0 16px 16px 0 !important;
        color: var(--text) !important;
        background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
        box-shadow: 0 16px 38px color-mix(in srgb, #000 20%, transparent) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(-14px) !important;
        pointer-events: none !important;
        backdrop-filter: blur(14px) saturate(125%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .18s ease !important;
        box-sizing: border-box !important;
    }

    .hc-explore-sort-drawer[data-explore-sort-drawer]:hover
    > .hc-explore-sort-panel[data-explore-sort-panel],
    .hc-explore-sort-drawer[data-explore-sort-drawer]:focus-within
    > .hc-explore-sort-panel[data-explore-sort-panel],
    .hc-explore-sort-drawer[data-explore-sort-drawer].is-open
    > .hc-explore-sort-panel[data-explore-sort-panel] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    .hc-explore-sort-drawer[data-explore-sort-drawer]:hover
    > .hc-explore-sort-handle[data-explore-sort-handle],
    .hc-explore-sort-drawer[data-explore-sort-drawer]:focus-within
    > .hc-explore-sort-handle[data-explore-sort-handle],
    .hc-explore-sort-drawer[data-explore-sort-drawer].is-open
    > .hc-explore-sort-handle[data-explore-sort-handle] {
        border-radius: 0 !important;
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--surface) 98%, transparent),
                color-mix(in srgb, var(--surface) 90%, transparent)
            ) !important;
    }

    /* Panel açıldığında bütün açıklamalar görünür kalır. */
    .hc-explore-sort-drawer[data-explore-sort-drawer]
    .hc-explore-sort-option small {
        display: block !important;
        margin-top: 2px !important;
        color: var(--muted) !important;
        font-size: 8.5px !important;
        line-height: 1.35 !important;
    }

    .hc-explore-sort-drawer[data-explore-sort-drawer]
    .hc-explore-sort-option {
        min-height: 46px !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .hc-explore-sort-drawer[data-explore-sort-drawer]
    > .hc-explore-sort-panel[data-explore-sort-panel],
    .hc-explore-sort-drawer[data-explore-sort-drawer]
    > .hc-explore-sort-handle[data-explore-sort-handle] {
        transition: none !important;
    }
}