برای اطمینان از اینکه خروجی دقیقاً مطابق با درخواست شما در ویرایشگر بلوک و کلاسیک وردپرس یا هر سیستم مدیریت محتوای دیگری به درستی نمایش داده شود، من ساختار HTML و CSS لازم را برای هر بخش توضیح می‌دهم. شما می‌توانید این کدهای CSS را در بخش “سفارشی‌سازی” قالب خود یا در یک فایل CSS سفارشی اضافه کنید تا طراحی منحصر به فرد مورد نظر اعمال شود. سپس، محتوای HTML را مستقیماً کپی کنید.

**نکات مهم برای پیاده‌سازی طراحی:**

1. **فونت:** پیشنهاد می‌شود از فونت‌های استاندارد وب مانند `Vazirmatn` (اگر نصب شده باشد) یا یک فونت `sans-serif` خوانا برای متن فارسی استفاده کنید.
2. **رنگ‌بندی:**
* **پس‌زمینه کلی:** `background-color: #f8f9fa;` (خاکستری روشن)
* **رنگ متن اصلی:** `color: #333333;` (خاکستری تیره)
* **رنگ تیترها:** `color: #1A237E;` (آبی تیره، نزدیک به سرمه‌ای)
* **رنگ تاکیدی/هایلایت:** `color: #2196F3;` (آبی روشن‌تر)
* **باکس‌های اطلاعاتی (اینفوگرافیک‌ها):** `background-color: #e3f2fd;` (آبی بسیار روشن) با `border-left: 5px solid #2196F3;`
* **خط جداکننده یا بولت پوینت‌های خاص:** `color: #4CAF50;` (سبز)

—

تحلیل داده پایان نامه برای دانشجویان مدیریت فناوری

—

**راهنمای استفاده و CSS برای ظاهر منحصر به فرد (در فایل CSS قالب یا بخش سفارشی‌سازی CSS):**

برای اینکه طراحی به بهترین شکل نمایش داده شود، کدهای CSS زیر را به فایل `style.css` قالب خود یا در بخش “CSS اضافی” (Additional CSS) در تنظیمات سفارشی‌سازی قالب وردپرس اضافه کنید. این کدها تضمین می‌کنند که تمام ویژگی‌های بصری و واکنش‌گرایی به درستی اعمال شوند.

“`css
/* General Body Styles */
body {
font-family: ‘Vazirmatn’, sans-serif; /* Fallback to generic sans-serif if Vazirmatn is not loaded */
font-size: 1.1em;
line-height: 1.8;
color: #333333;
background-color: #f8f9fa; /* Light grey background for the whole page */
direction: rtl; /* For Persian text alignment */
text-align: right; /* Ensure text aligns to the right */
}

/* Main Content Wrapper */
.main-content-wrapper {
max-width: 900px;
margin: 0 auto; /* Center the content */
padding: 20px;
background-color: #ffffff; /* White background for the article content */
box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
border-radius: 10px; /* Slightly rounded corners */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #1A237E; /* Dark professional blue for all headings */
text-align: right;
line-height: 1.3;
}

h1 {
font-size: 2.5em; /* Larger for main title */
font-weight: 700;
margin-bottom: 30px;
text-align: center; /* Center align main title */
}

h2 {
font-size: 2em;
font-weight: 600;
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 2px solid #2196F3; /* Accent blue underline */
padding-bottom: 10px;
}

h3 {
font-size: 1.5em;
font-weight: 600;
margin-top: 30px;
margin-bottom: 15px;
}

/* Paragraphs */
p {
margin-bottom: 20px;
text-align: justify; /* Justify text for better readability */
}

/* Lists */
ul {
list-style-type: none; /* Remove default bullets */
padding-left: 0;
margin-bottom: 20px;
}

ul li {
margin-bottom: 10px;
padding-left: 25px; /* Space for custom bullet */
position: relative;
text-align: right;
}

ul li span.custom-bullet {
color: #2196F3; /* Accent blue for custom bullets */
position: absolute;
right: 0; /* Align custom bullet to the right for RTL */
}

/* Custom bullet for general lists */
ul:not([style*=”list-style-type: none;”]) li::before {
content: “•”; /* Standard bullet for general ul */
color: #4CAF50; /* Green color for these bullets */
font-size: 1.2em;
position: absolute;
right: 0;
top: -2px;
}

/* Infographic-like boxes */
.info-box-blue {
background-color: #e3f2fd; /* Very light blue background */
border-right: 5px solid #2196F3; /* Accent blue left border (right for RTL) */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
text-align: right;
}

.info-box-yellow {
background-color: #fffde7; /* Very light yellow background */
border-right: 5px solid #ffc107; /* Orange accent left border (right for RTL) */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
text-align: right;
}

.info-box-blue h4, .info-box-yellow h4 {
color: #1A237E;
margin-bottom: 15px;
}

.info-box-blue li, .info-box-yellow li {
margin-bottom: 15px;
text-align: right;
}

.info-box-blue li strong, .info-box-yellow li strong {
color: #2196F3; /* Accent blue for strong text in boxes */
display: block; /* Ensure strong tag takes full width */
margin-bottom: 5px;
}

.info-box-blue li span, .info-box-yellow li span {
display: block;
margin-top: 5px;
font-size: 0.95em;
color: #555;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
direction: rtl;
text-align: right;
border: 1px solid #ddd; /* Light border around the table */
}

table th, table td {
padding: 12px;
border: 1px solid #ddd;
text-align: right; /* Ensure text aligns right within cells */
}

table thead {
background-color: #f2f2f2; /* Light grey background for table header */
}

table th {
font-weight: 600;
color: #1A237E;
}

/* Responsive adjustments */
@media (max-width: 768px) {
body {
font-size: 1em; /* Slightly smaller font on mobile */
}

.main-content-wrapper {
padding: 15px;
margin: 0 10px; /* Smaller side margins on mobile */
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.7em;
}

h3 {
font-size: 1.3em;
}

/* Ensure tables are scrollable on small screens */
div[style*=”overflow-x: auto;”] {
width: 100%;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
.info-box-blue, .info-box-yellow {
padding: 15px;
}
ul li {
padding-right: 20px;
}
}
“`

**نحوه کپی و استفاده:**

1. **CSS:** کد CSS بالا را در بخش “CSS اضافی” (Additional CSS) در ویرایشگر سفارشی‌سازی قالب وردپرس یا در فایل `style.css` قالب خود قرار دهید.
2. **HTML:** تمام محتوای مقاله، از `

` تا انتهای `