/*=================================================
 QORAN HOME CSS v1
=================================================*/
:root{
 --primary:#0F4C3A;
 --primary-dark:#0A3D30;
 --accent:#D4AF37;
 --bg:#F5F7F2;
 --text:#22313f;
 --white:#fff;
 --radius:24px;
 --shadow:0 18px 45px rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 direction:rtl;
 font-family:'Vazirmatn',Tahoma,sans-serif;
 background:linear-gradient(180deg,#eef7f2,#f8faf8);
 color:var(--text);
 overflow-x:hidden;
}
.container{width:min(1320px,92%);margin:auto}
section{padding:90px 0}
.hero-section{
 position:relative;
 overflow:hidden;
 padding:120px 0 90px;
 background:
 radial-gradient(circle at top left,rgba(212,175,55,.18),transparent 35%),
 linear-gradient(135deg,#0d3b2e,#145643);
 color:#fff;
}
.hero-grid{
 display:grid;
 grid-template-columns:1.15fr .85fr;
 gap:60px;
 align-items:center;
}
.hero-badge{
 display:inline-block;
 padding:.55rem 1rem;
 border-radius:999px;
 background:rgba(255,255,255,.12);
 backdrop-filter:blur(8px);
 margin-bottom:20px;
}
.hero-content h1{
 font-size:clamp(2.5rem,5vw,4.4rem);
 line-height:1.2;
 margin-bottom:20px;
}
.hero-content h1 span{color:var(--accent)}
.hero-content p{
 color:#e7ece9;
 font-size:1.08rem;
 max-width:650px;
}
.hero-buttons{display:flex;gap:16px;margin:34px 0;flex-wrap:wrap}
.btn-primary,.btn-secondary{
 padding:14px 28px;
 border-radius:14px;
 text-decoration:none;
 transition:.3s;
}
.btn-primary{
 background:var(--accent);
 color:#17342a;
 font-weight:700;
}
.btn-primary:hover{transform:translateY(-3px)}
.btn-secondary{
 border:1px solid rgba(255,255,255,.3);
 color:#fff;
}
.hero-stats{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:16px;
 margin-top:20px;
}
.hero-stats>div{
 background:rgba(255,255,255,.08);
 backdrop-filter:blur(10px);
 border-radius:18px;
 padding:20px;
 text-align:center;
}
.hero-image img{
 width:100%;
 max-width:520px;
 margin:auto;
 filter:drop-shadow(0 25px 45px rgba(0,0,0,.35));
}
.section-title{text-align:center;margin-bottom:50px}
.section-title small{color:var(--accent);font-weight:700}
.section-title h2{margin-top:10px;font-size:2.2rem}
.feature-grid,.statistics-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:24px;
}
.feature-card,.stat-card,.verse-box,.cta-box{
 background:#fff;
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 padding:32px;
}
.feature-card .icon{font-size:2rem;margin-bottom:15px}
.verse-section{background:#f0f5f1}
.verse-box{text-align:center}
.search-wrapper{
 background:#fff;
 border-radius:24px;
 padding:40px;
 box-shadow:var(--shadow);
}
.search-form{display:flex;gap:14px;flex-wrap:wrap}
.search-form input{
 flex:1;
 min-width:220px;
 padding:15px;
 border:1px solid #dfe6df;
 border-radius:14px;
}
.search-form button{
 padding:15px 28px;
 border:none;
 border-radius:14px;
 background:var(--primary);
 color:#fff;
 cursor:pointer;
}
.statistics{background:#fafcf9}
.stat-card{text-align:center}
.stat-card h3{font-size:3rem;color:var(--primary)}
.cta-section{
 background:linear-gradient(135deg,#0d3b2e,#16664d);
 color:#fff;
}
.cta-box{text-align:center;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
@media(max-width:992px){
 .hero-grid{grid-template-columns:1fr}
 .hero-content{text-align:center}
 .hero-image{order:-1}
}


/* ===== Header V2 ===== */
.site-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background:rgba(11,52,41,.72);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
min-height:84px;
gap:24px;
}
.logo{
display:flex;
align-items:center;
gap:14px;
color:#fff;
text-decoration:none;
}
.logo img{
width:48px;
height:48px;
object-fit:contain;
}
.logo strong{display:block;font-size:22px}
.logo small{color:#cfded8}
.main-nav{
display:flex;
gap:28px;
}
.main-nav a{
color:#fff;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.main-nav a:hover{
color:#d4af37;
}
.header-actions{
display:flex;
gap:12px;
}
.hero-section{
padding-top:170px!important;
}
.mobile-menu-btn{
display:none;
background:none;
border:none;
font-size:30px;
color:#fff;
cursor:pointer;
}
@media(max-width:992px){
.main-nav,.header-actions{
display:none;
}
.mobile-menu-btn{
display:block;
}
.logo strong{font-size:18px;}
}


/* ===== Hero V2 ===== */
.hero-section{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 10% 20%,rgba(212,175,55,.18),transparent 30%),
radial-gradient(circle at 90% 15%,rgba(255,255,255,.08),transparent 25%),
linear-gradient(135deg,#0d3b2e,#145643);
}

.hero-section::before{
content:"";
position:absolute;
inset:0;
opacity:.08;
background-image:
linear-gradient(45deg,transparent 48%,#fff 49%,transparent 50%),
linear-gradient(-45deg,transparent 48%,#fff 49%,transparent 50%);
background-size:80px 80px;
pointer-events:none;
}

.hero-image{
display:flex;
justify-content:center;
align-items:center;
}

.hero-image img{
max-width:560px;
width:100%;
transform:rotate(-4deg);
filter:drop-shadow(0 30px 45px rgba(0,0,0,.45));
transition:.4s;
}

.hero-image img:hover{
transform:rotate(0deg) scale(1.03);
}

.hero-content h1{
font-size:clamp(46px,5vw,72px);
font-weight:800;
}

.hero-content p{
font-size:18px;
line-height:2;
margin-top:18px;
max-width:620px;
}

.hero-stats div{
transition:.3s;
}

.hero-stats div:hover{
transform:translateY(-8px);
background:rgba(255,255,255,.18);
}
/* =====================================
   QORAN PREMIUM UI ENHANCEMENT
===================================== */


/* صفحه اصلی */

.quran-landing {
    overflow:hidden;
}


/* هدر شیشه‌ای */

header,
.quran-header {

    backdrop-filter: blur(12px);
    background: rgba(5,30,24,.35);
    border-bottom:1px solid rgba(255,255,255,.12);

}



/* Hero ارتقا یافته */

.hero-section {

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    justify-content:center;

    background-position:center;

}



.hero-section::before {

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(212,155,53,.35),
        transparent 35%
    ),

    linear-gradient(
        180deg,
        rgba(0,0,0,.15),
        rgba(3,25,20,.75)
    );

}



.hero-content {

    position:relative;

    z-index:2;

}



/* لوگوی بسم الله */

.quran-logo {

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.25),
        rgba(255,255,255,.05)
    );

    border:1px solid rgba(255,255,255,.3);

    box-shadow:

    0 20px 50px rgba(0,0,0,.35);

    font-size:45px;

    color:#f3d18a;

}




.hero-content h1 {

    text-shadow:

    0 5px 20px rgba(0,0,0,.5);

}




/* دکمه‌ها */

.btn-primary {

    background:

    linear-gradient(
        135deg,
        #d4a037,
        #a87518
    );

    box-shadow:

    0 10px 30px rgba(212,160,55,.35);

}



.btn-primary:hover {

    transform:translateY(-4px);

}




.btn-secondary {

    backdrop-filter:blur(10px);

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

}



/* کارت‌های امکانات */

.feature-card {

    border:1px solid rgba(15,75,55,.08);

    transition:.35s ease;

}



.feature-card:hover {

    box-shadow:

    0 20px 45px rgba(0,0,0,.12);

}



/* آمار */

.stats-section {

    position:relative;

    overflow:hidden;

}



.stats-section::before {

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:#d4a037;

    opacity:.12;

    border-radius:50%;

    top:-150px;

    right:-100px;

}



/* کارت سوره */

.surah-card {

    position:relative;

    overflow:hidden;

}



.surah-card::before {

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(212,155,53,.15),
        transparent
    );

    opacity:0;

    transition:.3s;

}



.surah-card:hover::before {

    opacity:1;

}



.surah-card:hover {

    transform:translateY(-8px);

}



/* فوتر */

.quran-footer {

    border-top:

    1px solid rgba(255,255,255,.08);

}



/* حرکت نرم */

@keyframes quranFade {

    from {

        opacity:0;

        transform:translateY(20px);

    }

    to {

        opacity:1;

        transform:translateY(0);

    }

}



.hero-content {

    animation:quranFade 1s ease;

}

/* =====================================
   PREMIUM HERO BACKGROUND
===================================== */


.hero-section {

    min-height:760px;

    background:

    linear-gradient(
        180deg,
        rgba(3,20,16,.45),
        rgba(3,20,16,.85)
    ),

    url('/images/quran-bg.jpg');

    background-size:cover;

    background-position:center;

    position:relative;

}



/* نور طلایی پشت محتوا */

.hero-section::after {

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.25),
        transparent 65%
    );


    top:50%;

    left:50%;

    transform:
    translate(-50%,-50%);


    pointer-events:none;

}



/* محتوای وسط */

.hero-content {

    max-width:850px;

    text-align:center;

    padding:40px;

}



/* عنوان */

.hero-content h1 {

    font-size:58px;

    font-weight:800;

    letter-spacing:-1px;

    margin-top:25px;

    color:#fff;

}



/* توضیح */

.hero-content p {

    max-width:600px;

    margin:25px auto 40px;

    color:rgba(255,255,255,.9);

    line-height:2;

    font-size:21px;

}



/* دکمه اصلی بزرگ */

.btn-primary {

    padding:

    16px 45px;


    font-size:17px;

    font-weight:bold;

}



/* جستجوی شناور */

.quick-search {

    position:relative;

    margin-top:-70px;

    z-index:10;

}



.search-box {

    max-width:850px;

    padding:12px;

    background:

    rgba(255,255,255,.95);

    border-radius:25px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.18);

}



