/* =========================================================
   DANIAL.DEV — PREMIUM HEADER
   Fullscreen Mobile / Glass / Smooth / RTL
========================================================= */

.site-header {

    --blue: #1464d8;
    --blue-dark: #0a3f91;
    --blue-light: #4d91ff;

    --dark: #092653;
    --text: #20324e;
    --muted: #8091a8;

    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    direction: rtl;

    background: transparent;

    border-bottom: 1px solid transparent;

    transition:
        background .5s cubic-bezier(.22,1,.36,1),
        border-color .5s ease,
        box-shadow .5s cubic-bezier(.22,1,.36,1),
        backdrop-filter .5s ease,
        -webkit-backdrop-filter .5s ease;

}


/* =========================================================
   TOP LIGHT
========================================================= */

.site-header::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    opacity: .55;

    pointer-events: none;

}


/* =========================================================
   SCROLLED
========================================================= */

.site-header.scrolled {

    background:
        rgba(255,255,255,.88);

    backdrop-filter:
        blur(26px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(160%);

    border-bottom:
        1px solid rgba(20,100,216,.08);

    box-shadow:
        0 10px 40px rgba(10,45,90,.07),
        0 1px 0 rgba(255,255,255,.85) inset;

}


/* =========================================================
   CONTAINER
========================================================= */

.header-container {

    position: relative;

    width:
        min(
            1280px,
            calc(100% - 56px)
        );

    height: 82px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =========================================================
   LOGO
========================================================= */

.site-logo {

    position: relative;

    display: flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;

    text-decoration: none;

    z-index: 10002;

}


.site-logo::before {

    content: "";

    position: absolute;

    width: 65px;
    height: 65px;

    right: -10px;

    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20,100,216,.13),
            transparent 70%
        );

    filter: blur(12px);

    opacity: 0;

    transition:
        opacity .4s ease;

    pointer-events: none;

}


.site-logo:hover::before {

    opacity: 1;

}


/* =========================================================
   LOGO MARK
========================================================= */

.logo-mark {

    position: relative;

    width: 45px;
    height: 45px;

    display: flex;

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

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(224,236,255,.88)
        );

    border:
        1px solid rgba(20,100,216,.12);

    box-shadow:
        0 8px 25px rgba(20,100,216,.10),
        0 1px 0 rgba(255,255,255,.9) inset;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .35s ease;

}


.logo-mark::after {

    content: "";

    position: absolute;

    top: -120%;
    right: -100%;

    width: 55%;
    height: 320%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    opacity: 0;

    transition:
        transform .75s ease,
        opacity .3s ease;

}


.site-logo:hover .logo-mark {

    transform:
        translateY(-2px)
        rotate(-2deg)
        scale(1.03);

    border-color:
        rgba(20,100,216,.2);

    box-shadow:
        0 14px 34px rgba(20,100,216,.16),
        0 1px 0 rgba(255,255,255,.9) inset;

}


.site-logo:hover .logo-mark::after {

    opacity: 1;

    transform:
        translateX(-260%)
        rotate(25deg);

}


.logo-mark img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    position: relative;

    z-index: 1;

}


/* =========================================================
   LOGO TEXT
========================================================= */

.logo-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1;

}


.logo-text strong {

    color:
        var(--dark);

    font-size: 15px;

    font-weight: 950;

    letter-spacing: -.3px;

}


.logo-text small {

    margin-top: 5px;

    color:
        var(--muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    direction: ltr;

    text-align: right;

    text-transform: uppercase;

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    display: flex;

    align-items: center;

    gap: 3px;

}


.nav-link {

    position: relative;

    min-height: 42px;

    display: flex;

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

    padding:
        0 15px;

    border-radius: 13px;

    color:
        var(--text);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;

}


.nav-link::after {

    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 10px;

    background:
        rgba(20,100,216,.045);

    transform:
        scale(.7);

    opacity: 0;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        opacity .35s ease;

    z-index: -1;

}


.nav-link::before {

    content: "";

    position: absolute;

    right: 50%;

    bottom: 4px;

    width: 0;

    height: 2px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue-light)
        );

    transform:
        translateX(50%);

    transition:
        width .35s cubic-bezier(.22,1,.36,1);

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--blue);

}


.nav-link:hover::after,
.nav-link.active::after {

    opacity: 1;

    transform:
        scale(1);

}


.nav-link:hover::before,
.nav-link.active::before {

    width: 22px;

}


/* =========================================================
   ACTIONS
========================================================= */

.header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    z-index: 10002;

}


/* =========================================================
   CTA
========================================================= */

.header-cta {

    position: relative;

    min-height: 44px;

    display: inline-flex;

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

    gap: 9px;

    padding:
        0 18px;

    overflow: hidden;

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1769df,
            #0c4db1
        );

    text-decoration: none;

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 9px 24px rgba(20,100,216,.20),
        0 1px 0 rgba(255,255,255,.22) inset;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;

}


