/* ═══════════════════════════════════════════════════════
   Studio TM – components.css
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   ÚJRAHASZNOSÍTHATÓ GRADIENS HÁTTÉR – fekete alap, középről
   induló halvány sárga radiális fény. Szolgáltatások, Portfólió,
   Kapcsolat és a kibontott csapattag panel közös vizuális nyelve.
   ═══════════════════════════════════════════════════════ */
.stm-services,
.stm-portfolio-section,
.stm-contact-section {
  position: relative;
  background: var(--stm-gradient-accent);
  overflow: hidden;
}
.stm-services > .container-xl,
.stm-portfolio-section > .container-xl,
.stm-contact-section > .container-xl {
  position: relative;
  z-index: 1;
}

/* ── SERVICES ───────────────────────────────────────── */
.stm-service-card {
  background: var(--stm-dark-2);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
  border: 1px solid transparent;
}
.stm-service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--stm-gold);
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}
.stm-service-card:hover { background: var(--stm-dark-3); }
.stm-service-card:hover::after { transform: scaleX(1); }

.stm-service-num {
  font-family: var(--stm-font-title);
  font-size: 4.5rem;
  color: rgba(255,255,0,0.05);
  position: absolute;
  top: 0.75rem; right: 1.25rem;
  line-height: 1;
  pointer-events: none;
}
.stm-service-title {
  font-size: 1.15rem;
  color: var(--stm-text);
  margin-bottom: 0.65rem;
}
.stm-service-divider {
  width: 40px;
  height: 3px;
  background: var(--stm-gold);
  margin-bottom: 1rem;
}
.stm-service-desc {
  font-size: 0.88rem;
  color: var(--stm-text-dim);
  line-height: 1.6;
  margin: 0;
}
.stm-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.stm-tags.stm-tags--team { justify-content: center; }
.stm-tag {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(255,255,0,0.2);
  color: var(--stm-text-muted);
  border-radius: 1px;
}

/* ── PROCESS ────────────────────────────────────────── */
.stm-process-section {
  background: var(--stm-dark-2);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.stm-process-row { position: relative; }

.stm-process-line {
  position: absolute;
  top: 28px;
  left: calc(16.67% + 20px);
  right: calc(16.67% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--stm-gold) 0%, rgba(255,255,0,0.15) 100%);
  z-index: 0;
}

.stm-step-circle {
  width: 56px;
  height: 56px;
  border: 2px solid var(--stm-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ÁTLÁTSZATLAN háttér – ez rejti el a körök között futó
     .stm-process-line vonalat.
     Korábban volt itt egy hover-effekt is (rgba(255,255,0,0.08)), de az
     ÁTTETSZŐ volt: egérrel ráállva a vonal átlátszott a körön, és a
     0,3 s-os átmenet miatt úgy tűnt, mintha a csík behaladna a körbe.
     Ezért a hover-szabály és a transition is kikerült. */
  background: var(--stm-dark-2);
  position: relative;
  z-index: 1;
}

.stm-step-num {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--stm-gold);
  color: var(--stm-dark);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--stm-font-body);
}
.stm-step-title {
  font-size: 1.25rem;
  color: var(--stm-text);
  margin-bottom: 0.5rem;
}
.stm-step-desc {
  font-size: 0.85rem;
  color: var(--stm-text-dim);
  line-height: 1.6;
  margin: 0;
}

/* ── PORTFOLIO ──────────────────────────────────────── */
.stm-portfolio-section {
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Szűrő gombok */
/* Görgető-nyilak a szűrő-sávokhoz – ALAPBÓL REJTVE.
   Csak mobil/tablet nézetben (max-width: 991px) kapnak stílust és
   válnak láthatóvá, mert csak ott van vízszintes görgetés (lásd
   responsive.css). Enélkül desktopon nyers, szürke böngésző-gombként
   jelennének meg, hiszen ott semmilyen szabály nem vonatkozik rájuk. */
.stm-filter-arrow {
  display: none;
}

.stm-filter-btn {
  font-family: var(--stm-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--stm-text-dim);
  background: transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.stm-filter-btn:hover {
  border-color: var(--stm-gold);
  color: var(--stm-gold);
  background: rgba(255,255,0,0.06);
}
/* AKTÍV fő szűrő: kitöltött sárga, fekete felirattal – ugyanúgy, mint az
   "Új" gomb aktív állapota, hogy a fő sorban egységesen és egyértelműen
   látsszon, melyik nézet van kiválasztva. (Az alkategória- és évszűrők
   saját osztályt használnak, azokat ez nem érinti.) */
.stm-filter-btn.active {
  border-color: var(--stm-gold);
  color: var(--stm-dark);
  background: var(--stm-gold);
}

/* "ÚJ" szűrő-gomb – a JS hozza létre, és CSAK akkor, ha van új album.
   Szándékosan feltűnőbb a többinél (sárga keret és pötty), mert ez a
   legfrissebb tartalomra visz, és átnyúlik az összes kategórián. */
.stm-filter-btn--new {
  border-color: rgba(255,255,0,0.45);
  color: var(--stm-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* Kis pötty a felirat előtt – jelzi, hogy ez "élő", friss tartalom */
.stm-filter-btn--new::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stm-gold);
  flex-shrink: 0;
}
.stm-filter-btn--new.active::before {
  background: var(--stm-dark);
}

/* Alkategória szűrők */
.stm-sub-filters {
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.6rem;
  /* Ugyanannyi alul is – enélkül a chipek a sáv ALJÁRA kerültek,
     miközben a görgető-nyilak függőlegesen KÖZÉPRE igazodnak, így
     a nyíl nem a chipek magasságában volt. */
  padding-bottom: 0.6rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--stm-border);
  padding-left: 1rem;
  border-left: 2px solid rgba(255,255,0,0.2);
  margin-bottom: 0;
}
.stm-sub-filter-btn {
  font-family: var(--stm-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--stm-text-dim);   /* volt #4a4a46 – túl sötét, alig olvasható */
  background: transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.stm-sub-filter-btn:hover,
.stm-sub-filter-btn.active {
  border-color: rgba(255,255,0,0.5);
  color: var(--stm-gold);
  background: rgba(255,255,0,0.05);
}

/* ── ÉVSZŰRŐK ────────────────────────────────────────
   Alkategória UTÁN jelenik meg */
.stm-year-filters {
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.6rem;
  /* Ugyanannyi alul is – enélkül a chipek a sáv ALJÁRA kerültek,
     miközben a görgető-nyilak függőlegesen KÖZÉPRE igazodnak, így
     a nyíl nem a chipek magasságában volt. */
  padding-bottom: 0.6rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--stm-border);
  padding-left: 1rem;
  border-left: 2px solid rgba(255,255,0,0.1);
  margin-bottom: 0;
}
.stm-year-filter-btn {
  font-family: var(--stm-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--stm-text-dim);   /* volt #4a4a46 – túl sötét, alig olvasható */
  background: transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.stm-year-filter-btn:hover,
.stm-year-filter-btn.active {
  border-color: rgba(255,255,0,0.35);
  color: rgba(255,255,0,0.8);
  background: rgba(255,255,0,0.07);
}

/* Portfolio rács */
.stm-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(var(--stm-portfolio-cols, 3), 1fr);
  gap: 6px;
}
.stm-portfolio-item {
  aspect-ratio: 1;
  /* ÁTLÁTSZÓ háttér (volt: --stm-dark-3 / #111111). A beúszó animáció
     alatt a csempe még üres része világosabb négyzetként látszott a
     fekete lapháttéren, ami zavaró volt. Így az üres rész egybeolvad
     a háttérrel, és csak a becsúszó kép látszik. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.stm-portfolio-item.stm-item-first {
  grid-column: span 2;
  grid-row: span 2;
  /* A kiemelt csempe SAJÁT MAGÁT méretezi négyzetre (volt: unset).
     Korábban a magassága a két rácssorból jött, a második sor
     magasságát viszont a MELLETTE lévő csempék adják. 2-3 albumnál a
     második sorban nincs mellette semmi, így az a sor nullára
     zsugorodott, és a kiemelt csempe széles téglalap lett (pl. 709×357),
     ráadásul a rés miatt 6 px-szel magasabb a szomszédainál.
     Négyzetként viszont mindig 2 oszlop × 2 sor + rés méretű, bármennyi
     elem van mellette. (A tartalma abszolút pozíciójú burkolóban van,
     és a csempe overflow:hidden, így a kép nem tudja megnyújtani.) */
  aspect-ratio: 1;
}

/* A csempe tartalmának burkolója – EZ kapja a beúszó animációt
   (portfolio.js), nem maga a csempe. Így a csempe overflow:hidden-je
   elvágja a kilógó részt, és a kép a SAJÁT helyének bal széléről
   bukkan elő, nem a rács szélétől.
   A teljes csempét kitölti, hogy a benne lévő abszolút pozíciójú
   elemek (szív, megosztás, felirat) a helyükön maradjanak. */
.stm-tile-slide {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.stm-portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Lágy betöltés – a kép nem "felugrik" amint betöltődik, hanem
   fokozatosan tűnik fel ÉS elmosódva kezd, majd élesedik (blur-up
   hatás) – a JS az onload-nál adja hozzá a stm-loaded osztályt,
   lásd portfolio.js.
   FIGYELEM: a filter tulajdonság NEM összegződik külön szabályokból –
   két "filter:" deklaráció közül mindig csak az egyik érvényesül,
   nem adódnak össze. Ezért ahol a szürkeárnyalat is kell (jelszóval
   védett albumok, lásd lejjebb), ott a blur-t és a grayscale-t
   EGYÜTT, egyetlen értékként kell megadni. */
.stm-portfolio-img {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.03); /* enyhe zoom-out a blur alatt, hogy ne látszódjon "összement" élnek */
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
.stm-portfolio-img.stm-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* ── JELSZÓVAL VÉDETT ALBUM a rácsban ──────────────────
   CSAK a védett albumok fekete-fehérek – így a szürke nem
   dekoráció, hanem JELENTÉS: azonnal, első pillantásra
   elkülöníti a privát albumokat a szabadon böngészhetőktől.
   A kép szándékosan LÁTHATÓ marad (nem rejtjük el), hogy aki
   a saját albumát keresi, fel tudja ismerni a bélyegképről –
   a jelszó a TELJES galériát védi, nem a kirakat-képet. */
.stm-portfolio-img.stm-protected {
  filter: blur(14px) grayscale(100%);
}
.stm-portfolio-img.stm-protected.stm-loaded {
  filter: blur(0) grayscale(100%);
}

/* ── PORTFÓLIÓ CSEMPE FELIRAT – mindig látszik (kategória + dátum),
   a teljes cím csak hoverre/érintésre bővül ki alá ────────────── */
.stm-portfolio-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  min-height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.85rem 0.75rem 0.65rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.8) 45%, transparent 100%);
  transition: min-height 0.5s ease-out;
  pointer-events: none;
}
/* A hover-zóna: a kép, az infó-torony és a felúszó feliratsáv
   burkolója. MINDEN :hover szabály CSAK erre vonatkozik – a szív és
   a megosztás gomb ezen KÍVÜL, a csempe közvetlen gyerekeként van,
   így azok megérintése nem vált ki hover-állapotot (nem úszik fel
   tőlük a szöveg), és a mobil böngésző sem késlelteti a
   kattintásukat. A teljes csempét kitölti, hogy a kép és a
   pozicionált elemek (topleft, caption) ehhez igazodjanak. */
