/* ============================================================
   Lencsés Autószerviz — design system
   Irány: „becsületes műhely” — editorial-industrial.
   Paletta a valós fotókból: grafit, meleg törtfehér, jelzőborostyán.
   ============================================================ */

/* ---------- Betűtípus (self-hosted, latin + latin-ext a ő/ű-höz) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokenek ---------- */
:root {
  --ink: #191b1f;
  --ink-2: #22252b;
  --line-dark: #3a3e46;
  --paper: #f4f1ea;
  --paper-2: #eae6da;
  --card: #fffdf7;
  --amber: #f0a51e;
  --amber-deep: #7d5a00;
  --text: #232428;
  --muted: #5b584e;
  --text-inv: #f1eee6;
  --muted-inv: #b6b3a9;
  --hiba: #9d2f22;

  --font: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --w-display: 122%;
  --w-cimke: 106%;

  --meret-hero: clamp(2.2rem, 1rem + 4.2vw, 3.6rem);
  --meret-h1: clamp(2.1rem, 1.2rem + 4vw, 3.6rem);
  --meret-h2: clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem);
  --meret-h3: clamp(1.15rem, 1rem + .7vw, 1.4rem);

  --sav: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  --perem: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- Alap ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, ul, ol, table { margin-block: 0 1rem; }
h1, h2, h3, h4 { margin-block: 0 .6em; line-height: 1.08; font-weight: 800; letter-spacing: -.01em; }
strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -200vw;
  top: 0;
  z-index: 200;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  padding: .8em 1.4em;
  text-decoration: none;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------- Szerkezeti segédek ---------- */
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--perem); }
.wrap-szuk { max-width: 50rem; margin-inline: auto; padding-inline: var(--perem); }
.sav { padding-block: var(--sav); }
.sav-feher { background: var(--card); }
.sav-sotet { background: var(--ink); color: var(--text-inv); }

.display {
  font-stretch: var(--w-display);
  font-weight: 830;
  text-transform: uppercase;
  letter-spacing: -.012em;
  line-height: .97;
}
.cimke {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  font-stretch: var(--w-cimke);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--amber-deep);
  margin-block-end: 1.1rem;
}
.cimke::before {
  content: '';
  inline-size: 2rem;
  block-size: 3px;
  background: var(--amber);
}
.sav-sotet .cimke { color: var(--amber); }

.olom { font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 46rem; }
.sav-sotet .olom { color: var(--muted-inv); }

/* Veszélycsík-motívum — takarékosan */
.stripe {
  block-size: 8px;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 14px, var(--ink) 14px 28px);
}

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .85em 1.5em;
  font: inherit;
  font-weight: 750;
  font-stretch: 108%;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, translate .18s ease;
}
.btn-amber { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-amber:hover { background: #ffbe3d; border-color: #ffbe3d; translate: 0 -2px; }
.btn-korvonal { border-color: currentColor; background: transparent; color: inherit; }
.btn-korvonal:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); translate: 0 -2px; }
.sav-sotet .btn-korvonal:hover, .hero .btn-korvonal:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ikon { flex: none; }