.search-box input {

    height:60px;

    font-size:17px;

}



/* موبایل */

@media(max-width:768px){

    .hero-section {

        min-height:620px;

    }


    .hero-content h1 {

        font-size:38px;

    }


    .hero-content p {

        font-size:16px;

    }

}

/* =====================================
   PREMIUM STATISTICS CARDS
===================================== */


.stats-section {

    padding:90px 20px;

    background:#f8f5ed;

    position:relative;

}



.stats-grid {

    max-width:1150px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.stat-item {

    position:relative;

    background:

    linear-gradient(
        145deg,
        #ffffff,
        #f4efe2
    );

    border-radius:25px;

    padding:40px 20px;

    text-align:center;

    border:1px solid rgba(212,160,55,.18);

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

    overflow:hidden;

}



.stat-item::before {

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.25),
        transparent 70%
    );

    top:-40px;

    right:-40px;

}



.stat-item:hover {

    transform:translateY(-10px);

    box-shadow:

    0 25px 55px rgba(0,0,0,.14);

}



.stat-item strong {

    position:relative;

    display:block;

    font-size:52px;

    font-weight:800;

    color:#0b4d3b;

    margin-bottom:15px;

}



.stat-item span {

    position:relative;

    font-size:18px;

    color:#555;

}



/* آیکون کوچک بالای عدد */

.stat-item strong::after {

    content:"";

    display:block;

    width:45px;

    height:3px;

    background:#d4a037;

    margin:15px auto 0;

    border-radius:10px;

}