.stm-tile-hover-zone {
  position: absolute;
  inset: 0;
}
.stm-tile-hover-zone:hover .stm-portfolio-caption,
.stm-tile-hover-zone:focus-visible .stm-portfolio-caption {
  min-height: 62%;
}
/* Érintőképernyőn nincs valódi hover, de érintés után a böngésző
   "beragasztja" a hover állapotot, amíg máshova nem koppintasz –
   ugyanez az állapot vezérli a cím/link megjelenését is (lásd fent).
   A fekete háttérnek EZZEL kell szinkronban lennie, nem az :active-vel,
   különben elengedéskor a háttér eltűnik de a szöveg még ott marad. */
@media (hover: none) {
  .stm-tile-hover-zone:hover::before,
  .stm-tile-hover-zone:focus-visible::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 0;
  }
  .stm-tile-hover-zone:hover .stm-portfolio-caption,
  .stm-tile-hover-zone:focus-visible .stm-portfolio-caption {
    min-height: 62%;
  }
}
.stm-overlay-cat {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stm-gold);
}
/* Lakat a kategória-sor végén – jelszóval védett album jelzése.
   A szürkeárnyalatos kép az erős, messziről látható jelzés, ez
   pedig a közelebbi megerősítés. */
.stm-overlay-lock {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0;
  vertical-align: baseline;
}
.stm-overlay-date {
  font-size: 0.77rem;
  color: var(--stm-text-muted);
  margin-top: 0.15rem;
}
.stm-overlay-title-wrap {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin-top 0.5s ease-out;
}
.stm-tile-hover-zone:hover .stm-overlay-title-wrap,
.stm-tile-hover-zone:focus-visible .stm-overlay-title-wrap {
  max-height: 110px;
  opacity: 1;
  margin-top: 0.35rem;
  pointer-events: auto;
}
.stm-overlay-title {
  font-size: 0.87rem;
  letter-spacing: 0.06em;
  color: var(--stm-text);
  pointer-events: auto;
}

/* ── "ÚJ" JELÖLÉS – automatikusan a dátumból számolva,
   sárga háttér, felső sarok ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   DINAMIKUS JELVÉNY-RENDSZER – bal felső "infó-torony"
   (ÚJ/VIDEÓ chip, ha van + statisztika, mindig), jobb felső
   SZÍV (kedvelés, mindig egyedül, soha nem költözik), jobb
   alsó megosztás gomb (önálló, nem a hover részének a része).
   ══════════════════════════════════════════════════════ */
.stm-topleft {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  z-index: 1;
}
.stm-chip-row {
  display: flex;
  gap: 5px;
}
.stm-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
.stm-chip--new {
  background: var(--stm-gold);
  color: var(--stm-dark-3);
}
.stm-chip--video {
  background: var(--stm-dark-3);
  color: var(--stm-gold);
  border: 1px solid var(--stm-gold);
}
.stm-chip--muted {
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--stm-text-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.66rem;
}
.stm-chip-sep {
  margin: 0 4px;
  opacity: 0.5;
}
/* Egy statisztika (ikon + rövidített szám) – a pontos szám a title-ben.
   Ugyanaz az igazítás és rés, mint a címke közvetlen elemeinél. */
.stm-chip-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Szív (kedvelés) – MINDIG egyedül a jobb felső sarokban, minden
   más állapottól függetlenül. Kattintható, kapcsolható. */
.stm-heart-btn {
  position: absolute;
  top: 8px; right: 8px;
  /* z-index: 5 – bőven a gradiens-rétegek (::before z-index:0,
     caption gradiens) FÖLÖTT, hogy semmi ne akadályozhassa a
     kattintást. */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  /* Nagyobb érintés-célméret – a korábbi 5px/8px túl kicsi volt,
     könnyen "mellé" koppintott az ember ujja. */
  padding: 8px 11px;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.stm-heart-btn:hover {
  background: rgba(0,0,0,0.8);
  transform: scale(1.06);
}
.stm-heart-count {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--stm-text-muted);
}

/* Megosztás gomb – önálló, mindig kattintható ikon a jobb alsó
   sarokban, NEM a hoverre bővülő rész tartozéka */
.stm-share-corner-btn {
  position: absolute;
  bottom: 8px; right: 8px;
  /* Ugyanaz a réteg mint a szív gombnál – a gradiensek fölött */
  z-index: 5;
  /* Nagyobb érintés-célméret (volt 28px) */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,0,0.3);
  color: var(--stm-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.stm-share-corner-btn:hover {
  background: rgba(0,0,0,0.85);
}

/* A galéria link a hoverre bővülő részben – most már csak ez van itt */
.stm-overlay-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stm-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0.6rem;
  font-size: 0.81rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stm-gold);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.stm-gallery-link:hover { opacity: 1; color: var(--stm-gold); }
.stm-views-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,0,0.25);
  color: var(--stm-text-muted);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.stm-loading-text {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stm-text-dim);
}

/* ── TEAM ───────────────────────────────────────────── */
/* ── TESTIMONIALS ───────────────────────────────────── */
.stm-testimonials-section {
  background: var(--stm-dark);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.stm-testimonial-card {
  background: var(--stm-dark-2);
  border: 1px solid var(--stm-border);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.3s;
}
.stm-testimonial-card:hover { border-color: rgba(255,255,0,0.2); }
.stm-testimonial-card::before {
  content: '\201C';
  font-family: var(--stm-font-title);
  font-size: 5rem;
  color: rgba(255,255,0,0.08);
  position: absolute;
  top: -0.5rem;
  left: 1.25rem;
  line-height: 1;
}
.stm-review-text {
  font-size: 0.9rem;
  color: var(--stm-text-muted);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
  flex: 1;
}
.stm-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,0,0.1);
  border: 1px solid rgba(255,255,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--stm-font-title);
  font-size: 1rem;
  color: var(--stm-gold);
  flex-shrink: 0;
}
.stm-review-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--stm-text);
}
.stm-review-role {
  font-size: 0.75rem;
  color: var(--stm-text-dim);
  margin-top: 0.1rem;
}