/* ---------- Fejléc ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--text-inv);
  border-block-end: 1px solid var(--line-dark);
}
.header-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--perem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 4.25rem;
}
.wordmark {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
  padding-block: .55rem;
}
.wm-name {
  font-stretch: var(--w-display);
  font-weight: 830;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--text-inv);
}
.wm-sub {
  font-stretch: var(--w-cimke);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--amber);
  margin-block-start: .3em;
}
.site-nav { display: flex; align-items: center; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a:not(.btn) {
  display: inline-block;
  padding: .4em 0;
  text-decoration: none;
  font-weight: 640;
  font-size: .98rem;
  color: var(--text-inv);
  border-block-end: 2px solid transparent;
}
.nav-list a:not(.btn):hover { border-block-end-color: var(--amber); }
.nav-list a:not(.btn)[aria-current="page"] { border-block-end-color: var(--amber); color: var(--amber); }
.nav-call .btn { padding: .6em 1.1em; font-size: .95rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .6em;
  background: none;
  border: 2px solid var(--line-dark);
  color: var(--text-inv);
  font: inherit;
  font-weight: 700;
  padding: .45em .9em;
  cursor: pointer;
}
.nav-toggle-box { position: relative; inline-size: 20px; block-size: 14px; display: inline-block; }
.nav-toggle-bar, .nav-toggle-box::before, .nav-toggle-box::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  transition: translate .18s ease, rotate .18s ease, opacity .18s ease;
}
.nav-toggle-box::before { top: 0; }
.nav-toggle-bar { top: 6px; }
.nav-toggle-box::after { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box::before { translate: 0 6px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box::after { translate: 0 -6px; rotate: -45deg; }

@media (max-width: 56em) {
  .nav-toggle { display: inline-flex; }
  .nav-list {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-block-end: 4px solid var(--amber);
    padding: .5rem var(--perem) 1.25rem;
    display: none;
  }
  .nav-list.nyitva { display: flex; }
  .nav-list a:not(.btn) {
    display: block;
    padding: .85em 0;
    font-size: 1.15rem;
    border-block-start: 1px solid var(--line-dark);
    border-block-end: none;
  }
  .nav-list a:not(.btn)[aria-current="page"] { color: var(--amber); }
  .nav-call { margin-block-start: 1rem; }
  .nav-call .btn { inline-size: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--ink);
  color: var(--text-inv);
  overflow: clip;
}
.hero-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 5vw, 5.5rem) var(--perem) clamp(3rem, 2rem + 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--meret-hero);
  margin-block-end: .45em;
}
.hero h1 .amber { color: var(--amber); }
.hero-alcim { font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); color: var(--muted-inv); max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-block: 1.8rem 2.2rem; }
.hero-tenyek {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .95rem;
  color: var(--muted-inv);
}
.hero-tenyek strong { color: var(--text-inv); font-weight: 750; }
.hero-tenyek .csillag { color: var(--amber); }

.hero-kep { position: relative; justify-self: end; }
.hero-kep img {
  border: 3px solid var(--paper);
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: min(62vh, 470px);
}
.hero-kep::after {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 3px solid var(--amber);
  z-index: -1;
}
.hero-kep figcaption {
  margin-block-start: 1.1rem;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-stretch: var(--w-cimke);
  color: var(--muted-inv);
}

@media (max-width: 56em) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-kep { justify-self: start; margin-inline-start: 0; }
  .hero-kep img { max-block-size: 380px; }
}

/* Hero belépő animáció */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * > * { animation: felusz .7s cubic-bezier(.2,.7,.3,1) both; }
  .hero-inner .cimke { animation-delay: .05s; }
  .hero-inner h1 { animation-delay: .12s; }
  .hero-inner .hero-alcim { animation-delay: .22s; }
  .hero-inner .hero-cta { animation-delay: .3s; }
  .hero-inner .hero-tenyek { animation-delay: .38s; }
  .hero-kep { animation: felusz .8s .25s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes felusz {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Szekciófej ---------- */
.szekcio-fej { margin-block-end: clamp(2rem, 5vw, 3.25rem); }
.szekcio-fej h2 { font-size: var(--meret-h2); max-width: 20em; }
.szekcio-fej .olom { margin-block-start: .4rem; }

/* ---------- Tényeksáv (főoldal) ---------- */
.tenysor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.tenysor li { border-block-start: 3px solid var(--ink); padding-block-start: 1.1rem; }
.tenysor .teny-szam {
  display: block;
  font-stretch: var(--w-display);
  font-weight: 830;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  line-height: 1;
  margin-block-end: .35rem;
}
.tenysor .teny-szam .csillag { color: var(--amber); font-size: .72em; vertical-align: .08em; }
.tenysor p { margin: 0; color: var(--muted); font-size: .98rem; }
@media (max-width: 44em) { .tenysor { grid-template-columns: 1fr; } }

/* ---------- Szolgáltatáslista (számozott, editorial) ---------- */
.szolg-lista { list-style: none; margin: 0; padding: 0; border-block-end: 2px solid var(--ink); }
.szolg-lista li { border-block-start: 2px solid var(--ink); }
.szolg-sor {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(.75rem, 3vw, 2rem);
  padding-block: 1.35rem;
  text-decoration: none;
  transition: background-color .15s ease;
}
.szolg-sor:hover { background: var(--paper-2); }
.szolg-szam {
  font-stretch: var(--w-display);
  font-weight: 830;
  font-size: 1.6rem;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--amber-deep);
}
@supports not (-webkit-text-stroke: 1px black) { .szolg-szam { color: var(--amber-deep); } }
.szolg-nev {
  font-size: var(--meret-h3);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.szolg-sor:hover .szolg-nev { color: var(--amber-deep); }
.szolg-leiras { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .97rem; color: var(--muted); margin-block-start: .3rem; font-stretch: 100%; }
.szolg-nyil { font-size: 1.4rem; color: var(--amber-deep); transition: translate .15s ease; }
.szolg-sor:hover .szolg-nyil { translate: 6px 0; }
@media (max-width: 44em) {
  .szolg-sor { grid-template-columns: 3rem minmax(0, 1fr); }
  .szolg-nyil { display: none; }
}

/* ---------- Előtte/utána összehasonlító ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ba figure { margin: 0; position: relative; }
.ba img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ba figcaption {
  position: absolute;
  top: .7rem;
  background: var(--ink);
  color: var(--text-inv);
  font-size: .72rem;
  font-weight: 750;
  font-stretch: var(--w-cimke);
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: .35em .8em;
}
.ba-elotte figcaption { inset-inline-start: .7rem; }
.ba-utana figcaption { inset-inline-end: .7rem; background: var(--amber); color: var(--ink); }

/* JS-sel feljavítva: csúszkás mód */
.ba.ba-aktiv { position: relative; display: block; }
.ba.ba-aktiv figure { position: absolute; inset: 0; }
.ba.ba-aktiv .ba-elotte { position: relative; }
.ba.ba-aktiv .ba-utana { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba.ba-aktiv .ba-elotte figcaption { inset-inline-start: .7rem; }
.ba-csuszka {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: none;
}
.ba-fogantyu {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos, 50%);
  inline-size: 3px;
  background: var(--amber);
  translate: -50% 0;
  pointer-events: none;
}
.ba-fogantyu::after {
  content: '◂ ▸';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.05em;
  box-shadow: 0 2px 10px rgb(0 0 0 / .45);
}
.ba:has(.ba-csuszka:focus-visible) .ba-fogantyu::after { outline: 3px solid var(--paper); outline-offset: 2px; }

/* ---------- Galéria (fényszóró oldal) ---------- */
.ba-max { max-inline-size: 46rem; margin-inline: auto; }
.ba-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.ba-galeria > div { display: flex; flex-direction: column; gap: .6rem; }
.ba-galeria .ba-cim { font-weight: 700; font-size: .95rem; color: var(--muted-inv); margin: 0; }
.ba-teljes { grid-column: 1 / -1; inline-size: 100%; max-inline-size: 46rem; justify-self: center; }
@media (max-width: 56em) { .ba-galeria { grid-template-columns: 1fr; } .ba-galeria > div:not(.ba-teljes) { max-inline-size: 26rem; } }

.utana-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }
.utana-racs figure { margin: 0; }
.utana-racs img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- Vélemények ---------- */
.velemeny-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.velemeny {
  background: var(--card);
  border-block-start: 3px solid var(--amber);
  padding: 1.6rem 1.6rem 1.3rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgb(25 27 31 / .08), 0 10px 26px -18px rgb(25 27 31 / .3);
}
.sav-feher .velemeny { background: var(--paper); box-shadow: none; border: 1px solid var(--paper-2); border-block-start: 3px solid var(--amber); }
.velemeny blockquote { margin: 0 0 1rem; flex: 1; }
.velemeny blockquote p { margin: 0; font-size: 1.02rem; }
.velemeny blockquote p::before { content: '„'; }
.velemeny blockquote p::after { content: '”'; }
.velemeny figcaption { font-weight: 750; font-size: .92rem; }
.velemeny figcaption .csillagok { color: var(--amber-deep); letter-spacing: .1em; display: block; font-size: .8rem; margin-block-start: .2rem; }

.velemeny-kiemelt {
  background: var(--ink);
  color: var(--text-inv);
  border-block-start: 3px solid var(--amber);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin: 0;
}
.velemeny-kiemelt blockquote { margin: 0 0 1.2rem; }
.velemeny-kiemelt blockquote p { font-size: clamp(1.15rem, 1rem + 1vw, 1.45rem); line-height: 1.5; margin: 0; }
.velemeny-kiemelt blockquote p::before { content: '„'; color: var(--amber); }
.velemeny-kiemelt blockquote p::after { content: '”'; color: var(--amber); }
.velemeny-kiemelt figcaption { color: var(--muted-inv); font-weight: 700; }

.google-osszegzo { display: flex; align-items: center; gap: 1rem; margin-block-end: 2rem; }
.google-osszegzo .pontszam {
  font-stretch: var(--w-display);
  font-weight: 830;
  font-size: 3.2rem;
  line-height: 1;
}
.google-osszegzo .reszlet { font-size: .95rem; color: var(--muted); }
.sav-sotet .google-osszegzo .reszlet { color: var(--muted-inv); }
.google-osszegzo .csillagok { color: var(--amber); font-size: 1.1rem; letter-spacing: .12em; }

/* ---------- CTA sáv ---------- */
.cta-sav { background: var(--ink); color: var(--text-inv); }
.cta-sav .cta-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--perem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}
.cta-sav h2 { font-size: var(--meret-h2); margin-block-end: .3em; }
.cta-sav p { margin: 0; color: var(--muted-inv); }
.cta-gombok { display: flex; flex-wrap: wrap; gap: .9rem; }
@media (max-width: 56em) { .cta-sav .cta-inner { grid-template-columns: 1fr; } }

