/*==================================================
    FlowGap UI Framework v2.0
    Part 1 - Core Layout
    Optimized for Speed & SEO
    FlowGap Editorial & Development Team
    © 2026 FlowGap
==================================================*/

/* ===== Reset ===== */

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

html{
    scroll-behavior:smooth;
}

body{

    direction:rtl;
    font-family:tahoma,Arial,sans-serif;
    background:#0b0d1f;
    color:#EDE9FE;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;

    background-image:
    radial-gradient(circle at 15% 25%,rgba(124,58,237,.28),transparent 28%),
    radial-gradient(circle at 85% 20%,rgba(96,165,250,.18),transparent 25%),
    linear-gradient(135deg,#111827,#171b34,#1d1638);

    background-attachment:scroll;

}

/* ===== Background Lights ===== */

.bg-purple,
.bg-blue{

    position:fixed;

    width:650px;
    height:650px;

    border-radius:50%;

    filter:blur(90px);

    pointer-events:none;

    z-index:-5;

}

.bg-purple{

    left:-240px;
    top:-220px;

    background:
    radial-gradient(circle,
    rgba(168,85,247,.90),
    rgba(124,58,237,.22),
    transparent 72%);

    animation:purpleMove 12s ease-in-out infinite alternate;

}

.bg-blue{

    right:-240px;
    bottom:-220px;

    background:
    radial-gradient(circle,
    rgba(59,130,246,.90),
    rgba(59,130,246,.20),
    transparent 72%);

    animation:blueMove 14s ease-in-out infinite alternate;

}

/* ===== Login Container ===== */

#tarhpardaz_ir{

    position:relative;

    width:420px;
    max-width:92%;

    margin:55px auto;

    padding:34px;

    overflow:hidden;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    rgba(46,34,92,.84),
    rgba(25,20,52,.76));

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

    border:1px solid rgba(255,255,255,.14);

    box-shadow:
    0 0 30px rgba(124,58,237,.25),
    0 0 60px rgba(59,130,246,.12),
    0 20px 60px rgba(0,0,0,.55);

    transition:
    transform .35s,
    box-shadow .35s;

}

#tarhpardaz_ir:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 35px rgba(124,58,237,.40),
    0 0 65px rgba(59,130,246,.18),
    0 25px 70px rgba(0,0,0,.60);

}

/* ===== Login Glow ===== */

#tarhpardaz_ir::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-220px;
    top:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(168,85,247,.22),
    transparent 72%);

    filter:blur(45px);

    pointer-events:none;

}

#tarhpardaz_ir::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-120px;
    bottom:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(59,130,246,.18),
    transparent 72%);

    filter:blur(30px);

    pointer-events:none;

}

/* ===== Mobile Base ===== */

@media (max-width:768px){

    #tarhpardaz_ir{

        width:92%;
        margin:20px auto;
        padding:24px;
        border-radius:20px;

    }

}

/*==================================================
 End Part 1
==================================================*/
/*==================================================
    FlowGap UI Framework v2.0
    Part 2 - Form Controls
==================================================*/


/* ===== Title ===== */

#tarhpardaz_ir span{

    display:block;

    margin-bottom:20px;

    text-align:center;

    font-size:32px;

    font-weight:700;

    color:#F8FAFC !important;

    text-shadow:0 0 18px rgba(124,58,237,.45);

}


/* ===== Inputs ===== */

.tf-user,
.tf-pass,
#gender{

    display:block;

    width:100%;

    max-width:320px;

    height:50px;

    margin:12px auto;

    padding:0 18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.10);

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

    color:#ffffff;

    font-size:15px;

    transition:
    border-color .25s,
    box-shadow .25s,
    background .25s;

}


/* Placeholder */

.tf-user::placeholder,
.tf-pass::placeholder{

    color:#cfd2ff;

}


/* ===== Focus ===== */

.tf-user:focus,
.tf-pass:focus,
#gender:focus{

    outline:none;

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

    border-color:#9D4DFF;

    box-shadow:

    0 0 0 2px rgba(157,77,255,.20),

    0 0 18px rgba(157,77,255,.45);

}


/* ===== Button ===== */

.btn{

    position:relative;

    display:block;

    width:220px;

    height:50px;

    margin:22px auto 0;

    border:none;

    border-radius:15px;

    overflow:hidden;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:700;

    background:

    linear-gradient(

    90deg,

    #7C3AED,

    #8B5CF6,

    #3B82F6);

    box-shadow:

    0 10px 30px rgba(124,58,237,.40);

    transition:

    transform .25s,

    box-shadow .25s;

}


/* Hover */

.btn:hover{

    transform:translateY(-2px);

    box-shadow:

    0 0 28px rgba(124,58,237,.70),

    0 0 50px rgba(59,130,246,.35);

}


/* Click */

.btn:active{

    transform:scale(.98);

}


/* Shine Effect */

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120px;

    width:90px;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.85),

    rgba(255,255,255,1),

    rgba(255,255,255,.85),

    transparent);

    filter:blur(8px);

    animation:shine 4s linear infinite;

    pointer-events:none;

}


