/* =========================================================
   1) متغیرهای اصلی رنگ و سایه
   این بخش در ابتدای فایل می‌آید و برای مدیریت راحت‌تر رنگ‌هاست.
   اگر خواستید رنگ کل سایت عوض شود، اول از همه اینجا را تغییر دهید.
   ========================================================= */
:root {
  --bg: #0f172a; /* رنگ اصلی پس‌زمینه تیره */
  --bg-soft: #111827; /* رنگ نرم‌تر برای بخش‌هایی مثل منوی موبایل */
  --card: #1e293b; /* رنگ پایه کارت‌ها */
  --text: #e5e7eb; /* رنگ متن اصلی */
  --muted: #94a3b8; /* رنگ متن‌های کم‌اهمیت‌تر */
  --primary: #22c55e; /* رنگ اصلی برند / دکمه‌های سبز */
  --primary-dark: #16a34a; /* رنگ هاور دکمه سبز */
  --border: rgba(255,255,255,0.08); /* رنگ خط مرزی شفاف */
  --white: #ffffff; /* رنگ سفید */
  --shadow: 0 20px 60px rgba(0,0,0,0.25); /* سایه عمومی کارت‌ها */
}

/* =========================================================
   2) ریست اولیه کل صفحه
   برای اینکه مرورگرها فاصله‌های پیش‌فرض نگذارند
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================================
   3) رفتار اسکرول نرم
   وقتی روی منو کلیک می‌کنید، نرم به بخش مربوطه می‌رود
   ========================================================= */
html {
  scroll-behavior: smooth;
}

/* =========================================================
   4) تنظیمات کلی بدنه سایت
   فونت، رنگ نوشته‌ها، پس‌زمینه کلی، فاصله خطوط
   ========================================================= */
body {
  font-family: "Vazirmatn", sans-serif;
  background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
  color: var(--text);
  line-height: 1.8;
}

/* =========================================================
   5) تنظیمات کلی لینک‌ها
   خط زیر لینک حذف می‌شود و رنگ از والد به ارث می‌رسد
   ========================================================= */
a {
  text-decoration: none;
  color: inherit;
}

/* =========================================================
   6) کانتینر اصلی
   این کلاس عرض محتوا را محدود می‌کند و آن را وسط صفحه می‌آورد
   تقریباً در همه بخش‌ها استفاده شده
   ========================================================= */
.container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* =========================================================
   7) هدر سایت
   همان نوار بالای صفحه که لوگو، منو و دکمه داخل آن است
   sticky یعنی هنگام اسکرول بالای صفحه می‌ماند
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: rgba(15, 23, 42, 0.78);
  border-bottom: 1px solid var(--border);
}

/* =========================================================
   8) چیدمان داخلی هدر
   لوگو، منو و دکمه را در یک ردیف قرار می‌دهد
   ========================================================= */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 20px;
}

/* =========================================================
   9) لوگو
   لوگوی متنی سایت: حاجی حسینی + Digital Marketing
   ========================================================= */
.logo {
  display: flex;
  flex-direction: column;
  font-weight: 800;
}

/* متن اصلی لوگو */
.logo span {
  font-size: 1.1rem;
  color: var(--white);
}

/* متن کوچک زیر لوگو */
.logo small {
  color: var(--muted);
  font-size: 0.8rem;
}

/* =========================================================
   10) منوی اصلی هدر
   لینک‌های خدمات، درباره ما، نمونه‌کارها و...
   ========================================================= */
