* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {
    background: #f8f8f8;

    color: #202122;

    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
}



/* ==========================================
   PAGE
========================================== */

.page {
    position: relative;

    width: calc(100% - 40px);

    max-width: 1600px;

    margin: 20px auto;

    background: #ffffff;

    border: 1px solid #d8d8d8;

    box-shadow:
        0 1px 8px
        rgba(0, 0, 0, 0.15);
}



/* ==========================================
   LANGUAGE
========================================== */

.site-language {
    position: absolute;

    top: 18px;
    right: 22px;

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 7px;

    direction: ltr;

    padding: 4px 8px;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid #c8ccd1;

    border-radius: 6px;
}


.language-icon {
    font-size: 16px;
}


.site-language select {
    border: 0;

    outline: 0;

    background: transparent;

    cursor: pointer;

    font-family:
        "Vazirmatn",
        sans-serif;

    font-size: 12px;
}



/* ==========================================
   MAIN
========================================== */

.main-section {
    min-height: 590px;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 42px;
}



/* ==========================================
   TITLE
========================================== */

.site-title {
    text-align: center;

    margin-bottom: 4px;
}


.site-title h1 {
    margin: 0;

    direction: ltr;

    font-family:
        "Times New Roman",
        Georgia,
        serif;

    font-size: 38px;

    line-height: 1;

    font-weight: normal;

    letter-spacing: -1px;
}


.subtitle {
    margin-top: 7px;

    font-size: 14px;
}



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

.logo-universe {
    position: relative;

    width: 430px;

    height: 365px;

    margin: 5px auto 0;

    overflow: visible;
}



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

.main-logo {
    position: absolute;

    width: 205px;

    height: 205px;

    left: 50%;

    top: 47%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    cursor: pointer;

    z-index: 3;
}


.main-logo img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;
}


.main-logo:hover img {
    animation:
        main-logo-pulse
        1.25s
        ease-in-out
        infinite;
}


@keyframes main-logo-pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }

}



/* ==========================================
   PROJECT LOGOS
========================================== */

.project-logo {
    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    z-index: 4;
}


.project-logo img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        opacity 0.22s ease;
}


.project-logo:hover,
.project-logo:focus {
    z-index: 30;
}


.project-logo:hover img,
.project-logo:focus img {
    transform: scale(1.07);

    filter:
        drop-shadow(
            0 2px 4px
            rgba(0, 0, 0, 0.12)
        );
}



/* ==========================================
   UNAVAILABLE PROJECTS
========================================== */

.unavailable-project {
    cursor: default;

    outline: none;
}


.unavailable-project img {
    filter:
        grayscale(1)
        saturate(0)
        contrast(0.9);

    opacity: 0.56;
}


.unavailable-project:hover img,
.unavailable-project:focus img {

    transform: scale(1.07);

    filter:
        grayscale(1)
        saturate(0)
        contrast(0.95);

    opacity: 0.68;
}



/* ==========================================
   PROJECT LABEL
========================================== */

.project-label {
    position: absolute;

    top: 50%;

    min-width: 165px;

    padding:
        12px 16px;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid #c8ccd1;

    border-radius: 6px;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.13);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    white-space: nowrap;

    z-index: 40;

    text-align: center;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}


.project-label strong {
    display: block;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.6;
}


.project-label small {
    display: block;

    margin-top: 2px;

    font-size: 10.5px;

    font-family:
        "Vazirmatn",
        Arial,
        sans-serif;

    color: #72777d;

    line-height: 1.6;

    white-space: normal;
}



/* ==========================================
   LABEL LEFT
========================================== */

.label-left {
    right:
        calc(100% + 12px);

    transform:
        translateY(-50%)
        translateX(6px)
        scale(0.96);
}


.project-logo:hover .label-left,
.project-logo:focus .label-left {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);
}



/* ==========================================
   LABEL RIGHT
========================================== */

.label-right {
    left:
        calc(100% + 12px);

    transform:
        translateY(-50%)
        translateX(-6px)
        scale(0.96);
}


.project-logo:hover .label-right,
.project-logo:focus .label-right {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);
}



/* ==========================================
   LABEL BOTTOM
========================================== */

.label-bottom {
    top:
        calc(100% + 10px);

    left: 50%;

    transform:
        translateX(-50%)
        translateY(-5px)
        scale(0.96);
}


.project-logo:hover .label-bottom,
.project-logo:focus .label-bottom {
    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}



/* ==========================================
   STATUS STAMPS - عمومی
========================================== */

.status-stamp {
    position: absolute;

    display: block;

    padding:
        2px 9px;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        2px solid currentColor;

    border-radius: 2px;

    font-family:
        "Vazirmatn",
        Tahoma,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;

    white-space: nowrap;

    opacity: 0;

    z-index: 5;

    transition:
        opacity 0.22s ease,
        transform 0.25s
        cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        );
}



/* ==========================================
   مهر قرمز "به زودی"

   عمداً وسط محتوا قرار دارد.
========================================== */

