@import url(../main-css/header.css?v=33);
@import url(./css/tf2-header-theme.css?v=1);
@import url(./css/tf2-head.css?v=16);
@import url(./css/tf2.css?v=15);
@import url(./css/about-tf2.css?v=16);
@import url(../main-css/footer.css?=10);
@import url(../main-css/welcome.css);
@import url(../main-css/log-out.css);
@import url(../main-css/loading.css?=50);
@import url(../main-css/messages.css);
*{
    padding: 0;
    margin: 0;
    
}
body{
    background-color: #1d032ce4;
    background-color: #14001f;
    position: relative;
    /*height: 2000px;*/
}
html {
  scroll-behavior: smooth;
}
body::-webkit-scrollbar {
  background: rgba(255, 255, 255, 0.3);
  width: 3px;
}
body::-webkit-scrollbar-thumb {
  background: #ffffffdc; 
}
/* IRANSans UltraLight */
@font-face {
    font-family: "IRANSans";
    src: url("../font/ttf/IRANSansWeb_UltraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}

/* IRANSans Light */
@font-face {
    font-family: "IRANSans";
    src: url("../font/ttf/IRANSansWeb_Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

/* IRANSans Regular */
@font-face {
    font-family: "IRANSans";
    src: url("../font/ttf/IRANSansWeb.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* IRANSans Medium */
@font-face {
    font-family: "IRANSans";
    src: url("../font/ttf/IRANSansWeb_Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

/* IRANSans Bold */
@font-face {
    font-family: "IRANSans";
    src: url("../font/ttf/IRANSansWeb_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: open;
    src: url(../Open_Sans/OpenSans-Italic-VariableFont_wdth\,wght.ttf);
}



@font-face {
    font-family: "Bebas";
    src: url("../fonts/BebasNeue-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

/* Peyda */

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/peyda-thin.ttf") format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/peyda-extralight.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/peyda-light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/Peyda-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/Peyda-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/Peyda-SemiBold.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/Peyda-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/Peyda-ExtraBold.ttf") format("truetype");
    font-weight: 800;
}

@font-face {
    font-family: "Peyda";
    src: url("../fonts/peyda/Peyda-Black.ttf") format("truetype");
    font-weight: 900;
}

/* Estedad */

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-Thin.ttf") format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-ExtraLight.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-SemiBold.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-ExtraBold.ttf") format("truetype");
    font-weight: 800;
}

@font-face {
    font-family: "Estedad";
    src: url("../fonts/estedad/Estedad-Black.ttf") format("truetype");
    font-weight: 900;
}

/* ================================================================
   جلوه‌های نوری طلایی پس‌زمینه (Golden Ambient Glows)
   برای شکستن خالی بودن پس‌زمینه‌ی بنفش تیره‌ی صفحه
   ================================================================ */
.golden-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.golden-bg .glow {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
}

.golden-bg .glow-1 {
    top: -180px;
    right: -140px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle at 35% 35%, #FFE9AE 0%, #F4A64A 42%, transparent 72%);
    filter: blur(110px);
    opacity: .5;
    animation: goldenFloat1 16s ease-in-out infinite;
}

.golden-bg .glow-2 {
    bottom: -200px;
    left: -160px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at 60% 60%, #C084FC 0%, #6D28D9 48%, transparent 72%);
    filter: blur(120px);
    opacity: .3;
    animation: goldenFloat2 20s ease-in-out infinite;
}

.golden-bg .glow-3 {
    top: 45%;
    left: 50%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, #F4C542 0%, transparent 70%);
    filter: blur(130px);
    opacity: .16;
    animation: goldenFloat3 22s ease-in-out infinite;
}

@keyframes goldenFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, 50px) scale(1.08); }
}

@keyframes goldenFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -40px) scale(1.05); }
}

@keyframes goldenFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .14; }
    50% { transform: translate(-50%, -50%) scale(1.18); opacity: .24; }
}

/* ذرات کوچک درخشان طلایی (Sparkles) - به شکل ستاره‌ی ۴ پر که در نقاط مختلف صفحه چشمک می‌زنند */
.golden-bg .spark {
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(#FFE9AE, #F4C542);
    clip-path: polygon(
        50% 0%, 62% 38%, 100% 50%,
        62% 62%, 50% 100%, 38% 62%,
        0% 50%, 38% 38%
    );
    filter: drop-shadow(0 0 6px rgba(255, 217, 138, .85));
    opacity: 0;
}

/* هاله‌ی نور طلایی پشت هر ستاره - یه نور واضح از پشت */
.golden-bg .spark::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 245, 220, .95) 0%, rgba(255, 226, 158, .55) 22%, transparent 45%),
        radial-gradient(circle, rgba(244, 166, 74, .5) 0%, rgba(244, 166, 74, .18) 40%, transparent 70%);
    filter: blur(8px);
    z-index: -1;
}

