/* Page Banner Resim Boyut Düzeltmeleri */

/* Banner'ın genel stilini ayarla */
.page-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Resim boyutuna göre (1920x320 = 6:1 oranı) yükseklik hesapla */
.page-banner.bg_cover {
    /* Resmin tam sığması için contain kullan */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* 6:1 oranında yükseklik hesapla */
    height: calc(100vw / 6) !important;
    min-height: 250px !important;
    max-height: 400px !important;

    /* Gri arka plan ekle (resim tam kaplamadığı durumda) */
    background-color: #f8f9fa !important;
}

/* Responsive düzenlemeler */
@media (max-width: 1200px) {
    .page-banner.bg_cover {
        height: calc(100vw / 6) !important;
        min-height: 200px !important;
        max-height: 320px !important;
    }
}

@media (max-width: 768px) {
    .page-banner.bg_cover {
        height: calc(100vw / 6) !important;
        min-height: 150px !important;
        max-height: 250px !important;
    }
}

@media (max-width: 480px) {
    .page-banner.bg_cover {
        height: calc(100vw / 6) !important;
        min-height: 120px !important;
        max-height: 200px !important;
    }
}

/* İçeriği ortalamak için */
.page-banner .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-banner .row {
    width: 100%;
}

/* Content stilini ayarla */
.page-banner .page-banner-content {
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Yazı okunaklığı için hafif gölge */
.page-banner .page-banner-content h1,
.page-banner .page-banner-content .breadcrumb-link {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Alternatif: Resmi tam ekrana sığdır (crop edilebilir) */
.page-banner.bg-full-cover {
    background-size: cover !important;
    background-position: center center !important;
    height: 300px !important;
}

/* Alternatif: Resmi genişliğe sığdır */
.page-banner.bg-fit-width {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    height: calc(100vw / 6) !important;
    min-height: 200px !important;
    max-height: 400px !important;
}

/* ======================================
   MENÜ RENKLERİ DÜZELTMESİ
   ====================================== */



/* Ana menü linkleri */
.header-navigation .main-menu ul > li > a {
    color: #333333 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Menü hover efekti */
.header-navigation .main-menu ul > li:hover > a,
.header-navigation .main-menu ul > li.current > a {
    color: #e74c3c !important; /* Kırmızı vurgu rengi */
}



.header-navigation .main-menu .sub-menu li a {
    color: #333333 !important;
}

.header-navigation .main-menu .sub-menu li a:hover {
    color: #e74c3c !important;
}

/* Logo alanı */
.site-branding {
    background-color: transparent !important;
}

/* Mobile menü button */
.header-navigation .navbar-toggler {
    border-color: #333333 !important;
}

.header-navigation .navbar-toggler span {
    background-color: #333333 !important;
}


/* Current page vurgusu */
.header-navigation .main-menu ul > li.current > a {
    color: #e74c3c !important;
    position: relative;
}

.header-navigation .main-menu ul > li.current > a:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #e74c3c;
}

/* Responsive düzenlemeler */
@media (max-width: 768px) {
    .header-area.transparent-header {
        background-color: #ffffff !important;
    }

    .header-navigation .foodix-nav-menu.menu-on {
        background-color: #ffffff !important;
    }


}