@media (max-width: 740px){
     .header-xs {
          position: sticky;
          z-index: 1001;
          top: 0;
          left: 0;
          background: var(--secondary-dark);
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0 20px;
          box-shadow: var(--shadow-md);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
     
     .header-xs::before {
          content: 'INSPEKSI MOBIL';
          position: absolute;
          left: 20px;
          color: white;
          font-family: var(--font-headings);
          font-weight: 800;
          font-size: 16px;
          letter-spacing: 1px;
     }

     .sidebarxs {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 1002;
          width: 80vw;
          max-width: 320px;
          background: rgba(15, 23, 42, 0.98);
          backdrop-filter: blur(16px);
          border-right: 1px solid rgba(255, 255, 255, 0.08);
          height: 100vh;
          color: #ffffff;
          box-shadow: var(--shadow-xl);
          padding: 20px;
          transition: var(--transition);
     }
     .sidebarxs-container {
          overflow-y: auto;
          height: 80vh;
          margin-top: 30px;
     }

     .iconopenclose:hover {
          cursor: pointer;
          opacity: 0.8;
          transform: scale(1.05);
     }
     
     .iconopenclose {
          width: 24px;
          height: 24px;
          transition: var(--transition);
     }

     .menuxs a {
          display: block;
          padding: 14px 20px;
          color: #e2e8f0;
          font-size: 15px;
          font-weight: 500;
          font-family: var(--font-headings);
          border-radius: var(--radius-sm);
          transition: var(--transition);
          margin-bottom: 4px;
     }
     .menuxs a:hover, .menuxs .highlight a, .menuxs a.highlight {
          background: rgba(255, 255, 255, 0.08);
          color: var(--primary) !important;
          padding-left: 25px;
     }
     .menuxs .parent {
          background: url(../../../images/frontend/2/parent.png) center right 15px no-repeat;
          background-size: 12px;
     }
     .menuxs .parent:hover {
          background: url(../../../images/frontend/2/parent.png) center right 15px no-repeat rgba(255, 255, 255, 0.08);
          background-size: 12px;
     }
     .menuxs li ul {
          display: none;
          padding-left: 15px;
          margin: 5px 0;
          border-left: 1px dashed rgba(255, 255, 255, 0.15);
     }
     
     .menuxs li ul a {
          font-size: 14px;
          padding: 10px 15px;
          color: #94a3b8;
     }
}

@media (min-width: 741px){
     .sidebarxs {
          display: none !important;
     }
}