/* =================================
   1. Téma és Stílus Változók
   ================================= */
:root {
    /* --- Színek --- */
    --szin-hatter: var(--bg, #f0f0f0);
    --szin-menusav: var(--card-bg, #ffffff);
    --szin-almenu: var(--card-bg, #ffffff);
    --szin-kiemeles-menusav: var(--bg, #f0f0f0);
    --szin-kiemeles-almenu: var(--bg, #f0f0f0);

    --szin-szoveg-elsodleges: var(--fg, #121212);
    --szin-szoveg-masodlagos: #555;
    --szin-szoveg-alap: var(--fg, #121212);
    --szin-szoveg-halvany: #888;
    --szin-szoveg-kiemeles: var(--accent, #e6880e);
    --szin-szoveg-kiemeles-hover: var(--accent-hover, #fd9b1b);
    --szin-szoveg-gomb: #ffffff;

    --szin-border-fo: #dddddd;
    --szin-border-menu: #eeeeee;
    --szin-border-almenu: #f5f5f5;
    --szin-border-dashed: #cccccc;

    --szin-arnyek-oldalsav: 2px 0 10px rgba(0,0,0,0.05);
    --szin-arnyek-elvalaszto-le: 0 2px 4px rgba(0,0,0,0.06);
    --szin-arnyek-elvalaszto-fel: 0 -2px 4px rgba(0,0,0,0.06);
    --szin-arnyek-kartya: 0 4px 10px rgba(0,0,0,0.05);
    --szin-arnyek-kiemelt: 0 6px 15px rgba(0,0,0,0.08);

    /* --- Formázás --- */
    --betucsalad-alap: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --menusav-szelesseg: 280px;
    --navbar-fuggoleges-szelesseg: 180px;
    --border-vastagsag: 1px;
    --border-radius-alap: 8px;

    /* --- Behúzás (Padding) --- */
    --padding-fejlec: 1.0rem;
    --padding-tartalom: 2.5rem;
    --padding-navbar-vizszintes: 1rem 2rem;
    --padding-navbar-fuggoleges: 1rem;
    --padding-menu-elem: 1rem 0;
    --padding-menu-header: 0.2rem 0.75rem;
    --padding-almenu-elem: 0.75rem 1.5rem 0.75rem 2.5rem;
    --padding-gomb: 0.7rem 1.5rem;
    --padding-kartya: 1.5rem;
    
    --margin-h3: 0.5rem; 

    /* --- Betűméret --- */
    --meret-fejlec: 1.1rem;
    --meret-menu-elem: 1rem;
    --meret-almenu-elem: 0.9rem;
    --meret-h2: 1.8rem;
    --meret-h3: 1.3rem;
    --meret-gomb: 1rem;
    --suly-kiemelt: 500;

    /* --- Animáció --- */
    --ido-animacio: 0.3s;
    --ido-hover: 0.2s;

    --sidebar-width: 280px;
}

/* =================================
   2. Alapbeállítások és Görgetés
   ================================= */
html {
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    font-family: var(--betucsalad-alap);
    background-color: var(--szin-hatter);
    color: var(--szin-szoveg-alap);
}

ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: var(--szin-szoveg-kiemeles); }
a:hover { color: var(--szin-szoveg-kiemeles-hover); }
button { cursor: pointer; }
h1, h2, h3, h4 { color: var(--szin-szoveg-elsodleges); }
h2 { font-size: var(--meret-h2); text-align: center; margin: 0 0 2rem 0; }
h3 { font-size: var(--meret-h3); margin: 0 0 1rem 0; }

/* Egységes gomb stílus */
.button-style {
    display: inline-block;
    padding: var(--padding-gomb);
    font-size: var(--meret-gomb);
    font-weight: var(--suly-kiemelt);
    color: var(--szin-szoveg-gomb);
    background-color: var(--szin-szoveg-kiemeles);
    border: none;
    border-radius: var(--border-radius-alap);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ido-hover);
    text-align: center;
}
.button-style:hover {
    background-color: var(--szin-szoveg-kiemeles-hover);
    color: var(--szin-szoveg-gomb);
}
/* --- Téma váltó gomb stílusa --- */
.theme-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--szin-szoveg-elsodleges); /* A demó változóit használjuk */
  transition: transform 0.3s ease, color 0.3s ease;
}

.theme-btn:hover {
  transform: scale(1.1);
  color: var(--szin-szoveg-kiemeles-hover);
}

.theme-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* =========================================
   NAVBAR TÉMAVÁLTÓ GOMB STÍLUS
   ========================================= */

.theme-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--szin-szoveg-elsodleges);
    transition: background 0.3s, color 0.3s;
    
    /* JOBBRA IGAZÍTÁS TRÜKKJE: */
    /* A flex konténerben a margin-left: auto mindentől eltolja jobbra */
    margin-left: auto; 
}

.theme-toggle-btn:hover {
    background-color: var(--szin-menusav);
    color: var(--szin-szoveg-kiemeles);
}

/* KIVÉTEL: Függőleges menüben (bal/jobb) */
/* Ott nem a jobb szélre kell, hanem középre vagy alulra */
#navbar.navbar-bal .theme-toggle-btn,
#navbar.navbar-jobb .theme-toggle-btn {
    margin-left: 0;
    margin-top: 1rem; /* Kis hely a linkek alatt */
}

/* =========================================
   TÉMAVÁLTÓ POZÍCIONÁLÁS (DESKTOP vs MOBIL)
   ========================================= */

/* 1. ALAPBEÁLLÍTÁS (ASZTALI NÉZET) */

/* Mobilos váltót elrejtjük */
.mobile-theme-wrapper {
    display: none;
}

/* Asztalit mutatjuk */
.desktop-theme-wrapper {
    display: block;
}

/* 2. MOBIL NÉZET (Max 768px) */
@media (max-width: 768px) {

    /* FENTI gomb elrejtése (hogy csak a hamburger maradjon) */
    .desktop-theme-wrapper {
        display: none !important;
    }

    /* MENÜBEN lévő gomb megjelenítése */
    .mobile-theme-wrapper {
        display: flex !important;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem; /* Távolság a linkektől */
        padding-top: 2rem;
        border-top: 1px dashed var(--szin-border-dashed);
        width: 80%; /* Hogy ne érjen végig */
        justify-content: center;
        color: var(--szin-szoveg-masodlagos);
        font-weight: 500;
    }

    /* Kicsit nagyobbra vesszük mobilon az ikont */
    .mobile-theme-wrapper .theme-toggle-btn {
        width: 44px;
        height: 44px;
        background: var(--szin-menusav);
        border-radius: 50%;
        margin-left: 0; /* Reseteljük az auto margin-t */
    }
}

/* Placeholder stílus */
.placeholder-img {
    background: var(--szin-szoveg-masodlagos);
    border: var(--border-vastagsag) dashed var(--szin-border-dashed);
    border-radius: var(--border-radius-alap);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--szin-szoveg-halvany);
    font-size: var(--meret-almenu-elem);
}
/* =========================================
   KÉP MÉRETEZÉS JAVÍTÁSA (OBJECT-FIT FIX)
   ========================================= */

/* Ez a szabály vonatkozik az összes eddig létrehozott képre */
.team-img, 
.blog-img, 
.main-blog-img, 
.main-about-img, 
.c-img-1, .c-img-2, .c-img-3,
.placeholder-img,
.featured-img,
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* A KULCS: Kitölti a keretet, levágja a felesleget */
    object-position: center; /* Mindig a kép közepét mutatja */
    display: block; /* Eltünteti a kép alatti kis üres csíkot */
}

/* Ha a felhasználó simán egy <img> taget illeszt be a 
   <div class="placeholder-img"> helyére, akkor a wrapper
   magassága fog dominálni. 
*/

/* Biztosítjuk, hogy a wrappereknek (kereteknek) legyen fix magassága */
/* (Ezeket már korábban definiáltuk, de itt egy emlékeztető/megerősítés) */

/* Munkatársak képkeret */
.team-img-wrapper {
    overflow: hidden; /* Ami kilóg, azt elrejtjük */
    /* A magasságot már a team szekció CSS-e beállította (pl. 250px vagy 300px) */
}

/* Blog képkeret */
.blog-img-wrapper {
    overflow: hidden;
}

/* Rólunk képkeretek */
.about-image-side, 
.collage-grid div { /* A kollázs elemei */
    overflow: hidden;
}

/* Megjegyzés stílus*/
 .note { text-align: center; margin-top: 1.5rem; font-size: var(--meret-almenu-elem); color: var(--szin-szoveg-masodlagos); }


/* =================================
   3. Fő Elrendezés (Oldalsáv + Tartalom)
   ================================= */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width, 300px); /* Változó vagy fix 300px */
    background: var(--szin-menusav);
    border-right: 1px solid var(--szin-border-menu);
    z-index: 9999;
    
    /* --- ITT A VARÁZSLAT (FLEXBOX) --- */
    display: flex;
    flex-direction: column; /* Egymás alá rendezzük az elemeket */
    overflow: hidden;       /* A fő keret NE görgessen! */
}

.main-content {
    margin-left: var(--sidebar-width) !important; /* Eltoljuk a sidebar szélességével */
    width: calc(100% - var(--sidebar-width)) !important; /* A maradék helyet töltse ki */
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
    background-color: var(--szin-hatter); /* Egy kis háttérszín, hogy elváljon */
}


.demo-permanent-footer {
    padding: 1.5rem var(--padding-tartalom);
    background-color: var(--szin-menusav);
    color: var(--szin-szoveg-elsodleges);
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0; /* Nem zsugorodik */
    margin-top: auto; /* Alulra tolja magát */
    box-sizing: border-box; 
    border-top: 3px solid var(--szin-szoveg-kiemeles);
    transition: padding 0.3s ease, border-top 0.2s;
}

.demo-permanent-footer:hover{
    border-top: 3px solid var(--szin-szoveg-kiemeles-hover);
}

.demo-permanent-footer p { margin: 0; }
.demo-permanent-footer a {
    color: var(--szin-szoveg-elsodleges);
    transition: color 0.2s;
}

.demo-permanent-footer a:hover {
    color: var(--szin-szoveg-kiemeles-hover);
    text-decoration: underline;
}


