/* ═══════════════════════════════════════════════════════════════
   لایه‌ی فارسی — آخرین استایلی که بارگذاری می‌شود

   کارش سه چیز است:
   ۱. قلم لاتین قالب را با قلم فارسی عوض کند
   ۲. چیزهایی را درست کند که rtlcss نمی‌تواند خودکار بفهمد
   ۳. مقیاس تایپوگرافی را برای فارسی تنظیم کند

   ⚠️ main.rtl.css را دستی ویرایش نکن — با ساخت بعدی بازنویسی می‌شود.
      هر اصلاحی اینجا بنویس.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
/* قلم واژه‌نگار — SIL Open Font License، میزبانی روی هاست خودی.
   فقط برای «ASRIN VAKILI» در هیرو و فوتر؛ متن سایت با Vazirmatn است. */
@font-face{font-family:"Anton";src:url("../fonts/Anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo Black";src:url("../fonts/ArchivoBlack.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --av-fa:"Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif;
  --av-mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  /* واژه‌نگار لاتین. Anton به‌عنوان جانشین می‌ماند — برای برگشت به آن:
     جای دو نام را عوض کن، `11.5vw` را در هر دو جا (هیرو و پاصفحه) به
     `18.5vw` ببر، `--word-stretch` را ۱ کن و فاصله‌ی `.667em` را به
     `.55em` برسان (حروف Anton باریک‌ترند). */
  --av-display:"Archivo Black","Anton",var(--av-fa);
}

/* ── ۱. قلم: هر جا قالب قلم لاتین گذاشته بود ── */
html[lang="fa-IR"],
body,
h1,h2,h3,h4,h5,h6,
p,a,span,li,td,th,label,input,textarea,select,button,
.tw-main-menu-content,
[class*="tw-text-"],
[class*="fw-"]{
  font-family:var(--av-fa) !important;
}

/* 🔴 استثنا برای واژه‌نگار.
   قانون بالا `span` را هم شامل می‌شود و آن هم `!important` دارد؛
   چون متنِ واژه‌نگار داخل `<span>` است، Vazirmatn به آن تحمیل
   می‌شد و **واژه‌نگار هیچ‌وقت با قلم لاتین رندر نمی‌شد** — نه در
   هیرو، نه در پاصفحه. اندازه‌گیری روی سایت زنده: عرض ۵٫۹۸em بود
   که با هیچ‌کدام از Anton (۴٫۵۸) و Archivo (۷٫۵۱) نمی‌خواند.
   همان چیزی که «باریک و ضعیف» به نظر می‌رسید. */
.av-hero-word,.av-hero-word span,
.av-footer-wordmark,.av-footer-wordmark span{
  font-family:var(--av-display) !important;
}

/* عدد و کد لاتین بماند — خواناتر است */
.av-mono,.av-num,code,kbd,pre,samp,
.tw-hover-btn-circle-dot{
  font-family:var(--av-mono) !important;
}

/* ── ۲. تایپوگرافی فارسی ──
   خط فارسی نقطه و سرکش دارد؛ با line-height لاتین به هم می‌چسبد. */
body{line-height:1.9;letter-spacing:0 !important}
h1,h2,h3,h4,h5,h6{line-height:1.45 !important;letter-spacing:-.015em !important}
p,li{line-height:2}

/* عنوان‌های خیلی درشت قالب برای انگلیسی تنظیم شده بود */
.banner-three-title{
  font-size:clamp(3rem,11vw,9rem) !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
}
.tw-char-animation{line-height:1.5 !important}

/* ── ۳. اصلاح‌هایی که rtlcss خودکار نمی‌فهمد ── */

/* جهت پایه */
html{direction:rtl}
body{direction:rtl;text-align:right}

/* آیکون‌های جهت‌دار باید آینه شوند.
   ⚠️ `.tw-hover-btn i` را اینجا نیاور — نقطه‌ی داخل دکمه هم `i` است
   و آینه شدنش موقعیتش را خراب می‌کند. */
.ph-arrow-right,.ph-arrow-up-right,.ph-caret-right,
.service-three-arrow img,
.service-three-number img{transform:scaleX(-1)}

/* 🔴 نقطه‌ی دنبال‌کننده‌ی دکمه را جابه‌جا نکن.
   custom-gsap.js موقعیتش را با top/left از روی مکان ماوس ست می‌کند؛
   هر inset منطقی اینجا با آن می‌جنگد و افکت هاور را می‌کشد.
   (این دقیقاً همان چیزی بود که هاور نارنجی را از کار انداخت.) */

/* مارکی: در راست‌چین باید از سمت مخالف بیاید.
   افزونه jquery.marquee با data-direction کنترل می‌شود؛
   اینجا فقط ترتیب بصری آیتم‌ها اصلاح می‌شود. */
.marquee-wrapper,.brand-three-wrapper{direction:ltr}
.marquee-wrapper > *,.brand-three-wrapper > *{direction:rtl}

/* اسلایدر Swiper در راست‌چین */
.swiper{direction:rtl}
.swiper-button-next,.swiper-button-prev{transform:scaleX(-1)}

/* لیست‌ها */
ul,ol{padding-inline-start:0;padding-inline-end:0}
.banner-three-list ul{padding-inline-start:0}

/* فرم‌ها */
input,textarea,select{text-align:right;direction:rtl}
input[type="email"],input[type="url"],input[type="tel"],.av-ltr{
  direction:ltr;text-align:left;font-family:var(--av-mono) !important
}

/* اعداد جدول‌ها نلرزند */
.purecounter,.tw-counter,.av-num{font-variant-numeric:tabular-nums}

/* ── ۴. اشاره‌گر سفارشی: روی لمس خاموش ── */
@media (hover:none),(pointer:coarse){
  .tw-magic-cursor .cursor,
  .tw-magic-cursor .cursor-follower{display:none !important}
}

/* ── ۵. حرکت کاهش‌یافته ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }
  [data-aos]{opacity:1 !important;transform:none !important}
}

/* ── ۶. اجزای افزوده‌ی خودمان ── */

/* فرم بریف */
.av-form{display:flex;flex-direction:column;gap:1.25rem;max-width:52rem}
.av-row{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr}
@media(max-width:44rem){.av-row{grid-template-columns:1fr}}
.av-field{display:flex;flex-direction:column;gap:.5rem}
.av-field > span{font-size:.8125rem;font-weight:500;opacity:.75}
.av-field > span b{color:#e63946}
.av-field input,.av-field select,.av-field textarea{
  font-size:1rem;padding:.9rem 1.1rem;width:100%;
  border:1px solid rgba(0,0,0,.14);border-radius:.5rem;background:#fff;
  transition:border-color .3s,box-shadow .3s}
.av-field textarea{min-height:9rem;resize:vertical}
.av-field input:focus,.av-field select:focus,.av-field textarea:focus{
  outline:none;border-color:currentColor;box-shadow:0 0 0 3px rgba(0,0,0,.06)}

/* هانی‌پات — از چشم پنهان، برای ربات در DOM */
.av-hp{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

.av-note{padding:.9rem 1.15rem;border-inline-start:3px solid currentColor;
  background:rgba(0,0,0,.04);border-radius:.35rem;margin-bottom:1.25rem}
.av-note.is-error{border-inline-start-color:#e63946}

/* مشخصات صفحه‌ی محصول */
.av-specs{list-style:none;display:flex;flex-direction:column;gap:1rem;padding:0}
.av-specs li{display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.75rem;border-bottom:1px solid rgba(0,0,0,.1)}
.av-specs b{font-weight:700}
.av-specs span{opacity:.7}
.av-flow-steps{counter-reset:av-s;list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem}
.av-flow-steps li{counter-increment:av-s;position:relative;padding-inline-start:2.2rem;
  padding-block:.5rem;border-bottom:1px solid rgba(0,0,0,.08)}
.av-flow-steps li::before{content:counter(av-s,persian);position:absolute;
  inset-inline-start:0;font-family:var(--av-mono);font-size:.75rem;opacity:.6}

/* منوی موبایل آفکانواس — دکمه‌ی بستن سمت درست */
.tw-offcanvas-2-close{inset-inline-end:1.5rem;inset-inline-start:auto}

/* تور ایمنی پیش‌لودر: حروف جدا در راست‌چین برعکس می‌شوند («NIRSA»).
   `dir="ltr"` در header.php هست؛ این هم برای وقتی که مارک‌آپ عوض شود. */
.preloader .load-text{direction:ltr;unicode-bidi:isolate}

/* ── ۷. کلاس‌های اجباری وردپرس ──
   قالب Unifex اینها را ندارد؛ بدونشان متن‌های دسترس‌پذیری
   وسط صفحه ظاهر می‌شوند و افزونه‌ها هم گله می‌کنند. */
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.screen-reader-text:focus{position:fixed !important;inset-block-start:1rem;inset-inline-start:1rem;
  width:auto;height:auto;clip-path:none;padding:.85rem 1.5rem;background:#fff;color:#000;
  z-index:99999;border-radius:.4rem;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.skip-link:focus{outline:2px solid currentColor;outline-offset:2px}

.alignleft{float:inline-start;margin-inline-end:1.5rem;margin-block-end:1rem}
.alignright{float:inline-end;margin-inline-start:1.5rem;margin-block-end:1rem}
.aligncenter{display:block;margin-inline:auto}
.alignwide,.alignfull{max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:.875rem;opacity:.65;margin-block-start:.6rem;text-align:center}
.sticky,.gallery-caption,.bypostauthor{}

/* صفحه‌بندی */
.av-pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.av-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:2.75rem;block-size:2.75rem;padding:0 .75rem;border:1px solid rgba(0,0,0,.15);
  border-radius:.4rem;font-family:var(--av-mono);transition:background .3s,color .3s}
.av-pagination .page-numbers.current,
.av-pagination .page-numbers:hover{background:#000;color:#fff;border-color:#000}

/* بدنه‌ی محتوا */
.av-single-body > * + *{margin-block-start:1.25rem}
.av-single-body h2{font-size:1.9rem;margin-block-start:2.5em}
.av-single-body h3{font-size:1.45rem;margin-block-start:2em}
.av-single-body ul,.av-single-body ol{padding-inline-start:1.4rem}
.av-single-body li{margin-block:.4rem}
.av-single-body img{border-radius:.5rem;height:auto}
.av-single-body blockquote{border-inline-start:3px solid currentColor;padding-inline-start:1.25rem;opacity:.85}

/* ═══════════════════════════════════════════════════════════
   اصلاحات پس از تست روی سایت زنده  —  ۲۰۲۶-۰۸-۲۷
   هرکدام یک ایراد اندازه‌گیری‌شده را حل می‌کند.
   ═══════════════════════════════════════════════════════════ */

/* ── ۱. ورودی‌های فرم فوتر ──
   🔴 کلاس `tw-h-18` در CSS قالب وجود ندارد، پس input ها
   دقیقاً ۰×۰ پیکسل رندر می‌شدند و جایی برای نوشتن نبود.
   (textarea سالم بود چون tw-h-196-px واقعی است.) */
.footer-three-form input[type="text"],
.footer-three-form input[type="email"],
.footer-three-form input[type="tel"]{
  display:block;width:100%;min-block-size:4.5rem;
  padding:1rem 1.75rem;font-size:1rem;line-height:1.8;
  color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.1);border-radius:.75rem}
.footer-three-form input::placeholder,
.footer-three-form textarea::placeholder{color:rgba(255,255,255,.45)}
.footer-three-form input:focus,
.footer-three-form textarea:focus{
  outline:none;border-color:var(--main-two-600,#ff5100);box-shadow:none}
.footer-three-form textarea{padding:1rem 1.75rem;color:#fff}

/* ── ۲. دکمه‌ی دایره‌ای بخش درباره ──
   فونت ۲۰۰ پیکسلی برای عدد لاتین «15+» طراحی شده بود.
   کلمه‌ی فارسی در آن اندازه می‌شکند و بیرون می‌زند. */
/* ⚠️ کف قبلی `11rem` بود یعنی ۱۷۶px — دکمه با کوچک شدن صفحه اصلاً
   جمع نمی‌شد. حالا از ۷rem شروع می‌شود و قلم هم با همان نسبت. */
.about-three-counter .tw-btn-circle{
  inline-size:clamp(7rem,14vw,15rem);block-size:clamp(7rem,14vw,15rem)}
.about-three-counter .tw-btn-circle-icon{
  font-size:clamp(1rem,2.5vw,3.4rem) !important;line-height:1.25 !important;
  /* 🔴 `nowrap` بود و در دایره‌ی کوچک بیرون می‌زد.
     شکستن **بین دو کلمه** مشکلی ندارد؛ آنچه ممنوع است شکستن
     داخل یک کلمه‌ی فارسی است — که با keep-all جلویش گرفته می‌شود. */
  white-space:normal;word-break:keep-all;overflow-wrap:normal;hyphens:none}
.about-three-counter .tw-btn-circle span{
  padding-inline:.6rem;text-wrap:balance;word-break:keep-all;hyphens:none}
.about-three-counter .tw-btn-circle .tw-text-2xl{
  font-size:.95rem !important;line-height:1.6 !important;white-space:normal}

/* ── ۳. تصاویر بخش حوزه‌های کاری ──
   ⚠️ نسخه‌ی اول این قانون اشتباه بود: چون سه عکسِ نامربوط با نسبت‌های
      ۰٫۷۸ و ۲٫۳۶ گذاشته بودم، مجبور شدم قاب ۴:۳ با سقف عرض ۱۵rem بزنم.
      نتیجه: تصویر نصفِ اندازه‌ی قالب مرجع دیده می‌شد.
   ✅ عکس‌های درست `service-three-thumb1..3.png` از قبل در بسته بودند:
      هر سه ۵۵۲×۲۵۷ یعنی نسبت ۲٫۱۵ — همان قاب کشیده‌ی مرجع. */
.service-three-thumb{flex:0 1 auto;inline-size:min(38%,552px)}
.service-three-thumb a{display:block;inline-size:100%}
.service-three-thumb img{
  inline-size:100%;block-size:auto;aspect-ratio:552/257;
  object-fit:cover;border-radius:1rem;display:block}
@media(max-width:767px){
  .service-three-thumb{display:none}   /* در موبایل جا ندارد */
}

/* ── ۴. متن غول‌پیکر پس‌زمینه‌ی نمونه‌کار ──
   ۴۱۵ پیکسل برای واژه‌ی فارسی بی‌قواره است؛ لاتین می‌ماند. */
/* 🔴 قالب برای این متن `font-size:642px` ثابت گذاشته و در چند بریک‌پوینت
   پله‌ای کمش می‌کند. «WORKS» با قلم مونواسپیس ۵ نویسه است، یعنی عرضش
   حدود ۳ برابر اندازه‌ی قلم — در ۶۴۲px می‌شود ~۱۹۰۰px و از کادر بیرون
   می‌زند؛ برای همین با تغییر اندازه‌ی پنجره نیمی از W بریده می‌شد.
   اندازه‌ی سیال، همیشه داخل کادر نگهش می‌دارد.

   🔴 ۲۹vw حاشیه‌ی امن نداشت. اندازه‌گیری روی سایت زنده: «WORKS» با این
      قلم عرضی برابر **۳٫۳۸۲ برابر** اندازه‌ی قلم دارد. با ۲۹vw:
        ۱۴۰۰px → متن ۱۳۷۳، فضا ۱۳۸۵ → حاشیه فقط ۱۲px  (۰٫۹٪)
        ۱۹۲۰px → متن ۱۸۸۳، فضا ۱۹۰۵ → حاشیه ۲۲px      (۱٫۲٪)
      یعنی همیشه مو را از ماست می‌کشید. کافی بود Vazirmatn دیر برسد و
      قلم جانشین کمی پهن‌تر باشد تا حرف آخر بریده شود — همان چیزی که
      بارها دیده شد.
   ✅ ۲۸vw حاشیه را به ~۵٪ می‌رساند (در ۱۹۲۰: ۸۷px). خودِ اندازه فقط
      ۳٪ کوچک‌تر می‌شود که به چشم نمی‌آید. */
.portfolio-three-shape-title{
  font-family:var(--av-mono);letter-spacing:-.02em;white-space:nowrap;
  font-size:min(642px,28vw) !important;
  /* 🔴 `direction:ltr` لازم است: در راست‌چین، متنی که از کادر بیرون
     می‌زند از سمت چپ بریده می‌شود — یعنی دقیقاً حرف W. با ltr و
     وسط‌چینی، اگر هم سرریز شود متقارن می‌شود، نه یک‌طرفه. */
  direction:ltr;text-align:center;
  inline-size:100%;max-inline-size:100%}

/* ── ۵. نوار بالا در عرض کوچک ──
   منوی افقی + شبکه‌ها + دکمه با هم جا نمی‌شدند و دکمه می‌شکست. */
.header-three-button .tw-hover-btn{white-space:nowrap}
.bar,.header-three .header-right{flex-wrap:nowrap}
/* (پلکان پنهان‌شدن در بخش ۶ انتهای فایل بازنویسی شد) */

/* ── ۶. محافظ خط چسبان فارسی ──
   اگر SplitText قبل از asrin.js اجرا شود و حروف را جدا کند،
   این دو قانون دست‌کم فاصله‌ی مصنوعی بینشان را صفر می‌کند تا
   کلمه کمتر بپاشد. راه‌حل اصلی در asrin.js است؛ این تور ایمنی است. */
.av-word-animation div[style*="inline-block"]{letter-spacing:0 !important;margin:0 !important}
.av-word-animation{word-spacing:normal;text-wrap:balance}

/* عنوان بخش درباره: متن بلند فارسی با فاصله‌ی خط درست */
.about-three-title{line-height:1.7 !important;text-wrap:balance}

/* ── ۷. متن‌های فارسی هرگز وسط کلمه نشکنند ── */
h1,h2,h3,h4,h5,h6,.tw-hover-btn,.btn,button,a.button{
  word-break:keep-all;overflow-wrap:normal;hyphens:none}

/* ═══════════════════════════════════════════════════════════
   ممیزی کامل سایت زنده  —  ۲۰۲۶-۰۸-۲۷ (دور دوم)
   هر قانون یک ایراد اندازه‌گیری‌شده را حل می‌کند.
   ═══════════════════════════════════════════════════════════ */

/* ── ۱. منوی بالا: سفید روی سفید بود، یعنی نامرئی ──
   اندازه‌گیری: color rgb(255,255,255) روی background rgb(255,255,255).
   منوی افقی قالب برای کشوی تیره ساخته شده بود، نه هدر روشن. */
.header-three .tw-main-menu-content > ul > li > a,
.header-menu .tw-main-menu-content a{
  color:#0d1216 !important;font-weight:600;font-size:.95rem;
  transition:color .3s}
.header-three .tw-main-menu-content > ul > li > a:hover,
.header-menu .tw-main-menu-content a:hover{color:var(--main-two-600,#ff5100) !important}
.header-menu .tw-main-menu-content > ul{
  display:flex;gap:1.75rem;align-items:center;margin:0;padding:0;list-style:none}

/* 🔴 برچسب فارسی داخل آیتم می‌شکست.
   اندازه‌گیری روی سایت زنده: «طراحی و توسعه‌ی سایت» عرض ۱۰۳px ولی
   ارتفاع ۱۶۷px — یعنی چهار سطر عمودی. علت: ul با flex-wrap:nowrap
   آیتم را فشرده می‌کرد و a با white-space:normal کلمه‌به‌کلمه می‌شکست.
   این در ۱۶۰۰px هم اتفاق می‌افتاد، نه فقط در عرض کم. */
.header-menu .tw-main-menu-content > ul > li{flex:0 0 auto}
.header-menu .tw-main-menu-content > ul > li > a{white-space:nowrap}

/* در عرض متوسط فاصله کمتر تا مجموع در نوار جا شود */
@media(max-width:1399.98px){
  .header-menu .tw-main-menu-content > ul{gap:1.15rem}
  .header-three .tw-main-menu-content > ul > li > a{font-size:.9rem}
}

/* ⚠️ آستانه از ۱۲۰۰ به ۱۴۰۰ رفت.
   اندازه‌گیری روی قالب اصلی: Unifex **اصلاً منوی افقی ندارد** —
   `.tw-main-menu-content` مخفی است و فقط کشوی همبرگری دارد. منوی افقی
   را من اضافه کردم، و شش برچسب بلند فارسی در نواری که برای این کار
   طراحی نشده، بین ۱۲۰۰ تا ۱۴۰۰ هنوز به هم می‌ریخت.

   هر دو با هم عوض می‌شوند: اگر فقط یکی جابه‌جا شود، بازه‌ای می‌ماند
   که اصلاً منو ندارد. */
@media(max-width:1399.98px){
  .header-menu.av-topbar{display:none !important}
  .header-three-menu{display:block !important}
}

/* آیکون‌های شبکه در هدر: تیره روی کادر روشن.
   🔴 هاور را دست نزن — قالب خودش درست عمل می‌کند:
        background: var(--main-two-600)   (نارنجی)
        color: hsl(var(--white))          (سفید)
   من قبلاً اینجا `color:نارنجی !important` گذاشته بودم — همان رفتاری
   که برای منو لازم بود — و نتیجه نارنجی روی نارنجی شد و آیکون ناپدید.
   حالا فقط سفید بودن آیکون را تضمین می‌کنیم. */
.header-three-social a{color:#0d1216 !important}
.header-three-social a:hover,
.header-three-social a:hover i,
.header-three-social a:focus-visible{color:#fff !important}

/* 🔴 لوگوی متنی هدر — «اسرین وکیلی» در کادر.
   قالب اصلی آنجا **تصویر** می‌گذارد که عرض ذاتی ثابت دارد و هرگز
   نمی‌شکند. ما متن گذاشته‌ایم، و چون کادر داخل یک `d-flex` است و هیچ
   محدودیتی ندارد، مرورگر در فشار تا حد «یک حرف در هر سطر» له‌اش
   می‌کند و کل ساختار هدر به‌هم می‌ریزد.

   دو قانون لازم است، نه یکی:
     `flex:0 0 auto` → کادر زیر عرض محتوا فشرده نشود
     `white-space:nowrap` → متن داخلش هم نشکند */
.header-three-logo{flex:0 0 auto}
.header-three-logo .link{display:inline-block;line-height:0}
.av-logo-text{
  display:inline-block;white-space:nowrap;
  font-size:clamp(.92rem,1.5vw,1.15rem);
  line-height:1.3;letter-spacing:-.01em}

/* ── لوگوی امضا ──
   اندازه‌گیری‌شده: نسبت ۱٫۴۵، ضخامت خط ۲٫۱۵٪ عرض.
   در ارتفاع ۵۲px ضخامت ۱٫۶px و در ۶۴px برابر ۲٫۰px می‌شود —
   یعنی از ۵۲ به بالا قطعاً خوانا است. ۶۴ را انتخاب کردیم. */
.av-logo-img{
  display:block;block-size:clamp(2.6rem,4.2vw,4rem);inline-size:auto}

/* 🔴 حالت روشن برای زمینه‌ی تیره (کشوی منو).
   `brightness(0)` هرچه هست را سیاه مطلق می‌کند، `invert(1)` سفیدش
   می‌کند. چون هنر تک‌رنگ است نتیجه دقیق است — و فایل دوم لازم نیست. */
.av-logo-img.is-light,
.tw-offcanvas-2-logo .av-logo-img,
.footer-three-area .av-logo-img{filter:brightness(0) invert(1)}

@media(max-width:575.98px){
  .header-three-logo{padding:9px 13px 7px}
  .av-logo-text{font-size:.9rem}
  .av-logo-img{block-size:2.4rem}
}

/* ── ۲. تصویر بخش درباره نامرئی بود ──
   اندازه‌گیری: opacity 0 روی .tw-anim-img. عکس لود شده بود (۶۵۵×۷۳۳)
   ولی منتظر انیمیشنی می‌ماند که همیشه اجرا نمی‌شود.
   🔴 اینجا نمی‌گذاریم عکس گروگان انیمیشن بماند. */
/* ⚠️ اینجا قبلاً `opacity:1 !important` بود تا تصویر نامرئی نماند.
   کار می‌کرد ولی **انیمیشن پرده‌ی باز شونده را هم می‌کشت** — مالک
   درست گفت که بخش درباره انیمیشن ندارد.

   اندازه‌گیری روی قالب اصلی: `.tw-clip-anim` با `opacity:0` شروع
   می‌شود و GSAP بازش می‌کند. پس نباید با CSS مجبورش کرد.

   ✅ به‌جایش تور ایمنی زمان‌دار در asrin.js: اگر ۲ ثانیه بعد از
      load انیمیشن اجرا نشده بود، آن‌وقت آشکارش می‌کنیم. */
.about-three-thumb img{
  inline-size:100%;block-size:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1rem}

/* 🔴 تصویر بخش «درباره» بسیار درشت‌تر از ستون متن بود و زیر متن فضای
   خالی بزرگی می‌ماند. قالب برایش `max-width:725px` گذاشته بود که برای
   متن انگلیسیِ کوتاه‌تر تنظیم شده. دو اصلاح:
     ۱. سقف عرض کمتر تا با حجم متن هم‌وزن شود
     ۲. هم‌ترازی عمودی وسط، تا فضای خالی زیر متن نماند */
/* ⚠️ سقف ۲۶rem که اول گذاشتم، بیش از حد کوچکش کرد.
   اندازه‌گیری روی قالب اصلی در ۱۴۴۰px: تصویر ۶۸۹×۷۷۱ و ستون متن
   ۶۸۹×۹۱۶ — یعنی **هم‌عرض‌اند** و متن حتی بلندتر است. پس در دسکتاپ
   نباید محدودش کرد؛ فقط هم‌ترازی عمودی لازم است. */
/* ⚠️ `align-items:center` بود — تصویر و متن هر دو وسط‌چین عمودی
   می‌شدند و چون تصویر بلندتر است، بالا و پایینش از متن بیرون می‌زد.
   در قالب مرجع بالای تصویر و بالای متن هم‌تراز است. */
.about-three-top .row{align-items:flex-start}
.about-three-thumb{max-inline-size:100%;margin-inline:auto}

/* ستون متن یک ستون flex می‌شود تا دکمه بتواند به کف بچسبد */
.about-three-right{display:flex;flex-direction:column;block-size:100%}

@media(max-width:1199.98px){
  /* وقتی ستون‌ها روی هم می‌روند، قالب اصلی تصویر را تمام‌عرض می‌کند
     (۹۸۵×۱۱۰۳ در ۱۰۲۴px) که واقعاً صفحه را می‌بلعد. اینجا عمداً از
     اصل فاصله می‌گیریم و سقف می‌گذاریم. */
  .about-three-thumb{max-inline-size:min(100%,30rem)}
}
@media(max-width:767.98px){
  .about-three-thumb{max-inline-size:min(100%,22rem)}
}

/* تیتر بخش «درباره» — در قالب اصلی در ۴۸۰px برابر ۳۲px است.
   مال ما تا نزدیک تبلت هم غول‌پیکر می‌ماند، پس در کل بازه‌ی زیر
   ۱۲۰۰px سیال می‌شود. */
@media(max-width:1199.98px){
  .about-three-title{
    font-size:clamp(1.3rem,3.4vw,2.2rem) !important;line-height:1.7 !important}
}

/* دکمه‌ی گرد «درباره من» وسط فضای خالی زیر متن.
   `!important` لازم است چون کلاس `d-inline-block` بوت‌استرپ (که از
   مارک‌آپ برداشته شد) و قانون‌های خود قالب هم با !important می‌آیند. */
/* ⚠️ قبلاً وسط‌چین بود. در قالب مرجع دکمه در **کف** ستون متن و در
   لبه‌ی نزدیک به تصویر می‌نشیند (اندازه‌گیری در ۱۴۴۰px: x دکمه دقیقاً
   برابر x شروع ستون متن). در راست‌چین این یعنی سمت راست، یعنی همان
   طرفی که تصویر است.

   `margin-block-start:auto` دکمه را به کف ستون می‌چسباند، پس فضای
   خالیِ زیر متن پر می‌شود به‌جای اینکه وسط بماند. */
/* ⚠️ اول `start` بود (سمت راست، کنار تصویر) از روی قالب مرجع. ولی در
   چیدمان ما فضای خالی سمت **چپ** می‌افتاد، پس مالک خواست دکمه آن طرف
   برود. در راست‌چین `end` یعنی چپ. */
.about-three-counter{
  display:block !important;text-align:end;
  margin-block-start:auto;padding-block-start:clamp(1.5rem,4vh,3rem)}
@media(max-width:1199.98px){
  /* وقتی ستون‌ها روی هم می‌روند، لبه معنا ندارد → وسط‌چین */
  .about-three-counter{text-align:center;margin-block-start:0}
}
.about-three-counter .tw-hover-btn-wrapper{display:inline-block}

/* پاراگراف‌های بخش «درباره» — اندازه‌ی ثابت `tw-text-xl` در عرض کم
   نامرتب می‌شد. سیال + بدون شکستن وسط کلمه‌ی فارسی. */
/* ⚠️ سقف `58ch` گذاشته بودم که در ستون ۶۴۴ پیکسلی برابر ۵۰۶px می‌شد —
   یعنی ۱۳۸ پیکسل از عرض ستون خالی می‌ماند و همان فضای مرده‌ای بود که
   مالک نشان داد. سقف برداشته شد تا متن تمام ستون را پر کند. */
.about-three-right p{
  font-size:clamp(.95rem,1.2vw,1.15rem) !important;
  line-height:2.05;text-wrap:pretty;
  word-break:keep-all;overflow-wrap:normal;hyphens:none;
  max-inline-size:none}
@media(max-width:1199.98px){
  .about-three-right p{margin-block-end:1.4rem !important}
}

/* ── ۳. جعبه‌ی متن هیرو برای فارسی خیلی باریک بود ──
   اندازه‌گیری: متن ۲۵.۶px در جعبه‌ی ۲۲۰px → هر کلمه یک سطر.
   قالب برای انگلیسی کوتاه ۲۶۰px گذاشته بود. */
.banner-three-left{max-inline-size:min(34rem,92vw) !important;padding:2.2rem !important}
.banner-three-left-title{
  font-size:clamp(1.05rem,1.7vw,1.4rem) !important;line-height:1.8 !important;
  word-break:keep-all;overflow-wrap:normal;text-wrap:pretty}
@media(max-width:991px){
  .banner-three-left{max-inline-size:100% !important;display:block !important}
}

/* ── روکش «دیدن» روی تصویر نمونه‌کار ──
   جایگزین `data-cursor` قالب که به اشاره‌گر سفارشی وابسته بود و
   عملاً فقط نشانگر را ناپدید می‌کرد بدون اینکه چیزی نشان دهد. */
.av-thumb-hover > a{position:relative;overflow:hidden}
.av-thumb-hover img{transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .4s}
.av-view{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(50%,-50%) scale(.6);
  inline-size:clamp(5rem,9vw,7.5rem);block-size:clamp(5rem,9vw,7.5rem);
  border-radius:50%;background:#fff;color:#02080d;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;opacity:0;pointer-events:none;
  box-shadow:0 10px 30px rgba(2,8,13,.22);
  transition:opacity .35s,transform .35s cubic-bezier(.22,.61,.36,1)}
.av-view i{font-size:1.15rem;line-height:1}
.av-view b{font-size:.85rem;font-weight:700;line-height:1}

.av-thumb-hover:hover .av-view,
.av-thumb-hover:focus-within .av-view{opacity:1;transform:translate(50%,-50%) scale(1)}
.av-thumb-hover:hover img{transform:scale(1.05);filter:brightness(.82)}

@media(hover:none),(pointer:coarse){
  /* روی لمس «هاور» معنا ندارد؛ روکش همیشه ملایم دیده شود */
  .av-view{opacity:.92;transform:translate(50%,-50%) scale(.85)}
}

/* دکمه‌ی گرد «دیدن همه‌ی نمونه‌کارها» — هم‌سبک با «درباره من» */
/* 🔴 پس‌زمینه‌ی دکمه شفاف بود (اندازه‌گیری: rgba(0,0,0,0)) و روی متن
   غول‌پیکر مشکی «WORKS» می‌افتاد و ناخوانا می‌شد. */
.av-round-cta .tw-btn-circle{
  inline-size:clamp(8rem,15vw,13rem);block-size:clamp(8rem,15vw,13rem);
  background:#fff;box-shadow:0 10px 34px rgba(2,8,13,.16)}
.av-round-cta .tw-btn-circle:hover{background:#fff}
.av-round-cta .tw-btn-circle-icon{
  font-size:clamp(.85rem,1.35vw,1.1rem) !important;line-height:1.5 !important;
  padding-inline:1rem;text-wrap:balance;
  word-break:keep-all;overflow-wrap:normal;hyphens:none}

/* ── ۴. قاب یکسان برای تصاویر نمونه‌کار ──
   تصاویر واقعی نسبت‌های متفاوت دارند (۵۲۰×۶۲۶ عمودی در قاب افقی). */
.portfolio-thumb img,
.portfolio-three-item .portfolio-thumb img{
  inline-size:100%;block-size:auto;aspect-ratio:16/11;
  object-fit:cover;object-position:center;border-radius:1rem;display:block}

/* نمونه‌کار بدون تصویر شاخص — به‌جای قاب خالی، بلوک آبرومند */
.portfolio-three-empty{
  aspect-ratio:16/11;inline-size:100%;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:2rem;font-family:var(--av-display,inherit);font-size:clamp(1.1rem,2vw,1.6rem);
  font-weight:700;color:#0d1216;
  background:linear-gradient(135deg,#ececec 0%,#f7f7f7 60%,#e4e4e4 100%);
  border:1px solid rgba(0,0,0,.06)}

/* 🔴 ایرادِ خودِ قالب: بخش works در بازه‌ی ~۱۵۰۰ تا ۱۵۹۸ به هم می‌ریخت.

   قالب برای عرض آیتم یک **نردبان ثابت** دارد:
     ≤۱۶۹۹ → ۷۸۰px · ≤۱۴۹۹ → ۶۸۰ · ≤۱۳۹۹ → ۵۸۰ · ≤۱۱۹۹ → ۴۷۰
   ولی ظرف `d-flex flex-wrap` است و عرضش پیوسته تغییر می‌کند.

   اندازه‌گیری در ۱۵۸۰px: ظرف ۱۵۴۱ بود و دو آیتمِ ۷۸۰ می‌شد ۱۵۶۰ —
   **۱۹ پیکسل بیشتر**. پس ردیف می‌شکست و چیدمان تک‌ستونی می‌شد.

   چرا آن‌قدر زشت می‌شد: قالب به آیتم‌های زوج `margin-top:617px`
   می‌دهد تا دو ستون **پلکانی** بسازد. در یک ستون، همان ۶۱۷ پیکسل
   تبدیل به یک حفره‌ی خالی وسط بخش می‌شود.

   ✅ به‌جای عدد ثابت، نسبت: `50% - 10px` همیشه دو تا در یک ردیف جا
      می‌شود، هر چقدر هم ظرف عوض شود. سقف ۸۲۵ همان سقف خود قالب است.
      زیر ۹۹۲ دست نمی‌زنیم — آنجا قالب عمداً یک‌ستونی است.

   اندازه‌گیری بعد از اصلاح — تعداد ستون در
   ۱۹۲۰/۱۷۰۰/۱۵۸۰/۱۵۵۰/۱۴۵۰/۱۲۵۰/۱۰۵۰ همه ۲، و در ۹۰۰ یک. */
@media(min-width:992px){
  .portfolio-three-item{max-inline-size:min(825px,calc(50% - 10px))}
}

/* ── ۵. پین بخش works ──
   ScrollTrigger این را ثابت نگه می‌دارد. اگر ScrollSmoother نباشد
   ممکن است جا بیفتد، پس حداقل چسبندگی بومی می‌دهیم. */
.portfolio-three-shape{will-change:transform}

/* ── ۶. نوار بالا: منو و شبکه‌ها در یک کادر ── */
.av-topbar{gap:2rem}
.av-topbar-social ul{display:flex;gap:.25rem;margin:0;padding:0;list-style:none}
.av-topbar-social a{
  inline-size:2.4rem;block-size:2.4rem;display:inline-flex;
  align-items:center;justify-content:center;font-size:1.05rem;
  border-radius:.5rem;transition:background .3s,color .3s}
.av-topbar-social a:hover{background:rgba(0,0,0,.06)}

/* پلکان پنهان‌شدن — بازنویسی قواعد قبلی */

/* 🔴 اینجا **۸۹ پیکسل سرریز افقی** ساخته می‌شد.
   آستانه‌ی این قانون ۱۳۹۹ بود ولی منوی افقی تا ۱۴۰۰ نمایش داده
   می‌شود، پس در بازه‌ی ۱۴۰۰ تا ~۱۵۵۰ **هر دو** روی نوار بودند.

   اندازه‌گیری روی سایت زنده در ۱۴۳۱px:
     لوگو ۱۲۳ + منو ۹۴۴ + شبکه‌ها ۲۵۰ + دکمه ۱۵۹ + فاصله ۳۲ = ۱۵۰۸
     ولی عرض داخلی نوار فقط ۱۳۹۲ بود → ۱۱۷ پیکسل کم می‌آورد.
   نتیجه: کل صفحه اسکرول افقی می‌گرفت (سرریز ۱۱۹ در ۱۴۰۰px).

   ✅ آستانه به ۱۶۸۰ رفت. اندازه‌گیری بعد از اصلاح — سرریز در
      ۳۹۰ / ۱۲۸۰ / ۱۴۰۰ / ۱۵۰۰ / ۱۵۹۹ / ۱۶۰۰ / ۱۶۲۰ / ۱۹۲۰: صفر.

   ⚠️ چرا ۱۶۸۰ و نه ۱۶۰۰: در ۱۶۰۰ فقط ۴۶ پیکسل فضای آزاد می‌ماند.
      عرض ۹۴۴ پیکسلیِ منو به رندر شدن با **Vazirmatn** وابسته است؛
      اگر قلم بارگذاری نشود و Tahoma جایش بنشیند، منو چند درصد
      پهن‌تر می‌شود و ۴۶ پیکسل کافی نیست. در ۱۶۸۰ حاشیه ۱۲۶ پیکسل
      است — جای تنفس دارد.

   آیکون‌های شبکه در کشوی همبرگری و پاصفحه هم هستند، پس چیزی از
   دست نمی‌رود. */
@media(max-width:1679.98px){ .av-topbar-social{display:none !important} }
@media(max-width:991px){  .av-topbar{display:none !important} }
@media(max-width:575px){  .header-three-button{display:none !important} }

/* ═══════════════════════════════════════════════════════════
   دور سوم  —  ۲۰۲۶-۰۸-۲۷
   ═══════════════════════════════════════════════════════════ */

/* ── کارت‌های شمارنده‌ی هیرو ──
   اندازه‌گیری: عرض ۲۲۰px، متن فارسی در ۳ سطر با ۲.۷ کلمه/سطر.
   قالب برای برچسب کوتاه انگلیسی ساخته بود. */
.banner-three-counter-item{
  min-inline-size:min(20rem,80vw) !important;padding:1.5rem 1.75rem !important}
.banner-three-counter-paragraph{
  font-size:1rem !important;line-height:1.75 !important;
  word-break:keep-all;overflow-wrap:normal;text-wrap:pretty}
.banner-three-right{max-inline-size:min(22rem,90vw)}
@media(max-width:991px){
  .banner-three-counter-item{min-inline-size:100% !important}
  .banner-three-right{max-inline-size:100%}
}

/* ── بخش فراخوان: متن توخالی + دکمه ── */
.av-cta{background:#fff;padding-block:clamp(4rem,9vw,7rem)}
.av-cta-divider{
  inline-size:4.5rem;block-size:4.5rem;margin:0 auto clamp(2.5rem,5vw,4rem);
  border:1px solid rgba(0,0,0,.14);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff}
.av-cta-dot{inline-size:.85rem;block-size:.85rem;border-radius:50%;
  background:var(--main-two-600,#ff5100)}

/* 🔴 خط دور متن فارسی: ضخامت کم بماند.
   با ۱px نقاط اتصال حروف کلفت و کثیف می‌شوند. */
.av-cta-title{
  font-size:clamp(1.9rem,5.2vw,3.6rem) !important;
  line-height:1.6 !important;font-weight:900;
  color:transparent;
  -webkit-text-stroke-width:.6px;
  -webkit-text-stroke-color:rgba(13,18,22,.55);
  text-wrap:balance;word-break:keep-all}
@media(max-width:575px){
  /* در اندازه‌ی کوچک، خط دور خوانایی را می‌کشد */
  .av-cta-title{color:#0d1216;-webkit-text-stroke-width:0}
}

/* ── فوتر: فهرست تماس ── */
.av-contact-list{list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:1.35rem}
/* ⚠️ ایمیل با کلاس `.av-ltr` می‌آید تا نشانی لاتین از چپ خوانده شود،
   ولی بقیه‌ی ردیف‌ها راست‌چین بودند و ایمیل تنها سمت چپ می‌افتاد.
   وسط‌چین کردن کل فهرست، هر دو جهت را با هم آشتی می‌دهد. */
.av-contact-list li{
  display:flex;flex-direction:column;gap:.3rem;align-items:center;text-align:center;
  padding-block-end:1.15rem;border-block-end:1px solid rgba(255,255,255,.12)}
.av-contact-list .av-ltr{text-align:center}
.av-contact-list li:last-child{border-block-end:0}
.av-contact-label{font-size:.8125rem;color:rgba(255,255,255,.5);
  letter-spacing:.04em}
.av-contact-value{font-size:1.15rem;color:#fff;font-weight:500;
  transition:color .3s}
a.av-contact-value:hover{color:var(--main-two-600,#ff5100)}

.av-foot-links{list-style:none;padding:0}
.av-foot-links a{color:rgba(255,255,255,.8);font-size:1rem;transition:color .3s}
.av-foot-links a:hover{color:var(--main-two-600,#ff5100)}

/* ── نام بزرگ لاتین ته فوتر ── */
.av-footer-wordmark{
  inline-size:100%;text-align:center;line-height:.85;
  padding-block:clamp(1rem,3vw,2.5rem);overflow:hidden;user-select:none}
.av-footer-wordmark span{
  display:block;font-weight:400;
  /* فاصله‌ی طبیعیِ این قلم ۰٫۳۳em است؛ `word-spacing` آن را به
     همان یک‌حرفیِ هیرو می‌رساند. ۹۴٪ ÷ ۸٫۱۸em ≈ ۱۱٫۵vw */
  /* 🔴 کف قبلاً ۳rem بود. با این قلمِ پهن، در صفحه‌ی ۳۲۰–۳۹۰ پیکسلی
     کف روی ۱۱٫۵vw غالب می‌شد و متن از عرض صفحه می‌زد بیرون. */
  font-size:clamp(2.2rem,11.5vw,12rem);letter-spacing:.015em;
  word-spacing:.334em;
  color:transparent;-webkit-text-stroke-width:1px;
  -webkit-text-stroke-color:rgba(255,255,255,.28);
  white-space:nowrap}

/* 🔴 تصویر پس‌زمینه‌ی فوتر حذف شد (شرحش در footer.php).
   این قانون به‌عنوان تور ایمنی می‌ماند: اگر روزی دموی وودمارت یا یک
   افزونه همان مارک‌آپ را برگرداند، دست‌کم زیر محتوا بماند نه رویش. */
.footer-three-bg-shape,
.footer-three-bg-shape img{display:none !important}

/* فوتر خودش پس‌زمینه‌ی تیره دارد (`rgb(1,4,6)`)؛ این فقط تضمین می‌کند
   که اگر قانونی آن را شفاف کرد، متن سفید روی سفید نیفتد. */
.footer-three-area{background-color:#010406}
.footer-three-area > .container,
.footer-three-border{position:relative;z-index:2}

/* آیکون‌های شبکه در فوتر — هاور نارنجی با آیکون سفید.
   هم‌رفتار با آیکون‌های هدر، تا کل سایت یک زبان داشته باشد. */
.footer-three-social a:hover,
.footer-three-social a:hover i,
.footer-three-social a:focus-visible{
  background:var(--main-two-600,#ff5100) !important;color:#fff !important}

/* عکس کارت فوتر — قاب ثابت تا هر تصویری بگذاری ردیف به‌هم نریزد */
.footer-three-top-thumb img{
  aspect-ratio:4/5;object-fit:cover;display:block}

/* دکمه‌ی گرد برگشت در فوتر حذف شد — قانون‌هایش هم برداشته شدند.
   (تکراری بود و کار هم نمی‌کرد؛ توضیح کامل در footer.php) */

/* ── دکمه‌ی شناور برگشت به بالا ── */
.back-to-top-wrapper{inset-inline-start:2rem;inset-inline-end:auto}
.back-to-top-btn{
  inline-size:100%;block-size:100%;border-radius:50%;border:0;
  background:var(--main-two-600,#ff5100);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.back-to-top-btn svg{transform:none}

/* ── بخش برندها: موقع اسکرول توی هم می‌رفتند ──
   ستون‌های خالی + ارتفاع نابرابر باعث همپوشانی می‌شد. */
.brand-three-area .row{align-items:stretch}
.brand-three-item{
  min-block-size:7.5rem;display:flex;align-items:center;justify-content:center;
  padding:1.25rem;margin-block-end:.75rem;position:relative;overflow:hidden}
.brand-three-item img{max-inline-size:100%;block-size:auto;object-fit:contain}
.brand-active-media,.brand-hover-media{
  display:flex;align-items:center;justify-content:center;
  inline-size:100%;block-size:100%}
.brand-hover-media{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.brand-three-item:hover .brand-hover-media{opacity:1}
.brand-three-item:hover .brand-active-media{opacity:0;transition:opacity .35s}


/* ═══════════════════════════════════════════════════════════
   هیروی تازه — شخصیت سه‌بعدی + واژه‌نگار

   چیدمان: سابقه چپ · فیگور وسط (شعار و دکمه زیرش) · معرفی راست

   ⚠️ یک بار فیگور را به ردیف جدا بردم تا سه کارت در یک ردیف
      هم‌ارتفاع شوند. کار می‌کرد ولی **چیدمان را عوض می‌کرد** و
      خواسته فقط برابری ارتفاع بود. برگشت به همین ساختار.
   ✅ برابری ارتفاع با `min-block-size` مشترک روی دو کارت کناری.
      CSS راهی برای «هم‌قد شدن با خواهر» بیرون از یک ردیف ندارد،
      پس کف مشترک ساده‌ترین و پیش‌بینی‌پذیرترین راه است.

   اعداد از قالب مرجع در ۱۶۰۰px: کادر ۳۵۰px با padding 35px،
   کارت داخلی padding 20px، عدد ۴۲px، سایه‌ی دولایه.
   ═══════════════════════════════════════════════════════════ */
.av-hero{
  --h-ink:#02080d; --h-body:#333f47; --h-dim:#6b7280;
  --h-line:#e4e6e8; --h-panel:#f5f5f5; --h-orange:var(--main-two-600,#ff5100);
  --h-shadow:0 4px 4px 0 rgba(0,0,0,.25), -4px -4px 0 0 rgba(255,255,255,.25);
  position:relative;overflow:hidden;background:#fff;
  display:grid;
  grid-template-columns:minmax(0,350px) minmax(0,1fr) minmax(0,350px);
  align-items:end;
  column-gap:clamp(1rem,2.4vw,3rem);
  padding:clamp(4rem,8vh,7rem) clamp(1.1rem,4vw,4rem) clamp(2.5rem,6vh,4.5rem)}

/* ── واژه‌نگار ──
   🔴 عرضِ «ASRINVAKILI» نسبت به اندازه‌ی قلم — از خود فایل قلم
      خوانده شده و با مرورگر هم تأیید شده (اختلاف ۰٫۴٪):
        Vazirmatn (آنچه به‌اشتباه رندر می‌شد) ۵٫۹۸
        Anton                                  ۴٫۵۸
        Archivo Black                          ۷٫۵۱
      با فاصله‌ی یک‌حرفی بین دو واژه کل عرض ۸٫۰۶em می‌شود:
      ۹۳٪ ÷ ۸٫۰۶ ≈ ۱۱٫۵vw (اندازه‌گیری‌شده در پنج عرض).
   ⚠️ عدد را بدون اندازه‌گیری دوباره دست نزن؛ دو بار از روی حدس
      اشتباه درآمد. */
.av-hero-word{
  position:absolute;left:50%;top:clamp(3.5rem,17vh,11rem);
  /* کشیدگی عمودی. Archivo Black پهن و کوتاه است (ارتفاع حرف
     بزرگ ۰٫۶۸em در برابر ۰٫۸۶ در Anton)؛ این جبرانش می‌کند.
     `scaleY` روی چیدمان اثر ندارد — ارتفاعِ اشغال‌شده ثابت
     می‌ماند، پس هیچ چیز جابه‌جا نمی‌شود. برای کم و زیاد کردن
     فقط همین یک عدد را عوض کن. */
  --word-stretch:1.18;
  transform:translateX(-50%) scaleY(var(--word-stretch));
  transform-origin:50% 0;
  z-index:1;
  pointer-events:none;user-select:none;
  direction:ltr;text-align:center;white-space:nowrap;
  font-family:var(--av-display);font-weight:400;
  line-height:.83;letter-spacing:.005em;
  font-size:clamp(2.2rem,11.5vw,18rem);
  color:var(--h-ink);
  /* stroke از ۰٫۰۱۴ به ۰٫۰۰۶ کم شد: قبلاً داشت وزنِ قلمِ نازک را
     جبران می‌کرد. Archivo Black خودش سیاه است و stroke ضخیم
     چشمِ حروف (A و R) را پر می‌کرد. */
  -webkit-text-stroke:.006em var(--h-ink)}
.av-hero-word span{display:inline}
/* فاصله = عرض میانگین یک حرف در این قلم (۰٫۶۶۷em — دقیقاً
   اندازه‌ی حرف L). قبلاً ۰٫۱۲em بود، یعنی ۱۸٪ یک حرف. */
.av-hero-word .is-second{margin-inline-start:.667em}

/* ── کادرها ── */
.av-hero-panel{
  background:var(--h-panel);border-radius:8px;
  box-shadow:var(--h-shadow);padding:35px}

/* 🔴 هم‌ارتفاعی دو کارت.
   `--av-card-h` را جاوااسکریپت می‌گذارد (بخش ۷ در asrin.js): بلندترین
   کارت اندازه‌گیری می‌شود و هر دو همان می‌شوند.

   ⚠️ اینجا قبلاً فقط `clamp(18rem,25vw,30rem)` بود. آن یک **کف** است،
      نه برابری: در ۱۵۶۴px کف ۳۹۱ می‌شد، معرفی ۳۹۱ می‌ماند ولی سابقه
      ۵۰۸ می‌رفت. حالا همان clamp فقط پشتیبانِ حالتی است که
      جاوااسکریپت اجرا نشود — سایت بدون آن هم آبرومند می‌ماند.

   چرا CSS تنهایی نمی‌تواند: هر سه ستون در یک ردیف‌اند و `stretch`
   کارت‌ها را به ارتفاع بلندترین عضو ردیف می‌برد — یعنی کاراکتر.

   محتوا عمودی وسط می‌نشیند تا کارتِ کوتاه‌تر خالی به نظر نرسد. */
.av-hero-intro,
.av-hero-facts{
  grid-row:1;z-index:3;align-self:end;inline-size:100%;
  min-block-size:var(--av-card-h,clamp(18rem,25vw,30rem));
  display:flex;flex-direction:column;justify-content:center}

/* 🔴 در چیدمان راست‌چین ستون ۱ سمت **راست** است.
   خواسته‌ی مالک: معرفی راست، سابقه چپ. */
.av-hero-intro{grid-column:1}
.av-hero-facts{grid-column:3}

.av-hero-intro h1{
  margin:0 0 1.2rem;font-size:clamp(1rem,1.15vw,1.15rem);
  font-weight:700;line-height:1.9;color:var(--h-ink);text-wrap:balance}
.av-hero-intro ul{margin:0;padding:0;list-style:none}
.av-hero-intro li{
  display:flex;align-items:center;gap:.6rem;
  padding-block:.6rem;font-size:.95rem;color:var(--h-body);
  border-block-start:1px solid rgba(2,8,13,.09)}
.av-hero-intro li:first-child{border-block-start:0}
.av-hero-intro li::before{
  content:"";flex:0 0 auto;inline-size:.4rem;block-size:.4rem;
  border-radius:50%;background:var(--h-orange)}

/* ── ستون وسط ── */
.av-hero-center{
  grid-column:2;grid-row:1;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.av-hero-figure{inline-size:min(100%,34rem)}
.av-hero-figure img{
  display:block;inline-size:100%;block-size:auto;
  filter:drop-shadow(0 20px 34px rgba(2,8,13,.20));
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}

/* شعار و دکمه، بدون قاب — کمی پایین‌تر از قبل */
.av-hero-say{
  margin-block-start:1.75rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  inline-size:100%}
.av-hero-slogan{
  margin:0;font-weight:900;line-height:1.55;
  font-size:clamp(1.15rem,2.4vw,2.5rem);
  max-inline-size:20ch;text-wrap:balance;
  color:#fff;-webkit-text-stroke:1px var(--h-ink);
  word-break:keep-all;overflow-wrap:normal;hyphens:none}

.av-hero-cta{
  display:inline-block;background:var(--h-ink);color:#fff;
  text-decoration:none;font-weight:700;font-size:.98rem;
  padding:.85rem 2rem;border-radius:999px;
  transition:background .25s,color .25s}
.av-hero-cta:hover,.av-hero-cta:focus-visible{background:var(--h-orange);color:#fff}

/* ── کارت‌های سابقه ── */
.av-hero-facts-label{
  display:block;font-size:.78rem;letter-spacing:.12em;color:var(--h-dim);
  margin-block-end:1rem}
.av-hero-stat{
  background:#fff;border-radius:6px;padding:20px;
  box-shadow:var(--h-shadow);margin-block-end:16px}
.av-hero-stat:last-child{margin-block-end:0}
.av-hero-stat b{
  display:block;font-size:clamp(1.7rem,2.7vw,42px);font-weight:600;
  line-height:1.1;margin-block-end:.35rem;color:var(--h-ink);
  font-variant-numeric:tabular-nums}
.av-hero-stat.is-invert{background:var(--h-ink)}
.av-hero-stat.is-invert b{color:#fff}
.av-hero-stat span{font-size:.9rem;color:var(--h-dim);line-height:1.6}
.av-hero-stat.is-invert span{color:rgba(255,255,255,.8)}

.av-hero-rule{
  grid-column:1 / -1;grid-row:2;
  block-size:1px;background:rgba(2,8,13,.10);
  margin-block-start:clamp(2rem,5vh,3.5rem)}

/* ── تبلت ── */
@media(max-width:1199.98px){
  .av-hero{
    grid-template-columns:1fr 1fr;align-items:start;row-gap:1.2rem;
    padding-block-start:clamp(3.5rem,9vh,6rem)}
  /* font-size عمداً اینجا نیست — همان ۱۲٫۴vw پایه در ۱۰۲۴ و ۷۶۸
     اندازه‌گیری شد و ۹۲٫۴٪ داد. سقف ۷rem قبلی با این قلم
     واژه‌نگار را بی‌دلیل کوچک می‌کرد. */
  /* 🔴 هدر روی محتوا می‌افتد (ScrollSmoother ظرف را fixed می‌کند)،
     پس `top` باید از ارتفاع هدر بیشتر باشد وگرنه بالای واژه‌نگار
     پشت هدر پنهان می‌شود. اندازه‌گیری موبایل: هدر ۱۰۰px و
     top=۶۸px → ۳۲ پیکسل بریده می‌شد. */
  .av-hero-word{top:clamp(7.5rem,13vh,8.5rem)}
  .av-hero-center{grid-column:1 / -1;grid-row:1;margin-block-start:clamp(1.5rem,11vw,5rem)}
  .av-hero-figure{inline-size:min(100%,24rem)}
  /* در تبلت این دو **تنها** اعضای ردیف ۲ هستند (کاراکتر ردیف ۱ است)،
     پس `stretch` واقعاً هم‌ارتفاعشان می‌کند و به جاوااسکریپت نیازی
     نیست. `min-block-size:0` هم مقدار جاوااسکریپت را کنار می‌زند. */
  .av-hero-intro{grid-column:1;grid-row:2;padding:26px;min-block-size:0;align-self:stretch}
  .av-hero-facts{grid-column:2;grid-row:2;padding:26px;min-block-size:0;align-self:stretch}
  .av-hero-rule{grid-row:3}
}

/* ── موبایل ── */
@media(max-width:767.98px){
  .av-hero{grid-template-columns:1fr;row-gap:1rem}
  .av-hero-word{
    font-size:clamp(2.4rem,15vw,4.6rem);top:clamp(7rem,15vh,9rem);line-height:.86}
  .av-hero-word span{display:block}
  .av-hero-word .is-second{margin-inline-start:0}
  .av-hero-center{margin-block-start:clamp(1rem,13vw,4rem)}
  .av-hero-figure{inline-size:min(100%,20rem)}
  .av-hero-intro{grid-column:1;grid-row:2}
  .av-hero-facts{grid-column:1;grid-row:3}
  .av-hero-rule{grid-row:4}
}


/* ═══════════════════════════════════════════════════════════
   دور پنجم — ۲۰۲۶-۰۸-۳۱
   صفحه‌ی محصول · بخش وبلاگ · هدر چسبان
   ═══════════════════════════════════════════════════════════ */

/* ── هدر چسبان ──
   🔴 `position:fixed` نزن. ScrollSmoother محتوا را با `transform`
      جابه‌جا می‌کند و هر عنصر fixed داخل `#smooth-content` به
      containing-block آن گیر می‌کند و با صفحه بالا می‌رود.
      هدر **بیرون** از `#smooth-content` است، پس `sticky` امن است. */
.header.header-three{
  position:sticky;inset-block-start:0;z-index:99;
  background:#fff;
  transition:box-shadow .25s ease}
.header.header-three.is-stuck{box-shadow:0 6px 24px rgba(2,8,13,.08)}

@media(prefers-reduced-motion:reduce){
  .header.header-three{transition:none}
}

/* ═══ صفحه‌ی محصول ═══ */

.av-single-head{max-inline-size:70ch}
.av-single-kicker{
  display:inline-block;margin-block-end:.9rem;
  font-size:.9rem;letter-spacing:.08em;color:var(--main-two-600,#ff5100);
  text-decoration:none}
.av-single-kicker:hover{text-decoration:underline}
.av-single-title{
  font-size:clamp(1.9rem,4.2vw,3.6rem) !important;line-height:1.35 !important;
  margin:0 0 1rem;color:#02080d}
.av-single-sub{
  font-size:clamp(1rem,1.5vw,1.25rem);line-height:2;color:#333f47;
  margin:0;max-inline-size:60ch}

/* ── چیدمان بالا: گالری + پنل ── */
.av-single-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
  margin-block-end:clamp(3rem,6vw,5rem)}

/* ── گالری ──
   تصویر بزرگ نسبت ثابت دارد تا با هر عکسی که مالک آپلود کند،
   ارتفاع صفحه نپرد. `contain` نه `cover`: لوگو و طرح گرافیکی
   نباید بریده شوند. */
.av-gallery{min-inline-size:0}
.av-gallery-main{
  margin:0;border-radius:1rem;overflow:hidden;
  background:#f5f5f5;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center}
.av-gallery-main img{
  inline-size:100%;block-size:100%;
  object-fit:contain;display:block}

.av-gallery-thumbs{
  list-style:none;margin:.9rem 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:.6rem}
.av-gallery-thumb{
  display:block;inline-size:100%;padding:0;
  border:2px solid transparent;border-radius:.6rem;
  background:#f5f5f5;overflow:hidden;cursor:pointer;
  transition:border-color .2s ease,opacity .2s ease}
.av-gallery-thumb img{
  inline-size:100%;aspect-ratio:1;object-fit:cover;display:block}
.av-gallery-thumb:hover{opacity:.85}
.av-gallery-thumb.is-active{border-color:var(--main-two-600,#ff5100)}
.av-gallery-thumb:focus-visible{outline:2px solid #02080d;outline-offset:2px}

/* ── پنل مشخصات ── */
.av-single-panel{
  position:sticky;inset-block-start:clamp(5rem,9vw,7rem);
  min-inline-size:0}
.av-fact{
  padding-block:1rem;
  border-block-start:1px solid rgba(2,8,13,.10)}
.av-fact:first-child{border-block-start:0;padding-block-start:0}
.av-fact-label{
  display:block;font-size:.8rem;letter-spacing:.06em;
  color:#6b7280;margin-block-end:.45rem}
.av-fact-text{margin:0;color:#333f47;line-height:1.9}
.av-fact-big{
  display:block;font-size:1.8rem;line-height:1.2;color:#02080d;
  font-variant-numeric:tabular-nums}
.av-fact-link{
  color:var(--main-two-600,#ff5100);font-weight:700;text-decoration:none}
.av-fact-link:hover{text-decoration:underline}

.av-fact-pairs{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem}
.av-fact-pairs dt{color:#6b7280;font-size:.92rem}
.av-fact-pairs dd{margin:0;color:#02080d;font-size:.92rem}

/* ── پالت رنگی نمونه‌کار ──
   برای طراح هویت بصری، پالت خودش بخشی از نمونه‌کار است نه یک
   ردیف مشخصات. پس مربع رنگ واقعی نشان داده می‌شود، نه فقط کد.

   ⚠️ `box-shadow: inset` به‌جای `border` — چون حاشیه‌ی معمولی روی
      رنگ روشن دیده نمی‌شود و روی رنگ تیره اندازه‌ی مربع را عوض
      می‌کند. سایه‌ی داخلی هر دو مشکل را حل می‌کند. */
.av-palette{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.7rem}
.av-palette li{
  display:flex;align-items:center;gap:.55rem;
  background:#fff;border:1px solid var(--h-line,#e4e6e8);
  border-radius:.6rem;padding:.4rem .6rem}
.av-palette-dot{
  inline-size:1.9rem;block-size:1.9rem;border-radius:.45rem;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(2,8,13,.16)}
.av-palette-meta{display:flex;flex-direction:column;gap:.1rem;min-inline-size:0}
.av-palette-meta b{font-size:.82rem;color:#02080d;font-weight:700;line-height:1.5}
.av-palette-meta code{
  font-size:.76rem;color:#6b7280;background:none;border:0;padding:0;
  letter-spacing:.02em}

.av-fact-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.av-fact-tags li{
  background:#f5f5f5;border-radius:999px;padding:.3rem .85rem;
  font-size:.85rem;color:#333f47}

.av-fact-steps{margin:0;padding:0;list-style:none;counter-reset:av-step}
.av-fact-steps li{
  counter-increment:av-step;position:relative;
  padding-inline-start:2rem;padding-block:.4rem;
  color:#333f47;font-size:.95rem;line-height:1.8}
.av-fact-steps li::before{
  content:counter(av-step);
  position:absolute;inset-inline-start:0;inset-block-start:.45rem;
  inline-size:1.4rem;block-size:1.4rem;border-radius:50%;
  background:#02080d;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-variant-numeric:tabular-nums}

/* ── جعبه‌ی سفارش ── */
.av-order-box{
  margin-block-start:1.6rem;padding:1.8rem;border-radius:1rem;
  background:#02080d}
.av-order-box h2{
  font-size:1.25rem !important;line-height:1.6 !important;
  color:#fff;margin:0 0 .6rem}
.av-order-box p{color:rgba(255,255,255,.72);margin:0 0 1.2rem;font-size:.95rem;line-height:1.9}
.av-order-btn{
  display:block;text-align:center;text-decoration:none;
  background:var(--main-two-600,#ff5100);color:#fff;font-weight:700;
  padding:.95rem 1.5rem;border-radius:.6rem;
  transition:filter .2s ease}
.av-order-btn:hover,.av-order-btn:focus-visible{filter:brightness(1.12);color:#fff}

.av-single-body{max-inline-size:75ch;margin-block-end:clamp(3rem,6vw,5rem)}

/* ── نمونه‌کارهای مرتبط ──
   🔴 مالک: «سایزشان یک اندازه نیست، با هر سایزی که بذارم همه یک
      اندازه باشند.» علتش این بود که تصویر با نسبت خودش رندر می‌شد.
      حالا قاب نسبت ثابت دارد و `object-fit:cover` تصویر را برش
      می‌دهد — پس عکس ۵۰۰×۸۰۰ و ۱۶۰۰×۹۰۰ هر دو یک شکل درمی‌آیند.
      `align-items:stretch` گرید هم کارت‌ها را هم‌ارتفاع می‌کند. */
.av-related{margin-block-start:clamp(3rem,6vw,5rem)}
.av-related-title{
  font-size:clamp(1.5rem,3vw,2.4rem) !important;line-height:1.4 !important;
  margin:0 0 1.8rem;color:#02080d}
.av-related-grid{
  display:grid;
  /* 🔴 `auto-fit` با کمتر از سه کارت، تک‌کارت را تمام‌عرض می‌کرد */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem);
  align-items:stretch}
.av-related-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  border-radius:1rem;overflow:hidden;background:#f5f5f5;
  transition:transform .25s ease,box-shadow .25s ease}
.av-related-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(2,8,13,.12)}
.av-related-thumb{
  aspect-ratio:16/11;inline-size:100%;overflow:hidden;
  background:#ececec;
  display:flex;align-items:center;justify-content:center}
.av-related-thumb img{
  inline-size:100%;block-size:100%;object-fit:cover;display:block}
.av-related-empty{
  padding:1.5rem;text-align:center;font-weight:700;color:#0d1216;
  font-size:clamp(1rem,1.6vw,1.3rem)}
.av-related-body{
  padding:1.2rem 1.3rem 1.5rem;
  display:flex;flex-direction:column;gap:.5rem;flex:1}
.av-related-body h3{
  font-size:1.15rem !important;line-height:1.6 !important;margin:0;color:#02080d}
.av-related-body p{margin:0;color:#6b7280;font-size:.9rem;line-height:1.8}

@media(prefers-reduced-motion:reduce){
  .av-related-card{transition:none}
  .av-related-card:hover{transform:none}
}

/* ── واکنش‌گرا ── */
@media(max-width:991.98px){
  .av-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-single-top{grid-template-columns:1fr}
  .av-single-panel{position:static}
}

/* ═══════════════════════════════════════════════════════════
   وبلاگ — کارت، فهرست، ستون کناری، صفحه‌بندی
   بازنویسی ۲۰۲۶-۰۹-۰۱

   🔴 ایراد قبلی دو تا بود:
      ۱. `repeat(auto-fit, minmax(...))` — با یک نوشته، ستون‌های خالی
         جمع می‌شدند و تنها کارت کل عرض را می‌گرفت. اندازه‌گیری روی
         سایت: `grid-template: 1401px 0 0 0` و تصویری ۸۷۶ پیکسل بلند.
      ۲. سه جای مختلف (صفحه‌ی اصلی، فهرست، آرشیو) سه کارت متفاوت
         داشتند. حالا هر سه از `template-parts/blog-card` می‌آیند.

   اعداد پایه از اندازه‌گیری یک نمونه‌ی مرتب گرفته شده — نه کپی، بلکه
   نسبت‌ها: کارت رادیوس ۱۶، حاشیه‌ی خیلی روشن، سایه‌ی کم‌رمق، تصویر
   چسبیده به لبه، بدنه با padding ۲۰، برچسب قرصی ۱۲px.
   ═══════════════════════════════════════════════════════════ */

/* ── متغیرهای مشترک ── */
.av-blog,.av-list{
  --c-line:#eceff2; --c-ink:#02080d; --c-dim:#6b7280; --c-soft:#f5f7f8;
  --c-accent:var(--main-two-600,#ff5100); --c-accent-soft:#fff1e9;
  --c-shadow:0 2px 10px rgba(2,8,13,.05);
  --c-shadow-up:0 16px 38px rgba(2,8,13,.10);
  --c-radius:1rem}

/* ═══ کارت مشترک ═══ */
.av-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--c-radius);
  overflow:hidden;box-shadow:var(--c-shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.av-card:hover{
  transform:translateY(-4px);border-color:#e2e6ea;box-shadow:var(--c-shadow-up)}

.av-card-thumb{
  display:block;aspect-ratio:16/9;inline-size:100%;
  background:var(--c-soft);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.av-card-thumb img{
  inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.av-card:hover .av-card-thumb img{transform:scale(1.04)}
.av-card-noimg{
  font-family:var(--av-display);font-size:3rem;color:#c9cdd1;line-height:1}

.av-card-body{
  padding:1.25rem;display:flex;flex-direction:column;
  gap:.7rem;flex:1}

.av-card-chip{
  align-self:flex-start;text-decoration:none;
  background:var(--c-accent-soft);color:var(--c-accent);
  font-size:.78rem;font-weight:700;line-height:1;
  padding:.5rem .9rem;border-radius:999px;
  transition:background .2s ease}
.av-card-chip:hover{background:#ffe2d3;color:var(--c-accent)}

.av-card-title{
  margin:0;font-size:1.15rem !important;line-height:1.75 !important}
.av-card-title a{
  color:var(--c-ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;transition:color .2s ease}
.av-card-title a:hover{color:var(--c-accent)}

.av-card-excerpt{
  margin:0;color:var(--c-dim);font-size:.9rem;line-height:2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}

.av-card-foot{
  margin-block-start:auto;padding-block-start:.9rem;
  border-block-start:1px solid var(--c-line);
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;color:#9aa1a8}
.av-card-more{color:var(--c-accent);font-weight:700;
  opacity:0;transform:translateX(4px);
  transition:opacity .25s ease,transform .25s ease}
.av-card:hover .av-card-more{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .av-card,.av-card-thumb img,.av-card-more{transition:none}
  .av-card:hover{transform:none}
  .av-card:hover .av-card-thumb img{transform:none}
  .av-card-more{opacity:1;transform:none}
}

/* ═══ بخش وبلاگ در صفحه‌ی اصلی ═══ */
.av-blog{padding-block:clamp(3.5rem,7vw,6rem);background:#fff}
.av-blog-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-block-end:clamp(1.6rem,3vw,2.6rem)}
.av-blog-kicker{
  display:block;font-size:.9rem;letter-spacing:.06em;
  color:var(--c-accent);margin-block-end:.5rem}
.av-blog-title{
  font-size:clamp(1.6rem,3.4vw,2.8rem) !important;line-height:1.4 !important;
  margin:0;color:var(--c-ink)}
.av-blog-all{
  display:inline-flex;align-items:center;gap:.4rem;
  text-decoration:none;font-weight:700;font-size:.98rem;color:var(--c-ink);
  white-space:nowrap;transition:color .2s ease}
.av-blog-all span{color:var(--c-accent);font-size:1.2em;line-height:1}
.av-blog-all:hover{color:var(--c-accent)}

/* 🔴 تعداد ستون صریح — درمانِ همان ایراد `auto-fit` */
.av-blog-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
@media(max-width:991.98px){.av-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.av-blog-grid{grid-template-columns:minmax(0,1fr)}}

/* ═══ صفحه‌ی فهرست نوشته‌ها ═══ */
.av-list{padding-block:clamp(3.5rem,8vw,7rem)}
.av-list-head{max-inline-size:60ch;margin-block-end:clamp(2rem,4vw,3rem)}
.av-list-kicker{
  display:block;font-size:.9rem;letter-spacing:.06em;
  color:var(--c-accent);margin-block-end:.6rem}
.av-list-title{
  font-size:clamp(1.9rem,4vw,3rem) !important;line-height:1.35 !important;
  margin:0 0 .9rem;color:var(--c-ink)}
.av-list-desc{margin:0;font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:2;color:var(--c-dim)}
.av-list-count{margin:.9rem 0 0;font-size:.9rem;color:#9aa1a8}
.av-list-count b{color:var(--c-ink)}

/* 🔴 ترتیب ستون‌ها در راست‌چین.
   ستون **اول** گرید سمت راست می‌نشیند، و ستون کناری اول در DOM
   می‌آید — پس ستون اول باید ۳۰۰px باشد، نه `1fr`.

   بار اول برعکس نوشتم و نتیجه‌اش این شد (اندازه‌گیری در ۱۴۴۰px):
     سایدبار ۱۰۵۸px · ستون مطالب ۳۰۰px · کارت‌ها ۱۳۷px
   بعد از اصلاح:
     سایدبار ۳۰۰px · ستون مطالب ۱۰۵۸px · کارت‌ها ۵۱۶px

   ⚠️ این دومین بار است که همین اشتباه را می‌کنم (بار اول در هیرو).
      هر جا در این قالب گرید چندستونی می‌نویسی، ترتیب را با فرضِ
      «ستون اول = راست» بنویس. */
.av-list-layout{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start}
.av-list-main{min-inline-size:0}
.av-list-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
.av-list-empty{font-size:1.1rem;color:var(--c-dim);
  background:var(--c-soft);border-radius:var(--c-radius);padding:2.5rem;text-align:center}

@media(max-width:1199.98px){
  .av-list-layout{grid-template-columns:260px minmax(0,1fr)}
}
@media(max-width:991.98px){
  .av-list-layout{grid-template-columns:minmax(0,1fr)}
  .av-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:575.98px){
  .av-list-grid{grid-template-columns:minmax(0,1fr)}
}

/* ═══ ستون کناری ═══ */
.av-side{
  display:flex;flex-direction:column;gap:1.25rem;
  position:sticky;inset-block-start:clamp(5rem,9vw,7rem)}
.av-side-box{
  background:#fff;border:1px solid var(--c-line);
  border-radius:var(--c-radius);padding:1.4rem 1.25rem}
.av-side-title{
  margin:0 0 1rem;font-size:1.05rem !important;line-height:1.6 !important;
  color:var(--c-ink);padding-block-end:.8rem;
  border-block-end:1px solid var(--c-line)}

.av-side-cats,.av-side-subs,.av-side-recent{list-style:none;margin:0;padding:0}
.av-side-cat,.av-side-sub{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  text-decoration:none;border-radius:.55rem;
  transition:background .2s ease,color .2s ease}
.av-side-cat{
  padding:.6rem .7rem;color:var(--c-ink);font-weight:700;font-size:.95rem}
.av-side-cat:hover,.av-side-sub:hover{background:var(--c-soft);color:var(--c-accent)}
.av-side-cat.is-active,.av-side-sub.is-active{
  background:var(--c-accent-soft);color:var(--c-accent)}
.av-side-subs{margin-inline-start:.7rem;
  border-inline-start:1px solid var(--c-line);padding-inline-start:.5rem}
.av-side-sub{padding:.45rem .6rem;color:var(--c-dim);font-size:.88rem}
.av-side-count{
  font-size:.75rem;color:#9aa1a8;background:var(--c-soft);
  border-radius:999px;padding:.15rem .5rem;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.av-side-cat.is-active .av-side-count,
.av-side-sub.is-active .av-side-count{background:#fff;color:var(--c-accent)}

.av-side-recent li + li{margin-block-start:.9rem;
  padding-block-start:.9rem;border-block-start:1px solid var(--c-line)}
.av-side-recent a{
  display:flex;gap:.75rem;align-items:flex-start;text-decoration:none}
.av-side-thumb{
  flex:0 0 auto;inline-size:60px;block-size:60px;border-radius:.55rem;
  overflow:hidden;background:var(--c-soft);display:block}
.av-side-thumb img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.av-side-meta{display:flex;flex-direction:column;gap:.3rem;min-inline-size:0}
.av-side-name{
  font-size:.9rem;line-height:1.7;color:var(--c-ink);font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .2s ease}
.av-side-recent a:hover .av-side-name{color:var(--c-accent)}
.av-side-date{font-size:.75rem;color:#9aa1a8}

@media(max-width:991.98px){ .av-side{position:static} }

/* ═══ صفحه‌بندی ═══ */
.av-list .navigation.pagination,
.av-pagination{margin-block-start:clamp(2rem,4vw,3rem)}
.av-list .nav-links{
  display:flex;flex-wrap:wrap;gap:.5rem;
  align-items:center;justify-content:center}
.av-list .page-numbers{
  min-inline-size:2.6rem;block-size:2.6rem;
  display:inline-flex;align-items:center;justify-content:center;
  padding-inline:.85rem;
  border:1px solid #dfe3e6;border-radius:999px;
  color:#5b6670;text-decoration:none;font-size:.92rem;
  font-variant-numeric:tabular-nums;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.av-list a.page-numbers:hover{
  border-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent-soft)}
.av-list .page-numbers.current{
  background:var(--c-ink);border-color:var(--c-ink);color:#fff;font-weight:700}
.av-list .page-numbers.dots{border-color:transparent;background:none}
.av-list .screen-reader-text{position:absolute;inline-size:1px;block-size:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ═══════════════════════════════════════════════════════════
   دور ششم — ۲۰۲۶-۰۹-۰۱
   صفحه‌ی نوشته‌ی وبلاگ: عرض · بلوک کد · جهت
   ═══════════════════════════════════════════════════════════ */

/* ── ۱. بلوک کد ──
   🔴 کد راست‌چین نمایش داده می‌شد. `dir="ltr"` را روی `<code>` گذاشته
      بودم ولی `<pre>` والد است و جهت خودش را از سند می‌گیرد — یعنی
      خطوط از راست شروع می‌شدند و برای دستور شل یا جاوااسکریپت غلط است.
      جهت باید روی `<pre>` بنشیند، نه فرزندش. */
.entry-content pre,
.av-single-body pre{
  direction:ltr;text-align:left;unicode-bidi:isolate;
  background:#02080d;color:#e6e9ec;
  border-radius:.9rem;padding:1.25rem 1.4rem;
  overflow-x:auto;          /* خط بلند، به‌جای شکستن، اسکرول می‌گیرد */
  font-size:.95rem;line-height:2;
  margin-block:1.6rem;
  -webkit-overflow-scrolling:touch}
.av-single-body pre code{
  display:block;direction:ltr;text-align:left;
  background:none;border:0;padding:0;color:inherit;
  white-space:pre;font-size:inherit}

/* کدِ داخل جمله‌ی فارسی — جدا نگه داشته شود وگرنه جابه‌جا می‌شود */
.av-single-body :not(pre) > code{
  direction:ltr;unicode-bidi:isolate;
  background:#f3f5f6;border:1px solid #e2e5e8;border-radius:.35rem;
  padding:.12em .45em;font-size:.92em;color:#02080d}

/* ── ۲. عرض نوشته ──
   🔴 مالک: «متن خیلی باریک وسط صفحه است، اصلاً واید نمی‌شود.»
      دو محدودیت روی هم بودند: ستون `col-lg-8` (۶۶٪ عرض) و سقف
      `75ch` روی خود متن. نتیجه: ۷۵۹px در صفحه‌ی ۱۲۸۰.

   ✅ راه‌حل، پهن کردنِ همه‌چیز نیست — متنِ خیلی پهن بدخوان می‌شود.
      ستونِ خواندن کمی بازتر شد (۸۲ نویسه)، ولی **تصویر و بلوک کد از
      آن بیرون می‌زنند** و تا ۱۲۰۰px می‌روند. آموزش، هم متن راحت
      می‌خواهد هم دیاگرام بزرگ. */
@media(min-width:992px){
  body.single-post .av-single > .container > .row > [class*="col-"]{
    flex:0 0 auto;inline-size:100%;max-inline-size:1200px;margin-inline:auto}
}

/* 🔴 بازبینی ۲۰۲۶-۰۹-۰۱ (دوم).
   اول ستونِ خواندن را ۸۲ نویسه گذاشتم و تصویر و کد را از آن بیرون
   بردم تا دیاگرام‌ها بزرگ دیده شوند. اندازه‌گیری در ۱۴۴۰px:
     متن ۸۳۰px · تصویر و کد ۱۱۷۶px
   مالک درست گفت که این ناهماهنگ دیده می‌شود. حالا **همه چیز یک
   عرض دارد** — متن، تیتر، لیست، تصویر و بلوک کد.

   ⚠️ عوارضش را می‌گویم چون واقعی است: خط ۱۱۷۶ پیکسلی حدود صد نویسه
      می‌شود و چشم موقع برگشتن به ابتدای خط بعدی خسته‌تر می‌شود.
      اگر روزی خواستی کوتاه‌ترش کنی، فقط همین یک عدد را عوض کن —
      مثلاً `1000px`؛ تصویرها هم با آن جمع می‌شوند و یکنواختی
      حفظ می‌شود. */
body.single-post .av-single-body{max-inline-size:none}
body.single-post .av-single-body > *{max-inline-size:none}

/* ── ۳. تصویرهای داخل متن ── */
.av-single-body figure{margin-block:2rem}
.av-single-body figure img{
  inline-size:100%;block-size:auto;display:block;
  border-radius:.9rem;background:#f5f5f5}
.av-single-body figcaption{
  margin-block-start:.7rem;font-size:.9rem;color:#6b7280;
  text-align:center;line-height:1.8}

/* ── ۴. خوانایی متن آموزشی ── */
.av-single-body h2{
  margin-block:2.4rem 1rem;
  font-size:clamp(1.35rem,2.4vw,1.9rem) !important;line-height:1.6 !important}
.av-single-body h3{
  margin-block:1.8rem .8rem;
  font-size:clamp(1.1rem,1.8vw,1.35rem) !important;line-height:1.7 !important}
.av-single-body p{margin-block-end:1.2rem;line-height:2.1}
.av-single-body ul,
.av-single-body ol{margin-block-end:1.4rem;padding-inline-start:1.6rem}
.av-single-body li{margin-block-end:.6rem;line-height:2}
.av-single-body a{color:var(--main-two-600,#ff5100);text-decoration:underline;
  text-underline-offset:.25em}
.av-single-body strong{color:#02080d}

@media(max-width:991.98px){
  .av-single-body pre{font-size:.85rem;padding:1rem}
}

/* ── ۵. بلوک کد با دکمه‌ی کپی ──
   جاوااسکریپت هر `<pre>` را داخل `.av-code` می‌پیچد و دکمه را
   کنارش می‌گذارد. اگر جاوااسکریپت اجرا نشود، `<pre>` تنها می‌ماند
   و همان استایل بالا را دارد — یعنی چیزی خراب نمی‌شود. */
.av-code{position:relative;margin-block:1.6rem}
.av-code pre{margin-block:0}

.av-copy{
  position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;
  z-index:2;
  font-family:inherit;font-size:.8rem;line-height:1;
  color:#b9c0c7;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:.4rem;
  padding:.45rem .8rem;cursor:pointer;
  opacity:0;transition:opacity .2s ease,background .2s ease,color .2s ease}

/* روی موبایل همیشه دیده شود — آنجا هاوری در کار نیست */
.av-code:hover .av-copy,
.av-copy:focus-visible{opacity:1}
@media(hover:none){ .av-copy{opacity:1} }

.av-copy:hover{background:rgba(255,255,255,.16);color:#fff}
.av-copy.is-done{
  background:var(--main-two-600,#ff5100);border-color:transparent;color:#fff;opacity:1}
.av-copy:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* جای دکمه، تا روی خط اول کد نیفتد */
.av-code pre{padding-block-start:2.6rem}


/* ═══════════════════════════════════════════════════════════
   منوی کشویی (همبرگری) — بازطراحی ۲۰۲۶-۰۹-۰۷

   🔴 چه چیزی خراب بود: قالب اصلاً این پنل را استایل نکرده بود و من
      هم هرگز به آن دست نزده بودم. لینک‌ها به رنگ **پیش‌فرض مرورگر**
      می‌افتادند — اندازه‌گیری روی سایت: `rgb(6,97,233)` روی زمینه‌ی
      مشکی. نه سلسله‌مراتب، نه فاصله، نه حالت هاور.

   ✅ حالا زمینه‌ی روشن با همان پالت سایت (سفید · طوسی · نارنجی)،
      مقیاس تایپوگرافی واقعی، و ورود پلکانی آیتم‌ها.
   ═══════════════════════════════════════════════════════════ */

.tw-offcanvas-2-area{
  --oc-ink:#02080d; --oc-body:#333f47; --oc-dim:#8b949e;
  --oc-line:#e8eaec; --oc-soft:#f5f7f8;
  --oc-accent:var(--main-two-600,#ff5100); --oc-accent-soft:#fff1e9}

/* ── پس‌زمینه‌ی دو تکه ── */
.tw-offcanvas-2-bg.is-left{background:var(--oc-ink) !important}
.tw-offcanvas-2-bg.is-right{background:#fff !important}

/* ── ستون راست: منو ── */
.tw-offcanvas-2-right{background:#fff;color:var(--oc-ink)}

/* دکمه‌ی بستن — دو خط که با هاور می‌چرخند و دایره پر می‌شود */
.av-oc-close{
  position:relative;inline-size:3.25rem;block-size:3.25rem;
  border:1px solid var(--oc-line);border-radius:50%;
  background:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.av-oc-close span{
  position:absolute;inline-size:1.15rem;block-size:2px;border-radius:2px;
  background:var(--oc-ink);
  transition:background .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}
.av-oc-close span:first-child{transform:rotate(45deg)}
.av-oc-close span:last-child{transform:rotate(-45deg)}
.av-oc-close:hover{
  background:var(--oc-accent);border-color:var(--oc-accent);transform:rotate(90deg)}
.av-oc-close:hover span{background:#fff}
.av-oc-close:focus-visible{outline:2px solid var(--oc-accent);outline-offset:3px}

/* ── فهرست منو ── */
.tw-offcanvas-2-menu{margin-block-start:clamp(1.5rem,4vh,3rem)}
.tw-offcanvas-2-list{list-style:none;margin:0;padding:0}
.tw-offcanvas-2-list li{border-block-end:1px solid var(--oc-line)}
.tw-offcanvas-2-list li:last-child{border-block-end:0}

.tw-offcanvas-2-list a{
  position:relative;display:flex;align-items:center;gap:.75rem;
  padding-block:clamp(.85rem,2.2vh,1.15rem);
  padding-inline:0 .5rem;
  color:var(--oc-ink) !important;      /* 🔴 آبی پیش‌فرض مرورگر را می‌بندد */
  text-decoration:none;
  font-size:clamp(1.15rem,4.2vw,1.6rem);
  font-weight:700;line-height:1.6;
  transition:color .25s ease,padding-inline-start .25s ease}

/* نقطه‌ی نارنجی که با هاور باز می‌شود */
.tw-offcanvas-2-list a::before{
  content:"";flex:0 0 auto;
  inline-size:0;block-size:2px;border-radius:2px;
  background:var(--oc-accent);
  transition:inline-size .28s cubic-bezier(.4,0,.2,1)}
.tw-offcanvas-2-list a:hover,
.tw-offcanvas-2-list a:focus-visible{color:var(--oc-accent) !important}
.tw-offcanvas-2-list a:hover::before,
.tw-offcanvas-2-list a:focus-visible::before{inline-size:1.6rem}

/* صفحه‌ی جاری */
.tw-offcanvas-2-list .current-menu-item > a{color:var(--oc-accent) !important}
.tw-offcanvas-2-list .current-menu-item > a::before{inline-size:1.6rem}

/* زیرمنو */
.tw-offcanvas-2-list .sub-menu{list-style:none;margin:0 1.4rem .6rem 0;padding:0;
  border-inline-start:1px solid var(--oc-line)}
.tw-offcanvas-2-list .sub-menu li{border:0}
.tw-offcanvas-2-list .sub-menu a{
  font-size:clamp(.95rem,3.2vw,1.1rem);font-weight:400;
  color:var(--oc-body) !important;padding-block:.5rem}

/* ── ورود پلکانی ──
   ⚠️ فقط ترنزیشن، نه انیمیشن با تأخیر روی خود عنصر: اگر پنل
   بسته و باز شود، انیمیشنِ کلیدفریمی دوباره اجرا نمی‌شود ولی
   ترنزیشن همیشه کار می‌کند. */
.tw-offcanvas-2-list li{
  opacity:0;transform:translateX(1.5rem);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.offcanvas-opened .tw-offcanvas-2-list li,
.open .tw-offcanvas-2-list li,
.tw-offcanvas-2-area.is-open .tw-offcanvas-2-list li{opacity:1;transform:none}
.tw-offcanvas-2-list li:nth-child(1){transition-delay:.08s}
.tw-offcanvas-2-list li:nth-child(2){transition-delay:.14s}
.tw-offcanvas-2-list li:nth-child(3){transition-delay:.20s}
.tw-offcanvas-2-list li:nth-child(4){transition-delay:.26s}
.tw-offcanvas-2-list li:nth-child(5){transition-delay:.32s}
.tw-offcanvas-2-list li:nth-child(6){transition-delay:.38s}
.tw-offcanvas-2-list li:nth-child(n+7){transition-delay:.44s}

/* ── ستون چپ: لوگو و دعوت ── */
.tw-offcanvas-2-left{background:var(--oc-ink);color:#fff}
.tw-offcanvas-2-title{
  font-size:clamp(1.3rem,3vw,1.9rem) !important;line-height:1.6 !important;
  color:#fff;margin:0 0 1.4rem}
.av-oc-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--oc-accent);color:#fff !important;text-decoration:none;
  font-weight:700;font-size:1rem;
  padding:.9rem 1.6rem;border-radius:999px;
  transition:filter .25s ease,gap .25s ease}
.av-oc-cta span{font-size:1.2em;line-height:1}
.av-oc-cta:hover{filter:brightness(1.12);gap:.85rem}

/* ── شبکه‌های اجتماعی ── */
.tw-offcanvas-2-social{margin-block-start:auto;padding-block-start:2rem}
.tw-offcanvas-2-social ul{
  list-style:none;margin:0;padding:0;display:flex;gap:.5rem;flex-wrap:wrap}
.tw-offcanvas-2-social a{
  inline-size:2.7rem;block-size:2.7rem;border-radius:.7rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.15rem;color:var(--oc-body) !important;
  background:var(--oc-soft);border:1px solid var(--oc-line);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.tw-offcanvas-2-social a:hover{
  background:var(--oc-accent);border-color:var(--oc-accent);color:#fff !important}

/* ── زمینه‌ی پنل: قطعی، بدون تکیه بر لایه‌های قالب ── */
.tw-offcanvas-2-right{background:#fff !important;color:var(--oc-ink)}

/* موبایل: کل پنل سفید — لایه‌ی سفیدِ قالب اینجا `d-none` است */
@media(max-width:767.98px){
  .tw-offcanvas-2-bg.is-left{background:#fff !important}
  .tw-offcanvas-2-left{background:#fff !important;color:var(--oc-ink)}
  .tw-offcanvas-2-title{color:var(--oc-ink) !important}

  /* 🔴 لوگو در پنل با `is-light` سفید می‌شود؛ روی زمینه‌ی سفید
     نامرئی است. فیلتر برداشته می‌شود تا لوگوی مشکی بماند. */
  .tw-offcanvas-2-left .av-logo-img.is-light{filter:none !important}

  .tw-offcanvas-2-left,.tw-offcanvas-2-right{padding-inline:1.4rem}
  .tw-offcanvas-2-menu{margin-block-start:1.2rem}
}

/* ── چیدمان صریح ستون‌ها ──
   🔴 همه‌ی این بلوک به `.opened` مقید است. بدون آن، پنلِ بسته وارد
      جریان صفحه می‌شود و هدر را یک صفحه پایین می‌برد — دقیقاً همان
      باگی که یک بار اتفاق افتاد (هدر top=۷۴۴ در صفحه‌ی ۸۴۴).

   پنلِ باز `fixed` است تا اصلاً جا نگیرد. در راست‌چین، `order`
   کمتر یعنی سمت **راست**، پس منو order کمتری می‌گیرد.

   ⚠️ ستون‌ها `static` می‌شوند نه `relative`، وگرنه دکمه‌ی بستنِ
      absolute به ستون لنگر می‌اندازد نه به کل پنل.
   ⚠️ عرض فقط از `flex-basis` می‌آید؛ اگر `width` هم بنویسی دو اعلان
      برای یک چیز داری و نتیجه به ترتیب فایل وابسته می‌شود. */
.tw-offcanvas-2-area.opened{
  position:fixed;inset:0;z-index:9990;overflow-y:auto}

.tw-offcanvas-2-area.opened .tw-offcanvas-2-wrapper{
  display:flex !important;flex-direction:row;align-items:stretch;
  min-block-size:100dvh;position:relative;z-index:2}

.tw-offcanvas-2-area.opened .tw-offcanvas-2-left,
.tw-offcanvas-2-area.opened .tw-offcanvas-2-right{
  position:static !important;
  inset:auto !important;
  float:none !important;
  block-size:auto !important;
  max-inline-size:none !important;
  display:flex;flex-direction:column}

.tw-offcanvas-2-area.opened .tw-offcanvas-2-right{     /* منو — راست */
  order:1 !important;flex:1 1 0 !important;min-inline-size:0;
  padding:clamp(4.5rem,9vh,6rem) clamp(1.1rem,4vw,2.5rem) clamp(1.5rem,4vh,2.5rem)}

.tw-offcanvas-2-area.opened .tw-offcanvas-2-left{      /* لوگو و دعوت — چپ */
  order:2 !important;flex:0 0 min(42%,320px) !important;
  padding:clamp(4.5rem,9vh,6rem) clamp(1.1rem,3vw,2rem) clamp(1.5rem,4vh,2.5rem)}

/* ── ضربدر: کاملاً سمت چپِ فیزیکی، بالای پنل ──
   `left` فیزیکی عمدی است، نه `inset-inline-start`. خواسته «سمت چپ»
   بود و در راست‌چین این دو یکی نیستند. */
.av-oc-close{
  position:absolute;inset-block-start:clamp(1rem,3vh,1.6rem);
  left:clamp(1rem,4vw,1.8rem);right:auto;
  z-index:5}

/* ── آیتم منو در یک خط ── */
.tw-offcanvas-2-list a{
  white-space:nowrap;
  font-size:clamp(.95rem,3.4vw,1.5rem)}
.tw-offcanvas-2-list .sub-menu a{white-space:normal}

/* ── فلش دکمه‌ی سفارش، سمت راست ──
   span در مارک‌آپ آخر است؛ در راست‌چین یعنی سمت چپ. `row-reverse`
   بدون تغییر مارک‌آپ جایش را عوض می‌کند. */
.av-oc-cta{flex-direction:row-reverse}

@media(max-width:575.98px){
  .tw-offcanvas-2-area.opened .tw-offcanvas-2-left{
    flex-basis:min(46%,185px) !important;padding-inline:.9rem}
  .tw-offcanvas-2-area.opened .tw-offcanvas-2-right{padding-inline:.9rem}
  .tw-offcanvas-2-title{font-size:1.05rem !important;margin-block-end:1rem}
  .av-oc-cta{padding:.7rem 1.1rem;font-size:.85rem}
  .tw-offcanvas-2-social a{inline-size:2.3rem;block-size:2.3rem;font-size:1rem}
}

@media(prefers-reduced-motion:reduce){
  .av-oc-close,.av-oc-close span,.tw-offcanvas-2-list a,
  .tw-offcanvas-2-list a::before,.tw-offcanvas-2-list li,
  .av-oc-cta,.tw-offcanvas-2-social a{transition:none}
  .av-oc-close:hover{transform:none}
  .tw-offcanvas-2-list li{opacity:1;transform:none}
}