@media(max-width:992px){

    .stats-grid {

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:600px){

    .stats-grid {

        grid-template-columns:1fr;

    }

}


/* حلقه طلایی */

.surah-card::before {

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    border-radius:50%;

    background:

    rgba(212,160,55,.12);

    top:-30px;

    right:-30px;

}



/* شماره سوره */

.surah-card::after {

    content:"";

    position:absolute;

    bottom:20px;

    width:40px;

    height:3px;

    background:#d4a037;

    border-radius:10px;

}



.surah-card:hover {

    transform:

    translateY(-12px);

    background:

    linear-gradient(
        145deg,
        #0b4d3b,
        #063024
    );

    color:#fff;

    box-shadow:

    0 25px 60px rgba(11,77,59,.3);

}



.surah-card:hover::after {

    background:#f5d58a;

}



/* عنوان بخش */

.featured-section .section-title {

    margin-bottom:20px;

}




@media(max-width:992px){

    .surah-grid {

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:600px){

    .surah-grid {

        grid-template-columns:1fr;

    }

}
/* =====================================
   PREMIUM CTA SECTION
===================================== */


.cta-section {

    position:relative;

    margin:40px 20px;

    padding:90px 30px;

    border-radius:35px;

    overflow:hidden;

    text-align:center;

    background:

    linear-gradient(
        135deg,
        #0b4d3b,
        #063024
    );

    box-shadow:

    0 25px 60px rgba(0,0,0,.18);

}



.cta-section::before {

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(245,213,138,.35),
        transparent 70%
    );

    top:-150px;

    right:-80px;

}



.cta-section::after {

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.25),
        transparent 70%
    );

    bottom:-120px;

    left:-80px;

}



.cta-section h2 {

    position:relative;

    z-index:2;

    color:#fff;

    font-size:38px;

    margin-bottom:20px;

}



.cta-section p {

    position:relative;

    z-index:2;

    color:rgba(255,255,255,.85);

    font-size:18px;

}





/* =====================================
   PREMIUM FOOTER
===================================== */


.quran-footer {

    margin-top:70px;

    padding:45px 20px;

    background:#041b14;

    color:#fff;

    text-align:center;

    border-top:

    1px solid rgba(255,255,255,.08);

}



.quran-footer p {

    margin:0;

    color:rgba(255,255,255,.7);

    font-size:14px;

}



/* =====================================
   SMOOTH ANIMATION
===================================== */


.feature-card,
.stat-item,
.surah-card,
.cta-section {

    animation:

    quranShow .8s ease both;

}



@keyframes quranShow {

    from {

        opacity:0;

        transform:translateY(35px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}




@media(max-width:600px){

    .cta-section {

        padding:60px 20px;

    }


    .cta-section h2 {

        font-size:28px;

    }


}

/* =====================================
   PREMIUM FEATURE CARDS
===================================== */


.features-section {

    padding:100px 20px;

    background:#f9faf7;

}



.features-grid {

    max-width:1200px;

    margin:50px auto 0;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.feature-card {

    position:relative;

    background:#fff;

    padding:45px 25px;

    border-radius:30px;

    text-align:center;

    overflow:hidden;

    border:1px solid rgba(11,77,59,.08);

    box-shadow:

    0 15px 35px rgba(0,0,0,.07);

    transition:.4s ease;

}



/* نور گوشه کارت */

.feature-card::before {

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.22),
        transparent 70%
    );

    top:-50px;

    left:-50px;

}



/* آیکون */

.feature-card .icon {

    width:85px;

    height:85px;

    margin:0 auto 25px;

    border-radius:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        145deg,
        #0b4d3b,
        #063024
    );

    color:#f5d58a;

    font-size:32px;

    box-shadow:

    0 15px 30px rgba(11,77,59,.25);

}



.feature-card h3 {

    position:relative;

    color:#0b4d3b;

    font-size:21px;

    margin-bottom:15px;

}



.feature-card p {

    position:relative;

    color:#777;

    line-height:2;

    font-size:15px;

}



/* Hover */

.feature-card:hover {

    transform:

    translateY(-12px);

    box-shadow:

    0 25px 55px rgba(0,0,0,.12);

}



.feature-card:hover .icon {

    transform:

    rotate(-5deg) scale(1.08);

}





@media(max-width:992px){

    .features-grid {

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:600px){

    .features-grid {

        grid-template-columns:1fr;

    }

}

/* =====================================
   QORAN DARK PREMIUM DESIGN
===================================== */

body {
    background:#071521;
}


/* Main Container */

.quran-landing {
    background:#071521;
    color:#fff;
}



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

.quran-header,
header {

    background:
    rgba(7,21,33,.55);

    backdrop-filter:blur(15px);

    border-bottom:
    1px solid rgba(255,255,255,.08);

}



/* =====================================
   HERO PREMIUM
===================================== */


.hero-section {

    min-height:820px;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        90deg,
        rgba(7,21,33,.95),
        rgba(7,21,33,.45)
    ),

    url('/images/quran-bg.jpg');


    background-size:cover;

    background-position:center;

}



/* نور طلایی */

.hero-section::before {

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.25),
        transparent 70%
    );


    right:-200px;

    top:80px;

}



/* محتوا */

.hero-content {

    position:relative;

    z-index:2;

    max-width:600px;

    margin-right:10%;

    text-align:right;

}



.quran-logo {

    margin:0;

    background:

    rgba(255,255,255,.08);

    border:

    1px solid rgba(255,255,255,.15);

}



.hero-content h1 {

    color:#fff;

    font-size:64px;

    font-weight:900;

}



.hero-content p {

    color:

    rgba(255,255,255,.8);

    font-size:22px;

    line-height:2;

}



/* دکمه طلایی */

.btn-primary {

    background:

    linear-gradient(
        135deg,
        #e0b04b,
        #b77c18
    );

    color:#071521;

    font-weight:bold;

}



.btn-secondary {

    background:

    rgba(255,255,255,.08);

    border:

    1px solid rgba(255,255,255,.25);

}





/* Search Floating */

.quick-search {

    margin-top:-80px;

    position:relative;

    z-index:5;

}



.search-box {

    background:

    rgba(255,255,255,.08);

    backdrop-filter:

    blur(20px);


    border:

    1px solid rgba(255,255,255,.15);


    box-shadow:

    0 20px 60px rgba(0,0,0,.4);

}