/* پرتوهای نور طلایی که از خود ستاره به بیرون ساطع می‌شوند */
.golden-bg .spark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 241, 199, .95) 50%, transparent 100%) center / 100% 2px no-repeat,
        linear-gradient(0deg, transparent 0%, rgba(255, 241, 199, .95) 50%, transparent 100%) center / 2px 100% no-repeat;
    filter: blur(.6px);
    z-index: -1;
}

.golden-bg .spark-1  { top: 12%; right: 24%; width: 12px; height: 12px; animation: goldenDrift1 12s ease-in-out infinite; animation-delay: 0s;    }
.golden-bg .spark-2  { top: 58%; right: 8%;  width: 16px; height: 16px; animation: goldenDrift2 14s ease-in-out infinite; animation-delay: 1.2s;  }
.golden-bg .spark-3  { top: 26%; left: 12%;  width: 10px; height: 10px; animation: goldenDrift3 10s ease-in-out infinite; animation-delay: 2.4s;  }
.golden-bg .spark-4  { top: 82%; left: 28%;  width: 14px; height: 14px; animation: goldenDrift4 13s ease-in-out infinite; animation-delay: 3.6s;  }
.golden-bg .spark-5  { top: 6%;  left: 45%;  width: 10px; height: 10px; animation: goldenDrift2 11s ease-in-out infinite; animation-delay: 0.8s;  }
.golden-bg .spark-6  { top: 45%; left: 6%;   width: 18px; height: 18px; animation: goldenDrift1 15s ease-in-out infinite; animation-delay: 4.8s;  }
.golden-bg .spark-7  { top: 70%; right: 38%; width: 12px; height: 12px; animation: goldenDrift3 12.5s ease-in-out infinite; animation-delay: 2s;  }
.golden-bg .spark-8  { top: 90%; right: 18%; width: 10px; height: 10px; animation: goldenDrift4 9s ease-in-out infinite; animation-delay: 5.4s;  }
.golden-bg .spark-9  { top: 35%; right: 45%; width: 14px; height: 14px; animation: goldenDrift2 13.5s ease-in-out infinite; animation-delay: 3.2s;}
.golden-bg .spark-10 { top: 15%; left: 30%;  width: 12px; height: 12px; animation: goldenDrift3 10.5s ease-in-out infinite; animation-delay: 6s;  }

/* هر ستاره طی چرخه‌ی خودش سه بار در نقاط متفاوت "می‌درخشد" و بین آن‌ها جابه‌جا می‌شود */
@keyframes goldenDrift1 {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
    4%   { opacity: 1; transform: translate(20px, -20px) scale(1.3) rotate(25deg); }
    10%  { opacity: 0; transform: translate(35px, -40px) scale(.5) rotate(45deg); }
    38%  { opacity: 0; transform: translate(140px, -70px) scale(.4) rotate(70deg); }
    43%  { opacity: 1; transform: translate(150px, -85px) scale(1.3) rotate(100deg); }
    50%  { opacity: 0; transform: translate(165px, -100px) scale(.5) rotate(130deg); }
    74%  { opacity: 0; transform: translate(70px, 60px) scale(.4) rotate(170deg); }
    79%  { opacity: 1; transform: translate(55px, 75px) scale(1.3) rotate(210deg); }
    86%  { opacity: 0; transform: translate(35px, 90px) scale(.5) rotate(240deg); }
    100% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(280deg); }
}

@keyframes goldenDrift2 {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
    5%   { opacity: 1; transform: translate(-25px, 15px) scale(1.2) rotate(-20deg); }
    12%  { opacity: 0; transform: translate(-45px, 30px) scale(.5) rotate(-40deg); }
    40%  { opacity: 0; transform: translate(-120px, 90px) scale(.4) rotate(-60deg); }
    46%  { opacity: 1; transform: translate(-135px, 105px) scale(1.3) rotate(-90deg); }
    53%  { opacity: 0; transform: translate(-150px, 120px) scale(.5) rotate(-120deg); }
    77%  { opacity: 0; transform: translate(-60px, -50px) scale(.4) rotate(-160deg); }
    82%  { opacity: 1; transform: translate(-45px, -65px) scale(1.3) rotate(-190deg); }
    90%  { opacity: 0; transform: translate(-25px, -80px) scale(.5) rotate(-220deg); }
    100% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(-260deg); }
}

@keyframes goldenDrift3 {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
    6%   { opacity: 1; transform: translate(30px, 25px) scale(1.25) rotate(30deg); }
    14%  { opacity: 0; transform: translate(55px, 45px) scale(.5) rotate(55deg); }
    42%  { opacity: 0; transform: translate(110px, 130px) scale(.4) rotate(80deg); }
    48%  { opacity: 1; transform: translate(120px, 145px) scale(1.3) rotate(110deg); }
    56%  { opacity: 0; transform: translate(135px, 160px) scale(.5) rotate(140deg); }
    80%  { opacity: 0; transform: translate(-40px, 40px) scale(.4) rotate(180deg); }
    85%  { opacity: 1; transform: translate(-55px, 30px) scale(1.3) rotate(210deg); }
    93%  { opacity: 0; transform: translate(-70px, 20px) scale(.5) rotate(240deg); }
    100% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(280deg); }
}