@media (max-width: 900px) {
    .sidebar {
        /* Mobilon általában elrejtjük vagy gombbal nyitjuk */
        /* De ha fixen ott marad, akkor csökkenteni kell a szélességet */
        transform: translateX(-100%); /* Elrejtés balra */
        transition: transform 0.3s ease;
    }
    
    .sidebar.open {
        transform: translateX(0); /* Megjelenítés ha van 'open' class */
    }

    .main-content {
        margin-left: 0 !important; /* Mobilon nincs eltolás */
        width: 100% !important;
    }
}
/* =========================================
   FOOTER ELTOLÁS (HA VAN OLDALSÓ MENÜ)
   ========================================= */


/* Ugyanazok a szabályok, mint a main-content-nél */
.demo-permanent-footer.has-left-navbar {
    padding-left: 180px !important; /* A menü szélessége */
}

.demo-permanent-footer.has-right-navbar {
    padding-right: 180px !important;
}

/* MOBILON: Reseteljük, mert ott nincs oldalsó sáv */
@media (max-width: 900px) {
    .demo-permanent-footer.has-left-navbar,
    .demo-permanent-footer.has-right-navbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =================================
   4. Oldalsáv Belső Részei
   ================================= */
.sidebar-header,
.sidebar-footer {
    padding: var(--padding-fejlec);
    font-size: var(--meret-fejlec);
    background-color: var(--szin-menusav);
    z-index: 10;
    flex-shrink: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.sidebar-header {
    flex-shrink: 0; /* Megtiltjuk, hogy összenyomódjon */
    background: var(--szin-menusav);
    border-bottom: 1px solid var(--szin-border-menu);
    z-index: 10;
    /*padding: 1rem;*/ /* Ha szükséges */
}
.sidebar-nav {
    flex-grow: 1;      /* Kitölti az összes rendelkezésre álló helyet */
    overflow-y: auto;  /* CSAK EZ a rész görgessen */
    overflow-x: hidden;
    padding-bottom: 1rem; /* Kis hely az alján */
}
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--szin-szoveg-halvany);
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--szin-szoveg-masodlagos);
    cursor: pointer;
}
.sidebar-footer {
    flex-shrink: 0; /* Megtiltjuk, hogy összenyomódjon */
    background: var(--szin-menusav);
    border-top: 1px solid var(--szin-border-menu);
    padding: 1rem;
    z-index: 10;
}
/* A fejléc sor elrendezése (Bal - Közép - Jobb) */
.header-row {
    display: flex;
    justify-content: space-between; /* Szétosztja a helyet a 3 elem között */
    align-items: center; /* Függőleges középre igazítás */
    width: 100%;
}

/* A Házikó gomb stílusa */
.home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.5rem; /* Ugyanannyi, mint a theme-btn */
    color: var(--szin-szoveg-elsodleges); /* Felveszi a téma színét */
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.home-btn:hover {
    transform: scale(1.1); /* Nagyítás rámutatáskor */
    color: var(--szin-szoveg-kiemeles-hover); /* Színváltás rámutatáskor */
}

.home-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* A gomb színével tölti ki */
}

/* Biztosítjuk, hogy a cím középen maradjon */
.sidebar-header h3 {
    margin: 0;
    font-size: var(--meret-fejlec);
    /* Opcionális: Ha nagyon pontos középre igazítást szeretnél, 
       akkor fix szélességet adhatsz a címelemnek, vagy flex-grow-t */
    text-align: center;
}



.footer-button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    transition: background-color var(--ido-hover);
    /* Gomb szöveg stílus */
    font-size: var(--meret-fejlec);
    font-weight: var(--suly-kiemelt);
    color: var(--szin-szoveg-elsodleges);
    padding: 0;
}
.footer-button:hover {
    background-color: var(--szin-szoveg-kiemeles-hover);
}
.footer-button h3 { margin: 0; font-size: inherit; } /* Ha h3 van a gombban */

/* =================================
   5. Oldalsáv Vezérlő Elemek
   ================================= */
.mobile-nav-option {
    display: none; /* Alapból rejtett */
}

.sidebar-nav li {
    border-bottom: var(--border-vastagsag) solid var(--szin-border-menu); 
}
.menu-item-header {
    display: flex;
    align-items: center;
    padding: var(--padding-menu-header);
    background-color: var(--szin-menusav);
}
.menu-item-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 0.75rem;
    accent-color: var(--szin-szoveg-kiemeles);
}
.menu-toggle {
    flex-grow: 1;
    font-size: var(--meret-menu-elem);
    font-weight: var(--suly-kiemelt);
    color: var(--szin-szoveg-elsodleges);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: var(--padding-menu-elem);
}
.chevron {
    float: right;
    transition: transform var(--ido-animacio) ease;
    color: var(--szin-szoveg-halvany);
}
.menu-toggle.is-open .chevron {
    transform: rotate(90deg);
}
.submenu {
    max-height: 0;
    overflow: hidden;
    background-color: var(--szin-almenu);
    transition: max-height var(--ido-animacio) ease-out;
}
.submenu li {
    padding: var(--padding-almenu-elem);
    border-bottom: var(--border-vastagsag) solid var(--szin-border-almenu);
}
.submenu li:last-child { border-bottom: none; }
.submenu li label {
    display: flex;
    align-items: center;
    font-size: var(--meret-almenu-elem);
    color: var(--szin-szoveg-masodlagos);
    cursor: pointer;
}
.submenu li input[type="radio"] {
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: var(--szin-szoveg-kiemeles);
}

/* =================================
   6. DEMÓ SZEKCIÓK ÁLTALÁNOS
   ================================= */
.demo-section {
    padding: var(--padding-tartalom);
    position: relative; 
}

/* Egységes gomb stílusok a demóban */
.demo-section button,
.demo-section .button-style,
.demo-section .holiday-link-button {
    display: inline-block;
    padding: var(--padding-gomb);
    font-size: var(--meret-gomb);
    font-weight: var(--suly-kiemelt);
    color: var(--szin-szoveg-gomb);
    background-color: var(--szin-szoveg-kiemeles);
    border: none;
    border-radius: var(--border-radius-alap);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ido-hover);
}
.demo-section button:hover,
.demo-section .button-style:hover,
.demo-section .holiday-link-button:hover {
    background-color: var(--szin-szoveg-kiemeles-hover);
    color: var(--szin-szoveg-gomb);
}

/* =================================
   7. NAVBAR ELRENDEZÉSEK (JAVÍTOTT)
   ================================= */

/* --- ALAP BEÁLLÍTÁSOK --- */
#navbar {
    display: flex;
    align-items: center;
    background: var(--szin-menusav);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    /* Fontos: A demóban section, élesben header lehet, de az ID=navbar összeköti őket */
}

/* --- KÖZÖS BELSŐ ELEMEK --- */
#navbar .brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--szin-szoveg-kiemeles);
    text-decoration: none;
    white-space: nowrap;
    margin-right: 1rem;
    cursor: pointer;
    transition: color 0.2s;
}

#navbar .brand:hover {
    color: var(--szin-szoveg-kiemeles-hover);

}  

#navbar .links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

#navbar .links a {
    text-decoration: none;
    color: var(--szin-szoveg-elsodleges);
    font-weight: 500;
    transition: color 0.2s;
}
#navbar .links a:hover {
    color: var(--szin-szoveg-kiemeles-hover);
}

/* --- 1. VÍZSZINTES (FELSŐ) TÍPUSOK --- */

/* Középre zárt */
#navbar.navbar-kozep {
    position: sticky; top: 0;
    padding: 1rem 0; /* Padding a szélétől függ, a wrap intézi */
    border-bottom: 3px solid var(--szin-szoveg-kiemeles);
    transition: border-bottom 0.2s;
}
#navbar.navbar-kozep .wrap {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
}
#navbar.navbar-kozep .links {
    margin-left: auto; margin-right: auto; /* Középre húzás */
}

/* =========================================
   NAVBAR KÖZÉPRE IGAZÍTÁS JAVÍTÁSA (ASZTALI)
   ========================================= */

/* Csak asztali nézetben (769px felett), 
   mert mobilon már megoldottuk a hamburgerrel */
@media (min-width: 769px) {
    .navbar-kozep,
    .navbar-kozep .wrap {
        min-height: 31px; /* Állítsd tetszőleges méretre (pl. 70px, 90px) */
        box-sizing: border-box;
    }
    
    /* Ha a navbar típusa "közép" */
    .navbar-kozep .wrap {
        position: relative; /* Ez a referencia pont */
        justify-content: center; /* A linkeket középre kényszerítjük */
    }

    /* 1. A Logó "kiszögezése" balra */
    .navbar-kozep .brand {
        position: absolute;
        left: 2rem; /* Bal szél + kis távolság */
        top: 50%;
        transform: translateY(-50%); /* Függőleges közép */
        margin: 0;
    }

    /* 2. A Gombok "kiszögezése" jobbra */
    .navbar-kozep .nav-right-controls {
        position: absolute;
        right: 2rem; /* Jobb szél + kis távolság */
        top: 50%;
        transform: translateY(-50%); /* Függőleges közép */
        margin: 0;
    }
    
    /* Biztosítjuk, hogy a linkek ne csússzanak rá a logóra, ha kicsi a képernyő */
    .navbar-kozep .links {
        margin: 0 auto;
        padding: 0 150px; /* Helyet hagyunk a logónak és a gomboknak */
    }
}

/* Széthúzott (Space-Between) */
#navbar.navbar-jobbra {
    position: sticky; top: 0;
    padding: 1rem 0;
    border-bottom: 3px solid var(--szin-szoveg-kiemeles);
    transition: border-bottom 0.2s;
}
#navbar.navbar-jobbra .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

/* Logó Jobbra (Fordított) */
#navbar.navbar-logo-jobb {
    position: sticky; top: 0;
    padding: 1rem 0;
    border-bottom: 3px solid var(--szin-szoveg-kiemeles);
    transition: border-bottom 0.2s;
}

#navbar.navbar-logo-jobb:hover,
#navbar.navbar-jobbra:hover,
#navbar.navbar-kozep:hover {
    border-bottom: 3px solid var(--szin-szoveg-kiemeles-hover);
}

#navbar.navbar-logo-jobb .wrap {
    display: flex;
    flex-direction: row-reverse; /* Fordított sorrend */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

