/* Scope: .ms-widesh-hero  —  Lalezar (تیتر), iransans (بدنه) */

/* === Full-bleed بدون فاصله بیرونی === */
.ms-widesh-hero{
  position:relative; overflow:hidden; color:var(--t-on,#fff); isolation:isolate;
  /* قبلی‌ها را حذف کن: width:100vw / margin-left:-50vw / ...  */
  width:100%;  /* حذف هر مارجین بیرونی (از جمله 16px بالا) */
  background:
    radial-gradient(900px 460px at 85% -10%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(135deg, var(--pr-from,#7B3AED) 0%, var(--pr-to,#B235FF) 100%);
}

/* ظرف و گرید */
.msh-container{ max-width:1200px; margin-inline:auto; padding:72px 24px 0; }
.msh-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:32px; align-items:center; }
@media (max-width:1024px){ .msh-grid{ grid-template-columns:1fr; } .msh-container{ padding:56px 20px 0; } }

/* متن و تایپوگرافی */
.msh-title{
  font-family:"Lalezar", system-ui; font-weight:400;
  font-size: clamp(28px, 4.5vw, 48px); line-height:1.15; margin:14px 0 12px;
  text-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.msh-subtitle{
  font-family: iransans, Tahoma, sans-serif;
  font-size: clamp(15px,1.6vw,18px); line-height:1.9; color: rgba(255,255,255,.95);
  margin: 0 0 18px;
}
.msh-chip{
  display:inline-flex; align-items:center; gap:8px; font-family: iransans, Tahoma, sans-serif;
  font-size:13px; background: rgba(255,255,255,.16); padding:8px 12px; border-radius:9999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* CTA (فلش RTL) */
.msh-cta{ display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0 16px; }
.msh-btn{
  --px:18px; --py:12px; display:inline-flex; align-items:center; gap:10px;
  padding:var(--py) var(--px); border-radius:9999px; text-decoration:none; font-weight:700; font-size:15px;
  border:1px solid rgba(255,255,255,.22); color:#fff; font-family: iransans, Tahoma, sans-serif;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 16px 36px rgba(0,0,0,.18);
  will-change: transform;
}
.msh-btn--primary{ background: linear-gradient(135deg, var(--c-cyan,#22D3EE), #7CF4FF); color:#151233; border-color:transparent; }
.msh-btn--primary:hover{ transform: translateY(-2px) scale(1.02); }
.msh-btn--ghost:hover{ background: rgba(255,255,255,.14); transform: translateY(-2px); }

/* بولت‌ها */
.msh-bullets{ display:flex; gap:14px; flex-wrap:wrap; list-style:none; margin:2px 0 0; padding:0; }
.msh-bullets li{
  display:flex; align-items:center; gap:8px; font-size:14px; font-family: iransans, Tahoma, sans-serif;
  background: rgba(255,255,255,.15); padding:8px 12px; border-radius:12px; backdrop-filter: blur(2px);
}
.msh-bullets i{ color: var(--c-cyan,#22D3EE); }

/* موکاپ PNG (هر چقدر بزرگ باشد Fit می‌شود) */
.msh-mock__img{
  width:100%; max-width:100%; height:auto; display:block; object-fit:contain; border-radius:16px;
  box-shadow: 0 18px 46px rgba(21,18,51,.35);
  transform: translateY(12px); opacity:0; /* برای انیمیشن ورود */
}

/* دکور داخلی (بدون تصویر) + حرکت پیوسته */
.msh-decor{ position:absolute; pointer-events:none; z-index:0; }
.msh-decor--dots{
  left:4%; bottom:30%; width:180px; height:120px; opacity:.55;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.6px, transparent 1.6px);
  background-size: 16px 16px; border-radius:12px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.15));
  animation: dots-drift 8s ease-in-out infinite alternate;
}
.msh-decor--ring{
  right:6%; top:14%; width:140px; height:140px; border-radius:50%;
  box-shadow: 0 0 0 12px rgba(255,255,255,.12), 0 0 0 26px rgba(255,255,255,.06);
  animation: ring-float 6s ease-in-out infinite alternate;
}

/* Divider زاویه‌ای چسبیده بدون فاصله بیرونی */
.msh-divider{ position:relative; height:80px; margin:0; z-index:1; }
.msh-divider svg{ width:100%; height:100%; display:block; }

/* انیمیشن نمایان‌شدن متن/تصویر */
.ms-widesh-hero .is-visible{ transform:none !important; opacity:1 !important; transition: all .3s ease-out; }

/* Keyframes حرکت دکور */
@keyframes ring-float{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(0,-6px,0) rotate(2deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes dots-drift{
  0%   { transform: translate3d(0,0,0); background-position: 0 0; }
  100% { transform: translate3d(0,-6px,0); background-position: 16px 8px; }
}

/* کاهش حرکت برای کاربرانی که ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce){
  .msh-decor--ring, .msh-decor--dots{ animation: none; }
}

/* حالت تیره */