منوی اصلی/اقای علیرضایی - فراغیب

<html>

<!-- =========================================================
     منوی حرفه‌ای کابینت یاشیل
     YASHIL CABINET | مدیریت آقای آزادی
     Responsive + SEO Friendly
========================================================= -->

<style>

/* =========================================================
   تنظیمات اصلی
========================================================= */

:root {
    --yashil-green: #092A5E;
    --yashil-green-dark: #022b25;
    --yashil-green-light: #0b5548;
    --yashil-gold: #F5B400;
    --yashil-gold-light: #f1cf75;
    --yashil-white: #ffffff;
    --yashil-text: #FFFFFF;
    --yashil-shadow: rgba(0, 0, 0, 0.28);
}


/* =========================================================
   کانتینر اصلی منو
========================================================= */

.yashil-navbar {
    width: 100%;
    position: relative;
    z-index: 9999;

    background:
        linear-gradient(
            135deg,
            var(--yashil-green-dark),
            var(--yashil-green)
        );

    border-bottom: 1px solid rgba(216, 168, 62, 0.35);

    box-shadow:
        0 4px 20px var(--yashil-shadow);

    direction: rtl;
}


/* =========================================================
   محتوای منو
========================================================= */

.yashil-nav-container {
    width: min(1300px, 94%);
    min-height: 76px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =========================================================
   لوگو / نام برند
========================================================= */

.yashil-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--yashil-white);
    text-decoration: none;

    font-size: 22px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.yashil-brand span {
    color: var(--yashil-gold);
}

.yashil-brand:hover {
    color: var(--yashil-gold-light);
    transform: translateY(-1px);
}


/* =========================================================
   لیست اصلی منو
========================================================= */

.yashil-menu {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   آیتم‌های منو
========================================================= */

.yashil-menu > li {
    position: relative;
}

.yashil-menu > li > a {
    position: relative;

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

    min-height: 76px;

    padding: 0 22px;

    color: var(--yashil-text);
    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition:
        color 0.3s ease,
        background 0.3s ease;
}


/* خط طلایی زیر لینک */

.yashil-menu > li > a::after {
    content: "";

    position: absolute;

    right: 50%;
    bottom: 14px;

    width: 0;
    height: 2px;

    background: var(--yashil-gold);

    transform: translateX(50%);

    transition:
        width 0.35s ease;
}


.yashil-menu > li > a:hover {
    color: var(--yashil-gold-light);
}


.yashil-menu > li > a:hover::after {
    width: 55%;
}


/* =========================================================
   فلش محصولات
========================================================= */

.yashil-dropdown-link {
    gap: 8px;
}

.yashil-arrow {
    font-size: 11px;

    transition:
        transform 0.35s ease;
}


/* چرخش فلش هنگام Hover */

.yashil-dropdown:hover
.yashil-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   منوی کشویی محصولات
========================================================= */

.yashil-dropdown-menu {

    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: 245px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background:
        linear-gradient(
            145deg,
            #063b32,
            #022b25
        );

    border:
        1px solid rgba(216, 168, 62, 0.45);

    border-radius: 0 0 14px 14px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.35);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-12px)
        scale(0.97);

    transform-origin: top right;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.35s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   نمایش زیرمنو
========================================================= */

