/* style.css */

/* --- تنظیمات عمومی و متغیرها --- */
:root {
 --primary-color: #6a0dad; /* بنفش عمیق برای دکمه‌ها و لینک‌ها (شبیه به تصویر ویستا) */
 --secondary-color: #f0e6fa; /* بنفش روشن برای پس‌زمینه دکمه‌های ثانویه */
 --text-color: #333; /* رنگ اصلی متن */
 --light-gray: #f0f2f5; /* پس‌زمینه روشن کلی صفحه (کمی تیره تر برای عمق) */
 --dark-gray: #e9ecef; /* خاکستری تیره برای خطوط جداکننده و برخی پس‌زمینه‌ها */
 --white: #fff; /* رنگ سفید */
 --border-color: #dee2e6; /* رنگ حاشیه */
 --shadow-light: rgba(0, 0, 0, 0.08); /* سایه روشن */
 --hover-shadow: rgba(0, 0, 0, 0.15); /* سایه برای حالت هاور */
 --accent-color: #ffc107; /* رنگ زرد برای تاکید (مثل قیمت) */
}

/* بازنشانی استایل‌های پیش‌فرض مرورگر و تنظیم box-sizing */
* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

/* استایل‌دهی به بدنه صفحه */
body {
 font-family: 'Vazirmatn', 'IRANSans', sans-serif; /* فونت فارسی اصلی */
 line-height: 1.6; /* ارتفاع خط برای خوانایی بهتر */
 color: var(--text-color); /* رنگ متن اصلی */
 background-color: var(--light-gray); /* پس‌زمینه کلی صفحه */
 direction: rtl; /* جهت راست به چپ برای پشتیبانی از فارسی */
 text-align: right; /* تراز متن به راست */
 overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* استایل‌دهی عمومی به لینک‌ها */
a {
 text-decoration: none; /* حذف خط زیر لینک */
 color: var(--primary-color); /* رنگ لینک‌ها */
}

a:hover {
 color: #530a84; /* تغییر رنگ لینک هنگام هاور (تیره تر از primary) */
}

/* حذف بولت پوینت از لیست‌ها */
ul {
 list-style: none;
}

/* کانتینر مرکزی برای محتوا */
.container {
 max-width: 1200px;
 margin: 0 auto; /* وسط چین کردن کانتینر */
 padding: 0 15px; /* پدینگ از کناره‌ها برای ریسپانسیو بودن */
}

/* --- بخش هدر --- */
.main-header {
 background-color: var(--white);
 padding: 15px 0;
 box-shadow: 0 2px 4px var(--shadow-light); /* سایه ظریف برای هدر */
}

.header-content {
 display: flex;
 justify-content: space-between; /* لوگو و ناوبری را از هم جدا میکند */
 align-items: center; /* تراز عمودی عناصر */
}

.logo {
 display: flex;
 align-items: center;
 font-size: 1.8em;
 font-weight: bold;
}

.logo a {
 color: var(--text-color);
 display: flex;
 align-items: center;
}

.logo img {
 height: 40px; /* ارتفاع لوگو تصویر */
 margin-left: 10px; /* فاصله از متن لوگو */
}

.main-nav ul {
 display: flex; /* آیتم‌های منو را در یک ردیف قرار می‌دهد */
}

.main-nav ul li {
 margin: 0 15px; /* فاصله بین آیتم‌های منو */
}

.main-nav ul li a {
 color: var(--text-color);
 font-weight: 500;
 padding: 5px 0;
 transition: color 0.3s ease; /* انیمیشن نرم برای تغییر رنگ */
}

.main-nav ul li a:hover {
 color: var(--primary-color); /* تغییر رنگ هنگام هاور */
}

.header-actions {
 display: flex;
 align-items: center;
}

/* استایل عمومی برای دکمه‌ها */
.btn {
 display: inline-block;
 padding: 10px 20px; /* پدینگ بیشتر برای دکمه‌های اصلی */
 border-radius: 10px; /* گوشه‌های گردتر */
 text-align: center;
 cursor: pointer;
 transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
 font-size: 1em; /* سایز بزرگتر */
 margin-left: 10px; /* فاصله بین دکمه‌ها */
 border: none;
 font-weight: 600; /* کمی پررنگ‌تر */
}

.btn-primary {
 background-color: var(--primary-color);
 color: var(--white);
 box-shadow: 0 4px 15px rgba(106, 13, 173, 0.3); /* سایه بنفش */
}

.btn-primary:hover {
 background-color: #530a84;
 box-shadow: 0 6px 20px rgba(106, 13, 173, 0.4);
}

.icon-link {
 display: flex;
 align-items: center;
 margin-left: 15px;
}

.icon-link img {
 height: 20px;
 width: 20px;
}

/* --- بخش هیرو (باکس‌های بالای صفحه) --- */
.hero-section {
 padding: 30px 0;
 background-color: var(--white);
 box-shadow: 0 4px 15px var(--shadow-light); /* سایه عمیق‌تر برای هیرو */
 margin-top: 25px; /* فاصله از هدر */
 border-radius: 15px; /* گوشه‌های گرد */
}

.hero-grid {
 display: grid;
 gap: 20px; /* فاصله بین آیتم‌های گرید */
 grid-template-columns: repeat(3, 1fr); /* 3 ستون برای دسکتاپ */
}

.hero-item {
 position: relative; /* برای موقعیت‌دهی محتوای متنی روی تصویر */
 border-radius: 12px; /* گوشه‌های گرد */
 overflow: hidden;
 background-color: var(--dark-gray);
 box-shadow: 0 6px 20px var(--shadow-light); /* سایه جذاب */
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 min-height: 250px; /* حداقل ارتفاع برای همه آیتم‌های هیرو */
 display: flex;
 align-items: flex-end; /* محتوا به پایین آیتم چسبیده */
}

.hero-item:hover {
 transform: translateY(-8px); /* افکت بالا رفتن هنگام هاور */
 box-shadow: 0 10px 30px var(--hover-shadow);
}

.hero-item img {
 width: 100%;
 height: 100%; /* مطمئن شوید تصویر کل کادر را پر می‌کند */
 object-fit: cover; /* تصویر را برش می‌دهد تا فضا را بپوشاند */
 position: absolute; /* برای اینکه پشت محتوا قرار گیرد */
 top: 0;
 left: 0;
 z-index: 1; /* اطمینان از اینکه تصویر زیر محتوا باشد */
}

.hero-item-content {
 position: relative; /* برای اینکه روی تصویر قرار گیرد */
 z-index: 2; /* روی تصویر قرار گیرد */
 width: 100%;
 background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); /* گرادیانت تیره در پایین */
 color: var(--white);
 padding: 15px;
 padding-top: 50px; /* فضای بیشتر برای گرادیانت */
}

