/* ================= RESET ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Sahel', sans-serif;
}

@font-face{
font-family:'Sahel';
src:url('fonts/SAHEL-BOLD.TTF') format('truetype');
font-weight:bold;
}

body{
background:#0f172a;
color:#e2e8f0;
line-height:1.7;
}

a{
text-decoration:none;
color:inherit;
}

/* ================= HEADER ================= */

.hero{
background:linear-gradient(135deg,#0ea5e9,#1e293b);
padding:20px 20px 20px;
text-align:center;
}

.logo-wrapper{
position:relative;
display:inline-block;
}

.site-logo{
width:130px;
height:130px;
border-radius:50%;
border:6px solid #fff;
object-fit:cover;
box-shadow:0 15px 35px rgba(0,0,0,0.35);
}

.site-title{
position:absolute;
left:50%;
bottom:-12px;
transform:translateX(-50%);
background:#fff;
color:#0f172a;
padding:7px 20px;
border-radius:30px;
font-size:1.1rem;
font-weight:700;
white-space:nowrap;
box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

.hero-desc{
margin-top:45px;
font-size:1rem;
color:#e0f2fe;
}

/* ================= CHANNEL BUTTONS ================= */

.hero-channels{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-top:25px;
}

.channel{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:rgba(255,255,255,0.15);
padding:6px 12px;
border-radius:20px;
font-size:0.9rem;
transition:0.3s;
}

.channel:hover{
background:rgba(255,255,255,0.25);
}

.channel img{
width:22px;
height:22px;
object-fit:contain;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.site-logo{
width:110px;
height:110px;
}

.site-title{
font-size:1rem;
}

.hero-desc{
font-size:0.9rem;
}

}


/* ================= MAIN ================= */


/* ================= MOBILE ================= */


/* ================= MOBILE ================= */



/* کانتینر */

.container{

max-width:900px;
margin:auto;
padding:20px 20px 20px;

}


/* باکس ویدئو */

.video-box{

position:relative;
border-radius:20px;
overflow:hidden;

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

}


/* ویدئو */

.video-box iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
}



/* افکت نور دور ویدئو */

.video-box::before{

content:"";
position:absolute;

top:-3px;
left:-3px;
right:-3px;
bottom:-3px;

border-radius:22px;

background:linear-gradient(
90deg,
#000000,
#3333ff,
#410000,
#002358,
hsl(0, 0%, 100%)
);

background-size:400%;

z-index:-1;

animation:glow 6s linear infinite;

}


@keyframes glow{

0%{background-position:0%}
100%{background-position:400%}

}



/* پودمان ها */
.modules{
margin-top:50px;
max-width:800px;
margin-left:auto;
margin-right:auto;
}

/* باکس کلی هر پودمان */
.module{
margin-bottom:20px;
border-radius:12px;
overflow:visible; /* قبلاً hidden بود */
box-shadow:0 5px 20px rgba(0,0,0,0.08);
background:#fff;
border:4px solid #ffffff;
}



/* هدر پودمان */
.module-header{

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

padding:18px 20px;

cursor:pointer;

font-weight:600;
font-size:17px;

background:linear-gradient(90deg,#001025,#00202b);
color:white;

transition:0.3s;

}


/* افکت هاور */
.module-header:hover{
opacity:0.9;
}


/* فلش داخل دایره سفید */
.arrow{

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

width:34px;
height:34px;

background:#ffffff;
border-radius:50%;

font-size:20px;
font-weight:1000; /* ضخیم‌تر */

color:#001025; /* همرنگ پس‌زمینه هدر */

transition:0.4s;

}

/* وقتی باز شود فلش بچرخد */
.module.active .arrow{
transform:rotate(180deg);
}



/* محتوای داخلی */
.module-content{
max-height:0;
overflow:hidden;
transition:max-height 0.5s ease;

background:#f9fbff;
padding:0 15px;
}


.module.active .module-content{
padding:15px;
max-height:300px;
overflow-y:auto;
}




/* درس ها */.lesson{

background:white;
color: #001631;
padding:12px;
margin-bottom:10px;
border-radius:8px;

cursor:pointer;

box-shadow:0 3px 10px rgba(0,0,0,0.08);

transition:0.3s;

font-size:14px;

}


/* افکت هاور درس */
.lesson:hover{

background:#001631;
color:white;

transform:translateY(-3px);

box-shadow:0 8px 20px rgba(0,0,0,0.15);

}

.lesson.disabled::after{

content:" (به زودی)";
font-size:12px;

}
.lesson.disabled{

opacity:0.5;
background:#e5e7eb;
color:#6b7280;

cursor:not-allowed;

}