/*
* طراحی اختصاصی و کاملا ریسپانسیو برای نمایش در ویرایشگر بلوک و کلاسیک
* تمامی تنظیمات فونت، رنگ، اندازه و چیدمان برای هماهنگی با موبایل، تبلت، لپ‌تاپ و تلویزیون بهینه‌سازی شده است.
* فونت اصلی Vazirmatn در نظر گرفته شده است؛ در صورت عدم بارگذاری، از فونت‌های سیستمی جایگزین استفاده می‌شود.
*/

/* ایمپورت فونت Vazirmatn (در صورتی که در ویرایشگر بلوک پشتیبانی شود) */
/* @import url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.0.3/vazirmatn-font-face.css’); */
/* برای اطمینان از نمایش صحیح در ویرایشگر بلوک بدون نیاز به بارگذاری خارجی، بهتر است به فونت‌های سیستمی تکیه شود یا فونت از طریق خود سایت کاربر بارگذاری گردد. */

body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Geneva’, sans-serif; /* فونت اصلی با جایگزین‌های سیستمی */
margin: 0;
padding: 0;
background-color: #f8f9fa; /* پس‌زمینه روشن برای کل صفحه */
direction: rtl; /* جهت راست به چپ برای متن فارسی */
text-align: right;
color: #333; /* رنگ متن اصلی */
}

/* کانتینر اصلی مقاله */
.article-container {
max-width: 1000px; /* حداکثر عرض برای نمایش بهینه در دسکتاپ */
margin: 30px auto; /* فاصله از بالا و پایین و وسط چین */
padding: 30px;
background-color: #ffffff;
border-radius: 12px; /* گوشه‌های گرد */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* سایه زیبا */
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
transition: all 0.3s ease; /* انیمیشن نرم برای تغییرات */
}

/* ریسپانسیو برای تبلت و موبایل */
@media (max-width: 768px) {
.article-container {
margin: 15px; /* کاهش حاشیه در صفحات کوچک‌تر */
padding: 20px;
border-radius: 8px;
}
}

/* هدینگ H1 – عنوان اصلی مقاله */
h1 {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
font-size: 2.8em; /* اندازه فونت بزرگ */
font-weight: 800; /* ضخامت فوق‌العاده */
color: #004AAD; /* آبی تیره سازمانی */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
position: relative;
letter-spacing: -0.5px; /* کمی فاصله کمتر بین حروف */
}
h1::after { /* خط زیر عنوان H1 */
content: ”;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: #FFC107; /* طلایی رنگ مکمل */
border-radius: 2px;
}
@media (max-width: 768px) { /* ریسپانسیو H1 */
h1 { font-size: 2.2em; margin-bottom: 30px; }
}
@media (max-width: 480px) { /* ریسپانسیو H1 برای موبایل */
h1 { font-size: 1.8em; margin-bottom: 25px; }
}

/* هدینگ H2 – بخش‌های اصلی مقاله */
h2 {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
font-size: 2.1em;
font-weight: 700; /* ضخامت بالا */
color: #0056B3; /* آبی متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding-right: 15px;
border-right: 5px solid #007BFF; /* خط آبی کناری برای تاکید */
line-height: 1.4;
}
@media (max-width: 768px) { /* ریسپانسیو H2 */
h2 { font-size: 1.8em; margin-top: 40px; margin-bottom: 20px; padding-right: 10px; border-right-width: 4px; }
}
@media (max-width: 480px) { /* ریسپانسیو H2 برای موبایل */
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; padding-right: 8px; border-right-width: 3px; }
}

/* هدینگ H3 – زیربخش‌ها */
h3 {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
font-size: 1.6em;
font-weight: 600; /* ضخامت متوسط رو به بالا */
color: #007BFF; /* آبی اصلی */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 10px;
border-right: 3px solid #6c757d; /* خط خاکستری کناری */
}
@media (max-width: 768px) { /* ریسپانسیو H3 */
h3 { font-size: 1.4em; margin-top: 30px; margin-bottom: 15px; padding-right: 8px; border-right-width: 2px; }
}
@media (max-width: 480px) { /* ریسپانسیو H3 برای موبایل */
h3 { font-size: 1.2em; margin-top: 25px; margin-bottom: 10px; padding-right: 6px; border-right-width: 2px; }
}

/* پاراگراف‌ها */
p {
margin-bottom: 1.5em;
text-align: justify; /* تراز از دو طرف */
}

