@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');



:root {

    --primary: #1a1a1a;

    --secondary: #ffffff;

    --accent: #C4A484;

    --text: #333333;

    --background: #f8f8f8;

    --section-gap: clamp(3rem, 5vw, 8rem);

    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    --hover-transform: translateY(-8px);

    --transition: all 0.3s ease;

    --card-padding: clamp(1.5rem, 3vw, 3rem);

    --h1-size: clamp(2rem, 8vw, 6rem);

    --h2-size: clamp(1.8rem, 4vw, 2.5rem);

    --h3-size: clamp(1.3rem, 3vw, 1.8rem);

    --p-size: clamp(0.9rem, 2vw, 1rem);

    --subtitle-size: clamp(1.2rem, 4vw, 2.5rem);

    --mobile-padding: 20px;

    --mobile-section-gap: 60px;

    --mobile-card-gap: 16px;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Inter', sans-serif;

    color: var(--text);

    background-color: var(--secondary);

    line-height: 1.6;

}



h1, h2, h3 {

    font-family: 'Playfair Display', serif;

    font-weight: 600;

}



header {

    position: fixed;

    width: 100%;

    background: rgba(255, 255, 255, 0.98);

    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);

    z-index: 1000;

}



nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

    padding: 1.2rem 2rem;

}



.logo-text {

    font-family: 'Playfair Display', serif;

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--primary);

}



.nav-links {

    display: flex;

    gap: 3rem;

}



.nav-links a {

    text-decoration: none;

    color: var(--text);

    font-weight: 500;

    position: relative;

    padding: 0.5rem 0;

}



.nav-links a::after {

    content: '';

    position: absolute;

    width: 0;

    height: 2px;

    bottom: 0;

    left: 0;

    background-color: var(--accent);

    transition: var(--transition);

}



.nav-links a:hover::after {

    width: 100%;

}



/* Mobil menü */

.menu-btn {

    display: none;

    cursor: pointer;

}



.menu-btn span {

    display: block;

    width: 25px;

    height: 2px;

    background-color: var(--primary);

    position: relative;

    transition: var(--transition);

}



.menu-btn span::before,

.menu-btn span::after {

    content: '';

    position: absolute;

    width: 25px;

    height: 2px;

    background-color: var(--primary);

    transition: var(--transition);

}



.menu-btn span::before {

    transform: translateY(-8px);

}



.menu-btn span::after {

    transform: translateY(8px);

}



