@import url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css");
/* متغیرهای CSS برای یکپارچگی */
:root {
  --primary-color: #f9004d;
  --primary-light: rgba(249, 0, 77, 0.1);
  --secondary-color: #191919;
  --dark-color: #101010;
  --light-color: #ffffff;
  --gray-color: #fcfcfc;
  --transition: all 0.3s ease;
  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --border-radius: 12px;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Vazirmatn, sans-serif;
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: var(--dark-color);
    color: var(--light-color);
    line-height: 1.6;
    overflow-x: hidden;
}
h1 {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
}
h2{
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
h3{
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
h4{
    font-size: 1.5rem;
    font-weight: 500;
}
h5{
    font-size: 1.3rem;
    font-weight: 500;
}
p{
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--gray-color);
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center; 
}
/* header */
header {
    padding: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(10px);
    padding: 20px 0;
    transition: var(--transition);
}
header.scrolled {
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.navbar {
    display: flex;
    justify-content: center; 
    align-items: center;     
    width: 100%;             
    padding-top: 10px;       
    direction: rtl;
}

.logo {
    font-size: 2rem;
    font-weight: 800;
    color: var(--light-color);
    text-decoration: none;
}
.highlight {
    color: var(--primary-color);
}
.nav-links {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 5px;                /* فاصله دقیقاً ۵ پیکسلی بین گزینه‌ها (یا 5% اگر فاصله زیاد می‌خواهید) */
}

.nav-links a{
color: var(--light-color);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
position: relative;
padding: 5px 0;
}
.nav-links a:hover{
    color: var(--primary-color);
}
.nav-links a::afte{
    content: "خان";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transform: var(--transition);
}
.nav-links a:hover::after {
    width: 100%;
}
.btn{
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid transparent;
    transition: var(--transition);
    cursor: pointer;
    font-size: 1rem;
}
.btn:hover{
    background-color: transparent;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: var(--box-shadow);
}

/* این بخش را کاملاً حذف کنید و جایش چیزی ننویسید */
#header, .container, body {
    padding-right: 50px ;
    box-sizing: border-box;
}

/* hero */
.hero {
    min-height: 60vh !important;
    position: relative !important;
    overflow: hidden !important;
    /* اعمال هاله قرمز درخشان متالیک دقیقا مشابه عکس پروفایل نمونه */
    background: radial-gradient(circle at 50% 15%, #d60000 0%, #610000 30%, #120000 60%, #101010 100%) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    padding: 120px 0 60px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* تنظیمات عکس دلخواه شما - کاملا ریسپانسیو و خودکار برای مانیتور و گوشی */
.profile-avatar {
    display: block !important;
    width: 60vw !important;       /* در موبایل بر اساس عرض صفحه کوچک می‌شود */
    max-width: 290px !important;   /* حداکثر اندازه در کامپیوتر */
    min-width: 175px !important;   /* حداقل اندازه در گوشی‌های خیلی کوچک */
    height: auto !important;       /* حفظ تناسب ابعاد برای دفرمه نشدن عکس */
    object-fit: contain !important;
    margin: 0 auto 0px auto !important; /* وسط‌چین کردن خودکار و ایجاد فاصله با متن زیر */
    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.75)) !important; /* سایه نرم سه بعدی پشت کاراکتر */
    transition: all 0.3s ease !important;
}

.container {
  /* ایجاد ۳۰ درصد فاصله از چپ و راست (۱۵٪ از هر طرف) */
  padding-left: 15%;
  padding-right: 15%;
  
  /* تراز کردن متن‌ها در مرکز */
  text-align: center; 
}

html, body {
  max-width: 100%;
  overflow-x: hidden; /* قفل کردن اسکرول چپ و راست */
  overflow-y: auto;   /* مجاز بودن اسکرول بالا و پایین */
}

.hero-content h3 {
    margin-bottom: 2.5rem;
    color: #ddd;
    animation: fadeUp 1s ease 0.6s both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.typing-effect {
    position: relative;
    display: inline-block;
}

.typing-effect::after {
    content: "|";
    position: absolute;
    left: -5px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* کانتینر اصلی که دو باکس شیشه‌ای را بغل هم نگه می‌دارد */
.hero-stats {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    padding: 10px;
    direction: rtl; /* راست‌چین کردن چیدمان */
}

/* باکس‌های شیشه‌ای جدا جدا برای هر متن */
.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 25px 20px;
    
    /* فرم دهی به کپسول‌ها (گرد کردن لبه‌ها) */
    border-radius: 20px; 
    
    /* افکت شیشه‌ای مات و مستقل برای هر باکس */
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* خط باریک درخشان دور هر شیشه و سایه زیر آن */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    
    transition: all 0.3s ease;
}

/* افکت جذاب زمانی که ماوس روی هر شیشه می‌رود */
.stat-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* استایل عددهای طلایی (7 و 1M) */
.stat-number {
    font-size: 2.4rem;
    font-weight: bold;
    color: #ffaa00; /* رنگ طلایی گیمینگ شما */
    margin-bottom: 10px;
    text-shadow: 0 2px 12px rgba(255, 170, 0, 0.3);
}

/* استایل متن‌های داخل شیشه */
.stat-label {
    font-size: 1.1rem;
    color: #ffffff;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* جابجایی خودکار به حالت زیر هم در صفحات کوچک موبایل */
@media (max-width: 768px) {
    .hero-stats {
        flex-direction: column;
        gap: 15px;
    }
}

/* استایل بخش برنامه و زمان‌بندی */
.schedule-section {
    background-color: #0b0b0d; /* پس‌زمینه تیره هماهنگ با بخش قبلی */
    color: #fff;
    padding: 70px 20px;
    direction: rtl;
}

.schedule-container {
    max-width: 1100px;
    margin: 0 auto;
}

.schedule-title {
    font-size: 1.8rem;
    color: #ff3333; /* رنگ قرمز شاخص پورتفولیو شما */
    text-align: center;
    margin-bottom: 10px;
}

.schedule-subtitle {
    color: #aaa;
    text-align: center;
    margin-bottom: 40px;
    font-size: 1rem;
}

/* قرارگیری دو باکس در کنار هم */
.schedule-content {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* برای نمایش درست در موبایل */
}

/* استایل کلی هر دو باکس */
.schedule-box {
    flex: 1;
    min-width: 300px;
    background-color: #141419;
    border-radius: 12px;
    padding: 30px;
    border-right: 4px solid #ff3333; /* خط عمودی قرمز سمت راست باکس‌ها */
}

.schedule-box h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.info-desc {
    color: #bbb;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* لیست پلتفرم‌ها */
.platforms-list {
    list-style: none;
}

.platforms-list li {
    margin-bottom: 12px;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.platforms-list strong {
    color: #ff3333;
}

/* بخش آیتم‌های زمانی */
.time-slots {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.time-item {
    background-color: #1c1c24;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.time-item .day {
    font-weight: bold;
    color: #fff;
}

.time-item .hour {
    color: #ff5555;
    font-size: 0.9rem;
}

.time-item .subject {
    color: #aaa;
    font-size: 0.85rem;
}

.platforms-list li {
    /* پس‌زمینه نیمه شفاف تیره */
    background: rgba(255, 255, 255, 0.06);
    
    /* افکت اصلی مات‌کننده شیشه‌ای */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* گرد کردن لبه‌های هر باکس */
    border-radius: 8px;
    
    /* خط مرزی بسیار باریک و شفاف برای حس طبیعی شیشه */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* ایجاد فاصله عمودی بین سه باکس */
    margin-bottom: 12px;
    
    /* ایجاد فاصله از لبه‌های داخلی باکس تا متن */
    padding: 12px 16px;
    
    /* حذف نقطه یا دایره پیش‌فرض لیست */
    list-style: none;
    
    /* سایه ملایم پشت باکس‌ها */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* انیمیشن نرم برای تغییرات */
    transition: all 0.3s ease;
}

/* افکت اختیاری: وقتی موس روی هر باکس می‌رود کمی روشن‌تر شود */
.platforms-list li:hover {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-share {
  text-align: center;
  margin: 20px 0;
}
.social-share .icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  margin: 0 5px;
  color: #fff;
  font-size: 20px;
  background-color: #ccc; /* رنگ پیش‌فرض */
}
/* رنگ اختصاصی هر شبکه اجتماعی */
.instagram { background-color: #f70455; }
.telegram { background-color: #01a9fd; }
.whatsapp { background-color: hsl(0, 0%, 0%); }
.youtube { background-color: #FF0000; }

.your-container-class {
    max-width: 1200px; /* یا هر عرضی که اکنون دارد */
    margin-left: auto;
    margin-right: auto;
}

/* حل مشکل کج شدن و یک‌طرفه بودن سایت */
.container, .contain, .hero-content {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    float: none !important;
}

body {
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

header, .hero, .schedule-section {
    width: 100vw !important;
}

/* استانداردسازی و کوچک و بزرگ شدن خودکار متن‌ها در تمام دیوایس‌ها */
html {
    font-size: calc(14px + 0.3vw) !important;
}

body {
    font-size: 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* هماهنگ‌سازی تیترهای بزرگ در موبایل و تبلت */
@media (max-width: 768px) {
    h1 { font-size: 2.2rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.2rem !important; }
    p { font-size: 1rem !important; }
    .btn { padding: 10px 24px !important; font-size: 0.9rem !important; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }
    p { font-size: 0.95rem !important; }
}

/* کدهای همسان‌سازی جهانی و رفع تمام باگ‌های چیدمان */
*, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

html, body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* جلوگیری قطعی از اسکرول خوردن به چپ و راست */
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

/* حل باگ جابجایی کانتینرها و عناصر اصلی در مانیتورها و تبلت‌ها */
.container, .contain, .schedule-container, .hero-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* اصلاح چیدمان افقی باکس‌های آماری و زمان‌بندی در دسکتاپ */
@media (min-width: 769px) {
    .hero-stats, .schedule-content {
        flex-direction: row-reverse !important; /* راست‌چین کردن اصولی ردیف‌ها */
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    .stat-item, .schedule-box {
        flex: 1 1 300px !important;
    }
}

/* حل باگ منوی بالا (هدر) و قرارگیری درست در همه دیوایس‌ها */
header, .navbar {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    direction: rtl !important;
}

.nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* اصلاح تصاویر و بک‌گراندها برای جلوگیری از بریدگی */
img, .hero {
    background-size: cover !important;
    background-position: center !important;
}

/* رفع باگ فاصله زیاد بین باکس‌های شیشه‌ای و متن شبکه‌های اجتماعی */
.hero-stats {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
}

.hero-content h3, 
.hero-content + h3,
h3:has(+ .social-share),
h3 {
    margin-top: 1px !important;
    margin-bottom: 10px !important;
}

.social-share {
    margin-top: 1px !important;
}

/* ==========================================================================
   تغییر پس‌زمینه سایت به حالت قرمز درخشان و مشکی گیمینگ (مطابق تصویر)
   ========================================================================== */
body {
    background: radial-gradient(circle at top center, #b30000 0%, #4a0000 35%, #000000 75%, #000000 100%) !important;
    background-attachment: fixed !important; /* این خط باعث می‌شود با اسکرول کردن، هاله قرمز در بالای صفحه ثابت بماند */
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* اگر در بخش .hero بک‌گراند دیگری وجود دارد، آن را شفاف می‌کنیم تا طرح جدید دیده شود */
.hero {
    background: transparent !important;
}

.profile-avatar {
    position: relative !important;
    z-index: 9999 !important; /* لود شدن عکس در بالاترین لایه ممکن */
    opacity: 1 !important;    /* اطمینان از شفاف نبودن عکس */
}

/* --- حل مشکل دو خطه شدن منو در موبایل --- */

/* تنظیم هدر برای نمایش افقی در وسط */
#header {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 15px 0 !important;
}

.navbar {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* اجبار آیتم‌ها به ماندن در یک خط افقی در همه صفحه‌ها */
.nav-links {
    display: flex !important;
    flex-direction: row-reverse !important; /* راست‌چین کردن متن‌های فارسی */
    flex-wrap: nowrap !important;          /* جلوگیری از شکستن منو به خط دوم */
    justify-content: center !important;    /* وسط‌چین کردن کل منو */
    align-items: center !important;
    gap: 12px !important;                  /* فاصله بین گزینه‌ها در موبایل */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* استایل نوشته‌ها برای جلوگیری از شکستن کلمات */
.nav-links a, .nav-links li {
    font-size: 13px !important;            /* کمی کوچک‌تر کردن سایز فونت مخصوص موبایل تا همه جا شوند */
    white-space: nowrap !important;        /* جلوگیری از شکستن کلماتی مثل (فوریو بابا) به دو خط */
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: Tahoma, Arial, sans-serif;
}

/* --- هم‌اندازه کردن متن انگلیسی با متن فارسی --- */

/* بزرگ‌تر کردن کلمه 4 U B A B A داخل تگ h1 */
h1 span.highlight {
    font-size: 42px !important;    /* سایز فونت را بزرگ‌تر می‌کند تا هم‌اندازه متن فارسی شود */
    font-weight: 900 !important;   /* ضخامت متن را به حداکثر می‌رساند */
    display: inline-block !important;
    margin-top: 10px !important;   /* ایجاد یک فاصله ظریف با متن بالایی */
    letter-spacing: 2px !important;/* ایجاد فاصله شیک بین حروف انگلیسی */
    color: #ffcc00 !important;     /* رنگ طلایی (اگر می‌خواهید سفید باشد این خط را پاک کنید) */
}

/* برای اطمینان از اینکه متن فارسی بالایی هم سایز مناسبی دارد */
.hero-content h1 {
    font-size: 42px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;   /* تنظیم فاصله عمودی بین دو خط فارسی و انگلیسی */
}

/* --- انتقال منوها به بالای متن سلام من هستم در وسط صفحه --- */

/* ۱. وسط‌چین کردن کامل هدر در بالای صفحه */
#header {
    position: relative !important; /* تغییر حالت از absolute به relative برای قرارگیری طبیعی در جریان صفحه */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* وسط‌چین کردن افقی */
    align-items: center !important;
    margin-top: 10px !important;       /* فاصله از سقف کل صفحه */
    margin-bottom: 1px !important;    /* ایجاد یک فاصله شیک تا متن سلام من هستم */
    z-index: 99999 !important;
}

/* ۲. تنظیم باکس اصلی منو */
.navbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
}

/* ۳. بغل هم چیدن گزینه‌های منو به صورت افقی و بدون شکستگی */
.nav-links {
    display: flex !important;
    flex-direction: row-reverse !important; /* راست‌چین کردن متون فارسی */
    flex-wrap: nowrap !important;          /* جلوگیری از دو خطه شدن منو */
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;                  /* فاصله بین منوها */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ۴. استایل نوشته‌های منو */
.nav-links a, .nav-links li {
    color: #1eff00 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-family: Tahoma, Arial, sans-serif;
    white-space: nowrap !important;        /* جلوگیری از شکستن کلمات */
}

/* تنظیم موقعیت باکس آواتار در وسط */
.avatar-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 1px !important;    /* فاصله از منوهای بالای صفحه */
    margin-bottom: 2px !important; /* فاصله تا متن سلام من هستم */
}

/* استایل دایره‌ای و شیک عکس آواتار شما */
.profile-avatar {
    width: 120px !important;        /* عرض عکس */
    height: 120px !important;       /* ارتفاع عکس */
    border-radius: 100% !important;  /* تبدیل به دایره کامل */
    border: 4px solid #ffffff !important; /* خط دور سفید (می‌توانید به #ffcc00 طلایی تغییر دهید) */
    object-fit: cover !important;   /* جلوگیری از دفرمه شدن عکس */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; /* سایه زیر عکس */
    display: block !important;
}

/* کد نهایی و دور زدن تمام محدودیت‌ها برای کادر شما */
.YOUR-CLASS-NAME {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: none !important;
    border: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* کد حل مشکل فاصله آواتار و هدر */
header {
    position: sticky !important;
}

.hero {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

.avatar-container {
    margin-top: 10px !important;
}

/* کدهای نهایی و کاملاً اصلاح‌شده برای وسط‌چین و کوچک‌سازی دکمه‌ها */

header div[style*="display: flex"], 
header div[style*="display: Flex"],
header .nav-links-container,
header div div[style*="display: Flex"] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    width: max-content !important;
    max-width: 95% !important;
}

header div[style*="display: flex"] a,
header div[style*="display: Flex"] a,
header .nav-links-container a,
header div div[style*="display: Flex"] a {
    font-size: 0.85rem !important; 
    padding: 6px 12px !important; 
    white-space: nowrap !important; 
    display: inline-block !important;
}

@media (max-width: 768px) {
    header div[style*="display: flex"], 
    header div[style*="display: Flex"],
    header .nav-links-container,
    header div div[style*="display: Flex"] {
        gap: 5px !important; 
    }
    header div[style*="display: flex"] a,
    header div[style*="display: Flex"] a,
    header .nav-links-container a,
    header div div[style*="display: Flex"] a {
        font-size: 0.7rem !important; 
        padding: 4px 8px !important;  
    }
}

@media (max-width: 400px) {
    header div[style*="display: flex"] a,
    header div[style*="display: Flex"] a,
    header .nav-links-container a,
    header div div[style*="display: Flex"] a {
        font-size: 0.6rem !important;
        padding: 3px 6px !important;
    }
}