/* ۱. معرفی فونت‌ها */
@font-face {
    font-family: 'Potk';
    src: url('../assets/fonts/Potak.woff2') format('woff2'),
        url('../assets/fonts/Potak.woff') format('woff'),
        url('../assets/fonts/Potak.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pofak';
    src: url('../assets/fonts/Pofak.woff2') format('woff2'),
        url('../assets/fonts/Pofak.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IranSans';
    src: url('../assets/fonts/IranSansWeb.woff2') format('woff2'),
        url('../assets/fonts/IranSansWeb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- تنظیمات عمومی --- */
:root {
    --tooshle-red: #E61C23;
    --tooshle-yellow: #FFD200;
    --tooshle-blue: #0096D6;
}

body {
    font-family: 'IranSans', Tahoma, sans-serif !important;
    direction: rtl;
    text-align: right;
    background-color: #1a1a1a;
    color: white;
    overflow-x: hidden;
}

h1 {
    font-family: 'Potk', cursive !important;
}

h2,
h3,
.navbar-brand {
    font-family: 'Pofak', sans-serif;
}

.btn-game-primary,
.btn {
    font-family: 'IranSans', sans-serif;
    font-weight: bold;
}

/* نوار ناوبری شیشه‌ای */
.glass-nav {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.8rem 0;
}

/* بخش Hero */
.hero-section {
    height: 100vh;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.2) 70%,
            #1a1a1a 100%),
        url('../assets/img/view-fairytale-castle.webp') no-repeat center center/cover;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -2px;
    /* حذف فاصله سفید احتمالی */
}

/* دکمه اختصاصی با رنگ قرمز لوگو */
.btn-game-primary {
    background: var(--tooshle-red);
    color: #fff;
    padding: 15px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3rem;
    box-shadow: 0 10px 20px rgba(230, 28, 35, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-game-primary:hover {
    transform: translateY(-5px) scale(1.05);
    background: #fff;
    color: var(--tooshle-red);
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
}

/* دایره‌های بزرگ بازی با رنگ آبی لوگو */
.circle-wrapper {
    width: 280px;
    height: 280px;
    background: #222;
    border-radius: 50%;
    border: 8px solid var(--tooshle-blue);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-wrapper:hover {
    transform: scale(1.05) rotate(3deg);
    border-color: var(--tooshle-yellow);
    box-shadow: 0 0 30px var(--tooshle-blue);
}

/* هدف قرار دادن عکس داخل دایره بدون نیاز به کلاس اضافه */
.circle-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* پر کردن کامل دایره */
    padding: 0 !important;
    /* حذف هرگونه فاصله احتمالی */
    margin: 0 !important;
    /* حذف فاصله خارجی */
}

/* ریسپانسیو دایره‌ها */
@media (max-width: 576px) {
    .circle-wrapper {
        width: 220px;
        height: 220px;
    }
}

/* اسکرول نرم */
html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 80px;
}

/* استایل منو موبایل */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(0, 0, 0, 0.95);
        padding: 20px;
        border-radius: 15px;
        margin-top: 10px;
    }

    .nav-link {
        margin: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.pofak-font {
    font-family: 'Pofak', sans-serif !important;
    font-size: 1.2rem;
}

.navbar-nav .nav-link {
    transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
    color: var(--tooshle-yellow) !important;
}

/* تنظیمات کلی بخش کارکترها */
#characters {
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
}

/* کارت بزرگ سمت چپ */
.main-char-display-wrapper {
    position: relative;
    padding-top: 80px;
    /* فضا برای بیرون زدن طوطی از بالا */
}

.main-display-box {
    background: #ffffff0d;
    backdrop-filter: blur(10px);
    border: 2px solid var(--tooshle-blue);
    border-radius: 40px;
    min-height: 450px;
    display: flex;
    align-items: flex-end;
    /* متن‌ها پایین قرار بگیرند */
    z-index: 1;
}

.main-parrot-wrapper {
    width: 100%;
    height: 350px;
    /* ارتفاع ثابت برای تمام عکس‌ها */
    display: flex;
    align-items: center;
    /* مرکز‌چین کردن عمودی */
    justify-content: center;
    /* مرکز‌چین کردن افقی */
    overflow: hidden;
    margin-bottom: 20px;
}

.main-parrot-out {
    position: absolute;
    /* مقدار منفی بیشتر برای بالا رفتن عکس */
    top: -110px;
    /* جابجایی به سمت راست برای آزاد شدن فضای متن */
    right: -10%;
    left: auto;
    /* کمی کوچک‌تر کردن برای تناسب بهتر */
    width: 75%;
    z-index: 2;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
    pointer-events: none;
    animation: floatingMain 4s ease-in-out infinite;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* عکس را بدون دفرمه شدن، داخل باکس جا می‌دهد */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100% !important;
    height: 450px !important;
    /* یک ارتفاع ثابت که به سایتت میاد */
    object-fit: contain !important;
    /* این جادو می‌کنه: عکس رو دفرمه نمی‌کنه */
    display: block;
}

@keyframes floatingMain {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

/* ۱. استایل کلی کارت‌های کوچک */
.parrot-card-sm {
    position: relative;
    padding-top: 40px;
    height: 300px;
}

.sm-card-body {
    background: rgba(255, 255, 255, 0.03) !important;
    height: 80%;
    border-radius: 30px;
    border: 1px solid #ffffff1a !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px);
}

.sm-parrot-wrapper {
    width: 100%;
    height: 140px;
    /* ارتفاع ثابت برای عکس‌های کوچک */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-parrot-out {
    position: absolute;
    top: 10px;
    /* موقعیت اولیه پرنده */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 5;
    /* بالاتر از همه */
    transition: all 0.4s ease-in-out;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    width: 100% !important;
    height: 350px !important;
    /* ارتفاع ثابت برای کارت‌های کوچک */
    object-fit: contain !important;
}

.sm-info-overlay {
    position: absolute;
    bottom: -80px;
    /* کاملا مخفی در ابتدا */
    left: 0;
    width: 100%;
    background: #000000 !important;
    /* رنگ آبی مورد نظر شما */
    color: #fff !important;
    padding: 15px;
    text-align: center;
    transition: all 0.4s ease;
    opacity: 0;
    z-index: 10;
}

/* ۲. حالت هاور (وقتی موس روی کارت می‌رود) */
.parrot-card-sm:hover .sm-card-body {
    background: linear-gradient(145deg, #E61C23, #8b0000) !important;
    /* قرمز جذاب */
    border-color: #ff4d4d !important;
}

/* بالا رفتن عکس پرنده موقع هاور برای اینکه روی متن نیفتد */
.parrot-card-sm:hover .sm-parrot-out {
    top: -40px;
    /* عکس را به سمت بالا هل می‌دهد */
}

/* نمایش متن آبی موقع هاور */
.parrot-card-sm:hover .sm-info-overlay {
    bottom: 0;
    opacity: 1;
}

/* در حالت انتخاب شده، متن همیشه آبی دیده شود و پرنده بالا بماند */
.parrot-card-sm.active-parrot .sm-info-overlay {
    bottom: 0;
    opacity: 1;
    background: #000000 !important;
}

.parrot-card-sm.active-parrot .sm-parrot-out {
    top: -40px;
}

.sm-text-desc {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* رسپانسیو */
@media (max-width: 991px) {
    .main-char-display-wrapper {
        margin-bottom: 50px;
    }

    .main-parrot-out {
        width: 80%;
        left: 10%;
    }
}

/* تنظیمات سکشن درباره ما */
.about-section {
    background-color: #0a0a0a;
    overflow: hidden;
}

.text-tooshle-red {
    color: var(--tooshle-red);
}

.text-tooshle-blue {
    color: var(--tooshle-blue);
}

.text-tooshle-yellow {
    color: var(--tooshle-yellow);
}



/* استایل تصویر */
.about-image-wrapper {
    position: relative;
    padding: 20px;
}

.rounded-custom {
    border-radius: 50px 5px 50px 5px;
    /* گوشه‌های نامتقارن شیک */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.image-border-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    height: 90%;
    border: 2px solid var(--tooshle-blue);
    border-radius: 5px 50px 5px 50px;
    z-index: -1;
    transform: translate(-15px, 15px);
}

.floating-badge {
    position: absolute;
    bottom: 30px;
    right: -20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    color: white;
}

/* انیمیشن برای المان‌های درباره ما */
.about-image-wrapper:hover .image-border-deco {
    transform: translate(0, 0);
    border-color: var(--tooshle-red);
    transition: all 0.5s ease;
}

/* تنظیمات فوتر */
.main-footer {
    background: linear-gradient(to top, #000 0%, #0a0a0a 100%);
    padding: 80px 0 30px;
    border-top: 2px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.footer-logo {
    filter: drop-shadow(0 0 15px rgba(255, 210, 0, 0.2));
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'IranSans', sans-serif;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--tooshle-yellow);
    padding-right: 10px;
    /* یک افکت حرکتی ظریف هنگام هاور */
}

/* استایل آیکون‌های شبکه اجتماعی (میتونی از فونت‌آیکون استفاده کنی، اینجا دایره‌ای طراحی شده) */
.social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-link:hover {
    transform: translateY(-5px);
    background: var(--tooshle-blue);
    box-shadow: 0 10px 20px rgba(0, 150, 214, 0.3);
}

/* رنگ‌های اختصاصی برای ستون‌ها */
.text-tooshle-blue {
    color: var(--tooshle-blue);
}

/* برای اینکه فوتر در موبایل مرتب باشد */
@media (max-width: 768px) {
    .main-footer {
        padding-top: 50px;
    }

    .footer-links {
        margin-bottom: 30px;
    }
}

/* جداکننده نرم فوتر از سکشن بالا */
.footer-separator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tooshle-blue), transparent);
    box-shadow: 0 -15px 40px var(--tooshle-blue);
    /* ایجاد هاله نوری ملایم */
    opacity: 0.3;
}

.main-footer {
    background-color: #050505;
    /* کمی تیره تر از بدنه اصلی */
    padding: 100px 0 40px;
}

/* استایل آیکون‌های کوچک بازی */
.game-mini-icon {
    width: 50px;
    height: 50px;
    background: #222;
    border-radius: 8px;
    /* مستطیل با گوشه گرد */
    margin-left: 12px;
    /* فاصله از متن در RTL */
    display: inline-block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.game-mini-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-link-text {
    color: #aaa;
    font-family: 'IranSans', sans-serif;
    transition: all 0.3s ease;
}

/* هاور لیست بازی ها */
.footer-game-list li:hover .game-mini-icon {
    border-color: var(--tooshle-yellow);
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--tooshle-yellow);
}

.footer-game-list li:hover .game-link-text {
    color: #fff;
    transform: translateX(-5px);
    /* حرکت جزیی به سمت چپ */
}

/* شبکه های اجتماعی */
.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

.social-link:hover {
    background: var(--tooshle-red);
    border-color: #fff;
    transform: translateY(-5px);
}

/* استایل کارتی که انتخاب شده است */
.parrot-card-sm.active-parrot .sm-card-body {
    border: 1px solid var(--tooshle-blue) !important;
    /* تغییر رنگ مرز به زرد لوگو */
    box-shadow: 0 0 20px rgba(255, 210, 0, 0.4);
    /* ایجاد هاله نوری زرد */
    transform: scale(1.05);
    /* کمی بزرگتر شدن برای نمایش انتخاب */
    background: var(--tooshle-red) !important;
}

/* نمایش همیشگی توضیحات برای کارت انتخاب شده */
.parrot-card-sm.active-parrot .sm-info-overlay {
    bottom: 0 !important;
    opacity: 1 !important;
}


/* انیمیشن برای تیتر توشله */
.toshleh-animate {
    animation: fadeInScale 1.5s ease-out forwards, glow 3s ease-in-out infinite alternate;
    opacity: 0;
    /* در ابتدا مخفی برای شروع انیمیشن */
    display: inline-block;
}

/* انیمیشن ظهور و بزرگنمایی ملایم */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* انیمیشن درخشش نئونی (رنگ قرمز و زرد لوگو) */
@keyframes glow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--tooshle-red);
    }

    to {
        text-shadow: 0 0 10px #fff, 0 0 20px var(--tooshle-yellow), 0 0 30px var(--tooshle-yellow);
    }
}

/* انیمیشن ظهور با تاخیر برای شعار */
.sub-text-animate {
    opacity: 0;
    /* در ابتدا مخفی */
    animation: fadeInSlide 1s ease-out forwards;
    animation-delay: 1.2s;
    /* این مقدار باعث می‌شود بعد از تیتر اصلی ظاهر شود */
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* انیمیشن ضربانی برای دکمه شروع بازی */
.btn-pulse-animate {
    opacity: 0;
    animation: fadeInSlide 1s ease-out forwards, pulse 2s infinite 2.2s;
    /* توضیح: اول ظاهر می‌شود، سپس از ثانیه 2.2 شروع به تپش می‌کند */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(230, 28, 35, 0.3);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 15px 30px rgba(230, 28, 35, 0.5);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(230, 28, 35, 0.3);
    }
}


/* ظرف کلی بخش طوطی‌ها */
.footer-character-area {
    position: relative;
    z-index: 10;
    margin-bottom: -50px;
    /* این مقدار باعث می‌شود طوطی‌ها روی فوتر بروند */
    pointer-events: none;
    /* که مانع کلیک روی لینک‌های احتمالی نشود */
    background: #1a1a1a !important;
    /* همون رنگ اصلی سایت */
}

.parrot-group-wrapper {
    display: flex;
    justify-content: center;
    /* قرار گرفتن در وسط صفحه */
    align-items: flex-end;
}

.parrots-lineup {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 -15px 20px rgba(0, 0, 0, 0.4));
    transition: transform 0.5s ease-in-out;

    /* تنظیم اندازه برای دسکتاپ بزرگ */
    max-width: 200px;
}

/* برای تبلت (صفحات کوچک‌تر از 992 پیکسل) */
@media (max-width: 991px) {
    .parrots-lineup {
        max-width: 200px;
        /* در تبلت کمی کوچک‌تر */
    }

    .footer-character-area {
        margin-bottom: -40px;
        /* تنظیم فاصله با لبه فوتر */
    }
}

/* برای موبایل (صفحات کوچک‌تر از 768 پیکسل) */
@media (max-width: 767px) {
    .parrots-lineup {
        max-width: 150px;
        /* در موبایل جمع‌وجورتر */
    }

    .footer-character-area {
        margin-bottom: -30px;
        /* نشستن بهتر روی خط فوتر در موبایل */
    }
}

/* فوتر اصلی سایت */
.main-footer {
    background: #111;
    /* یا هر رنگ تیره‌ای که داری */
    padding-top: 80px;
    /* فضا برای اینکه سر طوطی‌ها روی متن فوتر نیفتد */
    border-top: 2px solid rgba(255, 255, 255, 0.05);
}



.hero-image-wrapper {
    margin-bottom: -20px;
    /* فاصله عکس با تیتر TOSHLEH */
    animation: fadeInDown 1.5s ease-out;
    /* انیمیشن ورود از بالا */
}

.hero-main-img {
    max-width: 350px;
    /* اندازه عکس را اینجا کنترل کن */
    width: 100%;
    height: auto;
    /* افکت زنده بودن (بالا و پایین رفتن نرم) */
    animation: float 4s ease-in-out infinite;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
}

/* انیمیشن ورود از بالا برای عکس */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* انیمیشن شناور ماندن عکس */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* حل مشکل غیب شدن عنوان و ایجاد فاصله */
.header-container {
    position: relative;
    z-index: 20;
    /* افزایش فاصله از بالا و پایین */
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 50px;
    /* ایجاد فضای امن بین عنوان و محتوای زیرین */
    text-align: right;
}

.modern-title-area {
    position: relative;
    display: inline-block;
    padding: 10px 0;
}

/* متن پس‌زمینه توخالی (استایل بسیار مدرن) */
.outline-text {
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 5rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px rgba(100, 100, 100, 0.343);
    user-select: none;
    z-index: -1;
    font-family: sans-serif;
}

/* عنوان اصلی با فونت پفک یا ایران‌سانس */
.main-modern-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    letter-spacing: -1px;
}