/* ── CALCULATOR ─────────────────────────────────────── */
.stm-calc-info-title {
  font-family: var(--stm-font-body);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--stm-text);
  margin-bottom: 0.9rem;
}
.stm-calc-info-desc {
  font-size: 0.92rem;
  color: var(--stm-text-dim);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

/* Egyedi ajándéktárgyak – magyarázó megjegyzés doboz */
.stm-calc-custom-note {
  font-size: 0.85rem;
  color: var(--stm-text-dim);
  line-height: 1.6;
  background: rgba(255,255,0,0.05);
  border-left: 2px solid rgba(255,255,0,0.3);
  padding: 0.75rem 1rem;
  margin: 0;
}

.stm-calc-features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stm-calc-features li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.88rem;
  color: var(--stm-text-muted);
}
.stm-calc-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--stm-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.stm-calc-form {
  background: var(--stm-dark-2);
  border: 1px solid var(--stm-border);
  border-radius: 4px;
}

.stm-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stm-text-dim);
  margin-bottom: 0.5rem;
}
.stm-input,
.stm-select {
  width: 100%;
  background: var(--stm-dark-3);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--stm-text);
  font-family: var(--stm-font-body);
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  border-radius: 2px;
  appearance: none;
  outline: none;
  transition: border-color 0.2s;
}

/* A lefelé-nyíl CSAK a legördülő mezőknél kell – a sima szöveges
   input mezőknek (Meno, E-mail, Telefón) nincs legördülő tartalmuk,
   ott hibás jelzés lenne. Korábban egy kombinált szelektor miatt
   (.stm-input, .stm-select { ... }) minden mezőre rákerült. */
.stm-select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FFFF00' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.stm-textarea {
  width: 100%;
  background: var(--stm-dark-3);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--stm-text);
  font-family: var(--stm-font-body);
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
  min-height: 110px;
}
.stm-input:focus,
.stm-select:focus,
.stm-textarea:focus {
  border-color: rgba(255,255,0,0.45);
  box-shadow: none;
}
.stm-select option { background: var(--stm-dark-3); }

/* Kötelező mező jelölés – csillag a címke mellett, halvány
   magyarázó megjegyzés a küldés gomb előtt */
.stm-required-mark {
  color: var(--stm-gold);
}
.stm-required-note {
  font-size: 0.78rem;
  color: var(--stm-text-dim);
  margin: -0.25rem 0 0.5rem;
}
/* Űrlapvédelem (0b/B1d-2c): csalimezők – a böngésző nem jeleníti meg és
   nem tölti ki automatikusan (display:none), a forráskódot olvasó bot igen */
.stm-fg-hp {
  display: none !important;
}

/* GDPR tájékoztató a küldés gomb előtt (0c) – a link aranyszínű, aláhúzott */
.stm-privacy-note {
  margin-top: 0.25rem;
  line-height: 1.5;
}
.stm-privacy-note a {
  color: var(--stm-gold);
  text-decoration: underline;
}

/* Client-oldali validáció hiba-állapota – piros szegély + kis
   hibaüzenet közvetlenül a mező alatt, oldal-újratöltés nélkül */
.stm-input.stm-input-error,
.stm-textarea.stm-input-error {
  border-color: var(--stm-error);
}
.stm-field-error {
  color: var(--stm-error);
  font-size: 0.78rem;
  margin-top: 0.35rem;
}

.stm-calc-result {
  background: var(--stm-dark-3);
  border: 1px solid rgba(255,255,0,0.25);
  border-radius: 4px;
  padding: 1.75rem;
}
.stm-result-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stm-text-dim);
  margin-bottom: 0.4rem;
}
.stm-result-price {
  font-family: var(--stm-font-title);
  font-size: 3.2rem;
  color: var(--stm-gold);
  line-height: 1;
}
.stm-result-note {
  font-size: 0.75rem;
  color: var(--stm-text-dim);
  margin-top: 0.4rem;
}

/* ── CONTACT ────────────────────────────────────────── */
.stm-contact-section {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.stm-contact-title {
  font-family: var(--stm-font-body);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--stm-text);
  margin-bottom: 1.5rem; /* egységesen a többi szekcióval (volt: 0.9rem) */
}
.stm-contact-desc {
  font-size: 0.92rem;
  color: var(--stm-text-dim);
  line-height: 1.7;
  max-width: 40ch;
}
.stm-contact-list { margin: 0; padding: 0; }
.stm-contact-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stm-contact-list li:last-child { border-bottom: none; }
.stm-contact-icon { flex-shrink: 0; margin-top: 2px; }
.stm-cd-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stm-text-dim);
  margin-bottom: 0.15rem;
}
.stm-cd-value { font-size: 0.88rem; color: var(--stm-text-muted); }
.stm-cd-name { color: var(--stm-text-dim); margin-right: 4px; }
.stm-contact-link {
  color: var(--stm-text-muted);
  transition: color 0.2s;
}
.stm-contact-link:hover { color: var(--stm-text); }
.stm-contact-link-gold { color: var(--stm-gold); transition: opacity 0.2s; }
.stm-contact-link-gold:hover { opacity: 0.8; color: var(--stm-gold); }

.stm-contact-form {
  background: var(--stm-dark-3);
  border: 1px solid var(--stm-border);
  border-radius: 4px;
}
.stm-form-title {
  font-size: 1.4rem;
  color: var(--stm-text);
}

.stm-alert-success {
  background: rgba(25,135,84,0.15);
  border: 1px solid rgba(25,135,84,0.4);
  color: var(--stm-success);
  border-radius: 2px;
  font-size: 0.9rem;
  /* Az eltűnéshez (lásd .stm-alert-hide): a magasság is animálható
     legyen, ne csak az átlátszóság – így a form nem ugrik hirtelen. */
  max-height: 400px;
  overflow: hidden;
  transition: opacity 0.6s ease, max-height 0.6s ease, margin 0.6s ease,
              padding 0.6s ease, border-width 0.6s ease;
}
/* 10 mp után a contact.php adja hozzá: elhalványul ÉS összecsukódik */
.stm-alert-success.stm-alert-hide {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

/* Pipa-animáció sikeres form küldésnél – a kör előbb "kirajzolódik",
   utána a pipa, mint egy klasszikus sikeres-akció visszajelzés */
.stm-checkmark {
  width: 52px;
  height: 52px;
  display: block;
  margin: 0 auto 0.6rem;
}
.stm-checkmark-circle {
  stroke: var(--stm-success);
  stroke-width: 2;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: stmCheckCircle 0.6s ease forwards;
}
.stm-checkmark-check {
  stroke: var(--stm-success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: stmCheckMark 0.35s ease forwards;
  animation-delay: 0.55s; /* a kör kirajzolódása UTÁN indul */
}
@keyframes stmCheckCircle { to { stroke-dashoffset: 0; } }
@keyframes stmCheckMark   { to { stroke-dashoffset: 0; } }

.stm-alert-error {
  background: rgba(220,53,69,0.15);
  border: 1px solid rgba(220,53,69,0.4);
  color: var(--stm-error);
  border-radius: 2px;
  font-size: 0.9rem;
}

/* ── LIGHTBOX ───────────────────────────────────────── */
.stm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: flex;
  /* Felülre igazítva – a .stm-lb-inner fix felső térközzel kezdődik,
     így a kép teteje (és a benne lévő szív) MINDIG ugyanabban a
     magasságban van, akármennyi szöveg van a kép alatt. */
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  overflow-y: auto;
}
.stm-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.stm-lb-backdrop {
  /* FIXED, nem absolute: a .stm-lightbox görgethető (overflow-y: auto),
     és egy absolute pozíciójú backdrop csak a KEZDŐ képernyőnyi
     területet fedi – lejjebb görgetve "kicsúszik" alóla, és
     átlátszik a mögötte lévő oldal (ez volt a "szétdobódó háttér"). */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.90);
  cursor: pointer;
}
.stm-lb-inner {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  /* NINCS max-height korlát és NINCS függőleges középre igazítás –
     a konténer fentről, fix térközzel kezdődik (margin-top), a
     tartalom lefelé növekszik. Így a kép teteje mindig egy helyen
     van, a szöveg pedig alatta hosszabbodhat anélkül hogy a képet
     feljebb tolná. */
  margin-top: 4vh;
  margin-bottom: 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stm-lb-img-wrap {
  position: relative;
  background: var(--stm-dark-3);
  border: 1px solid rgba(255,255,0,0.15);
  border-radius: 4px;
  overflow: hidden;
  max-width: 80vw;
  max-height: 70vh;
  min-width: 280px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stm-lb-img-wrap img {
  max-width: 80vw;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease;
}
/* Előnézet: a rácsból már gyorsítótárban lévő bélyegkép, amíg a nagy
   kép töltődik (lightbox.js, showImage). Enyhén elmosva, hogy ne
   tűnjön "rossz minőségűnek" – a nagy kép megérkezésekor kiélesedik.
   A keret overflow:hidden, így az elmosás széle nem lóg ki. */
.stm-lb-img-wrap img.is-preview {
  filter: blur(6px);
}
.stm-lb-placeholder {
  width: 480px;
  height: 340px;
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--stm-dark-3);
}
.stm-lb-placeholder p {
  font-size: 0.78rem;
  color: var(--stm-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
/* Az "színpad" (kép + X gomb + nyilak) KÜLÖN konténer a szöveges
   résztől (cím, liga, dátum) – így a nyilak és az X pozíciója
   KIZÁRÓLAG a kép magasságához igazodik, nem a teljes (változó
   hosszúságú feliratot is tartalmazó) tartalomhoz. Enélkül egy
   hosszabb esemény-név lejjebb tolná a nyilakat, mert azok a teljes
   konténer 50%-ánál középre igazodtak volna. */
.stm-lb-stage {
  position: relative;
}

.stm-lb-close {
  position: absolute;
  top: -1rem; right: -1rem;
  width: 36px; height: 36px;
  background: var(--stm-dark-2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--stm-text);
  font-size: 1.1rem;
  z-index: 3; /* a lapozó zónák (z-index 2) FÖLÖTT – a jobb felső sarokban átfednek */
  line-height: 1;
}
.stm-lb-close:hover {
  background: var(--stm-gold);
  color: var(--stm-dark);
  border-color: var(--stm-gold);
}
/* ── LAPOZÓ ZÓNÁK ──────────────────────────────────────
   A korábbi kis kör alakú gombok helyett a kép TELJES MAGASSÁGÁBAN,
   a két szélén egy-egy érintési zóna – mobilon a kis gombokat nehéz
   volt eltalálni. Minden eszközön (desktop, tablet, mobil) ugyanígy
   működik.
   Szélesség: a kép negyede, de legalább 56px (az Apple 44pt-os és a
   Google 48dp-s érintési minimuma fölött), és legfeljebb 160px, hogy
   nagy képernyőn se takarjon ki túl sokat a fotóból.
   A sötét gradiens SZÁNDÉKOSAN enyhe, mert desktopon is folyamatosan
   látszik, és egy fotós portfólióban nem szabad nagyon sötétíteni a
   kép széleit. */
.stm-lb-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 25%, 160px);
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--stm-text);
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.stm-lb-prev {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 100%);
}
.stm-lb-next {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(270deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 100%);
}

