@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
/* ==========================================================
   سایپینو — صفحه ورود / ثبت‌نام
   پالت: Deep Navy / Navy Mid / Turquoise / Deep Teal / Metallic Gold / Ice Gray
   ========================================================== */

:root {
    --sp-navy: #0B2D4A;
    --sp-navy-mid: #164363;
    --sp-turq: #00B8BB;
    --sp-teal: #007878;
    --sp-gold: #D4AF37;
    --sp-ice: #F4F7FA;
    --sp-white: #FFFFFF;
    --sp-graphite: #172B3D;
    --sp-success: #16A34A;
    --sp-warning: #D97706;
    --sp-error: #DC2626;
    --sp-info: #2D7DB3;
    --sp-border: #E2E8EF;
    --sp-disabled: #A8B3BE;
    --sp-text2: #64748B;
    --sp-ease: cubic-bezier(.22, .8, .3, 1);
}

.sp-body {
    margin: 0;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--sp-ice);
    color: var(--sp-graphite);
    -webkit-font-smoothing: antialiased;
}

    .sp-body *,
    .sp-body *::before,
    .sp-body *::after {
        box-sizing: border-box;
    }

/* ---------- پس‌زمینه ---------- */
.sp-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    direction: rtl;
    overflow: hidden;
    background: radial-gradient(900px 480px at 90% -10%, rgba(0,184,187,.14), transparent 60%), radial-gradient(700px 480px at 0% 110%, rgba(212,175,55,.14), transparent 60%), var(--sp-ice);
}

.sp-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(11,45,74,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,45,74,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    animation: spGrid 16s linear infinite;
}

/* ---------- قاب اصلی ---------- */
.sp-shell {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: var(--sp-white);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(11,45,74,.5), 0 12px 30px -12px rgba(11,45,74,.2);
    animation: spRise .8s var(--sp-ease) both;
}

    /* خط گرادیانتِ بالای کارت (همان خط هدر سایت) */
    .sp-shell::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 5;
        background: linear-gradient(90deg, var(--sp-navy), var(--sp-turq) 55%, var(--sp-gold));
    }

/* ---------- سمت فرم ---------- */
.sp-form-side {
    padding: 40px 52px 44px;
    display: flex;
    flex-direction: column;
}

.sp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: auto;
}

.sp-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text2);
    text-decoration: none;
    transition: color .2s ease;
}

    .sp-home svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .25s ease;
    }

    .sp-home:hover {
        color: var(--sp-teal);
    }

        .sp-home:hover svg {
            transform: translateX(4px);
        }

.sp-panels {
    padding: 36px 0 24px;
}

.sp-panel {
    animation: spFade .5s var(--sp-ease) both;
}

.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,184,187,.1);
    color: var(--sp-teal);
    font-size: 12px;
    font-weight: 700;
}

    .sp-eyebrow i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sp-gold);
    }

.sp-title {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--sp-navy);
}

.sp-sub {
    margin: 0 0 26px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--sp-text2);
}

    .sp-sub b {
        display: inline-block;
        direction: ltr;
        font-weight: 800;
        color: var(--sp-navy);
        letter-spacing: .5px;
    }

.sp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    padding: 6px 10px 6px 12px;
    border: none;
    border-radius: 10px;
    background: var(--sp-ice);
    color: var(--sp-navy-mid);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

    .sp-back svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sp-back:hover {
        background: rgba(0,184,187,.14);
        color: var(--sp-teal);
    }

