/* Basic Reset & Body Styling for Readability */
body {
font-family: ‘Vazirmatn’, sans-serif; /* A modern, readable Persian font */
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #fcfcfc;
}

/* Container for responsiveness */
div[style*=”max-width: 100%”] {
max-width: 900px; /* Optimal width for reading */
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}

/* General Heading Styles – These would be automatically applied by block editor for H1, H2, H3 */
h1, h2, h3 {
font-family: ‘Vazirmatn’, sans-serif;
font-weight: 800; /* Extra bold */
text-align: right;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.4;
display: block; /* Ensures they break line correctly */
overflow-wrap: break-word; /* Prevents long words from breaking layout */
}

h1 {
font-size: 2.5em; /* Large for H1 */
color: #1a4d2e; /* Deep green */
text-align: center;
border-bottom: 3px solid #6c757d; /* Subtle gray underline */
padding-bottom: 15px;
margin-bottom: 40px;
}

h2 {
font-size: 1.8em; /* Substantial for H2 */
font-weight: 700; /* Bold */
color: #0f4c75; /* Dark blue */
border-bottom: 2px solid #a7d9ee; /* Lighter blue underline */
padding-bottom: 10px;
margin-bottom: 25px;
margin-top: 40px;
}

h3 {
font-size: 1.4em; /* Clear for H3 */
font-weight: 600; /* Semi-bold */
color: #2a6f9f; /* Medium blue */
margin-top: 30px;
margin-bottom: 15px;
}

/* Paragraph and List Styles */
p {
font-size: 1.1em;
text-align: justify;
margin-bottom: 1.5em;
line-height: 1.8;
}

ul {
list-style-type: disc;
margin-right: 25px; /* For Persian text */
margin-bottom: 1.5em;
font-size: 1.05em;
line-height: 2;
padding: 0;
}

ul li {
margin-bottom: 10px;
}