/* ===== Mobile ===== */

@media (max-width:768px){

#tarhpardaz_ir span{

font-size:28px;

line-height:1.6;

}

.tf-user,
.tf-pass,
#gender{

height:48px;

font-size:15px;

}

.btn{

width:100%;

max-width:220px;

height:48px;

font-size:16px;

}

}


/*==================================================
 End Part 2
==================================================*/
/*==================================================
    FlowGap UI Framework v2.0
    Part 3 - SEO Article
==================================================*/


/* ===== Article Container ===== */

#tarhpardaz_ir h1,
#tarhpardaz_ir h2,
#tarhpardaz_ir p,
#tarhpardaz_ir li{

    position:relative;
    z-index:2;

}


/* ===== Main Title ===== */

#tarhpardaz_ir h1{

    margin:0 0 28px;

    text-align:center;

    font-size:38px;

    font-weight:700;

    line-height:1.5;

    color:#F3E8FF;

    text-shadow:
    0 0 18px rgba(124,58,237,.18);

}


/* ===== Article Titles ===== */

#tarhpardaz_ir h2{

    margin:38px 0 18px;

    font-size:24px;

    font-weight:700;

    line-height:1.5;

    color:#F3E8FF;

}


/* ===== Article Text ===== */

#tarhpardaz_ir p{

    margin:18px 0;

    font-size:18px;

    font-weight:400;

    line-height:2.15;

    color:#EDE9FE !important;

    text-align:justify;

}


/* ===== Highlight ===== */

#tarhpardaz_ir strong{

    color:#FFFFFF;

    font-weight:700;

}


/* ===== SEO Title Box ===== */

.seo-box{

    max-width:520px;

    margin:42px auto 22px;

    padding:18px 24px;

    text-align:center;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #6D28D9,
    #7C3AED,
    #4F46E5);

    box-shadow:
    0 12px 35px rgba(124,58,237,.35);

}


.seo-box h2{

    margin:0 !important;

    color:#fff !important;

    font-size:24px !important;

    font-weight:700;

}


/* ===== FAQ ===== */

#tarhpardaz_ir p strong:first-child{

    display:block;

    margin-bottom:8px;

    color:#FFFFFF;

}


/* ===== Links ===== */

#tarhpardaz_ir a{

    color:#C4B5FD;

    text-decoration:none;

    transition:.25s;

}

#tarhpardaz_ir a:hover{

    color:#FFFFFF;

}


/* ===== Mobile ===== */

@media (max-width:768px){

#tarhpardaz_ir h1{

font-size:30px;

line-height:1.5;

}

#tarhpardaz_ir h2{

font-size:22px;

}

#tarhpardaz_ir p{

font-size:16px;

line-height:2;

text-align:right;

}

.seo-box{

padding:16px;

margin:30px auto 18px;

}

.seo-box h2{
    font-size:18px !important;
}

}


/*==================================================
 End Part 3
==================================================*/
/*==================================================
    FlowGap UI Framework v2.0
    Part 4 - Animation & Performance
==================================================*/


/* ===============================
        Smooth Animation
=================================*/

#tarhpardaz_ir,
.seo-box,
.btn,
.tf-user,
.tf-pass,
#gender{

    will-change:transform,box-shadow;

}


/* ===============================
         Fade Animation
=================================*/

.fade-up{

    animation:flowFade .7s ease both;

}

