/* =========================================
   FLOWGAP — BACKGROUND
   مرحله ۱: فقط بک‌گراند
   ========================================= */

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

    min-height: 100%;

    background: #080b12 !important;
}

body {
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(20, 28, 45, 0.22),
            transparent 45%
        ),
        #080b12 !important;

    color: #ffffff;

    overflow-x: hidden;
}
/* =========================================
   FLOWGAP — LIGHT PARTICLES
   مرحله ۲
   ========================================= */

#flowgap-background {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

#flowgap-particles {
    display: block;

    width: 100%;
    height: 100%;
}
/* =========================================
   FLOWGAP — LOGIN CARD
   مرحله ۳
   ========================================= */

#form {
    position: relative;
    z-index: 2;

    width: min(92%, 500px);

    margin: 55px auto 40px;

    padding: 32px 30px 30px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 46, 0.94),
            rgba(7, 12, 25, 0.94)
        );

    border: 1px solid
        rgba(75, 180, 255, 0.24);

    border-radius: 22px;

    box-shadow:
        0 0 22px
        rgba(0, 180, 255, 0.07),

        0 0 45px
        rgba(100, 55, 255, 0.06),

        0 20px 55px
        rgba(0, 0, 0, 0.38);

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

    text-align: center;
}


/* خط نورانی دور کارت */

#form::before {
    content: "";

    position: absolute;

    inset: -1px;

    padding: 1px;

    border-radius: 22px;

    background:
        linear-gradient(
            115deg,

            transparent 12%,

            rgba(0, 225, 255, 0.85) 27%,

            transparent 42%,

            transparent 58%,

            rgba(145, 65, 255, 0.85) 73%,

            transparent 88%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;

    animation:
        flowgapLoginGlow
        6s linear infinite;
}


@keyframes flowgapLoginGlow {

    0% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .45;
    }
}


/* =========================================
   ورودی‌ها
   ========================================= */

#form input[type="text"],
#form input[type="password"],
#form select {

    width: 100%;

    min-height: 46px;

    box-sizing: border-box;

    margin: 7px 0;

    padding: 0 15px;

    border-radius: 11px;

    border:
        1px solid
        rgba(120, 155, 195, 0.18);

    background:
        rgba(24, 34, 54, 0.86);

    color: #ffffff;

    outline: none;

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

    font-size: 14px;

    line-height: 1.5;

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


/* Placeholder */

#form input::placeholder {
    color:
        rgba(235, 242, 255, 0.48);
}


/* فوکوس */

#form input[type="text"]:focus,
#form input[type="password"]:focus,
#form select:focus {

    border-color:
        rgba(0, 215, 255, 0.72);

    background:
        rgba(28, 40, 63, 0.96);

    box-shadow:
        0 0 0 3px
        rgba(0, 205, 255, 0.07),

        0 0 18px
        rgba(0, 180, 255, 0.12);
}


/* =========================================
   کپچا
   ========================================= */

#lay_captcha {

    width: 100%;

    box-sizing: border-box;

    margin: 8px 0;

    padding: 8px;

    border-radius: 11px;

    background:
        rgba(8, 15, 29, 0.48);

    border:
        1px solid
        rgba(100, 160, 220, 0.10);
}


#lay_captcha img {

    max-width: 100%;

    height: auto;

    display: block;

    margin:
        0 auto 6px;
}


/* =========================================
   دکمه ورود
   ========================================= */

#form input[type="submit"],
#form button[type="submit"] {

    width: 100%;

    min-height: 48px;

    margin-top: 14px;

    padding: 0 18px;

    box-sizing: border-box;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            #8b2cff 0%,
            #6348ff 48%,
            #00b5f5 100%
        );

    color: #ffffff;

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

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(75, 70, 255, 0.24);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}


#form input[type="submit"]:hover,
#form button[type="submit"]:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:
        0 12px 30px
        rgba(60, 100, 255, 0.36);
}


