/* ============================================
 BLOG WEBSITE - CSS Design System
 ============================================ */
/* Google Fonts loaded via <link> tags in header.php for performance */
/* ---- CSS Variables / Tokens ---- */
:root {
 /* Colors */
 --bg-primary: #0a0a0f;
 --bg-secondary: #12121a;
 --bg-card: rgba(255, 255, 255, 0.04);
 --bg-glass: rgba(255, 255, 255, 0.06);
 --bg-glass-hover: rgba(255, 255, 255, 0.1);
 --border-glass: rgba(255, 255, 255, 0.08);
 --border-glass-hover: rgba(255, 255, 255, 0.15);
 --text-primary: #f0f0f5;
 --text-secondary: #a0a0b8;
 --text-muted: #6b6b80;
 --accent-primary: #7c5cfc;
 --accent-secondary: #5ce1e6;
 --accent-gradient: linear-gradient(135deg, #7c5cfc 0%, #5ce1e6 100%);
 --accent-glow: rgba(124, 92, 252, 0.25);
 --tag-lifestyle: #e879a8;
 --tag-travel: #5ce1e6;
 --tag-food: #f5a623;
 --tag-nature: #6dd47e;
 --tag-design: #c084fc;
 --tag-tech: #60a5fa;
 /* Typography */
 --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 --font-serif: 'Playfair Display', Georgia, serif;
 /* Spacing */
 --space-xs: 0.25rem;
 --space-sm: 0.5rem;
 --space-md: 1rem;
 --space-lg: 1.5rem;
 --space-xl: 2rem;
 --space-2xl: 3rem;
 --space-3xl: 4rem;
 --space-4xl: 6rem;
 /* Border Radius */
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
 --radius-xl: 24px;
 --radius-full: 9999px;
 /* Shadows */
 --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
 --shadow-glow: 0 0 40px rgba(124, 92, 252, 0.15);
 /* Transitions */
 --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 /* Layout */
 --container-max: 1200px;
 --nav-height: 72px;
}
/* ---- Reset & Base ---- */
*,
*::before,
*::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 scroll-behavior: smooth;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
body {
 font-family: var(--font-sans);
 background: var(--bg-primary);
 color: var(--text-primary);
 line-height: 1.7;
 overflow-x: hidden;
}
a {
 text-decoration: none;
 color: inherit;
 transition: color var(--transition-fast);
}
img {
 max-width: 100%;
 height: auto;
 display: block;
}
ul {
 list-style: none;
}
/* ---- Utilities ---- */
.container {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 0 var(--space-xl);
}
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}
/* ---- Animated background ---- */
.bg-mesh {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 overflow: hidden;
}
.bg-mesh::before,
.bg-mesh::after {
 content: '';
 position: absolute;
 border-radius: 50%;
 filter: blur(120px);
 opacity: 0.4;
 animation: float 20s ease-in-out infinite;
}
.bg-mesh::before {
 width: 600px;
 height: 600px;
 background: radial-gradient(circle, rgba(124, 92, 252, 0.2), transparent 70%);
 top: -200px;
 right: -100px;
}
.bg-mesh::after {
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, rgba(92, 225, 230, 0.15), transparent 70%);
 bottom: -150px;
 left: -100px;
 animation-delay: -10s;
}
@keyframes float {
 0%,
 100% {
 transform: translate(0, 0) scale(1);
 }
 33% {
 transform: translate(30px, -40px) scale(1.1);
 }
 66% {
 transform: translate(-20px, 30px) scale(0.95);
 }
}
/* ============================================
 NAVIGATION
 ============================================ */
.navbar {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: var(--nav-height);
 z-index: 1000;
 transition: background var(--transition-smooth), box-shadow var(--transition-smooth);
}
.navbar.scrolled {
 background: rgba(10, 10, 15, 0.85);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 box-shadow: 0 1px 0 var(--border-glass);
}
.navbar .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100%;
}
.nav-logo {
 display: flex;
 align-items: center;
}
.nav-logo-img {
 height: 3rem;
 width: auto;
}
.nav-links {
 display: flex;
 align-items: center;
 gap: var(--space-xl);
}
.nav-links a {
 font-size: 0.9rem;
 font-weight: 500;
 color: var(--text-secondary);
 position: relative;
 padding: var(--space-xs) 0;
}
.nav-links a::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--accent-gradient);
 border-radius: 2px;
 transition: width var(--transition-smooth);
}
.nav-links a:hover,
.nav-links a.active {
 color: var(--text-primary);
}
.nav-links a:hover::after,
.nav-links a.active::after {
 width: 100%;
}
.nav-search-btn {
 background: none;
 border: 1px solid var(--border-glass);
 color: var(--text-secondary);
 width: 38px;
 height: 38px;
 border-radius: var(--radius-full);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all var(--transition-fast);
}
.nav-search-btn:hover {
 border-color: var(--border-glass-hover);
 color: var(--text-primary);
 background: var(--bg-glass);
}
.nav-hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
}
.nav-hamburger span {
 width: 22px;
 height: 2px;
 background: var(--text-primary);
 border-radius: 2px;
 transition: all var(--transition-fast);
}
.nav-hamburger.active span:nth-child(1) {
 transform: rotate(45deg) translate(5px, 5px);
}
.nav-hamburger.active span:nth-child(2) {
 opacity: 0;
}
.nav-hamburger.active span:nth-child(3) {
 transform: rotate(-45deg) translate(5px, -5px);
}
/* ============================================
 HERO SECTION
 ============================================ */
