/* ==============================================
   CUSTOM MENU STYLES - Clean & Simple Design
   Tamamen yeni, basit ve düzgün tasarım
   ============================================== */

/* SIFIRLAMA - Tüm gereksiz stilleri kaldır */
@media (min-width: 992px) {

    /* KRİTİK: Tüm :before pseudo-elementleri tamamen kapat */
    .app-sidebar .slide-menu.child1.mega-slide-menu-onefr.without-icon .slide:before,
    .app-sidebar .slide-menu.child1.mega-slide-menu-onefr.without-icon .slide:hover:before,
    .app-sidebar .slide-menu.child1.mega-slide-menu-onefr.without-icon .slide.active:before,
    .slide-menu.child1 .slide:before,
    .slide-menu.child1 .slide:after,
    .slide-menu.child1 .slide .side-menu__item:before,
    .slide-menu.child1 .slide .side-menu__item:after {
        display: none !important;
        content: none !important;
        background: none !important;
        border: none !important;
    }

    /* KRİTİK: Base padding'leri tamamen sıfırla */
    .app-sidebar .slide-menu.child1 .slide,
    .slide-menu.child1 .slide {
        padding: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Dropdown Container - Temiz ve Basit */
    .slide.has-sub .slide-menu.child1 {
        background: #ffffff !important;
        border-radius: 12px !important;
        padding: 12px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        min-width: 280px !important;
        width: 280px !important;
        margin-top: 4px !important;
        margin-left: 0 !important;
        overflow: visible !important;
        position: absolute !important;
        z-index: 9999 !important;
    }

    /* Menü öğeleri container */
    .slide-menu.child1 .slide {
        margin-bottom: 6px !important;
        list-style: none !important;
    }

    .slide-menu.child1 .slide:last-child {
        margin-bottom: 0 !important;
    }

    /* Menü öğesi - TEK KATMAN, basit yapı */
    .slide-menu.child1 .slide .side-menu__item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        border: none !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        cursor: pointer !important;
        position: relative !important;
    }

    /* Hover durumu - Lacivert (tema rengi) */
    .slide-menu.child1 .slide .side-menu__item:hover {
        background: #140c3a !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(20, 12, 58, 0.4) !important;
    }

    /* İkon container - Basit */
    .slide-menu.child1 .avatar.header__dropavatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        transition: transform 0.2s ease !important;
    }

    .slide-menu.child1 .avatar.header__dropavatar i {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* İkon renkleri - Hepsi Lacivert (Tema rengi - TAM renk) */
    .slide-menu.child1 .bg-secondary-transparent,
    .slide-menu.child1 .bg-pink-transparent,
    .slide-menu.child1 .bg-teal-transparent {
        background: #140c3a !important; /* Tam lacivert - şeffaf değil */
        border: 1px solid #0f0829 !important;
    }

    .slide-menu.child1 .bg-secondary-transparent i,
    .slide-menu.child1 .bg-pink-transparent i,
    .slide-menu.child1 .bg-teal-transparent i {
        color: #ffffff !important; /* Beyaz ikon */
    }

    /* Hover'da ikon - Mavi arka plan, beyaz çerçeve */
    .slide-menu.child1 .slide .side-menu__item:hover .avatar.header__dropavatar {
        background: #6366f1 !important; /* Mavi arka plan */
        border: 2px solid #818cf8 !important; /* Açık mavi çerçeve */
        transform: scale(1.05) !important;
    }

    .slide-menu.child1 .slide .side-menu__item:hover .avatar i {
        color: #ffffff !important; /* Beyaz ikon */
    }

    /* Yazı alanı - Basit yapı */
    .slide-menu.child1 .d-lg-flex {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .slide-menu.child1 .d-lg-flex .me-3 {
        margin: 0 !important;
    }

    .slide-menu.child1 .flex-grow-1 {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Başlık */
    .slide-menu.child1 h6.d-block {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.3 !important;
        transition: color 0.2s ease !important;
    }

    .slide-menu.child1 .slide .side-menu__item:hover h6.d-block {
        color: #ffffff !important;
    }

    /* Açıklama */
    .slide-menu.child1 .tx-default {
        font-size: 12px !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        transition: color 0.2s ease !important;
    }

    .slide-menu.child1 .slide .side-menu__item:hover .tx-default {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Ana menü hover - Mavi renk */
    .slide.has-sub:hover > .side-menu__item {
        color: #6366f1 !important;
    }

    .slide.has-sub:hover > .side-menu__item .side-menu__angle {
        transform: rotate(180deg) !important;
        color: #6366f1 !important;
    }

    /* Focus durumu - Mavi renk */
    .slide-menu.child1 .slide .side-menu__item:focus {
        outline: 2px solid #6366f1 !important;
        outline-offset: 2px !important;
    }

    /* Açılma animasyonu */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .slide.has-sub:hover > .slide-menu.child1 {
        animation: fadeIn 0.2s ease-out;
    }
}

/* Mobil görünüm */
@media (max-width: 991px) {
    .slide-menu.child1 .slide {
        padding: 0 !important;
    }

    .slide-menu.child1 .slide .side-menu__item {
        padding: 12px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .slide-menu.child1 .slide .side-menu__item:hover {
        background: rgba(99, 102, 241, 0.15) !important;
    }

    .slide-menu.child1 h6.d-block {
        color: #ffffff !important;
        font-size: 14px !important;
    }

    .slide-menu.child1 .tx-default {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 12px !important;
    }

    .slide-menu.child1 .avatar.header__dropavatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 8px !important;
    }

    .slide-menu.child1 .d-lg-flex {
        gap: 12px !important;
    }
}

/* TÜM MEGA MENÜLER için aynı süper tasarım! (Hosting, VPS, vs.) */
@media (min-width: 992px) {

    /* KRİTİK: Tüm :before pseudo-elementleri tamamen kapat */
    .slide.has-sub .mega-slide-menu .slide:before,
    .slide.has-sub .mega-slide-menu .slide:hover:before,
    .slide.has-sub .mega-slide-menu .slide.active:before,
    .slide.has-sub .mega-slide-menu .slide:after {
        display: none !important;
        content: none !important;
        background: none !important;
        border: none !important;
    }

    /* KRİTİK: Base padding'leri tamamen sıfırla */
    .slide.has-sub .mega-slide-menu .slide {
        padding: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Mega menu container - Temiz ve basit */
    .slide.has-sub .mega-slide-menu {
        background: #ffffff !important;
        border-radius: 12px !important;
        padding: 12px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        overflow: visible !important;
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        z-index: 9999 !important;
    }

    /* Mega menu öğeleri container */
    .slide.has-sub .mega-slide-menu .slide {
        margin-bottom: 6px !important;
        list-style: none !important;
    }

    .slide.has-sub .mega-slide-menu .slide:last-child {
        margin-bottom: 0 !important;
    }

    /* Mega menu öğesi - TEK KATMAN, basit yapı */
    .slide.has-sub .mega-slide-menu .slide .side-menu__item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        border: none !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        cursor: pointer !important;
        position: relative !important;
    }

    /* Hover durumu - Lacivert */
    .slide.has-sub .mega-slide-menu .slide .side-menu__item:hover {
        background: #140c3a !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(20, 12, 58, 0.4) !important;
    }

    /* İkon container */
    .slide.has-sub .mega-slide-menu .avatar.header__dropavatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        transition: transform 0.2s ease !important;
    }

    .slide.has-sub .mega-slide-menu .avatar.header__dropavatar i {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* TÜM İkon renkleri - Hepsi Lacivert */
    .slide.has-sub .mega-slide-menu .bg-secondary-transparent,
    .slide.has-sub .mega-slide-menu .bg-pink-transparent,
    .slide.has-sub .mega-slide-menu .bg-teal-transparent,
    .slide.has-sub .mega-slide-menu .bg-primary-transparent,
    .slide.has-sub .mega-slide-menu .bg-success-transparent,
    .slide.has-sub .mega-slide-menu .bg-warning-transparent,
    .slide.has-sub .mega-slide-menu .bg-danger-transparent,
    .slide.has-sub .mega-slide-menu .bg-info-transparent {
        background: #140c3a !important;
        border: 1px solid #0f0829 !important;
    }

    .slide.has-sub .mega-slide-menu .bg-secondary-transparent i,
    .slide.has-sub .mega-slide-menu .bg-pink-transparent i,
    .slide.has-sub .mega-slide-menu .bg-teal-transparent i,
    .slide.has-sub .mega-slide-menu .bg-primary-transparent i,
    .slide.has-sub .mega-slide-menu .bg-success-transparent i,
    .slide.has-sub .mega-slide-menu .bg-warning-transparent i,
    .slide.has-sub .mega-slide-menu .bg-danger-transparent i,
    .slide.has-sub .mega-slide-menu .bg-info-transparent i {
        color: #ffffff !important;
    }

    /* Hover'da ikon - Mavi arka plan, beyaz çerçeve */
    .slide.has-sub .mega-slide-menu .slide .side-menu__item:hover .avatar.header__dropavatar {
        background: #6366f1 !important;
        border: 2px solid #818cf8 !important;
        transform: scale(1.05) !important;
    }

    .slide.has-sub .mega-slide-menu .slide .side-menu__item:hover .avatar i {
        color: #ffffff !important;
    }

    /* Yazı alanı */
    .slide.has-sub .mega-slide-menu .d-lg-flex {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .slide.has-sub .mega-slide-menu .d-lg-flex .me-3 {
        margin: 0 !important;
    }

    .slide.has-sub .mega-slide-menu .flex-grow-1 {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Başlık */
    .slide.has-sub .mega-slide-menu h6.d-block {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.3 !important;
        transition: color 0.2s ease !important;
    }

    .slide.has-sub .mega-slide-menu .slide .side-menu__item:hover h6.d-block {
        color: #ffffff !important;
    }

    /* Açıklama */
    .slide.has-sub .mega-slide-menu .tx-default {
        font-size: 12px !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        transition: color 0.2s ease !important;
    }

    .slide.has-sub .mega-slide-menu .slide .side-menu__item:hover .tx-default {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Açılma animasyonu */
    .slide.has-sub:hover > .mega-slide-menu {
        animation: fadeIn 0.2s ease-out;
    }

    /* ============================================
       MEGA MENU - İç İçe Yapı (Hosting, VPS)
       ============================================ */

    /* Mega menu genel container */
    .mega-slide-menu .mega-menu {
        display: flex !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* İç div'ler (her kolon) */
    .mega-slide-menu .mega-menu > div {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* İç ul'ler */
    .mega-slide-menu .mega-menu > div > ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Menu Label (Başlıklar) - C Panel Hosting, Reseller Hosting */
    .mega-slide-menu .menu-label {
        padding: 8px 12px !important;
        margin: 0 0 8px 0 !important;
        background: rgba(99, 102, 241, 0.08) !important;
        border-radius: 6px !important;
        border-left: 3px solid #6366f1 !important;
    }

    .mega-slide-menu .menu-label i {
        color: #6366f1 !important;
    }

    .mega-slide-menu .menu-label span {
        color: #6366f1 !important;
        font-weight: 600 !important;
        font-size: 13px !important;
    }

    /* İç li'ler - menu-label olanlar */
    .mega-slide-menu .mega-menu > div > ul > li:has(.menu-label) {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* İç slide'lar için padding override */
    .mega-slide-menu .mega-menu .slide {
        padding: 0 !important;
        margin-bottom: 6px !important;
    }

    /* Mega menu içindeki tüm ikonlar için ek border kaldırma */
    .mega-slide-menu .mega-menu .avatar.header__dropavatar {
        border: 1px solid #0f0829 !important;
    }

    /* Mega menu daha geniş olsun */
    .slide.has-sub .mega-slide-menu.mega-slide-menu-onefr {
        min-width: 600px !important;
        width: auto !important;
        max-width: 800px !important;
    }

    /* Sanal Sunucu Menüsü - Sadece genişlik (pozisyon otomatik) */
    .slide.has-sub .mega-slide-menu.mega-slide-menu-onefr:has(.mega-menu > div:only-child) {
        min-width: 380px !important;
        width: 380px !important;
        max-width: 380px !important;
    }

    /* VPS tek kolon - merkezde hizala */
    .mega-slide-menu .mega-menu > div:only-child {
        flex: 1 !important;
        max-width: 100% !important;
    }

    /* VPS menü öğeleri - biraz daha fazla padding */
    .mega-slide-menu .mega-menu > div:only-child .slide .side-menu__item {
        padding: 13px !important;
    }

    /* VPS başlık - özel stil */
    .mega-slide-menu .mega-menu > div:only-child .menu-label {
        text-align: center !important;
        justify-content: center !important;
        border-left: none !important;
        border-bottom: 3px solid #6366f1 !important;
    }

    /* Tüm bg-purple-transparent da lacivert olsun */
    .slide.has-sub .mega-slide-menu .bg-purple-transparent {
        background: #140c3a !important;
        border: 1px solid #0f0829 !important;
    }

    .slide.has-sub .mega-slide-menu .bg-purple-transparent i {
        color: #ffffff !important;
    }

    .slide.has-sub .mega-slide-menu .slide .side-menu__item:hover .bg-purple-transparent {
        background: #6366f1 !important;
        border: 2px solid #818cf8 !important;
    }

    .slide.has-sub .mega-slide-menu .slide .side-menu__item:hover .bg-purple-transparent i {
        color: #ffffff !important;
    }
}