@charset "UTF-8";
/* ==========================================================================
   افزوده‌های سیستم طراحی — بخش‌هایی که طرح ایستا نداشت
   (جستجو، صفحه‌بندی، دیدگاه‌ها، کپچا، پیام‌های فرم)
   همهٔ مقادیر از همان توکن‌های style.css می‌آیند تا چیزی ناجور نشود.
   ========================================================================== */

/* ---------- محافظ انیمیشن ظاهرشدن ----------
   .rv در style.css با opacity:0 شروع می‌شود و جاوااسکریپت آن را نشان
   می‌دهد. اگر اسکریپت بارگذاری نشود — یا خزندهٔ جستجو آن را اجرا نکند —
   محتوا باید همچنان دیده شود. */
html:not(.has-js) .rv { opacity: 1 !important; transform: none !important; }

/* ---------- دسترس‌پذیری ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- جستجو ---------- */
.searchbar {
  display: flex; gap: .7rem; margin-top: 1.6rem; max-width: 34rem; flex-wrap: wrap;
}
.searchbar input[type="search"] {
  flex: 1 1 14rem; min-width: 0;
  padding: .85rem 1.1rem;
  border: 1.5px solid rgba(255, 255, 255, .22);
  border-radius: var(--frame-xs);
  background: rgba(255, 255, 255, .08);
  color: #fff; font-family: var(--f-body); font-size: .97rem;
}
.searchbar input[type="search"]::placeholder { color: rgba(255, 255, 255, .5); }
.searchbar input[type="search"]:focus {
  outline: 0; border-color: var(--gold); background: rgba(255, 255, 255, .13);
}
.section .searchbar input[type="search"] {
  border-color: var(--line); background: var(--paper); color: var(--ink);
}

/* ---------- حالت خالی ---------- */
.empty {
  text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  color: var(--muted); border: 1px dashed var(--line);
  border-radius: var(--frame-sm); background: var(--paper);
}
.empty svg { width: 42px; height: 42px; margin: 0 auto 1rem; opacity: .45; }
.empty p { font-size: .98rem; }

/* ---------- صفحه‌بندی ---------- */
.pager { margin-top: clamp(2rem, 4vw, 3rem); }
.pager__list {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  list-style: none; padding: 0; margin: 0;
}
.pager__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: var(--frame-xs);
  background: #fff; color: var(--ink); font-weight: 700; font-size: .92rem;
  transition: .25s var(--ease);
}
a.pager__item:hover { border-color: var(--forest); color: var(--forest); }
.pager__item.is-on { background: var(--forest); border-color: var(--forest); color: var(--gold-3); }
.pager__item.is-off { opacity: .4; }

/* ---------- برچسب فعال ---------- */
.tag.is-on {
  background: var(--forest); border-color: var(--forest); color: var(--gold-3);
}

