/* =========================================================================
   Golden Strings – kiegészítések az eredeti dizájnhoz.
   Minden szabály a .gso-app hatókörön belül marad.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) TÉMA-PÁNCÉL
   A szülőtéma / Elementor globális resetjei ellen. Minden állapotra kiírva,
   mert az `a:hover` háttérszabály különben átüt.
   ------------------------------------------------------------------------- */
.gso-app,
.gso-app *,
.gso-app *::before,
.gso-app *::after {
  box-sizing: border-box;
}

.gso-app a,
.gso-app a:link,
.gso-app a:visited {
  background: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.gso-app a:hover,
.gso-app a:focus,
.gso-app a:active {
  background: none !important;
  text-decoration: none !important;
}

.gso-app .btn,
.gso-app .btn:link,
.gso-app .btn:visited,
.gso-app .btn:hover,
.gso-app .btn:focus,
.gso-app .btn:focus-visible,
.gso-app .btn:active {
  text-decoration: none !important;
  text-transform: none !important;
}

.gso-app .btn-green,
.gso-app .btn-green:link,
.gso-app .btn-green:visited,
.gso-app .btn-green:hover,
.gso-app .btn-green:focus,
.gso-app .btn-green:focus-visible,
.gso-app .btn-green:active {
  background: #A2D45E !important;
  background-color: #A2D45E !important;
  color: #0E0F0E !important;
  border: 0 !important;
}

.gso-app .btn-dark,
.gso-app .btn-dark:link,
.gso-app .btn-dark:visited,
.gso-app .btn-dark:focus,
.gso-app .btn-dark:focus-visible {
  background: #0E0F0E !important;
  color: #fff !important;
  border: 0 !important;
}

.gso-app .btn-dark:hover,
.gso-app .btn-dark:active {
  background: #000 !important;
  color: #fff !important;
}

.gso-app .btn-line,
.gso-app .btn-line:link,
.gso-app .btn-line:visited,
.gso-app .btn-line:focus,
.gso-app .btn-line:focus-visible {
  background: transparent !important;
  color: #0E0F0E !important;
}

.gso-app .btn-line:hover,
.gso-app .btn-line:active {
  background: #0E0F0E !important;
  color: #fff !important;
}

.gso-app button,
.gso-app input,
.gso-app textarea,
.gso-app select {
  font: inherit !important;
  color: inherit !important;
  border-radius: 0;
  text-transform: none !important;
}

.gso-app button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* WebKit a <button>-ra white-space: pre-t állít -> nem tördel a felirat.
   A Chromium `normal`-t használ, ezért ez csak Safariban / iPhone-on jön elő. */
.gso-app,
.gso-app * {
  white-space: normal;
}

/* Csak a rovid, gomb-szeru elemek maradnak egy sorban. A `.tag` es a `.cap`
   HOSSZU feliratot is tartalmaz ("Kert · Otthon · Épület — egy kézben"), azok
   nowrap-je 320-390 px-en kifeszitette az oldalt. */
.gso-app .btn,
.gso-app .chip,
.gso-app .lg,
.gso-app .reel-badge,
.gso-app .openflag {
  white-space: nowrap;
}

/* A .tag inline-flex + ::before vonal: tordelheto legyen, a vonal ne toresre. */
.gso-app .tag,
.gso-app .stag,
.gso-app .cap {
  flex-wrap: wrap;
  white-space: normal;
  overflow-wrap: break-word;
}

.gso-app .tag::before {
  flex: none;
}

.gso-app .mq-track,
.gso-app .mq-track span {
  white-space: nowrap;
}

/* Listajelölő eltüntetése (a téma visszateheti). */
.gso-app ul,
.gso-app ol {
  list-style: none !important;
}

.gso-app img {
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   2) UNICODE NYILAK HELYETT CSS-RAJZ
   A ↗ (U+2197) és a ▶ (U+25B6) sok rendszeren EMOJI-ként renderel: kék doboz
   lesz a nyílból. Ezért a glifákat kiszedtük a markupból, és itt rajzoljuk.
   ------------------------------------------------------------------------- */

/* Vízszintes nyíl (→) – .arw, .more span */
.gso-app .arw,
.gso-app .more span {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 10px;
  flex: none;
  vertical-align: middle;
}

.gso-app .arw::before,
.gso-app .more span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 1.6px;
  background: currentColor !important;
  transform: translateY(-50%);
}