/* لیست‌ها (لیست نامرتب) */
ul {
margin: 1.5em 0;
padding-right: 25px; /* فاصله از راست برای نمایش گلوله */
list-style: none; /* حذف استایل پیش‌فرض */
}
ul li {
margin-bottom: 0.8em;
line-height: 1.7;
position: relative;
}
ul li::before { /* استایل گلوله سفارشی */
content: “•”;
color: #007BFF; /* رنگ آبی برای گلوله */
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: -1em; /* تنظیم موقعیت گلوله */
position: absolute;
right: 0; /* چسباندن گلوله به راست */
top: 0;
}
ul li { padding-right: 20px; } /* فاصله از گلوله */

/* لیست‌ها (لیست مرتب) */
ol {
margin: 1.5em 0;
padding-right: 0; /* حذف فاصله پیش‌فرض */
list-style: none; /* حذف استایل پیش‌فرض */
}
ol li {
counter-increment: list-counter; /* شمارنده برای لیست مرتب */
position: relative;
margin-bottom: 0.8em;
line-height: 1.7;
padding-right: 35px; /* فاصله از عدد */
}
ol li::before { /* استایل عدد سفارشی */
content: counter(list-counter) “.”;
color: #007BFF;
font-weight: bold;
position: absolute;
right: 0; /* چسباندن عدد به راست */
top: 0;
width: 30px;
text-align: right;
}

