@font-face {
    font-family: 'Rabie';
    src: url('../font/Rabie-Semibold.eot');
    src: url('../font/Rabie-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../font/Rabie-Semibold.woff2') format('woff2'),
        url('../font/Rabie-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rabie';
    src: url('../font/Rabie-Extralight.eot');
    src: url('../font/Rabie-Extralight.eot?#iefix') format('embedded-opentype'),
        url('../font/Rabie-Extralight.woff2') format('woff2'),
        url('../font/Rabie-Extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rabie';
    src: url('../font/Rabie-Extrabold.eot');
    src: url('../font/Rabie-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('../font/Rabie-Extrabold.woff2') format('woff2'),
        url('../font/Rabie-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rabie';
    src: url('../font/Rabie-Light.eot');
    src: url('../font/Rabie-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/Rabie-Light.woff2') format('woff2'),
        url('../font/Rabie-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rabie';
    src: url('../font/Rabie-Regular.eot');
    src: url('../font/Rabie-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/Rabie-Regular.woff2') format('woff2'),
        url('../font/Rabie-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RabieVariableW05';
    src: url('../font/RabieVariableW05-Extrabold.eot');
    src: url('../font/RabieVariableW05-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('../font/RabieVariableW05-Extrabold.woff2') format('woff2'),
        url('../font/RabieVariableW05-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rabie';
    src: url('../font/Rabie-Bold.eot');
    src: url('../font/Rabie-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/Rabie-Bold.woff2') format('woff2'),
        url('../font/Rabie-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rabie';
    src: url('../font/Rabie-Medium.eot');
    src: url('../font/Rabie-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/Rabie-Medium.woff2') format('woff2'),
        url('../font/Rabie-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* تنظیمات پایه */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none; /* حذف خط زیر لینک‌ها */
}

body {
    background-image: url('../img/back.png');
    background-blend-mode: normal;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    min-height: 100vh;
    font-family: 'Rabie', Arial Rounded MT Bold;
    margin: 0;
    overflow-x: hidden;
}

/* برای موبایل بهتر است اتچمنت فیکس را برداریم چون در برخی گوشی‌ها سنگین است */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

.main-container {
    padding: 40px 20px;
    text-align: center;
    position: relative;
}

.logo { font-size: 2.5rem; margin-bottom: 5px; font-weight: 900; }
.logo span { color: #ff00ff; }
.title { font-size: 1.2rem; margin-bottom: 40px; opacity: 0.9; }

/* گرید ریسپانسیو */
.channels-grid {
    display: grid;
    grid-template-columns: 1fr; /* موبایل: تک ستونه */
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

/* استایل کارت‌ها */
.card {
    border-radius: 30px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: block;
    cursor: pointer;
}

.card:hover { 
    transform: translateY(-10px) scale(1.02); 
    border-color: white;
}

.img-box {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
}

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

.card-info { padding: 15px 20px 10px 20px; color: white; }
.card-info h3 { font-size: 1.3rem; margin-bottom: 5px; }
.card-info p { font-size: 0.9rem; opacity: 0.8; }

/* تم‌های رنگی مطابق طرح جدید */
.green { background: #4ecb71; }
.blue { background: #40b0f8; }
.yellow { background: #f9bc2c; }
.red { background: #f15b5b; }

/* مدیا کوئری‌ها */
@media (min-width: 650px) {
    .channels-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .channels-grid { grid-template-columns: repeat(4, 1fr); }
}

/* انیمیشن موشک */
.rocket {
    position: absolute;
    top: 40px;
    left: 10%;
    font-size: 2.5rem;
    animation: float 4s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
}

footer {
    font-weight: 200;
    font-size: 14px;
    line-height: 25px;
}

a {
    color: rgb(255, 255, 255);
}