.hero {
 min-height: 85vh;
 display: flex;
 align-items: center;
 position: relative;
 overflow: hidden;
 padding-top: var(--nav-height);
}
.hero-bg {
 position: absolute;
 inset: 0;
 z-index: -1;
}
.hero-bg img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.25;
}
.hero-bg::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg,
 rgba(10, 10, 15, 0.3) 0%,
 rgba(10, 10, 15, 0.7) 60%,
 var(--bg-primary) 100%);
}
.hero-content {
 text-align: center;
 max-width: 750px;
 margin: 0 auto;
 padding: var(--space-4xl) var(--space-xl);
}
.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: var(--space-sm);
 padding: var(--space-sm) var(--space-lg);
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-full);
 font-size: 0.8rem;
 font-weight: 500;
 color: var(--text-secondary);
 margin-bottom: var(--space-xl);
 backdrop-filter: blur(10px);
}
.hero-badge .dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #6dd47e;
 animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
 0%,
 100% {
 opacity: 1;
 }
 50% {
 opacity: 0.4;
 }
}
.hero h1 {
 font-family: var(--font-serif);
 font-size: clamp(2.5rem, 6vw, 4.2rem);
 font-weight: 700;
 line-height: 1.15;
 margin-bottom: var(--space-lg);
 letter-spacing: -0.02em;
}
.hero h1 .gradient-text {
 background: var(--accent-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.hero p {
 font-size: 1.15rem;
 color: var(--text-secondary);
 max-width: 540px;
 margin: 0 auto var(--space-2xl);
 line-height: 1.8;
}
.hero-cta {
 display: inline-flex;
 align-items: center;
 gap: var(--space-sm);
 padding: 14px 32px;
 background: var(--accent-gradient);
 color: #fff;
 font-weight: 600;
 font-size: 0.95rem;
 border-radius: var(--radius-full);
 border: none;
 cursor: pointer;
 transition: all var(--transition-smooth);
 box-shadow: 0 4px 20px var(--accent-glow);
}
.hero-cta:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 30px var(--accent-glow);
}
.hero-cta svg {
 transition: transform var(--transition-fast);
}
.hero-cta:hover svg {
 transform: translateX(3px);
}
/* ============================================
 SECTION STYLING
 ============================================ */
.section {
 padding: var(--space-4xl) 0;
}
.section-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: var(--space-2xl);
 flex-wrap: wrap;
 gap: var(--space-md);
}
.section-title {
 font-family: var(--font-serif);
 font-size: 2rem;
 font-weight: 700;
 letter-spacing: -0.02em;
}
.section-title .accent {
 color: var(--accent-primary);
}
.view-all {
 font-size: 0.9rem;
 font-weight: 500;
 color: var(--accent-primary);
 display: inline-flex;
 align-items: center;
 gap: var(--space-xs);
 transition: gap var(--transition-fast);
}
.view-all:hover {
 gap: var(--space-sm);
}
/* ---- Category Filter ---- */
.category-filter {
 display: flex;
 gap: var(--space-sm);
 flex-wrap: wrap;
 margin-bottom: var(--space-2xl);
}
.filter-btn {
 padding: 8px 20px;
 border-radius: var(--radius-full);
 border: 1px solid var(--border-glass);
 background: transparent;
 color: var(--text-secondary);
 font-family: var(--font-sans);
 font-size: 0.85rem;
 font-weight: 500;
 cursor: pointer;
 transition: all var(--transition-fast);
}
.filter-btn:hover {
 border-color: var(--border-glass-hover);
 color: var(--text-primary);
 background: var(--bg-glass);
}
.filter-btn.active {
 border-color: var(--accent-primary);
 background: rgba(124, 92, 252, 0.15);
 color: var(--accent-primary);
}
/* ============================================
 BLOG CARDS
 ============================================ */
.posts-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-xl);
}
.post-card {
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 overflow: hidden;
 transition: all var(--transition-smooth);
 cursor: pointer;
 position: relative;
}
.post-card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: var(--radius-lg);
 background: var(--accent-gradient);
 opacity: 0;
 z-index: 0;
 transition: opacity var(--transition-smooth);
}
.post-card:hover {
 transform: translateY(-6px);
 border-color: var(--border-glass-hover);
 box-shadow: var(--shadow-glow);
}
.post-card:hover::before {
 opacity: 0.04;
}
.post-card-image {
 width: 100%;
 height: 220px;
 overflow: hidden;
 position: relative;
 z-index: 1;
}
.post-card-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform var(--transition-smooth);
}
.post-card:hover .post-card-image img {
 transform: scale(1.06);
}
.post-card-body {
 padding: var(--space-lg);
 position: relative;
 z-index: 1;
}
.post-tag {
 display: inline-block;
 padding: 4px 12px;
 border-radius: var(--radius-full);
 font-size: 0.72rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 margin-bottom: var(--space-md);
}
.post-tag.lifestyle {
 background: rgba(232, 121, 168, 0.15);
 color: var(--tag-lifestyle);
}
.post-tag.travel {
 background: rgba(92, 225, 230, 0.15);
 color: var(--tag-travel);
}
.post-tag.food {
 background: rgba(245, 166, 35, 0.15);
 color: var(--tag-food);
}
.post-tag.nature {
 background: rgba(109, 212, 126, 0.15);
 color: var(--tag-nature);
}
.post-tag.design {
 background: rgba(192, 132, 252, 0.15);
 color: var(--tag-design);
}
.post-tag.tech {
 background: rgba(96, 165, 250, 0.15);
 color: var(--tag-tech);
}
.post-card-title {
 font-family: var(--font-serif);
 font-size: 1.25rem;
 font-weight: 600;
 line-height: 1.4;
 margin-bottom: var(--space-sm);
 transition: color var(--transition-fast);
}
.post-card:hover .post-card-title {
 color: var(--accent-secondary);
}
.post-card-excerpt {
 font-size: 0.88rem;
 color: var(--text-muted);
 line-height: 1.6;
 margin-bottom: var(--space-lg);
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.post-card-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 0.8rem;
 color: var(--text-muted);
}
.post-author {
 display: flex;
 align-items: center;
 gap: var(--space-sm);
}
.post-author-avatar {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--accent-gradient);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 0.7rem;
 color: #fff;
}
.post-read-time {
 display: flex;
 align-items: center;
 gap: 4px;
}
/* ============================================
 FEATURED POST (Large card)
 ============================================ */
.featured-post {
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 gap: var(--space-2xl);
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-xl);
 overflow: hidden;
 margin-bottom: var(--space-3xl);
 transition: all var(--transition-smooth);
 cursor: pointer;
}
.featured-post:hover {
 border-color: var(--border-glass-hover);
 box-shadow: var(--shadow-glow);
}
.featured-post-image {
 height: 100%;
 min-height: 400px;
 overflow: hidden;
}
.featured-post-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform var(--transition-smooth);
}
.featured-post:hover .featured-post-image img {
 transform: scale(1.04);
}
.featured-post-content {
 padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.featured-label {
 display: inline-flex;
 align-items: center;
 gap: var(--space-sm);
 font-size: 0.78rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--accent-primary);
 margin-bottom: var(--space-lg);
}
.featured-label svg {
 width: 16px;
 height: 16px;
}
.featured-post-title {
 font-family: var(--font-serif);
 font-size: 2rem;
 font-weight: 700;
 line-height: 1.3;
 margin-bottom: var(--space-md);
 letter-spacing: -0.02em;
}
.featured-post:hover .featured-post-title {
 color: var(--accent-secondary);
}
.featured-post-excerpt {
 font-size: 1rem;
 color: var(--text-secondary);
 line-height: 1.7;
 margin-bottom: var(--space-xl);
}
.featured-post-meta {
 display: flex;
 align-items: center;
 gap: var(--space-xl);
 font-size: 0.85rem;
 color: var(--text-muted);
}
/* ============================================
 NEWSLETTER
 ============================================ */
.newsletter {
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-xl);
 padding: var(--space-3xl);
 text-align: center;
 position: relative;
 overflow: hidden;
 margin: var(--space-3xl) 0;
}
.newsletter::before {
 content: '';
 position: absolute;
 top: -100px;
 right: -100px;
 width: 300px;
 height: 300px;
 background: radial-gradient(circle, rgba(124, 92, 252, 0.15), transparent 70%);
 border-radius: 50%;
 pointer-events: none;
}
.newsletter::after {
 content: '';
 position: absolute;
 bottom: -80px;
 left: -80px;
 width: 250px;
 height: 250px;
 background: radial-gradient(circle, rgba(92, 225, 230, 0.1), transparent 70%);
 border-radius: 50%;
 pointer-events: none;
}
.newsletter-content {
 position: relative;
 z-index: 1;
}
.newsletter h2 {
 font-family: var(--font-serif);
 font-size: 1.8rem;
 font-weight: 700;
 margin-bottom: var(--space-sm);
}
.newsletter p {
 color: var(--text-secondary);
 margin-bottom: var(--space-xl);
 max-width: 450px;
 margin-left: auto;
 margin-right: auto;
}
.newsletter-form {
 display: flex;
 gap: var(--space-sm);
 max-width: 460px;
 margin: 0 auto;
}
.newsletter-form input {
 flex: 1;
 padding: 14px 20px;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-full);
 color: var(--text-primary);
 font-family: var(--font-sans);
 font-size: 0.9rem;
 outline: none;
 transition: border-color var(--transition-fast);
}
.newsletter-form input::placeholder {
 color: var(--text-muted);
}
.newsletter-form input:focus {
 border-color: var(--accent-primary);
}
.newsletter-form button {
 padding: 14px 28px;
 background: var(--accent-gradient);
 color: #fff;
 font-weight: 600;
 font-size: 0.9rem;
 border: none;
 border-radius: var(--radius-full);
 cursor: pointer;
 font-family: var(--font-sans);
 transition: all var(--transition-smooth);
 white-space: nowrap;
}
.newsletter-form button:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px var(--accent-glow);
}
/* ============================================
 ADSENSE ADS
 ============================================ */