.stamp-coming {
    left: 50%;

    top: 50%;

    color: #c9232d;

    border-color: #c9232d;

    transform:
        translate(-50%, -50%)
        rotate(-11deg)
        scale(1.25);
}


.project-logo:hover .stamp-coming,
.project-logo:focus .stamp-coming {

    opacity: 0.96;

    transform:
        translate(-50%, -50%)
        rotate(-11deg)
        scale(1);
}



/* ==========================================
   مهر زرد "آزمایشی"

   به گوشه کارت منتقل شده تا
   نوشته زیر آن خوانا بماند.
========================================== */

.stamp-beta {
    top: 5px;

    right: 5px;

    left: auto;

    color: #9a7000;

    border-color: #d4a514;

    background:
        rgba(255, 249, 216, 0.96);

    font-size: 9px;

    padding:
        1px 6px;

    transform:
        rotate(-8deg)
        scale(1.2);
}


.project-logo:hover .stamp-beta,
.project-logo:focus .stamp-beta {

    opacity: 0.95;

    transform:
        rotate(-8deg)
        scale(1);
}



/* ==========================================
   PROJECT 1 + PROJECT 2
   کمی بزرگ‌تر شده‌اند
========================================== */

.logo-1 {
    width: 112px;

    height: 78px;

    left: 7px;

    top: -1px;
}


.logo-2 {
    width: 108px;

    height: 78px;

    right: 7px;

    top: 3px;
}



/* ==========================================
   سایر لوگوها
========================================== */

.logo-3 {
    width: 75px;

    height: 70px;

    left: 0;

    top: 80px;
}


.logo-4 {
    width: 75px;

    height: 75px;

    right: 0;

    top: 80px;
}


.logo-5 {
    width: 82px;

    height: 70px;

    left: -5px;

    top: 165px;
}


.logo-6 {
    width: 80px;

    height: 80px;

    right: -5px;

    top: 160px;
}


.logo-7 {
    width: 80px;

    height: 75px;

    left: 35px;

    bottom: 32px;
}


.logo-8 {
    width: 95px;

    height: 75px;

    right: 25px;

    bottom: 25px;
}


.logo-9 {
    width: 95px;

    height: 80px;

    left: 50%;

    bottom: 0;

    transform:
        translateX(-50%);
}



/* ==========================================
   SEARCH
========================================== */

.search-area {
    width: 430px;

    margin-top: 20px;
}


.search-form {
    width: 100%;

    height: 43px;

    display: flex;

    align-items: stretch;

    direction: ltr;

    border:
        2px solid #3366cc;

    background: #ffffff;
}


.search-form:focus-within {
    box-shadow:
        0 0 0 1px
        rgba(51, 102, 204, 0.18);
}


.main-search-input {
    flex: 1;

    min-width: 0;

    border: 0;

    outline: 0;

    padding:
        7px 12px;

    background: #ffffff;

    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;

    font-size: 14px;
}


html[dir="rtl"] .main-search-input {
    direction: rtl;

    text-align: right;
}


html[dir="ltr"] .main-search-input {
    direction: ltr;

    text-align: left;
}


.main-search-input::placeholder {
    color: #72777d;

    opacity: 1;
}



/* ==========================================
   SEARCH LANGUAGE PICKER
========================================== */

.search-language-picker {
    display: flex;

    align-items: stretch;

    height: 100%;

    border-left:
        1px solid #eaecf0;

    direction: ltr;

    background: #ffffff;
}


