/* =====================================================
   KHANE TV - PREMIUM BLOG STYLE 2026
   File: blog-style.css
===================================================== */

:root{

--bg:#0b0d12;
--bg-secondary:#11151d;
--card:#161b24;
--card-hover:#1c2430;

--orange:#ff7a18;
--orange-light:#ff9b42;
--orange-dark:#d85f00;

--text:#ffffff;
--text-soft:#b7c0ce;
--border:rgba(255,255,255,.08);

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

--glass:
rgba(255,255,255,.04);

--radius:18px;

--container:1350px;

--transition:.35s ease;

}

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

*{
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;

overflow-x:hidden;

}

img{
max-width:100%;
display:block;
}

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

ul{
list-style:none;
}

.container{

width:100%;
max-width:var(--container);

margin:auto;

padding-inline:24px;

}

/* =====================================================
SCROLLBAR
===================================================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#111;
}

::-webkit-scrollbar-thumb{

background:var(--orange);

border-radius:20px;

}

/* =====================================================
PROGRESS BAR
===================================================== */

.scroll-progress{

position:fixed;
top:0;
right:0;

width:0;
height:4px;

background:linear-gradient(
90deg,
var(--orange),
var(--orange-light)
);

z-index:99999;

}

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

.site-header{

position:sticky;
top:0;

z-index:999;

backdrop-filter:blur(16px);

background:rgba(10,12,18,.82);

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

}

.header-wrapper{

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

height:78px;

}

.logo{

font-size:1.5rem;
font-weight:800;

color:var(--orange);

}

.main-nav ul{

display:flex;
align-items:center;
gap:28px;

}

.main-nav a{

color:var(--text-soft);

transition:var(--transition);

position:relative;

}

.main-nav a:hover{

color:var(--orange);

}

.main-nav a::after{

content:'';

position:absolute;

bottom:-8px;
right:0;

width:0;
height:2px;

background:var(--orange);

transition:.3s;

}

.main-nav a:hover::after{
width:100%;
}

.mobile-menu-btn{

display:none;

background:none;
border:none;

cursor:pointer;

}

.mobile-menu-btn span{

display:block;

width:26px;
height:2px;

margin:6px 0;

background:white;

}

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

.hero-section{

position:relative;

padding:

120px
0
100px;

overflow:hidden;

}

.hero-bg{

position:absolute;
inset:0;

background:

radial-gradient(
circle at top right,
rgba(255,122,24,.18),
transparent 40%
),

radial-gradient(
circle at bottom left,
rgba(255,122,24,.12),
transparent 40%
);

pointer-events:none;

}

.hero-content{

position:relative;

text-align:center;

max-width:950px;

margin:auto;

}

.hero-badge{

display:inline-flex;

padding:
10px
18px;

border-radius:100px;

background:rgba(255,122,24,.15);

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

color:var(--orange);

font-size:.9rem;

margin-bottom:22px;

}

.hero-content h1{

font-size:clamp(
2rem,
5vw,
4.3rem
);

line-height:1.3;

margin-bottom:25px;

font-weight:800;

}

.hero-content p{

font-size:1.1rem;

color:var(--text-soft);

max-width:850px;

margin:auto;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:15px;

margin-top:35px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

padding:
15px
28px;

border-radius:14px;

font-weight:700;

transition:.35s;

}

.btn-primary{

background:var(--orange);
color:white;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:
0 12px 30px
rgba(255,122,24,.35);

}

.btn-secondary{

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

background:var(--glass);

}

.btn-secondary:hover{

border-color:var(--orange);

}

.hero-stats{

display:grid;

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

gap:20px;

margin-top:60px;

}

.stat-item{

background:var(--glass);

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

padding:25px;

border-radius:18px;

}

.stat-item strong{

display:block;

font-size:2rem;

color:var(--orange);

}

/* =====================================================
BREADCRUMB
===================================================== */

.breadcrumb-section{

padding:20px 0;

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

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

}

.breadcrumb{

display:flex;
gap:10px;
flex-wrap:wrap;

color:var(--text-soft);

font-size:.95rem;

}

.breadcrumb a:hover{
color:var(--orange);
}

/* =====================================================
LAYOUT
===================================================== */

.article-layout{

padding:70px 0;

}

.content-grid{

display:grid;

grid-template-columns:

320px
1fr;

gap:40px;

}

/* =====================================================
SIDEBAR
===================================================== */

.sidebar{

position:sticky;
top:100px;

height:max-content;

}

.toc-box,
.sticky-cta{

background:var(--card);

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

border-radius:20px;

padding:25px;

box-shadow:var(--shadow);

}

.sticky-cta{
margin-top:20px;
}

.toc-box h3,
.sticky-cta h4{

margin-bottom:18px;

}

.toc-box ul{

display:flex;
flex-direction:column;
gap:10px;

}

.toc-box a{

color:var(--text-soft);

transition:.3s;

}

.toc-box a:hover{

color:var(--orange);

padding-right:6px;

}

.btn-sidebar{

display:block;

margin-top:15px;

background:var(--orange);

padding:12px;

text-align:center;

border-radius:12px;

font-weight:700;

}