/* ---------- Aloldal-fej ---------- */
.oldal-fej { background: var(--ink); color: var(--text-inv); }
.oldal-fej .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }
.oldal-fej h1 { font-size: var(--meret-h1); max-width: 16em; }
/* Nagyon keskeny kijelzőn a hosszú display-címek (pl. AUTÓDIAGNOSZTIKA) kilógtak → kicsit kisebb betű, vízszintes görgetés nélkül */
@media (max-width: 28em) { .oldal-fej h1 { font-size: clamp(1.5rem, .5rem + 4.6vw, 2rem); hyphens: auto; } }
.oldal-fej .olom { color: var(--muted-inv); margin: 0; }
.morzsa { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; padding: 0; margin-block: 0 1.4rem; font-size: .85rem; color: var(--muted-inv); }
.morzsa a { color: inherit; }
.morzsa li + li::before { content: '/'; margin-inline-end: .5em; opacity: .5; }

/* ---------- Cikk-tartalom (szolgáltatás-aloldalak) ---------- */
.cikk h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem); margin-block-start: 2.2rem; }
.cikk ul { padding-inline-start: 1.2rem; }
.cikk li { margin-block-end: .35rem; }
.cikk li::marker { color: var(--amber-deep); }

.info-doboz {
  background: var(--paper-2);
  border-inline-start: 4px solid var(--amber);
  padding: 1.3rem 1.5rem;
  margin-block: 2rem;
}
.info-doboz p:last-child { margin: 0; }

