/* =========================================================
   MOBILE HEADER + MEGA DRAWER PREMIUM PATCH
   En sona yükle: style.css + header-mega-safe-patch.css sonrası
   ========================================================= */

@media (max-width: 768px){
  html, body{ overflow-x:hidden !important; }
  body{ padding-bottom:82px; }

  .site-header{
    position:sticky !important;
    top:0 !important;
    z-index:9000 !important;
    background:#fff !important;
  }

  .top-strip{
    background:#111827 !important;
    color:#fff !important;
  }

  .top-strip-inner{
    min-height:26px !important;
    padding:4px 0 !important;
    justify-content:center !important;
  }

  .top-strip-left{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:11px !important;
    line-height:1.25 !important;
    color:rgba(255,255,255,.92) !important;
  }

  .top-strip-right{ display:none !important; }

  .header-main{
    position:relative !important;
    z-index:9002 !important;
    background:#fff !important;
    border-bottom:0 !important;
  }

  .header-main-inner{
    min-height:0 !important;
    padding:10px 0 12px !important;
    display:grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      "logo actions"
      "search search" !important;
    gap:10px 12px !important;
    align-items:center !important;
  }

  .logo{
    grid-area:logo !important;
    justify-self:start !important;
    max-width:185px !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .logo img{
    width:auto !important;
    max-width:180px !important;
    max-height:48px !important;
    object-fit:contain !important;
  }

  .header-actions{
    grid-area:actions !important;
    width:auto !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
  }

  .header-user,
  .header-mini-cart,
  .dropdown-user{
    position:relative !important;
    flex:0 0 auto !important;
  }

  .header-icon{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:14px !important;
    justify-content:center !important;
    gap:0 !important;
  }

  .header-icon > span:not(.header-icon-emoji),
  .header-icon span:last-child:not(.header-icon-emoji),
  .header-track-wrap{
    display:none !important;
  }

  .header-icon-emoji{
    width:28px !important;
    height:28px !important;
    background:transparent !important;
    font-size:17px !important;
  }

  .cart-count{
    position:absolute !important;
    top:-8px !important;
    right:-7px !important;
    min-width:21px !important;
    height:21px !important;
    padding:0 5px !important;
    font-size:11px !important;
    border:2px solid #fff !important;
  }

  .search-box-live,
  .search-box{
    grid-area:search !important;
    width:100% !important;
  }

  .search-box{
    min-height:48px !important;
    border-radius:15px !important;
    border:2px solid #ff6000 !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }

  .search-box input{
    min-height:48px !important;
    font-size:13px !important;
    padding:0 12px 0 14px !important;
  }

  .search-box button,
  .search-trigger-btn{
    width:54px !important;
    min-width:54px !important;
    height:48px !important;
    border-radius:0 13px 13px 0 !important;
  }

  .header-nav{
    position:relative !important;
    z-index:9001 !important;
    background:#fff !important;
    border-top:1px solid #edf2f7 !important;
    border-bottom:1px solid #edf2f7 !important;
  }

  .nav-inner{
    min-height:52px !important;
    padding:8px 0 !important;
    gap:8px !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
  }

  .nav-inner > a,
  .nav-item > a,
  .nav-item > span,
  .mega-trigger{
    min-height:36px !important;
    height:36px !important;
    padding:0 12px !important;
    border-radius:13px !important;
    background:#fff4ec !important;
    color:#c2410c !important;
    border:0 !important;
    font-size:12px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
  }

  .mega-trigger{
    background:#ff6000 !important;
    color:#fff !important;
  }

  .mega-menu-overlay.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:8990 !important;
    background:rgba(15,23,42,.42) !important;
  }

  .mega-menu{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    top:calc(var(--mobile-header-height, 156px) + 8px) !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - var(--mobile-header-height, 156px) - 22px) !important;
    overflow:hidden !important;
    border-radius:18px !important;
    border:1px solid #dbe3ef !important;
    box-shadow:0 24px 60px rgba(15,23,42,.22) !important;
    z-index:9010 !important;
    background:#fff !important;
    transform:translateY(12px) scale(.985) !important;
  }

  .mega-menu.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }

  .mega-grid{
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    min-height:0 !important;
    height:calc(100vh - var(--mobile-header-height, 156px) - 22px) !important;
    max-height:620px !important;
  }

  .mega-left{
    display:block !important;
    max-height:none !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-right:1px solid #e6ebf3 !important;
    border-bottom:0 !important;
    background:#f8fafc !important;
    padding:8px !important;
  }

  .mega-left-item{
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:0 8px !important;
    border-radius:12px !important;
    border-left:0 !important;
    justify-content:flex-start !important;
    font-size:12px !important;
    line-height:1.25 !important;
    color:#0f172a !important;
  }

  .mega-left-item .caret,
  .mega-left-item > i:last-child{ display:none !important; }

  .mega-left-item-label{
    gap:6px !important;
    min-width:0 !important;
  }

  .mega-left-item-label span,
  .mega-left-item-label{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .mega-left-item.active,
  .mega-left-item:hover{
    background:#fff !important;
    color:#ff6000 !important;
    box-shadow:0 6px 16px rgba(16,24,40,.06) !important;
  }

  .mega-right{
    height:100% !important;
    overflow-y:auto !important;
    padding:14px 12px 18px !important;
    background:#fff !important;
  }

  .mega-pane-title{
    font-size:17px !important;
    margin:0 0 12px !important;
    color:#0f172a !important;
  }

  .mega-pane-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .mega-subcats h4,
  .mega-featured h4{
    font-size:12px !important;
    margin:0 0 9px !important;
  }

  .mega-subcat-list{
    gap:7px !important;
  }

  .mega-subcat-link{
    min-height:38px !important;
    padding:0 10px !important;
    border-radius:11px !important;
    font-size:13px !important;
    background:#f8fafc !important;
  }

  .mega-featured-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .mega-product-card{
    display:grid !important;
    grid-template-columns:76px minmax(0,1fr) !important;
    align-items:center !important;
    border-radius:14px !important;
  }

  .mega-product-thumb{
    aspect-ratio:auto !important;
    width:76px !important;
    height:76px !important;
    border-radius:12px !important;
  }

  .mega-product-body{
    padding:8px 10px !important;
    min-width:0 !important;
  }

  .mega-product-title{
    min-height:0 !important;
    font-size:12px !important;
    line-height:1.35 !important;
    -webkit-line-clamp:2 !important;
  }

  .mega-product-brand{
    margin-top:5px !important;
    font-size:11px !important;
  }

  .user-dropdown-menu,
  .mini-cart-dropdown{
    position:fixed !important;
    top:82px !important;
    right:10px !important;
    left:auto !important;
    width:min(260px, calc(100vw - 20px)) !important;
    min-width:0 !important;
    z-index:9020 !important;
  }

  .dropdown-user:hover .user-dropdown-menu,
  .dropdown-user:hover .mini-cart-dropdown,
  .dropdown-user.is-open .user-dropdown-menu,
  .dropdown-user.is-open .mini-cart-dropdown{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
  }
}

