@charset "UTF-8";

/* ==============================
   Renk Paleti
============================== */
html,
html.dark {
    --tp-red: #ef4444;
    --tp-orange: #f97316;
    --tp-amber: #f59e0b;
    --tp-lime: #84cc16;
    --tp-green: #22c55e;
    --tp-emerald: #10b981;
    --tp-teal: #14b8a6;
    --tp-cyan: #06b6d4;
    --tp-sky: #0ea5e9;
    --tp-blue: #3b82f6;
    --tp-indigo: #6366f1;
    --tp-violet: #8b5cf6;
    --tp-purple: #a855f7;
    --tp-fuchsia: #d946ef;
    --tp-pink: #ec4899;
    --tp-rose: #f43f5e;
    --tp-red-100: #fee2e2;
    --tp-orange-100: #fef3c7;
    --tp-amber-100: #fefce8;
    --tp-lime-100: #ecfccb;
    --tp-green-100: #dcfce7;
    --tp-emerald-100: #d1fae5;
    --tp-teal-100: #ccfbf1;
    --tp-cyan-100: #cffafe;
    --tp-sky-100: #e0f2fe;
    --tp-indigo-100: #e0e7ff;
    --tp-violet-100: #ede9fe;
    --tp-purple-100: #f3e8ff;
    --tp-fuchsia-100: #fae8ff;
    --tp-pink-100: #fce7f3;
    --tp-rose-100: #ffe4e6;
}

:root {
    --bg: #280043;
    --text: #151515;
    --yellow: #EDB74D;
    --red: #EB6666;
    --green: #6FB18A;
}

/* ==============================
   Genel Ayarlar
============================== */
html, body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

body, p {
    margin: 0;
}

a, body {
    color: var(--tp-500);
    background-color: #000000;
}

/* ==============================
   Fontlar
============================== */
@font-face { font-family: GILROY; src: url(https://cdn.fsksoft.com/fonts/gilroy/GILROY-300.TTF) format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: GILROY; src: url(https://cdn.fsksoft.com/fonts/gilroy/GILROY-400.TTF) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: GILROY; src: url(https://cdn.fsksoft.com/fonts/gilroy/GILROY-500.TTF) format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: GILROY; src: url(https://cdn.fsksoft.com/fonts/gilroy/GILROY-600.TTF) format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: GILROY; src: url(https://cdn.fsksoft.com/fonts/gilroy/GILROY-700.TTF) format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: GILROY; src: url(https://cdn.fsksoft.com/fonts/gilroy/GILROY-800.TTF) format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

/* ==============================
   HTML Renkler
============================== */
html {
    --tp-50: #f9fafb;
    --tp-100: #f3f4f6;
    --tp-200: #e5e7eb;
    --tp-300: #d1d5db;
    --tp-400: #9ca3af;
    --tp-500: #3a3a41;
    --tp-600: #303036;
    --tp-700: #27272b;
    --tp-800: #1d1d20;
    --tp-900: #18181b;
    --tp-blue-100: #dbeafe;
    --fsk-900: #f9fafb;
}

html.dark {
    --tp-50: #18181b;
    --tp-100: #1d1d20;
    --tp-200: #27272b;
    --tp-300: #303036;
    --tp-400: #3a3a41;
    --tp-500: #9ca3af;
    --tp-600: #d1d5db;
    --tp-700: #e5e7eb;
    --tp-800: #f3f4f6;
    --tp-900: #f9fafb;
    --tp-blue-100: #d7e8ff;
    --fsk-900: #f9fafb;
}

body {
    font-family: GILROY, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    font-weight: 500;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

* {
    --tp-site-color: rgba(59, 130, 246, 1);
    --tp-blue-gradient: linear-gradient(45deg, rgba(59, 130, 246, 1) 0, rgba(59, 192, 246, 1) 100%);
    font-family: GILROY;
}

a {
    text-decoration: none;
}

/* ==============================
   Grid ve Container
============================== */
.container { width: 100%; margin-right: auto; margin-left: auto; }
@media(min-width:640px){ .container{ max-width: 620px; } }
@media(min-width:768px){ .container{ max-width: 720px; } }
@media(min-width:1024px){ .container{ max-width: 968px; } }
@media(min-width:1280px){ .container{ max-width: 1140px; } }
@media(min-width:1536px){ .container{ max-width: 1480px; } }

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}

/* Grid Cols */
.col-span-1{ grid-column: span 1 / span 1; }
.col-span-2{ grid-column: span 2 / span 2; }
.col-span-3{ grid-column: span 3 / span 3; }
.col-span-4{ grid-column: span 4 / span 4; }
.col-span-5{ grid-column: span 5 / span 5; }
.col-span-6{ grid-column: span 6 / span 6; }
.col-span-7{ grid-column: span 7 / span 7; }
.col-span-8{ grid-column: span 8 / span 8; }
.col-span-9{ grid-column: span 9 / span 9; }
.col-span-10{ grid-column: span 10 / span 10; }
.col-span-11{ grid-column: span 11 / span 11; }
.col-span-12{ grid-column: span 12 / span 12; }

/* ==============================
   Nova Background (Animasyon)
============================== */
.nova-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #ff6a00, #ee0979, #00d2ff, #3b82f6);
    background-size: 800% 800%;
    animation: gradientAnimation 20s ease infinite;
    opacity: 0.8;
    filter: blur(50px);
    transition: opacity 1.5s ease-in-out;
}

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

/* ==============================
   Nova Başlık ve Linkler
============================== */
.nova-title {
    display: flex;
    text-align: center;
    width: 100%;
    justify-content: center;
    color: var(--tp-100);
}

.nova-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.link-item-icon {
    display: flex;
    justify-content: space-between;
    transition: .14s ease;
    background: #00000059;
    padding: 20px;
    backdrop-filter: blur(5px);
    border-radius: 20px;
}

.link-item-icon:hover {
    border-radius: 15px;
    background: #0000007d;
}

.nova-link-left {
    display: flex;
    color: white;
    align-items: center;
}

.nova-link-icon {
    width: 40px;
}

.nova-link-icon img {
    width: 25px;
    display: flex;
}

.nova-link-title {
    text-transform: uppercase;
}

.nova-link-share-icon {
    display: flex;
    font-size: 22px;
    align-items: center;
    color: var(--tp-50);
}

.nova-link-icon i { font-size: 24px; }
.nova-link-icon .fa-twitch { color: #9146FF; }
.nova-link-icon .fa-instagram {
    background: -webkit-linear-gradient(#833AB4, #FD1D1D, #FCB045);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nova-link-icon .fa-discord { color: #7289DA; }
.nova-link-icon .fa-youtube { color: #FF0000; }
.nova-link-icon .fa-spotify { color: #1DB954; }

/* ==============================
   Responsive Düzen
============================== */
@media only screen and (min-width:992px) {
    .nova-link-item {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 500px;
        margin-top: 25px;
        margin-bottom: 50px;
    }
    .nova-img {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 60px;
    }
    .nova-img img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 30%;
    }
}

@media only screen and (max-width:992px) {
    .nova-link-item {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 50px;
    }
    .nova-img {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
        z-index: 1;
        position: relative;
    }
    .nova-img img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 30%;
    }
}

/* ==============================
   Particle Animation
============================== */
.particle-animation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.nova-footer {
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin-top: 40px;
    padding: 20px 0;
    opacity: 0.8;
}

.nova-footer strong {
    color: #00ffcc; /* İsteğe göre renk değiştirilebilir */
}