/* --- FÜGGŐLEGES (OLDALSÓ) TÍPUSOK --- */
#navbar.navbar-bal,
#navbar.navbar-jobb {
    position: fixed;
    top: 0; bottom: 0;
    width: 180px;
    flex-direction: column;
    padding: 2rem 1rem;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    background: var(--szin-menusav);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000; /* Fontos, de a Sidebar (9999) alatt marad */
}

/* JAVÍTÁS: Bal oldali menü eltolása a Sidebar miatt */
#navbar.navbar-bal { 
    /* Ha van sidebar (változó), akkor annyival arrébb kezdődik. 
       Ha nincs (ügyfélnél), akkor 0-nál. */
    left: var(--sidebar-width, 0px); 
    border-right: 3px solid var(--szin-szoveg-kiemeles); 
    transition: border-right 0.2s;
}

#navbar.navbar-bal:hover {
    border-right: 3px solid var(--szin-szoveg-kiemeles-hover);
}

#navbar.navbar-jobb { 
    right: 0; 
    border-left: 3px solid var(--szin-szoveg-kiemeles);
    transition: border-left 0.2s;
}

#navbar.navbar-jobb:hover {
    border-left: 3px solid var(--szin-szoveg-kiemeles-hover);
}

#navbar.navbar-bal .links, 
#navbar.navbar-jobb .links {
    flex-direction: column;
    width: 100%;
    margin-top: 2rem;
    text-align: center;
}

/* --- 3. MOBIL (HAMBURGER) --- */
.demo-hamburger-toggle {
    display: none; /* Alapból rejtve, kivéve ha a HTML kéri */
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    padding: 0;
}
.demo-hamburger-toggle .bar {
    width: 100%; height: 3px; background: var(--szin-szoveg-elsodleges); border-radius: 2px;
}

/* --- TARTALOM ELTOLÁS (Fix menükhöz) --- */
main.main-content {
    transition: padding 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    padding: 0; /* Alapértelmezett */
}
main.main-content.has-left-navbar { padding-left: 180px !important; }
main.main-content.has-right-navbar { padding-right: 180px !important; }

/* =========================================
   MOBIL NAVBAR & HAMBURGER (RESPONSIVE)
   ========================================= */

/* 1. ALAPBEÁLLÍTÁS (ASZTALI NÉZET) */
/* Alapból elrejtjük a hamburger gombot, csak mobilon kell */
.demo-hamburger-toggle {
    display: none; 
}

/* A jobb oldali vezérlők (Téma + Hamburger) legyenek egymás mellett */
.nav-right-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto; /* Ez tolja őket jobbra asztali nézetben is */
}

/* 2. MOBIL NÉZET (Max 768px szélességig) */
@media (max-width: 768px) {

    /* --- A NAVBAR SZERKEZETE MOBILON --- */
    #navbar, 
    #navbar .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Széthúzzuk a szélekre */
        position: relative; /* A pozicionáláshoz kell */
        padding: 1rem;
        height: 70px; /* Fix magasság a fejlécnek */
    }

    /* --- BRAND (LOGÓ) KÖZÉPRE IGAZÍTÁSA --- */
    #navbar .brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Tökéletesen középre húzza */
        margin: 0;
        z-index: 101; /* Hogy mindig látszódjon */
    }

    /* --- HAMBURGER GOMB MEGJELENÍTÉSE --- */
    .demo-hamburger-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 102; /* A menü felett legyen */
    }

    .demo-hamburger-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: var(--szin-szoveg-elsodleges);
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* --- ANIMÁCIÓ: AMIKOR NYITVA VAN (.is-open) --- */
    /* 1. vonal: elfordul 45 fokkal */
    .demo-hamburger-toggle.is-open .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    /* 2. vonal: eltűnik */
    .demo-hamburger-toggle.is-open .bar:nth-child(2) {
        opacity: 0;
    }
    /* 3. vonal: elfordul -45 fokkal */
    .demo-hamburger-toggle.is-open .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* --- A LENYÍLÓ MENÜ (.links) --- */
    .links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Teljes képernyő */
        background-color: var(--szin-hatter); /* Sötét módban sötét! */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        
        /* Elrejtés animációval */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        z-index: 100; /* A tartalom felett, de a gomb alatt */
    }

    /* Amikor hozzáadjuk az .is-open osztályt (JS) */
    .links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* A linkek stílusa a mobil menüben */
    .links a {
        font-size: 1.5rem;
        color: var(--szin-szoveg-elsodleges);
        font-weight: bold;
    }

    /* Témaváltó igazítása mobilon */
    /* Ha azt akarod, hogy a hamburger mellett legyen jobbra: */
    .nav-right-controls {
        z-index: 102;
        gap: 1.5rem;
    }
}

/* =================================
   8. SZEKCIÓK ELRENDEZÉSEI (A-Z)
   ================================= */
   
/* Alap kártya stílus */
.demo-section .card {
    border: var(--border-vastagsag) solid var(--szin-border-fo);
    border-radius: var(--border-radius-alap);
    box-shadow: var(--szin-arnyek-kartya);
    background: var(--szin-almenu);
    overflow: hidden;
}
.demo-section .card h3 { padding: 1rem 1rem 0.5rem 1rem; margin: 0; font-size: var(--meret-h3); }
.demo-section .card p { padding: 0 1rem 1rem 1rem; margin: 0; color: var(--szin-szoveg-masodlagos); font-size: var(--meret-almenu-elem); }

/* Alap lista elem stílus */
.demo-section .list-item {
    display: flex;
    align-items: center;
    border: var(--border-vastagsag) solid var(--szin-border-fo);
    border-radius: var(--border-radius-alap);
    background: var(--szin-almenu);
    padding: 1rem;
}
.demo-section .list-item h3 { margin: 0; font-size: var(--meret-h3); }
.demo-section .list-item p { margin: 0.25rem 0 0 0; color: var(--szin-szoveg-masodlagos); font-size: var(--meret-almenu-elem); }


/* =========================================
   RÓLUNK (ABOUT) SZEKCIÓK
   ========================================= */

.about-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 1. STATISZTIKÁS (SPLIT) --- */
.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image-side .main-about-img {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.about-content-side h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--szin-szoveg-elsodleges);
}

.about-content-side .lead {
    font-size: 1.2rem;
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.about-stats-grid {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    border-top: 1px solid var(--szin-border-fo);
    padding-top: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--szin-szoveg-kiemeles);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--szin-szoveg-masodlagos);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 2. FOTÓKOLLÁZS --- */
.subtitle {
    color: var(--szin-szoveg-masodlagos);
}
.about-collage-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.about-list li {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    color: var(--szin-szoveg-masodlagos);
}

.collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 1rem;
}

/* A kollázs elrendezése: 
   - 1. kép: Bal oldalon, teljes magasság (nyújtott)
   - 2. és 3. kép: Jobb oldalon, egymás alatt
*/
.c-img-1 {
    grid-column: 1;
    grid-row: 1 / 3; /* Átnyúlik két soron */
    height: 100%;
    border-radius: 12px;
}
.c-img-2 {
    grid-column: 2;
    grid-row: 1;
    border-radius: 12px;
}
.c-img-3 {
    grid-column: 2;
    grid-row: 2;
    border-radius: 12px;
}

/* --- 3. KÁRTYÁS (CARDS) --- */
.about-cards-layout {
    text-align: center;
}

.about-header-center {
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.value-card {
    background: var(--szin-almenu);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    border-top: 4px solid var(--szin-szoveg-kiemeles);

}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-top: 4px solid var(--szin-szoveg-kiemeles-hover);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.value-card h3 {
    margin-bottom: 1rem;
    color: var(--szin-szoveg-elsodleges);
}

.value-card p {
    color: var(--szin-szoveg-masodlagos);
    line-height: 1.6;
}

/* --- MOBIL NÉZET --- */
@media (max-width: 900px) {
    .about-split, 
    .about-collage-layout {
        grid-template-columns: 1fr; /* Egymás alá kerülnek */
        gap: 2rem;
    }

    .about-image-side, 
    .about-collage-side {
        order: -1; /* Kép kerüljön felülre mobilon */
    }

    .about-stats-grid {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap; /* Hogy elférjenek */
    }
    
    .collage-grid {
        /* Mobilon egyszerűbb rács */
        grid-template-rows: 200px; 
    }
    .c-img-1 { grid-column: 1 / 3; grid-row: 1; } /* Nagy kép felül */
    .c-img-2 { grid-column: 1; grid-row: 2; }
    .c-img-3 { grid-column: 2; grid-row: 2; }
}
/* =========================================
   BLOG SZEKCIÓK
   ========================================= */

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Közös elemek */
.blog-meta {
    font-size: 0.85rem;
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 0.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.blog-cat {
    color: var(--szin-szoveg-kiemeles);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.read-more {
    color: var(--szin-szoveg-kiemeles);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
    display: inline-block;
    transition: color 0.2s;
}
.read-more:hover {
    text-decoration: underline;
    color: var(--szin-szoveg-kiemeles-hover);
}

/* --- 1. KÉPES RÁCS (GRID CARDS) --- */
.blog-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: var(--szin-menusav);
    border: 1px solid var(--szin-border-fo);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: var(--szin-szoveg-kiemeles-hover);
}

.blog-img-wrapper {
    height: 200px;
    width: 100%;
    background-color: var(--szin-border-masodlagos);
}

.blog-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--szin-szoveg-halvany);
}

.blog-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-content h3 {
    margin: 0.5rem 0 1rem 0;
    font-size: 1.25rem;
    color: var(--szin-szoveg-elsodleges);
    line-height: 1.3;
}

.blog-content p {
    color: var(--szin-szoveg-masodlagos);
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1;
}

/* --- 2. MAGAZIN (FEATURED + LIST) --- */
.blog-featured-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
}

.blog-featured-main {
    background: var(--szin-menusav);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--szin-border-fo);
}

.main-blog-img {
    height: 350px;
    width: 100%;
    background-color: var(--szin-szoveg-masodlagos);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--szin-szoveg-halvany);
}

.featured-content {
    padding: 2rem;
}

.featured-content h3 {
    font-size: 1.8rem;
    margin: 0.5rem 0 1rem 0;
    color: var(--szin-szoveg-elsodleges);
}