.adsense-container {
 max-width: 900px;
 margin: var(--space-xl) auto;
 padding: var(--space-md) 0;
 text-align: center;
 overflow: hidden;
 position: relative;
}
.adsense-container::before {
 content: 'Advertisement';
 display: block;
 font-size: 0.68rem;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 color: var(--text-muted);
 opacity: 0.5;
 margin-bottom: var(--space-sm);
}
.adsense-container .adsbygoogle {
 display: block;
}
/* ============================================
 PAGINATION
 ============================================ */
.pagination {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-sm);
 margin-top: var(--space-2xl);
 flex-wrap: wrap;
}
.pagination-pages {
 display: flex;
 align-items: center;
 gap: var(--space-xs);
}
.pagination-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 40px;
 height: 40px;
 padding: 0 var(--space-md);
 border-radius: var(--radius-md);
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 color: var(--text-secondary);
 font-size: 0.88rem;
 font-weight: 500;
 transition: all var(--transition-fast);
 cursor: pointer;
}
.pagination-btn:hover {
 border-color: var(--accent-primary);
 color: var(--text-primary);
}
.pagination-btn.active {
 background: var(--accent-gradient);
 border-color: transparent;
 color: #fff;
 font-weight: 600;
 pointer-events: none;
}
.pagination-dots {
 padding: 0 var(--space-xs);
 color: var(--text-muted);
}
/* ============================================
 POST VIEWS
 ============================================ */
.post-views {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
}
.post-views svg {
 opacity: 0.7;
}
/* ============================================
 FOOTER
 ============================================ */
.footer {
 padding: var(--space-3xl) 0 var(--space-xl);
 border-top: 1px solid var(--border-glass);
 margin-top: var(--space-3xl);
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 gap: var(--space-2xl);
 margin-bottom: var(--space-2xl);
}
.footer-brand .nav-logo {
 margin-bottom: var(--space-md);
 display: inline-block;
}
.footer-brand .nav-logo-img {
 height: 3rem;
 width: auto;
}
.footer-brand p {
 color: var(--text-muted);
 font-size: 0.88rem;
 line-height: 1.7;
 max-width: 280px;
}
.footer-socials {
 display: flex;
 gap: var(--space-md);
 margin-top: var(--space-lg);
}
.footer-socials a {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 border: 1px solid var(--border-glass);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-muted);
 transition: all var(--transition-fast);
}
.footer-socials a:hover {
 border-color: var(--accent-primary);
 color: var(--accent-primary);
 background: rgba(124, 92, 252, 0.1);
}
.footer-col h4 {
 font-size: 0.85rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--text-primary);
 margin-bottom: var(--space-lg);
}
.footer-col ul li {
 margin-bottom: var(--space-sm);
}
.footer-col ul li a {
 font-size: 0.88rem;
 color: var(--text-muted);
 transition: color var(--transition-fast);
}
.footer-col ul li a:hover {
 color: var(--text-primary);
}
.footer-bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding-top: var(--space-xl);
 border-top: 1px solid var(--border-glass);
 font-size: 0.82rem;
 color: var(--text-muted);
 flex-wrap: wrap;
 gap: var(--space-md);
}
/* ============================================
 BLOG POST PAGE
 ============================================ */
.post-page-header {
 padding-top: var(--space-2xl);
 padding-bottom: var(--space-2xl);
 text-align: center;
 max-width: 800px;
 margin: 0 auto;
}
/* When no breadcrumb precedes the header (e.g. 404) */
.post-page-header:first-child {
 padding-top: calc(var(--nav-height) + var(--space-3xl));
}
.post-page-header .post-tag {
 margin-bottom: var(--space-lg);
}
.post-page-title {
 font-family: var(--font-serif);
 font-size: clamp(2rem, 4.5vw, 3rem);
 font-weight: 700;
 line-height: 1.2;
 margin-bottom: var(--space-lg);
 letter-spacing: -0.02em;
}
.post-page-meta {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-xl);
 color: var(--text-muted);
 font-size: 0.9rem;
}
.post-page-meta .divider {
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background: var(--text-muted);
}
.post-page-hero-image {
 max-width: 1000px;
 margin: 0 auto var(--space-3xl);
 border-radius: var(--radius-xl);
 overflow: hidden;
 border: 1px solid var(--border-glass);
}
.post-page-hero-image img {
 width: 100%;
 height: 480px;
 object-fit: cover;
}
/* Article Content */
.article-content {
 max-width: 720px;
 margin: 0 auto;
 padding-bottom: var(--space-3xl);
}
.article-content h2 {
 font-family: var(--font-serif);
 font-size: 1.6rem;
 font-weight: 700;
 margin: var(--space-2xl) 0 var(--space-md);
 letter-spacing: -0.01em;
}
.article-content h3 {
 font-family: var(--font-serif);
 font-size: 1.3rem;
 font-weight: 600;
 margin: var(--space-xl) 0 var(--space-md);
}
.article-content p {
 font-size: 1.05rem;
 color: var(--text-secondary);
 line-height: 1.85;
 margin-bottom: var(--space-lg);
}
.article-content blockquote {
 border-left: 3px solid var(--accent-primary);
 padding: var(--space-md) var(--space-xl);
 margin: var(--space-xl) 0;
 background: var(--bg-glass);
 border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.article-content blockquote p {
 font-family: var(--font-serif);
 font-size: 1.15rem;
 font-style: italic;
 color: var(--text-primary);
 margin-bottom: 0;
}
.article-content ul,
.article-content ol {
 padding-left: var(--space-xl);
 margin-bottom: var(--space-lg);
}
.article-content li {
 font-size: 1.05rem;
 color: var(--text-secondary);
 line-height: 1.8;
 margin-bottom: var(--space-sm);
 list-style: disc;
}
.article-content ol li {
 list-style: decimal;
}
.article-content a {
 color: var(--accent-primary);
 border-bottom: 1px solid transparent;
 transition: border-color var(--transition-fast);
}
.article-content a:hover {
 border-bottom-color: var(--accent-primary);
}
/* Share & Tags bottom */
.post-footer {
 max-width: 720px;
 margin: 0 auto;
 padding: var(--space-xl) 0;
 border-top: 1px solid var(--border-glass);
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--space-md);
}
.post-tags {
 display: flex;
 gap: var(--space-sm);
 flex-wrap: wrap;
}
.post-tags .tag {
 padding: 6px 14px;
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-full);
 font-size: 0.8rem;
 color: var(--text-secondary);
 transition: all var(--transition-fast);
}
.post-tags .tag:hover {
 border-color: var(--accent-primary);
 color: var(--accent-primary);
}
.share-btns {
 display: flex;
 gap: var(--space-sm);
 flex-wrap: wrap;
}
.share-btn {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.45rem 0.85rem;
 border-radius: 999px;
 border: 1px solid var(--border-glass);
 color: var(--text-secondary);
 font-size: 0.78rem;
 font-weight: 500;
 text-decoration: none;
 transition: all var(--transition-fast);
 cursor: pointer;
 background: transparent;
 font-family: inherit;
}
.share-btn:hover {
 transform: translateY(-1px);
}
.share-whatsapp:hover {
 border-color: #25d366;
 color: #25d366;
 background: rgba(37, 211, 102, 0.1);
}
.share-twitter:hover {
 border-color: #f0f0f5;
 color: #f0f0f5;
 background: rgba(255, 255, 255, 0.08);
}
.share-facebook:hover {
 border-color: #1877f2;
 color: #1877f2;
 background: rgba(24, 119, 242, 0.1);
}
.share-linkedin:hover {
 border-color: #0a66c2;
 color: #0a66c2;
 background: rgba(10, 102, 194, 0.1);
}
.share-copy:hover {
 border-color: var(--accent-primary);
 color: var(--accent-primary);
 background: rgba(124, 92, 252, 0.1);
}
.share-copy.copied {
 border-color: #22c55e;
 color: #22c55e;
 background: rgba(34, 197, 94, 0.1);
}
/* ============================================
 ABOUT PAGE
 ============================================ */
