/*!
 * Megop Design System — لایه‌ی مشترک طراحی چهار زیربرند مگوپ
 * نسخه 1.0.0
 *
 * قاعده‌ی بنیادی این لایه:
 * رنگِ «اصلی» هر زیربرند، رنگِ سطح و گرافیک است، نه رنگِ متن.
 * متن و لینک از رنگِ «دوم» همان زیربرند استفاده می‌کنند — دقیقاً همان
 * نقشی که «راهنمای برند و پالت رنگی مگوپ» برایشان تعریف کرده است
 * (#1A6973 = «تیترها و تاکید» · #35694C = «تیترها و حالت Hover»).
 *
 * هر جا !important آمده، برای غلبه بر انتخابگرهای شناسه‌ایِ المنتور است،
 * نه برای پوشاندن یک تصمیم طراحی.
 */

/* ══════════════════ ۱ · توکن‌ها ══════════════════ */
:root{
  /* Megop Edu & Konkur */
  --mg-k-brand:#63A8CC;      /* سطح، لوگو، گرافیک — نه متن */
  --mg-k-accent:#DC661E;   /* اکسنت: فقط سطح و گرافیک، هرگز متن معمولی */
  --mg-k-surface:#E5F6FF;  /* پس‌زمینه‌ی ۲: کارت و بخش، نه پس‌زمینه‌ی صفحه */
  --mg-k-ink:#1A6973;        /* تیتر و تاکید */
  --mg-k-deep:#003A4D;
  --mg-k-text:#002838;

  /* Megop Interdisciplinary */
  --mg-i-brand:#6FBD85;      /* سطح، دکمه، لوگو — نه متن */
  --mg-i-ink:#35694C;        /* تیتر و تاکید */
  --mg-i-surface:#E3F3E9;
  --mg-i-accent:#F2B95C;
  --mg-i-text:#2C3531;

  /* Megop SEO */
  --mg-s-brand:#DC661E;
  --mg-s-accent:#E4A039;
  --mg-s-deep:#003A4D;
  --mg-s-text:#7A121C;

  /* Megop Cinema & Photo */
  --mg-c-brand:#F45B5B;
  --mg-c-deep:#263A59;
  --mg-c-accent:#F2A65A;
  --mg-c-text:#2B2D42;
  --mg-c-surface:#FFF5F3;

  /* توکن‌های معنایی — پیش‌فرض: جهانِ کنکور */
  --mg-text:var(--mg-k-text);
  --mg-heading:var(--mg-k-ink);
  --mg-link:var(--mg-k-ink);
  --mg-link-hover:var(--mg-k-deep);
  --mg-inline-link:#63A8CC;
  --mg-inline-link-hover:var(--mg-k-ink);
  --mg-rule:var(--mg-k-brand);
  --mg-focus:#DC661E;

  /* تایپوگرافی */
  --mg-h1-size:clamp(1.65rem, 1.35rem + 1.2vw, 2.1rem);
  --mg-h1-lh:1.38;
  --mg-h2-lh:1.5;
  --mg-body-lh:1.95;
  --mg-body-size-m:1.1rem;

  /* هدف لمسی */
  --mg-tap:44px;
}

/* نگاشت جهان‌ها */
body.megop-w-inter{
  --mg-text:var(--mg-i-text);
  --mg-heading:var(--mg-i-ink);
  --mg-link:var(--mg-i-ink);
  --mg-link-hover:var(--mg-i-text);
  --mg-inline-link:#008540;
  --mg-inline-link-hover:var(--mg-i-ink);
  --mg-rule:var(--mg-i-accent);
}
body.megop-w-seo{
  --mg-text:var(--mg-s-text);
  --mg-heading:var(--mg-s-deep);
  --mg-link:var(--mg-s-deep);
  --mg-link-hover:var(--mg-s-brand);
  --mg-rule:var(--mg-s-brand);
}
body.megop-w-cinema{
  --mg-text:var(--mg-c-text);
  --mg-heading:var(--mg-c-deep);
  --mg-link:var(--mg-c-deep);
  --mg-link-hover:var(--mg-c-brand);
  --mg-rule:var(--mg-c-brand);
}

/* ══════════════════ ۲ · لینک‌های درون‌متن ══════════════════
 * پیش از این، لینک‌های خودکار Megop SEO در بخش میان‌رشته‌ای هیچ
 * قاعده‌ی CSS نداشتند و به آبیِ پیش‌فرض مرورگر (#0015FF) می‌افتادند:
 * روی زمینه‌ی سبز تیره کنتراست ۱.۲۸:۱ — عملاً نامرئی.
 */