/* Boxed Sections for Visual Separation and Color Coding */
div[style*=”background-color: #e0f2f7″] { /* Light blue box */
background-color: #e0f2f7;
border-radius: 15px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
div[style*=”background-color: #f7f7e0″] { /* Light yellow box */
background-color: #f7f7e0;
border-radius: 15px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
div[style*=”background-color: #f0f8ed”] { /* Light green box */
background-color: #f0f8ed;
border-radius: 15px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
div[style*=”background-color: #f7e0e0″] { /* Light red/pink box for infographic */
background-color: #f7e0e0;
border-radius: 15px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
div[style*=”background-color: #e9e0f7″] { /* Light purple box for FAQ */
background-color: #e9e0f7;
border-radius: 15px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Table Styling */
table {
width: 100%;
border-collapse: separate; /* For rounded corners on cells */
border-spacing: 0; /* Important for separate */
margin-bottom: 30px;
font-size: 1.05em;
text-align: right;
background-color: #fff;
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners are visible */
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

th, td {
padding: 15px;
border: 1px solid #ddd;
vertical-align: top;
}

th {
background-color: #7a7a00; /* Dark yellow/olive for table header */
color: #fff;
font-weight: 700;
border-color: #7a7a00;
}

tr:nth-child(even) {
background-color: #f9f9f9; /* Zebra striping */
}

/* Infographic Simulation Styles */
div[style*=”display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px;”] {
/* This is the container for infographic elements */
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
}

div[style*=”border-left: 5px solid”] {
/* Individual infographic boxes */
flex: 1 1 280px; /* Responsive sizing */
min-width: 250px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Specific colors for infographic steps */
div[style*=”background-color: #ffebee”] { border-left-color: #d32f2f; }
div[style*=”background-color: #fff3e0″] { border-left-color: #ef6c00; }
div[style*=”background-color: #e8f5e9″] { border-left-color: #388e3c; }
div[style*=”background-color: #e3f2fd”] { border-left-color: #1976d2; }

/* Responsive Adjustments */
@media (max-width: 768px) {
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.2em; }
p, ul, table, th, td { font-size: 1em; }
div[style*=”max-width: 100%”] { padding: 15px; }
div[style*=”display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px;”] {
flex-direction: column; /* Stack infographic boxes on small screens */
gap: 15px;
}
div[style*=”flex: 1 1 280px”] {
min-width: unset; /* Allow full width */
width: 100%;
}
}
@media (max-width: 480px) {
h1 { font-size: 1.8em; margin-bottom: 25px; }
h2 { font-size: 1.4em; margin-top: 30px; margin-bottom: 20px; }
h3 { font-size: 1.1em; margin-top: 20px; margin-bottom: 10px; }
p, ul, table, th, td { font-size: 0.95em; }
div[style*=”max-width: 100%”] { padding: 10px; }
th, td { padding: 10px; }
.infographic-box { padding: 10px; }
}

“`

**توضیحات تکمیلی برای شما:**

1. **هدینگ‌ها (H1, H2, H3):**
* من در خروجی بالا، برای هر تیتر از تگ‌های `

`، `

` و `

` استفاده کرده‌ام. این تگ‌ها در ویرایشگرهای بلوک (مانند گوتنبرگ وردپرس) یا ویرایشگرهای کلاسیک (مانند TinyMCE) به صورت خودکار به عنوان هدینگ شناسایی می‌شوند و استایل‌های تعریف شده درون آن‌ها (size, weight, color, etc.) را اعمال می‌کنند.
* این روش، دقیقاً منظور شما را برای “فرمت واقعی H1، H2، H3” و “شناسایی خودکار به عنوان هدینگ” برآورده می‌کند.
* **مهم:** اگر ویرایشگر شما به صورت پیش‌فرض استایل‌های خاصی برای H1/H2/H3 دارد، ممکن است استایل‌های درون‌خطی (inline styles) که من استفاده کرده‌ام، بر استایل‌های پیش‌فرض غلبه کنند یا با آن‌ها ترکیب شوند. برای بهترین نتیجه، می‌توانید پس از کپی، استایل‌های درون‌خطی را به CSS خارجی منتقل کنید یا تنظیمات ویرایشگر بلوک را مطابق با سلیقه خود تغییر دهید.

2. **سایز و ضخامت فونت برای هدینگ‌ها:**
* این موارد مستقیماً در تگ‌های `

`، `

` و `

` با `font-size` و `font-weight` تعریف شده‌اند.
* همچنین از فونت ‘Vazirmatn’ استفاده شده که یک فونت استاندارد و خوانا برای فارسی است.

3. **جدول آموزشی استاندارد:**
* جدول با دو ستون برای مقایسه “سطح خدمات” و “تاثیر بر هزینه” ایجاد شده است.
* طراحی جدول شامل هدر رنگی، خطوط تفکیک و ردیف‌های متناوب (zebra striping) برای خوانایی بیشتر است.

4. **طراحی منحصر به فرد، زیبا و رنگ‌بندی:**
* مقاله در بخش‌های مختلف (عوامل موثر، ارزش در برابر هزینه، اینفوگرافیک، سوالات متداول) درون تگ‌های `div` با پس‌زمینه‌های رنگی ملایم و متفاوت قرار گرفته است (مثلاً آبی روشن، زرد روشن، سبز روشن، صورتی روشن، بنفش روشن). این امر باعث تفکیک بصری بخش‌ها و ایجاد یک تجربه کاربری جذاب می‌شود.
* رنگ‌بندی داخل هر بخش نیز با موضوع آن بخش هماهنگ است (مثلاً برای بخش سوالات متداول از طیف بنفش استفاده شده).
* استفاده از `box-shadow` و `border-radius` برای باکس‌ها و جدول، حس مدرن و نرم‌تری به طراحی می‌دهد.

5. **اینفوگرافیک زیبا (جایگزین متنی):**
* از آنجایی که امکان تولید تصویر واقعی اینفوگرافیک در خروجی متنی وجود ندارد، من یک “اینفوگرافیک ذهنی” را با استفاده از ساختارهای `div` و استایل‌های CSS به صورت متنی شبیه‌سازی کرده‌ام.
* هر مرحله از نگارش پروپوزال در یک باکس جداگانه با رنگ پس‌زمینه متفاوت، خط کناری رنگی (که نمادگذاری مرحله است) و آیکون (به شکل ایموجی) قرار داده شده است.
* این ساختار `flex-wrap` دارد تا در دستگاه‌های مختلف، باکس‌ها به صورت افقی یا عمودی چیده شوند و ظاهر مناسبی داشته باشند. این شیوه، اطلاعات را به صورت بصری و جذاب نمایش می‌دهد، درست مانند یک اینفوگرافیک واقعی.

6. **رسپانسیو برای موبایل، تبلت، لپ‌تاپ و تلویزیون:**
* با استفاده از “ (که باید در بخش “ سایت شما قرار گیرد) و همچنین استایل‌های CSS رسپانسیو (`@media queries`) در انتهای کد، اطمینان حاصل می‌شود که محتوا در اندازه‌های مختلف صفحه نمایش به خوبی نمایش داده می‌شود.
* فون سایزها، پدینگ‌ها و مارجین‌ها برای دستگاه‌های کوچک‌تر بهینه شده‌اند.
* باکس‌های اینفوگرافیک در موبایل به صورت عمودی (stack) چیده می‌شوند.
* `max-width: 900px` برای کانتینر اصلی، تضمین می‌کند که در صفحات نمایش بزرگتر نیز متن بیش از حد کشیده نشود و خوانایی حفظ گردد.

7. **محتوای هدف‌محور، عمیق، منظم، باکیفیت و انسان‌نویس:**
* مقاله به طور کامل به سوال اصلی (هزینه و قیمت) پاسخ می‌دهد و تمامی عوامل موثر، طیف قیمت‌گذاری، و ارزش سرمایه‌گذاری را با جزئیات پوشش می‌دهد.
* از ساختار H1، H2، H3 و لیست‌ها و جداول برای سازماندهی اطلاعات استفاده شده تا قابلیت اسکن بالایی داشته باشد.
* لحن مقاله آموزشی، تحلیلی و بدون هیچ‌گونه اشاره به هوش مصنوعی یا تبلیغات است.
* بخش FAQ به صورت هدفمند برای پوشش سوالات رایج و کمک به Featured Snippet طراحی شده است.

8. **کپی در ویرایشگر بلوک و کلاسیک:**
* تمامی کدها (HTML و CSS) در یک بلوک واحد ارائه شده‌اند.
* وقتی این بلوک کد را در ویرایشگر بلوک وردپرس (مانند بلوک HTML سفارشی) یا ویرایشگر کلاسیک (در حالت متنی) کپی کنید، تمام استایل‌ها و ساختارها به درستی اعمال و نمایش داده می‌شوند.

این خروجی تلاش می‌کند تا تمامی خواسته‌های شما را به بهترین شکل ممکن و در چارچوب یک خروجی متنی-کدی برآورده کند.