/* ---------- پیام‌ها ---------- */
.note {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .95rem 1.15rem; border-radius: var(--frame-xs);
  font-size: .93rem; line-height: 1.9; margin-bottom: 1.1rem;
  border-inline-start: 3px solid var(--line); background: var(--mist); color: var(--ink);
}
.note svg { width: 20px; height: 20px; flex: none; margin-top: .35rem; }
.note ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
.note--ok { border-inline-start-color: #1E8A5F; background: #E8F5EF; }
.note--bad { border-inline-start-color: #B3261E; background: #FBECEB; color: #7A1A15; }
.note--info { border-inline-start-color: var(--gold); background: var(--gold-soft); }

.form__err {
  background: #FBECEB; border-inline-end: 3px solid #B3261E;
  padding: 1rem 1.2rem; border-radius: var(--frame-xs);
  font-size: .92rem; margin-bottom: 1.4rem; color: #7A1A15;
}
.form__err ul { margin: .45rem 0 0; padding-inline-start: 1.1rem; }

.field__err {
  display: block; color: #B3261E; font-size: .82rem; margin-top: .4rem; font-weight: 600;
}
.field__hint {
  display: block; color: var(--muted); font-size: .8rem; margin-top: .4rem;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }

/* ---------- کپچا ---------- */
.captcha__row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.captcha__row input { flex: 1 1 9rem; min-width: 0; }
.captcha__img {
  width: 170px; height: 56px; flex: none;
  border: 1.5px solid var(--line); border-radius: var(--frame-xs); background: #fff;
}
.captcha__refresh {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: var(--frame-xs);
  background: #fff; color: var(--forest); cursor: pointer; transition: .25s var(--ease);
}
.captcha__refresh:hover { border-color: var(--gold); background: var(--gold-soft); }
.captcha__refresh:disabled { opacity: .5; cursor: progress; }
.captcha__refresh svg { width: 18px; height: 18px; }

/* ---------- اشتراک‌گذاری ---------- */
.share {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.share > span { font-size: .88rem; color: var(--muted); font-weight: 600; margin-inline-end: .4rem; }
.share a, .share__copy {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--frame-xs);
  background: #fff; color: var(--forest); cursor: pointer; transition: .25s var(--ease);
}
.share__copy { width: auto; padding: 0 .9rem; gap: .45rem; grid-auto-flow: column; font-size: .85rem; font-weight: 700; }
.share a:hover, .share__copy:hover { border-color: var(--gold); background: var(--gold-soft); }
.share svg { width: 18px; height: 18px; }

/* ---------- دیدگاه‌ها ---------- */
.comments { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.comments--nested {
  margin-top: 1.1rem; padding-inline-start: clamp(1rem, 3vw, 2.2rem);
  border-inline-start: 2px solid var(--line);
}
.comment {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--frame-sm); padding: 1.25rem 1.4rem;
}
.comment__head { display: flex; gap: .8rem; align-items: center; margin-bottom: .7rem; }
.comment__avatar {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--frame-xs); background: var(--mist);
  color: var(--forest); font-weight: 800; font-size: 1.05rem;
}
.comment__head strong { display: block; color: var(--ink); font-size: .95rem; }
.comment__head time { font-size: .8rem; color: var(--muted); }
.comment__reply {
  margin-inline-start: auto; background: none; border: 0; cursor: pointer;
  color: var(--forest); font-weight: 700; font-size: .85rem; padding: .3rem .5rem;
  border-radius: 6px; transition: .2s;
}
.comment__reply:hover { background: var(--mist); }
.comment__body { font-size: .95rem; line-height: 2; }
.comment__body p { margin-bottom: .6rem; }
.comment__body p:last-child { margin-bottom: 0; }

.link-btn {
  background: none; border: 0; cursor: pointer; color: var(--forest);
  font-weight: 700; text-decoration: underline; font-size: .88rem; padding: 0 .4rem;
}

/* ---------- یادداشت تقویم ---------- */
.dial__note {
  margin-top: 1rem; font-size: .76rem; line-height: 1.9;
  color: rgba(255, 255, 255, .45);
}

/* ---------- اصلاحات ریسپانسیو ---------- */
@media (max-width: 640px) {
  .captcha__img { width: 140px; height: 48px; }
  .share { gap: .45rem; }
  .comment { padding: 1rem 1.1rem; }
  .pager__item { min-width: 44px; height: 44px; padding: 0 .7rem; font-size: .88rem; }
}

@media (max-width: 420px) {
  .searchbar { flex-direction: column; }
  .searchbar .btn { width: 100%; }
}

/* ---------- صفحه‌های لمسی ---------- */
@media (hover: none) and (pointer: coarse) {
  .captcha__refresh { width: 48px; height: 48px; }
  .share a, .share__copy { min-width: 44px; height: 44px; }

  /* iOS روی فونت کوچک‌تر از ۱۶ پیکسل صفحه را زوم می‌کند */
  .field input, .field select, .field textarea,
  .searchbar input[type="search"] { font-size: 16px; }

  /* ---------- هدف‌های لمسی ۴۴ پیکسلی ----------
     دستورالعمل اپل و گوگل هر دو ۴۴ پیکسل می‌گویند. سه مورد زیر از آن
     کوچک‌تر بودند و هر سه هم جزو پرکاربردترین‌های موبایل‌اند. ارتفاع با
     padding بالا می‌رود، نه با بزرگ کردن خود عنصر، تا چیدمان عوض نشود. */

  /* شمارهٔ تلفن در هدر — محتمل‌ترین چیزی که روی گوشی لمس می‌شود */
  .hdr__tel { min-height: 44px; padding-block: .7rem; }

  /* لوگو هم یک پیوند است (به صفحهٔ نخست) */
  .hdr__logo { min-height: 44px; }

  /* نوار راهنما: فاصلهٔ عمودی بیشتر، بدون تغییر ظاهر */
  .crumb { align-items: center; gap: .35rem; }
  .crumb a, .crumb b { display: inline-flex; align-items: center; min-height: 44px; }
  /* «خانه» فقط چهار حرف است و هدفی ۲۳ پیکسلی می‌ساخت. padding ناحیهٔ
     لمس را پهن می‌کند و margin منفی همان را از چیدمان پس می‌گیرد، پس
     ظاهر نوار راهنما عوض نمی‌شود. */
  .crumb a { padding-inline: .6rem; margin-inline: -.6rem; }

  /* پیوند دسته‌ها و برچسب‌ها */
  .chip, .tag { min-height: 40px; display: inline-flex; align-items: center; }

  /* فهرست‌های پیوند: فوتر، کشوی موبایل و ستون کناری.
     این‌ها روی دسکتاپ فشرده‌اند و همان درست است؛ روی لمسی فاصلهٔ عمودی
     می‌گیرند تا انگشت، پیوند بغلی را نزند. */
  .footer li a,
  .footer__c a,
  .drawer__foot a,
  .sidecard li a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* آیکون‌های شبکه‌های اجتماعی */
  .social a { width: 44px; height: 44px; }
}

/* ---------- بسته‌های همکاری (صفحهٔ خدمات) ---------- */
/* چیدمان همان طرح است: متن در یک ستون، کارت‌ها روی هم در ستون دیگر.
   افزوده‌های ما نسبت به طرح: آیکون، خط «مناسب برای» و نشان بستهٔ رایج. */
.pkgs { display: flex; flex-direction: column; gap: 1rem; }

.pkg { padding: 1.3rem 1.4rem; }
.pkg__top {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .55rem;
}
.pkg__top h3 { margin: 0; font-size: 1.1rem; flex: 1 1 auto; min-width: 0; }

.pkg__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--frame-xs);
  background: var(--mist); color: var(--forest);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pkg__ico svg { width: 20px; height: 20px; stroke-width: 1.7; }
