/* ---- Alapbeállítások és Változók ---- */
:root {
    --primary-color: #f39c12; 
    --secondary-color: #1abc9c;
    --font-family: 'Poppins', sans-serif;

    /* ALAPÉRTELMEZETT TÉMA (SÖTÉT) */
    --color-bg: #1a1a1a;
    --color-bg-secondary: #2a2a2a; /* Kártyák, űrlap mezők */
    --color-bg-header: #1a1a1a;    /* Header háttere */
    --color-border: #2a2a2a;      /* Szegélyek */
    --color-text: #f0f0f0;
    --color-text-muted: #aaa;
}

body.light-mode {
    /* VILÁGOS TÉMA FELÜLÍRÁSAI */
    --color-bg: #f4f4f4;
    --color-bg-secondary: #ffffff; /* Kártyák, űrlap mezők */
    --color-bg-header: #ffffff;    /* Header háttere */
    --color-border: #e0e0e0;      /* Szegélyek */
    --color-text: #1a1a1a;
    --color-text-muted: #555;
}

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

html {
    scroll-behavior: smooth; /* Sima görgetés a linkekre kattintáskor */
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text); /* JAVÍTVA */
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease; /* Finom átmenet a témák között */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 6rem 0;
}

h1, h2, h3 {
    font-weight: 600;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

/* ---- Gombok ---- */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #1a1a1a; /* Sötét szöveg a narancs gombon fix */
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
}

.btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background-color: #fff;
    color: var(--color-bg-secondary);
}

.btn-lg {
    font-size: 1.1rem;
    padding: 15px 30px;
}

/* ---- 1. Navigáció ---- */
.header {
    background-color: var(--color-bg-header); /* JAVÍTVA */
    border-bottom: 1px solid var(--color-border); /* JAVÍTVA */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.navbar {
    height: 80px;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-item {
    margin-left: 20px;
}

.nav-link {
    color: var(--color-text); /* JAVÍTVA */
    font-weight: 400;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color);
}

/* ---- ÚJ RÉSZ: Témaváltó és ikonok ---- */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 15px; /* Térköz a két ikon között */
}

.theme-switcher {
    font-size: 1.2rem;
    color: var(--color-text);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.theme-switcher:hover {
    color: var(--primary-color);
    transform: rotate(15deg); /* "Menő" pörgő effekt */
}

.hamburger {
    display: none; /* Alapból rejtve, csak mobilon látszik */
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text); /* JAVÍTVA (hogy világos módban is látszódjon) */
}

/* ---- 2. Hero Szekció ---- */
/* ---- 2. Hero Szekció ---- */
.hero {
    /* VÁLTOZÁS: Ezek kellenek a pseudo-elemhez */
    position: relative; /* Hogy a ::before ehhez igazodjon */
    overflow: hidden;   /* Levágja a kilógó (nagyított) képet */

    /* MARAD: A tartalom igazítása */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 80px;

    /* TÖRÖLVE INNEN: Az összes 'background-' tulajdonságot
       kivettük, mert átkerülnek a ::before elembe.
    */
}
/* ÚJ: A .hero mögötti, animált háttérkép */
.hero::before {
    content: ''; /* Kötelező a pseudo-elemekhez */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* A tartalom (szöveg, gomb) MÖGÉ küldjük */

    /* IDE KERÜLNEK ÁT a .hero-ból kivett háttér-szabályok */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('banner.png'); /* Cseréld ki a saját képedre */
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* EZ A LÉNYEG: Az animáció alkalmazása */
    animation-name: slowZoom;
    animation-duration: 30s; /* Milyen lassú (30 másodperc) */
    animation-timing-function: linear; /* Egyenletes sebesség */
    animation-iteration-count: infinite; /* Végtelen ciklus */
    animation-direction: alternate; /* Odanagyít, majd vissza kicsinyít */
}

/* ÚJ: Hero háttérkép felülírása világos módban */
body.light-mode .hero::before {
    background-image: 
        /* Egy világos, áttetsző réteg, hogy a sötét szöveg olvashatóbb legyen */
        linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        /* A VILÁGOS TÉMA KÉPE */
        url('banner2.png'); 
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
  color: #ffffff; /* Alap (sötét téma) színe */
    animation: fadeInUp 0.6s ease-out 0.3s backwards;
}

.hero .subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    color: #eeeeee; /* Alap (sötét téma) színe */
    max-width: 600px;
    margin-bottom: 2rem;
    animation: fadeInUp 0.6s ease-out 0.6s backwards;
}
/* ÚJ: Hero szövegszín felülírása világos módban */
body.light-mode .hero h1 {
    color: var(--color-text); /* Ez sötét lesz világos módban */
}