.blog-side-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-mini-item {
    padding: 1.5rem;
    background: var(--szin-menusav);
    border: 1px solid var(--szin-border-fo);
    border-radius: 8px;
    transition: border-color 0.3s;
}

.blog-mini-item:hover {
    border-color: var(--szin-szoveg-kiemeles-hover);
}

.blog-meta-mini {
    font-size: 0.8rem;
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 0.3rem;
}

.blog-mini-content h4 {
    margin: 0;
    font-size: 1.1rem;
}

.blog-mini-content h4 a {
    color: var(--szin-szoveg-elsodleges);
    text-decoration: none;
    transition: color 0.2s;
}

.blog-mini-content h4 a:hover {
    color: var(--szin-szoveg-kiemeles-hover);
}

/* --- 3. KLASSZIKUS SZÖVEGES (TEXT ONLY) --- */
.blog-text-layout {
    max-width: 800px;
    margin: 0 auto;
}

.blog-text-item {
    border-bottom: 1px solid var(--szin-border-dashed);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.blog-text-item:last-child {
    border-bottom: none;
}

.blog-text-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--szin-szoveg-elsodleges);
}

.blog-text-item p {
    color: var(--szin-szoveg-masodlagos);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* --- MOBIL NÉZET --- */
@media (max-width: 768px) {
    .blog-featured-layout {
        grid-template-columns: 1fr; /* Egymás alá kerülnek */
    }
    .main-blog-img {
        height: 250px;
    }
}
/* =========================================
   MUNKATÁRSAK (TEAM) SZEKCIÓ - JAVÍTOTT
   ========================================= */

/* Alap konténer */
.team-container {
    display: grid;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Kártya Alapstílus --- */
.team-card {
    background: var(--szin-almenu);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Placeholder kép stílusa */
.team-img-wrapper {
    width: 100%;
    /* A magasságot az elrendezés típusoknál állítjuk */
    background: var(--szin-szoveg-masodlagos);
}

.team-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--szin-szoveg-halvany);
    font-size: 0.9rem;
}

/* Tartalom */
.team-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.team-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.4rem;
    color: var(--szin-szoveg-elsodleges);
}

.team-role {
    font-weight: bold;
    color: var(--szin-szoveg-kiemeles);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.team-edu {
    font-size: 0.9rem;
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--szin-border-fo);
    padding-bottom: 0.5rem;
}

.team-bio {
    font-size: 0.95rem;
    color: var(--szin-szoveg-masodlagos);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; 
}

/* --- ÚJ: Szöveges Elérhetőségek --- */
.team-contact-info {
    margin-top: auto;
    font-size: 0.9rem;
    color: var(--szin-szoveg-elsodleges);
    background: var(--szin-hatter);
    padding: 1rem;
    border-radius: 8px;
}

.team-contact-info .contact-row {
    margin-bottom: 0.3rem;
}
.team-contact-info .contact-row:last-child {
    margin-bottom: 0;
}

.team-contact-info strong {
    color: var(--szin-szoveg-elsodleges);
    margin-right: 5px;
}

.team-contact-info a {
    color: var(--szin-szoveg-kiemeles);
    text-decoration: none;
    font-weight: 500;
}
.team-contact-info a:hover {
    text-decoration: underline;
}

/* --- ELRENDEZÉSEK --- */

/* 1. GRID (Klasszikus) */
.team-container.team-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.team-grid .team-img-wrapper {
    height: 250px; /* Fix magasság a kártya tetején */
}

/* 2. LISTA (Horizontális) */
.team-container.team-list {
    grid-template-columns: 1fr;
}
.team-list .team-card {
    flex-direction: row;
}
.team-list .team-img-wrapper {
    width: 300px;
    height: auto; /* Itt a magasságot a tartalomhoz igazítjuk, vagy min-height */
    min-height: 100%;
    flex-shrink: 0;
}

/* 3. MINIMALISTA (Kör) */
.team-container.team-minimal {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}
.team-minimal .team-card {
    background: transparent;
    box-shadow: none;
    align-items: center;
    text-align: center;
    border-radius: 0;
}
.team-minimal .team-card:hover {
    transform: translateY(-5px);
}
.team-minimal .team-img-wrapper {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px dashed var(--szin-border-dashed);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.team-minimal .team-edu {
    border-bottom: none;
}
.team-minimal .team-contact-info {
    background: transparent; /* Minimalistánál ne legyen szürke doboz */
    padding: 0;
}

/* --- MOBIL NÉZET --- */
@media (max-width: 768px) {
    .team-list .team-card {
        flex-direction: column;
    }
    .team-list .team-img-wrapper {
        width: 100%;
        height: 250px;
    }
}


/* =========================================
   13. KAPCSOLAT SZEKCIÓK (JAVÍTOTT LAYOUT)
   ========================================= */

/* --- 0. Szekció Címsor Javítása (Hogy ne csússzon el) --- */
.demo-section[id="contact"] {
    display: block !important; /* Kényszerítjük, hogy ne legyen flex/grid a fő doboz */
    width: 100%;
    box-sizing: border-box;
}

.demo-section[id="contact"] h2 {
    display: block !important;
    width: 100% !important;
    text-align: center;
    margin-bottom: 2.5rem;
    clear: both; /* Biztonsági háló */
}

/* --- Közös elemek --- */
.contact-container {
    max-width: 1100px;
    width: 100% !important; /* Kényszerített teljes szélesség */
    margin: 0 auto;
    display: block; /* Alapértelmezett blokk viselkedés */
}

/* Input mezők */
.input-style {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid var(--szin-border-fo);
    border-radius: 6px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--szin-hatter);
    color: var(--szin-szoveg-elsodleges);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.input-style:focus {
    outline: none;
    border-color: var(--szin-szoveg-kiemeles);
    box-shadow: 0 0 0 3px rgba(230, 136, 14, 0.1);
}
label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--szin-szoveg-elsodleges);
    text-align: left;
}

/* --- 1. Kétoszlopos (Split) - EGYSÉGES KÁRTYA KERETTEL --- */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    
    /* ITT A LÉNYEG: A kártyának van kerete */
   
    
    /* Fontos: levágja a belső tartalmat, hogy a sarkok kerekek maradjanak */
    overflow: hidden; 
    
    /* Opcionális: Árnyék, hogy kiemelkedjen a háttérből */
    
    
    width: 100%;
    background: transparent; /* A belső elemek adják a színt */
}

/* Bal oszlop (Információk) */
.contact-split .contact-info {
    background-color: var(--szin-kiemeles-menusav);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--szin-border-fo);
    border-radius: 12px;
    box-shadow: var(--szin-arnyek-kartya);
    /* Belső elválasztó vonal a két fél között */
    border-right: none;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
}

.contact-split .contact-info h3 { 
    margin-top: 0; 
    margin-bottom: 1.5rem; 
}

.contact-split .info-item { 
    margin-bottom: 1rem; 
    font-size: 1.1rem; 
}

.contact-split .mini-map {
    height: 150px;
    background: var(--szin-szoveg-masodlagos);
    border-radius: 8px;
    margin-top: 2rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--szin-szoveg-halvany); font-size: 0.9rem;
}

/* Jobb oszlop (Űrlap) */
.contact-split .contact-form-wrapper { 
    padding: 3rem; 
    /* Ez adja a jobb oldal hátterét (pl. fehér) */
    background-color: var(--szin-almenu);
    border: 1px solid var(--szin-border-fo);
    border-radius: 12px;
    box-shadow: var(--szin-arnyek-kartya);
    border-left: none;
    border-bottom-left-radius: 0%;
    border-top-left-radius: 0%;
}

/* Mobil nézet */
@media (max-width: 800px) {
    .contact-split { 
        grid-template-columns: 1fr; 
    }
    .contact-split .contact-info { 
        padding: 2rem; 
        /* Mobilon az elválasztó alulra kerül */
        border-right: none; 
        border-bottom: 1px solid var(--szin-border-fo); 
    }
    .contact-split .contact-form-wrapper { 
        padding: 2rem; 
    }
}

/* =========================================
   2. Középre zárt (Centered) - KÁRTYA STÍLUS
   ========================================= */
.contact-centered {
    max-width: 700px;
    margin: 0 auto; /* Középre igazítja a kártyát */
    text-align: center;
    
    /* --- KÁRTYA STÍLUS HOZZÁADÁSA --- */
    background-color: var(--szin-almenu); /* Fehér háttér (témától függően) */
    padding: 3rem; /* Belső térköz, hogy ne érjen a széléhez a szöveg */
    border-radius: 12px; /* Lekerekített sarkok */
    border: 1px solid var(--szin-border-fo); /* Vékony keret */
    box-shadow: var(--szin-arnyek-kartya); /* Árnyék a kiemeléshez */
}

.contact-centered .intro-text {
    margin-bottom: 2rem;
    color: var(--szin-szoveg-masodlagos);
    font-size: 1.1rem;
}

.contact-centered .form-row {
    display: flex;
    gap: 1.5rem;
}

.contact-centered .form-group { 
    flex: 1; 
    text-align: left; 
}

.contact-centered button {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.contact-centered .contact-footer-info {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--szin-border-fo);
    display: flex;
    justify-content: center;
    gap: 2rem;
    color: var(--szin-szoveg-masodlagos);
    font-weight: 500;
}

/* =========================================
   MOBIL OPTIMALIZÁLÁS (KAPCSOLAT ŰRLAP)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. KEVESEBB BELSŐ HÉZAG A KÁRTYÁN */
    /* Mobilon a 3rem (48px) túl sok helyet pazarol, csökkentjük felére */
    .contact-centered {
        padding: 1.5rem; 
        width: 100%; /* Kitölti a rendelkezésre álló helyet */
        box-sizing: border-box; /* Hogy a padding ne nyomja szét az oldalt */
    }

    /* 2. MEZŐK EGYMÁS ALÁ RENDEZÉSE */
    /* A flex irányát sorról (row) oszlopra (column) váltjuk */
    .contact-centered .form-row {
        flex-direction: column; 
        gap: 1rem; /* Kicsit kisebb szünet a mezők között */
    }

    /* 3. LÁBLÉC INFO EGYMÁS ALÁ */
    /* Az email és a telefon is kerüljön egymás alá, ne zsúfolódjon */
    .contact-centered .contact-footer-info {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* 4. GOMB TAPINTÁSI MÉRET */
    /* Mobilon könnyebb megnyomni, ha kicsit magasabb a gomb */
    .contact-centered button {
        padding: 15px;
    }
}