.elementor-widget-text-editor a:not([class*="elementor-button"]):not([style*="color"]):not(.elementor-icon),
.elementor-widget-theme-post-content a:not([class*="elementor-button"]):not([style*="color"]):not(.elementor-icon),
.entry-content a:not([class*="elementor-button"]):not([style*="color"]):not(.elementor-icon),
a.megop-auto-link:not([style*="color"]){
  color:var(--mg-inline-link);
  font-weight:700;
  text-decoration:none;
}
.elementor-widget-text-editor a:not([class*="elementor-button"]):not([style*="color"]):hover,
.elementor-widget-theme-post-content a:not([class*="elementor-button"]):not([style*="color"]):hover,
.entry-content a:not([class*="elementor-button"]):not([style*="color"]):hover,
a.megop-auto-link:not([style*="color"]):hover{
  color:var(--mg-inline-link-hover);
  text-decoration:underline;
  text-decoration-thickness:.09em;
  text-underline-offset:.22em;
}

/* جهانِ میان‌رشته‌ای سطح روشن و سطح تیره را با هم دارد؛ پس لینک
 * رنگِ متنِ میزبان را می‌گیرد و نشانه‌گذاری‌اش با زیرخطِ کهربایی است.
 * این تنها الگویی است که روی #E3F3E9 و #35694C هر دو AA می‌ماند. */
body.megop-w-inter .elementor-widget-text-editor a:not([class*="elementor-button"]):not([style*="color"]),
body.megop-w-inter .elementor-widget-theme-post-content a:not([class*="elementor-button"]):not([style*="color"]),
body.megop-w-inter .entry-content a:not([class*="elementor-button"]):not([style*="color"]),
body.megop-w-inter a.megop-auto-link:not([style*="color"]){
  color:var(--mg-inline-link) !important;
  font-weight:700;
  text-decoration:none;
}
body.megop-w-inter .elementor-widget-text-editor a:not([class*="elementor-button"]):not([style*="color"]):hover,
body.megop-w-inter .elementor-widget-theme-post-content a:not([class*="elementor-button"]):not([style*="color"]):hover,
body.megop-w-inter .entry-content a:not([class*="elementor-button"]):not([style*="color"]):hover,
body.megop-w-inter a.megop-auto-link:not([style*="color"]):hover{
  color:var(--mg-inline-link-hover) !important;
  text-decoration:underline;
  text-decoration-color:var(--mg-i-accent);
  text-decoration-thickness:.11em;
}

/* ══════════════════ ۳ · سرتیترها ══════════════════
 * H1 مقاله #63A8CC روی سفید بود: ۲.۶۲:۱ (زیر حدِ ۳:۱ حتی برای متن درشت).
 * H1 آرشیو میان‌رشته‌ای #6FBD85 روی #E3F3E9 بود: ۱.۹۷:۱.
 * هر دو به رنگِ «دومِ» همان زیربرند منتقل می‌شوند: ۶.۳۴:۱ و ۵.۵۷:۱.
 */
.elementor-location-single h1.elementor-heading-title,
.elementor-widget-theme-post-title h1,
body.archive h1.elementor-heading-title,
body.category h1.elementor-heading-title,
body.search h1.elementor-heading-title,
h1.entry-title{
  color:var(--mg-heading) !important;
}

/* ارتفاع سطر H1 روی موبایل ۲.۰ بود و روی دسکتاپ ۱.۰ — هر دو غلط. */
h1,
h1.elementor-heading-title{
  line-height:var(--mg-h1-lh) !important;
}
h2,
h2.elementor-heading-title{
  line-height:var(--mg-h2-lh);
}

@media (max-width:767px){
  .elementor-location-single h1.elementor-heading-title,
  .elementor-widget-theme-post-title h1,
  body.archive h1.elementor-heading-title,
  body.category h1.elementor-heading-title,
  h1.entry-title{
    font-size:var(--mg-h1-size) !important;
  }
}

/* ══════════════════ ۴ · متن بدنه ══════════════════
 * مشکل، خودِ justify نبود؛ ۲۱٫۱ پیکسل در ستون ۲۹۵ پیکسل بود که سطر را به
 * ۲۸ نویسه می‌رساند و فاصله‌های بین‌کلمه‌ای را کش می‌داد. با ۱۷٫۶ پیکسل، سطر
 * به حدود ۳۴ نویسه می‌رسد و justify دوطرفه دست‌نخورده می‌ماند.
 */
@media (max-width:767px){
  body.single .elementor-widget-theme-post-content p,
  body.single .entry-content p,
  body.archive .elementor-widget-text-editor p,
  body.category .elementor-widget-text-editor p{
    font-size:var(--mg-body-size-m) !important;
    line-height:var(--mg-body-lh);
  }
}

