html {
scroll-behavior: smooth;
}
body {
font-family: "Raleway", Arial, sans-serif;
padding-top: 0; /* <-- EZ TOLJA LE A TARTALMAT, HOGY A MENÜ NE TAKARJA EL */
}
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
h2 {
letter-spacing: 4px
}
h4{
font-size: 23pt;
}
.tc-row-padding img {
margin-bottom: 20px
}
.tc-color {
background-color: #f1b67e;
color: black;
}
.footbox {
border: 2px solid lightgray;
border-radius: 20px;
text-align: center;
font-weight: bold;
background-color:#f1b67e;
max-width:600px;
margin:auto;
padding-top: 10px;
padding-bottom: 10px;
}
.jobb{
margin-left:50%;
background-color: #61959C;
text-align: right;
}
.bal{
margin-right:50%;
background-color: #FABD49;
text-align: left;
}
.kozep{
margin: auto ;
padding:10px;
}
/* Ezt a keretet fogjuk használni a két doboz összefogására */
.flex-container {
display: flex;
flex-wrap: wrap; /* Mobilon egymás alá teszi, ha kicsi a hely */
gap: 20px; /* Távolság a két doboz között */
margin-top: 20px;
}
/* A gyerek elemek (a dobozok) egyenlő szélesek lesznek */
.flex-container > div {
flex: 1; /* Egyenlő méretet kapnak */
min-width: 300px; /* Nem hagyjuk, hogy túl keskenyek legyenek mobilon */
}
.hatterszin{
background-color:white}
section.active {
opacity: 1;
}
.gmap_canvas {
overflow: hidden;
background: none !important;
height: 400px;
max-width: 100%;
margin: auto;
flex-grow: 1
}
iframe#gmap_canvas {
border-radius: 20px;
width: 100%;
}
/* Lábléc - Narancssárga */
footer {
background-color: #f1b67e;
color: black;
padding: 25px 15px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
}
footer a {
color: black;
font-size: 26px;
transition: opacity 0.3s ease;
}
footer a:hover {
opacity: 0.7;
}
footer p {
margin-top: 10px;
font-size: 14px;
}
.termicont-section {
background-color: lightgray;
color: black;
padding: 40px 20px;
margin-bottom: 40px;
text-align: center;
}
/* Új osztály a képek és szövegek egymás mellé rendezéséhez */
.kepes-szekcio {
display: flex;
align-items: center; /* Függőlegesen középre igazítja a tartalmat */
justify-content: center; /* Vízszintesen középre húzza az egészet */
gap: 40px; /* Távolság a kép és a szövegdoboz között */
width: 100%;
margin: auto;
padding: 0 20px;
box-sizing: border-box;
}
.adat{
font-size: 8pt;
}
/* A beszúrt képek stílusai */
.kepes-szekcio img {
width: 45%; /* A kép a rendelkezésre álló hely 45%-át foglalja el */
max-width: 500px;
height: auto;
border-radius: 20px; /* Hogy a képek is olyan kerekítettek legyenek, mint a dobozaid */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Egy kis árnyék (opcionális) */
}
/* Mobilos nézet: kis kijelzőkön egymás alá kerül a kép és a szöveg */
@media (max-width: 900px) {
.kepes-szekcio {
flex-direction: column;
}
.kepes-szekcio img {
width: 90%;
margin-bottom: 20px;
}
/* Kikapcsoljuk az eltolásokat mobilon, hogy középen maradjanak */
.bal, .jobb {
margin-left: auto !important;
margin-right: auto !important;
}
}
.lekerekitett-gomb {
background-color: #61959C; /* A gomb háttérszíne (kék) */
color: white; /* A szöveg színe (fehér) */
padding: 12px 24px; /* Belső távolság: 12px fentre/alulra, 24px jobbra/balra */
border: none; /* Alapértelmezett ronda keret eltávolítása */
font-size: 16px; /* Betűméret */
cursor: pointer; /* Az egérmutató "kis kézzé" változik felette */
/* EZ A LÉNYEG: */
border-radius: 8px; /* Ezzel kerekíted le a sarkokat! */
}
/* Egy kis extra: ha fölé viszed az egeret, elsötétül egy kicsit */
.lekerekitett-gomb:hover {
background-color: #f1b67e;
}
.lekerekitett{
background-color: lightgray; /* A gomb háttérszíne (kék) */
color: black; /* A szöveg színe (fehér) */
padding: 12px 24px; /* Belső távolság: 12px fentre/alulra, 24px jobbra/balra */
border: none; /* Alapértelmezett ronda keret eltávolítása */
font-size: 16px; /* Betűméret */
/* EZ A LÉNYEG: */
border-radius: 8px; /* Ezzel kerekíted le a sarkokat! */
}
.lekerekitett-szoveg{
background-color: white; /* A gomb háttérszíne (kék) */
color: black; /* A szöveg színe (fehér) */
padding: 12px 24px; /* Belső távolság: 12px fentre/alulra, 24px jobbra/balra */
border: none; /* Alapértelmezett ronda keret eltávolítása */
font-size: 16px; /* Betűméret */
width: 40%;
/* EZ A LÉNYEG: */
border-radius: 8px; /* Ezzel kerekíted le a sarkokat! */
}
#myBtn {
position: fixed;
bottom: 25px;
right: 25px;
background-color: #61959C; /* Kék alap */
color: #ffffff;
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease;
padding:10px;
}
#myBtn:hover {
background-color: #f1b67e; /* Narancssárgára vált */
}
.termicont-section {
background-color: white;
color: black;
padding: 40px 20px;
margin-bottom: 40px;
text-align: center;
}
/* Képek megjelenése */
.termicont-img-container {
background-color: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.szoveg{
line-height: 150%;
}
/* --- ÚJ GALÉRIA ÉS FLEXBOX ELRENDEZÉS --- */
.szekcio-tartalom {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
padding: 20px;
}
/* Ha a szöveg jobbra van, a kép balra kerüljön */
.forditott-sorrend {
flex-direction: row-reverse;
}
/* Felülírjuk az eredeti .bal és .jobb margókat az egymás melletti nézethez */
.szekcio-tartalom .textbox {
margin: 0 !important;
flex: 1;
max-width: none !important;
}
/* Képgaléria alapbeállítások */
.kep-galeria {
flex: 1;
display: flex;
justify-content: center;
}
.kep-galeria img {
width: 100%;
height: auto;
border-radius: 15px;
object-fit: cover;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Négyzet alakzat (2x2) */
.alakzat-negyzet {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
/* A fő tároló konténer, ami bekapcsolja a Flexbox-ot */
.harom-oszlopos-szekcio {
display: flex;
align-items: center; /* Függőlegesen tökéletesen középre zárja a képeket és a szöveget */
justify-content: space-between; /* Elosztja a helyet az oszlopok között */
gap: 20px; /* Biztosítja a távolságot (üreget) az oszlopok között */
/* Nem engedi túl szélesre nyúlni a monitortól függetlenül */
margin: 50px auto; /* Középre teszi a teljes blokkot a weboldalon belül */
padding: 0 20px; /* Kis belső margó a széleken */
}
/* Az oszlopok alapbeállítása */
.oszlop {
box-sizing: border-box;
}
/* A két szélső kép-oszlop aránya */
.kep-oszlop {
width: 100%;
flex: 1; /* Kisebb súlyt kap az elosztásban */
text-align: center; /* Középre igazítja a képet az oszlopon belül */
}
/* A középső szöveg-oszlop aránya */
.szoveg-oszlop {
max-width: 35%;
flex: 2; /* Kétszer akkora helyet kap, mint egy kép-oszlop */
text-align: center; /* Ha szeretnéd, hogy a szöveg is középre zárt legyen */
}
/* Biztosítjuk, hogy a képek ne nyúljanak túl az oszlopukon */
.oszlop img {
max-width: 100%; /* A kép szélessége felveszi az oszlop méretét */
height: auto; /* Megtartja az eredeti képarányt, nem torzul */
border-radius: 8px; /* Opcionális: picit lekerekíti a képek sarkait */
display: block;
margin: 0 auto;
}
/* === MOBILBARÁT JAVÍTÁS (RESPONSIVENESS) === */
/* Ha a kijelző kisebb, mint 768px (pl. telefon), az oszlopok egymás alá ugranak */
@media (max-width: 768px) {
.harom-oszlopos-szekcio {
flex-direction: column; /* Egymás mellől egymás alá rendezi őket */
gap: 20px;
}
.szoveg-oszlop {
order: -1; /* Opcionális: mobilon a szöveg kerüljön legfelülre, ne a bal kép! */
}
}
/* Piramis alakzat (1 fent, 2 lent) */
.alakzat-piramis {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.alakzat-piramis .piramis-csucs {
width: 90%;
height: 80%;
transition: all 0.4s ease;
}
.alakzat-piramis .piramis-alap {
width: 45%;
height: 100%;
transition: all 0.4s ease;
}
/* fordított Piramis alakzat (2 fent, 1 lent) */
.alakzat-inverzpiramis {
display: flex;
flex-wrap:wrap-reverse;
justify-content: center;
gap: 15px;
}
.alakzat-inverzpiramis .invpiramis-csucs {
width: 100%;
height: 80%;
transition: all 0.4s ease;
}
.alakzat-inverzpiramis .invpiramis-alap {
width: 48%;
height: 100%;
transition: all 0.4s ease;
text-align: center;
}
.alakzat-inverzpiramis .invpiramis-alap:hover {
transform: translateY(-10px); /* Felemelkedik 10 pixelt */
box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Erősebb, szétterülő árnyék */
}
.alakzat-inverzpiramis .invpiramis-csucs:hover{
transform: translateY(-10px); /* Felemelkedik 10 pixelt */
box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Erősebb, szétterülő árnyék */
}
/* ========================================== */
/* TÖKÉLETES MENÜ CSS KÓD */
/* ========================================== */
/* --- 1. ASZTALI FŐMENÜ KINÉZETE (Javított, fixen ragadós verzió) --- */
nav#oldalMenu {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 5px;
padding: 15px;
position: sticky !important;
top: 0;
width: 100% ;
z-index: 1500;
box-sizing: border-box;
margin-bottom: 40px;
/* === EZT MÓDOSÍTOTTUK: Minden háttér és keret eltávolítása === */
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
border: none;
}
/* EZ JAVÍTJA A VISSZANAGYÍTÁSI HIBÁT: Felülírja a mobilos Javascriptet! */
@media screen and (min-width: 1251px) {
nav#oldalMenu {
width: 100% !important;
}
}
/* Csak a fő gombok kapják meg a narancs hátteret */
nav#oldalMenu > a {
font-family: "Raleway", Arial, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: transparent;
color: black;
padding: 16px 18px;
border-radius: 20px;
transition: all 0.3s ease;
white-space: nowrap;
}
nav#oldalMenu > a:hover {
background-color: #f1b67e;
color: black;
transform: translateY(-2px);
}
/* --- 2. ASZTALI LENYÍLÓ MENÜ --- */
.lenyilo-menu {
position: relative;
display: inline-block;
margin: 0 !important;
padding: 0 !important;
width: max-content;
}
.lenyilo-gomb {
font-family: "Raleway", Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
background-color: transparent;
color: black;
padding: 16px 18px;
font-size: 16px;
border: none;
cursor: pointer;
font-weight: bold;
border-radius: 20px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
white-space: nowrap;
}
.lenyilo-menu:hover .lenyilo-gomb {
background-color: #f1b67e;
color: black;
}
.lenyilo-tartalom {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f9f9f9;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
border-radius: 8px;
overflow: hidden;
}
.lenyilo-tartalom a {
color: #333;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: left;
font-family: "Raleway", sans-serif;
border-bottom: 1px solid #eee;
font-weight: bold;
background-color: transparent;
border-radius: 0;
}
.lenyilo-tartalom a:last-child {
border-bottom: none;
}
.lenyilo-tartalom a:hover {
background-color: #61959C;
color: black;
}
/* === KÖZEPES KÉPERNYŐK (Pl. Laptopok) === */
@media screen and (min-width: 1101px) and (max-width: 1449px) {
/* Lecsökkentjük a menüpontok közötti oldalsó távolságot és a betűt, hogy elférjenek */
header.flex-container a,
.w3-bar-item,
.nav-link {
padding-left: 10px !important; /* Kisebb rés a gombok között left */
padding-right: 10px !important; /* Kisebb rés a gombok között right */
font-size: 11pt !important; /* Kicsit kisebb betűméret */
}
.bezar-gomb {
display: none;
}
}
@media screen and (min-width: 1251px) {
.lenyilo-menu:hover .lenyilo-tartalom {
display: block;
}
}
/* --- 3. MOBIL NÉZET ÉS HAMBURGER MENÜ (1100px ALATT) --- */
.mobil-hamburger {
display: none;
font-size: 28px;
cursor: pointer;
background-color: transparent;
border: none;
padding: 10px 20px;
color: #333;
font-weight: bold;
/* === ÚJ MEGOLDÁS A BAL FELSŐ SAROKHOZ === */
position: absolute; /* Kiszabadítja a gombot a többi elem fogságából */
top: 15px; /* Távolság az oldal tetejétől */
right: 15px; /* Távolság az oldal bal szélétől */
margin: 0; /* Nullázzuk a korábbi középre igazítást */
}
.bezar-gomb {
display: none;
}
@media screen and (max-width: 1250px) {
.mobil-hamburger {
display: block;
}
nav#oldalMenu {
height: 100vh !important;
width: 0; /* EZ A KULCS: Alapból 0 széles, tehát láthatatlan */
position: fixed !important;
z-index: 2000;
top: 0;
right: 0;
background-color: #333 !important;
overflow-y: auto !important;
overflow-x: hidden; /* Ez rejti el a tartalmat, amíg a menü be van csukva */
padding: 60px 0 40px 0 !important;
margin: 0 !important;
transition: 0.4s; /* Ettől csúszik be szépen */
flex-wrap: nowrap;
display: block !important;
}
nav#oldalMenu > a, .lenyilo-menu {
display: block !important;
width: 100% ;
text-align: left;
margin: 0;
border-radius: 0;
}
nav#oldalMenu > a {
color: white !important;
background-color: transparent;
padding: 15px 25px;
font-size: 18px;
border-bottom: 1px solid #555;
}
.lenyilo-gomb {
width: 100%;
text-align: left;
background-color: transparent;
color: white !important;
border-radius: 0;
padding: 15px 25px;
border-bottom: 1px solid #555;
}
.lenyilo-gomb:hover {
background-color: #444;
}
.bezar-gomb {
display: block !important;
position: absolute !important;
top: 10px !important;
right: 20px !important;
font-size: 40px !important;
padding: 0 !important;
width: auto !important;
background: transparent !important;
border: none !important;
}
.lenyilo-tartalom {
display: none;
position: relative !important;
background-color: #444;
box-shadow: none;
width: 100%;
margin-top: 0;
border-radius: 0;
}
.lenyilo-tartalom.nyitva {
display: block !important;
}
.lenyilo-tartalom a {
padding: 15px 25px 15px 45px !important;
font-size: 16px;
border-bottom: 1px solid #555;
color: white;
background-color: transparent;
}
.lenyilo-tartalom a:hover {
background-color: #555;
}
}
header.flex-container {
position: fixed; /* Lebegővé teszi a fejlécet a háttérkép felett */
top: 0; /* Fixen az oldal legtetejére zárja */
left: 0;
width: 100%; /* Kitölti a teljes szélességet */
z-index: 2000; /* Biztosítja, hogy a logó és a menü a kép FELETT legyen */
margin-top: 0 !important; /* Felülírja a korábbi 20px-es felső margót */
box-sizing: border-box;
padding: 10px 20px; /* Ad egy kis belső biztonsági távolságot a logónak */
transition: transform 0.4s ease; /* Lágy fel-le csúszás animáció */
}
.counter {
font-weight: bold;
font-size: 1.5em;
color: #61959C; /* A gombod színe */
}
/* A mozgó animáció */
@keyframes feluszas {
0% {
transform: translateY(30px); /* Kezdőpozíció: 30px-el lejjebb */
opacity: 0; /* Kezdőállapot: átlátszó */
}
100% {
transform: translateY(0); /* Végpozíció: eredeti helyén */
opacity: 1; /* Végállapot: teljesen látszik */
}
}
/* Ezt a class-t adjuk hozzá a számlálókhoz, ha elindítjuk */
.start-animation {
display: inline-block;
animation: feluszas 1s ease-out forwards;
}
#lejatszo-gomb {
background-color: #f1b67e; /* Az oldalad narancssárga színe */
color: white;
border: none;
border-radius: 50%; /* Ettől lesz tökéletes kör */
width: 80px;
height: 80px;
font-size: 35px;
cursor: pointer;
z-index: 10; /* Hogy mindenképp a háttérkép felett legyen */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
transition: transform 0.3s ease, background-color 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Ez húzza pontosan középre */
}
#lejatszo-gomb:hover {
/* A translate(-50%, -50%) MINDIG legyen ott legelöl! */
transform: translate(-50%, -50%) scale(1.1); /* A scale opcionális, ha nagyítani is akarod */
/* Ha nem szeretnéd, hogy kék legyen, itt állítsd vissza a saját színedre, pl: */
background-color: #61959C; /* Cseréld ki a te színkódodra */
color: white;
}
/* Mobilon a hamburger gomb is legyen lebegő és üveghatású! */
@media screen and (max-width: 1250px) {
.mobil-hamburger {
position: fixed !important; /* Hogy görgetésnél is ott maradjon a sarokban */
top: 15px;
left: auto;
right: 15px;
z-index: 2100;
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
}
/* ========================================== */
/* 4. MODERN 3D KÁRTYÁS ELRENDEZÉS */
/* ========================================== */
.modern-kartya {
background: lightgray;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.02);
font-size: 13pt;
font-family: serif;
text-align: justify;
transition: all 0.4s ease; /* Lágy mozgás */
}
.modern-kartya3 {
height: 350px !important; /* Ezt az értéket írd át arra a magasságra, ami neked a legideálisabb */
width: 100% !important; /* Kitölti a rendelkezésre álló szélességet */
object-fit: cover !important; /* Kitölti a dobozt torzulás nélkül (a széleket levághatja) */
display: block;
margin: 0 auto; /* Középre igazítás */
border-radius: 8px; /* Opcionális: egy kis saroklekerekítés, hogy modernebb legyen */
transition: all 0.4s ease; /* Lágy mozgás */
}
.modern-kartya3:hover{
transform: translateY(-10px); /* Felemelkedik 10 pixelt */
box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Erősebb, szétterülő árnyék */
}
.modern-kartya2 {
border-radius: 16px;
padding: 40px; /* <-- EZT NÖVELD MEG (pl. 10px-ről 40px-re vagy nagyobbra) */
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.02);
font-size: 13pt;
font-family: serif;
text-align: justify;
transition: all 0.4s ease;
/* Opcionális: Ha azt akarod, hogy lefelé garantáltan hosszabb/magasabb legyen: */
min-height: 250px;
}
/* Amikor ráviszed az egeret (Hover) */
.modern-kartya:hover {
transform: translateY(-10px); /* Felemelkedik 10 pixelt */
box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Erősebb, szétterülő árnyék */
}
/* ========================================== */
/* 3. BEÚSZÓ ANIMÁCIÓK ALAPJAI */
/* ========================================== */
.animacio-rejtett {
opacity: 0;
transform: translateY(50px); /* 50 pixellel lejjebbről indul */
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* Ezt az osztályt a JavaScript fogja rátenni, amikor a képernyőre ér */
.animacio-megjelenik {
opacity: 1;
transform: translateY(0);
}
.szovegle{
margin-top: 10%;
}
@media (max-width:1100px) {
.szovegle{
margin-top: 15%
}
.nyitokep-szoveg h1 {
font-size: 28pt;
}
.nyitokep-szoveg p {
font-size: 16pt;
}
}
@media (max-width:900px) {
.szovegle{
margin-top: 25%
}
.nyitokep-szoveg h1 {
font-size: 28pt;
}
.nyitokep-szoveg p {
font-size: 16pt;
}
}
@media (max-width:800px) {
.szovegle{
margin-top: 27%
}
.nyitokep-szoveg h1 {
font-size: 28pt;
}
.nyitokep-szoveg p {
font-size: 16pt;
}
}
@media (max-width:700px) {
.szovegle{
margin-top: 30%
}
.nyitokep-szoveg h1 {
font-size: 28pt;
}
.nyitokep-szoveg p {
font-size: 16pt;
}
}
@media (max-width:500px) {
.szovegle{
margin-top: 35%
}
.nyitokep-szoveg h1 {
font-size: 28pt;
}
.nyitokep-szoveg p {
font-size: 16pt;
}
}
@media (max-width:430px) {
.szovegle{
margin-top: 40%
}
.nyitokep-szoveg h1 {
font-size: 21pt;
}
.nyitokep-szoveg p {
font-size: 13pt; /* A 9pt valószínűleg túl apró lett volna, így olvashatóbb */
}
.nyitokep-szoveg {
max-width: 95%; /* Itt volt a hiba (30px), most már kitölti a kijelzőt */
}
}
/* A nyitókép formázása: felkészítjük a szöveg és gomb egymás alá rendezésére */
.nyitokep {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
text-align: center;
padding: 0 20px;
}
/* Az elegáns beúszó szöveg doboza (Csak az index.html-en fog élesedni) */
.nyitokep-szoveg {
max-width: 1000px;
width: 90%; /* Ez a sor biztosítja, hogy mobilon befelé húzódjon a széle */
color: white;
z-index: 9;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
/* ANIMÁCIÓ INDÍTÁSA */
opacity: 0;
animation: elegansBeuszas 1.2s ease-out forwards;
animation-delay: 0.3s;
}
.nyitokep-szoveg h1 {
font-size: 28pt;
margin-bottom: 15px;
color: #ff7b00; /* A logótok narancssárga színe */
}
.nyitokep-szoveg p {
font-size: 16pt;
font-weight: 300;
line-height: 1.6;
margin: 0;
}
/* Beúszó animáció definíciója */
@keyframes elegansBeuszas {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#kartya-cim{
font-size: 25pt;
font-family: Raleway, serif;
}
#kartya-kep{
max-width: 800px ;
border-radius: 5%;
}
.kartya-kontener {
display: flex;
gap: 40px;
padding: 30px;
font-size: 13pt;
font-family: Raleway, serif;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: opacity 0.4s ease, background-color 0.5s ease;
/* ÚJ SZABÁLYOK A KILÓGÁS ELLEN: */
box-sizing: border-box; /* A belső margó (padding) nem növeli a doboz méretét */
max-width: 100%; /* Soha nem lóg ki a képernyőről */
overflow: hidden; /* Ha valami mégis kilógna, a doboz elrejti/levágja */
}
/* Bal oldal: a tartalom */
.kartya-bal {
order: 2 !important;
width: 100% !important;
transition: opacity 0.4s ease;
min-height: 500px !important;
/* ÚJ SZABÁLY: Engedi a böngészőnek, hogy összenyomja a szöveget/képet, ha szűk a hely */
min-width: 0;
word-wrap: break-word; /* Ha van egy extrém hosszú szó, azt is eltöri, nem tolja ki a dobozt */
}
.kartya-bal img {
width: 100% !important; /* Kitölti a bal oldali dobozt */
max-width: 100% !important; /* Szigorúan tilos kilögnie a dobozból */
height: auto !important; /* Arányosan méreteződik a magasság */
max-height: 400px; /* Nem engedjük, hogy gigantikusra nőjön */
object-fit: cover; /* Ha vágni kell picit, megteszi, de nem torzít */
display: block !important;
position: relative !important; /* Visszakényszeríti a normál áramlásba, nem lebeghet */
float: none !important; /* Kikapcsol minden korábbi "lebegtetést" */
z-index: 1; /* Biztosítja, hogy ne kerüljön a szöveg vagy a menü elé */
margin-bottom: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.kartya-jobb {
order: 1 !important; /* Ez lesz a felső sor */
width: 100% !important;
flex-direction: row !important; /* Mobilon/kis kijelzőn a gombok maradhatnak egy sorban is, vagy ha egymás alatt kellenek, írd át column-ra */
flex-wrap: wrap !important; /* Ha sok a gomb, törjenek új sorba */
justify-content: center !important;
gap: 15px;
min-width: 0;
}
/* Jobb oldal: a menü */
.menu-gomb { padding: 20px; background: #f9f9f9; border-radius: 10px; cursor: pointer; transition: 0.3s; font-weight: 600; border: 2px solid transparent; }
.menu-gomb:hover { background: #eee; }
.menu-gomb.aktiv { border-color: #61959C; color: #61959C; background: #eef7f8; }
/* Mobil nézet: minden egymás alá kerül */
@media (max-width: 768px) {
.kartya-kontener { flex-direction: column-reverse; } /* A menü alulra kerül */
}
#kartya-leiras ul {
margin: 15px 0;
padding-left: 20px;
line-height: 1.6;
font-size: 13pt;
font-family: Raleway, serif;
}
#kartya-leiras li {
margin-bottom: 8px;
font-weight: 400;
font-size: 13pt;
font-family: Raleway, serif;
}
@media (max-width: 1250px) {
.kartya-kontener {
flex-direction: column; /* Egymás alá tördeli a bal és jobb oldalt */
gap: 20px; /* Kicsit kisebb szünet a szöveg és a gombok között mobilon */
padding: 15px; /* Kisebb belső margó, hogy több hely maradjon */
}
/* 1. A nyitókép doboza (KIVÉVE a felső menüt, azaz a .flex-container-t) */
header:not(.flex-container), .nyitokep-kontener, .w3-display-container {
header:not(.flex-container), .nyitokep-kontener, .w3-display-container {
height: auto !important;
min-height: 100vh;
padding-top: 100px !important;
padding-bottom: 40px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
/* VÁLTOZÁS ITT: center helyett flex-start, ez teszi balra a tartalmát! */
align-items: flex-start !important;
}
}
/* 2. A szürke háttér/szöveges panel rugalmassá tétele */
.nyitokep-header.nyitokep {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: flex-start !important;
padding-bottom: 60px !important;
box-sizing: border-box !important;
}
/* CSAK a szürke dobozt bántjuk a nyitókép-header-en belül */
.nyitokep-header .nyitokep-szoveg.bal {
margin: 0 0 0 5% !important;
width: 80% !important;
text-align: left !important;
}
/* 3. A szövegek méretének szigorú korlátozása mobilon */
header:not(.flex-container) h1, .nyitokep-szoveg h1 {
font-size: 24px !important;
letter-spacing: 1px !important;
line-height: 1.2 !important;
margin: 10px 0 !important;
}
header:not(.flex-container) p, .nyitokep-szoveg p {
font-size: 14px !important;
line-height: 1.4 !important;
margin: 5px 0 !important;
}
}
/* Kifejezetten a felső menü és a logó balra kényszerítése mobilnézetben */
@media (max-width: 1250px) {
header.flex-container {
display: flex !important;
flex-direction: row !important; /* Szigorúan egymás mellett tartja az elemeket, nem engedi oszloppá válni */
justify-content: flex-start !important; /* Mindent eltol a bal szélre */
align-items: flex-start; /* Függőlegesen középre igazítja a menü sávjában */
text-align: left !important; /* Letiltja a középre igazítást */
padding-left: 15px !important; /* Egy pici, elegáns távolság a kijelző szélétől */
width: 100% !important;
box-sizing: border-box !important;
}
/* A logót közvetlenül befogadó div doboz */
header.flex-container div:first-child {
text-align: left !important;
width: auto !important; /* Letiltja, hogy a doboz kitöltse a teljes képernyőszélességet */
margin: 0 !important; /* Nulláz minden automatikus középre igazító margót */
}
/* Maga a logó kép */
header.flex-container img {
display: block !important;
margin-left: 0 !important; /* Biztosítja, hogy ne legyen bal oldali eltolása */
max-width: 160px !important; /* Mobilon picit kisebb logó, hogy ne foglaljon sok helyet */
}
}
@media (max-width: 1250px) {
.kartya-kontener {
flex-direction: column; /* Egymás alá tördeli a bal és jobb oldalt */
gap: 20px;
padding: 20px; /* Kicsit kisebb margó, hogy a telefonokon több hely legyen */
}
h1 {
font-size: 26px !important; /* Kisebb betűméret */
letter-spacing: 2px !important; /* Kisebb betűköz, hogy több szó férjen egy sorba */
line-height: 1.3 !important; /* Szorosabb sortávolság */
margin-top: 10px !important;
}
/* Az alcímek (h2) összenyomása */
h2 {
font-size: 20px !important;
letter-spacing: 1px !important;
line-height: 1.4 !important;
}
/* Ha a nyitókép szövege egy külön dobozban van (pl. w3-display-middle vagy hasonló) */
.nyitokep-szoveg, header div {
width: 95% !important; /* Engedjük, hogy majdnem a képernyő széléig érjen */
padding: 10px !important; /* Kisebb belső margó */
text-align: center; /* Középre igazítás a biztonság kedvéért */
}
}
@media (max-width: 1250px) {
.kartya-kontener {
flex-direction: column;
gap: 20px;
padding: 20px;
}
/* A szöveg és a kép (eredetileg bal oldal) */
.kartya-bal {
width: 100%;
flex: none;
order: 2; /* Mobilon ez kerül ALULRA (2. hely) */
}
/* A gombok (eredetileg jobb oldal) */
.kartya-jobb {
width: 100%;
flex: none;
order: 1; /* Mobilon ez ugrik FELÜLRE (1. hely) */
}
h1 {
font-size: 26px !important; /* Kisebb betűméret */
letter-spacing: 2px !important; /* Kisebb betűköz, hogy több szó férjen egy sorba */
line-height: 1.3 !important; /* Szorosabb sortávolság */
margin-top: 10px !important;
}
/* Az alcímek (h2) összenyomása */
h2 {
font-size: 20px !important;
letter-spacing: 1px !important;
line-height: 1.4 !important;
}
/* Ha a nyitókép szövege egy külön dobozban van (pl. w3-display-middle vagy hasonló) */
.nyitokep-szoveg, header div {
width: 95% !important; /* Engedjük, hogy majdnem a képernyő széléig érjen */
padding: 10px !important; /* Kisebb belső margó */
text-align: center; /* Középre igazítás a biztonság kedvéért */
}
}
.szurke-elem {
filter: grayscale(100%);
}
.szurke-visszajelzes {
filter: grayscale(100%); /* Alapból szürke */
transition: filter 0.5s ease; /* Ez teszi finommá az átmenetet */
}
.szurke-visszajelzes:hover {
filter: grayscale(0%); /* Rámutatáskor visszanyeri a színét */
}
@media (max-width: 1080px ) {
/* A fő nyitókép doboza */
.nyitokep {
justify-content: flex-start !important; /* VÍZSZINTESEN balra húzza a tartalmat */
align-items: center !important; /* FÜGGŐLEGESEN visszateszi pontosan középre! */
}
/* A szürke panel */
.nyitokep-szoveg.bal {
/* Ez a sor a varázslat: lenullázza a HTML-ben lévő összevissza auto margókat, és csak balról hagy 5% rést */
margin: 0 0 0 5% !important;
width: 90% !important;
max-width: 60% !important;
min-width: 90% !important;
text-align: left !important;
box-sizing: border-box !important;
}
/* A szövegek balra igazítása és méretezése */
.nyitokep-szoveg h1 {
font-size: 26px !important;
text-align: left !important;
margin-top: 0 !important;
}
.nyitokep-szoveg p {
font-size: 16px !important;
text-align: left !important;
font-size: clamp(8px, 4vw, 15px) !important;
}
}
body .nyitokep {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: flex-start !important;
padding-bottom: 50px !important;
}
/* A szürke doboz kényszerítése balra */
body .nyitokep .nyitokep-szoveg.bal {
margin: 0 !important; /* Nullázunk mindent */
margin-left: 5% !important; /* Csak balról hagyunk rést */
width: 100% !important;
max-width: 60% !important;
text-align: left !important;
max-height: 50%;
font-size: clamp(8px, 4vw, 25px) !important;;
}
/* A szöveg sorközének kényszerítése (W3.CSS felülírása) */
body .nyitokep-szoveg.bal h1,
body .nyitokep-szoveg.bal p {
text-align: left !important;
line-height: 2 !important; /* Ez a sorköz most már érvényesülni fog */
margin: 0 !important;
font-size: clamp(8px, 4vw, 25px) !important;;
}
body .nyitokep-szoveg.bal h1 {
margin-bottom: 15px !important;
font-size: clamp(16px, 4vw, 30px) !important;
}
/* --- 2. LÉPCSŐ: MOBILTELEFON (600px alatt) --- */
@media (max-width: 600px) {
.nyitokep {
padding-bottom: 30px !important; /* Mobilon picit lejjebb csúszhat a doboz */
}
.nyitokep-szoveg.bal {
margin: 0 0 0 4% !important;
width: 90% !important; /* Mobilon kell a hely, szinte kitölti a képernyőt */
max-width: 92% !important;
min-width: 85% !important;
}
.nyitokep-szoveg.bal h1 {
font-size: 24px !important; /* Kisebb, stabil betűméret a szűk képernyőkre */
}
.nyitokep-szoveg.bal p {
font-size: 15px !important;
line-height: 1.5 !important ;
font-size: clamp(5px, 4vw, 15px) !important;
}
}
/* --- ÚJ ELRENDEZÉS: Gombok felül, tartalom alul --- */
/* Asztali nézetben (1250px felett) az eredeti egymás melletti elrendezés */
@media (min-width: 1251px) {
.kartya-kontener {
display: flex !important;
flex-direction: column !important; /* Függőleges oszlop a kártya elemeinek */
gap: 20px !important;
padding: 20px !important;
}
/* A gombok (jobb oldal) most már vízszintes menüsávként működnek */
.kartya-jobb {
order: 1 !important; /* Felülre kerül */
width: 100% !important;
display: flex !important;
flex-direction: row !important; /* VÍZSZINTES gomb-sor */
flex-wrap: wrap !important; /* Ha nem férnek el, törjenek új sorba */
justify-content: center !important; /* Gombok középre rendezése */
gap: 10px !important;
}
/* A tartalom (bal oldal) alulra kerül */
.kartya-bal {
order: 2 !important; /* Alulra kerül */
width: 100% !important;
}
}
.szamosgomb {
width: 300px;
max-width: 90% !important; /* Mobilon engedi, hogy kisebb legyen és beférjen */
/* === EZ TARTJA A GOMBOT KÖZÉPEN MINDEN ESZKÖZÖN === */
margin: 0 auto !important;
/* === EZ PEDIG A SZÖVEGET TARTJA KÖZÉPEN A GOMBON BELÜL === */
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
/* A te eddigi dizájn beállításaid: */
background: lightgray;
border-radius: 10px;
transition: 0.3s;
font-weight: 600;
border: 2px solid transparent;
}
.szamosgomb2{
text-align: center;
align-items: center;
margin-left: 25%;
}
@media (max-width:1250px) {
.szamosgomb{
margin-left: 40%;
text-align: center;
align-items: center;
}
.szamosgomb2{
text-align: center;
align-items: center;
margin: auto;
margin-left: auto;
}
}
/* --- A tartalom elrendezése asztali gépen --- */
.tartalom-flex-doboz {
display: flex;
align-items: center; /* Függőlegesen középre igazít */
gap: 30px; /* Távolság a kép és a szöveg között */
width: 100%;
}
/* A kép alapértelmezetten a BAL oldalon van, a szöveg a jobb oldalon */
#kartya-kep {
max-width: 50%; /* A kép a hely felét foglalja el */
height: auto;
border-radius: 10px; /* Egy kis lekerekítés (opcionális) */
}
.szoveg-kontener {
flex: 1; /* A szöveg kitölti a maradék helyet */
}
/* --- Ha a JavaScript rátette a "kep-jobboldalon" osztályt --- */
.kep-jobboldalon {
flex-direction: row-reverse; /* EZ A TRÜKK: Megfordítja a sorrendet! */
}
/* --- MOBIL NÉZET --- */
@media (max-width: 900px) {
.tartalom-flex-doboz,
.kep-jobboldalon {
flex-direction: column !important; /* Mobilon mindig egymás alatt legyenek */
text-align: center; /* Középre zárt szöveg mobilon (opcionális) */
}
#kartya-kep {
max-width: 100%; /* Mobilon a kép töltse ki a szélességet */
margin-bottom: 20px; /* Egy kis hely a kép alatt */
}
}
/* --- Rugalmas tartalom elrendezés asztali gépen --- */
#kartya-tartalom {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 40px !important;
width: 100% !important;
}
/* Ha jobb oldalon kell lennie a képnek */
.kep-jobboldalon {
flex-direction: row-reverse !important;
}
/* Kép méretezése */
#kartya-kep {
max-width: 45% !important;
height: auto !important;
border-radius: 12px;
}
/* Szöveges rész méretezése */
#kartya-tartalom > div:not(.counter-wrapper) {
flex: 1 !important;
}
/* --- MOBIL NÉZET (900px szélesség alatt) --- */
@media (max-width: 900px) {
#kartya-tartalom,
.kep-jobboldalon {
flex-direction: column !important; /* Mobilon mindig egymás alá rendezi őket */
text-align: center !important;
}
#kartya-kep {
max-width: 100% !important; /* Mobilon kitölti a szélességet */
margin-bottom: 20px !important;
}
}
/* --- TÖBB OSZLOPOS ELRENDEZÉS KÁRTYÁKNAK / GOMBOKNAK --- */
/* Ez a konténer rendezi egymás mellé az elemeket */
.oszlopos-kontener {
display: flex;
flex-wrap: wrap; /* Ha nincs elég hely, a következő elem új sorba ugrik */
justify-content: center; /* Középre húzza az egész oszlop-csoportot */
gap: 20px; /* Pontosan 20 pixel távolság az oszlopok és sorok között */
width: 100%;
margin-top: 20px; /* Kis hely a felette lévő dologtól */
}
/* Asztali nézet (900px felett) */
@media (min-width: 900px) {
/* Asztali nézetben levesszük a gombokról az "auto" margót,
hogy a Flexbox gond nélkül egymás mellé tudja tenni őket */
.oszlopos-kontener .szamosgomb,
.oszlopos-kontener .szamosgomb2,
.oszlopos-kontener .kozepes-kartya {
margin: 0 !important;
}
}
.menu-gomb2 { padding: 20px; background: #f9f9f9; border-radius: 10px; cursor: pointer; transition: 0.3s; font-weight: 600; border: 2px solid transparent; }
.sajat-gomb {
padding: 15px;
background-color: #61959C;
color: white;
border: none;
cursor: pointer;
border-radius: 8px;
}
.fokontener {
display: flex;
gap: 40px;
padding: 20px;
}
#bal-oldal-tartalom {
width: 70%; /* A bal oldal legyen szélesebb */
}
.jobb-oldal-gombok {
width: 30%; /* A gombok fixen jobbra */
display: flex;
flex-direction: column;
gap: 10px;
}
/* --- ÚJ: LAPOZÓS MENÜ ÉS TARTALOM --- */
.valto-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin: 40px 0 30px 0; /* Távolság a számlálóktól */
}
.valto-gomb {
padding: 12px 24px;
background-color: #dcdcdc;
color: black;
border: none;
border-radius: 8px; /* A lekerekitett-gomb stílusodhoz hasonlóan */
cursor: pointer;
font-size: 18px;
font-family: "Raleway", Arial, sans-serif;
font-weight: bold;
transition: background-color 0.3s ease;
}
.valto-gomb:hover{
background-color: #61959C; /* A weboldaladon használt narancssárga aktív szín */
color: black;
}
.valto-gomb.active {
background-color: #61959C; /* A weboldaladon használt narancssárga aktív szín */
color: white;
}
/* Tartalom fülek alapból rejtve */
.tab-tartalom {
display: none;
margin-top: 20px;
}
.tab-tartalom2 {
display: none;
margin-top: 20px;
}
/* Aktív fül megjelenítése (flex elrendezéssel) */
.tab-tartalom.aktiv-tab {
display: flex;
}
.tab-tartalom img {
height: 350px !important; /* Ezt az értéket írd át arra a magasságra, ami neked a legideálisabb */
width: 100% !important; /* Kitölti a rendelkezésre álló szélességet */
object-fit: cover !important; /* Kitölti a dobozt torzulás nélkül (a széleket levághatja) */
display: block;
margin: 0 auto; /* Középre igazítás */
border-radius: 8px; /* Opcionális: egy kis saroklekerekítés, hogy modernebb legyen */
}
/* === KÉPEK MEGNÖVELÉSE 1600PX FELETTI KIJELZŐKÖN === */
@media screen and (min-width: 1600px) {
.kepes-szekcio img {
max-width: 1000px !important; /* Eltöröljük az eredeti 500px-es határt, és megnöveljük */
width: 80% !important; /* Nagyobb arányt adunk a képnek (eredetileg 45% volt) */
height: 600px !important;
}
}
.tab-tartalom2 img {
height: 5000px !important; /* Ezt az értéket írd át arra a magasságra, ami neked a legideálisabb */
width: 100% !important; /* Kitölti a rendelkezésre álló szélességet */
object-fit: cover !important; /* Kitölti a dobozt torzulás nélkül (a széleket levághatja) */
display: block;
margin: 0 auto; /* Középre igazítás */
border-radius: 8px; /* Opcionális: egy kis saroklekerekítés, hogy modernebb legyen */
}
.kep-oldal, .szoveg-oldal {
flex: 1; /* Egyenlő arányban osztják el a helyet a képernyőn */
text-align: center;
width: 100%;
}
.szoveg-oldal h3 {
margin-top: 0;
text-align: left;
}
/* Belső kis gombok a képek váltásához */
.belso-gombok {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 20px;
}
.belso-gomb {
padding: 10px 18px;
background-color: #dcdcdc; /* A meglévő kék színed */
color: black;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
transition: background-color 0.3s ease;
font-family: "Raleway", Arial, sans-serif;
font-weight: bold;
width:300px ;
margin: 3px;
}
.belso-gomb2 {
padding: 10px 18px;
background-color: white; /* A meglévő kék színed */
color: black;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
transition: background-color 0.3s ease;
font-family: "Raleway", Arial, sans-serif;
font-weight: bold;
width:300px ;
margin: 3px;
}
.belso-gomb:hover {
background-color: #f1b67e; /* Narancsra vált, ha ráviszed az egeret */
}
.belso-gomb2:hover {
background-color: #f1b67e; /* Narancsra vált, ha ráviszed az egeret */
}
/* MOBILOS JAVÍTÁS: Mobilon a fordított elrendezés is egymás alá kerüljön, ne kerüljön a szöveg felülre */
@media (max-width: 900px) {
.tab-tartalom.forditott-sorrend {
flex-direction: column !important;
}
.belso-gombok {
justify-content: center;
}
}
/* --- ÚJ: KÁRTYA BEÚSZÓ ANIMÁCIÓJA --- */
@keyframes finomBeuszas {
0% {
opacity: 0;
transform: translateY(30px); /* Kicsit lentről indul */
}
100% {
opacity: 1;
transform: translateY(0); /* Beáll az eredeti helyére */
}
}
/* Aktív fül megjelenítése beúszással */
.tab-tartalom.aktiv-tab {
display: flex;
/* cubic-bezier: ez adja meg azt a nagyon modern, finoman lassuló mozgást */
animation: finomBeuszas 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
/* A képek finom áttűnéséhez szükséges (hogy ne hirtelen váltson) */
.kep-oldal img {
transition: opacity 0.3s ease-in-out;
border-radius: 10px; /* Opcionális: kis lekerekítés a képeknek, ha eddig nem volt */
width: 100%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
}
.kepkozep{
justify-content: center;
align-items: center;
text-align: center;
margin-left: auto;
width: 1000px;
}
/* --- ÚJ: Aktív belső gomb színe (automata léptetéshez) --- */
.belso-gomb.aktiv-belso,
.belso-gomb2.aktiv-belso {
background-color: #f1b67e !important; /* A te narancssárga színed */
color: white !important;
}
/* --- ÚJ: KREATÍV AUTÓMATIKUS BEKEZDÉSEK (3. és 4. fülhöz) --- */
.kreativ-szoveg-kontener {
display: flex;
flex-direction: column;
gap: 10px; /* Távolság a bekezdések között */
margin-top: 20px;
}
.auto-bekezdes {
margin: 0;
padding: 12px 15px;
border-left: 3px solid transparent;
opacity: 0.4; /* Alapból halvány, mintha inaktív lenne */
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Szuper finom animáció */
cursor: pointer; /* Egérmutatót ad neki, jelezve hogy kattintható */
font-size: 16px;
line-height: 1.5;
border-radius: 0 8px 8px 0; /* Jobb oldali sarkok enyhe kerekítése */
}
.auto-bekezdes:hover {
opacity: 0.7; /* Halványan felerősödik, ha csak ráviszed az egeret */
}
/* Amikor az automata (vagy a kattintás) épp ide ér: */
.auto-bekezdes.aktiv-belso {
opacity: 1; /* Teljesen látható lesz */
border-left: 4px solid #f1b67e; /* Narancssárga kiemelés bal oldalon */
background-color: rgba(241, 182, 126, 0.1); /* Nagyon elegáns, halvány narancs háttér */
transform: translateX(10px); /* Finoman beugrik jobbra! */
color: black;
}
/* --- ÚJ: 3D MEGVALÓSÍTÁSÚ TELJES SZÉLESSÉGŰ KÁRTYÁK --- */
/* --- MÓDOSÍTOTT: 3D KÁRTYÁK EGY SORBAN --- */
.teljes-kartya-kontener {
display: flex;
flex-direction: row; /* Alapértelmezetten egymás mellett */
flex-wrap: wrap; /* Ha kicsi a hely, törjenek új sorba */
justify-content: center;
gap: 10px;
width: 100%;
margin: 0 auto;
font-family: "Raleway", Arial, sans-serif;
}
.flip-card {
background-color: transparent;
width: 280px; /* Fix szélesség, hogy ne zsugorodjon össze */
height: 450px; /* Fix magasság */
perspective: 1400px;
cursor: pointer;
flex-shrink: 0; /* Ne engedje, hogy a böngésző összenyomja a kártyát */
font-family: "Raleway", Arial, sans-serif;
}
.flip-card2 {
background-color: transparent;
width: 300px; /* Fix szélesség, hogy ne zsugorodjon össze */
height: 400px; /* Fix magasság */
perspective: 1400px;
cursor: pointer;
flex-shrink: 0; /* Ne engedje, hogy a böngésző összenyomja a kártyát */
font-family: "Raleway", Arial, sans-serif;
}
.flip-card3 {
background-color: transparent;
width: 450px; /* Fix szélesség, hogy ne zsugorodjon össze */
height: 600px; /* Fix magasság */
perspective: 1400px;
cursor: pointer;
flex-shrink: 0; /* Ne engedje, hogy a böngésző összenyomja a kártyát */
font-family: "Raleway", Arial, sans-serif;
}
.flip-card3-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Szuper finom, ruganyos forgás */
transform-style: preserve-3d; /* Megtartja a 3D teret a belső elemeknek */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-radius: 12px;
font-family: "Raleway", Arial, sans-serif;
font-size: 15pt;
}
/* AMIKOR AKTÍV LESZ: Az automata (vagy kattintás) hatására a kártya megfordul az X tengelye körül! */
.flip-card3.aktiv-belso .flip-card3-inner {
transform: rotateY(180deg);
}
.flip-card3-front, .flip-card3-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Elrejti a kártya hátulját, ha épp nem felénk néz */
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: 12px;
font-family: "Raleway", Arial, sans-serif;
}
/* ELŐLAP STÍLUSA (Letisztult szürke, sötét szöveggel) */
.flip-card3-front {
background-color: #f7f7f7;
color: #333;
border: 1px solid #e3e3e3;
}
/* HÁTLAP STÍLUSA (Kezdeti elforgatás, hogy a fordulás után legyen egyenes) */
.flip-card3-back {
background-color: #61959C;
color: white;
transform: rotateY(180deg);
border: 1px solid #61959C;
}
/* Amikor a hátlap aktívvá válik, átvált a te márkád gyönyörű narancssárga színére! */
.flip-card3.aktiv-belso .flip-card3-back {
background-color: #f1b67e;
color: black;
border: 1px solid #f1b67e;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Szuper finom, ruganyos forgás */
transform-style: preserve-3d; /* Megtartja a 3D teret a belső elemeknek */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-radius: 12px;
font-family: "Raleway", Arial, sans-serif;
}
/* AMIKOR AKTÍV LESZ: Az automata (vagy kattintás) hatására a kártya megfordul az X tengelye körül! */
.flip-card.aktiv-belso .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Elrejti a kártya hátulját, ha épp nem felénk néz */
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: 12px;
font-family: "Raleway", Arial, sans-serif;
}
/* ELŐLAP STÍLUSA (Letisztult szürke, sötét szöveggel) */
.flip-card-front {
background-color: #f7f7f7;
color: #333;
border: 1px solid #e3e3e3;
}
/* HÁTLAP STÍLUSA (Kezdeti elforgatás, hogy a fordulás után legyen egyenes) */
.flip-card-back {
background-color: #61959C;
color: white;
transform: rotateY(180deg);
border: 1px solid #61959C;
}
/* Amikor a hátlap aktívvá válik, átvált a te márkád gyönyörű narancssárga színére! */
.flip-card.aktiv-belso .flip-card-back {
background-color: #f1b67e;
color: black;
border: 1px solid #f1b67e;
}
/* Belső díszítések a kártyákon */
.kartya-szam {
font-size: 26pt;
font-weight: bold;
color: #61959C;
margin-bottom: 5px;
font-family: "Raleway", sans-serif;
}
.kartya-szam2 {
font-size: 20pt;
font-weight: bold;
color: #61959C;
margin-bottom: 5px;
font-family: "Raleway", sans-serif;
}
.flip-card-front h4 {
margin: 0;
font-size: 22px;
letter-spacing: 1px;
font-family: "Raleway", Arial, sans-serif;
}
.flip-card-back h4 {
margin: 0 0 8px 0;
font-size: 22px;
font-weight: bold;
font-family: "Raleway", Arial, sans-serif;
}
.flip-card-back p {
margin: 0;
font-size: 20px;
line-height: 1.5;
max-width: 750px;
font-family: "Raleway", Arial, sans-serif;
}
.kartya-tipp {
font-size: 11px;
color: #a0a0a0;
margin-top: 8px;
font-family: "Raleway", Arial, sans-serif;
}
/* MOBILOS IGAZÍTÁS: Mobilon, ha a szöveg hosszabb, adjunk több magasságot a kártyának, nehogy kilógjon */
@media (max-width: 600px) {
.flip-card {
height: 190px;
}
.flip-card-back p {
font-size: 14px;
}
}
/* ÚJ JAVÍTÁS: Közepes kijelzőkön (900px és 1200px között) magasabbak lesznek a kártyák, hogy elférjen a több soros szöveg */
@media (max-width: 1200px) {
.teljes-kartya-kontener {
flex-direction: column; /* Oszlopba rendezés */
align-items: center; /* Középre igazítás */
}
.flip-card {
width: 90%; /* Mobilon/tableten kicsit szélesebb */
max-width: 500px; /* De ne legyen óriási */
height: 400px; /* Itt már elég a 200px magasság */
}
}
/* --- KANYARGÓS FOLYAMATÁBRA --- */
.folyamat-kontener {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
gap: 150px; /* Távolság a két sor között (itt kanyarodik a vonal) */
}
.folyamat-sor, .folyamat-sor-reverse {
display: flex;
justify-content: space-around;
z-index: 1;
}
/* Ez a kulcs: a második sor elemeit megfordítjuk jobbról-balra */
.folyamat-sor-reverse {
flex-direction: row-reverse;
}
.folyamat-kartya {
width: 180px;
background: white;
padding: 15px;
border-radius: 10px;
border: 2px solid #ddd;
text-align: center;
transition: all 0.3s ease;
}
/* Aktív kiemelés */
.folyamat-kartya.aktiv-belso {
border-color: #f1b67e;
box-shadow: 0 5px 15px rgba(241, 182, 126, 0.4);
transform: translateY(-10px);
}
/* --- MOBIL/TABLET JAVÍTÁS (1200px alatt) --- */
@media (max-width: 1200px) {
/* 1. Visszaállítjuk az elrendezést egyszerű oszlopra */
.folyamat-kontener {
flex-direction: column;
gap: 15px !important; /* Kisebb távolság kártyák között */
padding: 20px 10px;
}
.folyamat-sor,
.folyamat-sor-reverse {
flex-direction: column !important; /* Minden kártya egymás alá */
align-items: center;
width: 100%;
}
/* 2. Kártyák visszaállítása egyszerű formára */
.folyamat-kartya {
width: 90% !important; /* Teljes szélesség majdnem */
margin: 5px 0 !important; /* Eltüntetjük a random eltolásokat */
position: relative;
}
/* 3. A KONNEKTOROK (vonalak) TELJES KIKAPCSOLÁSA */
.folyamat-kartya::after,
.folyamat-kartya::before {
display: none !important; /* Eltüntetjük a vonalakat */
}
/* 4. Az esetleges SVG vonal elrejtése */
.vonal-svg {
display: none !important;
}
/* 5. A kártya kiemelésének (hover/aktiv) igazítása */
.folyamat-kartya.aktiv-belso {
transform: scale(1.02) translateY(0); /* Kisebb mozgás mobilon */
}
}
/* --- MOBIL "KANYARGÓS" KÍGYÓ (1200px alatt) --- */
@media (max-width: 1200px) {
.folyamat-kontener {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 40px 10px !important;
gap: 0 !important; /* A kártyák szorosan egymás alatt */
}
.folyamat-sor, .folyamat-sor-reverse {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
align-items: center !important;
}
/* A kártyák cikcakkba rendezése */
.folyamat-kartya {
width: 60% !important;
margin: 15px 0 !important;
position: relative !important;
border: 3px solid #f1b67e !important;
}
/* 1. Az "egyszer balra, egyszer jobbra" eltolás (Kanyargó hatás) */
.folyamat-kartya:nth-child(odd) {
align-self: flex-start;
margin-left: 10% !important;
}
.folyamat-kartya:nth-child(even) {
align-self: flex-end;
margin-right: 10% !important;
}
/* 2. A "Kanyargós" vonal rajzolása (összeköti a kártyákat) */
/* Ez a vonal a kártyák közt kanyarog */
.folyamat-kartya::before {
content: '';
position: absolute;
width: 30%; /* A vonal hossza a kártya szélétől */
height: 4px;
background: #f1b67e;
top: 50%;
}
/* Páratlanoknál jobbra álljon ki a vonal */
.folyamat-kartya:nth-child(odd)::before { left: 100%; }
/* Párosoknál balra álljon ki a vonal */
.folyamat-kartya:nth-child(even)::before { right: 100%; }
/* 3. A Desktop "kanyar" vonalak kikapcsolása */
.folyamat-kartya::after,
.folyamat-sor > .folyamat-kartya:last-child::after,
.folyamat-sor-reverse > .folyamat-kartya:last-child::after {
display: none !important;
}
}
/* --- MOBIL "SZERPENTIN" ÚTVONAL (1200px alatt) --- */
@media (max-width: 1200px) {
/* 1. Konténer: függőleges elrendezés, semmi háttérkép */
.folyamat-kontener {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 40px 10px !important;
gap: 0px !important;
background-image: none !important;
}
/* A sorokat is oszlopba rendezzük */
.folyamat-sor, .folyamat-sor-reverse {
flex-direction: column !important;
width: 100% !important;
align-items: center !important;
}
/* 2. Kártyák: cikkcakkba rendezés */
.folyamat-kartya {
width: 160px !important;
margin: 20px 0 !important;
position: relative !important;
border: 3px solid #f1b67e !important;
background: white !important;
z-index: 2;
font-size: 13pt;
}
/* Cikkcakk (Szerpentin alapja) */
.folyamat-kartya:nth-child(odd) { align-self: flex-start; margin-left: 15% !important; }
.folyamat-kartya:nth-child(even) { align-self: flex-end; margin-right: 15% !important; }
/* 3. A SZAGGATOTT SZERPENTIN ÚT (CSS-sel rajzolva) */
/* Ez egy "híd" a kártyák között, ami szaggatott */
.folyamat-kartya:not(:last-child)::after {
content: '';
position: absolute;
top: 100%;
width: 40px; /* A kanyar szélessége */
height: 60px; /* A kanyar mélysége */
border: 4px dashed #f1b67e; /* SZAGGATOTT VONAL */
z-index: 0;
}
/* Kanyar jobbra */
.folyamat-kartya:nth-child(odd)::after {
left: 50%;
border-left: none;
border-radius: 0 0 40px 0; /* Íves kanyar */
border-top: none;
}
/* Kanyar balra */
.folyamat-kartya:nth-child(even)::after {
right: 50%;
border-right: none;
border-radius: 0 0 0 40px; /* Íves kanyar */
border-top: none;
}
/* Asztali vonalak elrejtése */
.folyamat-kartya::before,
.folyamat-sor > .folyamat-kartya:last-child::after,
.folyamat-sor-reverse > .folyamat-kartya:last-child::after {
display: none !important;
}
}
/* ========================================== */
/* FLIP-KÁRTYÁK HÁTOLDALÁNAK SZÍNEZÉSE ÉS LÁGYÍTÁSA */
/* ========================================== */
/* 1. FRONT (első) oldal - Minden kártyánál alapból FEHÉR */
.flip-card-front {
background-color: #ffffff !important;
color: black !important;
border: 2px solid lightgray; /* Opcionális: egy halvány keret, hogy szép legyen a fehér háttéren */
}
/* 2. BACK (hátulsó) oldal - Páratlan kártyák (1., 3., 5.) - Narancssárga */
.flip-card:nth-child(odd) .flip-card-back {
background-color: #f1b67e !important;
color: black !important; /* Narancssárgán a fekete betűk mutatnak jól */
}
/* 3. BACK (hátulsó) oldal - Páros kártyák (2., 4., 6.) - Kék */
.flip-card:nth-child(even) .flip-card-back {
background-color: #61959C !important;
color: black !important; /* Kék alapon a fehér betűk mutatnak jól */
}
/* 4. Finom eltűnés és színváltás beállítása mindkét oldalra */
/* Amikor a kártya visszafordul a fehér oldalára, ez a sor garantálja, hogy a színek ne hirtelen ugorjanak */
.flip-card-front, .flip-card-back {
transition: all 0.5s ease-in-out !important;
}
/* Maga a 3D-s átfordulás lágyítása (hogy a forgás is egyenletes, ne darabos legyen oda-vissza) */
.flip-card-inner {
transition: transform 0.7s ease-in-out !important;
}
/* ========================================== */
/* MOBIL SZERPENTIN HÁTTÉR BEÁLLÍTÁSAI */
/* ========================================== */
/* A konténer relatív legyen, hogy az SVG kitöltse a magasságát */
/* ========================================== */
/* MOBIL SZERPENTIN HÁTTÉR BEÁLLÍTÁSAI */
/* ========================================== */
/* A fő konténer asztalin és mobilon is alapként szolgál */
.folyamat-kontener {
position: relative;
z-index: 1;
width: 100%;
}
/* CSAK MOBILON kapcsoljuk ki az asztali kanyargós CSS elemeket,
hogy ne akadjanak össze az SVG-vel */
.folyamat-kartya::after,
.folyamat-kartya:not(:last-child)::after,
.folyamat-kartya:nth-child(odd)::after,
.folyamat-kartya:nth-child(even)::after {
display: none !important;
}
/* A szülő konténer */
.flex-container {
display: flex; /* Ez indítja el a rugalmas elrendezést */
flex-direction: row; /* Alapértelmezett: egymás mellett */
align-items: stretch; /* EZ A KULCS: egyenlő magasságra húzza a dobozokat */
gap: 20px; /* Távolság a dobozok között */
}
/* A gyerek dobozok */
.mapouter {
/* Nincs fix magasság, így a tartalomhoz igazodik */
display: flex;
flex-direction: column;
}
/* A 1100px alatti váltás */
@media (max-width: 1250px) {
.flex-container {
flex-direction: column; /* Egymás alá teszi */
}
}
/* === HOGYAN MŰKÖDIK: KÉP ÉS KATTINTHATÓ DOBOZOK === */
.hogyan-mukodik-kep-tarolo {
position: relative; /* Ez a legfontosabb: ez adja a dobozokhoz a koordinátarendszert */
display: block;
width: 100%;
/* Igény szerint állítható */
margin: 0 auto; /* Középre igazítja a tárolót */
/* === ÚJ TULAJDONSÁGOK A PONTOS MÉRETÉRT === */
height: fit-content; /* A doboz magassága pontosan igazodik a tartalomhoz (képhez) */
align-self: flex-start; /* Megakadályozza, hogy a flexbox függőlegesen kinyújtsa a dobozt */
overflow: hidden; /* Biztonsági mentés: ami mégis kilógna, azt levágja */
}
.hogyan-mukodik-kep-tarolo img {
display: block;
width: 100%;
max-height: 1000px;
height: auto;
}
/* Dobozok általános kinézete */
.kep-doboz {
position: absolute;
background-color: rgba(241, 182, 126, 0.4); /* A te oldalad színe, áttetszően */
border: 3px solid #f1b67e;
border-radius: 10px; /* Pici kerekítés */
cursor: pointer;
transition: all 0.3s ease; /* Finom animáció az egerészéshez */
}
/* Ha az egeret ráhúzzák, legyen erősebb a színe */
.kep-doboz:hover {
background-color: rgba(241, 182, 126, 0.8);
box-shadow: 0 0 15px rgba(241, 182, 126, 0.8);
}
/* === DOBOZOK POZÍCIÓI === */
/* Ezeket a %-os értékeket neked kell majd kikísérletezni a valós képed alapján! */
.doboz-1 {
top: 15%; /* Fentről lefelé 15% */
left: 20%; /* Balról jobbra 20% */
width: 15%; /* A doboz szélessége a képhez képest */
height: 20%;/* A doboz magassága a képhez képest */
}
.doboz-2 {
top: 45%;
left: 50%;
width: 18%;
height: 15%;
}
.doboz-3 {
top: 75%;
left: 30%;
width: 20%;
height: 25%;
}
/* === FULECSKE 5 (HOGYAN MŰKÖDIK) TELJES KITÖLTÉS === */
/* 1. Magának a fülnek a margóit nullázzuk */
#fulecske5.tab-tartalom2 {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* 2. A folyamat konténer se tartson vissza semmit */
#fulecske5 .folyamat-kontener {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* 3. A képtároló doboz teljesen feszüljön ki */
.hogyan-mukodik-kep-tarolo {
width: 100% !important;
max-width: 100% !important; /* Felülírja a korábbi 1200px-es korlátot */
margin: 0 !important;
padding: 0 !important;
display: block;
}
/* 4. Maga a kép kitölti a dobozt */
.hogyan-mukodik-kep-tarolo img {
width: 100% !important;
max-width: 100% !important;
height: auto !important; /* Felülírja az 5000px-es szabályt, hogy ne legyen gigantikus */
object-fit: cover !important;
border-radius: 0 !important; /* Levesszük a kerekítést, hogy kifusson a széléig */
display: block;
object-fit: contain !important;
}
/* === FOLYAMAT SOROK RÁHELYEZÉSE A KÉPRE === */
.hogyan-mukodik-kep-tarolo .folyamat-sor {
position: absolute; /* Ráemeli a képre */
top: 5%; /* A kép tetejétől 5%-ra indul (igény szerint állítsd!) */
left: 0;
width: 100%; /* Kitölti a kép teljes szélességét */
z-index: 10; /* Biztosítja, hogy a kép felett legyen */
}
.hogyan-mukodik-kep-tarolo .folyamat-sor-reverse {
position: absolute; /* Ezt is ráemeli a képre */
bottom: 10%; /* A kép aljától 10%-ra indul (igény szerint állítsd!) */
left: 0;
width: 100%;
z-index: 10;
}
/* === MOBIL NÉZET VALÓDI ABSZOLÚT POZICIONÁLÁSA (1200px ALATT) === */
@media (max-width: 1200px) {
/* A sorok konténereit kiterítjük a teljes képre, hogy ne korlátozzák a kártyákat */
.hogyan-mukodik-kep-tarolo .folyamat-sor,
.hogyan-mukodik-kep-tarolo .folyamat-sor-reverse {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important; /* Kikapcsoljuk a flexboxot, hogy ne mozgassa el őket automatikusan */
pointer-events: none; /* Átengedi a kattintást a háttérre, ha kell */
}
/* Közös beállítások minden mobil kártyához */
.hogyan-mukodik-kep-tarolo .folyamat-kartya {
position: absolute !important;
pointer-events: auto; /* Visszakapcsoljuk a kattinthatóságot a kártyákra */
width: 75% !important; /* A kártyák szélessége mobilon (szabadon módosíthatod) */
left: 12.5% !important; /* Középre igazítja a kártyát (12.5% bal + 75% szélesség + 12.5% jobb = 100%) */
margin: 0 !important; /* Töröljük az asztali zavaró margókat */
padding: 15px !important; /* Ezzel a belső magasságot (doboz méretét) tudod növelni */
}
/* =======================================================================
ITT ÁLLÍTHATOD BE A DOBOZOK HELYÉT (A FELETTE ÉS ALATTE LÉVŐ MAGASSÁGOT)
======================================================================= */
/* A 'top' százalékos értékével határozod meg, milyen mélyen legyen a kártya fentről.
Ezzel közvetve állítod a felette lévő rést, és az alatta lévő következő kártyához mért távolságot is. */
/* Első csoport (folyamat-sor kártyái: 1-4. lépések) */
.folyamat-sor .folyamat-kartya:nth-child(1) { top: 0%; } /* 1. kártya helye */
.folyamat-sor .folyamat-kartya:nth-child(2) { top: 14%; } /* 2. kártya helye */
.folyamat-sor .folyamat-kartya:nth-child(3) { top: 28%; } /* 3. kártya helye */
.folyamat-sor .folyamat-kartya:nth-child(4) { top: 42%; } /* 4. kártya helye */
/* Második csoport (folyamat-sor-reverse kártyái: 5-7. lépések) */
.folyamat-sor-reverse .folyamat-kartya:nth-child(1) { top: 57%; } /* 5. kártya helye */
.folyamat-sor-reverse .folyamat-kartya:nth-child(2) { top: 71%; } /* 6. kártya helye */
.folyamat-sor-reverse .folyamat-kartya:nth-child(3) { top: 86%; } /* 7. kártya helye */
}
@media (max-width:450px) {
/* A sorok konténereit kiterítjük a teljes képre, hogy ne korlátozzák a kártyákat */
.hogyan-mukodik-kep-tarolo .folyamat-sor,
.hogyan-mukodik-kep-tarolo .folyamat-sor-reverse {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important; /* Kikapcsoljuk a flexboxot, hogy ne mozgassa el őket automatikusan */
pointer-events: none; /* Átengedi a kattintást a háttérre, ha kell */
}
/* Közös beállítások minden mobil kártyához */
.hogyan-mukodik-kep-tarolo .folyamat-kartya {
position: absolute !important;
pointer-events: auto; /* Visszakapcsoljuk a kattinthatóságot a kártyákra */
width: 75% !important; /* A kártyák szélessége mobilon (szabadon módosíthatod) */
left: 12.5% !important; /* Középre igazítja a kártyát (12.5% bal + 75% szélesség + 12.5% jobb = 100%) */
margin: 0 !important; /* Töröljük az asztali zavaró margókat */
padding: 15px !important; /* Ezzel a belső magasságot (doboz méretét) tudod növelni */
}
/* =======================================================================
ITT ÁLLÍTHATOD BE A DOBOZOK HELYÉT (A FELETTE ÉS ALATTE LÉVŐ MAGASSÁGOT)
======================================================================= */
/* A 'top' százalékos értékével határozod meg, milyen mélyen legyen a kártya fentről.
Ezzel közvetve állítod a felette lévő rést, és az alatta lévő következő kártyához mért távolságot is. */
/* Első csoport (folyamat-sor kártyái: 1-4. lépések) */
.folyamat-sor .folyamat-kartya:nth-child(1) { top: 0%; } /* 1. kártya helye */
.folyamat-sor .folyamat-kartya:nth-child(2) { top: 13%; } /* 2. kártya helye */
.folyamat-sor .folyamat-kartya:nth-child(3) { top: 28%; } /* 3. kártya helye */
.folyamat-sor .folyamat-kartya:nth-child(4) { top: 40%; } /* 4. kártya helye */
/* Második csoport (folyamat-sor-reverse kártyái: 5-7. lépések) */
.folyamat-sor-reverse .folyamat-kartya:nth-child(1) { top: 59%; } /* 5. kártya helye */
.folyamat-sor-reverse .folyamat-kartya:nth-child(2) { top: 70%; } /* 6. kártya helye */
.folyamat-sor-reverse .folyamat-kartya:nth-child(3) { top: 85%; } /* 7. kártya helye */
}
.feher{
background-color: white;
font-family: "Raleway", Arial, sans-serif;
font-size: 16pt;
padding: 20px;
line-height: 2em;
}
.szurke{
background-color: #dcdcdc;
font-family: "Raleway", Arial, sans-serif;
font-size: 16pt;
padding: 20px;
line-height: 2em;
}
/* ========================================== */
/* FÜGGŐLEGES IDŐVONAL (TIMELINE) ANIMÁCIÓVAL */
/* ========================================== */
.idovonal-szekcio {
padding: 50px 20px;
overflow: hidden; /* Ne legyen vízszintes görgetősáv a beúszások miatt */
background-color: transparent;
}
.idovonal-kontener {
position: relative;
max-width: 1000px;
margin: 50px auto;
}
/* 1. A KÖZÉPSŐ VONAL (Itt tudod majd a saját képedet berakni) */
.idovonal-vonal {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 6px;
background-color: #61959C ; /* Az oldalad kék színe - ezt kicserélheted */
transform: translateX(-50%);
z-index: 1;
border-radius: 3px;
/* HA MAJD A SAJÁT KÉPEDET SZERETNÉD VONAL HELYETT, töröld a fenti background-color-t és használd ezt:
background-image: url('images/ide_jon_a_keped_neve.png');
background-repeat: repeat-y;
background-position: top center;
background-size: contain;
width: 40px; /* Állítsd be olyan szélesre, amilyen a képed */
}
/* 2. AZ EGYES DOBOZOK TÁROLÓJA */
.idovonal-elem {
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
z-index: 2;
/* Animációhoz alapállapot: átlátszó és oldalra eltolt */
opacity: 0;
transition: all 1s ease-out;
}
/* BAL OLDALI ELEMEK ALAPÁLLAPOTA */
.idovonal-elem.bal-oldal {
left: 0;
transform: translateX(-80px); /* Balra kitolva kezd */
}
/* JOBB OLDALI ELEMEK ALAPÁLLAPOTA */
.idovonal-elem.jobb-oldal {
left: 50%;
transform: translateX(80px); /* Jobbra kitolva kezd */
}
/* ANIMÁCIÓ: Amikor a görgetésnél aktívvá válik */
.idovonal-elem.megjelenik {
opacity: 1;
transform: translateX(0);
}
/* 3. A KIS PÖTTYÖK A VONALON (Ha nem kell, egyszerűen töröld ezt a részt) */
.idovonal-elem::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background-color: #f1b67e; /* A te narancssárga színed */
border: 4px solid #dcdcdc;
border-radius: 50%;
top: 40px; /* Milyen magasan legyen a pötty a doboz mellett */
z-index: 3;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.idovonal-elem.bal-oldal::after { right: -12px; }
.idovonal-elem.jobb-oldal::after { left: -12px; }
/* 4. A TÉNYLEGES TARTALOM DOBOZ */
.idovonal-doboz {
margin: 0;
padding: 20px;
}
/* 5. MOBILNÉZET (Telefonokon a vonal balra húzódik, dobozok egymás alatt) */
@media screen and (max-width: 768px) {
.idovonal-vonal {
left: 20px;
}
.idovonal-elem {
width: 100%;
padding-left: 60px; /* Helyet csinál a vonalnak a bal oldalon */
padding-right: 20px;
}
/* Mobilon mindkét doboz egy vonalba kerül, és alulról úszik be */
.idovonal-elem.bal-oldal,
.idovonal-elem.jobb-oldal {
left: 0;
transform: translateY(50px);
}
.idovonal-elem.bal-oldal::after,
.idovonal-elem.jobb-oldal::after {
left: 8px; /* Pöttyök is a bal oldali vonalhoz igazodnak */
}
.idovonal-elem.megjelenik {
transform: translateY(0);
}
}
/* === KÉP ÉS SZÖVEG ELRENDEZÉSE A KÁRTYÁKON BELÜL === */
/* A kártya belső elrendezése */
.flex-kartyas-elrendezo {
display: flex;
flex-direction: row; /* Egymás mellé teszi a belső div-eket */
align-items: center; /* Függőlegesen középre igazítja a képet és a szöveget */
justify-content: space-between;
gap: 30px; /* Távolság a kép és a szöveg között */
}
/* Oszlopok méretezése (fele-fele arányban) */
.flex-kartyas-elrendezo > div {
flex: 1;
}
/* A képek viselkedése a kártyán belül */
.flex-kartyas-elrendezo .kep-tarolo img {
max-width: 100%;
height: auto;
border-radius: 8px; /* Ha szeretnél kis lekerekítést a képnek, ha nem, töröld ezt a sort */
display: block;
}
/* Szöveg igazítása */
.szoveg-balra-igazit {
text-align: left;
}
.szoveg-kozepre-igazit {
text-align: center;
}
.szoveg-jobbra-igazit {
text-align: right; /* Ha inkább középre zártat szeretnél itt, írd át "center"-re */
}
/* === MOBILNÉZET (Telefonokon egymás alá kerülnek) === */
@media screen and (max-width: 1100px) {
.flex-kartyas-elrendezo {
flex-direction: column; /* Egymás alá tördeli őket */
gap: 15px;
}
/* Mobilon furcsán néz ki a jobbra zárt szöveg, ezért ott balra igazítjuk */
.szoveg-jobbra-igazit {
text-align: left;
}
}
/* === KÉPEK IGAZÍTÁSA A KÁRTYÁN BELÜL === */
/* Kép jobbra tolása */
.kep-tarolo.kep-jobbra img {
margin-left: auto;
margin-right: 0;
}
/* Kép balra tolása */
.kep-tarolo.kep-balra img {
margin-left: 0;
margin-right: auto;
}
/* Kép középre igazítása (opcionális, de jól jöhet) */
.kep-tarolo.kep-kozepre img {
margin-left: auto;
margin-right: auto;
}
/* === KATTINTHATÓ EGÉSZ KÁRTYÁK STÍLUSA === */
.kartya-link {
text-decoration: none; /* Eltünteti az esetleges szövegaláhúzást */
color: inherit; /* Megtartja az eredeti betűszíneket */
display: block; /* Biztosítja, hogy a link kitöltse a teljes kártya szélességét */
width: 100%;
max-width: 400px; /* Igazodik a kártya inline stílusához */
margin: 0 auto; /* Középre igazítja a link tárolót */
}
/* Opcionális: Egy kis extra vizuális visszajelzés, ha az egész kártyára ráviszik az egeret */
.kartya-link:hover .modern-kartya {
cursor: pointer;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* Picit erősebb árnyék hover esetén */
}
/* === 1. KÉPEK KILÓGÁSÁNAK MEGAKADÁLYOZÁSA MINDEN KIJELZŐN === */
.kartya-link .modern-kartya img {
max-width: 100% !important;
max-height: 150px !important;
height: auto !important;
object-fit: contain !important; /* Nem engedi torzulni vagy kilógni a logót */
box-sizing: border-box !important;
padding: 10px !important;
}
/* === 2. 1200PX ALATT A KÁRTYÁK EGYMÁS ALÁ ÉS KÖZÉPRE RENDEZÉSE === */
@media screen and (max-width: 1200px) {
.flex-container.kozep {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
.kartya-link {
width: 90% !important;
max-width: 500px !important;
margin: 20px auto !important;
}
.kartya-link .modern-kartya {
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important; /* Felülírja a HTML fix 400px/800px értékeit! */
}
}
/* === 3. MOBIL NÉZET (768PX ALATT): FALTÓL FALIG ÉRŐ KÁRTYÁK === */
@media screen and (max-width: 1260px) {
.kartya-link {
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 !important;
}
.kartya-link .modern-kartya {
height: 200px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important; /* Eltünteti a margókat, hogy kimenjen a széléig */
border-radius: 0 !important; /* Széltől-szélig szebb szögletesen */
/* Logó tökéletes középre igazítása */
display: flex !important;
justify-content: center !important;
align-items: center !important;
box-sizing: border-box !important;
position: relative !important; /* Extra biztosíték az elcsúszás ellen */
}
.kartya-link .modern-kartya h1 {
margin: 0 !important;
width: 100% !important;
}
}
/* === 1. KÉPEK KILÓGÁSÁNAK MEGAKADÁLYOZÁSA === */
.kartya-link .modern-kartya img {
max-width: 100% !important;
max-height: 150px !important;
height: auto !important;
object-fit: contain !important;
box-sizing: border-box !important;
padding: 10px !important;
}
/* === 3. MOBIL NÉZET (768PX ALATT) FALTÓL FALIG + MOZGÁS TILTÁSA === */
@media screen and (max-width: 450px) {
.kartya-link {
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 !important;
}
.kartya-link .modern-kartya {
height: 200px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
box-sizing: border-box !important;
/* EZ JAVÍTJA A MOZGÓ KÁRTYÁT! Visszakényszeríti a normál helyére: */
position: relative !important;
}
.kartya-link .modern-kartya h1 {
margin: 0 !important;
width: 100% !important;
}
}
/* === EGYEDI LOGÓ MÉRETEZÉSEK MOBIL NÉZETBEN (768px alatt) === */
@media screen and (max-width: 1260px) {
/* SIEMENS logó egyedi mérete */
a[href="siemens.html"] .modern-kartya img {
max-height: 100px !important; /* Kisebbre veszi (alapból 150px volt) */
width: auto !important; /* Arányos marad */
/* Ha inkább növelni szeretnéd, írj be pl. 180px-et! */
}
/* MDT logó egyedi mérete (Példa, ha ezt is módosítanád) */
a[href="mdt.html"] .modern-kartya img {
max-height: 150px !important;
}
/* 1HOME logó egyedi mérete (Példa) */
a[href="1home.html"] .modern-kartya img {
max-height: 150px !important; /* Nagyobb logó */
}
a[href="tense.html"] .modern-kartya img {
max-height: 10000px !important; /* Nagyobb logó */
}
a[href="embededd.html"] .modern-kartya img {
max-height: 200px !important; /* Nagyobb logó */
}
}
/* === KAPCSOLAT OLDAL: ŰRLAP RUGALMAS MÉRETEZÉSE ÉS GOMB FIXÁLÁSA === */
/* 1. Az űrlap beviteli mezőinek (Név, E-mail, Üzenet) rugalmassá tétele */
.flex-kartyas-elrendezo form input.lekerekitett-szoveg{
width: 40%;
}
.flex-kartyas-elrendezo form textarea.lekerekitett-szoveg {
width: 100% !important; /* Felülírja a HTML-ben lévő merev 1100px-et */
max-width: 100% !important; /* Garantálja, hogy nem lóg ki a kártyáról */
box-sizing: border-box !important; /* A keret és belső margó nem feszíti szét a dobozt */
margin-top: 5px !important; /* Kis távolság a feliratoktól */
margin-bottom: 15px !important; /* Kis távolság a következő elemtől */
}
/* 2. A kártya és az űrlap befogadó dobozának alkalmazkodása */
.flex-kartyas-elrendezo form {
width: 100% !important;
box-sizing: border-box !important;
padding: 0 5px; /* Pici biztonsági távolság, hogy a szöveg ne érjen teljesen a széléhez */
}
/* 3. A Küldés gomb stabil rögzítése középre */
.flex-kartyas-elrendezo form > div[style*="text-align: center;"] {
display: flex !important;
justify-content: center !important; /* Fixen középre kényszeríti a gombot */
width: 100% !important;
margin-top: 20px !important;
}
.lekerekitett-gomb {
margin: 0 auto; /* Extra biztosíték, hogy a gomb a saját helyén maradjon */
}
a[href="tense.html"] .modern-kartya img {
max-width: 100% !important; /* Itt tudod a szélességet csökkenteni (pl. 40%, 50%, 80%) */
max-height: 155px !important; /* Ha magasabbra/kisebbre akarod, ezt is állíthatod */
width: 600px !important; /* Felülírja a HTML-ben lévő fix 100%-ot */
height: auto !important; /* Biztosítja, hogy az arányok ne torzuljanak */
margin: 0 auto !important; /* Biztosan középen maradjon */
padding: 0%;
}
a[href="embededd.html"] .modern-kartya img {
max-width: 100% !important; /* Itt tudod a szélességet csökkenteni (pl. 40%, 50%, 80%) */
max-height: 150px !important; /* Ha magasabbra/kisebbre akarod, ezt is állíthatod */
width: 6000px !important; /* Felülírja a HTML-ben lévő fix 100%-ot */
height: auto !important; /* Biztosítja, hogy az arányok ne torzuljanak */
margin: 0 auto !important; /* Biztosan középen maradjon */
padding: 0%;
}
.knx-glass-tarolo {
/* Fekete üveg hatású háttér */
background: linear-gradient(145deg, #181818, #0a0a0a);
border: 2px solid #2a2a2a;
border-radius: 12px;
padding: 40px 30px;
max-width: 1000px;
margin: 40px auto;
/* 3D kiemelkedés a falból */
box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.05);
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 oszlopos, bal és jobb oldali gombok */
gap: 15px;
text-align: left;
}
.glass-gomb {
background: #151515;
padding: 18px 25px 18px 30px;
border-radius: 6px;
display: flex;
align-items: center;
position: relative;
cursor: default;
transition: all 0.4s ease;
border: 1px solid #1f1f1f;
}
.glass-gomb span {
color: #dcdcdc; /* Alapból szürke, "kikapcsolt" szöveg */
font-family: 'Raleway', sans-serif;
font-size: 14pt;
font-weight: 600;
transition: all 0.4s ease;
}
/* A rejtett LED csík a gomb bal oldalán */
.glass-led {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 30%;
background: #2a2a2a; /* Kikapcsolt LED szín */
border-radius: 0 4px 4px 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-gomb:hover {
background: #1e1e1e;
border-color: #333;
transform: scale(1.02);
}
.glass-gomb:hover span {
color: #ffffff; /* A szöveg felvillan */
}
/* Érintésre a LED bekapcsol és izzani kezd */
.glass-gomb:hover .glass-led {
background: #61959C; /* A te kék színed */
height: 60%; /* Megnő a LED csík */
box-shadow: 0 0 10px #61959C, 0 0 20px rgba(0,123,255,0.4);
}
/* Az utolsó gombot középre, szélesre húzzuk a tökéletes szimmetriához */
.glass-gomb.szeles {
grid-column: span 2;
justify-content: center;
}
@media (max-width: 600px) {
.knx-glass-tarolo { grid-template-columns: 1fr; }
.glass-gomb.szeles { grid-column: span 1; justify-content: flex-start; }
}