/* ============================================================
   Mobil Header & Off-Canvas Menü
   Hamburger buton / off-canvas menü davranışı sitenin zaten var
   olan mobil-tablet eşiğinde (991px, menü zaten bu genişlikte
   hamburger'e dönüşüyordu) devreye giriyor; header'ın tek satıra
   sığan kompakt düzeni ise 767px altında uygulanıyor.
   ============================================================ */

/* Hamburger butonu - varsayılan (masaüstü) gizli */
#menu-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #2f3031;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
#menu-icon svg {
    width: 26px;
    height: 26px;
    display: block;
    pointer-events: none;
}

/* Kapatma (×) butonu sadece mobil off-canvas menüde görünür; masaüstünde
   varsayılan olarak gizli, aksi halde yatay menünün başında beliriyordu.
   (Özgüllük menu1.css'teki "#nav li" kuralıyla eşleşecek şekilde artırıldı.) */
#nav li.nav-close-item { display: none; }

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

    #menu-icon { display: flex; }

    /* Menü tetikleyicisi taşındığı için eski menü çubuğunun boşluğunu sıfırla */
    #header { margin-top: 0; }
    #nav-wrap { height: 0; margin: 0; padding: 0; }
    .menubg { margin: 0; padding: 0; }
    .nav-wrap2 { border: 0 none; box-shadow: 0 0 0 0; background: none; }

    /* Off-canvas arka plan karartması */
    #nav-overlay {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(0,0,0,.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease;
        z-index: 10000;
    }
    body.nav-open #nav-overlay { opacity: 1; visibility: visible; }

    /* Sağdan açılan off-canvas menü */
    #nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        float: none;
        height: 100vh;
        width: 280px;
        max-width: 82vw;
        background: #fff;
        box-shadow: -2px 0 16px rgba(0,0,0,.25);
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 10001;
        overflow-y: auto;
        padding: 56px 0 24px;
        margin: 0;
        display: block;
        border: none;
    }
    body.nav-open #nav { transform: translateX(0); }

    #nav li.nav-close-item {
        display: block;
        position: absolute;
        top: 4px;
        right: 4px;
        float: none;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    #nav-close {
        display: block;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 28px;
        font-weight: 400;
        background: none;
        border: none;
        color: #777;
        cursor: pointer;
    }
    #nav-close:hover { color: #c62027; }

    #nav li {
        float: none;
        clear: both;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eee;
        height: auto;
    }
    #nav li a {
        display: block;
        min-height: 44px;
        box-sizing: border-box;
        width: auto;
        height: auto;
        padding: 12px 16px !important;
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.3;
        text-align: left;
        text-transform: none;
        color: #2f3031;
        border: none;
    }
    #nav li a:hover, #nav li a:active { background: #f7f7f7; color: #c62027; }
    #nav li a span, #nav li a:after { display: none; }

    /* Menü açıkken arka planın kaymasını engelle */
    body.nav-open { overflow: hidden; }
}

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

    /* Kompakt tek satır header: logo solda, telefon ortada, hamburger sağda */
    .bannerbg { padding: 6px 0; }
    .bannerbg .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .bannerbg .container > div {
        float: none;
        width: auto;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    .bannerbg .LogoItem {
        margin: 0 !important;
        max-height: 34px;
        width: auto;
    }

    .bannerbg .Resimliyanmenu {
        margin: 0;
        padding: 0;
    }
    .bannerbg .Resimliyanmenu a {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        font-size: 13px;
        white-space: nowrap;
    }
    .bannerbg .Resimliyanmenu a > img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
    }
}