.about-hero {
 padding-top: calc(var(--nav-height) + var(--space-4xl));
 text-align: center;
 max-width: 700px;
 margin: 0 auto;
 padding-bottom: var(--space-3xl);
}
.about-hero h1 {
 font-family: var(--font-serif);
 font-size: clamp(2rem, 5vw, 3.2rem);
 font-weight: 700;
 margin-bottom: var(--space-lg);
}
.about-hero p {
 font-size: 1.1rem;
 color: var(--text-secondary);
 line-height: 1.8;
}
.about-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-xl);
 margin-bottom: var(--space-3xl);
}
.stat-card {
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: var(--space-xl);
 text-align: center;
 transition: all var(--transition-smooth);
}
.stat-card:hover {
 border-color: var(--border-glass-hover);
 transform: translateY(-4px);
 box-shadow: var(--shadow-glow);
}
.stat-number {
 font-family: var(--font-serif);
 font-size: 2.5rem;
 font-weight: 700;
 background: var(--accent-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: var(--space-xs);
}
.stat-label {
 font-size: 0.85rem;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.08em;
}
.about-content {
 max-width: 720px;
 margin: 0 auto;
}
.about-content h2 {
 font-family: var(--font-serif);
 font-size: 1.8rem;
 font-weight: 700;
 margin-bottom: var(--space-lg);
}
.about-content p {
 font-size: 1.05rem;
 color: var(--text-secondary);
 line-height: 1.85;
 margin-bottom: var(--space-lg);
}
/* ============================================
 CONTACT PAGE
 ============================================ */
.contact-hero {
 padding-top: calc(var(--nav-height) + var(--space-3xl));
 text-align: center;
 max-width: 600px;
 margin: 0 auto;
 padding-bottom: var(--space-2xl);
}
.contact-hero h1 {
 font-family: var(--font-serif);
 font-size: clamp(2rem, 5vw, 3rem);
 font-weight: 700;
 margin-bottom: var(--space-md);
}
.contact-hero p {
 font-size: 1.05rem;
 color: var(--text-secondary);
}
.contact-grid {
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 gap: var(--space-2xl);
 max-width: 900px;
 margin: 0 auto;
 padding-bottom: var(--space-3xl);
}
.contact-info-card {
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: var(--space-xl);
 display: flex;
 align-items: flex-start;
 gap: var(--space-md);
 margin-bottom: var(--space-lg);
 transition: all var(--transition-fast);
}
.contact-info-card:hover {
 border-color: var(--border-glass-hover);
}
.contact-info-card .icon {
 width: 44px;
 height: 44px;
 border-radius: var(--radius-md);
 background: rgba(124, 92, 252, 0.12);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--accent-primary);
 flex-shrink: 0;
}
.contact-info-card h3 {
 font-size: 0.95rem;
 font-weight: 600;
 margin-bottom: var(--space-xs);
}
.contact-info-card p {
 font-size: 0.88rem;
 color: var(--text-muted);
}
.contact-form {
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-xl);
 padding: var(--space-2xl);
}
.form-group {
 margin-bottom: var(--space-lg);
}
.form-group label {
 display: block;
 font-size: 0.85rem;
 font-weight: 500;
 margin-bottom: var(--space-sm);
 color: var(--text-secondary);
}
.form-group input,
.form-group textarea {
 width: 100%;
 padding: 12px 16px;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-md);
 color: var(--text-primary);
 font-family: var(--font-sans);
 font-size: 0.9rem;
 outline: none;
 transition: border-color var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus {
 border-color: var(--accent-primary);
}
.form-group textarea {
 min-height: 140px;
 resize: vertical;
}
.form-submit {
 width: 100%;
 padding: 14px;
 background: var(--accent-gradient);
 color: #fff;
 font-weight: 600;
 font-size: 0.95rem;
 border: none;
 border-radius: var(--radius-md);
 cursor: pointer;
 font-family: var(--font-sans);
 transition: all var(--transition-smooth);
}
.form-submit:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px var(--accent-glow);
}
/* ============================================
 SEARCH OVERLAY
 ============================================ */
.search-overlay {
 position: fixed;
 inset: 0;
 z-index: 2000;
 background: rgba(10, 10, 15, 0.92);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 display: flex;
 align-items: flex-start;
 justify-content: center;
 padding-top: 20vh;
 opacity: 0;
 visibility: hidden;
 transition: all var(--transition-smooth);
}
.search-overlay.active {
 opacity: 1;
 visibility: visible;
}
.search-container {
 width: 100%;
 max-width: 600px;
 padding: 0 var(--space-xl);
 transform: translateY(20px);
 transition: transform var(--transition-smooth);
}
.search-overlay.active .search-container {
 transform: translateY(0);
}
.search-input-wrap {
 position: relative;
}
.search-input-wrap svg {
 position: absolute;
 left: 20px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-muted);
}
.search-input-wrap input {
 width: 100%;
 padding: 18px 20px 18px 52px;
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 color: var(--text-primary);
 font-family: var(--font-sans);
 font-size: 1.1rem;
 outline: none;
 transition: border-color var(--transition-fast);
}
.search-input-wrap input:focus {
 border-color: var(--accent-primary);
}
.search-close {
 position: absolute;
 top: var(--space-xl);
 right: var(--space-xl);
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 1px solid var(--border-glass);
 background: transparent;
 color: var(--text-secondary);
 font-size: 1.2rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all var(--transition-fast);
}
.search-close:hover {
 border-color: var(--text-primary);
 color: var(--text-primary);
}
.search-hint {
 text-align: center;
 margin-top: var(--space-lg);
 font-size: 0.85rem;
 color: var(--text-muted);
}
.search-hint kbd {
 padding: 2px 8px;
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: 4px;
 font-size: 0.78rem;
 font-family: var(--font-sans);
}
.search-results {
 max-height: 55vh;
 overflow-y: auto;
 margin-top: var(--space-lg);
}
.search-result-item {
 display: flex;
 gap: var(--space-md);
 padding: var(--space-md) var(--space-lg);
 border-radius: var(--radius-md);
 transition: background var(--transition-fast);
 border-bottom: 1px solid var(--border-glass);
}
.search-result-item:last-child {
 border-bottom: none;
}
.search-result-item:hover {
 background: var(--bg-glass-hover);
}
.search-result-info h4 {
 font-size: 0.95rem;
 font-weight: 600;
 margin: var(--space-xs) 0;
 color: var(--text-primary);
}
.search-result-info p {
 font-size: 0.82rem;
 color: var(--text-muted);
 line-height: 1.5;
}
.search-no-results {
 text-align: center;
 padding: var(--space-2xl);
 color: var(--text-muted);
 font-size: 0.9rem;
}
/* ============================================
 SCROLL ANIMATIONS
 ============================================ */