/* ══════════════════ ۵ · ردیف آیکون‌های هدر ══════════════════
 * چهار آیکونِ هدر (منو، حساب، تماس، جستجو) روی یک خط نمی‌نشستند. علتش اندازه
 * نبود، حاشیه بود: کانتینر align-items:center است، ولی هر ویجت ارتفاع کل
 * متفاوتی داشت — ۳۳ / ۵۴٫۲ / ۵۴٫۲ / ۴۵٫۲ پیکسل — چون ویجت‌های آیکون و جستجو
 * حاشیه‌ی پایینِ پیش‌فرض ۱۰ پیکسلی داشتند و منو نداشت. فلکس‌باکس margin-box را
 * وسط‌چین می‌کند، پس آن ۱۰ پیکسل مرکزها را تا ۵ پیکسل از هم دور می‌کرد.
 * سه مرکز متفاوت داشتیم: ۳۷٫۱ و ۳۸٫۶ و ۴۲٫۰.
 * حاشیه صفر می‌شود و هر چهار هدف یک جعبه‌ی ۴۴×۴۴ می‌گیرند.
 */
@media (max-width:1024px){
  .elementor-location-header .elementor-widget-icon,
  .elementor-location-header .elementor-widget-search-form,
  .elementor-location-header .elementor-widget-nav-menu{
    margin:0 !important;
    inline-size:auto !important;
    align-self:center;
  }
  .elementor-location-header .elementor-widget-icon > .elementor-widget-container,
  .elementor-location-header .elementor-widget-search-form > .elementor-widget-container,
  .elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container,
  .elementor-location-header .elementor-icon-wrapper{
    margin:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:0;
  }
  /* ردیف نباید بشکند. با هدف‌های ۴۴ پیکسلی و فاصله‌ی ۱۵ پیکسلیِ المنتور،
     مجموع ۲۴۱ پیکسل می‌شد و زیر ویوپورت ۳۲۲ پیکسل آیکون جستجو به سطر دوم می‌افتاد. */
  .elementor-location-header .e-con:has(> .elementor-widget-nav-menu){
    flex-wrap:nowrap !important;
    column-gap:.375rem !important;
    inline-size:auto !important;
    flex:0 0 auto;
  }

  /* لوگو به دیوار چپ، گروه آیکون‌ها به دیوار راست، با حاشیه‌ی یکسان.
     والد در صفحه‌ی RTL جهت row دارد؛ row-reverse جای دو فرزند را عوض
     می‌کند و space-between هرکدام را به دیوار خودش می‌چسباند. */
  .elementor-location-header .e-con:has(> .e-con > .elementor-widget-nav-menu){
    flex-direction:row-reverse;
    justify-content:space-between;
    padding-inline:0;
  }
  .elementor-location-header .e-con:has(> .e-con > .elementor-widget-nav-menu) > .e-con{
    padding-inline:.625rem;
  }

  /* کانتینر لوگو از محتوایش پهن‌تر بود و لوگو را وسط خودش می‌چید،
     برای همین حاشیه‌ی چپ ۳۴ پیکسل می‌شد در برابر ۱۰ پیکسل سمت راست. */
  .elementor-location-header .e-con:has(> .e-con > .elementor-widget-nav-menu) > .e-con:has(> .elementor-widget-image){
    inline-size:auto;
    flex:0 0 auto;
  }

  /* پنل منو باید تمام عرض صفحه را بگیرد. المنتور جای آن را با جاوااسکریپت
     نسبت به خودِ دکمه حساب می‌کند، و بعد از جابه‌جا کردن دکمه آن عدد دیگر
     درست نیست — پنل ۴۴ پیکسل از لبه‌ی چپ بیرون می‌زد و همان‌قدر از راست
     کم می‌آورد. با static کردن دو والدِ نزدیک، مرجعِ مکان‌یابی خودِ هدر
     می‌شود و پنل دقیقاً زیر آن و تمام‌عرض می‌نشیند. */
  .elementor-location-header .e-con:has(> .elementor-widget-nav-menu),
  .elementor-location-header .elementor-widget-nav-menu{
    position:static;
  }
  .elementor-location-header .elementor-nav-menu--dropdown{
    inset-inline:0 !important;
    inline-size:auto !important;
    inset-block-start:100% !important;
  }
  /* آیکون جستجو داخل یک wrapper با margin-bottom:5px است و سه آیکون دیگر نیستند.
     همان ۵ پیکسل شیشه را ۲٫۵ پیکسل بالاتر از سه‌تای دیگر می‌برد. */
  .elementor-location-header .e-font-icon-svg-container{
    margin:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .elementor-location-header a.elementor-icon,
  .elementor-location-header .elementor-search-form__toggle{
    inline-size:var(--mg-tap);
    block-size:var(--mg-tap);
    padding:0;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }

  /* همبرگر به لبه‌ی راستِ گروه می‌رود و برچسب متنی می‌گیرد.
     ردیف row-reverse داخل صفحه‌ی RTL است، یعنی جریان چیدمان چپ‌به‌راست
     می‌شود؛ پس order بزرگ‌تر یعنی راست‌تر. */
  .elementor-location-header .elementor-widget-nav-menu{ order:10; }

  .elementor-location-header .elementor-menu-toggle{
    inline-size:auto;
    min-inline-size:var(--mg-tap);
    block-size:var(--mg-tap);
    padding-block:0;
    padding-inline:.35rem;
    margin:0;
    gap:.28rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }
  .elementor-location-header .elementor-menu-toggle::after{
    content:"منو";
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
  }
}

/* ══════════════════ ۶ · منوی کشویی میان‌رشته‌ای ══════════════════
 * متن #35694C روی چیپ کهربایی #F2B95C کنتراست ۳.۶۲:۱ داشت.
 */
/* نکته: این قاعده قبلاً ul.sub-menu a را به‌صورت سراسری می‌گرفت و رنگ
   لینک‌های ویجت Footer Mega Menu را هم عوض می‌کرد (متن تیره روی
   زمینه‌ی تیره). حالا فقط به منوی کشوییِ هدر محدود است. */
body.megop-w-inter .elementor-location-header .elementor-nav-menu--dropdown a,
body.megop-w-inter .elementor-location-header ul.sub-menu a{
  color:var(--mg-i-text) !important;
}

/* ══════════════════ ۷ · حلقه‌ی فوکوس ══════════════════ */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--mg-focus);
  outline-offset:2px;
  border-radius:3px;
}

