/* ==========================================
ROOT VARIABLES
========================================== */

:root{

--bg:#070b16;

--card:#101827;
--card-light:#18233d;

--accent:#eb6835;
--accent2:#7c5cff;

--text:#ffffff;
--muted:#9ca3af;

--border:
rgba(255,255,255,.08);

--sidebar-width:260px;

--radius:30px;

}

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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'DM Sans',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

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

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

::-webkit-scrollbar-thumb{

background:var(--accent2);

border-radius:999px;

}

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

.sidebar{

position:fixed;

left:0;
top:0;

width:260px;
height:100vh;

background:
linear-gradient(
180deg,
#111827,
#0d1322
);

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

padding:24px;

z-index:1000;

display:flex;
flex-direction:column;
justify-content:space-between;

}

.sidebar-brand{

display:flex;
align-items:center;

gap:12px;

}

.brand-icon{

width:50px;
height:50px;

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

border-radius:18px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

font-size:1.2rem;

}

.brand-text{

font-size:1.8rem;

font-weight:800;

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

}

.sidebar-nav ul{

list-style:none;

margin-top:40px;

}

.sidebar-nav li{

margin-bottom:8px;

}

.sidebar-nav a{

display:flex;

align-items:center;

gap:14px;

padding:14px 16px;

border-radius:16px;

color:#aeb6c7;

text-decoration:none;

transition:.3s ease;

}

.sidebar-nav a:hover{

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

color:white;

}

.sidebar-nav .active a{

background:
rgba(124,92,255,.15);

color:white;

}

.sidebar-footer{

display:flex;

gap:10px;

}

.sidebar-footer a{

width:42px;
height:42px;

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

border-radius:14px;

background:#162033;

color:white;

text-decoration:none;

}

/* ==========================================
NAVBAR
========================================== */

.navbar{

position:fixed;

top:0;
left:260px;
right:0;

height:80px;

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

padding:0 30px;

background:
rgba(7,11,22,.9);

backdrop-filter:blur(18px);

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

z-index:999;

}

.nav-left{

display:flex;
align-items:center;

gap:18px;

}

.menu-btn{

width:48px;
height:48px;

border:none;

border-radius:14px;

background:#162033;

color:white;

cursor:pointer;

}

.search-bar{

width:420px;

display:flex;
align-items:center;

gap:12px;

padding:14px 18px;

border-radius:999px;

background:#111827;

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

}

.search-bar input{

width:100%;

background:none;

border:none;

outline:none;

color:white;

}

.nav-right{

display:flex;

gap:12px;

}

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

.primary-btn{

padding:14px 24px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

font-weight:700;

cursor:pointer;

text-decoration:none;

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

}

.secondary-btn,
.outline-btn{

padding:14px 24px;

border-radius:16px;

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

background:none;

color:white;

cursor:pointer;

text-decoration:none;

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

}

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

.blog-page{

margin-left:260px;

padding-top:110px;

}

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

.blog-hero{

max-width:1400px;

margin:auto;

padding:60px 40px;

text-align:center;

}

.hero-badge{

display:inline-block;

padding:12px 22px;

border-radius:999px;

background:
rgba(124,92,255,.15);

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

color:#d5ccff;

font-weight:700;

margin-bottom:25px;

}

.blog-hero h1{

font-size:
clamp(
3rem,
8vw,
6rem
);

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

line-height:1.05;

margin-bottom:20px;

}

