/* ============================================================
   BHIATECH — Blog Page Stylesheet
   ============================================================ */
:root {
    --bg: #060111;
    --bg-card: #0e0620;
    --bg-card-hover: #150a30;
    --accent: #b32dfd;
    --accent-2: #4b6be0;
    --gradient: linear-gradient(135deg, #b32dfd 0%, #4b6be0 100%);
    --text: #fff;
    --text-2: #b8b8d0;
    --text-3: #6b6b80;
    --border: rgba(135,115,203,0.15);
    --border-hover: rgba(179,45,253,0.4);
    --radius: 16px;
    --radius-lg: 24px;
    --font: 'Inter', sans-serif;
    --font-d: 'Space Grotesk', sans-serif;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --container: 1200px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:15px; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; color:inherit; }
input { font-family:inherit; font-size:inherit; color:inherit; outline:none; }
.container { max-width:var(--container); margin:0 auto; padding:0 24px; }
.gradient-text { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ===== NAVBAR ===== */
.navbar { position:fixed; top:0; left:0; width:100%; z-index:100; padding:16px 0; transition:all var(--transition); background:rgba(6,1,17,.85); backdrop-filter:blur(16px); border-bottom:1px solid transparent; }
.navbar.scrolled { border-bottom-color:var(--border); padding:10px 0; }
.nav-container { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:var(--font-d); font-size:1.35rem; font-weight:700; display:flex; align-items:center; gap:4px; }
.logo-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:var(--gradient); color:#fff; border-radius:8px; font-size:1rem; font-weight:800; }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a { font-size:.9rem; font-weight:500; color:var(--text-2); transition:color var(--transition); }
.nav-links a:hover, .nav-links a.active { color:var(--accent); }
.nav-toggle { display:none; flex-direction:column; gap:5px; width:28px; padding:0; }
.nav-toggle span { display:block; height:2px; background:var(--text); border-radius:2px; transition:all var(--transition); }

/* ===== BLOG HERO ===== */
.blog-hero { padding:160px 0 80px; text-align:center; position:relative; overflow:hidden; }
.blog-hero .container { position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-radius:100px; background:rgba(179,45,253,.08); border:1px solid rgba(179,45,253,.2); font-size:.82rem; font-weight:600; color:var(--accent); margin-bottom:24px; }
.blog-hero h1 { font-family:var(--font-d); font-size:clamp(2rem, 5vw, 3.5rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15; margin-bottom:20px; }
.blog-hero p { font-size:1.05rem; color:var(--text-2); max-width:600px; margin:0 auto; }
.hero-glow { position:absolute; top:20%; left:50%; transform:translateX(-50%); width:500px; height:500px; background:radial-gradient(circle, rgba(179,45,253,.12) 0%, transparent 70%); pointer-events:none; }

/* ===== FILTERS ===== */
.blog-filters { padding:32px 0; border-bottom:1px solid var(--border); }
.filters-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.search-box { position:relative; flex:1; min-width:240px; }
.search-box i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.search-box input { width:100%; padding:12px 16px 12px 44px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); transition:border-color var(--transition); }
.search-box input:focus { border-color:var(--accent); }
.category-filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-btn { padding:8px 18px; border-radius:100px; font-size:.82rem; font-weight:600; color:var(--text-2); background:var(--bg-card); border:1px solid var(--border); transition:all var(--transition); }
.filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.filter-btn.active { background:var(--gradient); color:#fff; border-color:transparent; }

/* ===== BLOG GRID ===== */
.blog-section { padding:60px 0 80px; }
.blog-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }

.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    cursor: pointer;
    position: relative;
}
.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}
.blog-card:hover { transform:translateY(-6px); border-color:var(--border-hover); box-shadow:0 20px 60px rgba(179,45,253,.1); }
.blog-card:hover::before { transform:scaleX(1); }

.blog-card-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, rgba(179,45,253,.1), rgba(75,107,224,.1));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.blog-card-image i { font-size:3rem; color:rgba(179,45,253,.3); }
.blog-card-image img { width:100%; height:100%; object-fit:cover; }

.blog-card-body { padding:24px; }
.blog-card-meta { display:flex; gap:16px; margin-bottom:12px; font-size:.78rem; color:var(--text-3); }
.blog-card-meta span { display:flex; align-items:center; gap:4px; }
.blog-card-meta i { font-size:.7rem; }
.blog-card-category { display:inline-block; padding:3px 10px; border-radius:100px; font-size:.7rem; font-weight:700; background:rgba(179,45,253,.12); color:var(--accent); text-transform:uppercase; letter-spacing:.04em; }
.blog-card h3 { font-family:var(--font-d); font-size:1.15rem; font-weight:700; margin:10px 0; line-height:1.35; }
.blog-card p { font-size:.88rem; color:var(--text-2); line-height:1.6; }
.blog-card-footer { padding:0 24px 20px; display:flex; align-items:center; justify-content:space-between; }
.read-more { font-size:.85rem; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:6px; transition:gap var(--transition); }
.blog-card:hover .read-more { gap:10px; }
.blog-card-tags { display:flex; gap:6px; }
.tag { padding:3px 8px; border-radius:100px; font-size:.68rem; background:rgba(255,255,255,.04); color:var(--text-3); border:1px solid var(--border); }