/* ══════════════════ ۸ · کاهش حرکت ══════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ══════════════════ ۹ · ارتفاع سطر ارثی ══════════════════
 * ارتفاع سطر بدنه با واحد px تعریف شده بود (۳۴px). مقدارِ محاسبه‌شده به همه‌ی
 * فرزندان ارث می‌رسد، برای همین بج «زمان حدودی مطالعه» با فونت ۱۲٫۳ پیکسل هم
 * ۳۵٫۲ پیکسل ارتفاع سطر می‌گرفت — نسبت ۲٫۸۶. مقدار بی‌واحد در هر عنصر دوباره
 * از روی فونت خودش حساب می‌شود. اعداد عمداً برابر نسبت امروزِ متن بدنه‌اند
 * تا خودِ بدنه ذره‌ای جابه‌جا نشود.
 */
body,
body[class*="elementor-kit-"]{ line-height:2.125; }
@media (max-width:767px){
  body,
  body[class*="elementor-kit-"]{ line-height:2; }
}

/* ══════════════════ ۱۰ · منوی موبایل ══════════════════
 * وضعیت پیش از اصلاح روی ۳۷۵ پیکسل: ردیف‌های ۴۰ پیکسلی (زیر حداقل ۴۴)، فونت
 * ۱۳ پیکسل در سطح اول و ۱۱ پیکسل در زیرمنو، بدون خط جداکننده، بدون سایه — پس
 * پنل روی محتوای صفحه شناور به نظر می‌رسید. فلش‌های بازشونده چون درست بعدِ متن
 * می‌نشستند، در هر ردیف جای متفاوتی داشتند و پراکنده دیده می‌شدند. آیتم جاری هم
 * یک نوار خاکستری #3F444B بود که در هیچ‌کدام از چهار پالت مگوپ وجود ندارد.
 * باز و بسته‌شدن با aria-hidden کنترل می‌شود، پس همه‌ی قاعده‌ها به حالتِ باز
 * مقید شده‌اند و مکانیزم toggle دست نمی‌خورد.
 */
@media (max-width:1024px){

  /* پنل: یک سطح مستقل با ارتفاع مهارشده */
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown[aria-hidden="false"]{
    max-height:calc(100vh - 5rem) !important;
    max-height:calc(100dvh - 5rem) !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:0 22px 44px -14px rgba(0,40,56,.30);
    border-block-start:1px solid rgba(0,40,56,.10);
  }

  /* ردیف‌ها: هدف لمسی واقعی و خط جداکننده */
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-item,
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-sub-item{
    min-height:3rem;
    padding-block:.7rem;
    padding-inline:1.25rem;
    font-size:.94rem;
    line-height:1.6;
    border-block-end:1px solid rgba(0,40,56,.07);
  }
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-sub-item{
    font-size:.88rem;
    padding-inline-start:2.25rem;
  }

  /* فلش‌ها در یک ستون ثابت، با هدف لمسی مستقل */
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .sub-arrow{
    margin-inline-start:auto;
    min-width:2.75rem;
    min-height:2.75rem;
    align-items:center;
    justify-content:center;
    opacity:.6;
  }

  /* زیرمنو: ریل و پس‌زمینه‌ی ملایم تا سلسله‌مراتب خوانده شود */
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .sub-menu{
    background:rgba(0,40,56,.035);
    border-inline-start:3px solid var(--mg-link);
  }

  /* والدِ بازشده و حالت لمس: تینت ملایم، نه نوار خاکستری #3F444B */
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-item.highlighted:not(.elementor-item-active),
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-item:hover:not(.elementor-item-active),
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-item:focus:not(.elementor-item-active),
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-sub-item:hover,
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-sub-item:focus{
    background:rgba(0,40,56,.055) !important;
    color:var(--mg-link) !important;
  }

  /* آیتم جاری: رنگ برند به‌جای خاکستریِ خارج از پالت */
  body[class*="elementor-kit-"] .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
    background:var(--mg-link) !important;
    color:#FFFFFF !important;
  }
}

