#mobileMenu {

    position: fixed;

    top: 0;

    right: 0;

    height: 100dvh;

    width: 340px;

    max-width: 88vw;

    background: #ffffff;

    z-index: 100;

    transform: translateX(110%);

    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);

    overflow-y: auto;

    overflow-x: hidden;

    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.2);

}



#mobileMenu.show {

    transform: translateX(0);

}



#mobileMenuOverlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    z-index: 99;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.32s ease;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

}



#mobileMenuOverlay.show {

    opacity: 1;

    pointer-events: all;

}



.hamburger-icon span {

    display: block;

    width: 24px;

    height: 2px;

    background-color: currentColor;

    margin: 6px 0;

    transform-origin: center;

    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;

}



.hamburger-icon.open span:first-child {

    transform: translateY(8px) rotate(45deg);

}



.hamburger-icon.open span:nth-child(2) {

    opacity: 0;

}



.hamburger-icon.open span:last-child {

    transform: translateY(-8px) rotate(-45deg);

}



#mobileMenu a {

    -webkit-tap-highlight-color: transparent;

    transition: color 0.2s ease;

}



#mobileMenu a:hover {

    background-color: transparent;

    color: #2563eb;

}



#mobileMenu a.active {

    color: #2563eb;

    font-weight: 500;

}