/* --- 3. Map Overlay --- */
.contact-map-overlay {
    position: relative;
    min-height: 550px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Kártya jobbra */
    padding: 2rem 5%;
    box-sizing: border-box;
    background-color: var(--szin-hatter); /* Fallback háttér */
}
.contact-map-overlay .map-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--szin-border-fo);
    background-image: radial-gradient(#bbb 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 0;
    box-shadow: var(--szin-arnyek-kartya);
}
.contact-map-overlay .overlay-card {
    position: relative;
    z-index: 2;
    background: var(--szin-almenu);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--szin-border-fo);
}
.contact-map-overlay .overlay-info {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--szin-border-fo);
    font-size: 0.9rem;
    color: var(--szin-szoveg-masodlagos);
}
@media (max-width: 768px) {
    .contact-map-overlay { justify-content: center; padding: 1rem; min-height: auto; background: var(--szin-kiemeles-menusav); }
    .contact-map-overlay .map-background { display: none; }
}

/* =========================================
   4. Bento Grid (Mozaik) - VÉGLEGES JAVÍTÁS
   ========================================= */
.contact-bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Bal oldal kicsit szélesebb */
    gap: 2rem; /* Térköz a bal és jobb oldal között */
    width: 100%;
    align-items: stretch; /* Egyforma magasra húzza a két oldalt */
}

/* A bal oldali rács */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Sorok: Info | Térkép (nyúlik) | Social */
    grid-template-rows: auto 1fr auto; 
    
    /* ITT A KULCS: Ez adja a vízszintes és függőleges réseket */
    gap: 1.5rem; 
    
    height: 100%;
}

/* Kis dobozok (Info) */
.bento-box {
    background: var(--szin-almenu);
    border: 1px solid var(--szin-border-fo);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: var(--szin-arnyek-kartya);
    transition: transform 0.2s;
    min-height: 120px;
}
.bento-box:hover { transform: translateY(-3px); border-color: var(--szin-szoveg-kiemeles-hover); }

/* Ikonok */
.bento-box .icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.bento-box h4 { margin: 0; font-size: 0.9rem; color: var(--szin-szoveg-masodlagos); text-transform: uppercase; letter-spacing: 1px; }
.bento-box p { margin: 0.2rem 0 0 0; font-size: 1.1rem; font-weight: bold; color: var(--szin-szoveg-elsodleges); }

/* Térkép doboz - JAVÍTOTT */
.bento-grid .map-box {
    grid-column: 1 / 3; /* Teljes szélesség */
    grid-row: 2;        /* Középső sor */
    
    /* FONTOS: Nem adunk meg fix height: 100%-ot, 
       hagyjuk, hogy a Grid (1fr) húzza szét! */
    align-self: stretch; 
    min-height: 200px; /* De legyen egy minimum mérete */
    
    background-color: var(--szin-border-menu);
    background-image: radial-gradient(#bbb 1px, transparent 1px);
    background-size: 15px 15px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--szin-szoveg-masodlagos); font-weight: bold;
    border: 1px solid var(--szin-border-fo);
}

.bento-grid .map-box:hover {
    border-color: var(--szin-szoveg-kiemeles-hover);
}

/* Social doboz - JAVÍTOTT */
.bento-grid .social-box {
    grid-column: 1 / 3; /* Teljes szélesség */
    grid-row: 3;        /* Alsó sor */
    
    flex-direction: row; 
    justify-content: space-around;
    background-color: var(--szin-kiemeles-menusav);
    color: var(--szin-szoveg-kiemeles); font-weight: bold;
    min-height: 80px;
    
    /* BIZTONSÁGI TARTALÉK: Ha a gap valamiért nem látszana, 
       ez a margin biztosan eltolja a térképtől */
    margin-top: 2px; 
}

/* Jobb oldali űrlap */
.bento-form {
    background: var(--szin-almenu);
    border: 1px solid var(--szin-border-fo);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: var(--szin-arnyek-kartya);
    display: flex; flex-direction: column; justify-content: center;
    height: 100%; 
    box-sizing: border-box;
}
.bento-form h3 { margin-top: 0; margin-bottom: 1.5rem; text-align: center; }

/* Mobil nézet */
@media (max-width: 900px) {
    .contact-bento { grid-template-columns: 1fr; }
    .bento-form { order: 1; margin-bottom: 2rem; }
    .bento-grid { order: 2; grid-template-rows: auto 250px auto; } /* Mobilon fix magasság a térképnek */
}

/* =========================================
   HÍRLEVÉL (NEWSLETTER) SZEKCIÓK
   ========================================= */

.newsletter-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* --- KÖZÖS ŰRLAP ELEMEK --- */
.newsletter-form {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.newsletter-input {
    padding: 0.8rem 1rem;
    border: 1px solid var(--szin-border-fo);
    border-radius: 6px;
    font-size: 1rem;
    flex-grow: 1; /* Kitölti a helyet */
    
    /* Sötét mód támogatás: */
    background-color: var(--szin-hatter); 
    color: var(--szin-szoveg-elsodleges);
    transition: border-color 0.3s;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--szin-szoveg-kiemeles);
}

.nl-note {
    display: block;
    margin-top: 1rem;
    color: var(--szin-szoveg-masodlagos);
    font-size: 0.8rem;
    opacity: 0.8;
}

/* --- 1. MINIMALISTA SÁV (SIMPLE) --- */
.newsletter-simple-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.newsletter-simple-wrapper h3 {
    color: var(--szin-szoveg-elsodleges);
    margin-bottom: 0.5rem;
}

.newsletter-simple-wrapper p {
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 1.5rem;
}

.newsletter-form.inline {
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

/* --- 2. KIEMELT DOBOZ (CARD) --- */
.newsletter-card-wrapper {
    background: var(--szin-menusav); /* Kicsit elüt a háttértől */
    border: 1px solid var(--szin-border-fo);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.nl-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.newsletter-card-wrapper h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--szin-szoveg-elsodleges);
}

.newsletter-card-wrapper p {
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 2rem;
}

/* =========================================
   MOBIL OPTIMALIZÁLÁS (HÍRLEVÉL KÁRTYA)
   ========================================= */

@media (max-width: 768px) {

    /* 1. KÁRTYA BELSŐ KERET CSÖKKENTÉSE */
    /* 3rem (48px) helyett csak 1.5rem (24px) legyen, 
       hogy kiférjen a szöveg a kis képernyőn */
    .newsletter-card-wrapper {
        padding: 1.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. ŰRLAP MEZŐK EGYMÁS ALÁ */
    /* A flex irányát megfordítjuk: oszlop elrendezés */
    .newsletter-form {
        flex-direction: column;
        gap: 1rem; /* Kicsit nagyobb szünet a gomb és input között */
        width: 100%;
    }

    /* 3. INPUT MEZŐ */
    /* Biztosítjuk, hogy kitöltse a rendelkezésre álló helyet */
    .newsletter-input {
        width: 100%;
        box-sizing: border-box; /* Hogy a padding ne nyomja szét */
    }

    /* 4. GOMB TELJES SZÉLESSÉGBEN */
    /* Mobilon jobban néz ki és könnyebb megnyomni, ha faltól-falig ér */
    .newsletter-form .button-style {
        width: 100%;
        margin-left: 0; /* Ha esetleg volt margin, azt levesszük */
    }

    /* 5. SZÖVEGMÉRETEK FINOMHANGOLÁSA (Opcionális) */
    /* Ha a cím túl nagy lenne mobilon */
    .newsletter-card-wrapper h3 {
        font-size: 1.5rem;
    }
}

/* --- 3. OSZTOTT (SPLIT) --- */
.newsletter-split-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background: var(--szin-hatter);
    border: 1px dashed var(--szin-border-dashed); /* Stílusos keret */
    padding: 3rem;
    border-radius: 12px;
}

.nl-text-side h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--szin-szoveg-elsodleges);
}

