/* ========= پایه ========= */
@font-face {
  font-family: 'Vazirmatn';
  src: url('"../../../assets/fonts/Vazir.woff2"') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../../../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
:root {
  --brand-main: #263B8F;
  --brand-accent: #0EA5E9;
  --brand-accent-soft: #E0F2FE;
  --bg-page: #F4F5FB;
  --bg-card: #FFFFFF;
  --border-soft: #E5E7EB;
  --text-main: #111827;
  --text-muted: #6B7280;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
  --link-red: #DC2626;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Vazirmatn, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
}

a {
  color: var(--link-red);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

/* ظرف عمومی */

.container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ========= HEADER ========= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.96);
  color: #E5E7EB;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.7);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 1.5rem;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.topbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #CBD5F5;
}

.topbar-item i {
  font-size: 0.8rem;
}

.nav-bar {
  padding: 0.6rem 0 0.7rem;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* مطمئن شوید که فاصله بین لوگو و لینک‌ها ایجاد شود */
  gap: 1.5rem;
  /* border: 1px solid #E81B1F; /* برای دیباگ می‌توانید این خط را حذف کنید */
}

.brand img {
  /* تنظیم اندازه دلخواه لوگو */
  height: 40px; /* مثلاً 40 پیکسل ارتفاع */
  width: auto;  /* عرض به صورت خودکار تنظیم شود تا نسبت حفظ شود */
  max-width: 100%; /* اگر به هر دلیلی بزرگ شد، از کادر خارج نشود */
}
/* ویژگی float: left را از .brand حذف کنید، چون با display: flex تداخل دارد. */
.brand {
  display: inline-flex;
  gap: 0.2rem;
  /* float: left; <- این را حذف کنید */
  text-decoration: none;
  /* border: 1px solid #E81B1F; */
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, #FFFFFF 0, #60A5FA 45%, #1E3A8A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0B1120;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.brand-text span:first-child {
  font-size: 0.95rem;
  font-weight: 700;
  color: #F9FAFB;
}

.brand-text span:last-child {
  font-size: 0.74rem;
  color: #9CA3AF;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 0.86rem;
}

.nav-links a {
  position: relative;
  color: #E5E7EB;
  padding-bottom: 0.15rem;
}

.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-accent), #F97316);
  transition: width 0.18s ease-out;
}

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

.nav-links a.nav-active {
  color: #FFFFFF;
}

/* دراپ‌داون */

.nav-dropdown {
  position: relative;
}

.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: #E5E7EB;
  font: inherit;
  cursor: pointer;
}

.nav-drop-toggle i {
  font-size: 0.7rem;
}

.nav-drop-menu {
  position: absolute;
  top: 130%;
  inset-inline-end: 0;
  min-width: 220px;
  border-radius: 16px;
  background-color: #020617;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
  padding-block: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.18s ease-out;
  z-index: 40;
}

.nav-drop-menu a {
  display: block;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  color: #E5E7EB;
}

.nav-drop-menu a:hover {
  background-color: rgba(148, 163, 184, 0.18);
}

.nav-drop-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* منوی موبایل */

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(148, 163, 184, 0.7);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.6rem;
  color: #E5E7EB;
  font-size: 0.8rem;
  cursor: pointer;
}

/* ========= HERO ========= */

.hero {
  padding: 2.5rem 0 2rem;
  background:
    radial-gradient(circle at 0 0, rgba(14, 165, 233, 0.25), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(38, 59, 143, 0.45), transparent 50%),
    #E5F2FF;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr);
  gap: 1.8rem;
  align-items: stretch;
}

.hero-panel {
  background: #020617;
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem 1.4rem;
  color: #E5E7EB;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.35), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.6), transparent 60%);
  opacity: 0.9;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-panel-inner {
  position: relative;
  z-index: 1;
}

.hero-panel-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.8);
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  background-color: rgba(15, 23, 42, 0.9);
}

.hero-panel h2 {
  margin: 0 0 0.6rem;
  font-size: 1.02rem;
}

.hero-panel p {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  line-height: 1.9;
}

.hero-list {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  font-size: 0.84rem;
}

.hero-list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.hero-list li::before {
  content: "●";
  font-size: 0.55rem;
  color: var(--brand-accent);
}

.hero-highlight {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.7);
  font-size: 0.8rem;
}

.hero-highlight strong {
  color: #FACC15;
}

.hero-copy {
  align-self: center;
}

.hero-copy h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(2rem, 3vw, 2.5rem);
  color: var(--brand-main);
  letter-spacing: -0.03em;
}

.hero-copy p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 34rem;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
}

.hero-chip {
  padding: 0.25rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: #E5E7EB;
  color: #374151;
}

/* ========= BREADCRUMB ========= */