body.light-mode .hero .subtitle {
    color: var(--color-text-muted); /* Ez is sötét lesz */
}

/* ---- 3. Szolgáltatások ---- */
.services {
    background-color: var(--color-bg-secondary);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--color-bg);
    padding: 2.5rem;
    border-radius: 10px;
    text-align: center;
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease;
}

.service-card:hover {
    border-bottom-color: var(--primary-color);
    transform: translateY(-5px);
}

.service-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* ---- 4. Portfólió ---- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.portfolio-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.portfolio-item img {
    display: block;
    width: 100%;
    transition: transform 0.4s ease;
}

.portfolio-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.portfolio-item:hover .overlay {
    opacity: 1;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.overlay h3 {
    color: #fff;
    margin-bottom: 1rem;
}

/* ---- 5. Rólam ---- */
.about {
    background-color: var(--color-bg-secondary);
    text-align: center;
}

.about p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

/* ---- 6. Kapcsolat ---- */
.contact {
    text-align: center;
}

.contact p {
    margin-bottom: 2rem;
    color: var(--color-text-muted);
}

#contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    gap: 15px;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--color-border); /* JAVÍTVA */
    background-color: var(--color-bg-secondary);
    color: var(--color-text); /* JAVÍTVA */
    border-radius: 5px;
    font-family: var(--font-family);
    transition: background-color 0.3s ease, border 0.3s ease;
}

#contact-form button {
    width: 100%;
}

/* ---- 7. Lábléc ---- */
.footer {
    background-color: var(--color-bg-secondary);
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid var(--color-border); /* JAVÍTVA */
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links a {
    color: var(--color-text-muted);
    font-size: 1.5rem;
    margin-left: 15px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color);
}

/* ---- Reszponzív Dizájn (Mobilon) ---- */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* Menü elrejtése mobilon */
        flex-direction: column;
        background-color: var(--color-bg-header); /* JAVÍTVA */
        position: absolute;
        top: 80px; /* Navigáció magassága */
        left: 0;
        width: 100%;
        padding: 20px 0;
        border-top: 1px solid var(--color-border); /* JAVÍTVA */
    }
    
    .nav-menu.active {
        display: flex; /* Aktív állapotban mutatjuk */
    }

    .nav-item {
        margin: 10px 0;
        text-align: center;
    }

    .nav-item .btn {
        width: 90%;
        margin: 10px auto;
    }

    /* ---- ÚJ: Módosítás a mobil nézethez ---- */
    .nav-icons {
        gap: 20px; /* Mobilon kicsit nagyobb térköz */
    }
    
    .hamburger {
        display: block; /* Hamburger ikon mutatása */
    }
    /* ------------------------------------ */

    .hero h1 {
        font-size: 2.5rem;
    }

    .footer .container {
        flex-direction: column;
        gap: 15px;
    }
}

/* ---- Form Státusz Üzenetek ---- */
#form-status {
    text-align: center;
    margin-top: 20px;
    font-size: 1.1rem;
}

#form-status.success {
    color: var(--secondary-color); /* Zöldes szín a sikerhez */
}

#form-status.error {
    color: #e74c3c; /* Piros szín a hibához */
}

/* ---- 1. Belépő Animáció (Keyframes) ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- 2. Animációk alkalmazása a Hero elemekre ---- */
.hero h1 {
    animation: fadeInUp 0.6s ease-out 0.3s backwards;
}

.hero .subtitle {
    animation: fadeInUp 0.6s ease-out 0.6s backwards;
}

.hero .btn {
    animation: fadeInUp 0.6s ease-out 0.9s backwards;
}
/* ---- 8. Vissza a tetejére Gomb ---- */

.back-to-top-btn {
    position: fixed; /* Odafagyasztja a képernyő sarkához */
    bottom: 30px;
    right: 30px;
    z-index: 999; /* Minden más felett legyen */
    
    /* Stílus */
    background-color: var(--primary-color);
    color: #1a1a1a; /* Sötét ikon a narancs gombon */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Kör alakú gomb */
    
    /* Ikon középre igazítása */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    
    /* Árnyék a "menő" hatásért */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    /* Kezdeti állapot: Rejtett */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Kicsit lejjebb kezd */
    
    /* Animáció */
    transition: all 0.3s ease-in-out;
}

/* Hover effekt */
.back-to-top-btn:hover {
    transform: scale(1.1); /* Kicsit megnő */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* A JavaScript által kapcsolt osztály, ami láthatóvá teszi */
.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Visszajön a helyére */
}
/* ---- 9. Háttérkép Zoom Animáció (Ken Burns) ---- */