/* خط تزیینی مینیمال */
.title-separator {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, transparent);
    margin-top: 10px;
    border-radius: 10px;
}

/* افکت نوری پشت متن */
.modern-title-area::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, #00d5ff42 0%, transparent 70%);
    z-index: -2;
}

.modern-title-area {
    animation: titleReveal 1s ease-out;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* حالت اولیه: عنوان غیب و کمی پایین‌تر است */
.modern-title-area {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    transition: all 0.8s ease-out;
    /* نرمی حرکت */
}

/* حالتی که وقتی اسکرول کردیم فعال می‌شود */
.modern-title-area.reveal-active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* اجبار به راست‌چین ماندن محتویات فوتر در دسکتاپ */
@media (min-width: 768px) {
    .main-footer .text-md-end {
        text-align: right !important;
    }

    .footer-logo {
        display: block;
        margin-left: auto;
        /* حذف فاصله از سمت چپ */
        margin-right: 0;
        /* چسباندن به سمت راست */
    }

    .social-icons {
        justify-content: flex-start !important;
        /* در حالت RTL یعنی راست */
    }
}

/* تنظیمات نهایی برای راست‌چین سازی فوتر */
.main-footer .iran-sans {
    text-align: right !important;
    /* اجبار متن‌ها به راست‌چین بودن */
    display: block;
}

@media (min-width: 768px) {

    /* تنظیم لوگو در دسکتاپ */
    .footer-logo {
        margin-right: 0 !important;
        margin-left: auto !important;
        display: block;
    }

    /* تنظیم آیکون‌ها در دسکتاپ */
    .main-footer .social-icons {
        justify-content: flex-start !important;
        /* در جهت RTL یعنی راست */
    }
}

/* اگر در موبایل هم می‌خواهی همه چیز راست‌چین باشد، این بخش را اضافه کن */
@media (max-width: 767px) {
    .main-footer .text-center {
        text-align: right !important;
    }

    .main-footer .social-icons {
        justify-content: flex-start !important;
    }

    .footer-logo {
        margin-right: 0 !important;
    }
}

/* بازگرداندن متن حقوق مادی معنوی به وسط */
.main-footer .row:last-child .text-center {
    text-align: center !important;
}

.main-footer .row:last-child .iran-sans {
    text-align: center !important;
    display: inline-block;
    /* یا block فرقی ندارد اگر center اعمال شود */
}

.main-parrot-out {
    transition: all 0.4s ease-in-out;
    /* جابجایی نرم عکس */
}

.main-display-box {
    transition: all 0.4s ease;
    /* جابجایی نرم باکس */
}

/* یکسان‌سازی رنگ پس‌زمینه تمام بخش‌های اصلی */
#games,
#characters,
#about,
.main-footer {
    background-color: #1a1a1a !important;
    /* همان خاکستری تیره استاندارد */
    background-image: none !important;
    /* حذف هرگونه گرادینت که رنگ رو عوض میکنه */
}

/* اصلاح بخش کاراکترها که گرادینت دایره‌ای داشت و رنگ رو سیاه میکرد */
#characters {
    background: #1a1a1a !important;
}