.breadcrumb-section {
  padding: 0.7rem 0 0.8rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--brand-main);
}

/* ========= MAIN LAYOUT ========= */

.main-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr);
  gap: 1.8rem;
  padding-bottom: 2.5rem;
}

/* هدر مقاله */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}

.article-meta span i {
  margin-left: 0.3rem;
  color: var(--brand-main);
}

.article-intro {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-main);
}

/* TOC افقی */

.article-toc {
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border-soft);
  font-size: 0.82rem;
}

.article-toc-title {
  font-weight: 700;
  margin-bottom: 0.55rem;
  color: var(--text-muted);
}

.article-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-toc-list a {
  position: relative;
  padding-bottom: 0.1rem;
  color: var(--brand-main);
}

.article-toc-list a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-main), var(--brand-accent));
  transition: width 0.18s ease-out;
}

.article-toc-list a:hover::after {
  width: 100%;
}

/* ========= SECTIONS ========= */

.article-section {
  margin-top: 1.6rem;
}

.section-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.09);
  padding: 1.3rem 1.5rem 1.4rem;
}

.section-title {
font-family: "Vazirmatn Medium", Vazirmatn;
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  color: var(--brand-main);
}

.section-lead {
  margin: 0 0 0.9rem;
  font-size: 0.94rem;
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: 1.2rem;
  align-items: flex-start;
}

.section-text p {
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
  line-height: 1.9;
}

.section-text h3 {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.98rem;
  color: var(--text-main);
}

.section-list {
  margin: 0 0 0.8rem;
  padding-inline-start: 1.1rem;
  font-size: 0.9rem;
}

.section-list li {
  margin-bottom: 0.45rem;
}

.section-list strong {
  color: var(--brand-main);
}

/* تصویر سکشن – ارتفاع محدود تا صفحه کشیده نشود */

.section-media {
  max-height: 260px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #E0F2FE, #BFDBFE);
  box-shadow: 0 14px 35px rgba(148, 163, 184, 0.6);
}

.section-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* برای تصاویری که باید کامل و بلندتر دیده شوند */
.section-media--hero {
  max-height: none;      /* محدودیت ارتفاع را برمی‌دارد */
}

.section-media--hero img {
  width: 100%;
  height: auto;          /* نسبت تصویر حفظ می‌شود */
  object-fit: cover;     /* اگر خواستی، می‌توانی حتی برداریش */
}

/* سکشن بدون تصویر (اگر بخواهی) */

.section-card.no-media {
  padding: 1.3rem 1.5rem 1.5rem;
}

/* باکس‌های تاکید */

.highlight-box {
  margin-top: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #EFF6FF, #F9FAFB);
  border: 1px solid #DBEAFE;
  font-size: 0.86rem;
  color: #1F2937;
}

.highlight-box strong {
  color: var(--brand-main);
}

.highlight-cta {
  background: linear-gradient(135deg, #0F172A, #111827);
  border-color: #1F2937;
  color: #E5E7EB;
}

.highlight-cta a {
  color: #E0F2FE;
}

/* تعریف‌ها */

.article-dl > div {
  margin-bottom: 0.5rem;
}

.article-dl dt {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand-main);
}

.article-dl dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ========= جدول مقایسه ========= */

.table-wrap {
  margin-top: 0.6rem;
  width: 100%;
  overflow-x: auto;
}

.table-wrap::-webkit-scrollbar {
  height: 6px;
}

.table-wrap::-webkit-scrollbar-track {
  background: #E5E7EB;
  border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: #9CA3AF;
  border-radius: 999px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 640px;
}

.comparison-table th,
.comparison-table td {
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--border-soft);
  text-align: right;
  vertical-align: top;
}

.comparison-table thead th {
  background-color: #EFF6FF;
  color: var(--brand-main);
  font-weight: 700;
  white-space: nowrap;
}

.comparison-table tbody tr:nth-child(odd) {
  background-color: #F9FAFB;
}

.comparison-table tbody tr:hover {
  background-color: var(--brand-accent-soft);
}

/* CTA دکمه */

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(135deg, var(--brand-main), var(--brand-accent));
  color: #F9FAFB;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(37, 99, 235, 0.35);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, filter 0.16s ease-out;
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.45);
  filter: brightness(1.03);
}

