/* ==========================================================================
   قم املاک — لایه ی بازطراحیِ صفحه ی اصلی
   --------------------------------------------------------------------------
   این فایل فقط روی صفحه ی اصلی لود می شود (intro/index) و بعد از public.css
   می آید ، پس هر قاعده اش قاعده ی هم وزنِ قبلی را می برد بی آنکه لازم باشد
   خطوطِ پراکنده ی آن فایلِ ۶۰۰۰ خطی جابه جا شود — و اگر روزی خواستند طرحِ قبلی
   را برگردانند ، فقط همین یک <link> برداشته می شود.

   قاعده های کلی که همه جای این فایل تکرار می شوند:

     • کانتینر یکی است. قبلاً `.container` زیر ۱۴۰۰px تمام عرض می شد و بالای آن
       ۱۳۲۰px ، پس لبه ی بخش ها با لبه ی هیرو جور در نمی آمد. حالا در هر عرضی
       یک کانتینرِ ۱۳۲۰ با حاشیه ی ۲۴ است.

     • ریتم عمودی روی پله های ۸ است (۸/۱۶/۲۴/۳۲/۴۸/۶۴/۸۰/۹۶). عددِ دلبخواه
       (۱۷ ، ۲۹ ، ۳۴) در این فایل نداریم.

     • نارنجی فقط رنگِ «اقدام» است: دکمه ی جستجو ، دکمه ی ثبت ملک ، قیمت. تبِ
       فعال ، کاشیِ انتخاب شده و آیکون ها سرمه ای اند. قبلاً هر دو رنگ همه جا
       بودند و هیچ کدام تأکید نمی ساخت.

     • کارت وقتی کارت است که مرزش معنا داشته باشد. باندِ رنگی ، سایه ی بزرگ و
       کادرِ توی کادر برداشته شده و جایش را فاصله و سلسله مراتب گرفته.
   ========================================================================== */

.qa-home {
    /* پله های فاصله ــ همه ی padding/margin های این فایل از این ها می آیند */
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 48px;
    --s6: 64px;
    --s7: 80px;
    --s8: 96px;

    /* شعاع ــ سه پله ، نه بیشتر. قرص (999px) فقط برای چیپ و بج. */
    --r-ctl: 10px;
    --r-card: 14px;
    --r-box: 18px;

    /* تنها دو سایه ی مجاز در صفحه */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .04);
    --sh-2: 0 8px 24px rgba(20, 38, 63, .07);

    --wrap: 1320px;
    --gut: 24px;

    background: var(--qa-page);
}

/* ── کانتینرِ واحد ────────────────────────────────────────────────────────
   `.qa-home .container` هم بخش ها را می گیرد هم نوارِ هدر را ، پس لبه ی منو
   دقیقاً بالای لبه ی کارت ها می افتد. `!important` لازم است چون admin14.css
   برای کاربرِ واردشده `max-width:98%` می گذارد و آن فایل بعد از این می آید. */
.qa-home .container {
    width: 100%;
    max-width: var(--wrap) !important;
    padding-inline: var(--gut);
    margin-inline: auto;
}

/* ── ریتم بخش ها ──────────────────────────────────────────────────────────
   قبلاً بخش های زوج زمینه ی #f7f9fc می گرفتند و صفحه راه راه می شد. حالا
   زمینه سفید است و فقط دو بخشی که در بلید کلاسِ qa-sec--soft گرفته اند
   ته رنگ دارند ، آن هم به عنوان مکث ، نه تزئین. */
.qa-home .qa-sec,
.qa-home .qa-sec + .qa-sec,
.qa-home .qa-sec:nth-of-type(even) {
    padding-top: var(--s7);
    padding-bottom: 0;
    margin-top: 0;
    background: transparent;
}

.qa-home .qa-sec--pad { padding-bottom: var(--s7); }

/* بخشِ ته رنگ دار تمام عرضِ پنجره است ولی محتوایش در همان کانتینر می ماند */
.qa-home .qa-band {
    padding-block: var(--s7);
    margin-top: var(--s7);
    background: var(--qa-soft);
}
.qa-home .qa-band + .qa-sec { padding-top: var(--s7); }
.qa-home .qa-band .qa-sec { padding-top: 0; }

/* ── سرِ بخش ــ فشرده و چپ چین (در rtl: راست چین) ────────────────────────
   نسخه ی قبلی وسط چین بود با لوگوی واترمارک ، یک «ابرو» ی رنگی ، تیتر درشت و
   یک خطِ تزئینی زیرش — چهار عنصر برای گفتنِ یک جمله. حالا تیتر و یک زیرنویس
   می ماند و «مشاهده همه» کنارش. */
.qa-home .qa-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s4);
    text-align: start;
}

.qa-home .qa-sechead > img.qa-brandmark { display: none; }
.qa-home .qa-sechead .qa-eyebrow { display: none; }

.qa-home .qa-sechead h2 {
    margin: 0;
    color: var(--qa-ink);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.6;
}

.qa-home .qa-sechead h2::after,
.qa-home .qa-sechead::after { display: none; }

.qa-home .qa-sechead p {
    max-width: 62ch;
    margin: var(--s1) 0 0;
    color: var(--qa-muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.9;
}

/* «مشاهده همه» اقدامِ درجه دو است: متنِ سرمه ای با کادرِ نازک ، نه دکمه ی پر */
.qa-home .qa-more {
    display: inline-flex;
    height: 40px;
    flex: none;
    align-items: center;
    gap: var(--s1);
    padding-inline: var(--s2);
    border: 1px solid var(--qa-line);
    border-radius: var(--r-ctl);
    color: var(--qa-navy);
    background: var(--qa-surface);
    box-shadow: none;
    font-size: .88rem;
    font-weight: 700;
    transition: border-color .18s, color .18s, background .18s;
}
.qa-home .qa-more:hover {
    border-color: var(--qa-navy-line);
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    box-shadow: none;
    transform: none;
}
.qa-home .qa-more i { font-size: .82rem; }

/* ══ سربرگ ════════════════════════════════════════════════════════════════
   مشکلِ نسخه ی قبلی شلوغی بود ، نه ساختار: شماره ی تلفن به صورت متنِ لخت ،
   دو دکمه ی هم وزن («ثبت تقاضا» و «ثبت ملک») و یک ردیفِ کنترل با ارتفاع های
   ناهماهنگ. حالا همه ی کنترل ها ۴۰ پیکسل اند ، تلفن یک دکمه ی کم رنگ است و
   فقط یک دکمه ی پر (نارنجی) در سربرگ می ماند.
   ------------------------------------------------------------------------ */
.qa-home .qa-header {
    border-bottom: 1px solid var(--qa-line);
    background: var(--qa-surface);
}

.qa-home .qa-header .container {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

/* نشانِ برند: تصویرِ لوگو بزرگ تر و زیرنویس خواناتر (قبلاً ۱۰ پیکسل بود) */
.qa-home .qa-header__brand { gap: var(--s1); }
.qa-home .qa-header__brand img { width: 48px; height: 48px; }
.qa-home .qa-header__brandtxt b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.2px; }
.qa-home .qa-header__brandtxt small {
    color: var(--qa-muted);
    font-size: .75rem;
    font-weight: 500;
}

.qa-home .qa-nav { gap: 2px; }
.qa-home .qa-nav a {
    padding: var(--s1) 12px;
    border-radius: var(--r-ctl);
    color: var(--qa-body);
    font-size: .95rem;
    font-weight: 600;
    transition: color .18s, background .18s;
}
.qa-home .qa-nav a:hover { color: var(--qa-navy); background: var(--qa-navy-soft); }
.qa-home .qa-nav a.is-active { color: var(--qa-navy); font-weight: 800; }

.qa-home .qa-header__end { gap: var(--s1); }

/* همه ی کنترل های سربرگ یک ارتفاع دارند ــ ۴۰ پیکسل */
.qa-home .qa-header__phone,
.qa-home .qa-hbtn,
.qa-home .qa-header__end .qa-theme-toggle {
    height: 40px;
    border-radius: var(--r-ctl);
}

.qa-home .qa-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: 12px;
    border: 1px solid var(--qa-line);
    color: var(--qa-body);
    font-size: .86rem;
    font-weight: 700;
}
.qa-home .qa-header__phone:hover { border-color: var(--qa-navy-line); color: var(--qa-navy); }
.qa-home .qa-header__phone i { color: var(--qa-navy-lite); }

.qa-home .qa-hbtn {
    padding-inline: var(--s2);
    font-size: .88rem;
    font-weight: 700;
    box-shadow: none;
}
.qa-home .qa-hbtn--ghost {
    border: 1px solid var(--qa-line);
    color: var(--qa-navy);
    background: var(--qa-surface);
}
.qa-home .qa-hbtn--ghost:hover { border-color: var(--qa-navy-line); background: var(--qa-navy-soft); }

/* تنها دکمه ی پرِ سربرگ. برای مهمان «ورود» است و برای کاربرِ واردشده
   «ثبت ملک» — هر دو همان اقدامِ اصلیِ آن حالت اند. */
.qa-home .qa-hbtn--solid {
    border: 1px solid var(--qa-orange);
    color: #fff;
    background: var(--qa-orange);
}
.qa-home .qa-hbtn--solid:hover { border-color: var(--qa-orange-deep); background: var(--qa-orange-deep); }

/* فوکوسِ صفحه کلید در کل صفحه دیده می شود ، نه فقط روی دکمه ها */
.qa-home a:focus-visible,
.qa-home button:focus-visible,
.qa-home select:focus-visible,
.qa-home input:focus-visible {
    outline: 2px solid var(--qa-navy-2);
    outline-offset: 2px;
    border-radius: var(--r-ctl);
}

@media (max-width: 1199.98px) {
    .qa-home .qa-header__phone { display: none; }
}

/* ══ هیرو ═════════════════════════════════════════════════════════════════
   طرح قبلی «دو کارتِ بی ربط» بود: یک کارتِ بیرونی با قابِ گرادیانی نارنجی-آبی
   و سایه ی درشت ، و داخلش یک کارتِ بنفشِ شناور که وسطِ فضای خالی می ایستاد.
   حالا هیرو یک شکل است: نیمِ چپ عکس ، نیمِ راست پنلِ محتوا با همان ته رنگی که
   مدیر برای بنر انتخاب کرده — بدون کادرِ توی کادر و بدون سایه.

   ترتیبِ خواندن هم عوض شده: تیتر بزرگ ترین چیزِ بالای صفحه است ، بعد یک جمله ی
   کوتاه ، بعد یک دکمه ی نارنجی ، و آخر نوارِ اعتماد (تعداد فایل/مشاور/محله).
   ------------------------------------------------------------------------ */
.qa-home .q-hero {
    width: 100%;
    max-width: var(--wrap);
    margin: calc(var(--qa-header-h) + var(--s4)) auto 0;
    padding-inline: 0;
    border: 1px solid var(--qa-line);
    border-radius: var(--r-box);
    background: var(--qa-surface);
    box-shadow: none;
    /* --q-hero-media از لایه ی قبلی می آید: عرضِ عکس ۴۶٪ کارت است و کارت هم
       هرگز از کانتینر پهن تر نیست ، پس عکس زیرِ نصفِ کانتینر می ماند. */
    --q-hero-pad: 0px;
    --q-hero-media: 46%;
}

/* کانتینرِ صفحه ۲۴ پیکسل حاشیه دارد ؛ هیرو هم باید هم لبه ی آن باشد */
@media (min-width: 1368px) {
    .qa-home .q-hero { width: calc(100% - (var(--gut) * 2)); }
}
@media (max-width: 1367.98px) {
    .qa-home .q-hero { width: calc(100% - (var(--gut) * 2)); }
}

.qa-home .q-slide { min-height: 0; }

@media (min-width: 992px) {
    .qa-home .q-slide,
    .qa-home .q-slide__panel {
        min-height: 460px;
    }

    /* عکس تا لبه ی کارت می آید (قابِ توی قاب برداشته شد) ولی گوشه ی سمتِ
       عکس گرد می ماند تا با کارت یکی شود. */
    .qa-home .q-slide__media {
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--q-hero-media);
        max-width: 50%;
        border-radius: 0 0 0 0;
        border-start-start-radius: 0;
    }

    .qa-home .q-slide__panel {
        align-items: stretch;
        padding: 0 0 0 var(--q-hero-media);
    }

    /* بدنه = تمامِ نیمِ راست. ته رنگش همان --q-banner-bg مدیر است ولی خیلی
       رقیق تر ، چون حالا یک سطحِ بزرگ است نه یک کارتِ کوچک. */
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        display: flex;
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        padding: var(--s5) clamp(24px, 3vw, 48px);
        border: 0;
        border-radius: 0;
        background: color-mix(in srgb, var(--q-banner-bg, #F4F7FC) 42%, #fff);
        box-shadow: none;
    }
}

.qa-home .q-slide__media img { border-radius: 0; }

/* گوشه ی عکس با گوشه ی کارت یکی می شود (سمتِ چپِ فیزیکی) */
.qa-home .q-hero,
.qa-home .q-hero__track { overflow: hidden; }

.qa-home .q-slide__badge {
    align-self: flex-start;
    margin-bottom: var(--s2);
    padding: 5px 12px;
    border: 1px solid var(--qa-navy-line);
    border-radius: 999px;
    color: var(--qa-navy-2);
    background: var(--qa-surface);
    font-size: .78rem;
    font-weight: 700;
}

.qa-home .q-slide__title,
.qa-home .q-slide--brand .q-slide__title {
    margin: 0 0 var(--s2);
    color: var(--qa-ink);
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.6px;
    line-height: 1.4;
    text-wrap: balance;
}

.qa-home .q-slide__lead,
.qa-home .q-slide--brand .q-slide__lead {
    max-width: 46ch;
    margin: 0 0 var(--s3);
    color: var(--qa-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 2;
}

.qa-home .q-slide__long,
.qa-home .q-slide--brand .q-slide__long {
    max-width: 52ch;
    margin: calc(var(--s3) * -1 + var(--s1)) 0 var(--s3);
    color: var(--qa-muted);
    font-size: .9rem;
    line-height: 2;
}

.qa-home .q-slide__acts {
    align-self: flex-start;
    margin: 0 0 var(--s4);
}

.qa-home .q-slide__cta,
.qa-home .q-slide--brand .q-slide__cta {
    min-height: 52px;
    padding-inline: var(--s3);
    border-radius: var(--r-ctl);
    background: var(--qa-orange);
    box-shadow: none;
    font-size: .98rem;
    font-weight: 700;
    transition: background .18s;
}
.qa-home .q-slide__cta:hover { background: var(--qa-orange-deep); transform: none; box-shadow: none; }


/* اسلایدِ ملک: قیمت مهم ترین سطرِ متن است */
.qa-home .q-slide--estate .q-slide__body { max-width: 640px; }
.qa-home .q-slide__price b { color: var(--qa-orange-deep); }

/* پیمایشِ اسلایدر ــ روی عکس ، کم رنگ */
.qa-home .q-hero__arrow {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(16, 24, 40, .34);
    backdrop-filter: blur(6px);
}
.qa-home .q-hero__dots .is-on span { background: var(--qa-surface); }

/* ══ پنلِ جستجو ــ تب معامله + نوع ملک + نقشه ، همه در یک جعبه ═════════════
   قبلاً سه جعبه بود: کارتِ q-hunt__in با نوارِ نارنجیِ بالا ، بعد کاشی ها روی
   زمینه ی خودش ، بعد کارتِ جداگانه ی نقشه با سایه ی درشت. کاربر سه چیزِ جدا
   می دید در حالی که هر سه یک جریان اند: «چه معامله ای → چه ملکی → کجا».
   حالا یک جعبه است و مرزِ داخلی اش فقط یک خطِ نازک.
   ------------------------------------------------------------------------ */
.qa-home .q-hunt { padding: 0; background: transparent; }

.qa-home .q-hunt__in {
    padding: var(--s3) var(--s3) 0;
    margin-top: var(--s3);
    border: 1px solid var(--qa-line);
    border-top: 1px solid var(--qa-line);
    border-radius: var(--r-box);
    background: var(--qa-surface);
    box-shadow: none;
}

/* ── تبِ نوع معامله ــ یک سگمنتِ دوگزینه ای ، نه دو دکمه ی شناور ─────────
   این ردیف ناوبریِ اصلیِ جستجوست ، پس درشت و در ابتدای ردیف می نشیند (rtl:
   سمت راست) ، نه وسطِ صفحه. حالتِ فعال سرمه ای پر است — نارنجی برای دکمه ی
   «مشاهده ملک ها» نگه داشته می شود تا در این ناحیه فقط یک نقطه ی نارنجی
   باشد. */
.qa-home .q-deals {
    display: inline-flex;
    padding: 4px;
    margin: 0 0 var(--s3);
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    background: var(--qa-slate-soft);
    gap: 4px;
    justify-content: flex-start;
    filter: none;
    /* تمام عرضِ پنل ــ این ردیف ناوبریِ اصلیِ جستجوست و باید بزرگ ترین کنترلِ
       زیرِ هیرو باشد ، نه یک جفت چیپِ گوشه ی صفحه. */
    width: 100%;
}

.qa-home .q-tab { flex: 1 1 0; }

.qa-home .q-tab {
    min-width: 0;
    height: 52px;
    padding: 0 var(--s3);
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--qa-body);
    gap: var(--s1);
    transform: none;
}
.qa-home .q-tab:hover { color: var(--qa-navy); background: var(--qa-surface); transform: none; }

.qa-home .q-tab__ico {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 1.15rem;
}

.qa-home .q-tab__txt { flex-direction: row; align-items: baseline; gap: 6px; }
.qa-home .q-tab__txt b { font-size: 1rem; font-weight: 800; }
.qa-home .q-tab__txt small { color: var(--qa-faint); font-size: .78rem; font-weight: 600; }

