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

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

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

    /* Her li */
    .sidebar-menu .menu-item {
        position: relative;
        width: 100%;
    }

    /* Link */
    .sidebar-menu .menu-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px 10px calc(12px + (var(--lvl, 0) * 16px));
        color: #121212;
        text-decoration: none;
        user-select: none;
        /* ÖNEMLİ: background artık linkin kendisinde yok */
        background: transparent;
        transition: color .18s ease, transform .18s ease;
        z-index: 0; /* çizgi üstte kalsın */
    }

        /* Title alanı: okun yazıya binmemesi için */
        .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 {
            /* background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(0,0,0,.10), rgba(0,0,0,0) 55%); */
            color: #ff0000;
        }

    /* Active (seçili sayfa) */
    .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%);
        /* border-right: 1px solid #dbdbdb; */
        color: #111;
        /* box-shadow: 0 1px 0 rgba(0,0,0,.04); */
        font-weight: 600;
    }

    /* Açık parent */
    .sidebar-menu .menu-item.open > .menu-link {
        /* background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgb(0 0 0 / 11%), rgba(0, 0, 0, 0) 55%); */
        color: #060606;
    }

    /* Arrow (ABSOLUTE YOK -> yazıya yapışmaz) */
    .sidebar-menu .arrow {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        margin-left: auto; /* sağa it */
        display: grid;
        place-items: center;
        opacity: .85;
        transform: rotate(0deg);
        transition: transform .18s ease;
    }

    /* Açıkken arrow döner */
    .sidebar-menu .menu-item.open > .menu-link .arrow {
        transform: rotate(90deg);
    }

    /* Submenu (JS slide ile aç/kapa) */
    .sidebar-menu .submenu {
        display: none;
        padding: 4px 0 6px;
        position: relative;
        isolation: isolate; /* z-index katmanını düzgün ayırır */
    }

        /* 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; /* hover/active background üstünde kalsın */
            pointer-events: none;
        }

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

.wave-effect {
    overflow: hidden;
}

/* Kalıcı soft glow (aktif/open için) */


/* aktif + open durumunda glow hep hafif kalsın */
.sidebar-menu .menu-item.active > .menu-link.wave-effect::before,
.sidebar-menu .menu-item.open > .menu-link.wave-effect::before {
    opacity: .55;
}

/* Tıklama ripple */
.wave-effect::hover {
    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;
}

.wave-effect.is-waving::after {
    opacity: 1;
}

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

/* =========================
   FIX: ACTIVE vs OPEN PRIORITY
   (Sadece çakışmayı çözer)
========================= */

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