#form input[type="submit"]:active,
#form button[type="submit"]:active {

    transform:
        translateY(0)
        scale(.98);
}


/* =========================================
   موبایل
   ========================================= */

@media (max-width: 600px) {

    #form {

        width:
            calc(100% - 28px);

        margin:
            38px auto 30px;

        padding:
            26px 18px 24px;

        border-radius: 18px;
    }

    #form::before {
        border-radius: 18px;
    }

    #form input[type="text"],
    #form input[type="password"],
    #form select {

        min-height: 45px;

        font-size: 14px;
    }

}


/* =========================================
   دسکتاپ بزرگ
   ========================================= */

@media (min-width: 1000px) {

    #form {
        max-width: 500px;
    }

}
/* =========================================
   FLOWGAP — RULES MINI CARD
   ========================================= */

.flowgap-rules {
    width: min(92%, 500px);

    margin: 25px auto 35px;

    position: relative;

    z-index: 2;
}


/* کارت کوچک */

.flowgap-rules-toggle {
    width: 100%;

    min-height: 52px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    border: 1px solid
        rgba(70, 190, 255, .22);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(18, 27, 46, .94),
            rgba(8, 13, 27, .94)
        );

    color: #ffffff;

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

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 0 18px
        rgba(0, 180, 255, .06);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .2s ease;
}


/* عنوان */

.flowgap-rules-toggle span:first-child {
    margin: auto;
}


/* فلش */

.flowgap-rules-arrow {
    position: absolute;

    right: 18px;

    font-size: 22px;

    color: #5edcff;

    transition:
        transform .3s ease;
}


/* هاور */

.flowgap-rules-toggle:hover {

    border-color:
        rgba(0, 210, 255, .55);

    box-shadow:
        0 0 22px
        rgba(0, 190, 255, .12);
}


/* =========================================
   متن قوانین
   ========================================= */

.flowgap-rules-content {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    margin-top: 0;

    padding: 0 22px;

    box-sizing: border-box;

    border:
        1px solid transparent;

    border-radius: 14px;

    background:
        rgba(12, 19, 34, .92);

    color: #f1f4fa;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 2.2;

    text-align: right;

    transition:
        max-height .45s ease,
        opacity .35s ease,
        margin .35s ease,
        padding .35s ease;
}


/* =========================================
   حالت باز
   ========================================= */

.flowgap-rules.open
.flowgap-rules-content {

    max-height: 500px;

    opacity: 1;

    margin-top: 10px;

    padding:
        18px 22px;

    border-color:
        rgba(90, 170, 255, .18);

    box-shadow:
        0 0 25px
        rgba(60, 80, 255, .07);
}


/* چرخش فلش */

.flowgap-rules.open
.flowgap-rules-arrow {

    transform:
        rotate(180deg);

    color: #b46cff;
}


/* =========================================
   موبایل
   ========================================= */

@media (max-width: 600px) {

    .flowgap-rules {

        width:
            calc(100% - 28px);

        margin:
            22px auto 30px;
    }

    .flowgap-rules-toggle {

        min-height: 50px;

        font-size: 15px;

        border-radius: 13px;
    }

    .flowgap-rules-content {

        font-size: 13px;

        line-height: 2.15;

        padding-left: 18px;

        padding-right: 18px;
    }

    .flowgap-rules.open
    .flowgap-rules-content {

        padding:
            16px 18px;
    }
}
/* مخفی کردن لوگوی طرح پرداز */
#tarhpardaz_ir img[src*="tarhpardaz"] {
    display: none !important;
}
/* =========================================
   FLOWGAP — WELCOME NEON TITLE
   ========================================= */

.flowgap-welcome {
    display: block;
    width: 100%;

    margin: 0 auto 28px;

    text-align: center;

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

    font-size: clamp(30px, 5vw, 44px);

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0;

    background: linear-gradient(
        90deg,
        #8b2cff,
        #c13cff,
        #00c8ff,
        #35e5ff,
        #7a4cff,
        #d43cff,
        #8b2cff
    );

    background-size: 300% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        flowgapWelcomeColor 5s ease-in-out infinite;

    filter:
        drop-shadow(0 0 5px rgba(139, 44, 255, .8))
        drop-shadow(0 0 12px rgba(0, 200, 255, .45))
        drop-shadow(0 0 22px rgba(190, 50, 255, .25));
}