.qa-home .q-tab.is-on {
    color: #fff;
    background: var(--qa-navy);
    border-color: transparent;
    box-shadow: none;
}
.qa-home .q-tab.is-on .q-tab__ico { background: transparent; color: #fff; }
.qa-home .q-tab.is-on .q-tab__txt small { color: rgba(255, 255, 255, .72); }

/* ── ردیفِ نوع ملک ────────────────────────────────────────────────────────
   کاشی ها مربعِ ۱۶۸ پیکسلی با آیکونِ سه بعدیِ رنگی بودند: ده رنگِ مختلف در یک
   ردیف ، هر کدام با گرادیان و سایه ی رنگی. حالا همه سرمه ای اند و کاشی کوتاه
   تر شده ، پس ردیف در یک نگاه اسکن می شود. --acc که بلید درون خطی می نویسد
   دیگر جایی خوانده نمی شود.
   ------------------------------------------------------------------------ */
.qa-home .q-kinds { padding: 0 0 var(--s3); text-align: start; }
.qa-home .q-kinds::before { display: none; }
.qa-home .q-kinds__title,
.qa-home .q-kinds__lead { display: none; }

.qa-home .q-type.is-on .q-type__on { background: var(--qa-navy); }


/* ── نقشه و فیلتر ─────────────────────────────────────────────────────────
   نقشه بزرگ ترین سطحِ صفحه می شود (۷۲٪ عرض ، ۵۸۰ ارتفاع). فیلتر کارتِ جدا
   نیست: همان جعبه ی پنلِ جستجوست و فقط یک خطِ نازک از نقشه جدایش می کند.
   ------------------------------------------------------------------------ */
.qa-home .q-maprow {
    grid-template-columns: 348px minmax(0, 1fr);
    margin: 0 calc(var(--s3) * -1);
    border: 0;
    border-top: 1px solid var(--qa-line);
    border-radius: 0 0 var(--r-box) var(--r-box);
    box-shadow: none;
}

.qa-home .q-map { border-inline-end: 1px solid var(--qa-line); }
.qa-home .q-map__canvas { min-height: 580px; }
.qa-home .q-map__canvas::after { box-shadow: none; }

.qa-home .q-filter { padding: var(--s3); }

.qa-home .q-filter__head { margin-bottom: var(--s2); }
.qa-home .q-filter__title { color: var(--qa-ink); font-size: 1rem; font-weight: 800; }
.qa-home .q-filter__title i { color: var(--qa-navy-2); background: transparent; }
.qa-home .q-filter__sub { display: none; }

.qa-home .q-filter__reset {
    height: 32px;
    border: 1px solid var(--qa-line);
    border-radius: var(--r-ctl);
    color: var(--qa-muted);
    background: var(--qa-surface);
    font-size: .8rem;
    font-weight: 600;
}
.qa-home .q-filter__reset:hover { border-color: var(--qa-navy-line); color: var(--qa-navy); background: var(--qa-navy-soft); }

.qa-home .q-filter__chosen { margin-bottom: var(--s3); }
.qa-home .q-filter__tag {
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.qa-home .q-filter__tag.is-deal { background: var(--qa-navy); color: #fff; }

.qa-home .q-filter__row { margin-bottom: var(--s2); }
.qa-home .q-filter__row > label,
.qa-home .q-filter__lbl {
    margin-bottom: 6px;
    color: var(--qa-body);
    font-size: .82rem;
    font-weight: 600;
}

/* همه ی ورودی ها یک ارتفاع دارند ــ ۴۴ پیکسل ، همان حداقلِ لمسِ راحت */
.qa-home .q-filter__ctl select,
.qa-home .q-filter__ctl input {
    height: 44px;
    border-radius: var(--r-ctl);
    font-size: .88rem;
}
.qa-home .q-filter__ctl > i { color: var(--qa-slate-2); }
.qa-home .q-filter__ctl select:focus,
.qa-home .q-filter__ctl input:focus {
    border-color: var(--qa-navy-2);
    box-shadow: 0 0 0 3px var(--qa-navy-soft);
}

.qa-home .q-chips { gap: 6px; }
.qa-home .q-chips button {
    height: 40px;
    min-width: 44px;
    border-radius: var(--r-ctl);
    font-size: .84rem;
    font-weight: 600;
}
.qa-home .q-chips button.is-on { background: var(--qa-navy); border-color: var(--qa-navy); color: #fff; }

/* فیلترهای پیشرفته پیش فرض بسته اند ــ ستون از هفت ردیفِ باز به سه ردیف و یک
   دکمه رسید. <details> بومی است ، پس بدون جاوااسکریپت هم باز و بسته می شود. */
.qa-home .q-adv {
    margin-bottom: var(--s2);
    border-top: 1px solid var(--qa-line-soft);
    padding-top: var(--s2);
}
.qa-home .q-adv > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s1);
    padding: 6px 0;
    color: var(--qa-navy);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.qa-home .q-adv > summary::-webkit-details-marker { display: none; }
.qa-home .q-adv > summary i { transition: transform .18s; }
.qa-home .q-adv[open] > summary i { transform: rotate(180deg); }
.qa-home .q-adv__in { padding-top: var(--s2); }

/* تنها دکمه ی نارنجیِ این ناحیه ــ اقدامِ اصلیِ کلِ صفحه */
.qa-home .q-filter__go {
    height: 52px;
    margin-top: var(--s3);
    border-radius: var(--r-ctl);
    background: var(--qa-orange);
    box-shadow: none;
    font-size: .95rem;
    font-weight: 700;
}
.qa-home .q-filter__go:hover { background: var(--qa-orange-deep); transform: none; box-shadow: none; }
.qa-home .q-filter__go b { background: rgba(255, 255, 255, .22); }

/* دکمه ی روی نقشه اقدامِ دومِ همان کار است ، پس دیگر نارنجیِ پر نیست: سفیدِ
   کادردار که روی نقشه خوانا باشد ولی با دکمه ی اصلی رقابت نکند. */
.qa-home .q-map__go {
    padding: 10px 18px;
    border: 1px solid var(--qa-line);
    border-radius: var(--r-ctl);
    color: var(--qa-navy) !important;
    background: var(--qa-surface);
    box-shadow: var(--sh-2);
    font-size: .84rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.qa-home .q-map__go:hover {
    color: var(--qa-navy) !important;
    background: var(--qa-surface);
    transform: none;
    box-shadow: var(--sh-2);
}

.qa-home .q-map__styles button.is-on { background: var(--qa-navy); border-color: var(--qa-navy); }

/* ── زیرِ نقشه: محله های پرفایل و نوارِ اطمینان ─────────────────────────── */
.qa-home .q-market {
    padding: var(--s3) 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.qa-home .q-market__lbl { color: var(--qa-ink); font-size: .88rem; font-weight: 700; }
.qa-home .q-market__lbl i { color: var(--qa-navy-2); background: transparent; }

.qa-home .q-assure {
    padding: var(--s3) 0 var(--s3);
    border-top: 1px solid var(--qa-line-soft);
    margin-top: var(--s3);
}
.qa-home .q-assure li {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--qa-muted);
    font-size: .85rem;
    font-weight: 500;
}
.qa-home .q-assure i { color: var(--qa-navy-2); background: transparent; }

/* ══ کارتِ ملک ════════════════════════════════════════════════════════════
   کارت (estate/card_unified) با صفحه ی «املاک من» ، صفحه ی ملک و صفحه ی جستجو
   مشترک است ، پس مارک آپش دست نخورده می ماند و همه ی تغییرها اینجا و فقط زیر
   `.qa-home` اند — هیچ صفحه ی دیگری این قاعده ها را نمی گیرد.

   ترتیبِ تصمیم گیریِ خریدار: عکس ← قیمت ← عنوان ← محله ← سه ویژگی ← اقدام.
   هر چیزِ دیگری که روی کارت بود (تاریخِ انتشار ، شمارنده ی بازدیدِ داخلی ،
   چیپِ «دقتِ نقطه») برای خریدار تصمیمی نمی سازد و اینجا برداشته شده — روی
   صفحه های دیگر سرِ جایش است.
   ------------------------------------------------------------------------ */
.qa-home .estate-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
}

.qa-home .estate-grid .ec {
    overflow: hidden;
    border: 1px solid var(--qa-line);
    border-radius: var(--r-card);
    background: var(--qa-surface);
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
.qa-home .estate-grid .ec:hover {
    border-color: var(--qa-navy-line);
    box-shadow: var(--sh-2);
    transform: none;
}

/* عکس نسبتِ ثابتِ ۴:۳ می گیرد ، پس ردیفِ کارت ها هم قد می شود حتی وقتی عکس ها
   ابعادِ مختلف دارند. */
.qa-home .estate-grid .ec-img {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 0;
}
.qa-home .estate-grid .ec-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qa-home .estate-grid .ec-body { padding: var(--s2); }

/* قیمت بالاتر از عنوان می نشیند: در بازار ملک اولین چیزی که خریدار می سنجد
   قیمت است. order روی فرزندانِ .ec-body کار می کند چون آن را فلکسِ ستونی
   می کنیم — بدون هیچ تغییری در مارک آپ. */
.qa-home .estate-grid .ec-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qa-home .estate-grid .ec-price { order: -1; margin: 0 0 2px; padding: 0; border: 0; }
/* رنگِ قیمت را public.css با شناسه (#qaCards) می نویسد و نارنجیِ برند است ؛
   اینجا فقط اندازه و وزنش بزرگ می شود تا اولین چیزی باشد که چشم می گیرد. */
.qa-home .estate-grid .ec-price .price-val {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.2px;
}
.qa-home .estate-grid .ec-price .price-label {
    color: var(--qa-muted);
    font-size: .74rem;
    font-weight: 500;
}
.qa-home .estate-grid .ec-price .price-meter {
    color: var(--qa-faint);
    font-size: .74rem;
    font-weight: 500;
}

.qa-home .estate-grid .ec-title {
    color: var(--qa-ink) !important;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.7;
}
.qa-home .estate-grid .ec-location {
    color: var(--qa-muted);
    font-size: .82rem;
    font-weight: 500;
}
.qa-home .estate-grid .ec-location i { color: var(--qa-slate-2) !important; }

.qa-home .estate-grid .ec-attrs { gap: 6px; margin-top: 2px; }
.qa-home .estate-grid .ec-attrs .attr {
    padding: 4px 10px;
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    color: var(--qa-body);
    background: var(--qa-surface);
    font-size: .76rem;
    font-weight: 500;
}
.qa-home .estate-grid .ec-attrs .attr i { color: var(--qa-slate-2); }

/* آنچه برای خریدار تصمیمی نمی سازد */
.qa-home .estate-grid .ec-date,
.qa-home .estate-grid .ec-oprow,
.qa-home .estate-grid .acc-chip,
.qa-home .estate-grid .ec-id { display: none !important; }

/* بجِ نوع معامله ــ تنها بجِ همیشگیِ کارت */
.qa-home .estate-grid .ec-type-badge {
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
}

/* ردیفِ آخر: قبلاً پنج آیکونِ ریزِ رنگارنگ (علاقه مندی ، تماس ، مقایسه ،
   بازدید ، مشاهده) کنار هم بودند و هیچ کدام تأکید نمی ساخت. علاقه مندی رفت
   روی تصویر ، تماس و «مشاهده» برداشته شدند و تاریخ در این صفحه اصلاً نشان
   داده نمی شود ، پس تنها چیزی که می ماند «درخواست بازدید» است و تمامِ عرضِ
   ردیف را می گیرد ــ یک کارِ روشن به جای یک ردیفِ نیمه خالی. */
/* margin-top:auto اینجا لازم است و تزئینی نیست: کارتِ اصلی (card_unified) ردیفِ
   آخر را با `.ec-price{margin-top:auto}` پایین نگه می داشت ، ولی چند خط بالاتر
   قیمت را با order:-1 به بالای کارت بردیم و همان margin را برداشتیم — پس دیگر
   هیچ چیز ته کارت را پر نمی کرد. نتیجه اش این بود که دکمه ی «درخواست بازدید»
   درست زیرِ آخرین خطِ متن می ایستاد و چون کارت های یک ردیف هم قد می شوند ولی
   محتوایشان نیست (اجاره چهار خط قیمت دارد ، فروش یک خط) ، دکمه ها در هر کارت
   یک ارتفاع می افتادند و زیرِ کوتاه ترین کارت یک فضای خالی می ماند.
   حالا خودِ ردیفِ آخر فاصله ی مانده را می بلعد و به کفِ کارت می چسبد. */
.qa-home .estate-grid .ec-footer {
    padding: var(--s2) 0 0;
    /* margin کامل نوشته می شود نه فقط margin-top: زیرِ ۵۷۶px کارتِ پنل به این
       ردیف حاشیه ی منفی و یک نوارِ خاکستری می دهد (نوارِ ته کارتِ «املاک من») ؛
       اینجا آن نوار با بقیه ی کارت جور نیست و حاشیه ی منفی هم با padding این
       صفحه نمی خواند ، پس همان جا خنثی می شود. */
    margin: auto 0 0;
    background: transparent;
    border-top: 1px solid var(--qa-line-soft);
    justify-content: flex-end;
}
.qa-home .estate-grid .ec-actions { flex: 1 1 auto; gap: 4px; }
/* دکمه ی سفید با کادرِ --qa-line روی کارتِ سفید عملاً دیده نمی شد — تنها اقدامِ
   کارت بود و کم رنگ ترین چیزش. حالا همان نارنجیِ پرِ CTA ی صفحه را می گیرد
   (--qa-cta ، همان توکنِ .q-filter__go و .qa-btn--primary) که سفید روی آن
   ۴٫۶:۱ می دهد و در حالت شب هم خودش را دارد. */
.qa-home .estate-grid .ec-visit {
    height: 38px;
    border: 1px solid var(--qa-cta);
    border-radius: var(--r-ctl);
    color: #fff;
    background: var(--qa-cta);
    font-size: .84rem;
    font-weight: 700;
}
.qa-home .estate-grid .ec-visit:hover {
    border-color: var(--qa-cta-hover);
    background: var(--qa-cta-hover);
    color: #fff;
}

/* دکمه های روی تصویر هم اندازه ی بقیه ی کنترل های همین صفحه می شوند */
.qa-home .estate-grid .ec-imgact { width: 34px; height: 34px; font-size: .92rem; }

/* ── چیپ بارِ بالای شبکه ─────────────────────────────────────────────── */
.qa-home .qa-chipbar { gap: var(--s1); margin-bottom: var(--s3); }
.qa-home .qa-chipbar button {
    height: 40px;
    padding-inline: var(--s2);
    border: 1px solid var(--qa-line);
    border-radius: var(--r-ctl);
    color: var(--qa-body);
    background: var(--qa-surface);
    font-size: .86rem;
    font-weight: 600;
}
.qa-home .qa-chipbar button.is-on {
    border-color: var(--qa-navy);
    color: #fff;
    background: var(--qa-navy);
}
.qa-home .qa-chipbar button b { font-weight: 700; opacity: .7; }

@media (max-width: 1199.98px) {
    .qa-home .estate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
    .qa-home .estate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
}
@media (max-width: 559.98px) {
    .qa-home .estate-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══ محله ها / مقاله ها ═══════════════════════════════════════════════════ */
.qa-home .qa-grid { gap: var(--s3); }

.qa-home .qa-area,
.qa-home .qa-post {
    border: 1px solid var(--qa-line);
    border-radius: var(--r-card);
    background: var(--qa-surface);
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
.qa-home .qa-area { border-bottom-width: 1px; }
.qa-home .qa-post { border-top-width: 1px; }
.qa-home .qa-area:hover,
.qa-home .qa-post:hover { border-color: var(--qa-navy-line); box-shadow: var(--sh-2); }
.qa-home .qa-post h3 { font-size: 1rem; font-weight: 700; }
.qa-home .qa-post p { color: var(--qa-muted); font-size: .86rem; line-height: 2; }
.qa-home .qa-post time { color: var(--qa-faint); font-size: .78rem; }

/* ══ مشاوران ══════════════════════════════════════════════════════════════
   کارتِ قبلی یک باندِ گرادیانیِ ۷۴ پیکسلی بالای خودش داشت که در نبودِ عکسِ
   مشاور شبیه تصویرِ خراب دیده می شد ، به علاوه ی یک ریبونِ رنگی ، یک مدال روی
   آواتار ، دو جعبه ی آمار و دو دکمه. اعتماد از شلوغی نمی آید: عکس ، نام ،
   نقش ، و یک اقدام.
   ------------------------------------------------------------------------ */
.qa-home .qa-agentcard {
    padding: var(--s4) var(--s3);
    border: 1px solid var(--qa-line);
    border-radius: var(--r-card);
    background: var(--qa-surface);
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
.qa-home .qa-agentcard::before { display: none; }
.qa-home .qa-agentcard:hover {
    border-color: var(--qa-navy-line);
    box-shadow: var(--sh-2);
    transform: none;
}

/* «مشاور فعال» تنها نشانِ کارت است و به گوشه می رود ، نه وسطِ بالای عکس */
.qa-home .qa-agentcard__ribbon {
    top: var(--s2);
    right: var(--s2);
    left: auto;
    padding: 4px 10px;
    border: 1px solid var(--qa-navy-line);
    border-radius: 999px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    box-shadow: none;
    font-size: .72rem;
    font-weight: 600;
}

.qa-home .qa-agentcard__ava { margin-bottom: var(--s2); }
.qa-home .qa-agentcard__ava img {
    width: 96px;
    height: 96px;
    border: 1px solid var(--qa-line);
    box-shadow: none;
}
.qa-home .qa-agentcard__medal { display: none; }

.qa-home .qa-agentcard h3 { font-size: 1.05rem; font-weight: 700; }
.qa-home .qa-agentcard__role {
    color: var(--qa-muted);
    background: transparent;
    border: 0;
    padding: 0;
    font-size: .84rem;
    font-weight: 500;
}
.qa-home .qa-agentcard__role i { color: var(--qa-slate-2); }

/* «امتیاز ماه» و «جایگاه ماه» عددهای واقعیِ سامانه اند و می مانند ، ولی به
   جای دو جعبه ی رنگی یک ردیفِ ساده می شوند. */
.qa-home .qa-agentcard__stats {
    margin: var(--s3) 0;
    padding: var(--s2) 0;
    border-top: 1px solid var(--qa-line-soft);
    border-bottom: 1px solid var(--qa-line-soft);
    background: transparent;
}
.qa-home .qa-agentcard__stats > div { border: 0; background: transparent; padding: 0; }
.qa-home .qa-agentcard__stats > div + div { border-inline-start: 1px solid var(--qa-line); }
.qa-home .qa-agentcard__stats i { display: none; }
.qa-home .qa-agentcard__stats b { color: var(--qa-ink); font-size: 1.05rem; font-weight: 700; }
.qa-home .qa-agentcard__stats span { color: var(--qa-muted); font-size: .76rem; font-weight: 500; }

.qa-home .qa-agentcard__acts { gap: var(--s1); }
.qa-home .qa-agentcard__acts .qa-btn {
    height: 44px;
    border-radius: var(--r-ctl);
    font-size: .88rem;
    font-weight: 700;
    box-shadow: none;
}
.qa-home .qa-agentcard__acts .qa-btn--primary {
    border: 1px solid var(--qa-navy);
    color: #fff;
    background: var(--qa-navy);
}
.qa-home .qa-agentcard__acts .qa-btn--primary:hover { background: var(--qa-navy-2); border-color: var(--qa-navy-2); }
.qa-home .qa-agentcard__acts .qa-btn--line { border: 1px solid var(--qa-line); color: var(--qa-navy); }

/* ══ اینستاگرام و اپلیکیشن ═══════════════════════════════════════════════
   دو کارت با دو زمینه ی گرادیانیِ صورتی و آبی بودند ؛ هیچ کدام رنگِ برند
   نیست. حالا هر دو سطحِ سفید با کادرِ نازک اند و رنگِ اینستاگرام فقط روی
   دکمه ی خودش می ماند (رنگِ سرویسِ بیرونی است ، نه رنگِ طراحی).
   ------------------------------------------------------------------------ */
.qa-home .q-follow { gap: var(--s3); }
.qa-home .q-follow__card,
.qa-home .q-follow__card--ig,
.qa-home .q-follow__card--app {
    padding: var(--s4);
    border: 1px solid var(--qa-line);
    border-radius: var(--r-card);
    background: var(--qa-surface);
    box-shadow: none;
}
.qa-home .q-follow__body h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.8; }
.qa-home .q-follow__body p { color: var(--qa-muted); font-size: .88rem; line-height: 2; }
.qa-home .q-follow__eyebrow {
    color: var(--qa-muted);
    background: transparent;
    padding: 0;
    font-size: .8rem;
    font-weight: 600;
}
.qa-home .q-follow__card--app .q-follow__eyebrow i,
.qa-home .q-follow__card--ig .q-follow__eyebrow i { background: transparent; }
.qa-home .q-follow__hint { color: var(--qa-faint); font-size: .78rem; }

.qa-home .qa-btn { height: 46px; border-radius: var(--r-ctl); box-shadow: none; font-weight: 700; }
.qa-home .qa-btn--primary { border: 1px solid var(--qa-orange); color: #fff; background: var(--qa-orange); }
.qa-home .qa-btn--primary:hover { border-color: var(--qa-orange-deep); background: var(--qa-orange-deep); }

.qa-home .q-qr { border: 1px solid var(--qa-line); border-radius: var(--r-card); background: var(--qa-surface); box-shadow: none; }
.qa-home .q-store { border-radius: var(--r-ctl); box-shadow: none; }
.qa-home .q-phone { box-shadow: none; }

/* روی گوشی ، کدِ QR کارِ کسی را راه نمی اندازد (کاربر نمی تواند با همان گوشی
   کدِ روی صفحه اش را اسکن کند) ، پس فقط دکمه ی مستقیم می ماند. */
@media (max-width: 767.98px) {
    .qa-home .q-qr img[src*="qr-"],
    .qa-home .q-qr span { display: none; }
    .qa-home .q-qr { padding: var(--s2); }
    .qa-home .q-follow__hint { display: none; }
}

/* ══ پرسش و پاسخ ═════════════════════════════════════════════════════════ */
.qa-home .qa-faq { max-width: 900px; margin-inline: auto; }
.qa-home .qa-faq__item {
    border: 1px solid var(--qa-line);
    border-radius: var(--r-card);
    background: var(--qa-surface);
    box-shadow: none;
}
.qa-home .qa-faq__item + .qa-faq__item { margin-top: var(--s1); }
.qa-home .qa-faq__item.is-open { border-color: var(--qa-navy-line); box-shadow: none; }
.qa-home .qa-faq__q {
    padding: var(--s2) var(--s3);
    color: var(--qa-ink);
    font-size: .98rem;
    font-weight: 600;
    gap: var(--s2);
}
/* آیکونِ نارنجیِ گردِ کنارِ هر سوال برداشته شد: نارنجی رنگِ اقدام است و اینجا
   هیچ اقدامی نیست. علامتِ باز/بسته خودش کافی است. */
.qa-home .qa-faq__mark { display: none; }
.qa-home .qa-faq__q > .fi-chevron-down { color: var(--qa-slate-2); transition: transform .18s; }
.qa-home .qa-faq__item.is-open .qa-faq__q > .fi-chevron-down { transform: rotate(180deg); }
.qa-home .qa-faq__a p { color: var(--qa-body); font-size: .9rem; line-height: 2.1; }
.qa-home .qa-faq__links a {
    height: 38px;
    border: 1px solid var(--qa-line);
    border-radius: var(--r-ctl);
    color: var(--qa-navy);
    background: var(--qa-surface);
    font-size: .82rem;
    font-weight: 600;
}

/* ══ لینک های سئو ═════════════════════════════════════════════════════════
   قبلاً سه ردیفِ تمام عرض بود و در هر ردیف ۱۵ تا قرصِ کادردار — یک دیوارِ
   برچسب. برای موتور جستجو همان لینک ها لازم اند ، ولی آدمی که صفحه را
   می خواند نباید با پنجاه قرص روبه رو شود.

   بنابراین: سه ستونِ فهرستِ متنیِ ساده (نه قرص) ، هفت لینکِ اولِ هر ستون باز
   و بقیه پشتِ یک <details>. محتوا در DOM هست ، فقط دیده نمی شود — پس سئو
   دست نخورده می ماند.
   ------------------------------------------------------------------------ */
.qa-home .q-seo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s3);
}

.qa-home .q-seo__col {
    display: block;
    padding: var(--s3);
    border: 1px solid var(--qa-line);
    border-right-width: 1px;
    border-radius: var(--r-card);
    background: var(--qa-surface);
}

.qa-home .q-seo__col h3 {
    padding: 0 0 var(--s2);
    margin-bottom: var(--s2);
    border-left: 0;
    border-bottom: 1px solid var(--qa-line-soft);
    color: var(--qa-ink);
    font-size: .95rem;
    font-weight: 700;
}

.qa-home .q-seo__ico {
    width: 32px;
    height: 32px;
    border-radius: var(--r-ctl);
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: .95rem;
}

.qa-home .q-seo__links { display: block; }

.qa-home .q-seo__links a {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--qa-body) !important;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.8;
}
.qa-home .q-seo__links a:hover { color: var(--qa-navy) !important; background: transparent; }
.qa-home .q-seo__links a i { color: var(--qa-faint); font-size: .72rem; }

.qa-home .q-seo__more { margin-top: var(--s1); }
.qa-home .q-seo__more > summary {
    padding: var(--s1) 0;
    color: var(--qa-navy);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.qa-home .q-seo__more > summary::-webkit-details-marker { display: none; }
.qa-home .q-seo__more > summary::after { content: " ↓"; }
.qa-home .q-seo__more[open] > summary::after { content: " ↑"; }

@media (max-width: 991.98px) {
    .qa-home .q-seo { grid-template-columns: minmax(0, 1fr); }
}

/* ══ فراخوانِ پایانی و پاورقی ═════════════════════════════════════════════ */
.qa-home .qa-cta,
.qa-home .footer-cta,
.qa-home .intro-cta {
    border-radius: var(--r-card);
    box-shadow: none;
}

.qa-home footer,
.qa-home .qa-footer { border-top: 1px solid var(--qa-line); }
.qa-home footer a { font-size: .88rem; }
.qa-home footer .copyright,
.qa-home footer small { color: var(--qa-faint); }

/* ── اصلاحِ هیرو بعد از دیدنِ رندر ────────────────────────────────────────
   ۱) نوارِ سه عددی روی اسلایدِ برند هم می ماند. قبلاً فقط اسلایدِ ملک آن را
      داشت و نیمه ی راستِ هیرو زیرِ دکمه خالی می ماند — همان جایی که کاربر
      دنبالِ جوابِ «چرا به این سایت اعتماد کنم؟» می گردد.
   ۲) ته رنگِ پنل کمی پررنگ تر تا دو نیمه ی هیرو از هم تفکیک شوند. */

@media (min-width: 992px) {
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        background: color-mix(in srgb, var(--q-banner-bg, #F4F7FC) 70%, #fff);
    }
}

/* ══ بخشِ «ثبت ملک» ═══════════════════════════════════════════════════════
   مهم ترین تبدیلِ سایت تا حالا فقط یک دکمه ی کوچک در سربرگ بود. حالا یک بخشِ
   کامل دارد: یک تیترِ روشن ، یک جمله ی توضیح ، یک دکمه ی نارنجی و سه نکته ی
   کوتاه که نگرانیِ مالک را جواب می دهند. کارت های اینستاگرام و اپلیکیشن کنارش
   می نشینند ، چون هر سه یک چیزند: «قدمِ بعدی».
   ------------------------------------------------------------------------ */
/* یک بندِ تمام عرض : متن سمتِ راست ، دکمه ها و نکته ها سمتِ چپ. پیش از این
   نصفِ عرض بود و کارت های اینستاگرام و اپلیکیشن ستونِ کناری اش را می گرفتند ؛
   آن دو حالا بندِ جدای خودشان را دارند. */
.qa-home .q-owner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--s3) var(--s5);
    align-items: center;
    padding: var(--s4) var(--s5);
    border: 1px solid var(--qa-navy-line);
    border-radius: var(--r-card);
    background: var(--qa-navy-soft);
}

.qa-home .q-owner__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qa-home .q-owner__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* دکمه ها به لبه ی دورِ بند می چسبند ، وگرنه گوشه ی خالیِ کنارشان بند را
       نامتوازن نشان می دهد */
    align-items: flex-end;
}

/* ردیفِ نکته ها زیرِ هر دو ستون */
.qa-home .q-owner__points { grid-column: 1 / -1; }

.qa-home .q-owner__eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-bottom: var(--s2);
    color: var(--qa-navy-2);
    font-size: .84rem;
    font-weight: 600;
}

.qa-home .q-owner__main h2 {
    margin: 0 0 var(--s2);
    color: var(--qa-ink);
    font-size: clamp(1.3rem, 2.2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.6;
    text-wrap: balance;
}

.qa-home .q-owner__main p {
    max-width: 52ch;
    margin: 0;
    color: var(--qa-body);
    font-size: .95rem;
    line-height: 2;
}

.qa-home .q-owner__acts { display: flex; flex-wrap: wrap; gap: var(--s1); }
.qa-home .q-owner__acts .qa-btn { height: 50px; padding-inline: var(--s3); font-size: .95rem; }
.qa-home .q-owner__acts .qa-btn--line { border: 1px solid var(--qa-navy-line); color: var(--qa-navy); background: var(--qa-surface); }
.qa-home .q-owner__acts .qa-btn--line:hover { border-color: var(--qa-navy); }

.qa-home .q-owner__points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    padding: var(--s3) 0 0;
    margin: 0;
    border-top: 1px solid var(--qa-navy-line);
    list-style: none;
}
.qa-home .q-owner__points li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--qa-body);
    font-size: .85rem;
    font-weight: 500;
}
.qa-home .q-owner__points i { color: var(--qa-navy-2); }