/* ========= SIDEBAR ========= */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.widget {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.widget-title {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: var(--brand-main);
}

/* TOC چسبان */

.toc-widget {
  position: sticky;
  top: 6rem;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
}

.toc-link {
  display: block;
  padding: 0.3rem 0.35rem;
  border-radius: 0.6rem;
  color: var(--text-muted);
  transition: background-color 0.18s ease-out,
              color 0.18s ease-out,
              padding-inline-start 0.18s;
}

.toc-link:hover {
  background-color: #F3F4F6;
  color: var(--brand-main);
  padding-inline-start: 0.5rem;
}

.toc-link.active {
  background-color: var(--brand-accent-soft);
  color: var(--brand-main);
  font-weight: 600;
  padding-inline-start: 0.5rem;
}

/* چیپ‌ها */

.info-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.info-chip {
  flex: 1 1 48%;
  padding: 0.45rem 0.6rem;
  border-radius: 14px;
  background-color: #F3F4F6;
  border: 1px solid #E5E7EB;
  font-size: 0.78rem;
}

.chip-label {
  display: block;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
  font-size: 0.72rem;
}

.chip-value {
  font-weight: 600;
  color: var(--brand-main);
}

/* مینی پست‌ها */

.mini-post {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #E5E7EB;
}

.mini-post:last-child {
  border-bottom: none;
}

.mini-thumb {
  flex: 0 0 52px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: #E5E7EB;
}

.mini-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.mini-link {
  font-size: 0.74rem;
  color: var(--brand-main);
}

/* CTA سایدبار */

.cta-note {
  font-size: 0.76rem;
  color: #9CA3AF;
  margin-top: 0.4rem;
}

/* ========= BOTTOM STRIP ========= */

.bottom-strip {
  padding-bottom: 2.3rem;
}

.bottom-strip-inner {
  margin-top: 1.4rem;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 55%),
              #020617;
  color: #E5E7EB;
  padding: 0.9rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.8);
}

.bottom-strip-text {
  font-size: 0.88rem;
}

.bottom-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.bottom-strip-actions a {
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.8);
  color: #E5E7EB;
}

.bottom-strip-actions a:hover {
  background-color: rgba(15, 23, 42, 0.85);
}

/* ========= FOOTER ========= */