.pkg:hover .pkg__ico { background: var(--forest); color: var(--gold-3); }

.pkg__flag {
  flex: none; background: var(--forest); color: #fff;
  font-size: .7rem; font-weight: 800;
  padding: .26rem .6rem; border-radius: 999px;
}

.pkg__for {
  display: flex; gap: .45rem; align-items: flex-start;
  margin: 0 0 .6rem; font-size: .85rem; line-height: 1.8;
  color: var(--forest); font-weight: 700;
}
.pkg__for svg {
  width: 14px; height: 14px; flex: none; margin-top: .33rem;
  stroke-width: 2.8; color: var(--gold-2);
}

.pkg > p:last-child { font-size: .92rem; margin: 0; }

/* بستهٔ برجسته: قاب سبز و نوار طلایی همیشه باز */
.pkg--on { border-color: var(--forest); box-shadow: var(--sh-2); }
.pkg--on::after { transform: scaleY(1); }
.pkg--on .pkg__ico { background: var(--forest); color: var(--gold-3); }

/* روی صفحهٔ باریک، اگر نام بسته بلند بود نشان به سطر بعد می‌رود و
   زیر عنوان می‌ایستد؛ آیکون و عنوان هیچ‌وقت از هم جدا نمی‌شوند. */
@media (max-width: 420px) {
  .pkg__top { flex-wrap: wrap; row-gap: .45rem; }
  .pkg__top h3 { font-size: 1.04rem; }
  .pkg__flag { margin-inline-start: calc(38px + .7rem); }
}