.search-lang {
    width: 36px;

    padding: 0;

    border: 0;

    border-right:
        1px solid #eaecf0;

    background: #ffffff;

    color: #72777d;

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


.search-lang:last-child {
    border-right: 0;
}


.search-lang.active {
    background: #f8f9fa;

    color: #202122;

    cursor: default;
}


.search-lang.unavailable {
    color: #a2a9b1;

    background: #ffffff;

    cursor: not-allowed;
}


.search-lang.unavailable:hover {
    background: #fff3f3;

    color: #b32424;
}



/* ==========================================
   SEARCH BUTTON
========================================== */

.search-submit {
    position: relative;

    width: 52px;

    flex-shrink: 0;

    padding: 0;

    border: 0;

    background: #3366cc;

    cursor: pointer;

    transition:
        background-color 0.18s ease;
}


.search-submit:hover {
    background: #2a4b8d;
}


.search-icon {
    position: absolute;

    width: 15px;

    height: 15px;

    border:
        2px solid #ffffff;

    border-radius: 50%;

    left: 16px;

    top: 11px;
}


.search-icon::after {
    content: "";

    position: absolute;

    width: 8px;

    height: 2px;

    background: #ffffff;

    transform:
        rotate(45deg);

    right: -6px;

    bottom: -3px;
}



/* ==========================================
   FOOTER / ABOUT
========================================== */

.about-section {
    min-height: 255px;

    border-top:
        1px solid #c8ccd1;

    display: grid;

    grid-template-columns:
        1fr
        1.6fr
        1fr;

    align-items: center;

    gap: 45px;

    padding:
        35px 8%;
}



/* ==========================================
   APP DOWNLOAD
========================================== */

.app-box {
    position: relative;

    max-width: 330px;

    font-size: 12px;

    color: #54595d;
}


.coming-app {
    opacity: 0.82;
}


.app-title {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #3366cc;
}


.app-icon {
    display: flex;

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    border:
        1px solid #c8ccd1;

    align-items: center;

    justify-content: center;

    background: white;

    direction: ltr;
}


.app-box p {
    line-height: 1.8;
}



/* Store buttons - غیرفعال */

.store-buttons {
    display: flex;

    gap: 6px;

    flex-wrap: wrap;
}


.store-buttons span {
    display: inline-block;

    background: #050505;

    color: white;

    padding:
        8px 12px;

    border-radius: 4px;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    opacity: 0.55;

    cursor: default;

    user-select: none;
}



/* ==========================================
   مهر به‌زودی بخش دانلود
========================================== */

.footer-coming-stamp {
    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 10;

    color: #c9232d;

    background:
        rgba(255, 255, 255, 0.84);

    border:
        3px solid #c9232d;

    border-radius: 2px;

    padding:
        3px 12px;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transform:
        translate(-50%, -50%)
        rotate(-10deg);

    box-shadow:
        inset 0 0 0 1px
        rgba(201, 35, 45, 0.18);
}



/* ==========================================
   ABOUT
========================================== */

.about-text {
    text-align: center;

    color: #5b4640;
}


.about-text p {
    margin: 0 auto;

    max-width: 560px;

    font-size: 17px;

    line-height: 2;
}



/* ==========================================
   FOOTER BRAND
========================================== */

.footer-brand {
    display: flex;

    justify-content: center;

    align-items: center;
}


.footer-brand a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.footer-brand a:hover {
    transform:
        scale(1.04);

    opacity: 0.86;
}


.footer-brand img {
    width: 235px;

    max-height: 200px;

    object-fit: contain;

    display: block;
}



/* ==========================================
   ENGLISH
========================================== */

html[lang="en"] body,
html[lang="en"] .project-label small,
html[lang="en"] .project-label strong,
html[lang="en"] .status-stamp,
html[lang="en"] .footer-coming-stamp,
html[lang="en"] .about-text,
html[lang="en"] .app-box,
html[lang="en"] .subtitle,
html[lang="en"] .main-search-input {

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}



/* ==========================================
   PAGE TRANSITION
========================================== */

.page-transition {
    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 2147483647;

    pointer-events: none;

    visibility: hidden;

    background:
        var(
            --transition-color,
            #1aa59a
        );

    clip-path:
        circle(
            0px
            at
            var(--transition-x, 50%)
            var(--transition-y, 50%)
        );

    -webkit-clip-path:
        circle(
            0px
            at
            var(--transition-x, 50%)
            var(--transition-y, 50%)
        );
}


.page-transition.is-active {
    visibility: visible;

    clip-path:
        circle(
            var(--transition-radius)
            at
            var(--transition-x)
            var(--transition-y)
        );

    -webkit-clip-path:
        circle(
            var(--transition-radius)
            at
            var(--transition-x)
            var(--transition-y)
        );

    transition:
        clip-path
        720ms
        cubic-bezier(
            0.76,
            0,
            0.24,
            1
        );

    -webkit-transition:
        -webkit-clip-path
        720ms
        cubic-bezier(
            0.76,
            0,
            0.24,
            1
        );
}



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

@media (max-width: 800px) {

    .page {
        width: 100%;

        margin: 0;

        border: 0;
    }


    .site-language {
        top: 12px;

        right: 12px;
    }


    .main-section {
        padding-top: 65px;
    }


    .logo-universe {
        width: 390px;

        transform:
            scale(0.9);

        margin-top: -10px;

        margin-bottom: -15px;
    }


    .search-area {
        width:
            calc(100% - 40px);

        max-width: 430px;
    }


    .about-section {
        grid-template-columns:
            1fr;

        text-align: center;

        gap: 35px;
    }


    .app-box {
        margin: auto;
    }


    .store-buttons {
        justify-content: center;
    }

}



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

@media (max-width: 470px) {

    .logo-universe {
        width: 430px;

        transform:
            scale(0.72);

        margin-top: -45px;

        margin-bottom: -60px;
    }


    .site-title h1 {
        font-size: 31px;
    }


    .about-text p {
        font-size: 15px;
    }


    .project-label {
        min-width: 150px;
    }


    .search-lang {
        width: 30px;

        font-size: 9px;
    }


    .search-submit {
        width: 47px;
    }

}



/* ==========================================
   REDUCED MOTION
========================================== */

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

    .main-logo:hover img {
        animation: none;
    }


    .project-logo img,
    .project-label,
    .status-stamp,
    .footer-brand a {
        transition: none;
    }

}