.gso-app .arw::after,
.gso-app .more span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.6px solid currentColor !important;
  border-right: 1.6px solid currentColor !important;
  transform: translateY(-50%) rotate(45deg);
}

/* Átlós nyíl (↗) – .ix, .nw */
.gso-app .ix,
.gso-app .nw {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: none;
  vertical-align: middle;
  font-size: 0 !important;
  line-height: 0 !important;
}

.gso-app .ix::before,
.gso-app .nw::before {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 2px;
  width: 13px;
  height: 1.5px;
  background: currentColor !important;
  transform-origin: 0 50%;
  transform: rotate(-45deg);
}

.gso-app .ix::after,
.gso-app .nw::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor !important;
  border-right: 1.5px solid currentColor !important;
}

/* A .fcard sarokszáma (01, 02…) NEM nyíl – ott vissza kell adni a szöveget. */
.gso-app .fcard > .ix:not(:empty) {
  width: auto;
  height: auto;
  font-size: .68rem !important;
  line-height: 1 !important;
}

.gso-app .fcard > .ix:not(:empty)::before,
.gso-app .fcard > .ix:not(:empty)::after {
  content: none;
}

/* Lejátszás-háromszög (▶) a Reels jelvényben */
.gso-app .reel-badge::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 6px;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
   3) MOBIL MENÜ
   Az eredeti dizájn 980px alatt egyszerűen elrejtette a menüt és a gombot,
   így telefonon nem volt navigáció.
   ------------------------------------------------------------------------- */
.gso-app .gso-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 10px !important;
  cursor: pointer;
}

.gso-app .gso-burger:hover,
.gso-app .gso-burger:focus,
.gso-app .gso-burger:focus-visible,
.gso-app .gso-burger:active {
  background: rgba(14, 15, 14, .06) !important;
  color: #0E0F0E !important;
}

.gso-app .gso-burger-vonal,
.gso-app .gso-burger-vonal::before,
.gso-app .gso-burger-vonal::after {
  position: absolute;
  left: 50%;
  width: 21px;
  height: 2px;
  background: #0E0F0E !important;
  border-radius: 2px !important;
  transition: transform .3s cubic-bezier(.22, .9, .25, 1), opacity .2s;
}

.gso-app .gso-burger-vonal {
  top: 50%;
  transform: translate(-50%, -50%);
}

.gso-app .gso-burger-vonal::before,
.gso-app .gso-burger-vonal::after {
  content: "";
  left: 0;
}

.gso-app .gso-burger-vonal::before {
  top: -7px;
}

.gso-app .gso-burger-vonal::after {
  top: 7px;
}

.gso-app .gso-burger[aria-expanded="true"] .gso-burger-vonal {
  background: transparent !important;
}

.gso-app .gso-burger[aria-expanded="true"] .gso-burger-vonal::before {
  transform: translateY(7px) rotate(45deg);
}

.gso-app .gso-burger[aria-expanded="true"] .gso-burger-vonal::after {
  transform: translateY(-7px) rotate(-45deg);
}

.gso-app .gso-mobil {
  display: none;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(14, 15, 14, .11) !important;
  background: rgba(255, 255, 255, .98) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.gso-app .gso-mobil .wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  padding-bottom: 22px;
}

.gso-app ul.gso-mobil-lista {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.gso-app ul.gso-mobil-lista > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(14, 15, 14, .07) !important;
}

.gso-app .gso-mobil-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gso-app .gso-mobil a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 2px;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: rgba(14, 15, 14, .72) !important;
}

.gso-app .gso-mobil a.active {
  color: #0E0F0E !important;
}

.gso-app .gso-mobil ul.gso-al {
  margin: 0 0 10px;
  padding: 0 0 0 14px;
  list-style: none !important;
  border-left: 2px solid rgba(162, 212, 94, .55) !important;
}

.gso-app .gso-mobil ul.gso-al[hidden] {
  display: none;
}

.gso-app .gso-mobil ul.gso-al li {
  margin: 0;
  padding: 0;
}