.nl-text-side p {
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.nl-benefits {
    list-style: none;
    padding: 0;
}
.nl-benefits li {
    margin-bottom: 0.5rem;
    color: var(--szin-szoveg-elsodleges);
    font-weight: 500;
}

.newsletter-form.vertical {
    flex-direction: column;
    gap: 0.8rem;
}

.newsletter-form.vertical label {
    font-size: 0.9rem;
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: -0.5rem; /* Kicsit közelebb az inputhoz */
    text-align: left;
}

.full-width {
    width: 100%;
}

/* --- MOBIL NÉZET --- */
@media (max-width: 768px) {
    .newsletter-form.inline {
        flex-direction: column; /* Mobilon egymás alá kerül a gomb és az input */
    }
    
    .newsletter-split-wrapper {
        grid-template-columns: 1fr;
        padding: 1.5rem;
        gap: 2rem;
    }
}

/* =========================================
   GYIK (FAQ) SZEKCIÓK - SÖTÉT MÓD BARÁT
   ========================================= */

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.faq-container h2 {
    color: var(--szin-szoveg-elsodleges);
    text-align: center;
    margin-bottom: 1rem;
}

.faq-intro {
    text-align: center;
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 1. HARMONIKA (ACCORDION) --- */
.accordion-wrapper {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid var(--szin-szoveg-kiemeles);
}

.faq-item {
    border-bottom: 1px solid var(--szin-border-fo);
    transition: border-bottom 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.faq-item[open] {
    border-bottom: 2px solid var(--szin-szoveg-kiemeles-hover);
    background-color: var(--szin-almenu);
    box-shadow: var(--szin-arnyek-kartya);
}

.faq-item summary {
    padding: 1.5rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none; /* Alap nyíl eltüntetése */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--szin-szoveg-elsodleges);
    transition: color 0.3s;
}

.faq-item[open] summary {
    color: var(--szin-szoveg-kiemeles);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: var(--szin-szoveg-kiemeles-hover);
}

.faq-answer {
    padding: 0.5rem 1.5rem;
    color: var(--szin-szoveg-masodlagos);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* --- A TÖKÉLETES FORGÓ IKON --- */

/* 1. A KONTÉNER (A doboz) */
.faq-item summary .icon {
    position: relative; /* Hogy a vonalakat ehhez igazítsuk */
    display: inline-block;
    width: 24px;       /* Fix méret */
    height: 24px;      /* Fix méret */
    flex-shrink: 0;    /* Ne nyomódjon össze */
    
    /* Forgás beállítása */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

/* 2. A VONALAK MEGRAJZOLÁSA (Pszeudo-elemekkel) */
/* Közös tulajdonságok a két vonalnak */
.faq-item summary .icon::before,
.faq-item summary .icon::after {
    content: "";
    position: absolute;
    background-color: var(--szin-szoveg-halvany); /* A te színed */
    border-radius: 2px;
    
    /* Pontosan középre tesszük őket */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Vízszintes vonal */
.faq-item summary .icon::before {
    width: 18px;
    height: 2px;
}

/* Függőleges vonal */
.faq-item summary .icon::after {
    width: 2px;
    height: 18px;
}

/* 3. FORGATÁS NYITÁSKOR */
.faq-item[open] summary .icon {
    /* 1 teljes kör (360) + 135 fok (hogy X legyen) = 495 fok */
    /* Vagy simán 45deg, ha nem akarsz pörgést */
    transform: rotate(315deg); 
}

/* Opcionális: Ha X-et akarsz úgy, hogy a szín is változzon */
.faq-item[open] summary .icon::before,
.faq-item[open] summary .icon::after {
    background-color: var(--szin-szoveg-kiemeles-hover); /* Vagy más szín nyitva */
}

/* --- 2. KÁRTYÁS RÁCS (GRID) --- */
.faq-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.faq-card {
    background: var(--szin-menusav); /* Sötét módban sötét lesz */
    border: 1px solid var(--szin-border-fo);
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s, border-color 0.3s;
}

.faq-card:hover {
    transform: translateY(-5px);
    border-color: var(--szin-szoveg-kiemeles-hover);
}

.faq-card h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--szin-szoveg-elsodleges);
}

.faq-card p {
    color: var(--szin-szoveg-masodlagos);
    line-height: 1.5;
    font-size: 0.95rem;
}

/* --- 3. OLDALSÁVOS (SPLIT) --- */
.faq-split-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

.faq-split-header h2 {
    text-align: left;
    margin-bottom: 1rem;
}

.faq-split-header p {
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.faq-split-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.faq-split-item {
    padding-left: 1.5rem;
    border-left: 3px solid var(--szin-border-fo); /* Színes csík bal oldalt */
    transition: border-color 0.3s;
}

.faq-split-item:hover {
    border-left-color: var(--szin-szoveg-kiemeles-hover);
}

.faq-split-item h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: var(--szin-szoveg-elsodleges);
}

.faq-split-item p {
    margin: 0;
    color: var(--szin-szoveg-masodlagos);
    font-size: 0.95rem;
}

/* --- MOBIL NÉZET --- */
@media (max-width: 900px) {
    .faq-split-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .faq-split-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    .faq-split-header h2 {
        text-align: center;
    }
}
/* --- Galéria --- */
.gallery-racs .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.gallery-racs .placeholder-img { aspect-ratio: 16 / 9; }
.gallery-racs .placeholder-img::before { content: 'Kép (16:9)'; }
.gallery-elcsuszo .gallery-grid { column-count: 3; column-gap: 1rem; }
.gallery-elcsuszo .placeholder-img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    
    /* --- A LEVÁGÁS MEGAKADÁLYOZÁSA --- */
    break-inside: avoid;              /* Modern szabvány: Ne törjön meg belül */
    page-break-inside: avoid;         /* Régebbi szabvány */
    -webkit-column-break-inside: avoid; /* Chrome/Safari támogatás */
    
    /* Fontos trükk: inline-blockként viselkedjen az oszlopban */
    display: inline-flex; 
}
.gallery-elcsuszo .placeholder-img:nth-child(3n+1) { aspect-ratio: 1/1; }
.gallery-elcsuszo .placeholder-img:nth-child(3n+2) { aspect-ratio: 4/5; }
.gallery-elcsuszo .placeholder-img:nth-child(3n+3) { aspect-ratio: 16/9; }
.gallery-elcsuszo .placeholder-img:nth-child(3n+1)::before { content: 'Kép (1:1)'; }
.gallery-elcsuszo .placeholder-img:nth-child(3n+2)::before { content: 'Kép (4:5)'; }
.gallery-elcsuszo .placeholder-img:nth-child(3n+3)::before { content: 'Kép (16:9)'; }
/* =================================
   CAROUSEL GALÉRIA (SLIDER)
   ================================= */
.carousel-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden; /* Ez rejti el a nem látható diákat */
    border-radius: var(--border-radius-alap);
    box-shadow: var(--szin-arnyek-kiemelt);
    aspect-ratio: 16 / 9; /* Fix képarány a slidernek */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Sima csúszás animáció */
    height: 100%;
}

.carousel-slide {
    min-width: 100%; /* Minden slide töltse ki a teljes szélességet */
    position: relative;
    height: 100%;
}

.carousel-slide .placeholder-img {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    font-size: 2rem;
    font-weight: bold;
    color: var(--szin-szoveg-halvany);
    background-color: var(--szin-szoveg-masodlagos);
}

/* Felirat a képen */
.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--szin-szoveg-gomb);
    text-align: left;
    box-sizing: border-box;
}
.carousel-caption h3 { margin: 0 0 0.5rem 0; color: var(--szin-szoveg-gomb); text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.carousel-caption p { margin: 0; font-size: 0.9rem; opacity: 0.9; }

/* Vezérlő gombok */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--szin-szoveg-gomb);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.carousel-btn:hover { background: rgba(0, 0, 0, 0.8); }
.prev-btn { left: 15px; }
.next-btn { right: 15px; }

/* Indikátor pöttyök */
.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0);
}

/* --- Hero --- */
.demo-section[id="hero"] .hero-content h1 { margin-top: 0; font-size: 2.5rem; }
.demo-section[id="hero"] .hero-content p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.demo-section[id="hero"] .hero-image { width: 100%; }
/* 1. Opció: Középre zárt (hero-centered) */
/* Megerősített szelektor (#hero.hero-centered), hogy felülírja az alapbeállításokat */
#hero.hero-centered {
    flex-direction: column; 
    text-align: center;
    align-items: center; /* Ez biztosítja a vízszintes középre igazítást */
}

#hero.hero-centered .hero-image {
    width: 80%; 
    max-width: 800px;
    height: 350px;
    /* A margin: auto itt már csak biztonsági háló, az align-items végzi a munkát */
    margin: 1.5rem auto 0 auto; 
    order: 2; 
}

#hero.hero-centered .hero-content {
    order: 1; 
}
/* 2. Opció: Kétoszlopos (hero-split) - CSS GRID MEGOLDÁS */
#hero.hero-split {
    /* A Flex helyett Grid-et használunk, ami kényszeríti a rácsot */
    display: grid !important;
    /* Két oszlop létrehozása: 
       1. oszlop (szöveg): 50%
       2. oszlop (kép): 45%
       (A maradék 5% a gap) */
    grid-template-columns: 50% 45% !important;
    gap: 5%; /* Térköz az oszlopok között */
    align-items: center; /* Függőleges középre igazítás */
    text-align: left;
    
    /* Biztonsági resetek */
    flex-direction: unset !important; 
    background: transparent !important;
}

#hero.hero-split .hero-content {
    grid-column: 1; /* Első oszlop */
    order: 0; /* Reset */
    width: 100% !important; /* Töltse ki a cellát */
    max-width: none !important;
}

#hero.hero-split .hero-image {
    grid-column: 2; /* Második oszlop */
    order: 0; /* Reset */
    width: 100% !important; /* Töltse ki a cellát */
    margin-top: 0 !important;
    height: 300px !important;
}

/* Opcionális: Kép balra verzió */
#hero.hero-split.image-left .hero-content { grid-column: 2; }
#hero.hero-split.image-left .hero-image { grid-column: 1; }
/* --- 4. Opció: Középre zárt (Szöveg + 3 Kép) (hero-centered-multi-img) --- */
.hero-centered-multi-img {
    flex-direction: column; /* A szöveg és a képek sávja egymás alatt */
    text-align: center;
    max-width: 750px; /* Szélesebb konténer, hogy elférjen a 3 kép */
    margin: 0 auto; 
}

.hero-centered-multi-img .hero-content {
    order: 1; /* Szöveg felül */
    margin-bottom: 3rem; /* Nagyobb térköz a képek előtt */
   /* max-width: 100%;*/
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.hero-centered-multi-img .hero-content h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}
.hero-centered-multi-img .hero-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* A képek konténere */
.hero-centered-multi-img .hero-multi-images {
    order: 2; /* Képek alul */
    display: grid;
    /* EZ A LÉNYEG: 3 egyenlő oszlop (1fr 1fr 1fr) */
    grid-template-columns: repeat(3, 1fr); 
    gap: 1.5rem; /* Térköz a képek között */
    width: 100%;
}

/* A képek stílusa */
.hero-centered-multi-img .hero-multi-images .placeholder-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Egységes képarány (pl. 4:3 vagy 16:9) */
    border-radius: var(--border-radius-alap);
}

/* Kép feliratok (opcionális) */
.hero-centered-multi-img .hero-multi-images .placeholder-img:nth-child(1)::before { content: 'Kép 1'; }
.hero-centered-multi-img .hero-multi-images .placeholder-img:nth-child(2)::before { content: 'Kép 2'; }
.hero-centered-multi-img .hero-multi-images .placeholder-img:nth-child(3)::before { content: 'Kép 3'; }

/* Elrejtjük a régi hero-image-et, ha ez az elrendezés aktív */
.hero-centered-multi-img .hero-image {
    display: none;
}
.hero-bg-overlay { position: relative; padding: 6rem 2rem; min-height: 40vh; display: flex; align-items: center; justify-content: center; text-align: center; background-image: url('https://via.placeholder.com/1200x600/cccccc/888888?text=Placeholder+Background'); background-size: cover; background-position: center; color: var(--szin-szoveg-gomb); border-bottom: none; }
.hero-bg-overlay .hero-image { display: none; }
/* JAVÍTVA: Helyes CSS szintaxis (& helyett) */
.hero-bg-overlay::before { content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }
.hero-bg-overlay .hero-content { position: relative; z-index: 2; max-width: 700px; flex-basis: auto; order: 0; }
.hero-bg-overlay h1 { color: var(--szin-szoveg-gomb); }
.hero-bg-overlay p { color: rgba(255, 255, 255, 0.9); }
.hero-bg-overlay button { background-color: var(--szin-szoveg-kiemeles); color: var(--szin-szoveg-gomb); }
.hero-bg-overlay button:hover { background-color: var(--szin-szoveg-kiemeles-hover); }

