/* Выезжающее меню (вариант «Қабат»), 30.09.2026. Разметка: templates/html/components/sidebar.html.twig */
#offCanvasLeftOverlap.sm{position:fixed;top:0;left:0;bottom:0;height:auto;width:min(400px,88vw);margin:0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;z-index:999999;
  background:#161922;color:#f3f2f8;border-right:1px solid rgba(255,255,255,.08);box-shadow:30px 0 80px -30px rgba(0,0,0,.6);
  font:15px/1.4 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  transform:translateX(-102%);visibility:hidden;transition:transform .6s cubic-bezier(.32,.72,0,1),visibility 0s .6s}
#offCanvasLeftOverlap.sm.is-open{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.32,.72,0,1)}
#js-off-canvas-overlay.js-off-canvas-overlay{z-index:999998;background:rgba(8,9,14,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .45s cubic-bezier(.22,1,.36,1),visibility .45s}

/* страница чуть отъезжает вправо, пока меню открыто */
html.sm-open{overflow:hidden;padding-right:var(--sm-sb,0px)}
html.sm-anim body>*:not(#offCanvasLeftOverlap):not(#js-off-canvas-overlay):not(script){transition:transform .6s cubic-bezier(.32,.72,0,1)}
html.sm-open body>*:not(#offCanvasLeftOverlap):not(#js-off-canvas-overlay):not(script){transform:translateX(56px)}

.sm a,.sm a:hover,.sm a:focus{color:inherit;text-decoration:none}
.sm :focus-visible{outline:2px solid #bda4ff;outline-offset:2px}
.sm__top{display:flex;align-items:center;gap:12px;height:48px;margin-left:-8px;flex:0 0 auto}
.sm__logo img{display:block;width:104px;height:auto}
.sm__x{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;padding:0;border:0;border-radius:12px;background:none;color:#fff;cursor:pointer;transition:background-color .2s}
.sm__x:hover{background:rgba(255,255,255,.1)}
.sm__x svg{width:24px;height:24px;overflow:visible}
.sm__x path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.22,1,.36,1) .18s,opacity .25s .18s}
.sm.is-open .sm__x .l1{transform:translateY(5.5px) rotate(45deg)}
.sm.is-open .sm__x .l2{transform:scaleX(0);opacity:0}
.sm.is-open .sm__x .l3{transform:translateY(-5.5px) rotate(-45deg)}

/* пункты появляются по очереди */
.sm .sm-st{opacity:0;transform:translateY(10px);transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.sm.is-open .sm-st{opacity:1;transform:none;transition-delay:calc(var(--i,0)*38ms + 160ms)}

.sm__nav{position:relative;display:grid;margin-top:14px}
.sm__a{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;font-weight:500;font-size:17px;line-height:1.3}
.sm__a svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.sm__a:hover svg,.sm__a:focus-visible svg,.sm__a.is-current svg{opacity:.8;transform:none}
.sm__a.is-current{color:#cdb8ff}
.sm__hl{position:absolute;left:0;right:0;top:0;height:48px;border-radius:12px;background:rgba(189,164,255,.12);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),opacity .2s}

.sm__foot{margin-top:auto;padding-top:24px;display:grid;gap:14px}
.sm__adl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.sm .sm__adl{color:#502197}
.sm__adl:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(80,33,151,.6)}
.sm.is-open .sm__adl.sm-st:hover{transform:translateY(-2px)}
.sm__adl-logo{display:block;height:26px;width:auto;aspect-ratio:1190/220}
.sm__adl small{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;font-weight:500;color:#6e6385}
.sm__adl small svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.sm__adl:hover small svg{transform:translate(2px,-2px)}
.sm__lng{display:inline-flex;justify-self:start;padding:3px;border-radius:12px;background:rgba(255,255,255,.07)}
.sm__lng a{padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#9f9db0;transition:background-color .25s,color .25s}
.sm .sm__lng a.is-on{background:#502197;color:#fff}
.sm__socs{display:flex;flex-wrap:wrap;gap:5px}
.sm__socs .soc{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:#fff;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.sm__socs .soc:hover{transform:translateY(-3px)}
.sm__socs .soc svg{width:20px;height:20px}

@media (prefers-reduced-motion:reduce){
  #offCanvasLeftOverlap.sm,#offCanvasLeftOverlap.sm *,#js-off-canvas-overlay,html.sm-anim body>*{transition-duration:.01ms!important;transition-delay:0s!important}
  html.sm-open body>*:not(#offCanvasLeftOverlap):not(#js-off-canvas-overlay){transform:none}
}