* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html {
    scroll-behavior: smooth; /* 💥 EZ TESZI LÁGYÁ, GÖRDÜLŐVÉ A LEUGRÁST 💥 */
}

body {
    background-color: #0b0b0b;
    color: #b7a899;
    line-height: 1.6;
}

.container {
    width: 94%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Színvilág változók */
:root {
    --gold: #b7a899;
    --dark-grey: #161616;
    --light-grey: #222222;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95)), url('https://unsplash.com') no-repeat center center/cover;
    padding: 60px 0;
    text-align: center;
    border-bottom: 2px solid var(--gold);
}

/* ÚJ: Biztosítja, hogy a fej és a szöveg függőlegesen, középen legyen */
.logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

/* ÚJ: A fix kos fej méretezése */
.logo-fej {
    display: block;
    max-width: 400px; /* Az eredeti 800px-es teljes logóhoz mérten a fél fejnek ez az ideális méret */
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* JAVÍTOTT: Fix méretű doboz Flexbox-szal, ami nem engedi ugrálni az oldalt és nem takarja el a .tags-et */
.szoveg-doboz {
    display: flex;             /* Bekapcsoljuk a Flexbox-ot */
    align-items: center;       /* Függőlegesen hajszálpontosan középre igazít */
    justify-content: center;    /* Vízszintesen hajszálpontosan középre igazít */
    width: 400px;              /* Pontosan akkora, mint a kos feje */
    height: 160px;             /* FIX MAGASSÁG: Ekkora helyet foglal el fixen, így a váltáskor semmi sem ugrik */
    margin: 30px auto 0 auto;  /* 30px tiszta távolság a kos feje alatt, vízszintesen középen */
}

/* A dobozon belüli kép tiszta formázása */
.logo-szoveg {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;       /* Torzításmentesen igazítja a logót a dobozhoz */
}
/* Ez a stílus csak akkor lép életbe, ha a JS már lecserélte a GIF-et a képre */
/* Amikor a JS lecseréli a GIF-et, ez az animáció indul el */
.logo-szoveg.kisebb-kep {
    width: 83% !important;   /* A te pontos méreted */
    margin: 0 auto;          
    margin-top: 16px;        /* A te pontos eltolásod */
    
    /* ANIMÁCIÓS BEÁLLÍTÁSOK */
    opacity: 0;              /* Alapból láthatatlan (fekete marad) */
    animation: megjelenes 3s ease-in-out forwards;
    animation-delay: 0.2s;     /* 1 másodpercig fekete, utána indul a megjelenés */
}

/* Itt adjuk meg, hogyan tűnjön elő a kép a 3 másodperc alatt */
@keyframes megjelenes {
    from {
        opacity: 0;          /* Teljesen átlátszó */
    }
    to {
        opacity: 1;          /* Teljesen látható */
    }
}

.logo-area h1 {
    font-size: 2.5rem;
    letter-spacing: 4px;
    font-weight: 700;
}

.logo-area .subtitle {
    color: var(--gold);
    letter-spacing: 8px;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.logo-area .tags {
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 40px;
    width: 100%;
    text-align: center;
}

.hero-title h2 {
    font-size: 2.2rem;
    color: #b7a899;
    letter-spacing: 2px;
}

.hero-title h3 {
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 50px;
    letter-spacing: 1px;
}

/* --- A három érték szekció javítása --- */
.features {
    display: flex;
    justify-content: space-between; /* Egyenletesen elosztja a három oszlopot */
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Vagy amekkora a .container szélessége nálad */
    margin: 30px auto; /* Középre teszi a teljes sort */
    padding: 0;
}

.feature-item {
    flex: 1; /* Mind a három doboz KÖTELEZŐEN hajszálpontosan ugyanakkora szélességű lesz */
    text-align: center; /* A dobozon belül a szöveget és az ikont is tökéletesen középre lövi */
    padding: 10px;
}

.feature-item p {
    margin: 5px 0 0 0;
    text-align: center; /* Biztosítja, hogy a szöveg ne csússzon el a saját dobozában */
    width: 100%;
}

/* Szolgáltatások */
.services {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    letter-spacing: 4px;
    color: #b7a899;
    margin-bottom: 40px;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 10px auto 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    align-items: stretch; /* 💥 EZ KÉNYSZERÍTI KI, HOGY A KÁRTYA LINKJEI EGYFORMA MAGASAK LEGYENEK 💥 */
}
.service-card-link {
    display: flex; /* Átírjuk flexre block helyett */
    flex-direction: column;
    height: 100%; /* Kitölti a grid által nyújtott teljes magasságot */
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.3s ease;
}

.service-card {
    background-color: var(--dark-grey);
    border: 1px solid #252525;
    border-top: 3px solid var(--gold);
    padding: 20px;
    border-radius: 4px;
    
    /* ÚJ BEÁLLÍTÁSOK: */
    display: flex;
    flex-direction: column; /* Függőlegesen pakolja az elemeket */
    height: 100%; /* Kitölti a link teljes magasságát */
    width: 100%;
}

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

.card-img {
    height: 310px;
    background-size: cover;
    background-position: center;
    margin-bottom: 15px;
    border-radius: 2px;
    background-color: #333; /* Helyőrző szín */
    overflow: hidden;
}

/* Képek helyőrzői (Unsplash-ről behúzva az autó, motor stb. hangulathoz) */
.placeholder-car { background-image: url('https://unsplash.com'); }
.placeholder-building { background-image: url('https://unsplash.com'); }
.placeholder-design { background-image: url('https://unsplash.com'); }
.placeholder-mod { background-image: url('https://unsplash.com'); }
.placeholder-moto { background-image: url('https://unsplash.com'); }

.service-card h3 {
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 15px;
    letter-spacing: 1px;
    min-height: 40px;
}

.service-card ul {
    list-style: none;
}

.service-card ul li {
    font-size: 0.85rem;
    color: #ffffff;
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.service-card ul li::before {
    content: '•';
    color: var(--gold);
    position: absolute;
    left: 0;
}

/* Kapcsolat és CTA */
.contact {
    background-color: var(--dark-grey);
    padding: 50px 0;
    border-top: 1px solid #232323;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cta-text {
    flex: 1;
    min-width: 250px;
}

/* Kijavítva: .cta-icon helyett .cta-phone-icon, mert a HTML-ben ez van */
.cta-phone-icon {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 10px;
    display: block; /* Biztosítja, hogy a telefon ikon külön sorban legyen a szöveg felett */
}

.cta-text h2 {
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: var(--gold); /* ÚJ SOR: Ez színezi át a "KÉRJ AJÁNLATOT" szöveget is! */
}

.cta-text h2 span {
    color: var(--gold);
    display: block;
}

.contact-info {
    flex: 1;
    min-width: 280px;
}

.contact-info p {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.contact-info i {
    color: var(--gold);
    width: 25px;
}

/* ÚJ: Térkép konténer a jobb alsó sarokban */
.map-area {
    flex: 1;
    min-width: 250px; /* Megemeltük egy kicsit, hogy kényelmesen elférjen a térkép */
    text-align: center;
}
/* A térkép link tárolója */
.map-link-wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer; /* Átváltja az egeret mutató kézzé, jelezve hogy kattintható */
}

/* Lágy sötétedés és felirat, amikor a látogató ráviszi az egeret a térképre */
.map-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Finom fekete áttetsző réteg */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.map-hover-overlay span {
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: rgba(22, 22, 22, 0.9);
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px solid var(--gold);
}

/* 💥 HOVER EFFEKT: Ha az egér a térkép fölé ér, megjelenik a nagyítás opció */
.map-link-wrapper:hover .map-hover-overlay {
    opacity: 1;
}

/* A térkép alatti címke szövege */
.map-text {
    font-size: 0.75rem;
    color: var(--gold);
    margin-top: 10px;
    letter-spacing: 1px;
    font-weight: bold;
}

footer {
    background-color: #111;    /* Sötét háttér */
    color: #888;               /* Szürke betűszín */
    padding: 20px 0;
    font-size: 0.85rem;
    border-top: 1px solid #222; /* Elválasztó vonal a fenti rész alatt */
}

.footer-container {
    display: flex;
    justify-content: space-between; /* Egymás mellé rakja a szöveget és a linkeket */
    align-items: center;
    flex-wrap: wrap;               /* Ha nem fér el (pl. mobilon), szépen törik */
    gap: 15px;
}

footer p {
    margin: 0;
}

/* A linkek doboza */
.footer-links {
    display: flex;
    gap: 20px;                     /* 20 pixel távolság a linkek között */
    flex-wrap: wrap;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Ha ráviszik az egeret, kivilágosodik */
.footer-links a:hover {
    color: #fff; 
}

/* Telefonos nézet: mobilon minden középre kerül és egymás alá rendeződik */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
        gap: 15px;
    }
}

footer .footer-sub {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
}

/* Mobil optimalizálás */
@media (max-width: 768px) {
    .hero-title h2 { font-size: 1.6rem; }
    .hero-title h3 { font-size: 1.3rem; }
    .contact-container { flex-direction: column; text-align: center; }
    .contact-info { text-align: left; margin: 0 auto; }
}
/* Kattintható kártya alapbeállítások */
.service-card-link, 
.service-card-link:visited, 
.service-card-link:hover, 
.service-card-link:active {
    text-decoration: none !important; /* Eltünteti az aláhúzást */
    color: inherit !important;           /* Megtartja az eredeti szövegszíneket */
}

/* Kis gomb/szöveg a kártya alján */
.more-info-btn {
    display: inline-block;
    margin-top: auto; /* 💥 EZ A VARÁZSLAT: automatikusan le tolja a gombot a kártya legeslegaljára 💥 */
    padding-top: 20px; /* Biztosít egy kis fix távolságot a legutolsó listapont alatt */
    font-size: 0.8rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    
    /* ÚJ: Ez biztosítja, hogy a gomb finoman, lágyan mozduljon vagy változzon */
    transition: all 0.3s ease-in-out; 
}

/* ÚJ: Amikor az egér a kártya felett van, elindul a látványos lüktetés */
.service-card-link:hover .more-info-btn {
    animation: aranyPulzalas 1.2s infinite alternate ease-in-out;
}

/* ÚJ: Az animáció lépései (kicsit megnő, és kap egy finom arany ragyogást) */
@keyframes aranyPulzalas {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0px rgba(255, 215, 0, 0);
    }
    100% {
        transform: scale(1.08); /* 8%-kal megnő a felirat */
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.6); /* Finom arany izzás a betűk mögött */
    }
}

/* Aloldal specifikus stílusok */
.subpage-header {
    background-color: var(--dark-grey);
    padding: 20px 0;
    border-bottom: 1px solid #252525;
}

.back-home-btn {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.back-home-btn:hover {
    color: var(--gold);
}

.subpage-logo-area {
    text-align: center;
    margin-top: 10px;
}

.subpage-logo {
    max-width: 500px;
    height: auto;
}

.details-section {
    padding: 60px 0;
}

.subpage-title {
    text-align: center;
    letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 10px;
}

.subpage-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
    color: #aaa;
}

.details-grid {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Távolság a blokkok között */
    margin-top: 40px;
}

.detail-item {
    background-color: var(--dark-grey);
    padding: 40px; 
    border-radius: 6px;
    border-left: 4px solid var(--gold);
    width: 100%; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
    transition: transform 0.2s ease;
    
    /* 💥 ÚJ: Mostantól a teljes téglalap felett megjelenik a mutatóujj 💥 */
    cursor: pointer !important; 
}

.detail-item:hover {
    transform: scale(1.01);
}

.detail-item h2 {
    font-size: 1.6rem; /* Nagyobb, hangsúlyosabb címek */
    margin-bottom: 20px;
    color: #b7a899;
    letter-spacing: 1px;
}
/* Amikor a cím felé viszik az egeret, mutassa a kis mutatóujjat */
.detail-item h2 {
    cursor: pointer !important;
}

.detail-item h2 i {
    color: var(--gold);
    margin-right: 15px;
}


.detail-item p {
    font-size: 1.1rem; /* Jobban olvashatóbb, nagyobb szövegméret */
    color: #b7a899;
    line-height: 1.8;
}



/* Legördülő tartalom alaphelyzete (REJTVE) */
.accordion-content {
    max-height: 0; /* Nulla magasság, így nem látszik */
    overflow: hidden; /* Elrejti a kilógó képet */
    opacity: 0; /* 💥 EZT AZ EGY SORT ÍRD BE IDE 💥 */
    transition: max-height 0.5s ease-in-out, margin-top 0.3s ease; /* Sima gördülés effekt */
    margin-top: 0;
}

/* A legördülő ablakban lévő kép */
.accordion-content img {
    width: 100%;
    max-height: 600px;         /* Megemeltük 500px-re, hogy a magasabb képeknek is legyen elég hely */
    object-fit: contain;       /* JAVÍTÁS: Nem vágja le a képet, hanem teljes terjedelmében megmutatja */
    border-radius: 4px;
    border: 1px solid #333;
    display: block;
    background-color: #000;    /* Opcionális: Ha a kép üres teret hagyna két oldalt, egy sötét háttér kitölti */
}

/* 💥 JAVÍTÁS: Mostantól nem hoverre, hanem kattintásra (.active) nyílik ki! 💥 */
.detail-item.active .accordion-content {
    max-height: 1200px !important; /* Felemeltük, hogy a nagy képek is biztosan kiférjenek */
    margin-top: 20px !important; 
    opacity: 1 !important;
}
/* PPF Csomagok Elrendezése */
.packages-section {
    padding: 60px 0;
}

.packages-row {
    display: flex;
    justify-content: space-between; /* Egyenlő távolságra osztja el őket a sorban */
    gap: 20px;                      /* 20px távolság a képek között */
    margin-top: 40px;
}

.package-card {
    flex: 1;                        /* Mind a 4 kártya hajszálpontosan egyforma széles lesz */
    min-width: 230px;               /* Nem engedi őket egy bizonyos méret alá zsugorodni */
    background-color: var(--dark-grey);
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;               /* Levágja a sarkokat a képnél a kerekítés miatt */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Kép méretezése a kártyán belül */
.package-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* Lebegő effekt: ha ráviszi a látogató az egeret, finoman kiemelkedik és beindul az arany lüktetés */
.package-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold);
    /* ÚJ: Elindítja a folyamatos arany ragyogást a meglévő emelkedés mellett */
    animation: csomagAranyPulzalas 1.5s infinite alternate ease-in-out; 
}

