/**
 * Mega menü — menu_tip=mega olan ana menüler için geniş açılır panel.
 * Alt menüler menu_grup alanına göre sütunlanır.
 */

@media only screen and (min-width: 1200px) {

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item {
        position: static;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 28px 0;
        margin: 0;
        border-top: 3px solid var(--theme-color, #007bff);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        transform: translate(0, 0);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel > li.vi-mega-column {
        flex: 0 1 220px;
        min-width: 180px;
        max-width: 280px;
        padding: 0 24px;
        border-right: 1px solid rgba(0, 0, 0, 0.06);
        position: relative;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel > li.vi-mega-column:last-child {
        border-right: none;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel .vi-mega-col-title {
        display: block;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #1e2637;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--theme-color, #007bff);
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel .vi-mega-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel .vi-mega-links > li > a {
        display: block;
        padding: 8px 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
        color: #4a5568;
        text-decoration: none;
        transition: color 0.2s ease, padding-left 0.2s ease;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel .vi-mega-links > li > a:hover {
        color: var(--theme-color, #007bff);
        padding-left: 6px;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel .vi-mega-links > li > a:before {
        display: none !important;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item:hover > ul.vi-mega-panel {
        opacity: 1;
        visibility: visible;
        display: flex;
    }

    #site-header-menu #site-navigation .menu li.vi-mega-item .vi-mega-panel .vi-mega-links,
    #site-header-menu #site-navigation .menu li.vi-mega-item .vi-mega-panel .vi-mega-links ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
        transform: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media only screen and (max-width: 1199px) {

    .ttm-header-style-03 .menu-dropdown-mobile-offset {
        margin-top: 50px;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel.vi-submenu-open {
        display: block !important;
        max-height: none;
        opacity: 1;
        visibility: visible;
    }

    #site-header-menu #site-navigation .menu li.vi-mega-item > ul.vi-mega-panel.vi-submenu-open .vi-mega-links {
        display: block !important;
        position: static;
        visibility: visible;
        opacity: 1;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel {
        padding-left: 0;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel > li.vi-mega-column {
        border-bottom: 1px solid rgba(93, 101, 118, 0.12);
        padding: 8px 0 4px;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel .vi-mega-col-title {
        display: block;
        font-weight: 700;
        font-size: 13px;
        padding: 8px 18px 4px 30px;
        color: inherit;
        opacity: 0.85;
    }

    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel .vi-mega-links > li > a {
        padding: 8px 18px 8px 40px;
    }
}

/* ---------------------------------------------------------------
   Header hizalama düzeltmesi (Tema 1 / ttm-header-style-03)
   Sorun: üst barlar (kampanya/iletişim) Bootstrap .container kullanırken
   menü .auto-container (sabit 1200px) kullanıyordu. Geniş ekranda (örn.
   1920px) menü+logo, üst bara göre içeride/dar kalıp "kaymış" görünüyordu.
   Çözüm: menünün .auto-container genişliğini Bootstrap .container ile
   aynı kırılma noktalarında eşitle ki sol/sağ kenarlar üst barlarla
   birebir hizalansın.
   --------------------------------------------------------------- */
@media (min-width: 1200px) {
    #masthead .auto-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    #masthead .auto-container { max-width: 1320px; }
}

/* ---------------------------------------------------------------
   Menü öğelerini eşit aralıklı yay (Tema 3 / ttm-header-style-02)
   Sorun: geniş ekranda (1920px) menü öğeleri sola yığılıp sağda
   büyük boş alan bırakıyordu ("sola kaymış" görünüm).
   Çözüm: üst seviye menü listesini flex + space-between ile bar
   genişliğine eşit aralıklarla dağıt (ilk öğe solda, son öğe sağda).
   Sadece masaüstünde; 1199px altında mobil menü olduğu gibi kalır.
   --------------------------------------------------------------- */
@media (min-width: 1200px) {
    /* Masaüstünde hamburger gizli — menü çubuğunu sağa itmesin */
    #masthead .ttm-menu-toggle{display:none}

    /* Açılır / mega alt menü içerik alanının üstünde kalsın */
    #site-header-menu #site-navigation .menu ul ul,
    #site-header-menu #site-navigation .menu > ul > li.vi-mega-item > ul.vi-mega-panel{
        z-index:1001;
    }

    .ttm-header-style-02 #site-header-menu #site-navigation .menu > ul.dropdown {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
    }
}

/* Widget satırını da (logo + Çalışma Saatleri / 7-24 / Acil Yardım)
   eşit aralıklı dağıt; aksi halde hepsi logoya yapışıp sağda boşluk
   kalıyordu. Logo solda, son kutu sağda. */
@media (min-width: 1200px) {
    .ttm-header-style-02 .ttm-widget_header .d-flex.flex-row {
        justify-content: space-between;
    }
    .ttm-header-style-02 .ttm-widget_header .site-branding.mr-auto {
        margin-right: 0 !important;
    }
}

/* Tema 3 menü çubuğuna İletişim butonu: menü ortada kalsın, buton
   sağ uçta dursun. #site-navigation'ı flex yapıp menüye esnek alan,
   butona sabit alan veriyoruz (masaüstü). */
@media (min-width: 1200px) {
    .ttm-header-style-02 #site-header-menu #site-navigation {
        display: flex;
        align-items: center;
    }
    .ttm-header-style-02 #site-header-menu #site-navigation nav#menu {
        flex: 1 1 auto;
    }
    .ttm-header-style-02 .ttm-menu-cta-02 {
        flex: 0 0 auto;
        padding-left: 20px;
    }
}
/* İletişim butonu ortak stili (Tema 2 ve Tema 3) */
.ttm-menu-cta-02 .vimn-cta-btn {
    display: inline-block;
    background: var(--theme-color);
    color: #fff;
    padding: 9px 24px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.ttm-menu-cta-02 .vimn-cta-btn:hover {
    opacity: .9;
    color: #fff;
}

/* Tema 2 (ttm-header-style-01) menü çubuğuna İletişim butonu:
   menü sağda kalsın, buton onun da sağında. nav#menu'yu flex yapıp
   menü + butonu sağa yaslıyoruz, dikeyde ortalıyoruz (masaüstü). */
@media (min-width: 1200px) {
    .ttm-header-style-01 #site-header-menu #site-navigation nav#menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 18px;
    }
    .ttm-header-style-01 #site-header-menu #site-navigation nav#menu > ul.dropdown {
        float: none;
    }
    .ttm-header-style-01 .ttm-menu-cta-02 {
        flex: 0 0 auto;
    }
}