.search-box input {

    background:transparent;

    color:#fff;

}



.search-box button {

    background:#d4a037;

    color:#071521;

}

/* =====================================
   QORAN GLASS STATISTICS
===================================== */


.stats-section {

    position:relative;

    margin-top:0;

    padding:90px 20px;

    background:

    linear-gradient(
        180deg,
        #071521,
        #0a1e2b
    );

    overflow:hidden;

}



/* نور پس زمینه */

.stats-section::before {

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.18),
        transparent 70%
    );


    left:-180px;

    top:50px;

}





.stats-grid {

    position:relative;

    z-index:2;

    max-width:1150px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}





.stat-item {

    position:relative;

    padding:40px 25px;

    text-align:center;


    background:

    rgba(255,255,255,.07);


    backdrop-filter:

    blur(18px);



    border:

    1px solid rgba(255,255,255,.12);


    border-radius:25px;



    box-shadow:

    0 20px 50px rgba(0,0,0,.25);



    transition:.35s ease;

}





.stat-item:hover {

    transform:

    translateY(-10px);



    border-color:

    rgba(212,160,55,.45);


}





.stat-item strong {

    display:block;

    color:#f1cf7a;

    font-size:52px;

    font-weight:900;

    margin-bottom:15px;

}





.stat-item span {

    color:

    rgba(255,255,255,.8);


    font-size:18px;

}





/* خط طلایی */

.stat-item::after {

    content:"";

    width:45px;

    height:3px;


    background:#d4a037;


    position:absolute;


    bottom:20px;

    left:50%;


    transform:translateX(-50%);


    border-radius:20px;

}





@media(max-width:992px){

    .stats-grid {

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:600px){

    .stats-grid {

        grid-template-columns:1fr;

    }

}
/* =====================================
   QORAN GLASS FEATURES
===================================== */


.features-section {

    position:relative;

    padding:100px 20px;

    background:#071521;

    overflow:hidden;

}



.features-section::before {

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.12),
        transparent 70%
    );


    right:-200px;

    top:100px;

}



.features-section .section-title {

    position:relative;

    z-index:2;

}



.features-section .section-title h2 {

    color:#fff;

}



.features-section .section-title p {

    color:rgba(255,255,255,.65);

}




.features-grid {

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:50px auto 0;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}





.feature-card {

    position:relative;

    padding:40px 25px;


    background:

    rgba(255,255,255,.06);


    backdrop-filter:

    blur(18px);



    border:

    1px solid rgba(255,255,255,.12);


    border-radius:28px;



    text-align:center;



    transition:.35s ease;



    box-shadow:

    0 20px 45px rgba(0,0,0,.25);

}





.feature-card:hover {

    transform:

    translateY(-12px);



    border-color:

    rgba(212,160,55,.5);



    background:

    rgba(255,255,255,.1);

}





/* آیکون */

.feature-card .icon {

    width:85px;

    height:85px;


    margin:0 auto 25px;


    display:flex;

    align-items:center;

    justify-content:center;



    border-radius:25px;



    background:

    linear-gradient(
        145deg,
        #d4a037,
        #9b6815
    );



    color:#071521;


    font-size:32px;



    box-shadow:

    0 15px 35px rgba(212,160,55,.25);

}





.feature-card h3 {

    color:#fff;

    font-size:21px;

    margin-bottom:15px;

}





.feature-card p {

    color:

    rgba(255,255,255,.65);


    line-height:2;

    font-size:15px;

}