@keyframes flowFade{

    from{

        opacity:0;
        transform:translateY(22px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


/* ===============================
        Background Motion
=================================*/

@keyframes purpleMove{

    from{

        transform:
        translate(0,0)
        scale(1);

    }

    to{

        transform:
        translate(45px,35px)
        scale(1.12);

    }

}


@keyframes blueMove{

    from{

        transform:
        translate(0,0)
        scale(1);

    }

    to{

        transform:
        translate(-40px,-30px)
        scale(1.10);

    }

}


/* ===============================
          Button Shine
=================================*/

@keyframes shine{

0%{

left:-120px;

}

100%{

left:320px;

}

}


/* ===============================
        Glow Animation
=================================*/

@keyframes glowPulse{

0%{

box-shadow:

0 0 12px rgba(124,58,237,.55),

0 0 24px rgba(59,130,246,.30);

}

50%{

box-shadow:

0 0 26px rgba(124,58,237,.95),

0 0 58px rgba(59,130,246,.65);

}

100%{

box-shadow:

0 0 12px rgba(124,58,237,.55),

0 0 24px rgba(59,130,246,.30);

}

}


/* ===============================
     Performance Optimization
=================================*/

img{

    max-width:100%;
    height:auto;
    border:0;

}


button,
input,
select{

    font-family:inherit;

}


/* ===============================
       Responsive Tablet
=================================*/

@media (max-width:992px){

#tarhpardaz_ir{

max-width:92%;

}

.seo-box{

max-width:92%;

}

}


/* ===============================
      Responsive Mobile
=================================*/

@media (max-width:768px){

body{

overflow-x:hidden;

}

#tarhpardaz_ir{

padding:24px;

}

.btn{

animation:none;

}

.bg-purple,
.bg-blue{

filter:blur(70px);

opacity:.65;

}

}


/* ===============================
     Small Mobile Devices
=================================*/

@media (max-width:480px){

#tarhpardaz_ir{

padding:20px;

border-radius:18px;

}

#tarhpardaz_ir h1{

font-size:28px;

}

#tarhpardaz_ir h2{

font-size:21px;

}

#tarhpardaz_ir p{

font-size:16px;

line-height:2;

}

.btn{

width:100%;

}

}
/*==================================================
    FlowGap UI Framework v2.0
    Final Override
    FlowGap Editorial & Development Team
    2026
==================================================*/

/* Final Performance */
html,
body{
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img{
    max-width:100%;
    height:auto;
    border:0;
}

/* Selection */
::selection{
    background:#7C3AED;
    color:#FFFFFF;
}

/* Final Article Fix */
#tarhpardaz_ir h1{
    color:#F3E8FF !important;
}

#tarhpardaz_ir h2{
    color:#F3E8FF !important;
}

#tarhpardaz_ir p{
    color:#EDE9FE !important;
    font-size:18px !important;
    line-height:2.1 !important;
}

#tarhpardaz_ir strong{
    color:#FFFFFF !important;
}

/* Hide TarhPardaz */

img[src*="tarhpardaz"]{
    display:none !important;
}

a[href*="tarhpardaz"]{
    display:none !important;
}

/* Mobile */

@media (max-width:768px){

#tarhpardaz_ir h1{
font-size:30px !important;
}

#tarhpardaz_ir h2{
font-size:22px !important;
}

#tarhpardaz_ir p{
font-size:16px !important;
line-height:2 !important;
}

}
.flowgap-footer{
    text-align:center;
    margin:40px 0 20px;
    color:#A78BFA;
    font-size:14px;
    font-weight:500;
}
.btn,
button,
input[type="submit"]{

    box-shadow:0 0 18px rgba(124,58,237,.45),
               0 0 40px rgba(79,70,229,.25);
    transition:.3s ease;

}
/*==========================
      FlowGap Logo
==========================*/

.fg-logo{
    width:260px;
    margin:0 auto 35px;
    text-align:center;
    user-select:none;
}

/* حلقه اصلی */

.fg-ring{

    position:relative;

    width:170px;
    height:170px;

    margin:auto;

    border-radius:50%;

    border:3px solid #8a2eff;

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

    box-shadow:
    0 0 12px rgba(138,46,255,.7),
    0 0 28px rgba(61,139,255,.45);

    overflow:visible;

}

/* نور چرخان */

.fg-orbit{

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:4px solid transparent;

    border-top-color:#59d8ff;
    border-right-color:#8a2eff;

    filter:
    drop-shadow(0 0 8px #59d8ff)
    drop-shadow(0 0 18px #8a2eff);

    animation:orbitSpin 8s linear infinite;

}

/* حرف F */

.fg-f{

    font-family:Arial,sans-serif;

    font-size:120px;

    font-weight:900;

    line-height:1;

    color:#fff;

    transform:translateY(8px);

    text-shadow:
    0 0 10px #fff,
    0 0 22px #8a2eff,
    0 0 45px #55d6ff;

    z-index:5;

}

/* نوشته */

.fg-text{

    margin-top:18px;

    font-size:46px;

    font-weight:800;

    white-space:nowrap;

    letter-spacing:1px;

    color:#fff;

    text-shadow:
    0 0 8px #8a2eff,
    0 0 18px #55d6ff;

}

/* انیمیشن */

@keyframes orbitSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
.seo-box h2,
#tarhpardaz_ir h2{
    font-size:32px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    color:#F3E8FF !important;
    text-align:center !important;
    margin:0 0 18px 0 !important;
}

@media (max-width:768px){
    .seo-box h2,
    #tarhpardaz_ir h2{
        font-size:22px !important;
        line-height:1.45 !important;
    }
}