@keyframes slowZoom {
    from {
        /* Kezdő állapot: normál méret */
        transform: scale(1);
    }
    to {
        /* Végállapot: 10%-kal nagyobb méret */
        transform: scale(1.1);
    }
}
/* ---- 10. Cookie Hozzájárulás Banner ---- */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: 1.5rem 0;
    z-index: 998; /* A "Vissza a tetejére" gomb (999) alatt, de minden más felett */
    
    /* Kezdeti állapot: Rejtett (lenn) */
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.5s ease-out, visibility 0.5s;
}

/* Ez az osztály mutatja meg */
.cookie-banner.show {
    visibility: visible;
    transform: translateY(0);
}

.cookie-banner .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-banner p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Mobilon egymás alá rendezzük */
@media (max-width: 768px) {
    .cookie-banner .container {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-banner p {
        margin-bottom: 15px;
    }
    
    .cookie-banner button {
        width: 100%;
    }
}

/* ---- 11. Social Media Toast Értesítő ---- */

.social-toast {
    position: fixed;
    bottom: 30px; /* A "Vissza a tetejére" gomb (jobb) mellé, balra */
    left: 30px;
    z-index: 998; /* A Cookie banner (998) és a Top gomb (999) között */

    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.2rem 1.5rem;
    padding-right: 3rem; /* Hely a bezárás gombnak */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* Kezdeti állapot: Rejtett */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px); /* Balról jön be */
    transition: all 0.5s ease-out;
}

/* Ez az osztály mutatja meg */
.social-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.social-toast p {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
}

.social-toast-links a {
    font-size: 1.5rem;
    margin-left: 10px;
    color: var(--color-text-muted);
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-toast-links a:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.social-toast-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

.social-toast-dismiss:hover {
    color: var(--color-text);
}

/* Mobilon kisebb legyen és középre */
@media (max-width: 768px) {
    .social-toast {
        left: 15px;
        right: 15px;
        bottom: 15px;
        /* A tartalom már középre van igazítva */
    }
    
    .social-toast p {
        font-size: 0.9rem;
    }
}
/* ---- 12. BLOG OLDALAK STÍLUSA ---- */

/* Blog Hero (a blog.html teteje) */
.blog-hero {
    padding: 8rem 0;
    padding-top: 10rem; /* Header miatt */
    text-align: center;
    background-color: var(--color-bg-secondary);
}

.blog-hero h1 {
    font-size: 3rem;
}

.blog-hero .subtitle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

/* Blog Lista (blog.html) */
/* Blog Lista (blog.html) */
.blog-list .container {
    max-width: 1100px; /* Visszaadjuk a teljes szélességet */
    display: grid;
    
    /* EZ A LÉNYEG:
       Automatikusan annyi oszlopot csinál, amennyi 350px-esen elfér.
       Gépen ez 2-3 oszlop, mobilon (ahol nincs 700px hely) 1 oszlop lesz.
    */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    
    gap: 30px; /* Térköz a kártyák között */
}

.blog-post-preview {
    background-color: var(--color-bg-secondary);
    border-radius: 10px;
    overflow: hidden;
    
    /* A margin-bottom: 0; mert a 'gap' már kezeli a térközt */
    margin-bottom: 0; 
    
    /* EZEKET TÖRÖLTÜK: display: grid, grid-template-columns, gap, align-items */

    /* ÚJ: Árnyék és hover effektus a "menő" kártyákhoz */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-preview:hover {
    transform: translateY(-5px); /* Elemelkedik */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.blog-post-preview .preview-image img {
    width: 100%;
    height: 200px; /* Fix magasság a kártya képének */
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.blog-post-preview:hover .preview-image img {
    transform: scale(1.05);
}

.blog-post-preview .preview-content {
    padding: 1.5rem; /* Körbe-körbe legyen térköz */
}

.blog-post-preview .post-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    display: block;
}

.blog-post-preview h2 {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 1rem;
}

.blog-post-preview h2 a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-preview h2 a:hover {
    color: var(--primary-color);
}

/* Egyedi Cikk Oldal (sablon) */
.blog-post-content .container {
    max-width: 800px; /* Még keskenyebb, az olvashatóságért */
}

.blog-post-content h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}

.blog-post-content .post-meta {
    display: block;
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.blog-post-content .post-featured-image {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 2rem;
}

/* Maga a cikk szövege */
.post-body {
    font-size: 1.1rem;
    line-height: 1.8;
}

.post-body p {
    margin-bottom: 1.5rem;
}

.post-body h2 {
    font-size: 2rem;
    text-align: left;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.post-body h3 {
    font-size: 1.6rem;
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.post-body ul, .post-body ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.post-body blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--color-text-muted);
}