@media(max-width:992px){

    .features-grid {

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:600px){

    .features-grid {

        grid-template-columns:1fr;

    }

}






/* =====================================
   QORAN PREMIUM CTA
===================================== */


.cta-section {

    position:relative;

    margin:80px auto;

    max-width:1200px;

    padding:90px 40px;


    background:

    linear-gradient(
        135deg,
        rgba(212,160,55,.18),
        rgba(255,255,255,.05)
    );


    backdrop-filter:

    blur(20px);



    border:

    1px solid rgba(255,255,255,.15);



    border-radius:35px;



    text-align:center;



    overflow:hidden;



    box-shadow:

    0 30px 80px rgba(0,0,0,.35);

}





.cta-section::before {

    content:"";


    position:absolute;


    width:450px;


    height:450px;


    border-radius:50%;



    background:

    radial-gradient(
        circle,
        rgba(212,160,55,.25),
        transparent 70%
    );


    top:-250px;


    right:-100px;


}





.cta-section h2 {

    position:relative;

    z-index:2;


    color:#fff;


    font-size:42px;


    font-weight:800;


    margin-bottom:20px;

}





.cta-section p {

    position:relative;

    z-index:2;


    color:

    rgba(255,255,255,.75);


    font-size:18px;


    line-height:2;

}





/* =====================================
   FOOTER PREMIUM
===================================== */


.quran-footer {


    margin-top:100px;


    padding:50px 20px;


    background:


    #050f18;



    border-top:


    1px solid rgba(255,255,255,.08);



    text-align:center;



}



.quran-footer p {


    color:

    rgba(255,255,255,.55);


    font-size:14px;


}





/* =====================================
   PAGE FINAL ANIMATION
===================================== */


.feature-card,
.stat-item,
.surah-card,
.cta-section {


    animation:

    qoranFade .8s ease both;


}



@keyframes qoranFade {


    from {

        opacity:0;

        transform:

        translateY(30px);

    }



    to {

        opacity:1;

        transform:

        translateY(0);

    }


}





/* Mobile */

@media(max-width:600px){


    .cta-section {

        margin:40px 15px;

        padding:60px 20px;

    }


    .cta-section h2 {

        font-size:30px;

    }


}

/* =====================================
   QORAN TYPOGRAPHY & FINAL COLORS
===================================== */


.quran-landing {

    font-family:
    IRANSansWeb,
    Tahoma,
    sans-serif;

}



/* تیترهای اصلی */

.section-title h2 {

    font-size:36px;

    font-weight:800;

    letter-spacing:-.5px;

}



.section-title h2::after {

    content:"";

    display:block;

    width:70px;

    height:3px;

    background:#d4a037;

    margin:18px auto 0;

    border-radius:20px;

}




/* متن عمومی */

.quran-landing p {

    line-height:2;

}



/* لینک‌ها */

.quran-landing a {

    transition:.3s ease;

}





/* حذف حالت خشک کارت‌ها */

.feature-card,
.stat-item,
.surah-card {

    will-change:transform;

}





/* سایه طلایی هنگام Hover */

.feature-card:hover,
.stat-item:hover,
.surah-card:hover {

    box-shadow:

    0 25px 70px rgba(212,160,55,.15);

}




/* دکمه‌ها */

.btn-primary,
.btn-secondary {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}



/* حالت انتخاب متن */

::selection {

    background:#d4a037;

    color:#071521;

}





/* اسکرول نرم */

html {

    scroll-behavior:smooth;

}





/* Scrollbar */

::-webkit-scrollbar {

    width:10px;

}



::-webkit-scrollbar-track {

    background:#071521;

}



::-webkit-scrollbar-thumb {

    background:#d4a037;

    border-radius:20px;

}
/* =====================================
   QORAN HERO LIGHT EFFECTS
===================================== */


/* نور شناور در Hero */

.hero-section::before {

    animation:

    qoranGlow 8s ease-in-out infinite;

}



@keyframes qoranGlow {


    0% {

        transform:
        translateY(0)
        scale(1);

        opacity:.7;

    }



    50% {

        transform:
        translateY(-25px)
        scale(1.08);

        opacity:1;

    }



    100% {

        transform:
        translateY(0)
        scale(1);

        opacity:.7;

    }

}




/* حرکت آرام محتوا */


.hero-content {

    animation:

    heroEnter 1.2s ease forwards;

}



@keyframes heroEnter {


    from {

        opacity:0;

        transform:

        translateY(40px);

    }



    to {

        opacity:1;

        transform:

        translateY(0);

    }


}




/* درخشش لوگوی بسم الله */


.quran-logo {

    animation:

    logoPulse 5s infinite;

}



@keyframes logoPulse {


    0% {

        box-shadow:

        0 0 0 rgba(212,160,55,0);

    }


    50% {

        box-shadow:

        0 0 40px rgba(212,160,55,.35);

    }


    100% {

        box-shadow:

        0 0 0 rgba(212,160,55,0);

    }

}





/* حرکت نرم کارت‌ها هنگام Hover */


.feature-card:hover,
.stat-item:hover,
.surah-card:hover {

    transition:

    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}





/* کاهش حرکت برای کاربران حساس */

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


    *,
    *::before,
    *::after {

        animation:none !important;

        transition:none !important;

    }


}
/* =====================================
   QORAN PREMIUM HEADER
===================================== */


.quran-header {

    position:absolute;

    top:0;

    right:0;

    width:100%;

    z-index:100;

    padding:25px 0;

    background:

    linear-gradient(
        180deg,
        rgba(5,15,24,.75),
        transparent
    );

}



.header-container {

    max-width:1200px;

    margin:auto;

    padding:0 30px;


    display:flex;

    align-items:center;

    justify-content:space-between;

}





/* لوگو */

.quran-brand {

    display:flex;

    align-items:center;

    gap:15px;

}



.brand-icon {

    width:60px;

    height:60px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    rgba(255,255,255,.08);


    backdrop-filter:

    blur(15px);


    border:

    1px solid rgba(255,255,255,.15);


    color:#f5d58a;


    font-size:30px;


}





.brand-text h1 {

    color:#fff;

    font-size:22px;

    margin:0;

}



.brand-text span {

    color:

    rgba(255,255,255,.65);


    font-size:12px;

}





/* منوی اصلی */


.quran-menu {

    display:flex;

    align-items:center;

    gap:35px;

}



.quran-menu a {


    color:

    rgba(255,255,255,.85);


    text-decoration:none;


    font-size:15px;


    position:relative;


}



.quran-menu a::after {


    content:"";


    position:absolute;


    bottom:-10px;


    right:0;


    width:0;


    height:2px;


    background:#d4a037;


    transition:.3s;


}



.quran-menu a:hover::after,
.quran-menu .active::after {


    width:100%;


}




.quran-menu a:hover,
.quran-menu .active {


    color:#f5d58a;


}





/* دکمه ورود */


.login-btn {


    padding:11px 28px;


    border-radius:30px;


    background:

    linear-gradient(
        135deg,
        #d4a037,
        #a87518
    );


    color:#071521 !important;


    font-weight:bold;


    text-decoration:none;


    box-shadow:

    0 10px 30px rgba(212,160,55,.25);


}





/* دکمه حالت تاریک */

.theme-toggle {


    width:42px;

    height:42px;


    border-radius:50%;


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(255,255,255,.15);


    color:#f5d58a;


}





/* موبایل */

.mobile-menu-btn {

    display:none;

}




@media(max-width:900px){


    .quran-menu,
    .header-actions {


        display:none;

    }



    .mobile-menu-btn {


        display:block;


        background:

        rgba(255,255,255,.1);


        border:

        1px solid rgba(255,255,255,.2);


        color:#fff;


        width:45px;


        height:45px;


        border-radius:50%;


    }



}

/* =====================================
   QORAN PREMIUM SEARCH BOX
===================================== */


.quick-search {

    position:relative;

    margin-top:-90px;

    padding:0 20px;

    z-index:20;

}



.search-box {

    max-width:900px;

    margin:auto;


    padding:15px;


    background:

    rgba(255,255,255,.08);



    backdrop-filter:

    blur(20px);



    border:

    1px solid rgba(255,255,255,.18);



    border-radius:30px;



    box-shadow:


    0 30px 80px rgba(0,0,0,.35);



}





.search-box form {


    display:flex;

    align-items:center;

    gap:15px;


}





.search-box input {


    flex:1;


    height:65px;


    padding:0 30px;


    border:none;


    outline:none;



    background:

    rgba(255,255,255,.12);



    border-radius:22px;



    color:#fff;



    font-size:17px;



}