/* حرکت و تغییر رنگ نور */

@keyframes flowgapWelcomeColor {

    0% {
        background-position: 0% 50%;

        filter:
            drop-shadow(0 0 5px rgba(139, 44, 255, .8))
            drop-shadow(0 0 12px rgba(0, 200, 255, .35));
    }

    25% {
        background-position: 50% 50%;

        filter:
            drop-shadow(0 0 8px rgba(0, 200, 255, .9))
            drop-shadow(0 0 18px rgba(0, 220, 255, .45));
    }

    50% {
        background-position: 100% 50%;

        filter:
            drop-shadow(0 0 8px rgba(220, 45, 255, .9))
            drop-shadow(0 0 20px rgba(150, 40, 255, .5));
    }

    75% {
        background-position: 50% 50%;

        filter:
            drop-shadow(0 0 9px rgba(50, 190, 255, .9))
            drop-shadow(0 0 18px rgba(50, 100, 255, .45));
    }

    100% {
        background-position: 0% 50%;

        filter:
            drop-shadow(0 0 5px rgba(139, 44, 255, .8))
            drop-shadow(0 0 12px rgba(0, 200, 255, .35));
    }
}


/* موبایل */

@media (max-width: 600px) {

    .flowgap-welcome {
        font-size: 29px;
        font-weight: 900;
        margin-bottom: 24px;
    }
}
/* =========================================
   FLOWGAP — FEATURE BOX
   ========================================= */

.flowgap-boxes {
    width: min(92%, 720px);

    margin: 30px auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    direction: rtl;
}


.flowgap-box {
    position: relative;

    box-sizing: border-box;

    padding: 25px 24px;

    border-radius: 16px;

    border:
        1px solid
        rgba(70, 190, 255, .22);

    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 46, .94),
            rgba(7, 12, 25, .94)
        );

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, .22);

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

    overflow: hidden;
}


/* خط نور ظریف */

.flowgap-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 220, 255, .7),
            rgba(150, 70, 255, .7),
            transparent
        );
}


/* عنوان */

.flowgap-box h2 {
    margin:
        0 0 16px;

    text-align: center;

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

    font-size: 20px;

    font-weight: 800;

    line-height: 1.7;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #b9eaff,
            #d1b5ff,
            #ffffff
        );

    background-size: 200% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* متن */

.flowgap-box p {
    margin:
        0 0 12px;

    color:
        rgba(241, 245, 250, .90);

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

    font-size: 14px;

    font-weight: 400;

    line-height: 2.15;

    text-align: right;
}

.flowgap-box p:last-child {
    margin-bottom: 0;
}


/* موبایل */

@media (max-width: 600px) {

    .flowgap-boxes {
        width:
            calc(100% - 28px);

        margin:
            24px auto;
    }

    .flowgap-box {
        padding:
            21px 18px;

        border-radius: 14px;
    }

    .flowgap-box h2 {
        font-size: 18px;
        margin-bottom: 13px;
    }

    .flowgap-box p {
        font-size: 13px;
        line-height: 2.1;
    }
}
/* ================================
   FlowGap - امکانات
   ================================ */

.flowgap-boxes {
    width: min(92%, 720px);
    margin: 28px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    direction: rtl;
}

/* هر باکس */

.flowgap-box {
    position: relative;
    min-height: 190px;
    padding: 22px 18px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 25, 45, .96),
            rgba(8, 13, 28, .96)
        );

    border: 1px solid rgba(80, 190, 255, .20);

    box-shadow:
        0 10px 35px rgba(0,0,0,.30),
        inset 0 0 25px rgba(80,120,255,.035);

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* خط نور بالای باکس */