/* اصلاح بخش درباره ما */
.about-section {
    background-color: #1a1a1a !important;
}

/* ایجاد هاله نوری بین سکشن‌ها */

section::after {
    content: "";
    position: absolute;
    top: -50px;
    /* سایه کمی به سکشن قبلی نفوذ کند */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* سایه کل عرض را نگیرد تا لبه‌ها تاریک بماند */
    height: 100px;
    background: radial-gradient(circle,
            rgba(0, 150, 214, 0.08) 0%,
            /* رنگ آبی خیلی محو */
            rgba(230, 28, 35, 0.05) 50%,
            /* رنگ قرمز خیلی محو */
            transparent 100%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

.text-justify-custom {
    text-align: justify;
    text-justify: inter-word;
    direction: rtl;
    line-height: 1.8;
    /* فاصله بین خطوط را بیشتر می‌کند تا متن خواناتر شود */
    hyphens: auto;
}

.footer-team-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* وسط‌چین */
    line-height: 0;
    /* حذف فاصله فونت (بسیار مهم) */
    font-size: 0;
    /* حذف هرگونه فضای متنی */
    display: flex;
    /* استفاده از فلکس برای تراز دقیق */
    justify-content: center;
    position: relative;
    z-index: 5;
}

.footer-team-img {
    width: 100%;
    height: auto;
    display: block;
    /* تبدیل از حالت inline به block */
    margin-bottom: -1px;
    /* یک پیکسل هم‌پوشانی برای حذف کامل لایه رنگی */

}

/* اگر فوترت مارجین تاپ داره، اینجا صفرش می‌کنیم */
footer {
    margin-top: 0 !important;
    padding-top: 40px;
    /* پدینگ داخلی باشه اما مارجین نباشه */
    position: relative;
    z-index: 10;
}

/* استایل اختصاصی برای دکمه بازی فعال */
.btn-active-game {
    background-color: #ffcc00 !important;
    /* زرد توشله‌ای */
    color: #000 !important;
    /* متن مشکی برای خوانایی بهتر */
    border: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-active-game:hover {
    background-color: #ffdb4d !important;
    /* زرد روشن‌تر هنگام هاور */
    transform: scale(1.05);
    /* کمی بزرگ شدن */
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4);
    /* ایجاد درخشش زرد */
}

/*//////////////////////////////////////////////////*/

/* --- تنظیمات قاب ویدیو --- */
.custom-video-frame {
    border-radius: 40px;
    overflow: hidden;
    border: 3px solid rgba(255, 204, 0, 0.4);
    /* حاشیه زرد ملایم */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
    background: #000;
}

/* --- استایل اختصاصی کارت‌های راهنما --- */
.game-flip-card {
    background-color: transparent;
    height: 380px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.game-flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 2px solid #ffcc00;
    /* کادر زرد دور کارت */
}

/* روی کارت: تیره و شیک */
.flip-card-front {
    background: #181818;
    color: white;
}

/* دایره دور آیکون */
.card-icon-circle {
    width: 180px;
    height: 180px;
    background: rgba(255, 204, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 204, 0, 0.2);
    overflow: hidden;
    /* هرچیزی از دایره زد بیرون مخفی بشه */
}

/* خودِ عکس آیکون */
.card-icon-circle img {
    width: 170px;
    /* عرض ثابت */
    height: 170px;
    /* ارتفاع ثابت */
    object-fit: contain;
    /* عکس رو بدون کشیده شدن، داخل کادر فیت می‌کنه */
    transition: transform 0.3s ease;
}

/* پشت کارت: زرد گرادینتی (طبق خواسته شما) */
.flip-card-back {
    background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%);
    color: #000;
    /* متن مشکی روی زمینه زرد برای خوانایی بهتر */
    transform: rotateY(180deg);
}