/* ══════════════════ ۱۱ · بنر زردِ هدر ══════════════════
 * وضعیت پیش از اصلاح:
 *  · فقط بخشی از متن لینک بود؛ عبارت «(کلیک کنید)» داشت جای دکمه را پر می‌کرد.
 *  · رنگ #008000 در هیچ‌کدام از چهار پالت نیست و روی زمینه‌ی #FDDE6C
 *    کنتراست ۳٫۸۸:۱ می‌داد — زیر حدِ ۴٫۵:۱ برای متن معمولی.
 *  · ویجتِ متن حاشیه‌ی منفی داشت (‎-۱۵px دسکتاپ، ‎-۲۵px موبایل)؛ کادر زرد
 *    کوتاه‌تر از محتوایش می‌شد و در عرض‌های باریک متن از کادر بیرون می‌افتاد.
 * راه‌حل: کل سطح زرد یک <a> واحد با ارتفاع لمسیِ ۴۴ پیکسل.
 */

/* حاشیه و پدینگِ منفیِ ویجت که متن را از کادر بیرون می‌انداخت */
#dore .elementor-widget-text-editor,
#dore .elementor-widget-text-editor > .elementor-widget-container{
  --margin-block-start:0px;  --margin-block-end:0px;
  --margin-inline-start:0px; --margin-inline-end:0px;
  margin:0 !important;
  padding:0 !important;
}
#dore .elementor-widget-text-editor p{ margin:0 !important; }

/* کادر زرد: پدینگ به خودِ لینک منتقل می‌شود تا کل سطح قابل کلیک بماند */
#dore .e-con,
#dore .e-con > .e-con-inner{
  --padding-block-start:0px;  --padding-block-end:0px;
  --padding-inline-start:0px; --padding-inline-end:0px;
  padding:0 !important;
}
#dore .e-con{ align-self:stretch !important; inline-size:100% !important; }

/* بنر = دکمه */
#dore .megop-promo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  inline-size:100%;
  min-block-size:var(--mg-tap);
  padding:.5rem .9rem;
  border-radius:1em;
  color:var(--mg-k-text) !important;
  font-size:.95rem;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease, transform .12s ease;
}

/* پیکانِ جهت‌دار به‌جای عبارتِ «کلیک کنید» */
#dore .megop-promo::after{
  content:"";
  inline-size:.4em;
  block-size:.4em;
  flex:0 0 auto;
  border-left:.14em solid currentColor;
  border-bottom:.14em solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
#dore .megop-promo:hover{ background:rgba(0,40,56,.08); }
#dore .megop-promo:hover::after{ transform:translateX(-.15em) rotate(45deg); }
#dore .megop-promo:active{ transform:scale(.985); }

@media (max-width:767px){
  #dore .megop-promo{
    font-size:.875rem;
    padding:.45rem .75rem;
    border-radius:.5em;
  }
}
/* ══════════ ۱۲ · چسبیدن بنر به بالای صفحه هنگام اسکرول ══════════
 * چرا fixed و نه sticky: بنر داخل هدر است و بلوکِ دربرگیرنده‌اش
 * فقط به ارتفاع خودِ هدر است؛ sticky همراه هدر از صفحه خارج می‌شد.
 * برای اینکه صفحه در لحظه‌ی چسبیدن نپرد، ارتفاع #dore در جریان
 * صفحه با متغیر --megop-promo-h حفظ می‌شود (ارتفاع سند ثابت می‌ماند
 * و حلقه‌ی بچسب/نچسب رخ نمی‌دهد).
 */

#dore .e-con{
  transition:background-color .2s ease, box-shadow .2s ease;
}

html.megop-promo-stuck #dore{
  block-size:var(--megop-promo-h,0px);
}