@media (max-width: 768px) {

    /* Navigáció */

    nav {

        padding: 1rem var(--mobile-padding);

        background: white;

    }



    .logo-text {

        font-size: 1.2rem;

    }



    /* Szekciók */

    section {

        padding: 2rem var(--mobile-padding);

    }



    /* Címsorok */

    h2 {

        font-size: 1.5rem;

        margin-bottom: 1.5rem;

        text-align: left;  /* Balra igazítás a képek alapján */

    }



    /* Kártyák */

    .card, .tabor-card {

        background: white;

        padding: 1.5rem;

        border-radius: 12px;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

        margin-bottom: 1rem;

    }



    /* Táborok */

    .tabor-content {

        padding: 0;

    }



    .tabor-content h3 {

        font-size: 1.3rem;

        margin-bottom: 0.5rem;

    }



    .tabor-content p {

        color: #C4A484;

        font-size: 0.9rem;

        margin-bottom: 1rem;

    }



    .tabor-content ul {

        margin: 1rem 0;

    }



    .tabor-content ul li {

        font-size: 0.9rem;

        margin-bottom: 0.5rem;

        padding-left: 1.2rem;

    }



    /* Gombok */

    .jelentkezes-btn, .tabor-btn {

        display: inline-block;

        padding: 0.8rem 1.5rem;

        font-size: 0.9rem;

        border-radius: 25px;

        background: #C4A484;

        color: white;

        width: auto;  /* Ne legyen teljes szélesség */

    }



    /* Elérhetőség */

    .contact-info {

        gap: 1rem;

    }



    .contact-card {

        padding: 1.5rem;

        text-align: center;

    }



    .contact-card i {

        font-size: 1.2rem;

        margin-bottom: 0.5rem;

    }



    .contact-card p {

        font-size: 0.9rem;

    }



    /* Footer */

    footer {

        padding: 2rem var(--mobile-padding) 1rem;

    }



    .footer-content {

        text-align: center;

    }



    .footer-info h3 {

        font-size: 1.2rem;

    }



    .social-links {

        margin-top: 1rem;

    }



    .social-links a {

        font-size: 1.2rem;

    }



    .nav-links {

        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        background: var(--secondary);

        padding: 2rem;

        flex-direction: column;

        gap: 1.5rem;

        text-align: center;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    }



    .nav-links.active {

        display: flex;

    }



    .menu-btn {

        display: block;

    }



    .menu-btn.active span {

        background-color: transparent;

    }



    .menu-btn.active span::before {

        transform: rotate(45deg);

    }



    .menu-btn.active span::after {

        transform: rotate(-45deg);

    }



    .cards {

        grid-template-columns: 1fr;

        gap: var(--mobile-card-gap);

    }



    .hero-content {

        width: 100%;

        padding: 0;

        margin-top: -60px;

    }



    .mega-title {

        font-size: 42px;

        letter-spacing: -1px;

        padding: 0.3em;

        background: linear-gradient(45deg, #fff 30%, #C4A484 70%);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        margin-bottom: 15px;

    }



    .hero-subtitle {

        font-size: min(20px, 5vw);

    }



    .taborok-grid {

        grid-template-columns: 1fr;

        gap: var(--mobile-card-gap);

    }



    .tabor-content {

        padding: 24px;

    }



    .tabor-content ul {

        margin: 16px 0;

    }



    .tabor-content ul li {

        font-size: 15px;

        margin-bottom: 8px;

    }



    .stats {

        grid-template-columns: 1fr;

        gap: var(--mobile-card-gap);

        margin-top: 30px;

    }



    .stat-item {

        padding: 20px;

    }



    .stat-item .number {

        font-size: 36px;

    }



    .stat-item .label {

        font-size: 16px;

    }



    .footer-bottom {

        padding-top: 24px;

        font-size: 14px;

    }

}



@media (max-width: 576px) {

    .mega-title {

        font-size: 2.5rem;

    }



    .hero-subtitle {

        font-size: 1.6rem;

    }

}



@media (max-width: 360px) {

    .mega-title {

        font-size: 11vw;

    }



    .hero-subtitle {

        font-size: 4vw;

    }



    .hero-content {

        padding: 0 1rem;

    }



    .card h3, .tabor-card h3 {

        font-size: 1.3rem;

    }



    .card p, .tabor-card p {

        font-size: 0.9rem;

    }

}



@media (max-width: 280px) {

    .mega-title {

        font-size: 2rem;

    }

}



@media (max-height: 600px) and (orientation: landscape) {

    #hero {

        min-height: 120vh;

    }



    .mega-title {

        font-size: 3rem;

    }



    .hero-subtitle {

        font-size: 1.5rem;

    }

}



/* Alap geometrikus háttér mixin */

section {

    padding: var(--section-gap) 2rem;

    position: relative;

    background-color: var(--secondary);

}



section:nth-child(even) {

    background-color: var(--background);

}



.section-content {

    max-width: 1200px;

    margin: 0 auto;

}



#hero {

    min-height: 100vh;

    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

}



#hero::before {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    background: 

        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0,

        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0;

    background-size: 40px 40px;

}



#hero::after {

    content: '';

    position: absolute;

    width: 150%;

    height: 150%;

    background: radial-gradient(circle at center,

        rgba(196, 164, 132, 0.1) 0%,

        rgba(30, 30, 30, 0.2) 20%,

        rgba(20, 20, 20, 0.6) 50%,

        rgba(10, 10, 10, 0.8) 80%,

        rgba(0, 0, 0, 0.9) 100%

    );

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.hero-content {

    max-width: 1000px;

    text-align: center;

    color: var(--secondary);

    padding: 2rem;

    position: relative;

    z-index: 2;

    width: 100%;

    margin: 0 auto;

}



/* Alap méret (desktop) */