/* ---------- فیلدها ---------- */
.sp-field {
    position: relative;
    margin-bottom: 14px;
}

    .sp-field .sp-ico {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        stroke: var(--sp-disabled);
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke .2s ease;
        pointer-events: none;
    }

    .sp-field input {
        width: 100%;
        height: 54px;
        padding: 0 48px;
        border: 1.5px solid var(--sp-border);
        border-radius: 14px;
        background: var(--sp-ice);
        font-family: inherit;
        font-size: 15px;
        color: var(--sp-graphite);
        text-align: right;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

        .sp-field input::placeholder {
            color: var(--sp-disabled);
            font-size: 14px;
        }

        .sp-field input:focus {
            outline: none;
            border-color: var(--sp-turq);
            background: var(--sp-white);
            box-shadow: 0 0 0 4px rgba(0,184,187,.15);
        }

    .sp-field:focus-within .sp-ico {
        stroke: var(--sp-teal);
    }

    .sp-field.error {
        animation: spShake .4s ease;
    }

        .sp-field.error input {
            border-color: var(--sp-error);
            background: #FFF7F7;
            box-shadow: 0 0 0 4px rgba(220,38,38,.1);
        }

        .sp-field.error .sp-ico {
            stroke: var(--sp-error);
        }

    .sp-field.sp-code input {
        text-align: center;
        direction: ltr;
        height: 62px;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 10px;
        color: var(--sp-navy);
        padding: 0 16px 0 26px;
    }

        .sp-field.sp-code input::placeholder {
            letter-spacing: 0;
            font-size: 14px;
            font-weight: 400;
        }

.sp-eye {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

    .sp-eye:hover {
        background: rgba(0,184,187,.1);
    }

    .sp-eye svg {
        width: 20px;
        height: 20px;
        stroke: var(--sp-text2);
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sp-eye.on svg {
        stroke: var(--sp-teal);
    }

/* ---------- پیام خطا ---------- */
.sp-err {
    display: none;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #FEF0F0;
    border: 1px solid rgba(220,38,38,.22);
    color: var(--sp-error);
    font-size: 13px;
    line-height: 1.8;
}

    .sp-err:empty {
        display: none !important;
    }

/* ---------- دکمه‌ها ---------- */
.sp-btn {
    position: relative;
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sp-navy-mid), var(--sp-navy));
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 16px 28px -14px rgba(11,45,74,.85);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .sp-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
        transform: translateX(110%);
        transition: transform .6s ease;
        pointer-events: none;
    }

    .sp-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 34px -14px rgba(11,45,74,.9);
    }

        .sp-btn:hover::after {
            transform: translateX(-110%);
        }

    .sp-btn:active {
        transform: translateY(0);
    }

    .sp-btn:focus-visible {
        outline: 3px solid rgba(0,184,187,.55);
        outline-offset: 3px;
    }

    .sp-btn .sp-arrow {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--sp-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .25s ease;
    }

    .sp-btn svg {
        width: 16px;
        height: 16px;
        stroke: var(--sp-navy);
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sp-btn:hover .sp-arrow {
        transform: translateX(-4px);
    }

    .sp-btn::before {
        content: "";
        display: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2.5px solid rgba(255,255,255,.3);
        border-top-color: #fff;
        animation: spSpin .7s linear infinite;
    }

    .sp-btn.is-loading {
        pointer-events: none;
        opacity: .92;
    }

        .sp-btn.is-loading::before {
            display: block;
        }

        .sp-btn.is-loading .sp-arrow {
            display: none;
        }

.sp-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    font-size: 12px;
    color: var(--sp-disabled);
}

    .sp-or::before,
    .sp-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--sp-border);
    }

.sp-btn-ghost {
    height: 50px;
    background: transparent;
    color: var(--sp-teal);
    font-size: 14px;
    font-weight: 700;
    border: 1.5px solid var(--sp-border);
    box-shadow: none;
}

    .sp-btn-ghost:hover {
        border-color: var(--sp-turq);
        background: rgba(0,184,187,.06);
        box-shadow: none;
    }

    .sp-btn-ghost::after {
        display: none;
    }

    .sp-btn-ghost::before {
        border-color: rgba(0,120,120,.25);
        border-top-color: var(--sp-teal);
    }

.sp-terms {
    margin: 0;
    font-size: 12px;
    line-height: 2;
    color: var(--sp-text2);
}

    .sp-terms a {
        color: var(--sp-teal);
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
    }

        .sp-terms a:hover {
            text-decoration: underline;
        }

/* ---------- سمت تصویری ---------- */
.sp-visual {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 40px 40px 30px;
    display: flex;
    flex-direction: column;
    background: radial-gradient(520px 320px at 85% 100%, rgba(0,184,187,.3), transparent 65%), radial-gradient(420px 260px at 0% 0%, rgba(22,67,99,.9), transparent 70%), linear-gradient(165deg, #0F3A5E 0%, var(--sp-navy) 60%, #071F34 100%);
}

    /* شبکه‌ی بلوپرینت */
    .sp-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(rgba(244,247,250,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(244,247,250,.06) 1px, transparent 1px);
        background-size: 36px 36px;
        -webkit-mask-image: radial-gradient(ellipse at 60% 70%, #000 10%, transparent 72%);
        mask-image: radial-gradient(ellipse at 60% 70%, #000 10%, transparent 72%);
    }

    /* بازتاب نور */
    .sp-visual::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 40%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
        transform: translateX(-110%) skewX(-14deg);
        animation: spSweep 10s ease-in-out infinite;
        pointer-events: none;
    }

.sp-v-top {
    position: relative;
    z-index: 2;
}

.sp-logo {
    display: flex;
    height: 46px;
    margin-bottom: 26px;
}

    .sp-logo img {
        max-height: 100%;
        width: auto;
        object-fit: contain;
    }

.sp-v-title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.6;
}

    .sp-v-title em {
        display: block;
        font-style: normal;
        color: var(--sp-gold);
    }

.sp-v-text {
    margin: 0;
    max-width: 340px;
    font-size: 13px;
    line-height: 2;
    color: rgba(244,247,250,.72);
}

.sp-stage {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    margin: 6px 0;
}

.sp-scene {
    display: block;
    width: 100%;
    height: auto;
    max-height: 330px;
    object-fit: contain;
}

.sp-feats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(244,247,250,.14);
}