/* A SÁRGA réteg külön pszeudo-elemen, mert a gradiens-hátteret a
   böngésző nem tudja átúsztatni – az átlátszóságot viszont igen. */
.stm-lb-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.stm-lb-prev::after { background: linear-gradient(90deg,  rgba(255,255,0,0.30) 0%, rgba(255,255,0,0) 100%); }
.stm-lb-next::after { background: linear-gradient(270deg, rgba(255,255,0,0.30) 0%, rgba(255,255,0,0) 100%); }

/* A kör alakú nyíl a zóna külső szélén */
.stm-lb-nav-icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Kiemelés: egérrel CSAK valódi hover-képes eszközön (különben
   érintés után "beragadna" a sárga), érintésre pedig az .is-pressed
   osztály (lightbox.js adja hozzá egy pillanatra). */
@media (hover: hover) {
  .stm-lb-nav:hover::after { opacity: 1; }
  .stm-lb-nav:hover .stm-lb-nav-icon {
    background: var(--stm-gold);
    color: var(--stm-dark);
    border-color: var(--stm-gold);
  }
}
.stm-lb-nav.is-pressed::after { opacity: 1; }
.stm-lb-nav.is-pressed .stm-lb-nav-icon {
  background: var(--stm-gold);
  color: var(--stm-dark);
  border-color: var(--stm-gold);
}
/* Billentyűzetes navigációnál is látsszon, hol a fókusz */
.stm-lb-nav:focus-visible { outline: none; }
.stm-lb-nav:focus-visible .stm-lb-nav-icon {
  outline: 2px solid var(--stm-gold);
  outline-offset: 2px;
}

.stm-lb-cat {
  font-size: 0.7rem;
  color: var(--stm-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.stm-lb-league {
  font-size: 0.85rem;
  color: var(--stm-text-muted);
  font-style: italic;
  margin-bottom: 0.25rem;
}
.stm-lb-league:empty { display: none; }
.stm-lb-title {
  font-family: var(--stm-font-title);
  font-size: 1.6rem;
  color: var(--stm-text);
  letter-spacing: 0.06em;
}
.stm-lb-date {
  font-size: 0.8rem;
  color: var(--stm-text-dim);
  margin-top: 0.5rem;
}
.stm-lb-date:empty { display: none; }

/* Jelvények (ÚJ, VIDEÓ, megtekintés, megosztás, kedvelés) – egy
   vízszintes sorban, mert a lightboxban bőven van hely. */
.stm-lb-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.stm-lb-badges:empty { display: none; }
.stm-lb-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
}
.stm-lb-chip--new {
  background: var(--stm-gold);
  color: var(--stm-dark-3);
}
.stm-lb-chip--video {
  background: transparent;
  color: var(--stm-gold);
  border: 1px solid var(--stm-gold);
}
.stm-lb-chip--muted {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--stm-text-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.stm-lb-heart-btn {
  position: absolute;
  top: 23px; right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.stm-lb-heart-btn:hover {
  background: rgba(0,0,0,0.85);
  transform: scale(1.05);
}
.stm-lb-heart-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--stm-text-muted);
}

.stm-lb-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  /* A jelszó-buborék pozicionálási alapja */
  position: relative;
}
.stm-lb-gallery-wrap { min-height: 36px; }

/* Sötétítő réteg a buborék MÖGÉ – hogy a buborék elkülönüljön a
   háttértől, és látszódjon hogy most erre kell figyelni. z-index a
   buborék (1060) ALATT, de a lightbox (1040) FÖLÖTT. */
.stm-lb-pwpop-backdrop {
  position: fixed;
  /* Külön top/right/bottom/left az "inset: 0" rövidítés HELYETT –
     azt régebbi mobil böngészők (iOS Safari 14.1 előtt) nem ismerik,
     és akkor a réteg méret nélkül maradna. A width/height csak
     biztonsági háló ugyanerre. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1055;
  /* Világosabb mint a lightbox saját háttere (0.90) – itt a buborékra
     kell figyelni, de a mögötte lévő tartalom maradjon érzékelhető.
     FIGYELEM: ha ezt módosítod, a lightbox.js inline biztonsági
     hálójában is állítsd át ugyanerre (bs.background). */
  background: rgba(0,0,0,0.80);
  cursor: pointer;
}

/* ── JELSZÓ-BUBORÉK (védett galéria) ──────────────────
   ÖNÁLLÓ, ÚJRAHASZNOSÍTHATÓ elem – a lightbox galéria-gombjáról ÉS
   a portfólió csempén felúszó galéria-linkről is ugyanez nyílik.
   position: fixed – a JS számolja ki a helyét a kattintott elem
   pozíciójából, ezért nem befolyásolja semmilyen szülő layoutját
   (nincs görgetés, a kép és a szív nem mozdul el).
   FIX SZÉLESSÉG: nem az esemény nevének hosszától függ.
   EGYELŐRE CSAK DESIGN – a gomb még nem csinál semmit. */
.stm-lb-pwpop {
  position: fixed;
  width: 340px;          /* FIX szélesség – 320px + 20px hely a lakatnak a form sorban */
  max-width: calc(100vw - 2rem);
  z-index: 1060;         /* a lightbox (1040) FÖLÖTT */
  background: var(--stm-dark-3);
  border: 1px solid rgba(255,255,0,0.3);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.75);
  padding: 0.85rem 0.95rem 0.95rem;
  text-align: left;
}
/* Kis nyíl felfelé, a kattintott gomb irányába – a bal pozícióját
   a JS állítja be, hogy tényleg a gombra mutasson */
.stm-lb-pwpop::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--stm-pwpop-arrow, 50%);
  margin-left: -7px;
  width: 12px;
  height: 12px;
  background: var(--stm-dark-3);
  border-left: 1px solid rgba(255,255,0,0.3);
  border-top: 1px solid rgba(255,255,0,0.3);
  transform: rotate(45deg);
}
/* Ha a buborék a gomb FÖLÉ került (mert alatta nem férne el), a
   nyíl átkerül az ALJÁRA és lefelé mutat – így mindig a gomb
   irányába néz, nem az ellenkezőbe. */
.stm-lb-pwpop.stm-lb-pwpop--above::before {
  top: auto;
  bottom: -7px;
  border-left: none;
  border-top: none;
  border-right: 1px solid rgba(255,255,0,0.3);
  border-bottom: 1px solid rgba(255,255,0,0.3);
}

/* MOBIL változat: a buborék a képernyő FELSŐ részén, középen –
   így a felugró billentyűzet (ami az alsó felét elfedi) nem
   takarhatja el. Itt NINCS nyíl, mert nem a gombhoz igazodik. */
.stm-lb-pwpop.stm-lb-pwpop--mobile {
  width: calc(100vw - 2rem);
  max-width: 400px;
}
.stm-lb-pwpop.stm-lb-pwpop--mobile::before {
  display: none;
}
.stm-lb-pwpop-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--stm-gold);
  font-family: var(--stm-font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stm-lb-pwpop-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--stm-text-dim);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 0.5rem;
  transition: color 0.2s;
}
.stm-lb-pwpop-close:hover { color: var(--stm-gold); }
.stm-lb-pwpop-note {
  margin: 0.5rem 0 0.7rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--stm-text-muted);
}
.stm-lb-pwpop-form {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}
/* A mező + szem-ikon közös burkolója. EZ a flex-elem (volt: maga az
   input), így az ikon a mezőn BELÜL fér el, nem tolja ki a gombot. */
