@layer components {
.bf-lap .akcio-hero .hero-media::after{display:none}
.bf-lap .akcio-hero-panel{
max-width:calc(var(--container-max) / 2);
padding:var(--panel-padding);
border-radius:var(--panel-radius);
background:linear-gradient(150deg,
color-mix(in srgb,var(--panel-dark-bg) 80%,transparent) 0%,
color-mix(in srgb,var(--panel-dark-bg) 64%,transparent) 100%);
-webkit-backdrop-filter:blur(var(--space-24)) saturate(1.5);
backdrop-filter:blur(var(--space-24)) saturate(1.5);
border:1px solid color-mix(in srgb,var(--panel-dark-text) 22%,transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb,var(--panel-dark-text) 34%,transparent),
inset 0 0 var(--space-48) color-mix(in srgb,var(--panel-dark-text) 6%,transparent),
0 var(--space-24) var(--space-64) color-mix(in srgb,var(--panel-dark-bg) 45%,transparent);
}
.bf-lap .akcio-hero .hero-title,.bf-lap .akcio-hero .hero-lead{color:var(--panel-dark-text)}
.bf-lap .akcio-hero .hl{background:var(--primary);color:var(--on-primary)}
.bf-lap .akcio-hero-panel .btn-inverse{
background:var(--panel-dark-text);color:var(--panel-dark-bg);
border-color:var(--panel-dark-text);
}
.bf-lap .akcio-hero .hero-inner{z-index:3}
.bf-lap .akcio-hero .hero-media{
overflow:visible;
--akcio-csepp-meret:clamp(var(--space-8),1.1vw,calc(var(--space-16) + var(--space-4)));
--akcio-csepp-ciklus:6s;
}
.bf-lap .akcio-cseppek{display:none;position:absolute;inset:0;z-index:2;pointer-events:none}
.bf-lap [data-lejatszas] > .akcio-cseppek{display:block}
.bf-lap .akcio-csepp{
position:absolute;left:var(--x);top:var(--y);bottom:calc(var(--space-48) * -1);width:0;
filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--on-primary) 30%,transparent));
}
.bf-lap .akcio-csepp::before{
content:"";position:absolute;
left:calc(var(--akcio-csepp-meret) / -2);top:calc(var(--akcio-csepp-meret) * -.45);
inline-size:var(--akcio-csepp-meret);block-size:calc(var(--akcio-csepp-meret) * 1.3);
background:
radial-gradient(circle at 36% 56%,var(--text-on-dark) 0 11%,transparent 13%),
radial-gradient(circle at 64% 84%,color-mix(in srgb,var(--text-on-dark) 80%,transparent) 0 6%,transparent 8%),
radial-gradient(70% 55% at 50% 64%,transparent 48%,color-mix(in srgb,var(--on-primary) 70%,transparent) 100%),
linear-gradient(color-mix(in srgb,var(--border-focus) 45%,transparent) 18%,transparent 52%,
color-mix(in srgb,var(--on-primary) 55%,transparent) 100%),
color-mix(in srgb,var(--text-on-dark) 14%,transparent);
-webkit-mask:url("/assets/img/black-friday/icon/csepp.svg") center/100% 100% no-repeat;
mask:url("/assets/img/black-friday/icon/csepp.svg") center/100% 100% no-repeat;
transform-origin:50% 0;opacity:0;
}
.bf-lap .akcio-csepp:nth-child(1){--x:8.8%;--y:88.8%;--t:calc(var(--akcio-csepp-ciklus) * .95);--k:0s}
.bf-lap .akcio-csepp:nth-child(2){--x:29.8%;--y:90.2%;--t:calc(var(--akcio-csepp-ciklus) * 1.15);--k:calc(var(--akcio-csepp-ciklus) * -.35)}
.bf-lap .akcio-csepp:nth-child(3){--x:47.7%;--y:89.9%;--t:calc(var(--akcio-csepp-ciklus) * .82);--k:calc(var(--akcio-csepp-ciklus) * -.6)}
.bf-lap .akcio-csepp:nth-child(4){--x:55.2%;--y:92.8%;--t:calc(var(--akcio-csepp-ciklus) * 1.2);--k:calc(var(--akcio-csepp-ciklus) * -.15)}
.bf-lap .akcio-csepp:nth-child(5){--x:68.5%;--y:93.9%;--t:calc(var(--akcio-csepp-ciklus) * .9);--k:calc(var(--akcio-csepp-ciklus) * -.75)}
.bf-lap .akcio-csepp:nth-child(6){--x:91%;--y:86.7%;--t:calc(var(--akcio-csepp-ciklus) * 1.05);--k:calc(var(--akcio-csepp-ciklus) * -.5)}
.bf-lap [data-lejatszas] .akcio-csepp{animation:akcio-csepp-esik var(--t) linear var(--k) infinite}
.bf-lap [data-lejatszas] .akcio-csepp::before{animation:akcio-csepp-alak var(--t) linear var(--k) infinite}
.bf-lap .hero-media[data-lejatszas="all"] .akcio-csepp,.bf-lap .hero-media[data-lejatszas="all"] .akcio-csepp::before{animation-play-state:paused}
@keyframes akcio-csepp-esik{
0%,40%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,1,.45)}
64%,100%{transform:translateY(100%)}
}
@keyframes akcio-csepp-alak{
0%{transform:scale(.1);opacity:0}
8%{opacity:1}
34%{transform:scale(1,1.04);animation-timing-function:ease-in-out}
40%{transform:scale(.92,1.16)}
54%{opacity:1}
64%,100%{transform:scale(.88,1.22);opacity:0}
}
.bf-lap .akcio-hero-feltetel{
color:var(--panel-dark-text);
max-width:var(--measure);
margin-top:var(--space-24);
text-wrap:pretty;
}
.bf-lap .akcio-fej-ketoszlop{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--space-24) var(--space-48);align-items:end;
}
.bf-lap .akcio-fej-ketoszlop .section-lead{margin-top:0}
.bf-lap .akcio-fej-ketoszlop .section-lead strong{color:var(--text-primary)}
.bf-lap .akcio-terhek-racs{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--space-32);align-items:stretch;
}
.bf-lap .situation-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.bf-lap .akcio-korforgas-panel{
--akcio-panel-pad:min(var(--panel-padding),var(--space-32));
--akcio-abra-ciklus:16s;
--akcio-abra-aramlas:.7s;
--akcio-abra-hullam:3.2s;
--akcio-abra-buborek:2.8s;
grid-template-columns:minmax(0,1fr);gap:var(--space-24);
margin:0;align-content:space-between;
padding:var(--akcio-panel-pad);
}
.bf-lap .akcio-abra{display:block;width:100%;height:auto}
.bf-lap .akcio-abra-vonal{stroke:var(--panel-dark-text)}
.bf-lap .akcio-abra-zold{stroke:var(--primary)}
.bf-lap .akcio-abra-fold-fent{stop-color:color-mix(in srgb,var(--panel-dark-text) 15%,transparent)}
.bf-lap .akcio-abra-fold-kozep{stop-color:color-mix(in srgb,var(--panel-dark-text) 9%,transparent)}
.bf-lap .akcio-abra-fold-lent{stop-color:transparent}
.bf-lap .akcio-abra-maszk{mask-type:alpha}
.bf-lap .akcio-abra-maszk-be{stop-color:var(--panel-dark-text)}
.bf-lap .akcio-abra-maszk-ki{stop-color:transparent}
.bf-lap .akcio-abra-felirat{color:var(--panel-dark-muted);text-align:center}
.bf-lap .akcio-abra-befolyas,.bf-lap .akcio-abra-sugar{stroke:var(--primary);opacity:0}
.bf-lap .akcio-abra-jelzes{stroke:var(--primary);opacity:0}
.bf-lap .akcio-abra-szint{transform:translateY(8px)}
.bf-lap .akcio-abra-hullam{fill:var(--primary)}
.bf-lap .akcio-abra-hullam-hatso{fill:color-mix(in srgb,var(--primary) 45%,transparent)}
.bf-lap .akcio-abra-buborekok{stroke:var(--panel-dark-text);fill:color-mix(in srgb,var(--panel-dark-text) 18%,transparent);opacity:.7}
.bf-lap .akcio-abra-buborekok circle,.bf-lap .akcio-abra-fodor ellipse,.bf-lap .akcio-abra-kerek{transform-box:fill-box;transform-origin:center}
.bf-lap .akcio-abra-fodor{stroke:var(--panel-dark-text);opacity:0}
.bf-lap .akcio-abra-szivas{stroke:var(--panel-dark-bg);opacity:0}
.bf-lap .akcio-abra-auto-szint{fill:color-mix(in srgb,var(--primary) 55%,transparent);transform:translateY(40px)}
.bf-lap .akcio-abra-kerek{stroke:var(--primary);fill:var(--panel-dark-bg)}
.bf-lap .akcio-lepes{border-radius:var(--r-md)}
.bf-lap [data-lejatszas] .akcio-abra-szint{
animation:akcio-szint var(--akcio-abra-ciklus) linear infinite;
}
.bf-lap [data-lejatszas] .akcio-abra-hullam{animation:akcio-hullam var(--akcio-abra-hullam) linear infinite}
.bf-lap [data-lejatszas] .akcio-abra-hullam-hatso{
animation:akcio-hullam-vissza calc(var(--akcio-abra-hullam) * 1.45) linear infinite;
}
.bf-lap [data-lejatszas] .akcio-abra-befolyas{
animation:
akcio-aramlas var(--akcio-abra-aramlas) linear infinite,
akcio-befolyas var(--akcio-abra-ciklus) linear infinite;
}
.bf-lap [data-lejatszas] .akcio-abra-sugar{
animation:
akcio-aramlas calc(var(--akcio-abra-aramlas) * .5) linear infinite,
akcio-befolyas var(--akcio-abra-ciklus) linear infinite;
}
.bf-lap [data-lejatszas] .akcio-abra-fodor{animation:akcio-befolyas var(--akcio-abra-ciklus) linear infinite}
.bf-lap [data-lejatszas] .akcio-abra-fodor ellipse{
animation:akcio-fodor calc(var(--akcio-abra-aramlas) * 1.6) var(--ease-out) infinite;
}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle{
animation:akcio-buborek var(--akcio-abra-buborek) linear infinite;
}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle:nth-child(2){animation-duration:calc(var(--akcio-abra-buborek) * 1.3);animation-delay:calc(var(--akcio-abra-buborek) * -0.4)}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle:nth-child(3){animation-duration:calc(var(--akcio-abra-buborek) * 0.85);animation-delay:calc(var(--akcio-abra-buborek) * -0.7)}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle:nth-child(4){animation-duration:calc(var(--akcio-abra-buborek) * 1.15);animation-delay:calc(var(--akcio-abra-buborek) * -0.2)}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle:nth-child(5){animation-duration:calc(var(--akcio-abra-buborek) * 0.95);animation-delay:calc(var(--akcio-abra-buborek) * -0.55)}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle:nth-child(6){animation-duration:calc(var(--akcio-abra-buborek) * 1.4);animation-delay:calc(var(--akcio-abra-buborek) * -0.9)}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle:nth-child(7){animation-duration:calc(var(--akcio-abra-buborek) * 1.05);animation-delay:calc(var(--akcio-abra-buborek) * -0.3)}
.bf-lap [data-lejatszas] .akcio-abra-buborekok circle:nth-child(8){animation-duration:calc(var(--akcio-abra-buborek) * 1.25);animation-delay:calc(var(--akcio-abra-buborek) * -0.8)}
.bf-lap [data-lejatszas] .akcio-abra-jelzes{animation:akcio-jelzes var(--akcio-abra-ciklus) linear infinite}
.bf-lap [data-lejatszas] .akcio-abra-auto{animation:akcio-auto var(--akcio-abra-ciklus) linear infinite}
.bf-lap [data-lejatszas] .akcio-abra-kerek{animation:akcio-kerek var(--akcio-abra-ciklus) linear infinite}
.bf-lap [data-lejatszas] .akcio-abra-tomlo{animation:akcio-tomlo var(--akcio-abra-ciklus) linear infinite}
.bf-lap [data-lejatszas] .akcio-abra-szivas{
animation:
akcio-szivas var(--akcio-abra-aramlas) linear infinite,
akcio-szivas-fazis var(--akcio-abra-ciklus) linear infinite;
}
.bf-lap [data-lejatszas] .akcio-abra-auto-szint{animation:akcio-auto-szint var(--akcio-abra-ciklus) linear infinite}
.bf-lap [data-lejatszas] .akcio-lepes{animation:akcio-lepes var(--akcio-abra-ciklus) linear infinite}
.bf-lap [data-lejatszas] .akcio-korforgas li:nth-child(2) .akcio-lepes{animation-delay:calc(var(--akcio-abra-ciklus) * -.75)}
.bf-lap [data-lejatszas] .akcio-korforgas li:nth-child(3) .akcio-lepes{animation-delay:calc(var(--akcio-abra-ciklus) * -.5)}
.bf-lap [data-lejatszas] .akcio-korforgas li:nth-child(4) .akcio-lepes{animation-delay:calc(var(--akcio-abra-ciklus) * -.25)}
.bf-lap .akcio-korforgas-panel[data-lejatszas="all"] :is(.akcio-abra *, .akcio-lepes){animation-play-state:paused}
@keyframes akcio-szint{
0%{transform:translateY(26px)}
23%,50%{transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}
66%,79%{transform:translateY(46px)}
100%{transform:translateY(26px)}
}
@keyframes akcio-befolyas{
0%,21%{opacity:1}
24%,77%{opacity:0}
80%,100%{opacity:1}
}
@keyframes akcio-jelzes{
0%,21%{opacity:0}
27%{opacity:.4}
33%{opacity:.1}
39%{opacity:.4}
47%,100%{opacity:0}
}
@keyframes akcio-auto{
0%,27%{transform:translateX(190px);opacity:0;animation-timing-function:cubic-bezier(.15,.55,.3,1)}
44%,68%{transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.6,0,.85,.45)}
78%,100%{transform:translateX(190px);opacity:0}
}
@keyframes akcio-kerek{
0%,27%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.15,.55,.3,1)}
44%,68%{transform:rotate(-810deg);animation-timing-function:cubic-bezier(.6,0,.85,.45)}
78%,100%{transform:rotate(0deg)}
}
@keyframes akcio-tomlo{
0%,44%{stroke-dashoffset:96;animation-timing-function:cubic-bezier(.3,0,.2,1)}
50%,65%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.4,0,.6,1)}
69%,100%{stroke-dashoffset:96}
}
@keyframes akcio-szivas-fazis{
0%,50%{opacity:0}
52%,64%{opacity:.9}
66%,100%{opacity:0}
}
@keyframes akcio-auto-szint{
0%,50%{transform:translateY(40px)}
66%,79%{transform:translateY(12px)}
80%,100%{transform:translateY(40px)}
}
@keyframes akcio-lepes{
0%,23.5%{background-color:var(--primary);box-shadow:0 0 0 var(--space-4) var(--primary);color:var(--on-primary)}
25%,98.5%{background-color:transparent;box-shadow:0 0 0 var(--space-4) transparent;color:var(--panel-dark-text)}
100%{background-color:var(--primary);box-shadow:0 0 0 var(--space-4) var(--primary);color:var(--on-primary)}
}
@keyframes akcio-aramlas{to{stroke-dashoffset:-12}}
@keyframes akcio-szivas{to{stroke-dashoffset:12}}
@keyframes akcio-hullam{to{transform:translateX(92px)}}
@keyframes akcio-hullam-vissza{to{transform:translateX(-92px)}}
@keyframes akcio-fodor{
from{transform:scale(.3);opacity:.8}
to{transform:scale(1.7);opacity:0}
}
@keyframes akcio-buborek{
0%{transform:translate(0,0) scale(.6);opacity:0}
15%{opacity:1}
50%{transform:translate(2px,-18px) scale(.9)}
85%{opacity:.8}
100%{transform:translate(-1px,-36px) scale(1.1);opacity:0}
}
.bf-lap .akcio-korforgas{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:var(--space-8);
margin:0;padding:var(--space-16);list-style:none;
border:1px solid color-mix(in srgb,var(--panel-dark-text) 18%,transparent);
border-radius:var(--r-md);
background:color-mix(in srgb,var(--panel-dark-text) 6%,transparent);
}
.bf-lap .akcio-korforgas li{display:flex;align-items:center;gap:var(--space-8);color:var(--panel-dark-text)}
.bf-lap .akcio-korforgas li + li::before{content:"→";content:"→" / "";color:var(--primary)}
.bf-lap .akcio-alkalmassag-sor{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--space-48) var(--space-64);align-items:start;
}
.bf-lap .akcio-alkalmassag-sor + .akcio-alkalmassag-sor{margin-top:var(--space-96)}
.bf-lap .akcio-alkalmassag-sor-fordit .akcio-alkalmassag-kep{order:-1}
.bf-lap .akcio-alkalmassag-szoveg{display:flex;flex-direction:column;gap:var(--space-24)}
.bf-lap .akcio-csoport-cim{color:var(--text-primary)}
.bf-lap .akcio-csoport-lead{
color:var(--text-secondary);
padding-bottom:var(--space-24);border-bottom:1px solid var(--border);
}
.bf-lap .akcio-kerdes{display:flex;flex-direction:column;gap:var(--space-8)}
.bf-lap .akcio-kerdes-cimke{color:var(--text-tertiary)}
.bf-lap .akcio-kerdes-cim{color:var(--text-primary)}
.bf-lap .akcio-kerdes-szoveg{color:var(--text-secondary)}
.bf-lap .akcio-alkalmassag-kep{margin:0;border-radius:var(--card-radius);overflow:hidden}
.bf-lap .akcio-alkalmassag-kep img{display:block;width:100%;height:auto}
.bf-lap .akcio-gombsor{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-8)}
.bf-lap .akcio-osszevetes{
padding:var(--panel-padding);border-radius:var(--panel-radius);
background:var(--surface-muted);
}
.bf-lap .akcio-ar{background:var(--panel-dark-bg);color:var(--panel-dark-text)}
.bf-lap main > .section.akcio-ar:not(:first-child){content-visibility:visible}
.bf-lap .akcio-ar .section-eyebrow{color:var(--panel-dark-muted)}
.bf-lap .akcio-ar .section-title,.bf-lap .akcio-ar .section-lead{color:var(--panel-dark-text)}
.bf-lap .akcio-ar-racs{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24);
margin:0;padding:0;list-style:none;
}
.bf-lap .akcio-ar-kartya{
display:flex;flex-direction:column;gap:var(--space-16);
padding:var(--space-32);border-radius:var(--card-radius);
border:1px solid color-mix(in srgb,var(--panel-dark-text) 16%,transparent);
background:color-mix(in srgb,var(--panel-dark-text) 5%,transparent);
}
.bf-lap .akcio-ar-cimke{color:var(--panel-dark-muted)}
.bf-lap .akcio-ar-osszeg,.bf-lap .akcio-ar-meta{color:var(--panel-dark-text)}
.bf-lap .akcio-ar-eredeti{color:var(--panel-dark-muted)}
.bf-lap .akcio-ar-akcio{
margin-top:auto;display:flex;flex-direction:column;gap:var(--space-8);
padding:var(--space-16) var(--space-24);border-radius:var(--r-md);
border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);
background:color-mix(in srgb,var(--primary) 16%,transparent);
color:var(--panel-dark-text);
}
.bf-lap .akcio-plusz-lista{display:flex;flex-direction:column;gap:var(--space-8);margin:0;padding:0;list-style:none}
.bf-lap .akcio-plusz-lista li{display:flex;gap:var(--space-8);color:var(--panel-dark-text)}
.bf-lap .akcio-plusz-lista li::before{content:"+";content:"+" / "";color:var(--primary);flex:none}
.bf-lap .akcio-ar-tudnivalo{color:var(--panel-dark-text);max-width:var(--measure);margin-top:var(--space-48)}
.bf-lap .akcio-ar-apro{color:var(--panel-dark-muted);max-width:var(--measure);margin-top:var(--space-24)}
.bf-lap .akcio-ar-info{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-32);
margin-top:var(--space-48);padding-top:var(--space-48);
border-top:1px solid color-mix(in srgb,var(--panel-dark-text) 18%,transparent);
}
.bf-lap .akcio-ar-info-elem{display:flex;flex-direction:column;gap:var(--space-16)}
.bf-lap .akcio-ar-info-elem h3{color:var(--panel-dark-text)}
.bf-lap .akcio-ar-info-elem p,.bf-lap .akcio-ar-info .akcio-plusz-lista li{color:var(--panel-dark-muted)}
.bf-lap .akcio-ar-cta{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-32);
margin-top:var(--space-48);
}
.bf-lap .akcio-ar-cta p{color:var(--panel-dark-text)}
.bf-lap .akcio-ar a:not(.btn){color:var(--panel-dark-link)}
.bf-lap .akcio-ar a:not(.btn):focus-visible{outline-color:var(--panel-dark-link)}
.bf-lap .akcio-video-sor{
display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
gap:var(--space-48);align-items:start;
}
.bf-lap .akcio-video-szoveg{margin-bottom:0}
.bf-lap .akcio-video-megjegyzes{
margin-top:var(--space-24);padding:var(--space-16);
border-radius:var(--card-radius);background:var(--card-bg);border:1px solid var(--card-border);
color:var(--text-secondary);
}
.bf-lap .icon-bf-telefon{-webkit-mask-image:url("/assets/img/black-friday/icon/telefon.svg");mask-image:url("/assets/img/black-friday/icon/telefon.svg")}
.bf-lap .icon-akcio-naptar{-webkit-mask-image:url("/assets/img/black-friday/icon/naptar.svg");mask-image:url("/assets/img/black-friday/icon/naptar.svg")}
.bf-lap .icon-akcio-szag{-webkit-mask-image:url("/assets/img/black-friday/icon/szag.svg");mask-image:url("/assets/img/black-friday/icon/szag.svg")}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap
.akcio-hero-panel{max-width:none}
.bf-lap .akcio-csepp:nth-child(1){--x:15.8%;--y:85.5%}
.bf-lap .akcio-csepp:nth-child(2){--x:30.2%;--y:87.8%}
.bf-lap .akcio-csepp:nth-child(3){--x:42.8%;--y:86.8%}
.bf-lap .akcio-csepp:nth-child(4){--x:59.9%;--y:89.1%}
.bf-lap .akcio-csepp:nth-child(5){--x:80.7%;--y:87.2%}
.bf-lap .akcio-csepp:nth-child(6){--x:87.2%;--y:84.9%}
.bf-lap .akcio-csepp{bottom:calc(var(--space-16) * -1)}
.bf-lap .akcio-fej-ketoszlop,.bf-lap .akcio-terhek-racs{grid-template-columns:minmax(0,1fr)}
.bf-lap .akcio-fej-ketoszlop .section-lead{margin-top:var(--space-16)}
.bf-lap .akcio-alkalmassag-sor,.bf-lap .akcio-video-sor{grid-template-columns:minmax(0,1fr)}
.bf-lap .akcio-alkalmassag-sor + .akcio-alkalmassag-sor{margin-top:var(--space-64)}
.bf-lap .akcio-alkalmassag-sor-fordit .akcio-alkalmassag-kep{order:0}
.bf-lap .akcio-ar-racs{grid-template-columns:minmax(0,1fr)}
.bf-lap .akcio-ar-info{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px) {
.bf-lap .akcio-ar-info{grid-template-columns:minmax(0,1fr)}
.bf-lap .akcio-ar-kartya{padding:var(--space-24)}
}
}
@layer motion {
@media (prefers-reduced-motion: reduce) {
.bf-lap [data-lejatszas] :is(.akcio-abra *, .akcio-lepes){animation:none}
.bf-lap [data-lejatszas] > .akcio-cseppek{display:none}
}
}
@layer components {
.bf-lap{
--bf-cimke-bg:var(--color-forest);
--bf-cimke-text:var(--color-lime);
}
.bf-lap main > .section:not(:first-child){content-visibility:visible}
.bf-lap .akcio-hero .hero-inner{padding-top:calc(var(--space-96) + var(--space-32))}
.bf-lap{
--bf-logo-folt:color-mix(in srgb,var(--color-drizzle) 90%,transparent);
--bf-logo-folt-lagy:color-mix(in srgb,var(--color-drizzle) 64%,transparent);
}
.bf-lap .akcio-logo{
position:absolute;top:var(--space-16);left:var(--space-16);z-index:30;isolation:isolate;
--logo-magassag:var(--space-56);
padding:var(--space-16) var(--space-32);
}
.bf-lap .akcio-logo::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
inset:calc(-1 * var(--space-16)) calc(-1 * var(--space-32));
background:radial-gradient(ellipse closest-side,var(--bf-logo-folt) 0%,var(--bf-logo-folt) 45%,var(--bf-logo-folt-lagy) 72%,transparent 100%);
-webkit-backdrop-filter:blur(var(--space-16)) saturate(1.3);
backdrop-filter:blur(var(--space-16)) saturate(1.3);
-webkit-mask-image:radial-gradient(ellipse closest-side,var(--canvas) 70%,transparent 100%);
mask-image:radial-gradient(ellipse closest-side,var(--canvas) 70%,transparent 100%);
}
.bf-lap .akcio-logo:focus-visible{outline:3px solid var(--border-focus);outline-offset:3px}
.bf-lap .akcio-logo .site-logo-vilagos,
:root[data-theme="dark"] .bf-lap .akcio-logo .site-logo-vilagos{display:block}
.bf-lap .akcio-logo .site-logo-sotet,
:root[data-theme="dark"] .bf-lap .akcio-logo .site-logo-sotet{display:none}
.bf-lap .bf-cimke{
position:absolute;top:var(--space-24);right:var(--space-24);z-index:3;
margin:0;padding:var(--space-8) var(--space-16);
border-radius:var(--chip-radius);
background:var(--bf-cimke-bg);color:var(--bf-cimke-text);
font-family:var(--font-mono);font-size:var(--type-data-eyebrow-size);
font-weight:var(--type-data-eyebrow-weight);letter-spacing:var(--type-data-eyebrow-letter-spacing);
text-transform:uppercase;line-height:1;
}
.bf-lap .akcio-hero-feltetel a{color:var(--panel-dark-link)}
.bf-lap .bf-bevezeto{padding-block:var(--space-64)}
.bf-lap .bf-bevezeto-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-48);align-items:start}
.bf-lap .bf-bevezeto-szoveg{color:var(--text-secondary);max-width:var(--measure)}
.bf-lap .bf-kiemelesek{display:grid;gap:var(--space-16);margin:0;padding:0;list-style:none}
.bf-lap .bf-kiemeles{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);align-items:center}
.bf-lap .bf-kiemeles p{margin:0;color:var(--text-secondary)}
.bf-lap .bf-kiemeles strong{color:var(--text-primary)}
.bf-lap .bf-egyben{white-space:nowrap}
.bf-lap .bf-bizalom{padding-top:0}
.bf-lap .bf-trust-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.bf-lap .bf-ajandek-racs{
display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
gap:var(--space-24);align-items:stretch;margin-top:var(--space-48);
}
.bf-lap .bf-ajandek{
display:flex;flex-direction:column;overflow:hidden;
background:var(--card-bg);border:1px solid var(--card-border);
border-radius:var(--card-radius);box-shadow:var(--card-shadow);
}
.bf-lap .bf-ajandek-kep{margin:0;position:relative}
.bf-lap .bf-ajandek-kep img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.bf-lap .bf-kep-felirat{
position:absolute;right:var(--space-8);bottom:var(--space-8);margin:0;
padding:var(--space-4) var(--space-8);border-radius:var(--chip-radius);
background:var(--emelt-bg);color:var(--text-secondary);
}
.bf-lap .bf-ajandek-test{display:flex;flex-direction:column;gap:var(--space-16);flex:1;padding:var(--space-32)}
.bf-lap .bf-ajandek-test > *{margin:0}
.bf-lap .bf-ajandek-sorszam{color:var(--text-tertiary)}
.bf-lap .bf-ajandek-cim{color:var(--text-primary)}
.bf-lap .bf-ertek{display:grid;margin:0}
.bf-lap .bf-ertek-sor{
display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-16);
padding-block:var(--space-8);border-bottom:1px solid var(--border);
}
.bf-lap .bf-ertek-sor dt{color:var(--text-secondary)}
.bf-lap .bf-ertek-sor dd{margin:0;color:var(--text-primary);white-space:nowrap}
.bf-lap .bf-ertek-megj{color:var(--text-tertiary)}
.bf-lap .bf-ajandek-alcim{margin-top:var(--space-8)}
.bf-lap .bf-ajandek-test .type-ui-body{color:var(--text-secondary)}
.bf-lap .bf-nem-resze{
padding:var(--space-16);border-radius:var(--r-md);
background:var(--surface-sunken);color:var(--text-primary);
}
.bf-lap .bf-ajandek-gomb{margin-top:auto;align-self:flex-start}
.bf-lap{--bf-vagy-meret:calc(var(--space-96) + var(--space-8))}
.bf-lap .bf-vagy{
position:relative;align-self:stretch;justify-self:center;margin:0;
display:grid;place-items:center;width:var(--bf-vagy-meret);
}
.bf-lap .bf-vagy::before{
content:"";position:absolute;left:50%;top:var(--space-24);bottom:var(--space-24);width:2px;
transform:translateX(-50%);
background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--primary) 70%,transparent) 22%,
var(--primary) 50%,color-mix(in srgb,var(--primary) 70%,transparent) 78%,transparent);
}
.bf-lap .bf-vagy > span{
position:relative;z-index:1;display:grid;place-items:center;
width:var(--bf-vagy-meret);aspect-ratio:1;border-radius:50%;
font-family:var(--font-heading);font-size:var(--type-display-feature-title-size);font-weight:700;
letter-spacing:.08em;line-height:1;text-transform:uppercase;
color:var(--on-primary);
background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--bf-cimke-text) 75%,var(--primary)) 0%,var(--primary) 62%,
color-mix(in srgb,var(--primary) 82%,var(--bf-cimke-bg)) 100%);
box-shadow:
0 0 0 var(--space-8) var(--canvas),
0 0 0 calc(var(--space-8) + 2px) color-mix(in srgb,var(--primary) 45%,transparent),
inset 0 2px 0 color-mix(in srgb,var(--bf-cimke-text) 55%,transparent),
0 var(--space-16) var(--space-32) color-mix(in srgb,var(--bf-cimke-bg) 28%,transparent);
transition:transform 500ms cubic-bezier(.34,1.56,.64,1);
}
.bf-lap .bf-vagy > span::after{
content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
box-shadow:0 0 0 2px var(--primary);opacity:0;
}
.bf-lap .bf-ajandek-tel{margin:var(--space-32) 0 0;text-align:center;color:var(--text-secondary)}
.bf-lap .bf-idovonal{
--bf-pont:var(--space-24);
position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32);
margin:var(--space-48) 0 0;padding:0;list-style:none;
}
.bf-lap .bf-idovonal::before{
content:"";position:absolute;left:0;right:0;
top:calc(var(--bf-pont) / 2 - 1px);height:2px;background:var(--border-strong);
}
.bf-lap .bf-idopont{position:relative;display:grid;gap:var(--space-8);align-content:start}
.bf-lap .bf-idopont > p,.bf-lap .bf-idopont > h3{margin:0}
.bf-lap .bf-pont{
width:var(--bf-pont);height:var(--bf-pont);border-radius:50%;margin-bottom:var(--space-16);
background:var(--primary);box-shadow:0 0 0 var(--space-8) var(--canvas);
}
.bf-lap .bf-idopont:first-child .bf-pont{background:var(--surface-inverse);outline:3px solid var(--primary);outline-offset:2px}
.bf-lap .bf-datum{color:var(--text-primary)}
.bf-lap .bf-idopont .type-ui-body{color:var(--text-secondary)}
.bf-lap .bf-szekcio-gomb{display:flex;flex-wrap:wrap;gap:var(--space-16);margin:var(--space-32) 0 0}
.bf-lap .bf-meretek{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24);
margin:var(--space-32) 0 0;padding:0;list-style:none;
}
.bf-lap .bf-meret{
display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16);
padding:var(--space-32);border-radius:var(--card-radius);
background:var(--card-bg);border:1px solid var(--card-border);
}
.bf-lap .bf-meret > *{margin:0}
.bf-lap .bf-meret-le{color:var(--text-tertiary)}
.bf-lap .bf-meret-nev{color:var(--text-primary)}
.bf-lap .bf-meret .btn{margin-top:auto}
.bf-lap .bf-ar-info{grid-template-columns:repeat(3,minmax(0,1fr))}
.bf-lap .bf-keskeny{max-width:calc(var(--measure) + 2 * var(--page-gutter) + var(--space-128))}
.bf-lap .bf-feltetel-lista{display:grid;gap:var(--space-16);margin:var(--space-32) 0 0;padding:0;list-style:none}
.bf-lap .bf-feltetel-lista li{position:relative;padding-left:var(--space-32);color:var(--text-secondary)}
.bf-lap .bf-feltetel-lista li::before{
content:"";position:absolute;left:var(--space-4);top:calc(var(--type-ui-body-line-height) * 0.5em - var(--space-4));
width:var(--space-8);height:var(--space-8);border-radius:50%;background:var(--primary);
}
.bf-lap .bf-reszletes{margin-top:var(--space-32)}
.bf-lap .bf-reszletes-test{display:grid;gap:var(--space-16)}
.bf-lap .bf-feltetel-dl{display:grid;gap:var(--space-8);margin:0}
.bf-lap .bf-feltetel-dl dt{margin-top:var(--space-16)}
.bf-lap .bf-feltetel-dl dt:first-child{margin-top:0}
.bf-lap .bf-feltetel-dl dd{margin:0;color:var(--text-secondary)}
.bf-lap .bf-feltetel-dl dd p{margin:0}
.bf-lap .bf-feltetel-dl dd p + p{margin-top:var(--space-8)}
.bf-lap mark.bf-nyitott{
padding:0 var(--space-4);border-radius:var(--r-md);
background:var(--warning-bg);color:var(--warning-text);outline:1px dashed var(--warning-border);
}
.bf-lap .bf-urlap-szekcio{background:var(--section-alt-bg)}
.bf-lap .bf-urlap-racs{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-64);align-items:start}
.bf-lap .bf-urlap{
display:grid;gap:var(--space-32);margin-top:var(--space-32);
padding:var(--space-32);border-radius:var(--card-radius);
background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);
}
.bf-lap .bf-urlap .urlap-csoport{display:grid;gap:var(--space-16);margin:0;padding:0;border:0;min-width:0}
.bf-lap .bf-urlap .urlap-mezo{display:grid;gap:var(--space-4);margin:0}
.bf-lap .bf-nem-kotelezo{color:var(--text-tertiary);font-weight:var(--type-ui-body-weight)}
.bf-lap .bf-jelolok{display:grid;gap:var(--space-16)}
.bf-lap .bf-jelolo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4) var(--space-16);align-items:start;margin:0}
.bf-lap .bf-jelolo input{width:var(--space-24);height:var(--space-24);margin:0;accent-color:var(--primary)}
.bf-lap .bf-jelolo label{color:var(--text-secondary)}
.bf-lap .bf-jelolo .mezo-hiba{grid-column:2}
.bf-lap .bf-urlap-fontos{
margin:0;padding:var(--space-16);border-left:4px solid var(--primary);
border-radius:var(--r-md);background:var(--surface-muted);color:var(--text-primary);
}
.bf-lap .bf-urlap .urlap-zaras{display:grid;gap:var(--space-16)}
.bf-lap .bf-urlap .urlap-zaras > p{margin:0}
.bf-lap .bf-urlap-oldal{
position:sticky;top:calc(var(--space-64) + var(--space-32));
display:grid;gap:var(--space-24);margin-top:calc(var(--space-128) + var(--space-64));
}
.bf-lap .bf-urlap-doboz{
padding:var(--space-32);border-radius:var(--card-radius);
background:var(--card-bg);border:1px solid var(--card-border);
}
.bf-lap .bf-urlap-doboz > h3{margin:0 0 var(--space-16)}
.bf-lap .bf-utana{display:grid;gap:var(--space-16);margin:0;padding:0;list-style:none}
.bf-lap .bf-utana li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);align-items:start;color:var(--text-secondary)}
.bf-lap .bf-elerhetoseg{display:grid;margin:0;padding:0;list-style:none}
.bf-lap .bf-elerhetoseg a{display:inline-flex;align-items:center;min-height:var(--space-48);color:var(--link)}
.bf-lap .bf-gyik .faq-item + .faq-item{margin-top:var(--space-8)}
.bf-lap .bf-gyik .section-head{margin-bottom:var(--space-32)}
.bf-lap .bf-zaro{padding-top:0}
.bf-lap .bf-zaro-panel{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;margin-top:0}
.bf-lap .bf-zaro-panel .panel-dark-title{margin:0;color:var(--panel-dark-text)}
.bf-lap .bf-zaro-gombok{display:flex;flex-wrap:wrap;gap:var(--space-16);justify-content:flex-end}
.bf-lap .bf-zaro-panel .btn-inverse{background:var(--panel-dark-text);color:var(--panel-dark-bg);border-color:var(--panel-dark-text)}
.bf-lap .also-sav[data-rejtve]{visibility:hidden;opacity:0}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-hero{display:flex;flex-direction:column;padding-top:0}
.bf-lap .bf-hero .hero-media{order:-1;margin-top:0}
.bf-lap .akcio-hero .hero-inner{padding-top:0;margin-top:var(--space-8);position:relative}
.bf-lap .akcio-logo{top:var(--space-8);left:var(--space-8);--logo-magassag:var(--space-40);padding:var(--space-8) var(--space-16)}
.bf-lap .bf-bevezeto-racs{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
.bf-lap .bf-trust-5{grid-template-columns:repeat(2,minmax(0,1fr))}
.bf-lap .bf-ajandek-racs{grid-template-columns:minmax(0,1fr);gap:var(--space-16)}
.bf-lap{--bf-vagy-meret:calc(var(--space-64) + var(--space-16))}
.bf-lap .bf-vagy{width:auto;justify-self:stretch;padding-block:var(--space-8)}
.bf-lap .bf-vagy::before{left:var(--space-24);right:var(--space-24);top:50%;bottom:auto;width:auto;height:2px;
transform:translateY(-50%);
background:linear-gradient(to right,transparent,color-mix(in srgb,var(--primary) 70%,transparent) 22%,
var(--primary) 50%,color-mix(in srgb,var(--primary) 70%,transparent) 78%,transparent)}
.bf-lap .bf-vagy > span{font-size:var(--type-ui-card-title-size)}
.bf-lap .bf-ar-info{grid-template-columns:minmax(0,1fr)}
.bf-lap .bf-meretek{grid-template-columns:minmax(0,1fr)}
.bf-lap .bf-urlap-racs{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
.bf-lap .bf-urlap-oldal{position:static;margin-top:0}
.bf-lap .bf-zaro-panel{grid-template-columns:minmax(0,1fr)}
.bf-lap .bf-zaro-gombok{justify-content:flex-start}
.bf-lap .bf-idovonal{grid-template-columns:minmax(0,1fr);gap:var(--space-32);padding-left:calc(var(--bf-pont) + var(--space-24))}
.bf-lap .bf-idovonal::before{left:calc(var(--bf-pont) / 2 - 1px);right:auto;top:0;bottom:0;width:2px;height:auto}
.bf-lap .bf-pont{position:absolute;left:calc(-1 * (var(--bf-pont) + var(--space-24)));top:0;margin:0}
}
@media (max-width: 640px) {
.bf-lap .bf-cimke{top:var(--space-16);right:var(--space-16)}
.bf-lap .bf-trust-5{grid-template-columns:minmax(0,1fr)}
.bf-lap .bf-ajandek-test,.bf-lap .bf-urlap,.bf-lap .bf-urlap-doboz{padding:var(--space-24)}
.bf-lap .bf-urlap .urlap-sor{grid-template-columns:minmax(0,1fr)}
}
}
@layer components {
.bf-lap #fotartalom{overflow-x:clip}
.bf-lap .bf-zsak-sav{margin-top:var(--space-64)}
.bf-lap .bf-zsak-sav-cim{margin:0 0 var(--space-32)}
.bf-lap .bf-zsak-lepesek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24);margin:0;padding:0;list-style:none}
.bf-lap .bf-zsak-lepes{
display:flex;flex-direction:column;overflow:hidden;
background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);
}
.bf-lap .bf-zsak-kep{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunken)}
.bf-lap .bf-zsak-kep img{display:block;width:100%;height:100%;object-fit:cover}
.bf-lap .bf-zsak-kep-abra{display:grid;place-items:center;background:var(--surface-muted)}
.bf-lap .bf-zsak-abra{width:100%;height:100%}
.bf-lap .bf-zsak-szoveg{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);align-items:start;
margin:0;padding:var(--space-24);color:var(--text-secondary);
}
.bf-lap .bf-zsak-fold{fill:color-mix(in srgb,var(--text-primary) 14%,transparent)}
.bf-lap .bf-zsak-fu{stroke:var(--primary)}
.bf-lap .bf-zsak-tartaly{fill:var(--card-bg);stroke:var(--text-primary)}
.bf-lap .bf-zsak-kosar-test{fill:color-mix(in srgb,var(--text-tertiary) 30%,transparent);stroke:var(--text-secondary)}
.bf-lap .bf-zsak-kosar-racs{stroke:var(--text-secondary)}
.bf-lap .bf-zsak-zsak{fill:var(--canvas);stroke:var(--text-secondary)}
.bf-lap .bf-zsak-iszap{fill:var(--text-primary)}
.bf-lap .bf-zsak-fedel{fill:var(--text-primary);stroke:var(--text-primary)}
.bf-lap .bf-zsak-nyil{stroke:var(--primary)}
.bf-lap .bf-zsak-kosar{transform:translateY(-96px)}
.bf-lap .bf-hatra::before{content:" · "}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-zsak-lepesek{grid-template-columns:minmax(0,1fr)}
}
}
@layer motion {
@keyframes bf-felcsuszik{from{transform:translateY(var(--space-16))}}
@keyframes bf-feny{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes bf-kiemel{
0%,22%{transform:translateY(0)}
72%,100%{transform:translateY(-96px)}
}
@keyframes bf-fedel-le{from{transform:translateX(-102px) translateY(1px)}to{transform:none}}
@keyframes bf-nyil{0%,62%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes bf-pulzus{
0%{box-shadow:0 0 0 var(--space-8) var(--canvas),0 0 0 var(--space-8) color-mix(in srgb,var(--primary) 70%,transparent)}
100%{box-shadow:0 0 0 var(--space-8) var(--canvas),0 0 0 calc(var(--space-24) + var(--space-4)) transparent}
}
@keyframes bf-vagy-hullam{
0%{opacity:.75;transform:scale(1)}
100%{opacity:0;transform:scale(1.55)}
}
@keyframes bf-vagy-be{
0%{opacity:0;transform:scale(.3) rotate(-24deg)}
60%{opacity:1;transform:scale(1.12) rotate(6deg)}
100%{opacity:1;transform:none}
}
@keyframes bf-villan{
0%,100%{box-shadow:0 0 0 0 transparent}
30%{box-shadow:0 0 0 var(--space-8) color-mix(in srgb,var(--primary) 45%,transparent)}
}
@media (prefers-reduced-motion: no-preference) {
.bf-lap .bf-hero .akcio-hero-panel{animation:bf-felcsuszik 700ms var(--ease-out) both}
.bf-lap .bf-cimke{
background-image:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--bf-cimke-text) 40%,transparent) 50%,transparent 65%);
background-size:250% 100%;background-repeat:no-repeat;
animation:bf-feny 1400ms var(--ease-out) 900ms both;
}
.bf-anim .bf-lap [data-megjelenik]:not([data-indul]) :is(.bf-meret,.bf-zsak-lepes),.bf-anim .bf-lap .bf-ajandek[data-megjelenik]:not([data-indul]),.bf-anim .bf-lap .bf-idovonal[data-megjelenik]:not([data-indul]) .bf-idopont{opacity:0;transform:translateY(var(--space-24))}
.bf-anim .bf-lap :is(.bf-meret,.bf-zsak-lepes,.bf-ajandek,.bf-idopont){
transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out),box-shadow var(--dur-ui) var(--ease-out);
}
.bf-anim .bf-lap [data-indul] :is(.bf-meret,.bf-zsak-lepes):nth-child(2),.bf-anim .bf-lap .bf-idovonal[data-indul] .bf-idopont:nth-child(2){transition-delay:180ms}
.bf-anim .bf-lap [data-indul] :is(.bf-meret,.bf-zsak-lepes):nth-child(3),.bf-anim .bf-lap .bf-idovonal[data-indul] .bf-idopont:nth-child(3){transition-delay:360ms}
.bf-anim .bf-lap .bf-ajandek[data-megjelenik]:not([data-indul]):first-child{transform:translateX(calc(-1 * var(--space-32)))}
.bf-anim .bf-lap .bf-ajandek[data-megjelenik]:not([data-indul]):last-child{transform:translateX(var(--space-32))}
.bf-anim .bf-lap .bf-vagy[data-megjelenik]:not([data-indul]) > span{opacity:0}
.bf-anim .bf-lap .bf-vagy[data-megjelenik]:not([data-indul])::before{transform:translateX(-50%) scaleY(0)}
.bf-anim .bf-lap .bf-vagy::before{transition:transform 900ms var(--ease-out) 200ms}
.bf-anim .bf-lap .bf-vagy[data-indul] > span{animation:bf-vagy-be 750ms var(--ease-out) 450ms both}
.bf-anim .bf-lap .bf-vagy[data-indul] > span::after{animation:bf-vagy-hullam 1600ms var(--ease-out) 1200ms 3}
.bf-lap .bf-ajandek-racs:has(> .bf-ajandek:first-child:is(:hover,:focus-within)) .bf-vagy > span{transform:translateX(calc(-1 * var(--space-8))) rotate(-10deg)}
.bf-lap .bf-ajandek-racs:has(> .bf-ajandek:last-child:is(:hover,:focus-within)) .bf-vagy > span{transform:translateX(var(--space-8)) rotate(10deg)}
.bf-lap .bf-ajandek-racs:has(.bf-ajandek:is(:hover,:focus-within)) .bf-ajandek:not(:hover,:focus-within){opacity:.6;transform:scale(.98)}
.bf-lap .bf-ajandek-racs .bf-ajandek:is(:hover,:focus-within){transform:translateY(calc(-1 * var(--space-4)));box-shadow:var(--shadow-2)}
.bf-anim .bf-lap .bf-idovonal::before{transform-origin:left center;transition:transform 1400ms var(--ease-out)}
.bf-anim .bf-lap .bf-idovonal[data-megjelenik]:not([data-indul])::before{transform:scaleX(0)}
.bf-anim .bf-lap .bf-idovonal[data-indul] .bf-idopont:first-child .bf-pont{animation:bf-pulzus 1400ms var(--ease-out) 900ms 3}
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-indul]) .bf-zsak-kosar{transform:none}
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-indul]) .bf-zsak-fedel{transform:translateX(-102px) translateY(1px)}
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-indul]) .bf-zsak-nyil{opacity:0}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-fedel{animation:bf-fedel-le 900ms var(--ease-out) 500ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-kosar{animation:bf-kiemel 3200ms var(--ease-out) 600ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-nyil{animation:bf-nyil 3200ms var(--ease-out) 600ms both}
.bf-lap .urlap-chip[data-villan]{animation:bf-villan 600ms var(--ease-out) 2}
}
}
@layer responsive {
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-idovonal::before{transform-origin:center top}
.bf-anim .bf-lap .bf-idovonal[data-megjelenik]:not([data-indul])::before{transform:scaleY(0)}
.bf-anim .bf-lap .bf-ajandek[data-megjelenik]:not([data-indul]):is(:first-child,:last-child){transform:translateY(var(--space-24))}
.bf-anim .bf-lap .bf-vagy[data-megjelenik]:not([data-indul])::before{transform:translateY(-50%) scaleX(0)}
.bf-lap .bf-ajandek-racs:has(> .bf-ajandek:first-child:is(:hover,:focus-within)) .bf-vagy > span{transform:translateY(calc(-1 * var(--space-4))) rotate(-10deg)}
.bf-lap .bf-ajandek-racs:has(> .bf-ajandek:last-child:is(:hover,:focus-within)) .bf-vagy > span{transform:translateY(var(--space-4)) rotate(10deg)}
}
}
@layer components {
.bf-lap{
--bf-viz:color-mix(in srgb,var(--color-skyblue) 78%,var(--color-stardust));
--bf-viz-mely:color-mix(in srgb,var(--color-skyblue) 86%,var(--color-forest));
--bf-kiemelt-bg:color-mix(in srgb,var(--primary) 18%,var(--card-bg));
--bf-kiemelt-bg-2:color-mix(in srgb,var(--primary) 11%,var(--card-bg));
}
.bf-lap .bf-matrica{
position:absolute;top:var(--space-24);right:var(--space-24);z-index:3;
width:clamp(calc(var(--space-128) + var(--space-48)),19vw,calc(var(--space-128) * 2.4));height:auto;
overflow:visible;rotate:-4deg;
filter:drop-shadow(0 var(--space-8) var(--space-16) color-mix(in srgb,var(--color-forest) 45%,transparent));
}
.bf-lap .bf-m-test-a{stop-color:color-mix(in srgb,var(--color-forest) 80%,var(--primary))}
.bf-lap .bf-m-test-b{stop-color:var(--color-forest)}
.bf-lap .bf-m-keret{stroke:color-mix(in srgb,var(--color-lime) 42%,transparent)}
.bf-lap .bf-m-csillanas{stroke:color-mix(in srgb,var(--color-lime) 50%,transparent)}
.bf-lap .bf-m-felso{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:2px;fill:color-mix(in srgb,var(--color-lime) 78%,transparent)}
.bf-lap .bf-m-cim{font-family:var(--font-heading);font-size:42px;font-weight:700;fill:var(--color-lime)}
.bf-lap .bf-m-feny-0{stop-color:var(--color-lime);stop-opacity:0}
.bf-lap .bf-m-feny-1{stop-color:var(--color-lime);stop-opacity:.38}
.bf-lap .bf-m-fenycsik{transform:skewX(-20deg);opacity:0}
.bf-lap .bf-m-viz-a{stop-color:var(--bf-viz);stop-opacity:.94}
.bf-lap .bf-m-viz-b{stop-color:var(--bf-viz-mely);stop-opacity:.98}
.bf-lap .bf-m-viz-feny{stroke:color-mix(in srgb,var(--color-stardust) 88%,transparent)}
.bf-lap .bf-m-csepp{fill:var(--bf-viz)}
.bf-lap .bf-zsak-lepesek{container-type:inline-size;position:relative;gap:var(--space-32)}
.bf-lap .bf-zsak-lepes{position:relative;box-shadow:var(--card-shadow)}
.bf-lap .bf-zsak-kep{position:relative}
.bf-lap .bf-zsak-kep-abra{display:block;background:linear-gradient(to bottom,color-mix(in srgb,var(--color-skyblue) 26%,var(--card-bg)),var(--card-bg) 60%)}
.bf-lap .bf-k1{display:block;width:100%;height:100%;overflow:visible}
.bf-lap .bf-k1-talaj-a{stop-color:color-mix(in srgb,var(--color-oliveleaf) 50%,var(--color-drizzle))}
.bf-lap .bf-k1-talaj-b{stop-color:color-mix(in srgb,var(--color-oliveleaf) 72%,var(--color-forest))}
.bf-lap .bf-k1-szemcse{fill:color-mix(in srgb,var(--color-forest) 38%,transparent)}
.bf-lap .bf-k1-fu{fill:var(--primary)}
.bf-lap .bf-k1-fuszal{stroke:var(--primary)}
.bf-lap .bf-k1-henger-a{stop-color:color-mix(in srgb,var(--color-drizzle) 62%,var(--color-oliveleaf))}
.bf-lap .bf-k1-henger-b{stop-color:var(--color-stardust)}
.bf-lap .bf-k1-tartaly{stroke:var(--color-forest)}
.bf-lap .bf-k1-belso{fill:color-mix(in srgb,var(--color-forest) 9%,var(--color-stardust))}
.bf-lap .bf-k1-viz{fill:color-mix(in srgb,var(--color-skyblue) 58%,transparent)}
.bf-lap .bf-k1-viz-tukor{stroke:var(--color-skyblue)}
.bf-lap .bf-k1-nyom{stroke:color-mix(in srgb,var(--color-forest) 38%,transparent)}
.bf-lap .bf-k1-zsak{fill:var(--color-stardust);stroke:color-mix(in srgb,var(--color-forest) 45%,transparent)}
.bf-lap .bf-k1-iszap{fill:color-mix(in srgb,var(--color-forest) 85%,var(--color-oliveleaf))}
.bf-lap .bf-k1-fogo{stroke:var(--color-forest)}
.bf-lap .bf-k1-kosar-test{fill:color-mix(in srgb,var(--color-forest) 55%,var(--color-oliveleaf));stroke:var(--color-forest)}
.bf-lap .bf-k1-kosar-racs{stroke:color-mix(in srgb,var(--color-stardust) 55%,transparent)}
.bf-lap .bf-k1-csepp{fill:var(--color-skyblue);opacity:0}
.bf-lap .bf-k1-fedel{fill:var(--color-forest);stroke:var(--color-forest)}
.bf-lap .bf-k1-nyil{stroke:var(--primary)}
.bf-lap .bf-k1-kosar{transform:translateY(-104px)}
.bf-lap .bf-k1-fedel{transform:translate(112px,4px)}
.bf-lap .bf-zsak-szoveg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);align-items:start;padding:var(--space-24)}
.bf-lap .bf-zsak-szoveg p{margin:0;color:var(--text-primary)}
.bf-lap .bf-zsak-lepes-cimke{display:block;margin-bottom:var(--space-4);color:var(--text-tertiary)}
.bf-lap .bf-zsak-szam{
display:grid;place-items:center;width:var(--space-48);aspect-ratio:1;border-radius:50%;
background:var(--primary);color:var(--on-primary);
font-family:var(--font-heading);font-size:var(--type-ui-card-title-size);font-weight:700;line-height:1;
box-shadow:0 0 0 var(--space-4) color-mix(in srgb,var(--primary) 24%,transparent);
}
.bf-lap .bf-zsak-lepesek::before,
.bf-lap .bf-zsak-lepesek::after{
content:"→";position:absolute;z-index:2;display:grid;place-items:center;
width:var(--space-40);aspect-ratio:1;border-radius:50%;
top:calc((100cqw - 2 * var(--space-32)) / 9 - var(--space-40) / 2);translate:-50% 0;
background:var(--card-bg);color:var(--primary);border:2px solid var(--primary);box-shadow:var(--shadow-2);
font-family:var(--font-heading);font-size:var(--type-ui-card-title-size);font-weight:700;line-height:1;
}
.bf-lap .bf-zsak-lepesek::before{left:calc((100cqw - 2 * var(--space-32)) / 3 + var(--space-32) / 2)}
.bf-lap .bf-zsak-lepesek::after{left:calc((100cqw - 2 * var(--space-32)) * 2 / 3 + var(--space-32) * 1.5)}
.bf-lap .bf-meret{
position:relative;padding:var(--space-32);gap:var(--space-16);box-shadow:var(--card-shadow);
transition:translate 300ms var(--ease-out),box-shadow 300ms var(--ease-out),border-color 300ms var(--ease-out);
}
.bf-lap .bf-meret:is(:hover,:focus-within){
translate:0 calc(-1 * var(--space-8));box-shadow:var(--shadow-2);
border-color:color-mix(in srgb,var(--primary) 60%,var(--card-border));
}
.bf-lap .bf-meret-kep{
position:relative;margin:0;align-self:stretch;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-lg);
background:
radial-gradient(ellipse 58% 40% at 50% 92%,color-mix(in srgb,var(--primary) 32%,transparent),transparent 70%),
linear-gradient(to bottom,var(--surface-muted),var(--card-bg));
}
.bf-lap .bf-meret-kep img{
position:absolute;left:0;right:0;bottom:4%;margin-inline:auto;width:100%;height:90%;
object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;transition:translate 400ms var(--ease-out);
}
.bf-lap .bf-meret:nth-child(1) .bf-meret-kep img{scale:.76}
.bf-lap .bf-meret:nth-child(2) .bf-meret-kep img{scale:.88}
.bf-lap .bf-meret:is(:hover,:focus-within) .bf-meret-kep img{translate:0 calc(-1 * var(--space-4))}
.bf-lap .bf-kapacitas{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--space-4);align-self:stretch}
.bf-lap .bf-kapacitas > span{height:var(--space-8);border-radius:var(--chip-radius);background:color-mix(in srgb,var(--text-primary) 12%,transparent)}
.bf-lap .bf-kapacitas[data-le="6"] > span:nth-child(-n+6),
.bf-lap .bf-kapacitas[data-le="8"] > span:nth-child(-n+8),
.bf-lap .bf-kapacitas[data-le="10"] > span{background:var(--primary)}
.bf-lap .bf-meret .bf-meret-gomb{
align-self:stretch;justify-content:space-between;gap:var(--space-16);
background:transparent;color:var(--text-primary);border:2px solid var(--primary);box-shadow:none;
}
.bf-lap .bf-meret .bf-meret-gomb:is(:hover,:focus-visible){background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.bf-lap .bf-meret-nyil{transition:translate 250ms var(--ease-out)}
.bf-lap .bf-meret-gomb:is(:hover,:focus-visible) .bf-meret-nyil{translate:var(--space-4) 0}
}
@layer responsive {
@media (min-width: 1025px) {
.bf-lap .mukodes-jelenet-racs > :first-child{translate:0 calc(50% + var(--space-48) - 16.03vw)}
}
@media (max-width: 1024px) {
.bf-lap .bf-zsak-lepesek::before,
.bf-lap .bf-zsak-lepesek::after{display:none}
}
@media (max-width: 640px) {
.bf-lap .bf-matrica{top:var(--space-16);right:var(--space-16);width:calc(var(--space-128) + var(--space-32))}
}
}
@layer motion {
@keyframes bf-m-be{
0%{opacity:0;transform:translateY(-28px) rotate(-12deg) scale(.82)}
60%{opacity:1;transform:translateY(3px) rotate(2deg) scale(1.04)}
100%{opacity:1;transform:none}
}
@keyframes bf-m-feny{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(520px)}}
@keyframes bf-m-viz{from{transform:scaleY(0)}to{transform:none}}
@keyframes bf-m-csepp{
0%{opacity:1;transform:translateY(0) scaleY(1)}
25%{opacity:1;transform:translateY(4px) scaleY(1.25)}
100%{opacity:0;transform:translateY(70px) scaleY(1.1)}
}
@keyframes bf-m-csepp-ujra{
0%{opacity:1;transform:translateY(0) scaleY(1)}
25%{opacity:1;transform:translateY(4px) scaleY(1.25)}
100%{opacity:0;transform:translateY(70px) scaleY(1.1)}
}
@keyframes bf-k1-fedel{from{transform:none}to{transform:translate(112px,4px)}}
@keyframes bf-k1-emel{
0%{transform:none}
60%{transform:translateY(-82px) rotate(-2deg)}
100%{transform:translateY(-104px)}
}
@keyframes bf-k1-csepp{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(40px)}}
@keyframes bf-k1-nyil{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bf-lepes-fokusz{
0%,100%{translate:0 0;box-shadow:var(--card-shadow)}
18%,78%{translate:0 calc(-1 * var(--space-8));box-shadow:0 0 0 3px var(--primary),var(--shadow-2)}
}
@keyframes bf-szam-pop{0%,100%{scale:1}40%{scale:1.28}}
@keyframes bf-nyil-be{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes bf-kenburns{from{scale:1.14}to{scale:1}}
@keyframes bf-kapacitas{from{scale:0 1}to{scale:1 1}}
@media (prefers-reduced-motion: no-preference) {
.bf-lap .bf-m-egesz{transform-box:fill-box;transform-origin:50% 0;animation:bf-m-be 900ms cubic-bezier(.34,1.4,.64,1) 300ms both}
.bf-lap .bf-m-fenycsik{animation:bf-m-feny 1300ms var(--ease-out) 1100ms both}
.bf-lap .bf-m-viz{transform-box:fill-box;transform-origin:50% 0;animation:bf-m-viz 900ms var(--ease-out) 900ms both}
.bf-lap .bf-m-csepp{transform-box:fill-box;transform-origin:50% 0;animation:bf-m-csepp 1400ms cubic-bezier(.55,0,1,.45) 1900ms}
.bf-lap .bf-m-csepp-2{animation-delay:2600ms}
.bf-lap .bf-m-csepp-3{animation-delay:3300ms}
.bf-lap .hero-media:hover .bf-m-csepp{animation-name:bf-m-csepp-ujra;animation-delay:0ms}
.bf-lap .hero-media:hover .bf-m-csepp-2{animation-delay:350ms}
.bf-lap .hero-media:hover .bf-m-csepp-3{animation-delay:700ms}
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-ciklus="fut"]) .bf-k1-kosar,
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-ciklus="fut"]) .bf-k1-fedel{transform:none}
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-ciklus="fut"]) .bf-k1-nyil{opacity:0}
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-ciklus])::before,
.bf-anim .bf-lap .bf-zsak-lepesek:not([data-ciklus])::after{opacity:0}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-k1-fedel{animation:bf-k1-fedel 800ms var(--ease-out) 500ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-k1-kosar{transform-box:view-box;animation:bf-k1-emel 1900ms cubic-bezier(.45,0,.2,1) 1100ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-k1-csepp{animation:bf-k1-csepp 1000ms ease-in 1700ms 2 both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-k1-csepp:nth-child(2){animation-delay:1950ms}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-k1-csepp:nth-child(3){animation-delay:2200ms}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-k1-nyil-szar{stroke-dasharray:1;animation:bf-k1-nyil 700ms var(--ease-out) 1100ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(1){animation:bf-lepes-fokusz 2600ms var(--ease-out) 400ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(2){animation:bf-lepes-fokusz 1300ms var(--ease-out) 2900ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(3){animation:bf-lepes-fokusz 1300ms var(--ease-out) 4000ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(1) .bf-zsak-szam{animation:bf-szam-pop 600ms var(--ease-out) 600ms}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(2) .bf-zsak-szam{animation:bf-szam-pop 600ms var(--ease-out) 3000ms}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(3) .bf-zsak-szam{animation:bf-szam-pop 600ms var(--ease-out) 4100ms}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus]::before{animation:bf-nyil-be 500ms cubic-bezier(.34,1.56,.64,1) 2700ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus]::after{animation:bf-nyil-be 500ms cubic-bezier(.34,1.56,.64,1) 3800ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(2) img{animation:bf-kenburns 2400ms var(--ease-out) 2900ms both}
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="fut"] .bf-zsak-lepes:nth-child(3) img{animation:bf-kenburns 2400ms var(--ease-out) 4000ms both}
.bf-anim .bf-lap .bf-meretek[data-megjelenik]:not([data-indul]) .bf-kapacitas > span{scale:0 1}
.bf-anim .bf-lap .bf-meretek .bf-kapacitas > span{transform-origin:0 50%;transition:scale 280ms var(--ease-out)}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(2){transition-delay:60ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(3){transition-delay:120ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(4){transition-delay:180ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(5){transition-delay:240ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(6){transition-delay:300ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(7){transition-delay:360ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(8){transition-delay:420ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(9){transition-delay:480ms}
.bf-anim .bf-lap .bf-meretek[data-indul] .bf-kapacitas > span:nth-child(10){transition-delay:540ms}
}
}
@layer components {
.bf-lap .bf-ar-racs{
display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
grid-template-areas:"plusz uzem" "plusz megterul";gap:var(--space-24);
margin-top:var(--space-48);padding-top:0;border-top:0;
}
.bf-lap .bf-ar-plusz{grid-area:plusz}
.bf-lap .bf-ar-uzem{grid-area:uzem}
.bf-lap .bf-ar-megterul{grid-area:megterul}
.bf-lap .bf-ar-kartya{
position:relative;display:flex;flex-direction:column;gap:var(--space-16);
padding:var(--space-32);border-radius:var(--card-radius);
background:linear-gradient(160deg,color-mix(in srgb,var(--panel-dark-text) 9%,transparent),color-mix(in srgb,var(--panel-dark-text) 3%,transparent));
border:1px solid color-mix(in srgb,var(--panel-dark-text) 16%,transparent);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--panel-dark-text) 18%,transparent);
}
.bf-lap .bf-ar-kartya > *{margin:0}
.bf-lap .bf-ar-kartya h3{color:var(--panel-dark-text)}
.bf-lap .bf-ar-kartya .type-ui-body{color:var(--panel-dark-muted)}
.bf-lap .bf-ar-ikon{
display:grid;place-items:center;width:var(--space-48);aspect-ratio:1;border-radius:var(--r-lg);
background:color-mix(in srgb,var(--primary) 22%,transparent);color:var(--primary);
border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);
}
.bf-lap .bf-ar-ikon svg{width:var(--space-24);height:var(--space-24)}
.bf-lap .bf-ar-csoport{margin-top:var(--space-8);color:var(--panel-dark-muted)}
.bf-lap .bf-ar-csoport-sajat{color:var(--primary)}
.bf-lap .bf-ar-csempek{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:0;padding:0;list-style:none}
.bf-lap .bf-ar-csempek li{
display:inline-flex;align-items:center;gap:var(--space-8);
padding:var(--space-8) var(--space-16);border-radius:var(--chip-radius);
color:var(--panel-dark-text);
}
.bf-lap .bf-ar-csempek-sajat li{
background:color-mix(in srgb,var(--primary) 20%,transparent);
border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);
}
.bf-lap .bf-ar-csempek-sajat li::before{
content:"✓";display:grid;place-items:center;width:var(--space-24);aspect-ratio:1;border-radius:50%;
background:var(--primary);color:var(--on-primary);font-weight:700;font-size:var(--type-ui-label-size);line-height:1;
}
.bf-lap .bf-ar-csempek-helyi li{
color:var(--panel-dark-muted);
border:1px dashed color-mix(in srgb,var(--panel-dark-text) 30%,transparent);
}
.bf-lap .bf-ar-csempek-helyi li::before{
content:"";width:var(--space-8);aspect-ratio:1;border-radius:50%;
border:2px solid color-mix(in srgb,var(--panel-dark-text) 45%,transparent);
}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-ar-racs{grid-template-columns:minmax(0,1fr);grid-template-areas:"plusz" "uzem" "megterul"}
}
@media (max-width: 640px) {
.bf-lap .bf-ar-kartya{padding:var(--space-24)}
}
}
@layer motion {
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-ar-racs[data-megjelenik]:not([data-indul]) .bf-ar-kartya{opacity:0;transform:translateY(var(--space-24))}
.bf-anim .bf-lap .bf-ar-racs .bf-ar-kartya{transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out)}
.bf-anim .bf-lap .bf-ar-racs[data-indul] .bf-ar-uzem{transition-delay:150ms}
.bf-anim .bf-lap .bf-ar-racs[data-indul] .bf-ar-megterul{transition-delay:300ms}
.bf-anim .bf-lap .bf-ar-racs[data-megjelenik]:not([data-indul]) .bf-ar-csempek li{opacity:0;scale:.85}
.bf-anim .bf-lap .bf-ar-racs .bf-ar-csempek li{transition:opacity 400ms var(--ease-out),scale 400ms cubic-bezier(.34,1.56,.64,1)}
.bf-anim .bf-lap .bf-ar-racs[data-indul] .bf-ar-csempek li:nth-child(2){transition-delay:80ms}
.bf-anim .bf-lap .bf-ar-racs[data-indul] .bf-ar-csempek li:nth-child(3){transition-delay:160ms}
.bf-anim .bf-lap .bf-ar-racs[data-indul] .bf-ar-csempek li:nth-child(4){transition-delay:240ms}
.bf-anim .bf-lap .bf-ar-racs[data-indul] .bf-ar-csempek-helyi li{transition-delay:420ms}
}
}
@layer components {
.bf-lap :is(.section[id], h2[id], h3[id]){scroll-margin-top:var(--space-24)}
}
@layer components {
.bf-lap .bf-ut{position:relative;margin-top:var(--space-48);padding-top:var(--space-48)}
.bf-lap .bf-ut-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin:0;padding:0;list-style:none}
.bf-lap .bf-ut-pont{position:relative;display:flex;flex-direction:column;gap:var(--space-8);padding-right:var(--space-24)}
.bf-lap .bf-ut-pont > p,.bf-lap .bf-ut-pont > h3{margin:0}
.bf-lap .bf-ut-sav{position:relative;height:var(--space-16);margin-right:calc(-1 * var(--space-24));border-radius:var(--chip-radius);
background:color-mix(in srgb,var(--primary) 16%,transparent);overflow:visible}
.bf-lap .bf-ut-sav-tolt{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;
background:color-mix(in srgb,var(--primary) 55%,transparent)}
.bf-lap .bf-ut-pont-1 .bf-ut-sav-tolt{
background:
repeating-linear-gradient(-45deg,color-mix(in srgb,var(--on-primary) 16%,transparent) 0 var(--space-8),transparent var(--space-8) var(--space-16)),
var(--primary);
background-size:calc(var(--space-16) * 1.4142 * 2) 100%,auto;
}
.bf-lap .bf-ut-hatar{position:absolute;right:var(--space-16);top:50%;translate:0 -50%;width:var(--space-24);aspect-ratio:1;border-radius:50%;
background:var(--canvas);border:4px solid var(--primary);box-shadow:0 0 0 var(--space-4) color-mix(in srgb,var(--primary) 20%,transparent)}
.bf-lap .bf-ut-pont-1 .bf-ut-hatar{background:var(--bf-cimke-bg);border-color:var(--primary)}
.bf-lap .bf-ut-naptar{
display:grid;justify-items:center;align-self:flex-start;min-width:calc(var(--space-64) + var(--space-16));
margin:var(--space-16) 0 var(--space-8);overflow:hidden;border-radius:var(--r-lg);
background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow-2);
}
.bf-lap .bf-ut-ho{align-self:stretch;text-align:center;padding:var(--space-4) var(--space-8);
background:var(--primary);color:var(--on-primary);font-family:var(--font-mono);font-size:var(--type-ui-label-size);
font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.bf-lap .bf-ut-pont-1 .bf-ut-ho{background:var(--bf-cimke-bg);color:var(--bf-cimke-text)}
.bf-lap .bf-ut-nap{padding-top:var(--space-4);font-family:var(--font-heading);font-size:calc(var(--type-display-feature-title-size) * 1.6);
font-weight:700;line-height:1.05;color:var(--text-primary)}
.bf-lap .bf-ut-ev{padding-bottom:var(--space-8);font-family:var(--font-mono);font-size:var(--type-ui-label-size);color:var(--text-tertiary)}
.bf-lap .bf-ut-szakasz{color:var(--primary)}
.bf-lap .bf-ut-pont-1 .bf-ut-szakasz{color:var(--text-primary)}
.bf-lap .bf-ut-cim{color:var(--text-primary)}
.bf-lap .bf-ut-datum{color:var(--text-primary)}
.bf-lap .bf-ut-szoveg{color:var(--text-secondary)}
.bf-lap .bf-ut-ma{position:absolute;left:0;top:0;margin:0;display:inline-flex;align-items:center;gap:var(--space-8);
padding:var(--space-4) var(--space-16) var(--space-4) var(--space-4);border-radius:var(--chip-radius);
background:var(--bf-cimke-bg);color:var(--bf-cimke-text);box-shadow:var(--shadow-2)}
.bf-lap .bf-ut-ma::after{content:"";position:absolute;left:var(--space-16);top:100%;width:2px;height:calc(var(--space-16) + var(--space-8));
background:var(--bf-cimke-bg)}
.bf-lap .bf-ut-ma-cimke{padding:var(--space-4) var(--space-8);border-radius:var(--chip-radius);background:var(--bf-cimke-text);color:var(--bf-cimke-bg);
font-family:var(--font-mono);font-size:var(--type-ui-label-size);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bf-lap .bf-ut-ma-nap{font-size:var(--type-ui-label-size);font-weight:600}
.bf-lap .bf-ut-ma-nap:empty{display:none}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-ut-lista{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
.bf-lap .bf-ut-pont{padding-right:0}
.bf-lap .bf-ut-sav{margin-right:0}
}
}
@layer motion {
@keyframes bf-ut-csik{to{background-position:calc(var(--space-16) * 1.4142 * 2) 0,0 0}}
@keyframes bf-ut-lap{0%{opacity:0;transform:perspective(400px) rotateX(-85deg)}70%{opacity:1;transform:perspective(400px) rotateX(10deg)}100%{opacity:1;transform:none}}
@keyframes bf-ut-pont{0%,100%{scale:1}40%{scale:1.35}}
@keyframes bf-ut-ma{0%{opacity:0;transform:translateY(calc(-1 * var(--space-16)))}60%{opacity:1;transform:translateY(var(--space-4))}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-ut[data-megjelenik]:not([data-indul]) .bf-ut-sav-tolt{transform:scaleX(0)}
.bf-anim .bf-lap .bf-ut .bf-ut-sav-tolt{transition:transform 900ms cubic-bezier(.45,0,.2,1)}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-2 .bf-ut-sav-tolt{transition-delay:900ms}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-3 .bf-ut-sav-tolt{transition-delay:1800ms}
.bf-anim .bf-lap .bf-ut[data-megjelenik]:not([data-indul]) :is(.bf-ut-naptar,.bf-ut-ma){opacity:0}
.bf-anim .bf-lap .bf-ut[data-megjelenik]:not([data-indul]) .bf-ut-pont > :is(p,h3){opacity:0;transform:translateY(var(--space-8))}
.bf-anim .bf-lap .bf-ut .bf-ut-pont > :is(p,h3){transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-1 > :is(p,h3){transition-delay:600ms}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-2 > :is(p,h3){transition-delay:1500ms}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-3 > :is(p,h3){transition-delay:2400ms}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-ma{animation:bf-ut-ma 700ms cubic-bezier(.34,1.56,.64,1) 100ms both}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-1 .bf-ut-naptar{animation:bf-ut-lap 700ms var(--ease-out) 700ms both}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-2 .bf-ut-naptar{animation:bf-ut-lap 700ms var(--ease-out) 1600ms both}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-3 .bf-ut-naptar{animation:bf-ut-lap 700ms var(--ease-out) 2500ms both}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-1 .bf-ut-hatar{animation:bf-ut-pont 600ms var(--ease-out) 900ms 3}
}
}
@layer motion {
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-zsak-lepesek[data-ciklus="vissza"] :is(.bf-k1-kosar,.bf-k1-fedel){transition:transform 700ms cubic-bezier(.45,0,.2,1)}
}
}
@layer components {
.bf-lap .bf-matrica{
position:absolute;top:var(--space-16);right:var(--space-24);z-index:3;
width:clamp(calc(var(--space-128) + var(--space-56)),20vw,calc(var(--space-128) * 2.6));
rotate:0deg;filter:drop-shadow(0 var(--space-16) var(--space-24) color-mix(in srgb,var(--color-forest) 50%,transparent));
}
.bf-lap .bf-matrica-kep{display:block;width:100%;height:auto}
.bf-lap .bf-matrica-feny{
position:absolute;inset:0;pointer-events:none;opacity:0;
background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,var(--color-stardust) 55%,transparent) 50%,transparent 62%);
background-size:260% 100%;background-repeat:no-repeat;
-webkit-mask:url("/assets/img/black-friday/bf-matrica.webp") center / 100% 100% no-repeat;
mask:url("/assets/img/black-friday/bf-matrica.webp") center / 100% 100% no-repeat;
mix-blend-mode:soft-light;
}
.bf-lap .bf-viz-csepp{
position:absolute;width:3.2%;aspect-ratio:3 / 4;translate:-50% 0;opacity:0;pointer-events:none;
border-radius:50% 50% 50% 50% / 62% 62% 40% 40%;
background:
radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--color-stardust) 95%,transparent) 0 14%,transparent 16%),
radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--color-skyblue) 65%,transparent),color-mix(in srgb,var(--color-skyblue) 22%,transparent) 70%);
box-shadow:inset 0 -1px 2px color-mix(in srgb,var(--color-forest) 25%,transparent);
}
.bf-lap .bf-viz-csepp-1{left:25.2%;top:89%}
.bf-lap .bf-viz-csepp-2{left:54.9%;top:97%}
.bf-lap .bf-viz-csepp-3{left:82.1%;top:86.5%}
.bf-lap .bf-mukodes-fo{color:var(--text-primary);font-weight:var(--type-ui-body-strong-weight)}
.bf-lap .bf-mukodes-tenyek{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16);
max-width:calc(var(--measure) * 1.5);margin:var(--space-32) auto 0;padding:0;list-style:none;text-align:left;
}
.bf-lap .bf-mukodes-tenyek li{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);align-items:start;
padding:var(--space-24);border-radius:var(--card-radius);
background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);
}
.bf-lap .bf-mukodes-tenyek .type-ui-body{color:var(--text-secondary)}
.bf-lap .bf-mukodes-ikon{
display:grid;place-items:center;width:var(--space-40);aspect-ratio:1;border-radius:var(--r-lg);
background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary);
}
.bf-lap .bf-mukodes-ikon svg{width:var(--space-24);height:var(--space-24)}
.bf-lap .bf-doboz-felcim{margin:0 0 var(--space-4);color:var(--text-tertiary)}
.bf-lap .bf-utana-doboz{
position:relative;overflow:hidden;border:1px solid var(--card-border);box-shadow:var(--card-shadow);
background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,var(--card-bg)),var(--card-bg) 45%);
}
.bf-lap .bf-utana-lepesek{position:relative;display:grid;gap:var(--space-24);margin:var(--space-24) 0 0;padding:0;list-style:none}
.bf-lap .bf-utana-lepesek::before{
content:"";position:absolute;left:calc(var(--space-48) / 2 - 1px);top:var(--space-24);bottom:var(--space-24);width:2px;
background:linear-gradient(to bottom,var(--primary),color-mix(in srgb,var(--primary) 25%,transparent));
}
.bf-lap .bf-utana-lepesek li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-16);align-items:start}
.bf-lap .bf-utana-ikon{
position:relative;z-index:1;display:grid;place-items:center;width:var(--space-48);aspect-ratio:1;border-radius:50%;
background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 var(--space-4) var(--card-bg),0 0 0 calc(var(--space-4) + 2px) color-mix(in srgb,var(--primary) 30%,transparent);
}
.bf-lap .bf-utana-ikon svg{width:var(--space-24);height:var(--space-24)}
.bf-lap .bf-utana-lepesek .type-ui-body{padding-top:var(--space-8);color:var(--text-primary)}
.bf-lap .bf-utana-szam{color:var(--primary);margin-right:var(--space-4)}
.bf-lap .bf-hivas-doboz{
background:linear-gradient(160deg,color-mix(in srgb,var(--color-forest) 88%,var(--primary)),var(--color-forest));
border:1px solid color-mix(in srgb,var(--color-lime) 22%,transparent);
box-shadow:0 var(--space-24) var(--space-48) color-mix(in srgb,var(--color-forest) 28%,transparent);
}
.bf-lap .bf-hivas-doboz h3{color:var(--color-stardust)}
.bf-lap .bf-hivas-doboz .bf-doboz-felcim{color:color-mix(in srgb,var(--color-lime) 75%,transparent)}
.bf-lap .bf-hivas-lista{display:grid;gap:var(--space-8);margin:var(--space-16) 0 0;padding:0;list-style:none}
.bf-lap .bf-hivas-sor{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-16);align-items:center;
min-height:var(--space-56);padding:var(--space-8) var(--space-16) var(--space-8) var(--space-8);border-radius:var(--r-lg);
color:var(--color-stardust);text-decoration:none;
background:color-mix(in srgb,var(--color-stardust) 6%,transparent);border:1px solid color-mix(in srgb,var(--color-stardust) 12%,transparent);
transition:background-color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out),translate var(--dur-ui) var(--ease-out);
}
.bf-lap .bf-hivas-sor:is(:hover,:focus-visible){
background:color-mix(in srgb,var(--primary) 30%,transparent);border-color:var(--primary);translate:var(--space-4) 0;
}
.bf-lap .bf-hivas-sor:focus-visible{outline:3px solid var(--color-lime);outline-offset:2px}
.bf-lap .bf-hivas-ikon{display:grid;place-items:center;width:var(--space-40);aspect-ratio:1;border-radius:var(--r-md);
background:color-mix(in srgb,var(--primary) 30%,transparent);color:var(--color-lime)}
.bf-lap .bf-hivas-ikon svg{width:calc(var(--space-16) + var(--space-4));height:calc(var(--space-16) + var(--space-4))}
.bf-lap .bf-hivas-szam{font-family:var(--font-mono);font-size:var(--type-ui-body-size);font-weight:600;letter-spacing:.02em;overflow-wrap:anywhere}
.bf-lap .bf-hivas-jel{color:color-mix(in srgb,var(--color-lime) 80%,transparent)}
.bf-lap .bf-hivas-fo{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.bf-lap .bf-hivas-fo .bf-hivas-ikon{background:color-mix(in srgb,var(--on-primary) 16%,transparent);color:var(--on-primary)}
.bf-lap .bf-hivas-fo .bf-hivas-jel{color:var(--on-primary)}
.bf-lap .bf-hivas-fo:is(:hover,:focus-visible){background:color-mix(in srgb,var(--primary) 85%,var(--color-lime))}
.bf-lap .bf-hivas-level .bf-hivas-szam{font-family:var(--font-body);font-weight:500}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-mukodes-tenyek{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 640px) {
.bf-lap .bf-matrica{top:var(--space-8);right:var(--space-8);width:calc(var(--space-128) + var(--space-40))}
}
}
@layer motion {
@keyframes bf-mat-be{
0%{opacity:0;transform:translateY(calc(-1 * var(--space-32))) rotate(-10deg) scale(.8)}
60%{opacity:1;transform:translateY(var(--space-4)) rotate(2deg) scale(1.03)}
100%{opacity:1;transform:none}
}
@keyframes bf-mat-feny{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-130% 0}}
@keyframes bf-viz-csepp{
0%{opacity:0;transform:translateY(0) scale(.4)}
18%{opacity:1;transform:translateY(0) scale(1)}
32%{opacity:1;transform:translateY(2px) scaleY(1.15)}
100%{opacity:0;transform:translateY(calc(var(--space-64) + var(--space-32))) scaleY(1.2)}
}
@keyframes bf-viz-csepp-ujra{
0%{opacity:0;transform:translateY(0) scale(.4)}
18%{opacity:1;transform:translateY(0) scale(1)}
32%{opacity:1;transform:translateY(2px) scaleY(1.15)}
100%{opacity:0;transform:translateY(calc(var(--space-64) + var(--space-32))) scaleY(1.2)}
}
@media (prefers-reduced-motion: no-preference) {
}
}
@layer components {
.bf-lap .akcio-logo{
top:var(--space-24);left:var(--space-32);padding:var(--space-8);
--logo-magassag:calc(var(--space-64) + var(--space-8));
filter:drop-shadow(0 2px var(--space-8) color-mix(in srgb,var(--color-forest) 70%,transparent));
}
.bf-lap .akcio-logo::before{display:none}
.bf-lap .akcio-logo .site-logo-vilagos,
:root[data-theme="dark"] .bf-lap .akcio-logo .site-logo-vilagos{display:none}
.bf-lap .akcio-logo .site-logo-sotet,
:root[data-theme="dark"] .bf-lap .akcio-logo .site-logo-sotet{display:block}
.bf-lap .bf-hero .hero-media::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(ellipse 48% 42% at 0% 0%,color-mix(in srgb,var(--color-forest) 72%,transparent) 0%,
color-mix(in srgb,var(--color-forest) 30%,transparent) 55%,transparent 100%);
}
.bf-lap .akcio-hero-panel{
position:relative;isolation:isolate;
background:linear-gradient(150deg,
color-mix(in srgb,var(--panel-dark-bg) 66%,transparent) 0%,
color-mix(in srgb,var(--panel-dark-bg) 48%,transparent) 100%);
-webkit-backdrop-filter:blur(calc(var(--space-32) + var(--space-4))) saturate(1.8) brightness(.86);
backdrop-filter:blur(calc(var(--space-32) + var(--space-4))) saturate(1.8) brightness(.86);
border:1px solid color-mix(in srgb,var(--panel-dark-text) 30%,transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb,var(--panel-dark-text) 45%,transparent),
inset 1px 0 0 color-mix(in srgb,var(--panel-dark-text) 12%,transparent),
0 var(--space-32) var(--space-96) color-mix(in srgb,var(--panel-dark-bg) 50%,transparent);
}
.bf-lap .akcio-hero-panel::before{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
background:
linear-gradient(180deg,color-mix(in srgb,var(--panel-dark-text) 14%,transparent) 0%,transparent 26%),
radial-gradient(ellipse 70% 45% at 85% 0%,color-mix(in srgb,var(--color-lime) 10%,transparent),transparent 70%);
}
.bf-lap .bf-matrica{
--bf-dol-x:0deg;--bf-dol-y:0deg;
transform:perspective(900px) rotateX(var(--bf-dol-y)) rotateY(var(--bf-dol-x));
transition:transform 500ms var(--ease-out);
}
.bf-lap .bf-ut-ho{justify-self:stretch}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .akcio-logo{top:var(--space-16);left:var(--space-16);--logo-magassag:var(--space-48)}
.bf-lap .akcio-hero-panel{
background:linear-gradient(170deg,
color-mix(in srgb,var(--panel-dark-bg) 82%,transparent) 0%,
color-mix(in srgb,var(--panel-dark-bg) 90%,transparent) 100%);
}
}
}
@layer motion {
@keyframes bf-mat-kep-be{
0%{opacity:0;filter:blur(var(--space-8));transform:translateY(calc(-1 * var(--space-40))) rotate(-9deg) scale(.82)}
55%{opacity:1;filter:blur(0);transform:translateY(var(--space-4)) rotate(1.5deg) scale(1.03)}
100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes bf-mat-lebeg{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--space-8))}}
@keyframes bf-mat-feny-ism{0%{opacity:1;background-position:130% 0}28%,100%{opacity:1;background-position:-130% 0}}
@keyframes bf-viz-csepp-ism{
0%{opacity:0;transform:translateY(0) scale(.2)}
30%{opacity:1;transform:translateY(0) scale(1)}
40%{opacity:1;transform:translateY(3px) scale(.95,1.3)}
100%{opacity:0;transform:translateY(calc(var(--space-96) + var(--space-16))) scale(.9,1.25)}
}
@media (prefers-reduced-motion: no-preference) {
.bf-lap .bf-matrica-kep{animation:bf-mat-kep-be 1100ms cubic-bezier(.34,1.35,.64,1) 200ms both}
.bf-lap .bf-matrica{animation:bf-mat-lebeg 5200ms ease-in-out 1400ms infinite}
.bf-lap .bf-matrica-feny{animation:bf-mat-feny-ism 6000ms var(--ease-out) 1300ms infinite}
.bf-lap .bf-viz-csepp{animation:bf-viz-csepp-ism 3300ms cubic-bezier(.5,0,.9,.4) 1700ms infinite}
.bf-lap .bf-viz-csepp-2{animation-duration:3800ms;animation-delay:2600ms}
.bf-lap .bf-viz-csepp-3{animation-duration:3500ms;animation-delay:3400ms}
.bf-lap .bf-hero:not([data-latszik]) :is(.bf-matrica,.bf-matrica-feny,.bf-viz-csepp){animation-play-state:paused}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-1 .bf-ut-sav-tolt{animation:bf-ut-csik 900ms linear 1000ms infinite}
.bf-anim .bf-lap .bf-ut:not([data-latszik]) .bf-ut-pont-1 .bf-ut-sav-tolt{animation-play-state:paused}
}
}
@layer components {
.bf-lap .bf-ajandek-jel{
--c:clamp(calc(var(--space-96) - var(--space-8)),10vw,calc(var(--space-128) + var(--space-8)));
--sav:calc(var(--space-24) + var(--space-4));
--masni:calc(var(--c) * 1.45);
--csomo:calc(var(--c) * .42);
--bf-jel-bg:var(--color-forest);
--bf-jel-text:var(--color-lime);
--bf-jel-szalag:var(--color-fern);
position:absolute;inset:0;z-index:2;pointer-events:none;
}
.bf-lap .bf-ajandek{overflow:visible;position:relative}
.bf-lap .bf-ajandek-kep > img{border-radius:calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0}
.bf-lap .bf-jel-szalag-keret{
position:absolute;inset:0;overflow:hidden;
border-top-left-radius:calc(var(--card-radius) - 1px);border-top-right-radius:calc(var(--card-radius) - 1px);
}
.bf-lap .bf-jel-szalag{
position:absolute;left:calc(var(--csomo) - var(--c));top:calc(var(--csomo) - var(--sav) / 2);
inline-size:calc(var(--c) * 2);block-size:var(--sav);rotate:-45deg;
background:linear-gradient(180deg,
color-mix(in srgb,var(--bf-jel-szalag) 55%,var(--bf-jel-text)) 0%,
var(--bf-jel-szalag) 40%,
color-mix(in srgb,var(--bf-jel-szalag) 80%,var(--bf-jel-text)) 62%,
color-mix(in srgb,var(--bf-jel-szalag) 88%,var(--bf-jel-bg)) 100%);
outline:1px dashed color-mix(in srgb,var(--bf-jel-text) 85%,transparent);outline-offset:calc(var(--space-4) * -1);
box-shadow:0 var(--space-4) var(--space-16) color-mix(in srgb,var(--bf-jel-bg) 30%,transparent);
}
.bf-lap .bf-ajandek-kep .bf-jel-masni{
position:absolute;inline-size:var(--masni);block-size:auto;aspect-ratio:auto;object-fit:contain;
left:calc(var(--csomo) - var(--masni) / 2);top:calc(var(--csomo) - var(--masni) * .31);
rotate:-45deg;transform-origin:50% 36%;
filter:drop-shadow(0 var(--space-4) var(--space-8) color-mix(in srgb,var(--bf-jel-bg) 60%,transparent));
}
.bf-lap .bf-jel-cimke{
position:absolute;left:calc(var(--c) + var(--space-16));top:var(--space-16);margin:0;
display:grid;justify-items:start;gap:var(--space-4);
padding:var(--space-8) var(--space-16) calc(var(--space-8) + var(--space-4));
border-radius:var(--r-md);rotate:-4deg;overflow:hidden;isolation:isolate;
background:linear-gradient(150deg,var(--bf-jel-text) 0%,color-mix(in srgb,var(--bf-jel-text) 82%,var(--bf-jel-szalag)) 100%);
color:var(--bf-jel-bg);
box-shadow:
inset 0 0 0 1px color-mix(in srgb,var(--bf-jel-szalag) 70%,transparent),
inset 0 1px 0 color-mix(in srgb,var(--color-stardust) 80%,transparent),
0 var(--space-8) var(--space-24) color-mix(in srgb,var(--bf-jel-bg) 35%,transparent);
}
.bf-lap .bf-jel-cimke::after{
content:"";position:absolute;inset:0;z-index:-1;translate:-120% 0;
background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--color-stardust) 75%,transparent) 50%,transparent 70%);
}
.bf-lap .bf-jel-felso{
font-family:var(--font-mono);font-size:var(--type-data-eyebrow-size);font-weight:var(--type-data-eyebrow-weight);
letter-spacing:var(--type-data-eyebrow-letter-spacing);text-transform:uppercase;line-height:1;
}
.bf-lap .bf-jel-ertek{
font-family:var(--font-heading);font-weight:var(--type-display-highlight-title-weight);
font-size:clamp(var(--type-ui-body-size),2vw,var(--type-display-feature-title-size));line-height:1.05;white-space:nowrap;
}
.bf-lap .bf-jel-ertek small{font-family:var(--font-body);font-size:var(--type-ui-label-size);font-weight:var(--type-ui-label-weight)}
.bf-lap .bf-jel-also{font-family:var(--font-body);font-size:var(--type-ui-caption-size);line-height:1;opacity:.9}
}
@layer motion {
@keyframes bf-jel-szalag-be{from{scale:0 1}}
@keyframes bf-jel-masni-be{
0%{opacity:0;scale:.2;rotate:-110deg}
55%{opacity:1}
100%{opacity:1;scale:1;rotate:-45deg}
}
@keyframes bf-jel-masni-ring{
0%,78%,100%{translate:0 0}
83%{translate:0 calc(var(--space-8) * -1)}
88%{translate:0 0}
92%{translate:0 calc(var(--space-4) * -1)}
96%{translate:0 0}
}
@keyframes bf-jel-cimke-be{
0%{opacity:0;translate:0 calc(var(--space-16) * -1);rotate:-18deg}
100%{opacity:1;translate:0 0;rotate:-4deg}
}
@keyframes bf-jel-feny{
0%{translate:-120% 0}
24%,100%{translate:120% 0}
}
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-ajandek:not([data-indul]) .bf-jel-szalag{scale:0 1}
.bf-anim .bf-lap .bf-ajandek:not([data-indul]) :is(.bf-jel-masni,.bf-jel-cimke){opacity:0}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-jel-szalag{animation:bf-jel-szalag-be 650ms var(--ease-out) 350ms both}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-jel-masni{
animation:bf-jel-masni-be 950ms cubic-bezier(.34,1.56,.64,1) 750ms both,bf-jel-masni-ring 6s var(--ease-out) 3s infinite;
}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-jel-cimke{animation:bf-jel-cimke-be 850ms cubic-bezier(.34,1.56,.64,1) 1000ms both}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-jel-cimke::after{animation:bf-jel-feny 6s var(--ease-out) 1.9s infinite}
.bf-anim .bf-lap .bf-ajandek[data-indul]:not([data-latszik]) .bf-jel-masni{animation-play-state:running,paused}
.bf-anim .bf-lap .bf-ajandek[data-indul]:not([data-latszik]) .bf-jel-cimke::after{animation-play-state:paused}
}
}
@layer components {
.bf-lap .bf-levelek{
--bf-level-alap:clamp(var(--space-32),3.4vw,var(--space-56));
display:none;position:absolute;inset:0 0 8% 48%;z-index:2;overflow:hidden;pointer-events:none;
}
.bf-lap .bf-levelek-elol{z-index:4}
.bf-lap .bf-level{
position:absolute;top:0;left:0;inline-size:var(--bf-level-alap);aspect-ratio:1;opacity:0;
perspective:calc(var(--space-128) * 5);
}
.bf-lap .bf-level-test{display:block;position:relative;inline-size:100%;block-size:100%;transform-style:preserve-3d}
.bf-lap .bf-hero .hero-media .bf-level-kep{
position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;object-fit:contain;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.bf-lap .bf-hero .hero-media .bf-level-hat{transform:rotateY(180deg);filter:brightness(.68) saturate(.7) sepia(.18)}
.bf-lap .bf-level[data-mely="tav"]{filter:blur(.6px) saturate(.82) brightness(.94)}
.bf-lap .bf-level[data-mely="kozep"]{filter:drop-shadow(0 var(--space-4) var(--space-4) color-mix(in srgb,var(--color-forest) 38%,transparent))}
.bf-lap .bf-level[data-mely="kozel"]{filter:blur(1.2px) saturate(1.05)}
.bf-lap .bf-levelek[data-fut] :is(.bf-level,.bf-level-test){will-change:transform,opacity}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-levelek{inset:0 0 12% 0;--bf-level-alap:var(--space-32)}
.bf-lap .bf-levelek .bf-level:nth-child(n+7){display:none}
}
}
@layer motion {
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-hero[data-latszik] .bf-levelek{display:block}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
.bf-anim .bf-lap .bf-hero[data-latszik] .bf-levelek-elol{display:none}
}
}
@layer components {
.bf-lap .bf-emlekezteto{
--bf-fontos:var(--color-warning-500);
position:relative;isolation:isolate;overflow:hidden;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-24) var(--space-40);
margin:var(--space-48) 0 0;padding:var(--space-24) var(--space-40) var(--space-24) var(--space-24);
border-radius:var(--card-radius);
background:
radial-gradient(90% 160% at 0% 50%,color-mix(in srgb,var(--primary) 36%,transparent) 0%,transparent 62%),
linear-gradient(110deg,color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 7%,transparent));
border:1px solid color-mix(in srgb,var(--primary) 75%,transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb,var(--panel-dark-text) 24%,transparent),
0 var(--space-24) var(--space-64) color-mix(in srgb,var(--primary) 18%,transparent);
}
.bf-lap .bf-emlekezteto::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--panel-dark-text) 16%,transparent) 50%,transparent 65%);
background-size:250% 100%;background-repeat:no-repeat;
}
.bf-lap .bf-emlek-matrica{
position:relative;inline-size:clamp(calc(var(--space-128) + var(--space-8)),13vw,calc(var(--space-128) + var(--space-56)));
rotate:-6deg;filter:drop-shadow(0 var(--space-8) var(--space-16) color-mix(in srgb,var(--color-forest) 65%,transparent));
}
.bf-lap .bf-emlek-matrica-kep{display:block;inline-size:100%;block-size:auto}
.bf-lap .bf-emlek-szoveg{display:grid;gap:var(--space-8);min-width:0}
.bf-lap .bf-emlek-szoveg > *{margin:0}
.bf-lap .bf-emlekezteto-cimke{
justify-self:start;padding:var(--space-4) var(--space-16);border-radius:var(--chip-radius);
background:var(--primary);color:var(--on-primary);
}
.bf-lap .bf-emlek-fo{
font-family:var(--font-heading);font-weight:var(--type-display-highlight-title-weight);
font-size:var(--type-display-feature-title-size);line-height:1.2;color:var(--panel-dark-text);text-wrap:balance;
}
.bf-lap .bf-emlek-vagy{
display:inline-block;vertical-align:.2em;padding:var(--space-4) var(--space-8);border-radius:var(--chip-radius);
font-family:var(--font-mono);font-size:var(--type-data-eyebrow-size);font-weight:var(--type-data-eyebrow-weight);
letter-spacing:var(--type-data-eyebrow-letter-spacing);text-transform:uppercase;line-height:1;
background:color-mix(in srgb,var(--panel-dark-text) 14%,transparent);color:var(--panel-dark-text);
}
.bf-lap .bf-emlek-al{color:color-mix(in srgb,var(--panel-dark-text) 84%,transparent)}
.bf-lap .bf-emlek-hatarido{display:grid;justify-items:center;gap:var(--space-8);text-align:center}
.bf-lap .bf-emlek-hatarido > *{margin:0}
.bf-lap .bf-emlek-hatarido-cimke{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--bf-fontos)}
.bf-lap .bf-emlek-fontos{
display:grid;place-items:center;inline-size:calc(var(--space-16) + var(--space-4));aspect-ratio:1;border-radius:50%;
background:var(--bf-fontos);color:var(--color-forest);font-family:var(--font-body);font-weight:var(--type-ui-body-strong-weight);
letter-spacing:0;
}
.bf-lap .bf-emlek-naptar-keret{position:relative;border-radius:var(--r-lg);perspective:calc(var(--space-128) * 4)}
.bf-lap .bf-emlek-naptar-keret::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:0 0 0 0 color-mix(in srgb,var(--bf-fontos) 60%,transparent);
}
.bf-lap .bf-emlek-naptar{
display:grid;margin:0;inline-size:calc(var(--space-96) + var(--space-24));overflow:hidden;border-radius:var(--r-lg);text-align:center;
background:var(--color-lime);color:var(--color-forest);transform-origin:50% 0;
box-shadow:0 0 0 2px var(--bf-fontos),0 var(--space-16) var(--space-32) color-mix(in srgb,var(--color-forest) 55%,transparent);
}
.bf-lap .bf-emlek-honap{
display:block;padding:var(--space-4) 0;background:var(--bf-fontos);color:var(--color-forest);
font-family:var(--font-mono);font-size:var(--type-data-eyebrow-size);font-weight:var(--type-data-eyebrow-weight);
letter-spacing:var(--type-data-eyebrow-letter-spacing);text-transform:uppercase;
}
.bf-lap .bf-emlek-nap{
display:block;padding:var(--space-4) 0 var(--space-8);
font-family:var(--font-heading);font-weight:var(--type-display-hero-weight);font-size:var(--type-display-hero-size);line-height:1;
}
.bf-lap .bf-emlek-nap small{font-family:var(--font-body);font-size:var(--type-ui-body-size);font-weight:var(--type-ui-body-strong-weight)}
.bf-lap .bf-emlek-hatra{color:var(--panel-dark-text);font-weight:var(--type-ui-body-strong-weight)}
.bf-lap .bf-emlek-matrica .bf-viz-csepp{width:4%}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-emlekezteto{grid-template-columns:auto minmax(0,1fr);padding:var(--space-24)}
.bf-lap .bf-emlek-hatarido{grid-column:1 / -1;grid-template-columns:auto auto auto;justify-content:start;align-items:center;gap:var(--space-16);text-align:start}
}
@media (max-width: 640px) {
.bf-lap .bf-emlekezteto{grid-template-columns:minmax(0,1fr);justify-items:start}
.bf-lap .bf-emlek-matrica{inline-size:calc(var(--space-128) + var(--space-16))}
.bf-lap .bf-emlek-hatarido{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"naptar cimke" "naptar hatra";gap:var(--space-4) var(--space-16)}
.bf-lap .bf-emlek-hatarido-cimke{grid-area:cimke;align-self:end}
.bf-lap .bf-emlek-naptar-keret{grid-area:naptar}
.bf-lap .bf-emlek-hatra{grid-area:hatra;align-self:start}
}
}
@layer motion {
@keyframes bf-emlek-feny{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-120% 0}}
@keyframes bf-emlek-matrica-be{
0%{opacity:0;translate:0 calc(var(--space-24) * -1);rotate:-22deg;scale:.75}
100%{opacity:1;translate:0 0;rotate:-6deg;scale:1}
}
@keyframes bf-emlek-lebeg{0%,100%{translate:0 0}50%{translate:0 calc(var(--space-8) * -1)}}
@keyframes bf-emlek-lap{0%{opacity:0;transform:rotateX(-95deg)}60%{opacity:1;transform:rotateX(12deg)}100%{opacity:1;transform:none}}
@keyframes bf-emlek-pulzus{
0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bf-fontos) 65%,transparent)}
70%,100%{box-shadow:0 0 0 var(--space-16) color-mix(in srgb,var(--bf-fontos) 0%,transparent)}
}
@keyframes bf-emlek-csepp{
0%{opacity:0;transform:translateY(0) scale(.2)}
30%{opacity:1;transform:translateY(0) scale(1)}
40%{opacity:1;transform:translateY(2px) scale(.95,1.3)}
100%{opacity:0;transform:translateY(var(--space-48)) scale(.9,1.25)}
}
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-emlekezteto[data-megjelenik]:not([data-indul]) :is(.bf-emlek-matrica,.bf-emlek-naptar){opacity:0}
.bf-anim .bf-lap .bf-emlekezteto[data-indul]::after{animation:bf-emlek-feny 1400ms var(--ease-out) 300ms both}
.bf-anim .bf-lap .bf-emlekezteto[data-indul] .bf-emlek-matrica{
animation:bf-emlek-matrica-be 900ms cubic-bezier(.34,1.45,.64,1) 150ms both,bf-emlek-lebeg 5200ms ease-in-out 1200ms infinite;
}
.bf-anim .bf-lap .bf-emlekezteto[data-indul] .bf-emlek-naptar{animation:bf-emlek-lap 900ms var(--ease-out) 500ms both}
.bf-anim .bf-lap .bf-emlekezteto[data-indul] .bf-emlek-naptar-keret::before{animation:bf-emlek-pulzus 2400ms var(--ease-out) 1500ms infinite}
.bf-lap .bf-emlek-matrica .bf-viz-csepp{animation:bf-emlek-csepp 3300ms cubic-bezier(.5,0,.9,.4) 1700ms infinite}
.bf-lap .bf-emlek-matrica .bf-viz-csepp-2{animation-duration:3800ms;animation-delay:2600ms}
.bf-lap .bf-emlek-matrica .bf-viz-csepp-3{animation-duration:3500ms;animation-delay:3400ms}
.bf-anim .bf-lap .bf-emlekezteto[data-indul]:not([data-latszik]) .bf-emlek-matrica{animation-play-state:running,paused}
.bf-lap .bf-emlekezteto:not([data-latszik]) .bf-emlek-naptar-keret::before,
.bf-lap .bf-emlekezteto:not([data-latszik]) .bf-viz-csepp{animation-play-state:paused}
}
}
@layer components {
.bf-lap .bf-jogi{padding-block:var(--space-32) var(--space-48);border-top:1px solid var(--border)}
.bf-lap .bf-jogi-cim{margin:0;color:var(--text-primary)}
.bf-lap .bf-jogi-lista{display:grid;gap:var(--space-8);margin:var(--space-16) 0 0;padding-inline-start:var(--space-24);color:var(--text-secondary)}
.bf-lap .bf-jogi-lista li{padding-inline-start:var(--space-4)}
.bf-lap .bf-jogi-lista li:target{background:color-mix(in srgb,var(--primary) 14%,transparent);border-radius:var(--r-md)}
.bf-lap .bf-jogi-vissza{text-decoration:none}
.bf-lap .bf-jt{font-size:.72em;line-height:0;vertical-align:super}
.bf-lap .bf-jt a{padding-inline:var(--space-4) 0;text-decoration:none;font-weight:var(--type-ui-body-strong-weight)}
.bf-lap .bf-jogi :is(.bf-jogi-lista li,.bf-jogi-cim){scroll-margin-top:var(--space-96)}
}
@layer components {
.bf-lap .bf-ertek{
position:relative;isolation:isolate;overflow:hidden;
padding:var(--space-8) var(--space-16);
border-radius:var(--r-lg);
background:color-mix(in srgb,var(--primary) 10%,var(--card-bg));
container:bf-ertek / inline-size;
}
.bf-lap .bf-ertek::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--card-bg) 80%,transparent) 50%,transparent 70%);
background-size:250% 100%;background-repeat:no-repeat;
}
.bf-lap .bf-ertek-sor{align-items:baseline;gap:var(--space-8);padding-block:var(--space-8);border-bottom:0}
.bf-lap .bf-ertek-sor dt{
display:flex;align-items:baseline;gap:var(--space-8);flex:1;min-width:0;white-space:nowrap;
color:var(--text-primary);font-weight:var(--type-ui-body-strong-weight);
}
.bf-lap .bf-ertek-sor dt::after{
content:"";flex:1;min-width:var(--space-16);
border-bottom:2px dotted color-mix(in srgb,var(--primary) 45%,transparent);
}
.bf-lap .bf-ertek-sor dd{
margin:0;white-space:nowrap;text-align:right;
font-family:var(--font-heading);font-weight:var(--type-display-highlight-title-weight);
font-size:calc(var(--type-ui-body-size) * 1.35);letter-spacing:0;font-variant-numeric:tabular-nums lining-nums;
color:var(--text-primary);
}
.bf-lap .bf-ertek-brutto{
margin-right:var(--space-4);font-family:var(--font-body);font-size:var(--type-ui-caption-size);font-weight:400;
color:var(--text-secondary);
}
.bf-lap .bf-ertek-megj{color:var(--text-tertiary)}
@container bf-ertek (max-width: 19rem) {
.bf-lap .bf-ertek-sor{align-items:flex-end}
.bf-lap .bf-ertek-sor dd{display:grid;justify-items:end;font-size:calc(var(--type-ui-body-size) * 1.2);line-height:1.15}
.bf-lap .bf-ertek-brutto{margin:0;line-height:1.3}
}
@container bf-ertek (max-width: 16rem) {
.bf-lap .bf-ertek-sor dt::after{min-width:var(--space-4)}
.bf-lap .bf-ertek-sor dd{font-size:calc(var(--type-ui-body-size) * 1.1)}
}
}
@layer motion {
@keyframes bf-ertek-feny{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-120% 0}}
@keyframes bf-ertek-sor-be{from{opacity:0;transform:translateX(calc(-1 * var(--space-16)))}}
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-ertek::after{animation:bf-ertek-feny 1400ms var(--ease-out) 900ms both}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-ertek-sor{animation:bf-ertek-sor-be 600ms var(--ease-out) both}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-ertek-sor:nth-child(1){animation-delay:500ms}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-ertek-sor:nth-child(2){animation-delay:650ms}
.bf-anim .bf-lap .bf-ajandek[data-indul] .bf-ertek-sor:nth-child(3){animation-delay:800ms}
}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-ut-lista{gap:var(--space-32)}
.bf-lap .bf-ut-pont{padding-left:calc(var(--space-16) + var(--space-32))}
.bf-lap .bf-ut-sav{
position:absolute;left:0;top:0;bottom:calc(-1 * var(--space-32));
width:var(--space-16);height:auto;margin:0;border-radius:0;
}
.bf-lap .bf-ut-pont-1 .bf-ut-sav{border-radius:var(--chip-radius) var(--chip-radius) 0 0}
.bf-lap .bf-ut-pont-3 .bf-ut-sav{bottom:0;border-radius:0 0 var(--chip-radius) var(--chip-radius)}
.bf-lap .bf-ut-sav-tolt{transform-origin:50% 0}
.bf-lap .bf-ut-pont-1 .bf-ut-sav-tolt{background-size:100% calc(var(--space-16) * 1.4142 * 2),auto}
.bf-lap .bf-ut-hatar{right:auto;left:50%;top:calc(var(--space-16) + var(--space-24));translate:-50% -50%}
.bf-lap .bf-ut-naptar{margin-top:0}
.bf-lap .bf-ut-ma::after{left:calc(var(--space-8) - 1px)}
}
}
@layer motion {
@keyframes bf-ut-csik-y{to{background-position:0 calc(var(--space-16) * 1.4142 * 2),0 0}}
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
.bf-anim .bf-lap .bf-ut[data-megjelenik]:not([data-indul]) .bf-ut-sav-tolt{transform:scaleY(0)}
.bf-anim .bf-lap .bf-ut[data-indul] .bf-ut-pont-1 .bf-ut-sav-tolt{animation-name:bf-ut-csik-y}
}
}
@layer components {
.bf-lap .bf-lebego{
--bf-lebego-sz:calc(var(--space-128) * 1.8);
position:fixed;left:0;top:50%;z-index:27;translate:0 -50%;pointer-events:none;visibility:hidden;
}
.bf-lap .bf-lebego[data-latszik]{visibility:visible}
.bf-lap .bf-lebego-tabla{
position:relative;margin-left:var(--space-16);inline-size:var(--bf-lebego-sz);pointer-events:auto;
translate:calc(-100% - var(--space-64)) 0;opacity:0;visibility:hidden;
filter:drop-shadow(0 var(--space-8) var(--space-16) color-mix(in srgb,var(--color-forest) 45%,transparent));
transition:translate 750ms cubic-bezier(.34,1.45,.64,1),opacity 300ms var(--ease-out),visibility 0s linear 750ms;
}
.bf-lap .bf-lebego[data-latszik]:not([data-csukva]) .bf-lebego-tabla{translate:0 0;opacity:1;visibility:visible;transition-delay:0s}
.bf-lap .bf-lebego[data-csukva] .bf-lebego-tabla{transition:translate 600ms cubic-bezier(.5,0,.75,0),opacity 400ms var(--ease-out) 200ms,visibility 0s linear 600ms}
.bf-lap .bf-lebego-link{display:block;color:var(--color-lime);text-decoration:none;border-radius:var(--r-lg)}
.bf-lap .bf-lebego-link:focus-visible{outline:3px solid var(--border-focus);outline-offset:var(--space-4)}
.bf-lap .bf-lebego-test{position:relative;display:block;transition:scale 300ms cubic-bezier(.34,1.56,.64,1),filter 300ms var(--ease-out)}
.bf-lap .bf-lebego-link:is(:hover,:focus-visible) .bf-lebego-test{scale:1.05;filter:brightness(1.08)}
.bf-lap .bf-lebego-kep{display:block;inline-size:100%;block-size:auto}
.bf-lap .bf-lebego-szoveg{
position:absolute;inset:7% 8% 40%;display:grid;place-content:center;justify-items:center;gap:var(--space-4);text-align:center;
}
.bf-lap .bf-lebego-felso{
font-family:var(--font-mono);font-size:var(--type-data-eyebrow-size);font-weight:var(--type-data-eyebrow-weight);
letter-spacing:.18em;text-transform:uppercase;line-height:1;color:color-mix(in srgb,var(--color-lime) 85%,transparent);
}
.bf-lap .bf-lebego-fo{
display:inline-flex;align-items:baseline;gap:var(--space-8);
font-family:var(--font-heading);font-weight:700;font-size:calc(var(--type-display-feature-title-size) * .92);line-height:1.05;
color:var(--color-lime);text-shadow:0 1px 0 color-mix(in srgb,var(--color-forest) 80%,transparent);
}
.bf-lap .bf-lebego-nyil{transition:translate 300ms var(--ease-out)}
.bf-lap .bf-lebego-link:is(:hover,:focus-visible) .bf-lebego-nyil{translate:var(--space-4) 0}
.bf-lap .bf-lebego-feny{
position:absolute;inset:2% 3% 37%;border-radius:var(--r-lg);pointer-events:none;opacity:0;mix-blend-mode:soft-light;
background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--color-stardust) 85%,transparent) 50%,transparent 70%);
background-size:250% 100%;background-repeat:no-repeat;
}
.bf-lap .bf-lebego .bf-viz-csepp{width:4%}
.bf-lap .bf-lebego-csepp-1{left:18.8%;top:76%}
.bf-lap .bf-lebego-csepp-2{left:39.7%;top:92%}
.bf-lap .bf-lebego-csepp-3{left:62.8%;top:79%}
.bf-lap .bf-lebego-csepp-4{left:83.1%;top:95%}
.bf-lap .bf-lebego-x{
position:absolute;right:calc(var(--space-8) * -1);top:calc(var(--space-8) * -1);z-index:2;
display:grid;place-items:center;inline-size:var(--space-32);aspect-ratio:1;padding:0;border-radius:50%;cursor:pointer;
background:var(--color-lime);color:var(--color-forest);border:2px solid var(--color-forest);
box-shadow:0 var(--space-4) var(--space-8) color-mix(in srgb,var(--color-forest) 40%,transparent);
transition:scale 200ms var(--ease-out),background-color 200ms var(--ease-out);
}
.bf-lap .bf-lebego-x::before{content:"";position:absolute;inset:calc(var(--space-8) * -1 + 2px);border-radius:50%}
.bf-lap .bf-lebego-x svg{inline-size:var(--space-16);block-size:var(--space-16);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.bf-lap .bf-lebego-x:is(:hover,:focus-visible){scale:1.12;background:var(--color-stardust)}
.bf-lap .bf-lebego-x:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
.bf-lap .bf-lebego-ful{
position:absolute;left:0;top:50%;translate:-110% -50%;visibility:hidden;pointer-events:auto;
display:grid;justify-items:center;gap:var(--space-8);
padding:var(--space-16) var(--space-8) var(--space-16) var(--space-8);min-inline-size:calc(var(--space-40) + var(--space-4));
border:1px solid color-mix(in srgb,var(--color-lime) 55%,transparent);border-left:0;
border-radius:0 var(--r-lg) var(--r-lg) 0;cursor:pointer;color:var(--color-lime);
background:linear-gradient(160deg,color-mix(in srgb,var(--color-forest) 82%,var(--color-fern)) 0%,var(--color-forest) 100%);
box-shadow:inset -1px 0 0 color-mix(in srgb,var(--color-lime) 30%,transparent),
var(--space-4) var(--space-8) var(--space-16) color-mix(in srgb,var(--color-forest) 40%,transparent);
transition:translate 500ms cubic-bezier(.34,1.45,.64,1),visibility 0s linear 500ms;
}
.bf-lap .bf-lebego[data-latszik][data-csukva] .bf-lebego-ful{translate:0 -50%;visibility:visible;transition-delay:300ms,0s}
.bf-lap .bf-lebego-ful-szoveg{
writing-mode:vertical-rl;rotate:180deg;font-family:var(--font-mono);font-size:var(--type-data-eyebrow-size);
font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.bf-lap .bf-lebego-ful-nyil{font-family:var(--font-heading);font-size:var(--type-display-feature-title-size);line-height:.8}
.bf-lap .bf-lebego-ful:is(:hover,:focus-visible){background:linear-gradient(160deg,color-mix(in srgb,var(--color-forest) 65%,var(--color-fern)) 0%,var(--color-forest) 100%)}
.bf-lap .bf-lebego-ful:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
.bf-lap .bf-lebego-ful-csepp{
position:absolute;left:50%;top:100%;width:var(--space-8);aspect-ratio:3 / 4;translate:-50% -2px;
border-radius:50% 50% 50% 50% / 62% 62% 40% 40%;
background:
radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--color-stardust) 95%,transparent) 0 14%,transparent 16%),
radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--color-skyblue) 65%,transparent),color-mix(in srgb,var(--color-skyblue) 22%,transparent) 70%);
}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-lap .bf-lebego{--bf-lebego-sz:calc(var(--space-128) + var(--space-40))}
.bf-lap .bf-lebego-tabla{margin-left:var(--space-8)}
.bf-lap .bf-lebego-fo{font-size:var(--type-ui-card-title-size)}
}
@media (max-width: 767px) {
.bf-lap .bf-lebego{top:auto;bottom:calc(var(--space-24) + env(safe-area-inset-bottom,0px));translate:none}
.bf-lap .bf-lebego-ful{top:auto;bottom:0;translate:-110% 0}
.bf-lap .bf-lebego[data-latszik][data-csukva] .bf-lebego-ful{translate:0 0}
}
@media (max-width: 640px) {
.bf-lap .bf-lebego{bottom:calc(var(--also-sav-h) + var(--space-16) + env(safe-area-inset-bottom,0px))}
}
}
@layer motion {
@keyframes bf-lebego-leb{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--space-8))}}
@keyframes bf-lebego-feny{0%{opacity:1;background-position:130% 0}24%,100%{opacity:1;background-position:-130% 0}}
@keyframes bf-lebego-csepp{
0%{opacity:0;transform:translateY(0) scale(.2)}
30%{opacity:1;transform:translateY(0) scale(1)}
40%{opacity:1;transform:translateY(2px) scale(.95,1.3)}
100%{opacity:0;transform:translateY(var(--space-64)) scale(.9,1.25)}
}
@keyframes bf-lebego-ful-int{0%,86%,100%{translate:0 0}90%{translate:var(--space-4) 0}94%{translate:0 0}97%{translate:2px 0}}
@media (prefers-reduced-motion: no-preference) {
.bf-lap .bf-lebego[data-latszik]:not([data-csukva]) .bf-lebego-test{animation:bf-lebego-leb 4600ms ease-in-out 900ms infinite}
.bf-lap .bf-lebego[data-latszik]:not([data-csukva]) .bf-lebego-feny{animation:bf-lebego-feny 5200ms var(--ease-out) 1100ms infinite}
.bf-lap .bf-lebego[data-latszik]:not([data-csukva]) .bf-viz-csepp{animation:bf-lebego-csepp 3200ms cubic-bezier(.5,0,.9,.4) 1200ms infinite}
.bf-lap .bf-lebego[data-latszik]:not([data-csukva]) .bf-lebego-csepp-2{animation-duration:3900ms;animation-delay:2000ms}
.bf-lap .bf-lebego[data-latszik]:not([data-csukva]) .bf-lebego-csepp-3{animation-duration:3500ms;animation-delay:2800ms}
.bf-lap .bf-lebego[data-latszik]:not([data-csukva]) .bf-lebego-csepp-4{animation-duration:4200ms;animation-delay:1600ms}
.bf-lap .bf-lebego[data-latszik][data-csukva] .bf-lebego-ful-szoveg{animation:bf-lebego-ful-int 7000ms var(--ease-out) 2000ms infinite}
}
@media (prefers-reduced-motion: reduce) {
.bf-lap :is(.bf-lebego-tabla,.bf-lebego-ful){transition:none}
}
}
@layer components {
.bf-lap .bf-osszevetes{
--bfo-res:var(--space-8);
--bfo-keret:2px;
--bfo-sugar:calc(var(--r-lg) + var(--bfo-res));
--bfo-termek-bg:var(--card-bg);
--bfo-elvalaszto:color-mix(in srgb,var(--table-border) 75%,transparent);
--bfo-cimke:calc(var(--space-96) + var(--space-8));
--bfo-kilog:var(--space-32);
}
.bf-lap .bf-osszevetes .akcio-osszevetes-fej{margin-bottom:0}
.bf-lap .bf-lapozo{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8) var(--space-16);
margin-top:var(--space-24);
}
.bf-lap .bf-lapozo[hidden]{display:none}
.bf-lap .bf-lapozo-jel{display:inline-flex;align-items:center;gap:var(--space-8);margin:0;color:var(--text-primary)}
.bf-lap .bf-lapozo-kez{
flex:none;width:var(--space-48);height:var(--space-24);overflow:visible;
fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.bf-lap .bf-lapozo-nyil{stroke:var(--text-secondary)}
.bf-lap .bf-lapozo-ujj{fill:var(--surface-muted)}
.bf-lap .bf-lapozo-gombok{
display:inline-flex;gap:var(--space-4);padding:var(--space-4);border-radius:var(--chip-radius);
background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--card-border),var(--shadow-1);
}
.bf-lap .bf-lapozo-gomb{
appearance:none;min-height:calc(var(--space-40) + var(--space-4));padding:0 var(--space-16);
border:0;border-radius:var(--chip-radius);background:transparent;color:var(--text-secondary);cursor:pointer;
font-weight:var(--type-ui-body-strong-weight);
transition:background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.bf-lap .bf-lapozo-gomb[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.bf-lap .bf-lapozo-gomb:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
.bf-lap .bf-gorgeto-keret{position:relative;margin-top:var(--space-24)}
.bf-lap .bf-gorgeto{
container:bfo / inline-size;
padding-top:var(--space-24);
scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--bfo-cimke);
overscroll-behavior-x:contain;scrollbar-width:thin;
}
.bf-lap .bf-osszevetes[data-kukucs] .bf-gorgeto{scroll-snap-type:none}
.bf-lap .bf-gorgeto-keret::after{
content:"";position:absolute;z-index:3;top:var(--space-24);right:0;bottom:0;width:var(--bfo-kilog);pointer-events:none;
background:linear-gradient(to right,transparent,var(--surface-muted));
opacity:0;transition:opacity var(--dur-ui) var(--ease-out);
}
.bf-lap .bf-osszevetes[data-gorgetheto]:not([data-vege]) .bf-gorgeto-keret::after{opacity:1}
.bf-lap .bf-gorgeto-keret::before{
content:"";position:absolute;z-index:3;top:var(--space-24);bottom:0;left:var(--bfo-cimke);width:var(--bfo-kilog);pointer-events:none;
background:linear-gradient(to right,var(--surface-muted),color-mix(in srgb,var(--surface-muted) 60%,transparent) 55%,transparent);
opacity:0;transition:opacity var(--dur-ui) var(--ease-out);
}
.bf-lap .bf-osszevetes[data-gorgetve] .bf-gorgeto-keret::before{opacity:1}
.bf-lap .compare-table.bf-osszevetes-tabla{
table-layout:fixed;border-collapse:separate;border-spacing:0;width:100%;min-width:0;margin:0;text-align:left;
}
.bf-lap .bf-osszevetes-tabla .bf-oszlop-cimke{width:24%}
.bf-lap .bf-osszevetes-tabla .bf-oszlop-termek{width:38%}
.bf-lap .compare-table.bf-osszevetes-tabla :where(th,td){
padding:var(--space-16);border:0;background:transparent;box-shadow:none;vertical-align:middle;text-align:left;
}
.bf-lap .compare-table.bf-osszevetes-tabla :where(thead th[scope="col"],tbody td){
border-inline:var(--bfo-res) solid transparent;background-color:var(--bfo-termek-bg);background-clip:padding-box;
transition:background-color var(--dur-ui) var(--ease-out);
}
.bf-lap .compare-table.bf-osszevetes-tabla tbody td{
color:var(--text-secondary);box-shadow:inset 0 -1px 0 var(--bfo-elvalaszto);
}
.bf-lap .compare-table.bf-osszevetes-tabla tbody th[scope="row"]{
padding-inline:0 var(--space-16);color:var(--text-primary);box-shadow:inset 0 -1px 0 var(--bfo-elvalaszto);
}
.bf-lap .compare-table.bf-osszevetes-tabla tbody tr:last-child > *{box-shadow:none}
.bf-lap .compare-table.bf-osszevetes-tabla thead th[scope="col"]{
position:relative;border-top:var(--bfo-res) solid transparent;border-radius:var(--bfo-sugar) var(--bfo-sugar) 0 0;
padding:calc(var(--space-32) + var(--space-8)) var(--space-16) var(--space-24);vertical-align:bottom;text-align:center;
box-shadow:inset 0 -1px 0 var(--bfo-elvalaszto);
}
.bf-lap .compare-table.bf-osszevetes-tabla tbody tr:last-child td{
border-bottom:var(--bfo-res) solid transparent;border-radius:0 0 var(--bfo-sugar) var(--bfo-sugar);
}
.bf-lap .bf-osszevetes .compare-colhead{gap:var(--space-16)}
.bf-lap .bf-osszevetes .akcio-osszevetes-termek{
display:block;width:auto;max-width:100%;height:calc(var(--space-96) + var(--space-16));margin-inline:auto;object-fit:contain;
filter:drop-shadow(0 var(--space-8) var(--space-8) color-mix(in srgb,var(--text-primary) 18%,transparent));
transition:translate 400ms var(--ease-out);
}
.bf-lap .bf-termeknev{
display:block;font-family:var(--font-heading);font-size:var(--type-ui-card-title-size);font-weight:700;line-height:1.25;
color:var(--text-primary);
}
.bf-lap .bf-termeknev-alcim{
display:block;margin-top:var(--space-4);font-family:var(--font-body);font-size:var(--type-ui-label-size);font-weight:400;
color:var(--text-secondary);
}
.bf-lap .compare-table.bf-osszevetes-tabla .bf-kiemelt-oszlop{
background-color:var(--bf-kiemelt-bg-2);color:var(--text-primary);font-weight:var(--type-ui-body-strong-weight);
box-shadow:inset var(--bfo-keret) 0 0 var(--primary),inset calc(-1 * var(--bfo-keret)) 0 0 var(--primary),inset 0 -1px 0 var(--bfo-elvalaszto);
}
.bf-lap .compare-table.bf-osszevetes-tabla thead th[scope="col"].bf-kiemelt-oszlop{
background-color:var(--bf-kiemelt-bg);
box-shadow:inset var(--bfo-keret) 0 0 var(--primary),inset calc(-1 * var(--bfo-keret)) 0 0 var(--primary),
inset 0 var(--bfo-keret) 0 var(--primary),inset 0 -1px 0 var(--bfo-elvalaszto);
}
.bf-lap .compare-table.bf-osszevetes-tabla tbody tr:last-child .bf-kiemelt-oszlop{
box-shadow:inset var(--bfo-keret) 0 0 var(--primary),inset calc(-1 * var(--bfo-keret)) 0 0 var(--primary),
inset 0 calc(-1 * var(--bfo-keret)) 0 var(--primary);
}
.bf-lap .bf-ajanljuk{
position:absolute;z-index:2;top:0;left:50%;translate:-50% -50%;
display:inline-flex;align-items:center;gap:var(--space-8);max-width:calc(100% - var(--space-16));white-space:nowrap;
padding:var(--space-8) var(--space-16);border-radius:var(--chip-radius);
background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-2);
}
.bf-lap .bf-ajanljuk-jel{flex:none;width:var(--space-16);height:var(--space-16);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bf-lap .bf-sorfej{display:grid;grid-template-columns:var(--space-40) minmax(0,1fr);align-items:center;column-gap:var(--space-16)}
.bf-lap .bf-sorfej::before{
content:"";grid-area:1 / 1;width:var(--space-40);aspect-ratio:1;border-radius:50%;
background:color-mix(in srgb,var(--primary) 22%,transparent);
transition:background-color var(--dur-ui) var(--ease-out);
}
.bf-lap .bf-sorikon{
grid-area:1 / 1;justify-self:center;width:calc(var(--space-24) - var(--space-4));height:calc(var(--space-24) - var(--space-4));aspect-ratio:1;
color:var(--text-primary);transition:background-color var(--dur-ui) var(--ease-out);
}
.bf-lap .bf-ikon-aram{-webkit-mask-image:url("../icon/ui-aram.svg?v=1");mask-image:url("../icon/ui-aram.svg?v=1")}
.bf-lap .bf-sorcimke{grid-area:1 / 2;font-weight:var(--type-ui-body-strong-weight)}
.bf-lap .compare-table.bf-osszevetes-tabla td.bf-osszevont{
text-align:center;color:var(--text-secondary);
background:
linear-gradient(to right,var(--bfo-elvalaszto) calc(50% - var(--bfo-res)),transparent 0 calc(50% + var(--bfo-res)),var(--bfo-elvalaszto) 0) bottom / 100% 1px no-repeat,
linear-gradient(to right,
var(--bf-kiemelt-bg-2) calc(50% - var(--bfo-res) - var(--bfo-keret)),
var(--primary) 0 calc(50% - var(--bfo-res)),
transparent 0 calc(50% + var(--bfo-res)),
var(--bfo-termek-bg) 0);
background-clip:padding-box;
box-shadow:inset var(--bfo-keret) 0 0 var(--primary);
}
.bf-lap .bf-hid{
position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-4);
max-width:min(100%,calc(var(--space-128) * 4));padding:var(--space-8) var(--space-24);
border-radius:var(--r-lg);background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--card-border),var(--shadow-1);
}
.bf-lap .bf-hid-cimke{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--text-primary)}
.bf-lap .bf-hid-cimke::before,
.bf-lap .bf-hid-cimke::after{content:"";width:var(--space-16);height:2px;border-radius:1px;background:var(--primary)}
.bf-lap .compare-table.bf-osszevetes-tabla tfoot td{padding:var(--space-24) 0 0}
.bf-lap .compare-table.bf-osszevetes-tabla td.bf-tabla-gomb{text-align:left}
.bf-lap .bf-tabla-gomb-hely{display:block;width:50%;text-align:center}
}
@layer responsive {
@media (hover: hover) and (pointer: fine) {
.bf-lap .compare-table.bf-osszevetes-tabla tbody tr:hover td:not(.bf-osszevont,.bf-kiemelt-oszlop){background-color:color-mix(in srgb,var(--primary) 7%,var(--bfo-termek-bg))}
.bf-lap .compare-table.bf-osszevetes-tabla tbody tr:hover td.bf-kiemelt-oszlop{background-color:var(--bf-kiemelt-bg)}
.bf-lap .bf-osszevetes tbody tr:hover .bf-sorfej::before{background-color:var(--primary)}
.bf-lap .bf-osszevetes tbody tr:hover .bf-sorikon{background-color:var(--on-primary)}
.bf-lap .bf-osszevetes thead th[scope="col"]:hover .akcio-osszevetes-termek{translate:0 calc(-1 * var(--space-4))}
}
@container bfo (max-width: 56rem) {
.bf-lap .bf-ajanljuk-hosszu{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@container bfo (max-width: 37.49rem) {
.bf-lap .compare-table.bf-osszevetes-tabla{width:calc(var(--bfo-cimke) + 2 * (100cqw - var(--bfo-cimke) - var(--bfo-kilog)));min-width:0}
.bf-lap .bf-osszevetes-tabla .bf-oszlop-cimke{width:var(--bfo-cimke)}
.bf-lap .bf-osszevetes-tabla .bf-oszlop-termek{width:calc(100cqw - var(--bfo-cimke) - var(--bfo-kilog))}
.bf-lap .compare-table.bf-osszevetes-tabla :is(.bf-sarok,tbody th[scope="row"]){
position:sticky;left:0;z-index:3;background-color:var(--surface-muted);padding-right:var(--space-8);
}
.bf-lap .compare-table.bf-osszevetes-tabla thead .bf-sarok{box-shadow:0 calc(-1 * var(--space-24)) 0 var(--surface-muted)}
.bf-lap .bf-tabla-gomb-hely{position:sticky;left:var(--bfo-cimke);width:calc(100cqw - var(--bfo-cimke) - var(--bfo-kilog));padding-inline:var(--bfo-kilog)}
.bf-lap .compare-table.bf-osszevetes-tabla thead th[scope="col"]{scroll-snap-align:start}
.bf-lap .compare-table.bf-osszevetes-tabla tbody td{padding-inline:var(--space-16)}
.bf-lap .bf-sorfej{grid-template-columns:minmax(0,1fr);row-gap:var(--space-8);justify-items:start}
.bf-lap .bf-sorfej::before{width:var(--space-32)}
.bf-lap .bf-sorikon{width:var(--space-16);height:var(--space-16);justify-self:start;margin-left:var(--space-8)}
.bf-lap .bf-sorcimke{grid-area:2 / 1}
.bf-lap .bf-hid{
position:sticky;left:calc(var(--bfo-cimke) + var(--bfo-res) + var(--space-8));display:flex;
width:calc(100cqw - var(--bfo-cimke) - var(--bfo-kilog) - 2 * var(--bfo-res) - 2 * var(--space-8));max-width:none;
padding-inline:var(--space-16);
}
.bf-lap .compare-table.bf-osszevetes-tabla td.bf-osszevont{text-align:left;padding-inline:var(--space-8)}
.bf-lap .bf-hid-cimke::before,
.bf-lap .bf-hid-cimke::after{display:none}
.bf-lap .akcio-osszevetes-termek{height:var(--space-96)}
}
@media (max-width: 640px) {
.bf-lap .bf-osszevetes{--bfo-cimke:calc(var(--panel-padding) + var(--space-96) - var(--space-16))}
.bf-lap .bf-gorgeto-keret{margin-inline:calc(-1 * var(--panel-padding))}
.bf-lap .compare-table.bf-osszevetes-tabla :is(.bf-sarok,tbody th[scope="row"]){padding-left:var(--panel-padding)}
.bf-lap .bf-lapozo-gombok{flex:1 1 auto}
.bf-lap .bf-lapozo-gomb{flex:1 1 0}
}
}
@layer motion {
@keyframes bfo-be{from{opacity:0;transform:translateY(var(--space-16))}to{opacity:1;transform:none}}
@keyframes bfo-ful{0%{opacity:0;scale:.5}65%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
@keyframes bfo-dobban{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 60%,transparent)}100%{box-shadow:0 0 0 var(--space-16) transparent}}
@keyframes bfo-kez{0%,100%{translate:0 0}30%{translate:calc(-1 * var(--space-8)) 0}70%{translate:var(--space-8) 0}}
@media (prefers-reduced-motion: no-preference) {
.bf-anim .bf-lap .bf-osszevetes[data-megjelenik]:not([data-indul]) :is(thead th[scope="col"],tbody tr > *,.bf-ajanljuk){opacity:0}
.bf-anim .bf-lap .bf-osszevetes[data-indul] thead th[scope="col"]{animation:bfo-be 600ms var(--ease-out) both}
.bf-anim .bf-lap .bf-osszevetes[data-indul] thead th[scope="col"] + th{animation-delay:120ms}
.bf-anim .bf-lap .bf-osszevetes[data-indul] tbody tr > *{animation:bfo-be 500ms var(--ease-out) both}
.bf-anim .bf-lap .bf-osszevetes[data-indul] tbody tr:nth-child(1) > *{animation-delay:260ms}
.bf-anim .bf-lap .bf-osszevetes[data-indul] tbody tr:nth-child(2) > *{animation-delay:350ms}
.bf-anim .bf-lap .bf-osszevetes[data-indul] tbody tr:nth-child(3) > *{animation-delay:440ms}
.bf-anim .bf-lap .bf-osszevetes[data-indul] tbody tr:nth-child(4) > *{animation-delay:530ms}
.bf-anim .bf-lap .bf-osszevetes[data-indul] tbody tr:nth-child(5) > *{animation-delay:620ms}
.bf-anim .bf-lap .bf-osszevetes[data-indul] tbody tr:nth-child(6) > *{animation-delay:710ms}
.bf-anim .bf-lap .bf-osszevetes[data-indul] .bf-ajanljuk{animation:bfo-ful 560ms cubic-bezier(.34,1.56,.64,1) 650ms both}
.bf-anim .bf-lap .bf-osszevetes[data-indul] .bf-tabla-gomb .btn{animation:bfo-dobban 1100ms var(--ease-out) 1300ms 2}
.bf-anim .bf-lap .bf-osszevetes[data-indul] .bf-lapozo-ujj{animation:bfo-kez 1400ms ease-in-out 500ms 3}
}
@media (prefers-reduced-motion: reduce) {
.bf-lap .bf-osszevetes :is(.bf-lapozo-gomb,.akcio-osszevetes-termek),
.bf-lap .bf-osszevetes .bf-sorfej::before,
.bf-lap .bf-osszevetes .bf-gorgeto-keret::before,
.bf-lap .bf-osszevetes .bf-gorgeto-keret::after{transition:none}
}
}
@layer components {
@media (min-width: 1025px) {
.bf-lap .bf-ut-pont{
display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto auto 1fr;
column-gap:var(--space-16);row-gap:var(--space-8);align-content:start;
}
.bf-lap .bf-ut-sav{grid-column:1 / -1;margin-right:calc(-1 * var(--space-4))}
.bf-lap .bf-ut-hatar{right:var(--space-8)}
.bf-lap .bf-ut-hatar::after{
content:"";position:absolute;left:50%;top:calc(100% + var(--space-4));width:2px;height:calc(var(--space-16) + var(--space-4));translate:-50% 0;
background:color-mix(in srgb,var(--primary) 45%,transparent);
}
.bf-lap .bf-ut-naptar{
grid-column:2;grid-row:2 / -1;align-self:start;
width:calc(var(--space-64) + var(--space-16));min-width:0;margin:var(--space-16) calc(-1 * var(--space-24)) 0 0;
}
.bf-lap .bf-ut-pont > :is(p,h3){grid-column:1}
.bf-lap .bf-ut-pont > .bf-ut-szakasz{margin-top:var(--space-16)}
}
}