.cikk-racs {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3.4fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 56em) { .cikk-racs { grid-template-columns: 1fr; } }

.oldalsav { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 5.5rem; }
.oldalsav-doboz { background: var(--card); border: 2px solid var(--ink); padding: 1.4rem 1.5rem; }
.oldalsav-doboz h2 { font-size: 1.05rem; text-transform: uppercase; font-stretch: 112%; letter-spacing: .04em; margin-block-end: .8rem; }
.oldalsav-doboz .btn { inline-size: 100%; margin-block-start: .6rem; }
.oldalsav-doboz p { font-size: .97rem; }
.oldalsav-lista { list-style: none; margin: 0; padding: 0; }
.oldalsav-lista li { border-block-start: 1px solid var(--paper-2); }
.oldalsav-lista li:first-child { border-block-start: none; }
.oldalsav-lista a { display: block; padding: .55em 0; text-decoration: none; font-weight: 640; font-size: .97rem; }
.oldalsav-lista a:hover { color: var(--amber-deep); }
.oldalsav-lista a[aria-current="page"] { color: var(--amber-deep); }
.oldalsav-lista a[aria-current="page"]::before { content: '▸ '; }

/* ---------- Keretezett kép világos háttéren ---------- */
.kep-keret { inline-size: fit-content; }
.kep-keret img { border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--amber); }
.kep-keret figcaption {
  margin-block-start: .9rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-stretch: var(--w-cimke);
  color: var(--muted);
}

