/* ================================================================= */
/* GLOBAL UI - HEADER VE MOBİL AKSİYONLAR STİLLERİ                */
/* ================================================================= */

/* 1. Masaüstü Header Stilleri (769px ve üstü) */
/* ----------------------------------------------------------------- */

.desktop-search-form {
    display: flex;
    align-items: center;
    background-color: #f0f2f5;
    border: 1px solid #e0e2e7;
    border-radius: 50px;
    padding: 0 15px;
    transition: box-shadow 0.2s ease-in-out;
}

    .desktop-search-form:focus-within {
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        border-color: #80bdff;
    }

    .desktop-search-form .zmdi-search {
        font-size: 18px;
        color: #888;
    }

    .desktop-search-form input.form-control {
        border: none;
        background: transparent;
        box-shadow: none;
        padding-left: 10px;
    }

.header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

    .header-actions .zmdi {
        font-size: 1.5rem;
        cursor: pointer;
        vertical-align: middle;
    }

.sepet-container {
    position: relative;
}

    .sepet-container .badge {
        position: absolute;
        top: -5px;
        right: -10px;
        font-size: 10px;
        padding: 3px 6px;
        border-radius: 50%;
        background-color: #e53935;
        color: white;
    }

/* 2. Mobil Arama Overlay Stilleri (Tüm ekran boyutları) */
/* ----------------------------------------------------------------- */

#mobil-arama-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

    #mobil-arama-overlay.aktif {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

#mobil-arama-kapat {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    color: #333;
    background: none;
    border: none;
}

#mobil-arama-overlay .overlay-content {
    width: 90%;
}

#mobil-arama-formu {
    display: flex;
    flex-direction: column;
}

#mobil-arama-input {
    width: 100%;
    padding: 15px 10px;
    font-size: 1.5rem;
    border: none;
    border-bottom: 2px solid #333;
    background: transparent;
    text-align: center;
    margin-bottom: 30px;
}

    #mobil-arama-input:focus {
        outline: none;
        border-bottom-color: #007bff;
    }

#mobil-arama-formu .btn {
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
}


/* 3. Mobil Header Stilleri (768px ve altı) */
/* ----------------------------------------------------------------- */

/* Konum: global-ui.css */

