/* ──────────────────────────────────────────────────────────────────────────
 * Mobil menü (slideout snap-drawer) geliştirmeleri — JS: tutku-mobile-menu.js
 *  1) Chevron toggle (ayrı buton; link'e gitmez)  2) Ara/WhatsApp  3) Tutku Ofis
 *  4) Sosyal ikonlar (kayan satır)
 * ────────────────────────────────────────────────────────────────────────── */

/* 1) Alt-menü chevron toggle butonu — satırın SAĞINDA, linkin üstünde (tıklayınca toggle) */
.mobilex-menu > li.menu-item-has-children { position: relative; }
.mobilex-menu > li.menu-item-has-children > a { padding-right: 58px !important; }
.mobilex-menu > li.menu-item-has-children > a::after { content: none !important; display: none !important; } /* yerleşik chevron'u gizle */
.tutku-mob-arrow {
    position: absolute; top: 0; right: 0; z-index: 4;
    width: 56px; height: 100%; min-height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; /* dik çizgi yok */
    color: #6b7280; cursor: pointer; padding: 0; margin: 0;
    -webkit-appearance: none; appearance: none;
}
.tutku-mob-arrow i { font-size: 14px; line-height: 1; transition: transform .22s ease; }
.mobilex-menu > li.menu-item-has-children.tutku-sub-open > .tutku-mob-arrow i { transform: rotate(180deg); }
.tutku-mob-arrow:active { background: rgba(0,0,0,.04); }
/* alt-menü: default KAPALI; yalnız toggle ile açılır (link tıklaması sayfaya gider) */
.mobilex-menu > li.menu-item-has-children > .sub-menu { display: none; }
.mobilex-menu > li.menu-item-has-children.tutku-sub-open > .sub-menu { display: block; }

