/*======================================================
            فونت ها
======================================================*/

@font-face{

font-family:"IRANSans";

src:url("fonts/IRANSans.ttf");

}

@font-face{

font-family:"IranNastaliq";

src:url("fonts/IranNastaliq.ttf");

}


/*======================================================
            تنظیمات عمومی
======================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

direction:rtl;

background:#eef4fb;

font-family:"IRANSans",Tahoma,sans-serif;

color:#222;

overflow-x:hidden;

}


/*======================================================
            لینک ها
======================================================*/

a{

text-decoration:none;

color:inherit;

}


/*======================================================
            اسکرول اختصاصی
======================================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#d9e6f6;

}

::-webkit-scrollbar-thumb{

background:#5e8fd9;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#4475c4;

}


/*======================================================
            انیمیشن های عمومی
======================================================*/

*{

transition:

background .35s,

color .35s,

box-shadow .35s,

transform .25s,

opacity .35s;

}


img{

max-width:100%;

display:block;

}


button{

font-family:"IRANSans";

cursor:pointer;

}


input{

font-family:"IRANSans";

outline:none;

}


section{

width:100%;

}
/*======================================================
            هدر بالای سامانه
======================================================*/

.topHeader{

position:sticky;

top:0;

right:0;

left:0;

z-index:9999;

padding:10px 15px;

background:rgba(255,255,255,.90);

backdrop-filter:blur(12px);

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

box-shadow:0 5px 18px rgba(0,0,0,.08);

border-bottom:2px solid #48b8ff;

}


.topHeaderBox{

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

flex-wrap:wrap;

}


.headerItem{

flex:1;

min-width:180px;

text-align:center;

padding:12px 15px;

border-radius:14px;

background:linear-gradient(135deg,#2b73ff,#5cc6ff);

color:#ffffff;

font-size:15px;

font-weight:bold;

box-shadow:0 8px 18px rgba(43,115,255,.20);

animation:headerGlow 4s infinite;

}


.headerItem span{

font-weight:bold;

}


@keyframes headerGlow{

0%{

box-shadow:0 0 8px rgba(72,184,255,.30);

}

50%{

box-shadow:0 0 18px rgba(72,184,255,.60);

}

100%{

box-shadow:0 0 8px rgba(72,184,255,.30);

}

}


/*======================================================
            نوار اطلاع رسانی
======================================================*/

.newsBar{

margin:15px;

border-radius:14px;

overflow:hidden;

background:#1d4ed8;

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

}


.newsWrapper{

height:42px;

display:flex;

align-items:center;

overflow:hidden;

position:relative;

}


.newsTicker{

white-space:nowrap;

color:#ffffff;

font-size:15px;

font-weight:bold;

padding-right:100%;

animation:tickerMove 35s linear infinite;

}


@keyframes tickerMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-100%);

}

}
/*======================================================
            لوگو و عنوان سامانه
======================================================*/

.logoSection{

width:100%;

padding:30px 20px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}


.mainLogo{

width:130px;

height:auto;

margin-bottom:18px;

filter:drop-shadow(0 0 18px rgba(80,170,255,.35));

animation:logoFloat 5s ease-in-out infinite;

}


@keyframes logoFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}


.siteTitle{

font-family:"IranNastaliq";

font-size:44px;

font-weight:normal;

color:#2357d8;

text-align:center;

margin-bottom:10px;

}


.siteSubTitle{

font-size:18px;

color:#555;

text-align:center;

line-height:32px;

}



/*======================================================
            منوی دروس
======================================================*/

.lessonMenuSection{

width:95%;

max-width:1400px;

margin:25px auto;

background:#ffffff;

border-radius:22px;

padding:20px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}


.lessonMenuHeader{

font-size:22px;

font-weight:bold;

text-align:center;

margin-bottom:20px;

color:#2357d8;

}


.lessonMenu{

display:flex;

gap:12px;

flex-wrap:wrap;

justify-content:center;

align-items:center;

}