@media (max-width: 768px) {

    /* Header'a üstten boşluk vererek sabit arama butonunun altında kalmasını engelle */
    .site-header {
       /* padding-top: 70px !important;*/
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        /* Logoyu sola yasla */
        .site-header .logo {
            text-align: left;
            margin: 0; /* Ortalamayı iptal et */
        }

            /* Masaüstü için logo boyutunu ayarla (isteğe bağlı) */
            .site-header .logo img {
                max-height: 45px;
            }

    /* Soldaki menü butonunu konumlandır */
    .header-top-left .mobile_menu {
        float: left; /* Bootstrap grid sistemiyle uyumlu olması için */
        margin-left: 5px;
    }

    /* Sabit mobil butonlar için genel stil */
    .btn-mobil-sabit {
        position: fixed;
        z-index: 1030;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        transition: transform 0.2s ease-in-out;
        text-decoration: none;
        border: none;
    }

        .btn-mobil-sabit:active {
            transform: scale(0.95);
        }

        .btn-mobil-sabit .zmdi {
            font-size: 26px;
            color: white;
        }

        .btn-mobil-sabit .badge {
            position: absolute;
            top: -2px;
            right: -2px;
        }

        /* Mobil Arama Butonu (Sol Üst) */
        /*.btn-mobil-sabit.sol-ust {
            top: 15px;
            left: 15px;
            background-color: #007bff;*/ /* Mavi */
        /*}*/

        /* Mobil Sepet Butonu (Sağ Alt) */
        .btn-mobil-sabit.sag-alt {
            bottom: 15px;
            right: 15px;
            background-color: #27ae60; /* Yeşil */
        }

    /* ======================================================= */
    /* NİHAİ MENÜ BUTONU KONUMLANDIRMA DÜZELTMESİ              */
    /* ======================================================= */

    /* 1. Header satırını referans noktası yap */
    .site-header .row {
        position: relative;
    }

    /* 2. Temanın sorunlu 'position: fixed' kuralını ez ve butonu doğru yere taşı */
    /*.mobile_menu {
        position: absolute !important;*/ /* 'fixed' yerine 'absolute' kullanarak header'a bağlı kalmasını sağlıyoruz */
        /*top: 70px;*/ /* Header'ın üst boşluğuna göre hizala */
        /*right: 15px;*/ /* Sağdan boşluk */
        /*left: auto !important;*/ /* Temanın olası 'left' değerini iptal et */
        /*float: none !important;*/ /* Temanın olası 'float' değerini iptal et */
    /*}*/
}
/* ================================================================= */
/* MASAÜSTÜ YERLEŞİM DÜZELTMELERİ                    */
/* ================================================================= */

/* Sadece 769px ve daha geniş ekranlar için geçerlidir (Masaüstü) */
@media (min-width: 769px) {

    /* 1. SOL KENAR BOŞLUĞU SORUNUNU GİDERME */
    /* ---------------------------------------------------- */
    /* Hem yapışkan header'ı hem de ana içerik alanını kapsayan container'lara
       soldan boşluk vererek menünün altında kalmalarını engelliyoruz. */

    .container-fluid.sticky-top,
    section.content {
        padding-left: 85px !important; /* Sol menünün genişliği kadar boşluk. Gerekirse bu değeri artırıp azaltabilirsiniz. */
    }


    /* 2. LOGO BOYUTUNU KÜÇÜLTME */
    /* ---------------------------------------------------- */
    /* Header içindeki logonun maksimum yüksekliğini düşürüyoruz. */
    .header-top-left .logo img {
        max-height: 35px; /* Logoyu biraz daha küçülttük */
    }
}

/* ================================================================= */
/* NİHAİ MOBİL OVERLAY MENÜ STİLLERİ (TÜMÜ)           */
/* ================================================================= */

/* 1. Sol menünün (sidebar) varsayılan durumunu ayarla */
aside#leftsidebar.sidebar {
    z-index: 10000 !important; /* Her şeyin en üstünde olmasını zorla */
    transform: translateX(-100%); /* Başlangıçta ekranın solunda tamamen gizli */
    transition: transform 0.4s ease !important; /* Yumuşak kayma animasyonu */
    /* Temanın 'left:-250px' kuralını ezmek için başlangıç pozisyonunu sıfırla */
    left: 0 !important;
}

/* 2. Menü açıldığında GÖRÜNÜR OLMAYA ZORLA */
body:not(.ls-closed) aside#leftsidebar.sidebar {
    transform: translateX(0) !important; /* Menüyü ekranın içine kaydır */
}

/* 3. Overlay (arka planı karartan katman) stilleri */
.overlay {
    z-index: 9998 !important;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* 4. Menü açıldığında overlay'i göster */
body:not(.ls-closed) .overlay {
    opacity: 1;
    visibility: visible;
}

/* ================================================================= */
/* NİHAİ MOBİL OVERLAY MENÜ ÇÖZÜMÜ (v4 - İÇERİK SABİTLEME)  */
/* ================================================================= */

/* 1. Sol menünün (sidebar) ve overlay'in katmanını (z-index) ayarla */
aside#leftsidebar.sidebar {
    z-index: 10000 !important;
}

.overlay {
    z-index: 9998 !important;
}


/* 2. SADECE MOBİLDE çalışacak ana kural bloğu */
@media (max-width: 991px) {
    body.ls-toggle-menu:not(.ls-closed) .content,
    body.ls-toggle-menu:not(.ls-closed) .container-fluid.sticky-top {
        margin-left: 0 !important; /* SOL'dan ittirmeyi engeller */
        margin-right: 0 !important; /* SAĞ'dan daralmayı engeller */
    }

    /* 1. Header satırını referans noktası yap */
    .site-header .row {
        position: relative;
    }

    /* 2. Temanın sorunlu 'position: fixed' kuralını ez ve butonu doğru yere taşı */
    .mobile_menu {
        position: absolute !important; /* 'fixed' yerine 'absolute' kullanarak header'a bağlı kalmasını sağlıyoruz */
        top: 70px; /* Header'ın üst boşluğuna göre hizala */
        right: 15px; /* Sağdan boşluk */
        left: auto !important; /* Temanın olası 'left' değerini iptal et */
        float: none !important; /* Temanın olası 'float' değerini iptal et */
    }
}

