/* Mignon Pub – Szeged. "C" verzió: sötét alap + a logó színei, tapadó ponyva-fejléc. */

:root {
  --alap: #141318;
  --alap-melyebb: #0D0C10;
  --sav: #1A1920;
  --kartya: #1E1D24;
  --kartya-vilagos: #232229;
  --vonal: #2C2A34;
  --keret: #4A4754;
  --tinta: #F5F2EC;
  --tinta-halvany: #A8A39B;
  --tinta-sotet: #14131A;

  --sarga: #FFD400;
  --ponyva: #D85321;
  --cakk: #BF4518;
  --fuzer: #FFE7A0;
  --kek: #2C6BF0;
  --kek-vilagos: #4D86FF;
  --narancs: #FF6A2B;

  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --szoveg: 'Nunito', system-ui, -apple-system, sans-serif;

  --fejlec-magassag: 138px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--fejlec-magassag) + 16px);
}

body {
  margin: 0;
  background: var(--alap);
  color: var(--tinta);
  font-family: var(--szoveg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

a { color: var(--kek-vilagos); text-decoration: none; }
a:hover { color: #8AB0FF; }
a:active { color: var(--sarga); }

/* Mobilon a böngésző kék/fekete koppintás-villanása helyett saját :active állapotok. */
a,
button { -webkit-tap-highlight-color: transparent; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--tinta);
}

h1 { font-size: clamp(38px, 4.3vw, 62px); letter-spacing: -0.015em; }
h2 { font-size: clamp(30px, 3.2vw, 46px); }
h3 { font-size: clamp(26px, 2.1vw, 30px); }

:focus-visible {
  outline: 3px solid var(--sarga);
  outline-offset: 3px;
  border-radius: 6px;
}

.hatar {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 72px;
}

.atugras {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 22px;
  background: var(--sarga);
  color: var(--tinta-sotet);
  font-weight: 800;
}
.atugras:focus { left: 12px; top: 12px; color: var(--tinta-sotet); }

.cimke {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--narancs);
}

.apro { font-size: 14px; color: var(--tinta-halvany); margin: 0; }
.sarga { color: var(--sarga); }

/* --- gombok ------------------------------------------------------------ */

.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.gomb--ponyva { background: var(--ponyva); color: #FFFFFF; }
.gomb--ponyva:hover { background: #E7642F; color: #FFFFFF; }

.gomb--sarga { background: var(--sarga); color: var(--tinta-sotet); }
.gomb--sarga:hover { background: #FFE04D; color: var(--tinta-sotet); }

.gomb--kontur { border: 2px solid var(--keret); color: var(--tinta); }
.gomb--kontur:hover { border-color: var(--tinta-halvany); color: var(--tinta); }

.gomb--feher-kontur { border: 2px solid rgba(255, 255, 255, 0.75); color: #FFFFFF; }
.gomb--feher-kontur:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

.gomb--ponyva:active { background: #B94514; color: #FFFFFF; }
.gomb--sarga:active { background: #E8C000; color: var(--tinta-sotet); }
.gomb--kontur:active { background: rgba(255, 255, 255, 0.08); color: var(--tinta); }
.gomb--feher-kontur:active { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

.ikongomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #3A3846;
  background: var(--kartya-vilagos);
  color: var(--tinta);
  cursor: pointer;
}
.ikongomb--sarga { border: none; background: var(--sarga); color: var(--tinta-sotet); }
.ikongomb:active { background: var(--sarga); border-color: var(--sarga); color: var(--tinta-sotet); }
.ikongomb--sarga:active { background: #E8C000; }

/* --- fejléc: homlokzat + ponyva, tapad -------------------------------- */

.fejlec {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* A homlokzatsáv maga is ponyva: az alap a ponyva színe, fölötte sötét fátyol, ami lefelé
   elfogy. Fent árnyékban van a fal (a logó betűi megmaradnak rajta), lent varrás nélkül
   folytatódik a ponyvalapban – ugyanaz a 60 px-es varrásosztás fut végig mindkettőn. */
.fejlec__homlokzat {
  /* A sáv ALAPJA sötét: a lap tetején a böngésző (iOS Safari) ezt a színt veszi át a
     saját fejlécéhez, ezért nem lehet itt piros. A ponyva színe rétegként jön rá. */
  background-color: var(--kartya);
  background-image:
    linear-gradient(
      180deg,
      rgba(216, 83, 33, 0) 0%,
      rgba(216, 83, 33, 0.1) 30%,
      rgba(216, 83, 33, 0.42) 60%,
      rgba(216, 83, 33, 0.76) 82%,
      rgba(216, 83, 33, 0.98) 100%
    ),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 58px, rgba(0, 0, 0, 0.14) 58px 60px);
}

.fejlec__sor {
  position: relative;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.fejlec__logo {
  position: absolute;
  left: 72px;
  top: 28px;
  z-index: 5;
  line-height: 0;
}
.fejlec__logo img {
  width: 400px;
  height: auto;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38));
}

.menu {
  display: flex;
  align-items: center;
  gap: 30px;
}
.menu a {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
}
.menu a:hover,
.menu a:active { color: var(--sarga); }
.menu .menu__tel { padding: 14px 24px; color: var(--tinta-sotet); }

.fejlec__mobilgombok { display: none; gap: 8px; align-items: center; }
.ikon-x { display: none; }

.ponyva {
  position: relative;
  pointer-events: none;
}

.ponyva__lap {
  position: relative;
  height: 30px;
  background-color: var(--ponyva);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0) 72%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 58px, rgba(0, 0, 0, 0.14) 58px 60px);
}

.ponyva__fuzer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 14px;
  background-image:
    radial-gradient(circle, rgba(255, 214, 120, 0.38) 0 6px, rgba(255, 214, 120, 0) 7px),
    radial-gradient(circle, var(--fuzer) 0 2.4px, rgba(255, 231, 160, 0) 3px);
  background-size: 30px 14px, 30px 14px;
  background-repeat: repeat-x, repeat-x;
}

.ponyva__cakk {
  height: 20px;
  background-image:
    radial-gradient(circle 15px at 15px 0, var(--cakk) 98%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(var(--cakk), var(--cakk));
  background-size: 30px 20px, 100% 4px;
  background-repeat: repeat-x, repeat-x;
}

/* --- hero -------------------------------------------------------------- */

.hero { padding: 40px 0 0; }

.hero__kartya {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 468px);
  min-height: 640px;
  border-radius: 44px;
  background: var(--kartya);
  border: 1px solid var(--vonal);
  overflow: hidden;
}

/* A videó a szöveg MÖGÖTT tölti ki a bal oszlopot, fátyollal az olvashatóságért. */
.hero__fo { position: relative; display: flex; flex-direction: column; min-height: 640px; }

.hero__szoveg {
  position: relative;
  z-index: 1;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  flex-grow: 1;
  text-shadow: 0 2px 14px rgba(8, 7, 10, 0.55);
}

.bevezeto {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--tinta-halvany);
  max-width: 470px;
}

.hero__gombok { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.jellemzok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-halvany);
}
.pontok { display: flex; gap: 10px; }
.pont { width: 13px; height: 13px; border-radius: 50%; display: block; }
.jellemzok__szoveg { margin-left: 8px; }

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--alap-melyebb);
}
.hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 13, 18, 0.93) 0%, rgba(14, 13, 18, 0.84) 42%, rgba(14, 13, 18, 0.46) 100%),
    linear-gradient(180deg, rgba(14, 13, 18, 0.5) 0%, rgba(14, 13, 18, 0) 38%);
}
.hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allapot {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--tinta-sotet);
  font-size: 14px;
  font-weight: 800;
}
.allapot:hover,
.allapot:active { background: var(--sarga); color: var(--tinta-sotet); }
.allapot svg { flex-shrink: 0; }