.mega-title {

    font-size: 7.5rem;

    font-weight: 700;

    letter-spacing: -2px;

    line-height: 1.2;

    margin: 0 auto 2rem;

    padding: 0.3em;

    background: linear-gradient(45deg, #fff 30%, #C4A484 70%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    opacity: 0;

    transform: translateY(30px);

    animation: fadeUpTitle 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;

    text-shadow: 0 5px 15px rgba(0,0,0,0.3);

    width: 100%;

    display: block;

    box-sizing: border-box;

}



/* RackHost-féle mobilos skálázás */

@media screen and (max-width: 991px) {

    .mega-title {

        font-size: calc(2rem + 3vw);  /* Alap méret + viewport alapú növekedés */

    }

}



/* Kis képernyők */

@media screen and (max-width: 480px) {

    .mega-title {

        font-size: calc(1.8rem + 2vw);

    }

}



.hero-subtitle {

    font-size: var(--subtitle-size);

    font-weight: 300;

    margin-bottom: 0;

    opacity: 0;

    transform: translateY(30px);

    animation: fadeUpSubtitle 1s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.3s;

}



.hero-cta {

    font-size: 1.3rem;

    padding: 1.5rem 4rem;

    border-radius: 50px;

    position: relative;

    overflow: hidden;

    background: transparent;

    border: 2px solid var(--accent);

    color: var(--secondary);

    text-transform: uppercase;

    letter-spacing: 2px;

    transition: all 0.5s ease;

    opacity: 0;

    transform: translateY(30px);

    animation: fadeUpButton 1s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.6s;

}



.hero-cta:hover {

    background: var(--accent);

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(196, 164, 132, 0.3);

}



.cards {

    display: grid;

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

    gap: clamp(1.5rem, 3vw, 3rem);

    margin-top: clamp(2rem, 4vw, 4rem);

}



.card {

    background: var(--secondary);

    padding: 3rem;

    border-radius: 15px;

    text-align: center;

    transition: 0.3s;

    box-shadow: var(--card-shadow);

    position: relative;

    isolation: isolate;

}



.card::after {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: 15px;

    background: linear-gradient(45deg, transparent, rgba(196, 164, 132, 0.1));

    opacity: 0;

    transition: 0.4s;

    z-index: -1;

}



.card:hover {

    transform: var(--hover-transform);

}



.card:hover::after {

    opacity: 1;

}



.card-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.8));

    padding: 1.5rem;

    transform: translateY(100%);

    transition: transform 0.3s ease;

}



.card:hover .card-overlay {

    transform: translateY(0);

}



.card-link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--accent);

    text-decoration: none;

    font-weight: 500;

    transition: gap 0.3s ease;

}



.card-link:hover {

    gap: 1rem;

}



.card-link i {

    font-size: 0.9em;

    transition: transform 0.3s ease;

}



.card:hover .card-link i {

    transform: translateX(3px);

}



.card i {

    font-size: 3rem;

    color: var(--accent);

    margin-bottom: 2rem;

    transition: 0.3s;

}



.card:hover i {

    transform: scale(1.1) rotate(-5deg);

}



.card h3 {

    margin-bottom: 1rem;

}



.taborok-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: clamp(1.5rem, 3vw, 3rem);

    margin-top: clamp(2rem, 4vw, 4rem);

}



.tabor-card {

    background: var(--secondary);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: var(--card-shadow);

    transition: all 0.4s ease;

    position: relative;

}



.tabor-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}



.tabor-content {

    padding: 3rem;

    position: relative;

    z-index: 1;

}



.tabor-content::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(45deg, transparent, rgba(196, 164, 132, 0.1));

    opacity: 0;

    transition: 0.4s;

    z-index: -1;

}



.tabor-card:hover .tabor-content::before {

    opacity: 1;

}



.tabor-content h3 {

    font-size: var(--h3-size);

    margin-bottom: 1rem;

    color: var(--primary);

    transition: 0.3s;

}



.tabor-card:hover h3 {

    transform: translateY(-5px);

    color: var(--accent);

}



.tabor-content p {

    font-size: var(--p-size);

    color: var(--accent);

    font-weight: 500;

    margin-bottom: 1.5rem;

    transition: 0.3s;

}