.menu {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* تک‌تک لینک‌های منو */
.menu a {
  color: var(--muted);
  transition: 0.3s;
}

/* افکت هاور روی لینک‌های منو */
.menu a:hover {
  color: var(--white);
}

/* =========================================================
   11) استایل عمومی دکمه‌ها
   هم برای دکمه سبز و هم دکمه ثانویه استفاده می‌شود
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 700;
  transition: 0.3s ease;
  border: 1px solid transparent;
}

/* =========================================================
   12) دکمه اصلی سبز
   مثل "شروع پروژه" یا "مشاهده خدمات"
   ========================================================= */
.btn-primary {
  background: var(--primary);
  color: #052e16;
  box-shadow: 0 10px 30px rgba(34,197,94,0.25);
}

/* حالت هاور دکمه اصلی */
.btn-primary:hover {
  background: var(--primary-dark);
  color: var(--white);
}

/* =========================================================
   13) دکمه ثانویه
   مثل دکمه "درباره ما" در هیرو
   ========================================================= */
.btn-secondary {
  border-color: var(--border);
  color: var(--white);
  background: rgba(255,255,255,0.03);
}

/* حالت هاور دکمه ثانویه */
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   14) بخش هیرو (اولین بخش زیر هدر)
   فاصله بالا و پایین کل بخش
   ========================================================= */
.hero {
  padding: 90px 0 60px;
}

/* =========================================================
   15) چیدمان هیرو
   دو ستونه:
   - متن و دکمه‌ها
   - کارت خدمات شاخص
   ========================================================= */
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 30px;
  align-items: center;
}

/* تیتر اصلی هیرو */
.hero-content h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.35;
  margin: 18px 0;
  color: var(--white);
}

/* متن توضیح زیر تیتر هیرو */
.hero-content p {
  color: var(--muted);
  max-width: 720px;
  font-size: 1.05rem;
}

/* =========================================================
   16) بج / برچسب بالای تیتر هیرو
   مثل: ارائه‌دهنده راهکارهای دیجیتال
   ========================================================= */
.badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(34,197,94,0.12);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.25);
  font-size: 0.9rem;
}

/* =========================================================
   17) محل قرارگیری دکمه‌های هیرو
   ========================================================= */
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* =========================================================
   18) آمارهای هیرو
   3 باکس: سال تجربه، پروژه موفق، خدمات دیجیتال
   ========================================================= */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}

/* =========================================================
   19) استایل مشترک کارت‌ها و باکس‌ها
   این بخش خیلی مهم است:
   به چندین قسمت سایت ظاهر شیشه‌ای/کارت‌مانند می‌دهد
   ========================================================= */
.hero-stats div,
.about-card div,
.feature-box,
.service-card,
.blog-card,
.portfolio-item,
.hero-card-inner,
.contact-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 22px;
}

/* هر آیتم آمار داخل هیرو */
.hero-stats div {
  padding: 18px;
  text-align: center;
}

/* عدد بزرگ داخل باکس آمار */
.hero-stats strong {
  display: block;
  font-size: 1.5rem;
  color: var(--white);
}

/* متن زیر عدد آمار */
.hero-stats span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* =========================================================
   20) کارت کناری هیرو
   همان بخشی که لیست خدمات شاخص را نشان می‌دهد
   ========================================================= */
.hero-card {
  display: flex;
  justify-content: center;
}

/* باکس داخلی کارت هیرو */
.hero-card-inner {
  width: 100%;
  padding: 28px;
}

/* عنوان کارت هیرو */
.hero-card-inner h3 {
  margin-bottom: 18px;
  color: var(--white);
}

/* لیست خدمات شاخص */
.hero-card-inner ul {
  list-style: none;
  display: grid;
  gap: 12px;
}

/* هر آیتم لیست داخل کارت هیرو */
.hero-card-inner li {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  color: var(--text);
}

/* =========================================================
   21) فاصله عمومی سکشن‌ها
   برای features و sectionهای مختلف
   ========================================================= */
.features,
.section {
  padding: 70px 0;
}

/* =========================================================
   22) گریدهای اصلی صفحه
   برای ویژگی‌ها، خدمات، مقالات و نمونه‌کارها
   ========================================================= */
.feature-grid,
.services-grid,
.blog-grid,
.portfolio-grid {
  display: grid;
  gap: 20px;
}

/* ویژگی‌ها در 3 ستون */
.feature-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* پدینگ داخلی کارت‌های ویژگی، خدمات و مقاله */
.feature-box,
.service-card,
.blog-card {
  padding: 24px;
}