.flip-card-back h5 {
    font-weight: bold;
    color: #000;
}

.flip-card-back p {
    text-align: justify;
    font-weight: 500;
}



.outline-text {
    /* اطمینان از اینکه رنگ متن توخالی دیده شود */
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1) !important;
}

.guide-page-content {
    /* معمولاً هدرها بین 70 تا 100 پیکسل هستند، ما 120 می‌گذاریم که فاصله شیک باشد */
    padding-top: 130px !important;
}

/* ایجاد فاصله بین ردیف‌های کارت */
.game-flip-card {
    margin-bottom: 30px;
    /* مقدار فاصله عمودی بین کارت‌ها */
}

/* برای اینکه ردیف آخر فاصله اضافی زیرش نداشته باشد (اختیاری) */
.row.justify-content-center {
    row-gap: 40px;
    /* این ویژگی در مرورگرهای جدید فاصله ردیف‌ها را عالی تنظیم می‌کند */
}

/* ظرف اصلی ویدیو */
.video-main-wrapper {
    position: relative;
    padding: 10px;
    background: #1a1a1a;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* قاب اصلی تصویر */
.video-screen {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.video-bottom-bar {
    /* ۱. تغییر لبه‌ها به حالت گرد کامل (چون دیگر به ویدیو نمی‌چسبد) */
    border-radius: 15px !important;

    /* ۲. ایجاد فاصله از بالای نوار (فاصله از خودِ ویدیو) */
    margin-top: 20px !important;

    /* ۳. بقیه استایل‌ها ثابت بماند */
    background: linear-gradient(to right, #111, #222);
    padding: 12px 25px !important;
    border: 1px solid rgba(255, 204, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 55px;
}

/* اگر می‌خواهی متن وضعیت و نقطه هم کمی از هم فاصله بگیرند */
.video-info {
    display: flex;
    align-items: center;
    gap: 12px;
    /* فاصله بین نقطه چشمک‌زن و متن */
}



/* نقطه چشمک‌زن وضعیت */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ffcc00;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 10px #ffcc00;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

/* سایه نوری (Glow) پشت ویدیو */
.video-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 80%;
    background: rgba(0, 123, 255, 0.15);
    /* درخشش آبی ملایم */
    filter: blur(80px);
    z-index: 1;
    pointer-events: none;
}

/* ریسپانسیو کردن برای موبایل */
@media (max-width: 768px) {
    .video-bottom-bar {
        display: none !important;
        /* در موبایل برای خلوت شدن حذف شود */
    }
}


/*///////////////////////////////////////////////////////*/

/* استایل جدید برای دایره‌های دکمه‌ها با آیکون داخلی */
.game-actions-wrapper {
    position: relative;
    z-index: 10;
}

/* تنظیم آیکون‌های داخل دایره */
.btn-custom-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    z-index: 5;
    transition: all 0.3s ease;
    filter: brightness(1);
    /* رنگ اصلی آیکون حفظ بشه */
}

/* استایل پایه دکمه‌ها */
.smart-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative;
    transition: width 0.4s ease, background 0.3s, box-shadow 0.3s;
    text-decoration: none;
}

/* سایه‌های رنگی برای هر دکمه - دقیقا همرنگ خود دکمه */
.btn-play {
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
    /* قرمز */
}

.btn-download {
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
    /* آبی */
}

.btn-guide {
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);
    /* زرد */
}

/* حالت هاور - دکمه باز میشه و رنگ زمینه تغییر میکنه */
.btn-play:hover {
    width: 150px;
    background: #ff0000 !important;
    /* قرمز */
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.5);
    /* سایه قرمز پررنگ‌تر */
}

.btn-download:hover {
    width: 150px;
    background: #007bff !important;
    /* آبی */
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5);
    /* سایه آبی پررنگ‌تر */
}

.btn-guide:hover {
    width: 150px;
    background: #ffcc00 !important;
    /* زرد */
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.5);
    /* سایه زرد پررنگ‌تر */
}

/* متن داخل دکمه در حالت عادی */
.smart-btn .btn-text {
    opacity: 0;
    white-space: nowrap;
    margin-right: 10px;
    color: #fff;
    transition: 0.3s;
    font-family: 'Pofak', sans-serif;
    font-size: 1rem;
}

/* در حالت هاور، متن و آیکون سفید میشن */
.smart-btn:hover .btn-text {
    opacity: 1;
    color: #ffffff !important;
    /* سفید */
}

.smart-btn:hover .btn-custom-icon {
    filter: brightness(0) invert(1);
    /* آیکون رو سفید میکنه */
}

/* آیکون داخل دکمه پلی - حفظ رنگ قرمز اصلی */
.btn-play .btn-custom-icon {
    filter: brightness(0) saturate(100%) invert(21%) sepia(99%) saturate(5000%) hue-rotate(0deg) brightness(1);
    /* قرمز */
}

/* آیکون داخل دکمه دانلود - حفظ رنگ آبی اصلی */
.btn-download .btn-custom-icon {
    filter: brightness(0) saturate(100%) invert(29%) sepia(98%) saturate(5000%) hue-rotate(180deg) brightness(1);
    /* آبی */
}

/* آیکون داخل دکمه راهنما - حفظ رنگ زرد اصلی */
.btn-guide .btn-custom-icon {
    filter: brightness(0) saturate(100%) invert(85%) sepia(100%) saturate(1000%) hue-rotate(0deg) brightness(1.2);
    /* زرد */
}

/* در حالت هاور، آیکون‌ها سفید میشن */
.btn-play:hover .btn-custom-icon,
.btn-download:hover .btn-custom-icon,
.btn-guide:hover .btn-custom-icon {
    filter: brightness(0) invert(1) !important;
    /* سفید */
}

/* تنظیم فاصله بین دکمه‌ها */
.d-flex.gap-2 {
    gap: 0.75rem !important;
}

/* دکمه بزرگ داستان بازی هم کمی تنظیم میشه */
.btn-story-large {
    background-color: var(--tooshle-yellow);
    color: #1a1a1a;
    border: none;
    width: 220px;
    padding: 12px 0;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);
    font-family: 'Pofak', sans-serif;
}

.btn-story-large:hover {
    transform: translateY(-3px);
    background-color: #ffdb4d;
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.5);
    color: #1a1a1a;
    /* متن مشکی بمونه */
}

/* ===== استایل مدرن برای مودال دانلود ===== */

/* پس‌زمینه مودال با افکت بلور */
.modal-content.modern-modal {
    background: linear-gradient(145deg, #1e1e1e, #141414);
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 204, 0, 0.1) inset;
    overflow: hidden;
}

/* هدر مودال */
.modern-modal-header {
    background: linear-gradient(90deg, rgba(255, 204, 0, 0.1), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--tooshle-yellow), #ff9900);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);
}

.modal-header-icon {
    font-size: 30px;
    color: #000;
}

.modern-modal-title {
    font-family: 'Pofak', sans-serif;
    font-size: 1.8rem;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.modal-subtitle {
    color: #aaa;
    margin: 5px 0 0;
    font-size: 0.95rem;
}

.modern-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transition: all 0.3s;
    opacity: 1;
    box-shadow: none;
}

.modern-close-btn:hover {
    background: var(--tooshle-red);
    transform: rotate(90deg);
}

/* بدنه مودال */
.modern-modal-body {
    padding: 30px;
}

/* کارت‌های دانلود */
.download-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    backdrop-filter: blur(10px);
}

.download-card:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--tooshle-yellow);
    box-shadow: 0 20px 30px -10px rgba(255, 204, 0, 0.2);
}