html.megop-promo-stuck #dore > .e-con-inner{
  position:fixed;
  inset-block-start:0;   /* کاملاً چسبیده به سقفِ صفحه؛ هیچ فاصله‌ای نمی‌ماند */
  inset-inline:0;
  inline-size:auto;
  max-inline-size:none;
  padding:0;
  margin:0;
  z-index:9970;
  /* المنتور به .e-con-inner ارتفاع ۱۰۰٪ می‌دهد؛ در حالت fixed این ۱۰۰٪
     به ارتفاع پنجره تبدیل می‌شد و کل صفحه را می‌پوشاند. */
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  pointer-events:none;
}


html.megop-promo-stuck #dore .e-con{
  pointer-events:auto;
  border-start-start-radius:0;
  border-start-end-radius:0;
  border-end-start-radius:.6rem;
  border-end-end-radius:.6rem;
  background-color:rgba(253,222,108,.95) !important;
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 .35rem 1rem rgba(0,40,56,.16), 0 .1rem .25rem rgba(0,40,56,.10);
}

/* وقتی منوی موبایل باز است، بنرِ چسبیده کنار می‌رود */
html.megop-promo-stuck body:has(.elementor-nav-menu--dropdown[aria-hidden="false"]) #dore > .e-con-inner{
  opacity:0;
  pointer-events:none;
}

/* نوار مدیریت وردپرس */
@media screen and (min-width:783px){
  html.megop-promo-stuck body.admin-bar #dore > .e-con-inner{
    inset-block-start:32px;
  }
}
@media screen and (max-width:782px){
  html.megop-promo-stuck body.admin-bar #dore > .e-con-inner{
    inset-block-start:46px;
  }
}

@media (prefers-reduced-motion:reduce){
  #dore .e-con{ transition:none; }
}

/* ══════════ ۱۳ · دکمه‌های شناور ══════════
 * رنگِ سراسریِ لینک‌های قالب برچسب را #63A8CC می‌کرد و روی زمینه‌ی
 * نارنجی کنتراست ۱٫۲۴:۱ می‌داد — عملاً خوانا نبود. مرکبِ تیره‌ی
 * جهان کنکور همان زمینه را به ۵٫۸۱:۱ می‌رساند.
 */
a.megop-cta-fab,  a.megop-cta-fab *,
a.megop-call-fab, a.megop-call-fab *{
  color:var(--mg-k-text) !important;
}

/* ══════════ ۱۴ · نقشه‌ی دسته‌ها در فوتر ══════════
 * هدف دوگانه: عبور خزنده از هر صفحه به همه‌ی مرکزها، و نقشه‌ی
 * سایت برای کاربر. هر آیتم یک <a href> واقعی است، نه کلیک‌هندلر JS.
 */
.megop-catmap{ inline-size:100%; }

/* شبکه‌ی هم‌عرض ، نه چیپِ شناور. چیپ شناور با نام‌های
   ۱۲۰ تا ۱۸۸ پیکسلی لبهٔی نامنظم می‌ساخت و شبیه ابرِ کلمه می‌شد ،
   نه نقشه. شبکه لبه‌ها را هم‌تراز می‌کند و عددها در یک ستون می‌نشینند. */
.megop-catmap__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.45rem .6rem;
}
.megop-catmap__item{ margin:0; display:flex; }

.megop-catmap__link{
  inline-size:100%;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  min-block-size:2.75rem;
  padding:.45rem .7rem;
  border-radius:.7rem;
  background-color:rgba(255,255,255,.65);
  border:1px solid rgba(0,40,56,.10);
  color:var(--mg-k-text) !important;
  font-size:.8125rem; font-weight:600; line-height:1.45;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.megop-catmap__name{ flex:1 1 auto; }

/* عدد در بج می‌نشیند نه رها در لبه. قبلاً خاکستری کم‌جان بود و
   در سطر گم می‌شد. اینجا روی پس‌زمینهٔ ۲ با رنگ دوم ، کنتراست ۵٫۷۱. */
.megop-catmap__count{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:2.1rem; padding:.1rem .4rem;
  border-radius:999px;
  background-color:var(--mg-k-surface);
  color:var(--mg-k-ink);
  font-size:.6875rem; font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background-color .15s ease, color .15s ease;
}@media (hover:hover){
  .megop-catmap__link:hover{
    background-color:#FFFFFF;
    border-color:var(--mg-k-brand);
    transform:translateY(-1px);
  }
  .megop-catmap__link:hover .megop-catmap__count{
    background-color:var(--mg-k-ink); color:#FFFFFF;
  }
}
.megop-catmap__link:focus-visible{
  outline:3px solid var(--mg-focus); outline-offset:2px;
  background-color:#FFFFFF; border-color:var(--mg-k-brand);
}
@media (prefers-reduced-motion:reduce){
  .megop-catmap__link{ transition:none; }
  .megop-catmap__link:hover{ transform:none; }
}

@media (max-width:1024px){
  .megop-catmap__list{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:767px){
  .megop-catmap__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.4rem; }
  .megop-catmap__link{
    padding:.4rem .55rem; font-size:.75rem;
    min-block-size:2.6rem; border-radius:.6rem;
  }
  .megop-catmap__count{ min-inline-size:1.9rem; font-size:.65rem; }
}
@media (max-width:359px){
  .megop-catmap__list{ grid-template-columns:1fr; }
}

#megop-footer-catmap .elementor-heading-title{
  font-size:1rem; font-weight:800;
  color:var(--mg-k-text);
  margin-block-end:.75rem;
}
/* ══════════ ۱۵ · شش کاشی صفحه‌ی اول ══════════
 * ردیف اول ۱۲۸ پیکسل بود و دو ردیف بعدی ۱۵۷، چون عنوانِ این‌ها
 * دوسطری می‌شد. ارتفاع کمینه‌ی مشترک، شبکه را هموار می‌کند.
 */