.flowgap-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00d9ff,
            #8b35ff,
            #ff27c8,
            transparent
        );

    opacity: .75;
}

/* هاله داخلی */

.flowgap-box::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(70,150,255,.16),
            transparent 70%
        );

    pointer-events: none;
}

/* عنوان */

.flowgap-box h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

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

    font-size: 19px;
    font-weight: 800;

    line-height: 1.6;

    color: #fff;

    text-shadow:
        0 0 10px rgba(80,180,255,.25);
}

/* متن */

.flowgap-box p {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

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

    font-size: 13px;
    line-height: 2;

    color: rgba(235,242,255,.88);

    text-align: center;
}

.flowgap-box p:last-child {
    margin-bottom: 0;
}

/* افکت هنگام لمس / حرکت */

.flowgap-box:hover {
    transform: translateY(-4px);

    border-color:
        rgba(80,210,255,.48);

    box-shadow:
        0 14px 40px rgba(0,0,0,.38),
        0 0 25px rgba(80,100,255,.10);
}

/* موبایل */

@media (max-width: 700px) {

    .flowgap-boxes {
        width: calc(100% - 28px);

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .flowgap-box {
        min-height: 160px;
        padding: 20px 17px;
    }

    .flowgap-box h2 {
        font-size: 18px;
    }

    .flowgap-box p {
        font-size: 13px;
        line-height: 2;
    }
}
/* =========================================
   FLOWGAP — FINAL RULES GLOW
   ========================================= */

.flowgap-rules {
    margin: 8px auto 30px !important;
    position: relative;
    z-index: 2;
}

.flowgap-rules-toggle {
    position: relative !important;
    overflow: hidden !important;

    border: 1px solid rgba(80, 190, 255, .22) !important;
    border-radius: 14px !important;

    box-shadow:
        0 0 12px rgba(0, 190, 255, .08),
        0 0 28px rgba(130, 50, 255, .05) !important;
}

/* خط نورانی متحرک دور باکس */
.flowgap-rules-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #00d9ff,
        #6d45ff,
        #ff27c8,
        #00d9ff,
        transparent
    );

    background-size: 300% 100%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;

    animation: flowgapRulesGlow 5s linear infinite;
}

@keyframes flowgapRulesGlow {
    0% {
        background-position: 0% 50%;
        opacity: .45;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }

    100% {
        background-position: 0% 50%;
        opacity: .45;
    }
}

/* متن و فلش بالای خط نور بمانند */
.flowgap-rules-toggle > span {
    position: relative;
    z-index: 2;
}

.flowgap-rules-arrow {
    z-index: 3;
}

/* موبایل */
@media (max-width: 600px) {
    .flowgap-rules {
        width: calc(100% - 28px) !important;
        margin: 8px auto 24px !important;
    }
}
/* =========================================
   FLOWGAP — ARTICLE DESIGN
   ========================================= */

.flowgap-article {
    width: min(92%, 920px);
    margin: 18px auto 40px;
    direction: rtl;
    text-align: right;
    position: relative;
}

/* باکس هر بخش مقاله */
.flowgap-article .flowgap-article-box {
    position: relative;
    overflow: hidden;

    margin: 18px 0;
    padding: 28px 30px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 18, 52, 0.88),
            rgba(7, 12, 30, 0.92)
        );

    border: 1px solid rgba(120, 100, 255, 0.28);
    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.30),
        inset 0 0 25px rgba(80, 60, 180, 0.06);

    box-sizing: border-box;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* خط نورانی متحرک دور هر باکس */
.flowgap-article .flowgap-article-box::before {
    content: "";
    position: absolute;
    inset: 0;

    padding: 1px;
    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #00eaff 20%,
            #7655ff 45%,
            #ff4fc7 70%,
            #00eaff 100%
        );

    background-size: 300% 100%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: .55;
    pointer-events: none;

    animation:
        flowgapArticleGlow 6s linear infinite;
}

