/* ۱. تعریف فونت‌ها از پوشه fonts */
@font-face {
    font-family: 'Lyon Arabic';
    src: url('fonts/[@phonoshop]Lyon Arabic Display Black.ttf') format('truetype');
    font-weight: 900; /* Black */
}

@font-face {
    font-family: 'Lyon Arabic';
    src: url('fonts/[@phonoshop]Lyon Arabic Display Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
}

/* ۲. تنظیمات پایه صفحه */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #1a1a1a; /* رنگ پس‌زمینه برای حاشیه صفحات بزرگ */
}

.main-container {
    width: 1920px;
    height: 3500px;
    position: relative;
    margin: 0 auto;
    background-image: url('shared/background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* ۳. استایل منوی متنی A1 تا A6 */
.nav-link {
    position: absolute;
    color: black;
    text-decoration: none;
    font-family: 'Lyon Arabic', sans-serif;
    font-weight: 900; /* حالت BLACK */
    font-size: 25px; /* معادل تقریبی اندازه 10 در طراحی */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #555; /* تغییر رنگ ملایم متن هنگام هاور */
}

/* مختصات منو بر اساس درصد */
.a1 { left: 86.7%; top: 2.0%; width: 8.2%; height: 1.4%; }
.a2 { left: 76.3%; top: 2.0%; width: 6.3%; height: 1.4%; }
.a3 { left: 67.2%; top: 2.0%; width: 5.5%; height: 1.4%; }
.a4 { left: 56.7%; top: 2.1%; width: 6.1%; height: 1.4%; }
.a5 { left: 46.9%; top: 2.1%; width: 5.9%; height: 1.4%; }
.a6 { left: 34.8%; top: 2.0%; width: 8.1%; height: 1.4%; }

/* ۴. استایل دکمه‌های آیکون دار (A7 و A8) */
.btn-a7, .btn-a8 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* موشن جذاب و فنری */
    z-index: 50;
}

/* آدرس آیکون‌ها */
.btn-a7 { background-image: url('icons/a7.svg'); }
.btn-a8 { background-image: url('icons/a8.svg'); }

/* مختصات دقیق پیکسل دکمه‌ها */
.a7-pos1 { left: 716px; top: 617px; width: 285px; height: 78px; }
.a7-pos2 { left: 548px; top: 1360px; width: 285px; height: 78px; }
.a7-pos3 { left: 1397px; top: 1684px; width: 285px; height: 78px; }
.btn-a8 { left: 244px; top: 3071px; width: 319px; height: 86px; }

/* ۵. افکت‌های موشن (هاور) */
.btn-a7:hover, .btn-a8:hover {
    transform: scale(1.1); /* ۱۰ درصد بزرگتر شدن */
    filter: brightness(1.1) drop-shadow(0px 15px 20px rgba(0,0,0,0.4));
}

.btn-a7:active, .btn-a8:active {
    transform: scale(0.95); /* حس کلیک شدن */
}

/* تنظیم برای نمایشگرهای کوچک */
@media screen and (max-width: 1920px) {
    body {
        transform: scale(calc(window.innerWidth / 1920));
        transform-origin: top center;
    }
}