.tabor-content ul {

    list-style: none;

    margin: 1.5rem 0;

    padding: 0;

}



.tabor-content ul li {

    margin-bottom: 0.8rem;

    padding-left: 1.8rem;

    position: relative;

    transition: 0.3s;

}



.tabor-content ul li::before {

    content: '♪';

    color: var(--accent);

    position: absolute;

    left: 0;

    transition: 0.3s;

}



.tabor-card:hover ul li {

    transform: translateX(5px);

}



.tabor-btn {

    display: inline-block;

    padding: clamp(0.8rem, 2vw, 1rem) clamp(2rem, 4vw, 2.5rem);

    margin-top: 2rem;

    background: var(--accent);

    color: var(--secondary);

    text-decoration: none;

    border-radius: 50px;

    font-weight: 500;

    transition: 0.4s;

    border: 2px solid var(--accent);

}



/* Töröljük a nyíl megjelenítését */

.tabor-btn::after {

    display: none;

}



.tabor-btn:hover {

    background: transparent;

    color: var(--accent);

    padding-right: 2.5rem;  /* Visszaállítjuk az eredeti padding-et */

}



.stats {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 4rem;

    margin-top: 4rem;

}



.stat-item {

    text-align: center;

    padding: 2rem;

    background: var(--secondary);

    border-radius: 15px;

    box-shadow: var(--card-shadow);

    transition: 0.3s;

}



.stat-item:hover {

    transform: var(--hover-transform);

}



.stat-item .number {

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: 700;

    color: var(--accent);

    margin-bottom: 1rem;

}



.stat-item .label {

    font-size: clamp(0.9rem, 2vw, 1.1rem);

    color: var(--text);

}



.contact-info {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: clamp(1.5rem, 3vw, 3rem);

    margin-top: clamp(2rem, 4vw, 4rem);

}



.contact-card {

    text-align: center;

    padding: 2.5rem;

    background: var(--secondary);

    border-radius: 15px;

    box-shadow: var(--card-shadow);

    transition: 0.3s;

    position: relative;

    isolation: isolate;

}



.contact-card::after {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: 15px;

    background: linear-gradient(45deg, transparent, rgba(196, 164, 132, 0.1));

    opacity: 0;

    transition: 0.4s;

    z-index: -1;

}



.contact-card:hover {

    transform: var(--hover-transform);

}



.contact-card:hover::after {

    opacity: 1;

}



.contact-card i {

    font-size: 2rem;

    color: var(--accent);

    margin-bottom: 1rem;

    transition: 0.3s;

}



.contact-card:hover i {

    transform: scale(1.2);

    color: var(--accent);

}



.contact-card p {

    font-size: var(--p-size);

    line-height: 1.4;

    color: var(--text);

    max-width: 100%;

    word-wrap: break-word;

    transition: 0.3s;

}



.contact-card:hover p {

    color: var(--accent);

}



footer {

    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);

    color: var(--secondary);

    padding: 4rem 2rem 2rem;

    position: relative;

    overflow: hidden;

}



/* Eltávolítjuk a kockás hátteret */

footer::before {

    display: none;

}



footer::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: radial-gradient(circle at center,

        rgba(196, 164, 132, 0.1) 0%,

        rgba(30, 30, 30, 0.2) 20%,

        rgba(20, 20, 20, 0.6) 50%,

        rgba(10, 10, 10, 0.8) 80%

    );

    z-index: 1;

}



.footer-content {

    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

}