.reveal {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
 opacity: 1;
 transform: translateY(0);
}
/* ============================================
 BACK TO TOP
 ============================================ */
.back-to-top {
 position: fixed;
 bottom: 30px;
 right: 30px;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: var(--accent-gradient);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 border: none;
 opacity: 0;
 visibility: hidden;
 transform: translateY(10px);
 transition: all var(--transition-smooth);
 box-shadow: 0 4px 15px var(--accent-glow);
 z-index: 500;
}
.back-to-top.visible {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.back-to-top:hover {
 transform: translateY(-3px);
}
/* ============================================
 ADVERTISE PAGE
 ============================================ */
.advertise-benefits {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-xl);
 margin-top: var(--space-xl);
}
.benefit-card {
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: var(--space-2xl);
 text-align: center;
 transition: all var(--transition-fast);
}
.benefit-card:hover {
 border-color: var(--border-glass-hover);
 transform: translateY(-4px);
}
.benefit-icon {
 width: 56px;
 height: 56px;
 border-radius: var(--radius-md);
 background: rgba(124, 92, 252, 0.12);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--accent-primary);
 margin: 0 auto var(--space-lg);
}
.benefit-card h3 {
 font-size: 1.1rem;
 font-weight: 600;
 margin-bottom: var(--space-sm);
}
.benefit-card p {
 font-size: 0.9rem;
 color: var(--text-secondary);
 line-height: 1.6;
}
.ad-options-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-xl);
 margin-top: var(--space-xl);
}
.ad-option-card {
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-xl);
 padding: var(--space-2xl);
 position: relative;
 transition: all var(--transition-fast);
}
.ad-option-card:hover {
 border-color: var(--accent-primary);
 box-shadow: var(--shadow-glow);
}
.ad-option-badge {
 position: absolute;
 top: var(--space-lg);
 right: var(--space-lg);
 background: var(--accent-gradient);
 color: white;
 font-size: 0.72rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 padding: 4px 12px;
 border-radius: var(--radius-full);
}
.ad-option-card h3 {
 font-size: 1.15rem;
 font-weight: 700;
 margin-bottom: var(--space-sm);
}
.ad-option-card p {
 font-size: 0.88rem;
 color: var(--text-secondary);
 line-height: 1.6;
 margin-bottom: var(--space-lg);
}
.ad-features {
 list-style: none;
 padding: 0;
}
.ad-features li {
 font-size: 0.85rem;
 color: var(--text-secondary);
 padding: var(--space-xs) 0;
 padding-left: 1.5rem;
 position: relative;
}
.ad-features li::before {
 content: '✓';
 position: absolute;
 left: 0;
 color: var(--accent-secondary);
 font-weight: 700;
}
.advertise-form-wrap {
 max-width: 700px;
 margin: var(--space-xl) auto 0;
}
/* ============================================
 RESPONSIVE
 ============================================ */