/* --- zenegép ----------------------------------------------------------- */

.hero__zene {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 34px 28px;
  border-left: 1px solid var(--vonal);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(216, 83, 33, 0.12), rgba(0, 0, 0, 0) 62%),
    var(--alap-melyebb);
}

.zenegep {
  --kijelzo: #33C5FF;
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 18px 18px 16px;
  border-radius: 190px 190px 26px 26px / 130px 130px 26px 26px;
  background: linear-gradient(180deg, #2b2830 0%, #15141b 44%, #0b0a0e 100%);
  border: 1px solid #413d4b;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), 0 24px 44px rgba(0, 0, 0, 0.55);
}

/* A szekrény piros neoncsöve. */
.zenegep::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 180px 180px 21px 21px / 124px 124px 21px 21px;
  border: 2px solid rgba(255, 68, 56, 0.85);
  box-shadow: 0 0 10px rgba(255, 68, 56, 0.5), inset 0 0 14px rgba(255, 68, 56, 0.3);
  pointer-events: none;
}

.zenegep__tato { position: relative; text-align: center; padding: 12px 10px 16px; }
.zenegep__marquee {
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 255, 255, 0.22);
}
.zenegep__alcim {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #FF7A66;
  text-shadow: 0 0 10px rgba(255, 68, 56, 0.7);
}