.elementor-element-418828a3 > .e-con-inner > .e-con,
.elementor-element-418828a3 > .e-con{
  min-block-size:9.8rem;
  justify-content:center;
}
@media (max-width:767px){
  .elementor-element-418828a3 > .e-con-inner > .e-con,
  .elementor-element-418828a3 > .e-con{ min-block-size:9.2rem; }
}
/* ۱۵ب · رفتار شش کاشی : هاور ، فوکوس ، کاهش حرکت
 * قبلاً هاور فقط رنگ حاشیه را عوض می‌کرد و فوکوس کیبورد هیچ نشانه‌ای نداشت.
 * حالا همان زبانِ کاشی‌های نقشهٔ دسته‌ها را دارد : بالا آمدن و سایه.
 */
.elementor-element-418828a3 > .e-con-inner > .e-con,
.elementor-element-418828a3 > .e-con{
  transition:transform .16s ease, box-shadow .16s ease;
}
@media (hover:hover){
  .elementor-element-418828a3 > .e-con-inner > .e-con:hover,
  .elementor-element-418828a3 > .e-con:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,40,56,.16) !important;
  }
}
.elementor-element-418828a3 > .e-con-inner > .e-con:focus-visible,
.elementor-element-418828a3 > .e-con:focus-visible{
  outline:3px solid var(--mg-focus);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .elementor-element-418828a3 > .e-con-inner > .e-con,
  .elementor-element-418828a3 > .e-con{ transition:none; }
  .elementor-element-418828a3 > .e-con-inner > .e-con:hover,
  .elementor-element-418828a3 > .e-con:hover{ transform:none; }
}

/* ۱۵ج · کاشی مشاوره دو ستون می‌گیرد
 * کاشی «مقالات ، اخبار و مصوبات» حذف شد و پنج کاشی ماند.
 * شبکه شش ستونی است ، پس مشاورهٔ کنکور که نخستین کاشی است دو ستون می‌گیرد تا ردیف دقیقاً پر شود.
 * در موبایل که شبکه دو ستونی است ، همین یعنی یک ردیف تمام‌عرض در صدر برای مشاوره.
 */
.elementor-element-418828a3 > .e-con-inner > .elementor-element-38c74f88,
.elementor-element-418828a3 > .elementor-element-38c74f88{
  grid-column:span 2;
}

/* ــ ۱۶. شبکه‌ی کاشی دسته‌های کنکور ، شورت‌کد [megop_konkur_tiles] ــ
 * پنج گروه ، هر گروه یک رنگ از پالت. سه رنگ از کنکور و دو رنگ از سئو.
 * کمترین کنتراست ۵٫۸۸ است ، یعنی هر پنج کاشی از حد ۴٫۵ متن معمولی رد می‌شوند.
 * ردیف ناقص با فلکس وسط می‌آید ، چون گرید کاشیِ تک را به دیوار می‌چسباند.
 * رنگ زمینه در هاور عوض نمی‌شود تا عدد کنتراست نشکند.
 */
