/* فایل style.css */

/* ========================================= */
/* فونت‌ها و تنظیمات پایه تایپوگرافی */
/* ========================================= */
@font-face {
    font-family: 'Lahzeh';
    src: url('fonts/Lahzeh-FaNumVF.woff') format('woff-variations'); 
    font-weight: 100 900; 
    font-style: normal;
    font-display: swap; 
}

/* اعمال فونت و سایز استاندارد به کل سایت */
body, button, input, select, textarea {
    font-family: 'Lahzeh', tahoma, sans-serif;
    font-size: 15px; /* سایز پایه متن‌ها */
    font-weight: 400; /* وزن استاندارد و ظریف */
    line-height: 1.6;
    color: #444; /* رنگ خاکستری تیره برای خوانایی بهتر */
}

/* تنظیم وزن تیترها در کل سایت */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #222;
}

/* تنظیمات بدنه سایت */
body {
    background-color: #f1eef5;
    margin: 0;
    padding: 0;
    direction: rtl;
}
/* مخفی کردن عنوان خودکار برگه در ویرایشگر جدید وردپرس (گوتنبرگ) */
.wp-block-post-title,
.editor-post-title,
h1.has-text-align-center,
h1 {
    display: none !important;
}

/* استثنا: اگر داخل فرم از h1 استفاده کردید، آن را مخفی نکن */
.order-form-container h1 {
    display: block !important;
}
/* استثنا: نمایش h1 در کادر پیام تشکر */
.success-message-box h1 {
    display: block !important;
}


/* ========================================= */
/* تنظیمات هدر (مستطیل اصلی) */
/* ========================================= */
.site-header {
    width: 1330px;
    max-width: 95%;
    height: 100px;
    background-color: #ffffff;
    border-radius: 27px;
    margin: 25px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    box-shadow: 0 8px 10px #836aea0a;
}

/* استایل لینک‌های داخل هدر */
.site-header a {
    text-decoration: none;
    color: #333;
    font-weight: 500; /* وزن متعادل برای لینک‌ها */
}

/* استایل دکمه تماس با ما */
.contact-btn {
    background-color: #836aea;
    color: #ffffff !important;
    padding: 10px 25px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(131, 106, 234, 0.4);
    transition: all 0.3s ease;
    font-size: 15px;
    font-weight: 600;
}

/* ========================================= */
/* تنظیمات نمایش لوگوی هدر (اصلاح شده برای SVG و عکس) */
/* ========================================= */
.header-col.header-logo {
    display: flex;
    align-items: center;
    height: 100%; 
    flex-shrink: 0; 
}

/* استایل‌دهی به تگ لینکی که وردپرس دور لوگو می‌اندازد */
.header-logo a.custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 150px; /* جلوگیری از صفر شدن عرض برای فایل‌های SVG */
}

/* استایل‌دهی اجباری به خود عکس یا فایل SVG */
.header-logo img, 
.header-logo img.custom-logo,
.header-logo svg {
    height: 60px !important; /* ارتفاع ثابت */
    max-height: 60px !important; 
    width: 100% !important; /* گرفتن عرض از والد (برای SVG ضروری است) */
    object-fit: contain; /* حفظ تناسب بدون کشیدگی یا دفورمه شدن */
    display: block;
}

/* ========================================= */
/* استایل‌های منوی اصلی و زیرمنوها */
/* ========================================= */

.header-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px; /* فاصله بین آیتم‌های منو */
}

.header-menu ul li {
    position: relative;
}

/* استایل سایز و فونت آیتم‌های اصلی منو */
.header-menu > ul > li > a {
    font-size: 16px; /* سایز استاندارد برای منوی اصلی */
    font-weight: 500;
}

/* ۱. ساخت فلش برای منوهای دارای زیرمنو */
.header-menu ul li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 8px; 
}

.header-menu ul li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    transform: translateY(-3px) rotate(-45deg); 
    transition: transform 0.3s ease; 
}

.header-menu ul li.menu-item-has-children:hover > a::after {
    transform: translateY(2px) rotate(135deg);
}

/* ۲. استایل‌دهی و انیمیشن خودِ زیرمنو */
.header-menu ul.sub-menu {
    position: absolute;
    top: 100%; 
    right: 0; 
    background-color: #ffffff;
    min-width: 220px;
    padding: 10px 0;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); 
    transition: all 0.3s ease; 
}

.header-menu ul li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(15px); 
}

/* ۳. استایل آیتم‌های داخل زیرمنو */
.header-menu ul.sub-menu li {
    width: 100%;
}

.header-menu ul.sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: #555;
    font-size: 14px; /* سایز کمی کوچکتر برای زیرمنوها */
    font-weight: 400;
    transition: all 0.2s ease;
}

