.jatek-mono, .jcimke, .kepszalag__szam, .adat__cimke, .foglalo__cimke { font-family: "Courier New", ui-monospace, Menlo, Consolas, monospace; }

.jhero { position: relative; isolation: isolate; overflow: hidden; min-height: max(640px, 92svh); display: flex; background: #050608; }
.jhero__media { position: absolute; inset: -6% 0 0; z-index: -2; transform: translate3d(0, calc(var(--hp, 0) * 18%), 0) scale(calc(1 + var(--hp, 0) * .06)); will-change: transform; }
.jhero__video, .jhero__kep { width: 100%; height: 100%; object-fit: cover; display: block; object-position: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--fz, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); }
.jhero__kep { animation: jkenburns 22s ease-out both; }
@keyframes jkenburns { from { transform: scale(calc(var(--fz, 1) * 1.12)); } to { transform: scale(var(--fz, 1)); } }
.jhero__arnyek { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(9, 12, 15, .82) 22%, rgba(9, 12, 15, .25) 55%, rgba(9, 12, 15, .55) 100%),
    linear-gradient(90deg, rgba(5, 6, 8, .85) 0%, rgba(5, 6, 8, .35) 55%, rgba(5, 6, 8, 0) 100%);
}
.jhero__inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--header-h) + 60px); padding-bottom: 150px; }
.jhero .breadcrumb { --bs-breadcrumb-margin-bottom: 22px; }
.jhero__ora { position: absolute; z-index: 1; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: 190px; }
.jhero__ora .ugy-ora { margin: 0; }
@media (max-width: 991.98px) { .jhero__ora { display: none; } }
.jhero__cimkek { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.jcimke {
  display: inline-flex; align-items: center; gap: .55em; padding: .55em .95em; border-radius: 99px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); transition: transform .2s;
}
.jcimke:hover { transform: translateY(-1px); color: var(--accent-ink); }
.jcimke--halvany { background: rgba(9, 12, 15, .55); color: var(--text); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jcimke--halvany:hover { color: var(--accent); }
.jcimke--halvany .icon { color: var(--accent); }
.jhero__cim { font-size: clamp(3.2rem, 10vw, 7.6rem); line-height: .95; letter-spacing: -.005em; margin-bottom: .25em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); max-width: 14ch; }
.jhero__intro { max-width: 60ch; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #d4dade; margin-bottom: 1.6rem; }
.jhero__gyors { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.8rem; }
.jhero__gyors li {
  display: inline-flex; align-items: center; gap: .55em; padding: .6em 1em; border-radius: var(--radius);
  background: rgba(9, 12, 15, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 600 1.05rem/1 var(--font-head); letter-spacing: .04em;
}
.jhero__gyors li span { color: var(--muted); font-weight: 400; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.jhero__gyors .icon { color: var(--accent); }
.jhero__gyors .difficulty__lock { width: 17px; height: 17px; }
.jhero__gombok { display: flex; flex-wrap: wrap; gap: 12px; }
.jhero__db { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: .75rem; letter-spacing: 0; }

.kepszalag { position: relative; z-index: 2; margin-top: -96px; }
.kepszalag__sin {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 6px max(var(--gutter), (100vw - var(--container)) / 2) 18px; scroll-padding-inline: max(var(--gutter), (100vw - var(--container)) / 2);
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.kepszalag__sin::-webkit-scrollbar { display: none; }
.kepszalag__sin.is-huz { cursor: grabbing; scroll-snap-type: none; }
.kepszalag__elem {
  position: relative; flex: none; display: block; width: clamp(220px, 26vw, 330px); aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, .14); background: #000; scroll-snap-align: start;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9); transition: transform .35s var(--ease), border-color .3s;
}
.kepszalag__elem--nagy { width: clamp(280px, 40vw, 520px); aspect-ratio: 16 / 10; }
.kepszalag__elem img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: saturate(.85) brightness(.9); pointer-events: none; }
.kepszalag__elem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 8, .75), transparent 45%); pointer-events: none; }
.kepszalag__elem:hover { transform: translateY(-6px); border-color: rgba(255, 214, 35, .55); }
.kepszalag__elem:hover img { transform: scale(1.07); filter: saturate(1.05) brightness(1); }
.kepszalag__szam { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: #e8e2cf; }
.kepszalag__nagyito { position: absolute; right: 12px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(9, 12, 15, .6); color: var(--accent); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; }
.kepszalag__elem:hover .kepszalag__nagyito { opacity: 1; transform: none; }
.kepszalag__lepteto { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

.adatlap { padding: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 32px); }
.adatlap--kep-nelkul { padding-top: 0; margin-top: -60px; position: relative; z-index: 2; }
.adatlap__racs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
.adat {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px;
  background: linear-gradient(165deg, #18202a 0%, #10151b 100%); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition-delay: calc(var(--n, 0) * 70ms);
}
.adat::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 46px; background: var(--accent); transition: width .9s var(--ease) calc(var(--n, 0) * 70ms + .2s); }
.adat.is-visible::before { width: 100%; }
.adat__ikon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 12px; background: rgba(255, 214, 35, .09); color: var(--accent); font-size: 1.35rem; }
.adat__cimke { font-size: .7rem; font-weight: 700; letter-spacing: clamp(.06em, .5vw, .18em); text-transform: uppercase; color: var(--muted); }
.adat__ertek { font: 600 clamp(1.45rem, 2.2vw, 1.85rem)/1.1 var(--font-head); color: var(--text); overflow-wrap: anywhere; }
.adat__megj { font-size: .88rem; color: var(--muted); }
a.adat__megj { color: var(--accent); display: inline-flex; align-items: center; gap: .35em; }
.adat__lakatok { display: inline-flex; gap: 4px; padding: 4px 0; }
.adat__lakat { width: 24px; height: 24px; color: rgba(255, 255, 255, .16); transition: color .4s, filter .4s; transition-delay: calc(var(--l) * 160ms + .3s); }
.adat.is-visible .adat__lakat.is-on, .no-js .adat__lakat.is-on { color: var(--accent); filter: drop-shadow(0 0 6px rgba(255, 214, 35, .55)); }