.gso-app .gso-mobil ul.gso-al a {
  padding: 10px 2px;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: rgba(14, 15, 14, .6) !important;
}

.gso-app .gso-mobil .gso-mobil-cta,
.gso-app .gso-mobil .gso-mobil-cta:hover,
.gso-app .gso-mobil .gso-mobil-cta:focus,
.gso-app .gso-mobil .gso-mobil-cta:active {
  flex: none;
  justify-content: center;
  margin-top: 18px;
  border-bottom: 0 !important;
  color: #0E0F0E !important;
  background: #A2D45E !important;
}

.gso-app .gso-mobil .gso-mobil-tel {
  flex: none;
  margin-top: 6px;
  border-bottom: 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: .8rem !important;
  letter-spacing: .1em !important;
  color: rgba(14, 15, 14, .5) !important;
}

@media (max-width: 980px) {
  .gso-app .gso-burger {
    display: block;
  }

  .gso-app .gso-mobil {
    display: block;
  }

  .gso-app .gso-mobil[hidden] {
    display: none;
  }

  .gso-app .navcta {
    gap: 8px;
  }
}

/* -------------------------------------------------------------------------
   4) WP ADMIN SÁV
   A fejléc position:fixed, tehát az admin sáv alá csúszna.
   ------------------------------------------------------------------------- */
body.admin-bar.gso-app header.site {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar.gso-app header.site {
    top: 46px;
  }
}

/* -------------------------------------------------------------------------
   5) LÁTHATÓSÁG NE FÜGGJÖN ANIMÁCIÓTÓL
   Ha egy akadálymentesítő widget vagy téma `*{animation:none!important}`-ot
   ír elő, a `forwards` animációra bízott elemek örökre eltűnnének.
   A JS 3,2 mp után felteszi a .gso-anim-kesz osztályt a <html>-re.
   ------------------------------------------------------------------------- */
html.gso-anim-kesz .gso-app .logotxt {
  opacity: 1 !important;
  animation: none !important;
}

html.gso-anim-kesz .gso-app .draw {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}

html.gso-anim-kesz .gso-app .rv,
html.gso-anim-kesz .gso-app .ml > span {
  opacity: 1 !important;
  transform: none !important;
}

html:not(.js) .gso-app .logotxt {
  opacity: 1 !important;
}

html:not(.js) .gso-app .draw {
  stroke-dashoffset: 0 !important;
}

/* -------------------------------------------------------------------------
   6) ŰRLAP
   ------------------------------------------------------------------------- */
