/* ===================
Alapbeállítások
====================*/

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: #0d1117;
    color: #f5f5f5;
    font-family: Arial, Helvetica, sans-serif;
}


.fo-navigacio.nyitva {
    display: flex;
    flex-direction: column;
}

.menu-gomb {
    display: flex;
}

    /* ==============================
   VISSZA A TETEJÉRE GOMB
================================= */


.fel-gomb {
    position: fixed;
    right: 24px;
    bottom: 24px;

    width: 46px;
    height: 46px;

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

    padding: 0;

    border: 1px solid #665126;
    border-radius: 50%;

    background-color: rgba(13, 17, 23, 0.94);
    color: #e9b949;

    font-size: 1.3rem;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    transition: 
         opacity 0.25s ease,
         visibility 0.25s ease,
         transform 0.25s ease,
         background-color 0.2s ease;

         z-index: 1000;
    }
    
    .fel-gomb.lathato {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .fel-gomb:hover {
        background-color: #e9b949;
        color: #111720;
    }

/*================
Fejléc - Mobilos Alap
================*/

.fejlec {
    position: relative;
    z-index: 1000;

    background-color:#0d1117;
    border-bottom: 1px solid #252b34;
}

.fejlec-tartalom {
    min-height: 76px;
    padding: 10px 16px;

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

    position: relative;
}
/* ==============================
   LOGÓ
================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;
    text-decoration: none;
}

.logo-kep {
    display: block;

    width: 90px;
    height: 90px;

    object-fit: contain;
}

.logo-szoveg {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.logo-nev {
    color: #ffffff;

    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.25rem;
    font-weight: 700;

    letter-spacing: 0.12rem;
}

.logo-szlogen {
    color: #a1a7b3;

    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
}



/* ==============================
   MOBIL NAVIGÁCIÓ
================================= */

.fo-navigacio {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    padding: 12px 16px 18px;

    background-color: #111720;
    border-top: 1px solid #252b34;
    border-bottom: 1px solid #252b34;
}

.fo-navigacio.nyitva {
    display: flex;
    flex-direction: column;
}

.fo-navigacio a {
    padding: 15px 6px;

    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;

    border-bottom: 1px solid #252b34;
}

.fo-navigacio a:last-child {
    border-bottom: none;
}

.fo-navigacio a:hover {
    color: #e9b949;
}

.fo-navigacio a.aktiv {
    color: #e9b949;
}

/* ==============================
   IDEIGLENES FŐ TARTALOM
================================= */

.fo-tartalom {
    width: min(calc(100% - 32px), 1200px);
    margin: 0 auto;
    padding: 60px 0;
}

.fo-tartalom h1 {
    margin-bottom: 16px;

    color: #ffffff;
    font-size: 2.2rem;
}

.fo-tartalom p {
    color: #c4c8d0;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ==============================
   TABLET ÉS ASZTALI NÉZET
================================= */

@media (min-width: 1100px) {
    .fejlec-tartalom {
        width: calc(100% - 64px);
        min-height: 88px;
        max-width: none;

        margin: 0 auto;
        padding: 12px 0;

        display: flex;
        align-items: center;
        gap: 48px;
    }

    .logo {
        flex-shrink: 0;
        gap: 5px;
    }

    .logo-kep {
        width: 100px;
        height: 100px;
    }

    .logo-nev {
        font-size: 2rem;
        letter-spacing: 0.14rem;
    }

    .logo-szlogen {
        font-size: 0.72rem;
        letter-spacing: 0.1rem;
    }

    .fo-navigacio {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;

        flex: 1;
        
        position: static;
        padding: 0;

        background: none;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .fo-navigacio a {
        position: relative;

        display: flex;
        align-items: center;

        min-height: 80px;
        padding: 0;

        border: none;
        background-color: transparent;

        color: #f1f3f5;
        font-size: 0.95rem;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
    }

    .fo-navigacio a::after {
        content: "";

        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;

        height: 2px;

        background-color: #e9b949;

        transform: scaleX(0);
        transition: transform 0.2s ease;
    }

    .fo-navigacio a:hover::after,
    .fo-navigacio a.aktiv::after {
        transform: scaleX(1);
    }

    .fejlec-muveletek {
        display: flex;
        align-items: center;

        flex-shrink: 0;
    }

    /* =================================
   KERESŐGOMB – VÉGSŐ JAVÍTÁS
================================= */

.kereses-gomb {
    width: 56px;
    height: 56px;

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

    padding: 0;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: none;
    outline: none;
    border-radius: 8px;

    background: transparent !important;
    color: #ffffff;

    font-size: 2.3rem;
    line-height: 1;

    cursor: pointer;
}

.kereses-gomb:hover {
    background-color: #1a2029 !important;
    color: #e9b949;
}

.kereses-gomb:focus-visible {
    outline: 2px solid #e9b949;
    outline-offset: 3px;
}

    .menu-gomb { 
        display: none;
    }

    .labjegy-also {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }


}  


/* ==============================
   KISEBB TELEFONOK
================================= */

@media (max-width: 380px) {
    
    .fejlec-tartalom {
        padding-inline: 12px;
    }

    .logo-kep {
        width: 44px;
        height: 44px;
    }

    .logo-nev {
        font-size: 1rem;
    }

    .logo-szlogen {
        font-size: 0.52rem;
        letter-spacing: 0.05rem;
    }

    .kereses-gomb,
    .menu-gomb {
        width: 40px;
        height: 40px;
    }

    /* ==============================
   HÍRLEVÉL
================================= */

.hirlevel-urlap {
    flex-direction: column;

    border: none;
    overflow: visible;

    background: transparent;
}

.hirlevel-urlap input {
    width: 100%;

    border: 1px solid #353d48;
    border-radius: 7px;

    background-color: #0d1117;
}

.hirlevel-urlap button {
    width: 100%;
    margin-top: 8px;

    border-radius: 7px;
}

}

/* ==============================
   FŐOLDALI KIEMELT TERÜLET
================================= */

.fo-tartalom {
    width: min(calc(100% - 32px), 1680px);
    margin: 0 auto;
    padding: 28px 0 60px;
}

.kezdo-racs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 1100px) {
    .kezdo-racs {
        grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.9fr);
        gap: 20px;
    }
}

/* ==============================
   HERO SLIDER
================================= */

.hero-slider {
    position: relative;

    width: 100%;
    min-height: 430px;

    overflow: hidden;

    border: 1px solid #343b45;
    border-radius: 12px;

    background-color: #111720;
}

.hero-dia {
    display: none;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.hero-dia.aktiv {
    display: block;
}

.hero-kep {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}
.hero-sotetites {
    position: absolute;
    inset: 0;

    background: 
         linear-gradient(
            90deg,
            rgba(5, 8, 12, 0.70) 0%,
            rgba(5, 8, 12, 0.42) 48%,
            rgba(5, 8, 12, 0.06) 100%
         );
}

.hero-tartalom {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 46px;

    max-width: 620px;

    z-index: 2;
}

.hero-kategoria{

    display:inline-block;

    padding:6px 10px;

    border-radius:6px;

    font-size:.72rem;
    font-weight:700;

    text-transform:uppercase;

}

.kategoria-lore{
    background:#D4A017;
    color:#111720;
}

.kategoria-anime{
    background:#8B5CF6;
    color:#ffffff;
}

.kategoria-gaming{
    background:#16A34A;
    color:#ffffff;
}

.kategoria-konyvek{
    background:#C2410C;
    color:#ffffff;
}

.kategoria-film{
    background:#DC2626;
    color:#ffffff;
}

.hero-cim {
    margin-bottom: 14px;

    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.08;
}

.hero-leiras {
    margin-bottom: 22px;

    color: #d6dae0;

    font-size: 1rem;
    line-height: 1.6;
}

.hero-gomb {
    display: inline-block;

    padding: 12px 20px;

    border-radius: 6px;

    background-color: #e9b949;
    color: #111720;

    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-gomb:hover {
    background-color: #f5ca63;
}



.slider-gomb span {
    display: block;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1;

    transform: translateY(-1px);
}

.slider-gomb:hover{

    background:#e9b949;

    color:#111720;

}

/* ==============================
   LEGFRISSEBB TARTALMAK
================================= */

.legfrissebb-keret {
    position: relative;

    padding: 1px;

    overflow: hidden;

    border-radius: 12px;
}

.legfrissebb-keret::before {
    content: "";

    position: absolute;

    width: 45%;
    height: 180%;

    top: -40%;
    left: 27%;

    background: linear-gradient(
        90deg,
        transparent,
        #e9b949,
        transparent
    );

    animation: keretForgas 8s linear infinite;
}

.legfrissebb-blokk {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;
    padding: 22px;

    border-radius: 11px;

    background-color: #11161d;

    z-index: 1;
}

@keyframes keretForgas {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.szekcio-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.szekcio-fejlec h2 {
    color: #ffffff;
    font-size: 1.2rem;
}

.szekcio-fejlec > a {
    color: #aab0b9;

    font-size: 0.78rem;
    text-decoration: none;
    text-transform: uppercase;
}

.szekcio-fejlec > a:hover {
    color: #e9b949;
}

.legfrissebb-lista {
    display: grid;

    grid-auto-rows:
        minmax(0, 1fr);

    gap: 14px;

    flex: 1;
    min-height: 0;
}

.friss-kartya {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;

    padding-bottom: 14px;

    border-bottom: 1px solid #303741;
}

.friss-kartya:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.friss-kartya img {
    width: 110px;
    height: 88px;

    object-fit: cover;

    border-radius: 7px;
}

.friss-szoveg {
    min-width: 0;
}

.friss-kategoria {
    display: inline-block;

    width: fit-content;

    margin-bottom: 6px;
    padding: 3px 7px;

    border-radius: 4px;

    font-size: 0.63rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.friss-kartya h3 a {
    color: #f2f4f7;
    text-decoration: none;
}

.friss-kartya h3 a:hover {
    color: #e9b949;
}

.friss-kartya time {
    color: #8d949e;
    font-size: 0.72rem;
}

/* ==============================
   LEGOLVASOTTABB CIKKEK
================================= */

.legolvasottabb-szekcio {
    margin-top: 22px;
    padding: 26px;

    border: 1px solid #303741;
    border-radius: 12px;

    background: linear-gradient(
        180deg,
        #111720 0%,
        #0d1117 100%,
    );
}

.legolvasottabb-fejlec {
    margin-bottom: 22px;
}

.szekcio-felirat {
    display: block;

    margin-bottom: 5px;

    color: #e9b949;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.legolvasottabb-racs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.top-kartya {
    min-width: 0;

    overflow: hidden;

    border: 1px solid #303741;
    border-radius: 10px;

    background-color: #11161d;

    transition: 
        transform 0.2s ease,
        border-color 0.2s ease;

}

.top-kartya:hover {
    transform: translateY(-4px);
    border-color: #665126;
}

.top-kep-link img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    position: relative;
    z-index: 1;

    transition: transform 0.35s ease;
}

.top-kartya:hover .top-kep-link img {
    transform: scale(1.04);
}

.top-kartya:hover .top-helyezes {
    opacity: 1;
    visibility: visible;
}

.top-helyezes {
    position: absolute;
    top: 14px;
    left: 14px;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: translateX(-10px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

    z-index: 3;
}

.top-helyezes,
.top-hover-cim {
    z-index: 3;
}

.top-hover-cim {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;

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

    transition: 
         opacity 0.25s ease,
         transform 0.25s ease;

    z-index: 3;     
}

.top-kep-link::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(5, 8, 12, 0.9) 0%,
        rgba(5, 8, 12, 0.25) 60%,
        rgba(5, 8, 12, 0.05) 100%
    );

    opacity: 0;

    transition: opacity 0.25s ease;

    z-index: 2;

    pointer-events: none;
}

.top-kartya:hover .top-kep-link::after {
    opacity: 1;
}

.top-kartya:hover .top-helyezes,
.top-kartya:hover .top-hover-cim {
    opacity: 1;
    transform: translate(0);
}

.top-kartya:hover .top-kep-link img {
    transform: scale(1.05);
}

.top-kep-link {
    position: relative;
    overflow: hidden;
}


.top-kartya-tartalom {
    padding: 16px;
}

.top-kartya h3 {
    margin: 9px 0 12px;

    font-size: 1.03rem;
    line-height: 1.35;
}

.top-kartya h3 a {
    color: #f4f5f7;
    text-decoration: none;
}

.top-kartya h3 a:hover {
    color: #e9b949;
}

.top-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;

    color: #8f97a2;

    font-size: 0.7rem;
}

/* ==============================
   LEGOLVASOTTABB – TABLET
================================= */

@media (min-width: 650px) and (max-width: 1099px) {

    .legolvasottabb-racs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

}

/* ==============================
   LEGOLVASOTTABB – ASZTALI
================================= */

@media (min-width: 1100px) {

    .legolvasottabb-racs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;

        overflow: visible;
    }

    .top-kartya {
        width: auto;
        min-width: 0;
        flex: initial;
    }

}

@media (max-width: 600px) {

    .hero-slider {
        min-height: 420px;
    }

    .hero-dia {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        display: none;
    }

    .hero-dia.aktiv {
        display: block;
    }

    .hero-kep {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .hero-sotetites {
        position: absolute;
        inset: 0;

        background: linear-gradient(
            to top,
            rgba(5, 8, 12, 0.72) 0%,
            rgba(5, 8, 12, 0.25) 48%,
            rgba(5, 8, 12, 0.04) 100%
        );

        z-index: 1;
        pointer-events: none;
    }

    .hero-tartalom {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 52px;

        max-width: none;

        z-index: 2;
    }

    .hero-cim {
        margin-bottom: 12px;
        color: #ffffff;

        font-size: 1.75rem;
        line-height: 1.12;
    }

    .hero-leiras {
        margin-bottom: 16px;

        font-size: 0.9rem;
        line-height: 1.5;
    }

    .hero-gomb {
        padding: 10px 17px;

        font-size: 0.85rem;
    }

    .slider-progress {
        left: 20px;
        right: 20px;
        bottom: 15px;

        gap: 10px;

        z-index: 5;
    }

    .progress-vonal {
        height: 4px;
    }

    .friss-kartya {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .friss-kartya img {
        width: 90px;
        height: 76px;
    }
}


/*==================================
PROGRESS NAVIGÁCIÓ
===================================*/

.slider-progress{

    position:absolute;

    left:30px;
    right:30px;
    bottom:18px;

    display:flex;

    gap:18px;

    z-index:30;

}

.progress-elem{

    flex:1;

    background:none;
    border:none;

    cursor:pointer;

    text-align:left;

    padding:0;

}

.progress-cim{

    display:block;

    margin-bottom:8px;

    color:#ffffff;

    font-size:.75rem;

    font-weight:600;

    text-transform:uppercase;

    opacity:.75;

}

.progress-vonal{

    display:block;

    height:8px;

    border-radius:999px;

    overflow:hidden;

    background:#4a4f58;

    position:relative;

}

.progress-vonal::after{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:0;

    height:100%;

    background:#e9b949;

}

.progress-elem.aktiv
.progress-vonal::after{

    animation:toltes 6s linear forwards;

}

@keyframes toltes{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}


/* ==============================
   LÁBJEGYZET / FOOTER
================================= */

.labjegy {
    margin-top: 50px;

    border-top: 1px solid #8d6b20;

    background: 
        linear-gradient(
            180deg,
            #0b0f15 0%,
            #070a0f 100%
        );
}

.labjegy-tartalom {
    width: min(calc(100% - 48px), 1600px);
    margin: 0 auto;
    padding: 52px 0 42px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 38px;
}

/* Márka */

.labjegy-marka {
    max-width: 430px;
}

.labjegy-logo {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    color: #ffffff;
    text-decoration: none;
}

.labjegy-logo-szoveg {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.labjegy-logo-nev {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
}

.labjegy-szlogen {
    color: #a0a7b2;

    font-size: 0.8rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.labjegy-leiras {
    max-width: 390px;
    margin-top: 18px;

    color: #9ba2ad;

    font-size: 0.9rem;
    line-height: 1.7;
}

.labjegy-logo-kep {
    display: block;

    width: 120px;
    height: 120px;

    object-fit: contain;
    flex-shrink: 0;
}

/* Footer oszlopok */

.labjegy-oszlop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.labjegy-oszlop h2 {
    margin-bottom: 5px;

    color: #ffffff;

    font-size: 0.92rem;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.labjegy-oszlop a {
    position: relative;

    color: #9ba2ad;

    font-size: 0.86rem;
    text-decoration: none;

    transition:
         color 0.2s ease,
         transform 0.2s ease;
}

.labjegy-oszlop a:hover {
    color: #e9b949;
    transform: translateX(3px);
}

/* Közösségi linkek */

.kozossegi-linkek {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Alsó footer */

.labjegy-also {
    width: min(calc(100% - 48px), 1600px);
    margin: 0 auto;
    padding: 20px 0;

    display: flex;
    flex-direction: column;
    gap: 10px;

    border-top: 1px solid #252b34;

    color: #747c87;

    font-size: 0.75rem;
}

.labjegy-also a {
    width: fit-content;

    color: #8d949e;
    text-decoration: none;
}

.labjegy-also a:hover {
    color: #e9b949;
}

    @media (min-width: 800px) {

    .labjegy-tartalom {
        grid-template-columns:
            minmax(420px, 2fr)
            repeat(3, minmax(140px, 0.8fr));

        align-items: start;
        gap: 36px;
    }

    .labjegy-also {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    
/* ==============================
   HÍRLEVÉL
================================= */

.hirlevel {
    max-width: 460px;
    margin-top: 26px;
    padding-top: 22px;

    border-top: 1px solid #252b34;
}

.hirlevel h2 {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 0.92rem;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.hirlevel p {
    margin-bottom: 14px;

    color: #8f97a2;

    font-size: 0.82rem;
    line-height: 1.5;
}

.hirlevel-urlap {
    display: flex;

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

    border: 1px solid #353d48;
    border-radius: 7px;

    overflow: hidden;

    background-color: #0d1117;
}

.hirlevel-urlap input {
    min-width: 0;
    flex: 1;

    padding: 12px 14px;

    border: none;
    outline: none;

    background-color: transparent;
    color: #ffffff;

    font: inherit;
    font-size: 0.82rem;
}

.hirlevel-urlap input::placeholder {
    color: #747c87;
}

.hirlevel-urlap:focus-within {
    border-color: #e9b949;
}


.hirlevel-urlap button {
    flex-shrink: 0;

    padding: 12px 16px;

    border: none;

    background-color: #e9b949;
    color: #111720;

    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;

    cursor: pointer;

    transition: background-color 0.2s ease;
}

.hirlevel-urlap button:hover {
    background-color: #f5ca63;
}

.vizualisan-rejtett {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}

}

/* =================================
   MOBILNÉZET 
================================= */
@media (max-width: 799px) {

    .labjegy-tartalom {
        width: calc(100% - 32px);

        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px 20px;
    }

    .labjegy-marka {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .labjegy-oszlop {
        min-width: 0;
    }

    .labjegy-oszlop h2 {
        font-size: 0.72rem;
        letter-spacing: 0.03rem;
    }

    .labjegy-oszlop a {
        font-size: 0.72rem;
        overflow-wrap: anywhere;
    }

}


/* =================================
   MOBILNÉZET – VÉGSŐ FELÜLÍRÁS
================================= */

@media (max-width: 600px) {

    /* ---------- FEJLÉC ---------- */

    .fejlec-tartalom {
        width: 100%;
        min-height: 70px;

        padding: 8px 14px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .logo {
        min-width: 0;
        flex: 1;

        gap: 7px;
    }

    .logo-kep {
        width: 40px;
        height: 40px;

        flex-shrink: 0;
    }

    .logo-szoveg {
        min-width: 0;
    }

    .logo-nev {
        font-size: 1.05rem;
        letter-spacing: 0.08rem;
        white-space: nowrap;
    }

    .logo-szlogen {
        font-size: 0.46rem;
        letter-spacing: 0.04rem;
        white-space: nowrap;
    }

.fejlec-muveletek {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    flex-shrink: 0;
}

.kereses-gomb,
.menu-gomb {
    width: 40px;
    height: 40px;

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

    flex: 0 0 40px;

    padding: 0;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: none;
    border-radius: 6px;

    background: transparent !important;
    color: #ffffff;

    font-size: 1.45rem;
    line-height: 1;

    cursor: pointer;
}

.kereses-gomb span,
.menu-gomb span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    line-height: 1;
}


    /* ---------- FŐ TARTALOM ---------- */

    .fo-tartalom {
        width: calc(100% - 28px);
        margin: 0 auto;
        padding: 28px 0 50px;
    }

    .kezdo-racs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }


    /* ---------- SLIDER ---------- */

    .hero-slider {
        width: 100%;
        min-height: 420px;

        border-radius: 10px;
        overflow: hidden;
    }

    .hero-dia {
        position: absolute;
        inset: 0;

        display: none;

        width: 100%;
        height: 100%;
    }

    .hero-dia.aktiv {
        display: block;
    }

    .hero-kep {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .hero-sotetites {
        position: absolute;
        inset: 0;

        background: linear-gradient(
            to top,
            rgba(5, 8, 12, 0.88) 0%,
            rgba(5, 8, 12, 0.42) 45%,
            rgba(5, 8, 12, 0.05) 75%
        );

        pointer-events: none;
        z-index: 1;
    }

    .hero-tartalom {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 52px;

        max-width: none;

        z-index: 2;
    }

    .hero-kategoria{

    display:inline-block;

    padding:6px 10px;

    border-radius:6px;

    font-size:.72rem;
    font-weight:700;

    text-transform:uppercase;

}

    .hero-slider .hero-cim {
    margin-bottom: 10px;
    color: #ffffff;

    font-size: 1.35rem;
    line-height: 1.15;
}

    .hero-slider .hero-leiras {
    margin-bottom: 14px;

    font-size: 0.82rem;
    line-height: 1.45;
}

    .hero-gomb {
        padding: 10px 16px;

        font-size: 0.82rem;
    }


    /* ---------- ARANY CSÍKOK ---------- */

    .slider-progress {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 15px;

        display: flex;
        gap: 10px;

        z-index: 5;
    }

    .progress-vonal {
        height: 4px;
    }


    /* ---------- LEGFRISSEBB ---------- */

.legfrissebb-blokk {
    width: 100%;

    display: flex;
    flex-direction: column;

    padding: 0;

    border: none;
    background: transparent;
    background-color: #11161d;
}

.legfrissebb-lista {
    display: grid;

    grid-auto-rows:
        minmax(0, 1fr);

    gap: 14px;

    width: 100%;
}

    .szekcio-fejlec h2 {
        font-size: 1.1rem;
    }

    .friss-kartya {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 14px;
    }

    .friss-kartya img {
        width: 90px;
        height: 76px;
    }

    .friss-kartya h3 {
        font-size: 0.93rem;
        line-height: 1.3;
    }

    /* ---------- LEGOLVASOTTABB ---------- */

    .legolvasottabb-racs {
        
        display: flex;

        overflow-x: auto;

        gap: 16px;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .legolvasottabb-racs::-webkit-scrollbar {
        display: none;
    }

    .top-kartya {
        flex: 0 0 260px;

        scroll-snap-align: start;
    }

    .legolvasottabb-szekcio {
        margin-top: 20px;
        padding: 18px 14px;
    }

    .top-kep-link {
        height: 170px;
    }

    .top-kartya h3 {
        font-size: 0.98rem;
    }

    .top-helyezes {
        font-size: 2.2rem;
    }

    .top-kep-link::after {
        opacity: 1;
    }

    .top-hover-cim {
        opacity: 1;
        transform: none;
    }

    .top-helyezes {
        display: none;
    }


/* ==============================
   KERESŐGOMB – VÉGSŐ JAVÍTÁS
================================= */

    .labjegy {
        margin-top: 35px;
    }

    .labjegy-tartalom {
        width: calc(100% - 32px);
        padding: 38px 0 30px;
        gap: 30px;
    }

    .labjegy-logo-kep {
        width: 80px;
        height: 80px;
    }

    .labjegy-logo-nev {
        font-size: 2rem;
    }

    .labjegy-leiras {
        font-size: 0.85rem;
    }

    .labjegy-also {
        width: calc(100% - 32px);
    }

    .fel-gomb {
        right: 16px;
        bottom: 16px;

        width: 42px;
        height: 42px;
    }



    /* ==============================
   HÍRLEVÉL
================================= */


.hirlevel {
    max-width: 100%;
    margin-top: 22px;
}

.hirlevel-urlap {
    max-width: 100%;
}

.hirlevel-urlap input {
    padding: 11px 12px;
}

.hirlevel-urlap button {
    padding: 11px 12px;

    font-size: 0.68rem;
}

}

/* ==============================
   MOBILON NINCS MOZGÓ KERET
================================= */
@media (max-width: 600px){
.legfrissebb-keret::before {
    display: none;
}

.legfrissebb-keret {
    padding: 1px;
    background-color: #303741;
}
.hirlevel-urlap {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    width: 100%;

    border: 1px solid #353d48;
    border-radius: 7px;

    overflow: hidden;

    background-color: #0d1117;
}

.hirlevel-urlap input {
    flex: 1;

    min-width: 0;

    border: none;
    outline: none;

    background: transparent;
    color: #ffffff;

    padding: 12px 14px;
}

.hirlevel-urlap button {

    flex-shrink: 0;

    border: none;
    outline: none;

    padding: 0 18px;

    background-color: #e9b949;
    color: #111720;

    font-size: .72rem;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
}

.vizualisan-rejtett{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);
    clip-path:inset(50%);

    white-space:nowrap;

    border:0;
}
}


/* ==============================
   KATEGÓRIA OLDAL
================================= */

.kategoria-oldal {
    width: 100%;
    padding: 30px 0 60px;

    background-color: #0d1117;
}

/* ==============================
   KATEGÓRIA HERO
================================= */

.kategoria-hero {
    position: relative;

    width: min(1400őx, calc(100% - 64px));
    height: 320px;

    margin: 0 auto 32px;

    overflow: hidden;

    border: 1px solid #303741;
    border-radius: 12px;
}

.kategoria-hero-kep {
    display: block;

    width: 100%;
    height: 100%;
}

.kategoria-hero-kep img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* Sötét réteg a kép fölött */

.kategoria-hero-sotetites {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to right,
        rgba(5, 8, 12, 0.82) 0%,
        rgba(5, 8, 12, 0.82) 45%,
        rgba(5, 8, 12, 0.82) 100%
    );
}

/* Hero felirat */

.kategoria-hero-tartalom {
    position: absolute;

    left: 48px;
    bottom: 42px;

    z-index: 2;
}

.kategoria-hero-tartalom h1 {
    margin: 0;

    color: #ffffff;

    font-size: 3rem;
    line-height: 1;
    text-transform: uppercase;
}



/* ==============================
   CIKKLISTA KONTÉNER
================================= */

.kategoria-tartalom {
    width: min(1200px, calc(100% - 64px));

    margin: 0 auto;
}

.kategoria-cikklista {
    display: grid;
    gap: 18px;
}

/* ==============================
   CIKK KÁRTYA
================================= */

.kiemelt-cikk {
    position: relative;

    border: 1px solid #e9b949;

    background:
        linear-gradient(
            90deg,
            rgba(233, 185, 73, 0.10),
            #11161d 40%
        );

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(233, 185, 73, 0.10);

    transform: scale(1.012);
}

.kiemelt-jelzes {
    position: absolute;

    top: 12px;
    right: 12px;

    padding: 5px 9px;

    border-radius: 5px;

    background-color: #e9b949;
    color: #111720;

    font-size: 0.62rem;
    font-weight: 800;

    text-transform: uppercase;

    z-index: 4;
}

.kiemelt-cikk:hover {
    border-color: #f5ca63;

    transform:
        translateY(-2px)
        scale(1.012);
}

.lista-cikk {
    display: grid;

    grid-template-columns: 280px minmax(0, 1fr);

    min-height: 190px;

    overflow: hidden;

    background-color: #11161d;

    border: 1px solid #303741;
    border-radius: 10px;

    transition:
            transform 0.2s ease;
            border-color: 0.2s ease;
            background-color: 0.2s ease;
}

.lista-cikk:hover{
    transform: translateY(-2px);

    border-color: #8b5cf6;
    background-color: #141a22;
}

/* ==============================
   CIKK KÉP
================================= */

.lista-cikk-kep {
    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.lista-cikk-kep img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.lista-cikk:hover .lista-cikk-kep img {
    transform: scale(1.04);
}

/* ==============================
   CIKK SZÖVEGES RÉSZ
================================= */

.lista-cikk-tartalom {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 22px 26px;
}

/* Kategória címke */

.lista-kategoria {
    display: inline-block;

    width: fit-content;

    margin-bottom: 9px;
    padding: 4px 8px;

    border-radius: 4px;

    color: #ffffff;

    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lista-kategoria.kategoria-anime {
    background-color: #8b5cf6;
}

.lista-kategoria.kategoria-gaming {
    background-color: #16a34a;
    color: #ffffff;
}

.lista-kategoria.kategoria-film {
    background-color: #2563eb;
    color: #ffffff;
}

.lista-kategoria.kategoria-konyvek {
    background-color: #c2410c;
    color: #ffffff;
}

.lista-kategoria.kategoria-lore {
    background-color: #d4a017;
    color: #111720;
}

.lista-kategoria.kategoria-hirek {
    background-color: #dc2626;
    color: #ffffff;
}

/* Cikk címe */

.lista-cikk-cim {
    margin: 0 0 10px;

    font-size: 1.35rem;
    line-height: 1.25;


    .lista-cikk-cim a {
        color: #f4f8f8;

        text-decoration: none;

        transition: color 0.2 ease;
    }
}

.lista-cikk-cim a:hover {
    color: #a78bfa;
}

/* Rövid bevezető */

.lista-cikk-bevezeto {
    margin: 0 0 18px;

    max-width: 760px;

    color: #aab0b9;

    font-size: 0.92rem;
    line-height: 1.55;
}

/* ==============================
   CIKK ALSÓ RÉSZ
================================= */

.lista-cikk-also {
    display: flex;

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

    gap: 20px;

    margin-top: auto;
}

.lista-cikk-meta {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    color: #7f8792;

    font-size: 0.75rem;
}

/* Elolvasom gomb */

.lista-olvasas-gomb {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 9px 14px;

    border: 1px solid #8b5cf6;
    border-radius: 6px;

    color: #ffffff;

    font-size: 0.78rem;
    font-weight: 700;

    text-decoration: none;

    transition: 
         background-color 0.2s ease;
         color: 0.2 ease;
}

.lista-olvasas-gomb:hover {
    background-color: #8b5cf6;
}

/* ==============================
   LAPOZÁS
================================= */

.lapozas {
    display: flex;

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

    gap: 8px;

    margin-top: 38px;
}

.lapozas-gomb {
    display: flex;

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

    min-width: 38px;
    height: 38px;

    padding: 0 10px;

    border: 1px solid #303741;
    border-radius: 6px;

    color: #aab0b9;

    text-decoration: none;

    transition: 
          border-color 0.2s ease,
          color 0.2s ease,
          background-color 0.2s ease;

}

.lapozas-gomb:hover {
    border-color: #8b5cf6;

    color: #ffffff;
}

.lapozas-gomb.aktiv {
    border-color: #8b5cf6;

    border-color: #8b5cf6;

    color: #ffffff;
}

.lapozas-gomb.tiltott {
    opacity: 0.35;

    pointer-events: none;
}

.lapozas-harompont {
    color: #7f8792;
}

.lista-cikk-cim a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;

    transition: color 0.2s ease;
}

.lista-cikk-cim a:hover {
    color: #e9b949;
}

/* ==============================
   TABLET
================================= */

@media (max-width: 900px) {

    .kategoria-hero {
        width: calc(100% - 40px);
        height: 280px;
    }


.kategoria-tartalom {
    width: calc(100% - 40px);
    }

.lista-cikk {
    grid-template-columns: 220px minmax(0, 1fr);
    }
}

/* ==============================
   MOBIL
================================= */

@media (max-width: 600px) {

    .kiemelt-cikk {
        transform: none;
    }

    .kiemelt-cikk:hover {
        transform: none;
    }

    .kiemelt-jelzes {
        top: 8px;
        right: 8px;

        padding: 4px 7px;

        font-size: 0.55rem;
    }

    .kategoria-oldal {
        padding-top: 16px;
    }

    /* Hero */

    .kategoria-hero {
        width: calc(100% - 24px);
        height: 300px;

        margin-bottom: 22px;
    }

    .kategoria-hero-kep img {
        object-position: center;
    }

    .kategoria-hero-sotetites {
        background: linear-gradient(
            to top,
            rgba(5, 8, 12, 0.82) 0%
            rgba(5, 8, 12, 0.25) 55%,
            rgba(5, 8, 12, 0.05) 100%
        );
    }

    .kategoria-hero-tartalom {
        left: 22px;
        bottom: 24px;
    }

    .kategoria-hero-tartalom h1 {
        font-size: 2rem;
    }

    .ketegoria-hero-vonal {
        width: 52px;
        height: 3px;

        margin-top: 9px;
    }

     /* Tartalom */

   .kategoria-tartalom {
        width: calc(100% - 24px);
    }
    
    /* Cikk kártyák */

    .lista-cikk {
        grid-template-columns: 120px minmax(0, 1fr);

        min-height: 150px;
    }

    .lista-cikk-tartalom {
        padding: 13px 14px;
    }

    .lista-kategoria {
        margin-bottom: 6px;
        padding: 3px 6px;

        font-size: 0.55rem;
    }

    .lista-cikk-cim {
        margin-bottom: 7px;

        font-size: 0.95rem;
    }

    .lista-cikk-bevezeto {
        display: none;
    }

    .lista-cikk-also {
        display: block;

        margin-top: auto;
    }

    .lista-cikk-meta {
        font-size: 0.63rem;
    }

    .lista-olvasas-gomb {
        display: none;
    }


    /* Lapozás */

    .lapozas {
        gap: 5px;

        margin-top: 28px;
    }

    .lapozas-gomb {
        min-width: 34px;
        height: 34px;

        padding: 0 7px;

        font-size: 0.78rem;
    }
}

/* =========================================================
   CIKKOLDAL
========================================================= */

.cikk-oldal {
    width: calc(100% - 40px);
    max-width: 1200px;

    margin: 0 auto;
    padding: 60px 0 80px;
}


.teljes-cikk {
    width: 100%;
}


/* =========================================================
   CIKK FEJLÉC
========================================================= */

.cikk-fejlec {
    max-width: 900px;

    margin: 0 auto 35px;
}


/* Kategória */

.cikk-kategoria {
    display: inline-block;

    margin-bottom: 18px;
    padding: 6px 10px;

    border-radius: 4px;

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.06rem;
}


/* Cikk főcíme */

.cikk-cim {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.08;

    font-weight: 800;
}


/* Rövid bevezető */

.cikk-bevezeto {
    max-width: 780px;

    margin: 0 0 24px;

    color: #b9bec7;

    font-size: 1.15rem;
    line-height: 1.65;
}


/* =========================================================
   META ADATOK
========================================================= */

.cikk-meta {
    display: flex;

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

    gap: 20px;

    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.cikk-meta-bal {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    color: #858c97;

    font-size: 0.82rem;
}


.cikk-szerzo {
    color: #ffffff;
    font-weight: 700;
}


/* Link másolása */

.megosztas-gomb {
    padding: 8px 13px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;

    background: transparent;

    color: #c9ced6;

    font: inherit;
    font-size: 0.78rem;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease;
}


.megosztas-gomb:hover {
    border-color: #8b5cf6;

    background-color: rgba(139, 92, 246, 0.08);

    color: #ffffff;
}


/* =========================================================
   CIKK BORÍTÓKÉP
========================================================= */

.cikk-borito {
    max-width: 1100px;

    margin: 0 auto 42px;
}


.cikk-borito picture {
    display: block;
}


.cikk-borito img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 620px;

    object-fit: cover;

    border-radius: 8px;
}


.cikk-borito figcaption {
    margin-top: 9px;

    color: #747b86;

    font-size: 0.75rem;
    line-height: 1.5;
}


/* =========================================================
   CIKKSOROZAT FEJLÉC
========================================================= */

.cikk-sorozat-fejlec {
    display: flex;

    align-items: center;

    gap: 12px;

    max-width: 760px;

    margin: 0 auto 35px;
    padding: 13px 16px;

    border-left: 3px solid #e9b949;

    background-color: rgba(233, 185, 73, 0.06);

    color: #d8dce2;

    font-size: 0.85rem;
}


.sorozat-felirat {
    color: #e9b949;

    font-size: 0.7rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.05rem;
}


/* =========================================================
   CIKK SZÖVEGE
========================================================= */

.cikk-tartalom {
    max-width: 760px;

    margin: 0 auto;

    color: #d4d7dc;

    font-size: 1.05rem;
    line-height: 1.85;
}


/* Bekezdések */

.cikk-tartalom p {
    margin: 0 0 24px;
}


/* Első bekezdés */

.cikk-elso-bekezdes {
    color: #eef0f3;

    font-size: 1.15rem;
    line-height: 1.8;
}


/* H2 alcím */

.cikk-tartalom h2 {
    margin: 48px 0 18px;

    color: #ffffff;

    font-size: 1.75rem;
    line-height: 1.25;
}


/* H3 alcím */

.cikk-tartalom h3 {
    margin: 35px 0 15px;

    color: #ffffff;

    font-size: 1.3rem;
    line-height: 1.3;
}


/* Link a cikkszövegben */

.cikk-tartalom a {
    color: #a78bfa;

    text-decoration: underline;
    text-underline-offset: 3px;
}


.cikk-tartalom a:hover {
    color: #c4b5fd;
}


/* Listák */

.cikk-tartalom ul,
.cikk-tartalom ol {
    margin: 0 0 25px;
    padding-left: 28px;
}


.cikk-tartalom li {
    margin-bottom: 9px;
}


/* =========================================================
   CIKKEN BELÜLI KÉP
========================================================= */

.cikk-belso-kep {
    margin: 38px 0;
}


.cikk-belso-kep img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 7px;
}


.cikk-belso-kep figcaption {
    margin-top: 8px;

    color: #747b86;

    font-size: 0.75rem;
    line-height: 1.5;
}


/* =========================================================
   IDÉZET
========================================================= */

.cikk-idezet {
    margin: 38px 0;
    padding: 20px 24px;

    border-left: 3px solid #8b5cf6;

    background-color: rgba(139, 92, 246, 0.06);

    color: #ececf1;

    font-size: 1.12rem;
    line-height: 1.75;
}


.cikk-idezet p {
    margin: 0;
}


/* =========================================================
   CÍMKÉK
========================================================= */

.cikk-cimkek {
    display: flex;

    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    max-width: 760px;

    margin: 45px auto 0;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.cikk-cimkek span {
    margin-right: 4px;

    color: #777e89;

    font-size: 0.75rem;
}


.cikk-cimkek a {
    padding: 5px 9px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;

    color: #aeb4bd;

    font-size: 0.7rem;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}


.cikk-cimkek a:hover {
    border-color: #8b5cf6;

    color: #ffffff;
}


/* =========================================================
   CIKKSOROZAT NAVIGÁCIÓ
========================================================= */

.sorozat-navigacio {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

    max-width: 900px;

    margin: 55px auto 0;
}


.sorozat-elozo,
.sorozat-kovetkezo {
    display: flex;

    flex-direction: column;

    gap: 7px;

    min-height: 110px;

    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;

    background-color: #11161d;
}


.sorozat-kovetkezo {
    position: relative;

    padding-right: 50px;

    color: #ffffff;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}


.sorozat-kovetkezo:hover {
    border-color: #e9b949;

    transform: translateY(-2px);
}


.sorozat-elozo > span:first-child,
.sorozat-kovetkezo > span:first-child {
    color: #7f8792;

    font-size: 0.68rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05rem;
}


.sorozat-elozo strong,
.sorozat-kovetkezo strong {
    color: #ffffff;

    font-size: 0.92rem;
    line-height: 1.4;
}


.sorozat-elozo.tiltott {
    opacity: 0.35;
}


.sorozat-nyil {
    position: absolute;

    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    color: #e9b949;

    font-size: 1.5rem;
}


/* =========================================================
   KAPCSOLÓDÓ CIKKEK
========================================================= */

.kapcsolodo-cikkek {
    max-width: 1000px;

    margin: 70px auto 0;
}


.kapcsolodo-fejlec {
    margin-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.kapcsolodo-fejlec h2 {
    display: inline-block;

    margin: 0;
    padding-bottom: 10px;

    border-bottom: 2px solid #8b5cf6;

    color: #ffffff;

    font-size: 1.2rem;

    text-transform: uppercase;
}


.kapcsolodo-racs {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.kapcsolodo-kartya {
    min-width: 0;
}


.kapcsolodo-kartya a {
    display: block;

    color: #ffffff;

    text-decoration: none;
}


.kapcsolodo-kartya img {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 6px;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


.kapcsolodo-kartya h3 {
    margin: 11px 0 0;

    font-size: 0.92rem;
    line-height: 1.4;

    transition: color 0.2s ease;
}


.kapcsolodo-kartya:hover img {
    transform: scale(1.02);

    filter: brightness(0.75);
}


.kapcsolodo-kartya:hover h3 {
    color: #a78bfa;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .cikk-oldal {
        padding-top: 40px;
    }


    .cikk-cim {
        font-size: clamp(2rem, 7vw, 3rem);
    }


    .kapcsolodo-racs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 600px) {

    .cikk-oldal {
        width: calc(100% - 28px);

        padding: 28px 0 55px;
    }


    /* Fejléc */

    .cikk-fejlec {
        margin-bottom: 24px;
    }


    .cikk-kategoria {
        margin-bottom: 13px;

        font-size: 0.65rem;
    }


    .cikk-cim {
        margin-bottom: 14px;

        font-size: 1.85rem;
        line-height: 1.12;
    }


    .cikk-bevezeto {
        margin-bottom: 18px;

        font-size: 1rem;
        line-height: 1.55;
    }


    /* Meta */

    .cikk-meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 13px;
    }


    .cikk-meta-bal {
        font-size: 0.72rem;
    }


    /* Borítókép */

    .cikk-borito {
        margin-bottom: 30px;
    }


    .cikk-borito img {
        border-radius: 6px;
    }


    /* Sorozat */

    .cikk-sorozat-fejlec {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;

        margin-bottom: 28px;
    }


    /* Cikkszöveg */

    .cikk-tartalom {
        font-size: 1rem;
        line-height: 1.75;
    }


    .cikk-elso-bekezdes {
        font-size: 1.07rem;
        line-height: 1.7;
    }


    .cikk-tartalom h2 {
        margin-top: 38px;

        font-size: 1.45rem;
    }


    .cikk-tartalom h3 {
        font-size: 1.2rem;
    }


    .cikk-tartalom p {
        margin-bottom: 21px;
    }


    /* Belső kép */

    .cikk-belso-kep {
        margin: 30px 0;
    }


    /* Idézet */

    .cikk-idezet {
        margin: 30px 0;

        padding: 17px 18px;

        font-size: 1rem;
    }


    /* Cikksorozat navigáció */

    .sorozat-navigacio {
        grid-template-columns: 1fr;

        margin-top: 40px;
    }


    .sorozat-elozo,
    .sorozat-kovetkezo {
        min-height: 95px;
    }


    /* Kapcsolódó */

    .kapcsolodo-cikkek {
        margin-top: 55px;
    }


    .kapcsolodo-racs {
        display: flex;

        gap: 14px;

        overflow-x: auto;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }


    .kapcsolodo-racs::-webkit-scrollbar {
        display: none;
    }


    .kapcsolodo-kartya {
        flex: 0 0 78%;

        scroll-snap-align: start;
    }

}

#cimke-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ==============================
   HIDDEN ELEMEK
================================= */

[hidden] {
    display: none !important;
}

/* ==============================
   404 OLDAL
================================= */

.hiba-oldal {
    min-height: 70vh;

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

    padding: 60px 20px;
}

.hiba-tartalom {
    width: 100%;
    max-width: 700px;

    text-align: center;
}

.hiba-kod {
    display: block;

    margin-bottom: 10px;

    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 800;
    line-height: 1;

    color: #e9b949;
}

.hiba-tartalom h1 {
    margin: 0 0 18px;

    font-size: clamp(1.7rem, 5vw, 2.7rem);
}

.hiba-tartalom p {
    margin: 0 auto 28px;

    max-width: 550px;

    line-height: 1.7;
}

.hiba-vissza {
    display: inline-block;

    padding: 12px 20px;

    border-radius: 7px;

    background-color: #e9b949;
    color: #11161d;

    font-weight: 700;
    text-decoration: none;
}

.hiba-vissza:hover {
    opacity: 0.9;
}