.header-menu ul.sub-menu li a:hover {
    background-color: #f1eef5; 
    color: #836aea; 
    padding-right: 25px; 
}

.header-menu ul.sub-menu ul.sub-menu {
    top: 0;
    right: 100%;
    transform: translateX(-15px);
}

/* ۴. افکت خط زیرین از وسط و روی لبه هدر */
.header-menu {
    height: 100%;
}

.header-menu > ul {
    height: 100%;
    display: flex;
    align-items: center; 
}

.header-menu > ul > li {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-menu > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%; 
    transition: color 0.3s ease;
}

.header-menu > ul > li > a::before {
    content: "";
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 3px; 
    background-color: #836aea;
    transform: scaleX(0); 
    transform-origin: center; 
    transition: transform 0.3s ease; 
}

.header-menu > ul > li:hover > a {
    color: #836aea;
}

.header-menu > ul > li:hover > a::before {
    transform: scaleX(1); 
    
}

.header-menu > ul > li.menu-item-has-children:hover > a::after {
    border-bottom-color: #836aea;
    border-left-color: #836aea;
}

/* ========================================= */
/* لایت‌باکس اختصاصی نمونه‌کارها */
/* ========================================= */
.custom-lightbox-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex; 
    justify-content: center; 
    align-items: center;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.custom-lightbox-overlay.active {
    opacity: 1; 
    visibility: visible;
}

.custom-lightbox-content {
    max-width: 90%; 
    max-height: 90%;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    position: relative;
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.custom-lightbox-overlay.active .custom-lightbox-content {
    transform: scale(1);
}

.custom-lightbox-close {
    position: absolute; 
    top: 15px; 
    right: 25px;
    color: #fff; 
    font-size: 40px; 
    cursor: pointer;
    z-index: 100000;
    transition: color 0.2s;
}

.custom-lightbox-close:hover {
    color: #ff4757;
}

.custom-lightbox-content img,
.custom-lightbox-content video {
    max-width: 100%; 
    max-height: 90vh;
    border-radius: 8px; 
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

.custom-lightbox-content iframe {
    width: 80vw; 
    height: 80vh;
    border-radius: 8px; 
    border: none; 
    background: #000;
}

/* ========================================= */
/* استایل فلش های لایت باکس
/* ========================================= */
.custom-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 30px;
    padding: 15px 20px;
    cursor: pointer;
    z-index: 1001;
    transition: background 0.3s ease;
    border-radius: 5px;
}

.custom-lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.9);
}

.custom-lightbox-nav.next {
    left: 20px; /* فلش بعدی */
}

.custom-lightbox-nav.prev {
    right: 20px; /* فلش قبلی */
}

/* برای اینکه روی عکس کلیک نشود فلش‌ها باید بالاتر باشند */
#customLightboxContent {
    position: relative;
    z-index: 1000;
}


/* ========================================= */
/* استایل‌های بخش دکمه‌های فیلتر */
/* ========================================= */
.portfolio-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    background-color: #ffffff;    
    max-width: 1330px;             
    width: 95%;                    
    border-radius: 23px;           
    margin: 40px auto;             
    padding: 20px 30px;            
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); 
    box-sizing: border-box;
    list-style: none;
}

.filter-btn {
    background-color: #ffffff;
    color: #555555;
    border: 1px solid #eaeaea; 
    padding: 8px 20px;
    border-radius: 15px; 
    cursor: pointer;
    font-family: inherit;
    font-size: 14px; 
    font-weight: 500; 
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #836aea; 
    color: #ffffff;
    border-color: #836aea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
}

/* ========================================= */
/* استایل‌های شبکه (گرید) و عنوان‌ها */
/* ========================================= */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px;
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
}

.portfolio-item {
    background: #ffffff;
    border-radius: 23px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; 
}

.portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(131, 106, 234, 0.1);
}

.portfolio-lightbox-trigger {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.portfolio-item img {
    width: 100%;
    height: 240px; 
    object-fit: cover; 
    display: block;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05); 
}

.portfolio-item a {
    text-decoration: none !important; 
}

.portfolio-item h2,
.portfolio-item h3,
.portfolio-item h4,
.portfolio-item .portfolio-info,
.portfolio-item .portfolio-title {
    text-align: center !important; 
    font-size: 15px !important; 
    font-weight: 500 !important; 
    color: #444444; 
    margin: 18px 10px; 
    padding: 0;
    line-height: 1.4;
}

/* ========================================= */
/* استایل بنر صفحه نمونه کارها */
/* ========================================= */
.portfolio-banner-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px; 
    margin-bottom: 20px; 
}

.portfolio-banner-img {
    width: 1330px;
    max-width: 95%; 
    height: auto; 
    max-height: 400px; 
    object-fit: cover; 
    border-radius: 23px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.06); 
}