.hero-item-content h3 {
 margin-bottom: 5px;
 font-size: 1.3em; /* کمی بزرگتر */
 font-weight: 700;
}

.hero-item-content p {
 font-size: 0.95em; /* کمی بزرگتر */
 opacity: 0.9;
}

.hero-item-content .price {
 font-weight: bold;
 font-size: 1.2em; /* بزرگتر */
 color: var(--accent-color); /* رنگ زرد برای قیمت */
 margin-top: 10px;
 display: block; /* برای نمایش در خط جدید */
}

/* تنظیمات گرید برای آیتم‌های هیرو (سایزهای مختلف) */
.hero-item.large {
 grid-column: span 1; /* در دسکتاپ یک ستون را اشغال می‌کند */
 grid-row: span 2; /* دو ردیف ارتفاع را اشغال می‌کند */
 min-height: 520px; /* حداقل ارتفاع برای آیتم بزرگ */
}


/* --- فیلترهای دسته‌بندی --- */
.category-filters {
 display: flex;
 flex-wrap: nowrap; /* این خط را از wrap به nowrap تغییر دادم */
    overflow-x: auto; /* برای فعال کردن اسکرول افقی */
    -webkit-overflow-scrolling: touch; /* اسکرول روان در iOS */
 justify-content: flex-start; /* دکمه‌ها را به جای وسط چین، از راست شروع می‌کند */
 padding: 15px 0; /* پدینگ کمتر */
 gap: 10px; /* فاصله بین دکمه‌ها */
 background-color: var(--white);
 margin-top: 25px; /* فاصله بیشتر از هیرو */
 border-radius: 12px; /* گوشه‌های گردتر */
 box-shadow: 0 4px 15px var(--shadow-light); /* سایه جذاب */
}

.filter-btn {
    flex-shrink: 0; /* از کوچک شدن دکمه‌ها جلوگیری می‌کند */
    white-space: nowrap; /* از شکستن متن دکمه‌ها به خط جدید جلوگیری می‌کند */
 padding: 10px 20px; /* پدینگ بیشتر */
 border: none; /* حذف حاشیه پیش‌فرض */
 border-radius: 8px; /* دکمه‌های مربعی‌تر و مدرن‌تر */
 color: var(--text-color);
 font-size: 0.95em; /* کمی بزرگتر */
 transition: all 0.3s ease;
 background-color: #e0e0e0; /* رنگ خاکستری روشن */
 font-weight: 500;
}