/* فهرست مطالب */
.table-of-contents {
background-color: #e9f5ff; /* پس‌زمینه آبی روشن */
border-right: 4px solid #007BFF; /* خط آبی در سمت راست */
border-radius: 8px;
padding: 25px;
margin: 40px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.table-of-contents h3 {
color: #004AAD;
margin-top: 0;
margin-bottom: 15px;
border-right: none;
padding-right: 0;
font-size: 1.5em;
text-align: center; /* عنوان فهرست وسط چین */
}
.table-of-contents ul {
list-style: none;
padding-right: 0;
margin: 0;
}
.table-of-contents li {
margin-bottom: 10px;
position: relative;
}
.table-of-contents li a {
text-decoration: none;
color: #0056B3;
font-weight: 500;
display: block;
padding: 8px 10px;
transition: all 0.3s ease;
border-radius: 5px;
}
.table-of-contents li a:hover {
background-color: #d1ecf1; /* تغییر رنگ پس‌زمینه در هاور */
color: #004AAD;
padding-right: 15px; /* افکت حرکت به راست */
}
.table-of-contents ul li::before { /* گلوله سفارشی برای فهرست مطالب */
content: ’25C6′; /* الماس کوچک */
color: #007BFF;
font-size: 0.7em;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-right: 5px;
}
@media (max-width: 480px) { /* ریسپانسیو فهرست مطالب */
.table-of-contents { padding: 15px; margin: 30px 0; }
.table-of-contents h3 { font-size: 1.3em; margin-bottom: 10px; }
.table-of-contents li a { padding: 6px 8px; font-size: 0.9em; }
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 30px 0;
background-color: #fdfdfd;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
border-radius: 10px;
overflow: hidden; /* تضمین نمایش گوشه‌های گرد */
}
th, td {
border: 1px solid #dee2e6;
padding: 15px;
text-align: center;
}
th {
background-color: #007BFF;
color: #ffffff;
font-weight: 600;
font-size: 1.1em;
}
tr:nth-child(even) { /* ردیف‌های زوج */
background-color: #f2f7fc; /* پس‌زمینه روشن‌تر برای خطوط زوج */
}
td {
color: #555;
}
table caption { /* عنوان جدول */
caption-side: top;
text-align: center;
margin-bottom: 15px;
font-size: 1.2em;
font-weight: 600;
color: #004AAD;
}
@media (max-width: 600px) { /* ریسپانسیو جدول */
table, th, td { font-size: 0.9em; padding: 10px; }
table caption { font-size: 1.1em; margin-bottom: 10px; }
}

/* جعبه‌های هایلایت/کال‌اوت */
.highlight-box {
background-color: #e7f3ff; /* آبی بسیار روشن */
border-right: 5px solid #007BFF;
padding: 20px 25px;
margin: 30px 0;
border-radius: 8px;
color: #004AAD;
font-size: 1.1em;
font-weight: 500;
display: flex;
align-items: center; /* تراز عمودی */
gap: 15px; /* فاصله بین آیکون و متن */
}
.highlight-box::before { /* آیکون لامپ */
content: ‘💡’;
font-size: 1.8em;
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}
@media (max-width: 600px) { /* ریسپانسیو جعبه هایلایت */
.highlight-box { padding: 15px 20px; font-size: 1em; gap: 10px; }
.highlight-box::before { font-size: 1.5em; }
}

/* اینفوگرافیک جایگزین – “نقشه راه موفقیت پایان‌نامه” */
.roadmap-section {
margin: 60px 0;
text-align: center;
}
.roadmap-section h2 {
text-align: center;
border-right: none;
padding-right: 0;
margin-bottom: 40px;
color: #004AAD;
}
.roadmap-grid {
display: flex;
flex-wrap: wrap; /* اجازه شکستن به خط بعدی */
justify-content: center; /* وسط چین کردن آیتم‌ها */
gap: 25px; /* فاصله بین آیتم‌ها */
margin-top: 30px;
}
.roadmap-item {
background-color: #e5f1ff; /* پس‌زمینه آبی روشن */
border: 1px solid #b3d9ff;
border-radius: 12px;
padding: 25px;
width: calc(33% – 25px); /* سه آیتم در هر ردیف (با در نظر گرفتن gap) */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن هاور */
position: relative;
overflow: hidden;
min-height: 200px; /* ارتفاع ثابت برای زیبایی */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.roadmap-item:hover {
transform: translateY(-8px); /* حرکت به بالا در هاور */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.roadmap-item::before { /* المان دکوراتیو در گوشه */
content: ”;
position: absolute;
top: -10px;
right: -10px;
width: 40px;
height: 40px;
background-color: #007BFF;
transform: rotate(45deg);
opacity: 0.1;
}

.roadmap-icon { /* آیکون‌های اینفوگرافیک */
font-size: 3.5em;
color: #007BFF;
margin-bottom: 15px;
line-height: 1;
}
.roadmap-item h4 {
font-size: 1.3em;
color: #004AAD;
margin-bottom: 10px;
font-weight: 700;
}
.roadmap-item p {
font-size: 0.95em;
color: #555;
margin: 0;
text-align: center;
}

/* ریسپانسیو گرید اینفوگرافیک */
@media (max-width: 992px) { /* دو آیتم در هر ردیف برای تبلت */
.roadmap-item {
width: calc(50% – 25px);
min-height: 180px;
}
.roadmap-icon { font-size: 3em; }
.roadmap-item h4 { font-size: 1.2em; }
}
@media (max-width: 600px) { /* یک آیتم در هر ردیف برای موبایل */
.roadmap-item {
width: calc(100% – 25px);
min-height: 160px;
}
.roadmap-icon { font-size: 2.5em; }
.roadmap-item h4 { font-size: 1.1em; }
}

/* بخش سوالات متداول (FAQ) */
.faq-section {
margin: 50px 0;
background-color: #fdfefe;
border-top: 3px solid #FFC107; /* خط طلایی در بالا */
padding-top: 30px;
border-radius: 8px;
}
.faq-item {
margin-bottom: 25px;
background-color: #f7fbff;
border-left: 5px solid #007BFF; /* خط آبی در سمت چپ */
border-radius: 8px;
padding: 20px 25px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.faq-item h4 {
color: #004AAD;
font-size: 1.3em;
margin-top: 0;
margin-bottom: 10px;
font-weight: 600;
display: flex;
align-items: center;
}
.faq-item h4::before { /* آیکون سوال */
content: ‘❓’;
margin-left: 10px;
font-size: 1.2em;
flex-shrink: 0;
}
.faq-item p {
color: #555;
margin-top: 0;
margin-bottom: 0;
}
@media (max-width: 600px) { /* ریسپانسیو FAQ */
.faq-item { padding: 15px 20px; margin-bottom: 20px; }
.faq-item h4 { font-size: 1.2em; }
.faq-item h4::before { font-size: 1em; margin-left: 8px; }
.faq-item p { font-size: 0.95em; }
}

/* دکمه Call to Action (نامحسوس و آموزشی) */
.cta-button {
display: block;
width: fit-content; /* عرض متناسب با محتوا */
margin: 40px auto 20px auto; /* وسط چین */
padding: 15px 35px;
background-color: #FFC107; /* طلایی رنگ مکمل */
color: #004AAD; /* آبی تیره */
text-decoration: none;
border-radius: 8px;
font-size: 1.2em;
font-weight: 700;
transition: background-color 0.3s ease, transform 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cta-button:hover {
background-color: #e0a800;
transform: translateY(-3px); /* افکت حرکت به بالا در هاور */
}
@media (max-width: 600px) { /* ریسپانسیو CTA */
.cta-button { padding: 12px 25px; font-size: 1.1em; margin: 30px auto 15px auto; }
}

/* استایل لینک‌ها */
a {
color: #007BFF;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #004AAD;
text-decoration: underline;
}