.sp-feat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-ice);
}

    .sp-feat svg {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        fill: none;
        stroke: var(--sp-turq);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------- انیمیشن‌های صحنه ---------- */
.sp-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: spWheel 2.6s linear infinite;
}

.sp-bob {
    animation: spBob 3.2s ease-in-out infinite;
}

.sp-beam {
    animation: spScan 7s ease-in-out infinite alternate;
}

.sp-road {
    animation: spRoad 1.1s linear infinite;
}

.sp-ping {
    transform-box: fill-box;
    transform-origin: center;
    animation: spPulse 2.6s ease-out infinite;
}

.sp-tag {
    animation: spTag 4s ease-in-out infinite;
}

.sp-d2 {
    animation-delay: -1.3s;
}

.sp-d3 {
    animation-delay: -2.6s;
}

/* ---------- کیف‌فریم‌ها ---------- */
@keyframes spRise {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes spFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes spShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

@keyframes spSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spGrid {
    to {
        background-position: 44px 44px;
    }
}

@keyframes spSweep {
    0% {
        transform: translateX(-110%) skewX(-14deg);
    }

    55%, 100% {
        transform: translateX(380%) skewX(-14deg);
    }
}

@keyframes spWheel {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes spBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.6px);
    }
}

@keyframes spScan {
    from {
        transform: translateX(60px);
    }

    to {
        transform: translateX(480px);
    }
}

@keyframes spRoad {
    to {
        stroke-dashoffset: -26;
    }
}

@keyframes spPulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    100% {
        transform: scale(3.2);
        opacity: 0;
    }
}

@keyframes spTag {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 900px) {
    .sp-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .sp-visual {
        order: -1;
        padding: 28px 24px 18px;
    }

    .sp-logo {
        height: 40px;
        margin-bottom: 16px;
    }

    .sp-v-title {
        font-size: 20px;
        margin: 0;
    }

    .sp-v-text,
    .sp-feats {
        display: none;
    }

    .sp-stage {
        min-height: 0;
        margin-top: 10px;
    }

    .sp-scene {
        max-width: 420px;
        max-height: 230px;
    }

    .sp-form-side {
        padding: 28px 24px 34px;
    }

    .sp-top {
        margin-bottom: 0;
    }

    .sp-panels {
        padding: 22px 0 8px;
    }
}

@media (max-width: 480px) {
    .sp-page {
        padding: 0;
        align-items: stretch;
    }

    .sp-shell {
        border-radius: 0;
        min-height: 100vh;
    }

    .sp-title {
        font-size: 23px;
    }

    .sp-v-title {
        font-size: 17px;
    }
}

/* احترام به تنظیم کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
    .sp-body *,
    .sp-body *::before,
    .sp-body *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* ===== Login.css — فقط این ۳ تغییر ===== */

/* ۱) جابه‌جایی طرف‌ها: در .sp-shell مقدار grid-template-columns را این کنید
      (بخش تصویری حالا ستون اول = راست، فرم = چپ) */
.sp-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* و این دو قانون را درست زیر .sp-shell::before اضافه کنید */
.sp-visual {
    order: 1;
}

.sp-form-side {
    order: 2;
}

/* ۲) داخل @media (max-width: 900px) قانون .sp-scene قبلی را با این عوض کنید
      (ماشین در موبایل کوچک‌تر) */
@media (max-width: 900px) {
    .sp-scene {
        max-width: 290px;
        max-height: 160px;
    }
}

/* ۳) داخل @media (max-width: 480px) این را اضافه کنید */
@media (max-width: 480px) {
    .sp-scene {
        max-width: 240px;
        max-height: 135px;
    }
}
.sp-bob {
    filter: drop-shadow(0 0 8px rgba(0,184,187,.35));
}