.stm-lb-pwpop-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.stm-lb-pwpop-input {
  flex: 1;
  min-width: 0;   /* nélküle a flex-elem nem tud a tartalmánál kisebb lenni */
  font-size: 0.85rem;
  /* Jobb oldali belső margó: a szem-ikon helye – különben a hosszú
     jelszó befutna az ikon alá */
  padding: 0.5rem 2.2rem 0.5rem 0.7rem;
}

/* Szem-ikon: NYOMVA TARTÁSRA mutatja a jelszót, elengedésre rejti.
   A látható ikon kicsi (17px), de a kattintható terület 32px – az
   érintési célokra ajánlott minimum közelében (lásd a hero-pöttyöknél
   is alkalmazott elvet). */
.stm-lb-pwpop-eye {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--stm-text-dim);
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.stm-lb-pwpop-eye:hover { color: var(--stm-gold); }
/* Nyomva tartás közben: sárga, hogy látsszon az aktív állapot */
.stm-lb-pwpop-eye.is-showing { color: var(--stm-gold); }

/* A két ikon egymásra helyezve – a JS csak az opacitást váltja.
   Alapból a ÁTHÚZOTT szem látszik (a jelszó rejtve van). */
.stm-lb-pwpop-eye svg {
  grid-area: 1 / 1;
  transition: opacity 0.18s;
}
.stm-lb-pwpop-eye { display: grid; place-items: center; }
.stm-lb-pwpop-eye .stm-eye-open   { opacity: 0; }
.stm-lb-pwpop-eye .stm-eye-closed { opacity: 1; }
.stm-lb-pwpop-eye.is-showing .stm-eye-open   { opacity: 1; }
.stm-lb-pwpop-eye.is-showing .stm-eye-closed { opacity: 0; }
.stm-lb-pwpop-btn {
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
}

/* Lakat: két ikon egymásra helyezve, a váltás sima ÁTTŰNÉS (fade),
   nem forgás-animáció – erre kérte a user, "nem kell sok animáció". */
.stm-lb-lock {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
  width: 16px;
  height: 16px;
}
.stm-lb-lock svg {
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
}
/* Alapból: ZÁRT látszik, NYITOTT rejtve */
.stm-lock-closed { opacity: 1; }
.stm-lock-open   { opacity: 0; }
/* .is-open esetén: fordítva */
.stm-lb-lock.is-open .stm-lock-closed { opacity: 0; }
.stm-lb-lock.is-open .stm-lock-open   { opacity: 1; }

/* Lakat a galéria-gombon – jelzi hogy jelszó kell hozzá */
.stm-lb-gallery-lock {
  margin-left: 0.35rem;
  font-size: 0.72rem;
}
.stm-lb-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stm-gold);
  border: 1px solid rgba(255,255,0,0.3);
  padding: 0.45rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.stm-lb-share-btn:hover {
  background: rgba(255,255,0,0.08);
  border-color: var(--stm-gold);   /* ugyanúgy mint a galéria gombnál */
}
.stm-lb-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stm-gold);
  border: 1px solid rgba(255,255,0,0.3);
  padding: 0.45rem 1rem;
  border-radius: 2px;
  transition: all 0.2s;
}
.stm-lb-gallery-link:hover {
  background: rgba(255,255,0,0.08);
  border-color: var(--stm-gold);
  color: var(--stm-gold);
}
.stm-lb-counter {
  font-size: 0.72rem;
  color: var(--stm-text-dim);
  margin-top: 0.6rem;
  letter-spacing: 0.1em;
}


/* ── TESTIMONIALS CAROUSEL ──────────────────────────── */
.stm-testimonials-carousel { position: relative; }

/* Kártyák egyforma magassága slide-onként */
.stm-testimonials-carousel .carousel-item .row {
  align-items: stretch;
}

/* Indikátor pontok */
.stm-carousel-indicators {
  position: relative;
  bottom: auto;
  margin: 1.5rem 0 0;
  justify-content: center;
  gap: 0.4rem;
  /* Bootstrap felülírás */
  --bs-carousel-indicator-width: 8px;
  --bs-carousel-indicator-height: 8px;
  --bs-carousel-indicator-spacer: 4px;
  --bs-carousel-indicator-active-bg: #FFFF00;
}
.stm-carousel-indicators [data-bs-target],
.stm-carousel-indicators button {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: rgba(255,255,255,0.2) !important;
  border-top: none !important;
  border-bottom: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 2px !important;
  opacity: 1 !important;
  transition: background-color 0.2s, transform 0.2s !important;
  flex-shrink: 0;
  box-sizing: border-box;
}
.stm-carousel-indicators [data-bs-target].active,
.stm-carousel-indicators button.active {
  background-color: var(--stm-gold) !important;
  transform: scale(1.3);
}

/* Prev/Next nyilak */
.stm-carousel-prev,
.stm-carousel-next {
  position: absolute;
  top: calc(50% - 24px);
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stm-text);
  opacity: 1;
  transition: all 0.2s;
  z-index: 10;
  cursor: pointer;
  right: -20px;
}
.stm-carousel-prev:hover,
.stm-carousel-next:hover {
  background: var(--stm-gold);
  color: var(--stm-dark);
  border-color: var(--stm-gold);
}
.stm-carousel-prev { left: -20px; }

/* Bootstrap carousel transition fix */
.stm-testimonials-carousel .carousel-item {
  transition: transform 0.5s ease-in-out;
}
/* Az active slide mindig látható */
.stm-testimonials-carousel .carousel-item.active {
  display: block;
}

@media (max-width: 991px) {
  .stm-carousel-prev { left: -10px; }
  .stm-carousel-next { right: -10px; }
  .stm-testimonials-carousel {
    padding: 0 2rem;
  }
}
@media (max-width: 575px) {
  .stm-carousel-prev,
  .stm-carousel-next { display: none; }
  .stm-testimonials-carousel { padding: 0; }
}

/* ── PORTFOLIO PAGINATION ───────────────────────────── */
.stm-pagination-wrap { margin-top: 2rem; }

.stm-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;    /* a lista-pöttyök eltüntetése */
  padding: 0;
  margin: 0;
  justify-content: center;
}

.stm-page-btn {
  font-family: var(--stm-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--stm-text-dim);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stm-page-btn:hover:not(.disabled) {
  border-color: var(--stm-gold);
  color: var(--stm-gold);
  background: rgba(255,255,0,0.05);
}
.stm-page-btn.active {
  background: var(--stm-gold);
  border-color: var(--stm-gold);
  color: var(--stm-dark);
  font-weight: 700;
  cursor: default;
}
.stm-page-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.stm-page-ellipsis {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--stm-text-dim);
  font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════
   GDPR COOKIE BANNER
   ══════════════════════════════════════════════════════ */

/* ── BANNER ─────────────────────────────────────────── */
.stm-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--stm-dark-2);
  border-top: 2px solid rgba(255,255,0,0.25);  /* vastagabb, láthatóbb vonal */
  padding: 1.5rem 0;                             /* több légzés */
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -6px 32px rgba(0,0,0,0.6);      /* erősebb árnyék */
}
/* Ideiglenes elrejtés amíg a mobil menü nyitva van – NEM
   consent-állapot, csak vizuális, hogy kisebb képernyőn a két
   elem ne zsúfolódjon egymásra. A menü bezárásakor visszatér. */
.stm-cookie-banner.stm-cookie-banner--paused {
  transform: translateY(150%) !important;
}
.stm-cookie-banner.visible {
  transform: translateY(0);
}

.stm-cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.stm-cookie-text {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;        /* kicsit nagyobb szöveg */
  color: var(--stm-text-muted);
  line-height: 1.65;
}

.stm-cookie-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--stm-gold);
}