@media (max-width: 1024px) {
 .posts-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .featured-post {
 grid-template-columns: 1fr;
 }
 .featured-post-content {
 padding: var(--space-xl);
 }
 .footer-grid {
 grid-template-columns: 1fr 1fr;
 gap: var(--space-xl);
 }
 .advertise-benefits,
 .ad-options-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .post-page-header {
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 .post-page-hero-image img {
 height: 360px;
 }
}
@media (max-width: 768px) {
 .nav-links {
 position: fixed;
 top: 0;
 right: -100%;
 width: 280px;
 height: 100vh;
 background: rgba(10, 10, 20, 0.97);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 flex-direction: column;
 padding: 5rem 2rem 2rem;
 gap: 0.5rem;
 transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 z-index: 999;
 display: flex;
 border-left: 1px solid var(--border-glass);
 box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
 }
 .nav-links.active {
 right: 0;
 }
 .nav-links a {
 font-size: 1.1rem;
 padding: 0.85rem 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 .nav-links a::after {
 display: none;
 }
 .nav-hamburger {
 display: flex;
 z-index: 1000;
 }
 .mobile-overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 998;
 }
 .mobile-overlay.active {
 display: block;
 }
 /* Hero */
 .hero {
 min-height: 70vh;
 }
 .hero h1 {
 font-size: 2.2rem;
 }
 .hero p {
 font-size: 1rem;
 }
 .hero-cta {
 padding: 12px 28px;
 font-size: 0.9rem;
 }
 /* Posts */
 .posts-grid {
 grid-template-columns: 1fr;
 gap: var(--space-lg);
 }
 .post-card-image {
 height: 200px;
 }
 /* Featured post */
 .featured-post-image {
 min-height: 220px;
 }
 .featured-post-title {
 font-size: 1.5rem;
 }
 .featured-post-meta {
 gap: var(--space-md);
 flex-wrap: wrap;
 }
 /* Newsletter */
 .newsletter {
 padding: var(--space-xl);
 }
 .newsletter h2 {
 font-size: 1.4rem;
 }
 .newsletter-form {
 flex-direction: column;
 }
 .newsletter-form button {
 width: 100%;
 }
 /* Footer */
 .footer-grid {
 grid-template-columns: 1fr;
 gap: var(--space-xl);
 }
 .footer-brand p {
 max-width: 100%;
 }
 .footer-bottom {
 flex-direction: column;
 text-align: center;
 }
 /* About */
 .about-hero {
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 .about-stats {
 grid-template-columns: 1fr;
 gap: var(--space-md);
 }
 .about-content {
 padding: 0 var(--space-lg);
 }
 /* Contact */
 .contact-hero {
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 .contact-grid {
 grid-template-columns: 1fr;
 padding: 0 var(--space-lg) var(--space-2xl);
 }
 /* Advertise */
 .advertise-benefits,
 .ad-options-grid {
 grid-template-columns: 1fr;
 }
 .advertise-form-wrap .contact-form div[style*="grid-template-columns"] {
 grid-template-columns: 1fr !important;
 }
 /* Post page */
 .post-page-header {
 padding-top: calc(var(--nav-height) + var(--space-xl));
 padding-bottom: var(--space-lg);
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 .post-page-title {
 font-size: 1.75rem;
 }
 .post-page-meta {
 gap: var(--space-sm);
 flex-wrap: wrap;
 font-size: 0.8rem;
 }
 .post-page-meta .divider {
 display: none;
 }
 .post-page-meta > * {
 white-space: nowrap;
 }
 .post-page-hero-image {
 border-radius: 0;
 margin-left: 0;
 margin-right: 0;
 margin-bottom: var(--space-xl);
 }
 .post-page-hero-image img {
 height: 240px;
 border-radius: 0;
 }
 /* Article content */
 .article-content {
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 .article-content h2 {
 font-size: 1.35rem;
 }
 .article-content h3 {
 font-size: 1.15rem;
 }
 .article-content p,
 .article-content li {
 font-size: 0.95rem;
 }
 /* Post footer — tags & share */
 .post-footer {
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-md);
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 .share-btns {
 width: 100%;
 }
 .share-btn span {
 display: none;
 }
 .share-btn {
 padding: 0.55rem;
 }
 /* TOC */
 .toc {
 margin-left: var(--space-lg);
 margin-right: var(--space-lg);
 }
 /* Comments */
 .comments-section {
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 .comment-form-row {
 grid-template-columns: 1fr;
 }
 /* Like */
 .like-section {
 padding-left: var(--space-lg);
 padding-right: var(--space-lg);
 }
 /* Related posts on post page */
 .section .posts-grid[style*="repeat(3"] {
 grid-template-columns: 1fr !important;
 }
 /* Search overlay */
 .search-container {
 padding: 0 var(--space-lg);
 }
 .search-hint {
 display: none;
 }
 /* Sections */
 .section {
 padding: var(--space-2xl) 0;
 }
 .section-title {
 font-size: 1.5rem;
 }
 .section-header {
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-sm);
 }
 /* Pagination */
 .pagination {
 gap: var(--space-xs);
 }
 .pagination-btn {
 min-width: 36px;
 height: 36px;
 font-size: 0.82rem;
 padding: 0 var(--space-sm);
 }
 /* Category filter — horizontal scroll */
 .category-filter {
 overflow-x: auto;
 flex-wrap: nowrap;
 padding-bottom: var(--space-sm);
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 }
 .category-filter::-webkit-scrollbar {
 display: none;
 }
 .filter-btn {
 flex-shrink: 0;
 font-size: 0.8rem;
 padding: 7px 16px;
 }
 /* Back to top */
 .back-to-top {
 bottom: 20px;
 right: 20px;
 width: 40px;
 height: 40px;
 }
 /* Category landing page */
 .category-hero {
 padding: 6rem var(--space-lg) 2.5rem;
 }
 .category-hero h1 {
 font-size: 2rem;
 }
 .category-cards {
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-md);
 }
 .category-card {
 padding: var(--space-lg);
 }
}
@media (max-width: 480px) {
 :root {
 --space-xl: 1.25rem;
 --space-2xl: 2rem;
 --space-3xl: 2.5rem;
 --space-4xl: 3.5rem;
 }
 .container {
 padding: 0 var(--space-md);
 }
 .hero {
 min-height: 60vh;
 }
 .hero h1 {
 font-size: 1.8rem;
 }
 .hero-content {
 padding: var(--space-2xl) var(--space-md);
 }
 .hero-badge {
 font-size: 0.72rem;
 padding: var(--space-xs) var(--space-md);
 }
 .post-page-title {
 font-size: 1.5rem;
 }
 .post-page-header {
 padding-left: var(--space-md);
 padding-right: var(--space-md);
 }
 .post-page-hero-image img {
 height: 200px;
 }
 .article-content {
 padding-left: var(--space-md);
 padding-right: var(--space-md);
 }
 .post-footer {
 padding-left: var(--space-md);
 padding-right: var(--space-md);
 }
 .toc {
 margin-left: var(--space-md);
 margin-right: var(--space-md);
 padding: var(--space-md);
 }
 .toc li a {
 font-size: 0.84rem;
 }
 .comments-section {
 padding-left: var(--space-md);
 padding-right: var(--space-md);
 }
 .like-section {
 padding-left: var(--space-md);
 padding-right: var(--space-md);
 flex-wrap: wrap;
 }
 .comment-form {
 padding: var(--space-md);
 }
 .featured-post-title {
 font-size: 1.3rem;
 }
 .featured-post-excerpt {
 font-size: 0.9rem;
 }
 .featured-post-content {
 padding: var(--space-lg);
 }
 .stat-number {
 font-size: 2rem;
 }
 .category-hero {
 padding: 5.5rem var(--space-md) 2rem;
 }
 .category-hero h1 {
 font-size: 1.7rem;
 }
 .category-hero p {
 font-size: 0.92rem;
 }
 .category-cards {
 grid-template-columns: 1fr;
 }
 .newsletter {
 padding: var(--space-lg);
 }
 .newsletter h2 {
 font-size: 1.25rem;
 }
 .footer {
 padding: var(--space-2xl) 0 var(--space-lg);
 }
 .nav-logo-img {
 height: 2.25rem;
 }
 .ad-option-card {
 padding: var(--space-lg);
 }
 .benefit-card {
 padding: var(--space-lg);
 }
}
/* ============================================
 READING PROGRESS BAR
 ============================================ */
.reading-progress {
 position: fixed;
 top: 0;
 left: 0;
 height: 3px;
 width: 0;
 background: var(--accent-gradient);
 z-index: 10001;
 transition: width 0.1s linear;
 pointer-events: none;
}
/* ============================================
 POST NEWSLETTER CTA
 ============================================ */
.post-newsletter {
 max-width: 720px;
 margin-left: auto;
 margin-right: auto;
}
/* ============================================
 TABLE OF CONTENTS
 ============================================ */
.toc {
 max-width: 720px;
 margin: 0 auto var(--space-xl);
 padding: var(--space-lg) var(--space-xl);
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
}
.toc-title {
 font-family: var(--font-sans);
 font-size: 0.85rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--text-secondary);
 margin-bottom: var(--space-md);
}
.toc ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.toc li {
 margin-bottom: 0.4rem;
}
.toc li a {
 color: var(--text-secondary);
 font-size: 0.9rem;
 text-decoration: none;
 transition: color var(--transition-fast);
 display: inline-block;
 padding: 2px 0;
}
.toc li a:hover {
 color: var(--accent-primary);
}
.toc li.toc-sub {
 padding-left: 1.25rem;
}
.toc li.toc-sub a {
 font-size: 0.84rem;
 color: var(--text-muted);
}
/* ============================================
 COMMENTS SECTION
 ============================================ */
.comments-section {
 max-width: 720px;
 margin: var(--space-2xl) auto;
 padding-top: var(--space-xl);
}
.comments-header {
 margin-bottom: var(--space-lg);
}
.comments-header .section-title {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 1.3rem;
}
.comment-alert {
 padding: 0.75rem 1rem;
 border-radius: var(--radius-md);
 font-size: 0.88rem;
 margin-bottom: var(--space-lg);
}
.comment-alert-success {
 background: rgba(34, 197, 94, 0.1);
 border: 1px solid rgba(34, 197, 94, 0.3);
 color: #22c55e;
}
.comment-alert-error {
 background: rgba(239, 68, 68, 0.1);
 border: 1px solid rgba(239, 68, 68, 0.3);
 color: #ef4444;
}
/* Comment Form */
.comment-form {
 background: var(--bg-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: var(--space-lg);
 margin-bottom: var(--space-xl);
}
.comment-form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-sm);
 margin-bottom: var(--space-sm);
}
.comment-form input,
.comment-form textarea {
 width: 100%;
 padding: 12px 16px;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-md);
 color: var(--text-primary);
 font-family: var(--font-sans);
 font-size: 0.9rem;
 outline: none;
 transition: border-color var(--transition-fast);
 box-sizing: border-box;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
 color: var(--text-muted);
}
.comment-form input:focus,
.comment-form textarea:focus {
 border-color: var(--accent-primary);
}
.comment-form textarea {
 margin-bottom: var(--space-sm);
 resize: vertical;
 min-height: 100px;
}
.comment-submit-btn {
 padding: 10px 24px;
 background: var(--accent-gradient);
 color: #fff;
 font-weight: 600;
 font-size: 0.88rem;
 border: none;
 border-radius: var(--radius-full);
 cursor: pointer;
 font-family: var(--font-sans);
 transition: all var(--transition-smooth);
}
.comment-submit-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px var(--accent-glow);
}
.reply-indicator {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 0.75rem;
 background: rgba(124, 92, 252, 0.1);
 border: 1px solid rgba(124, 92, 252, 0.3);
 border-radius: var(--radius-md);
 margin-bottom: var(--space-sm);
 font-size: 0.85rem;
 color: var(--text-secondary);
}
.cancel-reply {
 background: none;
 border: none;
 color: var(--text-muted);
 font-size: 1.2rem;
 cursor: pointer;
 padding: 0 4px;
 margin-left: auto;
}
.cancel-reply:hover {
 color: #ef4444;
}
/* Comments List */
.comments-list {
 display: flex;
 flex-direction: column;
 gap: var(--space-md);
}
.comment {
 display: flex;
 gap: var(--space-md);
}
.comment-avatar {
 width: 36px;
 height: 36px;
 min-width: 36px;
 border-radius: 50%;
 background: var(--accent-gradient);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.7rem;
 font-weight: 700;
 color: #fff;
 margin-top: 2px;
}
.comment-body {
 flex: 1;
 min-width: 0;
}
.comment-meta {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 0.35rem;
}
.comment-author {
 font-size: 0.9rem;
 color: var(--text-primary);
}
.comment-date {
 font-size: 0.78rem;
 color: var(--text-muted);
}
.comment-text {
 font-size: 0.9rem;
 line-height: 1.65;
 color: var(--text-secondary);
 margin-bottom: 0.35rem;
}
.reply-btn {
 background: none;
 border: none;
 color: var(--text-muted);
 font-size: 0.78rem;
 font-weight: 500;
 cursor: pointer;
 padding: 0;
 font-family: var(--font-sans);
 transition: color var(--transition-fast);
}
.reply-btn:hover {
 color: var(--accent-primary);
}
.comment-replies {
 margin-top: var(--space-md);
 padding-left: var(--space-lg);
 border-left: 2px solid var(--border-glass);
 display: flex;
 flex-direction: column;
 gap: var(--space-md);
}
.no-comments {
 text-align: center;
 color: var(--text-muted);
 font-size: 0.9rem;
 padding: var(--space-xl) 0;
}
/* ==================================
 Category Landing Page
 ================================== */