.search-box input::placeholder {


    color:

    rgba(255,255,255,.65);


}




.search-box input:focus {


    background:

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



    box-shadow:


    0 0 0 2px rgba(212,160,55,.35);


}





.search-box button {


    height:65px;


    padding:0 40px;



    border:none;


    border-radius:22px;



    background:


    linear-gradient(
        135deg,
        #e0b04b,
        #a87518
    );



    color:#071521;



    font-size:17px;



    font-weight:700;



    cursor:pointer;



    transition:.3s;



}





.search-box button:hover {


    transform:

    translateY(-3px);



    box-shadow:


    0 15px 35px rgba(212,160,55,.35);


}





/* آیکون داخل جستجو در صورت وجود */

.search-box i {


    color:#f5d58a;


}





@media(max-width:600px){


    .quick-search {

        margin-top:-50px;

    }



    .search-box form {

        flex-direction:column;

    }



    .search-box input,
    .search-box button {


        width:100%;


    }


}
/* =====================================
   QORAN FINAL POLISH
===================================== */


/* فاصله استاندارد بخش‌ها */

.section-title {

    max-width:700px;

    margin:0 auto;

    text-align:center;

}



.section-title h2 {

    margin-bottom:15px;

}



.section-title p {

    margin:0 auto;

}



/* فاصله بهتر بین بخش‌ها */

.features-section,
.stats-section,
.featured-section {

    position:relative;

}



/* =====================================
   ICON STYLE
===================================== */


.feature-card i,
.feature-card svg {

    color:#f5d58a;

    font-size:34px;

}



.feature-card .icon {

    transition:.4s ease;

}



.feature-card:hover .icon {

    transform:

    translateY(-8px)

    rotate(5deg);

}



/* =====================================
   GOLD DETAILS
===================================== */


.hero-content h1 {

    background:

    linear-gradient(
        135deg,
        #ffffff,
        #f5d58a
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* دکمه‌ها */

.btn-primary,
.login-btn {

    position:relative;

    overflow:hidden;

}



.btn-primary::before,
.login-btn::before {


    content:"";


    position:absolute;


    top:0;

    left:-100%;


    width:100%;

    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );


    transition:.6s;


}



.btn-primary:hover::before,
.login-btn:hover::before {

    left:100%;

}



/* =====================================
   MOBILE FINAL FIX
===================================== */


@media(max-width:768px){


    .hero-content {

        margin:0 auto;

        text-align:center;

        padding:20px;

    }



    .hero-content h1 {

        font-size:40px;

    }



    .hero-content p {

        font-size:17px;

    }



    .stats-section,
    .features-section,
    .featured-section {

        padding-top:70px;

        padding-bottom:70px;

    }



}

/* =====================================
   QORAN HERO PREMIUM DETAILS
===================================== */


/* لایه نقطه‌های ظریف روی Hero */

.hero-section {

    isolation:isolate;

}



.hero-section::after {

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(
        rgba(255,255,255,.12) 1px,
        transparent 1px
    );


    background-size:

    45px 45px;


    opacity:.08;


    pointer-events:none;

}





/* جدا کردن محتوا از لایه‌ها */

.hero-content {

    z-index:3;

}





/* نشان کوچک بالای عنوان */

.hero-content::before {

    content:"قرآن کریم";

    display:inline-block;


    padding:8px 22px;


    margin-bottom:25px;


    border-radius:30px;


    background:

    rgba(212,160,55,.12);



    border:

    1px solid rgba(212,160,55,.35);



    color:#f5d58a;


    font-size:14px;


    backdrop-filter:blur(10px);

}





/* تاکید روی دکمه اصلی */

.btn-primary {

    min-width:200px;

}





/* فضای تنفسی دکمه‌ها */

.hero-buttons {

    display:flex;

    gap:18px;

    align-items:center;

}





/* افکت آرام روی دکمه اصلی */

.btn-primary {

    animation:

    buttonGlow 4s infinite;

}



@keyframes buttonGlow {


    0% {

        box-shadow:

        0 0 0 rgba(212,160,55,0);

    }


    50% {

        box-shadow:

        0 0 35px rgba(212,160,55,.35);

    }


    100% {

        box-shadow:

        0 0 0 rgba(212,160,55,0);

    }

}





@media(max-width:600px){


    .hero-buttons {

        flex-direction:column;

    }


    .hero-content::before {

        margin-bottom:15px;

    }


}
/* =====================================
   QORAN SURAH LIST PAGE
===================================== */


.surah-page {

    min-height:100vh;

    background:

    linear-gradient(
        180deg,
        #071521,
        #0a1e2b
    );

    color:#fff;

    padding-bottom:80px;

}





/* Header Page */

.surah-header {

    padding:

    150px 20px 70px;

    text-align:center;

}



.surah-header h1 {

    font-size:48px;

    font-weight:900;


    background:

    linear-gradient(
        135deg,
        #fff,
        #f5d58a
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



.surah-header p {

    color:

    rgba(255,255,255,.7);

    font-size:18px;

}





/* Search */

.surah-search {

    max-width:700px;

    margin:

    0 auto 60px;

    padding:0 20px;

}



.surah-search input {

    width:100%;

    height:60px;


    border-radius:25px;


    border:

    1px solid rgba(255,255,255,.15);



    background:

    rgba(255,255,255,.08);



    backdrop-filter:

    blur(15px);



    color:#fff;


    padding:0 25px;


    font-size:17px;

}





/* Grid */


.surah-list {

    max-width:1200px;

    margin:auto;

    padding:0 25px;


    display:grid;

    grid-template-columns:

    repeat(4,1fr);


    gap:25px;

}





/* Card */


.surah-item {


    position:relative;


    padding:35px 20px;


    text-align:center;



    background:

    rgba(255,255,255,.06);



    backdrop-filter:

    blur(18px);



    border:

    1px solid rgba(255,255,255,.12);



    border-radius:28px;



    transition:.35s;


}





.surah-item:hover {


    transform:

    translateY(-10px);



    border-color:

    rgba(212,160,55,.5);


}





/* Number */


.surah-number {


    width:55px;

    height:55px;


    margin:0 auto 20px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;



    background:

    linear-gradient(
        135deg,
        #d4a037,
        #9b6815
    );


    color:#071521;


    font-weight:800;

}





.surah-item h3 {


    color:#fff;


    font-size:22px;


    margin-bottom:10px;

}





.surah-item span {


    color:

    rgba(255,255,255,.65);


    font-size:14px;

}





@media(max-width:992px){

    .surah-list {

        grid-template-columns:

        repeat(2,1fr);

    }

}



@media(max-width:600px){

    .surah-list {

        grid-template-columns:

        1fr;

    }


    .surah-header h1 {

        font-size:34px;

    }

}

/* =====================================
   QORAN HERO BACKGROUND FINAL
===================================== */

.hero-section {

    min-height:900px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;


    background-image:

    linear-gradient(
        90deg,
        #071521 5%,
        rgba(7,21,33,.75) 45%,
        rgba(7,21,33,.20) 100%
    ),
    url('/image/quran.jpg');


    background-repeat:no-repeat;


    background-size:

    150% auto;


    background-position:

    right center;

}


/* محو شدن پایین Hero */

.hero-section:after {

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    right:0;


    height:220px;


    background:

    linear-gradient(
        to bottom,
        transparent,
        #071521
    );


    z-index:2;

}

/* =====================================
   HERO CENTER FINAL
===================================== */

.hero-section {

    justify-content:center !important;

}


.hero-content {

    width:650px !important;

    margin:0 auto !important;

    text-align:center !important;

}


.hero-content h1,
.hero-content p {

    text-align:center !important;

    margin-left:auto !important;

    margin-right:auto !important;

}


.hero-buttons {

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

}
/* =====================================
   QORAN HERO CLEAN CENTER
===================================== */


.hero-section {

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

}


/* حذف حالت کارت یا شیشه‌ای */

.hero-content {

    position:relative !important;

    z-index:3 !important;


    width:650px !important;

    max-width:90% !important;


    margin:0 auto !important;


    padding:0 !important;


    background:transparent !important;


    border:none !important;


    border-radius:0 !important;


    box-shadow:none !important;


    backdrop-filter:none !important;


    -webkit-backdrop-filter:none !important;


    text-align:center !important;

}


/* بسم الله */

.quran-logo {

    display:block !important;

    width:100% !important;


    margin:0 auto 25px !important;


    text-align:center !important;


    background:transparent !important;

}



/* عنوان */

.hero-content h1 {

    width:100% !important;


    margin-left:auto !important;

    margin-right:auto !important;


    text-align:center !important;

}



/* توضیحات */

.hero-content p {

    width:100% !important;


    margin-left:auto !important;

    margin-right:auto !important;


    text-align:center !important;

}



/* دکمه‌ها */

.hero-buttons {

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    gap:20px;

}

/* =====================================
   HERO IMAGE BOTTOM FADE FIX
===================================== */


.hero-overlay {

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        to bottom,
        rgba(7,21,33,0) 60%,
        #071521 100%
    ) !important;


    z-index:2;

}


/* متن بالاتر از Overlay */

.hero-content {

    position:relative;

    z-index:3;

}


/* ==========================================
   SURAH PREMIUM CARD
========================================== */


.surah-box{

    position:relative;

    min-height:300px;

    padding:30px 25px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.03)
    );

    border:

    1px solid rgba(255,185,155,.18);

    border-radius:28px;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    transition:.35s ease;

}