.gso-app .gso-csapda {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gso-app .cform {
  position: relative;
}

.gso-app input[type="text"].gso-x,
.gso-app .gso-urlap input,
.gso-app .gso-urlap textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.gso-app .gso-uzenet {
  margin: 0 0 22px;
  padding: 15px 18px;
  border-radius: 12px !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.gso-app .gso-uzenet-ok {
  background: rgba(162, 212, 94, .18) !important;
  color: #3F6216 !important;
  border: 1px solid rgba(95, 142, 41, .35) !important;
}

.gso-app .gso-uzenet-hiba {
  background: rgba(220, 70, 60, .1) !important;
  color: #9B2B22 !important;
  border: 1px solid rgba(155, 43, 34, .3) !important;
}

/* iOS Safari ráközelít a mezőre, ha a betűméret 16px alatt van. */
@media (max-width: 560px) {
  .gso-app input,
  .gso-app textarea,
  .gso-app select {
    font-size: 16px !important;
  }
}

/* -------------------------------------------------------------------------
   7) APRÓSÁGOK
   ------------------------------------------------------------------------- */
.gso-app .mark-kep {
  width: auto;
  height: 34px;
  max-width: 160px;
  object-fit: contain;
}

.gso-app .wideband img,
.gso-app .svc-row .imgwrap img {
  background: #23251F !important;
}

@media (max-width: 640px) {
  .gso-app .tcard {
    width: 100%;
  }

  .gso-app .foot-top {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   8) CÍMSOR-BETŰTÍPUS PÁNCÉL
   A témák jellemzően `body h1,h2,h3{font-family:...!important}`-tal írják
   felül a címsorokat; az eredeti CSS a címsorokra nem adott font-family-t,
   így az öröklődött volna a témától.
   ------------------------------------------------------------------------- */
.gso-app h1,
.gso-app h2,
.gso-app h3,
.gso-app h4,
.gso-app h5,
.gso-app h6 {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  color: inherit !important;
  text-transform: none !important;
}

.gso-app .ser,
.gso-app .serline,
.gso-app h1 .ser,
.gso-app h2 .ser,
.gso-app h3 .ser {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.gso-app .tag,
.gso-app .stag,
.gso-app .kick,
.gso-app .num,
.gso-app .dt,
.gso-app .chip,
.gso-app .lb,
.gso-app .cap,
.gso-app .topic,
.gso-app .openflag,
.gso-app .field label,
.gso-app .hero-mini,
.gso-app .mlink,
.gso-app .reel-badge {
  font-family: 'Space Mono', ui-monospace, monospace !important;
}

/* -------------------------------------------------------------------------
   9) ALOLDALI HERO – RÁCS-JAVÍTÁS
   Az eredeti HTML-ekben a `.hero .wrap{display:grid;grid-template-columns:
   1.06fr .94fr}` a főoldal kétoszlopos heróját írja le, de a `.hero.typo`
   (aloldalak + kapcsolat) NEM állította vissza egyoszloposra. Emiatt a
   címke / cím / bevezető / gombok / fotósáv felváltva a bal és a jobb
   oszlopba kerültek, és a hero szétesett.
   ------------------------------------------------------------------------- */
.gso-app .hero.typo .wrap {
  display: block !important;
}

.gso-app .hero.typo .wrap > * {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   10) FELÚJÍTÁS OLDAL
   ------------------------------------------------------------------------- */

/* A folyamatábra-lépések nyila is CSS-ből rajzolódik (lásd a 2. pontot). */
.gso-app .plink span,
.gso-app .pstep .plink span {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 10px;
  flex: none;
  vertical-align: middle;
}

.gso-app .plink span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 1.6px;
  background: currentColor !important;
  transform: translateY(-50%);
}

.gso-app .plink span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.6px solid currentColor !important;
  border-right: 1.6px solid currentColor !important;
  transform: translateY(-50%) rotate(45deg);
}

/* Az "Ön itt jár" jelölő nem link, nincs benne nyíl. */
.gso-app .pstep.act .plink {
  border-bottom: 0 !important;
}

/* Előtte/utána váltó: a rádiógombok láthatatlanok, de fókuszálhatók
   maradnak — a billentyűs kezelés így is működik. */
.gso-app .ba-card {
  position: relative;
}

.gso-app .ba-card input {
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0 !important;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.gso-app .ba-bar label,
.gso-app .ba-bar label:hover,
.gso-app .ba-bar label:focus {
  text-decoration: none !important;
}

/* A referenciakép ne világos alapon várakozzon: ha lassú a hálózat,
   a sötét doboz kevésbé zavaró, mint a villanó fehér. */
.gso-app .ba-media {
  background: #23251F !important;
}

/* 3 kapcsolódó kártya esetén ne maradjon fél sor üresen.
   FIGYELEM: csak az explicit .gso-harom osztályt kapó rácsra vonatkozik —
   az általános .feat-grid a főoldalon 4 kártyát tart 2x2-ben, azt nem
   szabad átrendezni. */
.gso-app .feat-grid.gso-harom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .gso-app .feat-grid.gso-harom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .gso-app .ba-grid,
  .gso-app .ba-grid.g2 {
    grid-template-columns: 1fr;
  }

  .gso-app .ba-bar label {
    padding: 12px 4px;
  }
}

/* -------------------------------------------------------------------------
   11) REELS VIDEÓK
   A helyükön némán, ismétlődve játszanak (a böngészők csak muted videót
   indítanak el maguktól), kattintásra nagyban, hanggal nyílnak meg.
   ------------------------------------------------------------------------- */
.gso-app .reel {
  isolation: isolate;
}

.gso-app .gso-reel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #23251F !important;
}

/* A nagyító gomb a teljes kártyát lefedi, de csak a jele látszik. */
.gso-app .gso-reel-nagy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
}

