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

        :root {
            --bg-color: #0d1117;
            --surface-color: #161b22;
            --primary-color: #38bdf8;
            --secondary-color: #4ade80;
            --text-color: #e6edf3;
            --text-muted: #848d97;
            --egyedi-color: #ffffff;
            --border-color: #30363d;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Poppins', sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.7; font-size: 16px; }
        .container { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }
        strong { color: var(--secondary-color); font-weight: 600; }

        /* --- Navigációs Sáv --- */
        nav { position: sticky; top: 0; width: 100%; background-color: rgba(13, 17, 23, 0.8); backdrop-filter: blur(10px); z-index: 1000; border-bottom: 1px solid var(--border-color); }
        .nav-container { display: flex; justify-content: space-between; align-items: center; height: 70px; }
        .nav-logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
        .nav-links { list-style: none; display: flex; gap: 2rem; }
        .nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
        .nav-links a:hover { color: var(--primary-color); }

        /* --- Hero Szekció --- */
        .hero { min-height: 100vh; display: flex; align-items: center; text-align: center; }
        .hero-content { max-width: 800px; margin: 0 auto; }
        .hero-content h1 { font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; }
        .hero-content .typing-text { color: var(--primary-color); }
        .hero-content .cursor { display: inline-block; background-color: var(--primary-color); margin-left: 0.1rem; width: 4px; animation: blink 1s infinite; }
        @keyframes blink { 50% { background-color: transparent; } }
        .hero-content p.subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2rem; }
        .hero-socials { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; }
        .hero-socials a { color: var(--text-muted); font-size: 1.8rem; transition: color 0.3s, transform 0.3s; }
        .hero-socials a:hover { color: var(--primary-color); transform: translateY(-5px); }
        .cta-button { background-color: var(--primary-color); color: var(--bg-color); text-decoration: none; padding: 0.8rem 2rem; border-radius: 8px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; display: inline-block; }
        .cta-button:hover { transform: translateY(-3px); box-shadow: 0 4px 20px rgba(56, 189, 248, 0.3); }

        /* --- Szekciók --- */
        section { padding: 5rem 0; }
        .section-title { text-align: center; margin-bottom: 3rem; }
        .section-title h2 { font-size: 2.5rem; color: var(--primary-color); }
        .section-title p { color: var(--text-muted); font-size: 1.1rem; }

        /* Bemutatkozó Szekció */
        .about-content { display: flex; align-items: center; gap: 3rem; }
        .about-image { flex: 1; text-align: center; }
        .about-image img { max-width: 300px; border-radius: 50%; border: 5px solid var(--border-color); }
        .about-text { flex: 2; }
        .about-text h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--secondary-color); }
        .about-text .quote { font-style: italic; color: var(--text-muted); border-left: 3px solid var(--primary-color); padding-left: 1rem; margin-top: 1.5rem; }
        
        /* Szolgáltatások Szekció */
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
        .service-card { background-color: var(--surface-color); padding: 2rem; border-radius: 12px; border: 1px solid var(--border-color); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .service-card:hover { transform: translateY(-10px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
        .service-card .icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem; }
        .service-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
        .service-card p { color: var(--text-muted); }

        /* Projektek Szekció */
        .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
        .project-card { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background-color: #000; }
        .project-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
        .project-card:hover img { transform: scale(1.1); }
        .project-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(13,17,23,0.95), rgba(13,17,23,0.7), transparent); padding: 2rem 1.5rem 1.5rem; transform: translateY(65%); transition: transform 0.5s ease; }
        .project-card:hover .project-overlay { transform: translateY(0); }
        .project-overlay h3 { font-size: 1.5rem; color: var(--egyedi-color); margin-bottom: 2rem; }
        .project-overlay p { color: var(--text-muted); margin-bottom: 1rem; max-height: 0; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease 0.2s; }
        .project-card:hover p { max-height: 100px; opacity: 1; }
        .project-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
        .project-tags span { background-color: var(--border-color); color: var(--text-muted); font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 10px; }
        .project-links a { color: var(--secondary-color); text-decoration: none; margin-right: 1.5rem; font-weight: 600; }
        .project-links a:hover { text-decoration: underline; }

/* --- Képességek Szekció (ÚJ, ANIMÁLT VERZIÓ) --- */
        .skills-grid {
            display: grid;
            /* A 'repeat(auto-fill, ...)' biztosítja a reszponzivitást */
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 2.5rem;
            text-align: center;
        }

        .skill-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Lépcsőzetes belépő animációhoz */
            transition: all 0.4s ease-out;
        }

        .skill-item .icon {
            font-size: 3.5rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
            transition: transform 0.3s ease, color 0.3s ease;
            
            /* A folyamatos lebegő animáció */
            animation: floatAnimation 4s ease-in-out infinite;
        }
        
        /* A lebegő animáció kulcskockái */
        @keyframes floatAnimation {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-15px); /* Milyen magasra emelkedjen */
            }
        }
        
        /* Eltolt animáció-kezdés, hogy ne egyszerre mozogjanak */
        .skills-grid .skill-item:nth-child(2) .icon { animation-delay: 0.3s; }
        .skills-grid .skill-item:nth-child(3) .icon { animation-delay: 0.6s; }
        .skills-grid .skill-item:nth-child(4) .icon { animation-delay: 0.1s; }
        .skills-grid .skill-item:nth-child(5) .icon { animation-delay: 0.4s; }
        .skills-grid .skill-item:nth-child(6) .icon { animation-delay: 0.7s; }
        .skills-grid .skill-item:nth-child(7) .icon { animation-delay: 0.2s; }
        .skills-grid .skill-item:nth-child(8) .icon { animation-delay: 0.5s; }
        .skills-grid .skill-item:nth-child(9) .icon { animation-delay: 0.8s; }

        /* Hover effektus */
        .skill-item:hover .icon {
            animation-play-state: paused; /* Hoverre megáll a lebegés */
            transform: scale(1.2) translateY(-5px); /* Kiemelkedik és kicsit feljebb ugrik */
            color: var(--primary-color);
        }

        .skill-item p {
            margin-top: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
            transition: color 0.3s ease;
        }

        .skill-item:hover p {
            color: var(--primary-color);
        }

        /* --- Atlétikai Eredmények Szekció Stílusok --- */
        .achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
        .achievement-card { background-color: var(--surface-color); padding: 2.5rem 2rem; border-radius: 12px; border: 1px solid var(--border-color); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .achievement-card:not(.highlight):hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
        .achievement-card .icon { font-size: 3.5rem; margin-bottom: 1.5rem; }
        .achievement-card .icon-gold { color: #ffd700; }
        .achievement-card .icon-silver { color: #c0c0c0; }
        .achievement-card .icon-bronze { color: #cd7f32; }
        .achievement-card h3 { font-size: 1.5rem; color: var(--text-color); margin-bottom: 1rem; }
        .achievement-card ul { list-style: none; padding: 0; color: var(--text-muted); }
        .achievement-card li { margin-bottom: 0.5rem; font-size: 1.1rem; }
        .achievement-card.highlight { background: linear-gradient(45deg, var(--surface-color), #212833); border-color: var(--secondary-color); grid-column: 1 / -1; text-align: center; }
        .achievement-card.highlight h3 { color: var(--secondary-color); }
        .achievement-card.highlight .highlight-description { font-size: 1.1rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; }

        /* Footer Stílusok */
        .site-footer { width: 100%; background-color: var(--surface-color); border-top: 1px solid var(--border-color); padding: 4rem 0 2rem 0; margin-top: 5rem; font-size: 0.95rem; color: var(--text-muted); }
        .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; margin-bottom: 3rem; }
        .footer-column h3 { color: var(--primary-color); font-size: 1.3rem; margin-bottom: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 0.8rem; }
        .footer-column.about .contact-email { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
        .footer-column.about .contact-email a { color: var(--text-muted); text-decoration: none; }
        .footer-column.links ul { list-style: none; padding: 0; }
        .footer-column.links li { margin-bottom: 0.8rem; }
        .footer-column.links a { color: var(--text-muted); text-decoration: none; }
        .social-icons { display: flex; gap: 1.5rem; margin-top: 1.5rem; }
        .social-icons a { color: var(--text-muted); font-size: 1.8rem; transition: color 0.3s; }
        .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--border-color); font-size: 0.9rem; }
        
        /* Animációk és Reszponzivitás */
        .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
        .fade-in.visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 992px) { .nav-links { display: none; } }
        @media (max-width: 768px) {
            .about-content { flex-direction: column; }
            .about-image img { max-width: 200px; }
            .hero h1 { font-size: 2.5rem; }
            section { padding: 4rem 0; }
        }
        .dropdown {
            position: relative;
        }

        .dropdown-toggle i {
            margin-left: 0.5rem;
            font-size: 0.8em;
            transition: transform 0.3s ease;
        }
        
        .dropdown:hover .dropdown-toggle i {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            position: absolute;
            top: 150%; /* Kicsit lejjebbről indul az animáció */
            left: 50%;
            transform: translateX(-50%);
            min-width: 220px;
            background-color: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            list-style: none;
            padding: 0.5rem 0;
            z-index: 1001;
            box-shadow: 0 8px 30px rgba(0,0,0,0.5);

            /* Alapból rejtett, animációhoz */
            opacity: 0;
            visibility: hidden;
            transition: top 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        }

        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            top: 120%; /* Ide érkezik meg */
        }
        
        .dropdown-menu li {
            margin: 0;
        }
        
        .dropdown-menu a {
            display: block;
            padding: 0.8rem 1.5rem;
            color: var(--text-muted);
            text-decoration: none;
            transition: background-color 0.2s ease, color 0.2s ease;
            white-space: nowrap; /* Biztosítja, hogy ne törjön több sorba a szöveg */
        }

        .dropdown-menu a:hover {
            background-color: var(--border-color);
            color: var(--primary-color);
        }

        .dropdown-menu .coming-soon a {
            color: #666;
            font-style: italic;
            cursor: not-allowed;
        }
         .dropdown-menu .coming-soon a:hover {
            background-color: transparent;
            color: #666;
         }

  /* ---- Animated Clickable Corner Image ---- */

/* The link element that holds the image. We position and animate this. */
.animated-corner-link {
    /* --- Positioning --- */
    position: fixed; /* Stays in the same place even when scrolling */
    bottom: 25px;
    right: 25px;
    z-index: 1000;   /* Stays on top of everything */
    
    /* --- Sizing --- */
    width: 100px;
    height: 100px;

    /* --- Animation --- */
    /* We apply the animation to the container so all effects are smooth */
    animation: complexRandomMovements 22s infinite ease-in-out;
    transform-origin: bottom center; /* Animation originates from the base */

    /* For smooth interaction transitions */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The actual image inside the link */
.animated-corner-image {
    width: 100%;
    height: auto;
    display: block; /* Removes any extra space below the image */
}

/* --- Interactivity: Hover & Focus --- */
.animated-corner-link:hover,
.animated-corner-link:focus {
    /* Pause the complex animation and apply a simple, clear effect */
    animation-play-state: paused;
    transform: scale(1.2) translateY(-10px) rotate(5deg) !important; /* !important to override the keyframes */
    
    /* Accessibility: Add a clear outline when focused via keyboard */
    outline: 3px solid #38b6ff;
    outline-offset: 5px;
    border-radius: 50%;
}


/* ---- Animated Clickable Corner Image (Slow Emerge) ---- */

.animated-corner-link {
    /* --- Positioning & Sizing --- */
    position: fixed;
    bottom: 1px;
    right: 40px;
    z-index: 1000;
    width: 50px;
    height: 100px;
    display: block;
    cursor: pointer;
    
    /* --- Core Animation & SMOOTH Transition --- */
    animation: livingCharacter 25s infinite ease-in-out;
    transform-origin: bottom center;
    /* This is the key change for the slow emerging effect */
    transition: transform 0.6s ease-out; 
}

.animated-corner-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.4));
    /* This ensures the glow also fades in slowly */
    transition: filter 0.6s ease-out;
}