/* تیتر کارت‌های ویژگی، خدمات و مقاله */
.feature-box h3,
.service-card h3,
.blog-card h3 {
  margin-bottom: 10px;
  color: var(--white);
}

/* متن توضیحی کارت‌ها و متن‌های توضیحی دیگر */
.feature-box p,
.service-card p,
.blog-card p,
.about-text p,
.contact-box p {
  color: var(--muted);
}

/* =========================================================
   23) عنوان هر سکشن
   مثل خدمات ما / درباره ما / نمونه‌کارها
   ========================================================= */
.section-title {
  margin-bottom: 28px;
}

/* متن کوچک بالای عنوان */
.section-title span {
  display: inline-block;
  color: #86efac;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

/* عنوان اصلی هر سکشن */
.section-title h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  color: var(--white);
}

/* =========================================================
   24) سکشن با پس‌زمینه متفاوت
   برای تنوع بصری در بعضی بخش‌ها مثل About و Articles
   ========================================================= */
.alt-section {
  background: rgba(255,255,255,0.02);
}

/* =========================================================
   25) بخش درباره ما
   دو ستون:
   - متن
   - کارت‌های مهارتی
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: center;
}

/* شبکه کارت‌های داخل About */
.about-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* هر باکس داخل about-card */
.about-card div {
  padding: 24px;
  text-align: center;
}

/* تیتر بزرگ هر باکس مثل SEO یا +20 */
.about-card strong {
  display: block;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 8px;
}

/* =========================================================
   26) بخش نمونه‌کارها
   4 ستون کنار هم
   ========================================================= */
.portfolio-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* هر آیتم نمونه‌کار */
.portfolio-item {
  min-height: 150px;
  display: flex;
  align-items: end;
  padding: 20px;
  color: var(--white);
  font-weight: 700;
  background: linear-gradient(180deg, rgba(34,197,94,0.12), rgba(255,255,255,0.03));
}

/* =========================================================
   27) بخش مقالات
   3 ستون
   ========================================================= */
.blog-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* دسته‌بندی مقاله مثل سئو / دیجیتال مارکتینگ */
.blog-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #86efac;
  font-size: 0.9rem;
}

/* =========================================================
   28) بخش تماس با ما
   چیدمان باکس تماس
   ========================================================= */
.contact-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 30px;
}

/* =========================================================
   29) فوتر
   پایین‌ترین بخش سایت
   ========================================================= */
.footer {
  padding: 24px 0 40px;
  border-top: 1px solid var(--border);
  margin-top: 30px;
}

/* متن داخل فوتر */
.footer-inner {
  text-align: center;
  color: var(--muted);
}

/* =========================================================
   30) ریسپانسیو برای تبلت و صفحات کوچک‌تر از 992px
   اینجا layout از چند ستونه به ساده‌تر تبدیل می‌شود
   ========================================================= */
@media (max-width: 992px) {
  .hero-grid,
  .about-grid,
  .contact-box {
    grid-template-columns: 1fr;
    display: grid;
  }

  .feature-grid,
  .portfolio-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* منوی دسکتاپ در این سایز مخفی می‌شود */
  .menu {
    display: none;
  }
}

/* =========================================================
   31) ریسپانسیو برای موبایل کوچک‌تر از 640px
   همه چیز تک‌ستونه‌تر و ساده‌تر می‌شود
   ========================================================= */
@media (max-width: 640px) {
  .hero-stats,
  .feature-grid,
  .portfolio-grid,
  .blog-grid,
  .about-card {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 50px;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
  }
}

/* =========================================================
   32) حالت هدر هنگام اسکرول
   این کلاس توسط JavaScript اضافه می‌شود
   وقتی کاربر صفحه را اسکرول کند، هدر پررنگ‌تر و جذاب‌تر می‌شود
   ========================================================= */