.surah-box::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:

    radial-gradient(
        circle,
        rgba(255,185,155,.18),
        transparent 70%
    );

    top:-80px;

    right:-80px;

}



.surah-box:hover{

    transform:translateY(-10px);

    border-color:#ffb99b;

    box-shadow:

    0 20px 45px rgba(0,0,0,.35);

}



.surah-number{

    width:58px;

    height:58px;

    border-radius:18px;

    background:

    linear-gradient(
        135deg,
        #ffb99b,
        #ff793f
    );

    color:#071521;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:800;

}



.surah-badge{

    margin-top:15px;

    color:#ffb99b;

    font-size:28px;

    opacity:.9;

}



.surah-box h3{

    margin:15px 0 5px;

    color:#fff;

    font-size:24px;

}



.surah-en{

    color:rgba(255,255,255,.55);

    font-size:14px;

}



.surah-info{

    display:flex;

    gap:10px;

    margin:20px 0;

}



.surah-info span{

    padding:6px 15px;

    border-radius:20px;

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

    color:#ddd;

    font-size:13px;

}



.surah-box a{

    padding:9px 22px;

    border-radius:30px;

    background:#ff793f;

    color:white;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}



.surah-box a:hover{

    background:#ffb99b;

    color:#071521;

}
/* SURAH GRID FINAL */

.surah-grid-test {

    display:grid !important;

    grid-template-columns:repeat(4,1fr) !important;

    gap:30px !important;

    width:92%;

    max-width:1400px;

    margin:60px auto 0;

}


.surah-box h3{

    color:#ffb99b;

    font-size:24px;

    margin:20px 0 8px;

}

/*=========================================
   SURAH READING PAGE
=========================================*/


.surah-page{

    min-height:100vh;

    padding:60px 0 100px;

    color:#fff;

}


/* Header */

.surah-header{

    text-align:center;

    max-width:900px;

    width:92%;

    margin:0 auto;

}


.surah-header h1{

    color:#fff;

    font-size:36px;

    margin-bottom:20px;

    font-weight:700;

}


.surah-meta{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    color:#d8d8d8;

    font-size:18px;

}



/* Bismillah */

.surah-bismillah{

    text-align:center;

    font-size:48px;

    color:#f3cf55;

    margin:35px auto 45px;

    font-family:'Amiri',serif;

    text-shadow:
    0 0 10px rgba(243,207,85,.35);

}



/* Ayat wrapper */

.ayah-list{

    width:92%;

    max-width:1000px;

    margin:40px auto;

    padding:40px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.12);

    border-radius:30px;

    backdrop-filter:blur(15px);

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

}



