/* RENOS OPTİK - Mobil Menü V15 */
.mobileMenuToggle,
.mobileMenuDrawer,
.mobileMenuBackdrop{display:none}

@media (max-width:850px){
  body.mobileMenuOpen{overflow:hidden!important}

  body > header{
    display:flex!important;
    flex-direction:row!important;
    justify-content:space-between!important;
    align-items:center!important;
    width:100%!important;
    min-height:70px!important;
    padding:10px 16px!important;
    gap:12px!important;
    box-sizing:border-box!important;
  }

  body > header > nav,
  body > header > .siteHeaderSearch,
  body > header > .headerSearch,
  body > header > .brandHeaderSearch,
  body > header > .favHeaderSearch,
  body > header > form[action="products.php"]{
    display:none!important;
  }

  body > header .logo{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    min-width:0!important;
    margin:0!important;
    text-align:left!important;
  }

  body > header .logo img{
    display:block;
    width:42px!important;
    max-width:42px!important;
    height:auto!important;
    object-fit:contain;
  }

  body > header .logo h2{
    margin:0!important;
    font-size:18px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }

  body > header .logo small{
    display:block;
    margin-top:3px;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  .mobileMenuToggle{
    display:flex!important;
    align-items:center;
    justify-content:center;
    position:relative!important;
    z-index:3002!important;
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #343434!important;
    border-radius:14px!important;
    background:#171717!important;
    box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent;
  }

  .mobileMenuToggle span,
  .mobileMenuToggle::before,
  .mobileMenuToggle::after{
    content:"";
    position:absolute;
    left:12px;
    width:20px;
    height:2px;
    border-radius:4px;
    background:#fff;
    transition:transform .25s ease,opacity .18s ease,top .25s ease;
  }
  .mobileMenuToggle::before{top:14px}
  .mobileMenuToggle span{top:21px}
  .mobileMenuToggle::after{top:28px}
  body.mobileMenuOpen .mobileMenuToggle::before{top:21px;transform:rotate(45deg)}
  body.mobileMenuOpen .mobileMenuToggle span{opacity:0}
  body.mobileMenuOpen .mobileMenuToggle::after{top:21px;transform:rotate(-45deg)}

  .mobileMenuBackdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:2998!important;
    background:rgba(0,0,0,.72)!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }

  .mobileMenuDrawer{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    z-index:2999!important;
    width:min(88vw,370px)!important;
    height:100dvh!important;
    box-sizing:border-box!important;
    padding:24px 18px calc(20px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    background:#101010!important;
    border-left:1px solid #2b2b2b!important;
    box-shadow:-20px 0 55px rgba(0,0,0,.45)!important;
    transform:translateX(105%)!important;
    visibility:hidden!important;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility .28s ease!important;
  }

  body.mobileMenuOpen .mobileMenuBackdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body.mobileMenuOpen .mobileMenuDrawer{
    transform:translateX(0)!important;
    visibility:visible!important;
  }

  .mobileMenuTop{
    display:flex;
    align-items:center;
    min-height:46px;
    margin-bottom:18px;
    padding-right:56px;
  }

  .mobileMenuTitle{
    color:#fff;
    font-size:19px;
    font-weight:900;
    letter-spacing:.2px;
  }

  .mobileMenuTitle span{color:#F18700}

  .mobileMenuSearch{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:9px!important;
    width:100%!important;
    margin:0 0 20px!important;
  }

  .mobileMenuSearch input{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 14px!important;
    border:1px solid #333!important;
    border-radius:14px!important;
    outline:none!important;
    background:#181818!important;
    color:#fff!important;
    font-size:15px!important;
  }

  .mobileMenuSearch input:focus{
    border-color:#F18700!important;
    box-shadow:0 0 0 3px rgba(241,135,0,.10)!important;
  }

  .mobileMenuSearch button{
    width:48px!important;
    height:48px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:14px!important;
    background:#F18700!important;
    color:#111!important;
    font-size:21px!important;
    font-weight:900!important;
    cursor:pointer!important;
  }

  .mobileMenuNav{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
  }

  .mobileMenuNav a{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:14px 15px!important;
    border:1px solid transparent!important;
    border-radius:13px!important;
    background:#161616!important;
    color:#e9e9e9!important;
    text-decoration:none!important;
    font-size:15px!important;
    font-weight:750!important;
  }

  .mobileMenuNav a::after{
    content:"›";
    color:#696969;
    font-size:23px;
    line-height:1;
  }

  .mobileMenuNav a.active{
    color:#fff!important;
    border-color:rgba(241,135,0,.45)!important;
    background:rgba(241,135,0,.10)!important;
  }

  .mobileMenuNav a.active::after{color:#F18700}

  .mobileMenuDivider{
    height:1px;
    margin:20px 0 0;
    background:#292929;
  }

  .mobileMenuQuick{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:auto!important;
    padding-top:20px!important;
  }

  .mobileMenuQuick a{
    min-height:58px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    box-sizing:border-box!important;
    padding:12px 10px!important;
    border-radius:16px!important;
    text-align:center!important;
    text-decoration:none!important;
    font-size:14px!important;
    font-weight:900!important;
    letter-spacing:.1px;
    box-shadow:0 8px 24px rgba(0,0,0,.20);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }

  .mobileMenuQuick a::before{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    border-radius:50%;
    line-height:1;
  }

  .mobileMenuQuick a:active{transform:scale(.97)}

  .mobileMenuQuick .call{
    color:#fff!important;
    background:linear-gradient(145deg,#222,#151515)!important;
    border:1px solid #393939!important;
  }

  .mobileMenuQuick .call::before{
    content:"☎";
    color:#F18700;
    background:rgba(241,135,0,.12);
    border:1px solid rgba(241,135,0,.28);
    font-size:16px;
  }

  .mobileMenuQuick .wa{
    color:#fff!important;
    background:linear-gradient(145deg,#25D366,#169c47)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    box-shadow:0 8px 24px rgba(37,211,102,.18)!important;
  }

  .mobileMenuQuick .wa::before{
    content:"W";
    color:#fff;
    background:rgba(0,0,0,.12);
    border:1px solid rgba(255,255,255,.20);
    font-size:14px;
    font-weight:1000;
  }
}

@media (max-width:390px){
  body > header .logo img{width:38px!important;max-width:38px!important}
  body > header .logo h2{font-size:16px!important}
  body > header .logo small{font-size:9px!important}
  .mobileMenuDrawer{width:92vw!important}
}

/* V29 - Hamburger > Ürünler alt menüsü */
.mobileProductsGroup{
    display:block;
    width:100%;
}

.mobileProductsToggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 14px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#fff;
    font:inherit;
    font-weight:800;
    text-align:left;
    cursor:pointer;
}

.mobileProductsToggle:hover,
.mobileProductsGroup.active > .mobileProductsToggle{
    background:#1b1b1b;
    color:#F18700;
}

.mobileProductsArrow{
    font-size:20px;
    line-height:1;
    transition:transform .2s ease;
}

.mobileProductsGroup.open .mobileProductsArrow{
    transform:rotate(180deg);
}

.mobileProductsSubmenu{
    display:none;
    margin:3px 0 7px;
    padding:5px 0 5px 14px;
    border-left:2px solid #2f2f2f;
}

.mobileProductsGroup.open .mobileProductsSubmenu{
    display:block;
}

.mobileProductsSubmenu a{
    display:block !important;
    padding:11px 14px !important;
    margin:2px 0 !important;
    border-radius:9px !important;
    color:#cfcfcf !important;
    background:transparent !important;
    font-size:13px !important;
    font-weight:700 !important;
    text-decoration:none !important;
}

.mobileProductsSubmenu a:hover,
.mobileProductsSubmenu a.active{
    color:#F18700 !important;
    background:#191919 !important;
}

.mobileProductsSubmenu .mobileProductsAll{
    color:#999 !important;
    font-size:12px !important;
    border-top:1px solid #292929;
    margin-top:5px !important;
    padding-top:12px !important;
}