*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Vazirmatn',sans-serif;
    background:#0c0c0c;
    color:#fff;
    overflow-x:hidden;
}

/* نورهای پس‌زمینه */

body::before{

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    background:#d4af37;

    filter:blur(180px);

    opacity:.15;

    top:-250px;
    right:-250px;

}

body::after{

    content:"";

    position:fixed;

    width:500px;
    height:500px;

    background:#d4af37;

    filter:blur(180px);

    opacity:.10;

    bottom:-200px;
    left:-200px;

}

/* صفحه */

.register-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:70px;

    position:relative;

}

/* سمت چپ */

.left-side{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.left-side img{

    width:430px;

    animation:float 6s ease-in-out infinite;

    filter:drop-shadow(0 20px 60px rgba(212,175,55,.45));

}

/* سمت راست */

.right-side{

    width:480px;

}

/* کارت */

.register-box{

    background:rgba(20,20,20,.78);

    backdrop-filter:blur(25px);

    border:1px solid rgba(212,175,55,.15);

    border-radius:30px;

    padding:45px;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.register-box h1{

    font-size:36px;

    margin-bottom:10px;

}

.register-box p{

    color:#c7c7c7;

    margin-bottom:35px;

}

@keyframes float{

0%{transform:translateY(0px);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0px);}

}

.badge-title{

    color:#d4af37;

    letter-spacing:4px;

    font-size:13px;

    font-weight:bold;

}

.input-box{

    height:58px;

    border:1px solid rgba(212,175,55,.20);

    border-radius:16px;

    display:flex;

    align-items:center;

    padding:0 18px;

    margin-bottom:18px;

    transition:.3s;

    background:#181818;

}

.input-box:hover{

    border-color:#d4af37;

}

.input-box:focus-within{

    border-color:#d4af37;

    box-shadow:0 0 15px rgba(212,175,55,.25);

}

.input-box i{

    color:#d4af37;

    font-size:20px;

    margin-left:12px;

}

.input-box input{

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:15px;

    font-family:inherit;

}

.input-box input::placeholder{

    color:#999;

}

.register-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#d4af37,#f7d76b);

    color:#111;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.35s;

}

.register-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(212,175,55,.35);

}

.bottom-text{

    margin-top:25px;

    text-align:center;

    color:#aaa;

}

.bottom-text a{

    color:#d4af37;

    text-decoration:none;

    font-weight:bold;

}

.register-container{
    flex-direction: row-reverse;
}

.left-side img{

    width:520px;

}

.right-side{

    width:440px;

}

.register-btn{

    background:linear-gradient(90deg,#c89b2b,#f8de7e,#c89b2b);

    background-size:200%;

    transition:.4s;

}

.register-btn:hover{

    background-position:right;

}

.register-container{

    gap:140px;

}

.left-side img{

    transition:.4s;

}

.left-side img:hover{

    transform:translateY(-10px) rotate(-3deg);

}

.register-btn{

    position:relative;

    overflow:hidden;

}

.register-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.register-btn:hover::before{

    left:120%;

}

.alert-box{

    background:#5c1f1f;

    color:#fff;

    border:1px solid #ff6b6b;

    padding:15px;

    border-radius:12px;

    margin-bottom:20px;

    text-align:center;

}

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .register-container {
        width: 100%;
        max-width: none;
        min-height: 100vh;

        padding: 25px 15px;

        margin: 0;

        display: flex;
        flex-direction: column;

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

        gap: 20px;
    }

    /* تصویر */
    .left-side {
        width: 100%;
        flex: none;

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

    .left-side img,
    .sim-image {
        width: 150px;
        max-width: 150px;
        height: auto;

        filter: drop-shadow(
            0 12px 30px rgba(212,175,55,.35)
        );
    }

    /* فرم */
    .right-side {
        width: 100%;
        max-width: 390px;

        padding: 0;
        margin: 0;
    }

    .register-box {
        width: 100%;
        max-width: none;

        padding: 25px 20px;

        border-radius: 22px;

        box-sizing: border-box;
    }

    .badge-title {
        display: block;

        font-size: 11px;

        letter-spacing: 3px;

        margin-bottom: 8px;
    }

    .register-box h1 {
        font-size: 24px;

        margin-bottom: 8px;
    }

    .register-box p {
        font-size: 13px;

        line-height: 1.8;

        margin-bottom: 22px;
    }

    /* ورودی‌ها */
    .input-box {
        width: 100%;
        height: 50px;

        padding: 0 15px;

        margin-bottom: 14px;

        border-radius: 13px;
    }

    .input-box i {
        font-size: 18px;

        margin-left: 10px;
    }

    .input-box input {
        width: 100%;

        font-size: 14px;
    }

    /* دکمه */
    .register-btn {
        width: 100%;
        height: 50px;

        font-size: 15px;

        border-radius: 13px;
    }

    .bottom-text {
        margin-top: 18px;

        font-size: 13px;
    }

    .alert-box {
        padding: 10px;

        margin-bottom: 15px;

        font-size: 12px;

        line-height: 1.8;
    }
}


/* گوشی‌های خیلی کوچک */
@media (max-width: 380px) {

    .register-container {
        padding: 20px 12px;

        gap: 15px;
    }

    .left-side img,
    .sim-image {
        width: 125px;
        max-width: 125px;
    }

    .register-box {
        padding: 22px 16px;
    }

    .register-box h1 {
        font-size: 22px;
    }

    .register-box p {
        font-size: 12px;
    }

    .input-box {
        height: 48px;
    }

    .register-btn {
        height: 48px;
    }
}