/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'AGoogle',Tahoma;font-size:14px;margin:0;background:#000 url(/theme/img/bg.jpg) repeat;border-top:solid 5px #1C8199;direction:rtl}
*:focus{outline:none}
a{text-decoration:none;color:#666}
ul{margin:0;padding:0;list-style:none}

/* ===== کانتینر اصلی ===== */
.asal-container{width:750px;height:auto;margin:auto;border:dashed 2px rgba(255,255,255,0.1);padding:5px;display:table}

/* ===== باکس پیام مدیریت ===== */
.asal-message{
    display:block;
    width:100%;
    height:50px;
    background: linear-gradient(135deg, #0a2a3a, #0a1a25);
    margin-bottom:10px;
    text-align:right;
    color:#fff;
    font-size:16px;
    line-height:50px;
    font-family:AGoogle,Yekan;
    text-shadow:1px 1px rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box
}
.asal-message i{margin-left:10px;font-size:20px;vertical-align:middle;color:#ffd700}

/* ===== تصویر اصلی ===== */
.asal-image{
    background:url(/theme/img/asalchat.png) no-repeat;
    width:450px;
    height:393px;
    float:left;
    background-size:cover
}

/* ===== باکس ورود ===== */
.asal-login-box{
    display:block;
    margin-bottom:15px
}
.asal-login-title{
    color:#fff;
    text-align:center;
    background:linear-gradient(135deg,#0e6b5e,#0a4a41);
    display:block;
    width:100%;
    font-family:AGoogle,Tahoma;
    line-height:48px;
    text-shadow:1px 1px rgba(0,0,0,0.2);
    height:48px;
    border-radius:8px 8px 0 0;
    font-size:15px;
    font-weight:bold;
    letter-spacing:0.5px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    padding:0 15px;
    box-sizing:border-box
}
.asal-login-title i{margin-left:10px;font-size:18px;color:#ffd700}

/* ===== فرم داخلی ===== */
.asal-form-container{
    position:relative;
    margin:0 auto;
    text-align:center;
    padding:20px 15px;
    border-radius:0 0 12px 12px;
    width:100%;
    box-sizing:border-box;
}

/* ===== فیلدهای ورود ===== */
.asal-select{
    background:#b7ecff;
    width:220px;
    height:42px;
    border-radius:8px;
    border:0;
    padding:0 15px;
    font-size:13px;
    text-align:right;
    font-family:tahoma;
    color:#333;
    direction:rtl;
    cursor:pointer;
    margin:8px auto;
    display:block
}
.asal-input,.asal-input-pass{
    background:#fff;
    width:220px;
    height:42px;
    border-radius:8px;
    border:0;
    padding:0 15px;
    font-size:13px;
    text-align:right;
    font-family:tahoma;
    color:#333;
    direction:rtl;
    margin:8px auto;
    display:block;
    box-sizing:border-box
}
.asal-input-pass{background:#fff}

/* ===== دکمه ورود ===== */
.asal-btn{
    cursor:pointer;
    background:#06596B radial-gradient(#328fa7,transparent);
    border:solid 1px rgba(255,255,255,0.2);
    box-shadow:inset 0 0 20px rgba(0,0,0,0.2);
    font-family:Yekan,tahoma;
    color:rgba(255,255,255,0.95);
    font-size:15px;
    height:44px;
    border-radius:8px;
    padding:0 30px;
    margin-top:15px;
    transition:all 0.2s ease-in;
    font-weight:bold;
    width:auto;
    min-width:200px
}
.asal-btn:hover{background:#2aa7b2;transform:scale(1.02)}

hr.asal-line{border:dashed 1px #0E0E0E;position:relative;top:20px;clear:both}
.asal-links a{display:inherit;border-top:solid 6px rgb(6 149 15 / 63%);border-radius:10px;background:rgba(255,255,255,0.06);margin-bottom:4px;padding:0 5px;border-right:solid 4px rgba(255,255,255,0.11);color:#A8A8A8;transition:all 0.2s ease-in}
.asal-links a:hover{border-right:solid 6px rgba(185,63,63,1)}

/* ===== منوی دسکتاپ ===== */
.asal-desktop-nav{
    width:760px;
    height:25px;
    margin:5px auto;
    border-bottom:dashed 2px rgba(255,255,255,0.1);
    padding:2px 5px
}
.asal-desktop-nav ul li{
    display:inline-flex;
    
    margin:0 5px;
    padding:0 3px
}
.asal-desktop-nav ul li a{color:#fff}
.asal-desktop-nav ul li a:hover{color:#EE8C8C}
.asal-desktop-nav ul li{
    display:inline-flex;
    
    margin:0;
    padding:0 11px;
    border-left:dashed 1px #252525;
    font-size:13px;
    line-height:20px
}
.asal-online-count{
    color:#fff;
    line-height:20px;
    font-size:13px;
    float:left
}

/* ===== فوتر ===== */
.asal-footer{
    height:38px;
    background:#00496e linear-gradient(178deg,#205163,transparent);
    clear:both;
    width:760px;
    margin:5px auto;
    padding:0 5px;
    margin-top:4px
}
.asal-copyright{
    text-align:right;
    position:relative;
    right:10px;
    top:3px;
    color:#D3D3D3;
    font-size:15px
}
.clear{clear:both}

/* ===== منوی موبایل ===== */
.asal-mobile-nav{display:none}

/* ===== ریسپانسیو ===== */
@media screen and (max-width: 780px) {
    .asal-container{
        width:95%;
        margin-top:20px;
        padding:10px;
        flex-direction:column;
    }
    .asal-mobile-nav{
        display:block;
        order:3;
        width:100%;
        background:rgba(0,0,0,0.5);
        border-radius:10px;
        margin:10px 0;
        padding:10px 5px;
        text-align:center;
        border:1px solid rgba(255,255,255,0.1)
    }
    .asal-mobile-nav ul{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px
    }
    .asal-mobile-nav ul li{
        display:inline-block;
        margin:3px 0;
        padding:0
    }
    .asal-mobile-nav ul li a{
        color:#fff;
        font-size:12px;
        padding:5px 14px;
        background:rgba(255,255,255,0.12);
        border-radius:25px;
        display:inline-block
    }
    .asal-mobile-nav ul li a:hover{
        background:#EE8C8C;
        color:#000
    }
    .asal-message{
        width:100%;
        text-align:center;
        height:auto;
        padding:0 15px;
        line-height:50px;
        order:1;
        border-radius:8px
    }
    .asal-image{
        width:100%;
        float:none;
        display:block;
        margin:10px auto;
        background-size:contain;
        background-position:center;
        height:auto;
        aspect-ratio:450/393;
        order:2
    }
    .asal-login-box{
        width:100%;
        float:none;
        margin-top:5px;
        order:4
    }
    .asal-login-title{
        width:100%;
        border-radius:8px 8px 0 0
    }
    .asal-form-container{
        width:100%;
        padding:20px 10px;
        order:5
    }
    .asal-input,.asal-input-pass,.asal-select{
        width:90%;
        max-width:280px
    }
    .asal-btn{
        width:auto;
        min-width:180px
    }
    .asal-desktop-nav{display:none}
    .asal-footer{
        width:95%;
        height:auto;
        text-align:center;
        padding:10px;
        order:6
    }
    .asal-copyright{
        float:none;
        text-align:center;
        right:0;
        margin:5px 0
    }
    hr.asal-line{
        width:90%;
        margin:20px auto
    }
}

@media screen and (max-width: 480px) {
    .asal-message{font-size:12px;line-height:45px}
    .asal-login-title{font-size:13px;line-height:44px;height:44px}
    .asal-input,.asal-input-pass,.asal-select,.asal-btn{width:95%;font-size:12px}
    .asal-mobile-nav ul li a{font-size:11px;padding:4px 12px}
    .asal-copyright{font-size:10px}
}