.category-hero {
 padding: 4rem 2rem;
 text-align: center;
 background: radial-gradient(ellipse at 50% 0%, rgba(124,92,252,0.15) 0%, transparent 60%);
}
.category-hero-content {
 max-width: 640px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-md);
}
.category-hero h1 {
 font-family: var(--font-serif);
 font-size: clamp(2rem, 5vw, 3.2rem);
 line-height: 1.2;
 color: var(--text-primary);
}
.category-hero p {
 font-size: 1.05rem;
 color: var(--text-secondary);
 line-height: 1.7;
 max-width: 560px;
}
.category-stats {
 display: flex;
 align-items: center;
 gap: var(--space-sm);
 color: var(--text-muted);
 font-size: 0.85rem;
}
.category-cards {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: var(--space-lg);
}
.category-card {
 background: var(--glass-bg);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: var(--space-xl);
 text-decoration: none;
 display: flex;
 flex-direction: column;
 gap: var(--space-sm);
 transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.category-card:hover {
 transform: translateY(-3px);
 border-color: var(--accent-primary);
}
.category-card p {
 color: var(--text-muted);
 font-size: 0.88rem;
 line-height: 1.5;
}
/* ==================================
 Like Button
 ================================== */
.like-section {
 display: flex;
 align-items: center;
 gap: var(--space-sm);
 padding: var(--space-lg) 0;
}
.like-btn {
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--glass-bg);
 border: 1px solid var(--border-glass);
 border-radius: 50px;
 padding: 10px 20px;
 color: var(--text-muted);
 cursor: pointer;
 font-family: var(--font-sans);
 font-size: 0.95rem;
 font-weight: 500;
 transition: all var(--transition-fast);
}
.like-btn:hover {
 border-color: #ff4d6d;
 color: #ff4d6d;
}
.like-btn.liked {
 color: #ff4d6d;
 border-color: rgba(255,77,109,0.4);
 background: rgba(255,77,109,0.08);
}
.like-btn.like-animate {
 animation: likeScale 0.3s ease;
}
@keyframes likeScale {
 0% { transform: scale(1); }
 50% { transform: scale(1.15); }
 100% { transform: scale(1); }
}
.like-icon {
 flex-shrink: 0;
}
.like-count {
 font-variant-numeric: tabular-nums;
}
.like-label {
 color: var(--text-muted);
 font-size: 0.85rem;
}
/* ==================================
 Post Layout — Sticky Sidebar Ad
 ================================== */
.post-layout {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-xl);
 max-width: 1200px;
 margin: 0 auto;
 padding: 0;
}
@media (min-width: 1024px) {
 .post-layout {
 grid-template-columns: 1fr 300px;
 padding: 0 var(--space-lg);
 }
}
.post-main-content {
 min-width: 0;
}
.post-sidebar-sticky {
 display: none;
}
@media (min-width: 1024px) {
 .post-sidebar-sticky {
 display: block;
 position: sticky;
 top: 100px;
 height: fit-content;
 max-height: calc(100vh - 120px);
 overflow: hidden;
 }
}
.sidebar-ad-label {
 text-align: center;
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--text-muted);
 margin-bottom: var(--space-xs);
}
/* ==================================
 Exit-Intent Newsletter Popup
 ================================== */