.stm-cookie-privacy-link {
  color: var(--stm-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: inherit;
  margin-left: 0.35rem;
  transition: opacity 0.2s;
}
.stm-cookie-privacy-link:hover { opacity: 0.75; color: var(--stm-gold); }

.stm-cookie-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── BANNER GOMBOK ──────────────────────────────────── */
.stm-cookie-btn {
  font-family: var(--stm-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;   /* azonos az stm-btn-primary-val */
  border-radius: var(--stm-radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  /* line-height: 1.5 – FONTOS hogy egyezzen a .stm-btn-primary és
     .stm-nl-submit gombokéval (azok <a>/<button> elemek, amik a
     Bootstrap .btn alap 1.5-ös line-height-ját öröklik). Korábban
     itt explicit line-height:1 volt, ami azonos padding/betűméret
     mellett is ~6-7px-rel alacsonyabb gombot eredményezett. */
  line-height: 1.5;
}

.stm-cookie-btn-settings {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: var(--stm-text-muted);
}
.stm-cookie-btn-settings:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--stm-text);
}

.stm-cookie-btn-necessary {
  background: transparent;
  border-color: rgba(255,255,0,0.35);
  color: var(--stm-gold);
}
.stm-cookie-btn-necessary:hover {
  background: rgba(255,255,0,0.06);
  border-color: var(--stm-gold);
}

.stm-cookie-btn-accept {
  background: var(--stm-gold);
  border-color: var(--stm-gold);
  color: var(--stm-dark);
}
.stm-cookie-btn-accept:hover {
  background: var(--stm-gold-l);
  border-color: var(--stm-gold-l);
}

/* ── MODAL ──────────────────────────────────────────── */
.stm-cookie-modal-dialog {
  max-width: 520px;
}

.stm-cookie-modal {
  background: var(--stm-dark-2);
  border: 1px solid rgba(255,255,0,0.15);
  border-radius: 6px;
  color: var(--stm-text);
}

.stm-cookie-modal-header {
  background: var(--stm-dark-3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1.25rem 1.5rem;
}

.stm-cookie-modal-title {
  font-family: var(--stm-font-title);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: var(--stm-text);
  display: flex;
  align-items: center;
  margin: 0;
}

.stm-cookie-modal-body {
  padding: 1.5rem;
  background: var(--stm-dark-2);
}

.stm-cookie-modal-intro {
  font-size: 0.875rem;
  color: var(--stm-text-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* ── KATEGÓRIA SOROK ────────────────────────────────── */
.stm-cookie-category {
  padding: 1rem 0;
  border-bottom: 1px solid var(--stm-border);
}
.stm-cookie-category:last-child { border-bottom: none; }

.stm-cookie-cat-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--stm-text);
  margin-bottom: 0.3rem;
}

.stm-cookie-cat-desc {
  font-size: 0.8rem;
  color: var(--stm-text-dim);
  line-height: 1.6;
  margin: 0;
}

/* ── BOOTSTRAP SWITCH OVERRIDE ──────────────────────── */
.stm-cookie-switch {
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.stm-cookie-switch .form-check-input {
  width: 2.5rem;
  height: 1.35rem;
  cursor: pointer;
  background-color: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  transition: background-color 0.2s;
}
.stm-cookie-switch .form-check-input:checked {
  background-color: var(--stm-gold);
  border-color: var(--stm-gold);
}
.stm-cookie-switch .form-check-input:disabled {
  opacity: 1;
  cursor: not-allowed;
  background-color: rgba(255,255,0,0.3);
}
.stm-cookie-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(255,255,0,0.2);
}

/* ── MODAL FOOTER ───────────────────────────────────── */
/* A gombok EGYMÁS ALATT, teljes szélességben – ugyanaz az elv mint
   a hírlevél modalnál: így akármilyen hosszú a fordítás (a magyar
   szöveg hosszabb mint a szlovák), sosem törik szét a sor. */
.stm-cookie-modal-footer {
  background: var(--stm-dark-3);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1rem 1.5rem;
  gap: 0.5rem;
  flex-direction: column;
  align-items: stretch;
}
.stm-cookie-modal-footer .stm-cookie-btn {
  width: 100%;
  margin: 0;
}

/* ── RESPONSIVE ─────────────────────────────────────── */

/* A fogaskerék ikon ALAPBÓL rejtett – csak álló telefonon jelenik meg,
   desktopon és tableten a gomb felirattal marad, mint eddig. */
.stm-cookie-gear {
  display: none;
  width: 18px;
  height: 18px;
}

/* TABLET + FEKVŐ TELEFON (768–1199px): a szöveg itt a gombok mellett
   3–4 sorba tört, a gombok pedig a sor közepén "lebegtek". Ezért a
   szöveg teljes szélességben megy felül, alatta a gombok egy sorban,
   jobbra igazítva. 1200px fölött (desktop) marad az egysoros elrendezés. */
@media (min-width: 768px) and (max-width: 1199px) {
  .stm-cookie-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .stm-cookie-text { flex: 0 0 auto; }
  .stm-cookie-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

/* ÁLLÓ TELEFON (767px alatt):
     [ ⚙ ] [      Csak szükségesek      ]
     [        Összes elfogadása         ]
   A fogaskerék minden nyelven ugyanakkora, így a sorok nem függnek a
   felirat hosszától. A "Csak szükségesek" majdnem teljes szélességű,
   tehát nagyjából ugyanolyan feltűnő mint az "Összes elfogadása" –
   ezt az uniós adatvédelmi ajánlások el is várják. */
@media (max-width: 767px) {
  .stm-cookie-banner { padding: 1.25rem 0; }
  .stm-cookie-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .stm-cookie-text { flex: 0 0 auto; }
  .stm-cookie-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  /* Csak a SÁV gombjaira – a beállítások modal is .stm-cookie-btn-t használ */
  .stm-cookie-actions .stm-cookie-btn {
    width: 100%;
    text-align: center;
  }
  .stm-cookie-actions .stm-cookie-btn-settings {
    width: 48px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stm-cookie-gear { display: block; }
  /* Vizuálisan rejtett, de képernyőolvasóval olvasható felirat */
  .stm-cookie-btn-settings .stm-cookie-btn-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .stm-cookie-btn-accept { grid-column: 1 / -1; }

  /* Banner felett a WA gomb – a sáv valódi magasságát a gdpr.js
     állítja be a --cookie-banner-h változóba */
  .stm-cookie-banner.visible ~ .stm-wa-wrap,
  body:has(.stm-cookie-banner.visible) .stm-wa-wrap {
    bottom: calc(var(--cookie-banner-h, 160px) + 1rem);
  }
}

/* ── PRIVACY PAGE ───────────────────────────────────── */
.stm-privacy-page {
  background: var(--stm-dark);
  min-height: 80vh;
}
.stm-privacy-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--stm-text);
  margin-bottom: 0.4rem;
}
.stm-privacy-updated {
  font-size: 0.82rem;
  color: var(--stm-text-dim);
  margin-bottom: 2.5rem;
}
.stm-privacy-content h2 {
  font-size: 1.15rem;
  color: var(--stm-gold);
  margin: 2rem 0 0.6rem;
  font-family: var(--stm-font-body);
  font-weight: 600;
  letter-spacing: 0;
}
.stm-privacy-content p,
.stm-privacy-content li {
  font-size: 0.9rem;
  color: var(--stm-text-muted);
  line-height: 1.75;
}
/* Linkek az adatkezelési tájékoztatóban – egységesen aranyszínűek
   (a böngésző alapértelmezett kékje helyett), mint az űrlap privacy linkje */
.stm-privacy-content a {
  color: var(--stm-gold);
  text-decoration: underline;
}
.stm-privacy-content a:hover,
.stm-privacy-content a:focus {
  text-decoration: none;
}
.stm-privacy-content ul {
  padding-left: 1.25rem;
}
/* Adatkezelő adatai – halvány sárga háttér, teljes szélességben
   a tartalmi oszlopon belül, hogy kiemelkedjen a sima szövegből */
.stm-privacy-operator {
  background: rgba(255, 255, 0, 0.06);
  border: 1px solid rgba(255, 255, 0, 0.18);
  border-radius: 4px;
  padding: 1.1rem 1.3rem;
  margin: 0.75rem 0 1.5rem;
}
.stm-privacy-operator p {
  margin: 0;
}
.stm-privacy-content code {
  background: var(--stm-dark-3);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  font-size: 0.83rem;
  color: var(--stm-gold);
}
.stm-privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1rem 0;
}
.stm-privacy-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  background: var(--stm-dark-3);
  color: var(--stm-text);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stm-privacy-table td {
  padding: 0.55rem 0.75rem;
  color: var(--stm-text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}
.stm-privacy-table td:first-child { font-family: monospace; font-size: 0.8rem; color: var(--stm-gold); }

/* Breadcrumb */
.stm-breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}
.stm-breadcrumb .breadcrumb-item a {
  color: var(--stm-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.stm-breadcrumb .breadcrumb-item a:hover { color: var(--stm-gold); }
.stm-breadcrumb .breadcrumb-item.active { color: var(--stm-text-dim); }
.stm-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--stm-text-dim);
}

/* Cookie settings gomb a footerben */
.stm-cookie-settings-btn {
  font-family: var(--stm-font-body);
  font-size: 0.75rem;
  color: var(--stm-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stm-cookie-settings-btn:hover { color: var(--stm-gold); }

/* ══════════════════════════════════════════════════════
   NEWSLETTER POPUP
   ══════════════════════════════════════════════════════ */

.stm-nl-dialog { max-width: 500px; }

.stm-nl-modal {
  background: var(--stm-dark-2);
  border: 1px solid rgba(255,255,0,0.2);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* X bezárás gomb */
.stm-nl-close-x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--stm-text-muted);
  transition: all 0.2s;
}
.stm-nl-close-x:hover { background: var(--stm-gold); color: var(--stm-dark); border-color: var(--stm-gold); }

/* Vizuális sáv */
.stm-nl-visual {
  background: linear-gradient(135deg, #0a0a00 0%, #111100 100%);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  border-bottom: 1px solid rgba(255,255,0,0.1);
}

.stm-nl-camera-icon {
  position: relative;
  z-index: 1;
  animation: nl-pulse 2.5s ease-in-out infinite;
}

@keyframes nl-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.85; }
}

.stm-nl-decorlines {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.stm-nl-decorlines span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,0,0.15), transparent);
  left: 0; right: 0;
}
.stm-nl-decorlines span:nth-child(1) { top: 30%; animation: nl-line 3s ease-in-out infinite; }
.stm-nl-decorlines span:nth-child(2) { top: 55%; animation: nl-line 3s ease-in-out infinite 1s; }
.stm-nl-decorlines span:nth-child(3) { top: 75%; animation: nl-line 3s ease-in-out infinite 2s; }