.header.header-scrolled {
  background: rgba(11, 18, 32, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 10px 0;
}

/* =========================================================
   33) انیمیشن ورود المان‌ها از پایین
   این کلاس هم توسط JavaScript استفاده می‌شود
   ابتدا المان نامرئی است
   ========================================================= */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* وقتی JS کلاس active را اضافه کند، المان ظاهر می‌شود */
.reveal-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   34) دکمه همبرگری موبایل
   در دسکتاپ مخفی است و فقط در موبایل فعال می‌شود
   ========================================================= */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

/* سه خط داخل دکمه همبرگری */
.mobile-menu-btn span {
  width: 100%;
  height: 3px;
  background-color: var(--white);
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* =========================================================
   35) تنظیمات موبایل برای منوی کشویی
   این بخش با JavaScript هماهنگ است
   وقتی کاربر روی همبرگر بزند، کلاس menu-active اضافه می‌شود
   ========================================================= */
@media (max-width: 992px) {
  /* دکمه همبرگری در موبایل نمایش داده می‌شود */
  .mobile-menu-btn {
    display: flex;
  }

  /* منوی موبایل به‌صورت پنل کشویی از سمت راست */
  .menu {
    display: flex;
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--bg-soft);
    flex-direction: column;
    padding: 100px 40px;
    gap: 30px;
    transition: 0.4s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    border-left: 1px solid var(--border);
    z-index: 1000;
  }

  /* وقتی کلاس menu-active اضافه شود، منو وارد صفحه می‌شود */
  .menu.menu-active {
    right: 0;
  }

  /* دکمه "شروع پروژه" در موبایل مخفی می‌شود */
  .nav-btn {
    display: none;
  }

  /* =========================================
     انیمیشن تبدیل همبرگر به ضربدر
     وقتی JS کلاس open را روی دکمه بگذارد
     ========================================= */
  .mobile-menu-btn.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}
/* استایل برای عکس شاخص در کارت‌ها */
.blog-card img {
  width: 100%;
  height: 200px; /* ارتفاع ثابت */
  object-fit: cover; /* جلوگیری از کشیدگی تصویر */
  border-radius: 8px 8px 0 0;
  margin-bottom: 15px;
}
/* استایل جهانی برای تمام عکس‌های شاخص مقالات */
.featured-image {
    width: 100%;           /* عرض کامل کادر */
    aspect-ratio: 16 / 9;  /* نسبت تصویر استاندارد (سینمایی) */
    object-fit: cover;     /* جلوگیری از کش آمدن عکس */
    object-position: center; /* تمرکز روی مرکز عکس */
    border-radius: 15px;
    margin-bottom: 30px;
    display: block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* افکت سایه برای زیبایی بیشتر */
}
<style>
  .article-container { max-width: 900px; margin: 40px auto; padding: 20px; }
  
  /* این کلاس را جایگزین کلاس قبلی کنید */
  .featured-image { 
    width: 100%; 
    aspect-ratio: 16 / 9; /* این مهم‌ترین بخش است: نسبت ۱۶ به ۹ (استاندارد سینمایی) */
    object-fit: cover;    /* عکس را بدون تغییر شکل در کادر جا می‌دهد */
    object-position: center; /* تمرکز عکس را همیشه روی مرکز می‌گذارد */
    border-radius: 15px; 
    margin-bottom: 30px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: block;
  }

  .article-content { line-height: 2.2; font-size: 1.15rem; color: #cbd5e1; }
  .article-content h1 { font-size: 2.5rem; margin-bottom: 10px; color: var(--white); }
  .article-content h2 { font-size: 1.8rem; margin-top: 40px; color: var(--primary); border-right: 5px solid var(--primary); padding-right: 15px; }
  .article-content p { margin-bottom: 25px; text-align: justify; }
  .movie-meta { background: #1e293b; padding: 15px; border-radius: 8px; margin-bottom: 25px; border-right: 4px solid var(--primary); }
  .movie-meta ul { list-style: none; padding-right: 10px; }
  .movie-meta li { margin-bottom: 8px; font-size: 1rem; color: #94a3b8; }
  .movie-meta strong { color: var(--white); }
</style>