@media (max-width: 991.98px) {
    .qa-home .q-owner { grid-template-columns: minmax(0, 1fr); padding: var(--s4) var(--s3); }
}

/* ── اصلاحاتِ ریز بعد از بازبینیِ رندر ─────────────────────────────────── */

/* چیپ های بالای شبکه ی کارت ها زیرِ تیترِ همان بخش می نشینند ، نه وسطِ صفحه */
.qa-home .qa-chipbar { justify-content: flex-start; }

/* نیمه ی خاموشِ تبِ معامله باید خوانده شود ، نه اینکه غیرفعال به نظر برسد */
.qa-home .q-tab { color: var(--qa-navy); }
.qa-home .q-tab__txt small { color: var(--qa-slate-2); }

/* دکمه ی اینستاگرام رنگِ خودِ اینستاگرام را دارد (رنگِ سرویسِ بیرونی است) ولی
   گرادیانِ چهاررنگ برداشته شد ــ در این صفحه هیچ سطحِ گرادیانیِ دیگری نیست. */
.qa-home .qa-btn--ig {
    border: 1px solid #C13584;
    background: #C13584;
    box-shadow: none;
}
.qa-home .qa-btn--ig:hover { background: #A32D6F; border-color: #A32D6F; }

/* ══════════════════════════════════════════════════════════════════════════
   واکنش گرایی
   --------------------------------------------------------------------------
   سه چیدمانِ جدا ، نه یک چیدمانِ دسکتاپ که عمودی شده باشد:

     دسکتاپ  (≥۱۲۰۰) : هیرو دوستونی ، نقشه ۷۳٪ کنارِ فیلتر ، کارت ها ۴ ستون
     تبلت    (۷۶۸–۱۱۹۹): هیرو عمودی ، نقشه بالای فیلتر ، کارت ها ۳/۲ ستون
     گوشی    (<۷۶۸)  : ردیفِ نوع ملک اسکرولِ افقی ، کارت ها ۱ ستون ، همه ی
                        هدف های لمسی حداقل ۴۴ پیکسل
   ========================================================================== */

@media (max-width: 1199.98px) {
    .qa-home { --gut: 20px; }
    .qa-home .q-maprow { grid-template-columns: 320px minmax(0, 1fr); }
    .qa-home .q-map__canvas { min-height: 520px; }
}

@media (max-width: 991.98px) {
    .qa-home { --gut: 16px; }

    .qa-home .qa-sec,
    .qa-home .qa-sec + .qa-sec,
    .qa-home .qa-sec:nth-of-type(even) { padding-top: var(--s6); }
    .qa-home .qa-sec--pad { padding-bottom: var(--s6); }

    .qa-home .qa-sechead { flex-direction: column; align-items: flex-start; gap: var(--s2); }

    .qa-home .q-hero { margin-top: calc(var(--qa-header-h) + var(--s2)); }
    .qa-home .q-slide__title,
    .qa-home .q-slide--brand .q-slide__title { font-size: clamp(1.4rem, 4.4vw, 1.9rem); }
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        padding: var(--s3);
        background: transparent;
    }

    .qa-home .q-hunt__in { padding: var(--s2) var(--s2) 0; }

    /* نقشه بالای فیلتر می آید: در گوشی «کجا» را روی نقشه می بینند و بعد
       تنگ ترش می کنند ، نه برعکس. ترتیبِ DOM (اول فیلتر) برای دسکتاپ درست
       است و دست نمی خورد. */
    .qa-home .q-maprow { grid-template-columns: minmax(0, 1fr); }
    .qa-home .q-map { order: -1; border-inline-end: 0; border-bottom: 1px solid var(--qa-line); }
    .qa-home .q-map__canvas { min-height: 420px; }

    .qa-home .q-owner__main h2 { font-size: 1.35rem; }
}

@media (max-width: 767.98px) {
    .qa-home { --gut: 16px; }

    .qa-home .qa-sec,
    .qa-home .qa-sec + .qa-sec,
    .qa-home .qa-sec:nth-of-type(even) { padding-top: var(--s5); }
    .qa-home .qa-sec--pad { padding-bottom: var(--s5); }

    .qa-home .qa-sechead h2 { font-size: 1.2rem; }
    .qa-home .qa-sechead p { font-size: .86rem; }
    .qa-home .qa-more { width: 100%; justify-content: center; }

    /* تبِ معامله: دو سگمنتِ هم عرض ، هر کدام ۵۲ پیکسل ــ هدفِ لمسِ راحت */
    .qa-home .q-deals { margin-bottom: var(--s2); }
    .qa-home .q-tab { padding-inline: var(--s1); height: 52px; }
    .qa-home .q-tab__txt { flex-direction: column; align-items: center; gap: 0; }
    .qa-home .q-tab__txt b { font-size: .9rem; }
    .qa-home .q-tab__txt small { font-size: .68rem; }

    .qa-home .q-map__canvas { min-height: 340px; }
    .qa-home .q-filter { padding: var(--s2); }

    /* هدفِ لمس: هیچ کنترلِ تعاملی زیر ۴۴ پیکسل نمی ماند */
    .qa-home .q-filter__ctl select,
    .qa-home .q-filter__ctl input,
    .qa-home .q-chips button,
    .qa-home .qa-chipbar button { height: 46px; }
    .qa-home .q-filter__go { height: 54px; }
    .qa-home .q-adv > summary { padding: 12px 0; }

    /* چیپ بارِ کارت ها هم اسکرولِ افقی ، وگرنه دو ردیف می شود */
    .qa-home .qa-chipbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(var(--gut) * -1);
        padding-inline: var(--gut);
        scrollbar-width: none;
    }
    .qa-home .qa-chipbar::-webkit-scrollbar { display: none; }
    .qa-home .qa-chipbar button { flex: none; }


    .qa-home .q-assure { flex-direction: column; align-items: flex-start; gap: var(--s1); }

    .qa-home .q-owner { padding: var(--s3); }
    .qa-home .q-owner__acts { flex-direction: column; }
    .qa-home .q-owner__acts .qa-btn { width: 100%; justify-content: center; }
    .qa-home .q-owner__points { flex-direction: column; gap: var(--s1); }

    .qa-home .q-follow__card,
    .qa-home .q-follow__card--ig,
    .qa-home .q-follow__card--app { flex-direction: column; align-items: flex-start; padding: var(--s3); }
    .qa-home .q-follow__actions .qa-btn { width: 100%; justify-content: center; }

    .qa-home .qa-agentcard { padding: var(--s3); }
    .qa-home .qa-agentcard__acts { flex-direction: column; }
    .qa-home .qa-agentcard__acts .qa-btn { width: 100%; justify-content: center; }

    .qa-home .qa-faq__q { padding: var(--s2); font-size: .92rem; }
    .qa-home .q-seo__col { padding: var(--s3) var(--s2); }
}

/* ── حرکتِ کم ــ همه ی گذارها خاموش ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .qa-home *,
    .qa-home *::before,
    .qa-home *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* روی گوشی متنِ هیرو نباید کارتِ جدا باشد ــ عکس بالا و متن زیرش ، هر دو
   داخلِ همان یک کارتِ هیرو. کادر و سایه ی کارتِ درونی اینجا برداشته می شود
   (زمینه اش در بلوکِ بالا خنثی شد ، ولی کادر و سایه از قاعده ی دسکتاپ
   می آمدند). */
@media (max-width: 991.98px) {
    .qa-home .q-slide--brand .q-slide__body {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .qa-home .q-slide__acts { width: 100%; }
    .qa-home .q-slide__cta { width: 100%; justify-content: center; }
}

/* ── اصلاحِ ردیفِ تب و کاشی ها روی گوشی ────────────────────────────────────
   شمارِ زیرِ عنوانِ تب («۱٬۰۷۳ فایل آماده فروش») روی سگمنتِ ۱۷۰ پیکسلی جا
   نمی شد و از کادر بیرون می زد ؛ حالا یک خط است و در صورت نیاز با سه نقطه
   کوتاه می شود. چیپِ «همه ملک ها» هم دیگر سه خط نمی شکند. */
@media (max-width: 767.98px) {
    .qa-home .q-tab { height: 58px; }
    .qa-home .q-tab__txt { max-width: 100%; min-width: 0; }
    .qa-home .q-tab__txt b,
    .qa-home .q-tab__txt small {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .qa-home .q-tab__txt small { font-size: .66rem; }

}

/* ── لبه ی پنلِ جستجو باید دقیقاً روی لبه ی هیرو بیفتد ────────────────────
   `.q-hunt__in` هم کانتینرِ بخش است هم خودش کارت. وقتی کانتینر باشد ، پهنایش
   تا لبه ی پنجره می رود و فقط padding محتوایش را تو می برد — پس کارت لب به لبِ
   پنجره می چسبید در حالی که هیرو ۲۰ پیکسل تو رفته بود. اینجا با همان فرمولِ
   هیرو (عرض منهای دو حاشیه) قفلش می کنیم. */
.qa-home .q-hunt__in {
    width: calc(100% - (var(--gut) * 2));
    max-width: var(--wrap) !important;
    padding: var(--s3) var(--s3) 0;
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    .qa-home .q-hunt__in { padding: var(--s2) var(--s2) 0; }
    .qa-home .q-maprow { margin-inline: calc(var(--s2) * -1); }
}

/* ── سرِ بخش: فقط نسخه ی --row ردیفی است ─────────────────────────────────
   `.qa-sechead` بی مودیفایر فرزندانش را روی هم می چیند (ابرو ، تیتر ، توضیح).
   وقتی همه را flex کردیم ، تیتر و توضیحِ بخش هایی مثل «مشاوران» به دو سرِ ردیف
   پرت شدند. */
.qa-home .qa-sechead {
    display: block;
    text-align: start;
}
.qa-home .qa-sechead--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s3);
}
.qa-home .qa-sechead--row > div { min-width: 0; }