@keyframes flowgapArticleGlow {

    0% {
        background-position: 0% 50%;
        opacity: .35;
    }

    50% {
        background-position: 100% 50%;
        opacity: .85;
    }

    100% {
        background-position: 0% 50%;
        opacity: .35;
    }
}

/* تیتر مقاله */
.flowgap-article .flowgap-article-box h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 18px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
    line-height: 1.7;

    text-align: center;

    text-shadow:
        0 0 8px rgba(118, 85, 255, .45),
        0 0 18px rgba(0, 234, 255, .15);
}

/* خط ظریف زیر تیتر */
.flowgap-article .flowgap-article-box h2::after {
    content: "";
    display: block;

    width: 90px;
    height: 2px;

    margin: 9px auto 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #00eaff,
            #7655ff,
            #ff4fc7
        );

    box-shadow:
        0 0 8px rgba(118, 85, 255, .55);
}

/* متن */
.flowgap-article .flowgap-article-box p {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: rgba(245, 247, 255, .88);

    font-size: 16px;
    font-weight: 400;

    line-height: 2.15;

    text-align: right;
}

/* آخرین پاراگراف فاصله اضافی نداشته باشد */
.flowgap-article .flowgap-article-box p:last-child {
    margin-bottom: 0;
}

/* افکت ظریف هنگام قرار گرفتن موس */
.flowgap-article .flowgap-article-box:hover {
    transform: translateY(-3px);

    border-color: rgba(118, 85, 255, .55);

    box-shadow:
        0 14px 40px rgba(0, 0, 0, .38),
        0 0 24px rgba(118, 85, 255, .10);
}


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

@media (max-width: 700px) {

    .flowgap-article {
        width: calc(100% - 24px);
        margin: 14px auto 30px;
    }

    .flowgap-article .flowgap-article-box {
        margin: 14px 0;
        padding: 22px 18px;
        border-radius: 15px;
    }

    .flowgap-article .flowgap-article-box::before {
        border-radius: 15px;
    }

    .flowgap-article .flowgap-article-box h2 {
        font-size: 21px;
        line-height: 1.65;
        margin-bottom: 15px;
    }

    .flowgap-article .flowgap-article-box p {
        font-size: 14px;
        line-height: 2.05;
    }
}
/* ===== FlowGap Articles ===== */

.flowgap-article {
    width: 92%;
    max-width: 1000px;
    margin: 24px auto;
    direction: rtl;
}

.flowgap-article-box {
    position: relative;
    margin: 18px 0;
    padding: 28px 30px;
    background: rgba(20, 12, 45, 0.72);
    border: 1px solid rgba(120, 80, 255, 0.35);
    border-radius: 18px;
    box-sizing: border-box;
    text-align: right;
    overflow: hidden;
    
    box-shadow:
        0 0 12px rgba(100, 60, 255, 0.12),
        inset 0 0 20px rgba(100, 60, 255, 0.05);
}

.flowgap-article-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        #246bff,
        #8b00ff,
        #ff1493,
        #246bff
    );
    background-size: 300% 100%;
    animation: flowgapArticleGlow 5s linear infinite;
}

.flowgap-article-box h2 {
    margin: 0 0 18px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.8;
}

.flowgap-article-box h2::after {
    content: "";
    display: block;
    width: 90px;
    height: 2px;
    margin: 10px auto 0;
    background: linear-gradient(
        90deg,
        #246bff,
        #ff00cc
    );
    border-radius: 10px;
}

.flowgap-article-box p {
    margin: 0 0 14px;
    color: rgba(255,255,255,0.88);
    font-size: 16px;
    line-height: 2.2;
    text-align: right;
}

.flowgap-article-box p:last-child {
    margin-bottom: 0;
}