/* دکمه بازگشت: گوشه چپ */
.sp-top {
    justify-content: flex-start;
    direction: ltr;
}

.sp-home:hover svg {
    transform: translateX(-4px);
}

/* لوگو بزرگ‌تر */
.sp-logo {
    height: 64px;
    margin-bottom: 22px;
}

/* متن کوچک‌تر */
.sp-v-title {
    font-size: 23px;
    margin: 0 0 8px;
}

.sp-v-text {
    font-size: 12px;
    max-width: 320px;
}

/* تصویر بزرگ‌تر */
.sp-scene {
    max-height: 400px;
    width: 108%;
    max-width: none;
}

.sp-stage {
    min-height: 280px;
}

/* ===== موبایل: یک کارت یکپارچه، تصویر بالا و فرم پایین ===== */
@media (max-width: 900px) {
    .sp-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* بخش تصویری بالا */
    .sp-visual {
        order: 1;
        padding: 26px 24px 34px;
        align-items: center;
        text-align: center;
        /* لبه‌ی پایین نرم تا به فرم وصل شود */
        border-radius: 0 0 28px 28px;
    }

    .sp-v-top {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sp-logo {
        height: 52px;
        margin-bottom: 12px;
        justify-content: center;
    }

    .sp-v-title {
        font-size: 19px;
        margin: 0;
    }

    .sp-v-text {
        display: none;
    }

    .sp-stage {
        min-height: 0;
        margin: 10px 0 0;
    }

    .sp-scene {
        width: 100%;
        max-width: 300px;
        max-height: 170px;
    }

    /* فرم پایین */
    .sp-form-side {
        order: 2;
        padding: 26px 24px 30px;
        margin-top: -20px; /* روی بخش تصویری بالا می‌آید و یکپارچه دیده می‌شود */
        position: relative;
        z-index: 3;
        background: var(--sp-white);
        border-radius: 24px 24px 0 0;
    }

    .sp-top {
        margin-bottom: 0;
    }

    .sp-panels {
        padding: 18px 0 8px;
    }
}

@media (max-width: 480px) {
    .sp-scene {
        max-width: 250px;
        max-height: 140px;
    }

    .sp-logo {
        height: 46px;
    }

    .sp-v-title {
        font-size: 17px;
    }
}

/* ===== موبایل: بدون گوشه‌ی گرد، تصویر چپ و متن راست ===== */
@media (max-width: 900px) {

    /* حذف انحنا و هم‌پوشانی بین دو بخش */
    .sp-visual {
        border-radius: 0;
        padding: 20px 18px;
        flex-direction: row; /* کنار هم */
        align-items: center;
        text-align: right;
        gap: 10px;
        direction: rtl; /* متن راست، تصویر چپ */
    }

    .sp-form-side {
        margin-top: 0;
        border-radius: 0;
    }

    /* متن‌ها سمت راست */
    .sp-v-top {
        flex: 1 1 52%;
        align-items: flex-start;
    }

    .sp-logo {
        height: 40px;
        margin-bottom: 10px;
        justify-content: flex-start;
    }

    .sp-v-title {
        font-size: 15px;
        line-height: 1.7;
    }

    /* تصویر سمت چپ */
    .sp-stage {
        flex: 1 1 48%;
        margin: 0;
        min-height: 0;
    }

    .sp-scene {
        width: 100%;
        max-width: 190px;
        max-height: 130px;
    }
}

@media (max-width: 480px) {
    .sp-visual {
        padding: 16px 14px;
    }

    .sp-logo {
        height: 34px;
    }

    .sp-v-title {
        font-size: 13.5px;
    }

    .sp-scene {
        max-width: 150px;
        max-height: 105px;
    }
}

/* ===== موبایل: عکس بزرگ‌تر ===== */
@media (max-width: 900px) {
    .sp-visual {
        padding: 18px 16px;
        gap: 4px;
    }

    /* متن کمی جمع‌تر تا جا برای عکس باز شود */
    .sp-v-top {
        flex: 1 1 42%;
    }

    /* عکس: سهم بیشتر از عرض */
    .sp-stage {
        flex: 1 1 58%;
    }

    .sp-scene {
        width: 125%; /* کمی بزرگ‌تر از قاب؛ از سمت راست داخل فضای خالی می‌رود */
        max-width: 260px;
        max-height: 175px;
        margin-left: -10px;
    }
}

@media (max-width: 480px) {
    .sp-scene {
        width: 125%;
        max-width: 210px;
        max-height: 145px;
    }

    .sp-v-title {
        font-size: 13px;
    }
}