.header-cta:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 32px rgba(20,100,216,.28);

}


.header-cta svg {

    transition:
        transform .35s ease;

}


.header-cta:hover svg {

    transform:
        translateX(-4px);

}


/* =========================================================
   HAMBURGER
========================================================= */

.hamburger {

    position: relative;

    width: 45px;
    height: 45px;

    padding: 0;

    display: none;

    flex-direction: column;

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

    gap: 5px;

    border:
        1px solid rgba(20,100,216,.11);

    border-radius: 14px;

    background:
        rgba(255,255,255,.65);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    cursor: pointer;

    box-shadow:
        0 7px 24px rgba(20,60,110,.06);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .35s ease,
        box-shadow .35s ease;

    z-index: 10003;

}


.hamburger:active {

    transform:
        scale(.91);

}


.hamburger span {

    width: 19px;
    height: 2px;

    display: block;

    border-radius: 100px;

    background:
        #15345e;

    transition:
        transform .5s cubic-bezier(.68,-.3,.265,1.3),
        opacity .25s ease,
        width .35s ease,
        background .3s ease;

}


.hamburger.active {

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 10px 30px rgba(10,50,100,.10);

}


.hamburger.active span {

    background:
        var(--blue);

}


.hamburger.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.hamburger.active span:nth-child(2) {

    opacity: 0;

    width: 0;

}


.hamburger.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =========================================================
   MOBILE MENU
   FULL SCREEN
========================================================= */

.mobile-menu {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100dvh;

    max-width: none;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(20,100,216,.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(77,145,255,.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbff 55%,
            #eef5ff 100%
        );

    backdrop-filter:
        blur(30px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(150%);

    border: none;

    box-shadow: none;

    transform:
        translate3d(0,-100%,0);

    visibility:
        hidden;

    opacity: 0;

    transition:
        transform .72s cubic-bezier(.77,0,.18,1),
        opacity .45s ease,
        visibility .72s;

    z-index: 10000;

}


.mobile-menu.active {

    transform:
        translate3d(0,0,0);

    visibility:
        visible;

    opacity:
        1;

}


/* =========================================================
   MOBILE DECORATIONS
========================================================= */

.mobile-menu::before {

    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    top: -170px;
    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20,100,216,.14),
            transparent 68%
        );

    filter:
        blur(18px);

    pointer-events: none;

}


.mobile-menu::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -150px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(77,145,255,.10),
            transparent 70%
        );

    filter:
        blur(18px);

    pointer-events: none;

}


/* =========================================================
   MOBILE INNER
========================================================= */

.mobile-menu-inner {

    position: relative;

    z-index: 2;

    min-height: 100dvh;

    padding:
        105px 25px 35px;

    display:
        flex;

    flex-direction:
        column;

}


/* =========================================================
   MOBILE TOP
========================================================= */

.mobile-menu-top {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        25px;

    color:
        #899ab0;

    font-size:
        11px;

    font-weight:
        900;

}


.mobile-menu-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(20,100,216,.18),
            transparent
        );

}


/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-nav {

    display:
        flex;

    flex-direction:
        column;

}


.mobile-nav-link {

    position: relative;

    min-height:
        76px;

    display:
        grid;

    grid-template-columns:
        42px 1fr 30px;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 5px;

    color:
        #11294b;

    text-decoration:
        none;

    border-bottom:
        1px solid rgba(20,100,216,.075);

    font-size:
        20px;

    font-weight:
        950;

    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        color .3s ease,
        padding .35s ease,
        opacity .5s ease,
        transform .55s cubic-bezier(.22,1,.36,1);

}


.mobile-menu.active .mobile-nav-link {

    opacity:
        1;

    transform:
        translateY(0);

}


.mobile-menu.active .mobile-nav-link:nth-child(1) {
    transition-delay: .10s;
}

.mobile-menu.active .mobile-nav-link:nth-child(2) {
    transition-delay: .16s;
}

.mobile-menu.active .mobile-nav-link:nth-child(3) {
    transition-delay: .22s;
}

.mobile-menu.active .mobile-nav-link:nth-child(4) {
    transition-delay: .28s;
}

.mobile-menu.active .mobile-nav-link:nth-child(5) {
    transition-delay: .34s;
}


.mobile-nav-link:hover,
.mobile-nav-link.active {

    color:
        var(--blue);

    padding-right:
        12px;

}


.mobile-number {

    color:
        #a2afc1;

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    direction:
        ltr;

    transition:
        color .3s ease;

}


.mobile-nav-link:hover .mobile-number,
.mobile-nav-link.active .mobile-number {

    color:
        var(--blue);

}


.mobile-nav-link svg {

    width:
        22px;

    height:
        22px;

    color:
        #a1aec0;

    opacity:
        .45;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        color .3s ease,
        opacity .3s ease;

}


.mobile-nav-link:hover svg,
.mobile-nav-link.active svg {

    color:
        var(--blue);

    opacity:
        1;

    transform:
        translateX(-7px);

}