.lessonButton{

border:none;

padding:14px 22px;

border-radius:14px;

background:linear-gradient(135deg,#2f6fff,#58c5ff);

color:#fff;

font-size:15px;

font-weight:bold;

transition:.35s;

box-shadow:0 8px 18px rgba(0,0,0,.10);

}


.lessonButton:hover{

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(47,111,255,.25);

}


.lessonButton:active{

transform:scale(.97);

}



/*======================================================
            زیرمنوی متون فقه
======================================================*/

.lessonDropdown{

position:relative;

}


.dropdownButton{

display:flex;

align-items:center;

gap:8px;

}


.arrow{

font-size:12px;

}


.dropdownMenu{

display:none;

position:absolute;

top:58px;

right:0;

background:#fff;

border-radius:16px;

padding:10px;

min-width:230px;

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

z-index:999;

}


.subLessonButton{

width:100%;

margin:6px 0;

}
/*======================================================
            پنل نمایش مباحث
======================================================*/

.lessonViewer{

width:95%;

max-width:1400px;

margin:25px auto;

background:#ffffff;

border-radius:22px;

overflow:hidden;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}


.viewerHeader{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 25px;

background:linear-gradient(135deg,#2b73ff,#5bc8ff);

color:#ffffff;

}


.viewerHeader h2{

font-size:22px;

font-weight:bold;

}


#lessonCount{

background:rgba(255,255,255,.18);

padding:10px 18px;

border-radius:30px;

font-size:14px;

}


#lessonList{

padding:25px;

min-height:250px;

display:flex;

flex-direction:column;

gap:15px;

}


.loadingBox{

text-align:center;

padding:50px 20px;

font-size:18px;

color:#666;

}



/*======================================================
            هر مبحث
======================================================*/

.topicItem{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 22px;

border-radius:16px;

background:#f6faff;

border:1px solid #d8e8ff;

cursor:pointer;

transition:.35s;

}


.topicItem:hover{

transform:translateY(-3px);

background:#edf6ff;

box-shadow:0 12px 28px rgba(0,0,0,.10);

}


.topicTitle{

font-size:16px;

font-weight:bold;

color:#222;

}


.topicTime{

font-size:14px;

color:#2b73ff;

font-weight:bold;

}


.topicItem.active{

background:linear-gradient(135deg,#2b73ff,#5bc8ff);

color:#ffffff;

border:none;

}


.topicItem.active .topicTitle,

.topicItem.active .topicTime{

color:#ffffff;

}
/*======================================================
            پلیر صوت
======================================================*/

.audioSection{

width:95%;

max-width:1400px;

margin:25px auto;

padding:25px;

background:#ffffff;

border-radius:22px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}


.audioSection h2{

text-align:center;

font-size:24px;

color:#2357d8;

margin-bottom:25px;

}


#audioPlayer{

width:100%;

height:58px;

border-radius:15px;

outline:none;

}



/*======================================================
            دکمه های فایل
======================================================*/

.filesSection{

width:95%;

max-width:1400px;

margin:25px auto;

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

}


