/*==========================================================
KHANETV BLOG TEMPLATE
PART 1
==========================================================*/

:root{

--primary:#ff7a00;
--primary-dark:#d96500;

--bg:#ffffff;
--bg2:#f7f7f7;

--text:#222;
--text2:#555;

--border:#e6e6e6;

--radius:14px;

--shadow:
0 8px 30px rgba(0,0,0,.08);

--transition:.25s;

--container:1280px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Vazirmatn,sans-serif;

background:var(--bg);

color:var(--text);

line-height:2;

font-size:16px;

}

img{

display:block;

max-width:100%;

height:auto;

border-radius:12px;

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

ul{

list-style:none;

}

.container{

width:95%;

max-width:var(--container);

margin:auto;

}

/*=========================
Typography
=========================*/

h1{

font-size:42px;

line-height:1.5;

font-weight:800;

margin-bottom:20px;

}

h2{

font-size:32px;

margin:60px 0 25px;

font-weight:800;

position:relative;

padding-right:18px;

}

h2::before{

content:"";

position:absolute;

right:0;

top:10px;

width:6px;

height:36px;

background:var(--primary);

border-radius:20px;

}

h3{

font-size:24px;

margin-bottom:20px;

}

p{

margin-bottom:20px;

color:var(--text2);

}

strong{

color:#000;

}

.lead{

font-size:20px;

line-height:2.2;

}

/*=========================
Buttons
=========================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 34px;

border-radius:50px;

font-weight:700;

transition:.3s;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}

.btn-outline{

border:2px solid var(--primary);

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/*=========================
Cards
=========================*/

.card{

background:#fff;

border:1px solid var(--border);

border-radius:var(--radius);

padding:30px;

box-shadow:var(--shadow);

margin-bottom:30px;

}

/*=========================
Article
=========================*/

.article{

padding:70px 0;

}

.article section{

margin-bottom:80px;

}

.article figure{

margin:35px 0;

}

.article figcaption{

margin-top:12px;

font-size:14px;

color:#888;

text-align:center;

}

.article p{

text-align:justify;

}

.article ul{

padding-right:20px;

list-style:disc;

}

.article li{

margin-bottom:10px;

}

/*=========================
Links
=========================*/

.article a{

color:var(--primary);

font-weight:700;

}

.article a:hover{

text-decoration:underline;

}

/*=========================
Selection
=========================*/

::selection{

background:var(--primary);

color:#fff;

}

/*=========================
Scrollbar
=========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#efefef;

}

/*==========================================================
PART 3
ARTICLE CONTENT
==========================================================*/


/***************************
Sections
****************************/

.article section{

margin-bottom:80px;

scroll-margin-top:100px;

}

.article h2{

margin-bottom:25px;

}

.article h3{

margin-top:40px;

margin-bottom:15px;

font-size:24px;

}

.article p{

margin-bottom:22px;

text-align:justify;

line-height:2.2;

font-size:17px;

color:#777;
}

.article img{

width:100%;

border-radius:16px;

box-shadow:var(--shadow);

margin:30px 0;

}

.article figcaption{

text-align:center;

font-size:14px;

color:#777;

margin-top:12px;

}


/***************************
Answer Box
****************************/

.answer-box{

background:#fff8f0;

border-right:5px solid var(--primary);

padding:25px;

margin:25px 0 35px;

border-radius:14px;

box-shadow:var(--shadow);

}

.answer-box p{

margin:0;

font-size:18px;

font-weight:600;

color:#666;

}


/***************************
Tip Box
****************************/

.tip-box{

background:#f8fff8;

border-right:5px solid:#22a447;

padding:25px;

border-radius:14px;

margin:35px 0;

box-shadow:var(--shadow);

}

.tip-box strong{

display:block;

margin-bottom:12px;

font-size:18px;

color:#22a447;

}


/***************************
Warning Box
****************************/

.warning-box{

background:#fff5f5;

border-right:5px solid:#d93025;

padding:25px;

border-radius:14px;

margin:35px 0;

box-shadow:var(--shadow);

}

.warning-box strong{

display:block;

margin-bottom:12px;

color:#d93025;

font-size:18px;

}


/***************************
Quote
****************************/

blockquote{

margin:35px 0;

padding:30px;

background:#fafafa;

border-right:6px solid var(--primary);

font-size:20px;

font-style:italic;

border-radius:14px;

}


/***************************
Tables
****************************/

.modern-table{

width:100%;

border-collapse:collapse;

margin:35px 0;

overflow:hidden;

border-radius:14px;

box-shadow:var(--shadow);

}

.modern-table thead{

background:var(--primary);

color:#fff;

}

.modern-table th{

padding:18px;

text-align:center;

font-size:17px;

}

.modern-table td{

padding:18px;

border-bottom:1px solid var(--border);

text-align:center;

}

.modern-table tbody tr:nth-child(even){

background:#fafafa;

}

.modern-table tbody tr:hover{

background:#fff4ea;

}


/***************************
Lists
****************************/

.check-list{

list-style:none;

margin:25px 0;

padding:0;

}

.check-list li{

padding:14px 20px;

margin-bottom:12px;

background:#fff;

border:1px solid var(--border);

border-radius:12px;

box-shadow:var(--shadow);

position:relative;

padding-right:55px;

}

.check-list li::before{

content:"✓";

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

width:24px;

height:24px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

}


/***************************
Code
****************************/

pre{

background:#202124;

color:#fff;

padding:25px;

border-radius:14px;

overflow:auto;

margin:30px 0;

}

code{

font-family:Consolas,monospace;

}


/***************************
CTA
****************************/

.article-cta{

margin:70px 0;

padding:35px;

background:linear-gradient(135deg,#ff7a00,#ff9d3b);

color:#fff;

border-radius:18px;

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}

.article-cta h3{

margin:0 0 10px;

color:#fff;

}

.article-cta p{

margin:0;

color:#fff;

opacity:.95;

}

.article-cta a{

background:#fff;

color:#ff7a00;

padding:15px 30px;

border-radius:50px;

font-weight:700;

transition:.3s;

}

.article-cta a:hover{

transform:translateY(-3px);

}


/***************************
Responsive
****************************/

@media(max-width:768px){

.article-cta{

flex-direction:column;

text-align:center;

}

.modern-table{

font-size:14px;

display:block;

overflow-x:auto;

white-space:nowrap;

}

.answer-box p{

font-size:16px;

}

}


.top-btn{

position:fixed;

right:10px;

bottom:10px;

width:48px;

height:48px;

border:none;

border-radius:50%;

background:rgb(0,0,0,0.3);

color:#fff;

font-size:24px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

box-shadow:var(--shadow);

z-index:9999;

}

.top-btn.show{

opacity:1;

visibility:visible;

}

.top-btn:hover{

transform:translateY(-4px);

}

/*==================================
CONTACT
==================================*/

.contact-box{

margin:80px 0;

padding:50px;

background:linear-gradient(135deg,#ff7a00,#ff9c37);

color:#fff;

border-radius:20px;

text-align:center;

}

.contact-box h2{

color:#fff;

margin-top:0;

}

.contact-box h2::before{

display:none;

}

.contact-box p{

color:#fff;

max-width:700px;

margin:20px auto;

}

.contact-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

}

/*==================================
EXPERT
==================================*/

.expert-box{

margin:40px 0;

padding:30px;

background:#fffdf6;

border-right:6px solid var(--primary);

border-radius:14px;

box-shadow:var(--shadow);

}

.expert-title{

font-size:20px;

font-weight:700;

margin-bottom:15px;

color:var(--primary);

}

/*==================================
PROS CONS
==================================*/

.pros-cons{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin:50px 0;

}

.pros,
.cons{

padding:25px;

border-radius:16px;

background:#fff;

box-shadow:var(--shadow);

}

.pros{

border-top:5px solid #25b34b;

}

.cons{

border-top:5px solid #d93025;

}

.pros li,
.cons li{

margin-bottom:12px;

}

/*==================================
STEPS
==================================*/

.steps{

margin:50px 0;

}

.step{

display:flex;

gap:20px;

align-items:flex-start;

margin-bottom:25px;

}

.number{

width:42px;

height:42px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

flex-shrink:0;

}

.text{

flex:1;

padding-top:8px;

}

/*==================================
VIDEO
==================================*/

.youtube{

position:relative;

padding-bottom:56.25%;

height:0;

margin:40px 0;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

}

.youtube iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:none;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.pros-cons{

grid-template-columns:1fr;

}

.contact-box{

padding:30px;

}



/*==========================================
Internal Links
==========================================*/

.internal-links{

margin:90px 0;

}

.internal-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:25px;

margin-top:35px;

}

.internal-card{

display:block;

background:#fff;

border-radius:18px;

overflow:hidden;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:.3s;

}

.internal-card:hover{

transform:translateY(-6px);

}

.internal-card img{

width:100%;

height:190px;

object-fit:cover;

}

.internal-content{

padding:22px;

}

.internal-content h3{

margin-bottom:12px;

font-size:22px;

}

.internal-content p{

font-size:15px;

margin:0;

color:#666;

}
}



