/* =========================
   SIDEBAR MENU (FINAL)
========================= */

.sidebar-menu,
.sidebar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu {
    padding: 6px 0;
}

    .sidebar-menu .menu-item {
        position: relative;
        width: 100%;
    }

    /* Link + ok aynı satır */
    .sidebar-menu .menu-link-row {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
    }

    /* Link */
    .sidebar-menu .menu-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px 10px calc(12px + (var(--lvl, 0) * 16px));
        color: #121212;
        text-decoration: none;
        user-select: none;
        background: #00000000;
        transition: color .18s ease, transform .18s ease;
        z-index: 0;
    }

    /* Alt kategorisi olmayan normal link */
    .sidebar-menu .menu-item:not(.has-children) > .menu-link {
        width: 100%;
    }

    /* Alt kategorisi olanlarda link alanı */
    .sidebar-menu .menu-link-row > .menu-link {
        padding-right: 6px;
    }

    /* Title alanı */
    .sidebar-menu .menu-link .title {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Hover */
    .sidebar-menu .menu-link:hover {
        color: #0d225f;
    }

    /* Active - normal link */
    .sidebar-menu .menu-item.active > .menu-link {
        background: radial-gradient(circle at 100% 0%, rgb(0 0 0 / 3%), rgb(175 44 44 / 0%) 100%);
        color: #111;
        font-weight: 600;
    }

    /* Active - yeni row yapısı */
    .sidebar-menu .menu-item.active > .menu-link-row > .menu-link {
        background: radial-gradient(circle at 100% 0%, rgb(0 0 0 / 3%), rgb(175 44 44 / 0%) 100%);
        color: #111;
        font-weight: 600;
    }

    /* Açık parent - normal eski ihtimal */
    .sidebar-menu .menu-item.open > .menu-link {
        color: #060606;
    }

    /* Açık parent - yeni row yapısı */
    .sidebar-menu .menu-item.open > .menu-link-row > .menu-link {
        color: #060606;
    }

    /* Ok butonu */
    .sidebar-menu .menu-arrow-toggle {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border: 0;
        outline: 0;
        padding: 0;
        margin: 0 4px 0 0;
        background: transparent;
        color: #121212;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: .9;
        transition: color .18s ease, background-color .18s ease;
    }

        .sidebar-menu .menu-arrow-toggle:hover {
            color: #ff0000;
            background-color: rgba(0, 0, 0, .035);
            border-radius: 50%;
        }

    /* Arrow */
    .sidebar-menu .arrow {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        opacity: .85;
        transform: rotate(0deg);
        transition: transform .18s ease;
    }

    /* Eski yapı için açıkken arrow döndürme */
    .sidebar-menu .menu-item.open > .menu-link .arrow {
        transform: rotate(90deg);
    }

    /* Yeni yapı için açıkken arrow döndürme */
    .sidebar-menu .menu-item.open > .menu-link-row .menu-arrow-toggle .arrow {
        transform: rotate(90deg);
    }

    /* Submenu */
    .sidebar-menu .submenu {
        display: none;
        padding: 4px 0 6px;
        position: relative;
        isolation: isolate;
    }

        /* JS open class verdiğinde, JS slide animasyonu yoksa da açık kalabilsin */

        /* Submenu item spacing */
        .sidebar-menu .submenu > .menu-item {
            margin: 2px 0;
        }

        /* İç seviyelerde ayırt edici çizgi */
        .sidebar-menu .submenu::before {
            content: "";
            position: absolute;
            left: calc(18px + (var(--lvl, 0) * 16px));
            top: 6px;
            bottom: 8px;
            width: 1px;
            background: rgba(0, 0, 0, .06);
            z-index: 5;
            pointer-events: none;
        }

/* =========================
   WAVE / RIPPLE EFFECT
========================= */

.wave-effect {
    overflow: hidden;
}

    /* Ripple pseudo element */
    .wave-effect::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(0, 0, 0, .10), rgba(0, 0, 0, 0) 55%);
        opacity: 0;
        transform: scale(1.05);
        transition: opacity .35s ease;
        pointer-events: none;
        z-index: 0;
    }

    /* Tıklama ripple */
    .wave-effect.is-waving::after {
        opacity: 1;
    }

/* Yazı/ikonlar her zaman üstte */
.sidebar-menu .menu-link > * {
    position: relative;
    z-index: 1;
}

/* Aktif/open durumda hafif vurgu */
.sidebar-menu .menu-item.active > .menu-link.wave-effect::after,
.sidebar-menu .menu-item.open > .menu-link.wave-effect::after,
.sidebar-menu .menu-item.active > .menu-link-row > .menu-link.wave-effect::after,
.sidebar-menu .menu-item.open > .menu-link-row > .menu-link.wave-effect::after {
    opacity: .08;
}

/* =========================
   FIX: ACTIVE vs OPEN PRIORITY
========================= */

/* active + open aynı anda olursa ACTIVE baskın olsun - eski yapı */
.sidebar-menu .menu-item.active.open > .menu-link {
    background: radial-gradient(circle at 100% 0%, rgb(13 34 95), rgb(11 27 69) 100%);
    color: #ffffff;
    font-weight: 600;
}

/* active + open aynı anda olursa ACTIVE baskın olsun - yeni yapı */
.sidebar-menu .menu-item.active.open > .menu-link-row > .menu-link {
    background: radial-gradient(circle at 100% 0%, rgb(0 0 0 / 3%), rgb(175 44 44 / 0%) 100%);
    color: #111;
    font-weight: 600;
}