.fileButton{

display:flex;

justify-content:center;

align-items:center;

min-width:220px;

padding:16px 25px;

border:none;

border-radius:15px;

background:linear-gradient(135deg,#2f6fff,#5bc8ff);

color:#ffffff;

font-size:17px;

font-weight:bold;

text-decoration:none;

cursor:pointer;

box-shadow:0 10px 25px rgba(43,115,255,.18);

transition:.35s;

}


.fileButton:hover{

transform:translateY(-4px);

box-shadow:0 16px 35px rgba(43,115,255,.30);

}


.fileButton:active{

transform:scale(.98);

}



/*======================================================
            کارت اطلاعات درس
======================================================*/

.lessonInfo{

width:95%;

max-width:1400px;

margin:25px auto;

}


.infoCard{

display:flex;

justify-content:space-around;

align-items:center;

flex-wrap:wrap;

gap:20px;

padding:30px;

background:#ffffff;

border-radius:22px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}


.infoItem{

min-width:220px;

padding:20px;

border-radius:18px;

text-align:center;

background:#f4f9ff;

transition:.35s;

}


.infoItem:hover{

transform:translateY(-5px);

background:#e8f4ff;

}


.infoItem span{

display:block;

margin:12px 0;

font-size:15px;

color:#666;

}


.infoItem strong{

display:block;

font-size:28px;

color:#2357d8;

}



/*======================================================
            لوگوی پایین صفحه
======================================================*/

.pageFooter{

padding:45px 20px;

text-align:center;

}


.footerLogo{

width:110px;

margin:auto;

opacity:.95;

filter:drop-shadow(0 0 12px rgba(80,170,255,.35));

animation:footerLogo 6s ease-in-out infinite;

}


@keyframes footerLogo{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}
/*======================================================
            Responsive
======================================================*/

@media screen and (max-width:1200px){

.lessonMenu{

justify-content:center;

}

.viewerHeader{

flex-direction:column;

gap:15px;

text-align:center;

}

.infoCard{

justify-content:center;

}

}


@media screen and (max-width:992px){

.topHeaderBox{

flex-direction:column;

}

.headerItem{

width:100%;

}

.mainLogo{

width:115px;

}

.siteTitle{

font-size:38px;

}

.lessonButton{

width:100%;

}

.dropdownMenu{

position:static;

box-shadow:none;

margin-top:10px;

}

.filesSection{

flex-direction:column;

}

.fileButton{

width:100%;

}

}


@media screen and (max-width:768px){

body{

font-size:15px;

}

.topHeader{

padding:8px;

}

.headerItem{

font-size:14px;

padding:10px;

}

.newsBar{

margin:10px;

}

.newsWrapper{

height:38px;

}

.newsTicker{

font-size:14px;

}

.mainLogo{

width:95px;

}

.siteTitle{

font-size:30px;

line-height:55px;

}

.siteSubTitle{

font-size:15px;

}

.lessonViewer,
.audioSection,
.lessonInfo,
.lessonMenuSection{

width:97%;

}

.viewerHeader h2{

font-size:18px;

}

#lessonCount{

font-size:13px;

padding:8px 15px;

}

.topicItem{

padding:15px;

}

.topicTitle{

font-size:15px;

}

.topicTime{

font-size:13px;

}

#audioPlayer{

height:52px;

}

.infoItem{

min-width:100%;

}

.footerLogo{

width:90px;

}

}