.footer-info h3 {

    font-size: clamp(1.5rem, 3vw, 1.8rem);

    margin-bottom: 0.5rem;

    background: linear-gradient(45deg, #fff 30%, #C4A484 70%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.footer-bottom {

    position: relative;

    z-index: 2;

    text-align: center;

    padding-top: 2rem;

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

}



.social-links {

    display: flex;

    gap: 1.5rem;

}



.social-links a {

    color: var(--secondary);

    font-size: clamp(1.2rem, 2.5vw, 1.5rem);

    transition: var(--transition);

}



.social-links a:hover {

    color: var(--accent);

}



@keyframes fadeUpTitle {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeUpSubtitle {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeUpButton {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.scroll-indicator {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

    opacity: 0;

    animation: fadeIn 1s ease forwards 1.2s;

}



.scroll-indicator::before {

    content: '';

    display: block;

    width: 2px;

    height: 50px;

    background: linear-gradient(to bottom, var(--accent), transparent);

    margin: 0 auto;

    animation: scrollIndicate 2s ease-in-out infinite;

}



@keyframes scrollIndicate {

    0% {

        transform: scaleY(0);

        transform-origin: top;

    }

    50% {

        transform: scaleY(1);

        transform-origin: top;

    }

    50.1% {

        transform-origin: bottom;

    }

    100% {

        transform: scaleY(0);

        transform-origin: bottom;

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



#elerhetoseg {

    position: relative;

}



#elerhetoseg::before,

#elerhetoseg::after {

    display: none;

}



.jelentkezes-btn {

    display: inline-block;

    margin-top: 2rem;

    padding: clamp(0.8rem, 2vw, 1rem) clamp(2rem, 4vw, 2.5rem);

    background: var(--accent);

    color: var(--secondary);

    text-decoration: none;

    border-radius: 50px;

    font-weight: 500;

    transition: 0.4s;

    border: 2px solid var(--accent);

}



.jelentkezes-btn:hover {

    background: transparent;

    color: var(--accent);

    transform: translateY(-5px);

}



.card:hover .jelentkezes-btn {

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(196, 164, 132, 0.3);

}



.jelentkezes-info {

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

    margin-top: 1.5rem;

    color: var(--accent);

    font-size: 0.9rem;

    font-weight: 500;

    opacity: 0.8;

    transition: 0.3s;

}



.jelentkezes-info i {

    font-size: 0.9rem;

    transition: transform 0.3s ease;

    position: relative;

    top: 1px;

}



.card:hover .jelentkezes-info {

    opacity: 1;

}



.card:hover .jelentkezes-info i {

    transform: translateX(5px);

}



@keyframes gridMove {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(40px);

    }

}



@keyframes pulseGlow {

    0%, 100% {

        opacity: 0.7;

        transform: translate(-50%, -50%) scale(1);

    }

    50% {

        opacity: 0.9;

        transform: translate(-50%, -50%) scale(1.1);

    }

}



/* Mobilok */

@media (max-width: 480px) {

    :root {

        --section-gap: 3rem;

        --card-padding: 1.5rem;

    }



    .mega-title {

        font-size: 12vw;

        padding: 0.2em;

    }

    

    .hero-subtitle {

        font-size: 4.5vw;

    }

    

    .hero-content {

        width: 90%;  /* Szűkebb konténer */

        margin: 0 auto;

    }



    h2 {

        font-size: 1.8rem;

        margin-bottom: 1.5rem;

    }



    .jelentkezes-btn, .tabor-btn {

        padding: 0.8rem 2rem;

        font-size: 0.9rem;

    }



    .stat-item .number {

        font-size: 2.5rem;

    }



    .stat-item .label {

        font-size: 0.9rem;

    }



    .footer-content {

        padding: 2rem 1rem;

    }



    .footer-info h3 {

        font-size: 1.5rem;

    }



    .social-links a {

        font-size: 1.2rem;

    }

}



/* Extra kis képernyők */

@media (max-width: 320px) {

    .mega-title {

        font-size: min(10vw, 2.5rem);

        letter-spacing: 0;

    }

}



/* Nagyobb képernyők */

@media (max-width: 1200px) {

    .mega-title {

        font-size: 5rem;

    }

}



/* iPhone SE és más kis képernyők */

@media (max-width: 375px) {

    .mega-title {

        font-size: 32px;

    }



    .hero-subtitle {

        font-size: 18px;

    }



    h2 {

        font-size: 24px;

    }



    .card h3, .tabor-card h3 {

        font-size: 20px;

    }

}



/* iPhone notch kezelése */

@supports (padding-top: env(safe-area-inset-top)) {

    .nav {

        padding-top: max(15px, env(safe-area-inset-top));

    }

    

    #hero {

        padding-top: env(safe-area-inset-top);

    }

}