@keyframes nl-line {
  0%, 100% { opacity: 0; transform: scaleX(0.3); }
  50%       { opacity: 1; transform: scaleX(1); }
}

/* Tartalom */
.stm-nl-body {
  padding: 1.75rem 1.75rem 1.5rem;
}

.stm-nl-title {
  font-family: var(--stm-font-title);
  font-size: 1.7rem;
  color: var(--stm-text);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.stm-nl-text {
  font-size: 0.88rem;
  color: var(--stm-text-muted);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

/* Előnyök felsorolása – rövid, átfutható pontok a hosszú bekezdés
   helyett, sárga pipával mint vizuális horgony */
.stm-nl-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.stm-nl-benefits li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  color: var(--stm-text-muted);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
.stm-nl-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--stm-gold);
  font-weight: 700;
}
.stm-nl-benefits li:last-child { margin-bottom: 0; }

.stm-nl-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stm-text-dim);
  margin-bottom: 0.5rem;
}

/* A gomb MINDIG az input alatt, teljes szélességben – nem csak
   mobilon. Így akármilyen hosszú a gomb felirata (pl. a szlovák
   "Chcem byť informovaný!"), sosem törik ronda módon két sorba,
   és érintéssel is kényelmesebben megnyomható. */
.stm-nl-input-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.stm-nl-input-row:focus-within { border-color: rgba(255,255,0,0.5); }

.stm-nl-input {
  flex: 1;
  min-width: 180px;   /* ← ennél keskenyebben a gomb lecsúszik */
  background: var(--stm-dark-3);
  border: none;
  color: var(--stm-text);
  font-family: var(--stm-font-body);
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  outline: none;
}
.stm-nl-input::placeholder { color: var(--stm-text-dim); }