@media (max-width: 767.98px) {
    .qa-home .qa-sechead--row { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

.qa-home .qa-faq__more { margin-top: var(--s1); }
.qa-home .qa-faq__more > summary {
    padding: var(--s2);
    border: 1px dashed var(--qa-line);
    border-radius: var(--r-card);
    color: var(--qa-navy);
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    list-style: none;
}
.qa-home .qa-faq__more > summary::-webkit-details-marker { display: none; }
.qa-home .qa-faq__more[open] > summary { margin-bottom: var(--s1); }

/* ══ پاورقی ═══════════════════════════════════════════════════════════════
   فراخوانِ بالای پاورقی (qf-cta) روی همه ی صفحه ها هست و جایش هم درست است ،
   ولی در صفحه ی اصلی دقیقاً همان کاری را می کند که بخشِ «ثبت ملک» بالاتر
   انجام داده — دو فراخوانِ هم معنی پشتِ سرِ هم ، تأکید را نصف می کنند. پس فقط
   در همین صفحه پنهان می شود (هر دو لینکش جای دیگری از صفحه هست: سربرگ ،
   هیرو ، دکمه ی جستجوی نقشه و خودِ بخشِ ثبت ملک).
   ------------------------------------------------------------------------ */
.qa-home .qf-cta { display: none; }

.qa-home .qf-column h3::after,
.qa-home .qf-links a::before,
.qa-home .qf-contact li::before { background: var(--qa-line); }

.qa-home .qf-links a,
.qa-home .qf-contact a,
.qa-home .qf-contact span { font-size: .88rem; }

.qa-home .qf-bottom,
.qa-home .qf-copy { color: var(--qa-faint); font-size: .8rem; }

/* ══ حالت شب ═════════════════════════════════════════════════════════════
   بدنه ی این فایل توکن محور است ، پس حالت شب خودبه خود کار می کند. فقط سه
   جا که رنگِ ثابت دارند وصله می خورند:

     • پنلِ محتوای هیرو رنگش را از --q-banner-bg می گیرد که مدیر انتخاب کرده
       و همیشه روشن است ؛ در شب همان سطحِ کارت می شود.
     • زمینه ی جای عکسِ اسلاید (#edf1f5 در public.css) یک مستطیلِ روشن بود که
       پیش از بارگذاری عکس برق می زد.
     • ته رنگِ سگمنتِ تب و کارتِ «ثبت ملک» با توکن های شب هم خوانده می شوند و
       فقط برای اطمینان اینجا صریح می شوند.
   ------------------------------------------------------------------------ */
html[data-theme="dark"] .qa-home .q-slide__body,
html[data-theme="dark"] .qa-home .q-slide--brand .q-slide__body {
    background: var(--qa-surface);
}

html[data-theme="dark"] .qa-home .q-slide__media {
    background: var(--qa-soft);
}

html[data-theme="dark"] .qa-home .q-deals {
    background: var(--qa-slate-soft);
}

html[data-theme="dark"] .qa-home .q-owner__main {
    background: var(--qa-navy-soft);
}

html[data-theme="dark"] .qa-home .q-map__go {
    color: var(--qa-ink) !important;
    background: var(--qa-surface);
}

/* ══ دسترس پذیری: کنتراست ═════════════════════════════════════════════════
   یک پویشِ کنتراست روی کلِ صفحه (هر متن در برابر نزدیک ترین زمینه ی مات) سه
   دسته اشکال پیدا کرد. هر سه اینجا وصله می شوند:

   ۱) خانواده ی سرمه ای در `.qa-home` دوباره تعریف شده بود (--qa-navy:#27364d).
      متغیرهای CSS از نزدیک ترین جدِ تعریف کننده می آیند ، نه از قویترین
      انتخابگر — پس این تعریفِ روی <body> ، تعریفِ شبِ dark.css را که روی
      <html> نشسته بود می پوشاند و در حالت شب برچسبِ کاشی های نوع ملک
      (۱٫۱۹:۱) و «مشاهده همه» عملاً نامرئی می شدند.

   ۲) `.q-filter` و `.q-maprow` زمینه ی #fff ثابت داشتند و در شب یک مستطیلِ
      سفید زیرِ متنِ روشن می ساختند (۱٫۱۶:۱).

   ۳) سفید روی نارنجیِ برند ۳٫۲۵:۱ است و برای متنِ اندازه ی معمولی کافی نیست.
      نارنجیِ برند برای تأکید و آیکن سرِ جایش می ماند ؛ فقط سطحِ دکمه های پر
      یک پله عمیق تر می شود (۴٫۶:۱).
   ------------------------------------------------------------------------ */
.qa-home {
    --qa-cta: #C94D14;
    --qa-cta-hover: #A93F0F;
    --qa-orange-text: #B8460F;
}

html[data-theme="dark"] .qa-home {
    --qa-navy: var(--qa-d-ink);
    --qa-navy-2: #D7E0EE;
    --qa-navy-3: #24334F;
    --qa-navy-soft: #1B2740;
    --qa-navy-line: var(--qa-d-line-2);
    --qa-navy-lite: #9DB0CB;
    --qa-cta: #F06210;
    --qa-cta-hover: #FF7A2E;
    --qa-orange-text: #FF8A45;
}

/* برچسبِ کاشیِ نوع ملک با !important در public.css نوشته شده ، پس اینجا هم
   باید صریح باشد وگرنه در شب همان رنگِ روزِ خودش را نگه می دارد. */
html[data-theme="dark"] .qa-home .q-type { color: var(--qa-d-body) !important; }
html[data-theme="dark"] .qa-home .q-type.is-on { color: var(--qa-d-ink) !important; }

.qa-home .q-filter,
.qa-home .q-maprow { background: var(--qa-surface); }
.qa-home .q-map__canvas { background: var(--qa-soft); }

/* دکمه های پر ــ سطحِ عمیق تر ، متنِ سفید */
.qa-home .qa-hbtn--solid,
.qa-home .q-slide__cta,
.qa-home .q-slide--brand .q-slide__cta,
.qa-home .q-filter__go,
.qa-home .qa-btn--primary,
.qa-home .q-owner__acts .qa-btn--primary {
    border-color: var(--qa-cta);
    background: var(--qa-cta);
    color: #fff;
}
.qa-home .qa-hbtn--solid:hover,
.qa-home .q-slide__cta:hover,
.qa-home .q-filter__go:hover,
.qa-home .qa-btn--primary:hover {
    border-color: var(--qa-cta-hover);
    background: var(--qa-cta-hover);
}

/* نارنجیِ *متن* هم یک پله عمیق تر ــ #F26522 روی سفید فقط ۳٫۱:۱ می داد */
.qa-home .q-slide__price b,
.qa-home .estate-grid .ec-price .price-val.is-accent { color: var(--qa-orange-text); }

/* ── ادامه ی کنتراست: توکن هایی که در شب نقششان عوض می شود ────────────────
   dark.css عمداً --qa-navy را *روشن* می کند ، چون در public.css بیشتر رنگِ
   متن است تا زمینه. هر جا در این فایل از آن به عنوان «زمینه ی انتخاب شده»
   استفاده کرده ایم ، در شب سفید روی سفید می شد. پس یک توکنِ جدا برای همان
   نقش گذاشته می شود.

   نارنجیِ دکمه هم در هر دو حالت یکی است: سطحِ روشن ترِ برند سفید را فقط به
   ۳٫۲۵:۱ می رساند و این برای متنِ اندازه ی معمولی کافی نیست ، در شب هم همان
   قدر کافی نیست که در روز. */
.qa-home {
    --qa-sel: var(--qa-navy);
    --qa-sel-2: var(--qa-navy-2);
    /* #6B7484 روی ته رنگِ هیرو ۴٫۴۸:۱ می داد ــ یک مو زیرِ حدِ ۴٫۵ */
    --qa-muted: #667083;
}
html[data-theme="dark"] .qa-home {
    /* حالتِ انتخاب شده باید در شب هم فوراً دیده شود ؛ #24334F از زمینه ی
       سگمنت (#1A2437) تقریباً جدا نمی شد و تب فعال خاموش به نظر می رسید. */
    --qa-sel: #2F5AA8;
    --qa-sel-2: #3C6BBE;
    --qa-cta: #C94D14;
    --qa-cta-hover: #E05A18;
}

.qa-home .q-tab.is-on,
.qa-home .q-chips button.is-on,
.qa-home .qa-chipbar button.is-on,
.qa-home .q-filter__tag.is-deal,
.qa-home .q-type.is-on .q-type__ico,
.qa-home .q-map__styles button.is-on,
.qa-home .qa-agentcard__acts .qa-btn--primary {
    border-color: var(--qa-sel);
    background: var(--qa-sel);
    color: #fff;
}
.qa-home .qa-agentcard__acts .qa-btn--primary:hover {
    border-color: var(--qa-sel-2);
    background: var(--qa-sel-2);
}
.qa-home .q-type.is-on { box-shadow: inset 0 0 0 1px var(--qa-sel); border-color: var(--qa-sel); }
.qa-home .q-type.is-on .q-type__on { background: var(--qa-sel); }

/* شمارنده ی کنارِ دکمه ی جستجو ــ سفیدِ شفاف روی نارنجی خودش را محو می کرد */
.qa-home .q-filter__go b { background: rgba(0, 0, 0, .24); }

/* نشانِ «فروش/اجاره» و «مشاور راهنما» روی کارت ــ همان نارنجیِ دکمه ها */
.qa-home .estate-grid .ec-type-badge,
.qa-home .estate-grid .ec-guide-flag {
    background: var(--qa-cta);
    color: #fff;
}

/* public.css این دو را با شناسه نوشته (`#qaCards .ec-type-badge`) ، پس قاعده ی
   کلاسیِ بالاتر به آن نمی رسد و باید هم شناسه نوشته شود. */
.qa-home #qaCards .ec-type-badge,
.qa-home #qaCards .ec-guide-flag {
    background: var(--qa-cta);
    color: #fff;
}

/* ── آخرین دور کنتراست ───────────────────────────────────────────────────
   دو توکنِ کم رنگ در نقشِ «متنِ کوچکِ کنارِ برچسب» به کار می روند (شمارِ فایل
   زیرِ نامِ نوع ملک ، شمارِ فایل زیرِ تبِ معامله) و هر دو زیرِ ۴٫۵ بودند. رنگِ
   کم رنگ برای «کم اهمیت» است ، نه برای «ناخوانا». */
.qa-home {
    --qa-faint: #6E7789;
    --qa-slate-2: #6E7789;
}

/* شمارنده ی روی چیپِ فعال ــ سفیدِ ۲۰٪ روی سرمه ای عملاً سفید روی سفید بود */
.qa-home .qa-chipbar button.is-on b { background: rgba(0, 0, 0, .26); }

.qa-home .q-tab__txt small { color: var(--qa-muted); }

/* فراداده ی کاریِ کارت (نامِ مالک ، درصد ، انقضا ، برچسبِ راهنما) را فقط
   مشاور و مدیر می بینند ، ولی همان ها هم باید بخوانندش: این چهار رنگ روی
   سفید بین ۲٫۵ تا ۴ بودند. اصلاح فقط در همین صفحه است ، پس کارتِ صفحه های
   پنل دست نخورده می ماند. */
.qa-home #qaCards .ec-expire,
.qa-home #qaCards .ec-party,
.qa-home #qaCards .ec-party a,
.qa-home #qaCards .ec-party span { color: var(--qa-muted); }
.qa-home #qaCards .ec-percent,
.qa-home #qaCards .ec-guide-tag { color: #A0410F; }

.qa-home #qaCards .ec-party .ec-guide-tag { color: #8A3A0C; }

/* ══════════════════════════════════════════════════════════════════════════
   هیرو ــ نسخه ی دوم
   --------------------------------------------------------------------------
   دو چیز عوض می شود:

   ۱) رنگِ بنر دیگر رقیق نمی شود. رنگی که مدیر انتخاب کرده ، همان رنگ ، تمامِ
      نیمه ی متن را می گیرد. رنگِ متن را بلید از روشناییِ همان رنگ حساب کرده و
      به صورت --q-banner-ink می فرستد ، پس روی هر رنگی — از کرم تا سرمه ای
      تیره — متن خوانا می ماند. بقیه ی پله ها همین جا با color-mix ساخته
      می شوند تا بلید فقط دو عدد بفرستد.

   ۲) چیدمانِ ستونِ متن پایه دار می شود: متن در وسط می نشیند ولی نوارِ اعتماد
      همیشه به کفِ پنل چسبیده است (margin-top:auto). پس بنرِ یک خطی و بنرِ
      پرمتن هر دو یک قاب دارند و ارتفاعِ هیرو با هر بنری ثابت می ماند — همان
      چیزی که با متن های متفاوتِ هر بنر بهم می ریخت.
   ========================================================================== */
.qa-home .q-slide {
    --bnr-bg: var(--q-banner-bg, #F7F4F0);
    --bnr-ink: var(--q-banner-ink, #0B1220);
    /* متنِ درجه دو: همان جوهر ، کمی به سمتِ زمینه. روی زمینه ی روشن خاکستریِ
       تیره می شود و روی زمینه ی تیره خاکستریِ روشن. */
    --bnr-ink-2: color-mix(in srgb, var(--bnr-ink) 76%, var(--bnr-bg));
    --bnr-line: color-mix(in srgb, var(--bnr-ink) 20%, var(--bnr-bg));
    --bnr-chip: color-mix(in srgb, var(--bnr-ink) 10%, var(--bnr-bg));
}

@media (min-width: 992px) {
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        /* رنگِ خودِ بنر ، بی واسطه */
        background: var(--bnr-bg);
        padding: var(--s5) clamp(28px, 3vw, 52px);
    }
}

/* ── متن های روی پنل ــ همه از جوهرِ محاسبه شده ──────────────────────────── */
.qa-home .q-slide--brand .q-slide__title { color: var(--bnr-ink); }
.qa-home .q-slide--brand .q-slide__lead,
.qa-home .q-slide--brand .q-slide__long { color: var(--bnr-ink-2); }

.qa-home .q-slide--brand .q-slide__badge {
    border-color: var(--bnr-line);
    color: var(--bnr-ink);
    background: var(--bnr-chip);
}


/* دکمه نارنجیِ برند می ماند (رنگِ اقدام است) ولی یک حلقه ی نازک از جوهرِ همان
   بنر می گیرد ، وگرنه اگر مدیر رنگِ نارنجی انتخاب کند دکمه در زمینه گم می شود. */
.qa-home .q-slide--brand .q-slide__cta {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bnr-ink) 28%, transparent);
}

/* ── ستونِ متن: متن وسط ، نوارِ اعتماد کفِ پنل ───────────────────────────── */
@media (min-width: 992px) {
    .qa-home .q-slide__body { justify-content: center; }
    .qa-home .q-slide__acts { margin-bottom: var(--s5); }
}

/* متنِ بنر را مدیر می نویسد و طولش دستِ ما نیست ، پس سقفِ خط می گذاریم تا یک
   عنوانِ بلند ، دکمه و نوارِ اعتماد را از قاب بیرون نیندازد. */