.gso-app .gso-reel-nagy:hover,
.gso-app .gso-reel-nagy:focus,
.gso-app .gso-reel-nagy:focus-visible,
.gso-app .gso-reel-nagy:active {
  background: rgba(14, 15, 14, .16) !important;
  color: #fff !important;
}

.gso-app .gso-reel-nagy:focus-visible {
  outline: 2px solid #A2D45E !important;
  outline-offset: -4px;
}

.gso-app .gso-reel-szoveg {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lejátszás-háromszög CSS-ből (a ▶ glifa emojiként renderelhet). */
.gso-app .gso-reel-jel {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 8px 24px rgba(14, 15, 14, .22) !important;
  opacity: 0;
  transform: scale(.86);
  transition: opacity .3s ease, transform .3s ease;
}

.gso-app .gso-reel-jel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-left: 15px solid #0E0F0E;
  border-top: 9.5px solid transparent;
  border-bottom: 9.5px solid transparent;
  transform: translate(-50%, -50%);
}

.gso-app .reel:hover .gso-reel-jel,
.gso-app .gso-reel-nagy:focus-visible .gso-reel-jel {
  opacity: 1;
  transform: scale(1);
}

/* Érintőképernyőn nincs hover – ott mindig látszódjon a jel. */
@media (hover: none) {
  .gso-app .gso-reel-jel {
    opacity: .92;
    transform: scale(1);
  }
}

/* -------------------------------------------------------------------------
   12) VIDEÓ NAGYÍTÓ (lightbox)
   ------------------------------------------------------------------------- */
.gso-reel-doboz {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 10, 9, .88) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gso-reel-doboz[hidden] {
  display: none;
}

.gso-reel-doboz video {
  display: block;
  /* Fix szélesség, nem `auto`: különben a doboz a videó saját
     felbontásához igazodna, és egy kisebb feltöltött fájl aprón jelenne meg. */
  width: min(94vw, 460px);
  max-width: 100%;
  max-height: 86vh;
  aspect-ratio: 9 / 16;
  border-radius: 18px !important;
  background: #000 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5) !important;
}

.gso-reel-doboz .gso-reel-fejlec {
  position: absolute;
  top: 18px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: #fff !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
}

.gso-reel-doboz .gso-reel-nev {
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #fff !important;
}

.gso-reel-doboz .gso-reel-alnev {
  display: block;
  margin-top: 3px;
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-size: .62rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .72) !important;
}

/* Bezáró X CSS-ből rajzolva, nem glifából. */
.gso-reel-zar {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .14) !important;
  cursor: pointer;
}

.gso-reel-zar:hover,
.gso-reel-zar:focus,
.gso-reel-zar:focus-visible,
.gso-reel-zar:active {
  background: rgba(255, 255, 255, .26) !important;
}

.gso-reel-zar::before,
.gso-reel-zar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  border-radius: 2px !important;
  background: #fff !important;
}

.gso-reel-zar::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.gso-reel-zar::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   13) KÖZÖSSÉGI IKONOK
   ------------------------------------------------------------------------- */
.gso-app .gso-some-cim {
  margin: 26px 0 10px;
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-size: .6rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(14, 15, 14, .42) !important;
}

.gso-app ul.gso-some {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.gso-app ul.gso-some li {
  margin: 0;
  padding: 0;
}

.gso-app .gso-some-link,
.gso-app .gso-some-link:link,
.gso-app .gso-some-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(14, 15, 14, .13) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: rgba(14, 15, 14, .62) !important;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.gso-app .gso-some-link:hover,
.gso-app .gso-some-link:focus,
.gso-app .gso-some-link:focus-visible,
.gso-app .gso-some-link:active {
  background: #0E0F0E !important;
  border-color: #0E0F0E !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.gso-app .gso-some-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* -------------------------------------------------------------------------
   14) ASZTALI MENÜ LENYÍLÓKKAL
   Az eredeti `.menu` egy sima flex-doboz <a> elemekkel; most <ul>/<li>,
   hogy legyen mibe akasztani az almenüt.
   ------------------------------------------------------------------------- */
.gso-app ul.menu {
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.gso-app ul.menu > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
}

/* Az almenü nyílhegye – CSS-ből rajzolva. */
.gso-app .gso-al-gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  cursor: pointer;
}