@media screen and (max-width:480px){

.siteTitle{

font-size:26px;

}
/*======================================================
            افکت های حرفه ای
======================================================*/


/*---------- ظاهر انتخاب شده ----------*/

.lessonButton.active{

background:linear-gradient(135deg,#00b4ff,#6b4dff);

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(0,180,255,.35);

}


/*---------- ظاهر مبحث انتخاب شده ----------*/

.topicItem.selected{

background:linear-gradient(135deg,#00b4ff,#6b4dff);

color:#ffffff;

border:none;

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

}


.topicItem.selected .topicTitle,

.topicItem.selected .topicTime{

color:#ffffff;

}



/*---------- باز شدن زیرمنو ----------*/

.dropdownMenu{

opacity:0;

visibility:hidden;

transform:translateY(-15px);

transition:.35s;

}


.lessonDropdown.open .dropdownMenu{

opacity:1;

visibility:visible;

transform:translateY(0);

}



/*---------- ظاهر کارت ها ----------*/

.lessonViewer,

.audioSection,

.lessonInfo,

.lessonMenuSection{

transition:.45s;

}


.lessonViewer:hover,

.audioSection:hover,

.lessonInfo:hover,

.lessonMenuSection:hover{

transform:translateY(-4px);

}



/*---------- Fade ----------*/

.fadeIn{

animation:fadeIn .45s ease;

}


@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*---------- Pulse ----------*/

.pulse{

animation:pulse 1.5s infinite;

}


@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}



/*---------- هاله روی دکمه ها ----------*/

.fileButton::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.8s;

}


.fileButton{

position:relative;

overflow:hidden;

}


.fileButton:hover::before{

left:100%;

}



/*---------- انتخاب متن ----------*/

::selection{

background:#00b4ff;

color:#ffffff;

}



/*---------- جلوگیری از انتخاب متن دکمه ها ----------*/

.lessonButton,

.fileButton,

.topicItem{

user-select:none;

-webkit-user-select:none;

}
/*======================================================
            افکت های تکمیلی رابط کاربری
======================================================*/


/*=========================
      نمایش بارگذاری
=========================*/

.loadingBox{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

font-size:17px;

color:#2b73ff;

font-weight:bold;

}


.loadingBox::before{

content:"";

width:18px;

height:18px;

border-radius:50%;

border:3px solid #d9ebff;

border-top:3px solid #2b73ff;

animation:loadingSpin .8s linear infinite;

}


@keyframes loadingSpin{

100%{

transform:rotate(360deg);

}


/*=========================
      اسکرول نرم پنل مباحث
=========================*/

#lessonList{

max-height:650px;

overflow-y:auto;

scroll-behavior:smooth;

}


/*=========================
      Hover روی لوگو
=========================*/

.mainLogo:hover{

transform:scale(1.06) rotate(3deg);

}


/*=========================
      Hover روی لوگوی پایین
=========================*/

.footerLogo:hover{

transform:scale(1.08);

}


/*=========================
      دکمه غیرفعال
=========================*/

.lessonButton:disabled,

.fileButton:disabled{

opacity:.45;

cursor:not-allowed;

box-shadow:none;

}


/*=========================
      افکت ظاهر شدن صفحه
=========================*/

body{

animation:pageFade .6s ease;

}


@keyframes pageFade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}


/*=========================
      بدون لرزش تصاویر
=========================*/

img{

user-select:none;

-webkit-user-drag:none;

pointer-events:auto;

}


/*=========================
      کارت های شیشه ای
=========================*/

.lessonViewer,

.lessonInfo,

.audioSection{

backdrop-filter:blur(8px);

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

}


/*=========================
      فاصله پایین صفحه
=========================*/

.pageFooter{

margin-top:60px;

padding-bottom:40px;

}
/*======================================================
        بهینه سازی و افکت های حرفه ای
======================================================*/


/*=========================
      نوار بالایی
=========================*/

.topHeader{

transition:.40s;

}

.topHeader:hover{

box-shadow:0 10px 30px rgba(43,115,255,.20);

}


/*=========================
      کاربران آنلاین
=========================*/

#onlineUsers{

display:inline-block;

min-width:45px;

font-weight:bold;

color:#ffe066;

animation:onlinePulse 3s infinite;

}


@keyframes onlinePulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}



/*=========================
      ساعت زنده
=========================*/

#liveClock{

font-weight:bold;

letter-spacing:1px;

}



/*=========================
      نام کاربر
=========================*/

#userName{

font-weight:bold;

color:#ffffff;

}



/*=========================
      نوار اطلاعیه
=========================*/

.newsTicker{

display:inline-flex;

align-items:center;

gap:70px;

padding-right:100%;

will-change:transform;

}



/*=========================
      فاصله سکشن ها
=========================*/

.lessonMenuSection,

.lessonViewer,

.audioSection,

.lessonInfo{

scroll-margin-top:100px;

}



/*=========================
      نمایش نرم
=========================*/

.show{

animation:showItem .40s ease;

}

@keyframes showItem{

0%{

opacity:0;

transform:translateY(12px);

}

100%{

opacity:1;

transform:translateY(0);

}

}



/*=========================
      مخفی شدن نرم
=========================*/

.hide{

animation:hideItem .30s ease;

}

@keyframes hideItem{

0%{

opacity:1;

}

100%{

opacity:0;

}

}



/*=========================
      مانیتورهای بزرگ
=========================*/