/* ÚJ, EXTRA FÉNYEREJŰ: A PPF kártya brutális arany pulzálásának lépései */
@keyframes csomagAranyPulzalas {
    0% {
        /* Alaphelyzet: normál sötét árnyék minimális arany fénnyel */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6), 
                    0 0 8px rgba(255, 215, 0, 0.3);
    }
    100% {
        /* Lüktető helyzet: Több rétegű, brutálisan erős arany ragyogás */
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 
                    0 0 10px rgba(255, 215, 0, 0.8),  /* Belső, sűrűbb mag */
                    0 0 20px rgba(255, 215, 0, 0.5),  /* Középső, szélesebb ragyogás */
                    0 0 30px rgba(255, 215, 0, 0.2);  /* Külső, lágy elmosódás */
    }
}

/* Mobil optimalizálás: ha a kijelző túl kicsi a 4 képnek egymás mellett, egymás alá ugranak */
@media (max-width: 992px) {
    .packages-row {
        flex-wrap: wrap;
        justify-content: center;
    }
    .package-card {
        flex: none;
        width: 45%; /* Tableten 2x2-es elrendezés */
    }
}

@media (max-width: 576px) {
    .package-card {
        width: 100%; /* Mobiltelefonon teljesen egymás alá kerülnek */
    }
}
/* Felugró ablak (Lightbox) alapértelmezett állapota */
.lightbox {
    display: none;             
    position: fixed;           
    z-index: 9999;             
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); 
    align-items: center;       
    justify-content: center;   
}

/* A kétoldalas belső tároló doboz */
.lightbox-container {
    display: flex;
    width: 90%;
    max-width: 1100px;
    background-color: #111111; /* Sötét belső háttér a tartalomnak */
    border: 1px solid var(--gold);
    border-radius: 8px;
    overflow: hidden;
    animation: zoomEfect 0.3s ease;
}

/* Bal oldal: A kép doboza */
.lightbox-left {
    flex: 1;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-content {
    max-width: 100%;
    max-height: 75vh;          
    height: auto;
    object-fit: contain;
    display: block;
}

/* Jobb oldal: A nagy szövegek doboza */
.lightbox-right {
    flex: 1;
    padding: 50px;             /* Tágas, szellős belső tér */
    display: flex;
    flex-direction: column;
    justify-content: center;   /* Függőlegesen középre teszi a szövegeket */
    border-left: 1px solid #222;
}

/* Nagy, jól látható Cím stílusa */
#lightbox-title {
    font-size: 2.5rem;         /* Szép nagy, hangsúlyos betűméret */
    color: var(--gold);        /* A márkád arany/barna színe */
    letter-spacing: 3px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* A leírás bekezdéseinek stílusa */
#lightbox-description p {
    font-size: 1.25rem;        /* Jól olvasható, nagy folyószöveg */
    color: #ffffff;            
    line-height: 1.8;
    margin-bottom: 20px;       /* Távolság a bekezdések között */
}

/* Bezáró gomb (X) pozíciója */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

.lightbox-close:hover { color: var(--gold); }

/* Sima nagyítási animáció felugráskor */
@keyframes zoomEfect {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mobil optimalizálás: ha kicsi a kijelző, a szöveg a kép alá ugrik */
@media (max-width: 768px) {
    .lightbox-container {
        flex-direction: column;
        max-height: 90vh;
        overflow-y: auto;      /* Engedi görgetni mobilon, ha nem fér ki a szöveg */
    }
    .lightbox-right {
        padding: 30px;
    }
    #lightbox-title {
        font-size: 1.8rem;
    }
}
/* ÚJ: A két vissza link elrendezése a fejlécben */
.back-links {
    display: flex;
    align-items: center;
    gap: 15px; /* Távolság a linkek és az elválasztó vonal között */
}

/* Az elválasztó vonal stílusa */
.link-separator {
    color: #444; /* Sötétszürke szín, hogy ne legyen túl hivalkodó */
    font-size: 0.9rem;
    user-select: none; /* Nem engedi, hogy a felhasználó véletlenül kijelölje a szöveget */
}

/* Mobil optimalizálás: ha túl kicsi a kijelző, egymás alá rendezi a két linket */
@media (max-width: 480px) {
    .back-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .link-separator {
        display: none; /* Mobilon elrejtjük az elválasztó vonalat */
    }
}
/* DAP Kiemelt Blokk Stílusai - KÖZÉPRE IGAZÍTVA */
/* DAP Kiemelt Blokk Stílusai - HÁTTÉR ÉS KERET NÉLKÜL */
.dap-intro-container {
    background-color: transparent !important; /* 🔥 TELJESEN ELTÜNTETI A VILÁGOSSZÜRKE HÁTTÉRDOBOZT 🔥 */
    border: none !important;                  /* 🔥 TELJESEN ELTÜNTETI A SZÜRKE KERETET 🔥 */
    box-shadow: none !important;              /* 🔥 LEKAPCSOLJA AZ ÁRNYÉKOT IS 🔥 */
    
    padding: 40px 0; /* Alul-felül megtartja a távolságot, de oldalra már nem kell felesleges belső margó */
    border-radius: 0;
    margin: 0 auto 40px auto; 
    width: 94%;               
    max-width: 1400px;        
    text-align: center;       
}