.exit-popup-overlay {
 position: fixed;
 inset: 0;
 z-index: 10000;
 background: rgba(0,0,0,0.7);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s, visibility 0.4s;
}
.exit-popup-overlay.active {
 opacity: 1;
 visibility: visible;
}
.exit-popup {
 background: linear-gradient(145deg, #1a1a2e 0%, #12121a 100%);
 border: 1px solid rgba(124, 92, 252, 0.2);
 border-radius: 20px;
 max-width: 420px;
 width: 90%;
 padding: 2.5rem 2rem 2rem;
 position: relative;
 transform: scale(0.9) translateY(20px);
 transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 box-shadow:
 0 0 0 1px rgba(124, 92, 252, 0.08),
 0 24px 64px rgba(0, 0, 0, 0.5),
 0 0 80px rgba(124, 92, 252, 0.06);
 overflow: hidden;
}
.exit-popup::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: var(--accent-gradient);
}
.exit-popup-overlay.active .exit-popup {
 transform: scale(1) translateY(0);
}
.exit-popup-close {
 position: absolute;
 top: 14px;
 right: 14px;
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 50%;
 color: var(--text-muted);
 font-size: 1.1rem;
 cursor: pointer;
 line-height: 1;
 transition: all 0.2s;
}
.exit-popup-close:hover {
 color: #fff;
 background: rgba(255, 255, 255, 0.12);
 border-color: rgba(255, 255, 255, 0.15);
}
.exit-popup-content {
 text-align: center;
}
.exit-popup-icon {
 font-size: 2rem;
 margin-bottom: 0.75rem;
 width: 56px;
 height: 56px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-inline: auto;
 background: rgba(124, 92, 252, 0.1);
 border: 1px solid rgba(124, 92, 252, 0.2);
 border-radius: 16px;
}
.exit-popup-content h3 {
 font-family: var(--font-serif);
 font-size: 1.45rem;
 color: #fff;
 margin-bottom: 0.5rem;
 letter-spacing: -0.01em;
}
.exit-popup-content > p {
 color: var(--text-secondary);
 font-size: 0.88rem;
 line-height: 1.65;
 margin-bottom: 1.5rem;
 max-width: 320px;
 margin-inline: auto;
}
.exit-popup-form {
 display: flex;
 gap: 0.5rem;
 background: rgba(0, 0, 0, 0.3);
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: 14px;
 padding: 6px;
}
.exit-popup-form input[type="email"] {
 flex: 1;
 padding: 12px 14px;
 background: transparent;
 border: none;
 color: var(--text-primary);
 font-size: 0.88rem;
 font-family: var(--font-sans);
 min-width: 0;
}
.exit-popup-form input[type="email"]::placeholder {
 color: var(--text-muted);
}
.exit-popup-form input[type="email"]:focus {
 outline: none;
}
.exit-popup-form button {
 padding: 12px 22px;
 background: var(--accent-gradient);
 color: #fff;
 border: none;
 border-radius: 10px;
 font-weight: 600;
 font-size: 0.88rem;
 cursor: pointer;
 font-family: var(--font-sans);
 white-space: nowrap;
 transition: all 0.2s;
}
.exit-popup-form button:hover {
 opacity: 0.9;
 transform: translateY(-1px);
}
.exit-popup-note {
 color: var(--text-muted);
 font-size: 0.76rem;
 margin-top: 1rem;
}
@media (max-width: 480px) {
 .exit-popup-form {
 flex-direction: column;
 }
 .exit-popup {
 padding: 2rem 1.5rem 1.5rem;
 margin: 0 1rem;
 }
}
/* ===========================
 Floating Social Share Bar
 =========================== */
.floating-share {
 position: fixed;
 left: 2rem;
 top: 50%;
 transform: translateY(-50%);
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 z-index: 90;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s, visibility 0.3s;
}
.floating-share.visible {
 opacity: 1;
 visibility: visible;
}
.floating-share-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: var(--card-bg);
 border: 1px solid var(--border);
 color: var(--text-secondary);
 text-decoration: none;
 transition: all 0.25s;
 cursor: pointer;
}
.floating-share-btn:hover {
 transform: scale(1.15);
 border-color: var(--accent);
 color: #fff;
}
.floating-share-btn.share-whatsapp:hover { background: #25D366; border-color: #25D366; }
.floating-share-btn.share-twitter:hover { background: #1DA1F2; border-color: #1DA1F2; }
.floating-share-btn.share-facebook:hover { background: #1877F2; border-color: #1877F2; }
.floating-share-btn.share-linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.floating-share-btn.share-copy:hover { background: var(--accent); border-color: var(--accent); }
.floating-share-btn.share-copy.copied {
 background: #10b981;
 border-color: #10b981;
 color: #fff;
}
/* ===========================
 Breadcrumb Navigation
 =========================== */
.breadcrumb-nav {
 padding-top: calc(var(--nav-height) + 1.5rem);
 padding-bottom: 1rem;
 border-bottom: 1px solid var(--border-glass);
 background: rgba(10, 10, 15, 0.85);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
}
.breadcrumb {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.25rem;
 list-style: none;
 padding: 0;
 margin: 0;
 font-size: 0.85rem;
}
.breadcrumb li {
 display: flex;
 align-items: center;
 color: var(--text-muted);
}
.breadcrumb li + li::before {
 content: '›';
 margin-right: 0.4rem;
 color: var(--text-muted);
 font-size: 1rem;
}
.breadcrumb a {
 color: var(--text-secondary);
 text-decoration: none;
 transition: color 0.2s;
}
.breadcrumb a:hover {
 color: var(--accent);
}
.breadcrumb li[aria-current="page"] {
 color: var(--text-primary);
 font-weight: 500;
}
/* ===========================
 Trending Posts Grid
 =========================== */
.trending-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-lg);
}
.trending-card {
 display: flex;
 align-items: center;
 gap: var(--space-md);
 padding: var(--space-md);
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 text-decoration: none;
 transition: all 0.3s;
 position: relative;
}
.trending-card:hover {
 border-color: var(--accent);
 transform: translateY(-2px);
 box-shadow: 0 8px 32px rgba(124, 92, 252, 0.1);
}
.trending-rank {
 font-size: 2rem;
 font-weight: 800;
 font-family: var(--font-heading);
 background: var(--accent-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 min-width: 42px;
 text-align: center;
}
.trending-card-img {
 width: 80px;
 height: 80px;
 border-radius: var(--radius-md);
 overflow: hidden;
 flex-shrink: 0;
}
.trending-card-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.trending-card-body h3 {
 font-size: 0.95rem;
 color: var(--text-primary);
 margin-bottom: 0.25rem;
 line-height: 1.4;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.trending-meta {
 display: flex;
 gap: 0.75rem;
 font-size: 0.78rem;
 color: var(--text-muted);
}
/* ===========================
 Responsive — Floating Share
 =========================== */
@media (max-width: 1200px) {
 .floating-share {
 left: 1rem;
 }
}
@media (max-width: 1024px) {
 .floating-share {
 /* Switch to bottom bar on tablets and mobile */
 top: auto;
 bottom: 0;
 left: 0;
 right: 0;
 transform: none;
 flex-direction: row;
 justify-content: center;
 padding: 0.5rem;
 background: var(--card-bg);
 border-top: 1px solid var(--border);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-radius: 0;
 }
 .floating-share-btn {
 width: 40px;
 height: 40px;
 }
 .trending-grid {
 grid-template-columns: 1fr;
 }
}
@media (max-width: 480px) {
 .floating-share-btn {
 width: 36px;
 height: 36px;
 }
 .breadcrumb {
 font-size: 0.78rem;
 }
 .trending-card {
 padding: var(--space-sm);
 }
 .trending-rank {
 font-size: 1.5rem;
 min-width: 32px;
 }
 .trending-card-img {
 width: 60px;
 height: 60px;
 }
}