@media(min-width:1600px){

.lessonMenuSection,

.lessonViewer,

.audioSection,

.lessonInfo{

max-width:1550px;

}

.siteTitle{

font-size:52px;

}

}



/*=========================
      جلوگیری از انتخاب متن
=========================*/

.mainLogo,

.footerLogo{

user-select:none;

-webkit-user-select:none;

}
/*======================================================
            کیفیت نهایی رابط کاربری
======================================================*/


/*=========================
      جلوگیری از پرش صفحه
=========================*/

html{

overflow-y:scroll;

}



/*=========================
      انتخاب متن
=========================*/

input,
textarea{

user-select:text;

}


/*=========================
      تصاویر
=========================*/

img{

image-rendering:auto;

}


/*=========================
      دکمه ها
=========================*/

button{

outline:none;

border:none;

}


button:focus{

outline:none;

}



/*=========================
      افکت کلیک
=========================*/

.lessonButton:active,
.fileButton:active,
.topicItem:active{

transform:scale(.97);

}



/*=========================
      متن های طولانی
=========================*/

.topicTitle{

word-break:break-word;

line-height:30px;

}



/*=========================
      جلوگیری از به هم ریختگی
=========================*/

.viewerHeader h2,
.siteTitle,
.siteSubTitle{

word-break:break-word;

}



/*=========================
      سایه نرم
=========================*/

.lessonViewer,
.audioSection,
.lessonInfo,
.lessonMenuSection{

border:1px solid rgba(80,160,255,.08);

}



/*=========================
      افکت ورود کارت ها
=========================*/

.topicItem{

animation:topicFade .35s ease;

}


@keyframes topicFade{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*=========================
      فاصله آخر صفحه
=========================*/

body{

padding-bottom:35px;

}



/*=========================
      چاپ
=========================*/

@media print{

.topHeader,
.newsBar,
.audioSection,
.filesSection{

display:none;

}

body{

background:#ffffff;

}

}
/*======================================================
            بهینه سازی نهایی رابط کاربری
======================================================*/


/*=========================
      متغیرهای رنگ
=========================*/

:root{

--primary:#2b73ff;

--secondary:#5bc8ff;

--purple:#6b4dff;

--success:#18b566;

--danger:#e74c3c;

--warning:#f1c40f;

--white:#ffffff;

--dark:#202124;

--gray:#f5f8fc;

--shadow:0 10px 25px rgba(0,0,0,.08);

}



/*=========================
      فوکوس روی فرم ها
=========================*/

input:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(43,115,255,.15);

}



/*=========================
      جلوگیری از بیرون زدگی
=========================*/

.lessonViewer,
.lessonMenuSection,
.audioSection,
.lessonInfo{

overflow:hidden;

}



/*=========================
      فاصله داخلی
=========================*/

.viewerHeader,
.lessonMenuHeader{

letter-spacing:.3px;

}



/*=========================
      متن فارسی
=========================*/

body{

text-align:right;

line-height:1.9;

}



/*=========================
      روان بودن انیمیشن ها
=========================*/

.lessonButton,
.fileButton,
.topicItem,
.headerItem,
.infoItem{

will-change:transform;

}



/*=========================
      کاهش مصرف پردازنده
=========================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}



/*=========================
      پایان فایل
=========================*/
/*======================================================
            پایان و بهینه سازی نهایی
======================================================*/


/*=========================
      Anti Flicker
=========================*/

*{

-webkit-tap-highlight-color:transparent;

}



/*=========================
      کیفیت متن
=========================*/

body{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

text-rendering:optimizeLegibility;

}



/*=========================
      کیفیت تصاویر
=========================*/

img{

object-fit:contain;

}



/*=========================
      جلوگیری از کشیده شدن
=========================*/

audio{

max-width:100%;

}



/*=========================
      آماده برای Dark Mode
=========================*/

.darkMode{

background:#111827;

color:#ffffff;

}



/*=========================
      پایان فایل CSS
======================================================*/