.dap-header {
    margin-bottom: 25px;
    text-align: center;       /* A fejléceket is középre kényszerítjük */
}

.dap-header h2 {
    font-size: 2.8rem;
    color: var(--gold);
    letter-spacing: 4px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
}

.dap-header h3 {
    font-size: 1.6rem;
    color: #b7a899;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 5px;
}

.dap-sub-brand {
    font-size: 0.85rem;
    color: #666;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.dap-text p {
    font-size: 1.1rem;
    color: #b7a899;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: center;       /* A bekezdések folyószövegei is középre igazodnak */
}

.dap-text p:last-child {
    margin-bottom: 0;
}

/* A legütősebb mondat kiemelése arany színnel */
.dap-highlight {
    color: var(--gold) !important;
    font-weight: 600;
    font-size: 1.2rem !important;
    letter-spacing: 0.5px;
}

/* Mobilra optimalizált méretek */
@media (max-width: 768px) {
    .dap-intro-container {
        padding: 25px;
    }
    .dap-header h2 { font-size: 2.2rem; }
    .dap-header h3 { font-size: 1.3rem; }
    .dap-text p { font-size: 1rem; }
}
/* ÚJ: Főmenü háttér és elrendezés */
.main-nav {
    background-color: var(--dark-grey);
    border-bottom: 1px solid #222;
    padding: 15px 0;
    position: sticky; /* Görgetésnél a képernyő tetején marad */
    top: 0;
    z-index: 9999;
}

/* --- Új navigációs logó stílusai --- */
/* --- Új, fixen pozicionált menü logó stílusai --- */
/* A menü konténere rács/flexbox alapra helyezve a fix szimmetriáért */
.nav-container {
    display: flex !important;
    justify-content: space-between !important; /* Szétnyomja a három fő blokkot */
    align-items: center !important;
    width: 94% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    position: relative !important;
}

/* 1. Bal oldali zóna a logónak */
.nav-logo {
    position: static !important; /* Kikapcsoljuk a zavaró abszolút pozíciót */
    flex: 1 !important; /* Rugalmas oszlop, ami kitölti a teret a Kezdőlapig */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* A saját zónáján belül balra igazít */
    padding-left: 20px !important; /* Elegáns távolság a monitor legszélétől */
}