.jtartalom { padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 8vw, 100px); }
.foglalo {
  position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 18px; padding: 28px;
  border-radius: 14px; border: 1px solid rgba(255, 214, 35, .28);
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 214, 35, .1), transparent 70%), linear-gradient(180deg, #141b23, #0d1116);
  box-shadow: var(--shadow);
}
.foglalo__cimke { display: inline-flex; align-items: center; gap: .55em; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.foglalo__ar { font: 600 2.7rem/1 var(--font-head); color: var(--text); }
.foglalo__ar span { font-size: 1rem; color: var(--muted); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.foglalo__ar small { font-size: .95rem; color: var(--muted); font-weight: 400; }
.foglalo__lista { list-style: none; display: grid; gap: 10px; padding: 16px 0; border-block: 1px solid var(--line); }
.foglalo__lista li { display: flex; align-items: center; gap: .7em; color: #cfd5da; }
.foglalo__lista .icon { color: var(--accent); font-size: 1.15rem; }
.foglalo__lista a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 214, 35, .5); }
.foglalo__kontakt { display: grid; gap: 8px; font-size: .9rem; color: var(--muted); }
.foglalo__kontakt a { display: inline-flex; align-items: center; gap: .6em; transition: color .2s; }
.foglalo__kontakt a:hover { color: var(--accent); }

.jvideo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.jvideo iframe { border: 0; }

.mobilsav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(9, 12, 15, .94);
  border-top: 1px solid rgba(255, 214, 35, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.mobilsav.is-on { transform: none; }
.mobilsav__szoveg { display: grid; line-height: 1.2; min-width: 0; }
.mobilsav__szoveg strong { font: 600 1.05rem/1.2 var(--font-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobilsav__szoveg span { font-size: .8rem; color: var(--muted); }
@media (max-width: 991.98px) { body:has(.mobilsav) .footer { padding-bottom: 76px; } }

@media (prefers-reduced-motion: reduce) {
  .jhero__kep { animation: none; }
  .jhero__media { transform: none; }
  .adat::before { width: 100%; }
  .adat__lakat.is-on { color: var(--accent); }
}

.gyik-hero, .gyik {
  --tinta: #17140c;
}


.gyik-kereso {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; max-width: 680px; padding: 18px 24px 20px;
  color: var(--tinta); transform: rotate(-.6deg); transition: transform .3s var(--ease), filter .3s;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .7));
}
.gyik-kereso::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/site/cetli-3.webp") 30% 60% / 900px auto, #e3bd25;
  clip-path: polygon(0 4%, 18% 0, 47% 3%, 81% 0, 100% 5%, 99.4% 52%, 100% 96%, 63% 100%, 31% 97%, 2% 100%, .6% 48%);
}
.gyik-kereso::after {
  content: ""; position: absolute; top: -12px; left: -16px; width: 74px; height: 26px; z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, .06));
  background-color: rgba(214, 206, 180, .42); transform: rotate(-24deg);
  clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 100%, 2% 94%, 0 70%, 4% 40%);
}
.gyik-kereso:focus-within { transform: rotate(0deg) translateY(-3px); filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .75)); }
.gyik-kereso__cimke { display: inline-flex; align-items: center; gap: 8px; font: 700 .86rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.gyik-kereso__cimke .icon { font-size: 1.15rem; }
.gyik-kereso__mezo {
  display: flex; align-items: stretch; min-height: 58px; border-radius: 6px; overflow: hidden;
  background: #fffdf4; box-shadow: 0 0 0 2px var(--tinta), inset 0 3px 6px rgba(23, 20, 12, .18);
  transition: box-shadow .2s;
}
.gyik-kereso:focus-within .gyik-kereso__mezo { box-shadow: 0 0 0 3px var(--piros), inset 0 3px 6px rgba(23, 20, 12, .18); }
.gyik-kereso input {
  flex: 1; min-width: 0; padding: 0 18px; border: 0; border-radius: 0; outline: none;
  background: none; color: var(--tinta); font: 500 1.15rem/1 var(--font-body); caret-color: var(--piros);
}
.gyik-kereso input::placeholder { color: rgba(23, 20, 12, .55); transition: opacity .25s; }
.gyik-kereso input.is-valt::placeholder { opacity: 0; }
.gyik-kereso input::-webkit-search-cancel-button { filter: grayscale(1) brightness(.3); cursor: pointer; }
.gyik-kereso__gomb {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border: 0; cursor: pointer;
  background: var(--tinta); color: var(--accent); font: 600 1rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.gyik-kereso__gomb .icon { width: 1.2em; height: 1.2em; }
.gyik-kereso__gomb:hover, .gyik-kereso__gomb:focus-visible { background: var(--piros); color: #fff; }
.gyik-nepszeru { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 680px; margin: 18px 0 0; font: 700 .72rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gyik-nepszeru > span { margin-right: 4px; }
.gyik-nepszeru__cimke {
  position: relative; padding: .55em 1.1em .55em 1.7em; border: 0; cursor: pointer; color: var(--text); background: #1d252d;
  font: 600 .82rem/1.1 var(--font-head); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  transition: background .2s, color .2s, transform .25s var(--ease);
}
.gyik-nepszeru__cimke::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #090c0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.gyik-nepszeru__cimke:hover, .gyik-nepszeru__cimke:focus-visible { background: var(--accent); color: var(--accent-ink); transform: translateY(-2px) rotate(-1.5deg); }

.gyik { padding: 0 0 clamp(56px, 7vw, 96px); }
.gyik-sav {
  position: sticky; top: var(--header-h); z-index: 5; margin-bottom: clamp(30px, 4vw, 48px);
  background: linear-gradient(rgba(9, 12, 15, .5), rgba(9, 12, 15, .96) 40%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 4px solid #e3bd25; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .8);
}
.gyik-sav__sor { position: relative; display: flex; align-items: flex-end; overflow-x: auto; scrollbar-width: none; padding-top: 18px; }
.gyik-sav__sor::-webkit-scrollbar { display: none; }
.gyik-sav__elem {
  position: relative; flex: none; display: grid; gap: 5px; margin-right: -10px; padding: 11px 30px 10px 24px;
  color: var(--muted); transform: translateY(5px);
  background: linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(#232a32, #181d23);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  transition: transform .25s var(--ease), color .2s;
}
.gyik-sav__elem:nth-child(even) { background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(#1f252c, #15191f); }
.gyik-sav__elem:hover { color: var(--text); transform: translateY(1px); }
.gyik-sav__elem:focus-visible { outline: none; color: var(--accent); text-decoration: underline; }
.gyik-sav__elem.is-active {
  z-index: 2; color: var(--tinta); transform: none; padding-bottom: 14px;
  background: url("../img/site/cetli-2.webp") 50% 20% / 520px auto, #e3bd25;
}
.gyik-sav__nr { font: 700 .66rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.gyik-sav__nev { font: 600 1rem/1.05 var(--font-head); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.gyik-sav__db { font: 400 .72rem/1 var(--mono); opacity: .75; }

.gyik-tartalom { max-width: 980px; }
.gyik-csoport + .gyik-csoport { margin-top: 48px; }
.gyik-csoport__nr { font: 700 .74rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.gyik-csoport__cim { font-size: clamp(1.8rem, 3.4vw, 2.6rem); text-transform: uppercase; margin-bottom: 24px; }
.gyik-lista {
  --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: 3px; --bs-accordion-inner-border-radius: 3px;
  --bs-accordion-btn-padding-x: 22px; --bs-accordion-btn-padding-y: 18px; --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--text); --bs-accordion-active-bg: transparent; --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 22px; --bs-accordion-body-padding-y: 0;
  display: grid; gap: 8px;
}
.gyik-lista .accordion-item {
  position: relative; border: 1px solid var(--line) !important; border-left: 4px solid var(--line-2) !important; border-radius: 3px !important; overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 40%), #10151a; transition: border-color .25s, background-color .25s;
}
.gyik-lista .accordion-item:has(.accordion-button:not(.collapsed)) { border-left-color: var(--accent) !important; background-color: #131920; }
.gyik-lista .accordion-button { gap: 18px; font: 500 1.14rem/1.35 var(--font-head); letter-spacing: .01em; border-radius: 0 !important; }
.gyik-lista .accordion-button:hover .gyik-kerdes__szoveg { color: var(--accent); }
.gyik-lista .accordion-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gyik-lista .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3acb5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-transform: rotate(45deg); margin-left: 18px;
}
.gyik-kerdes__szam { flex: none; width: 96px; font: 700 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .25s; }
.accordion-button:not(.collapsed) .gyik-kerdes__szam { color: var(--accent); }
.gyik-kerdes__szoveg { transition: color .2s; }
.gyik-kerdes__stempel {
  flex: none; margin-left: auto; padding: .38em .6em .32em; border: 2px solid currentColor; border-radius: 3px;
  font: 700 .74rem/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--piros);
  -webkit-mask: var(--kopott) 0 0 / 160px 80px; mask: var(--kopott) 0 0 / 160px 80px;
  opacity: 0; transform: rotate(-9deg) scale(1.9); transition: opacity .12s, transform .12s;
}
.accordion-button:not(.collapsed) .gyik-kerdes__stempel { opacity: .92; transform: rotate(-9deg) scale(1); transition: opacity .18s .12s, transform .28s .12s cubic-bezier(.3, 1.6, .5, 1); }
.gyik-lista .accordion-body { padding-bottom: 22px; padding-left: calc(22px + 96px + 18px); color: #c4ccd3; font-size: 1rem; }
.gyik-talalat { font: 700 .82rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.gyik-talalat strong { color: var(--accent); }
.gyik-ures { padding: 30px; border: 2px dashed var(--line-2); border-radius: 3px; font-family: var(--mono); color: var(--muted); text-align: center; }
@media (max-width: 575.98px) {
  .gyik-kereso { padding: 14px 16px 16px; }
  .gyik-kereso__cimke { font-size: .74rem; }
  .gyik-kereso input { font-size: 1.05rem; padding: 0 12px; }
  .gyik-kereso__gomb { padding: 0 14px; }
  .gyik-kereso__gomb span { display: none; }
  .gyik-sav__elem { padding: 9px 24px 8px 20px; }
  .gyik-lista .accordion-button { flex-wrap: wrap; row-gap: 8px; }
  .gyik-kerdes__szam { width: 100%; }
  .gyik-kerdes__szoveg { flex: 1; }
  .gyik-kerdes__stempel { display: none; }
  .gyik-lista .accordion-body { padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) { .gyik-kerdes__stempel { transition: none !important; } }