/* ========================================= */
/* استایل فوتر */
/* ========================================= */
.site-footer {
    background-color: #3e3c3c; 
    color: #ffffff; 
    width: 100%;
    height: 150px; 
    display: flex;
    align-items: center; 
    margin-top: 50px;
}

.footer-container {
    max-width: 1330px; 
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-logo img {
    max-height: 50px;
    width: auto;
    filter: brightness(0) invert(1); 
}

.footer-copy {
    font-size: 14px;
    margin: 0;
    line-height: 1.8;
}

.footer-copy .developer span {
    font-weight: bold;
    color: #ffde59; 
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 15px;
}

.social-icons a:hover {
    background-color: #ffde59; 
    color: #3e3c3c;
    border-color: #ffde59;
}

@media (max-width: 768px) {
    .site-footer {
        height: auto; 
        padding: 30px 0;
    }
    .footer-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .footer-right {
        flex-direction: column;
        gap: 15px;
    }
}

/* ========================================= */
/* فرم سفارشات */
/* ========================================= */
.order-form-container, 
.order-form-container h2,
.order-form-container p,
.order-form-container input, 
.order-form-container select, 
.order-form-container textarea, 
.order-form-container button,
.order-form-container label {
    font-family: 'Lahzeh', tahoma, sans-serif !important;
}

.order-form-container {
    max-width: 600px;
    margin: 60px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border: 1px solid #e9e9e9;
    direction: rtl; 
}

.order-form-container h2 {
    color: #3e3c3c;
    font-size: 24px; /* کمی ظریف‌تر شد */
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center; 
}

.order-form-container p {
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    font-size: 14px;
}

.order-form-container .form-group {
    margin-bottom: 20px;
}

.order-form-container label {
    display: block;
    margin-bottom: 8px;
    color: #444;
    font-weight: 500;
    text-align: right !important; 
}

.order-form-container input[type="text"],
.order-form-container input[type="email"],
.order-form-container input[type="tel"],
.order-form-container select,
.order-form-container textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #f9f9f9;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    text-align: right; 
}

.order-form-container input:focus,
.order-form-container select:focus,
.order-form-container textarea:focus {
    border-color: #836aea;
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(131, 106, 234, 0.1);
}

.order-form-container input[type="submit"] {
    width: 100%;
    padding: 16px;
    background-color: #836aea;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}
/* ========================================= */
/* استایل بنر بالای فرم سفارش */
/* ========================================= */
.order-page-banner {
    max-width: 1330px; 
    width: 100%;
    height: 300px; 
    margin: -77px auto 30px auto; 
    border-radius: 23px; 
    overflow: hidden; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    background-color: #f1f1f1; 
}

/* استایل تگ picture و img درون آن */
.order-page-banner picture,
.order-page-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 23px;
}

/* ریسپانسیو کردن بنر و فرم برای موبایل */
@media (max-width: 768px) {
    /* تنظیمات بنر */
    .order-page-banner {
        height: 180px; 
        width: calc(100% - 30px); /* ایجاد فاصله 15 پیکسلی از چپ و راست */
        margin: 10px auto 30px auto; /* کاهش فاصله از بالا (10px) و وسط‌چین کردن */
        border-radius: 15px; 
    }
    
    .order-page-banner picture,
    .order-page-banner img {
        border-radius: 15px;
    }

    /* تنظیمات کادر فرم سفارش */
    .order-form-container {
        margin: 20px 15px 40px 15px; /* ایجاد فاصله 15 پیکسلی از چپ و راست لبه گوشی */
        padding: 25px 20px; /* کاهش پدینگ داخلی در موبایل تا فرم فضای بهتری داشته باشد */
    }
}


/* ========================================= */
/* استایل یکپارچه هاور (Hover) دکمه‌ها */
/* ========================================= */
button,
input[type="submit"],
input[type="button"],
.contact-btn,
.filter-btn,
.btn,
a.button {
    transition: all 0.3s ease !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.contact-btn:hover,
.filter-btn:hover,
.order-form-container input[type="submit"]:hover,
.btn:hover,
a.button:hover {
    background-color: #FFD700 !important; 
    color: #000000 !important; 
    border-color: #FFD700 !important; 
    box-shadow: 0 12px 9px rgba(255, 215, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.08) !important; 
    transform: translateY(-4px) scale(1.02) !important; 
}
/* =========================================
   استایل‌های صفحه درباره من
========================================= */

.about-page-container {
    max-width: 1330px;
    margin: 50px auto;
    padding: 0 20px;
}

/* --- بخش بالا: پروفایل و بیوگرافی --- */
.about-hero {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 70px;
}

.about-profile {
    flex: 0 0 350px; /* عرض بخش پروفایل */
    text-align: center;
}

/* --- تنظیمات ظرف عکس برای افکت 3D و ذرات --- */
.profile-image-wrapper {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0; 
    overflow: visible;
    
    /* کدهای جدید اضافه شده برای افکت‌ها */
    position: relative;
    perspective: 1000px; /* ایجاد عمق برای حالت 3D */
    z-index: 1;
}

/* --- تنظیمات خود عکس --- */
.profile-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    
    /* کدهای جدید برای نرم شدن حرکت با ماوس */
    position: relative;
    z-index: 2; /* عکس روی ذرات قرار می‌گیرد */
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
    
    /* filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1)); */
}