/* 2) Ara + WhatsApp (danışman sayfası stilinde) */
.tutku-mob-cta { display: flex; gap: 8px; padding: 12px 16px 6px; }
.tutku-mob-cta__btn {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 1;
    text-decoration: none; border: 1px solid transparent; transition: background .15s ease, color .15s ease;
}
.tutku-mob-cta__btn i { font-size: 14px; }
.tutku-mob-cta__call { background: #fdecec; color: #d6251a; border-color: #f3c9c6; }
.tutku-mob-cta__call:hover, .tutku-mob-cta__call:focus { background: #d6251a; color: #fff; }
.tutku-mob-cta__wa { background: #e7f9ee; color: #128c4a; border-color: #bfe9cf; }
.tutku-mob-cta__wa:hover, .tutku-mob-cta__wa:focus { background: #25d366; border-color: #25d366; color: #fff; }

/* ALT BLOK — drawer dibine SABİT (sticky): Tutku Ofis + sosyal ikonlar. Drawer flex-column
   olduğundan margin-top:auto ile dibe iter; sticky bottom uzun menüde de görünür tutar. */
.mobilewrapper .snap-drawer-left,
.mobilewrapper .snap-drawer { display: flex !important; flex-direction: column; min-height: 100dvh; }

/* MENÜ + LOGIN DRAWER TAM EKRAN — varsayılan 256px dar drawer yerine mobilde ekranı tamamen kaplasın (X ile kapanır).
   İKİ slideout var: SOL `.mobilewrapper` (ana menü) + SAĞ `.mobilewrapper-user` (kullanıcı menüsü / çıkış-yapmışta
   LOGIN FORMU → `.snap-drawer-right`). İkisi de: drawer position:absolute + left:0/right:1185px (width yok sayılıyordu)
   → left:0+right:0 ile 100vw. Wrapper'ı 100vw + z-index(2M) overlay yapıyoruz; panel'in kendi translate'ine
   DOKUNMUYORUZ (overlay zaten üstte tam kaplar — `.slideout-panel{transform:none}` sağ drawer reveal'ını
   bozuyordu, EKLEME). `.snap-drawer` hem -left hem -right'ı kapsar. */
@media (max-width: 1024px) {
    html.slideout-open .mobilewrapper,
    html.slideout-open .mobilewrapper-user {
        width: 100vw !important; max-width: 100vw !important;
        left: 0 !important; right: 0 !important;
        z-index: 2000000 !important;
    }
    html.slideout-open .mobilewrapper .snap-drawers,
    html.slideout-open .mobilewrapper .snap-drawer,
    html.slideout-open .mobilewrapper-user .snap-drawers,
    html.slideout-open .mobilewrapper-user .snap-drawer {
        left: 0 !important; right: 0 !important;
        width: auto !important; max-width: none !important;
    }
    /* Çıkış-yapmışta login formu drawer'da: TÜM item'lar üstten başlayıp yatay ortalı, max-width kutu.
       SCOPE = body:not(.logged-in) → SADECE çıkış-yapmış (login formu) halinde uygulanır, giriş-yapmış
       kullanıcı menüsünü bozmaz. (Önce `:has()` kullanıyordum ama eski mobil tarayıcılar/webview'ler
       `:has`'i desteklemeyip kuralı komple düşürüyordu = "değişiklik yok"; body:not(.logged-in) evrensel.) */
    html.slideout-open body:not(.logged-in) .mobilewrapper-user .snap-drawer-right {
        display: flex !important; flex-direction: column;
        /* üstten başla (dikey ortalama değil) → logo yukarıda, başlığın hemen üstünde;
           ayrıca ortalamada oluşan "boş alan aşağı kaydırması" da böylece kalkar. */
        justify-content: flex-start !important; align-items: center !important;
        text-align: center !important;
        padding: 9vh 20px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    }
    html.slideout-open .mobilewrapper-user .snap-drawer-right .login_form,
    html.slideout-open .mobilewrapper-user .snap-drawer-right .tutku-modal-control {
        width: 100% !important; max-width: 360px;
        margin-left: auto !important; margin-right: auto !important;
        float: none !important;
    }
    /* Alt "Kayıt ol" + "Şifremi unuttum": masaüstü absolute (left:45/right:45/bottom:24) DOM dışına taşıyordu →
       normal akışa al, container genişliğine sığdır, iki butonu eşit paylaştır (justify).
       margin-top:auto → flex-column'da EN DİBE iter (form üstte kalır, linkler alttan ~20px yukarıda). */
    html.slideout-open .mobilewrapper-user .snap-drawer-right .tutku-modal-control {
        position: relative !important;
        left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
        display: flex !important; justify-content: center !important; gap: 8px;
        margin-top: auto !important;
    }
    html.slideout-open .mobilewrapper-user .snap-drawer-right .tutku-modal-control .tutku-outline-btn {
        flex: 1 1 0 !important; min-width: 0 !important; white-space: normal !important;
    }
}
.tutku-mob-bottom {
    margin-top: auto; position: sticky; bottom: 0; z-index: 5;
    background: #fff; border-top: 1px solid #eceef1; padding-top: 8px;
    /* Telefonun sistem nav bar'ının ALTINDA kalmasın + sosyal blok 10px daha yukarıda dursun */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 52px);
}

/* 3) Tutku Ofis (ikonlu, kısa) + Paylaş — yan yana, eşit, küçük minimalist outline butonlar */
.tutku-mob-actions { display: flex; gap: 8px; margin: 8px 16px 4px; }
.tutku-mob-actbtn {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 10px; border-radius: 8px; text-decoration: none; cursor: pointer;
    border: 1.5px solid var(--tutku-border-dark, #d6dbdd);
    color: var(--e-global-color-secondary, #081930); background: rgba(8,25,48,.02);
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1;
    -webkit-appearance: none; appearance: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tutku-mob-actbtn i { font-size: 13px; }
.tutku-mob-actbtn:hover, .tutku-mob-actbtn:focus { background: var(--tutku-bg-light, #eef3f6); border-color: #c2c9d2; }

/* 4) Sosyal ikonlar — TEK SATIR kayan (yatay scroll) full-row */
.tutku-mob-social { padding: 8px 16px 16px; }
.tutku-mob-social .tutku-mob-social__list {
    display: flex !important; flex-wrap: nowrap !important; gap: 10px !important;
    justify-content: flex-start !important; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 !important; padding: 2px 0 6px !important;
    scrollbar-width: none;
}
.tutku-mob-social .tutku-mob-social__list::-webkit-scrollbar { display: none; }
.tutku-mob-social .tutku-mob-social__list > li { flex: 0 0 auto !important; margin: 0 !important; }