/* کارت ویژه (دانلود مستقیم) */
.download-card.featured-card {
    background: linear-gradient(145deg, rgba(255, 204, 0, 0.1), rgba(0, 150, 214, 0.05));
    border: 1px solid var(--tooshle-yellow);
    box-shadow: 0 10px 30px rgba(255, 204, 0, 0.1);
}

.featured-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--tooshle-yellow);
    color: #000;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: 'Pofak', sans-serif;
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4);
}

/* آیکون کارت */
.download-card-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.download-card-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.apk-icon-wrapper {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--tooshle-red), #ff6b6b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #fff;
}

/* محتوای کارت */
.download-card-content {
    flex: 1;
}

.download-card-content h4 {
    font-family: 'Pofak', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 5px;
}

.download-card-content p {
    color: #aaa;
    font-size: 0.85rem;
    margin: 0 0 8px;
}

.download-card-rating {
    display: flex;
    align-items: center;
    gap: 3px;
}

.download-card-rating i {
    color: #ffc107;
    font-size: 0.8rem;
}

.download-card-rating span {
    color: #888;
    font-size: 0.75rem;
    margin-right: 5px;
}

.download-features {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}

.download-features span {
    color: #4caf50;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.download-features i {
    font-size: 0.9rem;
}

/* دکمه‌های کارت */
.download-card-btn {
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Pofak', sans-serif;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.marketplace-btn {
    background: linear-gradient(145deg, #7928ca, #4a1d8c);
    color: #fff;
    box-shadow: 0 5px 15px rgba(121, 40, 202, 0.3);
}

.googleplay-btn {
    background: linear-gradient(145deg, #34a853, #0f9d58);
    color: #fff;
    box-shadow: 0 5px 15px rgba(52, 168, 83, 0.3);
}

.direct-download-btn {
    background: linear-gradient(145deg, var(--tooshle-yellow), #ff9900);
    color: #000;
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);
}

.download-card-btn:hover {
    transform: scale(1.05) translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 8px 25px currentColor;
}

/* اطلاعات اضافی مودال */
.modal-footer-info {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 0.85rem;
}

.info-item i {
    color: var(--tooshle-yellow);
    font-size: 1.1rem;
}

/* فوتر مودال */
.modern-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 30px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

.modern-modal-footer p {
    color: #888;
    font-size: 0.8rem;
    margin: 0;
}

.modern-modal-footer a {
    color: var(--tooshle-yellow);
    text-decoration: none;
}

.modern-modal-footer a:hover {
    text-decoration: underline;
}

/* انیمیشن ورود مودال */
.modal.fade .modal-dialog {
    transform: scale(0.8) translateY(30px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* تنظیمات ریسپانسیو برای موبایل */
@media (max-width: 576px) {

    /* کل مودال */
    .modal-dialog {
        margin: 10px;
        /* فاصله از لبه‌ها */
    }

    .modal-content.modern-modal {
        border-radius: 20px;
        /* گوشه‌ها کمی کوچیک‌تر */
    }

    /* هدر مودال */
    .modern-modal-header {
        padding: 15px 20px;
        /* پدینگ کمتر */
    }

    .modal-header-content {
        gap: 10px;
        /* فاصله بین آیکون و عنوان کمتر */
    }

    .modal-icon-wrapper {
        width: 45px;
        /* آیکون کوچیک‌تر */
        height: 45px;
    }

    .modal-header-icon {
        font-size: 22px;
        /* آیکون کوچیک‌تر */
    }

    .modern-modal-title {
        font-size: 1.3rem;
        /* عنوان کوچیک‌تر */
    }

    .modal-subtitle {
        font-size: 0.8rem;
        /* زیرعنوان کوچیک‌تر */
    }

    .modern-close-btn {
        width: 35px;
        /* دکمه بستن کوچیک‌تر */
        height: 35px;
        font-size: 18px;
    }

    /* بدنه مودال */
    .modern-modal-body {
        padding: 15px;
        /* پدینگ کمتر */
    }

    /* کارت‌های دانلود */
    .download-card {
        padding: 15px;
        /* پدینگ داخلی کمتر */
        margin-bottom: 12px;
        /* فاصله بین کارت‌ها کمتر */
        gap: 12px;
        /* فاصله بین المان‌ها کمتر */
    }

    .download-card.featured-card {
        padding: 18px 15px;
        /* کارت ویژه کمی بزرگتر */
    }

    .featured-badge {
        top: -8px;
        /* بالاتر */
        right: 15px;
        padding: 3px 15px;
        /* کوچیک‌تر */
        font-size: 0.7rem;
    }

    /* آیکون کارت */
    .download-card-icon {
        width: 50px;
        /* آیکون کوچیک‌تر */
        height: 50px;
    }

    .download-card-icon img {
        width: 35px;
        /* عکس کوچیک‌تر */
        height: 35px;
    }

    .apk-icon-wrapper {
        font-size: 25px;
        /* آیکون zip کوچیک‌تر */
    }

    /* محتوای کارت */
    .download-card-content h4 {
        font-size: 1rem;
        /* عنوان کوچیک‌تر */
        margin-bottom: 3px;
    }

    .download-card-content p {
        font-size: 0.75rem;
        /* متن کوچیک‌تر */
        margin-bottom: 5px;
    }

    .download-card-rating i {
        font-size: 0.7rem;
        /* ستاره‌ها کوچیک‌تر */
    }

    .download-card-rating span {
        font-size: 0.65rem;
        /* تعداد نظرات کوچیک‌تر */
    }

    .download-features {
        gap: 8px;
        /* فاصله بین ویژگی‌ها کمتر */
        margin-top: 5px;
    }

    .download-features span {
        font-size: 0.7rem;
        /* متن ویژگی کوچیک‌تر */
    }

    .download-features i {
        font-size: 0.8rem;
    }

    /* دکمه‌های کارت */
    .download-card-btn {
        padding: 8px 15px;
        /* پدینگ کمتر */
        font-size: 0.8rem;
        /* فونت کوچیک‌تر */
        gap: 5px;
    }

    /* اطلاعات اضافی مودال */
    .modal-footer-info {
        margin-top: 20px;
        /* فاصله کمتر */
        padding-top: 15px;
        /* پدینگ کمتر */
        gap: 8px;
        /* فاصله بین آیتم‌ها */
        flex-wrap: wrap;
        /* اگر جا نشدن برن پایین */
    }

    .info-item {
        font-size: 0.7rem;
        /* متن کوچیک‌تر */
        gap: 5px;
    }

    .info-item i {
        font-size: 0.9rem;
        /* آیکون کوچیک‌تر */
    }

    /* فوتر مودال */
    .modern-modal-footer {
        padding: 12px 15px;
        /* پدینگ کمتر */
    }

    .modern-modal-footer p {
        font-size: 0.7rem;
        /* متن کوچیک‌تر */
    }
}

/* برای موبایل‌های خیلی کوچیک */
@media (max-width: 375px) {
    .download-card {
        flex-direction: column;
        /* کارت‌ها عمودی بشن */
        text-align: center;
        gap: 10px;
    }

    .download-card-content {
        text-align: center;
    }

    .download-card-rating {
        justify-content: center;
    }

    .download-features {
        justify-content: center;
    }

    .download-card-btn {
        width: 100%;
        /* دکمه تمام عرض */
        justify-content: center;
    }

    .modal-footer-info {
        flex-direction: column;
        /* اطلاعات عمودی بشن */
        align-items: center;
        gap: 8px;
    }
}


/* ===== طوطی با کارت مکالمه ===== */
.parrot-nest-fullwidth {
    width: 100vw;
    position: relative;
    margin: 0 0 20px;
    overflow-x: hidden;
    z-index: 10;
}

.parrot-conversation-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
    gap: 10px;
    /* فاصله بین کارت و طوطی */
    margin: 0;
    padding: 0;
    z-index: 10;
}

/* ===== کارت مکالمه ===== */
.conversation-card {
    position: relative;
    max-width: 520px;
    width: 100%;
    animation: slideIn 0.5s ease-out;
    margin-left: -20px;
    /* کمی به سمت چپ بره تا به طوطی نزدیکتر بشه */
    z-index: 15;
}

.conversation-bubble {
    position: relative;
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border: 2px solid var(--tooshle-yellow);
    border-radius: 25px 25px 25px 5px;
    /* گوشه‌های نامتقارن شبیه حباب */
    padding: 20px 25px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 204, 0, 0.2) inset;
    backdrop-filter: blur(5px);
}

/* دُم حباب (فلش سمت راست) */
.bubble-tail {
    position: absolute;
    top: 30px;
    left: -12px;
    /* سمت راست حباب (برای RTL) */
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid var(--tooshle-yellow);
    transform: rotate(0deg);
    filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.3));
}

