/* Általános stílusok */
body {
    background-color: #1a1a2e;
    margin: 0;
    font-family: 'Arial', sans-serif; /* Állíts be egy kívánt betűtípust /
    background-color: #1a1a2e; / Sötét háttér /
    color: #e0e0e0; / Világosabb szövegszín */
    line-height: 1.6;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h3 {
    margin-top: 0;
}

/* Fejléc */
.fejlec {
    background-color: #100f1c; /* Sötétebb háttér marad */
    padding: 15px 0;
    border-bottom: 1px solid #0d0f18; /* sötétebb szegély */
}

.fejlec-tartalom {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;

    /* színátmenetes szöveg */
    background: linear-gradient(to right, #00aaff, #ff0033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.navigacio .nav-link {
    color: #a0a8b8; /* világosabb szürke, kékes árnyalat */
    margin-left: 30px;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.navigacio .nav-link:hover {
    /* színátmenetes hover helyett élénk piros-kék szín */
    color: #ff0033;
}

.navigacio .nav-link i {
    margin-right: 8px;
}

.bejelentkezes-gomb {
    background: linear-gradient(to right, #00aaff, #ff0033);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.3s ease;
}

.bejelentkezes-gomb:hover {
    background: linear-gradient(to right, #0077cc, #cc0022);
}

/* Fő tartalom */
.focikk {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Hős szekció */
.hoszekcio {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 80px 20px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

.hoszekcio-hatter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://via.placeholder.com/1400x400/36454F/FFFFFF?text=City+Background');
    background-size: cover;
    background-position: center;
    filter: brightness(0.4);
    z-index: 1;
}

.hoszekcio-tartalom {
    position: relative;
    z-index: 2;
}

.fo-logo {
    width: 120px;
    height: 120px;
}

.hoszekcio-cim {
    font-size: 3.5em;
    margin-bottom: 30px;

    background: linear-gradient(to right, #00aaff, #ff0033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.csatlakozas-gomb {
    background: linear-gradient(to right, #00aaff, #ff0033);
    color: #fff;
    border: none;
    padding: 15px 35px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.3em;
    font-weight: bold;
    transition: background 0.3s ease;
}

.csatlakozas-gomb:hover {
    background: linear-gradient(to right, #0077cc, #cc0022);
}

.csatlakozas-gomb i {
    margin-right: 10px;
}



.stat-ikon {
    font-size: 2.5em;
    color: #00aaff; /* kék árnyalat */
    margin-bottom: 10px;
}

.stat-cim {
    display: block;
    font-size: 1.1em;
    color: #a0a8b8; /* világosabb kékes-szürke */
    margin-bottom: 5px;
}

.stat-ertek {
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0033; /* piros árnyalat */
    text-shadow: 0 0 6px #00aaff;
}

/* Szabályok és Tartalom */
.szabalyok-es-tartalom {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.doboz {
    background-color: #181e22;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 30px;
    flex: 1;
    min-width: 45%;
    box-sizing: border-box;

    border-image: linear-gradient(to right, #00aaff, #ff0033) 1;
    box-shadow: 0 0 25px #0d0f18;
    margin-top: 50px;
}

.doboz-cim {
    font-size: 1.4em;
    margin-bottom: 20px;
    border-bottom: 2px solid #0d0f18;
    padding-bottom: 10px;

    background: linear-gradient(to right, #00aaff, #ff0033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.alapszabalyt-doboz .szabaly-lista li {
    font-size: 1em;
    color: #a0a8b8;
    margin-bottom: 10px;
}

.alapszabalyt-doboz .szabaly-lista li i {
    color: #28a745;
    margin-right: 10px;
}

.egyedi-tartalom-doboz .tartalom-sor {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.egyedi-tartalom-doboz .tartalom-elem {
    flex: 1;
}

.tartalom-alcim {
    display: block;
    font-weight: bold;
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.tartalom-szoveg {
    font-size: 0.95em;
    color: #a0a8b8;
}

/* Havi Top Outfit-ek */
.szekcio-cim-csillag {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;

    background: linear-gradient(to right, #00aaff, #ff0033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.szekcio-cim-csillag i {
    margin-right: 10px;
}

.havi-top-outfitek {
    margin-bottom: 40px;
}

.outfit-kartyak {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.outfit-kartya {
    background-color: #181e22;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    width: 300px;
    box-sizing: border-box;

    border-image: linear-gradient(to right, #00aaff, #ff0033) 1;
    box-shadow: 0 4px 12px #0d0f18;
    transition: transform 0.3s ease;
}

.outfit-kartya:hover {
    transform: translateY(-5px);
}

.outfit-kep {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    box-shadow: inset 0 0 15px #00aaff, inset 0 0 15px #ff0033;
}

.outfit-info {
    padding: 15px;
    color: #a0a8b8;
    font-size: 0.9em;
}

.outfit-nev {
    display: block;
    font-weight: bold;
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.outfit-datum {
    margin-right: 10px;
    font-size: 0.85em;
}

.outfit-likeok {
    float: right;
    font-size: 0.85em;
}

.outfit-likeok i {
    color: #ff0033; /* piros szív */
    margin-right: 5px;
}


/* Changelogs & Események */
.changelogs-es-esemenyek {
    margin-bottom: 40px;
    margin-top: 50px;
}

.changelog-doboz {
    padding: 30px;
}

.changelog-elem {
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.changelog-elem:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.changelog-cim {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 5px;
    display: block;
    background: linear-gradient(to right, #00aaff, #ff0033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


.changelog-leiras {
    color: #b0b0b0;
    font-size: 0.95em;
}

.changelog-datum {
    display: block;
    font-size: 0.8em;
    color: #707070;
    text-align: right;
    margin-top: 5px;
}

.kozossegi-media-videok {
    display: flex;
    gap: 30px; 
    margin-bottom: 40px;
    flex-wrap: wrap;
    justify-content: center; 
}

.kozossegi-doboz {
    background-color: #100f1c;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    flex: 1;
    min-width: 300px; 
    max-width: 500px; 
    box-sizing: border-box;
    margin-top: 50px;
}


.lablec {
    background-color: #181e22;
    padding: 40px 20px;
    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, #00aaff, #ff0033) 1;
}

.lablec-tartalom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;
}

.lablec-oszlop {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
}

.lablec-cim {
    font-size: 1.2em;
    margin-bottom: 15px;
    font-weight: bold;

    background: linear-gradient(to right, #00aaff, #ff0033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.lablec-leiras {
    font-size: 0.9em;
    line-height: 1.6;
    color: #a0a8b8;
}
 
.lablec-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lablec-lista li {
    margin-bottom: 10px;
}

.lablec-link {
    color: #a0a8b8;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.lablec-link:hover {
    color: #00aaff;
}

.kozossegi-ikonok {
    display: flex;
    gap: 15px;
}

.kozossegi-link {
    color: #a0a8b8;
    font-size: 1.5em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.kozossegi-link:hover {
    color: #00aaff;
}

.elvalaszto {
    border: none;
    border-top: 1px solid #0d0f18; /* sötét, finom elválasztó */
    margin: 30px auto;
    width: 90%;
    max-width: 1400px;
}

.szerzoi-jog {
    text-align: center;
    font-size: 0.8em;
    color: #707070; /* halvány szürke */
}

.kozossegi-ikonok {
    display: flex;
    gap: 15px;
}

.kozossegi-link {
    color: #a0a8b8; /* világosabb kékes-szürke */
    font-size: 1.5em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.kozossegi-link:hover {
    color: #00aaff; /* kék árnyalat hoverkor */
}



/* Reszponzivitás */
@media (max-width: 1200px) {
    .fejlec-tartalom, .focikk, .lablec-tartalom {
        max-width: 960px; /* Szűkebb konténer kisebb képernyőkön */
    }
}

@media (max-width: 992px) {
    .navigacio {
        display: none; /* Navigáció elrejtése mobil nézetben, hamburger menü jöhetne ide */
    }

    .fejlec-tartalom {
        justify-content: center;
    }

    .felhasznaloi-profil {
        margin-left: 20px; /* Hely az oldal balján */
    }
}

@media (max-width: 768px) {
    .hoszekcio-cim {
        font-size: 2.5em;
    }

    .csatlakozas-gomb {
        padding: 12px 25px;
        font-size: 1.1em;
    }

    .statisztika-doboz {
        flex: 1 1 100%; /* Minden doboz külön sorba kerül */
        min-width: unset;
    }

    .szabalyok-es-tartalom, .kozossegi-media-videok {
        flex-direction: column;
        gap: 20px;
    }

    .doboz, .kozossegi-doboz {
        min-width: unset;
        width: 100%;
    }

    .outfit-kartyak {
        flex-direction: column;
        align-items: center;
    }

    .outfit-kartya {
        width: 90%; /* Kisebb képernyőn a kártyák szélesebbek */
        max-width: 350px;
    }

    .lablec-tartalom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .lablec-oszlop {
        min-width: unset;
        width: 100%;
        margin-bottom: 30px;
    }

    .kozossegi-ikonok {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .fejlec-tartalom {
        flex-direction: column;
        gap: 15px;
    }

    .fejlec .logo {
        margin-bottom: 10px;
    }

    .hoszekcio-cim {
        font-size: 2em;
    }

    .csatlakozas-gomb {
        font-size: 1em;
        padding: 10px 20px;
    }

    .doboz-cim {
        font-size: 1.2em;
    }

    .szekcio-cim-csillag {
        font-size: 1.5em;
    }
}

/* Eredeti scripts-section stílusok - most újragondolva a képek alapján */
.scripts-section {
    /* Az egész szekció háttérszíne, mint a legelső képen (lila/fekete) */
    background: #1a1a2e;
    padding: 2px 0;
    color: #fff; /* Szöveg fehér marad */
    text-align: center;
}

.scripts-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.scripts-section h2 {
    font-size: 3em;
    margin-bottom: 60px; /* Cím alatti térköz */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Ikon és szöveg közötti térköz */
}

.scripts-section h2 i {
    /* A cím ikonja kék-piros gradiens */
    background: linear-gradient(to right, #007bff, #ff007b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-size: 1em; /* Maradjon arányos a címmel */
}

/* Az új konténer, ami a három kártyát fogja, és a gradiens keretet kapja */
.cards-container-with-border {
    max-width: 1000px; /* Az egész kártya-konténer max szélessége */
    margin: 0 auto; /* Középre igazítás */
    padding: 40px 30px; /* Belső térköz a keret és a kártyák között */
    background-color: rgba(0, 0, 0, 0.4); /* Sötét, áttetsző háttér a keret belsejében */
    border-radius: 10px; /* Lekerekített sarkok */

    /* Gradiens keret beállítása */
    border: 3px solid transparent; /* Keret vastagsága */
    border-image: linear-gradient(to right, #007bff, #ff007b); /* Kék-piros gradiens */
    border-image-slice: 1; /* A keret szeleteinek száma */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Finom árnyék a keretre */
}

.cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px; /* Kártyák közötti térköz */
    flex-wrap: wrap; /* Tördelés kisebb képernyőkön */
}

.card {
    background: rgba(255, 255, 255, 0.05); /* Kártya háttér áttetsző fehér (eredeti) */
    border-radius: 10px;
    padding: 30px;
    flex: 1; /* Egyenlő szélességű kártyák */
    max-width: 300px; /* Maximális szélesség egy kártyára */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Árnyék a kártyákra */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 250px; /* Minimális magasság a kártyáknak, hogy egységesek legyenek */
}

.card .icon-container {
    background: rgba(255, 255, 255, 0.1); /* Ikon háttér (eredeti) */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.card .icon-container i {
    font-size: 3em; /* Ikon mérete */
    /* A kártya ikonja kék-piros gradiens */
    background: linear-gradient(to right, #007bff, #ff007b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.card p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #ddd; /* Szöveg színe */
}

/* Gomb stílusok (maradnak a kék-piros gradienssel) */
.button-container {
    margin-top: 60px; /* Térköz a kártyák alatt */
    text-align: center;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 1.8em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(to right, #007bff, #ff007b);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    gap: 15px;
    white-space: nowrap;
}

.cta-button i {
    font-size: 1em;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Responsív design */
@media (max-width: 1024px) {
    .cards-container-with-border {
        max-width: 90%; /* Kisebb képernyőn jobban kitölti a szélességet */
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    .scripts-section h2 {
        font-size: 2.2em;
    }

    .cards-wrapper {
        flex-direction: column; /* Kisebb képernyőn egymás alá kerülnek */
        align-items: center;
    }

    .card {
        margin-bottom: 25px;
        max-width: 90%; /* Szélesség telefonon */
    }

    .cta-button {
        font-size: 1.4em;
        padding: 12px 30px;
    }
}


/* "Streamereink" szekció stílusai */
.creators-section {
    background: #1a1a2e; /* Lila/fekete háttér */
    padding: 10px 0; /* Kicsit kisebb térköz */
    color: #fff;
    text-align: center;
}

.creators-section .container {
    max-width: 1100px; /* Kicsit kisebb konténer szélesség */
    margin: 0 auto;
    padding: 0 20px;
}

.creators-title {
    font-size: 2.8em; /* Kicsit kisebb cím */
    margin-bottom: 50px; /* Kicsit kisebb térköz */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Kicsit kisebb térköz */
    color: #fff;
}

.creators-title i {
    /* Cím ikon kék-piros gradiens */
    background: linear-gradient(to right, #007bff, #ff007b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-size: 1.05em; /* Kicsit kisebb ikon */
}

.creators-cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 25px; /* Kicsit kisebb térköz a kártyák között */
    flex-wrap: wrap;
}

.creator-card {
    background: rgba(255, 255, 255, 0.05); /* Kártya háttér áttetsző fehér */
    border-radius: 10px;
    padding: 25px; /* Kicsit kisebb belső térköz */
    flex: 1;
    max-width: 280px; /* Kicsit kisebb maximális szélesség egy kártyára */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Kicsit finomabb árnyék */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 300px; /* Kisebb minimális magasság a kártyáknak */
}

.creator-name {
    font-size: 1.6em; /* Kisebb név betűméret */
    margin-bottom: 15px; /* Kisebb térköz */
    color: #fff;
}

.creator-image-container {
    width: 100px; /* Kisebb kör alakú képek */
    height: 100px;
    border-radius: 50%; /* Ez tartja kör alakban a képet */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}


.creator-button {
    display: inline-block;
    padding: 9px 22px; /* Kisebb gomb padding */
    border-radius: 5px;
    font-size: 1em; /* Kisebb gomb betűméret */
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #007bff, #ff007b);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* Kisebb árnyék */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 15px; /* Kisebb térköz */
}

.creator-button:hover {
    transform: translateY(-1px); /* Finomabb felugrás */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Responsív design a Streamereink szekcióhoz */
@media (max-width: 768px) {
    .creators-title {
        font-size: 2em;
    }

    .creators-cards-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .creator-card {
        margin-bottom: 20px;
        max-width: 90%;
        min-height: 280px;
    }
}


.creator-button {
    display: inline-block;
    padding: 9px 22px; /* Kisebb gomb padding */
    border-radius: 5px;
    font-size: 1em; /* Kisebb gomb betűméret */
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #007bff, #ff007b);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* Kisebb árnyék */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 15px; /* Kisebb térköz */
}

.creator-button:hover {
    transform: translateY(-1px); /* Finomabb felugrás */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Responsív design a Streamereink szekcióhoz */
@media (max-width: 768px) {
    .creators-title {
        font-size: 2em;
    }

    .creators-cards-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .creator-card {
        margin-bottom: 20px;
        max-width: 90%;
        min-height: 280px;
    }
}

/* Görgő

/* Gradiens görgetősáv (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* A görgetősáv szélessége */
}

::-webkit-scrollbar-track {
    background: #2c2c2c; /* A görgetősáv háttér színe, amikor üres (ez legyen sötétszürke) */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    /* A görgető "hüvelykujjának" gradiens színe */
    background: linear-gradient(to bottom, #007bff, #ff007b); /* Kék-piros gradiens */
    border-radius: 10px;
    border: 3px solid #2c2c2c; /* Egy kis sötétszürke keret, hogy kiemelkedjen a háttérből */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #0056b3, #cc005c); /* Kicsit sötétebb hover szín */
}

/* Firefox specifikus stílusok (ha támogatni szeretnéd) */
html {
    scrollbar-color: #007bff #2c2c2c; /* thumb color track color. Itt csak sima színt tudunk megadni, nem gradienst */
    scrollbar-width: thin; /* auto | thin | none */
}