@media (max-width: 390px){
  .logo{ max-width:155px !important; }
  .logo img{ max-width:150px !important; }
  .mega-grid{ grid-template-columns:98px minmax(0,1fr) !important; }
  .mega-left{ padding:6px !important; }
  .mega-left-item{ font-size:11px !important; padding:0 6px !important; }
}
@media (max-width: 768px){
  .mega-menu-overlay.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:8998 !important;
  }

  .mega-menu{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    top:190px !important;
    width:auto !important;
    max-height:calc(100vh - 210px) !important;
    overflow:auto !important;
    z-index:8999 !important;
    border-radius:18px !important;
    transform:none !important;
  }

  .mega-menu:not(.active){
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .mega-menu.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .mega-grid{
    display:block !important;
    min-height:0 !important;
  }

  .mega-left{
    display:block !important;
    max-height:none !important;
    overflow:visible !important;
    border-right:0 !important;
    border-bottom:1px solid #e6ebf3 !important;
  }

  .mega-left-item{
    width:100% !important;
    min-width:0 !important;
  }

  .mega-right{
    padding:16px !important;
  }

  .mega-pane-layout{
    display:block !important;
  }

  .mega-featured-grid{
    grid-template-columns:1fr !important;
  }

  .category-card{
    position:relative !important;
    z-index:1 !important;
    margin-top:16px !important;
  }
}