.filter-btn:hover {
 background-color: #d0d0d0;
 color: var(--text-color); /* رنگ متن ثابت بماند */
}

.filter-btn.active {
 background-color: var(--primary-color);
 color: var(--white);
 border-color: var(--primary-color); /* برای حفظ زیبایی */
 box-shadow: 0 2px 10px rgba(106, 13, 173, 0.3); /* سایه برای دکمه فعال */
}


/* --- بخش اصلی پروژه‌ها (Projects Grid) --- */
.projects-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 25px; /* فاصله بین کارت‌ها (افقی و عمودی) */
 padding: 30px 0;
 align-items: stretch; /* مطمئن می‌شود کارت‌ها ارتفاع یکسانی دارند */
}

.project-card {
 background-color: var(--white);
 border-radius: 15px; /* گوشه‌های گرد بزرگتر */
 overflow: hidden;
 box-shadow: 0 8px 25px var(--shadow-light); /* سایه عمیق‌تر و جذاب‌تر */
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 display: flex;
 flex-direction: column;
 height: 100%; /* مهم: برای اینکه همه کارت‌ها ارتفاع یکسانی داشته باشند */
}

.project-card:hover {
 transform: translateY(-8px); /* افکت بالا رفتن هنگام هاور */
 box-shadow: 0 12px 35px var(--hover-shadow); /* سایه عمیق‌تر هنگام هاور */
}

/* --- کانتینر تصویر که نسبت ابعادی را حفظ می‌کند --- */
.project-image-wrapper {
 width: 100%;
 padding-bottom: 75%; /* نسبت ابعادی 4:3 (مثل تصویر ویستا) */
 position: relative;
 overflow: hidden;
 flex-shrink: 0;
 background-color: #f5f5f5; /* پس‌زمینه در صورت عدم وجود تصویر */
}

.project-image-wrapper img {
 position: absolute;
 top: 0;
 left: 0;
 width: 90%;
 height: 100%;
 object-fit: cover; /* تصویر را برش می‌دهد تا فضا را بپوشاند */
 display: block;
}

/* --- لینک پروژه که شامل تصویر و اطلاعات است --- */
.project-card .project-link {
 display: flex;
 flex-direction: column;
 flex-grow: 1; /* اجازه می‌دهد اطلاعات متنی فضای باقیمانده را اشغال کنند */
 color: inherit;
 text-decoration: none;
 overflow: hidden; /* مهم: اگر محتوا از کادر بیرون زد، پنهان شود */
}

.project-info {
 padding: 18px 20px; /* پدینگ بیشتر */
 text-align: right;
 flex-grow: 1; /* اجازه می‌دهد اطلاعات متنی فضای باقیمانده را اشغال کنند */
 display: flex; /* برای چیدمان عنوان و قیمت */
 flex-direction: column;
 justify-content: space-between; /* پخش کردن محتوا */
}

.project-info h3 {
 font-size: 1.15em; /* کمی بزرگتر */
 margin: 0 0 10px 0; /* تنظیم margin */
 color: var(--text-color);
 line-height: 1.4;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2; /* محدود کردن عنوان به دو خط */
 -webkit-box-orient: vertical;
 font-weight: 600;
}

.project-info .price {
 font-size: 1.25em; /* سایز بزرگتر برای قیمت */
 font-weight: 700; /* پررنگ‌تر */
 color: var(--primary-color);
 margin-top: 10px;
 direction: ltr; /* برای نمایش صحیح اعداد و واحد پول */
 text-align: right; /* تراز به چپ برای قیمت */
}

.no-projects {
 grid-column: 1 / -1; /* قرارگیری در مرکز تمام ستون‌ها */
 text-align: center;
 font-size: 1.1em;
 color: #666;
 padding: 40px;
 background-color: var(--white);
 border-radius: 10px;
 box-shadow: 0 4px 15px var(--shadow-light);
 margin-top: 20px;
}

.project-buttons { /* نام کلاس به project-buttons تغییر یافت */
 padding: 0 20px 20px; /* پدینگ برای دکمه‌ها */
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start; /* دکمه ها از راست شروع شوند */
 gap: 10px; /* فاصله بین دکمه‌ها */
 flex-shrink: 0;
}

.project-buttons .btn { /* استایل دادن به دکمه‌های داخل project-buttons */
 flex: 1; /* دکمه‌ها فضای موجود را به اشتراک می‌گذارند */
 padding: 12px 15px; /* پدینگ مناسب برای دکمه‌های کارت */
 font-size: 0.95em;
 border-radius: 10px; /* گوشه‌های گردتر */
 font-weight: 600;
}