.stm-nl-submit {
  background: var(--stm-gold);
  color: var(--stm-dark);
  font-family: var(--stm-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
  width: 100%;
}
.stm-nl-submit:hover { background: var(--stm-gold-l); }
.stm-nl-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Visszajelzés */
.stm-nl-feedback {
  display: none;
  font-size: 0.82rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0;
}
.stm-nl-feedback--success { color: var(--stm-success); }
.stm-nl-feedback--error   { color: var(--stm-error); }
.stm-nl-feedback--info    { color: var(--stm-gold); }

/* GDPR szöveg */
.stm-nl-gdpr {
  font-size: 0.73rem;
  color: var(--stm-text-dim);
  line-height: 1.5;
  margin: 0.75rem 0 0;
}

/* Skip gomb */
.stm-nl-skip {
  display: block;
  margin: 0.85rem auto 0;
  background: none;
  border: none;
  color: var(--stm-text-dim);
  font-family: var(--stm-font-body);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.stm-nl-skip:hover { color: var(--stm-text-muted); }

/* ── NEWSLETTER FOOTER WIDGET ───────────────────────── */
.stm-nl-footer-widget {
  padding: 1.25rem 0;
  border-top: 1px solid var(--stm-border);
  margin-top: 1rem;
}

.stm-nl-fw-title {
  font-family: var(--stm-font-title);
  font-size: 1.1rem;
  color: var(--stm-text);
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.stm-nl-fw-text {
  font-size: 0.8rem;
  color: var(--stm-text-dim);
  margin-bottom: 0.75rem;
}

.stm-nl-fw-row {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.2s;
  max-width: 360px;
}
.stm-nl-fw-row:focus-within { border-color: rgba(255,255,0,0.4); }

.stm-nl-fw-input {
  flex: 1;
  background: var(--stm-dark-3);
  border: none;
  color: var(--stm-text);
  font-family: var(--stm-font-body);
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  min-width: 0;
}
.stm-nl-fw-input::placeholder { color: var(--stm-text-dim); }

.stm-nl-fw-btn {
  background: var(--stm-gold);
  color: var(--stm-dark);
  font-family: var(--stm-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.stm-nl-fw-btn:hover { background: var(--stm-gold-l); }
.stm-nl-fw-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.stm-nl-fw-feedback {
  display: none;
  font-size: 0.78rem;
  margin-top: 0.4rem;
}
.stm-nl-fw-feedback.stm-nl-feedback--success { display: block; color: var(--stm-success); }
.stm-nl-fw-feedback.stm-nl-feedback--error   { display: block; color: var(--stm-error); }
.stm-nl-fw-feedback.stm-nl-feedback--info    { display: block; color: var(--stm-gold); }

/* Responsive */
@media (max-width: 400px) {
  /* A popup form (stm-nl-input-row / stm-nl-submit) már ALAPBÓL
     függőleges + teljes szélességű gombbal jelenik meg, ezért itt
     nem kell külön felülírni – csak a lábléc-form marad. */
  .stm-nl-fw-row { flex-direction: column; }
  .stm-nl-fw-btn { width: 100%; padding: 0.75rem 1.75rem; }
}

/* ══════════════════════════════════════════════════════
   TEAM KÁRTYA – kör fotó + tags frissítés
   ══════════════════════════════════════════════════════ */

.stm-team-card {
  background: var(--stm-dark-2);
  border: 1px solid var(--stm-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s;
  text-align: center;
  /* Bootstrap a sorban (row) alapból egyenlő magasságúra nyújtja az
     oszlopokat (col-*), de a kártyának magának is ki kell töltenie
     ezt a magasságot – enélkül csak a saját tartalmához igazodna. */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.stm-team-card:hover { border-color: rgba(255,255,0,0.25); }

/* Kör fotó wrapper – több légtér felül */
.stm-team-photo-wrap {
  padding: 2.75rem 2rem 0;
  display: flex;
  justify-content: center;
}

/* Kör avatar sárga körvonallal */
.stm-team-avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1.5px solid var(--stm-gold);
  overflow: hidden;
  background: var(--stm-dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(255,255,0,0.12);
}
.stm-team-avatar--empty {
  opacity: 0.5;
}
.stm-team-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Info középre igazítva */
.stm-team-info {
  text-align: center;
  padding: 2rem 2.25rem 2.25rem !important;
}
.stm-team-name {
  font-family: var(--stm-font-body);
  font-size: 1.85rem;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}
/* Keresztnév vastag, vezetéknév vékony – vizuálisan elkülönítve */
.stm-team-name-first {
  font-weight: 700;
}
.stm-team-name-last {
  font-weight: 300;
}
.stm-team-role {
  font-size: 0.95rem;
  color: var(--stm-text-muted);
  margin-bottom: 0.15rem;
}
.stm-team-bio {
  margin-top: 0.35rem;
  line-height: 1.8;
}
.stm-team-social {
  justify-content: center;
}

/* ── NAGYOBB FOTÓ VÁLTOZAT ──────────────────────────── */
.stm-team-photo-wrap--lg {
  padding: 2.5rem 2rem 0;
}
.stm-team-avatar--lg {
  width: 176px;
  height: 176px;
}
.stm-team-avatar--xl {
  width: 260px;
  height: 260px;
}

/* ── NÉV + SZEREPKÖR BADGE-EK (több kicsi, nem 1 hosszú) ── */
.stm-team-header {
  text-align: center;
}
.stm-team-name--white {
  color: var(--stm-text);
  font-size: 1.85rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.stm-team-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}
.stm-team-role-badge {
  display: inline-block;
  background: var(--stm-gold);
  color: var(--stm-dark-3);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── "ISMERJ MEG" TOGGLE – szöveg felül fehérrel, nyíl alatta sárgával,
     keskeny (~1/4 kártyaszélesség), középre igazítva ─────────────── */
.stm-team-toggle {
  width: 42%;
  max-width: 160px;
  /* top: auto -> a flex-oszlopban mindig a legaljára tolódik, így a
     "MEET ME" gomb mindkét kártyán ugyanabban a magasságban lesz,
     függetlenül attól hány sornyi badge van fölötte */
  margin: auto auto 0;
  background: transparent;
  border: none;
  color: var(--stm-text);
  font-family: var(--stm-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.2rem 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.stm-team-toggle:hover {
  opacity: 0.75;
}
.stm-team-toggle-label {
  color: var(--stm-text);
}
.stm-team-chevron {
  color: var(--stm-gold);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
/* Bootstrap collapse: a trigger gomb "collapsed" osztályt kap ha ZÁRVA van,
   és elveszti ha NYITVA – erre építjük a nyíl forgatását */
.stm-team-toggle:not(.collapsed) .stm-team-chevron {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════
   TELJES SZÉLESSÉGŰ KIBONTOTT CSAPATTAG PANEL
   Full-bleed trükk: kitör a .container-xl-ből, a teljes
   böngésző-ablak szélességét kitölti, fekete→sárga gradiens
   ══════════════════════════════════════════════════════ */
.stm-team-fullbleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  overflow: hidden;
  background: var(--stm-gradient-accent);
  padding: 4rem 0;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.stm-team-fullbleed-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* A fotó-oszlop maximum a rács harmadát foglalhatja el – így a
     szövegoszlop akkor sem szorulhat keskeny sávra, ha a kép
     valamiért nagyobbra nőne a vártnál. */
  grid-template-columns: 1fr minmax(0, 33%);
  align-items: center;
  gap: 3rem;
}

.stm-team-fullbleed-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stm-gold);
  margin-bottom: 0.75rem;
}
.stm-team-fullbleed-name {
  font-family: var(--stm-font-body);
  color: var(--stm-text);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
}
.stm-team-fullbleed-divider {
  width: 52px;
  height: 3px;
  background: var(--stm-gold);
  margin-bottom: 1.5rem;
}

/* Kattintás-triggerelt (nem görgetéses) megjelenés a kibontható
   csapat-panelnél – a JS (main.js) minden "Ismerj meg" kattintáskor
   újraindítja, ugyanaz az elv mint a mobil menünél */
.stm-team-click-reveal {
  opacity: 0;
  transform: translateY(20px);
}
.stm-team-collapse.show .stm-team-click-reveal {
  animation: stmTeamClickIn 0.9s ease forwards;
}
.stm-team-collapse.show .stm-team-click-reveal-d1 { animation-delay: 0.25s; }
@keyframes stmTeamClickIn {
  to { opacity: 1; transform: translateY(0); }
}
.stm-team-click-line {
  transform: scaleX(0);
  transform-origin: left;
}
.stm-team-collapse.show .stm-team-click-line {
  animation: stmTeamLineGrow 0.8s ease forwards;
  animation-delay: 0.15s;
}
@keyframes stmTeamLineGrow {
  to { transform: scaleX(1); }
}
.stm-team-fullbleed-bio {
  /* A központi szövegszín-változót használjuk (nem elszigetelt
     hexa-értéket) – ez a legvilágosabb, 17.8:1 kontraszttal (AAA),
     és így ha a színrendszert valaha módosítod, ez is követi. */
  color: var(--stm-text);
  font-size: 0.95rem;
  line-height: 1.85;
  max-width: 52ch;
  margin-bottom: 1rem; /* bekezdések KÖZÖTT – kisebb térköz */
}
/* Az utolsó bekezdés után nagyobb térköz, a következő elem (tagek) előtt */
.stm-team-fullbleed-bio:last-child {
  margin-bottom: 2rem;
}
/* A tagek (skill-tagek, pl. "Sport fotós") desktopon a panel többi
   eleméhez (név, badge-ek, bio) igazodva BALRA álljanak, ne középre */
.stm-team-fullbleed-info .stm-tags--team {
  justify-content: flex-start;
  margin-bottom: 2rem;
}
.stm-team-fullbleed-photo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  /* A panel padding-ja (4rem alul) fölé "nyújtjuk" a képet negatív
     margóval, hogy tényleg a szekció TÉNYLEGES aljáig érjen, ne csak
     a belső padding-határig – az overflow:hidden a szülőn vágja le
     pontosan a valódi szélnél. */
  margin-bottom: -4rem;
}
/* Szabad kivágású PNG (nincs kör-keret, nincs arany szegély) –
   kb. a panel magasságának 90%-áig ér, alulra igazítva, mint a
   mellékelt referenciakép (pl. bleeding az alsó szélig) */
/* Szabad kivágású PNG (nincs kör-keret, nincs arany szegély).
   FONTOS: itt nem használható height:100% – a rács "auto" oszlopa
   a kép méretéhez igazodik, így a kép önmagát növelné korlátlanul,
   a szövegoszlopot pedig egy keskeny sávra szorítaná. Ezért kötött,
   felső korláttal ellátott méret kell. */
.stm-team-fullbleed-photo-img {
  height: clamp(300px, 38vw, 560px);
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45));
}
.stm-team-fullbleed-photo .stm-team-avatar--xl {
  border: none;
  box-shadow: none;
  /* A szülő -4rem margója a végleges PNG kicsúsztatásához kell –
     a kör-avatar (átmeneti állapot, amíg nincs img_full feltöltve)
     ne mozduljon el emiatt, különben alul levágódna. */
  margin-bottom: 4rem;
}

@media (max-width: 767px) {
  /* Mobilon megbízhatóbb megoldás: a panel alsó padding-jét nullázzuk,
     így a képnek nincs mit "átnyúlnia" – természetesen ér a valódi
     aljáig, nem kell a negatív margós trükkre hagyatkozni, ami több
     egymásba ágyazott konténeren (grid → container → panel) át
     mobilon nem mindig viselkedik kiszámíthatóan. */
  .stm-team-fullbleed { padding-bottom: 0; }
  .stm-team-fullbleed-photo { margin-bottom: 0; }
  .stm-team-fullbleed-photo .stm-team-avatar--xl { margin-bottom: 0; }

  .stm-team-fullbleed-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .stm-team-social { justify-content: center; }
  .stm-team-fullbleed-divider { margin-left: auto; margin-right: auto; }
  .stm-team-fullbleed-bio { margin-left: auto; margin-right: auto; }
  .stm-team-avatar--xl { width: 180px; height: 180px; }
  .stm-team-fullbleed-photo-img { height: 240px; }
}

/* ══════════════════════════════════════════════════════
   MOBIL CSAPAT CAROUSEL – egyszerre 1 tag látszik,
   nyilakkal váltható, alatta rögtön a bővített tartalom
   ══════════════════════════════════════════════════════ */
.stm-team-carousel {
  position: relative;
}
.stm-team-mobile-slide {
  background: var(--stm-gradient-accent);
  border-radius: 4px;
  padding-bottom: 2rem;
  overflow: hidden;
}
.stm-team-mobile-details {
  padding: 1.5rem 1.75rem 0;
  text-align: center;
}
.stm-team-mobile-details .stm-team-bio {
  margin-top: 0.75rem;
  line-height: 1.8;
  /* Ugyanaz mint a desktop panel bio-jánál – hogy a két nézet
     között ne legyen eltérés az olvashatóságban */
  color: var(--stm-text);
}
.stm-team-mobile-details .stm-tags {
  max-width: 320px;
  margin: 0.75rem auto 0;
}
.stm-team-mobile-photo-full {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  /* A szülő .stm-team-mobile-slide alsó paddingja (2rem) csak akkor
     kell, ha NINCS nagy fotó (pl. összecsukott állapotban a
     "Ismerj meg" gombnak kell légtér) – ha VAN fotó, ezt a
     paddingot semlegesítjük, hogy a kép a tényleges aljáig érjen. */
  margin-bottom: -2rem;
}
.stm-team-mobile-photo-full .stm-team-fullbleed-photo-img {
  height: 260px;
}

/* Nyíl gombok – NEM a teljes slide magasságában középre (az belelógna
   a szövegbe), hanem a fotó függőleges közepéhez rögzítve */
.stm-team-carousel .carousel-control-prev,
.stm-team-carousel .carousel-control-next {
  top: 128px;
  bottom: auto;
  height: auto;
  transform: translateY(-50%);
  width: 48px;
  opacity: 1;
}
.stm-team-carousel .carousel-control-prev { left: 6px; }
.stm-team-carousel .carousel-control-next { right: 6px; }
.stm-team-carousel-arrow-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Team tag – sárga háttér sötét szöveg */
.stm-tag--team {
  background: var(--stm-gold);
  color: var(--stm-dark-3);

  border-color: var(--stm-gold);
  font-weight: 600;
}
.stm-tag--team:hover { background: var(--stm-gold-l); }

/* Social mini – nagyobb méret */
.stm-social-mini--lg {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.stm-social-mini--lg:hover {
  border-color: var(--stm-gold);
  background: rgba(255,255,0,0.06);
}

/* ── PORTFOLIO FILTER AREA ──────────────────────────── */
.stm-filter-area {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.5rem;
}

/* Portfolio placeholder */
.stm-portfolio-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stm-dark-3);
}

/* ── PLACEHOLDER AVATAR – csak az ikon halványabb, a keret és a
   halo ugyanaz mint a valódi fotónál (100% sárga, 1.5px + halo) ── */
.stm-team-avatar--placeholder .stm-team-avatar-img {
  opacity: 0.7;
}