/* ================================================================= */
/* MOBİL MENÜ SON RÖTUŞ (ARKA PLAN RENGİ)             */
/* ================================================================= */

/* Sol menünün arka planını opak beyaz yapar ve
   arkasındaki içeriğin görünmesini engeller. */
aside#leftsidebar.sidebar {
    background-color: #ffffff !important;
}

/* ================================================================= */
/* YENİ TAM EKRAN MOBİL MENÜ STİLLERİ (Alt Menüler Dahil) */
/* ================================================================= */

/* Tam Ekran Menü Ana Katmanı */
#fullscreen-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto; /* İçerik taşarsa kaydırma çubuğu çıksın */

    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

    #fullscreen-menu-overlay.aktif {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

/* Kapatma Butonu */
#fullscreen-menu-kapat {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    color: #333;
    background: none;
    border: none;
    z-index: 11001;
}

/* Menü Linklerinin Konteyneri */
#fullscreen-menu-overlay .overlay-menu-content {
    width: 90%;
    text-align: left; /* Linkleri sola yasla */
    padding: 60px 0; /* Üstten ve alttan boşluk */
}

/* Klonlanan menü listesi stilleri */
#fullscreen-menu-overlay .list {
    list-style: none;
    padding: 0;
}

    #fullscreen-menu-overlay .list a {
        display: flex; /* İkon ve metni yan yana getirmek için */
        align-items: center;
        padding: 12px 10px;
        font-size: 1.3rem;
        color: #333;
        text-decoration: none;
        font-weight: 400;
        transition: color 0.2s ease;
        border-bottom: 1px solid #f0f0f0; /* Linkler arasına ayırıcı çizgi */
    }

        #fullscreen-menu-overlay .list a:hover {
            color: #007bff;
        }

        #fullscreen-menu-overlay .list a i {
            font-size: 1.5rem;
            margin-right: 15px;
            width: 25px; /* İkonların hizalı durması için */
            text-align: center;
        }

/* Alt Menü (ml-menu) stilleri */
#fullscreen-menu-overlay .ml-menu {
    display: none; /* Başlangıçta gizli */
    list-style: none;
    padding-left: 25px; /* İçeriye doğru girinti */
    background-color: #f8f9fa; /* Hafif gri arka plan */
}

    #fullscreen-menu-overlay .ml-menu a {
        font-size: 1.1rem; /* Alt menü linkleri biraz daha küçük */
        padding-left: 30px; /* Daha fazla girinti */
        border-bottom: none; /* Alt menüde çizgi olmasın */
    }

        #fullscreen-menu-overlay .ml-menu a:before {
            /* Temanın orijinal ok işaretini kaldır */
            display: none;
        }

/* Alt menüsü olan linklerin sonuna ok işareti ekle */
#fullscreen-menu-overlay .menu-toggle::after {
    content: '\f2fb'; /* zmdi-chevron-right */
    font-family: 'Material-Design-Iconic-Font';
    margin-left: auto; /* Oku en sağa yasla */
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

/* Menü açıldığında oku aşağı çevir */
#fullscreen-menu-overlay li.open > .menu-toggle::after {
    transform: rotate(90deg);
}

/* Artık mobilde kullanmayacağımız eski sidebar'ı tamamen gizleyelim */
@media (max-width: 991px) {
    aside#leftsidebar.sidebar {
        display: none !important;
    }
}



/*Yeni durum kodları*/

/* Konum: global-ui.css */

/* ... Dosyanın diğer stilleri (masaüstü arama, sabit butonlar vb.) aynı kalabilir ... */

/* ======================================================= */
/* YENİ TAM EKRAN MOBİL MENÜ STİLLERİ                      */
/* ======================================================= */

/* Tam Ekran Menü Ana Katmanı */
#mobil-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 12000; /* Her şeyden üstte */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px; /* Üstten boşluk */
    overflow-y: auto;
    /* Başlangıçta gizli */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    #mobil-menu-overlay.acik { /* 'aktif' yerine 'acik' kullanalım, çakışmasın */
        opacity: 1;
        visibility: visible;
    }

