@font-face {
     font-family: "iranyekanwebmedium";
     src: url('../fonts/iranyekanwebmedium.woff');
 }

 @font-face {
     font-family: "iranyekanwebbold";
     src: url('../fonts/iranyekanwebbold.woff2');
 }

 /* ========== تعریف متغیرهای تم ========== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: "iranyekanwebmedium";
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* تم لایت (پیش‌فرض) */
 body.light {
     --bg-gradient-start: #f9fafb;
     --bg-gradient-end: #f0f2f5;
     --bg-header: rgba(255, 255, 255, 0.7);
     --border-header: rgba(255, 255, 255, 0.2);
     --text-primary: #1e293b;
     --text-secondary: #475569;
     --text-muted: #64748b;
     --card-bg: rgba(255, 255, 255, 0.5);
     --card-border: rgba(255, 255, 255, 0.3);
     --icon-bg: rgba(30, 111, 92, 0.1);
     --border-light: #e2e8f0;
     --btn-secondary-bg: #e2e8f0;
     --btn-secondary-hover: #cbd5e1;
     --btn-secondary-text: #1e293b;
     --nav-link-color: #475569;
     --nav-link-hover: #1e293b;
     --accent: #1E6F5C;
     --accent-dark: #0f5a49;
     --accent-light: rgba(30, 111, 92, 0.1);
     --accent-gradient: linear-gradient(135deg, #0f5a49 0%, #1E6F5C 50%, #289672 100%);
     --bg-primary: #ffffff;
     --bg-secondary: #f8fafc;
 }

 /* تم دارک */
 body.dark {
     --bg-gradient-start: #0f172a;
     --bg-gradient-end: #020617;
     --bg-header: rgba(15, 23, 42, 0.7);
     --border-header: rgba(255, 255, 255, 0.05);
     --text-primary: #f1f5f9;
     --text-secondary: #cbd5e1;
     --text-muted: #94a3b8;
     --card-bg: rgba(255, 255, 255, 0.03);
     --card-border: rgba(255, 255, 255, 0.05);
     --icon-bg: rgba(40, 150, 114, 0.15);
     --border-light: #1e293b;
     --btn-secondary-bg: #334155;
     --btn-secondary-hover: #475569;
     --btn-secondary-text: #f1f5f9;
     --nav-link-color: #cbd5e1;
     --nav-link-hover: #ffffff;
     --accent: #289672;
     --accent-dark: #1E6F5C;
     --accent-light: rgba(40, 150, 114, 0.15);
     --accent-gradient: linear-gradient(135deg, #0f5a49 0%, #1E6F5C 50%, #289672 100%);
     --bg-primary: #0f172a;
     --bg-secondary: #111827;
 }

 body {
     background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
     color: var(--text-primary);
     min-height: 100vh;
 }

 /* ========== انیمیشن‌ها ========== */
 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fadeIn-down {
     animation: fadeInDown 0.6s ease-out;
 }

 /* ========== هدر ========== */

 /* ========== صفحه وبلاگ ========== */
 .blog-hero {
     max-width: 1280px;
     width: 90%;
     margin: 0 auto 60px;
     text-align: center;
     padding: 40px 0 20px;
     margin-top: 115px;
 }

 .blog-hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--accent-light);
     padding: 6px 18px;
     border-radius: 40px;
     font-size: 13px;
     font-weight: 600;
     color: var(--accent);
     margin-bottom: 20px;
 }

 .blog-hero h1 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 15px;
     color: var(--text-primary);
 }

 .blog-hero h1 span {
     color: var(--accent);
 }

 .blog-hero p {
     font-size: 16px;
     color: var(--text-muted);
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.8;
 }

 /* جستجو و دسته‌بندی */
 .blog-search-section {
     max-width: 1280px;
     width: 90%;
     margin: 0 auto 50px;
 }

 .search-container {
     display: flex;
     justify-content: center;
     margin-bottom: 40px;
 }

 .search-box {
     display: flex;
     align-items: center;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 60px;
     padding: 5px 20px;
     width: 100%;
     max-width: 500px;
     backdrop-filter: blur(12px);
     transition: all 0.3s;
 }

 .search-box:hover,
 .search-box:focus-within {
     border-color: var(--accent);
 }

 .search-box i {
     color: var(--accent);
     font-size: 18px;
 }

 .search-box input {
     flex: 1;
     background: transparent;
     border: none;
     padding: 15px 15px;
     font-size: 14px;
     color: var(--text-primary);
     outline: none;
     font-family: inherit;
 }

 .search-box input::placeholder {
     color: var(--text-muted);
 }

 .categories {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 12px;
 }

 .category-btn {
     padding: 8px 24px;
     border-radius: 40px;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     color: var(--text-secondary);
     font-family: "iranyekanwebmedium";
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s;
 }

 .category-btn:hover,
 .category-btn.active {
     background: var(--accent);
     color: white;
     border-color: transparent;
 }

 /* گرید بلاگ‌ها */
 .blog-grid {
     max-width: 1280px;
     width: 90%;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
     gap: 35px;
     padding: 30px 0 60px;
 }

 .blog-card {
     background: var(--card-bg);
     backdrop-filter: blur(12px);
     border: 1px solid var(--card-border);
     border-radius: 32px;
     overflow: hidden;
     transition: all 0.4s ease;
     opacity: 0;
     animation: fadeInUp 0.6s ease-out forwards;
 }

 .blog-card:hover {
     transform: translateY(-8px);
     border-color: var(--accent);
     box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
 }

 .blog-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .blog-card:nth-child(2) {
     animation-delay: 0.15s;
 }

 .blog-card:nth-child(3) {
     animation-delay: 0.2s;
 }

 .blog-card:nth-child(4) {
     animation-delay: 0.25s;
 }

 .blog-card:nth-child(5) {
     animation-delay: 0.3s;
 }

 .blog-card:nth-child(6) {
     animation-delay: 0.35s;
 }

 .blog-image {
     height: 220px;
     background: var(--accent-gradient);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 .blog-image i {
     font-size: 70px;
     color: rgba(255, 255, 255, 0.9);
 }

 .blog-category {
     position: absolute;
     top: 15px;
     right: 15px;
     background: var(--accent);
     color: white;
     padding: 5px 14px;
     border-radius: 30px;
     font-size: 11px;
     font-weight: 600;
 }

 .blog-content {
     padding: 25px;
 }

 .blog-meta {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 12px;
     font-size: 12px;
     color: var(--text-muted);
 }

 .blog-meta i {
     color: var(--accent);
     margin-left: 5px;
 }

 .blog-title {
     font-size: 20px;
     font-weight: 800;
     margin-bottom: 12px;
     line-height: 1.4;
 }

 .blog-title a {
     text-decoration: none;
     color: var(--text-primary);
     transition: color 0.3s;
 }

 .blog-title a:hover {
     color: var(--accent);
 }

 .blog-excerpt {
     color: var(--text-muted);
     line-height: 1.7;
     font-size: 14px;
     margin-bottom: 20px;
 }

 .blog-readmore {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--accent);
     text-decoration: none;
     font-weight: 600;
     font-size: 13px;
     transition: gap 0.3s;
 }

 .blog-readmore:hover {
     gap: 12px;
 }

 /* سایدبار */
 .blog-sidebar {
     max-width: 1280px;
     width: 90%;
     margin: 0 auto 60px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .sidebar-widget {
     background: var(--card-bg);
     backdrop-filter: blur(12px);
     border: 1px solid var(--card-border);
     border-radius: 28px;
     padding: 25px;
 }

 .widget-title {
     font-size: 18px;
     font-weight: 800;
     margin-bottom: 20px;
     padding-bottom: 12px;
     border-bottom: 2px solid var(--accent);
     display: inline-block;
 }

 .popular-posts {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .popular-post {
     display: flex;
     align-items: center;
     gap: 15px;
     text-decoration: none;
     transition: all 0.3s;
 }

 .popular-post:hover {
     transform: translateX(-5px);
 }

 .popular-post-icon {
     width: 50px;
     height: 50px;
     background: var(--accent-light);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .popular-post-icon i {
     font-size: 24px;
     color: var(--accent);
 }

 .popular-post-info h4 {
     font-size: 14px;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 5px;
 }

 .popular-post-info span {
     font-size: 11px;
     color: var(--text-muted);
 }

 .tags-cloud {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .tag {
     padding: 6px 16px;
     background: var(--accent-light);
     border-radius: 30px;
     color: var(--accent);
     text-decoration: none;
     font-size: 12px;
     font-weight: 500;
     transition: all 0.3s;
 }

 .tag:hover {
     background: var(--accent);
     color: white;
 }

 /* پیجینیشن */
 .pagination {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin: 40px 0 80px;
 }

 .page-link {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 12px;
     color: var(--text-secondary);
     text-decoration: none;
     transition: all 0.3s;
 }

 .page-link:hover,
 .page-link.active {
     background: var(--accent);
     color: white;
     border-color: transparent;
 }

 /* فوتر */
 .footer {
     margin-top: 60px;
     background: var(--card-bg);
     backdrop-filter: blur(12px);
     border-top: 1px solid var(--card-border);
     padding: 50px 0 30px;
 }

 .footer-container {
     max-width: 1280px;
     width: 90%;
     margin: 0 auto;
     text-align: center;
 }

 .footer-logo {
     font-size: 24px;
     font-weight: 800;
     margin-bottom: 15px;
 }

 .footer-logo span {
     color: var(--accent);
 }

 .footer-bio {
     font-size: 13px;
     color: var(--text-muted);
     margin-bottom: 20px;
 }

 .social-icons {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 25px;
 }

 .social-icon {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--bg-primary);
     border: 1px solid var(--border-light);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     text-decoration: none;
     transition: all 0.3s;
 }

 .social-icon:hover {
     border-color: var(--accent);
     color: var(--accent);
     transform: translateY(-3px);
 }

 /* ریسپانسیو */
 @media (max-width: 1024px) {

     .desktop-menu,
     .desktop-actions {
         display: none;
     }

     .hamburger-menu {
         display: flex;
     }

     .header {
         padding: 0 20px;
         height: 65px;
     }

     .blog-hero h1 {
         font-size: 28px;
     }

     .blog-grid {
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 25px;
     }
 }

 @media (max-width: 768px) {
     .blog-grid {
         grid-template-columns: 1fr;
     }

     .blog-hero {
         padding: 20px 0;
     }

     .header-spacer {
         height: 85px;
     }
 }