/**
 * Demirkol Takım - Mobil Mega Menü CSS
 * Sadece mobil cihazlar için özel mega menü stilleri
 */

/* ========================================
   MOBİL MEGA MENÜ - SADECE KÜÇÜK EKRANLAR
   ======================================== */

   @media only screen and (max-width: 991px) {
    
    /* Mobil menüde mega menüyü gizle, normal dropdown gibi göster */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > .mega-menu {
        display: none !important;
    }
    
    /* Mobil menüde mega menü yapısını düz liste haline getir */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu {
        position: relative;
    }
    
    /* Mega menü parent link */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > a {
        position: relative;
        display: block;
        padding: 10px 20px;
        padding-right: 50px;
        font-size: 15px;
        font-weight: 500;
        color: #222;
        /* border-bottom: 1px solid #eee; */
    }
    
    /* Dropdown butonunu gizle, sadece link kullan */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu .dropdown-btn {
        display: none !important;
    }
    
    /* Mega menü parent'a ok ikonu ekle */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > a:after {
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
        pointer-events: none;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu.open > a:after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    /* Normal dropdown'lardaki dropdown-btn'i de gizle */
    .mobile-menu .menu-outer .navigation > li.dropdown .dropdown-btn {
        display: none !important;
    }
    
    /* Normal dropdown linklerine de ok ikonu ekle */
    .mobile-menu .menu-outer .navigation > li.dropdown > a {
        padding-right: 50px;
        position: relative;
    }
    
    .mobile-menu .menu-outer .navigation > li.dropdown > a:after {
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }
    
    .mobile-menu .menu-outer .navigation > li.dropdown.current > a:after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    /* Normal dropdown alt menüleri */
    .mobile-menu .menu-outer .navigation > li.dropdown > ul {
        display: none;
    }
    
    .mobile-menu .menu-outer .navigation > li.dropdown.current > ul {
        display: block;
    }
    
    /* Mega menü kategorilerini düz liste olarak göster */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background: #f8f9fa;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu.open > ul.mega-menu-mobile {
        display: block;
    }
    
    /* Ana kategoriler (Level 1) */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li {
        position: relative;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > strong {
        display: block;
        padding: 12px 20px;
        padding-left: 35px;
        font-size: 14px;
        font-weight: 600;
        color: var(--theme-color);
        background: #fff;
        cursor: pointer;
        position: relative;
    }
    
    /* Ana kategori ikonu */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > strong:before {
        content: "▸";
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
        font-size: 12px;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li.open > strong:before {
        transform: translateY(-50%) rotate(90deg);
    }
    
    /* Alt kategoriler listesi (Level 2) */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > ul {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background: #f0f2f5;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li.open > ul {
        display: block;
    }
    
    /* Alt kategori linkleri */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > ul > li {
        border-bottom: 1px solid #e8eaed;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > ul > li:last-child {
        border-bottom: none;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > ul > li > a {
        display: block;
        padding: 10px 20px;
        padding-left: 50px;
        font-size: 13px;
        color: #555;
        position: relative;
        transition: all 0.3s ease;
    }
    
    /* Alt kategori bullet */
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > ul > li > a:before {
        /* content: "•"; */
        position: absolute;
        left: 35px;
        color: #999;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > ul > li > a:hover {
        background: #fff;
        color: var(--theme-color);
        padding-left: 55px;
    }
    
    /* Desktop mega menüyü mobilde gizle */
    .mobile-menu .navigation > li.has-mega-menu > .mega-menu {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ana menüdeki mega menü overlay'ini mobilde gizle */
    .mega-menu-overlay {
        display: none !important;
    }
}

/* ========================================
   TABLET ve KÜÇÜK DESKTOP (992px - 1199px)
   ======================================== */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /* Tablet'te mega menü biraz daha küçük olsun */
    .main-menu .navigation > li.has-mega-menu > .mega-menu .mega-menu-inner {
        padding: 35px 3%;
        gap: 20px;
    }
    
    .main-menu .navigation > li.has-mega-menu > .mega-menu .mega-menu-column {
        max-width: 250px;
    }
    
    .main-menu .navigation > li.has-mega-menu > .mega-menu .mega-menu-image {
        height: 150px;
    }
    
    .main-menu .navigation > li.has-mega-menu > .mega-menu .mega-menu-item h4 {
        font-size: 15px;
    }
    
    .main-menu .navigation > li.has-mega-menu > .mega-menu .mega-menu-item ul li a {
        font-size: 13px;
    }
}

/* ========================================
   ÇOK KÜÇÜK MOBİL EKRANLAR (max 480px)
   ======================================== */

@media only screen and (max-width: 480px) {
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > a {
        font-size: 14px;
        padding: 10px 25px;
        color: #fff;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > strong {
        font-size: 13px;
        padding: 10px 15px;
        padding-left: 30px;
    }
    
    .mobile-menu .menu-outer .navigation > li.has-mega-menu > ul.mega-menu-mobile > li > ul > li > a {
        font-size: 12px;
        padding: 8px 15px;
        padding-left: 45px;
    }
}