/* ------------------------------------------------------------
   12. MOBILE MENU DRAWER (CLEAN, PROPER SIDE-DRAWER UI)
  ------------------------------------------------------------ */
.mobile-menu { 
    position: fixed; inset: 0; z-index: 1200; 
    background: rgba(3, 10, 18, 0.6); 
    opacity: 0; visibility: hidden; pointer-events: none; 
    transition: 0.3s ease; backdrop-filter: blur(4px); 
}

.mobile-menu .container { 
    position: absolute; 
    top: 0; left: 0; bottom: 0;
    z-index: 1; 
    width: 280px; 
    max-width: 85%;
    height: 100dvh; 
    margin: 0; 
    padding: 80px 24px 30px !important; 
    overflow-y: auto; 
    border-right: 1px solid var(--line-strong); 
    border-radius: 0 24px 24px 0; 
    background: var(--surface); 
    box-shadow: 10px 0 30px rgba(0,0,0,0.1); 
    transform: translateX(-100%); 
    transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1); 
}

.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu.is-open .container { transform: translateX(0); }

.mobile-menu-close { 
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex !important;
    width: 40px; 
    height: 40px;
    align-items: center; 
    justify-content: center;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    z-index: 10;
}

.mobile-menu a { 
    min-height: 48px; 
    display: flex; align-items: center; 
    padding: 10px 16px; 
    color: var(--text); 
    background: transparent; 
    border-radius: 12px; 
    font-weight: 600; 
    font-size: 1.05rem;
    transition: 0.25s ease; 
    margin-bottom: 6px; 
}
.mobile-menu a:hover { 
    color: var(--primary-2); 
    background: rgba(41,182,246,.08); 
    transform: translateX(4px); 
}