.qa-home .q-slide__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.qa-home .q-slide__lead {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.qa-home .q-slide__long {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* ── خوشه ی پیمایشِ اسلایدر ──────────────────────────────────────────────
   قبلاً دو فلشِ گرد و یک ردیفِ نقطه ، هر کدام با مختصاتِ دستیِ خودشان روی عکس
   شناور بودند. حالا یک نوارِ واحد در گوشه ی پایینِ عکس. */
.qa-home .q-hero__nav {
    position: absolute;
    z-index: 3;
    bottom: var(--s2);
    left: var(--s2);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(11, 18, 32, .44);
    backdrop-filter: blur(10px);
}

.qa-home .q-hero__arrow,
.qa-home .q-hero__dots {
    position: static;
    inset: auto;
}

.qa-home .q-hero__arrow {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    font-size: .9rem;
}
.qa-home .q-hero__arrow:hover { color: #fff; background: rgba(255, 255, 255, .18); }

.qa-home .q-hero__dots { padding-inline: 6px; gap: 6px; }
.qa-home .q-hero__dots button { width: 18px; height: 26px; }
.qa-home .q-hero__dots span { width: 14px; }
.qa-home .q-hero__dots .is-on span { width: 26px; background: #fff; }

@media (max-width: 991.98px) {
    /* روی گوشی خوشه به کفِ عکس می چسبد و فلش ها می مانند (لمس روی نوارِ کوچک
       راحت تر از کشیدنِ انگشت روی عکسِ کوتاه است) */
    .qa-home .q-hero__nav {
        bottom: auto;
        top: calc(clamp(200px, 40vw, 300px) - 46px);
        left: 50%;
        transform: translateX(-50%);
    }
    .qa-home .q-hero__arrow { display: grid; width: 30px; height: 30px; }
}

/* پنلِ متن باید تمام ارتفاعِ اسلاید را بگیرد ــ ارتفاعِ ردیفِ گرید را بلندترین
   اسلاید تعیین می کند و `.q-slide` روی دسکتاپ بلوک بود ، پس پنل روی min-height
   خودش می ایستاد و زیرِ رنگِ بنر یک نوارِ سفید می ماند. عکس absolute است و از
   جریان بیرون ، پس تنها آیتمِ فلکس همین پنل است. */
@media (min-width: 992px) {
    .qa-home .q-slide { display: flex; }
    .qa-home .q-slide__panel { flex: 1 1 auto; }
    .qa-home .q-slide__acts { margin-bottom: var(--s4); }
}


/* سه متنِ کم کنتراستِ پاورقی. فقط در صفحه ی اصلی اصلاح می شوند چون پاورقی
   partial مشترک است و صفحه های دیگر خارج از دامنه ی این بازطراحی اند. */
.qa-home .qf-brand span { color: var(--qa-orange-text); }
.qa-home .qf-map small { color: var(--qa-body); }
.qa-home .qf-bottom p { color: var(--qa-muted); }

/* --qa-muted / --qa-faint / --qa-slate-2 را برای کنتراستِ حالتِ روز یک پله
   تیره کردیم ، ولی همان تله ی --qa-navy را ساختند: تعریفِ روی .qa-home ،
   تعریفِ شبِ dark.css را می پوشاند و در حالت شب متن های کم رنگ تیره تر از
   زمینه می شدند. پس مقدارهای شب اینجا برگردانده می شوند. */
html[data-theme="dark"] .qa-home {
    --qa-muted: var(--qa-d-muted);
    --qa-faint: #8A99B0;
    --qa-slate-2: #8D9CB4;
}

/* برچسبِ «راهنما» را برای روز تیره کردیم و در شب روی زمینه ی نارنجیِ تیره اش
   افتاد. (این برچسب فقط برای مشاور و مدیر رندر می شود.) */
html[data-theme="dark"] .qa-home #qaCards .ec-party .ec-guide-tag { color: #FFB27A; }

/* ── رنگِ بنر روی گوشی و تبلت ────────────────────────────────────────────
   زیرِ ۹۹۲px پنل را شفاف کرده بودیم (وقتی هنوز کارتِ جدا بود). حالا که رنگِ
   متن از روی رنگِ بنر حساب می شود ، پنلِ شفاف یعنی متنِ سفیدِ یک بنرِ تیره
   روی زمینه ی سفید — یعنی نامرئی.

   پس در موبایل هم همان رنگ می نشیند: عکس بالا ، بلوکِ رنگیِ متن زیرش. هویتِ
   بنر حفظ می شود و خوانایی هم تضمین. */
@media (max-width: 991.98px) {
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        padding: var(--s3);
        background: var(--bnr-bg);
    }
    .qa-home .q-slide--brand .q-slide__title { color: var(--bnr-ink); }
    .qa-home .q-slide--brand .q-slide__lead,
    .qa-home .q-slide--brand .q-slide__long { color: var(--bnr-ink-2); }
    .qa-home .q-slide--brand .q-slide__badge {
        border-color: var(--bnr-line);
        color: var(--bnr-ink);
        background: var(--bnr-chip);
    }
    /* پنلِ رنگی باید تا کفِ کارت برود ، وگرنه زیرش یک نوارِ سفید می ماند */
    .qa-home .q-slide { min-height: 0; }
    .qa-home .q-slide__panel { padding-bottom: var(--s4); }
}

/* بلوکِ رنگی باید لب به لبِ کارت باشد ، نه با حاشیه ی سفید دورش ــ padding از
   پنل به خودِ بدنه منتقل می شود. */
@media (max-width: 991.98px) {
    .qa-home .q-slide__panel { padding: 0; }
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        flex: 1 1 auto;
        padding: var(--s3) var(--s3) var(--s4);
    }
}

/* ══ برخورد با dark-auto.css ══════════════════════════════════════════════
   `dark-auto.css` نسخه ی شبِ خودکارِ public.css است و قاعده هایش را با
   `html[data-theme="dark"] .qa-home …` می نویسد — یعنی هم اختصاصی تر از
   قاعده های این فایل اند و هم بعد از آن لود می شوند. چون این فایل تازه است ،
   آن ژنراتور هنوز ندیده اش و دارد طرحِ *قبلیِ* هیرو را در شب برمی گرداند:

     • `q-slide__panel` یک گرادیانِ قهوه ای-سرمه ایِ مات می گرفت. پنل به خاطر
       padding-left تمامِ اسلاید را می پوشاند ، پس آن گرادیان روی عکس می افتاد
       و نیمه ی چپِ هیرو یک مستطیلِ سیاه می شد — عکس اصلاً دیده نمی شد.
     • تبِ فعال و کاشیِ انتخاب شده رنگ های طرحِ قبلی را می گرفتند.
     • رنگِ بنر با گرادیان و کادر دوباره پوشانده می شد.

   راهِ حل بدون دست زدن به آن فایل: یک پله اختصاصی تر شدن (`body.qa-home`).
   اگر روزی darkgen دوباره اجرا شد و home.css را هم دید ، این بلوک بی اثر
   می شود نه خراب.
   ========================================================================== */
html[data-theme="dark"] body.qa-home .q-slide__panel {
    background: transparent;
}

html[data-theme="dark"] body.qa-home .q-slide__body,
html[data-theme="dark"] body.qa-home .q-slide--brand .q-slide__body {
    border: 0;
    background: var(--bnr-bg);
}

html[data-theme="dark"] body.qa-home .q-slide--brand .q-slide__title {
    color: var(--bnr-ink);
}
html[data-theme="dark"] body.qa-home .q-slide--brand .q-slide__lead,
html[data-theme="dark"] body.qa-home .q-slide--brand .q-slide__long {
    color: var(--bnr-ink-2);
}
html[data-theme="dark"] body.qa-home .q-slide__media { background: var(--qa-soft); }

html[data-theme="dark"] body.qa-home .q-hunt__in {
    border: 1px solid var(--qa-line);
    background: var(--qa-surface);
}
html[data-theme="dark"] body.qa-home .q-kinds::before { display: none; }

html[data-theme="dark"] body.qa-home .q-tab.is-on {
    background: var(--qa-sel);
    border-color: var(--qa-sel);
}
html[data-theme="dark"] body.qa-home .q-type:hover {
    border-color: var(--qa-navy-line);
    background: var(--qa-navy-soft);
}
html[data-theme="dark"] body.qa-home .q-type.is-on {
    border-color: var(--qa-sel);
    background: var(--qa-navy-soft);
}
html[data-theme="dark"] body.qa-home .q-type.is-on .q-type__ico { background: var(--qa-sel); color: #fff; }

/* سه کادرِ ۳ پیکسلیِ رنگی که در حالت روز برداشته شده بودند */
html[data-theme="dark"] body.qa-home .qa-area { border-bottom: 1px solid var(--qa-line); }
html[data-theme="dark"] body.qa-home .qa-post,
html[data-theme="dark"] body.qa-home .qa-agentcard { border-top: 1px solid var(--qa-line); }

/* ══════════════════════════════════════════════════════════════════════════
   هیرو ــ نسخه ی سوم
   --------------------------------------------------------------------------
   سه تغییرِ خواسته شده:

     ۱) عکس دقیقاً نصفِ کانتینر. کارتِ هیرو و کانتینرِ بخش ها با یک فرمولِ
        یکسان بسته شده اند (عرض منهای دو حاشیه ، سقفِ ۱۳۲۰) ، پس در هر عرضی
        هم لبه اند و ۵۰٪ کارت دقیقاً نصفِ کانتینر است — نه تقریباً.

     ۲) نوارِ آمار برداشته شد (مارک آپش هم از بلید رفت ، پس قاعده ای برایش
        نمانده).

     ۳) نشانِ برند بالای متن می نشیند و رنگ بندیِ پنل از خودِ رنگِ بنر ساخته
        می شود: یک درخششِ ملایمِ مورب به علاوه ی یک هاله ی گوشه ، هر دو از
        همان رنگ. رنگِ تازه ای به صفحه اضافه نمی شود ، فقط عمق.
   ========================================================================== */
.qa-home .q-hero { --q-hero-media: 50%; }

/* درصد در CSS نسبت به *content box* حساب می شود ، و کارتِ هیرو یک کادرِ ۱
   پیکسلی دارد. پس ۵۰٪ خالص یعنی ۶۵۹ از ۱۳۲۰ ، نه ۶۶۰ — یک پیکسل کم. همان
   یک پیکسل برگردانده می شود تا عکس *دقیقاً* نصفِ کانتینر باشد. */
.qa-home .q-hero { --q-hero-bw: 1px; }

@media (min-width: 992px) {
    .qa-home .q-slide__media {
        width: calc(50% + var(--q-hero-bw));
        max-width: calc(50% + var(--q-hero-bw));
    }
    .qa-home .q-slide__panel {
        padding-inline-start: 0;
        padding-inline-end: 0;
        padding-left: calc(50% + var(--q-hero-bw));
    }
}

/* ── رنگ بندیِ پنلِ متن ───────────────────────────────────────────────────
   سطحِ تخت ، بزرگ و بی جان بود. حالا سه لایه روی هم: یک هاله ی روشن در گوشه ی
   بالا ، یک گذارِ مورب از روشن به تیره ، و خودِ رنگ در میانه. هر سه از
   --bnr-bg مشتق می شوند ، پس با هر رنگی که مدیر بدهد هماهنگ می مانند و هیچ
   رنگِ ثابتِ تازه ای وارد نمی شود. */
@media (min-width: 992px) {
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        background:
            radial-gradient(420px 280px at 94% 2%, rgba(242, 101, 34, .10) 0%, transparent 64%),
            radial-gradient(460px 300px at 92% 4%,
                color-mix(in srgb, var(--bnr-bg) 86%, #fff) 0%, transparent 68%),
            linear-gradient(152deg,
                color-mix(in srgb, var(--bnr-bg) 94%, #fff) 0%,
                var(--bnr-bg) 48%,
                color-mix(in srgb, var(--bnr-bg) 91%, #000) 100%);
    }
}

/* ── نشانِ برند ──────────────────────────────────────────────────────────
   لوگو تماماً نارنجی است ، پس روی یک پلاکِ سفید می نشیند تا با هر رنگِ بنری
   (حتی نارنجی) خوانا بماند. زیرنویسش از جوهرِ همان بنر رنگ می گیرد. */
.qa-home .q-slide__brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.qa-home .q-slide__brand img {
    box-sizing: content-box;
    width: auto;
    height: 30px;
    padding: 10px 16px;
    border-radius: var(--r-ctl);
    background: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--bnr-ink) 14%, transparent);
}

.qa-home .q-slide__brand em {
    color: var(--bnr-ink-2);
    font-size: .84rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -.1px;
}

/* ── فاصله ها بعد از حذفِ نوارِ آمار ─────────────────────────────────────
   دکمه دیگر آخرین عنصرِ ستون است ، پس فاصله ی زیرش لازم نیست و متن می تواند
   کمی بازتر نفس بکشد. */
@media (min-width: 992px) {
    .qa-home .q-slide__acts { margin-bottom: 0; }
    .qa-home .q-slide__lead { margin-bottom: var(--s3); }
    .qa-home .q-slide--brand .q-slide__long { margin-bottom: var(--s4); }
}

@media (max-width: 991.98px) {
    .qa-home .q-slide__brand { margin-bottom: var(--s2); }
    .qa-home .q-slide__brand img { height: 24px; padding: 8px 12px; }
    .qa-home .q-slide__brand em { font-size: .78rem; }
    .qa-home .q-slide__acts { margin-bottom: 0; }
}

/* در حالت شب هم همان سه لایه ، با همان مشتق ها */
html[data-theme="dark"] body.qa-home .q-slide__body,
html[data-theme="dark"] body.qa-home .q-slide--brand .q-slide__body {
    background:
        radial-gradient(420px 280px at 94% 2%, rgba(242, 101, 34, .10) 0%, transparent 64%),
        radial-gradient(460px 300px at 92% 4%,
            color-mix(in srgb, var(--bnr-bg) 86%, #fff) 0%, transparent 68%),
        linear-gradient(152deg,
            color-mix(in srgb, var(--bnr-bg) 94%, #fff) 0%,
            var(--bnr-bg) 48%,
            color-mix(in srgb, var(--bnr-bg) 91%, #000) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   هیرو ــ نسخه ی چهارم: لبه ی محو
   --------------------------------------------------------------------------
   تا اینجا عکس و پنلِ متن با یک خطِ عمودیِ تیز از هم جدا می شدند. حالا عکس در
   لبه ی راستش با همان رنگِ پنل محو می شود ، پس مرزی دیده نمی شود و دو نیمه یک
   تصویرِ واحد می سازند.

   نکته ی مهم: خودِ کادرِ عکس هنوز *دقیقاً* نصفِ کانتینر است. طیفِ محو داخلِ همان
   نصف اتفاق می افتد ، نه با پهن کردنِ عکس. پس اندازه ای که خواسته شده بود
   دست نخورده می ماند و فقط لبه اش نرم می شود.

   طیف از --bnr-bg رنگ می گیرد ، یعنی با رنگی که مدیر برای بنر انتخاب کرده
   هماهنگ است — چه کرمِ پیش فرض باشد چه سرمه ای تیره. برای همین توکن ها از
   بدنه به خودِ اسلاید منتقل شدند: عکس خواهرِ بدنه است ، نه فرزندش.
   ========================================================================== */
@media (min-width: 992px) {
    .qa-home .q-slide__veil {
        display: block;
        z-index: 1;
        /* پهنای طیف با پیکسل بسته شده نه درصد: نصفِ کارت در ۱۰۲۴ و ۱۹۲۰ دو
           اندازه ی متفاوت است و طیفِ درصدی روی صفحه ی بزرگ بیش از حد پهن
           می شد. ۲۲۰ پیکسل در هر عرضی یک نرمیِ یکسان می دهد. */
        background: linear-gradient(to right,
            transparent calc(100% - 230px),
            color-mix(in srgb, var(--bnr-bg) 30%, transparent) calc(100% - 150px),
            color-mix(in srgb, var(--bnr-bg) 72%, transparent) calc(100% - 70px),
            color-mix(in srgb, var(--bnr-bg) 94%, transparent) calc(100% - 18px),
            var(--bnr-bg) 100%);
    }

    /* پنل تخت می شود: کارِ «رنگ بندی» را حالا خودِ طیفِ محو انجام می دهد و
       گرادیانِ مورب رویش فقط شلوغی اضافه می کرد. */
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        background:
            radial-gradient(520px 320px at 96% 0%, rgba(242, 101, 34, .07) 0%, transparent 62%),
            var(--bnr-bg);
    }
}

/* روی گوشی عکس بالاست و متن زیرش ، پس محو شدن عمودی است */
@media (max-width: 991.98px) {
    .qa-home .q-slide__veil {
        display: block;
        z-index: 1;
        background: linear-gradient(to top,
            var(--bnr-bg) 0%,
            color-mix(in srgb, var(--bnr-bg) 78%, transparent) 16%,
            color-mix(in srgb, var(--bnr-bg) 28%, transparent) 38%,
            transparent 66%);
    }
}

/* ── تایپوگرافیِ هیرو ــ تیتر باید بزرگ ترین چیزِ بالای صفحه باشد ─────────── */
.qa-home .q-slide__title,
.qa-home .q-slide--brand .q-slide__title {
    font-size: clamp(1.9rem, 3.7vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.38;
}

.qa-home .q-slide__lead,
.qa-home .q-slide--brand .q-slide__lead {
    max-width: 34ch;
    font-size: 1.05rem;
    line-height: 2.1;
}

.qa-home .q-slide__cta,
.qa-home .q-slide--brand .q-slide__cta {
    min-height: 60px;
    padding-inline: var(--s4);
    border-radius: 14px;
    font-size: 1.05rem;
}

/* عکس زیرِ طیف بماند ، وگرنه محو شدن دیده نمی شود */
.qa-home .q-slide__media img { position: relative; z-index: 0; }

/* خوشه ی پیمایش روی نیمه ی *غیرِ محو* عکس می ماند ، وگرنه توی طیف گم می شود */
@media (min-width: 992px) {
    .qa-home .q-hero__nav { left: var(--s3); bottom: var(--s3); }
}

/* طیفِ محو در حالت شب هم باید همان طیفِ رنگِ بنر باشد. `dark-auto.css` نسخه ی
   قدیمیِ این طیف (سفیدِ طرحِ قبلی ، ترجمه شده به تیره) را با انتخابگرِ
   اختصاصی تری برمی گرداند و لبه دوباره تیز می شود ، پس اینجا هم یک پله
   اختصاصی تر می نویسیم. */
@media (min-width: 992px) {
    html[data-theme="dark"] body.qa-home .q-slide__veil {
        display: block;
        background: linear-gradient(to right,
            transparent calc(100% - 230px),
            color-mix(in srgb, var(--bnr-bg) 30%, transparent) calc(100% - 150px),
            color-mix(in srgb, var(--bnr-bg) 72%, transparent) calc(100% - 70px),
            color-mix(in srgb, var(--bnr-bg) 94%, transparent) calc(100% - 18px),
            var(--bnr-bg) 100%);
    }
}

@media (max-width: 991.98px) {
    html[data-theme="dark"] body.qa-home .q-slide__veil {
        display: block;
        background: linear-gradient(to top,
            var(--bnr-bg) 0%,
            color-mix(in srgb, var(--bnr-bg) 78%, transparent) 16%,
            color-mix(in srgb, var(--bnr-bg) 28%, transparent) 38%,
            transparent 66%);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   دورِ اصلاحات ــ ارتفاع هیرو ، ردیفِ نوع ملک ، و سرِ بخش های وسط چین
   ========================================================================== */

/* ── ۱) ارتفاع هیرو ۲۰٪ کمتر ─────────────────────────────────────────────
   عددِ پایه ۴۶۰ بود ؛ ۲۰٪ کمتر یعنی ۳۶۸. تیتر و فاصله ها هم یک پله جمع تر
   می شوند وگرنه متن در قابِ کوتاه تر تنگ می افتد. */
@media (min-width: 992px) {
    .qa-home .q-slide,
    .qa-home .q-slide__panel {
        min-height: 368px;
    }
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        padding-block: var(--s4);
    }
    .qa-home .q-slide__title,
    .qa-home .q-slide--brand .q-slide__title {
        font-size: clamp(1.7rem, 3.1vw, 2.7rem);
        margin-bottom: var(--s2);
    }
    .qa-home .q-slide__lead,
    .qa-home .q-slide--brand .q-slide__lead {
        margin-bottom: var(--s3);
        font-size: 1rem;
        line-height: 1.95;
    }
    .qa-home .q-slide__brand { margin-bottom: var(--s2); }
    .qa-home .q-slide__brand img { height: 26px; padding: 8px 13px; }
    .qa-home .q-slide__cta,
    .qa-home .q-slide--brand .q-slide__cta { min-height: 52px; font-size: 1rem; }
}

/* ── ۶) فیلترِ نوع ملک کنارِ نقشه ───────────────────────────────────────── */
.qa-home .q-filter .q-typesel { font-weight: 600; }


/* ── ۱۰) بخشِ «ثبت ملک» ──────────────────────────────────────────────────
   سه اشکال داشت:
     • ستونِ متن تا لبه ی پنل باز بود ، پس جمله ها و سه نکته ی پایین روی یک
       عرضِ ۶۰۰ پیکسلی پخش می شدند و با دکمه ها هم تراز نبودند.
     • سه نکته به صورت ردیفِ شکسته می آمدند: دو تا در یک خط و سومی تنها.
     • پنل هم قدِ دو کارتِ کنارش کش می آمد و بالای متن یک فضای مرده می ماند.

   حالا محتوا در یک ستونِ خوانا (حداکثر ۴۶ نویسه) جمع شده ، نکته ها زیرِ هم
   با علامتِ تیک آمده اند و padding کمتر شده تا قاب پر شود.
   ------------------------------------------------------------------------ */
.qa-home .q-owner__main {
    padding: var(--s5) clamp(24px, 3.4vw, 48px);
}

/* ۲۰ نویسه تیتر را سه تکه می کرد ؛ ۲۸ دو خطِ متعادل می دهد */
.qa-home .q-owner__main h2 {
    max-width: 28ch;
    font-size: clamp(1.35rem, 2.3vw, 1.95rem);
}

.qa-home .q-owner__main p {
    max-width: 46ch;
    margin-bottom: var(--s3);
}

.qa-home .q-owner__acts { gap: var(--s2); }

.qa-home .q-owner__points {
    display: grid;
    max-width: 46ch;
    gap: 10px;
    padding-top: var(--s3);
    margin-top: var(--s4);
    border-top: 1px solid var(--qa-navy-line);
}

.qa-home .q-owner__points li { gap: var(--s1); font-size: .88rem; }
.qa-home .q-owner__points i { flex: none; color: var(--qa-cta); }

/* دکمه ی اینستاگرام هنوز گرادیانِ چهاررنگ داشت ــ قاعده ی رنگِ تخت با
   انتخابگرِ ضعیف تری نوشته شده بود. */
.qa-home .q-follow .qa-btn--ig,
.qa-home .q-owner .qa-btn--ig {
    background: #C13584;
    background-image: none;
}

/* ارتفاعِ هیرو با min-height تنها به عددِ خواسته شده نرسید ، چون ارتفاع را
   محتوا تعیین می کند نه کفِ آن: ۵۱۹ → ۴۳۸ یعنی ۱۶٪. این دو پله ی فاصله بقیه ی
   راه را می برند تا دقیقاً ۲۰٪ (≈۴۱۵) شود. */
@media (min-width: 992px) {
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body { padding-block: var(--s3); }
    .qa-home .q-slide__lead,
    .qa-home .q-slide--brand .q-slide__lead { margin-bottom: var(--s2); }
}

@media (min-width: 992px) {
    .qa-home .q-slide__brand { margin-bottom: 12px; }
    .qa-home .q-slide__title,
    .qa-home .q-slide--brand .q-slide__title { margin-bottom: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   قرمزها → نارنجیِ برند (فقط صفحه ی اصلی)
   ------------------------------------------------------------------------
   صفحه ی اصلی چند نقطه ی قرمز داشت که هیچ کدام از پالت این صفحه نمی آمدند:
   دکمه ی «حذف» کارت (btn-danger از theme14.min.css با #f23c49) ، حالت فعالِ
   btn-outline-danger (#dc3545 در card_unified) ، بجِ «رد شده» ، نشانکِ
   شمارنده ی گفتگو (#e03131 در group-chat.css) و لینکِ «خروج» سربرگ (#C0392B
   در public.css). این بلوک همه را به همان نارنجی ای می برد که بقیه ی دکمه های
   پرِ این صفحه دارند.

   چرا --qa-cta و نه --qa-orange: سفید روی #F26522 فقط ۳٫۲۵:۱ است. همان قاعده ی
   بالای این فایل اینجا هم برقرار است — سطحِ دکمه های پر یک پله عمیق تر.

   دامنه اش عمداً `.qa-home` است: card_unified و group-chat.css و public.css
   در صفحه ی جستجو و پنل هم لود می شوند و آنجا قرمز باید قرمز بماند (حذف یک
   کنشِ برگشت ناپذیر است).
   ════════════════════════════════════════════════════════════════════════ */
.qa-home .btn-danger,
.qa-home .btn-danger:disabled,
.qa-home .btn-danger.disabled {
    border-color: var(--qa-cta) !important;
    background-color: var(--qa-cta) !important;
    color: #fff !important;
}
.qa-home .btn-danger:hover,
.qa-home .btn-danger:focus,
.qa-home .btn-danger:active,
.qa-home .btn-danger.active,
.qa-home .btn-danger.show {
    border-color: var(--qa-cta-hover) !important;
    background-color: var(--qa-cta-hover) !important;
    color: #fff !important;
    box-shadow: 0 .25rem .25rem .125rem rgba(201, 77, 20, .10),
                0 .375rem .75rem -.125rem rgba(201, 77, 20, .40) !important;
}

.qa-home .btn-outline-danger,
.qa-home .btn-outline-danger:disabled,
.qa-home .btn-outline-danger.disabled {
    border-color: var(--qa-cta) !important;
    color: var(--qa-cta) !important;
}
.qa-home .btn-outline-danger:hover,
.qa-home .btn-outline-danger:active,
.qa-home .btn-outline-danger.active,
.qa-home .btn-outline-danger.dropdown-toggle.show,
.qa-home .ec-actions .btn-outline-danger.active {
    border-color: var(--qa-cta) !important;
    background-color: var(--qa-cta) !important;
    color: #fff !important;
}
.qa-home .btn-danger:focus,
.qa-home .btn-outline-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(201, 77, 20, .35) !important;
}

/* آیکونِ داخلِ دکمه ی پر باید سفید بماند ؛ قاعده ی ردیفِ اقدامِ همین فایل
   رنگِ همه ی دکمه ها را با !important خاکستری می کند و روی سطحِ نارنجی
   خوانده نمی شود. */
.qa-home .estate-grid .ec-actions .btn-danger,
.qa-home .estate-grid .ec-actions .btn-danger:hover,
.qa-home .estate-grid .ec-actions .btn-outline-danger.active {
    color: #fff !important;
}

/* بجِ «رد شده» ــ همان جفتِ نارنجیِ روشن/عمیقی که در public.css برای
   .qa-faq__links هم به کار رفته */
.qa-home .badge-rejected { background: #FDEEE4; color: #9A3208; }

/* نشانکِ شمارنده ی حبابِ گفتگو */
.qa-home .gcw-badge { background: var(--qa-cta); }

/* «خروج» در کشویی کاربر و در منوی کشویی موبایل */
.qa-home .qa-udrop .dropdown-item.danger,
.qa-home .qa-udrop .dropdown-item.danger i,
.qa-home .qa-oc__link.danger,
.qa-home .qa-oc__link.danger i { color: var(--qa-cta) !important; }

/* ══ کارتِ مشاورِ صفحه ی اصلی ــ جمع تر ═════════════════════════════════════
   سه کارت روی گریدِ تمام عرض هر کدام حدود ۴۱۰ پیکسل می گرفتند ، در حالی که
   محتوایشان عکس ، نام ، نقش و دو عدد است ؛ نتیجه یک ردیفِ ۴۵۰ پیکسلی با فضای
   خالیِ زیاد بود. عرضِ گرید محدود می شود و اجزای کارت یک پله کوچک تر.
   ------------------------------------------------------------------------ */
.qa-home .qa-grid--agents {
    max-width: 880px;
    margin-inline: auto;
    gap: var(--s2);
}

.qa-home .qa-grid--agents .qa-agentcard { padding: var(--s3) var(--s2); }

.qa-home .qa-grid--agents .qa-agentcard__ribbon {
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    font-size: .66rem;
}

.qa-home .qa-grid--agents .qa-agentcard__ava { width: 72px; margin-bottom: 10px; }
.qa-home .qa-grid--agents .qa-agentcard__ava img { width: 72px; height: 72px; }

.qa-home .qa-grid--agents .qa-agentcard h3 { margin-bottom: 4px; font-size: .95rem; }
.qa-home .qa-grid--agents .qa-agentcard__role { font-size: .78rem; }

.qa-home .qa-grid--agents .qa-agentcard__stats { margin: var(--s2) 0; padding: 10px 0; }
.qa-home .qa-grid--agents .qa-agentcard__stats b { font-size: .92rem; }
.qa-home .qa-grid--agents .qa-agentcard__stats span { font-size: .68rem; }

.qa-home .qa-grid--agents .qa-agentcard__acts { padding-top: var(--s2); }
.qa-home .qa-grid--agents .qa-agentcard__acts .qa-btn {
    height: 38px;
    min-height: 38px;
    padding-inline: 10px;
    font-size: .78rem;
}

@media (max-width: 767.98px) {
    /* روی گوشی گرید تک ستونه است ؛ سقفِ عرض کاری نمی کند و فقط وسط چین می ماند */
    .qa-home .qa-grid--agents { max-width: none; }
}

/* بندِ «ثبت ملک» حالا تمام عرض است و ردیفِ نکته ها زیرِ هر دو ستون می نشیند.
   قاعده ی قبلیِ همین کلاس (display:grid با max-width:46ch) برای ستونِ باریکِ
   طرحِ قدیم نوشته شده بود و اینجا سه نکته را سه سطرِ باریک می کرد. */
.qa-home .q-owner__points {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    gap: var(--s1) var(--s4);
    margin-top: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   بازبینیِ ۱۴۰۵/۰۶/۰۲ ــ صفحه ی اصلی
   --------------------------------------------------------------------------
   این بلوک عمداً آخرِ فایل است: قاعده های بالا لایه به لایه روی هم نوشته شده اند
   و جابه جا کردنشان یعنی دنبال کردنِ چند هزار خط. هر چیزی که اینجاست همان
   انتخابگرِ قبلی را با وزنِ برابر و ترتیبِ بعدی می برد.

   ترتیبِ داخلی مهم است: قاعده های بی مدیا اول می آیند و بعد بلوک های مدیا ،
   وگرنه یک قاعده ی بی مدیا که *بعد از* @media نوشته شود همان مدیا را هم می برد
   (مدیاکوئری به وزنِ انتخابگر چیزی اضافه نمی کند).
   ========================================================================== */

/* ── ۱) هیرو ─────────────────────────────────────────────────────────────
   سه اشکال:
     • «متن کوتاه» و «متن تکمیلی» هر دو با -webkit-line-clamp:3 بریده می شدند ،
       پس مدیری که متن می نوشت هیچ وقت همه اش را روی صفحه نمی دید. کلمپ برداشته
       شد — طولِ متن دستِ خودِ مدیر است ، نه CSS.
     • این دو از هم قابل تشخیص نبودند: هر دو یک پاراگرافِ خاکستری بودند با
       اختلافِ ۰٫۱ رمِ اندازه. حالا متنِ کوتاه پررنگ و درشت با یک خطِ نارنجی
       کنارش است ، و متنِ تکمیلی روی یک پلاکِ ملایمِ هم رنگِ بنر می نشیند.
     • ستونِ متن ۵۴٪ کارت بود و عکس ۴۶٪. حالا دقیقاً نصف نصف است و متن هم تا
       لبه ی عکس باز می شود (هیچ سقفِ عرضی روی خطوط نمانده).
   ------------------------------------------------------------------------ */
.qa-home .q-hero { --q-hero-media: 50%; }

/* کلمپ ها برداشته می شوند ــ هم مالِ public.css و هم مالِ همین فایل */
.qa-home .q-slide__title,
.qa-home .q-slide--brand .q-slide__title,
.qa-home .q-slide__lead,
.qa-home .q-slide--brand .q-slide__lead,
.qa-home .q-slide__long,
.qa-home .q-slide--brand .q-slide__long {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
}

.qa-home .q-slide__title,
.qa-home .q-slide--brand .q-slide__title {
    max-width: none;
    margin: 0 0 var(--s2);
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
    line-height: 1.5;
}

/* متنِ کوتاه = پیامِ اصلی. پررنگ ، هم رنگِ تیتر ، با یک خطِ نارنجی در آغاز
   سطر تا در یک نگاه از متنِ تکمیلی جدا شود. */
.qa-home .q-slide__lead,
.qa-home .q-slide--brand .q-slide__lead {
    max-width: none;
    margin: 0 0 var(--s2);
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--qa-cta);
    color: var(--bnr-ink);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.9;
}

/* متنِ تکمیلی = توضیح. ریزتر ، کم رنگ تر ، و روی پلاکِ خودش تا معلوم باشد
   ادامه ی همان پیام است نه یک پاراگرافِ دوم. */
.qa-home .q-slide__long,
.qa-home .q-slide--brand .q-slide__long {
    max-width: none;
    margin: 0 0 var(--s3);
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--bnr-ink) 12%, transparent);
    border-radius: var(--r-card);
    color: var(--bnr-ink-2);
    background: color-mix(in srgb, var(--bnr-ink) 5%, var(--bnr-bg));
    font-size: .88rem;
    font-weight: 500;
    line-height: 2.05;
}

/* ── ۲) کاشی های نوع ملک ــ مربع ، آیکون بالا و نام زیرش ─────────────────
   ردیفِ قبلی وسط چین بود ، پس تبِ «رهن و اجاره» که چهار نوع ملک دارد چهار
   کاشی وسطِ یک پنلِ ۱۲۰۰ پیکسلی شناور نگه می داشت.

   حالا تعدادِ ستون ها همان تعدادِ کاشی است (--cols را بلید می نویسد) و سقفِ
   عرضِ گرید هم از همان عدد ساخته می شود:
     • تبِ پرتعداد: سقف از عرضِ پنل بزرگ تر است و بی اثر می ماند ⇒ ردیف
       لبه تا لبه پر می شود.
     • تبِ کم تعداد: گرید به اندازه ی کاشی هایش پهن می شود و از لبه ی راست
       (شروعِ متن) می چیند ⇒ نه کاشیِ غول پیکر ، نه ردیفِ شناور در وسط.

   خودِ کاشی مربع است و نام زیرِ آیکون می نشیند. آیکون ها SVG اختصاصیِ همین ده
   نوع ملک اند (بلید می سازدشان) — فقط خط ، بدون سطحِ پر و بدون سایه.
   ------------------------------------------------------------------------ */
.qa-home .q-types {
    display: grid;
    grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
    gap: var(--s1);
    max-width: calc(var(--cols, 8) * 148px + (var(--cols, 8) - 1) * var(--s1));
    margin-inline: 0;
    overflow: visible;
}

.qa-home .q-type {
    width: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 8px;
    border: 1px solid var(--qa-line);
    border-radius: var(--r-card);
    background: var(--qa-surface);
    box-shadow: none;
    text-align: center;
    transition: border-color .18s, background .18s;
}

.qa-home .q-type__ico {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    color: var(--acc);
    background: var(--acc-soft);
    box-shadow: none;
    transition: none;
}
.qa-home .q-type__ico::before,
.qa-home .q-type__ico:before { display: none; }
.qa-home .q-type__ico svg { width: 26px; height: 26px; display: block; }

.qa-home .q-type__txt { align-items: center; text-align: center; }
.qa-home .q-type__txt b { font-size: .8rem; font-weight: 700; line-height: 1.5; }

.qa-home .q-type:hover {
    border-color: var(--acc);
    background: var(--acc-soft);
    box-shadow: none;
    transform: none;
}
.qa-home .q-type:hover .q-type__ico { transform: none; background: var(--qa-surface); }

.qa-home .q-type.is-on {
    border-color: var(--acc);
    background: var(--acc-soft);
    box-shadow: inset 0 0 0 1px var(--acc);
}
.qa-home .q-type.is-on .q-type__ico { color: #fff; background: var(--acc); }

/* در شب زمینه ی ملایمِ روز روی کارتِ تیره یک مربعِ سفید می شد */
html[data-theme="dark"] .qa-home .q-type__ico {
    color: #fff;
    background: color-mix(in srgb, var(--acc) 74%, #000);
}
html[data-theme="dark"] .qa-home .q-type:hover,
html[data-theme="dark"] .qa-home .q-type.is-on {
    background: color-mix(in srgb, var(--acc) 18%, transparent);
}
html[data-theme="dark"] .qa-home .q-type:hover .q-type__ico { background: var(--acc); }

/* ── ۳) محله های پرفایل ──────────────────────────────────────────────────
   قبلاً یک نوارِ تک ردیفه بود: برچسب ، شش چیپِ قرصی و لینکِ «همه» — همه در یک
   خط. عنوانِ بخش از داده ها جدا نبود و عددِ کنارِ هر محله یک em ریزِ خاکستری
   بی واحد بود.

   حالا سرِ بخش (عنوان + لینکِ همه) و زیرش کارت های هم اندازه ی محله. کف بند هم
   فاصله گرفت ، وگرنه ردیفِ کارت ها به لبه ی پایینِ جعبه ی جستجو می چسبید.
   ------------------------------------------------------------------------ */
.qa-home .q-market {
    display: block;
    padding: var(--s3) 0 var(--s2);
    margin-top: 0;
    border: 0;
    background: transparent;
}

.qa-home .q-market__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s1) var(--s2);
    margin-bottom: var(--s2);
}

.qa-home .q-market__lbl { display: inline-flex; align-items: center; gap: 8px; white-space: normal; }
.qa-home .q-market__lbl b { color: var(--qa-ink); font-size: .95rem; font-weight: 800; }
.qa-home .q-market__lbl i {
    display: grid;
    width: 30px;
    height: 30px;
    flex: none;
    place-items: center;
    border-radius: 10px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: .85rem;
}
.qa-home .q-market__lbl em {
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
}

.qa-home .q-market__all {
    display: inline-flex;
    height: 34px;
    align-items: center;
    gap: 6px;
    padding-inline: 14px;
    border: 1px solid var(--qa-navy-line) !important;
    border-radius: 999px;
    color: var(--qa-navy) !important;
    background: transparent !important;
    font-size: .82rem;
    font-weight: 700 !important;
}
.qa-home .q-market__all:hover { background: var(--qa-navy-soft) !important; }

.qa-home .q-market__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    overflow: visible;
}

.qa-home .q-market__list a {
    display: flex;
    height: auto;
    min-width: 0;
    min-height: 56px;
    flex: 1 1 168px;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--qa-line);
    border-radius: var(--r-card);
    color: var(--qa-ink) !important;
    background: var(--qa-surface);
    font-size: .85rem;
    font-weight: 700;
}
.qa-home .q-market__list a:hover {
    border-color: var(--qa-navy-line);
    color: var(--qa-navy) !important;
    background: var(--qa-navy-soft);
}

.qa-home .q-market__pin {
    display: grid;
    width: 32px;
    height: 32px;
    flex: none;
    place-items: center;
    border-radius: 10px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: .82rem;
}

.qa-home .q-market__name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qa-home .q-market__list em {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
}

/* ── ۴) بندِ «ثبت ملک» ───────────────────────────────────────────────────
   بندِ قبلی ۴۷۰ پیکسل بلند بود برای چهار سطر متن و دو دکمه: دو ستونِ وسط چین
   با یک ردیفِ سومِ تمام عرض برای سه نکته ، به علاوه ی padding روی هم افتاده ی
   خودِ بند و ستونِ متنش. حالا همه ی متن (با نکته ها) در ستونِ اول است و دکمه ها
   در ستونِ دوم ، و ارتفاع کمتر از نصف شد.
   ------------------------------------------------------------------------ */
.qa-home .q-owner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3) var(--s4);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-box);
}

.qa-home .q-owner__main { padding: 0; background: transparent; }
html[data-theme="dark"] .qa-home .q-owner__main { background: transparent; }

.qa-home .q-owner__eyebrow { margin-bottom: 6px; font-size: .8rem; }

.qa-home .q-owner__main h2 {
    max-width: 34ch;
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.55;
}

.qa-home .q-owner__main p {
    max-width: 64ch;
    margin: 0;
    font-size: .88rem;
    line-height: 1.9;
}

.qa-home .q-owner__points {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    gap: 6px var(--s3);
    margin: var(--s2) 0 0;
    padding: var(--s2) 0 0;
    border-top: 1px solid var(--qa-navy-line);
}
.qa-home .q-owner__points li { gap: 6px; font-size: .82rem; }

.qa-home .q-owner__side { align-items: stretch; }
.qa-home .q-owner__acts { flex-direction: column; gap: var(--s1); }
.qa-home .q-owner__acts .qa-btn {
    height: 46px;
    justify-content: center;
    padding-inline: var(--s3);
    font-size: .9rem;
    white-space: nowrap;
}


/* ══ بلوک های واکنش گرا ــ همه بعد از قاعده های بالا ══════════════════════ */

/* کفِ ارتفاعِ هیرو روی دسکتاپ. متن حالا تا لبه ی عکس باز است و سطرِ کمتری
   می گیرد ، پس یک بنرِ کم متن نیمه ی عکس را به نوارِ باریک تبدیل می کرد.
   (قاعده ی ۴۶۰ پیکسلیِ بالای فایل روی این چیدمان به کرسی نمی نشست.) */
@media (min-width: 992px) {
    .qa-home .q-slide,
    .qa-home .q-slide__panel { min-height: 420px; }
}

@media (max-width: 991.98px) {
    /* تبلت و گوشی: بندِ ثبت ملک تک ستونه */
    .qa-home .q-owner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s2);
        padding: var(--s3);
    }
    .qa-home .q-owner__side { align-items: stretch; }
    .qa-home .q-owner__acts { flex-direction: row; flex-wrap: wrap; }
    .qa-home .q-owner__acts .qa-btn { flex: 1 1 200px; }

    /* ── هیرو روی گوشی ────────────────────────────────────────────────────
       سه چیز عوض شد:

       ۱) متن به عکس می چسبد. قبلاً ۲۴ پیکسل فاصله بود و چون طیفِ محوِ پایینِ
          عکس هم همان رنگ است ، آن فاصله یک نوارِ خالی به نظر می رسید.

       ۲) کلیدهای «اسلاید بعدی/قبلی» از روی عکس به زیرِ متن رفتند. روی عکس
          نشستنشان دو اشکال داشت: انگشت هنگام لمس عکس را می پوشاند ، و اگر
          مدیر بنرِ روشن بگذارد نوارِ نیمه شفاف روی آن گم می شد. حالا ته
          اسلاید اند و متن با padding-bottom برایشان جا باز می کند.

       ۳) همه ی اسلایدها یک قاب دارند: بدنه ی متن کفِ ارتفاع می گیرد و دکمه ی
          اقدام با margin-top:auto به کفِ همان قاب می چسبد. پس با عوض شدنِ
          اسلاید ، دکمه سرِ جایش می ماند و متنِ کوتاه ترِ اسلایدِ بعدی صفحه را
          بالا و پایین نمی پراند.
       ------------------------------------------------------------------ */
    .qa-home .q-slide__title,
    .qa-home .q-slide--brand .q-slide__title { max-width: none; font-size: clamp(1.35rem, 4.2vw, 1.8rem); }
    .qa-home .q-slide__lead,
    .qa-home .q-slide--brand .q-slide__lead { max-width: none; font-size: .95rem; line-height: 1.85; }
    .qa-home .q-slide__long,
    .qa-home .q-slide--brand .q-slide__long { max-width: none; padding: 10px 12px; font-size: .84rem; line-height: 1.95; }

    .qa-home .q-slide { display: flex; }
    .qa-home .q-slide__panel { display: flex; flex: 1 1 auto; padding: 0; }
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body {
        display: flex;
        min-height: 236px;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: flex-start;
        padding: 10px var(--s3) var(--s3);
    }
    /* جای کلیدهای پیمایش فقط وقتی رزرو می شود که واقعاً بیش از یک اسلاید باشد ،
       وگرنه زیرِ دکمه ی تکِ یک بنرِ تنها ۵۸ پیکسل فضای خالی می ماند. */
    .qa-home .q-hero:not(.is-single) .q-slide__body,
    .qa-home .q-hero:not(.is-single) .q-slide--brand .q-slide__body { padding-bottom: 58px; }
    .qa-home .q-slide__brand { margin-bottom: 10px; }
    .qa-home .q-slide__acts { margin: auto 0 0; }

    .qa-home .q-hero__nav {
        top: auto;
        bottom: var(--s2);
        left: 50%;
        transform: translateX(-50%);
    }
    .qa-home .q-hero__arrow { display: grid; width: 30px; height: 30px; }
}

@media (max-width: 767.98px) {
    /* کاشی های نوع ملک روی گوشی: چهار تا در هر ردیف ، زیرِ هم — نه یک نوارِ
       اسکرولِ افقی که کاربر نمی دید ادامه دارد. کاشی ها ریزتر می شوند تا هر
       چهارتا در عرضِ گوشی جا شوند و ردیف بیشتر از دو تا نشود. */
    .qa-home .q-types {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        max-width: none;
        overflow: visible;
    }
    /* min-height را نباید عدد گذاشت: کاشی گرید آیتم است و کفِ ارتفاعِ عددی
       با aspect-ratio عرضش را هم به همان عدد می برد ، پس چهار کاشیِ ۹۰ پیکسلی
       از ستونِ ۶۷ پیکسلی بیرون می زدند و صفحه افقی اسکرول می شد. با auto ،
       عرض از ستون می آید و ارتفاع فقط اگر برچسب دو خطی شد کمی بلندتر می شود. */
    .qa-home .q-type {
        width: auto;
        min-width: 0;
        min-height: auto;
        aspect-ratio: 1 / 1;
        gap: 5px;
        padding: 6px 3px;
        border-radius: 12px;
    }
    .qa-home .q-type__ico { width: 28px; height: 28px; border-radius: 9px; }
    .qa-home .q-type__ico svg { width: 17px; height: 17px; }
    .qa-home .q-type__txt b { font-size: .58rem; font-weight: 700; line-height: 1.3; }

    /* محله ها روی گوشی: یک نوارِ باریکِ اسکرولی از چیپ های ریز ، نه شبکه ی
       کارت. شش کارتِ ۵۶ پیکسلی سه ردیف می شد و بخشِ محله ها را هم قدِ خودِ
       نقشه می کرد. */
    .qa-home .q-market { padding: var(--s2) 0 var(--s2); }
    .qa-home .q-market__head { margin-bottom: 10px; gap: 6px var(--s1); }
    .qa-home .q-market__lbl b { font-size: .85rem; }
    .qa-home .q-market__lbl i { width: 24px; height: 24px; border-radius: 8px; font-size: .72rem; }
    .qa-home .q-market__lbl em { padding: 3px 8px; font-size: .66rem; }
    .qa-home .q-market__all { height: 28px; padding-inline: 10px; font-size: .72rem; }

    .qa-home .q-market__list {
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--s2) * -1);
        padding-inline: var(--s2);
        scroll-snap-type: x proximity;
    }
    .qa-home .q-market__list::-webkit-scrollbar { display: none; }
    .qa-home .q-market__list a {
        height: auto;
        min-height: 0;
        flex: none;
        gap: 6px 8px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: .76rem;
        font-weight: 600;
        scroll-snap-align: start;
    }
    .qa-home .q-market__pin { display: none; }
    .qa-home .q-market__name { white-space: nowrap; }
    .qa-home .q-market__list em { padding: 2px 6px; font-size: .66rem; }

    .qa-home .q-owner__main h2 { max-width: none; font-size: 1.15rem; }
    .qa-home .q-owner__main p { font-size: .84rem; line-height: 1.85; }
    .qa-home .q-owner__points { flex-direction: column; gap: 6px; }
    .qa-home .q-owner__acts { flex-direction: column; }
    .qa-home .q-owner__acts .qa-btn { width: 100%; flex: none; }
}

/* ── ۵) «جدیدترین املاک» روی گوشی: دو ستون ───────────────────────────────
   زیر ۵۶۰px شبکه تک ستونه بود ، پس هر کارت تمام عرضِ صفحه را می گرفت و برای
   دیدنِ چهار فایل باید کل صفحه اسکرول می شد. حالا دو ستون است و اجزای کارت
   یک پله کوچک تر تا در ۱۷۰ پیکسل جا شوند.
   ------------------------------------------------------------------------ */
@media (max-width: 559.98px) {
    .qa-home .estate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s1);
    }
    .qa-home .estate-grid .ec { --ec-img-h: 112px; border-radius: 12px; }
    .qa-home .estate-grid .ec-body { padding: 8px 9px 9px; gap: 3px; }
    .qa-home .estate-grid .ec-title { font-size: .78rem; }
    .qa-home .estate-grid .ec-location { min-height: 18px; font-size: .68rem; }
    .qa-home .estate-grid .ec-price { padding-top: 5px; }
    .qa-home .estate-grid .ec-price .price-val { font-size: .78rem; }
    .qa-home .estate-grid .ec-price .price-label,
    .qa-home .estate-grid .ec-price .price-meter { font-size: .62rem; }
    .qa-home .estate-grid .ec-attrs { flex-wrap: wrap; gap: 3px; font-size: .64rem; }
    .qa-home .estate-grid .ec-attrs .attr { padding: 2px 5px; }
    /* margin را دست نمی زنیم : قاعده ی بالا با `margin:auto 0 0` دکمه را به کفِ
       کارت می چسباند و همین جا هم باید بچسبد ، فقط فاصله ی بالایش کمتر می شود. */
    .qa-home .estate-grid .ec-footer { justify-content: center; gap: 3px; padding-top: 8px; }
    .qa-home .estate-grid .ec-actions { justify-content: center; gap: 3px; }
    /* روی گوشی هم همان یک دکمه است و تمامِ عرضِ کارت را می گیرد : بزرگ ترین
       هدفِ لمسیِ ممکن به جای یک مربعِ ۲۶ پیکسلی. */
    .qa-home .estate-grid .ec-visit { width: 100%; height: 34px; font-size: .72rem; }
    .qa-home .estate-grid .ec-imgact { width: 30px; height: 30px; font-size: .82rem; }
    .qa-home .estate-grid .ec-party { font-size: .6rem; }
    .qa-home .estate-grid .ec-type-badge { padding: 2px 6px; font-size: .6rem; }
    .qa-home .estate-grid .ec-agent { top: calc(var(--ec-img-h) - 38px); width: 30px; height: 30px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   بازبینیِ دوم ــ ته رنگِ کرم ، نوارِ «ثبت ملک» و کارتِ مشاور
   ========================================================================== */

/* ── ۶) ته رنگِ صفحه ─────────────────────────────────────────────────────
   زمینه ی صفحه سفیدِ خالص بود و کارت ها هم سفید ، پس مرزِ کارت فقط یک خطِ
   یک پیکسلیِ خاکستری بود و صفحه تخت به نظر می رسید — مخصوصاً بخش هایی که
   کارت پشتِ سرِ هم دارند (فایل ها ، محله ها ، مشاوران).

   حالا زمینه یک کرمِ گرم است و سطحِ کارت ها سفیدِ خالص می ماند ، پس هر کارت
   خودش را بدون سایه و بدون کادرِ پررنگ نشان می دهد. کرم عمداً خیلی کم اشباع
   انتخاب شده (#FAF6F0) : روی مانیتورِ کالیبره نشده هم زرد به نظر نمی رسد و
   کنترستِ متنِ تیره رویش دست نخورده می ماند.

   نکته ی تکراریِ این فایل: تعریفِ توکن روی `.qa-home` (که روی <body> است) از
   تعریفِ شبِ dark.css (که روی <html> است) *نزدیک تر* است و متغیرها از نزدیک ترین
   جدِ تعریف کننده می آیند نه از قویترین انتخابگر. پس مقدارهای شب باید همین جا
   صریح برگردانده شوند ، وگرنه در حالت شب زمینه کرم می ماند.
   ------------------------------------------------------------------------ */
/* --qa-soft و --qa-line-soft عمداً دست نمی خورند: آن دو در public.css سطحِ
   کنترل ها هم هستند (زمینه ی select و input) و گرم کردنشان همه ی ورودی های
   فرمِ کنارِ نقشه را کِرِم و شبیه فیلدِ غیرفعال می کرد. کرم یک توکنِ جدا دارد. */
.qa-home {
    --qa-page: #FBF8F3;
    --qa-cream: #F2E9DA;
    --qa-cream-line: #E6D9C4;
}

html[data-theme="dark"] .qa-home {
    --qa-page: var(--qa-d-bg);
    --qa-cream: #131E31;
    --qa-cream-line: var(--qa-d-line-2);
}

/* بخش هایی که زمینه ی سفیدِ صریح داشتند حالا باید صریح تر سفید بمانند تا روی
   کرم «کارت» دیده شوند ، نه یک تکه ی هم رنگ. */
.qa-home .q-hero,
.qa-home .q-hunt__in,
.qa-home .q-maprow,
.qa-home .q-filter { background-color: var(--qa-surface); }

/* پاورقی ته رنگِ آبیِ سردِ #F6F9FD دارد (در style خودِ پارشال) و کنارِ کرم
   ناهماهنگ می شد. فقط در صفحه ی اصلی گرم می شود ؛ انتخابگرِ دو کلاسی از
   قاعده ی تک کلاسیِ داخلِ پارشال قوی تر است ، پس ترتیبِ لود مهم نیست. */
.qa-home .qom-footer {
    border-top-color: var(--qa-cream-line);
    background: var(--qa-cream);
}

/* ── ۷) نوارِ «ثبت ملک» ــ باریک ────────────────────────────────────────
   بندِ قبلی چهار طبقه بود: ابرو ، تیتر ، جمله ، و ردیفِ نکته ها با یک خطِ
   جداکننده بالایش ؛ روی هم ۲۷۰ پیکسل. حالا ابرو و تیتر یک خط اند ، خطِ
   جداکننده رفته و دکمه ها کنارِ هم نشسته اند ⇒ حدود ۱۱۰ پیکسل.
   ------------------------------------------------------------------------ */
.qa-home .q-owner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s2) var(--s3);
    padding: var(--s2) var(--s3);
    /* ته رنگِ سردِ سرمه ای کنارِ زمینه ی کرم غریبه بود. این نوار اقدامِ نارنجیِ
       صفحه است ، پس ته رنگش هم از همان نارنجی گرفته می شود — خیلی رقیق. */
    border: 1px solid color-mix(in srgb, var(--qa-orange) 26%, var(--qa-surface));
    border-radius: var(--r-card);
    background: color-mix(in srgb, var(--qa-orange) 8%, var(--qa-surface));
}
.qa-home .q-owner__points { border-top-color: color-mix(in srgb, var(--qa-orange) 22%, var(--qa-surface)); }

.qa-home .q-owner__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
}

.qa-home .q-owner__eyebrow {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    margin: 0;
    white-space: nowrap;
    font-size: .78rem;
}

.qa-home .q-owner__main h2 {
    grid-row: 1;
    grid-column: 2;
    max-width: none;
    margin: 0;
    font-size: clamp(1.02rem, 1.5vw, 1.28rem);
    line-height: 1.5;
}

.qa-home .q-owner__main p {
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    font-size: .84rem;
    line-height: 1.8;
}

.qa-home .q-owner__points {
    grid-row: 3;
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 0;
    border-top: 0;
    gap: 4px var(--s3);
}
.qa-home .q-owner__points li { gap: 5px; font-size: .78rem; }

.qa-home .q-owner__acts { flex-direction: row; flex-wrap: wrap; gap: var(--s1); }
.qa-home .q-owner__acts .qa-btn { height: 42px; padding-inline: var(--s2); font-size: .86rem; }

/* ── ۸) کارتِ مشاور ــ ردیفِ افقی به جای ستونِ وسط چین ───────────────────
   طرحِ قبلی شش طبقه ی وسط چین بود در ستونی ۲۸۰ پیکسلی ، و نشانِ رتبه (که
   position:relative داشت ولی offset با top/right گرفته بود) روی عکس می افتاد.
   ضمناً هر سه کارت «مشاور فعال» می شدند چون کلیدِ رنگ ، رتبه ی خامِ سامانه بود
   نه جایگاهِ نمایش — آن یکی در بلید درست شد.
   ------------------------------------------------------------------------ */
.qa-home .qa-grid--agents {
    max-width: none;
    margin-inline: 0;
    gap: var(--s2);
}

.qa-home .qa-grid--agents .qa-agentcard,
.qa-home .qa-agentcard {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s2);
    text-align: start;
}

.qa-home .qa-agentcard__top {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.qa-home .qa-grid--agents .qa-agentcard__ava,
.qa-home .qa-agentcard__ava {
    position: relative;
    width: 62px;
    flex: none;
    margin: 0;
}
.qa-home .qa-grid--agents .qa-agentcard__ava img,
.qa-home .qa-agentcard__ava img {
    width: 62px;
    height: 62px;
    border: 1px solid var(--qa-line);
    border-radius: 50%;
    box-shadow: none;
}

/* عددِ جایگاه روی گوشه ی عکس ــ به جای مدالِ آیکونی که هرگز دیده نمی شد */
.qa-home .qa-agentcard__medal {
    position: absolute;
    inset-inline-start: -3px;
    bottom: -2px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 2px solid var(--qa-surface);
    border-radius: 50%;
    color: #fff;
    background: var(--acc);
    font-size: .68rem;
    font-weight: 800;
}

.qa-home .qa-agentcard__id { min-width: 0; flex: 1 1 auto; }

.qa-home .qa-grid--agents .qa-agentcard__ribbon,
.qa-home .qa-agentcard__ribbon {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 4px;
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    color: var(--acc-dark);
    background: var(--acc-soft);
    box-shadow: none;
    font-size: .68rem;
    font-weight: 700;
}

.qa-home .qa-grid--agents .qa-agentcard h3,
.qa-home .qa-agentcard h3 {
    overflow: hidden;
    margin: 0 0 2px;
    font-size: .98rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qa-home .qa-grid--agents .qa-agentcard__role,
.qa-home .qa-agentcard__role {
    align-self: flex-start;
    padding: 0;
    color: var(--qa-muted);
    background: transparent;
    font-size: .78rem;
    font-weight: 500;
}

.qa-home .qa-grid--agents .qa-agentcard__stats,
.qa-home .qa-agentcard__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--qa-line-soft);
    border-bottom: 1px solid var(--qa-line-soft);
    text-align: center;
}
.qa-home .qa-agentcard__stats b { font-size: .98rem; }
.qa-home .qa-agentcard__stats span { font-size: .7rem; }

.qa-home .qa-grid--agents .qa-agentcard__acts,
.qa-home .qa-agentcard__acts { padding-top: 0; }
.qa-home .qa-grid--agents .qa-agentcard__acts .qa-btn { height: 40px; min-height: 40px; font-size: .8rem; }

/* دکمه ی پرِ کارت ، سرمه ایِ صفحه است نه گرادیانِ رنگِ رتبه ــ وگرنه سه کارت
   سه دکمه ی سه رنگ می شدند و ردیف شبیه یک بازیِ رنگی می شد. */
.qa-home .qa-agentcard__acts .qa-btn--primary {
    border: 1px solid var(--qa-navy);
    color: #fff;
    background: var(--qa-navy);
    background-image: none;
}
.qa-home .qa-agentcard__acts .qa-btn--primary:hover {
    border-color: var(--qa-navy-2);
    background: var(--qa-navy-2);
    background-image: none;
    filter: none;
}

/* دو ستونه بودنِ نوار فقط مالِ دسکتاپ است. این قاعده باید *بعد* از قاعده ی
   بی مدیای بالا بیاید ، وگرنه آن یکی همین را هم می برد (مدیاکوئری وزن اضافه
   نمی کند و فقط ترتیب تصمیم می گیرد). */
@media (max-width: 991.98px) {
    .qa-home .q-owner { grid-template-columns: minmax(0, 1fr); }
    .qa-home .q-owner__side { align-items: stretch; }
    .qa-home .q-owner__acts { flex-direction: row; flex-wrap: wrap; }
    .qa-home .q-owner__acts .qa-btn { flex: 1 1 200px; }
}

@media (max-width: 767.98px) {
    /* روی گوشی ابرو بالای تیتر می نشیند ، نه کنارش */
    .qa-home .q-owner__main { grid-template-columns: minmax(0, 1fr); }
    .qa-home .q-owner__eyebrow { grid-row: 1; grid-column: 1; }
    .qa-home .q-owner__main h2 { grid-row: 2; grid-column: 1; }
    .qa-home .q-owner__main p { grid-row: 3; }
    .qa-home .q-owner__points { grid-row: 4; }
    /* flex:1 1 200px بالا برای ردیفِ افقی نوشته شده ؛ در ستون همان ۲۰۰px
       *ارتفاع* می شود و دو دکمه ی ۲۰۰ پیکسلی می سازد. */
    .qa-home .q-owner__acts { flex-direction: column; }
    .qa-home .q-owner__acts .qa-btn { width: 100%; flex: none; }

}


/* ══════════════════════════════════════════════════════════════════════════
   بازبینیِ سوم ــ کوتاه کردنِ صفحه ، مهارِ متنِ بنر ، یکدست کردنِ سرِ بخش ها
   ========================================================================== */

/* ── ۱۰) هیرو با متنِ واقعیِ مدیر ─────────────────────────────────────────
   is-wordy را بلید وقتی می زند که «متن کوتاه» از ۱۱۰ نویسه بگذرد. آن وقت
   تأکید برداشته می شود : متن به وزنِ بدنه می افتد و خطِ کناری کم رنگ می شود ،
   پس تیتر دوباره تنها عنصرِ درشتِ بالای صفحه است. متن کامل می ماند.
   ------------------------------------------------------------------------ */
.qa-home .q-slide.is-wordy .q-slide__lead,
.qa-home .q-slide--brand.is-wordy .q-slide__lead {
    border-inline-start-color: color-mix(in srgb, var(--qa-cta) 45%, transparent);
    color: var(--bnr-ink-2);
    font-size: .92rem;
    font-weight: 500;
    line-height: 2;
}

/* بنرِ خیلی پرحرف : تیتر یک پله کوچک تر و فاصله ها فشرده تر ، تا کلِ هیرو از
   یک صفحه بلندتر نشود. */
.qa-home .q-slide.is-verywordy .q-slide__title,
.qa-home .q-slide--brand.is-verywordy .q-slide__title {
    font-size: clamp(1.3rem, 1.9vw, 1.65rem);
    margin-bottom: 10px;
}
.qa-home .q-slide.is-verywordy .q-slide__lead { margin-bottom: 10px; }
.qa-home .q-slide.is-verywordy .q-slide__long { margin-bottom: var(--s2); padding: 10px 12px; line-height: 1.95; }
.qa-home .q-slide.is-verywordy .q-slide__brand { margin-bottom: 10px; }
.qa-home .q-slide.is-verywordy .q-slide__brand img { height: 24px; padding: 7px 12px; }

/* ── ۱۱) طیفِ لبه ی عکس ──────────────────────────────────────────────────
   ۲۳۰ پیکسل از یک عکسِ ۶۶۰ پیکسلی یعنی ۳۵٪ عکس شسته می شد ؛ اگر سوژه نزدیکِ
   لبه ی داخلی باشد ، سوژه پاک می شد. ۱۳۰ پیکسل برای نرم کردنِ مرز کافی است.
   ------------------------------------------------------------------------ */
@media (min-width: 992px) {
    .qa-home .q-slide__veil {
        background: linear-gradient(to right,
            transparent calc(100% - 130px),
            color-mix(in srgb, var(--bnr-bg) 26%, transparent) calc(100% - 86px),
            color-mix(in srgb, var(--bnr-bg) 70%, transparent) calc(100% - 42px),
            color-mix(in srgb, var(--bnr-bg) 93%, transparent) calc(100% - 12px),
            var(--bnr-bg) 100%);
    }
}

/* ── ۱۲) نوارِ تبِ معامله ────────────────────────────────────────────────
   یک انتخابِ دوگزینه ای ، ۱۲۷۰ پیکسل عرض نمی خواهد. سگمنتِ متعارف ، از ابتدای
   سطر. نیمه ی خاموش هم دیگر «متنِ لخت» نیست و سطحِ خودش را دارد.
   ------------------------------------------------------------------------ */
.qa-home .q-deals {
    max-width: 720px;
    margin-inline: 0 auto;
}
.qa-home .q-tab { border-radius: var(--r-ctl); }
/* در عرضِ کمتر ، برچسبِ تب نباید دو تکه شود («خرید و / فروش») */
.qa-home .q-tab__txt b { white-space: nowrap; }
.qa-home .q-tab__txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── ۱۳) کارتِ محله ــ حذفِ فضای مرده ─────────────────────────────────────
   نام یک طرفِ کارت و عدد طرفِ دیگر بود و ~۹۰ پیکسل وسطش خالی می ماند. حالا نام
   و عدد یک بلوکِ دوسطری کنارِ آیکون اند.
   ------------------------------------------------------------------------ */
