/* TAPS Top Menu Category Dropdown V14.7 */

.top-detail-nav {
    overflow: visible !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* Kategori kapsayıcı */
.top-category {
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Üst menüde görünen sadece kategori */
.top-category-btn {
    height: 100% !important;
    padding: 0 clamp(14px, 1.15vw, 22px) !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    font-family: var(--taps-font-menu, inherit) !important;
    font-size: clamp(12px, .78vw, 14px) !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: color .2s ease, background .2s ease, text-shadow .2s ease !important;
}

.top-category-btn::after {
    content: "⌄" !important;
    font-size: 12px !important;
    opacity: .76 !important;
    transform: translateY(-1px) !important;
    transition: transform .2s ease, opacity .2s ease !important;
}

.top-category:hover .top-category-btn,
.top-category.is-open .top-category-btn {
    color: var(--taps-color-primary, #00d6ff) !important;
    background: linear-gradient(180deg, rgba(0,214,255,.08), rgba(0,214,255,.025)) !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--taps-color-primary, #00d6ff) 32%, transparent) !important;
}

.top-category:hover .top-category-btn::after,
.top-category.is-open .top-category-btn::after {
    transform: rotate(180deg) translateY(1px) !important;
    opacity: 1 !important;
}

/* Açılır içerik */
.top-category-menu {
    position: absolute !important;
    top: calc(100% + 0px) !important;
    left: 0 !important;
    min-width: 270px !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    padding: 12px !important;
    border-radius: 0 0 22px 22px !important;
    border: 1px solid rgba(0,214,255,.18) !important;
    border-top: 1px solid rgba(0,214,255,.28) !important;
    background:
        linear-gradient(180deg, rgba(5, 15, 30, .96), rgba(3, 9, 19, .92)),
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--taps-color-primary, #00d6ff) 18%, transparent), transparent 34%) !important;
    box-shadow:
        0 24px 54px rgba(0,0,0,.36),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 34px color-mix(in srgb, var(--taps-color-primary, #00d6ff) 18%, transparent) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(.98) !important;
    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease !important;
    z-index: 120 !important;
}

.top-category:hover .top-category-menu,
.top-category:focus-within .top-category-menu,
.top-category.is-open .top-category-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Dropdown içindeki hizmetler */
.top-category-menu a {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
    color: rgba(255,255,255,.88) !important;
    text-decoration: none !important;
    font-family: var(--taps-font-body, inherit) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: .01em !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    white-space: normal !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease !important;
}

.top-category-menu a::before {
    content: attr(data-index) !important;
    color: var(--taps-color-primary, #00d6ff) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    opacity: .9 !important;
}

.top-category-menu a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(0,214,255,.12), rgba(255,255,255,.035)) !important;
    border-color: rgba(0,214,255,.20) !important;
    transform: translateX(4px) !important;
}

/* Light mode */
html[data-theme="light"] .top-category-btn {
    color: var(--taps-light-header-text, #07111f) !important;
    border-left-color: rgba(7,17,31,.08) !important;
}

html[data-theme="light"] .top-category:hover .top-category-btn,
html[data-theme="light"] .top-category.is-open .top-category-btn {
    color: var(--taps-light-active-menu, #00bfe8) !important;
    background: linear-gradient(180deg, rgba(0,191,232,.10), rgba(0,191,232,.025)) !important;
}

html[data-theme="light"] .top-category-menu {
    border-color: rgba(0,191,232,.18) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,251,.94)),
        radial-gradient(circle at 20% 0%, rgba(0,191,232,.12), transparent 34%) !important;
    box-shadow:
        0 24px 54px rgba(8,20,36,.14),
        0 0 0 1px rgba(255,255,255,.55) inset,
        0 0 34px rgba(0,191,232,.12) !important;
}

html[data-theme="light"] .top-category-menu a {
    color: rgba(7,17,31,.82) !important;
}

html[data-theme="light"] .top-category-menu a:hover {
    color: #07111f !important;
    background: linear-gradient(135deg, rgba(0,191,232,.12), rgba(7,17,31,.025)) !important;
    border-color: rgba(0,191,232,.20) !important;
}

/* Dar ekranlarda kategori alanı yatay kayabilir */
@media (max-width: 1280px) {
    .top-category-btn {
        padding: 0 13px !important;
        font-size: 12px !important;
    }

    .top-category-menu {
        min-width: 245px !important;
    }
}

@media (max-width: 980px) {
    .top-detail-nav {
        max-width: 44vw !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none !important;
    }

    .top-detail-nav::-webkit-scrollbar {
        display: none !important;
    }

    .top-category {
        position: static !important;
    }

    .top-category-menu {
        left: auto !important;
        right: 12px !important;
    }
}