“`html

/*
** طراحی واکنش‌گرا و زیبا برای نمایش در ویرایشگر بلوک، کلاسیک، موبایل، تبلت، لپ‌تاپ و تلویزیون **
این استایل‌ها به گونه‌ای طراحی شده‌اند که با کمترین تداخل، محتوا را در اکثر ویرایشگرها به درستی نمایش دهند و تجربه‌ی کاربری مطلوبی را در دستگاه‌های مختلف فراهم کنند.
از ترکیب رنگ‌های تیره و گرم برای ایجاد فضایی سینمایی و دلنشین استفاده شده است.
*/
body {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif; /* فونت پیشنهادی، در صورت عدم وجود از Arial استفاده می‌شود */
margin: 0;
padding: 0;
background-color: #1a1a2e; /* پس‌زمینه‌ی تیره مایل به بنفش/آبی */
color: #e0e0e0; /* رنگ متن روشن */
direction: rtl; /* جهت متن راست به چپ برای فارسی */
line-height: 1.8;
font-size: 1.1em;
}
.container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
background-color: #2a2a3e; /* پس‌زمینه‌ی کمی روشن‌تر برای محتوا */
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* هدینگ‌ها */
h1, h2, h3 {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif;
font-weight: 700; /* ضخامت بیشتر برای هدینگ‌ها */
margin-top: 2em;
margin-bottom: 0.8em;
line-height: 1.3;
}

h1 {
font-size: clamp(2.2em, 5vw, 3.5em); /* سایز فونت واکنش‌گرا برای H1 */
color: #ffbe0b; /* رنگ طلایی/زرد برای H1 */
text-align: center;
padding-bottom: 15px;
border-bottom: 4px solid #fb5607; /* خط زیرین با رنگ نارنجی */
}

h2 {
font-size: clamp(1.8em, 4vw, 2.8em); /* سایز فونت واکنش‌گرا برای H2 */
color: #fb5607; /* رنگ نارنجی پررنگ برای H2 */
border-bottom: 3px solid #ffbe0b; /* خط زیرین با رنگ طلایی */
padding-bottom: 10px;
margin-top: 40px;
}

h3 {
font-size: clamp(1.4em, 3vw, 2em); /* سایز فونت واکنش‌گرا برای H3 */
color: #8338ec; /* رنگ بنفش برای H3 */
margin-top: 25px;
}

p {
margin-bottom: 1.2em;
text-align: justify;
line-height: 1.9;
}

a {
color: #00bfff; /* آبی روشن برای لینک‌ها */
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #00ffff; /* رنگ روشن‌تر هنگام هاور */
text-decoration: underline;
}

ul, ol {
margin-bottom: 1.5em;
padding-right: 25px;
}
li {
margin-bottom: 0.8em;
line-height: 1.7;
}
ul li::before {
content: ‘🎬’; /* آیکون زیبا برای لیست‌ها */
margin-left: 10px;
color: #fb5607;
font-size: 0.9em;
}
ol li {
list-style-type: decimal;
}
ol {
counter-reset: my-counter;
list-style: none; /* حذف نشانگر پیش‌فرض */
padding-right: 0;
}
ol li {
counter-increment: my-counter;
padding-right: 30px;
position: relative;
}
ol li::before {
content: counter(my-counter) “.”;
position: absolute;
right: 0;
top: 0;
font-weight: bold;
color: #ffbe0b;
font-size: 1.1em;
}

/* جدول آموزشی */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
background-color: #3a3a4e; /* پس‌زمینه‌ی تیره برای جدول */
border-radius: 8px;
overflow: hidden; /* برای نمایش صحیح border-radius در سلول‌ها */
}
th, td {
padding: 15px;
text-align: right;
border: 1px solid #4a4a5e; /* خطوط جدول کمی روشن‌تر */
}
th {
background-color: #fb5607; /* پس‌زمینه‌ی نارنجی برای سرتیتر */
color: #ffffff;
font-weight: bold;
font-size: 1.1em;
}
tr:nth-child(even) {
background-color: #303040; /* ردیف‌های زوج با پس‌زمینه‌ی کمی متفاوت */
}
tr:hover {
background-color: #4a4a5e; /* هایلایت ردیف‌ها هنگام هاور */
}

/* بخش “اینفوگرافیک” یا نمونه پایان نامه ارشد (جایگزین بصری زیبا) */
.infographic-block {
background-color: #3a3a4e;
border: 2px dashed #ffbe0b; /* کادر نقطه چین طلایی */
padding: 25px;
margin: 3em 0;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.infographic-block::before {
content: ‘⭐ نمونه پایان‌نامه ارشد سینما ⭐’;
position: absolute;
top: -20px;
right: 20px;
background-color: #8338ec;
color: white;
padding: 8px 15px;
border-radius: 10px;
font-size: 1.1em;
font-weight: bold;
}
.infographic-item {
display: flex;
align-items: flex-start;
gap: 15px;
background-color: #4a4a5e;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.infographic-icon {
font-size: 1.8em;
color: #ffbe0b; /* رنگ آیکون‌ها */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}
.infographic-title {
font-weight: bold;
color: #fb5607; /* رنگ عنوان آیتم */
font-size: 1.15em;
margin-bottom: 5px;
}
.infographic-description {
color: #d0d0d0;
font-size: 0.95em;
line-height: 1.6;
}

/* بخش سوالات متداول */
.faq-container {
margin-top: 3em;
background-color: #3a3a4e;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.faq-item {
margin-bottom: 1.5em;
padding-bottom: 1.5em;
border-bottom: 1px dashed #4a4a5e;
}
.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.faq-question {
font-weight: bold;
color: #ffbe0b;
font-size: 1.2em;
margin-bottom: 0.8em;
}
.faq-answer {
color: #e0e0e0;
line-height: 1.8;
text-align: justify;
}

/* ریسپانسیو بودن کلی */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px;
border-radius: 8px;
}
h1 {
font-size: clamp(1.8em, 7vw, 2.8em);
}
h2 {
font-size: clamp(1.5em, 6vw, 2.2em);
margin-top: 30px;
}
h3 {
font-size: clamp(1.2em, 5vw, 1.8em);
margin-top: 20px;
}
body {
font-size: 1em;
}
p {
margin-bottom: 1em;
line-height: 1.7;
}
table, .infographic-block {
margin: 1.5em 0;
}
th, td {
padding: 10px;
}
.infographic-block::before {
font-size: 1em;
top: -15px;
right: 10px;
padding: 6px 12px;
}
.infographic-item {
flex-direction: column; /* در موبایل آیتم‌ها زیر هم قرار می‌گیرند */
align-items: center;
text-align: center;
gap: 10px;
padding: 12px;
}
.infographic-icon {
margin-bottom: 5px;
}
.infographic-title {
font-size: 1.1em;
margin-bottom: 0;
}
.infographic-description {
font-size: 0.9em;
}
ul li::before {
margin-left: 5px;
}
ol li {
padding-right: 25px;
}
}

@media (max-width: 480px) {
.container {
padding: 10px;
border-radius: 6px;
}
h1 {
font-size: clamp(1.6em, 8vw, 2.5em);
padding-bottom: 10px;
}
h2 {
font-size: clamp(1.3em, 7vw, 2em);
margin-top: 25px;
}
h3 {
font-size: clamp(1.1em, 6vw, 1.6em);
margin-top: 15px;
}
body {
font-size: 0.95em;
}
.infographic-block::before {
font-size: 0.9em;
top: -12px;
right: 8px;
padding: 5px 10px;
}
}

“`