/* CSS Variables */
 :root {
     --primary: #2563eb;
     --primary-dark: #1d4ed8;
     --secondary: #f59e0b;
     --accent: #10b981;
     --bg-primary: #ffffff;
     --bg-secondary: #f8fafc;
     --bg-tertiary: #f1f5f9;
     --text-primary: #1e293b;
     --text-secondary: #64748b;
     --text-muted: #94a3b8;
     --border: #e2e8f0;
     --border-light: #f1f5f9;
     --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     --radius: 12px;
     --radius-lg: 16px;
     --radius-xl: 24px;
 }

 /* Reset & Base */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     background-color: var(--bg-secondary);
     color: var(--text-primary);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

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

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

 ul,
 ol {
     list-style: none;
 }

 /* Container */
 .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 24px;
 }

 /* Site Wrapper */
 .site-wrapper {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }

 /* ============================================
   Header & Navigation
   ============================================ */
 .site-header {
     position: sticky;
     top: 0;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--border);
     z-index: 1000;
     transition: box-shadow 0.3s ease;
 }

 .site-header.scrolled {
     box-shadow: var(--shadow-md);
 }

 .header-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 70px;
 }

 .site-logo {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--text-primary);
     letter-spacing: -0.5px;
 }

 .site-logo:hover {
     color: var(--primary);
 }

 /* Mobile Menu Toggle */
 .mobile-menu-toggle {
     display: none;
     flex-direction: column;
     gap: 5px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px;
 }

 .menu-bar {
     display: block;
     width: 24px;
     height: 2px;
     background: var(--text-primary);
     transition: all 0.3s ease;
 }

 .mobile-menu-toggle.active .menu-bar:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);
 }

 .mobile-menu-toggle.active .menu-bar:nth-child(2) {
     opacity: 0;
 }

 .mobile-menu-toggle.active .menu-bar:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -5px);
 }

 /* Primary Navigation */
 .primary-nav {
     display: flex;
 }

 .nav-list {
     display: flex;
     gap: 2rem;
 }

 .nav-link {
     font-size: 0.95rem;
     font-weight: 500;
     color: var(--text-secondary);
     padding: 0.5rem 0;
     position: relative;
     transition: color 0.2s ease;
 }

 .nav-link:hover,
 .nav-link.active {
     color: var(--primary);
 }

 .nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--primary);
     transition: width 0.2s ease;
 }

 .nav-link:hover::after,
 .nav-link.active::after {
     width: 100%;
 }

 /* ============================================
   Breadcrumb
   ============================================ */
 .breadcrumb-nav {
     padding: 1.25rem 0;
     margin-bottom: 1.5rem;
 }

 .breadcrumb-list {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     font-size: 0.875rem;
 }

 .breadcrumb-item {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .breadcrumb-item:not(:last-child)::after {
     content: '/';
     color: var(--text-muted);
 }

 .breadcrumb-link {
     color: var(--text-secondary);
     transition: color 0.2s ease;
 }

 .breadcrumb-link:hover {
     color: var(--primary);
 }

 .breadcrumb-item.active {
     color: var(--text-primary);
     font-weight: 500;
 }

 /* ============================================
   Layout
   ============================================ */
 .content-layout {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 2.5rem;
     margin-bottom: 3rem;
 }

 .primary-content {
     min-width: 0;
 }

 /* ============================================
   Section Headers
   ============================================ */
 .section-header {
     margin-bottom: 1.5rem;
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .section-title {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--text-primary);
 }

 .section-accent {
     flex: 1;
     height: 2px;
     background: linear-gradient(to right, var(--primary), transparent);
     border-radius: 1px;
 }

 .page-title {
     font-size: 2rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 1.5rem;
 }

 /* ============================================
   Cards
   ============================================ */
 .article-card {
     background: var(--bg-primary);
     border-radius: var(--radius-lg);
     overflow: hidden;
     border: 1px solid var(--border);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .article-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .card-media {
     position: relative;
     overflow: hidden;
 }

 .card-media img {
     width: 100%;
     aspect-ratio: 4/3;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .article-card:hover .card-media img {
     transform: scale(1.05);
 }

 .card-body {
     padding: 1.25rem;
 }

 .card-badge {
     display: inline-block;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--primary);
     background: rgba(37, 99, 235, 0.1);
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
     margin-bottom: 0.75rem;
 }

 .card-headline {
     font-size: 1.125rem;
     font-weight: 600;
     line-height: 1.4;
     margin-bottom: 0.5rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .card-headline a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .card-headline a:hover {
     color: var(--primary);
 }

 .card-summary {
     font-size: 0.9rem;
     color: var(--text-secondary);
     line-height: 1.6;
     margin-bottom: 1rem;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .card-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 0.75rem;
     border-top: 1px solid var(--border-light);
 }

 .card-date {
     font-size: 0.8rem;
     color: var(--text-muted);
 }

 /* ============================================
   Articles Grid
   ============================================ */
 .articles-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
     margin-bottom: 2rem;
 }

 /* ============================================
   Homepage - Featured Section
   ============================================ */
 .featured-section {
     margin-bottom: 3rem;
 }

 .featured-grid {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: repeat(2, 1fr);
     gap: 1.5rem;
 }

 .featured-card {
     background: var(--bg-primary);
     border-radius: var(--radius-lg);
     overflow: hidden;
     border: 1px solid var(--border);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .featured-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .featured-large {
     grid-row: span 2;
     display: flex;
     flex-direction: column;
 }

 .featured-large .featured-media {
     flex: 1;
     min-height: 300px;
 }

 .featured-large .featured-media img {
     height: 100%;
     width: 100%;
     object-fit: cover;
 }

 .featured-small {
     display: flex;
     /* flex-direction: column; */
 }

 .featured-small .featured-media {
     flex: 0 0 20%;
     aspect-ratio: 4 / 3;
 }

 .featured-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .featured-card:hover .featured-media img {
     transform: scale(1.05);
 }

 .featured-content {
     padding: 1.25rem;
 }

 .featured-badge {
     display: inline-block;
     font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--primary);
     background: rgba(37, 99, 235, 0.1);
     padding: 0.2rem 0.6rem;
     border-radius: 20px;
     margin-bottom: 0.5rem;
 }

 .featured-headline {
     font-size: 1.25rem;
     font-weight: 600;
     line-height: 1.35;
     margin-bottom: 0.5rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .featured-headline a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .featured-headline a:hover {
     color: var(--primary);
 }

 .featured-large .featured-headline {
     font-size: 1.5rem;
 }

 .featured-summary {
     font-size: 0.9rem;
     color: var(--text-secondary);
     line-height: 1.6;
     margin-bottom: 0.75rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .featured-date {
     font-size: 0.8rem;
     color: var(--text-muted);
 }

 /* ============================================
   Homepage - Latest Section
   ============================================ */
 .latest-section {
     margin-bottom: 3rem;
 }

 .latest-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
 }

 .latest-card {
     background: var(--bg-primary);
     border-radius: var(--radius-lg);
     overflow: hidden;
     border: 1px solid var(--border);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .latest-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .latest-media {
     aspect-ratio: 4 / 3;
     overflow: hidden;
 }

 .latest-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .latest-card:hover .latest-media img {
     transform: scale(1.05);
 }

 .latest-content {
     padding: 1.25rem;
 }

 .latest-badge {
     display: inline-block;
     font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--secondary);
     background: rgba(245, 158, 11, 0.1);
     padding: 0.2rem 0.6rem;
     border-radius: 20px;
     margin-bottom: 0.5rem;
 }

 .latest-headline {
     font-size: 1rem;
     font-weight: 600;
     line-height: 1.4;
     margin-bottom: 0.5rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .latest-headline a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .latest-headline a:hover {
     color: var(--primary);
 }

 .latest-summary {
     font-size: 0.875rem;
     color: var(--text-secondary);
     line-height: 1.5;
     margin-bottom: 0.75rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .latest-date {
     font-size: 0.8rem;
     color: var(--text-muted);
 }

 /* ============================================
   Article Detail Page
   ============================================ */
 .article-page {
     padding: 1rem 0 3rem;
 }

 .article-header {
     margin-bottom: 2rem;
 }

 .article-title {
     font-size: 2.25rem;
     font-weight: 700;
     line-height: 1.3;
     color: var(--text-primary);
     margin-bottom: 1rem;
 }

 .article-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     align-items: center;
     padding-bottom: 1.5rem;
     border-bottom: 1px solid var(--border);
 }

 .meta-author {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--text-secondary);
     font-weight: 500;
 }

 .author-thumb {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     object-fit: cover;
 }

 .meta-date,
 .meta-updated,
 .meta-views {
     display: flex;
     align-items: center;
     gap: 0.35rem;
     font-size: 0.875rem;
     color: var(--text-secondary);
 }

 .meta-date i,
 .meta-updated i,
 .meta-views i {
     font-size: 0.9rem;
     color: var(--text-muted);
 }

 .article-body {
     font-size: 0.985rem;
     letter-spacing: 0.2px;
     color: #171717;
     line-height: 1.75;
 }

 .article-body p {
     margin-bottom: 1.5rem;
 }

 .article-body h2,
 .article-body h3,
 .article-body h4 {
     margin: 2rem 0 1rem;
     color: var(--text-primary);
 }

 .article-body h2 {
     font-size: 1.5rem;
 }

 .article-body h3 {
     font-size: 1.25rem;
 }

 .article-body img {
     border-radius: var(--radius);
     margin: 1.5rem auto;
 }

 .article-body a {
     color: var(--primary);
     text-decoration: underline;
 }

 .article-body ul,
 .article-body ol {
     margin: 1rem 0 1.5rem 1.5rem;
 }

 .article-body ul {
     list-style: disc;
 }

 .article-body ol {
     list-style: decimal;
 }

 .article-body li {
     margin-bottom: 0.5rem;
 }

 /* Author Box */
 .author-box {
     display: flex;
     gap: 1.25rem;
     align-items: center;
     background: var(--bg-tertiary);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     margin: 2.5rem 0;
 }

 .author-box-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
 }

 .author-box-name {
     font-size: 1.125rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
 }

 .author-box-name a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .author-box-name a:hover {
     color: var(--primary);
 }

 .author-box-desc {
     font-size: 0.9rem;
     color: var(--text-secondary);
     line-height: 1.6;
 }

 /* Share Section */
 .share-section {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin: 2rem 0;
     padding: 1.5rem 0;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }

 .share-label {
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--text-secondary);
 }

 .share-buttons {
     display: flex;
     gap: 0.75rem;
 }

 .share-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s ease, opacity 0.2s ease;
 }

 .share-btn:hover {
     transform: translateY(-2px);
     opacity: 0.9;
 }

 .share-btn i {
     font-size: 1.1rem;
     color: white;
 }

 .share-btn.twitter {
     background: #1da1f2;
 }

 .share-btn.facebook {
     background: #4267b2;
 }

 .share-btn.linkedin {
     background: #0077b5;
 }

 .share-btn.pinterest {
     background: #bd081c;
 }

 /* Related Articles */
 .related-section {
     margin-top: 3rem;
 }

 .related-heading {
     font-size: 1.25rem;
     font-weight: 600;
     margin-bottom: 1.25rem;
     padding-bottom: 0.75rem;
     border-bottom: 2px solid var(--border);
 }

 .related-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
 }

 .related-card {
     background: var(--bg-primary);
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid var(--border);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .related-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
 }

 .related-media {
     aspect-ratio: 4 / 3;
     overflow: hidden;
 }

 .related-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .related-card:hover .related-media img {
     transform: scale(1.05);
 }

 .related-content {
     padding: 1rem;
 }

 .related-title {
     font-size: 0.95rem;
     font-weight: 600;
     line-height: 1.4;
     margin-bottom: 0.5rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .related-title a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .related-title a:hover {
     color: var(--primary);
 }

 .related-date {
     font-size: 0.8rem;
     color: var(--text-muted);
 }

 /* ============================================
   Author Page
   ============================================ */
 .author-profile-section {
     text-align: center;
     padding: 3rem 0;
 }

 .author-profile-avatar {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     object-fit: cover;
     margin:0 auto 1.5rem;
     border: 4px solid var(--bg-primary);
     box-shadow: var(--shadow-lg);
 }

 .author-profile-name {
     font-size: 2rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 0.75rem;
 }

 .author-profile-bio {
     font-size: 1rem;
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
 }

 .author-content-body {
     font-size: 0.985rem;
     line-height: 1.75;
     color: var(--text-primary);
 }

 .author-content-body p {
     margin-bottom: 1.5rem;
 }

 .author-articles-section {
     margin-top: 3rem;
 }

 .section-heading {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
     padding-bottom: 0.75rem;
     border-bottom: 2px solid var(--border);
 }

 .author-articles-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
     margin-bottom: 25px;
 }

 .author-article-card {
     background: var(--bg-primary);
     border-radius: var(--radius);
     padding: 1.25rem;
     border: 1px solid var(--border);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .author-article-card:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }

 .author-article-title {
     font-size: 1rem;
     font-weight: 600;
     line-height: 1.4;
     margin-bottom: 0.5rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .author-article-title a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .author-article-title a:hover {
     color: var(--primary);
 }

 .author-article-date {
     font-size: 0.8rem;
     color: var(--text-muted);
 }

 /* ============================================
   More Articles Page - Timeline
   ============================================ */
 .timeline-list {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }

 .timeline-item {
     display: grid;
     grid-template-columns: 280px 1fr;
     gap: 1.5rem;
     background: var(--bg-primary);
     border-radius: var(--radius-lg);
     overflow: hidden;
     border: 1px solid var(--border);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .timeline-item:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .timeline-media {
     height: 100%;
     min-height: 200px;
 }

 .timeline-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .timeline-item:hover .timeline-media img {
     transform: scale(1.05);
 }

 .timeline-content {
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
 }

 .timeline-badge {
     display: inline-block;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--accent);
     background: rgba(16, 185, 129, 0.1);
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
     margin-bottom: 0.75rem;
     align-self: flex-start;
 }

 .timeline-headline {
     font-size: 1.25rem;
     font-weight: 600;
     line-height: 1.4;
     margin-bottom: 0.75rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .timeline-headline a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .timeline-headline a:hover {
     color: var(--primary);
 }

 .timeline-summary {
     font-size: 0.9rem;
     color: var(--text-secondary);
     line-height: 1.6;
     margin-bottom: 1rem;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .timeline-date {
     font-size: 0.85rem;
     color: var(--text-muted);
     margin-top: auto;
 }

 /* ============================================
   Sidebar Widgets
   ============================================ */
 .sidebar {
     min-width: 0;
 }

 .widget {
     background: var(--bg-primary);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     border: 1px solid var(--border);
 }

 .widget-heading {
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 1.25rem;
     padding-bottom: 0.75rem;
     border-bottom: 2px solid var(--primary);
     display: inline-block;
 }

 /* Author Widget */
 .author-widget {
     text-align: center;
 }

 .author-profile {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .author-avatar {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 1rem;
     border: 3px solid var(--bg-secondary);
 }

 .author-title {
     font-size: 1.125rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
 }

 .author-title a {
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .author-title a:hover {
     color: var(--primary);
 }

 .author-desc {
     font-size: 0.875rem;
     color: var(--text-secondary);
     line-height: 1.5;
 }

 /* Recommended Widget */
 .recommended-item {
     display: flex;
     gap: 1rem;
     padding: 0.75rem 0;
     border-bottom: 1px solid var(--border-light);
 }

 .recommended-item:last-child {
     border-bottom: none;
 }

 .recommended-thumb {
     width: 70px;
     height: 70px;
     border-radius: var(--radius);
     object-fit: cover;
     flex-shrink: 0;
 }

 .recommended-info {
     flex: 1;
     min-width: 0;
 }

 .recommended-title {
     font-size: 0.9rem;
     font-weight: 500;
     line-height: 1.4;
     color: var(--text-primary);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     transition: color 0.2s ease;
 }

 .recommended-title:hover {
     color: var(--primary);
 }

 /* Updates Widget */
 .updates-item {
     padding: 0.75rem 0;
     border-bottom: 1px solid var(--border-light);
 }

 .updates-item:last-child {
     border-bottom: none;
 }

 .updates-link {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
 }

 .updates-title {
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--text-primary);
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     transition: color 0.2s ease;
 }

 .updates-title:hover {
     color: var(--primary);
 }

 .updates-date {
     font-size: 0.8rem;
     color: var(--text-muted);
 }

 /* Categories Widget */
 .categories-item {
     padding: 0.6rem 0;
     border-bottom: 1px solid var(--border-light);
 }

 .categories-item:last-child {
     border-bottom: none;
 }

 .categories-link {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.95rem;
     font-weight: 500;
     color: var(--text-primary);
     transition: color 0.2s ease;
 }

 .categories-link:hover {
     color: var(--primary);
 }

 .categories-link::after {
     content: '→';
     font-size: 0.8rem;
     color: var(--text-muted);
     transition: transform 0.2s ease, color 0.2s ease;
 }

 .categories-link:hover::after {
     transform: translateX(4px);
     color: var(--primary);
 }

 /* ============================================
   Pagination
   ============================================ */
 .pagination-nav {
     margin-top: 2rem;
 }

 .pagination-list {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 0.5rem;
     flex-wrap: wrap;
 }

 .pagination-item {
     list-style: none;
 }

 .pagination-link {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 40px;
     height: 40px;
     padding: 0 0.75rem;
     background: var(--bg-primary);
     border: 1px solid var(--border);
     border-radius: 8px;
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--text-primary);
     transition: all 0.2s ease;
 }

 .pagination-link:hover:not(.active) {
     background: var(--bg-tertiary);
     border-color: var(--primary);
     color: var(--primary);
 }

 .pagination-link.active {
     background: var(--primary);
     border-color: var(--primary);
     color: white;
 }

 .pagination-item.disabled .pagination-link {
     opacity: 0.5;
     cursor: not-allowed;
 }

 .pagination-link.prev,
 .pagination-link.next {
     gap: 0.35rem;
 }

 .pagination-link.dots {
     border: none;
     background: transparent;
     cursor: default;
 }

 /* ============================================
   Footer
   ============================================ */
 .site-footer {
     background: var(--bg-primary);
     border-top: 1px solid var(--border);
     padding: 2rem 0;
     margin-top: auto;
 }

 .footer-content {
     text-align: center;
 }

 .footer-nav {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 1.5rem;
 }

 .footer-link {
     font-size: 0.9rem;
     color: var(--text-secondary);
     transition: color 0.2s ease;
 }

 .footer-link:hover {
     color: var(--primary);
 }

 /* ============================================
   Back to Top Button
   ============================================ */
 .back-to-top {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     width: 48px;
     height: 48px;
     background: var(--primary);
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 999;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-md);
 }

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

 .back-to-top:hover {
     background: var(--primary-dark);
     transform: translateY(-3px);
     box-shadow: var(--shadow-lg);
 }

 .back-to-top i {
     font-size: 1.25rem;
 }

 /* ============================================
   Ad Containers
   ============================================ */
 .ad-container {
     margin: 1.5rem 0;
     text-align: center;
 }

 .ad-container.full-width {
     grid-column: 1 / -1;
 }

 /* ============================================
   Responsive Design
   ============================================ */
 @media (max-width: 1024px) {
     .content-layout {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .sidebar {
         order: 2;
     }

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

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

 @media (max-width: 768px) {
     .container {
         padding: 0 16px;
     }

     .site-header {
         position: relative;
     }

     .header-container {
         height: 55px;
     }

     .site-logo {
         font-size: 1.25rem;
     }

     .mobile-menu-toggle {
         display: flex;
     }

     .primary-nav {
         position: fixed;
         top: 55px;
         left: -100%;
         width: 80%;
         max-width: 300px;
         height: calc(100vh - 55px);
         background: var(--bg-primary);
         box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
         transition: left 0.3s ease;
         z-index: 999;
         padding: 1.5rem;
     }

     .primary-nav.active {
         left: 0;
     }

     .nav-list {
         flex-direction: column;
         gap: 0.5rem;
     }

     .nav-link {
         padding: 0.75rem 0;
         font-size: 1.1rem;
     }

     .page-title {
         font-size: 1.5rem;
     }

     .article-title {
         font-size: 1.4rem;
     }

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

     .featured-large {
         grid-row: span 1;
     }

     .featured-large .featured-media {
         min-height: 200px;
     }

     .articles-grid,
     .latest-grid {
         grid-template-columns: 1fr;
     }

     .related-grid {
         grid-template-columns: 1fr;
     }

     .author-articles-grid {
         grid-template-columns: 1fr;
     }

     .timeline-item {
         grid-template-columns: 1fr;
     }

     .timeline-media {
         min-height: 180px;
     }

     .author-box {
         flex-direction: column;
         text-align: center;
     }

     .share-section {
         flex-direction: column;
         align-items: flex-start;
     }

     .back-to-top {
         width: 44px;
         height: 44px;
         bottom: 1rem;
         right: 1rem;
     }
 }

 @media (max-width: 480px) {
     .section-title {
         font-size: 1.25rem;
     }

     .card-headline,
     .featured-headline {
         font-size: 1rem;
     }

     .widget {
         padding: 1rem;
     }

     .pagination-link {
         min-width: 36px;
         height: 36px;
         font-size: 0.85rem;
     }
 }