/* --- INTERACTIVITY: SLOWLY EMERGING ANIMATION ON HOVER --- */
.animated-corner-link:hover,
.animated-corner-link:focus-visible {
    animation-play-state: paused; /* Stop the background animation */
    
    /* A more gentle and elegant transform for a slow "emerge" */
    transform: scale(1.15) rotate(3deg) !important;
    
    outline: none; 
}

/* On hover, the glow now also emerges slowly */
.animated-corner-link:hover .animated-corner-image,
.animated-corner-link:focus-visible .animated-corner-image {
    filter: drop-shadow(0 8px 30px rgba(0, 161, 255, 0.6));
}

/* --- THE "LIVING CHARACTER" KEYFRAME ANIMATION (Unchanged) --- */
@keyframes livingCharacter {
    0%, 20% { transform: translateY(0) rotate(0); }
    5%      { transform: translateY(-12px) rotate(-4deg) scale(1.05); }
    15%     { transform: translateY(-5px) rotate(4deg); }
    20.1%, 40% { transform: translateY(0) rotate(0) scaleX(1); }
    25% { transform: rotate(10deg); }
    35% { transform: rotate(-10deg); }
    45% { transform: translate(0, 0) rotate(0); }
    45.5% { transform: translate(-4px, -6px) rotate(-5deg); }
    46% { transform: translate(4px, 4px) rotate(5deg); }
    46.5% { transform: translate(-4px, -4px) rotate(-5deg); }
    47% { transform: translate(4px, 6px) rotate(5deg); }
    47.5%, 55% { transform: translate(0, 0) rotate(0) scaleX(1); }
    58% { transform: scaleX(-1) rotate(5deg); }
    58.1%, 70% { transform: scaleX(-1) translateY(0) rotate(0deg); }
    65% { transform: scaleX(-1) translateY(-10px) rotate(2deg); }
    75% { transform: scaleY(0.9) scaleX(1); }
    80% { transform: scaleX(1) translateY(-40px) rotate(-15deg) scaleY(1.1); }
    85% { transform: translateY(0) rotate(0) scaleY(1); }
    100% { transform: translateY(0) rotate(0); }
}

/* --- RESPONSIVENESS (Unchanged) --- */
@media (max-width: 768px) {
    .animated-corner-link {
        width: 75px;
        height: 75px;
        bottom: 15px;
        right: 15px;
        animation-duration: 35s;
    }
}