/* ==========================================================================
CARCLASSICS — Youngtimer Garage × Q-Service
Sötét, vörös akcentusú, nagy tipográfiájú látványterv.
Betűk: Unbounded (display) · Barlow (szöveg) · Barlow Condensed (címkék)
========================================================================== */
:root{
--bg:#08090c;
--bg-2:#0e1015;
--bg-3:#151820;
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.18);
--text:#f4f4f5;
--muted:#9ea3ad;
--dim:#6b7078;
--red:#e30613;
--red-2:#ff2a36;
--white:#ffffff;
--display:"Unbounded",system-ui,sans-serif;
--body:"Barlow",system-ui,sans-serif;
/* Minden nagybetűs, ritkított „címke" stílus (gombok, mezőfeliratok, morzsa,
számsáv, lépések, címkék) EZT használja – korábban Barlow Condensed volt,
a felhasználó kérésére semleges Helvetica/Arial lett az egész oldalon. */
--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
--outline:"Syncopate","Unbounded",system-ui,sans-serif; /* statikus, átfedésmentes kontúr a text-stroke-hoz */
--ease:cubic-bezier(.22,1,.36,1);
--ease-io:cubic-bezier(.65,0,.35,1);
--dur:.6s;
--gutter:clamp(20px,4vw,64px);
--max:1440px;
--nav-h:88px;
/* A hero belépő-koreográfia közös nullpontja: ennyit vár a kapu felhúzására.
Belső navigációnál (no-intro) nincs kapu, ezért azonnal indul minden. */
--intro:1.5s;
}
.no-intro{--intro:0s}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:var(--body);font-size:17px;line-height:1.6;font-weight:400;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Kötőjeles név (pl. Q-Service) ne törjön ketté sorvégen. */
.nbr{white-space:nowrap}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
/* VÉDŐPAJZS idegen alapstílusok ellen.
A Hello Elementor (és sok más téma) saját „reset"-je ezeket tartalmazza:
a:hover,a:active { color:#333366 } -> lila szöveg a kártyacímeken
button:hover,button:focus { color:#fff; background-color:#CC3366 } -> rózsaszín háttér
Ezek erősebbek a fenti egyszerű `a{}` / `button{}` szabálynál (állapot-
pszeudóosztályuk van), ezért kellenek ugyanilyen erősségű ellenszabályok.
Mindent, aminek nálunk VAN saját hover-színe, osztályszelektor állít be,
az pedig erősebb ennél a blokknál – azokat tehát nem írja felül. */
/* FIGYELEM: a :visited NEM kerülhet ebbe a sorba. A :hover/:focus/:active
átmeneti állapot, a :visited viszont tartós – és mivel erősebb a gombok
egyosztályos szabályánál, a meglátogatott „Ajánlatkérés" gomb szövege
világos lett volna a fehér háttéren. A böngésző saját lila :visited színét
a fenti `a{color:inherit}` már elnyomja (a szerző stílusa erősebb a
böngésző alapértelmezésénél), tehát itt nincs is rá szükség. */
a:hover,a:focus,a:active{color:inherit;text-decoration:none}
a:visited{text-decoration:none}
button:hover,button:focus,
[type="button"]:hover,[type="button"]:focus,
[type="submit"]:hover,[type="submit"]:focus,
[type="reset"]:hover,[type="reset"]:focus{color:inherit;background-color:transparent;text-decoration:none}
/* A fenti két sor a saját, EGYETLEN osztályból álló szabályainkat is felülírná
hover/fókusz közben (azok gyengébbek), ezért minden ilyen elemnek itt újra
megadjuk a nyugalmi színét. A lista teljes: a stíluslapot végigmérve pontosan
ez a 11 szabály gyengébb a fenti védősoroknál. Ahol tényleges hover-effekt
van, azt a fájlban LEJJEBB álló, azonos erősségű szabály úgyis felülírja. */
.video:hover,.video:focus{background:var(--bg-3)}
.work:hover,.work:focus{background:var(--bg-3)}
.choice:hover,.choice:focus{background:var(--bg-2)}
.hero__video:hover,.hero__video:focus{background:rgba(255,255,255,.055)}
.btn--white:hover,.btn--white:focus,.btn--white:visited{background:#fff;color:#0a0a0a}
.btn--red:hover,.btn--red:focus,.btn--red:visited{background:var(--red);color:#fff}
.btn--ghost:hover,.btn--ghost:focus,.btn--ghost:visited{background:transparent;color:#fff}
.hscroll-btn:hover,.hscroll-btn:focus{color:#fff}
.modal__close:hover,.modal__close:focus{color:#fff}
.map__lock:hover,.map__lock:focus{color:transparent;background:transparent}
.link:hover,.link:focus,.link:visited{color:#fff}
/* Ugyanez a táblázatra: az idegen alapstílusok rácsvonalat és sorcsíkozást
raknak minden cellára (a műhely-összehasonlító táblánkat ez elcsúfítja).
A `.compare th,.compare td` erősebb ennél, így a saját alsó vonalunk marad. */
table td,table th{border:0}
table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th,
table tbody tr:hover>td,table tbody tr:hover>th{background-color:transparent}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,9vw,140px)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.section--line{border-top:1px solid var(--line)}
/* Váltakozó szekciósávok. A főoldalon minden szekció fekete háttér + fehér
szöveg volt, ezért egyetlen végtelen blokknak látszott. A halványan
világosabb sávok adják a ritmust, hogy görgetés közben látszódjon, hol
kezdődik új rész. */
.section--alt{background:var(--bg-2);border-block:1px solid var(--line)}
/* --- Tipográfiai skálák ------------------------------------------------- */
.t-display{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.02em;font-size:clamp(34px,6.4vw,96px)}
/* A címek SOHA nem törhetnek szó közben – inkább legyen kisebb a betű.
A méretek úgy vannak belőve, hogy a leghosszabb szó (Állapotfelméréstől)
minden szélességen kiférjen. */
.t-h1{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:-.02em;font-size:clamp(20px,4.1vw,58px)}
:root{--h2-size:clamp(20px,3.45vw,50px)} /* egy forrás: a cím mérete és a hozzá igazodó elemek */
.t-h2{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:-.02em;font-size:var(--h2-size)}
/* Mobilon a cím a képernyővel együtt skálázódik (nem ragad be 20 px-en), mert
MELLETTE fut a műszaki rajz, és a leghosszabb szavunknak („ÁLLAPOTFELMÉRÉSTŐL”)
így is ki kell férnie egy sorba. 760 px-en a két képlet folytonosan ér össze. */
@media(max-width:759px){:root{--h2-size:clamp(17px,4.6vw,26px)}}
.t-h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.t-lead{font-size:clamp(15.5px,1.15vw,18px);line-height:1.6;color:var(--muted);max-width:60ch}
.t-red{color:var(--red)}
.t-white{color:#fff}
/* Szekciócím-blokk. Négy sávból áll, ebben a sorrendben:
1. a műszaki rajz (jobbra), 2. a cím, 3. vékony elválasztó vonal,
4. az alcím (kisebb, a cím alatt – nem a cím mellett, mint korábban).
760 px-től a rajz a cím MELLÉ, jobbra kerül, vagyis az 1. és 2. sáv egy sorba
fut össze. Mobilon azért kerül külön sorba, mert a leghosszabb szavunk
(„ÁLLAPOTFELMÉRÉSTŐL”) a rajz mellett már nem férne ki egy sorba. */
/* A cím és a rajz MINDIG egy sorban van. A sávméretek kulcsfontosságúak:
1. sáv `minmax(min-content,1fr)` – a cím sosem törik szó közben,
2. sáv `minmax(0,max-content)` – a RAJZ az, ami összemegy, ha a hosszú
címnek kell a hely (így nem lóg ki semmi a képernyőről).
Sima `1fr auto` mellett a hosszú cím kitolta a rácsot és a lead kicsúszott;
flexbox mellett pedig a rajz külön sorba tördelődött. */
.head{
display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,max-content);
align-items:center;column-gap:clamp(10px,3vw,48px);row-gap:0;
margin-bottom:clamp(36px,4.5vw,64px);
}
.head:not([data-mark]){grid-template-columns:1fr}
.head > .t-h2{grid-column:1;grid-row:1}
.head::before{ /* elválasztó vonal a cím alatt */
content:"";grid-column:1/-1;grid-row:2;
height:1px;background:var(--line);margin-top:clamp(20px,2.4vw,30px);
}
.head > .t-lead{grid-column:1/-1;grid-row:3;margin-top:clamp(16px,1.8vw,24px);max-width:78ch}
/* A szekciójel a Porsche 964 műszaki rajza (méretvonalakkal együtt). Nem
ikonkészlet, hanem a márkához tartozó valódi blueprint. */
.head[data-mark]::after{
content:"";grid-column:2;grid-row:1;justify-self:end;
width:clamp(50px,19vw,300px);height:clamp(46px,8vw,118px);
background-image:var(--mark);background-repeat:no-repeat;
background-position:right center;background-size:contain;
opacity:.6;
}
.head[data-mark="oldal"]{--mark:url(../img/body/porsche-oldal.png)}
.head[data-mark="orr"] {--mark:url(../img/body/porsche-orr.png)}
.head[data-mark="far"] {--mark:url(../img/body/porsche-far.png)}
/* --- Gombok ------------------------------------------------------------- */
.btn{
--pad:15px 28px;
display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:var(--pad);border-radius:8px;
font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
border:1px solid transparent;position:relative;overflow:hidden;isolation:isolate;
transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s;
white-space:nowrap;
}
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--red);
transform:translateY(102%);transition:transform .45s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.98)}
.btn--white{background:#fff;color:#0a0a0a}
.btn--white:hover{color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--red);color:#fff}
.btn--red{background:var(--red);color:#fff}
.btn--red::before{background:#fff}
.btn--red:hover{color:#0a0a0a}
.btn--sm{--pad:11px 20px;font-size:13px}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.link{
display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;
letter-spacing:.16em;text-transform:uppercase;font-size:14px;color:#fff;
}
.link::after{content:"→";transition:transform .3s var(--ease)}
.link:hover::after{transform:translateX(6px)}
.link:hover{color:var(--red)}
/* --- Navigáció ---------------------------------------------------------- */
.nav{
position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
display:flex;align-items:center;
transition:background .4s,backdrop-filter .4s,border-color .4s,height .4s var(--ease);
border-bottom:1px solid transparent;
}
.nav.is-scrolled{background:rgba(8,9,12,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-color:var(--line);height:72px}
.nav .wrap{display:flex;align-items:center;gap:32px;width:100%}
.nav__brand{flex:none;display:flex;align-items:center;gap:clamp(12px,1.2vw,20px)}
.nav__logo{display:flex;align-items:center}
/* A Q-Service logó MINDEN képernyőméretben ott van a fejlécben (a felhasználó
kérése). Mobilon kisebb, hogy a Carclassics logó és a hamburger mellé
320 px-en is kiférjen. */
.nav__qs{display:flex;align-items:center;padding-left:clamp(12px,1.2vw,20px);border-left:1px solid var(--line-2)}
.nav__qs img{height:40px;width:auto;transition:height .4s var(--ease)}
.nav.is-scrolled .nav__qs img{height:33px}
/* A Q-Service logó 900 px-től mindig látszik – a rövidebb menüsor mellett
minden asztali szélességen elfér (1290–1920 px-en is 0 a túlcsordulás). */
/* Mobil/tablet nézetben a fejléc a lap tetején logó nélkül indul: a logó a
hero közepén van, és görgetéskor „felcsúszik” a fejlécbe. Csak ott, ahol
van hero-logó (a nav ilyenkor kapja a nav--heroLogo osztályt). */
@media(max-width:1289px){
/* Mobil fejléc: a Q-SERVICE logó marad balra a sorban, a CARCLASSICS logó
viszont a fejléc KÖZEPÉRE kerül. Így a hero-logónak csak függőlegesen kell
megtennie az utat – se vízszintes eltolás, se képkockánkénti számolás. */
.nav .wrap{position:relative}
/* Mérés idejére kikapcsoljuk az átmeneteket: enélkül a fejléc logójának
MÉG A RÉGI méretét olvasnánk ki (a magasság .4s alatt animál). */
.nav.is-measuring,.nav.is-measuring *{transition:none!important}
.nav__logo{position:absolute;left:50%;translate:-50% 0;margin:0}
.nav__qs{padding-left:0;border-left:0}
.nav--heroLogo .nav__brand{opacity:0;pointer-events:none;transition:opacity .25s linear}
/* a fejléc logója akkor úszik be, amikor a repülő logó már megérkezett */
.nav--heroLogo.is-logo .nav__brand{opacity:1;pointer-events:auto;transition:opacity .25s linear .42s}
.menu-open .nav--heroLogo .nav__brand{opacity:1;pointer-events:auto;transition:opacity .25s linear}
}
.nav__logo img{height:52px;width:auto;transition:height .4s var(--ease)}
.nav.is-scrolled .nav__logo img{height:42px}
@media(max-width:899px){
.nav__logo img{height:44px}
.nav.is-scrolled .nav__logo img{height:38px}
.nav__qs{padding-left:10px}
.nav__qs img{height:32px}
.nav.is-scrolled .nav__qs img{height:28px}
}
.nav__links{display:none;list-style:none;margin:0 auto;padding:0;gap:clamp(18px,2.4vw,36px)}
.nav__links a{
font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:#fff;
position:relative;padding-block:6px;
}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
/* legördülő almenük (Szolgáltatásaink, Munkáink) */
.nav__links li{position:relative}
.nav__links .caret{
display:inline-block;width:7px;height:7px;margin-left:8px;vertical-align:2px;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(225deg) translateY(-2px)}
.nav__sub{
position:absolute;left:50%;top:100%;translate:-50% 0;margin-top:14px;padding:8px;
list-style:none;min-width:224px;background:rgba(14,16,21,.96);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid var(--line-2);border-radius:10px;box-shadow:0 22px 46px rgba(0,0,0,.6);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub:hover .nav__sub,.has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{
display:block;padding:10px 14px;border-radius:6px;
font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.04em;text-transform:none;color:#d6d9df;
transition:background .25s,color .25s;
}
.nav__sub a::after{display:none}
.nav__sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__cta{display:none;gap:12px;margin-left:auto}
.nav__burger{margin-left:auto;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px}
.nav__burger span{display:block;width:22px;height:2px;background:#fff;position:relative;transition:transform .3s}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;transition:transform .3s,top .3s}
.nav__burger span::before{top:-7px}.nav__burger span::after{top:7px}
.menu-open .nav__burger span{background:transparent}
.menu-open .nav__burger span::before{top:0;transform:rotate(45deg)}
.menu-open .nav__burger span::after{top:0;transform:rotate(-45deg)}
/* 1180-on a menü + gombok még nem fértek ki (a jobb szélső gomb levágódott) */
@media(min-width:1290px){
.nav__links{display:flex}
.nav__cta{display:flex}
.nav__burger{display:none}
}
/* Mobil / teljes képernyős menü */
.menu{
position:fixed;inset:0;z-index:90;background:var(--bg);
display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 20px) var(--gutter) 40px;
clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu > ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.menu__row{display:block;overflow:hidden}
.menu__row a{
display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
font-size:clamp(21px,5.6vw,48px);line-height:1.15;
transform:translateY(110%);transition:transform .7s var(--ease),color .3s;
}
.menu-open .menu__row a{transform:translateY(0)}
.menu__row a:hover{color:var(--red)}
.menu__sub{list-style:none;margin:2px 0 10px;padding:0 0 0 4px;display:flex;flex-wrap:wrap;gap:6px 18px}
.menu .menu__sub a{
display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);transform:none;line-height:1.3;
}
.menu .menu__sub a:hover{color:#fff}
.menu__foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
/* --- Hero -----------------------------------------------------------------
Bal oldalon a modern Porsche 911 GT3, jobb oldalon a klasszikus 911 – a két
autó EGYMÁS FELÉ néz, mindkettő a képernyő szélén fut ki. Középen a jól
látható Carclassics-logó. A képek eleve a megfelelő irányba néznek, ezért
tilos tükrözni (a 911 oldalán a PORSCHE felirat olvasható marad). */
.hero{
/* Az autók talpvonala. A térbeli „törést” jelző vonal UGYANEZT használja,
így a kettő sosem tud elcsúszni egymástól. */
--car-bottom:clamp(10px,2.4vh,26px);
position:relative;overflow:hidden;min-height:100svh;
display:grid;grid-template-rows:1fr auto;
padding-top:var(--nav-h);
/* A hero alja beleolvad a következő szekció színébe (--bg), hogy ne legyen
éles kontrasztváltás az adatsávnál. */
background:
linear-gradient(180deg,rgba(8,9,12,0) 48%,rgba(8,9,12,.55) 76%,rgba(8,9,12,.92) 92%,var(--bg) 100%),
radial-gradient(135% 100% at 50% 20%,#242830 0%,#1e222a 46%,#14171d 100%);
}
/* Széles képernyőn a hero világosabbnak hatott, mint telefonon – pedig a
színátmenet arányosan ugyanaz. Az ok a madártávlati fotó: `cover` mellett
asztali nézetben a kép sokkal szélesebb (és világosabb: parkoló, tetők)
szelete látszik, mint a keskeny mobilsávban. Ezért itt a fotót halványítjuk,
az alapszínt pedig sötétítjük, hogy a két nézet azonos hangulatú legyen. */
@media(min-width:760px){
.hero{
background:
/* felül is van egy enyhe sötétítés, hogy a fejléc alatti sáv ne világítson */
linear-gradient(180deg,rgba(8,9,12,.30) 0%,rgba(8,9,12,.06) 24%,rgba(8,9,12,.62) 70%,rgba(8,9,12,.95) 90%,var(--bg) 100%),
radial-gradient(112% 92% at 50% 16%,#14171e 0%,#101319 48%,#08090d 100%);
}
}
/* A telephely madártávlati fotója illusztrációvá alakítva, halvány háttérként.
A `#illu` SVG-szűrő posterizálja és élkiemeli, a maszk a szélek felé elhalványítja. */
.hero__aerial{
position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.2;overflow:hidden;
/* a széleken és lefelé is elhalványul, hogy ne legyen éles vége */
-webkit-mask-image:radial-gradient(118% 62% at 50% 20%,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%);
mask-image:radial-gradient(118% 62% at 50% 20%,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%);
}
.hero__aerial img{
width:100%;height:100%;object-fit:cover;object-position:50% 40%;
/* az #illu szűrő az ![]()
saját style-jában van: a WP-Optimize a CSS-ben
álló, # jelre mutató hivatkozást a stíluslap címére írná át, és akkor nem hatna */
/* A maszk világos magja a hero felső harmadában van, a Carclassics-csarnok
viszont a fotó közepén – ezért a képet FELJEBB toljuk, különben csak a
fölötte lévő irodaházak látszanak. A nagyítás azért kell, hogy a felfelé
tolás után alul ne fogyjon ki a kép a maszk alól. */
transform:scale(var(--aerial-zoom,1.2)) translateY(var(--aerial-y,-26%));
animation:aerial 56s ease-in-out infinite alternate;
}
/* FONTOS a sorrend: ez a szabály a fenti .hero__aerial UTÁN áll, különben az
alapérték írná felül (azonos erősség mellett a későbbi nyer). Széles
képernyőn a fotóból sokkal nagyobb és világosabb szelet látszik, ezért kell
erősebben halványítani – a cél, hogy csak sejthető legyen, ne olvasható. */
@media(min-width:760px){ .hero__aerial{opacity:.055} }
@keyframes aerial{to{transform:scale(calc(var(--aerial-zoom,1.2) + .08)) translate(-1.5%,calc(var(--aerial-y,-26%) + 1%))}}
/* A színpad a rács 1. sora: a nav alatti szabad hely a szöveg fölött.
Így az autók és a logó MINDIG a szöveghez igazodnak, nem fix %-hoz –
ettől függetlenül jó marad az arány kis és nagy képernyőn is. */
/* A színpad NEM kap z-indexet (nem nyit új rétegkontextust), hogy a fejlécbe
felúszó logó a nav (z-index:100) FÖLÉ tudjon kerülni repülés közben. */
.hero__stage{position:relative;grid-row:1;pointer-events:none;min-height:clamp(150px,22vh,340px)}
/* A logó háttérvilágítású műhelycégérként viselkedik: a jel mögött lágy
fényudvar, magán a jelen többrétegű szórt fény, és egy nagyon lassú, alig
érezhető lüktetés – mint egy bemelegedő világító tábla. */
.hero__mark{
position:absolute;left:50%;top:30%;translate:-50% -50%;z-index:1;
width:min(76vw,620px);max-height:88%;display:flex;justify-content:center;opacity:0;
transform-origin:50% 0;will-change:transform;
/* a kapu felhúzása után beizzik: előbb pislákol, majd stabilan világít */
animation:markFlicker 3.1s linear calc(var(--intro) + .05s) forwards;
}
.hero__mark::before{ /* fényudvar a jel mögött */
content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
width:134%;height:155%;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(205,225,255,.3),rgba(155,185,245,.12) 55%,transparent 78%);
filter:blur(26px);
animation:markHalo 7s ease-in-out calc(var(--intro) + 3.1s) infinite;
}
.hero__mark img{
position:relative;max-width:100%;max-height:100%;width:auto;height:auto;opacity:.66;
animation:
markWarm 3.1s linear calc(var(--intro) + .05s) both,
markGlow 7s ease-in-out calc(var(--intro) + 3.1s) infinite;
}
/* Neonos beizzítás: az elején hosszú sötét szünetek egy-egy villanással,
aztán egyre sűrűbben villan, végül stabilan világít.
A közeli kulcsérték-párok adják az éles ki-be kapcsolást (nem áttűnés). */
@keyframes markFlicker{
0%,6% {opacity:0}
6.5%,8% {opacity:.72}
8.5%,21% {opacity:.03}
21.5%,23% {opacity:.8}
23.5%,34% {opacity:.05}
34.5%,36% {opacity:.85}
36.5%,45% {opacity:.07}
45.5%,47% {opacity:.9}
47.5%,54% {opacity:.1}
54.5%,56% {opacity:.95}
56.5%,61% {opacity:.15}
61.5%,63% {opacity:1}
63.5%,66% {opacity:.25}
66.5%,68% {opacity:1}
68.5%,70% {opacity:.45}
70.5%,71.5% {opacity:1}
72%,73% {opacity:.7}
73.5%,100% {opacity:1}
}
/* a szórt fény a pislákolás alatt erősödik fel */
@keyframes markWarm{
0%{filter:drop-shadow(0 0 3px rgba(255,255,255,.1)) drop-shadow(0 0 8px rgba(170,200,255,.06))}
45%{filter:drop-shadow(0 0 6px rgba(255,255,255,.2)) drop-shadow(0 0 20px rgba(170,200,255,.14))}
74%{filter:drop-shadow(0 0 18px rgba(255,255,255,.62)) drop-shadow(0 0 60px rgba(180,210,255,.46))}
100%{filter:drop-shadow(0 0 14px rgba(255,255,255,.48)) drop-shadow(0 0 44px rgba(180,210,255,.34))}
}
@keyframes markGlow{
0%,100%{filter:drop-shadow(0 0 14px rgba(255,255,255,.48)) drop-shadow(0 0 44px rgba(180,210,255,.34))}
50% {filter:drop-shadow(0 0 20px rgba(255,255,255,.64)) drop-shadow(0 0 68px rgba(180,210,255,.48))}
}
@keyframes markHalo{0%,100%{opacity:.72}50%{opacity:1}}
/* amikor a logó „beérkezett” a fejlécbe, a repülő példány eltűnik és a
fejléc logója veszi át – visibility, mert az opacityt a beizzítás animáció
(fill: forwards) felülírná */
/* --- A logó felúszása a fejlécbe (1290 px alatt) -------------------------
Korábban a JS minden görgetés-képkockán újraszámolta a helyet; mobilon ez
szükségszerűen darabos volt (a görgetés-esemény ritkábban fut, mint a
kirajzolás, és minden képkockán kényszerített újratördelés történt).
Most a logó `position:fixed`, a JS EGYSZER kiszámolja az utat, és egy
küszöbnél csak átkapcsol egy osztályt – a mozgást a böngésző egyetlen
CSS-átmenettel, a kompozitorban futtatja, tehát sima. */
@media(max-width:1289px){
.hero__mark.can-fly{
position:fixed;top:var(--mark-top);z-index:120;
transition:transform .55s var(--ease),visibility 0s linear 0s;
}
.hero__mark.can-fly.is-up{
transform:translateY(var(--fly-y)) scale(var(--fly-s));
/* a repülő példány csak az ÉRKEZÉSKOR tűnik el, ekkor veszi át a fejléc logója */
visibility:hidden;transition:transform .55s var(--ease),visibility 0s linear .55s;
}
}
/* A két autó ARÁNYOSAN van méretezve: a valós hosszuk aránya adja a képarányt
(992 GT3 ~4573 mm, klasszikus 911 ~4291 mm -> 1,066). A képek a kerékvonalig
vannak vágva, ezért azonos `bottom` értékkel pontosan egy vonalban állnak.
A vízszintes eltolás úgy van beállítva, hogy a kompozíció (meddig látszik be
az autó a képernyőre) a méretváltozástól függetlenül ugyanaz maradjon. */
/* Térbeli „törés”: halvány, elmosott vízszintes vonal az AUTÓK MÖGÖTT, pontosan
a kerekek talpvonalánál – mintha mögöttük fal lenne, ők pedig a padlón
állnának. A fal alja felé gyűlik a fény, a találkozásnál egy erősebb csík
fut, az egészet egy blur mossa el. A szélein elhalványul, hogy ne legyen
éles vége. z-index:0 → a háttér-illusztráció fölött, az autók alatt. */
.hero__stage::after{
content:"";position:absolute;left:0;right:0;bottom:var(--car-bottom);
height:clamp(90px,13vh,190px);z-index:0;pointer-events:none;
background:linear-gradient(180deg,
rgba(176,200,238,0) 0%,
rgba(176,200,238,.06) 52%,
rgba(176,200,238,.21) 88%,
rgba(210,226,255,.50) 98%, /* a fal és a padló találkozása */
rgba(210,226,255,.30) 100%); /* a blur ezt viszi tovább lefelé: padlóvisszaverődés */
/* A maszk RADIÁLIS, nem vízszintes: a vonal ott a legvilágosabb, ahol a logó
(a jelenet fényforrása) megvilágítja, és oldalt fokozatosan elfogy.
Így a fény iránya a vonalon és az autókon is ugyanaz. */
-webkit-mask-image:radial-gradient(72% 132% at 50% 100%,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%);
mask-image:radial-gradient(72% 132% at 50% 100%,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%);
filter:blur(9px);
animation:floorLine 1.4s ease calc(var(--intro) + .35s) both;
}
@keyframes floorLine{from{opacity:0}to{opacity:1}}
/* Kétrétegű árnyék, ahogy a valóságban is: egy SZOROS, sötét folt közvetlenül a
gumik alatt (ez „ragasztja le” az autót a padlóra), és egy tág, lágy szórt
árnyék. Egyetlen közepes árnyéktól lebegett az autó. */
.hero__car{
position:absolute;z-index:1;
filter:drop-shadow(0 3px 4px rgba(0,0,0,.75)) drop-shadow(0 16px 28px rgba(0,0,0,.45));
}
/* A fényelés úgy van beállítva, MINTHA A LOGÓ VILÁGÍTANÁ MEG az autókat:
az orruk (ami a középen lévő logó felé néz) világos, a hátuljuk és az aljuk
sötétebb – így kevésbé ütnek el a sötét háttértől.
A rétegek a karosszéria sziluettjére vannak maszkolva (ugyanaz a PNG, mint a
`.hero__body`), így a kerekekre is ráfut, azok ugyanis bele vannak égetve a
képbe. A jobb oldali autó `scaleX(-1)`-gyel tükrözve van, és a ::after is
vele fordul – ezért MINDKETTŐNÉL ugyanaz a helyi irány a jó: a kép jobb
felső sarka néz a logó felé. */
.hero__car::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:
radial-gradient(135% 115% at 88% -4%, rgba(203,224,255,.26) 0%, rgba(203,224,255,.09) 30%, transparent 60%),
linear-gradient(to bottom left, rgba(6,8,12,0) 26%, rgba(6,8,12,.40) 62%, rgba(6,8,12,.70) 100%),
linear-gradient(to top, rgba(6,8,12,.56) 0%, rgba(6,8,12,.20) 24%, rgba(6,8,12,0) 46%);
-webkit-mask-image:var(--sil);mask-image:var(--sil);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hero__car--modern{--sil:url(../img/hero/modern.png)}
.hero__car--classic{--sil:url(../img/hero/klasszikus.png)}
/* Ha egy böngésző nem tudja a képmaszkot, inkább ne legyen fényelés, mint hogy
a sötétítés téglalapként üljön az autón. */
@supports not ((mask-image:url("#x")) or (-webkit-mask-image:url("#x"))){
.hero__car::after{display:none}
}
.hero__body{display:block;width:100%;height:auto}
/* A kerekek külön, körbevágott képek a karosszéria megfelelő pontjain.
Begurulás közben pontosan 2 teljes fordulatot tesznek, így a végén a
féknyereg oda áll vissza, ahol a forrásképen volt. A negatív margó
százaléka a szülő SZÉLESSÉGÉHEZ igazodik – ezért jó a --d mindkét irányban. */
.hero__body{position:relative;z-index:1}
.hero__wheel{
position:absolute;left:var(--x);top:var(--y);width:var(--d);height:auto;z-index:2;
margin-left:calc(var(--d) / -2);margin-top:calc(var(--d) / -2);
animation:wheelRoll 1.35s cubic-bezier(.17,.84,.31,1) calc(var(--intro) + .25s) both;
}
.hero__car--classic .hero__wheel{animation-delay:calc(var(--intro) + .4s)}
@keyframes wheelRoll{from{rotate:-720deg}to{rotate:0deg}}
.hero__car--modern{
/* 2026-10-24: a felhasználó kérésére egy negyeddel kisebbek (92vw → 69vw);
a translate %-a változatlan, így a képből látszó rész aránya ugyanaz */
left:0;bottom:var(--car-bottom);width:69vw;
translate:-44.5% 0;animation:carL 1.35s cubic-bezier(.17,.84,.31,1) calc(var(--intro) + .25s) both;
}
.hero__car--classic{
right:0;bottom:var(--car-bottom);width:64.5vw;
/* Mindkét forráskép jobbra néz, ezért a jobb oldalit tükrözzük, hogy
szembeforduljanak. Ezen a képen nincs oldalfelirat, így olvasható marad. */
transform:scaleX(-1);
translate:46.4% 0;animation:carR 1.35s cubic-bezier(.17,.84,.31,1) calc(var(--intro) + .4s) both;
}
@media(min-width:760px){
/* egy negyeddel kisebb, mint eredetileg (65vw / 950 px → 48.75vw / 712 px);
a két autó aránya (a valós hosszuk szerint 1,066) megmarad */
.hero__car--modern{width:min(48.75vw,712px);translate:-47.4% 0}
.hero__car--classic{width:min(45.75vw,668px);translate:46.5% 0}
}
/* teljesen a képernyőn kívülről gurulnak be, lassuló lendülettel */
@keyframes carL{from{translate:-100% 0}to{translate:-44.5% 0}}
@keyframes carR{from{translate:100% 0}to{translate:46.4% 0}}
@media(min-width:760px){
@keyframes carL{from{translate:-100% 0}to{translate:-47.4% 0}}
@keyframes carR{from{translate:100% 0}to{translate:46.5% 0}}
}
.hero__copy{
/* a színpad abszolút, ezért a szöveget kézzel tesszük a 2. rácssorba */
grid-row:2;
position:relative;z-index:2;text-align:center;display:grid;justify-items:center;align-content:end;
padding-bottom:clamp(16px,2.4vh,26px);
}
.hero__title{
font-family:var(--display);font-weight:800;text-transform:uppercase;
/* akkora, hogy a leghosszabb sor a két autó közé férjen (kb. a szélesség 46%-a) */
font-size:clamp(19px,2.26vw,33px);line-height:1.1;letter-spacing:-.022em;
animation:heroUp .9s var(--ease) calc(var(--intro) + .7s) both;
}
.hero__title em{font-style:normal;color:var(--red)}
.hero__lead{
color:#cfd2d8;max-width:62ch;margin-top:clamp(14px,1.6vw,20px);font-size:clamp(15px,1.05vw,17.5px);
animation:heroUp .9s var(--ease) calc(var(--intro) + .85s) both;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(22px,2.4vw,30px);animation:heroUp .9s var(--ease) calc(var(--intro) + 1s) both}
/* mobilon kisebb gombok, és Műhelyeink helyett Webshop */
.only-desk{display:none}
@media(max-width:759px){.hero__cta .btn{--pad:12px 20px;font-size:13px;letter-spacing:.06em}}
@media(min-width:760px){.only-desk{display:inline-flex}.only-mob{display:none}}
/* ---- legújabb videó ---- */
.hero__video{
display:flex;align-items:center;gap:13px;text-align:left;max-width:100%;
padding:8px 18px 8px 8px;border-radius:14px;
background:rgba(255,255,255,.055);border:1px solid var(--line-2);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
transition:background .3s,border-color .3s,transform .45s var(--ease);
animation:heroUp .9s var(--ease) calc(var(--intro) + 1.15s) both;
}
.hero__video:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);transform:translateY(-2px)}
.hero__video__thumb{
position:relative;flex:none;width:86px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
background:var(--bg-3);
}
.hero__video__thumb img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s,transform .6s var(--ease)}
.hero__video:hover .hero__video__thumb img{opacity:1;transform:scale(1.06)}
.hero__video__play{
position:absolute;left:50%;top:50%;translate:-50% -50%;
width:26px;height:26px;border-radius:50%;background:rgba(10,11,15,.62);
border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;
transition:background .3s,border-color .3s;
}
.hero__video__play::after{
content:"";width:0;height:0;margin-left:2px;
border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.hero__video:hover .hero__video__play{background:var(--red);border-color:var(--red)}
.hero__video__txt{display:grid;gap:3px;min-width:0}
.hero__video__txt i{
font-style:normal;font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--red);
}
.hero__video__txt b{
font-family:var(--body);font-weight:600;font-size:14px;line-height:1.25;color:#e9eaee;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* ---- a hero két oldalsó blokkja: balra a legújabb videó, jobbra a Q-Service
tagság és az élő nyitvatartás ----
Keskenyebb képernyőn a gombok alatt, középen, egymás alatt. Széles képernyőn
(1200 px-től, vagyis már 13"-os laptopon is) a középső szöveg két oldalára kerülnek, a bevezető bekezdés
magasságába. Minden belső méretük `em`-ben van, a betűméretük pedig a
képernyő szélességével nő – így 14"-on és 27"-on is UGYANOLYAN ARÁNYÚAK. */
.hero__oldal{position:relative;z-index:3;margin-top:14px}
.hero__oldal--bal{margin-top:clamp(22px,3vh,34px)}
.hero__info{
display:inline-flex;align-items:center;gap:13px;text-align:left;max-width:100%;
padding:9px 18px 9px 12px;border-radius:14px;
background:rgba(255,255,255,.055);border:1px solid var(--line-2);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
animation:heroUp .9s var(--ease) calc(var(--intro) + 1.25s) both;
}
.hero__info__logo{height:40px;width:auto;flex:none}
.hero__info__txt{display:grid;gap:4px;padding-left:13px;border-left:1px solid var(--line-2)}
.hero__info__tag{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hero__nyitva{display:flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:14px;line-height:1.25;color:#e9eaee;white-space:nowrap}
.hero__nyitva.is-elo::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.hero__nyitva__sz{min-width:0;white-space:normal}
.hero__nyitva.is-nyitva::before{background:#3ccf6e;box-shadow:0 0 0 0 rgba(60,207,110,.55);animation:nyitvaPulzus 2.4s ease-out infinite}
@keyframes nyitvaPulzus{70%{box-shadow:0 0 0 7px rgba(60,207,110,0)}100%{box-shadow:0 0 0 0 rgba(60,207,110,0)}}
@media(min-width:1200px){
/* a középső hasábot a cím szélessége adja; a két szélső a maradékon
osztozik – 1200 px-en is kb. 220 px jut egy-egy kártyának */
.hero__copy{
/* width:100% kell: rácselemen a .wrap auto margója miatt különben csak
tartalomnyi széles lenne, és a két blokk nem a két autó alá kerülne */
max-width:none;width:100%;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
column-gap:clamp(16px,1.6vw,48px);align-items:center;
padding-bottom:clamp(30px,5vh,62px);
}
.hero__title{grid-column:2;grid-row:1}
.hero__lead{grid-column:2;grid-row:2}
.hero__cta{grid-column:2;grid-row:3}
/* ugyanakkora felső margó, mint a bekezdésé – így pontosan a bekezdés
közepéhez igazodnak (a rácssor a margót is magában foglalja) */
.hero__oldal{grid-row:2;margin-top:clamp(14px,1.6vw,20px);font-size:clamp(11.5px,.8vw,19px);min-width:0;max-width:100%}
/* a kártya a hasábjánál sosem szélesebb (a % itt a rácscellához mér) */
.hero__oldal--bal{grid-column:1;justify-self:start;width:min(23em,100%)}
.hero__oldal--jobb{grid-column:3;justify-self:end}
/* videókártya: minden em-ben, hogy a képernyővel együtt nőjön */
.hero__video{width:100%;gap:1em;padding:.6em 1.3em .6em .6em;border-radius:1.1em}
.hero__video__thumb{width:8em;border-radius:.6em}
.hero__video__play{width:2.2em;height:2.2em}
.hero__video__play::after{margin-left:.15em;border-left-width:.62em;border-top-width:.38em;border-bottom-width:.38em}
.hero__video__txt{gap:.3em}
.hero__video__txt i{font-size:.85em;letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero__video__txt b{font-size:1.1em}
.hero__info{gap:.9em;padding:.7em 1.3em .7em 1em;border-radius:1.1em}
.hero__info__logo{height:3.3em}
.hero__info__txt{gap:.35em;padding-left:.9em;min-width:0}
.hero__info__tag{font-size:.85em;letter-spacing:.14em}
/* biztonsági háló: ha egyszer mégsem férne ki, inkább két sorba törik, mint hogy kilógjon */
.hero__nyitva{font-size:1.1em;gap:.6em;white-space:normal}
.hero__nyitva.is-elo::before{width:.6em;height:.6em}
}
/* 1200–1479 px – a 13"-os laptopok (pl. MacBook Air: 1440 / 1470 px) sávja.
Itt kevesebb a hely a cím mellett, ezért a cím és a két kártya kicsit
kisebb, hogy a kártyák kényelmesen elférjenek a szöveg két oldalán. */
@media(min-width:1200px) and (max-width:1479px){
.hero__title{font-size:2.05vw}
.hero__oldal{font-size:clamp(10.5px,.82vw,12.5px)}
.hero__video{padding:.55em 1em .55em .55em;gap:.8em}
.hero__video__thumb{width:min(7em,36%)}
.hero__info{gap:.75em;padding:.65em 1em .65em .85em}
.hero__info__logo{height:3em}
.hero__info__txt{padding-left:.75em}
.hero__info__tag{letter-spacing:.1em}
}
@keyframes heroUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* ---- Shop-előnézet: valódi termékek a webshopból ---- */
.prodgrid{
display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:repeat(2,1fr);
margin-top:clamp(28px,3.6vw,48px);
}
@media(min-width:760px){.prodgrid{grid-template-columns:repeat(4,1fr)}}
.prod{display:grid;gap:12px;align-content:start}
.prod__pic{
display:block;overflow:hidden;border-radius:10px;background:var(--bg-3);
border:1px solid var(--line);transition:border-color .35s,transform .5s var(--ease);
}
.prod__pic img{
width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
filter:saturate(.92);transition:transform 1s var(--ease),filter .4s;
}
.prod:hover .prod__pic{border-color:var(--line-2);transform:translateY(-5px)}
.prod:hover .prod__pic img{transform:scale(1.06);filter:saturate(1)}
.prod__meta{display:grid;gap:4px;padding-inline:2px}
.prod__meta b{
font-family:var(--body);font-weight:600;font-size:clamp(13px,1.05vw,15px);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prod__meta i{
font-style:normal;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.14em;
color:var(--muted);transition:color .3s;
}
.prod:hover .prod__meta i{color:var(--red)}
.prodgrid__more{margin-top:clamp(22px,2.6vw,32px)}
/* --- Márka-marquee ---------------------------------------------------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:18px;background:var(--bg-2)}
.marquee__track{display:flex;gap:0;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
font-family:var(--outline);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.6vw,21px);letter-spacing:.06em;
padding-inline:34px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);white-space:nowrap;
transition:color .3s;
}
.marquee__track span:nth-child(odd){-webkit-text-stroke:0;color:#fff}
.marquee__track i{color:var(--red);font-style:normal;-webkit-text-stroke:0}
@keyframes marquee{to{transform:translateX(-50%)}}
/* --- Támogatók: végtelen logósáv ----------------------------------------
Balra a fix „Támogatóink” felirat, mellette a folyamatosan úszó fehér logók
(a két szélén elhalványulnak). Egérrel fölé állva megáll. A logók listája a
data.js-ben van, a JS rajzolja ki és ismétli annyiszor, hogy körbeérjen. */
.tamogatok{display:flex;align-items:center;border-bottom:1px solid var(--line);padding-block:clamp(16px,1.8vw,24px)}
.tamogatok__cim{flex:none;padding:6px clamp(18px,2vw,32px) 6px var(--gutter);border-right:1px solid var(--line);
font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tamogatok__sav{flex:1;min-width:0;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.tamogatok__track{display:flex;align-items:center;width:max-content;animation:marquee 40s linear infinite}
.tamogatok__sav:hover .tamogatok__track{animation-play-state:paused}
.tamogatok__track > *{display:flex;align-items:center;flex:none;padding-inline:clamp(26px,3.4vw,56px);opacity:.6;transition:opacity .3s}
.tamogatok__track a:hover,.tamogatok__track a:focus-visible{opacity:1}
/* az adminban feltöltött, színes logó fehérre színezve (a sáv sötét háttéren fut) */
.tamogatok__track img.is-feher{filter:brightness(0) invert(1)}
.tamogatok[hidden]{display:none}
.tamogatok__track img{display:block;width:auto;height:calc(clamp(20px,2vw,30px) * var(--m,1))}
@media(max-width:599px){
.tamogatok{flex-direction:column;align-items:stretch;gap:12px}
.tamogatok__cim{border-right:0;padding:0 var(--gutter);text-align:center}
}
@media(prefers-reduced-motion:reduce){.tamogatok__track{animation:none}.tamogatok__sav{overflow-x:auto}}
/* --- Két műhely (split) ------------------------------------------------- */
.split{display:grid;gap:2px;min-height:560px}
@media(min-width:900px){
.split{grid-template-columns:1fr 1fr}
/* FIGYELEM: a `.rv` (scroll-reveal) `transition`-je később jön a fájlban és
ugyanolyan erős szelektor, ezért felülírta ezt – emiatt a hasáb szélessége
nem átúszott, hanem ugrott. A `.split.rv` erősebb, és a reveal saját
opacity/transform átmenetét is fel kell itt sorolni, különben az veszne el. */
.split,.split.rv{transition:grid-template-columns .9s var(--ease),opacity .9s var(--ease),transform .9s var(--ease)}
.split:has(.split__pane:first-child:hover){grid-template-columns:1.35fr 1fr}
.split:has(.split__pane:last-child:hover){grid-template-columns:1fr 1.35fr}
}
.split__pane{
position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,3.5vw,56px);
min-height:520px;isolation:isolate;
}
.split__pane img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.08);transition:transform 1.4s var(--ease),filter .8s;filter:saturate(.7) brightness(.55)}
.split__pane:hover img.bg{transform:scale(1);filter:saturate(.9) brightness(.7)}
.split__pane::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,12,.15),rgba(8,9,12,.92) 75%)}
.split__tag{font-family:var(--sans);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--muted)}
.split__pane h3{font-size:clamp(26px,2.8vw,42px);text-transform:uppercase;margin:14px 0 12px}
.split__pane p{color:#d0d3d9;max-width:48ch}
.split__logo{position:absolute;top:clamp(24px,3vw,44px);left:clamp(28px,3.5vw,56px);height:56px;display:flex;align-items:center}
.split__logo img{height:100%;width:auto}
.split__foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.split__pane--q{border-left:0}
.split__pane--q .split__tag{color:#ffb3b7}
/* Az álló Q-Service logó (jel + felirat) nagyobb dobozt kap, mint a fekvő Carclassics-logó */
.split__logo:has(.qs-logo){height:92px}
.shop-card .pic .lg:has(.qs-logo){height:86px}
.choice .lg:has(.qs-logo){height:82px}
.loc__card .lg:has(.qs-logo){height:74px}
.footer__q .qs-logo{height:66px}
/* Q-Service szöveges fallback, ha még nincs logófájl */
.qs-word{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.02em;color:#fff}
.qs-word b{color:var(--red)}
/* --- Szolgáltatás lista ------------------------------------------------- */
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{
display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;
padding:18px 0;border-bottom:1px solid var(--line);position:relative;
transition:padding .35s var(--ease);
}
.svc li::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width .5s var(--ease)}
.svc li:hover::before{width:100%}
.svc li:hover{padding-left:10px}
.svc .n{font-family:var(--sans);font-weight:600;color:var(--dim);letter-spacing:.1em;font-size:15px}
.svc .name{font-family:var(--body);font-weight:600;font-size:clamp(17px,1.4vw,21px)}
.svc .who{display:flex;gap:6px}
.svc .who span{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line-2);border-radius:4px;color:var(--muted)}
.svc .who span.q{border-color:rgba(227,6,19,.5);color:#ff8a92}
.svc li.is-hidden{display:none}
/* Mobilon a két címke („YOUNGTIMER” / „Q-SERVICE”) a névvel egy sorban már nem
fér ki – a sor 375 px helyett 464 px széles lett, és a címkék fele lelógott a
képernyőről. Keskeny nézetben ezért a név ALÁ kerülnek. */
@media(max-width:700px){
.svc li{grid-template-columns:42px 1fr;gap:8px 14px}
.svc .who{grid-column:2;flex-wrap:wrap}
}
.svc-groups{display:grid;gap:clamp(40px,5vw,72px)}
.svc-group{display:grid;gap:22px}
@media(min-width:900px){.svc-group{grid-template-columns:minmax(260px,350px) 1fr}}
.svc-group h2,.svc-group h3{font-size:clamp(19px,1.55vw,25px);text-transform:uppercase;line-height:1.12}
.svc-group p{color:var(--muted);margin-top:12px;max-width:34ch}
.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter button{
font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
padding:10px 16px;border:1px solid var(--line-2);border-radius:6px;color:var(--muted);transition:all .3s;
}
.filter button:hover{color:#fff;border-color:#fff}
.filter button.is-active{background:#fff;color:#0a0a0a;border-color:#fff}
/* --- Kiemelt szolgáltatás-rács (főoldal) ------------------------------- */
.grid6{display:grid;gap:2px;background:var(--line)}
@media(min-width:640px){.grid6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid6{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--bg);padding:clamp(24px,2.6vw,40px);min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;position:relative;overflow:hidden;transition:background .4s}
.cell:hover{background:var(--bg-3)}
.cell h3{font-size:clamp(18px,1.4vw,22px);text-transform:uppercase;line-height:1.15}
.cell p{color:var(--muted);font-size:15.5px;margin-top:8px}
/* --- Miért mi + számok -------------------------------------------------- */
.why{display:grid;gap:2px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:900px){.why{grid-template-columns:repeat(4,1fr)}}
.why__item{background:var(--bg);padding:clamp(24px,2.5vw,40px) clamp(20px,2vw,32px)}
.why__item h3{font-size:clamp(20px,1.6vw,24px);text-transform:uppercase;margin-bottom:12px}
.why__item p{color:var(--muted);font-size:15.5px}
/* --- Műszerfal: a számok autós műszerként ---------------------------------
Bal és jobb szélen LED-sáv, középen két óra 0–50-es skálával. Saját háttér
nincs, az oldal hátterén ül. A rajz SVG, a feliratok HTML-ben (a betűtípus
miatt); az órákon belül minden méret az óra szélességéhez arányos (cqw). */
/* Felül és alul UGYANAKKORA a rés: felül az előző szekció (lecsökkentett) alsó
margója adja, alul a műszerfal sajátja – a következő szekció („Referencia
munkáink”) más hátterű és vonallal kezdődik, ott látszik a határ. */
.section:has(+ .muszerfal){padding-bottom:clamp(36px,4.5vw,64px)}
.muszerfal{position:relative;padding-block:0 clamp(36px,4.5vw,64px)}
.mf-racs{display:grid;align-items:center;max-width:880px;margin:0 auto;
grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,2fr) minmax(0,1fr);gap:clamp(12px,1.6vw,28px)}
.mf-szam{display:block;font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.mf-szam i{font-style:normal;color:var(--red);font-size:.42em;margin-left:.06em}
.muszerfal em{display:block;font-style:normal;font-family:var(--display);font-weight:700;color:var(--red);letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
.mf-cimke{display:block;font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:#a9adb5;line-height:1.5}
/* óra */
.mf-ora{position:relative;justify-self:center;width:min(100%,250px);aspect-ratio:1;container-type:inline-size}
.mf-ora__lap{display:block;width:100%;height:100%;overflow:visible}
.mf-keret{fill:none;stroke-width:4}
.mf-sav{fill:none;stroke:rgba(255,255,255,.035);stroke-width:22}
.mf-o{stroke-linecap:round}
.mf-o--n{stroke:#eceef2;stroke-width:4.6}
.mf-o--k{stroke:#c3c6cc;stroke-width:2.8}
.mf-o--a{stroke:rgba(255,255,255,.36);stroke-width:1.8}
.mf-szamok text{font-family:var(--display);font-weight:600;font-size:27px;fill:#d7d9de;text-anchor:middle;letter-spacing:-.02em}
.mf-fenycsik{fill:none;stroke-width:26;stroke-linecap:round;opacity:.95}
.mf-fenycsik--eles{stroke-width:3;filter:none;opacity:.95}
.mf-agy{stroke:#50545d;stroke-width:2}
.mf-agy__kozep{fill:#07080a;stroke:#26282e;stroke-width:1}
.mf-ora__szoveg{position:absolute;left:6%;right:6%;top:58%;display:grid;justify-items:center;text-align:center;pointer-events:none}
.mf-ora .mf-szam{font-size:36px;font-size:15cqw}
.mf-ora em{font-size:15px;font-size:6.2cqw;margin-top:.12em}
.mf-ora .mf-cimke{font-size:10px;font-size:max(9.5px,3.6cqw);letter-spacing:.1em;margin-top:.7em}
/* LED-sáv: asztalon függőleges, alulról felfelé gyullad */
.mf-szel{display:grid;justify-items:center;text-align:center}
.mf-led{display:flex;flex-direction:column-reverse;gap:clamp(3px,.24vw,4px);width:clamp(26px,2.3vw,38px);margin-bottom:clamp(10px,1vw,14px)}
.mf-led i{display:block;flex:none;height:clamp(6px,.55vw,9px);border-radius:2px;
background:linear-gradient(180deg,#2a2c31,#1c1d21);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
transition:background-color .15s,box-shadow .15s}
.mf-led i.be{background:linear-gradient(180deg,#ff4d58,#e30613 55%,#b3040f);
box-shadow:0 0 6px rgba(255,30,45,.55),0 0 14px rgba(255,30,45,.22),inset 0 1px 0 rgba(255,255,255,.35)}
.mf-led i.csucs{animation:mfVillog 2.2s ease-in-out infinite}
.mf-szel:last-child .mf-led i.csucs{animation-delay:-1.1s} /* a két sáv nem egyszerre villog */
@keyframes mfVillog{0%,100%{opacity:1}50%{opacity:.28}}
@media(prefers-reduced-motion:reduce){.mf-led i.csucs{animation:none}}
.mf-szel .mf-szam{font-size:clamp(24px,2.1vw,34px)}
.mf-szel em{font-size:clamp(12px,1vw,15px);margin-top:.15em}
.mf-szel .mf-cimke{font-size:clamp(9.5px,.7vw,11px);margin-top:.8em}
/* Telefonon és tableten (900 px alatt a négy hasáb már túl szűk): felül a két
óra egymás mellett, alattuk soronként egy LED-sáv –
a szöveg BALRA, egymás alatt; a sáv VÍZSZINTES, és balról jobbra gyullad. */
@media(max-width:899px){
.mf-racs{max-width:540px;grid-template-columns:1fr 1fr;gap:22px 14px}
.mf-racs > :nth-child(2){grid-area:1 / 1 / 2 / 2}
.mf-racs > :nth-child(3){grid-area:1 / 2 / 2 / 3}
.mf-racs > :nth-child(1){grid-area:2 / 1 / 3 / 3}
.mf-racs > :nth-child(4){grid-area:3 / 1 / 4 / 3}
/* a kis órába csak a szám és az egység fér; a felirat közvetlenül az óra
alá kerül (cqw = az óra szélessége, a szövegdoboz teteje 58cqw-nél van) */
.mf-ora{margin-bottom:26px}
.mf-ora .mf-szam{font-size:max(24px,15cqw)}
.mf-ora em{font-size:max(12px,6.2cqw)}
.mf-ora .mf-cimke{position:absolute;left:50%;top:calc(42cqw + 10px);transform:translateX(-50%);width:max-content;max-width:118cqw;margin:0;
font-size:10px;letter-spacing:.1em}
/* a szövegoszlop mindkét sávnál egyforma széles, így a két sáv is egyforma hosszú */
.mf-szel{grid-template-columns:128px minmax(0,1fr);justify-items:start;align-items:center;text-align:left;column-gap:16px}
.mf-szel .mf-szam,.mf-szel em,.mf-szel .mf-cimke{grid-column:1}
.mf-led{grid-column:2;grid-row:1 / 4;flex-direction:row;width:100%;margin:0;gap:4px}
.mf-led i{flex:1 1 0;height:16px}
.mf-szel .mf-szam{font-size:30px}
.mf-szel em{font-size:14px}
.mf-szel .mf-cimke{font-size:9.5px;letter-spacing:.1em;margin-top:.5em}
}
@media(max-width:359px){
.mf-racs{gap:22px 10px}
.mf-ora .mf-szam{font-size:20px}
.mf-ora em{font-size:10px}
.mf-szel{grid-template-columns:116px minmax(0,1fr)}
}
/* --- Munkáink kártyák --------------------------------------------------- */
.works{display:grid;gap:20px}
@media(min-width:640px){.works{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.works{grid-template-columns:repeat(3,1fr)}}
.work{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--bg-3);display:block;isolation:isolate}
.work img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease),filter .6s;filter:saturate(.85)}
.work:hover img{transform:scale(1.09);filter:saturate(1)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,9,12,.92));z-index:1}
.work__meta{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:12px}
.work__meta h3{font-size:clamp(17px,1.3vw,21px);text-transform:uppercase;line-height:1.1}
.work__meta .brand{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:6px}
.work__meta .go{width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.work:hover .go{background:var(--red);border-color:var(--red);transform:rotate(-45deg)}
.work.is-hidden{display:none}
/* vízszintes görgethető sáv a főoldalon */
/* Vízszintesen görgethető kártyasor. A negatív margó + belső margó páros miatt
a sor a képernyő széléig fut, de az első kártya a rácsvonalon kezdődik.
FONTOS a `scroll-padding-inline`: a `scroll-snap-align:start` a kártya
széléhez igazít, és a konténer belső margójáról nem tud – e nélkül a görgető
tartósan 20 px-en állt, vagyis az első kártya a képernyő széléhez tapadt.
A snap `proximity` és nem `mandatory`: utóbbi a képek betöltése közben
folyton visszarántotta a sort, ezért tűnt úgy, hogy nem lehet görgetni.
Az `overscroll-behavior-x:contain` megakadályozza, hogy az oldalra húzás
a böngésző vissza-navigálását indítsa el. */
.hscroll{
display:flex;gap:18px;overflow-x:auto;
scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
padding-bottom:16px;margin-inline:calc(var(--gutter) * -1);
padding-inline:var(--gutter);scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{display:none}
/* Lapozó gombok a kártyasor alatt. Nem a képekre ültetve, hanem külön sorban:
így semmit nem takarnak, és hüvelykujjal is elérhetők mobilon. Egérrel
egyébként sehogy nem lehetett lapozni, csak trackpad-del vagy Shift+görgővel. */
.hscroll-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px}
.hscroll-nav{display:flex;gap:10px;margin-left:auto}
.hscroll-nav[hidden]{display:none}
.hscroll-btn{
width:46px;height:46px;border-radius:50%;flex:none;
border:1px solid var(--line-2);background:transparent;color:#fff;
font-family:var(--sans);font-size:17px;line-height:1;
display:grid;place-items:center;cursor:pointer;
transition:background .3s,border-color .3s,opacity .3s,transform .35s var(--ease);
}
.hscroll-btn:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.hscroll-btn:active:not(:disabled){transform:scale(.94)}
.hscroll-btn:disabled{opacity:.28;cursor:default}
.hscroll .work{flex:0 0 min(78vw,420px);scroll-snap-align:start;aspect-ratio:4/3}
/* --- Videók ------------------------------------------------------------- */
.videos{display:grid;gap:18px}
@media(min-width:640px){.videos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.videos{grid-template-columns:repeat(3,1fr)}}
.video{display:block;position:relative;border-radius:10px;overflow:hidden;background:var(--bg-3);text-align:left}
.video .thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.video .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:saturate(.8)}
.video:hover .thumb img{transform:scale(1.06)}
.video .play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
background:rgba(8,9,12,.6);backdrop-filter:blur(6px);border:1px solid var(--line-2);display:grid;place-items:center;
transition:background .3s,transform .4s var(--ease);
}
.video .play::after{content:"";width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.video:hover .play{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}
/* Megtekintésszám a borítókép alján. Szándékosan NEM a címkesorba került:
ott a hosszú sorozatnevek mellett (pl. „Műhelynapló (5. rész)") kis kártyán
kitörné a sort. És nem is „pirula", hanem lágy sötétedésre ültetett felirat –
ugyanaz a megoldás, mint a munkakártyák képaláírásánál, így nem üt el a
többitől. Ahol nincs adat (a kézi listából jövő régebbi videóknál),
egyszerűen nem jelenik meg semmi. */
.video .views{
position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
display:flex;flex-direction:column;align-items:flex-end;gap:5px;
padding:34px 14px 11px;text-align:right;
font-family:var(--sans);line-height:1;white-space:nowrap;
color:rgba(255,255,255,.93);
background:linear-gradient(to top,rgba(8,9,12,.84) 0%,rgba(8,9,12,.44) 52%,rgba(8,9,12,0) 100%);
}
.video .views__szam{font-weight:700;font-size:15px;letter-spacing:.02em}
.video .views__cimke{font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.video .body{padding:18px 20px 22px}
.video h3{font-family:var(--body);font-weight:600;font-size:17px;line-height:1.3}
.video p{color:var(--muted);font-size:14.5px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video .ep{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}
.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.86);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__box{width:min(100%,1080px);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;transform:scale(.96);transition:transform .45s var(--ease)}
.modal.is-open .modal__box{transform:none}
.modal__box iframe{width:100%;height:100%;border:0}
.modal__close{position:absolute;top:22px;right:22px;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:#fff;padding:10px 14px;border:1px solid var(--line-2);border-radius:6px}
/* --- Hírek -------------------------------------------------------------- */
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news li{display:grid;gap:10px 24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center}
@media(min-width:800px){.news li{grid-template-columns:130px 1fr auto}}
.news time{font-family:var(--sans);font-weight:600;letter-spacing:.14em;color:var(--red);font-size:14px;text-transform:uppercase}
.news h3{font-size:clamp(18px,1.6vw,24px);text-transform:uppercase}
.news p{color:var(--muted);margin-top:6px}
/* --- Shop banner -------------------------------------------------------- */
.shop{position:relative;border-radius:14px;overflow:hidden;min-height:380px;display:flex;align-items:end;padding:clamp(28px,3.5vw,56px);isolation:isolate}
.shop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.6)}
.shop::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,9,12,.9),rgba(8,9,12,.2))}
.shop h2{text-transform:uppercase;font-size:clamp(22px,3.5vw,48px);line-height:1.05}
.shop p{color:#d5d7dc;max-width:46ch;margin:14px 0 24px}
/* --- Kapcsolat sáv ------------------------------------------------------ */
.contact{display:grid;gap:2px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:900px){.contact{grid-template-columns:1.1fr 1fr 1fr}}
.contact > div{background:var(--bg);padding:clamp(26px,3vw,44px)}
.contact .k{font-family:var(--sans);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-bottom:14px}
.contact .v{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,24px);line-height:1.3}
.contact .v a:hover{color:var(--red)}
.contact .sub{color:var(--muted);margin-top:8px;font-size:15px}
.contact .map{padding:0;position:relative;min-height:260px;overflow:hidden}
/* --- Lábléc ------------------------------------------------------------- */
/* A lábléc semleges Helvetica/Arial betűvel fut, nem a display/condensed
párossal – a felhasználó kérésére. */
.footer{
border-top:1px solid var(--line);background:var(--bg-2);
padding-block:clamp(48px,6vw,80px) 28px;font-family:var(--sans);
}
.footer__grid{display:grid;gap:clamp(30px,3.4vw,44px)}
@media(min-width:900px){.footer__grid{grid-template-columns:1fr .8fr 1fr .8fr}}
/* A két logó egymás alatt, egymáshoz képest KÖZÉPRE igazítva. A blokk maga a
hasáb elején marad (justify-self:start), csak a logók tengelye közös. */
.footer__brand{display:grid;gap:26px;align-content:start;justify-items:center;justify-self:start}
.footer__logo img{height:58px;width:auto}
.footer__qs{height:38px;width:auto}
.footer h4,.footer .footer__cim{
font-family:var(--sans);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
font-size:12.5px;color:var(--muted);margin-bottom:18px;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer li,.footer a{font-family:var(--sans);font-size:15px;line-height:1.45}
.footer ul a{font-weight:400;transition:color .3s}
.footer ul a:hover{color:var(--red)}
/* közösségi linkek ikonnal */
.footer__social a{display:inline-flex;align-items:center;gap:11px}
.footer__social svg{width:19px;height:19px;flex:none;fill:currentColor;opacity:.75;transition:opacity .3s,fill .3s}
.footer__social a:hover svg{opacity:1}
/* --- Lábléc mobilon: tömör, kétoszlopos elrendezés -----------------------
900 px alatt a négy hasáb egymás alá került, ettől a lábléc kb. 620 px magas
volt. Most: 1. sor a két logó egymás alatt középen, 2. sor Oldalak | Elérhetőség,
3. sor a közösségi ikonok egy sorban a címke mellett. Kb. a felére rövidül. */
@media(max-width:899px){
.footer{padding-block:38px 24px}
.footer__grid{grid-template-columns:1fr 1fr;gap:30px 22px}
.footer__brand{grid-column:1/-1;justify-self:stretch;display:flex;flex-direction:column;align-items:center;gap:18px}
.footer__logo img{height:46px}
.footer__qs{height:30px}
.footer__follow{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer__follow h4,.footer__follow .footer__cim{margin-bottom:0}
/* .footer ul a display:grid-et adja, ezért kell ide az erősebb szelektor */
.footer ul.footer__social{display:flex;gap:clamp(18px,6vw,30px)}
.footer__social svg{width:23px;height:23px;opacity:.9}
/* a felirat marad a képernyőolvasóknak, csak nem látszik */
.footer__social span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.footer__bar{margin-top:30px;padding-top:20px}
}
.footer__bar{
display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;
margin-top:clamp(36px,4vw,52px);padding-top:24px;border-top:1px solid var(--line);
font-family:var(--sans);font-size:13.5px;color:var(--dim);
}
.footer__bar a:hover{color:#fff}
.footer__bar .footer__keszito{display:inline-flex;align-items:baseline;gap:9px;color:inherit;text-decoration:none}
.footer__keszito span{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.footer__keszito b{position:relative;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#cfd2d8;transition:color .3s}
.footer__keszito b::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.footer__bar .footer__keszito:hover b,.footer__bar .footer__keszito:focus-visible b{color:#fff}
.footer__keszito:hover b::after,.footer__keszito:focus-visible b::after{transform:scaleX(1)}
/* --- Aloldal fejléc ----------------------------------------------------- */
.page-hero{padding-top:calc(var(--nav-h) + clamp(40px,7vw,100px));padding-bottom:clamp(40px,5vw,72px);position:relative;overflow:hidden;background:radial-gradient(900px 500px at 70% 0%,#161a23,transparent 70%)}
.page-hero .t-h1{max-width:22ch}
/* Keskeny kijelzőn a 22ch korlát rövidebb, mint egy hosszú szó („SZOLGÁLTATÁSAINK”),
és a `.page-hero` overflow:hidden-je levágta a végét. */
@media(max-width:600px){.page-hero .t-h1{max-width:none}}
.page-hero .t-lead{margin-top:22px}
.page-hero__ghost{position:absolute;right:-2%;top:var(--nav-h);font-family:var(--outline);font-weight:700;text-transform:uppercase;font-size:clamp(70px,14vw,230px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap;pointer-events:none;user-select:none}
/* YouTube-csatorna számláló a Műhelysztorik heróban. Három egyforma hasáb,
hajszálvonallal elválasztva; a szám a JS-ből fut fel a végértékig. */
.ytstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(30px,4vw,52px);max-width:860px;border-top:1px solid var(--line)}
.ytstat > div{padding:clamp(18px,2.2vw,28px) clamp(12px,2vw,30px) 0;border-left:1px solid var(--line);min-width:0}
.ytstat > div:first-child{padding-left:0;border-left:0}
.ytstat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,3.7vw,56px);line-height:1;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ytstat span{display:block;margin-top:12px;font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--muted);line-height:1.3}
@media(max-width:600px){
.ytstat > div{padding:16px 10px 0}
.ytstat b{font-size:clamp(21px,6.4vw,30px)}
.ytstat span{font-size:10.5px;letter-spacing:.06em;margin-top:9px}
}
@media(max-width:380px){
.ytstat > div{padding:14px 6px 0}
.ytstat span{font-size:9.5px;letter-spacing:.03em}
}
.crumbs{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-bottom:26px}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;color:var(--red);margin-inline:10px}
/* --- Műhelyeink oldal --------------------------------------------------- */
.shop-cards{display:grid;gap:22px}
@media(min-width:900px){.shop-cards{grid-template-columns:1fr 1fr}}
.shop-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-2);display:grid;grid-template-rows:auto 1fr}
/* A rácselemek alapértelmezett `min-width:auto`-ja a tartalom min-content
méretét kényszeríti: emiatt a kártya belseje mobilon 320 helyett 387 px
széles lett, és a jobb széle levágódott. */
.shop-card > *,.shop-card .body > *{min-width:0}
.shop-card .pic{aspect-ratio:16/9;overflow:hidden;position:relative}
.shop-card .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.85);transition:transform 1.2s var(--ease)}
.shop-card:hover .pic img{transform:scale(1.05)}
.shop-card .pic .lg{position:absolute;left:22px;bottom:22px;height:54px;display:flex;align-items:center}
.shop-card .pic .lg img{height:100%;width:auto;object-fit:contain}
.shop-card .body{padding:clamp(24px,2.6vw,40px);display:grid;gap:18px;align-content:start}
.shop-card h3{font-size:clamp(22px,2vw,30px);text-transform:uppercase}
.shop-card .body p{color:var(--muted)}
.shop-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px}
.shop-card dt{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--dim);padding-top:3px}
.shop-card dd{margin:0}
.shop-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.shop-card ul li{padding-left:18px;position:relative;font-size:15.5px}
.shop-card ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:2px;background:var(--red)}
.compare{width:100%;border-collapse:collapse;font-size:15.5px}
.compare th,.compare td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare th{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--muted)}
.compare td:first-child{color:var(--muted)}
/* A két műhely-oszlopban nincs szöveg, csak jel: pipa vagy halvány gondolatjel.
A „Youngtimernek” / „Modern autónak” kiegészítés azért hagyható el, mert az
oszlop FEJLÉCE úgyis megmondja, melyik műhelyről van szó.
A képernyőolvasóknak a cellában lévő rejtett „Igen”/„Nem” szöveg szól. */
/* A két műhely-oszlop csak annyi, amennyit a FEJLÉCE kíván (azt nem törjük),
a jel pedig középen ül alatta. */
.compare th:nth-child(n+2){white-space:nowrap;text-align:center}
.compare .yes,.compare .no{width:1px;text-align:center}
/* Telefonon a két műhely fejlécében nem a NEVÜK, hanem a LOGÓJUK áll – rövidebb
és egyből felismerhető. Az `alt` szöveg viszi tovább a jelentést. */
.compare__logo{display:none}
/* 700 px a váltópont, nem 600: a NEVES fejléccel a táblázat csak e fölött fér ki
görgetés nélkül (601 px-en 591 px széles lett volna egy 553-as keretben). */
@media(max-width:700px){
.compare__nev{display:none}
/* a globális `img{max-width:100%}` különben a szűk oszlophoz nyomná össze */
.compare__logo{display:block;margin:0 auto;width:auto;max-width:none}
.compare__logo--cc{height:24px}
.compare__logo--qs{height:30px}
.compare th,.compare td{padding:14px 8px}
.compare th{letter-spacing:.1em;font-size:12px}
.compare{font-size:14.5px}
}
.compare .yes::before,.compare .no::before{
font-family:var(--sans);font-size:20px;line-height:1;
}
.compare .yes::before{content:"✓";color:var(--red);font-weight:700}
.compare .no::before{content:"–";color:var(--dim)}
.table-wrap{overflow-x:auto}
/* --- GYIK --------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 40px;gap:16px;align-items:center;padding:22px 0;font-family:var(--body);font-weight:600;font-size:clamp(17px,1.4vw,20px);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--sans);color:var(--dim);letter-spacing:.1em;font-size:14px}
.faq summary .pm{width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;position:relative;justify-self:end;transition:transform .4s var(--ease),border-color .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:12px;height:2px}.faq summary .pm::after{width:2px;height:12px;transition:opacity .3s}
.faq details[open] summary{color:var(--red)}
.faq details[open] .pm{transform:rotate(90deg);border-color:var(--red)}
.faq details[open] .pm::after{opacity:0}
.faq .a{padding:0 0 26px 64px;color:var(--muted);max-width:70ch}
.faq .a a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* az Elementorban szerkesztett válasz bekezdésekre bontva érkezhet */
.faq .a p + p,.faq .a p + ul,.faq .a ul + p{margin-top:12px}
.faq .a ul{padding-left:1.2em;display:grid;gap:6px}
/* --- Rólunk ------------------------------------------------------------- */
.letter{display:grid;gap:40px}
@media(min-width:1000px){.letter{grid-template-columns:1.1fr .9fr;gap:72px}}
.letter__text p{margin-bottom:18px;color:#d5d7dc}
.letter__text p strong{color:#fff}
.letter__sign{margin-top:28px;font-family:var(--display);font-weight:700;font-size:20px}
.letter__sign small{display:block;font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-top:6px}
.letter__pics{display:grid;gap:14px;align-content:start}
.letter__pics img{border-radius:10px;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.8)}
.letter__pics img:nth-child(2){aspect-ratio:16/9}
.team{display:grid;gap:2px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:640px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.team{grid-template-columns:repeat(4,1fr)}}
.team div{background:var(--bg);padding:26px 24px}
.team .name{font-family:var(--display);font-weight:700;font-size:18px}
.team .role{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--muted);margin-top:8px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:1px solid var(--line-2);margin-left:8px}
.timeline li{position:relative;padding:0 0 34px 34px}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--bg)}
.timeline .y{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1}
.timeline p{color:var(--muted);margin-top:8px;max-width:52ch}
/* --- Ajánlatkérés ------------------------------------------------------- */
.choose{display:grid;gap:18px}
@media(min-width:800px){.choose{grid-template-columns:1fr 1fr}}
.choice{
position:relative;text-align:left;border:1px solid var(--line-2);border-radius:14px;padding:clamp(24px,2.6vw,36px);
background:var(--bg-2);display:grid;gap:14px;align-content:start;overflow:hidden;isolation:isolate;
transition:border-color .35s,transform .45s var(--ease),background .35s;
}
.choice::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px 260px at 100% 0%,rgba(227,6,19,.18),transparent 70%);opacity:0;transition:opacity .4s}
.choice:hover{border-color:#fff;transform:translateY(-3px)}
.choice.is-active{border-color:var(--red);background:#120d0f}
.choice.is-active::before{opacity:1}
.choice .lg{height:52px;display:flex;align-items:center}
.choice .lg img{height:100%;width:auto;object-fit:contain}
.choice h3{font-size:clamp(20px,1.8vw,26px);text-transform:uppercase}
.choice p{color:var(--muted);font-size:15.5px}
.choice .tick{position:absolute;top:22px;right:22px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:all .3s}
.choice .tick::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .35s var(--ease)}
.choice.is-active .tick{border-color:var(--red)}
.choice.is-active .tick::after{transform:scale(1)}
.choice .fits{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.choice .fits span{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.form{display:grid;gap:18px;margin-top:40px}
/* Lépcsőzetes űrlap: a 2. rész csak műhelyválasztás után, a 3. rész csak a
2. kötelező mezőinek kitöltése után jelenik meg. A `hidden`-t felül kell
ütni, mert a `.qstep` saját `display`-t kap. */
.qstep{display:grid;gap:18px;animation:qstepIn .45s var(--ease) both}
.qstep[hidden]{display:none}
@keyframes qstepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* amíg nincs kiválasztva műhely, a helyén egy halk útmutató áll */
.form__wait{
font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
font-size:13px;color:var(--dim);padding:26px 0 4px;
}
.form__wait[hidden]{display:none}
.form__row{display:grid;gap:18px}
@media(min-width:700px){.form__row{grid-template-columns:1fr 1fr}.form__row--3{grid-template-columns:1fr 1fr 1fr}}
.field{display:grid;gap:8px}
.field label{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;color:var(--muted)}
.field input,.field select,.field textarea{
width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;color:#fff;
padding:15px 16px;font:inherit;font-size:16px;transition:border-color .3s,box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(227,6,19,.18)}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line-2);border-radius:6px;color:var(--muted);transition:all .25s}
.chips input:checked + span{background:#fff;color:#0a0a0a;border-color:#fff}
.chips span:hover{border-color:#fff;color:#fff}
.upload{border:1px dashed var(--line-2);border-radius:8px;padding:22px;text-align:center;color:var(--muted);font-size:15px;transition:border-color .3s,background .3s;cursor:pointer}
.upload:hover{border-color:#fff;background:var(--bg-2)}
.upload b{color:#fff}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.consent input{margin-top:5px;accent-color:var(--red);width:18px;height:18px}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.form__foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:8px}
.form__foot .note{color:var(--dim);font-size:14px}
.step{font-family:var(--sans);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-bottom:14px}
.step b{color:var(--red);font-weight:600}
.selected-shop{display:none;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);margin-top:26px;font-size:15px}
.selected-shop.is-on{display:flex}
.selected-shop b{font-family:var(--display);font-weight:700;font-size:15px}
.selected-shop button{margin-left:auto;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.selected-shop button:hover{color:#fff}
.done{display:none;padding:clamp(36px,5vw,72px);border:1px solid var(--line);border-radius:14px;text-align:center;background:var(--bg-2)}
.done.is-on{display:block}
.done h3{font-size:clamp(24px,2.6vw,36px);text-transform:uppercase}
.done p{color:var(--muted);margin-top:14px;max-width:52ch;margin-inline:auto}
.done .ok{width:74px;height:74px;border-radius:50%;background:var(--red);margin:0 auto 24px;display:grid;place-items:center}
.done .ok::after{content:"";width:14px;height:26px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) translate(-2px,-3px)}
/* --- Jogi szöveg -------------------------------------------------------- */
.legal{max-width:78ch}
.legal p{margin-bottom:16px;color:#d0d3d9}
.legal h2{font-size:clamp(20px,1.8vw,26px);text-transform:none;margin:40px 0 16px;letter-spacing:0}
.legal ul{color:#d0d3d9;padding-left:20px}
.legal li{margin-bottom:8px}
/* --- Kapcsolat oldal ---------------------------------------------------- */
.loc{display:grid;gap:22px}
@media(min-width:900px){.loc{grid-template-columns:1fr 1fr}}
.loc__card{border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.6vw,40px);background:var(--bg-2);display:grid;gap:18px;align-content:start}
.loc__card h3{font-size:clamp(20px,1.8vw,26px);text-transform:uppercase}
.loc__card .lg{height:46px;display:flex;align-items:center}
.loc__card .lg img{height:100%;width:auto;object-fit:contain}
.loc__card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.loc__card dt{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--dim);padding-top:3px}
.loc__card dd{margin:0;font-weight:500}
.loc__card dd a:hover{color:var(--red)}
/* `width:100%` nélkül az aspect-ratio + min-height párosból a SZÉLESSÉG jött
(280 x 21/9 = 653 px), így mobilon a térkép jobb oldala lelógott a képernyőről. */
.map-big{width:100%;margin-top:22px;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:21/9;min-height:280px}
/* Élő, görgethető Google-térkép. A Google nem enged saját stílust a kulcs nélküli
beágyazásba, ezért CSS-szűrő teszi sötétté. Az `invert` + `hue-rotate(180deg)`
páros a klasszikus sötét-mód trükk: a világosságot fordítja, a színárnyalatot
viszont visszaforgatja – így a térkép sötét lesz, de a JELÖLŐ PIROS MARAD.
(Sima `grayscale(1) invert()` mellett a jelölő szürke lenne.) */
.map-live{position:absolute;inset:0;width:100%;height:100%;border:0;
filter:invert(.93) hue-rotate(180deg) saturate(1.25) contrast(.95) brightness(.88)}
/* Amíg rá nem kattintanak, egy átlátszó réteg fogja a görgetést – különben a
térkép elnyelné a lapgörgetést (mobilon ez a legbosszantóbb hiba). */
.map__lock{
position:absolute;inset:0;border:0;background:transparent;cursor:pointer;
display:grid;place-items:center;
font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;
color:transparent;transition:background .3s,color .3s;
}
.map__lock:hover,.map__lock:focus-visible{background:rgba(8,9,12,.35);color:#fff}
/* Érintőképernyőn nincs hover, ezért ott végig látszik a felirat. */
@media(hover:none){.map__lock{color:rgba(255,255,255,.85);background:rgba(8,9,12,.22)}}
.map__lock[hidden]{display:none}
/* A gomb a BAL FELSŐ sarokban van: alul a Google jelzése és a „Térképadatok ©"
sor fut, azt nem szabad eltakarni. */
.map-big .btn{position:absolute;left:22px;top:22px}
@media(max-width:700px){.map-big .btn{left:14px;top:14px}}
.entrance{display:grid;gap:22px;margin-top:22px}
@media(min-width:900px){.entrance{grid-template-columns:1fr 1fr}}
.entrance img{border-radius:12px;width:100%;aspect-ratio:16/9;object-fit:cover}
.entrance p{color:var(--muted)}
/* --- Scroll-reveal ------------------------------------------------------ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}
/* --- Oldalátmenet (függöny) --------------------------------------------- */
.curtain{position:fixed;inset:0;z-index:300;background:var(--red);transform:translateY(100%);pointer-events:none;
display:grid;place-items:center}
/* Logók a függöny közepén – a függönnyel EGYÜTT mozognak, így felúszáskor és
kiúszáskor is rajta vannak. A Q-Service a Carclassics-logó kb. 70%-a,
ahogy a mintán. */
.curtain__logok{display:grid;justify-items:center;gap:clamp(30px,5vh,64px)}
.curtain__cc{width:clamp(190px,24vw,380px);height:auto}
.curtain__qs{width:clamp(132px,16.8vw,266px);height:auto}
.curtain.is-in{animation:curtainIn .55s var(--ease-io) forwards}
.curtain.is-out{transform:translateY(0);animation:curtainOut .7s var(--ease-io) forwards}
@keyframes curtainIn{to{transform:translateY(0)}}
@keyframes curtainOut{to{transform:translateY(-100%)}}
/* --- Egyéb -------------------------------------------------------------- */
.two{display:grid;gap:22px}
/* Q-Service embléma a „Mit jelent ez az ügyfélnek?" cím alatt. A szélessége a
CÍM BETŰMÉRETÉHEZ kötött, nem a képernyőhöz – így minden méretben ugyanaz az
arány. (Fix 440 px mellett mobilon a cím 1,8-szorosa volt, asztalin kisebb.) */
.qs-nagy{width:min(100%,calc(var(--h2-size) * 6.3));height:auto;margin-top:clamp(26px,3.4vw,48px)}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}
.pill-note{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
.rv{opacity:1;transform:none}
.hero__title,.hero__lead,.hero__cta{animation:none;opacity:1;transform:none}
.hero__mark{animation:none;opacity:1}
.hero__mark img,.hero__mark::before{animation:none}
.hero__car--modern,.hero__car--classic{animation:none;opacity:1}
.hero__video,.hero__info{animation:none;opacity:1;transform:none}
.hero__nyitva.is-nyitva::before{animation:none}
}
/* --- Belépő: garázskapu felhúzása -----------------------------------------
Az oldal betöltésekor egy szekcionált garázskapu látszik a Carclassics
logóval, ami felcsúszik. Csak közvetlen betöltéskor fut le: belső
navigációnál a vörös függöny (`.curtain`) veszi át, ilyenkor a -ben
lévő apró script `no-intro` osztályt tesz a -re, még festés előtt. */
.garage{
position:fixed;inset:0;z-index:500;pointer-events:none;
display:grid;place-items:center;overflow:hidden;
background:
repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),
repeating-linear-gradient(180deg,#171a21 0 86px,#0d0f14 86px 90px);
will-change:transform;
animation:garageUp 1.45s cubic-bezier(.72,0,.28,1) .8s forwards;
}
.garage::before{ /* halvány fény a kapu tetején */
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 42%);
}
.garage::after{ /* a kapu alsó éle alatti árnyék a lapon */
content:"";position:absolute;left:0;right:0;bottom:-26px;height:26px;
background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);
}
.garage img{
position:relative;width:min(52vw,320px);height:auto;
opacity:0;transform:translateY(10px);
animation:garageLogo .65s var(--ease) .15s forwards;
}
@keyframes garageLogo{to{opacity:1;transform:none}}
@keyframes garageUp{to{transform:translateY(-101%)}}
.no-intro .garage{display:none}
@media(prefers-reduced-motion:reduce){.garage{display:none}}
/* --- 404 oldal ----------------------------------------------------------
A meglévő formanyelvből épül: kontúros óriásszám (mint az aloldalak
„szellemfelirata"), vörös akcent a címben, és a klasszikus 911 kihajt a
képből. Saját színt vagy betűtípust nem vezet be. */
.e404{
position:relative;overflow:hidden;min-height:100svh;display:grid;align-items:center;
padding-top:calc(var(--nav-h) + clamp(30px,5vw,60px));padding-bottom:clamp(60px,9vw,120px);
background:radial-gradient(1100px 620px at 68% 12%,#171b24,transparent 72%);
}
.e404__ghost{
position:absolute;left:50%;top:48%;translate:-50% -50%;z-index:0;
font-family:var(--outline);font-weight:700;font-size:clamp(150px,34vw,520px);line-height:.8;
color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);
letter-spacing:.02em;white-space:nowrap;pointer-events:none;user-select:none;
}
/* Az autó és a középre zárt szövegdoboz EGYMÁSHOZ van méretezve. A doboz a
képernyő 62%-a: ennyi kell, hogy a „nincs a műhelyben." a széles, nagybetűs
címbetűvel is egy sorba férjen. A maradékból jut az autónak (31%, ebből 54%
látszik) – a kettő így sosem ér össze, és együtt nő a képernyővel. */
.e404{--e404-auto:min(700px,31vw)}
/* A 911 orra JOBBRA néz (a képet tilos tükrözni), ezért a bal szélről bukkan
elő és arra is halad. A negatív `left` a saját szélességéhez igazodik – nem
a képernyőhöz –, így minden méretnél nagyjából a fele látszik. */
.e404__car{
position:absolute;left:calc(var(--e404-auto) * -0.46);right:auto;
bottom:clamp(-10px,-1vw,0px);z-index:0;
width:var(--e404-auto);height:auto;opacity:.5;pointer-events:none;user-select:none;
filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
animation:e404be 1.1s var(--ease) .15s both;
}
@keyframes e404be{from{opacity:0;transform:translateX(-70px)}to{opacity:.5;transform:none}}
.e404__in{position:relative;z-index:1;max-width:min(900px,62vw)}
/* A doboz középen áll, nem ér a képernyő széléhez, ezért asztali méretben
nem kell a .wrap oldalsó margója – e nélkül fér ki a cím két sorban. */
@media(min-width:901px){ .e404__in{padding-inline:0} }
.e404__kicker{
display:inline-block;font-family:var(--sans);font-weight:600;font-size:12.5px;
letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:clamp(14px,1.6vw,20px);
}
.e404 .t-h1 em{font-style:normal;color:var(--red)}
.e404__lead{margin-top:clamp(16px,1.8vw,22px);max-width:54ch}
.e404__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
.e404__links{
display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(34px,4vw,52px);
padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line);
}
.e404__links a{
font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);transition:color .3s;
}
.e404__links a:hover{color:#fff}
.e404__hivas{margin-top:18px;color:var(--dim);font-size:15px}
.e404__hivas a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Kis kijelzőn az autó csak zavarna a szöveg mögött. */
/* Telefonon és kis tableten nincs hely egymás mellett: a szöveg teljes
szélességű, az autó pedig alá kerül, a lap aljára – a szöveg hagy neki
helyet (a kép magassága a szélességének kb. 31%-a). */
@media(max-width:900px){
.e404{--e404-auto:min(430px,88vw)}
.e404__car{opacity:.32}
.e404__in{max-width:none;padding-bottom:calc(var(--e404-auto) * .31 + 14px)}
.e404__ghost{top:34%;font-size:clamp(130px,44vw,300px)}
}
@media(prefers-reduced-motion:reduce){.e404__car{animation:none;opacity:.5;transform:none}}
/* --- Többválasztós lenyíló (ajánlatkérő: „Mire van szükséged?") ----------
Natív