/* رنگ‌های مختلف برای دکمه‌های داینامیک */
/* .btn-success و .btn-info و .btn-warning برای استفاده در پنل ادمین یا موارد خاص */
/* اما برای دکمه‌های کارت محصول بهتر است از primary و secondary استفاده شود. */

/* دکمه اولیه (برای مشاهده جزئیات یا دمو) */
.project-button.primary {
 background-color: var(--primary-color);
 color: var(--white);
 box-shadow: 0 4px 15px rgba(106, 13, 173, 0.3);
}

.project-button.primary:hover {
 background-color: #530a84;
 box-shadow: 0 6px 20px rgba(106, 13, 173, 0.4);
}

/* دکمه ثانویه (برای دریافت مشاوره یا اطلاعات بیشتر) */
.project-button.secondary {
 background-color: var(--white);
 color: var(--primary-color);
 border: 1px solid var(--primary-color);
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.project-button.secondary:hover {
 background-color: var(--secondary-color); /* بنفش روشن */
 color: #530a84;
}


/* --- بخش فوتر --- */
.main-footer {
 background-color: #2c3e50; /* رنگ تیره برای فوتر */
 color: var(--white);
 padding: 40px 0 20px;
 margin-top: 40px;
 border-top-left-radius: 15px; /* گوشه‌های گرد بالا */
 border-top-right-radius: 15px;
}

.footer-content {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* ستون‌های ریسپانسیو */
 gap: 30px;
 padding-bottom: 30px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section h3 {
 margin-bottom: 15px;
 font-size: 1.2em;
 color: var(--primary-color);
}

.footer-section p, .footer-section ul li {
 font-size: 0.95em;
 line-height: 1.8;
}

.footer-section ul li a {
 color: var(--white);
 opacity: 0.8;
 transition: opacity 0.3s ease;
}

.footer-section ul li a:hover {
 opacity: 1;
}

.footer-bottom {
 text-align: center;
 padding-top: 20px;
 font-size: 0.85em;
 opacity: 0.7;
}

/* --- واکنش‌گرا (Responsive) --- */
@media (max-width: 991px) { /* برای تبلت‌ها */
 .hero-grid {
 grid-template-columns: repeat(2, 1fr); /* 2 ستون */
 }
 .hero-item.large {
 grid-column: span 2; /* در تبلت تمام عرض را بگیرد */
 grid-row: span 1; /* ارتفاع عادی */
 min-height: 250px; /* حداقل ارتفاع یکسان با بقیه */
 }
 .projects-grid {
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* حداقل عرض کمی کمتر */
 gap: 20px;
 }
}

@media (max-width: 768px) { /* برای موبایل‌های بزرگتر و تبلت‌های کوچک */
 .header-content {
 flex-direction: column; /* آیتم‌های هدر زیر هم قرار می‌گیرند */
 align-items: flex-start;
 }
 .main-nav ul {
 flex-direction: column;
 width: 100%;
 margin-top: 15px;
 }
 .main-nav ul li {
 margin: 5px 0;
 width: 100%;
 text-align: center;
 }
 .header-actions {
 width: 100%;
 justify-content: center;
 margin-top: 15px;
 }

 .footer-content {
 grid-template-columns: 1fr; /* یک ستون برای فوتر */
 text-align: center;
 }
 .footer-section ul {
 padding-right: 0; /* برای rtl */
 }
 .project-buttons {
 flex-direction: column; /* دکمه‌های کارت زیر هم قرار گیرند */
 }
 .project-buttons .btn {
 width: 100%; /* اشغال عرض کامل */
 }
}

@media (max-width: 480px) { /* برای موبایل‌های کوچک */
 .logo {
 font-size: 1.5em;
 }
 .logo img {
 height: 30px;
 }
 .hero-item-content h3 {
 font-size: 1em;
 }
 .hero-item-content p {
 font-size: 0.8em;
 }
 .btn {
 padding: 8px 15px; /* پدینگ کمتر برای دکمه‌ها */
 font-size: 0.9em;
 border-radius: 8px;
 }
 .hero-grid {
 grid-template-columns: 1fr; /* 1 ستون برای موبایل */
 }
 .hero-item, .hero-item.large { /* همه آیتم‌های هیرو یکسان شوند */
 grid-column: span 1; /* تمام عرض را بگیرد */
 grid-row: span 1;
 min-height: 200px; /* حداقل ارتفاع کمتر */
 }
 .category-filters {
 /* این بخش را اصلاح کردم تا به جای چینش عمودی، افقی باقی بماند */
 flex-direction: row;
 flex-wrap: nowrap;
 overflow-x: auto;
 justify-content: flex-start;
 align-items: center;
 }
 .filter-btn {
 flex-shrink: 0;
 white-space: nowrap;
 }
 .projects-grid {
 grid-template-columns: 1fr; /* 1 ستون در موبایل */
 gap: 15px;
 }
 .project-card {
 border-radius: 10px; /* گوشه‌های کمی کمتر گرد */
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
 }
 .project-info {
 padding: 15px; /* پدینگ کمتر */
 }
 .project-buttons {
 padding: 0 15px 15px; /* پدینگ کمتر */
 }
}

/* --- استایل‌های صفحه جزئیات پروژه (Project Detail) --- */
.project-detail {
 padding: 30px 0 50px; /* تنظیم پدینگ */
 background-color: var(--white);
 border-radius: 15px; /* گوشه‌های گردتر */
 box-shadow: 0 8px 25px var(--shadow-light); /* سایه عمیق‌تر */
 margin-top: 30px;
}

.project-header {
 text-align: center;
 margin-bottom: 30px;
 padding: 0 20px; /* پدینگ برای جلوگیری از چسبیدن به کناره‌ها */
}

.project-header h1 {
 font-size: 2.8em; /* کمی بزرگتر */
 color: var(--text-color);
 margin-bottom: 10px;
 font-weight: 700;
}

.project-header .project-price {
 font-size: 1.8em; /* بزرگتر */
 font-weight: bold;
 color: var(--primary-color);
 margin-top: 15px;
 display: block; /* در خط جدید */
 direction: ltr; /* برای نمایش صحیح اعداد و واحد پول */
 text-align: center; /* مرکز چین باشد */
}

.project-main-image { /* کلاس جدید برای تصویر اصلی صفحه جزئیات */
 width: 100%;
 max-height: 500px; /* محدود کردن ارتفاع */
 object-fit: contain; /* برای نمایش کامل تصویر بدون برش */
 border-radius: 10px; /* گوشه‌های گرد */
 margin: 0 auto 30px auto; /* وسط چین و فاصله از پایین */
 display: block; /* برای اعمال margin auto */
 box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* سایه ظریف */
}


.project-details-section {
 padding: 0 30px; /* پدینگ بیشتر از کناره‌ها */
}

.project-details-section h2, .project-details-section h3 {
 font-size: 2em; /* کمی بزرگتر */
 margin-bottom: 15px;
 color: var(--text-color);
 border-bottom: 2px solid var(--dark-gray); /* خط زیر عنوان */
 padding-bottom: 8px; /* پدینگ زیر خط */
 margin-top: 35px; /* فاصله بیشتر از بالا */
 font-weight: 600;
}

.project-details-section p {
 font-size: 1.1em;
 line-height: 1.8;
 margin-bottom: 20px;
}

.technologies-list {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 20px;
}

.tech-tag {
 background-color: var(--primary-color);
 color: var(--white);
 padding: 8px 15px; /* پدینگ بیشتر */
 border-radius: 25px; /* گردتر */
 font-size: 0.95em; /* کمی بزرگتر */
 white-space: nowrap; /* جلوگیری از شکستن خط */
 font-weight: 500;
}

.project-dynamic-buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 15px;
 margin-top: 30px; /* فاصله بیشتر */
 justify-content: flex-start; /* دکمه ها از راست شروع شوند */
}

.project-dynamic-buttons .btn { /* استایل دکمه‌های صفحه جزئیات */
 padding: 12px 25px;
 font-size: 1.05em;
 border-radius: 10px;
}


/* حالت موبایل برای صفحه جزئیات */
@media (max-width: 768px) {
 .project-header h1 {
 font-size: 2em;
 }
 .project-header .project-price {
 font-size: 1.4em;
 }
 .project-main-image { /* کلاس جدید */
 max-width: 90%;
 margin-bottom: 20px;
 }
 .project-details-section {
 padding: 0 15px;
 }
 .project-details-section h2, .project-details-section h3 {
 font-size: 1.6em;
 margin-top: 25px;
 }
 .project-details-section p {
 font-size: 1em;
 }
 .tech-tag {
 font-size: 0.85em;
 padding: 6px 10px;
 }
 .project-dynamic-buttons {
 flex-direction: column; /* دکمه‌ها زیر هم */
 align-items: stretch; /* اشغال عرض کامل */
 gap: 10px;
 margin-top: 20px;
 }
 .project-dynamic-buttons .btn {
 width: 100%;
 padding: 10px 20px;
 font-size: 1em;
 }
}