/* ---------- Nyitvatartás táblázat ---------- */
.ora-tabla { border-collapse: collapse; inline-size: 100%; max-inline-size: 26rem; }
.ora-tabla caption { text-align: start; font-weight: 800; font-size: 1.05rem; margin-block-end: .6rem; }
.ora-tabla th, .ora-tabla td { text-align: start; padding: .55em .2em; border-block-end: 1px solid var(--paper-2); font-weight: 400; }
.ora-tabla th { font-weight: 700; }
.ora-tabla td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.ora-tabla .zarva td:last-child, .ora-tabla .zarva th { color: var(--muted); }
.sav-sotet .ora-tabla th, .sav-sotet .ora-tabla td { border-block-end-color: var(--line-dark); }
.sav-sotet .ora-tabla .zarva td:last-child, .sav-sotet .ora-tabla .zarva th { color: var(--muted-inv); }

/* ---------- Kapcsolat ---------- */
.kapcs-racs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 56em) { .kapcs-racs { grid-template-columns: 1fr; } }
.kapcs-adat { list-style: none; margin: 0 0 2rem; padding: 0; }
.kapcs-adat li { display: flex; gap: .9rem; align-items: baseline; padding-block: .7rem; border-block-end: 1px solid var(--paper-2); }
.kapcs-adat li > :last-child { min-inline-size: 0; overflow-wrap: anywhere; }
.kapcs-adat .kapcs-mi { flex: none; inline-size: 5.6rem; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .14em; font-stretch: var(--w-cimke); color: var(--amber-deep); }
.kapcs-adat a { font-weight: 700; }
.terkep { border: 3px solid var(--ink); }
.terkep iframe { display: block; inline-size: 100%; block-size: 24rem; border: 0; }