.gso-app .gso-al-gomb:hover,
.gso-app .gso-al-gomb:focus,
.gso-app .gso-al-gomb:focus-visible,
.gso-app .gso-al-gomb:active {
  background: rgba(14, 15, 14, .06) !important;
  color: #0E0F0E !important;
}

.gso-app .gso-al-jel {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid rgba(14, 15, 14, .55) !important;
  border-bottom: 1.6px solid rgba(14, 15, 14, .55) !important;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s cubic-bezier(.22, .9, .25, 1);
}

.gso-app .gso-al-gomb[aria-expanded="true"] .gso-al-jel {
  transform: translateY(1px) rotate(-135deg);
}

.gso-rejtett {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gso-app ul.menu ul.gso-al {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 60;
  min-width: 208px;
  margin: 0;
  padding: 8px;
  list-style: none !important;
  border: 1px solid rgba(14, 15, 14, .1) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 20px 46px rgba(14, 15, 14, .13) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.gso-app ul.menu > li:hover > ul.gso-al,
.gso-app ul.menu > li:focus-within > ul.gso-al,
.gso-app ul.menu > li.gso-nyitva > ul.gso-al {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hézagáthidaló: a gomb és a lenyíló közti 14 px-en ne csukódjon be. */
.gso-app ul.menu > li.gso-van-al::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 16px;
}

.gso-app ul.menu ul.gso-al li {
  margin: 0;
  padding: 0;
}

.gso-app ul.menu ul.gso-al a,
.gso-app ul.menu ul.gso-al a:link,
.gso-app ul.menu ul.gso-al a:visited {
  display: block;
  padding: 9px 12px;
  border-radius: 9px !important;
  font-size: .86rem !important;
  font-weight: 500 !important;
  color: rgba(14, 15, 14, .68) !important;
  background: transparent !important;
}

.gso-app ul.menu ul.gso-al a::after {
  display: none;
}

.gso-app ul.menu ul.gso-al a:hover,
.gso-app ul.menu ul.gso-al a:focus,
.gso-app ul.menu ul.gso-al a:focus-visible,
.gso-app ul.menu ul.gso-al a.active {
  background: rgba(162, 212, 94, .17) !important;
  color: #0E0F0E !important;
}

/* Szűkebb asztali szélességen kisebb hézag, hogy beférjen az 5 pont. */
@media (max-width: 1180px) {
  .gso-app ul.menu {
    gap: 18px;
    font-size: .84rem;
  }

  .gso-app .navcta {
    gap: 14px;
  }
}

/* -------------------------------------------------------------------------
   15) VÉLEMÉNYEK
   ------------------------------------------------------------------------- */
.gso-app .gso-csillagok {
  display: flex;
  gap: 4px;
  margin: 14px 0 -4px;
}

/* Csillag CSS-ből: a ★ glifa emojiként renderelhet. */
.gso-app .gso-csillag {
  display: block;
  width: 15px;
  height: 15px;
  background: #E8B430 !important;
  clip-path: polygon(50% 0%, 61.8% 34.5%, 98% 34.5%, 68.2% 56%, 79.4% 90.5%, 50% 69.1%, 20.6% 90.5%, 31.8% 56%, 2% 34.5%, 38.2% 34.5%);
}

.gso-app .q-grid {
  /* min() nelkul a 300 px-es also hatar szuk kepernyon kifeszitene a racsot. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.gso-app .qcard .mk {
  height: auto;
  line-height: .8 !important;
}

/* -------------------------------------------------------------------------
   16) MOBIL TÚLCSORDULÁS
   A rács- és flex-elemek alapból `min-width:auto`-k, tehát nem tudnak a
   tartalmuk min-content szélessége alá menni. Egy hosszú magyar szó
   ("kertgondozás", "generálkivitelezés") a hero nagy betűméretén így
   kifeszíti a sort, és az egész oldal jobbra kilóg. A sandbox ezt nem
   mutatta, mert ott nem töltődnek be a Google Fontok, és a tartalék
   betűtípus keskenyebb.
   ------------------------------------------------------------------------- */
.gso-app .wrap > *,
.gso-app .hero .wrap > *,
.gso-app .intro-grid > *,
.gso-app .svc-row > *,
.gso-app .feat-grid > *,
.gso-app .q-grid > *,
.gso-app .foot-top > *,
.gso-app .ba-grid > * {
  min-width: 0;
}

.gso-app h1,
.gso-app h2,
.gso-app h3,
.gso-app h4,
.gso-app p,
.gso-app li,
.gso-app .lead,
.gso-app .serline,
.gso-app .ml,
.gso-app .nm,
.gso-app .rl {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Utolsó védvonal: semmi ne tudja vízszintesen kifeszíteni a lapot.
   FIGYELEM: `overflow-x:hidden` NEM a .gso-app gyökérre kerül, mert az
   görgetőkonténert csinálna belőle, és a fejléc `position:sticky`-je
   néma halált halna. Szekciónként korlátozzuk. */
.gso-app > section,
.gso-app main > section,
.gso-app footer,
.gso-app header.site {
  max-width: 100vw;
  overflow-x: clip;
}

@media (max-width: 560px) {
  .gso-app .hero h1 {
    font-size: clamp(2rem, 10.5vw, 3rem) !important;
  }

  .gso-app .hero .lead,
  .gso-app .intro p {
    font-size: 1rem !important;
  }

  .gso-app .hero-cta {
    flex-wrap: wrap;
  }
}

/* -------------------------------------------------------------------------
   17) KAPCSOLAT OLDAL – HIÁNYZÓ MOBIL TÖRÉSPONT
   Az eredeti CSS-ben a `.contact .wrap` kétoszlopos rácsához (.85fr 1.15fr)
   NEM tartozott media query, így telefonon is két oszlop maradt: a bal
   hasáb ~341 px-re feszült egy 320–360 px-es képernyőn.
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .gso-app .contact .wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Minden rács-gyerek tudjon a tartalma alá menni. */
.gso-app .cinfo,
.gso-app .cform,
.gso-app .ccard,
.gso-app .ccard > * {
  min-width: 0;
}

.gso-app .ccard .v,
.gso-app .ccard .v a {
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   18) DÖNTÖTT KÁRTYÁK 980–1180 px KÖZÖTT
   A `.tiltwrap .wrap` 980 px-ig kétoszlopos, a `.tiltcards` viszont három
   200 px-es kártya + 2×20 px hézag = 640 px. A jobb oszlop 1024 px-es
   képernyőn csak ~450 px, tehát a harmadik kártya belelóg a `overflow:hidden`
   vágásba, és a szövege levágódik. Itt zsugorítjuk a kártyákat, hogy
   beférjenek, mielőtt a 980 px-es töréspont egyoszlopossá tenné a blokkot.
   ------------------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1180px) {
  .gso-app .tiltcards {
    gap: 12px;
  }

  .gso-app .tcard {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 16px;
  }

  .gso-app .tcard h4 {
    font-size: 1.1rem !important;
  }

  .gso-app .tcard .dt,
  .gso-app .tcard small {
    font-size: .58rem !important;
    letter-spacing: .1em !important;
  }
}

/* -------------------------------------------------------------------------
   19) HERO JELVÉNY ÉS A LOGÓ FELIRAT ÜTKÖZÉSE
   A `.hero-chip` abszolút pozíciójú a kártya bal alsó sarkában, a rajzolt
   logó "Golden Strings" felirata viszont a kártya alján, középen van.
   Asztalon elférnek egymás mellett; 1080 px alatt a kártya összeszűkül, és a
   jelvény ráfut a feliratra (768 és 980 px-en az alcímre). Itt a jelvényt a
   kártya alá tesszük.
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .gso-app .hero-media.logo-stage {
    overflow: visible;
    margin-bottom: 64px;
  }

  .gso-app .hero-media.logo-stage .hero-chip {
    left: 0;
    right: auto;
    bottom: -56px;
    background: #fff !important;
    border: 1px solid rgba(14, 15, 14, .1) !important;
  }

  /* A sarokjelek a kártya belsejében maradnak, hiába lett látható a túlnyúlás. */
  .gso-app .hero-media.logo-stage .fcorner {
    display: none;
  }
}