.elementor-kit-5{--e-global-color-primary:#C9A24B;--e-global-color-secondary:#E7C97A;--e-global-color-text:#F5EFE3;--e-global-color-accent:#94641E;--e-global-color-2cfa966:#080808;--e-global-color-61f6937:#1B1108;--e-global-color-ec7c6b5:#B9AC92;--e-global-color-b5f1f9f:#000000;--e-global-color-ba8bf4b:#FFF0DA;--e-global-color-415e80d:#F2EADD;--e-global-typography-primary-font-family:"Jost";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Jost";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Jost";--e-global-typography-accent-font-weight:600;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:transparent;font-family:"Jost", Sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.7px;color:var( --e-global-color-2cfa966 );background-image:linear-gradient(90deg, var( --e-global-color-secondary ) 0%, var( --e-global-color-accent ) 100%);border-style:none;border-radius:5px 5px 5px 5px;padding:16px 32px 16px 32px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{color:var( --e-global-color-61f6937 );border-style:none;border-radius:5px 5px 5px 5px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   SonnenX Professional — Global CSS (ARANY / LUXUS verzió)
   Beillesztés: Elementor → Site Settings → Custom CSS
   VAGY: Megjelenés → Testreszabás → Egyéni CSS

   Módosítás: a csatolt gradiens-stopok (FFF0DA → 94641E → FFF2DB
   → EAC885 → FBF5D1 → BD9A4B → ECD8A3) beépítve, több szintű
   arany "foil" gradiensként — headline szövegre és gombra is.
   ============================================================ */

/* ---- CSS tokenek (Elementor global color változók) ---- */
:root {
  --e-global-color-primary:   #C9A24B;
  --e-global-color-secondary: #E7C97A;
  --e-global-color-text:      #F5EFE3;
  --e-global-color-accent:    #97732A;

  --sx-bg:         #080808;
  --sx-bg2:        #140C03;
  --sx-surface:    #1B1108;
  --sx-gold:       #C9A24B;
  --sx-gold-light: #E7C97A;
  --sx-gold-deep:  #97732A;
  --sx-ink:        #F5EFE3;
  --sx-ink-dim:    #B9AC92;
  --sx-ink-mute:   #8A7E69;
  --sx-dark:       #140C03;
  --sx-line:       rgba(201,162,75,0.20);
  --sx-ease:       cubic-bezier(.22,.61,.36,1);

  /* ---- Csatolt gradiens-stopok (foil paletta) ---- */
  --sx-foil-1: #FFF0DA;  /* 1%  – halvány krém csúcsfény */
  --sx-foil-2: #94641E;  /* 4%  – mély bronz mélypont */
  --sx-foil-3: #FFF2DB;  /* 83% – krém */
  --sx-foil-4: #EAC885;  /* 94% – közép-arany */
  --sx-foil-5: #FBF5D1;  /* 98% – halvány krém */
  --sx-foil-6: #BD9A4B;  /* 99.5% – meleg arany */
  --sx-foil-7: #ECD8A3;  /* 100% – homokarany zárás */

  /* Több szintű arany "fólia" gradiens — szöveghez és gombhoz */
    --sx-gradient-gold-foil: linear-gradient(
      130deg,
      var(--sx-foil-2) 0%,
      var(--sx-foil-1) 14%,
      var(--sx-foil-6) 38%,
      var(--sx-foil-4) 58%,
      var(--sx-foil-3) 76%,
      var(--sx-foil-5) 90%,
      var(--sx-foil-7) 100%
    );

  /* Ugyanaz, függőlegesen — kártyák / badge-ek szegélyéhez */
  --sx-gradient-gold-foil-v: linear-gradient(
    170deg,
    var(--sx-foil-1) 1%,
    var(--sx-foil-2) 4%,
    var(--sx-foil-3) 83%,
    var(--sx-foil-4) 94%,
    var(--sx-foil-5) 98%,
    var(--sx-foil-6) 99.5%,
    var(--sx-foil-7) 100%
  );

  /* Világosabb, "napfényes" arany gradiens — nincs benne a sötét bronz plató,
     csak krém/világos-arany tónusok. Topbar, világos hátterű sávok. */
  --sx-gradient-gold-foil-light: linear-gradient(
    100deg,
    #FFF6E9 0%,
    #F5DFAF 16%,
    #FFF2DB 38%,
    #EAC885 58%,
    #FBF5D1 78%,
    #E7C97A 92%,
    #ECD8A3 100%
  );

  /* Élénk, telített arany fólia — a "gyűrött fólia" textúra hatásáért
     sűrűbb, váltakozó világos/telített stopokkal (nem pasztell). */
  --sx-gradient-gold-foil-vivid: linear-gradient(
    95deg,
    #FFFBEF 0%,
    #FFE9A8 6%,
    #FFC94D 13%,
    #FFF6D9 19%,
    #F0A500 27%,
    #FFE066 34%,
    #FFFBEF 41%,
    #E8A317 48%,
    #FFD966 55%,
    #C9861A 62%,
    #FFF3C4 70%,
    #F0B429 78%,
    #FFE9A8 86%,
    #FFFBEF 100%
  );

  /* Finom, halványabb változat háttér-glow-hoz */
  --sx-gradient-gold-soft: radial-gradient(
    circle at 50% 30%,
    rgba(234,200,133,0.22) 0%,
    rgba(151,115,42,0.10) 45%,
    rgba(8,8,8,0) 75%
  );
}

/* ---- Body ---- */
body {
  background-color: #080808;
  color: #F5EFE3;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- Hivatkozások ---- */
a             { color: #E7C97A; text-decoration: none; transition: color .3s; }
a:hover       { color: #C9A24B; }

/* ---- Tipográfia: H1–H6 ---- */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Jost', system-ui, sans-serif;
  color: #F5EFE3;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

h1, .elementor-size-xxl { font-size: clamp(38px, 5vw,  72px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; }
h2, .elementor-size-xl  { font-size: clamp(30px, 3.5vw,48px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; }
h3, .elementor-size-large{ font-size: clamp(22px, 2.5vw,32px); font-weight: 500; }
h4, .elementor-size-medium{font-size: clamp(18px, 1.8vw,22px); font-weight: 500; }
h5, .elementor-size-small { font-size: clamp(16px, 1.4vw,18px); font-weight: 500; }
h6 {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #C9A24B;
}

/* ---- ARANY FOIL SZÖVEG — a fő címsor (H1) alapból ezt kapja ----
   Ez a "signature" luxus elem: a csatolt gradiens fut végig a betűkön.
   Ha egy adott H1-nél nem kell (pl. világos háttéren van), add hozzá
   a "sx-no-foil" CSS osztályt Elementorban, és visszaáll a sima szín. */
h1:not(.sx-no-foil) {
  background: var(--sx-gradient-gold-foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #F5EFE3; /* fallback, ha a böngésző nem támogatja a text-clip-et */
}

/* Kézi opt-in osztály BÁRMELY szövegre (pl. kiemelt szó egy H2-ben, badge) */
.sx-gold-foil-text {
  background: var(--sx-gradient-gold-foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C9A24B;
}

/* Élénkebb, telítettebb változat — nagyon kiütős főcímekhez, badge-ekhez */
.sx-gold-vivid-text {
  background: var(--sx-gradient-gold-foil-vivid);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C9A24B;
}

/* ---- Szövegtörzs widget ---- */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: 'Manrope', system-ui, sans-serif;
  color: #B9AC92;
  line-height: 1.65;
}

/* ============================================================
   GOMBOK — több szintű arany "foil" gradiens (nem csak 2 szín)
   + megtartott shine-sweep hover animáció
   + finom bevel (fény-árnyék él) a fémes, préselt lemez hatásért
   ============================================================ */
.elementor-button {
  position: relative;
  overflow: hidden;
}

.elementor-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  transition: none;
}

/* HOVER állapot: az animáció csak ekkor indul el és egyszer fut le */
.elementor-button:hover::after {
  animation: shine-hover 0.5s ease-in-out;
}

@keyframes shine-hover {
  0%   { left: -60%; }
  100% { left: 160%; }
}

.elementor-button,
.elementor-button-wrapper .elementor-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;

  background: var(--sx-gradient-gold-foil) !important;
  background-size: 240% 100% !important;
  background-position: 0% 50% !important;

  color: #241505 !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  border: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 3px rgba(36,21,5,0.35),
    0 12px 30px -14px rgba(201,162,75,0.55) !important;

  transition: background-position .8s var(--sx-ease),
              transform .35s var(--sx-ease),
              box-shadow .35s var(--sx-ease) !important;
}

.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 3px rgba(36,21,5,0.35),
    0 18px 40px -14px rgba(231,201,122,0.75) !important;
}

/* ---- Gomb: ghost variáns (outline) — arany kontúrral ---- */
.elementor-button.sx-ghost,
.sx-ghost .elementor-button {
  background: transparent !important;
  color: #E7C97A !important;
  border: 1px solid rgba(201,162,75,0.42) !important;
  box-shadow: none !important;
}
.elementor-button.sx-ghost:hover,
.sx-ghost .elementor-button:hover {
  background: rgba(201,162,75,0.08) !important;
  border-color: #C9A24B !important;
  transform: none !important;
}

/* ---- Elementor konténer alapháttér ---- */
.e-con, .elementor-section, .elementor-inner-section {
  --e-global-color-primary:   #C9A24B;
  --e-global-color-secondary: #E7C97A;
  --e-global-color-text:      #F5EFE3;
}

/* ---- Opt-in: halvány arany "glow" háttér egy szekció mögé ----
   Elementorban a szekció Advanced > CSS Classes mezőjébe: sx-gold-glow */
.sx-gold-glow {
  position: relative;
  isolation: isolate;
}
.sx-gold-glow::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: var(--sx-gradient-gold-soft);
  pointer-events: none;
  z-index: -1;
}

/* ---- Opt-in: konténer border, több szintű arany gradiens — 2 variáció ----
   A szélesség/radius CSS custom property-vel állítható (Elementor
   Advanced > Custom CSS mezőben pl. ".elementor-kit-5{--sx-border-w:4px}"),
   nincs !important a szélességen/radiuson, csak a színen. */

/* 1) SZÖGLETES sarok — border-image, ez a legmegbízhatóbb módszer
   éles sarkú konténereknél minden böngészőben. */
.sx-gold-gradient-border {
  --sx-border-w: 2px;
  border-style: solid !important;
  border-width: var(--sx-border-w);
  border-image: var(--sx-gradient-gold-foil) 1 !important;
  border-image-slice: 1 !important;
}

/* 2) LEKEREKÍTETT sarok — mask-technika, ez megbízható radius-szal is
   (a border-image nem az). Használd, ha a konténernek border-radiusa van. */
.sx-gold-gradient-border-rounded {
  --sx-border-w: 2px;
  --sx-border-radius: 10px;
  position: relative;
  border-radius: var(--sx-border-radius);
}
.sx-gold-gradient-border-rounded::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--sx-border-w);
  background: var(--sx-gradient-gold-foil) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---- Opt-in: arany fólia szegélyű kártya / badge (saját háttérszínnel) ----
   CSS Classes mezőbe: sx-gold-foil-border */
.sx-gold-foil-border {
  position: relative;
  border-radius: 10px;
  background: var(--sx-surface);
}
.sx-gold-foil-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--sx-gradient-gold-foil-v);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---- Input / textarea mezők ---- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
.elementor-field-type-text input,
.elementor-field-type-email input,
.elementor-field-type-textarea textarea {
  background-color: #1B1108 !important;
  border: 1px solid rgba(201,162,75,0.20) !important;
  border-radius: 6px !important;
  color: #F5EFE3 !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #C9A24B !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,162,75,0.15) !important;
}
::placeholder { color: #8A7E69 !important; }

/* ---- Form label ---- */
.elementor-field-label,
label {
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8A7E69 !important;
}

/* ---- Képek ---- */
.elementor-widget-image img { border-radius: 10px; }

/* ---- Elválasztó (divider) — alap színes, opt-in arany foil verzió ---- */
.elementor-widget-divider .elementor-divider-separator { border-color: rgba(201,162,75,0.20); }

/* CSS Classes mezőbe egy Divider widgeten: sx-gold-divider */
.sx-gold-divider .elementor-divider-separator {
  border: none !important;
  height: 2px !important;
  background: var(--sx-gradient-gold-foil);
  background-size: 220% 100%;
}

/* ============================================================
   HEADER FELSŐ CSÍKJA (top bar) — több szintű arany gradiens
   Tedd rá a "sx-gold-topbar" CSS osztályt Elementorban arra a
   szekcióra/widgetre, ami a felső csík (pl. bejelentés sáv,
   elérhetőség sáv a fő nav fölött). Ha Elementor Pro Theme
   Builder "Top Bar"-t használsz, ott is az Advanced > CSS
   Classes mezőbe írd be.
   ============================================================ */
.sx-gold-topbar {
  background: var(--sx-gradient-gold-foil-vivid) !important;
  background-size: 260% 100% !important;
  background-position: 0% 50% !important;
  border-bottom: 1px solid rgba(36,21,5,0.18) !important;
}

/* Sötét tinta szín a világos-közép arany háttéren jól olvasható */
.sx-gold-topbar,
.sx-gold-topbar a,
.sx-gold-topbar p,
.sx-gold-topbar span,
.sx-gold-topbar li {
  color: #241505 !important;
}
.sx-gold-topbar a:hover { opacity: .65; }

/* ---- Hello Elementor téma override ---- */
.site-header, header.site-header { background: rgba(14,7,0,0.9) !important; border-bottom: 1px solid rgba(201,162,75,0.15) !important; }
.site-title a { color: #F5EFE3 !important; font-family: 'Jost', sans-serif !important; }
.site-description { color: #8A7E69 !important; }
.main-navigation a { font-family: 'Jost', sans-serif !important; color: #B9AC92 !important; }
.main-navigation a:hover { color: #E7C97A !important; }
.site-footer { background: #140C03 !important; border-top: 1px solid rgba(201,162,75,0.15) !important; color: #8A7E69 !important; }
.e--pointer-underline .elementor-item::after {
    background-color: var(--e-global-color-accent);
}/* End custom CSS */