.site-footer {
  border-top: 1px solid #E5E7EB;
  background-color: #FFFFFF;
  padding: 1.3rem 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.footer-brand {
  margin: 0 0 0.2rem;
  color: var(--brand-main);
  font-weight: 600;
}

.footer-text {
  margin: 0;
}

/* ========= ANIMATIONS ========= */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========= RESPONSIVE ========= */

@media (max-width: 992px) {
  .topbar {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    position: fixed;
    inset-inline: 0;
    top: 56px;
    background-color: #020617;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1.5rem 1rem;
    gap: 0.75rem;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-panel {
    order: -1;
  }

  .main-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    order: -1;
  }

  .section-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-media {
    max-height: 220px;
  }

  .toc-widget {
    position: static;
  }

  .bottom-strip-inner {
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: 1.1rem;
  }

  .hero {
    padding-top: 1.7rem;
  }

  .bottom-strip-inner {
    padding-inline: 1rem;
  }
}
/* کارت‌هایی که تصویر مربع در بالای محتوا دارند */
.section-card--top-media .section-grid {
  /* به جای دو ستون، یک ستون می‌شود: تصویر بالا، متن پایین */
  grid-template-columns: minmax(0, 1fr);
}

/* تصویر مربع، وسط کارت */
.section-media--square {
  max-width: 550px;
  height: 220px;              /* مربع */
  margin: 0 auto 1rem;        /* وسط و با فاصله از متن */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(148, 163, 184, 0.6);
}

/* پر شدن مربع با تصویر */
.section-media--square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* متن زیر تصویر، تمام عرض کارت را می‌گیرد */
.section-card--top-media .section-text {
  grid-column: 1 / -1;
}
/********************/
    :root{
      --bg:#F3F4F6;
      --panel:#FFFFFF;
      --ink:#111827;
      --mut:#6B7280;
      --brand:#263B8F;   /* آبی کاربنی سازمانی */
      --accent:#F59E0B;  /* نارنجی سازمانی */
      --soft:#EEF2FF;
      --rad:18px;
      --shadow-soft:0 10px 30px rgba(15,23,42,.08);
      --shadow-card:0 18px 40px rgba(15,23,42,.12);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(circle at 0 0,rgba(148,163,184,.25),transparent 55%),
        linear-gradient(to bottom,#EEF2FF 0%,#F9FAFB 45%,#F3F4F6 100%);
      font:400 15px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",Ubuntu,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji";
    }
    img{max-width:100%;height:auto;display:block}
    a{
      color:var(--brand);
      text-decoration:none;
      transition:color .18s ease;
    }
    a:hover{
      color:var(--accent);
      text-decoration:none;
    }
    :focus-visible{
      outline:2px solid var(--accent);
      outline-offset:2px;
      border-radius:10px;
    }

    .container{
      max-width:1120px;
      margin-inline:auto;
      padding:0 16px;
    }
    header,main,footer{display:block}

    /* ===== HERO (بدون اسکرول افقی) ===== */
    .page-header{margin:0 0 18px;}

    .hero-bleed{
      width:100%;
      margin:0;
      background:
        radial-gradient(circle at 10% -10%,rgba(209,213,219,.5),transparent 60%),
        radial-gradient(circle at 90% 110%,rgba(191,219,254,.75),transparent 55%),
        linear-gradient(135deg,#E5ECFF 0%,#F9FAFB 60%,#EFF6FF 100%);
      border-bottom:1px solid #E5E7EB;
      box-shadow:0 18px 55px rgba(15,23,42,.18);
    }

    .hero-content{
      padding:24px 16px 26px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
      gap:20px;
      align-items:center;
    }
    @media(max-width:880px){
      .hero-grid{grid-template-columns:1fr;gap:18px}
    }

    .hero-title{
      margin:0 0 8px;
      font-size:clamp(22px,3vw,30px);
      font-weight:800;
      letter-spacing:-.02em;
      color:#0B1120;
    }
    .hero-lead{
      margin:0 0 10px;
      color:#4B5563;
      font-size:.96rem;
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px 14px;
      margin:8px 0 10px;
      font-size:.83rem;
      color:#6B7280;
    }
    .hero-meta span{display:inline-flex;align-items:center;gap:4px}
    .hero-meta svg{width:14px;height:14px;opacity:.8;fill:#9CA3AF;}

    .hero-chips{
      display:flex;flex-wrap:wrap;
      gap:8px;margin-top:6px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:.35rem .75rem;
      font-size:.8rem;
      background:rgba(255,255,255,.9);
      border:1px solid #E5E7EB;
      color:#111827;
      box-shadow:0 4px 10px rgba(148,163,184,.25);
    }
    .chip-dot{
      width:7px;height:7px;border-radius:999px;
      background:linear-gradient(135deg,var(--accent),#f97316);
      box-shadow:0 0 0 4px rgba(248,184,73,.35);
    }

    .hero-actions{
      display:flex;flex-wrap:wrap;
      gap:8px;margin-top:12px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      border-radius:999px;
      padding:.55rem 1.05rem;
      border:1px solid transparent;
      cursor:pointer;
      font-size:.9rem;
      white-space:nowrap;
      transition:.18s background,.18s transform,.18s box-shadow,.18s border-color,.18s color;
    }
    .btn svg{width:14px;height:14px}
    .btn-primary{
      background:linear-gradient(135deg,var(--brand),#1D4ED8);
      color:#F9FAFB;
      box-shadow:0 10px 25px rgba(37,99,235,.35);
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 13px 35px rgba(37,99,235,.45);
      background:linear-gradient(135deg,#1D4ED8,#1E40AF);
    }
    .btn-ghost{
      background:#FFFFFF;
      border-color:#CBD5F094;
      color:#111827;
    }
    .btn-ghost:hover{
      border-color:var(--accent);
      color:var(--accent);
      transform:translateY(-1px);
      box-shadow:0 10px 22px rgba(148,163,184,.35);
    }

    /* hero media card (تصویر/ویدئو) */
    .hero-media-card{
      position:relative;
      border-radius:22px;
      overflow:hidden;
      background:
        radial-gradient(circle at 0 0,rgba(219,234,254,.9),transparent 60%),
        linear-gradient(145deg,#EFF6FF,#FFFFFF);
      border:1px solid #E5E7EB;
      box-shadow:0 16px 40px rgba(15,23,42,.16);
      padding:10px 10px 12px;
    }
    .hero-media-tag{
      font-size:.78rem;
      color:#6B7280;
      margin-bottom:4px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .hero-media-thumb{
      position:relative;
      border-radius:18px;
      overflow:hidden;
      aspect-ratio:16/9;
      background:#020617;
      box-shadow:0 14px 36px rgba(15,23,42,.35);
    }
    .hero-media-thumb img,
    .hero-media-thumb video{
      width:100%;height:100%;object-fit:cover;
    }
    .hero-media-overlay{
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 20% 10%,rgba(248,250,252,.35),transparent 55%),
        linear-gradient(135deg,rgba(37,99,235,.35),rgba(15,23,42,.25));
      mix-blend-mode:soft-light;
    }
    .play-pill{
      position:absolute;
      inset-inline:auto 14px;
      inset-block:auto 12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:.45rem .8rem;
      background:rgba(15,23,42,.85);
      color:#F9FAFB;
      font-size:.8rem;
      border:1px solid rgba(148,163,184,.6);
      backdrop-filter:blur(6px);
    }
    .play-pill span{
      display:inline-flex;align-items:center;justify-content:center;
      width:22px;height:22px;border-radius:999px;
      background:linear-gradient(135deg,var(--accent),#f97316);
      box-shadow:0 0 0 4px rgba(248,184,73,.4);
    }
    .play-pill svg{width:10px;height:10px;fill:#fff;}

    .hero-media-caption{
      margin-top:8px;
      font-size:.8rem;
      color:#6B7280;
      display:flex;
      justify-content:space-between;
      gap:8px;
    }

    /* breadcrumb */
    .breadcrumb-wrap{
      padding:8px 16px 10px;
    }
    .breadcrumb{
      font-size:.85rem;
      color:#6B7280;
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .breadcrumb a{color:#374151;}
    .breadcrumb a:hover{color:var(--brand);}
    .breadcrumb .sep{opacity:.6}

    /* ===== MAIN CONTENT PANELS ===== */
    main{margin-bottom:40px;}

    .section-shell{
      margin-top:18px;
      background:var(--panel);
      border-radius:24px;
      border:1px solid #E5E7EB;
      box-shadow:var(--shadow-soft);
      padding:18px 16px 20px;
    }

    .section-header{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .section-title{
      margin:0;
      font-size:1.05rem;
      font-weight:800;
      color:#0B1120;
    }
    .section-sub{
      font-size:.86rem;
      color:var(--mut);
      max-width:430px;
    }

    .pill-label{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:.25rem .7rem;
      background:var(--soft);
      border:1px solid #CBD5F0;
      font-size:.8rem;
      color:#1F2937;
    }
    .pill-label small{color:#6B7280;font-size:.77rem}

    .grid{display:grid;gap:12px}
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    @media(max-width:880px){
      .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media(max-width:720px){
      .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    }

    .card{
      background:linear-gradient(135deg,#FFFFFF 0%,#F9FAFB 50%,#FFFFFF 100%);
      border:1px solid #E5E7EB;
      border-radius:var(--rad);
      padding:12px 13px 13px;
      position:relative;
      overflow:hidden;
      box-shadow:0 10px 28px rgba(15,23,42,.08);
    }

    .card::before{
      content:"";
      position:absolute;
      inset:-60%;
      background:radial-gradient(circle at 0 0,rgba(148,163,184,.15),transparent 55%);
      opacity:0;
      transition:opacity .18s;
      pointer-events:none;
    }
    .card:hover::before{opacity:.9}

    .card-title{
      font-size:.98rem;
      font-weight:700;
      margin:0 0 4px;
      color:#111827;
    }
    .card-text{
      font-size:.86rem;
      color:#4B5563;
      margin:0;
    }
    .card-meta{
      font-size:.78rem;
      color:#6B7280;
      margin-top:4px;
    }

    .card-icon{
      width:34px;height:34px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,var(--accent),#f97316);
      box-shadow:0 0 0 5px rgba(248,184,73,.35);
      margin-left:8px;
      flex-shrink:0;
    }
    .card-icon svg{width:18px;height:18px;fill:#111827;}

    .card-head{
      display:flex;align-items:flex-start;gap:8px;margin-bottom:4px;
    }

    .card-thumb-row{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:8px;
      font-size:.78rem;
      color:#6B7280;
    }
    .thumb-mini{
      width:44px;height:44px;border-radius:12px;
      overflow:hidden;
      background:#E5E7EB;
      border:1px solid #E5E7EB;
      flex-shrink:0;
    }

    .muted{color:var(--mut);font-size:.86rem;}

    /* Table (ماتریس خطاها) */
    .table-shell{
      margin-top:18px;
      border-radius:22px;
      overflow:hidden;
      border:1px solid #E5E7EB;
      background:linear-gradient(135deg,#F9FAFB 0%,#FFFFFF 60%);
      box-shadow:var(--shadow-card);
    }
    .table-wrap{overflow:auto;}
    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      font-size:.85rem;
      color:#111827;
    }
    thead th{
      background:#EEF2FF;
      padding:9px 10px;
      text-align:right;
      white-space:nowrap;
      border-bottom:1px solid #E5E7EB;
      color:#1F2937;
      font-weight:600;
    }
    tbody td{
      padding:8px 10px;
      border-top:1px solid #E5E7EB;
      vertical-align:top;
    }
    tbody tr:nth-child(2n){
      background:#F9FAFB;
    }

    /* FAQ */
    .faq{margin-top:20px;}
    .faq details{
      border-radius:16px;
      border:1px solid #E5E7EB;
      background:#FFFFFF;
      box-shadow:0 10px 24px rgba(15,23,42,.08);
      margin-top:8px;
      overflow:hidden;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:10px 13px;
      font-size:.9rem;
      font-weight:600;
      color:#111827;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq details[open] summary{
      background:#F3F4FF;
    }
    .faq .answer{
      padding:0 13px 12px;
      font-size:.84rem;
      color:#4B5563;
    }

    /* CTA */
    .cta-panel{
      margin-top:24px;
      border-radius:26px;
      padding:18px 16px;
      background:

        radial-gradient(circle at 0 0,rgba(219,234,254,.8),transparent 55%),
        linear-gradient(135deg,#EEF2FF,#FFFFFF);
      border:1px solid #CBD5F0;
      box-shadow:0 18px 45px rgba(15,23,42,.16);
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      justify-content:space-between;
    }
    .cta-panel h2{
      margin:0 0 6px;
      font-size:1.02rem;
      color:#0B1120;
    }
    .cta-panel p{
      margin:0;
      font-size:.9rem;
      color:#374151;
    }
    .cta-note{
      font-size:.8rem;
      color:#6B7280;
      margin-top:4px;
    }

    .cta-actions{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:220px;
    }

    /* Sticky CTA bottom */
    .sticky-cta{
      position:sticky;
      bottom:0;
      z-index:40;
      background:linear-gradient(to top,rgba(249,250,251,.97),rgba(243,244,246,.95));
      border-top:1px solid #E5E7EB;
      backdrop-filter:blur(10px);
      padding:8px 0;
    }
    .sticky-cta-inner{
      display:flex;
      gap:8px;
    }

    footer{
      border-top:1px solid #E5E7EB;
      padding:14px 16px 20px;
      color:#6B7280;
      font-size:.8rem;
      text-align:center;
      background:#F9FAFB;
    }

    /* Motion (reveal) */
    @media (prefers-reduced-motion:no-preference){
      .reveal{
        opacity:0;
        transform:translateY(12px);
        transition:opacity .45s ease,transform .45s ease;
      }
      .show{
        opacity:1;
        transform:none;
      }
    }
	  /* layout دو ستونه برای سکشن معرفی */
.intro-layout{
  align-items:flex-start;
}

/* باکس تصویر در سکشن */
.image-panel{
  background:linear-gradient(135deg,#EEF2FF,#FFFFFF);
  border:1px solid #E5E7EB;
  border-radius:18px;
  padding:10px 10px 12px;
  box-shadow:0 12px 30px rgba(148,163,184,.25);
}

.image-panel-main{
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#E5E7EB;
}

.image-panel-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.image-panel-caption{
  margin-top:6px;
  font-size:.8rem;
  color:#6B7280;
}
tbody tr{
  transition:background-color .18s ease;
}

tbody tr:hover td{
  background-color:#EEF2FF;
}
	  /* نئون نرم برای کارت‌های بالای صفحه */
.neon-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--rad);
  border:1px solid #E5E7EB;
  background:
    linear-gradient(135deg,#FFFFFF 0%,#F9FAFB 45%,#FFFFFF 100%);
  box-shadow:0 10px 28px rgba(15,23,42,.08);
  transition:
    box-shadow .22s ease,
    transform .22s ease,
    border-color .22s ease,
    background .22s ease;
}

/* لایه رنگی خیلی ظریف، سورمه‌ای → آبی → نارنجی */
.neon-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    linear-gradient(135deg,
      rgba(38,59,143,.14),
      rgba(37,99,235,.10),
      rgba(245,158,11,.10)
    );
  opacity:.55;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:-1;
}

/* حالت هاور: فقط کمی لیفت و تاکید روی خط دور، بدون نئون */
.neon-card{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(15,23,42,.16);
  border-color:rgba(38,59,143,.4); /* سورمه‌ای نرم */
  background:
    linear-gradient(135deg,#FFFFFF 0%,#F3F4FF 50%,#FFFFFF 100%);
}

/* رنگ فونت‌ها در این کارت‌ها کاملاً خوانا بماند */
.neon-card .card-title{
  color:#111827;   /* تقریباً مشکی */
}

.neon-card .card-text,
.neon-card .card-meta{
  color:#374151;   /* خاکستری تیره خوانا */
}

/* تامبنیل گوشه کارت با اشاره نارنجی لطیف */
.neon-card .thumb-mini{
  background:#F3F4FF;
  border-radius:14px;
  border:1px solid #E5E7EB;
  overflow:hidden;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.neon-card:hover .thumb-mini{
  border-color:rgba(245,158,11,.7);      /* نارنجی سازمانی */
  box-shadow:0 8px 18px rgba(245,158,11,.35);
  transform:translateY(-1px);
}

/* ===== استایل مخصوص پرینت ===== */
@media print {

  /* همه‌چیز مخفی شود… */
  body *{
    visibility:hidden;
  }

  /* …به جز خود مقاله */
  #article-content,
  #article-content *{
    visibility:visible;
  }

  /* مقاله تمام عرض صفحه A4 شود */
  #article-content{
    position:static;
    margin:0;
    max-width:none;
    padding:0 12mm; /* حاشیه روی کاغذ */
    box-shadow:none;
    background:#ffffff;
  }

  /* حذف هدر، استیکی CTA و فوتر */
  header,
  .sticky-cta,
  footer{
    display:none !important;
  }

  /* باکس‌ها بدون سایه و با خط ساده برای چاپ تمیز */
  .section-shell,
  .cta-panel{
    box-shadow:none !important;

    border:1px solid #CCCCCC;
    border-radius:0;
    background:#ffffff;
  }

  /* جدول خواناتر روی پرینت */
  .table-shell{
    box-shadow:none;
    border:1px solid #CCCCCC;
  }

  thead th{
    background:#f3f4f6 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}
/*printable********************/
	  .article-tools{
  display:flex;
  justify-content:flex-start;
  margin-bottom:10px;
}

/* خود دکمه پرینت */
.article-print-btn{
  display:inline-flex;
  flex-direction:row-reverse; /* RTL: متن راست، آیکن چپ */
  align-items:center;
  gap:12px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.45);
  padding:.5rem 1.3rem .5rem 1.5rem;
  cursor:pointer;
  background:
    radial-gradient(circle at 0% 0%, rgba(245,158,11,.20), transparent 55%),
    linear-gradient(135deg, #FFFFFF 0%, #E0E7FF 40%, #DBEAFE 100%);
  color:#111827;
  box-shadow:0 8px 20px rgba(15,23,42,.18);
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .16s ease;
}

/* بخش متنی داخل دکمه */
.article-print-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.article-print-title{
	font-family: "Vazirmatn Medium", Vazirmatn;
  font-size:.86rem;
  font-weight:600;
  color:#111827;
}

.article-print-caption{
  font-size:.78rem;
  color:#4B5563;
}

/* باکس آیکن پرینتر کنار دکمه */
.article-print-icon-box{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(135deg, #263B8F 0%, #1D4ED8 45%, #F59E0B 100%);
  box-shadow:
    0 0 0 3px rgba(191,219,254,.95),
    0 10px 22px rgba(15,23,42,.40);
  flex-shrink:0;
}

.article-print-icon-box svg{
  width:20px;
  height:20px;
  fill:#FFFFFF;
  transform:translateY(0);
  transition:transform .16s ease;
}

/* حالت هاور – لاکچری، نه فانتزی */
.article-print-btn:hover{
  background:
    radial-gradient(circle at 0% 0%, rgba(245,158,11,.26), transparent 55%),
    linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 40%, #BFDBFE 100%);
  border-color:rgba(37,99,235,.75);
  box-shadow:0 12px 26px rgba(37,99,235,.28);
  transform:translateY(-1px);
}

.article-print-btn:hover .article-print-icon-box svg{
  transform:translateY(-1px);
}

/* موبایل: کمی جمع‌وجورتر */
@media (max-width:640px){
  .article-print-btn{
    padding:.45rem 1.1rem .45rem 1.3rem;
  }
  .article-print-title{
    font-size:.82rem;
  }
  .article-print-caption{
    display:none; /* اگر خواستی متن دوم در موبایل حذف شود */
  }
}

/************مربوط یه مقاله ***********/
/* =========================
   لایه‌بندی کلی متن مقاله
   مخصوص صفحاتی که فقط متن ساده دارند
   ========================= */
.blog-single-page #article-content {
  max-width: 1140px;
  margin: 3rem auto 4rem;
}

/* خود باکس قابل پرینت */
#printable-article {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 32px 40px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* پاراگراف‌ها */
#printable-article p {
  margin: 0 0 0.9rem;
  line-height: 2.1;
  font-size: 0.96rem;
  color: #111827;
}

/* تیترهای داخلی */
#printable-article h2,
#printable-article h3 {
  margin-top: 1.8rem;
  margin-bottom: 0.7rem;
  font-weight: 700;
  color: #0f172a;
}

/* لیست‌ها */
#printable-article ul,
#printable-article ol {
  margin: 0 1.5rem 1rem 0;
  padding: 0;
}

#printable-article li {
  margin-bottom: 0.35rem;
  line-height: 1.9;
}

/* یک خط باریک در سمت راست برای حس «نوت تکنیکی» */
#printable-article {
  position: relative;
}

#printable-article::before {
  content: "";
  position: absolute;
  inset-block: 32px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb, #f97316);
}
/* چیدمان جدید: متن مقاله + سایدبار موضوعات مرتبط */
.article-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: flex-start;
  margin-top: 1.75rem;
}

.article-main {
  min-width: 0;
}

@media (max-width: 1024px) {
  .article-main-layout {
    grid-template-columns: 1fr;
  }
}

/* باکس سایدبار موضوعات مرتبط */
.article-sidebar-box {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 18px 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.article-sidebar-box h2 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
}

.article-sidebar-box p {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: #6b7280;
}

.article-sidebar-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-sidebar-box li + li {
  margin-top: 6px;
}

.article-sidebar-box a {
  font-size: 0.82rem;
  color: #1d4ed8;
  text-decoration: none;
}

.article-sidebar-box a:hover {
  color: #0f172a;
  text-decoration: underline;
}

/* ظاهر باکس‌های متن مقاله */
.article-section {
  margin-bottom: 22px;
}

.article-section .section-card {
  border-radius: 18px;
  padding: 16px 18px 18px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

/* یکی در میان رنگ ملایم */
.article-section:nth-of-type(odd) .section-card {
  background: linear-gradient(135deg, #f9fafb, #eff6ff);
}

.article-section:nth-of-type(even) .section-card {
  background: linear-gradient(135deg, #ffffff, #f3f4f6);
}

/* نئون / سایه نرم روی هاور */
.article-section .section-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.25),
    0 18px 40px rgba(15, 23, 42, 0.23),
    0 0 24px rgba(59, 130, 246, 0.45);
}

/* هدینگ‌های H2 / H3 داخل سکشن‌ها */
.article-heading-2 {
  font-size: 1.08rem;
  margin: 0 0 0.45rem;
  color: #111827;
  border-right: 3px solid #2563eb;
  padding-right: 0.5rem;
}

.article-heading-3 {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
  color: #1f2937;
  border-right: 2px solid #f97316;
  padding-right: 0.45rem;
}

/* استایل تصویر هر سکشن */
.article-figure {
  margin: 10px 0 12px;
  border-radius: 16px;
  overflow: hidden;
  background: #e5e7eb;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}
/* هدر و منوی دراپ‌داون همیشه روی بقیه لایه‌ها باشد */
#header,
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

#header .nav-drop-menu,
.site-header .nav-drop-menu {
  position: absolute;
  z-index: 10000;
}
/* یکسان کردن فونت تیترها با بقیه متن مقاله */
.article-page h1,
.article-page h2,
.article-page h3,
.article-page h4,
.hero-title,
.article-heading-2,
.article-heading-3 {
  font-family: Vazirmatn, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* هدر در همه صفحات بالای صفحه بچسبد */
.site-header {
  position: sticky;       /* اگر ثابت کامل می‌خواهی می‌توانی fixed بگذاری */
  top: 0;
  z-index: 9999;
}

/* هدر دانش‌نامه در تمام طول اسکرول ثابت بماند */
.blog-single-page .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 9999;
}

/* حاشیه بالا تا محتوا زیر هدر قایم نشود */
.blog-single-page {
  padding-top: 96px;  /* اگر دیدی زیاد/کم است، این عدد را کمی تنظیم کن */
}
/*دکمه های نئونی تماس با کارشناس*/
.hero-quick-contact{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:100%;
  max-width:320px; /* هم‌اندازه و جمع‌وجور */
  margin-top:14px;
}

.cta-neon-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:52px;              /* اندازه دکمه */
  padding:0 18px;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 10px 24px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  isolation:isolate;
}

/* لایت چرخشی نئونی */
.hero-quick-contact--inline{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:260px;
  margin-top:10px;
}

.cta-neon-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 8px 18px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.cta-neon-btn--sm{
  flex:1 1 0;
  min-height:38px;
  padding:0 10px;
  border-radius:12px;
}

.cta-neon-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:16px;
  background:
    conic-gradient(
      from 0deg,
      rgba(38,59,143,0.00) 0deg,
      rgba(38,59,143,0.00) 58deg,
      rgba(74,144,255,0.85) 88deg,
      rgba(0,229,255,0.78) 108deg,
      rgba(245,158,11,0.82) 132deg,
      rgba(38,59,143,0.00) 162deg,
      rgba(38,59,143,0.00) 360deg
    );
  animation:ctaNeonRotate 3.2s linear infinite;
  z-index:-2;
  filter:blur(5px);
  opacity:.9;
}

.cta-neon-btn::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(38,59,143,0.96), rgba(21,33,66,0.94));
  z-index:-1;
}

.cta-neon-btn__text{
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#fff;
  letter-spacing:-0.01em;
  white-space:nowrap;
}

.cta-neon-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.22);
  box-shadow:
    0 12px 22px rgba(15,23,42,0.12),
    0 0 18px rgba(74,144,255,0.16);
}

@keyframes ctaNeonRotate{
  to{ transform:rotate(360deg); }
}

@media (max-width:768px){
  .hero-quick-contact--inline{
    max-width:240px;
    gap:8px;
  }
  .cta-neon-btn--sm{
    min-height:36px;
    padding:0 8px;
  }
  .cta-neon-btn__text{
    font-size:11.5px;
  }
}