@keyframes flowgapArticleGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* موبایل */
@media (max-width: 700px) {

    .flowgap-article {
        width: 94%;
        margin: 18px auto;
    }

    .flowgap-article-box {
        padding: 22px 18px;
        margin: 14px 0;
        border-radius: 15px;
    }

    .flowgap-article-box h2 {
        font-size: 20px;
        line-height: 1.8;
    }

    .flowgap-article-box p {
        font-size: 14px;
        line-height: 2.15;
    }
}
/* هماهنگ‌سازی باکس امکانات با باکس‌های مقاله */
.flowgap-boxes {
    width: min(92%, 900px) !important;
    margin: 28px auto !important;
    display: block !important;
}

.flowgap-box {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
}

.flowgap-box h2 {
    margin: 0 0 16px !important;
    text-align: center !important;
}

.flowgap-box p {
    margin: 0 0 12px !important;
    font-size: 14px !important;
    line-height: 2.15 !important;
    text-align: right !important;
}

.flowgap-box p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 600px) {
    .flowgap-boxes {
        width: calc(100% - 28px) !important;
        margin: 24px auto !important;
    }

    .flowgap-box {
        padding: 21px 18px !important;
        border-radius: 14px !important;
    }

    .flowgap-box p {
        font-size: 13px !important;
        line-height: 2.1 !important;
    }
}
/* =========================================
   FLOWGAP — EDITORIAL SIGNATURE
   ========================================= */

.flowgap-editorial-signature {
    position: relative;

    width: 100%;
    max-width: 720px;

    margin: 30px auto 8px;
    padding: 24px 20px 12px;

    box-sizing: border-box;

    text-align: center;
}


/* متن فارسی */

.flowgap-editorial-message {
    margin: 0 auto;

    max-width: 650px;

    color: rgba(238, 243, 255, .82);

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

    font-size: 14px;
    line-height: 2.15;

    font-weight: 400;

    text-align: center;
}


/* خط ظریف نورانی */

.flowgap-editorial-line {
    width: 90px;
    height: 1px;

    margin: 20px auto 14px;

    background: linear-gradient(
        90deg,
        transparent,
        #00d9ff,
        #7c3cff,
        #ff28d7,
        transparent
    );

    opacity: .65;

    box-shadow:
        0 0 8px rgba(0, 217, 255, .25),
        0 0 12px rgba(124, 60, 255, .18);
}


/* امضای انگلیسی */

.flowgap-editorial-team {
    display: flex;

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

    gap: 7px;

    direction: ltr;

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

    font-size: 11px;

    letter-spacing: 1.5px;

    white-space: nowrap;
}


/* FlowGap */

.flowgap-editorial-team span:first-child {
    color: #00d9ff;

    font-weight: 700;

    text-shadow:
        0 0 8px rgba(0, 217, 255, .35);
}


/* Editorial Team */

.flowgap-editorial-team b {
    color: rgba(255, 255, 255, .72);

    font-weight: 500;
}


/* نقطه */

.flowgap-editorial-team i {
    color: #8b55ff;

    font-style: normal;

    font-size: 13px;

    text-shadow:
        0 0 7px rgba(139, 85, 255, .5);
}


/* سال */

.flowgap-editorial-team span:last-child {
    color: rgba(255, 255, 255, .48);

    font-weight: 400;

    letter-spacing: 1.8px;
}


/* =========================================
   موبایل
   ========================================= */

@media (max-width: 600px) {

    .flowgap-editorial-signature {
        margin-top: 24px;

        padding:
            20px 14px 10px;
    }

    .flowgap-editorial-message {
        font-size: 13px;
        line-height: 2.05;
    }

    .flowgap-editorial-line {
        width: 75px;

        margin:
            17px auto 12px;
    }

    .flowgap-editorial-team {
        font-size: 9px;

        gap: 6px;

        letter-spacing: 1.2px;
    }
}
/* =========================================================
   FLOWGAP — FINAL RESPONSIVE SYSTEM
   آخرین بخش فایل CSS
   Mobile / Tablet / Desktop
   ========================================================= */


/* =========================================================
   GLOBAL SAFETY
   ========================================================= */