.blog-hero h1 span{

background:
linear-gradient(
90deg,
var(--accent),
var(--accent2)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.blog-hero p{

max-width:850px;

margin:auto;

font-size:1.1rem;

line-height:1.9;

color:var(--muted);

}

.hero-buttons{

display:flex;

justify-content:center;

gap:14px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-stats{

display:grid;

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

gap:24px;

margin-top:60px;

}

.hero-stats div{

padding:30px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

border-radius:24px;

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

}

.hero-stats h3{

font-size:2.5rem;

margin-bottom:8px;

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

}

.hero-stats span{

color:var(--muted);

}
/* ==========================================
SECTION HEADERS
========================================== */
.section-header { margin-bottom: 40px; }
.section-header span { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
.section-header h2 { font-size: 2.5rem; font-family: 'Syne', sans-serif; margin-top: 10px; }

/* ==========================================
FEATURED SECTION
========================================== */
.featured-section { max-width: 1400px; margin: auto; padding: 60px 40px; }
.featured-article { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; align-items: center; }
.featured-image { height: 100%; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }
.featured-content { padding: 40px; }
.article-category { display: inline-block; padding: 8px 16px; background: rgba(124,92,255,.15); color: #d5ccff; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 20px; border: 1px solid rgba(124,92,255,.25); }
.featured-content h2 { font-size: 2.2rem; font-family: 'Syne', sans-serif; margin-bottom: 20px; line-height: 1.2; }
.featured-content p { color: var(--muted); line-height: 1.8; font-size: 1.1rem; margin-bottom: 30px; }
.featured-meta { display: flex; justify-content: space-between; align-items: center; }
.author { display: flex; align-items: center; gap: 15px; }
.avatar { width: 45px; height: 45px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.author h4 { font-size: 16px; margin-bottom: 4px; }
.author span { color: var(--muted); font-size: 14px; }
.read-btn { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 600; transition: .3s; }
.read-btn:hover { color: var(--accent); }

/* ==========================================
CATEGORIES
========================================== */
.categories { max-width: 1400px; margin: auto; padding: 60px 40px; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.category-card { background: var(--card); border: 1px solid var(--border); padding: 30px; border-radius: 24px; text-align: center; transition: .3s; cursor: pointer; }
.category-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.2); background: var(--card-light); }
.category-card i { font-size: 2.5rem; color: var(--accent2); margin-bottom: 20px; }
.category-card h3 { font-size: 1.5rem; font-family: 'Syne', sans-serif; margin-bottom: 10px; }
.category-card p { color: var(--muted); }

/* ==========================================
BLOG POSTS
========================================== */
.blog-posts { max-width: 1400px; margin: auto; padding: 60px 40px; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.blog-card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; transition: .3s; }
.blog-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.2); }
.blog-card-image { position: relative; height: 220px; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-tag { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,.6); backdrop-filter: blur(10px); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.blog-card-content { padding: 25px; }
.blog-meta { display: flex; gap: 20px; color: var(--muted); font-size: 14px; margin-bottom: 15px; }
.blog-meta i { margin-right: 6px; }
.blog-card-content h3 { font-size: 1.4rem; font-family: 'Syne', sans-serif; margin-bottom: 15px; line-height: 1.4; }
.blog-card-content p { color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.read-link { color: var(--accent2); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: .3s; }
.read-link:hover { color: var(--accent); }
/* ==========================================
TRENDING SECTION
========================================== */

.trending-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.trending-grid{

display:grid;

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

gap:24px;

}

.trending-card{

padding:35px;

border-radius:30px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

position:relative;

overflow:hidden;

transition:.35s ease;

}

.trending-card:hover{

transform:
translateY(-10px);

}

.trending-card::before{

content:"";

position:absolute;

width:220px;
height:220px;

border-radius:50%;

top:-100px;
right:-100px;

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

}

.trending-card h3{

font-size:1.8rem;

margin-bottom:14px;

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

position:relative;

z-index:2;

}

.trending-card p{

color:var(--muted);

line-height:1.8;

position:relative;

z-index:2;

}

/* ==========================================
NEWSLETTER
========================================== */

.newsletter-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.newsletter-card{

padding:70px;

border-radius:40px;

text-align:center;

background:
linear-gradient(
135deg,
#eb6835,
#7c5cff,
#00c2ff
);

position:relative;

overflow:hidden;

}

.newsletter-card::before{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

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

top:-140px;
right:-120px;

}

.newsletter-card h2{

font-size:3rem;

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

margin-bottom:18px;

position:relative;

z-index:2;

}

.newsletter-card p{

max-width:700px;

margin:auto;

line-height:1.9;

opacity:.95;

position:relative;

z-index:2;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

flex-wrap:wrap;

position:relative;

z-index:2;

}

.newsletter-form input{

width:360px;

padding:16px 18px;

border:none;

outline:none;

border-radius:16px;

}

.newsletter-form button{

padding:16px 24px;

border:none;

border-radius:16px;

background:#111827;

color:white;

font-weight:700;

cursor:pointer;

}

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

.footer{

margin-top:100px;

background:#050816;

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

}

.footer-container{

max-width:1400px;

margin:auto;

padding:70px 40px;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr 2fr;

gap:40px;

}

.footer-brand h2{

font-size:2rem;

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

color:var(--accent);

margin-bottom:15px;

}

.footer-brand p{

line-height:1.8;

color:var(--muted);

}

.footer-socials{

display:flex;

gap:12px;

margin-top:20px;

}

.footer-socials a{

width:44px;
height:44px;

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

border-radius:14px;

background:#162033;

color:white;

text-decoration:none;

}

.footer-col h3{

margin-bottom:18px;

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

}

.footer-col ul{

list-style:none;

}

.footer-col li{

margin-bottom:10px;

}

.footer-col a{

text-decoration:none;

color:var(--muted);

transition:.3s ease;

}

.footer-col a:hover{

color:white;

padding-left:4px;

}

.footer-newsletter{

display:flex;
flex-direction:column;

gap:12px;

margin-top:18px;

}

.footer-newsletter input{

padding:15px;

border:none;

border-radius:16px;

background:#162033;

color:white;

}

.footer-newsletter button{

padding:15px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

font-weight:700;

cursor:pointer;

}

.footer-bottom{

text-align:center;

padding:25px;

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

color:var(--muted);

}

/* ==========================================
BACKGROUND BLOBS
========================================== */

body::before{

content:"";

position:fixed;

width:500px;
height:500px;

border-radius:50%;

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

top:-150px;
left:-120px;

filter:blur(120px);

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:450px;
height:450px;

border-radius:50%;

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

bottom:-150px;
right:-120px;

filter:blur(120px);

z-index:-1;

}

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

@media(max-width:1200px){

.hero-stats{
grid-template-columns:repeat(2,1fr);
}

.featured-article{
grid-template-columns:1fr;
}

.footer-container{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:900px){

.sidebar{

transform:
translateX(-100%);

transition:.35s ease;

}

.sidebar.active{

transform:
translateX(0);

}

.navbar{

left:0;

}

.blog-page{

margin-left:0;

}

.search-bar{

display:none;

}

}

@media(max-width:768px){

.blog-hero,
.featured-section,
.categories,
.blog-posts,
.trending-section,
.newsletter-section{

padding-left:20px;
padding-right:20px;

}

.hero-stats{

grid-template-columns:1fr;

}

.posts-grid{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

padding:50px 20px;

}

.newsletter-card{

padding:40px 25px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.blog-hero h1{

font-size:3rem;

}

.featured-content{

padding:30px;

}

.featured-content h2{

font-size:2rem;

}

}

@media(max-width:500px){

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

}

.section-header h2{

font-size:2rem;

}

.newsletter-card h2{

font-size:2rem;

}

}