/* ---------- Űrlap ---------- */
.urlap { background: var(--card); border: 2px solid var(--ink); padding: clamp(1.5rem, 4vw, 2.25rem); }
.urlap h2 { font-size: 1.35rem; }
.mezo { margin-block-end: 1.15rem; }
.mezo label { display: block; font-weight: 700; font-size: .95rem; margin-block-end: .35rem; }
.mezo .opcionalis { font-weight: 400; color: var(--muted); font-size: .85rem; }
.mezo input, .mezo textarea {
  inline-size: 100%;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: .65em .8em;
}
.mezo input:focus-visible, .mezo textarea:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 1px; }
.mezo textarea { min-block-size: 8.5rem; resize: vertical; }
.mezo-hiba { display: none; color: var(--hiba); font-size: .9rem; font-weight: 700; margin-block-start: .35rem; }
.mezo.hibas input, .mezo.hibas textarea { border-color: var(--hiba); }
.mezo.hibas .mezo-hiba { display: block; }
.urlap-statusz { display: none; padding: 1rem 1.2rem; margin-block-end: 1.2rem; font-weight: 700; border: 2px solid; }
.urlap-statusz.siker { display: block; border-color: #2c6e31; color: #22591f; background: #eef4e9; }
.urlap-statusz.hiba { display: block; border-color: var(--hiba); color: var(--hiba); background: #f8ece9; }
.becsapos { position: absolute !important; inset-inline-start: -200vw !important; }

/* ---------- Lábléc ---------- */
.site-footer { background: var(--ink); color: var(--muted-inv); }
.footer-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(2.75rem, 6vw, 4rem) var(--perem) 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 56em) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36em) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand p { font-size: .95rem; }
.wordmark-footer { margin-block: 0 .8rem; }
.wordmark-footer .wm-name { font-size: 1.3rem; }
.footer-rating { color: var(--text-inv); font-weight: 700; }
.footer-rating .csillag { color: var(--amber); }
.footer-cim {
  font-size: .78rem;
  font-weight: 750;
  font-stretch: var(--w-cimke);
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--amber);
  margin-block-end: 1rem;
}
.footer-lista { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.footer-lista li { margin-block-end: .55rem; }
.footer-lista a { color: var(--text-inv); text-decoration-color: var(--line-dark); text-underline-offset: 3px; }
.footer-lista a:hover { color: var(--amber); }
.footer-ora li { display: flex; justify-content: space-between; gap: 1rem; max-inline-size: 16rem; }
.footer-ora span:last-child { color: var(--text-inv); font-variant-numeric: tabular-nums; }
.footer-akadaly { font-size: .88rem; margin-block-start: 1rem; padding-inline-start: .9rem; border-inline-start: 3px solid var(--amber); }
.footer-alj {
  max-width: 72rem;
  margin-inline: auto;
  padding: 1.4rem var(--perem) 2rem;
  border-block-start: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  font-size: .85rem;
}
.footer-alj p { margin: 0; }

/* ---------- 404 ---------- */
.hiba-oldal { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.hiba-oldal .hiba-kod {
  font-stretch: var(--w-display);
  font-weight: 830;
  font-size: clamp(5rem, 20vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px var(--amber);
  display: block;
}
@supports not (-webkit-text-stroke: 1px black) { .hiba-oldal .hiba-kod { color: var(--amber); } }
.hiba-oldal h1 { font-size: var(--meret-h2); margin-block: .3em .4em; }
.hiba-oldal .hiba-gombok { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem; margin-block-start: 1.8rem; }

/* ---------- GYIK — hívásszűrő réteg (details/summary, JS nélkül működik) ---------- */
.gyik-lista { margin: 0; padding: 0; border-block-end: 2px solid var(--ink); }
.gyik-elem { border-block-start: 2px solid var(--ink); }
.gyik-elem summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: 1.15rem;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  line-height: 1.3;
}
.gyik-elem summary::-webkit-details-marker { display: none; }
.gyik-elem summary::marker { content: ''; }
.gyik-elem summary:hover { color: var(--amber-deep); }
.gyik-jel {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 2px solid var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  transition: rotate .18s ease, background-color .18s ease;
}
.gyik-elem[open] .gyik-jel { background: var(--amber); rotate: 45deg; }
.gyik-valasz { max-width: 46rem; padding-block: 0 1.5rem; }
.gyik-valasz p { margin-block-end: .8rem; }
.gyik-valasz p:last-child { margin-block-end: 0; }
.gyik-valasz a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--amber); }
.gyik-valasz a:hover { color: var(--amber-deep); }

/* Kompakt változat a szolgáltatás-aloldalak mini-GYIK-jéhez */
.gyik-mini summary { font-size: 1.02rem; padding-block: .95rem; }
.gyik-mini .gyik-jel { inline-size: 1.7rem; block-size: 1.7rem; font-size: 1.1rem; }
.gyik-mini .gyik-valasz { padding-block-end: 1.2rem; font-size: .98rem; }

/* GYIK-út a CTA-sávokban: a telefon marad az első, ez a csendes második út */
.cta-sav .cta-halk { margin-block-start: .9rem; font-size: .95rem; }
.cta-sav .cta-halk a { color: var(--text-inv); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--amber); }
.cta-sav .cta-halk a:hover { color: var(--amber); }

/* ---------- Apróságok ---------- */
.kozep { text-align: center; }
.labjegyzet { font-size: .88rem; color: var(--muted); }
.sav-sotet .labjegyzet { color: var(--muted-inv); }
.tobb-link { font-weight: 750; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--amber); }
.tobb-link:hover { color: var(--amber-deep); }