/* Kapatma Butonu */
#mobil-menu-kapat {
    position: fixed; /* Ekrana göre sabit */
    top: 15px;
    right: 15px;
    font-size: 28px;
    color: #333;
    background: none;
    border: none;
    z-index: 12001;
    cursor: pointer;
}

/* Menü Linklerinin Konteyneri */
#mobil-menu-overlay .overlay-menu-content {
    width: 90%;
    text-align: left;
}

/* Klonlanan menü listesi stilleri */
#mobil-menu-overlay .list {
    list-style: none;
    padding: 0;
}

    #mobil-menu-overlay .list a {
        display: flex;
        align-items: center;
        padding: 12px 10px;
        font-size: 1.3rem;
        color: #333;
        text-decoration: none;
        font-weight: 400;
        border-bottom: 1px solid #f0f0f0;
    }

    #mobil-menu-overlay .list > li > a i {
        font-size: 1.5rem;
        margin-right: 20px;
        width: 30px;
        text-align: center;
    }

/* Alt Menü (ml-menu) stilleri */
#mobil-menu-overlay .ml-menu {
    display: none; /* Başlangıçta gizli */
    list-style: none;
    padding-left: 20px;
    border-left: 3px solid #007bff;
    margin: 10px 0 10px 25px;
    background-color: #f8f9fa;
}

    #mobil-menu-overlay .ml-menu a {
        font-size: 1.1rem;
        padding: 10px 15px;
        border-bottom: none;
    }

        #mobil-menu-overlay .ml-menu a:before {
            display: none;
        }

/* Alt menüsü olan linklerin sonundaki ok işareti */
#mobil-menu-overlay .menu-toggle::after {
    content: '\f2fb'; /* zmdi-chevron-right */
    font-family: 'Material-Design-Iconic-Font';
    margin-left: auto;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

#mobil-menu-overlay li.open > .menu-toggle::after {
    transform: rotate(90deg);
}

/* Son olarak, artık mobilde KESİNLİKLE kullanmayacağımız eski sidebar'ı gizleyelim */
@media (max-width: 991px) {
    aside#leftsidebar.sidebar {
        display: none !important;
    }

    .site-header .logo {
        text-align: center;
    }
    /* Mobil için logoyu ortala */
}


@media (max-width: 768px) {

    /* ======================================================= */
    /* MOBİL MENÜ BUTONU HİZALAMA DÜZELTMESİ                   */
    /* ======================================================= */

    /*#mobil-menu-tetikleyici {
        position: fixed;*/ /* Arama butonu gibi ekrana sabitle */
        /*top: 15px;*/ /* Arama butonu ile aynı dikey konum */
        /*right: 15px;*/ /* Kenardan aynı boşluk */
        /*z-index: 1030;*/ /* Diğer sabit butonlarla aynı katman */
        /* Görünümünü diğer sabit butonlarla aynı yapmak için */
        /*width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }*/

    /* Header satırının kendisini dikeyde ortala */
    .site-header .row {
        align-items: center;
        min-height: 60px; /* Header için minimum yükseklik */
    }

    /* Header'daki ikon butonları için genel stil */
   /* #mobil-arama-tetikleyici,
    #mobil-menu-tetikleyici {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 5px;
    }*/


    #mobil-arama-tetikleyici,
    #mobil-menu-tetikleyici {
        width: 50px;
        height: 50px;
        border-radius: 50%; /* Daire şekli */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border: none;
        transition: transform 0.2s ease-in-out;
    }

        #mobil-arama-tetikleyici:active,
        #mobil-menu-tetikleyici:active {
            transform: scale(0.95);
        }

        /* İkonların (içindeki resim) boyutu ve rengi */
        #mobil-arama-tetikleyici .zmdi,
        #mobil-menu-tetikleyici .zmdi {
            font-size: 24px;
            color: white; /* İkon rengi beyaz */
        }


    /* --- RENKLENDİRME --- */

    /* Varsayılan (B2C / Misafir) Tema: Turuncu */
    #mobil-arama-tetikleyici,
    #mobil-menu-tetikleyici {
        background-color: #FF9948; /* Ana turuncu renk */
    }

    /* B2B / Kurumsal Tema: Yeşil */
    /* Bu kural, JS'in ekleyeceği .theme-b2b-header sınıfı ile tetiklenir */
    .theme-b2b-header #mobil-arama-tetikleyici,
    .theme-b2b-header #mobil-menu-tetikleyici {
        background-color: #28a745; /* Ana yeşil renk */
    }

        /* İkonların boyutunu ve rengini ayarla */
        #mobil-arama-tetikleyici .zmdi,
        #mobil-menu-tetikleyici .zmdi {
            font-size: 28px; /* İkonları büyüt */
            color: #333; /* İkon rengi */
        }

    /* Sol ikonu sola yasla */
    .col-3:first-child {
        text-align: left;
    }

    /* Sağ ikonu sağa yasla */
    .col-3:last-child .header-actions {
        justify-content: flex-end;
    }

}