.zenegep__test { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 12px; }

.zenegep__kijelzo {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  border-radius: 12px;
  background: #04121A;
  border: 1px solid #14323F;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.9);
  font-family: 'Share Tech Mono', ui-monospace, 'Courier New', monospace;
  color: var(--kijelzo);
  text-shadow: 0 0 8px rgba(51, 197, 255, 0.5);
}
.zenegep__kijelzo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  opacity: 0.5;
}

.kijelzo__fejlec {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.75;
}
.kijelzo__cim { margin: 0 0 10px; font-size: 17px; line-height: 1.25; min-height: 42px; }
.kijelzo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 128px;
  overflow-y: auto;
  font-size: 13px;
  letter-spacing: 0.03em;
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 197, 255, 0.4) transparent;
}
.kijelzo__sor { display: flex; gap: 8px; padding: 3px 5px; border-radius: 4px; opacity: 0.7; }
.kijelzo__sor--kurzor { background: rgba(51, 197, 255, 0.18); opacity: 1; }
.kijelzo__sor--szol { color: var(--sarga); text-shadow: 0 0 8px rgba(255, 212, 0, 0.55); opacity: 1; }
.kijelzo__sor-kod { flex-shrink: 0; opacity: 0.8; }

.kijelzo__labl { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 12px; }
.kijelzo__sav {
  flex-grow: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(51, 197, 255, 0.18);
  overflow: hidden;
}
.kijelzo__sav span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--kijelzo);
  box-shadow: 0 0 8px rgba(51, 197, 255, 0.8);
}

.zenegep__oldalsav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  border-radius: 14px;
  background: linear-gradient(180deg, #8D2418, #C0392B 42%, #8D2418);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 14px rgba(255, 68, 56, 0.35);
}
.zenegep__cso {
  flex-grow: 1;
  width: 6px;
  border-radius: 3px;
  background: #FF8A78;
  box-shadow: 0 0 10px rgba(255, 68, 56, 0.9), 0 0 22px rgba(255, 68, 56, 0.45);
}

.zgomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #5B5768;
  background: radial-gradient(120% 120% at 50% 18%, #55505F, #201F26 72%);
  color: #EDE8DE;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.zgomb:hover { color: #FFFFFF; border-color: #7D7790; }
.zgomb:active { transform: translateY(1px); box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.7); }
.zgomb[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.zgomb[aria-disabled="true"]:active { transform: none; }

.zgomb--nyil {
  width: 40px;
  height: 40px;
  border-color: #1D8B52;
  background: radial-gradient(120% 120% at 50% 18%, #35D588, #12633B 72%);
  color: #EAFFF3;
}

/* „Választ": a nyilakkal kijelölt számot ez indítja – mint a valódi gépen. */
.zgomb--valaszt {
  width: 52px;
  height: 34px;
  border-radius: 10px;
  border-color: var(--sarga);
  background: radial-gradient(120% 140% at 50% 14%, #FFE873, #E2A600 74%);
  color: var(--tinta-sotet);
  font-family: var(--szoveg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zgomb--fo {
  width: 48px;
  height: 48px;
  border-color: var(--sarga);
  background: radial-gradient(120% 120% at 50% 18%, #FFE873, #E2A600 72%);
  color: var(--tinta-sotet);
}

/* A Spotify hivatalos lejátszója: a licenc feltétele, hogy látszódjon, ezért a
   szekrény „gépezete" lett belőle a kijelző alatt. */
.zenegep__spotify {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #0B0A0E;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  min-height: 80px;
}
.zenegep__spotify iframe { display: block; border: 0; }
.zenegep__spotify[hidden] { display: none; }

.zenegep__gombsor { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.zenegep .ikon-pause { display: none; }
.zenegep[data-szol="igen"] .ikon-pause { display: block; }
.zenegep[data-szol="igen"] .ikon-play { display: none; }

.zenegep__sugo { margin: 12px 0 0; text-align: center; font-size: 11px; color: #837E8C; }
.zenegep__perem {
  height: 10px;
  margin: 14px -18px -16px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, #8C8896, #3A3743);
}

@media (prefers-reduced-motion: reduce) {
  .zenegep::before,
  .zenegep__cso { box-shadow: none; }
}

/* --- történet ---------------------------------------------------------- */

.tortenet { padding: 92px 0; }

.tortenet__fej {
  display: flex;
  gap: 72px;
  align-items: flex-start;
  margin-bottom: 56px;
}

.jelveny { position: relative; width: 280px; height: 260px; flex-shrink: 0; }
.jelveny__hatso {
  position: absolute;
  left: 34px;
  top: 22px;
  width: 216px;
  height: 216px;
  border-radius: 50%;
  background: #2FA83B;
}
.jelveny__elso {
  position: absolute;
  left: 0;
  top: 0;
  width: 232px;
  height: 232px;
  border-radius: 50%;
  background: var(--sarga);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 62px;
  font-weight: 600;
  color: var(--tinta-sotet);
}

.tortenet__torzs { display: flex; flex-direction: column; gap: 22px; max-width: 800px; }
.tortenet__torzs p {
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: var(--tinta-halvany);
}
.tortenet__torzs .tortenet__alairas { font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--tinta); }

.adatok {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.adat {
  padding: 26px 28px;
  background: var(--kartya);
  border-radius: 26px;
  border-top: 8px solid var(--csik, var(--sarga));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adat__szam { font-family: var(--display); font-size: 36px; font-weight: 600; }
.adat__cimke { font-size: 14px; font-weight: 700; color: var(--tinta-halvany); }

/* --- nyitvatartás ------------------------------------------------------ */

.nyitva { padding: 92px 0; background: var(--sav); }
.nyitva h2 { margin-bottom: 40px; }

.nyitva__racs { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; }

.orak { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ora {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border-radius: 22px;
  background: var(--kartya-vilagos);
}
.ora--kiemelt { background: var(--sarga); color: var(--tinta-sotet); }
.ora__nap { font-size: 18px; font-weight: 700; }
.ora__ido {
  margin-left: auto;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ora--zarva { background: transparent; box-shadow: inset 0 0 0 1px var(--vonal); }
.ora--zarva .ora__nap,
.ora--zarva .ora__ido { color: var(--tinta-halvany); font-weight: 700; }
.ora--ma { box-shadow: inset 0 0 0 2px var(--narancs); }

.figyelem {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--kartya);
  border: 1px solid var(--vonal);
}
.figyelem svg { flex-shrink: 0; margin-top: 2px; color: var(--narancs); }
.figyelem p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta-halvany); }
.figyelem a { color: var(--kek-vilagos); font-weight: 700; }

.kapcsolat {
  padding: 40px;
  background: var(--kek);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  color: #FFFFFF;
}
.kapcsolat h3 { color: #FFFFFF; }
.kapcsolat__sorok { display: flex; flex-direction: column; gap: 18px; }
.kapcsolat__sor { display: flex; flex-direction: column; gap: 4px; }
.kapcsolat__cimke {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D6E3FF;
}
.kapcsolat address,
.kapcsolat a {
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.45;
  color: #FFFFFF;
}
.kapcsolat a:hover,
.kapcsolat a:active { color: var(--sarga); }
.kapcsolat__kozosseg .gomb--sarga:active { color: var(--tinta-sotet); }
.kapcsolat__kozosseg { display: flex; gap: 10px; margin-top: auto; }
.kapcsolat__kozosseg .gomb { flex: 1 1 0; }
.kapcsolat__kozosseg .gomb--sarga:hover { color: var(--tinta-sotet); }

/* --- térkép ------------------------------------------------------------ */

.terkep { position: relative; min-height: 780px; overflow: hidden; background: var(--sav); }
.terkep__rajz { position: absolute; inset: 0; width: 100%; height: 100%; }
.terkep__rajz--mobil { display: none; }

.terkep__fatyol {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 25, 32, 0.96) 0%, rgba(26, 25, 32, 0.78) 34%, rgba(26, 25, 32, 0.12) 56%, rgba(26, 25, 32, 0) 66%);
}

.terkep__tartalom { position: relative; padding-top: 132px; padding-bottom: 132px; }

.terkep__kartya {
  width: 470px;
  max-width: 100%;
  padding: 44px;
  background: var(--kartya);
  border: 1px solid var(--vonal);
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.terkep__kartya p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--tinta-halvany); }
.terkep__gombok { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* --- lábléc ------------------------------------------------------------ */

.lablec { background: var(--alap-melyebb); }
.szincsik { display: flex; height: 7px; }
.szincsik span { flex-grow: 1; }

.lablec__torzs {
  min-height: 185px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 52px;
  padding-bottom: 48px;
}
.lablec__bal { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.lablec__logo { width: 180px; height: auto; }
.lablec__menu { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.lablec__menu a { font-size: 14px; font-weight: 700; color: #E8E4DA; }
.lablec__menu a:hover,
.lablec__menu a:active { color: var(--sarga); }

.lablec__kozosseg { display: flex; align-items: center; gap: 10px; }
.lablec__kozosseg .ikongomb { color: #E8E4DA; }
.lablec__kozosseg .ikongomb:hover { background: var(--sarga); border-color: var(--sarga); color: var(--tinta-sotet); }

/* --- keskenyebb asztali / tablet --------------------------------------- */

@media (max-width: 1180px) {
  .hatar { padding: 0 40px; }
  .fejlec__logo { left: 40px; }
  .fejlec__logo img { width: 320px; }
  .hero__kartya { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
  .hero__szoveg { padding: 48px; }
  .tortenet__fej { gap: 40px; }
  .nyitva__racs { grid-template-columns: minmax(0, 1fr) 360px; }
  .kapcsolat { padding: 32px; }
}

@media (max-width: 980px) {
  .adatok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nyitva__racs { grid-template-columns: minmax(0, 1fr); }
  .tortenet__fej { flex-direction: column; align-items: flex-start; }
}

/* --- mobil ------------------------------------------------------------- */

@media (max-width: 860px) {
  :root { --fejlec-magassag: 104px; }

  body { font-size: 15px; }
  .hatar { padding: 0 20px; }

  /* A menü a teljes fejléc (homlokzat + ponyva) alá nyílik, nem a ponyva elé. */
  .fejlec__sor { position: static; min-height: 60px; padding-top: 0; padding-bottom: 0; }
  .fejlec__logo { left: 20px; top: 20px; }
  .fejlec__logo img { width: 210px; }

  .fejlec__mobilgombok { display: flex; }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 4;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px 20px 18px;
    background: var(--kartya);
    border-top: 1px solid var(--vonal);
  }
  .menu--nyitva { display: flex; }
  .menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 6px;
    font-size: 16px;
  }
  .menu .menu__tel { justify-content: center; margin-top: 8px; padding: 14px 24px; }

  .ponyva__lap { height: 24px; }
  .ponyva__fuzer { height: 12px; background-size: 26px 12px, 26px 12px; }
  .ponyva__cakk {
    height: 18px;
    background-size: 26px 18px, 100% 3px;
    background-image:
      radial-gradient(circle 13px at 13px 0, var(--cakk) 98%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(var(--cakk), var(--cakk));
  }

  .hero { padding-top: 24px; }
  .hero__kartya {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 32px;
    min-height: 0;
  }
  .hero__fo { min-height: 500px; }
  .hero__video::after {
    background:
      linear-gradient(180deg, rgba(14, 13, 18, 0.62) 0%, rgba(14, 13, 18, 0.8) 46%, rgba(14, 13, 18, 0.94) 100%);
  }
  .hero__szoveg { padding: 74px 24px 28px; gap: 14px; }
  .hero__zene {
    padding: 24px 20px 28px;
    border-left: none;
    border-top: 1px solid var(--vonal);
  }
  .zenegep { max-width: 340px; }
  .zenegep__marquee { font-size: 26px; }
  .kijelzo__lista { height: 112px; }
  .bevezeto { font-size: 15px; }
  .hero__gombok { flex-direction: column; align-items: stretch; }
  .hero__gombok .gomb { width: 100%; }
  .jellemzok { flex-wrap: wrap; gap: 8px; }
  .jellemzok__szoveg { margin-left: 0; flex-basis: 100%; }

  .allapot {
    top: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
    padding: 10px 15px;
    font-size: 12px;
    line-height: 1.35;
  }
  .figyelem { padding: 18px 20px; gap: 12px; }
  .figyelem p { font-size: 14px; }

  .tortenet { padding: 56px 0; }
  .tortenet__fej { gap: 22px; margin-bottom: 32px; }
  .jelveny { width: 150px; height: 130px; }
  .jelveny__hatso { left: 22px; top: 14px; width: 116px; height: 116px; }
  .jelveny__elso { width: 126px; height: 126px; font-size: 34px; }
  .tortenet__torzs p { font-size: 15px; }
  .adatok { gap: 12px; }
  .adat { padding: 18px 20px; border-radius: 20px; border-top-width: 6px; }
  .adat__szam { font-size: 27px; }
  .adat__cimke { font-size: 12px; }

  .nyitva { padding: 56px 0; }
  .nyitva h2 { margin-bottom: 24px; }
  .orak { gap: 8px; }
  .ora { padding: 17px 20px; border-radius: 18px; }
  .ora__nap, .ora__ido { font-size: 15px; }
  .kapcsolat { padding: 28px 24px; border-radius: 28px; gap: 20px; }
  .kapcsolat address, .kapcsolat a { font-size: 16px; }

  .terkep { min-height: 0; }
  .terkep__rajz--asztali { display: none; }
  .terkep__rajz--mobil { display: block; }
  .terkep__fatyol {
    background: linear-gradient(180deg, rgba(26, 25, 32, 0) 32%, rgba(26, 25, 32, 0.86) 56%, rgba(26, 25, 32, 0.98) 100%);
  }
  .terkep__tartalom { padding-top: 260px; padding-bottom: 22px; }
  .terkep__kartya { width: 100%; padding: 26px 24px; border-radius: 28px; gap: 14px; }
  .terkep__kartya p { font-size: 15px; }
  .terkep__gombok { flex-direction: column; align-items: stretch; }
  .terkep__gombok .gomb { width: 100%; }

  .kapcsolat__kozosseg { flex-direction: column; }
  .lablec__torzs {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .lablec__bal { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lablec__logo { width: 150px; }
  .lablec__menu { gap: 18px; }
  .lablec__menu a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}