/* محتوای حباب */
.bubble-content {
    color: #fff;
    position: relative;
    z-index: 2;
}

.conversation-text {
    font-family: 'IranSans', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

.highlight {
    color: var(--tooshle-yellow);
    font-weight: bold;
    position: relative;
    display: inline-block;
}

.highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--tooshle-yellow);
    transform: scaleX(0);
    transform-origin: right;
    animation: underline 1s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes underline {
    to {
        transform: scaleX(1);
    }
}

.bubble-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 204, 0, 0.3);
}

.parrot-name {
    font-family: 'Pofak', sans-serif;
    color: var(--tooshle-yellow);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.parrot-name::before {
    content: '🦜';
    font-size: 1rem;
}

.reading-time {
    font-size: 0.75rem;
    color: #888;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.reading-time::before {
    content: '⏱️';
    font-size: 0.8rem;
}

/* انیمیشن ورود کارت */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== طوطی ===== */
.parrot-nest-wrapper {
    position: relative;
    max-width: 420px;
    width: 100%;
    margin-right: -50px;
    transition: transform 0.3s ease;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    z-index: 20;
}

.parrot-nest-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
    animation: nestFloat 5s ease-in-out infinite;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* انیمیشن شناور طوطی */
@keyframes nestFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-8px) rotate(0.5deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(5px) rotate(-0.5deg);
    }
}

/* سایه طوطی */
.parrot-nest-wrapper::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20%;
    width: 60%;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    filter: blur(8px);
    z-index: -1;
    animation: shadowScale 5s ease-in-out infinite;
}