/* =========================================
   استایل‌های مربوط به ذرات معلق (Particles)
========================================= */

/* ظرف نگهدارنده ذرات پشت عکس */
#particles-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1; /* زیر عکس قرار می‌گیرد */
    pointer-events: none; /* تا مزاحم کلیک‌ها و ماوس نشود */
    overflow: visible;
}

.particle {
    position: absolute;
    /* رنگ جدید به همراه یک هاله نوری زیبا */
    background: #836aea;
    box-shadow: 0 0 10px #836aea;
    border-radius: 50%;
    /* نقطه شروع را تقریبا در وسط عکس قرار می‌دهیم */
    bottom: 40%; 
    pointer-events: none;
    z-index: -1; /* قرارگیری پشت عکس */
    animation: floatUp linear forwards;
}

@keyframes floatUp {
    0% {
        bottom: 40%;
        opacity: 0;
        transform: translateX(0) scale(1);
    }
    15% {
        opacity: 0.8; /* ظاهر شدن تدریجی */
    }
    100% {
        /* حرکت تا 100 پیکسل بالاتر از کادر عکس */
        bottom: calc(100% + 100px); 
        opacity: 0;
        transform: translateX(-20px) scale(1.2); /* کمی انحراف به چپ در حین بالا رفتن */
    }
}


/* --- ادامه استایل‌های متن و بیوگرافی --- */
.profile-name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.profile-name span {
    color: #fcb900;
    font-weight: normal;
    margin: 0 5px;
}