@media (min-width: 769px) {
    /* Logoyu sola yasla */
    .site-header .logo {
        text-align: left;
        margin: 0; /* Ortalamayı iptal et */
    }

        /* Masaüstü için logo boyutunu ayarla (isteğe bağlı) */
        .site-header .logo img {
            max-height: 45px;
        }
}

/* --- MOBİL (768px ve altı) --- */
@media (max-width: 768px) {
    /* Logoyu ortala ve boyutunu ayarla */
    .site-header .logo {
        display: block;
        text-align: center;
        margin: 0 auto; /* Ortala */
    }

        .site-header .logo img {
            max-height: 40px; /* Mobil için logo yüksekliği */
            width: auto;
        }
}


/* Varsayılan (B2C / Misafir) Tema: Özel Turuncu */
#sepet-iconu-mobil.btn-mobil-sabit {
    background-color: #FF9948; /* Kullanıcının istediği özel turuncu tonu */
}

/* B2B / Kurumsal Tema: Yeşil */
/* Bu kural, JS'in ekleyeceği .theme-b2b-header sınıfı ile tetiklenir */
/*.theme-b2b-header ~ #sepet-iconu-mobil.btn-mobil-sabit {
    background-color: #28a745;*/ /* Diğer B2B ikonlarıyla aynı yeşil renk */
/*}*/



/* Varsayılan (B2C / Misafir) Tema: Özel Turuncu */
#sepet-iconu-mobil.btn-mobil-sabit {
    background-color: #FF9948;
}

/* B2B / Kurumsal Tema: Yeşil (DÜZELTİLMİŞ SEÇİCİ) */
/* Artık '~' yerine ' ' (boşluk) kullanarak doğru elementi hedefliyoruz */
.theme-b2b-header #sepet-iconu-mobil.btn-mobil-sabit {
    background-color: #28a745;
}

/* ======================================================= */
/* MOBİL SEPET İKONU İÇİN DİKKAT ÇEKİCİ SİNYAL ANİMASYONU   */
/* ======================================================= */

/* 1. Adım: Animasyonun kendisini tanımlıyoruz (Keyframes) */
@keyframes pulse-animation {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.5); /* Halkanın ne kadar büyüyeceği */
        opacity: 0;
    }
}

/* 2. Adım: Animasyonu uygulayacağımız sahte elementi (pseudo-element) hazırlıyoruz */
#sepet-iconu-mobil::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Animasyon: 'pulse-animation' adını kullan, 2 saniyede tamamlansın, sonsuz tekrar etsin */
    animation: pulse-animation 2s infinite;
    /* Katmanlama: Bu halka, ikonun arkasında kalmalı */
    z-index: 0;
}

/* 3. Adım: İkonun kendisinin (içindeki sepet resmi) animasyonun üzerinde kalmasını sağlıyoruz */
#sepet-iconu-mobil .zmdi {
    position: relative;
    z-index: 1;
}


/* 4. Adım: Anismasyonun rengini temaya göre ayarlıyoruz */

/* Varsayılan (B2C / Misafir) Tema: Turuncu sinyal */
#sepet-iconu-mobil::after {
    background-color: #FF9948;
}

/* B2B / Kurumsal Tema: Yeşil sinyal */
.theme-b2b-header #sepet-iconu-mobil::after {
    background-color: #28a745;
}