/* Generated by script */
@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


 :root {
    
     --primary-color: #3498db;
     --primary-dark: #2980b9;
     --primary-light: #e0f0ff;
    
     --text-color: #333;
     --text-light: #666;
     --text-lighter: #888;
     --text-on-dark: #f8f8f2;
    
     --bg-color: #f8f8ff;
     --bg-light: #fff;
     --bg-lighter: #f9f9f9;
     --bg-dark: #44475a;
    
     --border-color: #ddd;
     --border-light: #eee;
     --border-dark: #ccc;
    
     --success-color: #4caf50;
     --success-dark: #3e8c41;
     --info-color: #2196f3;
     --warning-color: #ff9800;
     --danger-color: #e74c3c;
    
     --code-bg: #010101;
     --code-text: #ffffff;
     --highlight-color: #6272a4;
    
     --shadow-color: rgba(0, 0, 0, 0.05);
     --shadow-dark: rgba(0, 0, 0, 0.1)
}
.farsi-digits {
  font-feature-settings: "ss01";
}

 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0
}
 html {
     scroll-behavior: smooth
}
 body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
     background-color: var(--bg-color);
     color: var(--text-color);
     line-height: 1.6;
     direction: rtl
}
 img {
     max-width: 100%;
     height: auto;
     display: block
}
 a {
     text-decoration: none;
     color: var(--primary-color);
     transition: color 0.3s ease
}
 a:hover {
     color: var(--primary-dark)
}
 ul, ol {
     list-style: none;
     padding: 0;
     margin: 0 0 15px 0
}
 ul li, ol li {
     margin-bottom: 5px
}

 .site-wrapper {
     flex: 1;
     display: flex;
     flex-direction: column
}
 .container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px
}
 .main-wrapper {
     display: flex;
     gap: 20px;
     margin-bottom: 20px
}
 .main-content {
     flex: 1
}
 .sidebar {
     width: calc(33.333% - 10px);
     flex-shrink: 0
}
 @media (max-width: 992px) {
     .sidebar {
         width: calc(50% - 10px)
    }
}
 @media (max-width: 768px) {
     .main-wrapper {
         flex-direction: column
    }
     .sidebar {
         width: 100%
    }
}

 .site-header {
     background: var(--bg-light);
     border-bottom: 1px solid var(--border-color);
     padding: 20px 0;
     margin-bottom: 20px
}
 .header-container {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 55px
}
 .logo {
     position: absolute;
     right: 15px;
     top: 0;
     height: 100%;
     display: flex;
     align-items: center
}
 .logo img {
     height: auto;
     width: 200px;
     padding-right: 15px
}
 @media (max-width: 768px) {
     .logo img {
         height: auto;
         width: 150px;
         padding-right: 15px
    }
}


 .main-menu ul {
     list-style: none;
     display: flex;
     gap: 15px;
     margin: 0;
     padding: 0;
     height: 50px
}
 .main-menu a {
     display: flex;
     align-items: center;
     height: 100%;
     text-decoration: none;
     color: var(--text-color);
     font-weight: 700;
     padding: 0 10px;
     transition: color 0.3s ease
}
 .main-menu a:hover {
     color: var(--primary-color)
}

 .card-posts.full-width {
     display: grid;
     gap: 20px;
     grid-template-columns: repeat(3, 1fr)
}
 .card-posts.with-sidebar {
     display: grid;
     gap: 20px;
     grid-template-columns: repeat(2, 1fr)
}
 @media (max-width: 992px) {
     .card-posts.full-width {
         grid-template-columns: repeat(2, 1fr)
    }
     .card-posts.with-sidebar {
         grid-template-columns: 1fr
    }
}
 @media (max-width: 576px) {
     .card-posts.full-width, .card-posts.with-sidebar {
         grid-template-columns: 1fr
    }
}
 .card {
     background: var(--bg-light);
     border: 1px solid var(--border-color);
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px
}
 .card .thumbnail {
     position: relative;
     overflow: hidden;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
     background: #f5f5f5
}
 .card .thumbnail img {
     width: 100%;
     height: 200px;
     object-fit: cover;
     transition: transform 0.5s ease;
     display: block
}
 .card .thumbnail::after {
     content: "";
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: linear-gradient( 120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60% );
     transform: skewX(-25deg);
     transition: all 0.5s ease
}
 .card:hover .thumbnail img {
     transform: scale(1.05)
}
 .card:hover .thumbnail::after {
     left: 130%
}
 .card .content {
     padding: 15px
}

 .list-posts article {
     border-bottom: 1px solid var(--border-color);
     padding: 15px 0
}
 .list-item.image-right {
     display: flex;
     gap: 20px;
     align-items: center;
     margin-bottom: 20px;
     padding: 15px;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     background: var(--bg-light)
}
 .list-item .thumbnail {
     position: relative;
     flex: 0 0 40%;
     max-width: 40%;
     height: 180px;
     overflow: hidden;
     border-radius: 6px;
     background: #f5f5f5;
     padding: 0;
     margin: 0
}
 .list-item .thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease
}
 .list-item .thumbnail::after {
     content: "";
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: linear-gradient( 120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60% );
     transform: skewX(-25deg);
     transition: all 0.5s ease
}
 .list-item:hover .thumbnail img {
     transform: scale(1.05)
}
 .list-item:hover .thumbnail::after {
     left: 130%
}
 .list-item .content {
     flex: 1;
     text-align:right
}
 @media (max-width: 992px) {
     .list-item.image-right {
         flex-direction: column;
         align-items: stretch
    }
     .list-item .thumbnail {
         width: 100%;
         max-width: 100%;
         height: 200px;
         margin-bottom: 15px;
         border-radius: 6px
    }
     .list-item .thumbnail img {
         width: 100%;
         height: 200px;
         object-fit: cover
    }
     .list-item .content {
         width: 100%
    }
}

 .clean-pagination {
     margin: 2rem 0;
     text-align: center;
     direction: rtl
}
 .clean-pagination .page-numbers {
     display: inline-flex;
     flex-wrap: wrap;
     gap: 6px;
     justify-content: center;
     padding: 0;
     list-style: none
}
 .clean-pagination .page-numbers a, .clean-pagination .page-numbers span {
     width: 40px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     border-radius: 50%;
     font-size: 14px;
     color: var(--text-color);
     background-color: #f5f5f5;
     text-decoration: none;
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     box-shadow: 0 2px 4px var(--shadow-color)
}
 .clean-pagination .page-numbers a:hover {
     transform: translateY(-4px);
     background-color: var(--primary-light);
     color: var(--primary-color);
     border-color: var(--primary-color)
}
 .clean-pagination .page-numbers .current {
     background-color: var(--primary-color);
     color: #fff;
     font-weight: 700;
     border-radius: 50%;
     transform: scale(1.1);
     box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3)
}
 .clean-pagination .page-numbers .disabled span {
     opacity: 0.4;
     cursor:not-allowed;
     pointer-events: none
}

 footer {
     background: var(--bg-light);
     border-top: 1px solid var(--border-color);
     padding: 20px 0;
     text-align: center;
     margin-top: auto
}
 footer .footer-logo img {
     width: 65px;
     margin-bottom: 10px;
     margin: 0 auto
}
 footer p {
     font-size: 0.9rem;
     color: var(--text-light)
}

 .single-post {
     background: var(--bg-light);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     margin-bottom: 20px;
     overflow: hidden
}
 .post-thumbnail {
     width: 100%;
     height: 400px;
     overflow: hidden;
     border-bottom: 1px solid #ccc
}
 .post-thumbnail img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover;
     object-position: center;
     display: block;
     border: 0
}
 .single-post-thumbnail {
     width: 100%;
     height: 300px;
     overflow: hidden;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px
}
 .single-post-thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover
}
 .single-post-content {
     padding: 20px
}
 .single-post-title {
     margin-bottom: 15px;
     font-size: 1.8rem;
     color: var(--text-color)
}
 .single-post-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     color: #777;
     margin-bottom: 10px;
     gap: 10px
}
 .meta-author {
     display: flex;
     align-items: center;
     gap: 5px
}
 .single-post-author {
     display: flex;
     align-items: center;
     gap: 5px
}
 .single-post-author img {
     border-radius: 50%;
     width: 30px;
     height: 30px
}
 .meta-info-group {
     display: flex;
     align-items: center;
     gap: 15px
}
 .single-post-date, .meta-category {
     display: flex;
     align-items: center;
     gap: 5px
}
 .single-post-date svg, .meta-category svg {
     color: #555
}
 .single-post-body {
     line-height: 1.8;
     margin-bottom: 20px
}

 .single-post-body pre {
     background: var(--code-bg);
     color: inherit;
     font-family: "Fira Code", "Consolas", monospace;
     font-size: 0.95rem;
     line-height: 1.6;
     border-radius: 6px;
     padding: 1em 1.2em;
     margin: 1.5em auto;
     max-height: 400px;
     max-width: 100%;
     width: 100%;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
     white-space: pre-wrap;
     word-break: break-word;
     direction: ltr;
     text-align:left;
     border: 1px solid rgba(255, 255, 255, 0.1)
}
 .single-post-body pre code {
     display: block;
     padding: 0;
     background: transparent;
     font-size: inherit;
     font-family: Consolas, "Courier New", "Lucida Console", Monaco, Menlo, "DejaVu Sans Mono", monospace;
     color: var(--code-text);
}
 .single-post-body pre::-webkit-scrollbar {
     width: 8px;
     height: 8px
}
 .single-post-body pre::-webkit-scrollbar-thumb {
     background: var(--highlight-color);
     border-radius: 6px
}
 .hljs {
     color: inherit
}
 .hljs-comment, .hljs-quote {
     color: #6a9955;
     font-style: italic
}
 .hljs-keyword, .hljs-selector-tag, .hljs-subst {
     color: #569cd6;
     font-weight: 700
}
 .hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-variable {
     color: #b5cea8
}
 .hljs-string, .hljs-doctag {
     color: #ce9178
}
 .hljs-title, .hljs-section, .hljs-selector-id {
     color: #dcdcaa
}
 .hljs-type, .hljs-class .hljs-title {
     color: #4ec9b0
}
 .hljs-tag, .hljs-name, .hljs-attribute {
     color: #569cd6
}
 .hljs-regexp, .hljs-link {
     color: #d16969
}
 .hljs-symbol, .hljs-bullet {
     color: #b5cea8
}
 .hljs-built_in, .hljs-builtin-name {
     color: #569cd6
}
 .hljs-meta {
     color: #9cdcfe
}
 .hljs-deletion {
     background: #f48771
}
 .hljs-addition {
     background: #a6e22e
}
 .hljs-emphasis {
     font-style: italic
}
 .hljs-strong {
     font-weight: 700
}

 .code-block {
     position: relative
}
 .copy-button {
     position: absolute;
     top: 8px;
     right: 8px;
     background: var(--bg-lighter);
     color: #000;
     border: none;
     padding: 4px 8px;
     font-size: 0.75rem;
     border-radius: 4px;
     cursor: pointer;
     opacity: 0.8;
     transition: opacity 0.2s ease
}
 .copy-button:hover {
     opacity: 1
}

 .single-post-body blockquote {
     background: var(--bg-lighter);
     border: 1px solid var(--border-color);
     border-right: 5px solid var(--primary-color);
     padding: 15px 20px;
     margin: 20px 0;
     font-style: italic;
     color: var(--text-light);
     border-radius: 6px;
     box-shadow: 0 2px 5px var(--shadow-color)
}
 .single-post-body blockquote p {
     margin: 0;
     font-size: 1rem;
     line-height: 1.8
}
 .single-post-body blockquote::before {
     content: "❞";
     font-size: 2rem;
     color: var(--primary-color);
     vertical-align: middle;
     margin-left: 10px
}
 .single-post-body blockquote::after {
      content: "❝";
     font-size: 2rem;
     color: var(--primary-color);
     vertical-align: middle;
     margin-right: 10px
}

 .post-tag {
     display: inline-flex;
     align-items: center;
     background: var(--bg-lighter);
     color: var(--text-color);
     padding: 8px 14px;
     font-size: 0.9rem;
     font-weight: 400;
     border-radius: 6px;
     border: 1px solid var(--border-color);
     margin: 0 5px 5px 0;
     transition: background 0.3s, transform 0.3s;
     text-decoration: none
}
 .post-tag:hover {
     background: #f0f0f0;
     transform: translateY(-2px);
     border: 1px solid var(--border-color)
}
 .post-tag .tag-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     display: inline-block;
     margin-left: 8px
}

 .post-navigation {
     display: flex;
     width: 100%;
     gap: 10px;
     padding: 0;
     margin: 0;
     list-style: none;
     flex-direction: row-reverse
}
 .post-navigation li {
     flex: 1;
     box-sizing: border-box;
     background: #f5f5f5;
     border: 1px solid #ccc;
     padding: 12px 20px;
     display: flex;
     align-items: center;
     border-radius: 5px;
     position: relative
}
 .post-navigation .nav-prev {
     justify-content: flex-end
}
 .post-navigation .nav-next {
     justify-content: flex-start
}
 .post-navigation .nav-prev::after {
     content: "";
     display: inline-block;
     margin-left: 8px;
     width: 12px;
     height: 12px;
     border-top: 2px solid #333;
     border-right: 2px solid #333;
     transform: rotate(225deg)
}
 .post-navigation .nav-next::before {
     content: "";
     display: inline-block;
     margin-right: 8px;
     width: 12px;
     height: 12px;
     border-top: 2px solid #333;
     border-left: 2px solid #333;
     transform: rotate(-225deg)
}
 .post-navigation li a, .post-navigation li span {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: var(--primary-color);
     text-decoration: none;
     font-weight: 600
    
}

 .comments-section {
     margin-top: 40px
}
 .comment-block {
     background: var(--bg-light);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 15px;
     margin-bottom: 20px;
     box-shadow: 0 2px 5px var(--shadow-color)
}
 .comment-author {
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 5px
}
 .comment-meta {
     font-size: 0.85rem;
     color: var(--text-light);
     margin-bottom: 10px
}
 .comment-content {
     font-size: 0.95rem;
     line-height: 1.6
}
 .comment-children {
     margin-top: 15px;
     padding-right: 15px;
     border-right: 2px solid var(--border-color)
}
 .comment-form-block {
     background: var(--bg-light);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 20px;
     margin-top: 20px;
     box-shadow: 0 2px 5px var(--shadow-color)
}
 .comment-form-block input, .comment-form-block textarea {
     width: 100%;
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid var(--border-color);
     border-radius: 6px
}
 .comment-form-block button {
     background: var(--primary-color);
     color: #fff;
     font-family: 'Vazirmatn',sans-serif;
     border: none;

     padding: 10px 20px;
     border-radius: 6px;
     cursor: pointer
}
 .comment-form-block button:hover {
     background: var(--primary-dark)
}
 .comment-header {
     display: flex;
     gap: 10px;
     align-items: flex-start
}
 .comment-avatar {
     flex-shrink: 0
}
 .comment-body {
     flex: 1;
     display: flex;
     flex-direction: column
}
 .comment-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%
}

 .search-fullscreen {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.8);
     z-index: 9999;
     justify-content: center;
     align-items: center;
     display: none
}
 .search-fullscreen.active {
     display: flex
}
 .search-form {
     position: relative;
     display: flex;
     gap: 10px;
     align-items: center;
     background: var(--bg-lighter);
     border: 1px solid var(--border-color);
     padding: 1.5em;
     border-radius: 6px;
     text-align: center;
     box-shadow: 0 2px 8px var(--shadow-color);
     max-width: 400px;
     width: 100%
}
 .search-form .search-close {
     position: absolute;
     top: -12px;
     left: -12px;
     width: 32px;
     height: 32px;
     background: transparent;
     border: 1px solid #000;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0
}
 .search-form .search-close:hover {
     background: transparent
}
 .search-form .search-close svg {
     width: 16px;
     height: 16px;
     stroke: #000;
     stroke-width: 5
}
 .search-form .search-close:hover {
     background: #c0392b
}
 .search-form input[type="text"] {
     width: 80%;
     padding: 0.6em;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     font-size: 1em
}
 .search-form button {
     padding: 10px 20px;
     font-size: 1rem;
     border: none;
     border-radius: 6px;
     cursor: pointer
}
 .search-form button[type="submit"] {
     background: var(--primary-color);
     color: #fff
}
 .search-form .search-close {
     background: #ff0000;
     color: var(--text-light);
     font-size: 1.5rem
}
 .search-toggle {
     position: absolute;
     left: 30px;
     top: 0;
     height: 100%;
     display: flex;
     align-items: center;
     background-color: transparent;
     border: 0;
     cursor: pointer
}

 .sidebar .widget {
     background: var(--bg-light);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 15px;
     margin-bottom: 20px;
     box-shadow: 0 2px 5px var(--shadow-color)
}
 .sidebar .widget h3 {
     position: relative;
     font-size: 1rem;
     margin-bottom: 10px;
     border-bottom: 2px solid var(--border-color);
     padding-bottom: 5px;
     padding-right: 20px
}
 .sidebar .widget h3::before {
     content: "";
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: gray
}
 .sidebar .widget:nth-child(1) h3::before {
     background-color: #e74c3c
}
 .sidebar .widget:nth-child(2) h3::before {
     background-color: #3498db
}
 .sidebar .widget:nth-child(3) h3::before {
     background-color: #27ae60
}
 .sidebar .widget:nth-child(4) h3::before {
     background-color: #f1c40f
}
 .sidebar-search .search-box {
     display: flex;
     align-items: center;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     overflow: hidden
}
 .sidebar-search .search-input {
     border: none;
     padding: 0.5rem;
     flex: 1;
     font-size: 0.95rem
}
 .sidebar-search .search-icon {
     background: none;
     border: none;
     padding: 0.5rem;
     cursor: pointer;
     color: var(--text-light);
     display: flex;
     align-items: center
}
 .sidebar-search .search-input:focus {
     outline: none
}
 .recent-posts-list {
     list-style: none;
     padding: 0;
     margin: 0
}
 .recent-posts-item {
     margin: 0
}
 .recent-post-item {
     display: flex;
     align-items: center;
     text-decoration: none;
     color: var(--text-color);
     gap: 12px;
     padding: 6px 0
}
 .recent-post-thumb {
     width: 60px;
     height: 60px;
     object-fit: cover;
     flex-shrink: 0;
     border-radius: 6px;
     box-shadow: 0 1px 5px var(--shadow-color);
     background: #eee
}
 .recent-post-info {
     display: flex;
     flex-direction: column;
     justify-content: center
}
 .recent-post-title {
     font-weight: 600;
     font-size: 1rem;
     line-height: 1.2
}
 .recent-post-date {
     font-size: 0.85rem;
     color: var(--text-light);
     margin-top: 3px
}
 .tag-list {
     display: flex;
     flex-wrap: wrap;
     gap: 5px
}
 .recent-comments-list {
     list-style: none;
     padding: 0;
     margin: 0
}
 .recent-comment-item {
     background: var(--bg-lighter);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 15px;
     margin-bottom: 15px
}
 .recent-comment-link {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     color: var(--text-color)
}
 .comment-author-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     object-fit: cover;
     background: #eee;
     box-shadow: 0 1px 4px var(--shadow-color);
     flex-shrink: 0
}
 .comment-author-name {
     font-weight: 600;
     font-size: 0.96em;
     margin-left: 6px;
     color: #455;
     white-space: nowrap
}
 .comment-excerpt {
     color: var(--text-light);
     font-size: 0.95em;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     flex: 1
}

 .author-header-name {
     text-align: center;
     margin-bottom: 30px;
     font-size: 1.7rem
}
 .author-avatar-big img {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 2px 8px var(--shadow-color);
     margin: auto;
     margin-bottom: 10px
}
 .author-stats-inline {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 12px;
     font-size: 0.9rem;
     color: var(--text-light);
     margin-bottom: 15px
}
 .author-stats-inline span {
     display: inline-flex;
     align-items: center;
     gap: 5px
}
 .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     display: inline-block
}
 .dot-posts {
     background: var(--success-color)
}
 .dot-comments {
     background: var(--info-color)
}
 .dot-join {
     background: var(--warning-color)
}
 .dot-login {
     background: var(--danger-color)
}

 .toc-container {
     margin: 0;
     padding: 0 0.5em;
     user-select: none
}
 .toc-toggle {
     color: #000;
     border: none;
     padding: 0.5em 1em;
     border-radius: 6px;
     font-size: 1rem;
     cursor: pointer;
     transition: background 0.3s ease
}
 .toc-nav {
     margin-top: 0.5em;
     display: flex;
     flex-direction: column;
     gap: 0.3em;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease
}
 .toc-nav.show {
     max-height: 1000px;
     overflow: auto
}
 .toc-link {
     color: var(--link-color, #005f99);
     text-decoration: none;
     padding: 0.2em 0.4em;
     border-radius: 4px;
     transition: background 0.2s ease;
     border: 1px solid var(--border-color)
}
 .toc-link:hover {
     background: var(--bg-lighter);
     border: 1px solid var(--border-color)
}
 .toc-link.toc-level-h2 {
     padding-left: 1em
}
 .toc-link.toc-level-h3 {
     padding-left: 2em
}
 .single-post-body li {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     direction: rtl;
     list-style: none;
     margin: 0.5rem 0
}
 .single-post-body li .li-dot {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     flex-shrink: 0
}

 .author-posts-section {
     padding: 0 20px;
     max-width: 800px;
     margin: 40px auto
}
 .author-posts-title {
     font-size: 1.4rem;
     font-weight: 500;
     padding-bottom: 10px;
     max-width: 600px;
     margin: 3rem auto;
     color: var(--text-color);
     text-align: center
}
 .author-posts-list {
     list-style: none;
     padding: 0;
     margin: 0 50px 0
}
 .author-posts-list li {
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 8px
}
 .author-posts-list li::before {
     content: "";
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--primary-color)
}
 .author-posts-list a {
     color: var(--text-color);
     text-decoration: none;
     transition: color 0.3s
}
 .author-posts-list a:hover {
     color: var(--primary-color);
     text-decoration: underline
}
 .category-header {
     text-align: center;
     margin-bottom: 2rem
}
 .category-title {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem
}
 .category-title .dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     display: inline-block;
     transition: transform 0.3s
}
 .category-title .dot:hover {
     transform: scale(1.3)
}
 .category-count {
     font-size: 1rem;
     color: var(--text-light);
     margin-bottom: 0.5rem
}
 .category-desc {
     font-size: 0.95rem;
     color: var(--text-light);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6
}
 .tag-header {
     text-align: center;
     margin-bottom: 2rem
}

 .tag-title {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem
}
 .tag-title .dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     display: inline-block;
     transition: transform 0.3s
}
 .tag-count {
     font-size: 1rem;
     color: var(--text-light);
     margin-bottom: 0.5rem
}
 .tag-post-list ul {
     list-style: none;
     padding: 0;
     max-width: 600px;
     margin: 0 auto;
     text-align:right
}
 .tag-post-list li {
     margin: 0.5rem 0
}
 .tag-post-list a {
     color: var(--text-color);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: color 0.2s;
     padding: 0 1rem
}
 .tag-post-list a .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     display: inline-block
}
 .tag-post-list a:hover {
     color: var(--primary-color)
}

 .divider {
     width: 100%;
     max-width: 600px;
     margin: 3rem auto;
     border: none;
     height: 1px;
     background: linear-gradient( to right, transparent, rgba(0, 0, 0, 0.2), transparent );
     position: relative
}
 .divider::after {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 8px;
     height: 8px;
     background: var(--primary-color);
     border-radius: 50%
}
 .center {
     text-align: center
}

 .google-search-box {
     display: flex;
     justify-content: center;
     margin-top: 2em
}
 .google-search-card {
     background: var(--bg-lighter);
     border: 1px solid var(--border-color);
     padding: 1.5em;
     border-radius: 6px;
     text-align: center;
     box-shadow: 0 2px 8px var(--shadow-color);
     max-width: 400px;
     width: 100%
}
 .google-search-card p {
     margin-bottom: 1em;
     color: var(--text-color)
}
 .google-search-card input[type="text"] {
     width: 80%;
     padding: 0.6em;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     margin-bottom: 1em;
     font-size: 1em
}
 .google-search-card button {
     background: var(--primary-color);
     color: #fff;
     border: none;
     padding: 0.6em 1.2em;
     border-radius: 6px;
     cursor: pointer
}
 .google-search-card button:hover {
     background: var(--primary-dark)
}

 .post-share-box {
     margin-top: 20px;
     padding: 10px;
     background: var(--bg-lighter);
     border-radius: 6px;
     border: 1px solid var(--border-color);
     display: flex;
     align-items: center;
     gap: 10px
}
 .share-title {
     font-weight: 700;
     font-size: 14px
}
 .share-buttons {
     display: flex;
     gap: 8px
}
 .share-btn {
     width: 36px;
     height: 36px;
     background: #eee;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
     cursor: pointer;
     border: none;
     padding: 0
}
 .share-btn img {
     width: 30px;
     height: 30px;
     display: block;
     transition: transform 0.3s
}
 .share-btn:hover {
     transform: scale(1.1)
}
 .share-btn:hover img {
     transform: scale(1.2)
}

 .hamburger-menu {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     padding: 10px;
     z-index: 1001;
     position: relative
}
 .hamburger-menu span {
     display: block;
     width: 25px;
     height: 3px;
     background: var(--text-color);
     margin: 4px 0;
     transition: all 0.3s ease
}
 .hamburger-menu.active span:nth-child(1) {
     transform: translateY(7px) rotate(45deg)
}
 .hamburger-menu.active span:nth-child(2) {
     opacity: 0
}
 .hamburger-menu.active span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg)
}
 @media (max-width: 768px) {
     .hamburger-menu {
         display: block;
         position: absolute;
         left: 20px;
         top: 0;
         height: 100%;
         align-items: center;
         background: none;
         border: none
    }
     .main-menu {
         position: fixed;
         top: 0;
         right: -100%;
         width: 80%;
         max-width: 300px;
         height: 100vh;
         background: var(--bg-light);
         box-shadow: -5px 0 15px var(--shadow-dark);
         z-index: 1000;
         transition:right 0.3s ease;
         padding: 70px 20px 20px;
         overflow-y: auto;
         text-align: center
    }
     .main-menu.active {
         right: 0
    }
     .main-menu ul {
         flex-direction: column;
         gap: 10px
    }
     .main-menu li a {
         display: block;
         padding: 10px;
         border-bottom: 1px solid var(--border-light)
    }
     .menu-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         z-index: 999;
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease
    }
     .menu-overlay.active {
         opacity: 1;
         visibility: visible
    }
     .no-scroll {
         overflow: hidden
    }
}

 .mobile-search-form {
     display: none;
     padding: 10px;
     background: var(--bg-lighter);
     border-bottom: 1px solid var(--border-light)
}
 @media (max-width: 768px) {
     .mobile-search-form {
         display: block
    }
     .search-toggle {
         display: none
    }
     .mobile-search-form input[type="text"] {
         width: 75%;
         padding: 10px;
         font-size: 16px;
         border-left: 0;
         border-radius: 0px;
         outline: none;
         box-sizing: border-box
    }
     .mobile-search-form button {
         width: 25%;
         padding: 10px;
         font-size: 16px;
         border: none;
         background-color: var(--primary-color);
         color: white;
         border-radius: 0px;
         cursor: pointer;
         box-sizing: border-box
    }
     .mobile-search-form {
         background: var(--bg-lighter);
         border: 1px solid var(--border-color);
         padding: 1.5em;
         border-radius: 6px;
         text-align: center;
         box-shadow: 0 2px 8px var(--shadow-color);
         max-width: 400px;
         width: 100%;
         margin-bottom: 3rem
    }
     .main-menu li {
         position: relative;
         text-align:right;
         border-bottom: 1px solid rgba(0, 0, 0, 0.08)
    }
     .main-menu li a {
         display: block;
         padding: 10px 20px;
         position: relative
    }
     .main-menu li a::before {
         content: "";
         position: absolute;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
         width: 8px;
         height: 8px;
         border-radius: 50%
    }
    
     .main-menu li:nth-child(1) a::before {
         background: #e74c3c
    }
     .main-menu li:nth-child(2) a::before {
         background: #3498db
    }
     .main-menu li:nth-child(3) a::before {
         background: #27ae60
    }
     .main-menu li:nth-child(4) a::before {
         background: #f1c40f
    }
     .main-menu li:nth-child(5) a::before {
         background: #9b59b6
    }
     .main-menu li:nth-child(6) a::before {
         background: #1abc9c
    }
     .main-menu li:nth-child(7) a::before {
         background: #e67e22
    }
     .main-menu li:nth-child(8) a::before {
         background: #2ecc71
    }
     .main-menu li:nth-child(9) a::before {
         background: #34495e
    }
     .main-menu li:nth-child(10) a::before {
         background: #c0392b
    }
}
 .smart-search {
     display: flex;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     overflow: hidden;
     background: var(--bg-light)
}
 .smart-search input {
     flex: 1;
     border: none;
     padding: 10px 15px;
     outline: none;
     font-size: 14px
}
 .smart-search button {
     background: var(--primary-color);
     color: #fff;
     border: none;
     padding: 0 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.3s
}
 .smart-search button:hover {
     background: var(--primary-dark)
}
 .smart-search svg {
     width: 16px;
     height: 16px
}

 .meta-bottom-custom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.85rem;
     color: var(--text-light);
     direction: rtl;
     margin-top: 2rem
}
 .post-date-custom {
     font-size: 0.8rem;
     color: var(--text-light)
}
 .author-info-custom {
     display: flex;
     align-items: center;
     gap: 8px
}
 .author-link-custom {
     display: flex;
     align-items: center;
     color: inherit;
     text-decoration: none
}
 .author-link-custom:hover .author-name-custom {
     color: var(--primary-color);
     text-decoration: underline
}
 .author-avatar-custom {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0
}
 .author-name-custom {
     white-space: nowrap;
     font-weight: 500;
     padding: 5px
}

 .meta-bottom {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     direction: ltr;
     font-size: 0.9rem;
     color: var(--text-muted-color);
     gap: 15px;
     padding: 5px 10px;
     flex-wrap: wrap;
     margin-top: 2rem
}
 .meta-left {
     display: flex;
     align-items: center;
     gap: 15px;
     direction: rtl
}
 .single-post-date, .meta-category {
     display: flex;
     align-items: center;
     gap: 5px;
     color: var(--text-muted-color)
}
 .single-post-date svg, .meta-category svg {
     width: 16px;
     height: 16px;
     fill: currentColor
}
 .meta-right {
     display: flex;
     align-items: center;
     gap: 8px;
     direction: rtl;
     margin-left: auto
}
 .author-link {
     display: flex;
     align-items: center;
     gap: 8px;
     color: inherit;
     text-decoration: none
}
 .author-avatar {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     object-fit: cover
}
 .author-name {
     white-space: nowrap;
     text-align:right
}

 .error-page-container {
     min-height: 75vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center
}
 .error-code {
     font-size: 8em;
     color: #18181a;
     font-weight: 900;
     letter-spacing: 6px;
     margin: 0;
     margin-bottom: 0.2em;
     user-select: none;
     animation: wave 1.8s infinite alternate, blink 1s infinite steps(2, start)
}
 .error-message {
     font-size: 1.3em;
     color: #232323;
     margin-top: 0.5em;
     max-width: 90vw;
     line-height: 2
}
 @keyframes wave {
     0% {
         transform: scale(1) rotate(-3deg)
    }
     20% {
         transform: scale(1.07, 0.93) rotate(2deg)
    }
     40% {
         transform: scale(0.96, 1.08) rotate(-3deg)
    }
     60% {
         transform: scale(1.06, 0.95) rotate(2deg)
    }
     80% {
         transform: scale(1.01) rotate(-2deg)
    }
     100% {
         transform: scale(1) rotate(0)
    }
}
 @keyframes blink {
     0%, 100% {
         opacity: 1
    }
     90% {
         opacity: 0.75
    }
}

 #backToTopBtn {
     display: none;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 9999;
     width: 40px;
     height: 40px;
     border: none;
     outline: none;
     background-color: var(--primary-color);
     color: white;
     cursor: pointer;
     padding: 0;
     border-radius: 50%;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
     transition: background-color 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0
}
 #backToTopBtn svg {
     width: 24px;
     height: 24px;
     fill: white
}
 #backToTopBtn:hover {
     background-color: var(--primary-dark)
}
 @media (max-width: 768px) {
     #backToTopBtn {
         right: 15px;
         bottom: 15px
    }
}
 #editPostBtn {
     position: fixed;
     bottom: 90px;
     right: 30px;
     z-index: 10000;
     width: 40px;
     height: 40px;
     background-color: var(--success-color);
     border: none;
     border-radius: 50%;
     padding: 0;
     cursor: pointer;
     box-shadow: 0 2px 6px rgba(0, 128, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease
}
 #editPostBtn svg {
     width: 24px;
     height: 24px;
     fill: white
}
 #editPostBtn:hover {
     background-color: var(--success-dark)
}
 @media (max-width: 768px) {
     #editPostBtn {
         right: 15px;
         bottom: 70px
    }
}

 .gallery1 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
     margin: 1rem 0
}
 .gallery1 img {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 8px;
     display: block;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer
}
 .gallery1 img:hover {
     transform: scale(1.05);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2)
}

 .gallery2 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
     margin: 1rem 0
}
 .gallery2 img {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 8px;
     display: block;
     filter: grayscale(100%);
     opacity: 0.9;
     transition: filter 0.5s ease, opacity 0.5s ease, transform 0.4s ease, box-shadow 0.4s ease;
     cursor: pointer;
     transform-origin: center center
}
 .gallery2 img:hover {
     filter: grayscale(0%);
     opacity: 1;
     transform: scale(1.04);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15)
}

 .gallery3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
     margin: 1rem 0
}
 .gallery3 img {
     width: 100%;
     aspect-ratio: 4 / 3;
     object-fit: cover;
     border-radius: 6px;
     display: block;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.4s ease, box-shadow 0.3s ease;
     cursor: pointer
}
 .gallery3 img:hover {
     transform: translateY(-8px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2)
}

 .gallery4 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin: 1rem 0
}
 .gallery4 img {
     width: 100%;
     aspect-ratio: 4 / 3;
     object-fit: cover;
     border-radius: 4px;
     display: block;
     filter: grayscale(80%) contrast(90%) brightness(90%) sepia(30%);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     transition: filter 0.3s ease, transform 0.5s ease, box-shadow 0.3s ease;
     transform-origin: center center;
     cursor: pointer;
     transform: rotate(-1deg)
}
 .gallery4 img:hover {
     filter: none;
     transform: rotate(3deg) scale(1.07);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
}


 .empty-state {
     text-align: center;
     padding: 10rem 2rem;
     border: 2px solid var(--border-color);
     border-radius: 12px;
     background: var(--bg-light);
     margin: auto
}
 .empty-state h2 {
     font-size: 24px;
     margin-bottom: 10px;
     color: #555
}
 .empty-state p {
     color: #777;
     margin: 5px 0
}
 .empty-state .btn {
     display: inline-block;
     margin-top: 15px;
     background: var(--primary-color);
     color: #fff;
     padding: 10px 20px;
     text-decoration: none;
     border-radius: 6px;
     transition: background 0.3s
}
 .empty-state .btn:hover {
     background: var(--primary-dark)
}
 

 .page-navigator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
    direction: rtl;
}

.page-navigator li a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: var(--text-color);
    background-color: #f5f5f5;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
}

.page-navigator li a:hover {
    transform: translateY(-4px);
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.page-navigator li.current a {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    border-color: var(--primary-color);
    cursor: default;
}

.page-navigator li.current a:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: #fff;
}

.page-navigator li.prev a,
.page-navigator li.next a {}

.page-navigator li.prev a svg {
    transform: translateX(-1px);
}

.page-navigator li.next a svg {
    transform: translateX(1px);
}

.page-navigator li.disabled a {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.page-navigator li.disabled a:hover {
    transform: none;
}