/* Empty state */
.empty-blog { text-align:center; padding:80px 24px; }
.empty-blog i { font-size:4rem; color:var(--text-3); opacity:.3; margin-bottom:16px; }
.empty-blog h3 { font-family:var(--font-d); font-size:1.3rem; color:var(--text-2); margin-bottom:8px; }
.empty-blog p { color:var(--text-3); }

/* ===== POST MODAL ===== */
.post-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(12px); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; opacity:0; visibility:hidden; transition:all var(--transition); }
.post-modal-overlay.active { opacity:1; visibility:visible; }
.post-modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); width:100%; max-width:800px; position:relative; margin:40px auto; transform:translateY(30px); transition:transform var(--transition); }
.post-modal-overlay.active .post-modal { transform:translateY(0); }
.modal-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--text-2); z-index:10; transition:all var(--transition); }
.modal-close:hover { background:rgba(239,68,68,.15); color:#ef4444; border-color:rgba(239,68,68,.3); }
.post-content { padding:48px 40px; }
.post-content .post-hero-img { width:calc(100% + 80px); margin:-48px -40px 32px; height:300px; background:linear-gradient(135deg, rgba(179,45,253,.12), rgba(75,107,224,.08)); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.post-content .post-hero-img img { width:100%; height:100%; object-fit:cover; }
.post-content .post-hero-img i { font-size:4rem; color:rgba(179,45,253,.2); }
.post-content .post-meta { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:24px; font-size:.85rem; color:var(--text-3); }
.post-content .post-meta span { display:flex; align-items:center; gap:6px; }
.post-content h1 { font-family:var(--font-d); font-size:2rem; font-weight:800; line-height:1.25; margin-bottom:24px; }
.post-content .post-body { font-size:.95rem; line-height:1.9; color:var(--text-2); }
.post-content .post-body h2, .post-content .post-body h3 { font-family:var(--font-d); color:var(--text); margin:28px 0 12px; }
.post-content .post-body h2 { font-size:1.4rem; }
.post-content .post-body h3 { font-size:1.15rem; }
.post-content .post-body p { margin-bottom:16px; }
.post-content .post-body ul, .post-content .post-body ol { margin:16px 0; padding-left:24px; }
.post-content .post-body li { margin-bottom:8px; }
.post-content .post-body a { color:var(--accent); text-decoration:underline; }
.post-content .post-body blockquote { border-left:3px solid var(--accent); padding:16px 20px; background:rgba(179,45,253,.04); border-radius:0 var(--radius) var(--radius) 0; margin:20px 0; font-style:italic; color:var(--text-2); }
.post-tags { display:flex; gap:8px; margin-top:32px; flex-wrap:wrap; }
.post-tags .tag { padding:5px 14px; font-size:.78rem; }

/* ===== NEWSLETTER ===== */
.newsletter-section { padding:80px 0; }
.newsletter-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:60px 40px; text-align:center; position:relative; overflow:hidden; }
.newsletter-glow { position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:400px; height:400px; background:radial-gradient(circle, rgba(179,45,253,.08) 0%, transparent 70%); }
.newsletter-card h2 { font-family:var(--font-d); font-size:2rem; font-weight:800; position:relative; margin-bottom:12px; }
.newsletter-card p { color:var(--text-2); margin-bottom:28px; position:relative; }
.newsletter-form { display:flex; gap:12px; max-width:480px; margin:0 auto; position:relative; }
.newsletter-form input { flex:1; padding:14px 20px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:100px; color:var(--text); }
.newsletter-form input:focus { border-color:var(--accent); }
.newsletter-form button { padding:14px 28px; background:var(--gradient); color:#fff; border-radius:100px; font-weight:700; font-size:.88rem; display:flex; align-items:center; gap:8px; transition:all var(--transition); white-space:nowrap; }
.newsletter-form button:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(179,45,253,.3); }

/* ===== FOOTER ===== */
.blog-footer { padding:40px 0; border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-logo { font-family:var(--font-d); font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:4px; }
.footer-logo .logo-icon { width:28px; height:28px; font-size:.85rem; }
.footer-links { display:flex; gap:24px; }
.footer-links a { font-size:.85rem; color:var(--text-3); transition:color var(--transition); }
.footer-links a:hover { color:var(--accent); }
.footer-copy { font-size:.82rem; color:var(--text-3); }

/* ===== RESPONSIVE ===== */
@media(max-width:900px) {
    .blog-grid { grid-template-columns:repeat(2, 1fr); }
    .nav-links { position:fixed; top:0; right:-100%; width:280px; height:100vh; background:var(--bg); border-left:1px solid var(--border); flex-direction:column; padding:80px 32px 32px; gap:20px; transition:right var(--transition); z-index:90; }
    .nav-links.open { right:0; }
    .nav-toggle { display:flex; z-index:95; }
    .post-content { padding:32px 24px; }
    .post-content .post-hero-img { width:calc(100% + 48px); margin:-32px -24px 24px; }
    .post-content h1 { font-size:1.5rem; }
}
@media(max-width:600px) {
    .blog-grid { grid-template-columns:1fr; }
    .filters-row { flex-direction:column; }
    .newsletter-card { padding:40px 24px; }
    .newsletter-form { flex-direction:column; }
    .footer-inner { flex-direction:column; text-align:center; }
}

/* ===== SCROLL REVEAL ===== */
.reveal { opacity:0; transform:translateY(30px); transition:all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

@media(prefers-reduced-motion:reduce) {
    .reveal { opacity:1; transform:none; transition:none; }
    .blog-card, .post-modal { transition:none; }
}