.qa-home .q-market__list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 1px;
}
.qa-home .q-market__pin { grid-row: 1 / 3; }
.qa-home .q-market__name { grid-column: 2; grid-row: 1; }
.qa-home .q-market__list em {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--qa-muted);
    font-size: .72rem;
    font-weight: 600;
}

/* ── ۱۴) کارتِ ملک در حالتِ فشرده ─────────────────────────────────────────
   بلید حالا در صفحه ی اصلی فقط «درخواست بازدید» را در این ردیف می سازد
   (علاقه مندی رفته روی تصویر ، تماس و «مشاهده» برداشته شده اند ، و تاریخ در
   این صفحه اصلاً نشان داده نمی شود). پس ردیف دیگر ردیفِ آیکون نیست و قاعده ی
   مربعِ ۳۰ پیکسلیِ قبلی حذف شد — همان قاعده دکمه ی برچسب دار را ۳۰ پیکسل
   می کرد و متنش از کارت بیرون می زد.
   ------------------------------------------------------------------------ */
.qa-home #qaCards .ec-footer { justify-content: flex-end; }
.qa-home #qaCards .ec-actions { flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; }
.qa-home #qaCards .ec-visit { width: 100%; height: 38px; }

/* ── ۱۵) ته رنگِ کرم ، این بار با ریتم ────────────────────────────────────
   کرمِ خالیِ پس زمینه فقط یک قابِ نازک دورِ کارت های سفید بود و عملاً دیده
   نمی شد. حالا دو بخش پلاکِ ته رنگ دار دارند ، پس صفحه یک ریتمِ روشن/گرم پیدا
   می کند و کرم نقشِ واقعی می گیرد.
   ------------------------------------------------------------------------ */