@keyframes goldenDrift4 {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
    5%   { opacity: 1; transform: translate(-20px, -25px) scale(1.2) rotate(-25deg); }
    13%  { opacity: 0; transform: translate(-35px, -50px) scale(.5) rotate(-50deg); }
    39%  { opacity: 0; transform: translate(-100px, -110px) scale(.4) rotate(-75deg); }
    45%  { opacity: 1; transform: translate(-115px, -125px) scale(1.3) rotate(-105deg); }
    52%  { opacity: 0; transform: translate(-130px, -140px) scale(.5) rotate(-135deg); }
    76%  { opacity: 0; transform: translate(50px, -30px) scale(.4) rotate(-170deg); }
    81%  { opacity: 1; transform: translate(65px, -20px) scale(1.3) rotate(-200deg); }
    89%  { opacity: 0; transform: translate(80px, -10px) scale(.5) rotate(-230deg); }
    100% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(-270deg); }
}

@media (max-width: 700px) {
    .golden-bg .glow-1,
    .golden-bg .glow-2,
    .golden-bg .glow-3 {
        width: 320px;
        height: 320px;
        filter: blur(70px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .golden-bg .glow,
    .golden-bg .spark,
    .golden-bg .sunray,
    .golden-bg .dust {
        animation: none;
    }
}

/* ================================================================
   پرتوهای نور خورشیدی مورب (Sun Rays)
   ================================================================ */
.golden-bg .sunray {
    position: absolute;
    width: 160%;
    height: 260px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 224, 150, .10) 40%,
            rgba(255, 224, 150, .22) 50%,
            rgba(255, 224, 150, .10) 60%,
            transparent 100%);
    filter: blur(22px);
    pointer-events: none;
}

.golden-bg .sunray-1 {
    top: -30%;
    left: -35%;
    transform: rotate(35deg);
    animation: sunrayPulse1 12s ease-in-out infinite;
}

.golden-bg .sunray-2 {
    top: -20%;
    left: -5%;
    height: 180px;
    opacity: .6;
    transform: rotate(28deg);
    animation: sunrayPulse2 16s ease-in-out infinite;
}

@keyframes sunrayPulse1 {
    0%, 100% { opacity: .4; transform: rotate(35deg) translateX(0); }
    50%      { opacity: .7; transform: rotate(35deg) translateX(40px); }
}

@keyframes sunrayPulse2 {
    0%, 100% { opacity: .3; transform: rotate(28deg) translateX(0); }
    50%      { opacity: .55; transform: rotate(28deg) translateX(-30px); }
}

@media (max-width: 700px) {
    .golden-bg .sunray { height: 160px; filter: blur(14px); }
}

/* ================================================================
   بافت ظریف نویزی پشت زمینه (Subtle Noise / Glass Texture)
   ================================================================ */
.golden-bg .noise-layer {
    position: absolute;
    inset: 0;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================================
   ذرات گرد و غبار طلایی شناور (Floating Golden Dust)
   ================================================================ */
.golden-bg .dust-field {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.golden-bg .dust {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFE9AE 0%, #F4A64A 60%, transparent 100%);
    box-shadow: 0 0 4px 1px rgba(255, 217, 138, .55);
    opacity: 0;
    animation-name: dustRise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes dustRise {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: .75; }
    85%  { opacity: .5; }
    100% { transform: translate(var(--dx, 15px), -105vh); opacity: 0; }
}

/* ================================================================
   خط‌های برش طلایی (Section Cut Dividers)
   قبل از عنوان بخش‌های اصلی صفحه، برای شکستن فضای خالی
   ================================================================ */
.w-is-tf2 > h3,
.frequently-tf2 > h3,
.comments-head h2 {
    position: relative;
    padding-top: 0px;
    width: fit-content;
}

.w-is-tf2 > h3::before,
.frequently-tf2 > h3::before,
.comments-head h2::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFE9AE, #F4A64A 55%, transparent);
    box-shadow: 0 0 12px rgba(244, 166, 74, .55);
    display: none;
}

.w-is-tf2 > h3::after,
.frequently-tf2 > h3::after,
.comments-head h2::after {
    content: "";
    position: absolute;
    top: -3px;
    right: 60px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: #F4C542;
    box-shadow: 0 0 10px 2px rgba(244, 197, 66, .7);
    display: none;
}

/* ================================================================
   خط چین طلایی بین بخش‌های صفحه (Section Divider)
   ================================================================ */
.section-divider {
    width: min(70%, 480px);
    height: 0;
    margin: 30px auto;
    border-top: 1px dashed rgba(244, 166, 74, .35);
    position: relative;
}

.section-divider::before {
    content: "✦";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    color: #edbd37;
    font-size: 12px;
    background: #14001f;
    padding: 0 10px;
}