.about-bio {
    flex: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.bio-title {
    font-size: 28px;
    color: #222;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.bio-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 3px;
    background: #fcb900; 
    border-radius: 2px;
}

.bio-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

/* --- بخش پایین: شبکه های اجتماعی (بدون کادر، محدود به عرض ۱۳۳۰ پیکسل) --- */
.about-socials {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1330px; /* همان خط فرضی ۱۳۳۰ پیکسلی شما */
    width: 100%;
    text-align: center; /* وسط‌چین کردن عنوان و آیکون‌ها */
}

.social-section-title {
    color: #333;
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

.social-section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #836aea;
    border-radius: 5px;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.social-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 23px; /* گوشه های گرد مد نظر شما */
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.social-card:hover {
    transform: translateY(-8px) scale(1.02);
    color: #fff; /* جلوگیری از تغییر رنگ لینک در هاور */
}

/* تنظیمات سایز آیکون‌های SVG که لود کردید */
.social-icon {
    width: 45px;
    height: 45px;
    margin-left: 15px; /* فاصله از متن در راست‌چین */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ایجاد انیمیشن نرم برای آیکون‌ها */
.social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease; /* اضافه شدن این خط برای نرمی انیمیشن */
}

/* بزرگ شدن و چرخش آیکون هنگام هاور شدن روی کل کارت */
.social-card:hover .social-icon img {
    transform: scale(1.15) rotate(12deg); /* 1.15 یعنی 15 درصد بزرگتر و 12deg یعنی 12 درجه چرخش به راست */
}


.social-text {
    display: flex;
    flex-direction: column;
}

.social-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.social-subtitle {
    font-size: 13px;
    opacity: 0.8;
}

/* رنگ‌بندی کارت‌های شبکه‌های اجتماعی (می‌توانید رنگ‌ها را تغییر دهید) */
.card-whatsapp {border: 1px solid #ffffffe0; background: linear-gradient(135deg, #25D366, #128C7E); box-shadow: 0 12px 9px rgba(37,211,102,0.2); }
.card-instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); box-shadow: 0 12px 9px rgba(253,29,29,0.2); }
.card-telegram { background: linear-gradient(135deg, #0088cc, #005580); box-shadow: 0 12px 9px rgba(0,136,204,0.2); }
.card-aparat { background: linear-gradient(135deg, #ea1d5d, #b91549); box-shadow: 0 12px 9px rgba(234,29,93,0.2); }
.card-rubika { background: linear-gradient(135deg, #29B6F6, #0288D1); box-shadow: 0 12px 9px rgba(41,182,246,0.2); }
.card-eitaa { background: linear-gradient(135deg, #FF9800, #F57C00); box-shadow: 0 12px 9px rgba(255,152,0,0.2); }
.card-bale { background: linear-gradient(135deg, #4CAF50, #388E3C); box-shadow: 0 12px 9px rgba(76,175,80,0.2); }
.card-soroush { background: linear-gradient(135deg, #3F51B5, #303F9F); box-shadow: 0 12px 9px rgba(63,81,181,0.2); }

/* رسپانسیو برای موبایل و تبلت */
@media (max-width: 992px) {
    .about-hero {
        flex-direction: column;
        text-align: center;
    }
    .bio-title::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .bio-text {
        text-align: center;
    }
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .social-grid {
        grid-template-columns: 1fr;
    }
}
/* سفید کردن آیکون‌های دلخواه */
img.white-icon {
    filter: brightness(0) invert(1);
}
/* =========================================
   استایل‌های بخش آمار و رزومه
========================================= */
.about-stats-section {
    display: flex;
    gap: 25px;
    margin-bottom: 70px;
    align-items: stretch;
}

/* مستطیل بنفش سمت راست */
.stat-main-box {
    background-color: #836aea;
    border-radius: 23px;
    flex: 1; /* عرض مناسب برای مستطیل */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-shadow: 0 10px 20px rgba(131, 106, 234, 0.2);
}

.stat-main-box .stat-text {
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
}

/* شبکه مربع‌های سمت چپ */
.stat-squares-grid {
    flex: 1.5; /* فضای بیشتری به مربع‌ها می‌دهیم */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.stat-square {
    background-color: #ffffff;
    border-radius: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
    box-shadow: 0 8px 15px rgb(255 193 7 / 16%);
    text-align: center;
}

/* استایل اعداد (رنگ زرد درخواستی) */
.stat-number {
    color: #ffcc00;
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 5px;
    display: inline-block;
}

/* استایل کلمات زیر اعداد در مربع‌ها */
.stat-label {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
}

/* تنظیمات اعداد داخل مستطیل بنفش */
.stat-main-box .stat-number {
    font-size: 40px;
    margin: 0 5px;
    vertical-align: middle;
}

/* =========================================
   ریسپانسیو بخش آمار و رزومه برای موبایل و تبلت
========================================= */
@media (max-width: 768px) {
    /* تبدیل چیدمان افقی به عمودی (زیر هم قرار گرفتن بخش‌ها) */
    .about-stats-section {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 40px;
    }

    /* تنظیمات مستطیل بنفش در موبایل */
    .stat-main-box {
        padding: 20px;
        text-align: center;
        border-radius: 18px; /* کمی گردی کمتر در موبایل */
    }
    
    .stat-main-box .stat-text {
        font-size: 18px; /* کوچک‌تر کردن متن برای جا شدن در موبایل */
    }
    
    .stat-main-box .stat-number {
        font-size: 28px;
    }

    /* شبکه مربع‌ها: تبدیل ۳ ستون به ۲ ستون */
    .stat-squares-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* چون ۳ مربع داریم، مربع سوم را در موبایل به اندازه کل عرض (دو ستون) باز می‌کنیم تا زیبا شود */
    .stat-squares-grid .stat-square:last-child {
        grid-column: 1 / -1; 
    }

    /* تنظیمات داخل مربع‌ها */
    .stat-square {
        padding: 15px 10px;
        border-radius: 18px;
    }

    .stat-number {
        font-size: 24px;
    }

    .stat-label {
        font-size: 14px;
    }
}

/* برای موبایل‌های خیلی کوچک (آیفون‌های قدیمی و گوشی‌های کوچک) */
@media (max-width: 480px) {
    .stat-squares-grid {
        grid-template-columns: 1fr; /* همه مربع‌ها یکی یکی زیر هم قرار می‌گیرند */
    }
    
    .stat-squares-grid .stat-square:last-child {
        grid-column: auto; /* لغو حالت تمام عرض برای حالت تک‌ستونه */
    }
}

/* =======================================
   بخش مهارت ها (Skills)
   ======================================= */
.skills-section-wrapper {
    margin: 60px 0;
    padding: 20px 0;
}

.skills-grid-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* ستون چپ کمی عریض‌تر برای مانیتور/نوارها */
    gap: 40px;
    align-items: center;
    grid-template-columns: 350px 1fr;

}

/* استایل کادر توضیحات (ستون راست) */
.skills-description-box {
    background-color: #836aea; /* رنگ بنفش */
    color: #fff;
    padding: 40px;
    border-radius: 23px;
    box-shadow: 0 15px 35px rgba(131, 106, 234, 0.3);
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.skills-description-box h3 {
    color: #FFD700; /* رنگ زرد */
    margin-bottom: 20px;
    font-weight: bold;
}

.skills-description-box p {
    line-height: 1.8;
    font-size: 16px;
    opacity: 0.95;
    text-align: justify; /* این خط متن را از دو طرف تراز می‌کند */
}


/* استایل نوارهای مهارت (ستون چپ) */
.skills-list-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skill-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #333;
    font-size: 15px;
}

.skill-percent {
    color: #836aea;
}

.progress-track {
    width: 100%;
    height: 12px;
    background-color: #eee;
    border-radius: 23px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.progress-fill {
    height: 100%;
    width: 0; /* مقدار اولیه صفر برای انیمیشن */
    background: linear-gradient(90deg, #FFD700, #836aea); /* گرادیانت زرد به بنفش */
    border-radius: 23px;
    /* انیمیشن بسیار نرم و زیبا */
    transition: width 2s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 3px 10px rgba(131, 106, 234, 0.4);
}

/* ریسپانسیو برای موبایل */
@media (max-width: 992px) {
    .skills-grid-container {
        grid-template-columns: 1fr; /* در موبایل زیر هم قرار می‌گیرند */
    }
}
/* =======================================
   بخش همکاری ها (Collaborations)
   ======================================= */
.collaborations-section {
    margin: 60px 0;
    display: flex;
    justify-content: center; /* وسط‌چین کردن کادر در صفحه */
}

.collaborations-box {
    width: 100%;
    max-width: 1330px; /* عرض کادر که درخواست دادید */
    background-color: #ffffff; /* رنگ سفید */
    border-radius: 23px; /* لبه‌های گرد 23 پیکسل */
    padding: 50px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04); /* یک سایه بسیار نرم و زیبا */
    text-align: center;
}

.collaborations-box h3 {
    color: #333;
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

/* یک خط تزئینی بنفش زیر عنوان */
.collaborations-box h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #836aea;
    border-radius: 5px;
}

/* شبکه (گرید) نمایش نام شرکت‌ها */
.companies-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.company-item {
    background-color: #f8f9fa; /* یک رنگ طوسی بسیار روشن برای کادر هر شرکت */
    color: #555;
    padding: 15px 30px;
    border-radius: 15px;
    font-weight: 400;
    font-size: 16px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: default;
}

/* افکت هاور (رفتن موس روی اسم شرکت) */
.company-item:hover {
    transform: translateY(-5px); /* کمی به بالا حرکت می‌کند */
    box-shadow: 0 8px 20px rgba(131, 106, 234, 0.15); /* سایه بنفش ملایم */
    color: #836aea; /* تغییر رنگ متن به بنفش سایت */
    border-color: #836aea;
    font-weight: bold;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .collaborations-box {
        padding: 30px 20px;
    }
    
    .company-item {
        width: 100%; /* در موبایل هر شرکت یک خط کامل را می‌گیرد */
    }
}
/* ========================================= */
/* استایل‌های مدرن و اپلیکیشنی موبایل */
/* ========================================= */

/* مخفی کردن همبرگری در دسکتاپ */
.mobile-menu-toggle {
    display: none;
}

/* مخفی کردن قطعی دکمه ثبت سفارشِ داخل منو در دسکتاپ (حل مشکل ۲ تا شدن دکمه) */
body .mobile-action-btn {
    display: none !important;
}

@media (max-width: 991px) {
    
    /* ========== دکمه همبرگری ========== */
    body .mobile-menu-toggle {
        display: block !important;
        width: 44px;
        height: 44px;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        cursor: pointer;
        position: relative;
        z-index: 10001;
        padding: 0;
        margin: 0;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important; /* حذف پس‌زمینه زرد در موبایل */
    }
    
    body .mobile-menu-toggle:focus,
    body .mobile-menu-toggle:active {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    .hamburger-icon,
    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        display: block;
        width: 26px;
        height: 2.5px;
        background-color: #1e1e24; 
        border-radius: 4px;
        position: absolute;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    }
    
    .hamburger-icon {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .hamburger-icon::before { top: -8px; }
    .hamburger-icon::after { top: 8px; }
    
    .mobile-menu-toggle.active .hamburger-icon { background-color: transparent; }
    .mobile-menu-toggle.active .hamburger-icon::before { transform: rotate(45deg); top: 0; }
    .mobile-menu-toggle.active .hamburger-icon::after { transform: rotate(-45deg); top: 0; }
    
    /* ========== تنظیمات هدر و لوگو ========== */
    .site-header {
        height: 70px !important;
        padding: 0 15px !important;
        position: relative;
        z-index: 10000;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
    }
    
    .header-logo { 
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10;
        text-align: center;
    }
    
    .header-logo img, .header-logo svg { 
        max-height: 35px !important; /* سایز لوگو کوچکتر شد (قبلا 45 بود) */
        height: auto !important; 
        max-width: 120px !important;
    }
    
    .header-action .contact-btn { padding: 6px 12px !important; font-size: 12px !important; }
    
    /* ========== کانتینر اصلی منو ========== */
    body .header-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: rgba(255, 255, 255, 0.98) !important; 
        backdrop-filter: blur(12px) !important; 
        -webkit-backdrop-filter: blur(12px) !important;
        z-index: 10000 !important;
        transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding-top: 130px !important; /* فاصله از بالا */
        padding-bottom: 40px !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08) !important; 
        border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
    }
    
    .header-menu.active { right: 0 !important; }
    
    /* ========== آیتم‌های منو ========== */
    .header-menu ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important; 
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    body .header-menu ul li {
        width: 100% !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        position: relative;
        border-bottom: none !important; 
        height: auto !important;
        min-height: unset !important;
        line-height: normal !important;
    }
    
    body .header-menu ul li a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 18px !important; 
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #2b2b35 !important;
        border-radius: 12px !important; 
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        background: transparent !important;
        height: auto !important;
        min-height: unset !important;
    }
    
    body .header-menu ul li a:hover,
    body .header-menu ul li a:active {
        background: rgba(131, 106, 234, 0.08) !important;
        color: #836aea !important;
        transform: translateX(-5px) !important; 
    }
    
    /* ========== زیرمنوها ========== */
    body .header-menu ul.sub-menu {
        position: static !important;
        background: transparent !important;
        margin: 5px 18px 5px 0 !important;
        padding: 5px 15px 5px 0 !important;
        border-right: 2px solid rgba(131, 106, 234, 0.2) !important; 
        border-radius: 0 !important;
        display: none !important;
        box-shadow: none !important;
        height: auto !important;
        
       }
    
    body .header-menu li.active > ul.sub-menu {
        display: block !important;
        animation: fadeInDown 0.3s ease forwards;
    }
    
    body .header-menu ul.sub-menu li a {
        padding: 10px 15px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #555 !important;
        border-radius: 8px !important;
    }
    
    /* ========== فلش مدرن برای زیرمنوها ========== */
    .header-menu ul li.menu-item-has-children > a::after {
        content: "" !important;
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: rotate(45deg) !important;
        transition: transform 0.3s ease !important;
        margin-top: -4px !important;
        opacity: 0.6 !important;
    }
    
    .header-menu ul li.menu-item-has-children.active > a::after {
        transform: rotate(-135deg) !important;
        margin-top: 2px !important;
        opacity: 1 !important;
    }
    
    /* ========== اوورلی (بک‌گراند تیره) ========== */
    .menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(15, 15, 20, 0.6) !important; 
        z-index: 9999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.4s ease !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    
    .menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ========== دکمه ثبت سفارش در منوی موبایل ========== */
    body .mobile-action-btn {
        display: block !important; /* نمایش دکمه در موبایل */
        margin-top: 30px !important; 
        padding: 0 18px !important;
    }
    
    body .mobile-action-btn .contact-btn {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        padding: 15px !important;
        background-color: #836aea !important; 
        color: #ffffff !important;
        border-radius: 12px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* انیمیشن نرم باز شدن زیرمنو */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ========================================= */
/* تبدیل آیتم منو به دکمه در موبایل */
/* ========================================= */

/* مخفی کردن این آیتم در دسکتاپ */
.mobile-order-btn {
    display: none !important;
}

@media (max-width: 991px) {
    /* نمایش آیتم در موبایل به عنوان دکمه */
    body .header-menu ul li.mobile-order-btn {
        display: block !important;
        margin-top: 25px !important;
        padding: 0 !important;
    }

    body .header-menu ul li.mobile-order-btn a {
        background-color: #836aea !important; /* رنگ پس‌زمینه دکمه */
        color: #ffffff !important; /* رنگ متن */
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 12px !important;
        padding: 15px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        box-shadow: 0 4px 15px rgba(131, 106, 234, 0.3) !important;
    }

    body .header-menu ul li.mobile-order-btn a:hover,
    body .header-menu ul li.mobile-order-btn a:active {
        background-color: #6a52c4 !important; /* رنگ دکمه هنگام کلیک */
        color: #ffffff !important;
        transform: translateY(-2px) !important;
    }
}
/* استایل کادر راهنمای انتخاب خدمات در فرم سفارش *//* استایل کادر راهنمای انتخاب خدمات در فرم سفارش (طراحی جدید) */
.service-notice-box {
    background: linear-gradient(45deg, #ffc33a85, #ffd450e0); /* گرادیانت درخواستی */
    box-shadow: 0 7px 20px #ffc5419e; /* سایه درخواستی */
    border: solid 1px #ffbf004a; /* حذف حاشیه برای جلوه بهتر سایه */
    color: #2c2c2c; /* رنگ متن تیره برای خوانایی عالی روی پس‌زمینه زرد */
    border-radius: 8px; /* گوشه‌های گرد */
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    align-items: center;
}

.service-notice-box strong {
    color: #000; /* رنگ کلمه "سایر" مشکی تیره تا کاملاً به چشم بیاید */
    margin: 0 4px;
    font-weight: bold;
}
@media (max-width: 768px) {
    .service-notice-box {
        /* تغییر جهت فلکس برای جلوگیری از به هم ریختگی */
        flex-direction: column; /* اجزا را زیر هم قرار می‌دهد */
        align-items: flex-start; /* اجزا را از سمت راست (شروع) تراز می‌کند */
        padding: 12px 15px; /* کمی پدینگ برای ظاهر بهتر */
    }
}

/* =========================================
   استایل صفحه تشکر (Thank You Page)
========================================= */
.thank-you-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 60px 20px;
}

.thank-you-card {
    background: #ffffff;
    max-width: 500px;
    width: 100%;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    text-align: center;
    animation: slideUpFade 0.6s ease-out forwards;
}

.thank-you-card .success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: rgba(37, 211, 102, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thank-you-card .success-icon svg {
    width: 40px;
    height: 40px;
    animation: scaleIn 0.5s ease-out 0.3s both;
}

/* --- استایل کادر زرد رنگ جدید --- */
.success-message-box {
    background-color: #fffdf0; /* زرد بسیار ملایم */
    border: 1px solid #f0e6b2; /* خط دور کمرنگ */
    border-radius: 16px; /* لبه‌های گرد */
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(240, 230, 178, 0.2); /* سایه بسیار محو برای زیبایی بیشتر */
}

.success-message-box h1 {
    font-size: 22px;
    color: #ffde59; 
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 700;
}

.success-message-box h2 {
    font-size: 16px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
}
/* -------------------------------- */

.thank-you-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 35px;
}

.btn-return-home {
    display: inline-block;
    padding: 14px 35px;
    background: linear-gradient(135deg, #836aea, #6b52d6); 
    color: #fff !important;
    text-decoration: none;
    border-radius: 17px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(131, 106, 234, 0.3);
}

.btn-return-home:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(131, 106, 234, 0.5);
}

/* --- انیمیشن‌ها --- */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* =========================================
   Portfolio Filters - Compact Glass Sticky
========================================= */

.portfolio-filters {
    position: relative;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    max-width: 1330px;
    width: 95%;

    margin: 40px auto;
    padding: 16px 20px;

    border-radius: 23px;
    box-sizing: border-box;
    list-style: none;

    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.65);

    box-shadow: 0 4px 15px rgba(0,0,0,0.04);

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        backdrop-filter 0.25s ease,
        -webkit-backdrop-filter 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease;
}

/* کوچک‌تر کردن خود دکمه‌های فیلتر */
.portfolio-filters .filter-btn {
    padding: 7px 14px;
    font-size: 13.5px;
    line-height: 1.7;
    white-space: nowrap;
}

/* حالت ثابت و شیشه‌ای هنگام اسکرول */
.portfolio-filters.is-sticky {
    position: fixed;
    top: 16px;
    left: 50%;
    right: auto;

    width: 95%;
    max-width: 1330px;

    margin: 0;

    /*
      این transform فقط برای وسط‌چین کردن است.
      چون transition روی transform حذف شده، دیگر انیمیشن چپ/راست ایجاد نمی‌کند.
    */
    transform: translateX(-50%);

    z-index: 9999;

    background: rgba(255, 255, 255, 0.68);

    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);

    border: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);

    animation: portfolioFilterFadeIn 0.22s ease both;
}

/* افکت شیشه‌ای نرم */
.portfolio-filters.is-sticky::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.58),
        rgba(255, 255, 255, 0.12)
    );

    z-index: -1;
}

/* جلوگیری از پرش صفحه هنگام fixed شدن */
.portfolio-filters-placeholder {
    height: 0;
    transition: height 0.2s ease;
}

/* فقط فید نرم، بدون حرکت از چپ یا راست */
@keyframes portfolioFilterFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* تبلت */
@media (max-width: 992px) {
    .portfolio-filters {
        gap: 7px;
        padding: 14px 16px;
    }

    .portfolio-filters .filter-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* موبایل */
@media (max-width: 768px) {
    .portfolio-filters {
        width: 95%;
        gap: 7px;
        padding: 12px 12px;
        margin: 30px auto;
        border-radius: 18px;
    }

    .portfolio-filters.is-sticky {
        top: 12px;
        width: 92%;
        border-radius: 18px;
    }

    .portfolio-filters .filter-btn {
        padding: 6px 10px;
        font-size: 12.5px;
        border-radius: 999px;
    }
}

/* موبایل‌های خیلی کوچک */
@media (max-width: 480px) {
    .portfolio-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;

        padding: 10px 10px;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .portfolio-filters::-webkit-scrollbar {
        display: none;
    }

    .portfolio-filters .filter-btn {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 6px 10px;
    }
}