/* =========================================================
   MOBILE BOTTOM
========================================================= */

.mobile-menu-bottom {

    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    padding-top:
        38px;

    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        opacity .55s ease .42s,
        transform .6s cubic-bezier(.22,1,.36,1) .42s;

}


.mobile-menu.active .mobile-menu-bottom {

    opacity:
        1;

    transform:
        translateY(0);

}


.mobile-menu-bottom small {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #8495ab;

    font-size:
        11px;

    font-weight:
        800;

}


.mobile-menu-bottom strong {

    display:
        block;

    margin-bottom:
        20px;

    color:
        #0d2850;

    font-size:
        25px;

    line-height:
        1.4;

    font-weight:
        950;

    letter-spacing:
        -.5px;

}


.mobile-menu-bottom a {

    position:
        relative;

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        17px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #1769df,
            #0c4db1
        );

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        950;

    box-shadow:
        0 16px 35px rgba(20,100,216,.22);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mobile-menu-bottom a::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    right: -100%;

    width: 65%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.2),
            transparent
        );

    transition:
        right .65s ease;

}


.mobile-menu-bottom a:hover::before {

    right:
        150%;

}


.mobile-menu-bottom a:active {

    transform:
        scale(.97);

}


/* =========================================================
   OVERLAY
========================================================= */

.menu-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        9997;

    background:
        rgba(5,25,55,.18);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .4s ease,
        visibility .4s ease;

}


.menu-overlay.active {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   BODY LOCK
========================================================= */

body.menu-open {

    overflow:
        hidden;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .header-container {

        width:
            calc(100% - 40px);

    }

    .nav-link {

        padding:
            0 10px;

        font-size:
            12px;

    }

    .header-cta {

        padding:
            0 14px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    .header-container {

        width:
            calc(100% - 28px);

        height:
            72px;

    }


    .desktop-nav {

        display:
            none;

    }


    .header-cta {

        display:
            none;

    }


    .hamburger {

        display:
            flex;

    }


    .site-header.scrolled {

        background:
            rgba(255,255,255,.93);

        backdrop-filter:
            blur(25px)
            saturate(150%);

        -webkit-backdrop-filter:
            blur(25px)
            saturate(150%);

        box-shadow:
            0 8px 30px rgba(10,45,90,.07);

    }


    /*
     * وقتی منوی تمام صفحه باز است،
     * هدر اصلی شفاف می‌شود.
     */

    .site-header.menu-open {

        background:
            transparent;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;

        border-bottom:
            none;

        box-shadow:
            none;

    }


    /*
     * دکمه X همیشه بالای منوی تمام صفحه
     */

    .site-header.menu-open .hamburger {

        position:
            fixed;

        top:
            13px;

        left:
            16px;

        width:
            46px;

        height:
            46px;

        background:
            rgba(255,255,255,.9);

        backdrop-filter:
            blur(15px);

        -webkit-backdrop-filter:
            blur(15px);

        box-shadow:
            0 10px 30px rgba(10,50,100,.12);

    }


    .logo-mark {

        width:
            40px;

        height:
            40px;

        border-radius:
            13px;

    }


    .logo-text strong {

        font-size:
            14px;

    }


    .logo-text small {

        font-size:
            7px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .header-container {

        width:
            calc(100% - 22px);

    }


    .mobile-menu-inner {

        padding:
            100px 21px 28px;

    }


    .mobile-nav-link {

        min-height:
            69px;

        font-size:
            18px;

    }


    .mobile-menu-bottom {

        padding-top:
            30px;

    }


    .mobile-menu-bottom strong {

        font-size:
            22px;

    }


    .mobile-menu-bottom a {

        min-height:
            55px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 360px) {

    .header-container {

        width:
            calc(100% - 18px);

    }


    .logo-text {

        display:
            none;

    }


    .mobile-menu-inner {

        padding:
            95px 18px 24px;

    }


    .mobile-nav-link {

        min-height:
            64px;

        font-size:
            16px;

    }


    .mobile-menu-bottom strong {

        font-size:
            20px;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-header,
    .site-logo,
    .logo-mark,
    .nav-link,
    .header-cta,
    .hamburger,
    .hamburger span,
    .mobile-menu,
    .mobile-nav-link,
    .mobile-menu-bottom,
    .menu-overlay {

        transition:
            none !important;

        animation:
            none !important;

    }

}
.mobile-nav-link span:last-child{

    font-size:18px;
    color:#9aaabd;

    transition:.3s ease;

}


.mobile-nav-link:hover span:last-child,
.mobile-nav-link.active span:last-child{

    color:var(--blue);

    transform:translateX(-6px);

}


.mobile-nav-link:hover,
.mobile-nav-link.active{

    color:var(--blue);

}




/* حذف هر استایل پروژه خاص */

.nav-projects,
.mobile-project-link,
.projects-dot,
.mobile-project-title{

    all:unset;

}