/* Menü bal oldali kis szöveges logója */
.nav-logo a {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.nav-logo a span {
    color: var(--gold);
}

/* 2. Középső zóna a menüpontoknak - Ez garantálja a fix középpontot */
.nav-links {
    display: flex !important;
    list-style: none !important;
    gap: 25px !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 2 !important; /* Dupla akkora helyet kap, hogy kényelmesen elférjen */
}

.nav-links a {
    color: #b7a899;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Hover effekt és az aktív oldal kiemelése */
.nav-links a:hover, 
.nav-links a.active {
    color: #fff;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 5px;
}

/* 2. EZ A MOBIL RÉSZ (A kódod legalján) */
@media (max-width: 768px) {
    .nav-container {
        /* Mobilon elég csak függőleges oszlopba rendezni a dolgokat, a center fentről öröklődik */
        flex-direction: column; 
        gap: 15px;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}
/* ==========================================================================
   ÉPÜLETFÓLIA ÚJ DIZÁJN STÍLUSAI (KÉP ALAPJÁN)
   ========================================================================== */

/* Letisztult aloldal fejléc: Csak a logót igazítja középre */
.subpage-header-container {
    display: flex;
    justify-content: center; /* 💥 HAJSZÁLPONTOSAN KÖZÉPRE TESZI A LOGÓT 💥 */
    align-items: center;
    padding: 30px 0 15px 0;  /* Jó esésű távolság a menü és a logó között */
}

.subpage-logo {
    max-width: 180px; 
    height: auto;
    display: block;
}

/* Kétoldalas Hero rész */
.building-hero {
    padding: 60px 0;
}

.building-hero-container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.building-hero-text {
    flex: 1;
}

.building-hero-image {
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

.building-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Hero Szövegek */
.building-main-title {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gold);
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.building-sub-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--gold);
    margin-bottom: 25px;
}

.building-description {
    font-size: 1rem;
    color: #888;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 500px;
}

/* Árajánlat kérő gomb a képről */
.building-cta-btn {
    display: inline-block;
    padding: 14px 35px;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}

.building-cta-btn:hover {
    background-color: var(--gold);
    color: #000;
}

.building-note {
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 1px;
}

.building-note i {
    color: var(--gold);
    margin-right: 5px;
}

/* Középső "SZOLGÁLTATÁSAINK" elválasztó vonal */
.section-divider {
    text-align: center;
    position: relative;
    margin: 40px 0 60px 0;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #222;
    z-index: 1;
}

.section-divider span {
    position: relative;
    z-index: 2;
    background-color: #0b0b0b; /* Beolvad az oldal hátterébe */
    padding: 0 25px;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 1.1rem;
}

/* 3 Oszlopos Szolgáltatás rács */
.building-services {
    padding-bottom: 80px;
}

.building-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.b-service-card {
    background-color: var(--dark-grey);
    border: 1px solid #1c1c1c;
    border-radius: 4px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

/* Kép tároló a kis lebegő kör ikonnal */
.b-card-img-wrapper {
    position: relative;
    width: 100%;
    height: 240px; /* Álló/négyzetes formátum a képeknek */
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 25px;
}

.b-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kör alakú ikon a képek bal alsó sarkában */
.b-card-icon {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 45px;
    height: 45px;
    background-color: rgba(11, 11, 11, 0.85);
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.1rem;
}

/* Kártya Címek */
.b-service-card h3 {
    font-size: 1.05rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.b-service-card h4 {
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* Pipás listák */
.b-list {
    list-style: none;
}

.b-list li {
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.b-list li i {
    color: var(--gold); /* Arany színű pipák */
    margin-right: 10px;
    margin-top: 3px;
    font-size: 0.85rem;
}

/* Mobil és Tablet optimalizálás */
@media (max-width: 992px) {
    .building-hero-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .building-description {
        margin: 0 auto 35px auto;
    }
    .building-grid {
        grid-template-columns: 1fr; /* Mobilon egymás alá ugranak a kártyák */
        max-width: 500px;
        margin: 0 auto;
    }
}
/* Mobilnézetben egymás alá rendezzük őket, hogy ne gyűrődjön a szöveg */
@media (max-width: 576px) {
    .subpage-header-container {
        flex-direction: column;
        gap: 15px;
    }
    .header-right-spacer {
        display: none;
    }
}
/* A Vissza a főoldalra gomb egyedi formázása a menüsorban */
.nav-links a.back-nav-btn {
    color: #ffffff !important;      /* Alaphelyzetben tiszta fehér szín */
    font-size: 0.6rem !important;  /* Kisebb betűméret, mint a többi fülé */
    margin-right: 60px;             /* Távolság a Kezdőlap fül előtt */
    opacity: 0.85;                  /* Finom alap áttetszőség */
    border-bottom: none !important; /* Nem kap alsó vonalat hoverre sem */
    transition: color 0.3s ease, opacity 0.3s ease; /* Sima, elegáns színátmenet */
    /* 💥 FIX: Megakadályozzuk, hogy a Vissza gomb két sorba törjön az aloldalakon 💥 */
    white-space: nowrap !important; /* Megtiltja a böngészőnek, hogy két sorba törje a szöveget */
    display: inline-block !important;

}

/* 💥 HOVER EFFEKT: Ha rámész az egérrel, kiszíneződik a többi fül színére 💥 */
.nav-links a.back-nav-btn:hover {
    color: var(--gold) !important;  /* Átveszi a változóban megadott arany színt */
    opacity: 1;                     /* Teljesen felerősödik a fényereje */
}
/* Az új, beépített szöveges pipák egyedi arany formázása */
.b-list li .text-check {
    color: var(--gold);       /* Beállítja az arany márkaszínedet */
    font-weight: bold;        /* Vastag, jól látható karakter */
    margin-right: 12px;       /* Távolság a pipa és a szöveg között */
    font-size: 0.95rem;       /* Optimális méret */
    display: inline-block;
    user-select: none;        /* Nem engedi véletlenül kijelölni a pipát */
}
/* Kapcsolat rész beépített ikonjainak finomhangolása */
.contact-info p {
    display: flex;
    align-items: center;
    gap: 12px; /* Kellemes távolság az ikon és a szöveg között */
    margin-bottom: 12px;
}

.contact-emoji {
    font-size: 1.1rem;
    color: var(--gold); /* Ha a böngésző engedi a szöveges karakter átszínezését, arany lesz */
    width: 25px;
    display: inline-block;
    text-align: center;
}
/* Az új, letisztult szöveges telefon ikon formázása */
.cta-phone-icon {
    font-size: 3.5rem;         /* Szép nagy, hangsúlyos ikon méret */
    color: var(--gold);        /* Hajszálpontosan a márkád arany/bronz színe */
    display: block;
    margin-bottom: 15px;       /* Távolság az ikon és a "KÉRJ AJÁNLATOT" felirat között */
    line-height: 1;
}

/* Mobilnézetben ez is középre igazodjon automatikusan */
@media (max-width: 768px) {
    .cta-phone-icon {
        text-align: center;
    }
}
/* ============================================================
   FOLYAMATÁBRA SZEKCIÓ VÉGLEGES, TORZÍTÁSMENTES STÍLUSA
   ============================================================ */
.building-process {
    padding: 60px 0; /* Kellemes, szellős távolság alul-felül */
    background-color: transparent;
    width: 100%;
}

.process-container {
    width: 94%;
    max-width: 1400px; /* Hajszálpontosan igazodik a felette lévő kártyák széléhez */
    margin: 0 auto;
    padding: 0;
}

.process-image-wrapper {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* KIZÁRÓLAG EZT AZ EGY BLOKKOT ÍRD ÁT A MEGLÉVŐ CSS-BEN */
.building-process .process-img {
    width: 100% !important; 
    max-width: 100% !important;
    height: auto !important;       /* 🌟 MEGOLDÁS: Automatikus magasság! */
    display: block !important;
    object-fit: contain !important; /* 🌟 MEGOLDÁS: Megtartja a kép eredeti, gyári arányait! */
    border-radius: 8px !important; 
}

/* ============================================================
   EGYEDI SZÍNEK A FÓLIA TÍPUSOKHOZ
   ============================================================ */
.color-silver {
    color: #cccccc;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.color-bronze {
    color: #cd7f32;
    font-weight: bold;
}

.color-gold {
    color: #d4af37;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

/* ============================================================
   AJÁNLATKÉRŐ GOMB SZEKCIÓ STÍLUSAI
   ============================================================ */
.building-cta {
    padding: 50px 0 80px 0;
    text-align: center;
    background-color: transparent;
}

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

.cta-text {
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.cta-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: #d4af37;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

.cta-button:active {
    transform: translateY(-1px);
}

/* --- Térkép feletti cím stílusának javítása --- */
.map-text {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    width: 100%;
}

/* ============================================================
   AUTÓFÓLIA OLDAL: PPF GRAFIKA 90%-OS MÉRET + ARANY HOVER EFFEKT
   ============================================================ */

/* 1. Visszaállítjuk a legördülő dobozt a normál keretek közé, nem törünk át falat */
.detail-item .accordion-content {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    text-align: center; /* Középre igazítja a képet és a linket */
    
    /* 👇 EZT AZ EGY SORT ÍRD BE IDE, hogy az animáció sima legyen 👇 */
    opacity: 0;
}

/* 💥 FIX: ÁTÍRTUK :HOVER-RŐL .ACTIVE-RA, HOGY KATTINTÁSKOR JELENJEN MEG A KÉP! 💥 */
.detail-item.active .accordion-content {
    max-height: 1200px !important;
    opacity: 1 !important; /* 👇 Ez is kell ide, hogy látszódjon a kép 👇 */
}

.detail-item .accordion-content a {
    display: inline-block !important; /* Blokkról inline-blockra váltunk, hogy a hover pontosan a képet kövesse */
    width: 90% !important; /* 90%-ra vesszük a szélességet, így marad 5-5% hely a széleken */
    margin: 15px auto !important;
}

/* 2. Az XPEL kép alapállapota */
.featured-ppf-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 6px !important; /* Szépen lekerekítjük mind a 4 sarkát */
    border: 1px solid #222 !important; /* Finom alap sötét keret */
    background-color: transparent !important;
    
    /* 💥 Ez felel a sima, lágy animációért, amikor ráviszed ÉS amikor leveszed az egeret 💥 */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease, filter 0.4s ease !important;
}

/* 3. 💥 PREMIUM ARANY HOVER EFFEKT: Belenagyítás + Világító/Pulzáló arany keret 💥 */
.detail-item .accordion-content a:hover .featured-ppf-img {
    transform: scale(1.02) !important; /* Finom, 2%-os megnagyobbodás */
    border-color: #d4af37 !important; /* A keret színe átvált élénk aranyra */
    filter: brightness(1.08) !important; /* Kicsit felragyog a grafika */
    
    /* Dupla rétegű arany fényhatás (neon/világító hatás a sötét háttéren) */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4), 
                0 0 25px rgba(212, 175, 55, 0.2) !important;
}
.mini-nav-logo {
    height: 40px !important;
    width: auto !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.mini-nav-logo:hover {
    transform: scale(1.08) !important;
}
/* 💥 MOBIL OPTIMALIZÁLÁS (Garantáltan nem esik szét) 💥 */
@media (max-width: 1100px) {
    .nav-container {
        flex-direction: column !important;
        gap: 15px !important;
        justify-content: center !important;
    }
    .nav-logo {
        justify-content: center !important;
        padding-left: 0 !important;
        flex: none !important;
    }
    .nav-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        flex: none !important;
    }
    .nav-container::after {
        display: none !important; /* Mobilon nincs szükség a kiegyenlítőre */
    }
}
/* 3. Jobb oldali láthatatlan kiegyenlítő zóna, hogy a középső rész ne tolódjon el */
.nav-container::after {
    content: "" !important;
    flex: 1 !important; /* Hajszálpontosan ugyanakkora teret foglal el a jobb szélen, mint a logó a balon */
    display: block !important;
}

/* ============================================================
   FOLYAMATÁBRÁK HAJSZÁLPONTOS KIEGYENLÍTÉSE (KÜLÖN SZABÁLYOK)
   ============================================================ */

.building-process {
    padding: 60px 0;
    background-color: transparent;
    width: 100%;
}

.process-container {
    width: 94%;
    max-width: 1400px; /* Egy vonalba hozza a kártyákkal */
    margin: 0 auto;
    padding: 0;
}

.process-image-wrapper {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 1. AZ ÉPÜLETFÓLIÁS KÉP (Csak a szélesség változik, a magasság fix) */
.building-process .process-img[src*="epulet"] {
    width: 100% !important; /* Vízszintesen kinyújtja a konténer széléig */
    max-width: 100% !important;
    
    /* 👇 ITT ADOD MEG A FIX MAGASSÁGOT (Írd át arra a számra, ami neked tetszik, pl. 240px, 260px) 👇 */
    height: 270px !important; 
    max-height: 400px !important; 
    
    /* 👇 EZ A VARÁZSLAT: Kikapcsolja az arányos méretezést, és kényszeríti a szélesedést 👇 */
    object-fit: fill !important; 
    
    display: block !important;
    border-radius: 8px !important;
}

/* 2. AZ AUTÓFÓLIÁS KÉP (Naptáras/Autós ábra) FIX MÁSOLATA */
.building-process .process-img[src*="auto"] {
    width: 100% !important; /* Vízszintesen kinyújtja a konténer széléig */
    max-width: 100% !important;
    
    /* 👇 ITT ADOD MEG A FIX MAGASSÁGOT (Írd át arra a számra, ami neked tetszik, pl. 240px, 260px) 👇 */
    height: 270px !important; 
    max-height: 400px !important; 
    
    /* 👇 EZ A VARÁZSLAT: Kikapcsolja az arányos méretezést, és kényszeríti a szélesedést 👇 */
    object-fit: fill !important; 
    
    display: block !important;
    border-radius: 8px !important;
}
/* 5 oszlopos elrendezés konfigurálása */
.five-columns-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px;
    /* Ez biztosítja, hogy a rácsban lévő elemek megnyúljanak a legmagasabbhoz */
    align-items: stretch !important; 
}

/* Kártyák belső kiegyenlítése Flexbox-szal */
.five-columns-grid .b-service-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Kitölti a rendelkezésre álló teljes magasságot */
}

/* RESPONSIVE DESIGN: Tableten 3 vagy 2 oszlop */
@media (max-width: 1200px) {
    .five-columns-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .five-columns-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* RESPONSIVE DESIGN: Mobilon egymás alá ugranak */
@media (max-width: 600px) {
    .five-columns-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Kihasználjuk a széleken lévő üres helyet, hogy a kártyák szélesebbek legyenek */
.building-services .container.five-columns-grid {
    max-width: 95% !important; /* Kimaxoljuk a szélességet, csak minimális margót hagyunk */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 💥 JAVÍTÁS: KIZÁRÓLAG A MOTOCROSS OLDAL LEGESLEGELSŐ OSZLOPA kap arany ragyogást 💥 */
body:has(a[href="motocross.html"].active) .b-service-card:first-of-type:hover {
    animation: fooldalCsomagAranyPulzalas 1.5s infinite alternate ease-in-out !important;
    border-color: var(--gold) !important; 
    transform: translateY(-5px) !important; 
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

/* 💥 JAVÍTÁS: KIZÁRÓLAG A GRAFIKA OLDAL LEGESLEGUTOLSÓ (5.) OSZLOPÁRA indítjuk el a fénylést! 💥 */
body:has(a[href="grafika.html"].active) .b-service-card:last-of-type:hover {
    animation: fooldalCsomagAranyPulzalas 1.5s infinite alternate ease-in-out !important;
    border-color: var(--gold) !important; 
    transform: translateY(-5px) !important; 
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}


/* FŐOLDAL EXTRA FÉNYERŐ: A 5 oszlop brutális arany pulzálásának lépései */
@keyframes fooldalCsomagAranyPulzalas {
    0% {
        /* Alaphelyzet: normál sötét árnyék minimális arany fénnyel */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 
                    0 0 8px rgba(255, 215, 0, 0.3);
    }
    100% {
        /* Lüktető helyzet: Több rétegű, brutálisan erős arany ragyogás a főoldalon is */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 
                    0 0 10px rgba(255, 215, 0, 0.8),  /* Belső, sűrűbb mag */
                    0 0 20px rgba(255, 215, 0, 0.5),  /* Középső, szélesebb ragyogás */
                    0 0 30px rgba(255, 215, 0, 0.2);  /* Külső, lágy elmosódás */
    }
}
/* Épületfóliázás oldal: A sorok és a pipák alapértelmezett színe tiszta fehér */
.b-service-card .b-list li {
    font-size: 0.85rem;
    color: #ffffff; /* A teljes szöveg fehér lesz */
    margin-bottom: 8px;
}

/* Kifejezetten a kis ✔ pipák színe (ha külön szeretnéd állítani, most ez is fehér) */
.b-service-card .b-list li .text-check {
    color: #ffffff; 
    margin-right: 5px; /* Ad egy kis fix távolságot a pipa és a szöveg között */
}
/* ==========================================
   ÚJ BEMUTATKOZÁS OLDAL DESIGN (MAGAZIN STÍLUS)
   ========================================== */

/* Alap rácsbeállítások */
.story-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* A szöveg kicsit szélesebb, mint az álló kép */
    gap: 60px;
    padding: 80px 0;
    align-items: center;
}

/* Váltott elrendezés: a kép balra, szöveg jobbra kerül */
.reverse-grid {
    grid-template-columns: 0.8fr 1.2fr;
}

/* Kis feliratok a címek felett */
.story-badge {
    color: var(--gold);
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 4px;
}

.story-text h2 {
    color: #ffffff;
    font-size: 2.2rem;
    margin-bottom: 25px;
    font-weight: 800;
}

.story-text p {
    color: #cccccc;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.gold-text {
    color: var(--gold) !important;
    font-size: 1.15rem !important;
    font-weight: 600;
}

.gold-bold-text {
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Különleges kiemelt szövegdoboz a 2. szekcióban */
.highlight-box {
    background-color: rgba(255, 215, 0, 0.03);
    border-left: 3px solid var(--gold);
    padding: 25px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
}

.highlight-box h3 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.highlight-box p {
    margin-bottom: 0;
    font-style: italic;
}

.allo-foto {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
    border-radius: 6px;
    border: 8px solid var(--gold);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    
    /* 💥 EZ SÖTÉTÍTI LE A KÉPET 💥 */
    filter: brightness(0.5); /* A 0.65 azt jelenti, hogy az eredeti fényerő 65%-ára sötétítjük (35%-kal lesz sötétebb) */
    
    transition: filter 0.3s ease; /* Finom átmenet, ha később mégis változtatnál rajta */
}

@keyframes bemutatkozasFotoRagyogas {
    0% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 5px rgba(255, 215, 0, 0.2);
    }
    100% {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 
                    0 0 25px rgba(255, 215, 0, 0.7),
                    0 0 45px rgba(255, 215, 0, 0.3);
    }
}

/* Középső nagy sötét idézet sáv */
.manifesto-banner {
    background-color: #111111;
    padding: 80px 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    text-align: center;
}

.manifesto-quote {
    color: var(--gold);
    font-size: 2.5rem;
    font-weight: 800;
    font-style: italic;
    margin-bottom: 20px;
}

.manifesto-sub {
    max-width: 800px;
    margin: 0 auto;
    color: #888888;
    line-height: 1.7;
    font-size: 1.1rem;
}

/* Motocross szekció egyedi dizájnja */
.moto-featured-section {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('moto-bg.jpg'); /* Opcionális háttérkép hangulatnak */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    text-align: center;
}

.moto-container {
    max-width: 800px;
    margin: 0 auto;
}

.moto-container h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 900;
    margin-top: 10px;
    margin-bottom: 25px;
}

.moto-p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #dddddd;
}

.moto-quote-card {
    background-color: #111;
    border: 1px solid var(--gold);
    padding: 30px;
    border-radius: 8px;
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.moto-quote-card p {
    margin-bottom: 0;
    font-size: 1.2rem;
    color: #ffffff;
    line-height: 1.6;
}

/* Lap alji nagy lezárás */
.about-footer-manifesto {
    padding: 100px 0;
    text-align: center;
    background-color: #0b0b0b;
}

.about-footer-manifesto h2 {
    font-size: 3rem;
    color: var(--gold);
    font-weight: 900;
    margin-bottom: 20px;
}

.about-footer-manifesto h3 {
    font-size: 1.5rem;
    color: #ffffff;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.6;
}

.text-center {
    text-align: center;
}

/* Háttérváltás a szekciók között a jobb kontrasztért */
.alt-bg {
    background-color: #141414;
}

/* Mobil optimalizálás (hogy telefonon minden sorba rendeződjön) */
@media (max-width: 992px) {
    .story-grid, .reverse-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px 0;
    }
    .story-image {
        order: 2; /* Telefonon a kép mindig a szöveg ALÁ kerül */
    }
    .manifesto-quote {
        font-size: 1.8rem;
    }
}
/* ==========================================
   TÖRTÉNETÜNK ÍRÓGÉP ÉS BEÚSZÓ ANIMÁCIÓ
   ========================================== */

/* Biztosítjuk, hogy a gépelt sor stabilan viselkedjen a rácsban */
.typing-container {
    display: block;
    width: 100%;
    max-width: 700px; /* Megakadályozza, hogy túlnyúljon és eltolja a képet */
    margin-bottom: 15px;
}

.typing-text-story {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid var(--gold);
    width: 0;
    
    /* MODOSÍTOTT ANIMÁCIÓ: 
       A kurzorVillogasStory most már CSAK 3 másodpercig fut (6-szor villan fel), 
       majd a 'forwards' tulajdonsággal átlátszó marad a végén! */
    animation: gepelesStory 3s steps(35) forwards, 
               kurzorVillogasStory 0.5s step-end 6 forwards;
}

/* ÚJ: Biztosítjuk, hogy a kis badge-nek legyen egy kis felső távolsága a címtől */
.story-badge {
    margin-top: 10px;
    margin-bottom: 25px;
}

/* Animáció: Kitolja a címsor szélességét */
@keyframes gepelesStory {
    from { width: 0; }
    to { width: 100%; }
}

/* Animáció: Villogtatja a kurzort a sor végén */
@keyframes kurzorVillogasStory {
    from, to { border-color: transparent; }
    50% { border-color: var(--gold); }
}

/* A MARADÉK SZÖVEG BEÚSZÁSA */
.fade-in-text {
    opacity: 0; /* Alapból láthatatlan */
    transform: translateY(15px); /* Egy picit lejjebb ültetjük */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Finom 1 másodperces beúszás */
}

/* Amikor a JavaScript rárakja ezt az osztályt, egyszerre megjelenik */
.fade-in-text.visible {
    opacity: 1;
    transform: translateY(0);
}
/* ==========================================================
   BIZTONSÁGOS BLACK SHEEP DESIGN BEMUTATKOZÁS STÍLUSOK
   ========================================================== */

.bsd-page-wrapper {
    background-color: #0d0d0d;
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.bsd-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
}

.bsd-image-placeholder {
    background-color: #161616;
    border: 1px solid #222;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* RÁCS ELRENDEZÉS */
.bsd-grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.bsd-text-block .bsd-section-title {
    font-size: 2.2rem; /* Vagy az a méret, ami a többi belső címnek eredetileg jól állt */
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 30px;
    letter-spacing: 1px;
    color: #ffffff;
}

/* 2. JAVÍTÁS: A lenti kép (pl. Ferrari) melletti szövegek */
.bsd-text-block p {
    font-size: 1rem;
    color: #b7a899;
    margin-bottom: 20px;
    font-style: normal !important; /* Törli a dőlt betűt */
    font-weight: normal;           /* Normál vastagság */
    text-transform: uppercase;     /* Csupa nagybetűs lesz */
    letter-spacing: 1px;           /* Elegáns térköz a betűk között */
}

.bsd-gray-text {
    color: #b7a899 !important;
}

/* PIROS KIEMELÉSEK */
.bsd-highlight-red-line {
    color: #ffffff;
    border-bottom: 2px solid #e50914;
    padding-bottom: 3px;
}

.bsd-highlight-red-text {
    color: #e50914;
    font-weight: 600;
}

.bsd-important-footer {
    margin-top: 30px;
    font-size: 1.05rem;
}

/* LISTÁK */
.bsd-clean-list {
    list-style: none;
    margin-top: 25px;
}

.bsd-upper-list li {
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.bsd-bullet-list li {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.bsd-bullet-red {
    color: #e50914;
    font-weight: 900;
    margin-right: 8px;
}

/* FEJLÉC EXTRA - JAVÍTOTT: Szélesebb távolság a kép és a szöveg között */
.bsd-hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px !important;    /* Visszaállítva az eredeti méretre, hogy a kép ne változzon */
    align-items: center;
    padding-top: 40px;
}
/* SIKER: Ez a kód egyszerre tolja el a BMW, a Kulcsok, a Részletek és a Motocross szakaszok szövegeit! */
.bsd-hero-section .bsd-text-box,
.bsd-reverse-mobile .bsd-text-block {
    padding-left: 120px !important; /* Egységesen 80px távolság a képektől */
}

/* Mobilos igazítás: telefonon minden középre kerül, hogy ne lógjon le a képernyőről */
@media (max-width: 768px) {
    .bsd-hero-section .bsd-text-box,
    .bsd-reverse-mobile .bsd-text-block {
        padding-left: 0 !important;
    }
}

.bsd-main-title {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 0.95;
    margin-bottom: 30px;
    letter-spacing: -1px;
    color: #ffffff;
}

.bsd-lead-text {
    font-size: 1.1rem;
    color: #b7a899;
    font-style: normal !important; /* Törli a dőlt betűt */
    font-weight: normal;           /* Normál vastagság */
    text-transform: uppercase;     /* Csupa nagybetűs lesz */
    letter-spacing: 1px;           /* Elegáns térköz a betűk között */
    line-height: 1.6;              /* Jó sormagasság, hogy ne tapadjanak össze a sorok */
}

/* KÖZÉPRE ZÁRT TÖRTÉNET */
/* KÖZÉPRE ZÁRT TÖRTÉNET */
.bsd-center-section {
    text-align: center;
    max-width: 850px;
    margin: 80px auto;
}

.bsd-history-title {
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin-bottom: 40px;
    font-weight: 700;
    color: #ffffff;
}

/* JAVÍTOTT: Ez a rész felel a képeden látható szövegekért */
.bsd-center-content p {
    color: #999999;               /* Ha fehéret szeretnél, írd át #ffffff-re */
    margin-bottom: 25px;
    font-size: 1.05rem;
    font-style: normal !important; /* ÚJ: Biztosan törli a dőlt betűstílust */
    font-weight: normal;           /* ÚJ: Normál vastagság, nem lesz túl vékony */
    text-transform: uppercase;     /* ÚJ: Csupa nagybetűssé teszi, mint a legalsó sorokat */
    letter-spacing: 1px;           /* ÚJ: Egy pici térköz a betűk között a jobb olvashatóságért */
}

/* FERRARI HOZZÁSZÓLÁS */
.bsd-relative-box {
    position: relative;
}

.bsd-arrow-comment {
    position: absolute;
    bottom: -50px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #777777;
    font-size: 0.85rem;
    line-height: 1.3;
}

.bsd-arrow-icon {
    font-size: 1.5rem;
    color: #777777;
}

.bsd-last-section {
    margin-bottom: 100px;
}
* ÚJ Eltolja a BMW melletti szöveges dobozt jobbra */
/* ÚJ: Eltolja a BMW melletti szöveges dobozt jobbra */
.bsd-text-box {
    padding-left: 60px !important; /* Emeltem a távolságon, és kapott egy !important-ot */
}
/* 1. KIZÁRÓLAG AZ OLDAL LEGELEJÉN LÉVŐ CÍM NAGYÍTÁSA */
.bsd-hero-section .bsd-main-title {
    font-size: 4.5rem !important; /* Ez vezérli a legelső, BMW-s feliratot */
}

/* 2. KIZÁRÓLAG AZ OLDAL LEGVÉGÉN LÉVŐ CÍM NÖVELÉSE ÉS ÖSSZEHÚZÁSA */
.bsd-last-section .bsd-section-title {
    font-size: 4.5rem !important;   
    font-weight: 900 !important;   
    line-height: 0.95 !important;  
    letter-spacing: -1px !important; 
    
    /* ÚJ SOR: Ez a margó tolja el lefelé a következő két sort! */
    margin-bottom: 30px !important; /* Ha még mindig közel van, írj be 50px-et vagy 60px-et! */
}

/* Képernyő igazítás: Mobilon ne legyen eltolva, hogy ott középen maradjon */
@media (max-width: 768px) {
    .bsd-text-box {
        padding-left: 0 !important;
    }
}
/* MOBIL NÉZET */
@media (max-width: 900px) {
    .bsd-grid-section, .bsd-hero-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bsd-hero-section {
        display: flex;
        flex-direction: column-reverse;
    }

    .bsd-reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
    }

    .bsd-main-title {
        font-size: 3.2rem;
    }
    
    .bsd-arrow-comment {
        position: static;
        margin-top: 15px;
    }
}
/* --- BLACK SHEEP KÉP SPECIÁLIS EFFEKTJEI (MINDEN KÉPRE) --- */

/* 1. LÉPÉS: A képek külső dobozainak felkészítése (BMW doboz és a többi szakasz dobozai) */
.bsd-image-box, 
.bsd-image-block {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden; /* Biztosítja, hogy a belső árnyék ne lógjon ki a sarkokon */
}

/* 2. LÉPÉS: A sötétítő és belső árnyék réteg ráhelyezése az ÖSSZES dobozra */
.bsd-image-box::after, 
.bsd-image-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Sugárirányú sötétítés: a sarkok feketék, a közepe áttetsző */
    background: radial-gradient(
        ellipse at center, 
        rgba(13, 13, 13, 0) 40%, 
        rgba(13, 13, 13, 0.7) 75%, 
        rgba(13, 13, 13, 1) 95%
    );
    
    /* Belső négyzetes keret árnyék */
    box-shadow: inset 0 0 30px 35px #0d0d0d;
    pointer-events: none; /* Átengedi a kattintásokat a képre */
    z-index: 2; /* Biztosan a kép felett lesz */
}

/* 3. LÉPÉS: Maguk a képek és a szürke helyőrző dobozok formázása */
.bsd-image-box img,
.bsd-image-block img,
.bsd-image-placeholder {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(60%) contrast(115%);
    position: relative;
    z-index: 1;
}
/* Két kép elrendezése egymás mellett a 8. szakaszban */
.bsd-two-images {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* Két egyforma széles oszlop */
    gap: 15px;                      /* Távolság a két kép között */
}

/* Telefonos nézet igazítása a két képhez */
@media (max-width: 600px) {
    .bsd-two-images {
        grid-template-columns: 1fr; /* Mobilon egymás alá ugranak a képek */
        gap: 10px;
    }
}
/* JAVÍTOTT: Most már KIZÁRÓLAG a kétautós 8. szakasz rácsa változik meg! */
.bsd-two-car-section {
    /* A képek 1.3-szor több helyet kapnak, mint a szöveg */
    grid-template-columns: 1.3fr 0.7fr !important; 
    gap: 40px !important; 
}
/* ÚJ KÓD: Ez a rész húzza el KIZÁRÓLAG a képeket egy kicsit balra */
.bsd-two-car-section .bsd-two-images {
    margin-left: -60px !important; /* A negatív szám húzza balra. Ha még balrább szeretnéd, írj be -40px-et! */
}

/* Képernyő igazítás: Mobilon ezt lenullázzuk, hogy telefonon ne lógjon ki a kép a kijelzőről */
@media (max-width: 768px) {
    .bsd-two-car-section .bsd-two-images {
        margin-left: 0 !important;
    }
}
/* ============================================================
   BEMUTATKOZÁS OLDAL: BLACK SHEEP ÍRÓGÉP EFFEKT (FÁJL VÉGÉRE)
   ============================================================ */

/* Biztosítjuk, hogy a szavak egymás alá essenek és balra igazodjanak */
.bsd-main-title.typing-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* A TISZTA, FELLESLEGES KÓDOKTÓL MEGTISZTÍTOTT VERZIÓ */
.type-line-1, .type-line-2 {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 4px solid var(--gold);
}

.type-line-1 {
    animation: gepelesStory 1.5s steps(5) forwards, 
               kurzorVillogasStory 0.5s step-end 3 forwards;
}

.type-line-2 {
    animation: gepelesStory 1.5s steps(6) forwards, 
               kurzorVillogasStory 0.5s step-end infinite;
    animation-delay: 1.5s;
}
/* ============================================================
   MOTOCROSS MAGAZIN-STÍLUSÚ FELUGRÓ ABLAK FORMÁZÁSA (FÁJL VÉGÉRE)
   ============================================================ */
                            
/* A belső tároló doboz átalakítása – KISZÉLESÍTVE A KÉPERNYŐ SZÉLÉIG */
.lightbox-container.mx-magazin-layout {
    display: block !important; 
    
    /* 👇 ITT KIVÁGUK A SZÉLEKRE: 90% helyett 96% széles lesz 👇 */
    width: 96% !important;
    
    /* 👇 ITT ENGEDJÜK NAGYOBBRA: 1000px helyett felmehet egészen 1400px-ig 👇 */
    max-width: 1400px !important;
    
    max-height: 85vh !important; 
    overflow-y: auto !important; 
    background-color: #111111 !important;
    padding: 50px !important;
    border: 1px solid var(--gold) !important;
    border-radius: 8px !important;
}

/* A kép törölve, a stílusát kiürítettük */
.lightbox-magazin-img {
    display: none !important;
}

/* Szövegek belső finomhangolása a magazin elrendezésben */
.mx-magazin-layout #lightbox-title {
    font-size: 2.4rem !important;
    color: var(--gold) !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mx-sub-quote {
    font-size: 1.3rem !important;
    color: #ffffff !important;
    font-style: italic;
    margin-bottom: 25px !important;
}

.mx-section-header {
    font-size: 1.5rem !important;
    color: var(--gold) !important;
    margin-top: 40px !important;
    margin-bottom: 15px !important;
    letter-spacing: 1px;
}

.mx-magazin-layout p {
    font-size: 1.05rem !important;
    color: #cccccc !important;
    line-height: 1.8 !important;
    margin-bottom: 15px !important;
}

/* Pipás listák formázása a felugró ablakban – KÉT OSZLOPRA OSZTVA (4 és 3) */
.mx-popup-list {
    list-style: none !important;
    margin: 25px 0 !important;
    padding: 0 !important;
    
    /* 💥 BEKAPCSOLJUK A RÁCSOT: Két hajszálpontosan egyforma oszlopot csinálunk 💥 */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px 30px !important; /* 15px távolság egymás alatt, 30px a két oszlop között */
}

.mx-popup-list li {
    font-size: 1rem !important;
    color: #ffffff !important;
    margin-bottom: 0 !important; /* A gap szabály már intézi a távolságot */
    display: flex !important;
    align-items: flex-start !important; /* Ha hosszú a sor, a pipa a szöveg tetején marad */
}

.mx-popup-list li .text-check {
    color: var(--gold) !important;
    margin-right: 12px !important;
    font-weight: bold !important;
    flex-shrink: 0 !important; /* Nem engedi a pipát összenyomódni */
}

/* RESPONSIVE: Ha a kijelző túl kicsi (pl. mobilon), akkor visszaugrik egy oszlopra */
@media (max-width: 650px) {
    .mx-popup-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Pontozott listák a lépéseknél */
.mx-bullet-list {
    list-style: none !important;
    margin: 10px 0 20px 20px !important;
}

.mx-bullet-list li {
    font-size: 0.95rem !important;
    color: #aaa !important;
    margin-bottom: 8px !important;
}

.mx-highlight-note {
    font-size: 1.15rem !important;
    color: var(--gold) !important;
    font-weight: bold;
    border-left: 3px solid var(--gold);
    padding-left: 15px;
    margin: 30px 0 !important;
}

.mx-small-header {
    font-size: 1rem !important;
    color: #ffffff !important;
    font-weight: bold;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

.mx-step {
    background-color: #161616;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #222;
}

.mx-step h4 {
    color: var(--gold) !important;
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
}

.mx-shop-soon {
    text-align: center !important;
    color: var(--gold) !important;
    font-size: 2rem !important;
    margin-top: 50px !important;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Mobilnézet: ha nagyon kicsi a kijelző, a kép beugrik a szöveg fölé középre */
@media (max-width: 650px) {
    .lightbox-magazin-img {
        float: none !important;
        width: 60% !important;
        display: block !important;
        margin: 0 auto 30px auto !important;
    }
    .lightbox-container.mx-magazin-layout {
        padding: 30px 20px !important;
    }
}
/* A legalsó 3 pipás pont formázása – FIXEN EGY OSZLOPBAN */
.mx-bottom-list {
    list-style: none !important;
    margin: 15px 0 0 20px !important;
    padding: 0 !important;
}

.mx-bottom-list li {
    font-size: 1rem !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.mx-bottom-list li .text-check {
    color: var(--gold) !important;
    margin-right: 12px !important;
    font-weight: bold !important;
}
/* ============================================================
   GRAFIKA OLDAL: 5. KÁRTYA BELSŐ KIEGYENLÍTÉSE (VÉGLEGES)
   ============================================================ */

/* Aktiváljuk a függőleges elrendezést, és levesszük az alsó falat */
.b-service-card.extra-kartyam {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 25px !important; 
}

/* Szigorúan letoljuk a gombot az oszlop legeslegaljára */
.b-service-card.extra-kartyam .service-card-link {
    margin-top: auto !important;
    display: block !important;
}

/* Betonfal a kép köré: megtiltjuk a böngészőnek, hogy bántsa a fotó méretét */
.b-service-card.extra-kartyam .b-card-img-wrapper {
    flex-shrink: 0 !important;
    height: 240px !important; /* Hajszálpontosan akkora, mint a többi 4 kép magassága */
}

.b-service-card.extra-kartyam .b-card-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* KIZÁRÓLAG A FŐOLDALI 5 OSZLOPOS RÁCS KÁRTYÁI */
.home-services-grid .b-service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
}

/* HOVER: Ragyogás és kiugrás csak a főoldalon */
.home-services-grid .b-service-card:hover {
    transform: translateY(-8px); /* Kiugrás */
    
    /* Prémium sötét/neon ragyogás */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 
                0 0 15px rgba(255, 215, 0, 0.2); 
    
    cursor: pointer;
}

/* Kép finom közelítése a főoldali kártyákon belül */
.home-services-grid .b-service-card .b-card-img-wrapper img {
    transition: transform 0.3s ease;
}

.home-services-grid .b-service-card:hover .b-card-img-wrapper img {
    transform: scale(1.03);
}
/* KIZÁRÓLAG A RAGYOGÁS HOZZÁADÁSA A FŐOLDALI KÁRTYÁKHOZ HOVERKOR */
.services-grid .service-card-link:hover .service-card {
    /* Kitöröltük a fix box-shadow-t, így nem veszik össze az animációval */
    animation: fooldalPulse 1.4s infinite ease-in-out !important;
}

/* 1. A LÜKTETŐ ANIMÁCIÓ */
@keyframes fooldalPulse {
    0% {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 
                    0 0 15px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 
                    0 0 25px rgba(255, 215, 0, 0.85);
    }
    100% {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 
                    0 0 15px rgba(255, 215, 0, 0.4);
    }
}

/* 2. JAVÍTOTT LÜKTETÉS */
.services-grid .service-card-link:hover .service-card {
    animation: fooldalPulse 1.4s infinite ease-in-out !important;
}

/* A link fixálása */
.services-grid .service-card-link {
    display: block;
    text-decoration: none;
}
/* Ez a szabály a linket láthatatlanul kiteríti a teljes kártya főlé */
.service-card-link-full::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; /* Biztosítja, hogy legfelül legyen és mindenhol kattintható legyen */
    cursor: pointer;
}
/* KIKÉNYSZERÍTETT JAVÍTÁS: Ha a kártya link (a tag), akkor is működjön a flexbox és a kattintás */
.five-columns-grid a.b-service-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    cursor: pointer !important;
}
/* ============================================================
   KIZÁRÓLAG A BEMUTATKOZÁS OLDAL SZÖVEGMEGNÖVELÉSE
   ============================================================ */

/* A normál, szürke szöveges részek megnövelése (pl. GT-R, Részletek szakaszok) */
.bsd-page-wrapper .bsd-text-block p {
    font-size: 1.25rem !important; /* 1rem-ről felemelve, sokkal vaskosabb és olvashatóbb */
    line-height: 1.7 !important;   /* Kellemes sorköz, hogy ne folyjanak össze a nagybetűk */
}

/* A középre zárt, 10 éves történet bekezdéseinek növelése (3. szakasz) */
.bsd-page-wrapper .bsd-center-content p {
    font-size: 1.3rem !important;  /* 1.05rem-ről felemelve */
    line-height: 1.2 !important;   /* Szellős, elegáns sormagasság */
}

/* A pirossal kiemelt fontos mondatok (5. és 6. szakasz) */
.bsd-page-wrapper .bsd-highlight-red-text {
    font-size: 1.35rem !important; /* Még nagyobb hangsúly a lényegnek */
}

/* A szakaszok alján lévő összegző mondatok (pl. "Mert az igazi végeredmény...") */
.bsd-page-wrapper .bsd-important-footer {
    font-size: 1.3rem !important;  /* 1.05rem-ről felemelve */
    font-weight: bold !important;  /* Kap egy kis plusz vastagságot is */
}

/* --- MOBIL FINOMHANGOLÁS --- */
/* Ha telefonon túl nagynak tűnnének, ott egy picit visszavesszük, hogy ne lógjon ki a kijelzőről */
@media (max-width: 768px) {
    .bsd-page-wrapper .bsd-text-block p,
    .bsd-page-wrapper .bsd-center-content p,
    .bsd-page-wrapper .bsd-important-footer {
        font-size: 1.1rem !important;
    }
    .bsd-page-wrapper .bsd-highlight-red-text {
        font-size: 1.15rem !important;
    }
}
/* KIZÁRÓLAG A BEMUTATKOZÁS OLDAL TÖRTÉNET-CÍMÉNEK NÖVELÉSE */
.bsd-page-wrapper .bsd-history-title {
    font-size: 1.8rem !important;   /* 1.3rem-ről felemelve, szép, hangsúlyos méret */
    letter-spacing: 3px !important; /* Egy picit széthúzzuk a betűket a prémium hatásért */
    line-height: 1.4 !important;    /* Biztosítjuk a jó sorközt, ha mobilon két sorba törne */
    margin-bottom: 50px !important; /* 40px-ről megemelve, hogy a nagyobb cím alatt tágasabb legyen a hely */
}

/* --- MOBIL NÉZET --- */
/* Telefonon egy picit visszavesszük a méretet, hogy garantáltan kényelmesen elférjen */
@media (max-width: 768px) {
    .bsd-page-wrapper .bsd-history-title {
        font-size: 1.35rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 35px !important;
    }
}
/* ============================================================
   KIZÁRÓLAG A TÖRTÉNET SZEKCIÓ KISZÉLESÍTÉSE (3. SZAKASZ)
   ============================================================ */

.bsd-page-wrapper .bsd-center-section {
    /* 850px-ről felemeljük 1200px-re, így maximálisan kihasználja a monitor széleit */
    max-width: 1220px !important; 
    
    /* Alul-felül megtartjuk a szellős 80px távolságot, vízszintesen középen tartjuk */
    margin: 80px auto !important; 
}

.bsd-page-wrapper .bsd-center-content {
    width: 100% !important;
}

/* --- MOBIL NÉZET --- */
/* Telefonon nincs ennyi hely, ott visszaállunk az automatikus teljes szélességre */
@media (max-width: 768px) {
    .bsd-page-wrapper .bsd-center-section {
        max-width: 100% !important;
        margin: 50px auto !important; /* Mobilon egy picit kisebb távolság is elég */
    }
}
.packages-row img:hover {
    opacity: 1 !important;
    filter: grayscale(0) !important;
}
/* ============================================================
   KIZÁRÓLAG A SZÍNVÁLTÓ OLDAL FELUGRÓ KÉPÉNEK TELJES KITÖLTÉSE
   ============================================================ */
.szinvalto-left {
    align-items: stretch !important;
    padding: 0 !important;
}

.szinvalto-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Csak itt vágja le a fekete sávokat! */
}
/* ============================================================
   KIZÁRÓLAG A GRAFIKA OLDAL 3 OSZLOPOSRA KÉNYSZERÍTÉSE
   ============================================================ */
.five-columns-grid.grafika-3-columns {
    /* Felülírjuk az 5 oszlopot 3-ra, de megtartjuk a minmax és rugalmas tulajdonságokat */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Biztosítjuk, hogy az egyedi Grafika oldali arany ragyogás az UTOLSÓ (most már a 3.) oszlopra is tökéletesen üljön */
body:has(a[href="grafika.html"].active) .grafika-3-columns .b-service-card:last-of-type:hover {
    animation: fooldalCsomagAranyPulzalas 1.5s infinite alternate ease-in-out !important;
    border-color: var(--gold) !important; 
    transform: translateY(-5px) !important; 
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

/* Reszponzív finomhangolás: Tableten és mobilon a meglévő szabályok szerint törik tovább */
@media (max-width: 900px) {
    .five-columns-grid.grafika-3-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .five-columns-grid.grafika-3-columns {
        grid-template-columns: 1fr !important;
    }
}
/* ============================================================
   GRAFIKA 3 OSZLOP: 1400PX MAX SZÉLESSÉG KIEGYENLÍTÉSE
   ============================================================ */

/* Felülbíráljuk a 95%-os kényszerített szélességet, és visszaállítjuk a gyári 1400px-es konténert */
.building-services .container.five-columns-grid.grafika-3-columns {
    max-width: 1400px !important;
    width: 94% !important; /* Biztosítja a kellemes oldalsó margót, ha kisebb a monitor */
}

/* Finomhangolás: Mivel 3 oszlop van, adunk egy picivel nagyobb rést a kártyák közé a szellősebb magazin-hatásért */
.five-columns-grid.grafika-3-columns {
    gap: 30px !important;
}
/* ============================================================
   BLACK SHEEP EXTRÁK: PPF-STÍLUSÚ PRÉMIUM KATALÓGUS
   ============================================================ */
.extrak-catalog-section {
    background-color: #0b0b0b;
    padding: 60px 0 80px 0;
    width: 100%;
}

.extrak-catalog-container {
    max-width: 1400px !important; /* Pontosan igazodik a fejléc és a menü széléhez */
    width: 94%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 35px; /* Távolság a PPF-stílusú kártyák között */
}

/* A képen látható nagy, lekerekített, sötét PPF kártya alapja */
.extra-product-card {
    background-color: #141414; /* Kicsit világosabb sötétszürke a háttérnél a tökéletes kontrasztért */
    border: 1px solid #222222; /* Finom szürke keret a kép alapján */
    border-left: 4px solid var(--gold); /* Az elmaradhatatlan arany márka-él a bal oldalon */
    border-radius: 6px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Finom lebegő effekt: ha ráviszi az egeret, elegánsan jelez a kártya */
.extra-product-card:hover {
    transform: translateY(-3px);
    border-color: #333333;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.05);
}

/* Fejléc elrendezés a kártyán belül */
.extra-product-header {
    margin-bottom: 25px;
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 15px;
}

.extra-product-header h2 {
    font-size: 2rem;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.extra-product-sub {
    font-size: 1.05rem;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Folyószövegek stílusa a kártyán belül */
.extra-product-body p {
    font-size: 1.1rem;
    color: #b7a899;
    line-height: 1.7;
    margin-bottom: 15px;
}

.extra-product-body p:last-child {
    margin-bottom: 0;
}

/* Egyedi belső LED jelzés a motorháztető kártyájában */
.extra-card-badge {
    background-color: rgba(212, 175, 55, 0.03);
    border-left: 2px solid var(--gold);
    padding: 15px 20px;
    margin: 20px 0;
    font-size: 1.05rem;
    color: #cccccc;
    line-height: 1.6;
}

.extra-card-badge span {
    color: var(--gold);
    font-weight: bold;
}

/* MOBIL OPTIMALIZÁLÁS: Kisebb kijelzőkön kompaktabbá tesszük a belső tereket */
@media (max-width: 768px) {
    .extra-product-card {
        padding: 25px;
    }
    .extra-product-header h2 {
        font-size: 1.6rem;
    }
    .extra-product-sub {
        font-size: 0.95rem;
    }
    .extra-product-body p {
        font-size: 1rem;
    }
}
/* ============================================================
   KIZÁRÓLAG A BLACK SHEEP EXTRÁK OLDAL KÉTOSZLOPOS HARMONIKÁJA
   ============================================================ */

/* Aktiváljuk a flexboxot a kártyákon belüli szöveg-kép párosra */
.extrak-details-grid .detail-flex-container {
    display: flex !important;
    gap: 40px !important; /* Szép távolság a szöveg és a kép között */
    align-items: center !important; /* Függőlegesen is tökéletesen középre zárja a képet a szöveg mellett */
    width: 100% !important;
}

/* A szöveges rész megkapja a terület nagyobbik felét */
.extrak-details-grid .detail-text-wrap {
    flex: 1.2 !important; 
}

/* A kép külső tároló doboza */
.extrak-details-grid .detail-item .accordion-content {
    flex: 0.8 !important; 
    display: block !important;
    width: auto !important;
    transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.3s ease !important;
}

/* 👇 JAVÍTOTT KÉP SZABÁLY: Töröltük a max-height korlátot, így a százalék már azonnal működik! 👇 */
.extrak-details-grid .detail-item .accordion-content img {
    width: 80% !important;        /* 👈 ITT ÁLLÍTSD A MÉRETET! Írd át 90%-ra vagy 100%-ra, most már azonnal tágulni fog! */
    max-height: none !important;  /* 💥 EZ A LÉNYEG: Kikapcsolja a régi 600px-es tiltást, ami lefogta a képet 💥 */
    height: auto !important;    
    margin: 0 auto !important;  
    display: block !important;
}

/* Amikor aktív a kártya, a kép gyönyörűen megkapja a teljes fényerőt és méretet a szöveg mellett */
.extrak-details-grid .detail-item.active .accordion-content {
    max-height: 1200px !important;
    opacity: 1 !important;
}

/* --- MOBIL ÉS TABLET FINOMHANGOLÁS --- */
/* Ha a kijelző kisebb, mint 992px, a kép visszaugrik a szöveg alá középre, így telefonon sem esik szét */
@media (max-width: 992px) {
    .extrak-details-grid .detail-flex-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .extrak-details-grid .detail-text-wrap {
        width: 100% !important;
    }
    .extrak-details-grid .detail-item .accordion-content {
        width: 100% !important;
        text-align: center !important;
    }
    .extrak-details-grid .detail-item .accordion-content img {
        margin: 0 auto !important;
        max-width: 90% !important;
    }
}
/* ============================================================
   KIKÉNYSZERÍTETT KÉP MEGJELENÍTÉS AZ EXTRÁK OLDALON
   ============================================================ */
.extrak-details-grid .detail-item .accordion-content {
    max-height: none !important; /* Felülírja a 0 magasságot */
    opacity: 1 !important;        /* Felülírja a láthatatlanságot */
    overflow: visible !important; /* Engedi látszani a képet és a ragyogást */
}
/* ============================================================
   EXTRÁK OLDAL: KÉPMÉRET CSÖKKENTÉSE A FELÉRE
   ============================================================ */

/* A kép tároló dobozát összeszűkítjük a felére (50%) */
.extrak-details-grid .detail-item .accordion-content {
    flex: 0.4 !important; /* Kevesebb helyet kér a rácsban a szöveg javára */
}

/* Magát a képet lefelezzük, és középre igazítjuk */
.extrak-details-grid .detail-item .accordion-content img {
    width: 50% !important;     /* Szélesség a felére csökkentve */
    height: auto !important;    /* Arányos magasság, hogy ne torzuljon */
    margin: 0 auto !important;  /* Hajszálpontosan középre teszi a dobozában */
    display: block !important;
}
/* Megtartja a kép alap formázását az Extrák oldalon, de mozgás és neon ragyogás nélkül */
.extrak-fix-img {
    border-radius: 6px !important;
    border: 1px solid #222 !important;
}
/* Az új alsó ablak alaphelyzetben rejtve van */
.extrak-gordulo-tartalom {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease-in-out, margin-top 0.3s ease, opacity 0.4s ease;
    margin-top: 0;
    width: 100%;
}

/* Amikor a sor aktív lesz, ez az új alsó ablak gördül le lágyan */
.detail-item.active .extrak-gordulo-tartalom {
    max-height: 1000px !important;
    margin-top: 30px !important;
    opacity: 1 !important;
}
/* KIZÁRÓLAG AZ EXTRÁK OLDAL LEGÖRDÜLŐ CÍMÉNEK KÖZÉPRE IGAZÍTÁSA */
.extrak-gordulo-tartalom .mx-step h4 {
    text-align: center !important;
    margin-bottom: 25px !important;
}

/* 3 OSZLOPOS KÉPSOR AZ EXTRÁK LEGÖRDÜLŐ ABLAKÁBAN */
.extrak-popup-images-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 egyforma oszlop */
    gap: 20px !important; /* Távolság a képek között */
    width: 100% !important;
    margin-top: 15px !important;
}

/* A legördülőben lévő 3 kép alapméretezése és letisztítása */
.extrak-popup-images-row img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
    border: 1px solid #222 !important;
}

/* Ha a kijelző kisebb, mint 650px (mobil), a 3 kép egymás alá ugrik */
@media (max-width: 650px) {
    .extrak-popup-images-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}