/* `.qa-sec:nth-of-type(even){background:transparent}` بالای همین فایل وزنِ
   (۰،۳،۰) دارد ؛ انتخابگرِ تک کلاسه زیرش می ماند. دو کلاسه نوشته می شود. */
.qa-home .qa-sec.qa-sec--tint {
    padding: var(--s5) var(--s3);
    margin-top: var(--s6);
    border: 1px solid var(--qa-cream-line);
    border-radius: var(--r-box);
    background: var(--qa-cream);
}
.qa-home .qa-sec.qa-sec--tint + .qa-sec { padding-top: var(--s6); }

/* ── ۱۶) کارتِ مشاور: وقتی امتیاز نداریم ─────────────────────────────────── */
.qa-home .qa-agentcard__stats.is-solo { grid-template-columns: minmax(0, 1fr); }
.qa-home .qa-agentcard__stats.is-solo > div + div { border-inline-start: 0; }


/* ══ واکنش گرا ═══════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    /* روی گوشی دو دکمه ی هیرو تمام عرض و زیرِ هم اند */
    .qa-home .q-slide__acts { width: 100%; flex-direction: column; }
    .qa-home .q-slide__cta,
    .qa-home .q-slide--brand .q-slide__cta { width: 100%; justify-content: center; }

    .qa-home .q-deals { max-width: none; }
}