/* =====================================================
ARTICLE
===================================================== */

.article-content{

display:flex;
flex-direction:column;
gap:28px;

}

.article-content section{

background:var(--card);

padding:35px;

border-radius:20px;

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

box-shadow:var(--shadow);

}

.article-content h2{

font-size:2rem;

margin-bottom:20px;

position:relative;

padding-right:18px;

}

.article-content h2::before{

content:'';

position:absolute;

right:0;
top:12px;

width:6px;
height:30px;

border-radius:50px;

background:var(--orange);

}

.article-content h3{

margin-bottom:15px;

color:var(--orange);

}

.article-content p{

color:var(--text-soft);

}

.article-content li{

margin-right:18px;

}

/* =====================================================
TABLE
===================================================== */

.table-wrapper{

overflow:auto;

}

table{

width:100%;
border-collapse:collapse;

}

th{

background:var(--orange);

color:white;

padding:15px;

}

td{

padding:14px;

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

}

/* =====================================================
CARDS
===================================================== */

.info-cards,
.problem-grid{

display:grid;

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

gap:18px;

}

.info-card,
.problem-card{

background:var(--bg-secondary);

padding:25px;

border-radius:18px;

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

transition:.3s;

}

.info-card:hover,
.problem-card:hover{

transform:translateY(-4px);

border-color:var(--orange);

}

.path-box{

background:#0f131b;

border-right:4px solid var(--orange);

padding:18px;

border-radius:12px;

margin:15px 0;

overflow:auto;

}

.warning-box,
.notice-box{

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

border:
1px solid rgba(255,122,24,.18);

padding:25px;

border-radius:16px;

}

/* =====================================================
CTA SECTION
===================================================== */

.repair-cta{

background:

linear-gradient(
135deg,
#1f1305,
#2b1708
)!important;

text-align:center;

}

.cta-button{

display:inline-block;

margin-top:25px;

padding:
16px
34px;

background:var(--orange);

border-radius:15px;

font-weight:700;

}

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

.faq-container{

display:flex;
flex-direction:column;
gap:15px;

}

.faq-item{

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

border-radius:15px;

overflow:hidden;

}

.faq-question{

width:100%;

padding:22px;

background:var(--bg-secondary);

color:white;

border:none;

cursor:pointer;

font-family:inherit;

font-size:1rem;

text-align:right;

}

.faq-answer{

display:none;

padding:20px;

background:var(--card);

}

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

.site-footer{

margin-top:100px;

background:#090b10;

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

}

.footer-content{

display:grid;

grid-template-columns:
2fr 1fr;

gap:40px;

padding:60px 0;

}

.footer-content p,
.footer-content li{

color:var(--text-soft);

}

.footer-content ul{

display:flex;
flex-direction:column;
gap:10px;

}

.copyright{

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

padding:20px;

text-align:center;

color:var(--text-soft);

}

/* =====================================================
FLOATING CTA
===================================================== */

.floating-cta{

position:fixed;

left:25px;
bottom:25px;

z-index:1000;

}

.floating-cta a{

display:flex;

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

height:60px;

padding-inline:28px;

border-radius:100px;

background:var(--orange);

font-weight:700;

box-shadow:
0 15px 40px
rgba(255,122,24,.35);

animation:pulse 2.5s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}

/* =====================================================
ANIMATIONS
===================================================== */

.reveal{

opacity:0;
transform:translateY(40px);

transition:.8s;

}

.reveal.active{

opacity:1;
transform:none;

}

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

@media(max-width:1100px){

.content-grid{

grid-template-columns:1fr;

}

.sidebar{

position:relative;
top:auto;

}

}

@media(max-width:768px){

.main-nav{

display:none;

}

.mobile-menu-btn{

display:block;

}

.hero-stats{

grid-template-columns:1fr;

}

.article-content section{

padding:25px;

}

.footer-content{

grid-template-columns:1fr;

}

.hero-section{

padding-top:90px;

}

}

@media(max-width:480px){

.container{

padding-inline:18px;

}

.hero-content h1{

font-size:2rem;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.floating-cta{

left:15px;
right:15px;

}

.floating-cta a{

width:100%;

}

}

.main-nav.mobile-open{
display:block;
position:absolute;
top:78px;
right:0;
left:0;
background:#11151d;
padding:20px;
border-top:1px solid rgba(255,255,255,.08);
}

.main-nav.mobile-open ul{
flex-direction:column;
align-items:flex-start;
}

.toc-box a.active{
color:#ff7a18;
font-weight:700;
}

.back-to-top{
position:fixed;
right:25px;
bottom:100px;
width:50px;
height:50px;
border:none;
border-radius:50%;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:.3s;
background:#ff7a18;
color:#fff;
z-index:999;
}

.back-to-top.show{
opacity:1;
visibility:visible;
}

.site-header.scrolled{
box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.reading-time{
display:inline-flex;
padding:8px 14px;
background:rgba(255,122,24,.15);
border:1px solid rgba(255,122,24,.25);
border-radius:30px;
margin-bottom:20px;
font-size:.9rem;
color:#ff9b42;
}