/* ==========================================================================
   Granivel — globális stílusok
   Az elemek egyedi megjelenését a HTML-ben lévő inline style-ok adják;
   ez a fájl a globális alapokat, az animációkat, a hover-állapotokat és a
   reszponzív viselkedést tartalmazza.
   ========================================================================== */

:root { color-scheme: dark; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #0b0b0c;
  color: #efe7db;
  font-family: 'Lora', Georgia, serif;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

::selection { background: rgba(182, 130, 53, .32); color: #fff; }

a { color: #d8b273; text-decoration: none; }
a:hover { color: #efd5a6; }

:focus-visible { outline: 2px solid #b68235; outline-offset: 3px; }

input, textarea, select, button { font: inherit; color: inherit; }

/* Vízszintes görgetés kizárása mobilon */
html, body { max-width: 100%; }
img, iframe, canvas, svg, video { max-width: 100%; }

/* KIVÉTEL: a demóelőnézetek iframe-jei szándékosan szélesebbek a keretüknél
   (1440, illetve 390 képpont), és a JavaScript kicsinyíti le őket pontosan a
   keret méretére. Ha a fenti max-width rájuk is vonatkozna, a böngésző előbb
   leszorítaná őket a keret szélességére, a kicsinyítés pedig MÉG egyszer
   csökkentené a méretüket — így a tartalom csak a keret felét töltené ki.
   Túlcsordulást nem okozhatnak, mert a keretük overflow:hidden. */
[data-preview] iframe { max-width: none; }

/* --------------------------------------------------------------- animációk */
@keyframes gv-beam {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: .5; }
}
@keyframes gv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gv-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gv-scan {
  from { transform: translateY(-100%); }
  to   { transform: translateY(900%); }
}
@keyframes gv-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------- hover állapotok
   (az eredeti style-hover attribútumok valódi CSS megfelelői)              */
.gv-hv-outline:hover { border-color: #b68235 !important; color: #efd5a6 !important; }
.gv-hv-fill:hover { background: rgba(182, 130, 53, .22) !important; }
.gv-hv-fill-strong:hover { background: rgba(182, 130, 53, .24) !important; }
.gv-hv-promo:hover { background: #c9924a !important; border-color: #c9924a !important; }

/* --------------------------------------------------------- görgetés-reveal
   A JS adja hozzá a .gv-reveal-ready osztályt; ha a JS nem fut le, a tartalom
   alapból látható marad.                                                    */
.gv-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1),
              transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.gv-reveal-ready [data-reveal].gv-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- GYIK
   A <details> nyitógombja: a böngésző alapértelmezett háromszögét levesszük,
   és saját, a márkához illő jelölést teszünk a helyére.                     */
details > summary { list-style: none; position: relative; padding-right: 40px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
  color: rgba(226, 189, 127, .9);
  transition: transform .3s;
}
details[open] > summary::after { content: "−"; }
details > summary:hover { color: #fff; }

/* --------------------------------------------------------------- reszponzív
   Az eredeti verzióban ezt JavaScript végezte; itt tiszta CSS, így JS nélkül
   és a betöltés első pillanatától helyes a mobil elrendezés.                */
@media (max-width: 940px) {
  [data-stack] { grid-template-columns: minmax(0, 1fr) !important; }

  #gv-desknav { display: none !important; }
  #gv-burger  { display: flex !important; }

  body.gv-menu-open #gv-mobilenav { display: flex !important; }
}

/* A csomagok rácsa négy kártyás. Köztes szélességen kettesével tördel,
   különben az árak és a felsorolások összepréselődnének. */
@media (min-width: 941px) and (max-width: 1279px) {
  #gv-csomag-racs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 941px) {
  #gv-mobilenav { display: none !important; }
  #gv-burger    { display: none !important; }
  #gv-desknav   { display: flex !important; }
}

/* Az űrlap belső kétoszlopos rácsa szűk mobilon egy oszlop */
@media (max-width: 620px) {
  #gv-form [data-stack] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Az iframe-es demóelőnézetek ne okozzanak vízszintes görgetést */
[data-preview] { max-width: 100%; overflow: hidden; }

/* ------------------------------------------------------ mozgáscsökkentés */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .gv-reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ nyomtatás */
@media print {
  #gv-loader, #gv-nav, #gv-canvas { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ========================================================================
   10/10 finomhangolás: akadálymentesség, mobil hero, stabil űrlap és loader
   ======================================================================== */
.gv-skip-link {
  position: fixed;
  left: 14px;
  top: 12px;
  z-index: 999;
  transform: translateY(-150%);
  padding: 10px 14px;
  background: #f6efe4;
  color: #0b0b0c;
  border-radius: 2px;
  transition: transform .2s ease;
}
.gv-skip-link:focus { transform: translateY(0); }

body.gv-menu-open { overflow: hidden; }

/* ------------------------------------------------- bevezető ajánlat sávja
   A #gv-promo a fix fejléc első eleme, ezért a fejléc magasabb lett: a hero
   felső belső margóját és az ugrócélok scroll-margin értékét is növelni kell,
   különben a sáv eltakarja a szakaszok tetejét.                             */
section[id] { scroll-margin-top: 118px; }

@media (min-width: 768px) {
  .gv-hero { padding-top: 150px !important; }
}

#gv-promo:hover { color: #f6efe4; }

@media (max-width: 620px) {
  /* Szűk kijelzőn a sáv két sornál ne legyen hosszabb */
  #gv-promo { font-size: 11.5px; letter-spacing: 0; }
  .gv-promo-extra { display: none; }
}

@media print {
  #gv-promo { display: none !important; }
}

/* Csak képernyőolvasónak szánt szöveg (pl. „Eredeti ár:”, „Bevezető ár:”) */
.gv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#gv-loader { transition-duration: .35s !important; }

#gv-form input:not([type="radio"]):not([type="checkbox"]),
#gv-form textarea {
  border-color: rgba(239,231,219,.28) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#gv-form input:not([type="radio"]):not([type="checkbox"]):focus,
#gv-form textarea:focus {
  border-color: rgba(226,189,127,.9) !important;
  box-shadow: 0 2px 0 rgba(182,130,53,.28);
  background: rgba(255,255,255,.015) !important;
}
#gv-form input::placeholder,
#gv-form textarea::placeholder { color: rgba(239,231,219,.42); }
#gv-submit:disabled { cursor: wait; }

@media (max-width: 767px) {
  .gv-hero {
    min-height: auto !important;
    display: block !important;
    padding: 156px clamp(18px,4vw,48px) 0 !important;
    overflow: hidden;
  }
  .gv-hero-content { padding-bottom: 44px; }
  .gv-hero-actions { display: grid !important; grid-template-columns: 1fr; }
  .gv-hero-actions > a {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .gv-hero-benefits {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-left: calc(clamp(18px,4vw,48px) * -1);
    margin-right: calc(clamp(18px,4vw,48px) * -1);
  }
  .gv-hero-benefits > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 13px 18px !important;
    justify-content: start !important;
  }
  .gv-hero-benefits span:last-child { grid-column: 1 / -1; }
  #gv-form aside {
    border-left: 0 !important;
    border-top: 1px solid rgba(239,231,219,.12);
    padding-left: 0 !important;
    padding-top: 28px;
  }
  #gv-loader p { display: none; }
  #gv-loader button { bottom: 18px !important; right: 18px !important; }
}

@media (max-width: 420px) {
  .gv-hero-benefits > div { grid-template-columns: 1fr; }
  .gv-hero-benefits span:last-child { grid-column: auto; }
}

/* ============================================================== nyelvváltó
   Két betű, egy hajszálvonal — a fejléc arányait nem borítja fel, mégis
   azonnal megtalálható. Az aktuális nyelv arany és nem hivatkozás: aki
   már ott van, annak nincs hová kattintania. A jelöletlen nyelv halvány,
   de a kontrasztja hover és fókusz nélkül is olvasható marad.
   Több nyelvnél ugyanez a minta ismétlődik, elválasztóval közöttük. */
.gv-lang {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.gv-lang > span[aria-current],
.gv-lang > a {
  font-family: 'Lora', Georgia, serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 1px;
}
.gv-lang > span[aria-current] { color: #e2bd7f; }
.gv-lang > a {
  color: rgba(239,231,219,.5);
  transition: color .3s;
}
.gv-lang > a:hover,
.gv-lang > a:focus-visible { color: #f3ece1; }
.gv-lang i {
  width: 1px;
  height: 11px;
  background: rgba(239,231,219,.26);
  display: block;
  flex: 0 0 auto;
}

/* A mobilmenüben a fejléc szűk soraiból teljes értékű menüpont lesz:
   48 px magas tapfelület, ugyanazzal az elválasztó vonallal, mint a
   fölötte lévő hivatkozásoknál. */
.gv-lang--mobil {
  gap: 14px;
  margin-top: 4px;
  padding: 14px 0;
  min-height: 48px;
  border-bottom: 1px solid rgba(239,231,219,.07);
}
.gv-lang--mobil > span[aria-current],
.gv-lang--mobil > a {
  font-size: 14px;
  min-height: 44px;
  padding: 0 2px;
}
.gv-lang--mobil i { height: 14px; }

/* A fejléci navigáció egyetlen sorban marad. A nyelvváltó megjelenésével
   a hely megszorult, és a hosszabb menüpontok — „Weboldal készítés”,
   „Miért mi?” — két sorba estek, amitől a fejléc magassága megugrott.
   A sortörés tiltása után a menü inkább keskenyebb közökkel zsugorodik. */
#gv-desknav > a { white-space: nowrap; }

/* A fejléc töréspontja. Eredetileg 941 px-től látszott a teljes menü, de
   ott már a nyelvváltó nélkül is összepréselődött, és a hosszabb
   menüpontok két sorba estek. Megmérve: a nyolc menüpont, a nyelvváltó
   és a gomb együtt 1230 px viewportot kíván a legszűkebb közökkel is,
   ezért a váltás 1260 px-re kerül. Alatta rendes hamburgermenü van.
   A tartalmi rácsok törése marad 940 px-en — az a szöveg
   olvashatóságáról szól, nem a menüről. */
@media (max-width: 1259px) {
  #gv-desknav { display: none !important; }
  #gv-burger  { display: flex !important; }
  body.gv-menu-open #gv-mobilenav { display: flex !important; }
}
@media (min-width: 1260px) {
  #gv-mobilenav { display: none !important; }
  #gv-burger    { display: none !important; }
  #gv-desknav   { display: flex !important; }
  /* A töréspont közvetlen közelében szoros a hely, ezért ott fix, szűk köz. */
  #gv-desknav   { gap: 11px !important; }
}
/* 1400 px fölött már van tér: a menü visszakapja a levegős közeit. */
@media (min-width: 1400px) {
  #gv-desknav { gap: clamp(14px, 1.6vw, 28px) !important; }
}

/* ============================================================= euróárak
   Csak az angol változaton. A forintár marad a főszereplő — az a
   hivatalos ár, az szerepel a szerződésben és a strukturált adatban —,
   az euró alatta, halkabban, tájékoztatásként. Ezért nem azonos méretű
   második ár: az két egyenrangú árnak látszana, és pont az lenne a
   félreértés, amit el akarunk kerülni. */
.gv-eur {
  margin: 2px 0 0;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(239,231,219,.42);
  font-variant-numeric: tabular-nums;
}
.gv-eur-inline {
  color: rgba(239,231,219,.42);
  font-variant-numeric: tabular-nums;
}