/*==================================================
Breadcrumb
==================================================*/

.breadcrumb{

padding:18px 0;

border-bottom:1px solid var(--border);

font-size:14px;

}

.breadcrumb ol{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:10px;

list-style:none;

margin:0;

padding:0;

}

.breadcrumb li{

display:flex;

align-items:center;

}

.breadcrumb li:not(:last-child)::after{

content:"/";

margin-right:10px;

color:#bbb;

}

/* لینک‌ها */
.breadcrumb a {
    color: #f97316; /* نارنجی مدرن */
    text-decoration: none;
    transition: 0.2s;
    font-weight: 500;
}

.breadcrumb a:hover{

color:var(--primary);

}

.breadcrumb span{

font-weight:700;

color:#999;

}

.hero-image {
    margin-top: 32px;
}

.hero-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}


/* ==========================================================
   FAQ
========================================================== */

.faq-section{
    padding:90px 0;
}

.faq-list{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:42px;
}

.faq-item{

    background:#161b22;

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

    border-radius:16px;

    overflow:hidden;

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

.faq-item:hover{

    border-color:rgba(255,138,0,.45);

    transform:translateY(-2px);

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

}

.faq-item.active{

    border-color:#ff8a00;

    box-shadow:0 14px 36px rgba(255,138,0,.12);

}

/* ---------------------- */

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:24px 28px;

    border:none;

    background:transparent;

    color:#fff;

    cursor:pointer;

    font:inherit;

    font-size:19px;

    font-weight:700;

    text-align:right;

    transition:color .25s ease;

}

.faq-question:hover{

    color:#ff8a00;

}

.faq-question span:first-child{

    flex:1;

    line-height:1.8;

}

/* ---------------------- */
/* Plus Icon */
/* ---------------------- */

.faq-icon{

    position:relative;

    width:16px;

    height:16px;

    flex-shrink:0;

    transition:transform .25s ease;

}

.faq-icon::before,
.faq-icon::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

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

    background:#9aa4b2;

    border-radius:2px;

    transition:.25s ease;

}

.faq-icon::before{

    width:16px;

    height:2px;

}

.faq-icon::after{

    width:2px;

    height:16px;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

}

.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after{

    background:#ff8a00;

}

/* ---------------------- */

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-answer p{

    margin:0;

    padding:0 28px 26px;

    color:#c9d1d9;

    font-size:16px;

    line-height:2.1;

}

/* ---------------------- */

@media (max-width:768px){

    .faq-section{

        padding:70px 0;

    }

    .faq-question{

        padding:18px 20px;

        font-size:17px;

    }

    .faq-answer p{

        padding:0 20px 20px;

        font-size:15px;

        line-height:2;

    }

}