/* ---------- فهرست مطالب مقاله ---------- */
.toc { margin-bottom: 1.2rem; }
.toc ul { counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a::before {
  content: counter(toc, persian) "."; /* شمارهٔ فارسی به‌جای نقطهٔ طلایی */
  width: auto; height: auto; border-radius: 0; background: none;
  margin-top: 0; color: var(--gold-2); font-weight: 800;
  font-size: .82rem; min-width: 1.1rem;
}
.toc a { line-height: 1.85; }

/* تیتر مقاله وقتی از فهرست به آن می‌پریم زیر هدر ثابت گم نشود */
.prose h2[id] { scroll-margin-top: 92px; }

/* ===================== بلوک‌های صفحه‌ساز ===================== */
/* همهٔ این‌ها روی همان متغیرها و اجزای سیستم طراحی سوارند، تا صفحه‌ای
   که ویراستار می‌سازد با بقیهٔ سایت یکدست بماند. */

.bk-split__media { display: flex; align-items: center; }

.bk-stats__note {
  margin-top: 1.2rem; font-size: .82rem; text-align: center; color: var(--muted);
}
.bk-stats__note.is-dark { color: rgba(255, 255, 255, .55); }

.bk-figure, .bk-gallery__item { margin: 0; }
.bk-figure img, .bk-gallery__item img {
  width: 100%; height: auto; display: block;
  border-radius: var(--frame-sm); border: 1px solid var(--line);
}
.bk-figure figcaption, .bk-gallery__item figcaption {
  margin-top: .6rem; font-size: .84rem; color: var(--muted); line-height: 1.9;
}

.bk-gallery__item img { aspect-ratio: 4 / 3; object-fit: cover; }

.bk-quote {
  margin: 0; padding: 1.6rem 1.8rem;
  border-inline-start: 3px solid var(--gold);
  background: var(--mist); border-radius: var(--frame-sm);
}
.bk-quote blockquote {
  margin: 0; border: 0; padding: 0; background: none;
  font-size: 1.12rem; line-height: 2.1; color: var(--ink); font-weight: 600;
}
.bk-quote figcaption { margin-top: .9rem; font-size: .88rem; color: var(--muted); }

.bk-spacer--sm { height: clamp(1.2rem, 3vw, 2rem); }
.bk-spacer--md { height: clamp(2rem, 5vw, 3.5rem); }
.bk-spacer--lg { height: clamp(3rem, 8vw, 6rem); }
.bk-spacer { display: flex; align-items: center; }
.bk-spacer .wrap { width: 100%; }
.bk-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

@media (max-width: 640px) {
  .bk-quote { padding: 1.2rem 1.3rem; }
  .bk-quote blockquote { font-size: 1.02rem; line-height: 2; }
}

/* قاب تصویر وقتی عکس واقعی دارد، نه نشان تزئینی */
.plate--photo { background: var(--mist); }
.plate--photo::before { display: none; }
.plate--photo img {
  width: 100%; height: 100%; object-fit: cover; opacity: 1;
  aspect-ratio: 4 / 3;
}

/* نوار آمار صفحه‌ساز: تعداد ستون از خود داده می‌آید، ولی موبایل همیشه
   دو ستون است — نقطهٔ شکست باید بر متغیر مقدم بماند. */
.stats { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); }
@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------- نقش عضو تیم ----------
   پیش از این استایل درون‌خطی با --gold-2 بود: روی سفید نسبت ۳.۰۵ می‌داد
   و از AA رد نمی‌شد. طلاییِ متنی همان رنگ است، فقط تیره‌تر. */
.team__role { color: var(--gold-text); font-weight: 700; font-size: .9rem; }

@media (hover: none) and (pointer: coarse) {
  /* شماره و ایمیل روی کارت تمـاس — پرکاربردترین پیوندهای این صفحه */
  .cinfo dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   کلاس‌هایی که ویرایشگر متن در محتوا می‌گذارد
   --------------------------------------------------------------------------
   این‌ها همان کلاس‌هایی‌اند که در پنل انتخاب می‌شوند و باید روی سایت هم
   همان معنی را بدهند. همه نسبی‌اند تا روی گوشی خودشان را جمع کنند.
   ========================================================================== */
.prose img { max-width: 100%; height: auto; border-radius: 14px 3px 14px 3px; }

.prose img.ql-w-25 { width: 25%; }
.prose img.ql-w-50 { width: 50%; }
.prose img.ql-w-75 { width: 75%; }
.prose img.ql-img-start  { float: inline-start; margin: .35rem 0 1rem 1.1rem; }
.prose img.ql-img-end    { float: inline-end;   margin: .35rem 1.1rem 1rem 0; }
.prose img.ql-img-center { display: block; margin: 1.3rem auto; float: none; }

/* روی گوشی هیچ تصویری شناور و باریک نمی‌شود: متن کنار تصویر ۲۵ درصدی
   در عرض ۳۶۰ پیکسل به دو سه نویسه در هر سطر می‌رسد و ناخواناست. */
@media (max-width: 640px) {
  .prose img.ql-w-25, .prose img.ql-w-50, .prose img.ql-w-75 { width: 100%; }
  .prose img.ql-img-start, .prose img.ql-img-end {
    float: none; display: block; margin: 1.2rem auto;
  }
}

.prose .ql-align-center { text-align: center; }
.prose .ql-align-left { text-align: left; }
.prose .ql-align-right { text-align: right; }
.prose .ql-align-justify { text-align: justify; }
.prose .ql-direction-rtl { direction: rtl; }
.prose .ql-indent-1 { padding-inline-start: 2rem; }
.prose .ql-indent-2 { padding-inline-start: 4rem; }
.prose .ql-indent-3 { padding-inline-start: 6rem; }
.prose .ql-indent-4 { padding-inline-start: 8rem; }