/* Each Ayah */

.ayah{

    padding:35px 40px;

    margin-bottom:25px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.12);

    border-radius:24px;

    backdrop-filter:blur(12px);

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

    transition:.3s ease;

}


/* Arabic text */

.ayah-arabic{

    direction:rtl;

    text-align:right;

    color:#ffffff;

    font-family:'Amiri',serif;

    font-size:38px;

    line-height:2.5;

}


.ayah-number{

    display:inline-block;

    color:#ffffff;

    font-size:26px;

    font-weight:bold;

    margin-left:15px;

    direction:ltr;

}


.ayah-text{

    display:inline;

}



/* Verse number */

.ayah-number{

    color:#ffffff;

    font-family:'Amiri',serif;

    font-size:26px;

    font-weight:bold;

    margin-right:12px;

    display:inline-block;

    direction:ltr;

    unicode-bidi:isolate;

    transition:.3s ease;

}
/* Persian translation */

.ayah-persian{

    margin-top:25px;

    direction:rtl;

    text-align:center;

    color:rgba(255,255,255,.78);

    font-size:20px;

    line-height:2.4;

    font-family:'IRANSansWeb', Tahoma, sans-serif;

    font-weight:400;

}



/* Hover subtle */

.ayah-number{

    color:#ffffff;

    font-size:26px;

    font-weight:700;

    margin-right:12px;

    display:inline-block;

    direction:rtl;

    unicode-bidi:isolate;

    transition:.3s ease;

}


.ayah:hover .ayah-number{

    color:#f3cf55;

    text-shadow:
        0 0 8px rgba(243,207,85,.8),
        0 0 18px rgba(243,207,85,.5);

}



/* Responsive */

@media(max-width:768px){


    .surah-page{

        padding-top:40px;

    }


    .surah-header h1{

        font-size:28px;

    }


    .surah-bismillah{

        font-size:38px;

        margin:35px 0;

    }


    .ayah{

        padding:30px 0;

    }


    .ayah-arabic{

        font-size:28px;

        line-height:2.3;

    }


    .ayah-number{

        font-size:20px;

    }


    .ayah-persian{

        font-size:17px;

        padding-right:0;

    }


}


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


.back-surah{

    display:inline-block;

    margin-bottom:25px;

    color:#d8d8d8;

    text-decoration:none;

    font-size:16px;

    transition:.3s ease;

}


.back-surah:hover{

    color:#f3cf55;

}


.surah-header h1{

    color:#ffffff;

    font-size:38px;

    margin-bottom:15px;

}


.surah-meta{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    color:#d8d8d8;

    font-size:18px;

}

/* =========================
   AYAH ACTIONS
========================= */


.ayah-actions{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.12);

    opacity:0;

    transition:.3s ease;

}


.ayah:hover .ayah-actions{

    opacity:1;

}


.ayah-actions button{

    width:52px;

    height:52px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.25);

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

    backdrop-filter:blur(8px);

    color:#ffffff;

    font-size:22px;

    cursor:pointer;

    transition:.3s ease;

}


.ayah-actions button:hover{

    background:#f3cf55;

    color:#101b3d;

    box-shadow:
    0 0 12px rgba(243,207,85,.7);

    transform:translateY(-3px);

}

/* =========================
   AYAH PLAYING STATE
========================= */

.play-ayah.playing{

    background:#f3cf55 !important;

    color:#101b3d !important;

    box-shadow:
    0 0 15px rgba(243,207,85,.8),
    0 0 30px rgba(243,207,85,.35);

    transform:translateY(-3px);

}


/* =========================
   AYAH TRANSLATION
========================= */


.ayah-persian{

    margin-top:25px;

    padding-top:0;

    direction:rtl;

    text-align:right;

    color:rgba(255,255,255,.75);

    font-size:20px;

    line-height:2.3;

}


.translation-label{

    display:block;

    color:#f3cf55;

    font-size:15px;

    margin-bottom:10px;

    text-align:center;

}


.ayah-persian p{

    margin:0;

    color:rgba(255,255,255,.75);

    font-size:20px;

    line-height:2.3;

    font-family:'IRANSansWeb',sans-serif;

}


/* =========================
   CENTER AYAH CONTENT
========================= */

.ayah-arabic,
.ayah-persian{

    text-align:center !important;

}


.ayah-text{

    display:inline;

}


.ayah-number{

    display:inline-flex;

}

/* =========================
   FONT BUTTONS IN AYAH ACTIONS
========================= */


.ayah-actions button{

    width:48px;

    height:48px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.25);

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

    color:#fff;

    font-size:17px;

    cursor:pointer;

    transition:.3s ease;

}


.ayah-actions button:hover{

    background:#f3cf55;

    color:#101b3d;

    box-shadow:
    0 0 15px rgba(243,207,85,.7);

}


.bookmark-ayah{

    color:#fff;

}


.bookmark-ayah:hover{

    background:#f3cf55 !important;

    color:#101b3d !important;

}

/* LAST READ AYAH */


.last-read{

    border:1px solid rgba(243,207,85,.8) !important;

    box-shadow:

    0 0 25px rgba(243,207,85,.35);

    transition:.5s ease;

}

/* LAST READ SURAH */

.last-read-surah h1{

    font-weight:900;

    color:#f3cf55;

    text-shadow:
    0 0 15px rgba(243,207,85,.45);

}


.last-read-surah .surah-meta{

    color:#fff;

    font-weight:bold;

}

/*====================== آخرین سوره مطالعه شده ====================*/

.surah-box.last-read-surah-box{

    border:1px solid rgba(243,207,85,.8);

    box-shadow:

    0 0 25px rgba(243,207,85,.35);

    transform:translateY(-5px);

}


.surah-box.last-read-surah-box h3{

    color:#f3cf55;

    font-weight:900;

}

#reading-info{

    display:block;

    margin-top:8px;

    color:#f3cf55;

    font-size:13px;

    font-weight:bold;

    text-align:center;

}