@media (max-width: 767.98px) {
    /* فاصله ی سرِ بخش ها یک پله کمتر ــ هفت بخش × ۱۶ پیکسل */
    .qa-home .q-filter { padding: var(--s2); }

    /* هیرو: عددِ جادوییِ ۲۳۶ برداشته شد ــ ارتفاع را خودِ متن تعیین می کند و
       دکمه با margin-top:auto ته قاب می ماند. */
    .qa-home .q-slide__body,
    .qa-home .q-slide--brand .q-slide__body { min-height: 0; }

    .qa-home .q-owner__points li { font-size: .76rem; }
    .qa-home .q-owner__main p { font-size: .82rem; }
}


/* ── ۱۷) صرفه جویی های گوشی ───────────────────────────────────────────────
   اینها هر کدام کوچک اند ولی روی هم اولین کارتِ ملک را چند صد پیکسل بالا
   می آورند — و یکی شان اصلاً منطقی نبود.
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* کدِ QR اینستاگرام روی گوشی بی معنی است: کسی نمی تواند صفحه ی گوشیِ خودش
       را با دوربینِ همان گوشی اسکن کند. دکمه ی «دنبال کردن» کارش را می کند.
       ماکتِ گوشی هم روی خودِ گوشی تزئینِ محض است. */
    .qa-home .q-qr,
    .qa-home .q-phone { display: none; }

    /* دو دکمه ی هیرو کنارِ هم ــ برچسب ها کوتاه اند و دو ردیفِ تمام عرض
       ۶۰ پیکسل بی دلیل می گرفت */
    .qa-home .q-slide__acts { flex-direction: row; flex-wrap: wrap; gap: var(--s1); }
    .qa-home .q-slide__cta,
    .qa-home .q-slide--brand .q-slide__cta {
        width: auto;
        min-height: 46px;
        flex: 1 1 140px;
        padding-inline: var(--s2);
        font-size: .88rem;
    }

    /* همان کار برای دکمه های «ثبت ملک» */
    .qa-home .q-owner__acts { flex-direction: row; flex-wrap: wrap; }
    .qa-home .q-owner__acts .qa-btn { width: auto; flex: 1 1 150px; padding-inline: 10px; font-size: .8rem; }

    /* سه نکته به جای سه سطر ، یک ردیفِ شکسته */
    .qa-home .q-owner__points { flex-direction: row; flex-wrap: wrap; gap: 4px var(--s2); }

    /* نقشه ی درون صفحه روی گوشی نقشِ «نمای کلی» را دارد ؛ کارِ جدی روی صفحه ی
       نقشه ی تمام صفحه انجام می شود. */
    .qa-home .q-map__canvas { min-height: 300px; }
}


/* ── ۱۸) کارتِ مشاور ــ بعد از یکی شدنِ دکمه ها ───────────────────────────
   ردیفِ دکمه در public.css گریدِ دوستونه است (1.35fr / 1fr) چون دو دکمه داشت.
   حالا یک دکمه بیشتر نیست و آن گرید یعنی دکمه ای که نصفِ عرضِ کارت را می گیرد،
   کنجِ کارت می افتد و برچسبش دو خط می شود. یک ستون.
   ------------------------------------------------------------------------ */
.qa-home .qa-grid--agents .qa-agentcard__acts,
.qa-home .qa-agentcard__acts { grid-template-columns: minmax(0, 1fr); }
.qa-home .qa-agentcard__acts .qa-btn { width: 100%; white-space: nowrap; }

/* ── ۱۹) فاصله ها ─────────────────────────────────────────────────────────
   دو اصلاح:

   ۱) «مشاهده همه» روی گوشی یک دکمه ی تمام عرضِ زیرِ تیتر شده بود ، پس هر سرِ
      بخش سه طبقه می گرفت (تیتر ، دکمه ، بعد محتوا). حالا در همان سطرِ تیتر
      می ماند و اندازه اش به اندازه ی متنش است.

   ۲) فاصله ی بینِ بخش ها روی گوشی را قبلاً تا ۳۲ پیکسل پایین آورده بودم و
      بخش ها به هم چسبیدند. ۴۰ پیکسل مرزِ درستی است: هم بخش ها از هم جدا
      دیده می شوند هم صفحه بی دلیل بلند نمی شود.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .qa-home .qa-sechead {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--s1) var(--s2);
    }
    .qa-home .qa-more { width: auto; justify-content: center; }
}

@media (max-width: 767.98px) {
    .qa-home .qa-sec,
    .qa-home .qa-sec + .qa-sec,
    .qa-home .qa-sec:nth-of-type(even) { padding-top: 40px; }
    .qa-home .qa-sec--pad { padding-bottom: 40px; }
    .qa-home .qa-sec.qa-sec--tint { padding: var(--s4) var(--s2); margin-top: 40px; }

    .qa-home .qa-more { width: auto; padding-inline: 12px; font-size: .8rem; }

    /* کارتِ مشاور روی گوشی: نام و نشانِ رتبه یک ردیف ، عددِ ماه یک سطرِ افقی
       (نه یک بلوکِ وسط چینِ دو طبقه) ، و دکمه تمام عرض. */
    .qa-home .qa-agentcard { gap: 10px; padding: 12px; }
    .qa-home .qa-grid--agents .qa-agentcard__stats,
    .qa-home .qa-agentcard__stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px var(--s3);
        padding: 8px 0;
        text-align: start;
    }
    .qa-home .qa-agentcard__stats > div { display: flex; align-items: baseline; gap: 6px; padding: 0; }
    .qa-home .qa-agentcard__stats > div + div { border-inline-start: 0; }
    .qa-home .qa-agentcard__stats b { display: inline; font-size: .92rem; }
    .qa-home .qa-agentcard__stats span { font-size: .72rem; }
}


/* ── ۲۰) کادرِ آدرسِ دفتر در پاورقی ───────────────────────────────────────
   این کادر ته رنگِ آبیِ سرد دارد (#EDF5FD با کادرِ #C9E0F7) و در پاورقیِ
   کِرِمِ صفحه ی اصلی یک وصله ی آبی می شد. فقط همین صفحه گرم می شود ؛ بقیه ی
   صفحه ها پاورقیِ سفید دارند و همان آبی آنجا سرِ جایش است.
   ------------------------------------------------------------------------ */
.qa-home .qf-links a.qf-map {
    border-color: var(--qa-cream-line);
    background: var(--qa-surface);
}
.qa-home .qf-links a.qf-map:hover,
.qa-home .qf-links a.qf-map:focus {
    border-color: var(--qa-orange);
    background: var(--qa-surface);
}
.qa-home .qf-map small { color: var(--qa-orange-text); }

/* ── ۲۱) کارتِ مشاور با دادهٔ کارتِ فهرستِ مشاوران ────────────────────────
   کارت حالا همان ردیف های اطلاعاتیِ صفحه ی «مشاوران» را دارد (محله ، نوع ملک ،
   آخرین فایل ، تلفن). آن قاعده ها در search.css اند و آن فایل روی صفحه ی اصلی
   لود نمی شود ، پس همین جا تکرار می شوند — با توکن های همین صفحه.
   ------------------------------------------------------------------------ */
.qa-home .ag-meta {
    display: grid;
    gap: 6px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    text-align: start;
}
.qa-home .ag-meta__row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--qa-body);
    font-size: .76rem;
    line-height: 1.8;
}
.qa-home .ag-meta__row > i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--qa-slate-2);
    font-size: .76rem;
}
/* دو خط سقفِ نامِ محله هاست ؛ مشاورِ پرکار ده محله دارد و کارت را بلند می کند */
.qa-home .ag-meta__val {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--qa-body);
}
.qa-home a.ag-meta__val { color: var(--qa-ink); font-weight: 700; }
.qa-home a.ag-meta__val:hover { color: var(--qa-navy); }

.qa-home .qa-agentcard h3 a { color: inherit; }
.qa-home .qa-agentcard h3 a:hover { color: var(--qa-navy); }
.qa-home .qa-agentcard__ava a { display: block; }

/* تعدادِ خانه ها ثابت نیست (خانه ی صفر رندر نمی شود) ، پس ستون ها از روی
   خودِ فرزندها ساخته می شوند نه با عددِ ثابتِ ۳ ــ وگرنه کارتِ دوخانه ای یک
   ستونِ خالی در انتها می گرفت. */
.qa-home .qa-grid--agents .qa-agentcard__stats,
.qa-home .qa-agentcard__stats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

/* دکمه ها دوباره می توانند یکی یا دو تا باشند (تماس فقط وقتی شماره هست) ، پس
   گریدِ دوستونه می ماند و دکمه ی تنها تمام عرض می شود. */
.qa-home .qa-grid--agents .qa-agentcard__acts,
.qa-home .qa-agentcard__acts { grid-template-columns: 1.35fr 1fr; }
.qa-home .qa-agentcard__acts > .qa-btn:only-child { grid-column: 1 / -1; }
.qa-home .qa-agentcard__acts .qa-btn { width: 100%; white-space: nowrap; }

@media (max-width: 767.98px) {
    /* روی گوشی سه عدد یک ردیفِ افقی می شوند (برچسب کنارِ عدد ، نه زیرش) */
    .qa-home .qa-grid--agents .qa-agentcard__stats,
    .qa-home .qa-agentcard__stats {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
        justify-content: flex-start;
        gap: 4px var(--s2);
    }
    .qa-home .ag-meta__row { font-size: .74rem; }
}