.header{

height:72px;
background:#fff;
border-radius:22px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
margin:14px;
box-shadow:0 8px 30px rgba(0,0,0,.08);
border:1px solid #eef2f7;

}


/* لوگو */

.logo{

display:flex;
align-items:center;
gap:14px;

}


.logo-icon{

width:46px;
height:46px;
background:#0f3d91;
color:#fff;
border-radius:14px;

display:flex;
align-items:center;
justify-content:center;

text-decoration:none;

}


.logo-icon svg{

width:26px;
height:26px;
stroke-width:2;

}


.logo-text{

display:flex;
flex-direction:column;
justify-content:center;

}


.logo-text h2{

margin:0;
font-size:20px;
line-height:1.35;
color:#0f3d91;

}


.logo-text span{

font-size:13px;
line-height:1.35;
color:#888;

}



/* آیکون های سمت راست */

.actions{

display:flex;
align-items:center;
gap:8px;

}


.icon-btn{

width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

background:transparent;
border:none;
border-radius:12px;

cursor:pointer;
color:#0f3d91;

transition:.25s;

}


.icon-btn svg{

width:32px;
height:32px;

stroke:#0f3d91;
stroke-width:2;

transition:.25s;

}


.icon-btn:hover{

background:#eef4ff;

}


.icon-btn:hover svg{

transform:scale(1.08);

}



/* منوی کناری */

.side-menu{

position:fixed;
top:0;
right:-320px;

width:300px;
height:100vh;

background:#fff;
padding:30px;

z-index:1000;

box-shadow:-10px 0 30px rgba(0,0,0,.15);

transition:.3s;

display:flex;
flex-direction:column;
gap:25px;

}


.side-menu.active{

right:0;

}


.side-menu a{

text-decoration:none;
color:#0f3d91;
font-size:18px;
font-weight:600;

}


.close-btn{

width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

background:#f3f6fb;

border:none;
border-radius:12px;

cursor:pointer;

}


.close-btn svg{

width:24px;
height:24px;
stroke:#0f3d91;

}



/* پس زمینه */

.overlay{

position:fixed;
inset:0;

background:rgba(0,0,0,.35);

opacity:0;
visibility:hidden;

transition:.3s;

z-index:999;

}


.overlay.active{

opacity:1;
visibility:visible;

}



/* موبایل */

@media(max-width:768px){

.header{

height:64px;
padding:0 12px;
margin:10px;

}


.logo{

gap:10px;

}


.logo-icon{

width:46px;
height:46px;

}


.logo-text h2{

font-size:20px;

}


.logo-text span{

font-size:13px;

}


.actions{

gap:12px;

}


.icon-btn{

width:51px;
height:48px;

display:flex;
align-items:center;
justify-content:center;

}


.icon-btn svg{

width:38px !important;
height:38px !important;

stroke:#0f3d91;
stroke-width:2;

}

.search-box{

position:fixed;

top:90px;

right:50%;

transform:translateX(50%);

width:90%;

max-width:500px;

background:#fff;

padding:15px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.15);

z-index:1001;

display:none;

}


.search-box.active{

display:block;

}


.search-box input{

width:100%;

border:none;

outline:none;

font-size:16px;

}