html,
body {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;

    box-sizing: border-box !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

img,
video,
canvas,
iframe {
    max-width: 100% !important;
    height: auto;
}


/* جلوگیری از بیرون‌زدگی متن‌های طولانی */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
strong,
b {
    max-width: 100%;

    overflow-wrap: break-word;
    word-wrap: break-word;
}


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

#tarhpardaz_ir {
    width: 100% !important;
    max-width: 100vw !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow-x: hidden !important;
}


/* =========================================================
   WELCOME
   ========================================================= */

.flowgap-welcome {
    display: block !important;

    width: min(92vw, 900px) !important;
    max-width: calc(100vw - 24px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;
}


/* =========================================================
   LOGIN BOX
   ========================================================= */

#form {
    width: min(92vw, 500px) !important;
    max-width: calc(100vw - 24px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* ورودی‌های فرم */

#form input[type="text"],
#form input[type="password"],
#form select,
#form input[type="submit"],
#form button[type="submit"] {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   RULES
   ========================================================= */

.flowgap-rules {
    width: min(92vw, 500px) !important;
    max-width: calc(100vw - 24px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}

.flowgap-rules-toggle,
.flowgap-rules-content {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ALL ARTICLE BOXES
   ========================================================= */

.flowgap-boxes {
    width: min(92vw, 900px) !important;
    max-width: calc(100vw - 24px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;

    display: block !important;

    overflow: visible !important;
}


/* امکانات + تمام مقاله‌ها */

.flowgap-boxes > .flowgap-box,
.flowgap-boxes > .flowgap-article-box {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.flowgap-box h2,
.flowgap-article-box h2 {

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

.flowgap-box p,
.flowgap-article-box p {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}


/* =========================================================
   EDITORIAL SIGNATURE
   ========================================================= */

.flowgap-editorial-signature {
    width: 100% !important;
    max-width: 720px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

.flowgap-editorial-message {
    width: 100% !important;
    max-width: 650px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;
}

.flowgap-editorial-team {
    max-width: 100% !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;
}


/* =========================================================
   DESKTOP LARGE
   1200px +
   ========================================================= */

@media (min-width: 1200px) {

    .flowgap-welcome {
        max-width: 900px !important;
    }

    #form {
        width: 500px !important;
    }

    .flowgap-boxes {
        width: 900px !important;
        max-width: calc(100vw - 60px) !important;
    }

    .flowgap-rules {
        width: 500px !important;
    }

    .flowgap-box,
    .flowgap-article-box {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}


/* =========================================================
   DESKTOP / LAPTOP
   701px — 1199px
   ========================================================= */

@media (min-width: 701px) and (max-width: 1199px) {

    .flowgap-welcome {
        width: 90vw !important;
        max-width: 800px !important;
    }

    #form {
        width: min(88vw, 500px) !important;
    }

    .flowgap-rules {
        width: min(88vw, 500px) !important;
    }

    .flowgap-boxes {
        width: calc(100vw - 48px) !important;
        max-width: 900px !important;
    }

    .flowgap-box,
    .flowgap-article-box {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .flowgap-editorial-signature {
        max-width: 700px !important;
    }
}


/* =========================================================
   MOBILE
   481px — 700px
   ========================================================= */

@media (min-width: 481px) and (max-width: 700px) {

    .flowgap-welcome {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;

        font-size: clamp(28px, 7vw, 36px) !important;

        line-height: 1.4 !important;
    }

    #form {
        width: calc(100vw - 40px) !important;
        max-width: 520px !important;
    }

    .flowgap-rules {
        width: calc(100vw - 32px) !important;
        max-width: 500px !important;
    }

    .flowgap-boxes {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    .flowgap-box,
    .flowgap-article-box {

        width: 100% !important;
        max-width: 100% !important;

        padding: 20px 17px !important;

        border-radius: 14px !important;
    }

    .flowgap-box h2,
    .flowgap-article-box h2 {

        font-size: 18px !important;
        line-height: 1.7 !important;
    }

    .flowgap-box p,
    .flowgap-article-box p {

        font-size: 13px !important;
        line-height: 2.05 !important;
    }

    .flowgap-editorial-signature {
        width: calc(100vw - 32px) !important;
        max-width: 650px !important;
    }
}


/* =========================================================
   MOBILE SMALL
   تا 480px
   ========================================================= */

@media (max-width: 480px) {

    .flowgap-welcome {

        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;

        margin-bottom: 22px !important;

        font-size: clamp(25px, 8vw, 31px) !important;

        line-height: 1.4 !important;
    }


    /* Login */

    #form {

        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;

        margin-top: 30px !important;
        margin-bottom: 25px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    #form input[type="text"],
    #form input[type="password"],
    #form select {

        width: 100% !important;
        max-width: 100% !important;

        min-height: 44px !important;

        font-size: 13px !important;
    }


    #form input[type="submit"],
    #form button[type="submit"] {

        width: 100% !important;

        min-height: 46px !important;

        font-size: 14px !important;
    }


    /* Rules */

    .flowgap-rules {

        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;

        margin-top: 18px !important;
        margin-bottom: 24px !important;
    }

    .flowgap-rules-toggle {

        min-height: 50px !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        font-size: 14px !important;
    }

    .flowgap-rules-content {

        font-size: 12px !important;
        line-height: 2.05 !important;
    }


    /* Article boxes */

    .flowgap-boxes {

        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;

        margin-top: 22px !important;
        margin-bottom: 28px !important;
    }


    .flowgap-boxes > .flowgap-box,
    .flowgap-boxes > .flowgap-article-box {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 18px 14px !important;

        border-radius: 13px !important;
    }


    .flowgap-box h2,
    .flowgap-article-box h2 {

        font-size: 17px !important;

        line-height: 1.7 !important;

        margin-bottom: 11px !important;
    }


    .flowgap-box p,
    .flowgap-article-box p {

        font-size: 12px !important;

        line-height: 2 !important;

        text-align: right !important;
    }


    /* Editorial */

    .flowgap-editorial-signature {

        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        margin-top: 22px !important;
    }


    .flowgap-editorial-message {

        font-size: 12px !important;

        line-height: 2.05 !important;
    }


    .flowgap-editorial-line {

        width: 70px !important;

        margin-top: 16px !important;
        margin-bottom: 12px !important;
    }


    .flowgap-editorial-team {

        gap: 5px !important;

        font-size: 9px !important;

        letter-spacing: 1px !important;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   تا 360px
   ========================================================= */

@media (max-width: 360px) {

    .flowgap-welcome {

        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;

        font-size: 24px !important;
    }


    #form {

        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .flowgap-rules {

        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
    }


    .flowgap-boxes {

        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
    }


    .flowgap-boxes > .flowgap-box,
    .flowgap-boxes > .flowgap-article-box {

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .flowgap-box h2,
    .flowgap-article-box h2 {

        font-size: 16px !important;
    }


    .flowgap-box p,
    .flowgap-article-box p {

        font-size: 11.5px !important;
        line-height: 1.95 !important;
    }


    .flowgap-editorial-signature {

        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
    }


    .flowgap-editorial-team {

        font-size: 8px !important;

        letter-spacing: .8px !important;

        gap: 4px !important;
    }
}


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

@media (max-width: 700px) and (orientation: landscape) {

    .flowgap-welcome {
        font-size: 27px !important;
        margin-bottom: 18px !important;
    }

    #form {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .flowgap-boxes {
        margin-top: 18px !important;
    }
}


/* =========================================================
   FINAL OVERFLOW PROTECTION
   ========================================================= */

.flowgap-box,
.flowgap-article-box,
.flowgap-editorial-signature,
.flowgap-rules,
#form {

    max-width: 100% !important;

    box-sizing: border-box !important;
}

.flowgap-box *,
.flowgap-article-box *,
.flowgap-editorial-signature *,
.flowgap-rules *,
#form * {

    max-width: 100% !important;

    box-sizing: border-box !important;
}