/* ==================================================
   ÚJ OPCIÓ: Osztott, rózsaszín, gomb a kép alatt
   (A te eredeti kódod alapján másolva)
   ================================================== */

/* 1. A KONTÉNER (Ugyanaz, mint a sima split, csak új névvel) */
#hero.hero-split-bottom {
    color: var(--szin-szoveg-gomb);
    display: grid !important;
    grid-template-columns: 50% 45% !important; /* Ugyanaz a felosztás */
    gap: 5%;
    align-items: center;
    text-align: left;
    margin-right: 5rem;
    margin-left: 5rem;
    /* A te eredeti háttered */
    background: linear-gradient(135deg, #e6880e, #ffe600);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: var(--szin-arnyek-kiemelt);
    
    /* Biztonsági resetek */
    flex-direction: unset !important;
}
/* --- ÚJ: FEHÉR SZÖVEG BEÁLLÍTÁSA --- */
#hero.hero-split-bottom h1,
#hero.hero-split-bottom h1 span,
#hero.hero-split-bottom p {
    color: var(--szin-szoveg-gomb) !important;
}

/* 2. BAL OLDAL (Szöveg) */
#hero.hero-split-bottom .hero-content {
    grid-column: 1;
    width: 100% !important;
}

/* 3. JOBB OLDAL (Az új tároló, ami a képet és a gombot tartja) */
#hero.hero-split-bottom .hero-media-wrapper {
    grid-column: 2; /* Ez kerül a jobb oldalra */
    display: flex;
    flex-direction: column; /* Egymás alá rendezés */
    width: 100%;
    align-items: center;
}

/* 4. A KÉP STÍLUSA (Ugyanaz, mint nálad) */
#hero.hero-split-bottom .hero-image {
    width: 100% !important;
    height: 230px !important; /* A te fix magasságod */
    margin-bottom: 0;
}


/* Mobil nézet javítása ehhez a verzióhoz */
@media (max-width: 768px) {
    #hero.hero-split-bottom {
        grid-template-columns: 1fr !important; /* Egymás alá */
        text-align: center;
        gap: 2rem;
    }
    #hero.hero-split-bottom .hero-content { grid-column: 1; }
    #hero.hero-split-bottom .hero-media-wrapper { grid-column: 1; }
}

/* =========================================
   BEMUTATKOZÁS (INTRO) SZEKCIÓ
   ========================================= */

.intro-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 2rem 0;
}

/* --- 1. KIEMELT KÁRTYA NÉZET --- */
.intro-card-wrapper {
    background: var(--szin-menusav);
    border: 2px solid var(--szin-border-fo);
    border-radius: 16px;
    padding: 3rem 4rem;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.intro-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: wave 2s infinite;
    transform-origin: 70% 70%;
}

@keyframes wave {
    0% { transform: rotate( 0.0deg) }
    10% { transform: rotate(14.0deg) }
    20% { transform: rotate(-8.0deg) }
    30% { transform: rotate(14.0deg) }
    40% { transform: rotate(-4.0deg) }
    50% { transform: rotate(10.0deg) }
    60% { transform: rotate( 0.0deg) }
    100% { transform: rotate( 0.0deg) }
}

