/* ******************************* MOBIL ***************************** */
       @media (max-width: 640px) {
           /**************************************MENIU*********************************************/
           /* ========== Buton deschidere ========== */

           .openbtn {
               position: fixed;
               z-index: 1;
               margin: 15px 30px;
               cursor: pointer;
               background: var(--brand);
               color: whitesmoke;
               padding: .5rem .8rem;
               border: none;
               border-radius: .75rem;
               box-shadow: 0 4px 10px rgba(26, 115, 232, .25);
               transition: transform .15s ease, box-shadow .15s ease, background .2s;
           }


           .openbtn:hover {
               transform: translateY(-1px);
               box-shadow: 0 6px 16px rgba(26, 115, 232, .35);
           }

           .openbtn:active {
               transform: translateY(0);
               box-shadow: 0 3px 8px rgba(26, 115, 232, .25);
           }

           /* ========== Overlay ========== */
           .panel-overlay {
               position: fixed;
               inset: 0;
               background: rgba(0, 0, 0, .35);
               opacity: 0;
               visibility: hidden;
               transition: opacity .35s ease, visibility .35s ease;
               z-index: 9998;
           }

           .panel-overlay.open {
               opacity: 1;
               visibility: visible;
           }

           /* ========== Sidepanel ========== */
           .sidepanel {
               height: 100vh;
               width: min(80vw, 380px);
               max-width: 420px;
               position: fixed;
               top: 0;
               left: 0;
               z-index: 9999;
               background: var(--panel-bg);
               border-right: 1px solid var(--line);
               box-shadow: 8px 0 24px rgba(0, 0, 0, .08);
               overflow-y: auto;
               -webkit-overflow-scrolling: touch;
               transform: translateX(-100%);
               transition: transform .35s ease;
               padding-top: 0;
           }

           .sidepanel.open {
               transform: translateX(0);
           }

           body.no-scroll {
               overflow: hidden;
           }

           /* ========== Header panou (zona cu X) ========== */
           .sidepanel .closebtn {
               position: sticky;
               top: 0;
               right: auto;
               left: auto;
               display: block;
               text-align: right;
               padding: .75rem 1rem;
               font-size: 2rem;
               line-height: 1;
               color: var(--muted);
               background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
               backdrop-filter: saturate(120%) blur(2px);
               border-bottom: 1px solid var(--line);
               z-index: 1;
           }

           .sidepanel .closebtn:hover {
               color: var(--brand);
           }

           /* ========== Titluri de sectiune ========== */
           .sidepanel h2 {
               margin: .5rem 0;
               padding: .5rem 1rem;
               font-size: 1.05rem;
               font-weight: 700;
               color: var(--titlu);
               border-top: 1px solid var(--line);
               border-bottom: 1px solid var(--line);
           }

           /* ========== Subtitluri / linkuri ========== */
           .titlu_mobil {
               margin: .25rem 0;
               padding: .4rem 1rem;
               text-align: left;
               text-indent: 0;
               font-size: .98rem;
               font-weight: 600;
               color: var(--titlu);
           }

           /* linkurile simple din liste */
           .sidepanel a {
               display: block;
               padding: .5rem 1.25rem;
               font-size: .95rem;
               color: var(--titlu);
               text-decoration: none;
               transition: background .2s ease, color .2s ease, padding-left .2s;
               border-radius: .5rem;
           }

           .sidepanel a:hover {
               background: rgba(26, 115, 232, .08);
               color: var(--titlu);
               padding-left: 1.35rem;
           }

           /* ========== Dropdown (accordion pe click) ========== */
           .dropdown {
               margin: .15rem 0;
           }

           .dropdown .dropbtn {
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: .5rem;
               background: none;
               border: none;
               color: var(--titlu);
               font-size: .98rem;
               font-weight: 600;
               padding: .55rem 1rem;
               cursor: pointer;
               border-radius: .6rem;
               transition: background .2s ease;
           }

           .dropdown .dropbtn:hover {
               background: rgba(26, 115, 232, .07);
           }

           .dropdown .dropbtn::after {
               content: "\f107";
               font-family: "Font Awesome 5 Free";
               font-weight: 900;
               transition: transform .25s ease;
           }

           .dropdown.open .dropbtn::after {
               transform: rotate(180deg);
           }

           /* continutul ascuns/aratat */
           .dropdown-content {
               display: none;
               padding: .25rem 0 .5rem 0;
               border-left: 2px solid var(--titlu);
               margin: .15rem 0 .35rem .5rem;
           }

           .dropdown.open .dropdown-content {
               display: block;
           }

           /* listari */
           ul {
               margin: 0;
               padding: 0;
           }

           ul li {
               list-style: none;
           }

           /* ascunde listele simple din dropdown in panoul mobil */
           .sidepanel .dropdown>ul {
               display: none;
               margin: .25rem 0 .5rem .75rem;
               border-left: 2px solid var(--titlu);
               padding-left: .5rem;
           }

           .sidepanel .dropdown.open>ul {
               display: block;
           }
       }

       /* ******************************* TABLETA ***************************** */
       @media (min-width: 641px) and (max-width: 980px) {
           /* --------------------------MENIU--------------------------- */

           .sidepanel {
               width: min(80vw, 420px);
           }

           /* ========== Buton deschidere ========== */
           .openbtn {
               top: 80px;
               z-index: 1;
               position: fixed;
               display: block;
               margin: 0px 20px;
               cursor: pointer;
               background: var(--brand);
               color: #fff;
               padding: .5rem .8rem;
               border: none;
               border-radius: .75rem;
               box-shadow: 0 4px 10px rgba(26, 115, 232, .25);
               transition: transform .15s ease, box-shadow .15s ease, background;
               left: 2rem;
           }

           .openbtn:hover {
               transform: translateY(-1px);
               box-shadow: 0 6px 16px rgba(26, 115, 232, .35);
           }

           .openbtn:active {
               transform: translateY(0);
               box-shadow: 0 3px 8px rgba(26, 115, 232, .25);
           }

           /* ========== Overlay ========== */
           .panel-overlay {
               position: fixed;
               inset: 0;
               background: rgba(0, 0, 0, .35);
               opacity: 0;
               visibility: hidden;
               transition: opacity .35s ease, visibility .35s ease;
               z-index: 9998;
           }

           .panel-overlay.open {
               opacity: 1;
               visibility: visible;
           }

           /* ========== Sidepanel ========== */
           .sidepanel {
               height: 100vh;
               width: min(90vw, 380px);
               max-width: 420px;
               position: fixed;
               top: 0;
               left: 0;
               z-index: 9999;
               background: var(--panel-bg);
               border-right: 1px solid var(--line);
               box-shadow: 8px 0 24px rgba(0, 0, 0, .08);
               overflow-y: auto;
               -webkit-overflow-scrolling: touch;
               transform: translateX(-100%);
               transition: transform .35s ease;
               padding-top: 0;
           }

           .sidepanel.open {
               transform: translateX(0);
           }

           body.no-scroll {
               overflow: hidden;
           }

           /* ========== Header panou (zona cu X) ========== */
           .sidepanel .closebtn {
               position: sticky;
               top: 0;
               right: auto;
               left: auto;
               display: block;
               text-align: right;
               padding: .75rem 1rem;
               font-size: 2rem;
               line-height: 1;
               color: var(--muted);
               background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
               backdrop-filter: saturate(120%) blur(2px);
               border-bottom: 1px solid var(--line);
               z-index: 1;
           }

           .sidepanel .closebtn:hover {
               color: var(--brand);
           }

           /* ========== Titluri/ sectiuni ========== */
           .sidepanel h2 {
               margin: .5rem 0;
               padding: .5rem 1rem;
               font-size: 1.05rem;
               font-weight: 700;
               color: var(--titlu);
               border-top: 1px solid var(--line);
               border-bottom: 1px solid var(--line);
               text-align: center;
               text-transform: uppercase;
           }

           .titlu_mobil {
               margin: .25rem 0;
               padding: .4rem 1rem;
               text-align: left;
               text-indent: 0;
               font-size: .98rem;
               font-weight: 600;
               color: var(--titlu);
           }

           /* linkurile simple din liste */
           .sidepanel a {
               display: block;
               padding: .5rem 1.25rem;
               font-size: .95rem;
               color: var(--titlu);
               text-decoration: none;
               transition: background .2s ease, color .2s ease, padding-left .2s;
               border-radius: .5rem;
           }

           .sidepanel a:hover {
               background: rgba(26, 115, 232, .08);
               color: var(--titlu);
               padding-left: 1.35rem;
           }

           /* ========== Dropdown (accordion pe click) ========== */
           .dropdown {
               margin: .15rem 0;
           }

           .dropdown .dropbtn {
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: .5rem;
               background: none;
               border: none;
               color: var(--titlu);
               font-size: .98rem;
               font-weight: 600;
               padding: .55rem 1rem;
               cursor: pointer;
               border-radius: .6rem;
               transition: background .2s ease;
           }

           .dropdown .dropbtn:hover {
               background: rgba(26, 115, 232, .07);
           }

           .dropdown .dropbtn::after {
               content: "\f107";
               font-family: "Font Awesome 5 Free";
               font-weight: 900;
               transition: transform .25s ease;
           }

           .dropdown.open .dropbtn::after {
               transform: rotate(180deg);
           }

           /* continutul ascuns/aratat */
           .dropdown-content {
               display: none;
               padding: .25rem 0 .5rem 0;
               border-left: 2px solid var(--titlu);
               margin: .15rem 0 .35rem .5rem;
           }

           .dropdown.open .dropdown-content {
               display: block;
           }

           /* listari */
           ul {
               margin: 0;
               padding: 0;
           }

           ul li {
               list-style: none;
           }

           /* ascunde listele simple din dropdown in panoul mobil */
           .sidepanel .dropdown>ul {
               display: none;
               margin: .25rem 0 .5rem .75rem;
               border-left: 2px solid var(--titlu);
               padding-left: .5rem;
           }

           .sidepanel .dropdown.open>ul {
               display: block;
           }
       }

       /* ******************************* PC ***************************** */
       @media (min-width: 981px) {
           .openbtn {
               display: none;
           }

           .sidepanel {
               display: none;
           }

       }