.megop-tiles{ inline-size:100%; }
.megop-tiles__group{ margin-block-end:1.4rem; }
.megop-tiles__group:last-child{ margin-block-end:0; }
.megop-tiles__head{ display:flex; align-items:center; gap:.6rem; margin-block-end:.6rem; }
.megop-tiles__dot{ inline-size:14px; block-size:14px; border-radius:4px; flex:0 0 auto; }
.megop-tiles__head b{ font-size:1rem; font-weight:700; color:var(--mg-k-deep); line-height:1.7; }
.megop-tiles__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.megop-tiles__tile{
  flex:0 0 calc(25% - 7.5px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-block-size:4rem; padding:.75rem .9rem; border-radius:14px;
  text-decoration:none; font-weight:700; font-size:.95rem; line-height:1.55;
  transition:transform .16s ease, box-shadow .16s ease;
}
.megop-tiles .mgt-1 .megop-tiles__tile{ background:var(--mg-k-deep);   color:#fff; }
.megop-tiles .mgt-2 .megop-tiles__tile{ background:var(--mg-k-ink);    color:#fff; }
.megop-tiles .mgt-3 .megop-tiles__tile{ background:var(--mg-k-brand);  color:var(--mg-k-text); }
.megop-tiles .mgt-4 .megop-tiles__tile{ background:var(--mg-s-accent); color:var(--mg-k-text); }
.megop-tiles .mgt-5 .megop-tiles__tile{ background:var(--mg-s-text);   color:#fff; }
.megop-tiles .mgt-1 .megop-tiles__dot{ background:var(--mg-k-deep); }
.megop-tiles .mgt-2 .megop-tiles__dot{ background:var(--mg-k-ink); }
.megop-tiles .mgt-3 .megop-tiles__dot{ background:var(--mg-k-brand); }
.megop-tiles .mgt-4 .megop-tiles__dot{ background:var(--mg-s-accent); }
.megop-tiles .mgt-5 .megop-tiles__dot{ background:var(--mg-s-text); }@media (hover:hover){
  .megop-tiles__tile:hover{ transform:translateY(-3px); }
  .mgt-1 .megop-tiles__tile:hover,
  .mgt-2 .megop-tiles__tile:hover,
  .mgt-5 .megop-tiles__tile:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 8px 18px rgba(0,40,56,.28); }
  .mgt-3 .megop-tiles__tile:hover,
  .mgt-4 .megop-tiles__tile:hover{ box-shadow:inset 0 0 0 2px rgba(0,40,56,.38), 0 8px 18px rgba(0,40,56,.22); }
}
.megop-tiles__tile:active{ transform:translateY(-1px); }
.megop-tiles__tile:focus-visible{ outline:3px solid var(--mg-focus); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .megop-tiles__tile{ transition:none; }
  .megop-tiles__tile:hover,
  .megop-tiles__tile:active{ transform:none; }
}
@media (max-width:767px){
  .megop-tiles__head b{ font-size:.85rem; }
  .megop-tiles__row{ gap:8px; }
  .megop-tiles__tile{
    flex:0 0 calc(50% - 4px);
    font-size:.8rem; min-block-size:3.4rem; padding:.55rem .6rem;
    border-radius:12px; line-height:1.5;
  }
}
@media (max-width:400px){
  .megop-tiles__tile{ font-size:.74rem; min-block-size:3.1rem; padding:.5rem .55rem; }
}

/* ══════════ ۱۷ · ردیف کنترل‌های هدر در دسکتاپ ══════════
 * بخش ۵ فقط زیر ۱۰۲۴ پیکسل را درست کرده بود. در دسکتاپ سه کنترلِ
 * هدر به هم چسبیده و ناهم‌تراز بودند. سه علت داشت :
 *   ۱. کانتینر 167ee6a4 هیچ gap نداشت
 *   ۲. سه اندازهٔ متفاوت : دکمهٔ حساب با پدینگ ۱۰ ، آیکون تماس ۲۵ ، جستجو ۴۰
 *   ۳. دو تایشان margin-top دستی ۷ و ۶ پیکسلی داشتند که مرکزها را جابه‌جا می‌کرد
 * هر سه حالا ارتفاع ۴۰ پیکسل و شعاع ۵ پیکسلی دارند ، همان عددِ خودِ دکمهٔ جستجو.
 */
@media (min-width:1025px){
  .elementor-location-header .elementor-element-167ee6a4{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:nowrap;
    column-gap:.5rem;
  }
  .elementor-location-header .elementor-element-167ee6a4 > .elementor-widget{
    margin:0 !important;
    align-self:center;
    flex:0 0 auto;
    inline-size:auto !important;
  }
  .elementor-location-header .elementor-element-167ee6a4 .elementor-widget-container,
  .elementor-location-header .elementor-element-167ee6a4 .elementor-icon-wrapper,
  .elementor-location-header .elementor-element-167ee6a4 .e-font-icon-svg-container{
    margin:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:0;
  }
  .elementor-location-header .elementor-element-167ee6a4 .elementor-icon,
  .elementor-location-header .elementor-element-167ee6a4 .elementor-search-form__toggle,
  .elementor-location-header .elementor-element-167ee6a4 .elementor-button{
    block-size:2.5rem;
    min-block-size:2.5rem;
    border-radius:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding-block:0;
    margin:0;
  }
  .elementor-location-header .elementor-element-167ee6a4 .elementor-icon,
  .elementor-location-header .elementor-element-167ee6a4 .elementor-search-form__toggle{
    inline-size:2.5rem;
    flex:0 0 auto;
  }
}