.intro-card-wrapper h2 {
    color: var(--szin-szoveg-elsodleges);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.intro-divider {
    width: 60px;
    height: 4px;
    background: var(--szin-szoveg-kiemeles);
    margin: 0 auto 2rem auto;
    border-radius: 2px;
}

.intro-card-wrapper p {
    color: var(--szin-szoveg-masodlagos);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.intro-card-wrapper strong {
    color: var(--szin-szoveg-elsodleges);
    font-weight: 600;
}

.intro-highlight {
    font-weight: 500;
    color: var(--szin-szoveg-kiemeles) !important;
    font-style: italic;
}

/* --- 2. EGYSZERŰ SZÖVEGES NÉZET --- */
.intro-simple-wrapper {
    text-align: left;
    border-left: 4px solid var(--szin-border-dashed);
    padding-left: 2rem;
}

.intro-simple-wrapper h2 {
    color: var(--szin-szoveg-elsodleges);
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
}

.intro-simple-wrapper p {
    color: var(--szin-szoveg-masodlagos);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

/* --- MOBIL NÉZET --- */
@media (max-width: 768px) {
    .intro-card-wrapper {
        padding: 2rem 1.5rem;
    }
    .intro-card-wrapper h2 {
        font-size: 1.5rem;
    }
    .intro-simple-wrapper {
        padding-left: 1rem;
        border-left-width: 3px;
    }
}
/* --- Ünnepi Nyitvatartás --- */
 .holiday-hours-container { max-width: 500px; margin: 0 auto; background: var(--szin-almenu); padding: var(--padding-kartya); border-radius: var(--border-radius-alap); box-shadow: var(--szin-arnyek-kartya); }
 .holiday-day { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: var(--border-vastagsag) dashed var(--szin-border-almenu); }
 .holiday-day:last-child { border-bottom: none; }
 .holiday-day span:first-child { font-weight: var(--suly-kiemelt); color: var(--szin-szoveg-elsodleges); }

/* --- Nyitvatartás --- */
.hours-container { max-width: 500px; margin: 0 auto; background: var(--szin-almenu); padding: var(--padding-kartya); border-radius: var(--border-radius-alap); box-shadow: var(--szin-arnyek-kartya); }
.opening-hours-lista .day-time { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: var(--border-vastagsag) dashed var(--szin-border-almenu); }
.opening-hours-lista .day-time:last-child { border-bottom: none; }
.opening-hours-lista .day-time span:first-child { font-weight: var(--suly-kiemelt); color: var(--szin-szoveg-elsodleges); }


/* --- Termékek (Kártya) --- */
.products-kartyak .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.products-kartyak .card .placeholder-img { height: 150px; border-radius: 0; border: none; border-bottom: var(--border-vastagsag) solid var(--szin-border-fo); }

/* --- Termékek (Lista) --- */
.products-lista .product-list { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; margin: 2rem auto 0 auto; }
.products-lista .list-item .placeholder-img { width: 80px; height: 80px; flex-shrink: 0; margin-right: 1.5rem; border: none; }

/* --- Termékek (Kiemelt Kártya) --- */
.products-kiemelt .featured-product-container { max-width: 900px; margin: 0 auto; }
.products-kiemelt .featured-item { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; background: var(--szin-almenu); padding: var(--padding-kartya); border-radius: var(--border-radius-alap); box-shadow: var(--szin-arnyek-kiemelt); margin-bottom: 3rem; }
.products-kiemelt .featured-img { height: auto; aspect-ratio: 16 / 10; border: none; }
.products-kiemelt .featured-content h3 { font-size: 1.8rem; }
.products-kiemelt .featured-content p { line-height: 1.6; margin-bottom: 1.5rem; }
.products-kiemelt h4 { text-align: center; margin-bottom: 1.5rem; }
.products-kiemelt .other-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.products-kiemelt .other-products .placeholder-img { height: 120px; border-radius: 0; border: none; border-bottom: var(--border-vastagsag) solid var(--szin-border-fo); }
.products-kiemelt .other-products h3 { font-size: 1.1rem; }
.products-kiemelt .other-products p { font-size: 0.9rem; }

/* --- Termékek (Kiemelt Lista) --- */
.products-kiemelt-lista .featured-list-container { max-width: 800px; margin: 0 auto; }
.products-kiemelt-lista .featured-list-item { display: flex; align-items: center; gap: 2rem; background: var(--szin-almenu); padding: var(--padding-kartya); border-radius: var(--border-radius-alap); box-shadow: var(--szin-arnyek-kiemelt); margin-bottom: 3rem; }
.products-kiemelt-lista .featured-list-img { width: 150px; height: 150px; flex-shrink: 0; border: none; }
.products-kiemelt-lista .featured-list-content h3 { font-size: 1.6rem; }
.products-kiemelt-lista .featured-list-content p { line-height: 1.6; margin-bottom: 1.5rem; }
.products-kiemelt-lista h4 { text-align: center; margin-bottom: 1.5rem; }
.products-kiemelt-lista .other-products-list { display: flex; flex-direction: column; gap: 1rem; }
.products-kiemelt-lista .other-products-list .placeholder-img { width: 60px; height: 60px; flex-shrink: 0; margin-right: 1rem; border: none; }
.products-kiemelt-lista .other-products-list h3 { font-size: 1.1rem; }
.products-kiemelt-lista .other-products-list p { font-size: 0.9rem; }

/* Termék Elrendezés Elrejtő Segédosztályok */
.products-kartyak .featured-product-container, .products-kartyak .featured-list-container,
.products-lista .featured-product-container, .products-lista .featured-list-container,
.products-kiemelt .featured-list-container, .products-kiemelt .product-list,
.products-kiemelt-lista .featured-product-container, .products-kiemelt-lista .product-grid { display: none; }
.products-kiemelt .product-grid:not(.other-products),
.products-kiemelt-lista .product-list:not(.other-products-list) { display: none; }

/* --- Termékek alatti gomb elrendezése --- */
.products-action {
    text-align: center;   /* Középre igazítja a gombot */
    margin-top: 3rem;     /* Térköz a termékek és a gomb között */
    width: 100%;          /* Teljes szélesség */
}

/* --- Értékelések --- */
.reviews-kartyak .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.reviews-kartyak .review-card { background: var(--szin-almenu); border: var(--border-vastagsag) solid var(--szin-border-fo); border-radius: var(--border-radius-alap); padding: var(--padding-kartya); box-shadow: var(--szin-arnyek-kartya); transition: transform 0.3s, border-color 0.3s;
}
.reviews-kartyak .review-card:hover{ box-shadow: var(--szin-arnyek-kiemelt); border-color: var(--szin-szoveg-kiemeles-hover); transform: translateY(-5px);
    border-color: var(--szin-szoveg-kiemeles-hover) }
.reviews-kartyak .review-card p:first-child { font-style: italic; margin-top: 0; }
.reviews-kartyak .review-card p:last-child { font-weight: bold; color: var(--szin-szoveg-elsodleges); text-align: right; margin-bottom: 0; }
.reviews-lista .reviews-grid { display: flex; flex-direction: column; gap: 2rem; max-width: 700px; margin: 0 auto; }
.reviews-lista .review-card { padding-left: 1.5rem; border-left: 3px solid var(--szin-border-fo); 
    transition: border-color 0.3s; }
.reviews-lista .review-card:hover { border-left: 3px solid var(--szin-szoveg-kiemeles-hover); }
.reviews-lista .review-card p { margin: 0; }
.reviews-lista .review-card p:first-child { font-size: 1.2rem; font-style: italic; color: var(--szin-szoveg-masodlagos); }
.reviews-lista .review-card p:last-child { font-weight: bold; margin-top: 0.5rem; }

/* Eltünteti a felső margót az első szekció címéből */
#demo-preview-area > section:first-child h2,
#demo-preview-area > section:first-child .hero-content h1 {
    margin-top: 0;
}
/* =========================================
   IDŐPONTFOGLALÁS (EXTERNAL EMBED) SZEKCIÓ
   ========================================= */

.booking-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.booking-container h2 {
    color: var(--szin-szoveg-elsodleges);
    margin-bottom: 1rem;
}

.section-intro {
    text-align: center;
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- A KAMU NAPTÁR STÍLUSA (DEMÓHOZ) --- */
/* Ez a doboz szimulálja, hogyan néz majd ki az iframe */
.calendar-embed-placeholder {
    width: 100%;
    height: 600px; /* Egy átlagos foglaló magassága */
    background: var(--szin-hatter);
    border: 1px solid var(--szin-border-fo);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Kamu böngésző fejléc a naptár tetejére */
.cal-header {
    background: var(--szin-menusav);
    padding: 10px 15px;
    border-bottom: 1px solid var(--szin-border-dashed);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-circle { width: 10px; height: 10px; border-radius: 50%; }
.cal-circle.red { background: #ff5f56; }
.cal-circle.yellow { background: #ffbd2e; }
.cal-circle.green { background: #27c93f; }

.cal-url {
    margin-left: 10px;
    background: var(--szin-hatter);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--szin-szoveg-masodlagos);
    opacity: 0.7;
    flex-grow: 1;
}

.cal-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--szin-hatter);
    color: var(--szin-szoveg-masodlagos);
    padding: 2rem;
    text-align: center;
}

/* Kis animáció a demó kedvéért */
.cal-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--szin-border-dashed);
    border-top: 4px solid var(--szin-szoveg-kiemeles);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* --- 1. TELJES NÉZET (EMBED) --- */
.booking-embed-layout h2 { text-align: center; }
.embed-wrapper.full-width {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- 2. OSZTOTT NÉZET (SPLIT) --- */
.booking-split-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* A naptárnak több hely kell */
    gap: 4rem;
    align-items: center;
}

.booking-text-side h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

.booking-text-side p {
    color: var(--szin-szoveg-masodlagos);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.booking-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.booking-benefits li {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    color: var(--szin-szoveg-elsodleges);
}

.contact-hint {
    background: var(--szin-menusav);
    padding: 1rem;
    border-left: 4px solid var(--szin-szoveg-kiemeles);
    border-radius: 4px;
    color: var(--szin-szoveg-masodlagos);
    transition: border-color 0.3s;
}

.contact-hint:hover {
    border-color: var(--szin-szoveg-kiemeles-hover);
}

/* --- 3. KÁRTYÁS NÉZET (CARD) --- */
.booking-card-layout {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.booking-cta-card {
    background: var(--szin-menusav);
    border: 1px solid var(--szin-border-fo);
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    max-width: 600px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.booking-cta-card:hover {
    transform: translateY(-5px);
}

.cta-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.booking-cta-card h2 {
    font-size: 2rem;
}

.booking-cta-card p {
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.cta-note {
    font-size: 0.85rem;
    margin-top: 1rem;
    opacity: 0.6;
}

/* --- MOBIL NÉZET --- */
@media (max-width: 900px) {
    .booking-split-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .booking-text-side {
        text-align: center;
    }
    .calendar-embed-placeholder {
        height: 500px; /* Mobilon kicsit alacsonyabb */
    }
}
/* --- 12. Videó Szekció Stílusok --- */

/* A videó placeholder kinézete (YouTube stílus) */
.placeholder-video {
    width: 100%;
    aspect-ratio: 16 / 9; /* Fix videó arány */
    background-color: black; /* Fekete alap */
    border-radius: var(--border-radius-alap);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* "Lejátszás" gomb a közepére */
.placeholder-video::before {
    content: '▶'; 
    color: #fff;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px; /* Kis optikai igazítás */
    opacity: 0.8;
}
/* Felirat a placeholderre */
.placeholder-video::after {
    content: 'YouTube Videó';
    position: absolute;
    bottom: 10px;
    color: var(--szin-szoveg-halvany);
    font-size: 0.8rem;
}


/* --- Profil alapú elrendezések --- */
.video-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

/* Profilkép stílusa */
.video-profile-header .profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Kör alak */
    background: var(--szin-kiemeles-menusav);
    border: 2px solid var(--szin-border-fo);
    transition: transform 0.2s;
    margin-bottom: 0.5rem;
}
.video-profile-header a:hover .profile-img {
    transform: scale(1.05);
    border-color: var(--szin-szoveg-kiemeles-hover);
}

.video-profile-header h3 {
    margin: 0.5rem 0 0 0;
    font-size: 1.2rem;
}

.channel-link {
    font-size: 0.9rem;
    color: var(--szin-szoveg-masodlagos);
    text-decoration: none;
}
.channel-link:hover {
    color: var(--szin-szoveg-kiemeles-hover);
    text-decoration: underline;
}

/* Rács elrendezések */
.video-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* 1 Videó: Középre, korlátozott szélességgel */
.video-grid.grid-1 {
    grid-template-columns: 1fr;
    max-width: 700px;
}

/* 2 Videó: Egymás mellett */
.video-grid.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 3 Videó: 3 oszlop */
.video-grid.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}


/* --- Kiemelt Videó Elrendezés --- */
.video-featured-layout {
    max-width: 800px;
    margin: 0 auto;
}

.video-main {
    margin-bottom: 2rem;
}
.video-main h3 {
    margin-top: 0.5rem;
    font-size: 1.3rem;
}

.video-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.video-sub-grid p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--szin-szoveg-masodlagos);
    font-weight: bold;
}
/* --- 13. Árajánlat (Quote) Szekció Stílusok --- */
.demo-section[id="quote"] h2 { text-align: center; margin-bottom: 2rem; }

/* Közös űrlap elemek */
.quote-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--szin-menusav);
    padding: 2rem;
    border-radius: var(--border-radius-alap);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.quote-container .input-style {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    background: var(--szin-hatter);
    border: 1px solid var(--szin-border-fo);
    border-radius: 5px;
    font-family: inherit;
    box-sizing: border-box;
}
.quote-container .form-row {
    display: flex;
    gap: 1rem;
}
.quote-container .form-row input {
    flex: 1;
}
/* Reszponzivitás az űrlap sorokra */
@container (max-width: 500px) { /* Ha container query-t támogat a böngésző */
    .quote-container .form-row { flex-direction: column; gap: 0; }
}
/* Fallback media query, ha a container nem működne */
@media (max-width: 600px) {
    .quote-container .form-row { flex-direction: column; gap: 0; }
}


/* 1. Egyszerű űrlap */
.quote-simple p {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--szin-szoveg-masodlagos);
}
.quote-simple button {
    width: 100%;
    font-size: 1.1rem;
}

/* 3. Többlépcsős (Steps) */
.steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.steps-indicator .step {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--szin-border-menu);
    color: var(--szin-szoveg-halvany);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.steps-indicator .step.active {
    background: var(--szin-szoveg-kiemeles);
    color: var(--szin-szoveg-gomb);
}
.steps-indicator .step-line {
    flex: 1;
    height: 2px;
    background: var(--szin-border-menu);
    margin: 0 10px;
    max-width: 50px;
}
.steps-indicator .step-line.active {
    background: var(--szin-szoveg-kiemeles);
}
.quote-steps .step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

/* 4. Kártyás választó (Cards) */
.quote-cards h3 { text-align: center; margin-bottom: 2rem; }

.service-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.service-card {
    border: 2px solid var(--szin-border-fo);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.service-card:hover {
    border-color: var(--szin-szoveg-kiemeles-hover);
    background: var(--szin-kiemeles-menusav);
}
.service-card.selected {
    border-color: var(--szin-szoveg-kiemeles);
    background: var(--szin-kiemeles-menusav);
    box-shadow: 0 0 0 2px rgba(230, 136, 14, 0.2); /* Glow effect */
}
.service-card .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.service-card h4 { margin: 0; }

.card-form-section {
    display: flex;
    gap: 1rem;
}
.card-form-section input { margin-bottom: 0 !important; }

/* =========================================
   FIGYELMEZTETŐ POPUP (DESKTOP WARNING)
   ========================================= */

/* A sötét háttér (Overlay) */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Sötétítés */
    backdrop-filter: blur(5px); /* Divatos homályosítás */
    z-index: 9999; /* Minden felett legyen! */
    display: none; /* Alapból rejtve (JS kapcsolja be) */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Ha aktív, akkor látszik */
.custom-modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* A doboz (Popup) */
.custom-modal-box {
    background-color: var(--szin-hatter);
    border: 1px solid var(--szin-border-fo);
    padding: 2.5rem;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

/* Animáció beúszáshoz */
.custom-modal-overlay.show .custom-modal-box {
    transform: translateY(0);
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.custom-modal-box h3 {
    margin-bottom: 1rem;
    color: var(--szin-szoveg-elsodleges);
    font-size: 1.5rem;
}

.custom-modal-box p {
    color: var(--szin-szoveg-masodlagos);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.custom-modal-box .modal-hint {
    background-color: var(--szin-menusav);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px dashed var(--szin-border-dashed);
    margin-bottom: 2rem;
}

.custom-modal-box .button-style {
    margin-top: 0; /* Felülírjuk az alap stílust */
    cursor: pointer;
}