@keyframes shadowScale {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

/* افکت هاور */
.parrot-conversation-container:hover .conversation-bubble {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(255, 204, 0, 0.2);
}

.parrot-conversation-container:hover .parrot-nest-wrapper {
    transform: scale(1.03) translateZ(0);
}

/* ریسپانسیو */
@media (max-width: 991px) {
    .parrot-conversation-container {
        flex-direction: column-reverse;
        /* طوطی بالا، کارت پایین */
        align-items: center;
        gap: 20px;
    }

    .conversation-card {
        margin-left: 0;
        max-width: 90%;
    }

    .bubble-tail {
        top: -12px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    .parrot-nest-wrapper {
        max-width: 350px;
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .conversation-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .parrot-nest-wrapper {
        max-width: 300px;
        margin-right: -10px;
        /* تنظیم موقعیت */
    }

    .bubble-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

/* ===== تنظیمات ریسپانسیو برای موبایل ===== */
@media (max-width: 991px) {
    .parrot-conversation-container {
        flex-direction: row;
        /* حفظ کنار هم */
        justify-content: flex-end !important;
        /* همیشه به راست */
        gap: 15px;
    }

    .parrot-nest-wrapper {
        max-width: 280px;
        /* کوچیک‌تر */
        margin-right: 0;
        /* حذف بیرون‌زدگی */
    }

    .conversation-card {
        max-width: 280px;
        /* هم‌سایز طوطی */
        margin-left: 0;
    }

    .bubble-tail {
        top: 30px;
        left: -12px;
        /* دم حباب به راست اشاره کنه */
        border-right: 15px solid var(--tooshle-yellow);
        border-left: none;
    }
}

@media (max-width: 768px) {
    .parrot-conversation-container {
        gap: 10px;
    }

    .parrot-nest-wrapper {
        max-width: 240px;
    }

    .conversation-card {
        max-width: 240px;
    }
}

@media (max-width: 576px) {
    .parrot-conversation-container {
        gap: 8px;
        justify-content: flex-end !important;
        /* محکم به راست */
    }

    .parrot-nest-wrapper {
        max-width: 180px;
        /* کوچیک‌تر */
        margin-right: -10px;
        /* یه کم بکش بیرون برای حالتی که تنه درخت داره */
    }

    .conversation-card {
        max-width: 180px;
        /* هم‌سایز طوطی */
    }

    .conversation-text {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .bubble-footer {
        margin-top: 5px;
        padding-top: 5px;
    }

    .parrot-name {
        font-size: 0.7rem;
    }

    .reading-time {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .bubble-tail {
        top: 20px;
        /* تنظیم موقعیت دم */
        left: -10px;
        border-right: 12px solid var(--tooshle-yellow);
    }
}

@media (max-width: 375px) {
    .parrot-conversation-container {
        gap: 5px;
    }

    .parrot-nest-wrapper {
        max-width: 140px;
        margin-right: -5px;
    }

    .conversation-card {
        max-width: 140px;
    }

    .conversation-text {
        font-size: 0.7rem;
    }
}

/* ===== دکمه بازگشت ساده ===== */
.back-button-wrapper {
    width: 100%;
    background: transparent;
    padding: 10px 0 5px;
    margin-top: 60px;
    /* فاصله از هدر fixed */
    position: relative;
    z-index: 5;
    margin-bottom: -300px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 204, 0, 0.15);
    border-radius: 40px;
    color: #ddd;
    text-decoration: none;
    font-family: 'IranSans', sans-serif;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.back-link i {
    font-size: 0.8rem;
    color: var(--tooshle-yellow);
    transition: all 0.2s ease;
}

/* هاور ملایم */
.back-link:hover {
    background: rgba(255, 204, 0, 0.1);
    border-color: rgba(255, 204, 0, 0.3);
    color: #fff;
    transform: translateX(-3px);
}

.back-link:hover i {
    transform: translateX(-3px);
}

/* چپ‌چین کردن */
.back-button-wrapper .container {
    text-align: left;
    direction: ltr;
}

/* تنظیم برای موبایل */
@media (max-width: 991px) {
    .back-button-wrapper {
        margin-top: 65px;
        padding: 8px 0 3px;
    }
}

@media (max-width: 768px) {
    .back-button-wrapper {
        margin-top: 180px;
        padding: 5px 0 2px;
    }

    .back-link {
        padding: 5px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .back-button-wrapper {
        margin-top: 55px;
        padding: 5px 0;
    }

    .back-link span {
        display: none;
        /* فقط آیکون */
    }

    .back-link {
        padding: 10px;
        border-radius: 50%;
        width: 38px;
        height: 38px;
        justify-content: center;
    }

    .back-link i {
        font-size: 1rem;
        margin: 0;
    }
}


/* ===== بخش نظرات کاربران ===== */
.testimonials-section {
    position: relative;
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    border-top: 1px solid rgba(255, 204, 0, 0.05);
    border-bottom: 1px solid rgba(255, 204, 0, 0.05);
    margin-top: 40px;
}

/* کارت نظرات */
.testimonial-card {
    height: 100%;
    perspective: 1000px;
    transition: all 0.4s ease;
}

.testimonial-card-inner {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    padding: 25px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.testimonial-card-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.03) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.testimonial-card:hover .testimonial-card-inner {
    transform: translateY(-10px);
    border-color: rgba(255, 204, 0, 0.3);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 204, 0, 0.2) inset;
}

.testimonial-card:hover .testimonial-card-inner::before {
    opacity: 1;
}

/* کارت ویژه */
.testimonial-card.featured .testimonial-card-inner {
    border: 1px solid rgba(255, 204, 0, 0.3);
    box-shadow: 0 10px 30px -10px rgba(255, 204, 0, 0.15);
    position: relative;
}

.testimonial-card.featured .testimonial-card-inner::after {
    content: '★';
    position: absolute;
    top: 15px;
    left: 15px;
    color: var(--tooshle-yellow);
    font-size: 1.2rem;
    opacity: 0.3;
}

/* هدر کارت */
.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(255, 204, 0, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    flex: 1;
}

.user-name {
    font-family: 'Pofak', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 5px;
}

.user-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.user-rating i {
    color: #ffc107;
    font-size: 0.9rem;
}

.user-rating .rating-date {
    color: #888;
    font-size: 0.7rem;
    margin-right: 8px;
    font-family: 'IranSans', sans-serif;
}

.quote-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 204, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tooshle-yellow);
    font-size: 1.5rem;
    opacity: 0.5;
}

/* بدنه کارت */
.testimonial-body {
    margin-bottom: 20px;
}

.testimonial-text {
    color: #ddd;
    font-family: 'IranSans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: justify;
    margin: 0;
}

/* فوتر کارت */
.testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.game-badge {
    background: rgba(255, 204, 0, 0.1);
    color: var(--tooshle-yellow);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-family: 'Pofak', sans-serif;
    border: 1px solid rgba(255, 204, 0, 0.2);
}

.like-count {
    color: #ff6b6b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.like-count i {
    color: #ff6b6b;
}

/* دکمه مشاهده همه نظرات */
.btn-testimonial-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-family: 'Pofak', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-testimonial-more i {
    color: var(--tooshle-yellow);
    transition: all 0.3s ease;
}

.btn-testimonial-more:hover {
    background: var(--tooshle-yellow);
    border-color: transparent;
    color: #000;
    transform: translateX(-5px);
}

.btn-testimonial-more:hover i {
    color: #000;
    transform: translateX(-5px);
}

/* ریسپانسیو */
@media (max-width: 991px) {
    .testimonial-card-inner {
        padding: 20px;
    }

    .user-avatar {
        width: 50px;
        height: 50px;
    }

    .user-name {
        font-size: 1rem;
    }

    .testimonial-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .testimonial-header {
        gap: 10px;
    }

    .quote-icon {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .testimonial-card-inner {
        padding: 18px;
    }

    .testimonial-header {
        flex-wrap: wrap;
    }

    .user-avatar {
        width: 45px;
        height: 45px;
    }

    .user-name {
        font-size: 0.95rem;
    }

    .user-rating i {
        font-size: 0.8rem;
    }

    .rating-date {
        display: block;
        margin-right: 0 !important;
        margin-top: 3px;
        width: 100%;
    }

    .testimonial-text {
        font-size: 0.85rem;
        line-height: 1.7;
    }

    .game-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .like-count {
        font-size: 0.75rem;
    }
}

/* ===== دکمه لایک ===== */
.like-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'IranSans', sans-serif;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.like-btn i {
    font-size: 1.1rem;
    color: #aaa;
    transition: all 0.3s ease;
}

.like-btn .like-count {
    color: #aaa;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

/* حالت هاور */
.like-btn:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.3);
    transform: scale(1.05);
}

.like-btn:hover i {
    color: #ff6b6b;
    transform: scale(1.1);
}

/* حالت لایک شده */
.like-btn.liked {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.4);
}

.like-btn.liked i {
    color: #ff6b6b;
    font-weight: bold;
    animation: heartPop 0.3s ease;
}

.like-btn.liked .like-count {
    color: #ff6b6b;
}

/* انیمیشن قلب هنگام لایک */
@keyframes heartPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* ریپل افکت هنگام کلیک */
.like-btn:active {
    transform: scale(0.95);
}

/* تنظیم برای موبایل */
@media (max-width: 576px) {
    .like-btn {
        padding: 4px 10px;
    }

    .like-btn i {
        font-size: 1rem;
    }

    .like-btn .like-count {
        font-size: 0.75rem;
    }
}

/* ===== رفع نهایی مشکل رنگ بخش کارکترها ===== */

/* حذف هرگونه پس‌زمینه از بخش و المان‌های داخلی */
.footer-character-area,
.footer-character-area .container,
.footer-character-area .footer-team-container,
.footer-character-area .parrots-lineup {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* تنظیم مجدد بخش */
.footer-character-area {
    position: relative;
    z-index: 10;
    margin-bottom: -50px;
    padding: 20px 0 0;
    /* حذف هرگونه border یا outline */
    border: none !important;
    outline: none !important;
}

/* اطمینان از عدم وجود رنگ در ::before و ::after */
.footer-character-area::before,
.footer-character-area::after {
    display: none !important;
}

/* تنظیم کانتینر */
.footer-team-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}



/* تنظیم عکس‌ها */
.parrots-lineup {
    max-width: 180px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 -10px 15px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.parrots-lineup:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 -15px 25px rgba(255, 204, 0, 0.3));
}

/* تنظیمات ریسپانسیو */
@media (max-width: 991px) {
    .parrots-lineup {
        max-width: 150px;
    }
}

@media (max-width: 768px) {
    .parrots-lineup {
        max-width: 120px;
    }
}

@media (max-width: 576px) {
    .parrots-lineup {
        max-width: 100px;
    }

    .footer-team-container {
        gap: 5px;
    }
}

/* تنظیم اسکرول برای بخش نظرات */
#testimonials {
    scroll-margin-top: 80px;
    /* فاصله از بالای صفحه وقتی لینک کلیک میشه */
}

@media (max-width: 576px) {
    .parrot-nest-wrapper {
        max-width: 250px !important;
        /* هر چقدر می‌خوای بزرگ کن */
        margin: 0 auto;
        /* وسط‌چین */
    }

    .parrot-conversation-container {
        justify-content: center !important;
        /* کل مجموعه رو ببر وسط */
        gap: 15px;
    }
}


/* برای تبلت */
@media (max-width: 768px) {
    .main-modern-title {
        font-size: 2rem !important;
    }
}

/* برای موبایل */
@media (max-width: 576px) {
    .main-modern-title {
        font-size: 1.8rem !important;
    }
}

/* برای موبایل خیلی کوچیک */
@media (max-width: 375px) {
    .main-modern-title {
        font-size: 1.5rem !important;
    }
}

/* تنظیم متن انگلیسی زیر عنوان برای موبایل */
@media (max-width: 768px) {
    .outline-text {
        font-size: 3.5rem !important;
        right: -5px;
        /* تنظیم موقعیت (اختیاری) */
    }
}

@media (max-width: 576px) {
    .outline-text {
        font-size: 2.8rem !important;
        top: -15px;
        /* تنظیم موقعیت عمودی */
        right: -5px;
    }
}

@media (max-width: 375px) {
    .outline-text {
        font-size: 2rem !important;
        top: -10px;
    }
}

/* ===== کاهش فاصله کارکترها در موبایل ===== */

@media (max-width: 768px) {

    /* کاهش فاصله کلی ردیف */
    #characters .row {
        margin-bottom: 0 !important;
        row-gap: 15px !important;
    }

    /* حذف فاصله اضافی گاتر */
    #characters .row.g-4 {
        --bs-gutter-y: 0.8rem !important;
        margin-bottom: 0 !important;
    }

    /* تنظیم فاصله بین کارت بزرگ و کارت‌های کوچک */
    #characters .col-lg-6:first-child {
        margin-bottom: 10px !important;
    }

    /* تنظیم فاصله بین کارت‌های کوچک */
    #characters .col-6 {
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    /* کوچک‌تر کردن ارتفاع کارت‌ها */
    .parrot-card-sm {
        height: 240px !important;
        padding-top: 30px !important;
    }
}