.yashil-dropdown:hover
.yashil-dropdown-menu {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   لینک‌های زیرمنو
========================================================= */

.yashil-dropdown-menu li {
    margin: 0;
    padding: 0;
}

.yashil-dropdown-menu a {

    display: flex;
    align-items: center;

    min-height: 48px;

    padding: 0 15px;

    color: var(--yashil-text);

    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

    border-radius: 9px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        padding-right 0.3s ease;
}


.yashil-dropdown-menu a:hover {

    color: var(--yashil-gold-light);

    background:
        rgba(216, 168, 62, 0.12);

    padding-right: 21px;
}


/* =========================================================
   دکمه ثبت سفارش
========================================================= */

.yashil-order-link {

    margin-right: 8px;

    padding:
        11px 23px !important;

    min-height: auto !important;

    color: #102d27 !important;

    background:
        linear-gradient(
            135deg,
            var(--yashil-gold-light),
            var(--yashil-gold)
        );

    border-radius: 50px;

    box-shadow:
        0 5px 15px rgba(216, 168, 62, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}


.yashil-order-link::after {
    display: none !important;
}


.yashil-order-link:hover {

    color: #102d27 !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(216, 168, 62, 0.35);
}


/* =========================================================
   خط طلایی تزئینی بالای منو
========================================================= */

.yashil-navbar::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--yashil-gold),
            transparent
        );
}


/* =========================================================
   تبلت
========================================================= */

@media (max-width: 950px) {

    .yashil-nav-container {
        width: 96%;
    }

    .yashil-menu {
        gap: 2px;
    }

    .yashil-menu > li > a {
        padding: 0 13px;
        font-size: 15px;
    }

    .yashil-brand {
        font-size: 19px;
    }

}


/* =========================================================
   موبایل
   کل منو در موبایل مخفی می‌شود
========================================================= */

@media (max-width: 768px) {

    .yashil-navbar {
        display: none !important;
    }

}

</style>


<!-- =========================================================
     HTML MENU
========================================================= -->

<nav
    class="yashil-navbar"
    aria-label="منوی اصلی کابینت یاشیل"
>

    <div class="yashil-nav-container">


        <!-- نام برند -->

        <a
            href="/"
            class="yashil-brand"
            title="کابینت یاشیل"
            aria-label="صفحه اصلی کابینت یاشیل"
        >
            آقای <span>علیرضایی</span>
        </a>


        <!-- منوی اصلی -->

        <ul class="yashil-menu">


            <!-- خانه -->

            <li>
                <a
                    href="/"
                    title="صفحه اصلی کابینت یاشیل"
                >
                    خانه
                </a>
            </li>


            <!-- =================================================
                 محصولات + منوی کشویی
            ================================================== -->

            <li class="yashil-dropdown">

                <a
                    href="/products/"
                    class="yashil-dropdown-link"
                    title="مشاهده محصولات کابینت یاشیل"
                    aria-haspopup="true"
                >

                    محصولات

                    <span
                        class="yashil-arrow"
                        aria-hidden="true"
                    >
                        ▼
                    </span>

                </a>


                <!-- زیرمنوی محصولات -->

                <ul
                    class="yashil-dropdown-menu"
                    aria-label="دسته بندی محصولات"
                >

                    <li>
                        <a
                            href="/products/mdf/"
                            title="بسته‌بندی و صنایع غذایی"
                        >
                            بسته‌بندی و صنایع غذایی
                        </a>
                    </li>


                    <li>
                        <a
                            href="/products/acrylic/"
                            title="صنایع پلاستیک و لاستیک"
                        >
                            صنایع پلاستیک و لاستیک
                        </a>
                    </li>


                    <li>
                        <a
                            href="/products/aluminium/"
                            title="کابینت آلومینیومی"
                        >
                            کابینت آلومینیومی
                        </a>
                    </li>


                    <li>
                        <a
                            href="/products/high-gloss/"
                            title="چاپ و تبلیغات"
                        >
                            چاپ و تبلیغات
                        </a>
                    </li>

                </ul>

            </li>


            <!-- نمونه کار -->

            <li>
                <a
                    href="/portfolio/"
                    title="نمونه کارهای کابینت یاشیل"
                >
                    نمونه کار
                </a>
            </li>


            <!-- ثبت سفارش -->

            <li>
                <a
                    href="/order/"
                    class="yashil-order-link"
                    title="ثبت سفارش طراحی و ساخت کابینت"
                    aria-label="ثبت سفارش کابینت یاشیل"
                >
                    ثبت سفارش
                </a>
            </li>


        </ul>

    </div>

</nav>

</html>