/* WRAPPER */



/* HEADER */

header{
position:fixed;
top:0;
width:100%;
max-width:1440px;
height:80px;
display:flex;
align-items:center;
padding-left:40px;
background:#F9F9F9;
border-bottom:1px solid #ececec;
z-index:1000;
}

.logo-main{
font-size:24px;
letter-spacing:.2em;
text-transform:uppercase;
font-weight:300;
}

.logo-sub{
font-size:8px;
letter-spacing:.35em;
color:#777;
margin-top:2px;
}

/* SIDEBAR */

.sidebar{
width:200px;
border-right:1px solid #ececec;
background:#f9f9f9;
flex-shrink:0;
overflow:hidden;
transition:width .45s ease;
display:block;
 
}

 
/* NAV */

.nav{
padding:60px 30px;
display:flex;
flex-direction:column;
gap:25px;
}

.nav a{
text-decoration:none;
font-size:12px;
letter-spacing:.25em;
text-transform:uppercase;
color:#444;
 opacity:0;
transform:translateX(-20px);

animation:fadeUp .7s ease forwards;

}


.nav a:hover{
    letter-spacing:.15em;
color:#000;
transition:.5s;

}

        .nav a:nth-child(1) {
            animation-delay: 0.2s;
        }

        .nav a:nth-child(2) {
            animation-delay: 0.3s;
        }

        .nav a:nth-child(3) {
            animation-delay: 0.4s;
        }

        .nav a:nth-child(4) {
            animation-delay: 0.5s;
        }
            .nav a:nth-child(5) {
            animation-delay: 0.6s;
        }

        @keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.sidebar.open .nav a:nth-child(1){animation-delay:.2s;}
.sidebar.open .nav a:nth-child(2){animation-delay:.3s;}
.sidebar.open .nav a:nth-child(3){animation-delay:.4s;}
.sidebar.open .nav a:nth-child(4){animation-delay:.5s;}
.sidebar.open .nav a:nth-child(5){animation-delay:.6s;}
/* CONTENT */


/* MENU BUTTON */

.menu-handle{
position:fixed;
top:19px;
right:30px;
width:42px;
height:42px;
background:rgba(255,255,255,.9);
border:1px solid #e5e5e5;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:2000;
display:none;
}

.lines{
width:16px;
height:14px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.lines div{
height:1.5px;
background:#222;
transition:.3s;
}

   .menu-handle.active .lines div:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        .menu-handle.active .lines div:nth-child(2) {
            opacity: 0;
        }

        .menu-handle.active .lines div:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }
/* MOBILE */
@media(max-width:900px){

.menu-handle{
display:flex;
cursor:pointer;
}

.layout{
display:block;
}

.sidebar{
position:fixed;
right:0;
top:80px;
width:150px;
height:calc(100vh - 80px);

transform:translateX(100%); /* مخفی خارج از صفحه */

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

border-left:1px solid #ececec;
border-right:none;

transition:transform .45s ease;

z-index:3000;
}

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

 


 
.nav a{
opacity:0;
}

.sidebar.open .nav a{
animation:fadeUp .6s ease forwards;
 

}

}