@media (max-width: 576px) {
    #characters .row.g-4 {
        --bs-gutter-y: 0.5rem !important;
    }

    #characters .col-6 {
        margin-bottom: 5px !important;
    }

    .parrot-card-sm {
        height: 210px !important;
        padding-top: 25px !important;
    }
}

/* ===== تنظیمات طوطی لونه برای موبایل ===== */
@media (max-width: 768px) {
    .parrot-conversation-container {
        display: flex;
        flex-direction: column !important;
        /* اجباری: همه چی زیر هم */
        align-items: flex-start;
        width: 100%;
    }

    /* طوطی - اول */
    .parrot-nest-wrapper {
        order: -1 !important;
        /* منفی یک یعنی برو اول */
        max-width: 300px !important;
        width: 100%;
        margin-bottom: 15px;
    }

    /* متن - دوم */
    .conversation-card {
        order: 1 !important;
        /* یک یعنی بیا دوم */
        max-width: 100% !important;
        width: 100%;
        margin-bottom: 50px !important;
    }

    /* بقیه استایل‌ها مثل قبل */
    .conversation-bubble {
        width: 90%;
        border-radius: 25px 25px 5px 25px;
        padding: 18px 22px;
        text-align: right;
    }

    .conversation-text {
        text-align: right !important;
        font-size: 0.95rem;
    }

    .bubble-tail {
        top: -12px;
        right: 30px;
        left: auto;
        transform: rotate(90deg);
    }
}

@media (max-width: 576px) {
    .parrot-nest-wrapper {
        max-width: 260px !important;
    }

    .conversation-bubble {
        padding: 15px 18px;
    }

    .conversation-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .back-button-container {
        position: absolute;
        top: 180px;
        /* درست زیر navbar */
        right: 15px;
        /* فاصله از راست */
        z-index: 1000;
    }

    /* اگه navbar 70px ارتفاع داره */
    .navbar {
        height: 90px;
    }
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* ===== دکمه ورود/ثبت‌نام در هدر ===== */
.auth-header-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 30px;
    padding: 8px 16px;
    margin-left: 10px;
    color: #fff;
    font-family: 'IranSans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.auth-header-btn i {
    font-size: 1.2rem;
    color: #FFD200;
    transition: all 0.3s ease;
}

.auth-header-btn:hover {
    background: #FFD200;
    border-color: #FFD200;
    transform: translateY(-2px);
}

.auth-header-btn:hover i {
    color: #1a1a1a;
}

.auth-header-btn:hover .auth-text {
    color: #1a1a1a;
}

.auth-header-btn.logged-in {
    background: rgba(0, 150, 214, 0.15);
    border-color: #0096D6;
}

.auth-header-btn.logged-in i {
    color: #0096D6;
}

@media (max-width: 768px) {
    .auth-header-btn {
        padding: 8px 10px;
        margin-left: 5px;
    }
    .auth-header-btn .auth-text {
        display: none;
    }
    .auth-header-btn i {
        font-size: 1.3rem;
        margin: 0;
    }
}

/* ===== پاپ‌آپ تمام صفحه ===== */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.auth-overlay.show {
    display: flex;
}

.auth-popup {
    width: 90%;
    max-width: 500px;
    background: linear-gradient(145deg, #1e1e1e, #141414);
    border: 2px solid rgba(255, 204, 0, 0.2);
    border-radius: 30px;
    padding: 40px 30px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    animation: popupShow 0.3s ease;
}

@keyframes popupShow {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.auth-close-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-close-btn:hover {
    background: #E61C23;
    transform: rotate(90deg);
}

.auth-popup-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-popup-header img {
    margin-bottom: 10px;
}

.auth-title {
    font-family: 'Pofak', sans-serif;
    color: #fff;
    margin: 15px 0 5px;
    font-size: 1.8rem;
}

.auth-subtitle {
    color: #aaa;
    font-size: 0.95rem;
}

/* تب‌ها */
.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px;
    border-radius: 50px;
}

.auth-tab {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    color: #aaa;
    font-family: 'Pofak', sans-serif;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
}

.auth-tab.active {
    background: #FFD200;
    color: #1a1a1a;
}

/* فرم‌ها */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #fff;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.auth-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    color: #fff;
    font-family: 'IranSans', sans-serif;
    transition: all 0.3s;
}

.auth-input:focus {
    outline: none;
    border-color: #FFD200;
    background: rgba(255, 255, 255, 0.05);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.checkbox-label {
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    accent-color: #FFD200;
}

.forgot-link {
    color: #FFD200;
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-link:hover {
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    padding: 16px;
    background: #FFD200;
    border: none;
    border-radius: 15px;
    color: #1a1a1a;
    font-family: 'Pofak', sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.auth-submit-btn:hover {
    background: #ffdb4d;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 204, 0, 0.3);
}

/* کد تایید */
.verification-code-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    direction: ltr;
}

.code-input {
    width: 60px;
    height: 70px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 204, 0, 0.3);
    border-radius: 15px;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s;
}

.code-input:focus {
    outline: none;
    border-color: #FFD200;
    background: rgba(255, 204, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
}

.timer-container {
    text-align: center;
    margin-top: 15px;
    color: #aaa;
    font-size: 0.95rem;
}

#timerText {
    font-family: 'Pofak', sans-serif;
    font-size: 1.2rem;
    color: #FFD200;
}

.resend-btn {
    background: transparent;
    border: 1px solid #FFD200;
    color: #FFD200;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

.resend-btn:hover {
    background: #FFD200;
    color: #1a1a1a;
}

/* جداکننده */
.auth-divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.auth-divider span {
    background: #1a1a1a;
    padding: 0 15px;
    color: #aaa;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

/* ورود با گوگل */
.social-auth {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.social-auth-btn.google {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    color: #fff;
    font-family: 'IranSans', sans-serif;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.social-auth-btn.google:hover {
    background: #DB4437;
    border-color: #DB4437;
}

/* منوی کاربر */
.user-menu {
    position: absolute;
    top: 70px;
    left: 80px;
    width: 250px;
    background: linear-gradient(145deg, #1e1e1e, #141414);
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.user-menu.show {
    display: block;
    animation: menuFadeIn 0.2s ease;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}

.user-menu-header i {
    font-size: 2.5rem;
    color: #FFD200;
}

.user-menu-name {
    color: #fff;
    font-family: 'Pofak', sans-serif;
    font-size: 1rem;
    margin-bottom: 3px;
}

.user-menu-email {
    color: #aaa;
    font-size: 0.8rem;
}

.user-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 15px 0;
}

.user-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s;
}

.user-menu a:hover {
    background: rgba(255, 204, 0, 0.1);
    color: #FFD200;
}

.user-menu a i {
    font-size: 1.1rem;
    color: #FFD200;
}

/* ریسپانسیو */
@media (max-width: 576px) {
    .auth-popup {
        padding: 30px 20px;
    }
    
    .code-input {
        width: 45px;
        height: 55px;
        font-size: 1.5rem;
    }
    
    .user-menu {
        left: 10px;
        width: 220px;
    }
}